: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';

/* Home chat "thinking" state */
details[open] .think-chevron {
  transform: rotate(180deg);
}

/* Soft fade so chat messages dissolve into the composer (no hard cut). */
.chat-composer-dock::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 2rem;
  background: linear-gradient(to top, #F9F9F9, rgba(249, 249, 249, 0));
  pointer-events: none;
}

/* Live agent steps: active = yellow dot + animated dots; done = check. */
.thinking-step .step-check {
  display: none;
}

.thinking-step.is-done .step-check {
  display: inline-flex;
}

.thinking-step.is-done .step-dot,
.thinking-step.is-done .step-dots {
  display: none;
}

.thinking-step .step-dots::after {
  content: "";
  animation: thinking-ellipsis 1.4s steps(1, end) infinite;
}

@keyframes thinking-ellipsis {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}

/* 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;
  }

  /* Home AI conversation: bound the shared content wrapper so the chat scrolls
     internally, keeping the breadcrumb header pinned to the top and the
     composer pinned to the bottom regardless of conversation length. Scoped via
     :has() so no other page is affected. */
  *:has(> .home-conversation-shell) {
    min-height: 0;
  }

  .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;
    }
  }

  .regenerate-section {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 0.75rem;
    transition: grid-template-rows 200ms ease-out, opacity 200ms ease-out, margin-top 200ms ease-out;
  }

  .regenerate-section > .regenerate-section__content {
    overflow: hidden;
  }

  @starting-style {
    .regenerate-section {
      grid-template-rows: 0fr;
      opacity: 0;
      margin-top: 0;
    }
  }

  .regenerate-section[data-closing="true"] {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 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 rounded-[20px] border bg-white p-4 flex flex-col transition-all;
    border-color: #EBEAEC;
    box-shadow: 0 8px 28px rgba(95, 77, 33, 0.07), 0 2px 6px rgba(95, 77, 33, 0.04);
  }

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

  .ai-chat-input:focus-within,
  .ai-chat-input--active {
    border-color: #B89A0F;
    box-shadow: 0 0 0 3px rgba(255, 219, 29, 0.22), 0 12px 32px rgba(35, 34, 44, 0.08);
  }

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

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

  .ai-chat-input--tall .ai-chat-input__textarea {
    @apply h-24;
  }

  /* Autogrow follow-up: let the scroll area reach the box's right edge, then
     re-inset the text/button via right padding so the scrollbar sits flush right. */
  .ai-chat-input--autogrow {
    @apply pr-0 py-3;
  }

  .ai-chat-input--autogrow .ai-chat-input__textarea {
    @apply h-auto min-h-[1.5rem] pr-4;
  }

  /* Home only: taller resting text area (~0.5 more than the default). */
  .home-composer .ai-chat-input--autogrow .ai-chat-input__textarea {
    @apply min-h-[2.5rem];
  }

  /* Conversation composer: borderless at rest so messages scroll behind it
     cleanly (ChatGPT-style) with no hard seam. Focus still shows the halo. */
  #home_chat_form .ai-chat-input:not(:focus-within) {
    border-color: transparent;
  }


  .ai-chat-input--autogrow .autogrow::after {
    @apply pr-4;
  }

  /* Compact controls row to match Claude's composer height */
  .ai-chat-input--autogrow .ai-chat-input__actions {
    @apply mt-1 pr-4;
  }

  .ai-chat-input--autogrow .ai-chat-input__ask {
    @apply w-8 h-8;
  }

  /* Thin, trackless scrollbar */
  .ai-chat-input--autogrow .autogrow {
    scrollbar-width: thin;
    scrollbar-color: #C8C7CD transparent;
  }

  .ai-chat-input--autogrow .autogrow::-webkit-scrollbar {
    width: 6px;
  }

  .ai-chat-input--autogrow .autogrow::-webkit-scrollbar-track {
    background: transparent;
  }

  .ai-chat-input--autogrow .autogrow::-webkit-scrollbar-thumb {
    background-color: #C8C7CD;
    border-radius: 9999px;
  }

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

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

  .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 text-gray-1 cursor-pointer pointer-events-auto hover:bg-yellow-2;
    box-shadow: 0 4px 12px rgba(255, 219, 29, 0.35);
  }

  .ai-chat-input__mic {
    @apply inline-flex items-center justify-center w-9 h-9 rounded-full bg-transparent text-gray-250 transition-colors hover:bg-gray-5;
  }

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

  .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;
  }

  /* Composer tools: Actions + Prompt Library (see _ai_chat_tools.html.erb) */
  .chat-tool-bar {
    @apply flex items-center gap-2 min-w-0;
  }

  .chat-tool-trigger {
    @apply inline-flex items-center gap-1.5 rounded-[10px] px-3 py-[7px] text-[13px] font-medium leading-none transition-colors;
    background: #F1F0F2;
    color: #32303E;
  }

  .chat-tool-trigger:hover {
    background: #E9E8EC;
  }

  .chat-tool-trigger__label {
    @apply truncate max-w-[10rem];
  }

  .chat-tool-trigger--selected {
    background: color-mix(in srgb, var(--chat-tool-color) 10%, #FFFFFF);
    color: var(--chat-tool-color);
  }

  .chat-tool-menu {
    @apply absolute z-50 max-w-[calc(100vw-2rem)] overflow-visible bg-white py-1.5;
    border: 1px solid #EBEAEC;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(35, 34, 44, 0.14), 0 4px 12px rgba(35, 34, 44, 0.06);
  }

  .chat-tool-menu--down {
    @apply top-full mt-2 left-0;
  }

  .chat-tool-menu--up {
    @apply bottom-full mb-2 left-0;
  }

  .chat-tool-menu--end {
    @apply left-auto right-0;
  }

  .chat-tool-menu--categories {
    @apply overflow-visible;
  }

  .chat-tool-row {
    @apply flex w-full items-start gap-3 px-4 py-2.5 text-left transition-colors;
  }

  .chat-tool-row:hover {
    background: #FBFAFC;
  }

  .chat-tool-row__chip {
    @apply flex h-6 w-6 flex-none items-center justify-center rounded-md;
    background: color-mix(in srgb, var(--chat-tool-color) 10%, #FFFFFF);
    color: var(--chat-tool-color);
  }

  .chat-tool-row__text {
    @apply flex min-w-0 flex-col gap-0.5;
  }

  .chat-tool-row__title {
    @apply text-sm font-semibold leading-tight;
    color: #23222C;
  }

  .chat-tool-row__desc {
    @apply text-[13px] leading-snug;
    color: #5B5965;
  }

  .chat-tool-clear {
    @apply mt-1 flex w-full items-center gap-2 border-t border-gray-4 px-4 py-2.5 text-[13px] font-medium text-gray-2 transition-colors hover:bg-gray-5;
  }

  .chat-tool-cat {
    @apply relative;
  }

  .chat-tool-cat__header {
    @apply flex w-full items-center gap-2.5 py-2 pl-4 pr-3 text-sm font-medium leading-5 transition-colors cursor-default;
    color: #23222C;
  }

  .chat-tool-cat:hover .chat-tool-cat__header {
    background: #F1F0F2;
  }

  .chat-tool-cat__label {
    @apply flex-1 truncate text-left;
  }

  .chat-tool-flyout {
    @apply pointer-events-none absolute top-0 z-50 max-w-[calc(100vw-2rem)] max-h-[min(560px,80vh)] overflow-y-auto bg-white py-1.5 opacity-0;
    border: 1px solid #EBEAEC;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(35, 34, 44, 0.14), 0 4px 12px rgba(35, 34, 44, 0.06);
  }

  .chat-tool-cat:hover .chat-tool-flyout {
    @apply pointer-events-auto opacity-100;
  }

  .chat-tool-flyout--right {
    @apply left-full ml-1;
  }

  .chat-tool-flyout--left {
    @apply right-full mr-1;
  }

  /* Opens the submenu to the left of the menu but bottom-anchored, so it grows
     upward instead of downward (used in the bottom-anchored repo chat panel,
     where a top-anchored left flyout would be clipped off the bottom). */
  .chat-tool-flyout--up {
    @apply right-full mr-1 top-auto bottom-0;
  }

  /* Invisible hover bridge across the margin gap between a category and its
     flyout. Lives on .chat-tool-cat (not the flyout) because the flyout's
     overflow-y-auto would clip a pseudo-element placed on it. The visual gap
     stays; the hover region is continuous so the flyout no longer drops. */
  .chat-tool-cat::after {
    content: "";
    @apply absolute hidden;
  }

  .chat-tool-cat:hover::after {
    @apply block;
  }

  .chat-tool-cat--bridge-right:hover::after {
    @apply left-full top-0 h-full w-2;
  }

  .chat-tool-cat--bridge-left:hover::after {
    @apply right-full top-0 h-full w-2;
  }

  /* Shortcut pill rail: horizontal scroll with a mask fade + paging arrows.
     The fade is a mask on the scroller (pills fade into the page background)
     rather than a white overlay, so the arrow button sits cleanly on top. */
  .pill-rail__scroller {
    --pill-fade: 2.25rem;
  }

  .pill-rail__scroller.is-fade-left {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--pill-fade));
    mask-image: linear-gradient(to right, transparent 0, #000 var(--pill-fade));
  }

  .pill-rail__scroller.is-fade-right {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--pill-fade));
    mask-image: linear-gradient(to left, transparent 0, #000 var(--pill-fade));
  }

  .pill-rail__scroller.is-fade-left.is-fade-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--pill-fade), #000 calc(100% - var(--pill-fade)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--pill-fade), #000 calc(100% - var(--pill-fade)), transparent 100%);
  }

  .pill-rail__arrow {
    @apply absolute top-1/2 z-20 flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-full border border-gray-3 bg-white text-gray-1 shadow-md transition-colors hover:bg-gray-5;
  }

  .pill-rail__arrow--left {
    @apply left-0;
  }

  .pill-rail__arrow--right {
    @apply right-0;
  }

  /* Actions block at the top of the AI Repo Chat — mirrors the legacy mode
     cards but drives the new chat-tools mode (see chat_mode_cards_controller). */
  .agent-mode-card {
    @apply flex w-full items-center gap-3 rounded-xl px-2 py-2 text-left transition-colors;
  }

  .agent-mode-card:hover,
  .agent-mode-card--active {
    background: #F1F0F2;
  }

  .agent-mode-card__chip {
    @apply flex h-7 w-7 flex-none items-center justify-center rounded-md;
    background: color-mix(in srgb, var(--chat-tool-color) 10%, #FFFFFF);
    color: var(--chat-tool-color);
  }

  .agent-mode-card__text {
    @apply flex min-w-0 flex-1 flex-col gap-0.5;
  }

  .agent-mode-card__title {
    @apply text-sm font-semibold leading-tight;
    color: #23222C;
  }

  .agent-mode-card__desc {
    @apply text-[13px] leading-snug;
    color: #5B5965;
  }

  .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;
  height: 0;
}

