:root {
  --blue-accent: #176BEA;
  --blue-dark: #214CA6;
  --gray-3: #D6D6D8;
}

.action-link {
  font-weight: 500;
  transition: color 150ms;
  color: var(--blue-accent);
}

.action-link path {
  transition: fill 150ms;
  fill: var(--blue-accent);
}

.action-link svg {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.action-link:hover {
  color: var(--blue-dark);
}

.action-link:hover path {
  fill: var(--blue-dark);

}

.action-link[aria-disabled="true"] {
  pointer-events: none;
  color: var(--gray-3);
}

.action-link[aria-disabled="true"] path {
  fill: var(--gray-3);
}
:root {
  /* TODO: Centralize variables in a single document */

  --gray-250: #98979E;
  --ai-login-linear-gradient: linear-gradient(90deg, #32303E 0%, #847FA4 230.7%);
  --background-color-progress-bar-gradient-bg: #43428C;
  --background-color-progress-bar-gradient-highlight: #D5D5FF;
}

.theme-lawinsider {
  --background-color-progress-bar-gradient-bg: #98979E;
  --background-color-progress-bar-gradient-highlight: #EBEAEC;
}

.bg-ai-gradient {
  background: var(--ai-linear-gradient);
  transition: color 300ms, background 300ms;
}

.simple-ai-primary-btn:disabled {
  background: var(--gray-3);
  color: var(--gray-250);
  cursor: auto;
}

.ai-login-bg {
  background: url(/assets/waves-pattern-3331c0ed6a1cff6a25154c71716247276c9bc42b9efd46d3637d35aceefb070a.svg), var(--ai-login-linear-gradient), no-repeat, center;
  background-size: cover;
}

.ai-loader:first-child {
  background: linear-gradient(
    90deg,
    var(--loader-highlight-color) 25%,
    var(--loader-background-color) 50%,
    var(--loader-highlight-color) 75%
  );
}

.ai-loader:last-child {
  background: linear-gradient(
    90deg,
    var(--loader-background-color) 25%,
    var(--loader-highlight-color) 50%,
    var(--loader-background-color) 75%
  );
}

.ai-loader:first-child,
.ai-loader:last-child {
  background-size: 200% 100%;
  animation: loading 2000ms infinite ease-in-out;
}

.loading-icon:first-child {
  background: linear-gradient(
    90deg,
    var(--background-color-progress-bar-gradient-bg) 0%,
    var(--background-color-progress-bar-gradient-highlight) 100%
  );
}

.loading-icon:first-child {
  background-size: 200% 100%;
  animation: loading 2000ms infinite ease-in-out;
}

.loading-icon-light {
  background: linear-gradient(90deg, #A5A5FF 0%, #EDEDFF 100%);
  background-size: 200% 100%;
  animation: loading 2000ms infinite ease-in-out;
}

.loading-icon-chat-first {
  background: linear-gradient(
    90deg,
    var(--background-color-progress-bar-gradient-bg) 0%,
    var(--background-color-progress-bar-gradient-highlight) 100%
  );
  background-size: 200% 100%;
  animation: loading-chat 3000ms infinite ease-in-out;
}

.loading-icon-chat-second {
  background: linear-gradient(
    90deg,
    var(--background-color-progress-bar-gradient-highlight) 0%,
    var(--background-color-progress-bar-gradient-bg) 100%
  );
  background-size: 200% 100%;
  animation: loading-chat 3000ms infinite ease-in-out;
  animation-delay: 300ms;
}

.ai-card {
  animation: slide-in 500ms ease-in-out;
}

.progress-bar-shimmer {
  background: linear-gradient(90deg, #5655B5 0%, #7B7AE0 50%, #5655B5 100%);
  background-size: 200% 100%;
  animation: loading 2000ms infinite ease-in-out;
}

.progress-bar-track-shimmer {
  background: linear-gradient(90deg, #D5D5FF 0%, #E8E8FF 50%, #D5D5FF 100%);
  background-size: 200% 100%;
  animation: loading 2000ms infinite ease-in-out;
}

@keyframes loading-chat {
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

@keyframes loading {
  0% {
      background-position: 200% 0;
  }

  100% {
      background-position: -200% 0;
  }
}

@keyframes slide-in {
  0% {
      opacity: 0;
      transform: translateX(-200%);
  }

  80% {
    opacity: 0.1;
  }

  100% {
      opacity: 1;
      transform: translateX(0);
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import SimpleAI styles */
@import './simpleai/index.css';

/* Utilities */
@layer utilities {
  .centered-flex {
    @apply flex items-center justify-center;
  }

  .centered-flex-col {
    @apply flex flex-col items-center justify-center;
  }

  .centered-absolute {
    @apply absolute inset-0 m-auto;
  }

  .flex-between {
    @apply flex items-center justify-between;
  }

  .main-container-padding {
    @apply px-5 py-7 lg:px-14 md:pt-12;
  }

  .main-container-padding-offset {
    @apply -mx-5 -my-7 lg:-mx-14 md:-mt-12;
  }

  .focusable {
    @apply focus:ring-1 focus:ring-blue-accent focus:shadow-[0_0_6px_0_rgb(23,107,234)];
  }

  .ai-focusable {
    @apply focus:ring-1 focus:border-purple-ai focus:shadow-[0_0_6px_0_#7978FF]
  }

  /* Make the native search clear button have pointer cursor */
  input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
  }

  .positioned-centered {
    @apply -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2;
  }

  .removed {
    display: none; /* Same as `hidden`, but this class shouldn't be toggled */
  }

  .unavailable { /* Use this as a second `hidden` in cases where two stimulus hide the same element  */
    display: none;
  }

  .relative-focus { /* For elements that contain focusable-positioned children  */
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .trix-content ul,
  trix-editor ul {
    list-style: disc;
    padding-left: 1.5rem;
  }

  .trix-content ol,
  trix-editor ol {
    list-style: decimal;
    padding-left: 1.5rem;
  }

  .horizontal-bleed::after { /* For new markup */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: currentcolor;
    box-shadow: 0 0 0 100vmax currentcolor;
    clip-path: inset(0 -100vmax 0);
  }

  .full-bleed-white { /* For legacy markup */
    background-color: white;
    box-shadow: 0 0 0 100vmax white;
    clip-path: inset(0 -100vmax -100vmax);
  }

  /* See: https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas */
  .autogrow {
    display: grid;
    overflow: auto;

    & > *,
    &::after {
      grid-area: 1 / 1 / 2 / 2;
      word-break: break-word;
    }

    &::after {
      content: attr(data-replicated-value) " ";
      white-space: pre-wrap;
      visibility: hidden;
    }
  }

  .animate-sweep {
    background: linear-gradient(
      270deg,
      rgba(226, 232, 240, 0) 0%,
      rgba(226, 232, 240, 0.8) 50%,
      rgba(226, 232, 240, 0) 100%
    );
    background-size: 200% 100%;
    animation: sweep 1.5s infinite;
  }

  @keyframes sweep {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
}

/* Components */
@layer components {
  .primary-btn {
    @apply px-6 py-2 font-semibold text-center transition-colors rounded-full cursor-pointer bg-yellow-1 sm:px-10 hover:bg-yellow-2 disabled:bg-gray-3 disabled:text-gray-250 disabled:cursor-auto;
  }

  /* New unified button style used in repository actions (v2 look) */
  .primary-btn-v2 {
    @apply inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 transition-colors duration-200 bg-white border border-gray-300 rounded-md shadow-sm gap-x-2 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  /* Slim variant — 32px tall toolbar button, rounded-lg */
  .primary-btn-v2--sm {
    @apply h-8 px-3 py-0 rounded-lg shadow-none;
  }

  /* Icon-only variant — 32x32 square with centered icon */
  .primary-btn-v2--icon {
    @apply w-8 h-8 px-0 py-0 justify-center rounded-lg shadow-none gap-x-0;
  }

  /* Emphasis variant for primary actions in footers */
  .primary-btn-v2--emphasis {
    @apply text-gray-900 bg-yellow-1 border-yellow-1 hover:bg-yellow-2 focus:ring-yellow-500;
  }

  /* Dark variant — white text on dark gray background, for primary "save/commit" actions */
  .primary-btn-v2--dark {
    @apply text-white bg-gray-1 border-gray-1 hover:bg-gray-2 hover:border-gray-2 focus:ring-gray-500;
  }

  .secondary-btn {
    @apply px-6 py-2 font-semibold text-center border-2 rounded-full border-gray-1 bg-inherit sm:px-10;
  }

  .simple-ai-primary-btn {
    @apply font-semibold text-center text-white transition cursor-pointer py-skin-button-primary-height px-skin-button-primary-width text-skin-button-primary rounded-skin-button-primary bg-gradient-to-r from-skin-button-primary-from to-skin-button-primary-to hover:from-skin-button-primary-hover-from hover:via-skin-button-primary-hover-via hover:to-skin-button-primary-hover-to;
  }

  .simple-ai-secondary-btn {
    @apply font-semibold text-center text-white transition cursor-pointer py-skin-button-secondary-height px-skin-button-secondary-width text-skin-button-secondary rounded-skin-button-secondary border-skin-color-button-secondary border-skin-button-secondary bg-skin-button-secondary hover:bg-skin-button-secondary-hover;
  }

  .simple-ai-tertiary-btn {
    @apply flex items-center px-1 font-semibold text-center text-white transition cursor-pointer text-skin-button-tertiary rounded-skin-button-tertiary bg-skin-button-tertiary hover:bg-skin-button-tertiary-hover;
  }

  .simple-ai-small-primary-btn {
    @apply py-1.5 px-3 text-xs font-semibold text-center h-full cursor-pointer transition
    rounded-skin-button-small text-skin-button-small-primary bg-skin-button-small-primary
    hover:text-skin-button-small-primary-hover hover:bg-skin-button-small-primary-hover
    disabled:text-skin-button-small-primary-disabled disabled:bg-skin-button-small-primary-disabled disabled:cursor-not-allowed
  }

  .simple-ai-small-secondary-btn {
    @apply py-[5px] px-3 text-xs font-semibold text-center h-full cursor-pointer transition
    rounded-skin-button-small border-skin-button-small-secondary border-skin-color-button-small-secondary text-skin-button-small-secondary bg-skin-button-small-secondary
    hover:text-skin-button-small-secondary-hover hover:bg-skin-button-small-secondary-hover hover:border-skin-color-button-small-secondary-hover
    disabled:text-skin-button-small-secondary-disabled disabled:bg-skin-button-small-secondary-disabled disabled:border-skin-color-button-small-secondary-disabled disabled:cursor-not-allowed
  }

  .simple-ai-xs-secondary-btn {
    @apply py-1 px-2 text-sm font-semibold text-center cursor-pointer transition
    rounded-skin-button-small border-skin-button-small-secondary border-skin-color-button-small-secondary text-skin-button-small-secondary bg-skin-button-small-secondary
    hover:text-skin-button-small-secondary-hover hover:bg-skin-button-small-secondary-hover hover:border-skin-color-button-small-secondary-hover
    disabled:text-skin-button-small-secondary-disabled disabled:bg-skin-button-small-secondary-disabled disabled:border-skin-color-button-small-secondary-disabled disabled:cursor-not-allowed
  } 

  .simple-ai-highlight-btn {
    @apply font-semibold text-center text-white cursor-pointer bg-skin-button-highlight hover:bg-skin-button-highlight-hover;
  }

  .primary-btn-black {
    @apply px-5 py-2 font-semibold text-center text-white transition-colors duration-300 rounded-full cursor-pointer bg-gray-1 sm:px-10 disabled:bg-gray-250 disabled:text-gray-3;
  }

  .primary-btn-purple {
    @apply px-5 py-2 font-semibold text-center text-white transition-colors duration-300 rounded-full cursor-pointer bg-[#7978FF] sm:px-10 disabled:bg-gray-250 disabled:text-gray-3;
  }

  .primary-btn-outline {
    @apply px-2 py-1 font-semibold text-center border-2 rounded-full border-yellow-1 hover:bg-yellow-4;
  }

  .sidebar-menu {
    @apply flex flex-col w-sidebar-width pt-5 px-4 whitespace-nowrap transition-[width] duration-300 lg:pt-9;
  }

  .default-avatar {
    @apply text-xs font-bold tracking-widest text-white uppercase rounded-full cursor-default bg-gray-250;
  }

  .primary-tag {
    @apply py-2.5 px-4 rounded-full text-sm font-medium text-gray-2 bg-gray-4;
  }

  .secondary-tag {
    @apply px-2 py-1 font-light rounded-lg text-gray-250 bg-gray-4;
  }

  .primary-input {
    @apply w-full px-4 py-2 font-normal rounded-skin-input border-skin-input border-skin-color-input disabled:bg-gray-5;
  }

  /* Smart Filters input layout per design */
  .smart-filter-input {
    @apply flex h-11 px-4 justify-between items-center self-stretch rounded-[10px];
  }

  .smart-filter-date-input {
    @apply h-11 px-4 rounded-[10px];
  }

  .ai-primary-input {
    @apply w-full py-2.5 px-4 text-sm rounded-skin-input border-skin-input border-skin-color-input transition-all
    hover:border-skin-color-input-hover focus:border-skin-color-input-focus focus:shadow-skin-input-focus disabled:bg-skin-input-disabled disabled:border-skin-color-input-disabled
    placeholder:text-skin-input-placeholder disabled:text-skin-input-disabled disabled:placeholder:text-skin-input-placeholder-disabled;
  }

  .field-identifier-input {
    @apply relative;

    &::before,
    &::after {
      @apply absolute top-1/2 -translate-y-1/2 text-skin-input-placeholder font-mono text-sm pointer-events-none;
    }

    &::before {
      content: "{{";
      @apply left-2;
    }

    &::after {
      content: "}}";
      @apply right-2;
    }

    input {
      @apply pl-8 pr-8;
    }
  }

  .selection-input {
    @apply border-gray-3 text-gray-dark focus:ring-0 focus:ring-offset-0 disabled:text-gray-3;
  }

  .ai-chat-input {
    @apply w-[810px] max-w-full h-[125px] rounded-[18px] border border-gray-4 bg-white p-4 flex flex-col transition-colors;
  }

  .ai-chat-input:hover,
  .ai-chat-input--hover {
    border-color: #98979E;
  }

  .ai-chat-input:focus-within,
  .ai-chat-input--active {
    border-color: #FFDB1D;
    box-shadow: 0 0 0 1px #FFDB1D, 0 0 6px 0 rgba(255, 219, 29, 0.35);
  }

  .ai-chat-input--filled {
    border-color: #FFDB1D;
    box-shadow: none;
  }

  .ai-chat-input__textarea {
    @apply w-full flex-1 resize-none border-0 p-0 bg-transparent text-base text-gray-1 placeholder:text-gray-250 focus:outline-none focus:ring-0;
  }

  .ai-chat-input__actions {
    @apply mt-3 flex items-center justify-end gap-3;
  }

  .ai-chat-input__hint {
    @apply inline-flex items-center gap-1.5 text-xs text-gray-250;
  }

  .ai-chat-input__kbd {
    @apply inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded border border-gray-3 bg-white text-gray-2 font-sans text-[11px] leading-none;
  }

  .ai-chat-input__ask {
    @apply inline-flex items-center justify-center w-10 h-10 rounded-full border border-gray-3 bg-white text-gray-250 cursor-not-allowed pointer-events-none transition-colors;
  }

  .ai-chat-input__ask svg {
    @apply w-4 h-4;
  }

  .ai-chat-input:focus-within .ai-chat-input__ask,
  .ai-chat-input--active .ai-chat-input__ask,
  .ai-chat-input--filled .ai-chat-input__ask {
    @apply bg-yellow-1 border-yellow-1 text-gray-1 cursor-pointer pointer-events-auto hover:bg-yellow-2 hover:border-yellow-2;
  }

  .modal {
    @apply py-7 px-6 rounded-skin-modal bg-white overscroll-contain overflow-scroll max-h-[80vh];
  }

  .repository-columns-modal {
    @apply px-4 py-4 overflow-visible bg-white border border-gray-200 rounded-lg shadow-lg;
  }

  .scrollable-modal {
    @apply h-[90vh] max-h-[40rem] overflow-y-auto;
  }

  .login-form-outer-wrapper {
    @apply flex flex-col items-center w-[min(90%,28.125rem)] pt-7 px-7 rounded-xl bg-white xs:pt-10 xs:px-11;
  }

  .user-auth-form-title {
    @apply flex flex-col items-center mb-6 text-4xl font-semibold text-center gap-y-2;
  }

  .tooltip, .tooltip-bottom {
    @apply w-0 h-0 px-2.5 py-1 rounded-lg text-sm text-center leading-6 whitespace-nowrap font-light bg-gray-1 text-white opacity-0
    overflow-hidden shadow-[0,4px,20px,0,rgba(255,255,255,0.20)] peer-hover:w-fit peer-hover:h-auto peer-hover:opacity-100 peer-hover:overflow-visible;
  }

  .toggle {
    @apply relative w-9 h-[18px] rounded-full bg-gray-250 transition-colors hover:bg-gray-600 peer-checked:bg-blue-600 peer-disabled:hover:bg-gray-400 peer-disabled:cursor-not-allowed;
  }

  .toggle::after {
    content: '';
    @apply absolute top-[3px] left-[3px] w-3 h-3 bg-white rounded-full transition-all peer-checked:translate-x-[18px];
  }

  .filter-pill {
    @apply block px-3 py-1 text-sm text-center rounded-full text-gray-250;
  }

  .interactive-link {
    @apply flex items-center gap-x-2 p-1 rounded-md text-blue-accent transition-colors [&_path]:fill-blue-accent hover:bg-blue-alice;
  }

  .interactive-link-error {
    @apply flex items-center gap-x-2 p-1 rounded-md text-sm font-semibold text-red-error transition-colors [&_path]:fill-red-error hover:bg-red-50;
  }

  .interactive-link-ai {
    @apply flex items-center gap-x-2 p-1 rounded-skin-button-tertiary text-skin-button-tertiary transition-colors [&_path]:fill-skin-accent hover:bg-skin-button-tertiary-hover hover:text-skin-button-tertiary-hover;
  }

  .interactive-control {
    @apply p-1.5 rounded-md transition-colors [&_path]:fill-gray-2 hover:bg-gray-4;
  }

  .down-arrow-opened {
    @apply -rotate-180 [&>path]:fill-yellow-1;
  }

  .selectable-card_card {
    @apply flex flex-col items-start px-4 py-6 transition-colors bg-white border gap-y-2 border-gray-3 rounded-xl;
  }

  .workflow-card {
    @apply border border-gray-3 bg-white transition-colors;
  }

  .workflow-card:hover {
    @apply border-gray-250 bg-gray-5;
  }

  .workflow-card.workflow-card-active,
  .workflow-card:has(.workflow-card-kebab.dropdown-open) {
    @apply border-blue-accent bg-white;
  }

  .insights-metric-card {
    @apply flex flex-col rounded-2xl border px-6 pt-6 pb-9;
  }

  .default-options-open {
    @apply grid-cols-[1fr_auto];
  }

  .link-underlined {
    @apply underline transition-colors whitespace-nowrap text-blue-accent hover:text-blue-500;
  }

  .link {
    @apply transition-colors whitespace-nowrap text-blue-accent hover:text-blue-500;
  }

  .simple-ai-redlining {
    @apply [&>del]:text-red-error [&>del]:line-through [&>ins]:text-blue-accent [&>ins]:underline;
  }
}

.breaker::before,
.breaker::after {
  content: '';
  flex-grow: 1;
  border-top: 1px solid #D6D6D8;
}

.tooltip::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin: 0 auto;
  transform: rotate(45deg) translateY(50%);
  background-color: #32303E;
}

.tooltip-bottom::after {
  content: '';
  position: absolute;
  inset: 0;
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin: 0 auto;
  transform: rotate(45deg) translateY(-50%);
  background-color: #32303E;
}

.tooltip-right {
  @apply absolute left-full top-0 mt-1 ml-2 w-0 h-0 px-2.5 py-1 rounded-lg text-sm text-left leading-6 whitespace-normal font-light bg-gray-1 text-white opacity-0 overflow-hidden shadow-[0_4px_20px_0_rgba(0,0,0,0.1)] peer-hover:w-fit peer-hover:max-w-[200px] peer-hover:h-auto peer-hover:opacity-100 peer-hover:overflow-visible;
}

.tooltip-right::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: rotate(45deg) translate(-50%, -50%);
  width: 0.625rem;
  height: 0.625rem;
  background-color: #32303E;
}

.tooltip-left {
  @apply absolute right-full top-1/2 -translate-y-1/2 mr-2 w-0 h-0 px-2.5 py-1 rounded-lg text-sm text-left leading-6 whitespace-normal font-light bg-gray-1 text-white opacity-0 overflow-hidden shadow-[0_4px_20px_0_rgba(0,0,0,0.1)] peer-hover:w-max peer-hover:max-w-[220px] peer-hover:h-auto peer-hover:opacity-100 peer-hover:overflow-visible;
}

.tooltip-left::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%) rotate(45deg);
  width: 0.625rem;
  height: 0.625rem;
  background-color: #32303E;
}

.no-scrollbar {
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  width: 0;
}

.sortable-heading:first-child > div {
  width: 18.75rem;
}

.repository .sortable-heading:first-child > div {
  width: auto;
  min-width: max-content;
  max-width: 18.75rem;
}

.playbook-items-table .sortable-heading:first-child > div {
  width: 2rem;
}

.routing-table .sortable-heading:first-child > div {
  width: auto;
}

.ai_chat_message {
  @apply text-sm;

  /* Headings */
  h1 {
    @apply mb-5 text-xl font-semibold mt-7 first:mt-0;
  }
  h2 {
    @apply mb-3 text-lg font-semibold mt-7 first:mt-0;
  }
  h3 {
    @apply mt-5 mb-3 text-base font-semibold first:mt-0;
  }
  h4 {
    @apply mt-5 mb-3 text-sm font-semibold first:mt-0;
  }

  /* Paragraphs */
  p {
    @apply mb-3 leading-relaxed first:mt-0 last:mb-0;
  }

  /* Lists */
  ul {
    @apply pl-6 mb-3 list-disc last:mb-0;
  }

  ol {
    @apply pl-6 mb-3 list-decimal last:mb-0;
  }

  li {
    @apply mb-1 last:mb-0;
  }

  li li {
    @apply mb-0.5 last:mb-0;
  }

  li > p {
    @apply mb-0;
  }

  /* Code blocks */
  pre {
    @apply p-3 mb-3 overflow-x-auto break-words whitespace-pre-wrap bg-gray-100 rounded-lg;
  }

  code {
    @apply bg-gray-100 rounded px-1 py-0.5 text-xs text-gray-1 font-mono whitespace-normal break-words;
  }

  /* Ensure code inside pre blocks wraps properly */
  pre > code {
    @apply block w-full break-words whitespace-pre-wrap;
  }

  /* Blockquotes */
  blockquote {
    @apply pl-3 my-3 italic border-l-4 border-gray-300;
  }

  /* Links */
  a {
    @apply text-blue-600 underline hover:text-blue-800;
  }

  /* Tables */
  table {
    @apply block overflow-scroll whitespace-nowrap max-w-[min(90dvw,1200px)] border-collapse mb-3;
  }

  th {
    @apply bg-gray-100 border px-3 py-1.5 text-left;
  }

  td {
    @apply border px-3 py-1.5;
  }

  /* Strong and emphasis */
  strong {
    @apply font-bold;
  }

  em {
    @apply italic;
  }

  /* Thematic break */
  hr {
    @apply my-5 border-t border-gray-300;
  }
}

.repository-chat-message {
  /* Headings */
  h1 {
    @apply mt-8 mb-6 text-2xl font-semibold first:mt-0;
  }
  h2 {
    @apply mt-8 mb-4 text-xl font-semibold first:mt-0;
  }
  h3 {
    @apply mt-6 mb-4 text-lg font-semibold first:mt-0;
  }
  h4 {
    @apply mt-6 mb-4 text-base font-semibold first:mt-0;
  }

  /* Paragraphs */
  p {
    @apply mb-4 leading-relaxed first:mt-0 last:mb-0;
  }

  /* Lists */
  ul {
    @apply pl-8 mb-4 list-disc last:mb-0;
  }

  ol {
    @apply pl-8 mb-4 list-decimal last:mb-0;
  }

  li {
    @apply mb-2 last:mb-0;
  }

  /* Code blocks */
  pre {
    @apply p-4 mb-4 overflow-x-auto break-words whitespace-pre-wrap bg-gray-100 rounded-lg;
  }

  code {
    @apply bg-gray-100 rounded px-1 py-0.5 text-sm font-mono whitespace-normal break-words;
  }

  /* Ensure code inside pre blocks wraps properly */
  pre > code {
    @apply block w-full break-words whitespace-pre-wrap;
  }

  /* Blockquotes */
  blockquote {
    @apply pl-4 my-4 italic border-l-4 border-gray-300;
  }

  /* Links */
  a {
    @apply text-blue-600 underline hover:text-blue-800;
  }

  /* Tables */
  table {
    @apply block overflow-auto whitespace-nowrap max-w-[min(95dvw,1400px)] border-collapse mb-4;
  }

  th {
    @apply px-4 py-2 text-left bg-gray-100 border;
  }

  td {
    @apply px-4 py-2 border bg-gray-5;
  }

  /* Strong and emphasis */
  strong {
    @apply font-bold;
  }

  em {
    @apply italic;
  }

  /* Thematic break */
  hr {
    @apply my-6 border-t border-gray-300;
  }
}

/* Animations */
.animate__animated.animate__slideInLeft,
.animate__animated.animate__slideOutLeft {
  --animate-duration: 200ms;
}

/* Buttons and Icons */
input[type='checkbox'][data-button='toggle']:disabled ~ span.toggle-bg{
  background-color: #EDECEE;
}

input[type='checkbox'][data-button='toggle']:checked ~ span.toggle-bg > span.toggle-slider{
  right: 4px;
}

a.active svg:first-child path {
  fill: #FFDB1D;
}

/* Custom responsive */
@media (max-width: 1023px) {
  .only-desktop {
    display: none;
  }
}

@media (min-width: 1024px) {
  aside.steps {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(20%, 260px);
    padding: 8.18em 0 0 2.5em;
    background-color: white;
  }
}

@media (max-height: 400px) {
  .modal {
    height: 90vh;
  }
}

/* Pagy */
.pagy-nav.pagination {
  @apply inline-flex -space-x-px rounded-md shadow-sm;
}
.pagy {
  @apply flex space-x-1 text-sm font-semibold text-gray-500;
  a:not(.gap) {
    @apply block px-3 py-1 bg-gray-200 rounded-lg;
    &:hover {
      @apply bg-gray-300;
    }
    &:not([href]) {
      @apply text-gray-300 bg-gray-100 cursor-default;
    }
    &.current {
      @apply text-white bg-gray-400;
    }
  }
  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
    input {
      @apply bg-gray-100 border-none rounded-md;
    }
  }
}

.pagy-v2 .pagy {
  @apply flex items-center gap-x-1 text-sm font-normal text-gray-2;
  a {
    @apply inline-flex items-center justify-center min-w-[2rem] h-8 px-2 rounded-md no-underline text-gray-2;
    &[href]:hover {
      @apply bg-gray-4;
    }
    &:not([href]) {
      @apply text-gray-3 cursor-not-allowed;
    }
    &.current {
      @apply font-semibold text-white rounded-md;
      background-color: #32303E;
    }
  }
}

.highcharts-x-axis, .highcharts-y-axis {
  font-size: 20px;
}

@media (max-width: 480px) {
  .highcharts-x-axis, .highcharts-y-axis {
    font-size: 12px;
  }
}

.item-hover:has(> section > .results-section > div > article:only-child) {
  @apply hover:bg-skin-card-hover cursor-pointer;
}

.nested-item-hover:has(+ *),
.nested-item-hover:not(:first-child) {
  @apply cursor-pointer hover:bg-skin-card-hover;
}

/* Shadow on scroll */

.shadow-on-scroll-left::after {
  content: "";
  position: absolute;
  top: 0;
  width: 15px;
  height: 100%;
  right: -15px;
  animation: shadow-on-scroll-left linear forwards;
  animation-timeline: scroll(x nearest);
}

@keyframes shadow-on-scroll-left {
  0% { box-shadow: none; }
  1% { box-shadow: inset 15px 0 15px -15px rgba(136, 136, 136, 0.40); }
  100% { box-shadow: inset 15px 0 15px -15px rgba(136, 136, 136, 0.40); }
}

.shadow-on-scroll-right::before {
  content: "";
  position: absolute;
  top: 0;
  width: 15px;
  height: 100%;
  left: -15px;
  animation: shadow-on-scroll-right linear forwards;
  animation-timeline: scroll(x nearest);
}

@keyframes shadow-on-scroll-right {
  0% { box-shadow: inset -15px 0 15px -15px rgba(136, 136, 136, 0.40); }
  99% { box-shadow: inset -15px 0 15px -15px rgba(136, 136, 136, 0.40); }
  100% { box-shadow: none; }
}

/* Add explicit borders to all table cells */
.repository .sortable-table {
  border-collapse: separate;
  border-spacing: 0;
}

/* Add bottom borders to all cells */
.repository .sortable-table td {
  border-bottom: 1px solid theme('colors.gray.3');
}

/* Add top border only to first row */
.repository .sortable-table tbody tr:first-child td {
  border-top: 1px solid theme('colors.gray.3');
}

/* Fix for sticky columns */
.repository .sortable-table tbody tr td:first-child,
.repository .sortable-table tbody tr td.action-cell {
  position: sticky !important;
  background-color: white;
  /* No need to repeat border styles as they inherit from the td selector above */
}

/* Add top border to the action header cell */
.repository .sortable-table .action-header-cell
{
  border-top: 1px solid theme('colors.gray.3');
}

/* Divider between the last data column and the sticky action column */
.repository .sortable-table .action-header-cell,
.repository .sortable-table tbody tr td.action-cell {
  border-left: 1px solid theme('colors.gray.3');  
}

.repository .sortable-table tbody tr:nth-child(odd) td:first-child,
.repository .sortable-table tbody tr:nth-child(odd) td.action-cell {
  background-color: white;
}

/* Ensure hover works on all cells including sticky ones */
.repository .sortable-table tbody tr:hover td {
  background-color: theme('colors.gray.350');
}

/* Explicitly set hover for sticky columns to override their background */
.repository .sortable-table tbody tr:hover td:first-child,
.repository .sortable-table tbody tr:hover td.action-cell {
  background-color: theme('colors.gray.350') !important;
}

.sortable-table tbody tr:nth-child(odd) td.sticky .dropdown-container {
  background-color: white !important;
}

.sortable-table tbody tr:hover td.sticky .dropdown-container {
  background-color: theme('colors.gray.350') !important;
}

/* Ensure dropdowns and modals appear above tables */
.dropdown-menu {
  z-index: 100 !important;
}

/* Preserve hover behavior */
.sortable-table tbody tr:hover .action-cell {
  background-color: theme('colors.gray.350');
}

.requests-table tbody tr:hover .action-cell {
  background-color: theme('colors.gray.4');
}

/* Headway Widget Badge - Prevent jumping animation */
/* Following official Headway documentation: https://docs.headwayapp.co/widget */
#HW_badge.HW_animated {
  animation: none !important;
  transform: none !important;
}

/* Ensure the parent link has relative positioning for proper badge placement */
.headway-widget-link {
  position: relative !important;
  display: inline-block !important;
}

/* AI Query table styles */
.ai-query-table {
  border-collapse: separate;
  border-spacing: 0;
}

.ai-query-table td {
  border-bottom: 1px solid #D1D5DB;
}

.ai-query-table tbody tr:first-child td {
  border-top: 1px solid #D1D5DB;
}

/* Home */

.home-background-gradient {
  background:
  radial-gradient(
    circle at center,
    rgba(255, 220, 80, 0.12) 0%,
    rgba(255, 220, 80, 0.06) 44%,
    rgba(255, 220, 80, 0.02) 78%,
    rgba(255, 220, 80, 0) 100%
  );
}
button[data-control="destroy"],
a[data-control="destroy"] {
  display: none;
}

div[data-model-name="AuthorizedEmailDomain"] a[data-control="destroy"],
div[data-model-name="AuthorizedEmailDomain"] button[data-control="destroy"],
div[data-model-name="IdpConfig"] a[data-control="destroy"],
div[data-model-name="IdpConfig"] button[data-control="destroy"],
div[data-model-name="Playbook"] a[data-control="destroy"],
div[data-model-name="Playbook"] button[data-control="destroy"],
div[data-model-name="Webhook"] a[data-control="destroy"],
div[data-model-name="Webhook"] button[data-control="destroy"],
div[data-model-name="WebhookEvent"] a[data-control="destroy"],
div[data-model-name="WebhookEvent"] button[data-control="destroy"] {
  display: block;
  svg {
    display: block;
  }
}

.CodeMirror-sizer {
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.modal-container {
  overflow: hidden;
  overscroll-behavior: none;
}

.modal-container .modal-body {
  overscroll-behavior: contain;
  max-width: 64rem !important;
}

@media (min-width: 1024px) {
  .modal-container .modal-body {
    width: 75% !important;
  }
}
/* Variables */
:root {
  --mobile-header-height: 3.125rem; /* 50px */
  --container-max-width: 1536px;
}

/* Custom fonts */
/* Metropolis */
@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-Thin-cd9fba7e3f1a33175fabf903f9a59d31ae7d20340f94082624cfe242d892ddfa.otf) format('opentype');
  font-style: normal;
  font-weight: 100;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-ThinItalic-0877ff579827d5d24588ad36169d5ea8b53eda0295471654f6adbdd7963e0d54.otf) format('opentype');
  font-style: italic;
  font-weight: 100;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-ExtraLight-f2785ffef379c791117436f853aa2d591c054c30f55db789e7aad0428c2457a5.otf) format('opentype');
  font-style: normal;
  font-weight: 200;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-ExtraLightItalic-e40b3cebd8747b46e78c04c4f8494976effc23fcca40760d4f3e2c3d00f4675e.otf) format('opentype');
  font-style: italic;
  font-weight: 200;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-Light-2bbc6d79c8253c1a1e7197dc384568082dcb7015dd33a7955de78df3196845c2.otf) format('opentype');
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-LightItalic-206d984c2c1ef12b5296c713785e97525144640beb0a0e256acda705422ce986.otf) format('opentype');
  font-style: italic;
  font-weight: 300;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-Regular-499e4f4b0b46578297555be306415bd569d292117d44353a2f835421fca48d43.otf) format('opentype');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-RegularItalic-a35de32d744b87bf94a52eab7baf94ce81ac6dba7866af818f3a4bc74561bfd2.otf) format('opentype');
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-Medium-608b20327a932c2da32ba71fc1957962d482f36a2043d0aab17805db1aaca1d8.otf) format('opentype');
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-MediumItalic-fc9d7969c3fd98de184e42762fd18fb3ef0372ed3711fa375d6406745ae56b4a.otf) format('opentype');
  font-style: italic;
  font-weight: 500;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-SemiBold-ef3debc4225a8188bb3c083f33cd0b8b3992ee1de75d8d5411fb596350c6e561.otf) format('opentype');
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-SemiBoldItalic-2be5d6fb6fa5ea3f1bc605761f51875919f4d9006ad1c619eb7e98c9be005372.otf) format('opentype');
  font-style: italic;
  font-weight: 600;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-Bold-663b24269879a35c18433978eff1e3deae80eb5764673a7644605a4bcd640143.otf) format('opentype');
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-BoldItalic-3f7c7fc926a537aef135a5eac401d573f649617df0ad74c8bc2232bca62eb635.otf) format('opentype');
  font-style: italic;
  font-weight: 700;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-ExtraBold-d2f46f6a10be3ebfdb6cb4c8d0e54d83508c4f42545303227f70b327a4df01bc.otf) format('opentype');
  font-style: normal;
  font-weight: 800;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-ExtraBoldItalic-e3f4f9f9b2469e854a8eb792929a0c9a3b520b403666da612d1cb8f481c1d82b.otf) format('opentype');
  font-style: italic;
  font-weight: 800;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-Black-a67ca27a4681ed7bbf94c543bc29195cd41a8d2ab9d69a0dd6cbcb1abd46b134.otf) format('opentype');
  font-style: normal;
  font-weight: 900;
}