/* Style the WebKit scrollbar directly so it stays visible in Chromium/Edge
   (Word online). Setting scrollbar-width/scrollbar-color would make Chromium
   ignore the rules below and fall back to the macOS overlay bar, which is
   hidden until you scroll and nearly invisible in light mode. */
.thin-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(140, 140, 140, 0.6);
  border-radius: 9999px;
}

.thin-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(110, 110, 110, 0.75);
}

.thin-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.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;
  }
}

/* Home chat: purpose-built, light table that fits the chat width and wraps
   (overrides the shared .ai_chat_message grid/scroll table). Home only. */
.ai_chat_message.home-ai-message table {
  @apply table w-full text-sm bg-white border-separate border-spacing-0 rounded-[20px] border border-gray-4 overflow-hidden whitespace-normal my-3;
}

.ai_chat_message.home-ai-message th {
  @apply px-4 py-3 text-left font-medium text-gray-2 bg-gray-5 border-0 border-b border-gray-4;
}

.ai_chat_message.home-ai-message td {
  @apply px-4 py-3 align-top text-gray-1 border-0 border-b border-gray-4 whitespace-normal;
}

.ai_chat_message.home-ai-message td strong {
  @apply font-medium;
}

/* Carded: the relative wrapper carries the vertical margin so the overlaid
   copy/download toolbar anchors to the table's top edge. */