@font-face {
  font-family: 'Metropolis';
  src: url(/assets/Metropolis-BlackItalic-8d2cfed2c319bc60a3c76cf8a261530a89a3930a30861353496fa5c8364d8c5b.otf) format('opentype');
  font-style: italic;
  font-weight: 900;
}

/* Ubuntu */
@font-face {
  font-family: 'Ubuntu';
  src: url(/assets/Ubuntu-Regular-655d303b0443606d1c61cd53d3d2990e3ce1cce396b95620401dae901bb18084.ttf) format('truetype');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Ubuntu';
  src: url(/assets/Ubuntu-Italic-c1e73f950328929183b7bd7766686a7e77a8c2f647a196b694dc6a2497d5bd9e.ttf) format('truetype');
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: 'Ubuntu';
  src: url(/assets/Ubuntu-Light-10bece4eef1c62763b0d4c22bd555da4ea25e67eafe5cad921192ff007846f0d.ttf) format('truetype');
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'Ubuntu';
  src: url(/assets/Ubuntu-LightItalic-d0eebee8df9a577f705d50ae181bb6f4654266adb92530709e75d9b1711d5601.ttf) format('truetype');
  font-style: italic;
  font-weight: 300;
}

@font-face {
  font-family: 'Ubuntu';
  src: url(/assets/Ubuntu-Medium-db01d20d6957f22a33b16e76decfb391dea17f50a88f58fcbb55764690931a3e.ttf) format('truetype');
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'Ubuntu';
  src: url(/assets/Ubuntu-MediumItalic-d1b502c37dafaefb4891d86db5aaaeb10be7bd07f5ce690d5ace1751464c1208.ttf) format('truetype');
  font-style: italic;
  font-weight: 500;
}

@font-face {
  font-family: 'Ubuntu';
  src: url(/assets/Ubuntu-Bold-89a0424c0be1b9ab6174889e04a7d23585fd54dd5a03d782355889bd620c9ad6.ttf) format('truetype');
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: 'Ubuntu';
  src: url(/assets/Ubuntu-BoldItalic-e13b61a251e3bd86f36eaf10f2ff0e079885bd7eb7b75cf9741df18a7ea8e8ff.ttf) format('truetype');
  font-style: italic;
  font-weight: 700;
}

/* Flexbox */
.flex svg {
  flex-shrink: 0;
}
.choices{
  border-radius: .5rem;
}

.choices.is-disabled .primary-input {
  background-color: #f9f9f9;
}

.choices__inner{
  background-color: white;
  border: 1px solid #D6D6D8;
  border-radius: .5rem;
}

.choices__list{
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
}

/* Import Permissions */

/* Import permissions multi-selects: prevent 1ch cloned input collapse */
.import-permissions-choices .choices__input.choices__input--cloned {
  width: 15ch !important;
  min-width: 15ch !important;
  border-radius: .5rem !important;
}

.import-permissions-choices .choices__list.choices__list--multiple {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.375rem;
  max-height: 9.5rem;
  overflow-y: auto;
}

.import-permissions-choices .choices__list.choices__list--multiple .choices__item {
  margin: 0 !important;
  padding: 0.25rem 0.625rem !important;
  border: 1px solid #D6D6D8 !important;
  border-radius: 0.5rem !important;
  background-color: #F5F5F6 !important;
  color: #5B5965 !important;
}