.ai_chat_message.home-ai-message table.is-carded {
  @apply my-0;
}

.ai_chat_message.home-ai-message tr:last-child td {
  @apply border-b-0;
}

.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; }
}

/* Top-align row cells while any expandable cell in the row is expanded */
tr.cells-row-expanded > td {
  vertical-align: top;
}

/* 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%
  );
}

/* Checkout (Choose a plan) decorative background: purple variant of the
   home gradient blob (home uses warm yellow; here we tint it brand lavender). */
.checkout-background-gradient {
  background:
  radial-gradient(
    circle at center,
    rgba(121, 120, 255, 0.18) 0%,
    rgba(121, 120, 255, 0.09) 44%,
    rgba(121, 120, 255, 0.03) 74%,
    rgba(121, 120, 255, 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;
}

/* Import Permissions Accordion — compact variant of the multi-select used in
   the metadata import and smart import modals. Inner wrapper sits at h-10 (40px)
   when empty so it matches the design's text-input look; it grows naturally as
   chips are added. */
.import-permissions-accordion-choices .choices {
  margin-bottom: 0;
}

.import-permissions-accordion-choices .choices__inner {
  min-height: 2.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  background-color: #fff;
}

.import-permissions-accordion-choices .choices__list.choices__list--multiple {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0;
  margin: 0;
}

.import-permissions-accordion-choices .choices__list.choices__list--multiple .choices__item {
  margin: 0 !important;
  padding: 0.125rem 0.5rem !important;
  font-size: 0.75rem !important;
  border: 1px solid #D6D6D8 !important;
  border-radius: 0.375rem !important;
  background-color: #F5F5F6 !important;
  color: #5B5965 !important;
}

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

.import-permissions-accordion-choices .choices__input.choices__input--cloned {
  width: auto !important;
  min-width: 8ch !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.875rem;
  background-color: transparent;
}

.import-permissions-accordion-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;
}

.import-permissions-accordion-choices .choices.is-focused .choices__inner,
.import-permissions-accordion-choices .choices.is-open .choices__inner,
.import-permissions-accordion-choices .choices__inner:focus-within {
  border-color: #176BEA !important;
  box-shadow: 0 0 0 1px rgb(23 107 234 / 0.5) !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;
}

#workflow-multiple-signers-select.request-signers-select .choices,
#workflow-multiple-signers-select.request-signers-select .choices__inner {
  background-color: white;
}

/* 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 */

#group-membership-user-select .choices__list[aria-expanded] .choices__list {
  max-height: 123px;
  overflow-y: auto;
}
#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;
  container: repository-chat / inline-size;
}

@container repository-chat (max-width: 395px) {
  .chat-tool-trigger[data-chat-tools-menu-param="library"] .chat-tool-trigger__label,
  .chat-tool-trigger[data-chat-tools-menu-param="library"] svg:last-child {
    display: none;
  }
}

.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;
  height: 48px;
  min-height: 48px;
  padding: 0 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%;
}

/* Seamless at rest (transparent border) on the #F9F9F9 background. */
#repository_chat_form .ai-chat-input:not(:focus-within) {
  border-color: transparent;
}

.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.
 *


 */