.import-permissions-choices .choices__list.choices__list--multiple .choices__button {
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  background-image: url(/assets/x-mark-black-5f261429973d0544c26f896bb365b81d1f24ec55196e07e22862cfea7fd47ece.svg);
  background-size: cover;
}

.import-permissions-choices .choices.is-focused .choices__inner,
.import-permissions-choices .choices.is-open .choices__inner,
.import-permissions-choices .choices__inner:focus-within {
  border-color: #D6D6D8 !important;
  box-shadow: none !important;
}

.import-permissions-choices .choices__input.choices__input--cloned:focus {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
}

/* Improve inline search input sizing in multi-selects */
/* Smart Filters multi-select layout: chips row then full-width search input below */
div.primary-input.smart-filter-input {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px 16px;
  position: relative;
  min-height: 44px; /* match other inputs baseline height */
  height: auto; /* grow with selected options */
}
div.primary-input.smart-filter-input > .choices__list.choices__list--multiple { order: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; width: 100%; }
/* Hide search input by default; show only when dropdown is open */
div.primary-input.smart-filter-input > .choices__input.choices__input--cloned {
  display: none; /* default hidden */
}
div.choices.is-open div.primary-input.smart-filter-input > .choices__input.choices__input--cloned {
  display: block;
}

/* Keep sizing and reset for the search input */
div.primary-input.smart-filter-input > .choices__input.choices__input--cloned {
  order: 2;
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box;
  height: 24px;
  line-height: 24px;
  padding: 0 !important;
  margin: 0 !important; /* no extra spacing */
  border: 0 !important;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
/* Keep chevron anchored to the right and vertically centered inside the select */
div.primary-input .chevron-container {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Remove Tailwind ring/blue glow on focus for the inline search input */
div.primary-input .choices__input.choices__input--cloned:focus {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
}

/* Ensure Smart Filters multi-select containers can grow and align like inputs */
div.primary-input.smart-filter-input {
  min-height: 44px;
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  align-items: flex-start;
  justify-content: flex-start;
}

.tags-container { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
div.primary-input .choices__list.choices__list--multiple.tags-container { max-width: 100%; white-space: normal; overflow: visible; }

.tags-container > div.choices__item {
  padding: 8px 16px !important;
  border: 0 !important;
  border-radius: 100px !important;
  margin: 0 !important;
  font-weight: 500 !important;
  background-color: #EBEAEC !important;
  color: #5B5965 !important;
}

.tags-container > div.choices__item > button {
  border-left: 1px solid #5B5965 !important;
  background-image: url(/assets/x-mark-black-5f261429973d0544c26f896bb365b81d1f24ec55196e07e22862cfea7fd47ece.svg) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

div.primary-input.single-select .choices__item--selectable {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}

div.primary-input.single-select .choices__item--selectable:not(.choices__placeholder) {
  width: fit-content;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border-radius: 100px;
  color: #5B5965;
  background-color: #EDECEE;
}

/* Workflow Multiple Signers & Approvers, View Alert Recipients */
#workflow-multiple-signers-select .choices,
#workflow-multiple-signers-select .choices__inner,
#workflow-multiple-approvers-select .choices,
#workflow-multiple-approvers-select .choices__inner,
#signed-agreement-recipients-select .choices,
#signed-agreement-recipients-select .choices__inner,
#view-alert-recipients-select .choices,
#view-alert-recipients-select .choices__inner {
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: #F9F9F9;
  overflow: visible;
}

/* View-alert recipients sits on a white modal, not the gray panel the signer
   variants live in, so the inherited #F9F9F9 fill is overridden here. */
#view-alert-recipients-select .choices,
#view-alert-recipients-select .choices__inner {
  background-color: transparent;
}

/* Same pill-row layout as the signer/approver variants, but the divider
   band (padding + margin + border-bottom) only kicks in once a pill is
   actually present — otherwise the search input floats below an empty band. */
#view-alert-recipients-select .choices__list.choices__list--multiple {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.625em 0.5em;
  border-radius: 0;
}

#view-alert-recipients-select .choices__list.choices__list--multiple:has(.choices__item) {
  padding: 1em 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid #D6D6D8;
}

#workflow-multiple-signers-select .choices__list.choices__list--multiple,
#workflow-multiple-approvers-select .choices__list.choices__list--multiple,
#signed-agreement-recipients-select .choices__list.choices__list--multiple {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.625em 0.5em;
  padding: 1em 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid #D6D6D8;
  border-radius: 0;
}

#workflow-multiple-signers-select .choices__list.choices__list--multiple .choices__item,
#workflow-multiple-approvers-select .choices__list.choices__list--multiple .choices__item,
#signed-agreement-recipients-select .choices__list.choices__list--multiple .choices__item,
#view-alert-recipients-select .choices__list.choices__list--multiple .choices__item,
.multiple-choice .choices__list--multiple .choices__item {
  padding: 0.25em 0.75em;
  border: 1px solid #D6D6D8;
  border-radius: 0.5rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  background-color: white;
  color: #5B5965;
}

#workflow-multiple-signers-select .choices__button,
#workflow-multiple-approvers-select .choices__button,
#signed-agreement-recipients-select .choices__button,
#view-alert-recipients-select .choices__button {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background-image: url(/assets/x-mark-black-5f261429973d0544c26f896bb365b81d1f24ec55196e07e22862cfea7fd47ece.svg);
  background-size: cover;
}

#workflow-multiple-signers-select .choices__input.choices__input--cloned,
#workflow-multiple-approvers-select .choices__input.choices__input--cloned,
#signed-agreement-recipients-select .choices__input.choices__input--cloned,
#view-alert-recipients-select .choices__input.choices__input--cloned {
  width: 100% !important;
  border: 1px solid #D6D6D8;
  border-radius: 0.625rem;
  margin: 0;
}

#workflow-multiple-signers-select .choices__input.choices__input--cloned:focus,
#workflow-multiple-approvers-select .choices__input.choices__input--cloned:focus,
#signed-agreement-recipients-select .choices__input.choices__input--cloned:focus,
#view-alert-recipients-select .choices__input.choices__input--cloned:focus {
  border: 1px solid #176BEA;
  box-shadow: 0 0 6px 0 rgb(23,107,234);
}

/* The signer/approver hardcoded #D6D6D8 / #176BEA matches the dark-theme
   fallback for --border-color-input, not its default. Use the themed vars
   so the input border tracks the rest of the design system. */
#view-alert-recipients-select .choices__input.choices__input--cloned {
  border-color: var(--border-color-input);
}

#view-alert-recipients-select .choices__input.choices__input--cloned:focus {
  border-color: var(--border-color-input-focus);
}

#workflow-multiple-signers-select .choices__list.choices__list--dropdown,
#workflow-multiple-approvers-select .choices__list.choices__list--dropdown,
#signed-agreement-recipients-select .choices__list.choices__list--dropdown,
#view-alert-recipients-select .choices__list.choices__list--dropdown {
  margin-top: 1rem;
}

#new-routing-rule-signer-select .choices__list.choices__list--dropdown,
#new-routing-rule-approver-select .choices__list.choices__list--dropdown {
  z-index: 20;
}

#signed-agreement-recipients-select .choices__list.choices__list--dropdown,
#workflow-multiple-signers-select .choices__list.choices__list--dropdown,
#workflow-multiple-approvers-select .choices__list.choices__list--dropdown {
  margin-bottom: 1rem;
}

#signed-agreement-recipients-select .choices__inner{
  display: flex;
  flex-direction: column-reverse;
}

#signed-agreement-recipients-select .choices__list--multiple {
  margin-top: 16px;
  border-top: 1px solid #D6D6D8;
  border-bottom: 1px solid #D6D6D8;
}

.multiple-choice .choices__input {
  display: block;
  width: 100% !important;
  border: 1px solid #D6D6D8;
  border-radius: 0.625rem;
}

.multiple-choice .choices__list--multiple {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .5rem 0;
}

.multiple-choice .choices__button {
  border-left: none !important;
  background-image: url(/assets/x-mark-black-5f261429973d0544c26f896bb365b81d1f24ec55196e07e22862cfea7fd47ece.svg) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.multiple-choice .choices.is-disabled .choices__inner,
.multiple-choice .choices.is-disabled .choices__input,
.multiple-choice .choices.is-disabled .choices__item--selectable,
.multiple-choice .choices.is-disabled .choices__button {
  cursor: not-allowed;
  background-color: #f9f9f9;
}

/* Routing Rule Approvers & Signers multi-selects (edit and new modals) */
#routing-rule-approver-select .choices,
#routing-rule-signer-select .choices,
#new-routing-rule-approver-select .choices,
#new-routing-rule-signer-select .choices {
  overflow: visible;
}

#routing-rule-approver-select .choices__inner,
#routing-rule-signer-select .choices__inner,
#new-routing-rule-approver-select .choices__inner,
#new-routing-rule-signer-select .choices__inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: white;
  overflow: visible;
  min-height: unset;
  outline: none;
}

#routing-rule-approver-select .choices__list.choices__list--multiple,
#routing-rule-signer-select .choices__list.choices__list--multiple,
#new-routing-rule-approver-select .choices__list.choices__list--multiple,
#new-routing-rule-signer-select .choices__list.choices__list--multiple {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.375em 0.375em;
  padding: 0;
}

#routing-rule-approver-select .choices__list.choices__list--multiple .choices__item,
#routing-rule-signer-select .choices__list.choices__list--multiple .choices__item,
#new-routing-rule-approver-select .choices__list.choices__list--multiple .choices__item,
#new-routing-rule-signer-select .choices__list.choices__list--multiple .choices__item {
  padding: 0.25em 0.75em;
  border: 1px solid #D6D6D8;
  border-radius: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  background-color: #F5F5F6;
  color: #5B5965;
}

#routing-rule-approver-select .choices__button,
#routing-rule-signer-select .choices__button,
#new-routing-rule-approver-select .choices__button,
#new-routing-rule-signer-select .choices__button {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background-image: url(/assets/x-mark-black-5f261429973d0544c26f896bb365b81d1f24ec55196e07e22862cfea7fd47ece.svg);
  background-size: cover;
}

#routing-rule-approver-select .choices__input.choices__input--cloned,
#routing-rule-signer-select .choices__input.choices__input--cloned,
#new-routing-rule-approver-select .choices__input.choices__input--cloned,
#new-routing-rule-signer-select .choices__input.choices__input--cloned {
  width: 100% !important;
  border: 1px solid #D6D6D8;
  border-radius: 0.5rem;
  margin: 0.5rem 0 0;
}

#routing-rule-approver-select .choices__input.choices__input--cloned:focus,
#routing-rule-signer-select .choices__input.choices__input--cloned:focus,
#new-routing-rule-approver-select .choices__input.choices__input--cloned:focus,
#new-routing-rule-signer-select .choices__input.choices__input--cloned:focus {
  border: 1px solid #176BEA;
  box-shadow: 0 0 6px 0 rgb(23,107,234);
  outline: none;
}

/* TODO: Standardize the use of choices.js */
#blue-clock,
#loading-circle {
  transform-origin: 50% 50%;
}

@keyframes rotate {
from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#loading-circle {
  animation: rotate 2s linear infinite;
}
@media (max-width: 767px) {
  div.BeaconFabButtonFrame {
    display: none;
  }
}
.connected-integration {
  background: rgba(27, 189, 82, 0.15);
}

.disconnected-integration {
  background: rgba(225, 47, 0, 0.2);
}

.e-signature-header {
  font-family: Metropolis;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 1px;
  text-align: left;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.3);
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.mention-popup {
  position: fixed;
  background: white;
  padding: 12px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
  z-index: 1000;
  min-width: 200px;
}

.mention-popup:after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid white;
}

.mention-popup h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #333;
}

.mention-popup p {
  margin: 0;
  font-size: 14px;
  color: #666;
}
/* Default answer UI */
.multiple-choices-list:not(.default-options-open) .default-answer-ui {
  display: none;
}

input[type="checkbox"].hidden-check + span.fake-radio {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.125rem; /* 18px */
  height: 1.125rem; /* 18px */
  border-radius: 100%;
  border: 2px solid #D6D6D8;
  transition: border 150ms;
  background-color: white;
}

input[type="checkbox"].hidden-check + span.fake-radio::before {
  content: "";
  width: 0.5rem; /* 8px */
  height: 0.5rem; /* 8px */
  border-radius: 100%;
  transform: scale(0);
  transition: transform 150ms;
  background-color: #32303E;
}

input[type="checkbox"].hidden-check:checked + span.fake-radio {
  border-color: #5B5965;
}

input[type="checkbox"].hidden-check:checked + span.fake-radio::before {
  transform: scale(1);
}
.multiple-choices-list:not(.default-options-open) .default-answer-ui {
  display: none;
}
.repository > em {
  font-style: normal;
  font-weight: bold;
  background-color: #FFFF00;
}
.repository-chat-panel {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 24rem;
  height: 100%;
  max-height: 100%;
  flex-direction: column;
  background-color: #F9F9F9;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
  border-left: 1px solid #DCDCE0;
  z-index: 50;
}

.resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: ew-resize;
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.resize-handle:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.resize-handle:active {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Prevent text selection during resize */
body.resizing {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: ew-resize;
}

.repository-chat-panel.collapsed {
  height: 3rem;
}

.repository-chat-header {
  display: flex;
  min-height: 64px;
  padding: 12px 20px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  background: #F9F9F9;
  border-bottom: 1px solid #DCDCE0;
}

.repository-chat-messages {
  flex-grow: 1;
  padding: 1.5rem;
  overflow-y: auto;
}

.repository-chat-form {
  padding: 1rem 1.5rem 1.5rem;
  flex-shrink: 0;
  background: #F9F9F9;
}

.repository-chat-form .ai-chat-input {
  width: 100%;
  height: auto;
  min-height: 125px;
}

.repository-chat-trigger {
  position: fixed;
  bottom: 1.5rem;
  right: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background-color: var(--blue-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 40;
  cursor: pointer;
}

.repository-ai-chat-btn {
  display: flex;
  margin-left: 2rem;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  border-radius: 360px;
  border: 1px solid #C1C1FF;
  background: var(--Gradient-2, linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, rgba(161, 152, 211, 0.16) 100%));
  white-space: nowrap;
  min-width: fit-content;
}

@keyframes gentle-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.loading-dot {
  animation: gentle-bounce 1s ease-in-out infinite;
}
@media (max-width: 46em) {
  table.with-actions-menu > thead,
  table.regular > thead {
    display: none;
  }

  table.with-actions-menu tr,
  table.regular tr {
    display: grid;
    gap: 1em;
    padding: 1em;
  }

  table.with-actions-menu tr {
    grid-template-columns: 1fr auto;
  }

  table.with-actions-menu td,
  table.regular td {
    padding: 0;
  }

  table.regular td:not(:first-child)::before {
    content: attr(data-cell);
    display: block;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06ch;
    color: #5B5965;
  }

  table.with-actions-menu td:not([data-cell="subject"], [data-cell="menu"]) {
    grid-column: 1 / span 2;
  }

  table.with-actions-menu td:last-child {
    grid-column-start: 2;
    grid-row-start: 1;
  }
}

@media (max-width: 767px) {
  /* Legal requests table */

  table.requests-table > thead {
    display: none;
  }

  table.requests-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5em 1em;
    padding: 0.75em 0;
    border-top: none;
  }

  table.requests-table td {
    border: none;
    padding: 0;
  }

  table.requests-table td::before {
    content: attr(data-additional-info);
  }

  table.requests-table td:not(:first-child, :last-child) {
    grid-column: span 2;
  }

  table.requests-table td:first-child {
    font-size: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  table.requests-table td:last-child {
    grid-column-start: 2;
    grid-row-start: 1;
  }

  table.requests-table .desktop-only {
    display: none;
  }

  /* Notification center table */

  table.notifications-table > thead {
    display: none;
  }

  table.notifications-table tr {
    display: flex;
    flex-direction: column;
    padding: 0.75em 1.5em;
    align-items: flex-start;
  }

  table.notifications-table td {
    padding: 0.5em 1em;
  }
}

.selectable-card_input:not(:disabled) + .selectable-card_card:hover,
.selectable-card_input:disabled + .selectable-card_card {
  border-color: #98979E;
  background-color: #F9F9F9;
}

.selectable-card_input:not(:disabled):checked + .selectable-card_card {
  border-color: #176BEA;
}
:root {
  --sidebar-width: 15rem; /* 240px */
  --collapsed-sidebar-width: 4.5rem; /* 72px */
}

@media (min-width: 64em) {
  #main-sidebar.collapsed {
    width: var(--collapsed-sidebar-width);
    padding-left: 1em;
    padding-right: 1em;
  }

  /* TODO: Add appropiate collapsing animations */
  #main-sidebar.collapsed .collapse-hide {
    display: none;
  }
}
@layer base {
  :root {
    --background-color-action-box-ai-review: #F1F0FE;
    --background-color-action-box-ai-review-accent: #7978FF;

    --background-color-action-box-playbook-review: #FCEAE6;
    --background-color-action-box-playbook-review-accent: #E95962;

    --background-color-action-box-manage-playbooks: #EBEAEC;
    --background-color-action-box-manage-playbooks-accent: #989899;

    --background-color-action-box-drafting: #EAF0FD;
    --background-color-action-box-drafting-accent: #176BEA;

    --background-color-action-box-redlining: #FCEAE6;
    --background-color-action-box-redlining-accent: #A02100;

    --background-color-action-box-compare: #ECF5EE;
    --background-color-action-box-compare-accent: #378F49;

    --background-color-action-box-request: #EBEAEC;
    --background-color-action-box-request-accent: #5B5965;

    --background-color-action-box-benchmark: #FFF9E6;
    --background-color-action-box-benchmark-accent: #E8B100;

    --background-color-action-box-risk-review: #FFF9E6;
    --background-color-action-box-risk-review-accent: #E8B100;

    --background-color-playbook-issue-icon: var(--background-color-action-box-ai-review);
    --color-playbook-issue-icon-accent: var(--background-color-action-box-ai-review-accent);

    --background-color-action-box-templates: #F1F0FE;
    --background-color-action-box-templates-accent: #5655B5;
  }

  .theme-lawinsider {
    --background-color-action-box-ai-review: #F1F0FE;
    --background-color-action-box-ai-review-accent: #7978FF;

    --background-color-action-box-playbook-review: #FCEAE6;
    --background-color-action-box-playbook-review-accent: #E95962;

    --background-color-action-box-manage-playbooks: #EBEAEC;
    --background-color-action-box-manage-playbooks-accent: #989899;

    --background-color-action-box-drafting: #E6F1F7;
    --background-color-action-box-drafting-accent: #0675AC;

    --background-color-action-box-redlining: #EAEEF3;
    --background-color-action-box-redlining-accent: #28538B;

    --background-color-action-box-compare: #ECF5EE;
    --background-color-action-box-compare-accent: #378F49;

    --background-color-action-box-request: #F1F0FE;
    --background-color-action-box-request-accent: #7978FF;

    --background-color-action-box-benchmark: #FFFBE8;
    --background-color-action-box-benchmark-accent: #B29B15;

    --background-color-action-box-risk-review: #FFFBE8;
    --background-color-action-box-risk-review-accent: #B29B15;

    --background-color-playbook-issue-icon: #FFC300;
    --color-playbook-issue-icon-accent: #FFFFFF;

    --background-color-action-box-templates: #F1F0FE;
    --background-color-action-box-templates-accent: #5655B5;
  }
}
@layer base {
  :root {
    --text-color-button-small-primary: #FFFFFF;
    --text-color-button-small-secondary: #7978FF;

    --background-color-button-small-primary: #7978FF;
    --background-color-button-small-secondary: #FFFFFF;

    --border-color-button-small-secondary: #7978FF;

    --text-color-button-small-primary-hover: #FFFFFF;
    --text-color-button-small-secondary-hover: #7978FF;

    --background-color-button-small-primary-hover: #A5A5FF;
    --background-color-button-small-secondary-hover: #7978FF14;

    --border-color-button-small-secondary-hover: #7978FF;

    --text-color-button-small-primary-disabled: #FFFFFF;
    --text-color-button-small-secondary-disabled: #D6D6D8;
    --fill-color-button-small-primary-disabled: #FFFFFF;
    --fill-color-button-small-secondary-disabled: #D6D6D8;

    --background-color-button-small-primary-disabled: #D6D6D8;
    --border-color-button-small-secondary-disabled: #D6D6D8;

    --border-width-button-small-secondary: 1px;
    --border-radius-button-small: 6px;
  }

  .theme-lawinsider {
    --text-color-button-small-primary: #FFFFFF;
    --text-color-button-small-secondary: #28538B;

    --background-color-button-small-primary: #28538B;
    --background-color-button-small-secondary: #FFFFFF;

    --border-color-button-small-secondary: #28538B;

    --text-color-button-small-primary-hover: #FFFFFF;
    --text-color-button-small-secondary-hover: #5375A2;

    --background-color-button-small-primary-hover: #5375A2;
    --background-color-button-small-secondary-hover: #FFFFFF;

    --border-color-button-small-secondary-hover: #5375A2;

    --text-color-button-small-primary-disabled: #989899;
    --text-color-button-small-secondary-disabled: #C3C3C5;
    --fill-color-button-small-primary-disabled: #989899;
    --fill-color-button-small-secondary-disabled: #C3C3C5;

    --background-color-button-small-primary-disabled: #D6D6D8;
    --border-color-button-small-secondary-disabled: #C3C3C5;

    --border-width-button-small-secondary: 1px;
    --border-radius-button-small: 4px;
  }
}
@layer base {
  :root {
    --text-color-button-primary: #FFFFFF;
    --text-color-button-secondary: #8679D0;
    --text-color-button-tertiary: #7978FF;
    --text-color-button-tertiary-muted: #5B5965;

    --background-color-button-primary-from: #32303E;
    --background-color-button-primary-to: #A198D3;
    --background-color-button-secondary: #FFFFFF;
    --background-color-button-tertiary: transparent;
    --background-color-button-tertiary-muted: transparent;

    --border-color-button-secondary: #8679D0;

    --border-width-button-secondary: 2px;
    --border-radius-button-primary: 40px;
    --border-radius-button-secondary: 40px;
    --border-radius-button-tertiary: 6px;

    --text-color-button-tertiary-hover: #6E6DE8;
    --text-color-button-tertiary-muted-hover: #23222C;

    --background-color-button-primary-hover-from: #32303E;
    --background-color-button-primary-hover-via: #625D7E;
    --background-color-button-primary-hover-to: #A198D3;
    --background-color-button-secondary-hover: #EDEAFF;
    --background-color-button-tertiary-hover: #7978FF14;
    --background-color-button-tertiary-muted-hover: #5B596514;
    --background-color-button-highlight: #7978FF;
    --background-color-button-highlight-hover: #5555f4;

    --text-color-button-tertiary-disabled: #D6D6D8;

    --padding-x-button-primary: 24px;
    --padding-y-button-primary: 10px;
    --padding-x-button-secondary: 24px;
    --padding-y-button-secondary: 10px;
  }

  .theme-lawinsider {
    --text-color-button-primary: #FFFFFF;
    --text-color-button-secondary: #28538B;
    --text-color-button-tertiary: #28538B;
    --text-color-button-tertiary-muted: #5A5A5B;

    --background-color-button-primary-from: #28538B;
    --background-color-button-primary-to: #28538B;
    --background-color-button-secondary: #FFFFFF;
    --background-color-button-tertiary: transparent;
    --background-color-button-tertiary-muted: transparent;

    --border-color-button-secondary: #28538B;

    --border-width-button-secondary: 1px;
    --border-radius-button-primary: 4px;
    --border-radius-button-secondary: 4px;
    --border-radius-button-tertiary: 4px;

    --text-color-button-tertiary-hover: #28538B;
    --text-color-button-tertiary-muted-hover: #5A5A5B;

    --background-color-button-primary-hover-from: #5375A2;
    --background-color-button-primary-hover-via: #5375A2;
    --background-color-button-primary-hover-to: #5375A2;
    --background-color-button-secondary-hover: #FFFFFF;
    --background-color-button-tertiary-hover: #28538B0D;
    --background-color-button-tertiary-muted-hover: #F2F2F3;
    --background-color-button-highlight: #28538B;
    --background-color-button-highlight-hover: #16417b;

    --text-color-button-tertiary-disabled: #C3C3C5;

    --padding-x-button-primary: 24px;
    --padding-y-button-primary: 10px;
    --padding-x-button-secondary: 24px;
    --padding-y-button-secondary: 10px;
  }
}
@layer base {
  :root {
    --text-color-card-title: #23222C;
    --text-color-card-subtitle: #5B5965;
    --text-color-card-subtitle-2: #98979E;
    --text-color-card: #33326B;

    --font-weight-card-subtitle: 600;
    --font-weight-card-subheading: 600;

    --background-color-card: #FFFFFF;
    --background-color-card-info: #7978FF14;
    --background-color-card-highlight: #7978FF14;
    --background-color-card-highlight-info: #F9F9F9;
    --background-color-card-hover: #FAFAFF;
    --background-color-card-secondary: #7978FF14;
    --background-color-card-tertiary: #F9F9F9;
    --background-color-card-yellow: #FFFDF4;

    --border-color-card: #D6D6D8;
    --border-radius-card: 16px;
    --border-width-card: 1px;
    --border-color-card-hover: #7978FF;
    --border-color-card-secondary: #EBEAEC;
  }

  .theme-lawinsider {
    --text-color-card-title: #000000;
    --text-color-card-subtitle: #5A5A5B;
    --text-color-card-subtitle-2: #5A5A5B;
    --text-color-card: #000000;

    --font-weight-card-subtitle: 400;
    --font-weight-card-subheading: 700;

    --background-color-card: #FFFFFF;
    --background-color-card-info: #0675ac0c;
    --background-color-card-highlight: #0675ac0c;
    --background-color-card-highlight-info: #F2F2F3;
    --background-color-card-hover: #0675AC0D;
    --background-color-card-secondary: #0675AC0D;
    --background-color-card-tertiarty: #FBFBFB;
    --background-color-card-yellow: #FFF9E6;

    --border-color-card: #D6D6D8;
    --border-radius-card: 4px;
    --border-width-card: 1px;
    --border-color-card-hover: #28538B;
    --border-color-card-secondary: #FBFBFB;
  }
}
@layer base {
  :root {
    --border-radius-filter-container: 8px;
    --border-color-filter-container: #EBEAEC;
    --text-color-filter: #5B5965;
    --border-radius-filter-selected: 5px;
    --text-color-filter-selected: #33326B;
    --background-color-filter-selected: #F1F0FE;
  }

  .theme-lawinsider {
    --border-radius-filter-container: 6px;
    --border-color-filter-container: #E4E4E5;
    --text-color-filter: #989899;
    --border-radius-filter-selected: 4px;
    --text-color-filter-selected: #11233A;
    --background-color-filter-selected: #EAEEF3;
  }
}
@layer base {
  :root {
    --simpleai-heading-font-size: 2rem;
    --simpleai-heading-font-weight: 600;
  }

  .theme-lawinsider {
    --simpleai-heading-font-size: 2rem;
    --simpleai-heading-font-weight: 700;
  }
}
/* Theme Variables */
@import './action-boxes.css';
@import './button-small.css';
@import './button.css';
@import './cards.css';
@import './filters.css';
@import './input.css';
@import './list.css';
@import './navigation-buttons.css';
@import './other.css';
@import './progress-bar.css';
@import './radio-buttons.css';
@import './tabs.css';
@import './toggle.css';
@layer base {
  :root {
    --border-radius-input: 8px;
    --border-width-input: 1px;
    --border-color-input: #EBEAEC;
    --placeholder-color-input: #98979E;
    --text-color-input: #32303E;
    --border-color-input-hover: #7978FF;

    --border-color-input-focus: #7978FF;
    --box-shadow-input-focus: 0 0 6px 0 #7978FF;
    --text-color-input-focus: #32303E;

    --border-color-input-disabled: #D6D6D8;
    --placeholder-color-input-disabled: #D6D6D8;
    --text-color-input-disabled: #D6D6D8;
    --background-color-input-disabled: #F9F9F9;

    --border-color-checkbox: #7978FF;
    --background-color-checkbox-checked: #7978FF;
  }

  .theme-lawinsider {
    --border-radius-input: 4px;
    --border-width-input: 1px;
    --border-color-input: #D6D6D8;
    --placeholder-color-input: #C3C3C5;
    --text-color-input: #000000;
    --border-color-input-hover: #28538B;

    --border-color-input-focus: #28538B;
    --box-shadow-input-focus: 0 0 4px 0 #28538B;
    --text-color-input-focus: #000000;

    --border-color-input-disabled: #D6D6D8;
    --placeholder-color-input-disabled: #C3C3C5;
    --text-color-input-disabled: #C3C3C5;
    --background-color-input-disabled: #F2F2F3;

    --border-color-checkbox: #28538B;
    --background-color-checkbox-checked: #28538B;
  }
}
@layer base {
  :root {
    --list-text-color: #33326B;
  }

  .theme-lawinsider {
    --list-text-color: #000000;
  }
}
@layer base {
  :root {
    --background-color-navigation-button: transparent;
    --background-color-navigation-button-hover: transparent;
    --background-color-navigation-button-disabled: transparent;

    --fill-color-navigation-button: #98979E;
    --fill-color-navigation-button-hover: #7978FF;
    --fill-color-navigation-button-disabled: #F2F2F3;

    --border-radius-navigation-button: 12px;
    --border-width-navigation-button: 1px;
    --border-color-navigation-button: #EBEAEC;
    --border-color-navigation-button-hover: #7978FF;
    --border-color-navigation-button-disabled: #F2F2F3;

    --padding-left-navigation-button-prev: 8px;
    --padding-right-navigation-button-prev: 8px;
    --padding-left-navigation-button-next: 8px;
    --padding-right-navigation-button-next: 8px;
    --padding-y-navigation-button: 8px;
  }

  .theme-lawinsider {
    --background-color-navigation-button: transparent;
    --background-color-navigation-button-hover: transparent;
    --background-color-navigation-button-disabled: transparent;

    --fill-color-navigation-button: black;
    --fill-color-navigation-button-hover: #28538B;
    --fill-color-navigation-button-disabled: #E8E8EA;

    --border-radius-navigation-button: 10px;
    --border-width-navigation-button: 1px;
    --border-color-navigation-button: #DEDEE0;
    --border-color-navigation-button-hover: #28538B;
    --border-color-navigation-button-disabled: #E8E8EA;

    --padding-left-navigation-button-prev: 8px;
    --padding-right-navigation-button-prev: 8px;
    --padding-left-navigation-button-next: 8px;
    --padding-right-navigation-button-next: 8px;
    --padding-y-navigation-button: 8px;
  }
}
@layer base {
  :root {
    --fill-color-accent: #7978FF;
    --fill-color-disabled: #D6D6D8;
    --border-radius-modal: 16px;
    --ai-linear-gradient: linear-gradient(87deg, #32303E 4.7%, #A198D3 95.3%);
    --loader-background-color: #7574D1;
    --loader-highlight-color: #E2E3FF;
    --chat-submit-button-background-color: #7978FF;
    --chat-submit-button-background-color-hover: #A5A5FF;
    --chat-submit-button-border-radius: 99px;
    --apply-all-gradient: linear-gradient(90deg, #f1f0fe 30.49%, #ffffff 78%);
    --apply-all-accent: #5655B5;
    --back-button-fill-color: #33326B;
    --button-icon-fill-color: #A5A5FF;
    --button-icon-fill-color-hover: #7978FF;
  }

  .theme-lawinsider {
    --fill-color-accent: #28538B;
    --fill-color-disabled: #D6D6D8;
    --border-radius-modal: 4px;
    --ai-linear-gradient: linear-gradient(87deg, #28538B 4.7%, #0675AC 95.3%);
    --loader-background-color: #28538B;
    --loader-highlight-color: #0675AC1A;
    --chat-submit-button-background-color: #28538B;
    --chat-submit-button-background-color-hover: #16417b;
    --chat-submit-button-border-radius: 99px;
    --apply-all-gradient: linear-gradient(90deg, #f3f8fb 0%, #ffffff 100%);
    --apply-all-accent: #28538B;
    --back-button-fill-color: #33326B;
    --button-icon-fill-color: #6F8CB1;
    --button-icon-fill-color-hover: #28538B;
  }

  .simpleai-v2 {
    --icon-color-dark: #7B74D1;
    --shadow-color: #C1C1FF;
    --border-hover-color: #D5D5FF;
    --action-bg: #E0DEFF;
    --form-bg: #FAFAFB;
    --shadow-list-item-hover: 0 -1px 0 #C1C1FF, inset 0 -1px 0 #C1C1FF;
    --shadow-input-focus: 0 0 5px 0 #C1C1FF;
  }

  .theme-lawinsider .simpleai-v2,
  .theme-lawinsider.simpleai-v2 {
    --icon-color-dark: #1D4A73;
    --shadow-color: #6F8CB1;
    --border-hover-color: #A3C1E0;
    --action-bg: #E0EDF7;
    --form-bg: #FAFAFB;
    --shadow-list-item-hover: 0 -1px 0 #6F8CB1, inset 0 -1px 0 #6F8CB1;
    --shadow-input-focus: 0 0 5px 0 #6F8CB1;
  }
}
@layer base {
  :root {
    --background-color-progress-bar-loading: #98979E;
    --background-color-progress-bar-issues: #D5D5FF;
    --background-color-progress-bar-compliant: #6E6DE8;
    --background-color-progress-bar-not-found: #D6D6D8;
    --background-color-progress-bar-gradient-bg: #43428C;
    --background-color-progress-bar-gradient-highlight: #D5D5FF;
  }

  .theme-lawinsider {
    --background-color-progress-bar-loading: #98979E;
    --background-color-progress-bar-issues: #FFC300;
    --background-color-progress-bar-compliant: #13863A;
    --background-color-progress-bar-not-found: #D6D6D8;
    --background-color-progress-bar-gradient-bg: #98979E;
    --background-color-progress-bar-gradient-highlight: #EBEAEC;
  }
}
@layer base {
  :root {
    --background-color-radio-button: #EDECEE;
    --background-color-radio-button-checked: #32303E;
    --background-color-radio-button-wrapper: #EDECEE;

    --text-color-radio-button: #32303E;
    --text-color-radio-button-checked: #FFFFFF;

    --padding-x-radio-button: 8px;
    --padding-y-radio-button: 5px;

    --border-radius-radio-button: 8px;
    --border-radius-radio-button-wrapper: 8px;
  }

  .theme-lawinsider {
    --background-color-radio-button: #EDECEE;
    --background-color-radio-button-checked: #28538B;
    --background-color-radio-button-wrapper: #EDECEE;

    --text-color-radio-button: #000000;
    --text-color-radio-button-checked: #FFFFFF;

    --padding-x-radio-button: 8px;
    --padding-y-radio-button: 8px;

    --border-radius-radio-button: 4px;
    --border-radius-radio-button-wrapper: 4px;
  }
}
@layer base {
  :root {
    --text-color-tab: #98979E;
    --text-color-tab-selected: #33326B;
    --text-color-tab-hover: #9493FF;

    --border-color-tab: #D6D6D8;
    --border-color-tab-selected: #33326B;
  }

  .theme-lawinsider {
    --text-color-tab: #989899;
    --text-color-tab-selected: #28538B;
    --text-color-tab-hover: #28538B;

    --border-color-tab: #D6D6D8;
    --border-color-tab-selected: #28538B;
  }
}
@layer base {
  :root {
    --background-color-toggle-on: #7978FF;
    --background-color-toggle-off: #98979E;
    --background-color-toggle-hover: #A5A5FF;
    --background-color-toggle-checked-hover: #A5A5FF;
    --background-color-toggle-disabled: #D6D6D8;
  }

  .theme-lawinsider {
    --background-color-toggle-on: #417505;
    --background-color-toggle-off: #5A5A5B;
    --background-color-toggle-hover: #679137;
    --background-color-toggle-checked-hover: #679137;
    --background-color-toggle-disabled: #D6D6D8;
  }
}
/* Components */
@import './components/index.css';
/* The container that holds the suggestions menu */
.tribute-container {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  max-height: 300px;
  overflow: auto;
  display: block;
  z-index: 999999;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* The list of suggestions */
.tribute-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Individual suggestion items */
.tribute-container li {
  padding: 8px 12px;
  cursor: pointer;
}

/* Highlighted/selected suggestion */
.tribute-container li.highlight {
  background: #2196F3;
  color: white;
}

/* If you're using menu item with images */
.tribute-container .tribute-item img {
  margin-right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.highlight {
  background-color: #176BEA14 !important;
}

.highlight.selected {
  background-color: #176BEA14 !important;
}

#viewerContainer input[type="text"] {
  display: none !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */