@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

*:focus {
  outline: none;
}

[contenteditable="true"]:focus {
  outline: none;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

html {
  font-family: 'Switzer', sans-serif;
}

.pagy-nav.pagination {
  @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
}

.page.next a {
  @apply relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page.prev a {
  @apply relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page.next.disabled {
  @apply relative inline-flex items-center rounded-r-md border border-gray-300 bg-slate-100 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page.prev.disabled {
  @apply relative inline-flex items-center rounded-l-md border border-gray-300 bg-slate-100 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page a, .page.gap {
  @apply bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
}

.page.active {
  @apply z-10 border-indigo-500 bg-indigo-50 text-indigo-600 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
}

/*
TODO:
 1. Refactor this to use the new `@apply` directive
 2. Edit the label position of the linear input so that it is in the middle of the border line
 3. Invalid border color
*/
@layer components {
  .form-field--solid, .form-field--linear {
    .form-field__label-lg {
      @apply font-medium text-lg;
    }

    .form-field__label-md {
      @apply font-medium text-base;
    }

    .form-field__label-sm {
      @apply font-medium text-sm;
    }

    .form-field__label-sm, .form-field__label-lg, .form-field__label-md {
      @apply block text-neutral-50 mb-1 font-switzer;
    }
  }

  .form-field__label-sm.disabled, .form-field__label-lg.disabled, .form-field__label-md.disabled {
    @apply text-neutral-200;
  }

  .form-field__solid-input-sm {
    @apply px-3 py-[9px] text-sm rounded-[6px];
  }

  .form-field__solid-input-md {
    @apply px-3 py-[11px] rounded-lg;
    @apply disabled:text-neutral-300;
  }

  .form-field__solid-input-lg {
    @apply px-4 py-3 text-lg rounded-lg;
  }

  .form-field__linear-input-sm {
    @apply px-3 py-[9px] text-sm rounded-[6px];
  }

  .form-field__linear-input-md {
    @apply px-3 py-[11px] rounded-lg;
  }

  .form-field__linear-input-lg {
    @apply px-4 py-3 text-lg rounded-lg;
  }

  .form-field__solid-input-sm, .form-field__solid-input-lg, .form-field__solid-input-md {
    @apply text-neutral-50 w-full bg-neutral-500 disabled:bg-[#30333A] disabled:cursor-not-allowed focus:bg-transparent border border-transparent font-switzer;
    @apply focus:outline-none focus:ring-0 focus:opacity-100 focus:border-primary-500;
  }

  .form-field__linear-input-sm, .form-field__linear-input-lg, .form-field__linear-input-md {
    @apply block font-normal w-full text-white disabled:bg-[#30333A] disabled:cursor-not-allowed bg-transparent border-neutral-300 font-switzer;
    @apply focus:outline-none focus:ring-0 focus:border-primary-500
  }

  .form-field--linear {
    .form-field__label-sm, .form-field__label-lg, .form-field__label-md {
      @apply  absolute px-3 cursor-text text-neutral-200 peer-focus:px-2 peer-focus:top-1 peer-focus:scale-75 peer-focus:-translate-y-4 duration-300 transform -translate-y-6 scale-75 top-2 z-10 origin-[0] bg-neutral-600 start-1;
    }

    .form-field__label-sm.disabled, .form-field__label-lg.disabled, .form-field__label-md.disabled {
      @apply bg-transparent;
    }
  }

  .btn-secondary {
    @apply border border-transparent font-switzer text-center;
    @apply focus:outline-none focus:shadow-none;
    @apply disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply border border-transparent font-switzer text-center;
    @apply focus:outline-none focus:shadow-none;
    @apply disabled:cursor-not-allowed;
  }

  .btn-secondary.btn-solid {
    @apply bg-neutral-400 hover:bg-neutral-500 active:bg-neutral-500 text-neutral-50;
    @apply disabled:bg-neutral-400 disabled:text-neutral-200;
  }

  .btn-solid {
    @apply bg-primary-500 hover:bg-primary-400 active:bg-primary-600 text-neutral-10 active:font-semibold;
    @apply disabled:bg-neutral-400 disabled:text-neutral-200;
  }

  .btn-outline {
    @apply bg-transparent rounded-lg hover:bg-neutral-500 active:font-semibold active:bg-neutral-500 text-primary-500 border-primary-500;
    @apply disabled:text-neutral-200 disabled:border-neutral-300;
  }

  .btn-elevated {
    @apply bg-neutral-500 rounded-lg hover:bg-neutral-600 active:bg-neutral-600 text-primary-500 border-primary-500 active:font-semibold;
    @apply focus:outline-none focus:shadow-none focus:outline-offset-0;
    box-shadow: 0px 3.5px 0px 0px #788CFF;
  }

  .btn-elevated:disabled, .btn-solid::disabled {
    @apply hover:bg-white;
  }

  .btn-secondary.btn-outline {
    @apply text-neutral-50 border-primary-500;
    @apply disabled:bg-neutral-400 disabled:text-neutral-200;
  }

  .upload-my-connections:hover {
    button {
      @apply bg-primary-400;
    }
  }

  .upload-my-connections:active {
    button {
      @apply bg-primary-600;
    }
  }


  .btn-secondary.btn-elevated {
    @apply bg-neutral-400 hover:bg-neutral-500 active:bg-neutral-500 text-neutral-50;
    @apply disabled:bg-neutral-400 disabled:text-neutral-200 hover:bg-neutral-400 ;
  }

  .btn-sm {
    @apply px-4 h-8 py-3 text-[12px] font-medium border-[1.5px] rounded-md leading-[0];
    @apply focus:font-semibold;

    svg {
      @apply w-[15px] h-[15px];
    }
  }

  .btn-md {
    @apply px-4 h-12 rounded-lg font-medium border-[1.5px] text-[16px];

    svg {
      @apply w-6 h-6;
    }
  }

  .btn-lg {
    @apply px-4 py-3 h-14 rounded-lg text-lg font-medium border-[2px];

    svg {
      @apply w-[23.5px] h-[23.5px];
    }
  }

  .text-link {
    @apply flex items-center;
    @apply font-medium bg-transparent border-b border-transparent cursor-pointer;
    @apply disabled:text-neutral-200 disabled:cursor-not-allowed disabled:hover:text-neutral-200;
  }

  .tl-white {
    @apply text-neutral-10;
    @apply hover:border-b hover:border-neutral-10 active:border-b active:border-neutral-100 active:text-neutral-100 focus:text-neutral-50;
  }

  .tl-white.disabled {
    @apply text-neutral-100 border-none;
  }

  .tl-icon {
    @apply flex items-center gap-1;
  }

  .tl-icon.tl-purple svg {
    @apply text-primary-500;
    @apply hover:text-primary-400;
  }

  .tl-purple {
    @apply text-primary-400 border-b border-primary-400;
    @apply hover:text-primary-500;
    @apply hover:border-b hover:border-primary-500;
    @apply active:border-b active:border-primary-600;
    @apply active:text-primary-600;
  }

  .tl-purple:active {
    svg {
      @apply text-primary-600;
    }
  }

  .tl-sm {
    @apply gap-1;
    @apply text-xs;
    @apply focus:font-semibold;

    svg {
      @apply w-5 h-5;
    }
  }

  .tl-md {
    @apply gap-1;
    @apply text-base py-0.5;

    svg {
      @apply w-6 h-6;
    }
  }

  .tl-lg {
    @apply gap-2;
    @apply text-lg py-0.5;

    svg {
      @apply w-8 h-8;
    }
  }

  .btn-rounded {
    @apply bg-neutral-400 text-primary-500 flex items-center justify-center rounded-[28px] cursor-pointer;
    @apply hover:bg-neutral-300 active:bg-neutral-500 ;
    @apply disabled:text-neutral-200;

    &:disabled {
      @apply cursor-not-allowed hover:bg-neutral-400;

      svg {
        @apply text-neutral-200;
      }
    }

    svg {
      @apply w-8 h-8 text-primary-500;
    }
  }

  .btn-rounded.selected {
    @apply bg-primary-500;

    svg {
      @apply text-neutral-10;
    }
  }

  .btn-rounded:hover {
    svg {
      @apply text-primary-400
    }
  }

  .btn-rounded:active {
    svg {
      @apply text-primary-600
    }
  }

  .btn-rounded-md {
    @apply w-12 h-12 p-2;

    svg {
      @apply w-8 h-8 ;
    }
  }

  .btn-rounded-lg {
    @apply w-16 h-16 p-2;

    svg {
      @apply w-6 h-6 ;
    }
  }

  .btn-rounded-sm {
    @apply w-8 h-8 p-1.5;

    svg {
      @apply w-5 h-5 text-primary-500;
    }
  }

  .btn-icon {
    @apply inline-flex items-center justify-center gap-2 cursor-pointer ;
  }

  .btn-icon:disabled {
    @apply cursor-not-allowed;
  }
  .btn-icon-white:disabled, .btn-icon-purple:disabled {
    svg {
      @apply text-neutral-200;
    }
  }

  .btn-icon-white {
    svg {
      @apply text-neutral-10;
    }
    @apply hover:bg-neutral-500 hover:rounded-full;
    @apply focus:bg-neutral-500 focus:rounded-full;
  }

  .btn-icon-white:active {
    svg {
      @apply text-neutral-100;
    }
  }

  .btn-icon-purple:active {
    svg {
      @apply text-primary-600;
    }
  }

  .btn-icon-purple {
    svg {
      @apply text-primary-500;
    }
    @apply hover:bg-neutral-500 hover:rounded-full;
    @apply focus:bg-neutral-500 focus:rounded-full;
  }

  .btn-icon-sm {
    @apply w-8 h-8;
    svg {
      @apply w-5 h-5;
    }
  }

  .btn-icon-md {
    @apply w-10 h-10;
    svg {
      @apply w-6 h-6;
    }
  }

  .form-field__submit {
    @apply btn-primary;
  }

  .role-selector {
    @apply w-full rounded-xl border border-neutral-400 hover:bg-neutral-400 cursor-pointer;

    &:hover {
      .role-selector-content {
        @apply bg-neutral-400;
      }
      .role-icon {
        @apply bg-neutral-300;
      }
      .role-icon svg {
        @apply text-primary-500;
      }
    }

    .role-selector-content {
      @apply flex gap-4 bg-neutral-600  p-6 rounded-xl;
    }

    .role-icon {
      @apply rounded-[38px] p-[10px] h-fit bg-neutral-400;
    }

    .role-icon svg {
      @apply w-6 h-6;
      @apply text-neutral-200;
    }

    .role-option {
      @apply text-neutral-10 font-semibold text-lg;
    }

    .role-description {
      @apply text-neutral-50;
    }
  }

  .role-selector.active {
    @apply border-gradient;

    .role-selector-content {
      @apply  bg-[#788CFF0D];
    }

    .role-icon svg {
      @apply text-primary-500;
    }
  }
  .progress-bar {
    @apply flex gap-6;
  }
  .progress-bar-icon {
    @apply w-7 h-7 border border-neutral-300 p-1.5 rounded-full;

    svg {
      @apply text-neutral-300;
    }
  }
  .progress-line {
    @apply absolute w-[163px] left-[40px] h-[2px] bg-neutral-300 rounded-[2px];
  }

  .progress-bar-component {
    @apply justify-center items-center flex flex-col gap-1 w-[180px];
  }

  .progress-bar-placeholder {
    @apply w-full flex flex-col gap-2 justify-center items-center;

    p {
      @apply text-neutral-200 text-xxs font-switzer;
    }
    h5 {
      @apply uppercase font-semibold text-sm text-neutral-200;
    }
  }
  .progress-bar-component.active {
    .progress-bar-icon svg {
      @apply fill-primary-500;
    }
  }
  .progress-bar-component.active {
    .progress-bar-icon {
      @apply border-primary-500;
    }
  }

  .progress-bar-component.active, .progress-bar-component.complete {
    .progress-line {
      @apply bg-primary-500;
    }

    .progress-bar-placeholder {
      p {
        @apply text-neutral-200;
      }

      h5 {
        @apply text-neutral-10;
      }
    }
  }

  .progress-bar-component.complete {
    .progress-bar-icon {
      svg {
        @apply fill-neutral-10;
      }
    }

    .progress-bar-icon {
      @apply bg-primary-500 border-none;
    }
  }

  .tag-sm {
    @apply text-xs px-3 py-[2.5px];
  }

  .tag-md, .tag-lg {
    @apply text-sm px-4 py-[5px];
  }

  .tag-icon {
    @apply flex gap-1 items-center;
  }

  .tag-icon.tag-sm {
    svg {
      @apply w-4 h-4;
    }
  }

  .purple-tag {
    @apply font-medium text-primary-500;
    @apply rounded-full bg-[#788CFF1A] ;
  }

  .green-tag {
    @apply font-medium text-secondary-500;
    @apply rounded-full bg-[#71BFCE1A];
  }

  .grey-tag {
    @apply font-medium text-neutral-50;
    @apply rounded-full bg-[#6065724D];
  }

  .yellow-tag {
    @apply font-medium text-yellow-500;
    @apply rounded-full bg-[#FFC46C0F];
  }

  .red-tag {
    @apply font-medium text-red-500;
    @apply rounded-full bg-[#FF68830F];
  }

  .success-tag {
    @apply font-medium text-success-500;
    @apply rounded-full bg-[#81EBC50F];
  }

  .card {
    @apply flex flex-col gap-2 border border-neutral-400 p-6 pl-5 rounded-xl bg-neutral-700;
    @apply hover:bg-neutral-600 cursor-pointer active:bg-neutral-800 active:border-neutral-800;
  }

  .card.selected {
    @apply border-gradient;
  }


  .btn-navbar-primary {
    @apply block border border-neutral-400 p-[10px] sm:p-3 bg-[#6065721A] rounded-lg;
    @apply hover:bg-[#8A90A01A];
    @apply active:bg-[#788CFF1A] active:border-primary-600
  }

  div.fixed.inset-0.z-30 {
    @apply bg-[#222429CC];
  }

  .inset-0 {
    inset: 0;
  }

  .btn-navbar-primary:hover svg {
    @apply text-neutral-100;
  }

  .btn-navbar-primary:active svg {
    @apply text-primary-600;
  }

  .btn-navbar-primary svg {
    @apply w-[27px] h-[27px] sm:w-8 sm:h-8 text-neutral-200;
  }

  .btn-navbar-primary.active {
    @apply bg-[#788CFF1A] border-primary-500
  }

  .btn-navbar-primary.active svg {
    @apply text-primary-500;
  }

  .btn-dropdown {
    @apply flex gap-[1px];
    .dropdown-content {
      @apply bg-primary-500 hover:bg-primary-400 active:bg-primary-600 text-neutral-10 active:font-semibold;
      @apply border-none font-switzer text-center;
      @apply focus:outline-none focus:shadow-none;
      @apply disabled:cursor-not-allowed;
      @apply disabled:bg-neutral-400 disabled:text-neutral-200;
    }
    .dropdown-arrow {
      @apply bg-primary-500 hover:bg-primary-400 active:bg-primary-600 text-neutral-10 active:font-semibold;
      @apply border-none font-switzer text-center;
      @apply focus:outline-none focus:shadow-none;
      @apply disabled:cursor-not-allowed;
      @apply disabled:bg-neutral-400 disabled:text-neutral-200;
    }

    .dropdown-menu {
    }
  }

  .setting-card {
    @apply rounded-xl bg-neutral-700 p-4 sm:p-8 border border-neutral-300 flex justify-between;
    @apply hover:bg-neutral-600
  }

  .setting-card .setting-title {
    @apply sm:text-base text-sm font-semibold text-neutral-10;
  } 

  .setting-card .setting-description {
    @apply font-normal text-xs text-neutral-100;
  }

  .profile-picture {
    @apply relative rounded-full  object-cover;
  }

  .profile-picture::before {
    content: attr(data-alt);;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: #7F8597;
    background-color: #1B1D21;
    text-align: center;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-weight: 600;
    font-size: inherit;
  }

  .profile-picture-xs {
    @apply w-6 h-6;
  }

  .profile-picture-sm::before {
    font-size: 12px!important;
  }

  .profile-picture-md::before {
    font-size: 16px!important;
  }

  .profile-picture-lg::before {
    font-size: 18px!important;
  }

  .profile-picture-xl::before {
    font-size: 20px!important;
  }

  .profile-picture-sm {
    @apply w-8 h-8;
  }

  .profile-picture-md {
    @apply w-12 h-12;
  }

  .profile-picture-lg {
    @apply w-16 h-16;
  }

  .profile-picture-xl {
    @apply w-20 h-20;
  }

  .profile-picture-2xl {
    @apply w-25 h-25;
  }

  .dropdown-just-ask {
    @apply flex gap-1 p-1.5 text-neutral-200 items-center cursor-pointer;

    svg {
      @apply w-5 h-5 text-neutral-200;
    }
  }

  .dropdown-just-ask.active {
    @apply text-primary-500;

    svg {
      @apply w-5 h-5 text-primary-500;
    }
  }

  .action-sheet {
    @apply bg-neutral-500 shadow ;
    @apply rounded;
    box-shadow: 0px 0px 250px 0px rgba(0, 0, 0, 0.24);
    @apply divide-y divide-neutral-400;
  }

  .action-sheet-lg .action-sheet-component {

  }

  .action-sheet-md .action-sheet-component {
    @apply py-2 px-3 gap-2; 
  }


  .action-sheet-sm .action-sheet-component {
    @apply py-1 px-2 gap-1 font-normal text-xs; 
  }

  .action-sheet-component {
    @apply flex items-center;
    @apply px-3 py-[11px] gap-2 flex bg-neutral-500 hover:bg-neutral-400 active:bg-neutral-600 cursor-pointer;
    @apply text-base font-normal text-neutral-50 active:text-neutral-10;

    svg {
      @apply text-neutral-200;
    }
  }

  .action-sheet-component:hover {
    svg {
      @apply text-neutral-50;
    }
  }

  .ask-card {
    @apply cursor-pointer flex flex-col justify-center items-center w-full rounded-2xl border border-neutral-400 sm:p-6 sm:pb-8 px-4 pt-5 pb-6;
  }

  .ask-card.open {
    @apply bg-neutral-700 hover:bg-neutral-600;
  }

  .ask-card.open .search-result {
    @apply bg-neutral-700 hover:bg-neutral-600;
  }

  .ask-card.complete {
    @apply bg-neutral-600;
    @apply hover:bg-neutral-500 active:bg-neutral-700;
  }

  .ask-card.complete .search-result {
    @apply bg-neutral-600;
    @apply hover:bg-neutral-500 active:bg-neutral-700;
  }

  .network-suggestion-card {
    @apply flex flex-col gap-4 border p-4 pb-5 rounded-xl bg-neutral-700 ;
  }

  .network-suggestion-card--answered {
    @apply border-[#6072DC80];
  }

  .network-suggestion-card--unanswered {
    @apply border-gradient;
  }

  .response-card {
    @apply bg-neutral-700 p-4 sm:p-6 sm:pb-8 border border-neutral-400 rounded-2xl;
    @apply flex flex-col justify-center items-center gap-8 w-full;
  }

  .tab-bar {
    @apply flex -mb-px text-center border-b border-neutral-400;
  }

  .tab-component {
    @apply flex-auto;

    > div {
      @apply h-full w-full flex justify-center items-center gap-2 text-neutral-100;
      @apply font-semibold p-4 hover:text-primary-400 hover:bg-neutral-500;
    }
  }

  .tab-component-md {
    > div {
      @apply text-lg;
    }
  }

  .tab-component-sm {
    > div {
      @apply text-sm;
    }
  }

  .tab-component-md .active-tab {
    @apply border-b-4;
  }

  .tab-component-sm .active-tab {
    @apply border-b-2;
  }

  .active-tab {
    @apply !text-primary-400 !border-primary-500 !font-bold;
  }

  .active-tab .number {
    @apply !bg-primary-500 !text-neutral-10;
  }

  .experience {
    @apply bg-neutral-700 border border-neutral-400 rounded-lg flex p-5;
  }


  .reveal, .reveal2 {
    opacity: 0;
    transition: opacity 1000ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  }

  .reveal-transition {
    opacity: 0;
    transition: opacity 1000ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  }

  .reveal.visible, .reveal2.visible {
    opacity: 1;
  }

  .nudget-component {
    @apply bg-neutral-700 border-primary-500 border rounded-lg sm:px-6 sm:py-5 p-4 gap-4 flex flex-col sm:flex-row items-center;
    @apply hover:bg-neutral-600 border-primary-400;
    @apply active:bg-neutral-800 border-primary-600;
  }

  .card-header-title {
    @apply text-neutral-100 font-semibold uppercase text-base font-worksans tracking-[0.08em];
  }

  .match-checkbox {
    @apply w-6 h-6 border-0 checked:bg-primary-500
    text-primary-500 active:bg-primary-500 hover:bg-primary-500
    focus:shadow-none focus:border-none focus-visible:border-none
    focus-visible:outline-none focus-visible:ring-0 bg-neutral-400
    rounded-[2px] focus:ring-0 hover:shadow-none shadow-none focus:ring-offset-0;
  }

  .checkbox {
    @apply w-[18px] h-[18px] m-1.5 border-0 checked:bg-primary-500
      text-primary-500 active:bg-primary-500
      disabled:hover:bg-neutral-500
      focus:shadow-none focus:border-none focus-visible:border-none
      focus-visible:outline-none focus-visible:ring-0
      disabled:bg-neutral-500 bg-neutral-400
      rounded-[2px] focus:ring-0 hover:shadow-none shadow-none focus:ring-offset-0;
  }

  .radio-button {
    @apply w-[18px] h-[18px] m-1.5 border-0 checked:bg-primary-500
      text-primary-500 active:bg-primary-500
      disabled:hover:bg-neutral-500
      focus:shadow-none focus:border-none focus-visible:border-none
      focus-visible:outline-none focus-visible:ring-0
      disabled:bg-neutral-500 bg-neutral-400
      rounded-[2px] focus:ring-0 hover:shadow-none shadow-none focus:ring-offset-0;
  }

  .toggle {

  }

  .network-suggestion {
    @apply bg-neutral-700 hover:bg-neutral-600 border-gradient rounded-xl;
  }

  .post-type {
    @apply rounded-[100px] px-3 py-[5px] ;
  }

  .post-type--ask {
    @apply text-secondary-500 bg-[#71BFCE1A];
  }

  .post-type--post {
    @apply text-success-500 bg-[#81EBC50F];
  }

  .post-type--rolling_ask {
    @apply text-alert-500 bg-[#FFC46C0F];
  }

  .post-type--intro {
    @apply text-alert-500 bg-[#FFC46C0F];
  }

  .share-to {
    @apply rounded px-2 py-0.5 text-xs font-normal;
  }

  .share-to--to_all {
    @apply bg-[#6065724D] text-neutral-50;
  }

  .share-to--direct {
    @apply bg-[#71BFCE1A] text-info-500;
  }


  .border-gradient {
    background: linear-gradient(rgb(22 23 27 / var(--tw-bg-opacity)) 0 0) padding-box, linear-gradient(to right, #788CFF, #71BFCE) border-box;
    border: 1px solid transparent;
  }


  .search-result {
    @apply cursor-pointer bg-neutral-700 border border-neutral-400 rounded-xl p-2 sm:p-5 flex justify-between;
    @apply hover:bg-neutral-600 active:border-gradient active:bg-neutral-800;
  }

  .company-image {
    @apply profile-picture profile-picture-md border-none;
  }
}

@media (min-width: 768px) {
  .scrollbar::-webkit-scrollbar {
    display: block;
    width: 8px;
  }
  .scrollbar::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: rgb(34 36 41/var(--tw-bg-opacity));
    padding-left: 20px;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background-color: #788CFF;
    border-right: none;
    border-left: none;
    border-radius: 10px;
  }

  .scrollbar::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 6px;
  }

  .scrollbar::-webkit-scrollbar-track-piece:start {
      background: transparent;
      margin-top: 6px;
  }
  .header-wrap {
    width: 100%;
  }
}

.setting-investor-list {
    @apply bg-neutral-700 rounded-[10px] hover:bg-neutral-600 active:bg-neutral-700 p-4 border border-neutral-400 flex items-center;
  }

.tooltip {
  @apply absolute z-10  inline-block px-3 py-2 text-xs font-normal text-neutral-50 rounded-sm transition-opacity duration-300 bg-neutral-400 shadow-sm ;
}

.linkedin-connection-in-pop-up {
  @apply flex justify-between px-3 py-4;
  @apply bg-neutral-700 border border-neutral-400 rounded-[10px];
  @apply hover:bg-neutral-600;
}

.linkedin-connection-in-pop-up.selected {
  @apply bg-neutral-800;
}
.linkedin-contact.selected .btn-add-contact {
  @apply hidden;
}

.linkedin-contact.selected .btn-remove-contact {
  @apply flex;
}

.linkedin-contact .btn-remove-contact {
  @apply hidden;
}

.linkedin-contact.selected {
  @apply border-gradient;
}

.linkedin-contact {
  @apply bg-neutral-700 border border-neutral-400 active:bg-neutral-800 hover:bg-neutral-600 p-4 rounded-[10px];
}

.border-sn {
  @apply border border-neutral-400;
}

.added-contacts {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}

.added-contacts::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}
@keyframes dotsSequence {
  0%, 33% {
    opacity: 1;
    transform: translateX(0);
  }
  34%, 66% {
    opacity: 1;
    transform: translateX(10px);
  }
  67%, 100% {
    opacity: 1;
    transform: translateX(20px);
  }
}

.dots-animation circle {
  opacity: 0;
}

.dots-animation circle:nth-child(2) {
  animation: fadeIn 3s steps(1) infinite;
}

.dots-animation circle:nth-child(3) {
  animation: fadeInLast 3s steps(1) infinite;
}

@keyframes fadeIn {
  0%, 32% {
    opacity: 0;
  }
  33%, 100% {
    opacity: 1;
  }
}

@keyframes fadeInLast {
  0%, 65% {
    opacity: 0;
  }
  66%, 100% {
    opacity: 1;
  }
}

.text-gradient {
  background: linear-gradient(90deg, #788CFF 0%, #71BFCE 99.82%);
  background-clip: text;
  -webkit-background-clip: text;
}

.free-subscription, .pro-subscription, .business-subscription, .basic-subscription, .plus-subscription {
  @apply rounded-lg bg-neutral-700 lg:px-6 lg:py-8 p-4 border border-neutral-400;
  @apply hover:bg-neutral-600;
}

.vc-subscription {
  @apply bg-neutral-700 border border-neutral-400 sm:px-6 sm:pt-10 sm:pb-8 p-4 rounded-lg flex sm:flex-row flex-col gap-6 justify-between items-center;
  @apply active:bg-neutral-800 hover:bg-neutral-600;
}

.subscription {
  @apply rounded-lg bg-neutral-700 sm:px-6 sm:pt-10 sm:pb-8 p-4 border border-neutral-400;
  @apply hover:bg-neutral-600;
}

turbo-frame[busy] .loading-animation {
  display: flex !important;
}

turbo-frame[busy] .hidden-when-busy {
  display: none !important;
}

.dropup {
  left: unset;
  width: 384px
}

.bg-error-800 {
  background-color: #FF4D4F;
}

.dropdown-sheet {
  @apply rounded-md w-[279px] flex-col;
}

.dropdown-component {
  @apply bg-neutral-500 px-4 py-[11px] h-12 font-normal text-neutral-100 hover:bg-neutral-400 hover:text-neutral-200;
}

.dropdown-component-active {
  @apply bg-neutral-600 text-primary-500 font-medium;
}

.custom-dots button {
  @apply !bg-neutral-400;
}

.custom-dots button[aria-current="true"],
.custom-dots button:hover {
  @apply !bg-primary-500;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}
.add-profile-picture {
  @apply w-24 h-24 rounded-full border border-[#788CFF80] p-2 flex items-center justify-center;
}

.dot {
  @apply w-0.5 h-0.5 bg-neutral-100;
}

.header {
  @apply w-full p-4 sm:px-8 flex justify-end bg-neutral-700 items-center;
}
.modal {
  @apply bg-[#222429CC] overflow-hidden fixed top-0 right-0 left-0  justify-center items-center w-full md:inset-0 h-full max-h-full;
}
.search-results {
  @apply flex flex-col gap-4 overflow-auto max-h-[600px] pr-2 scrollbar;
}
.intro-path {
  @apply  w-full border-gradient rounded-xl;
}

.intro-path > div {
  @apply bg-neutral-700 flex gap-2 items-center p-4 rounded-xl hover:bg-neutral-600 active:bg-neutral-800 cursor-pointer;
}

.button-sheet {
  @apply pb-10 px-6;
}
.button-sheet > div {
  @apply pt-8 flex justify-between border-t border-neutral-400;
}

.header-button {
  @apply sm:w-14 sm:h-14 w-12 h-12 bg-neutral-500 rounded-lg p-3;
  @apply hover:bg-neutral-400 active:bg-neutral-700;
}

.header-button.active {
  @apply !bg-neutral-700;
}

.ask-suggestion {
  @apply rounded-lg border border-neutral-400 p-3;
  @apply hover:bg-neutral-600 active:bg-neutral-800 cursor-pointer;
}

.new-ask-form {
  @apply flex justify-between border border-transparent;
  @apply bg-neutral-500 p-2 pl-3 rounded-lg gap-3 flex items-center text-neutral-50;
  @apply focus-within:border-primary-500 focus-within:bg-neutral-700;
}

.empty-state-feed {
  @apply w-[450px] bg-neutral-600 ;
}

.new-ask-question-input {
  line-height: 24px;word-wrap: break-word;white-space: break-spaces;
  @apply text-neutral-50 w-full min-h-5;
}

.wizard-popup-founder {
  box-shadow: 0px 0px 250px 0px rgba(0, 0, 0, 0.62);
  @apply px-6 py-8 flex flex-col gap-6;
}

.feature {
  @apply border-gradient px-3 py-2 rounded-lg;;
}

.border-inner-gradient {
  background: linear-gradient(rgb(22 23 27 / var(--tw-bg-opacity)) 0 0) padding-box, linear-gradient(to right, #788CFF, #71BFCE) border-box;
  border: 1px solid transparent;
}

.header-feed {
  @apply border-b border-neutral-400 w-[450px] px-6 py-4 bg-neutral-600;
}

.header-history {
  @apply  px-8 py-4 space-x-2 sm:space-x-4 flex justify-end;
}

.header-history.active {
  @apply w-[450px] bg-neutral-600;
}

.header-full {
  
}

.header-main {
  @apply border-b border-neutral-400 bg-neutral-700 px-8 py-4;
}

.ask-new {
  @apply w-[450px] pt-8 px-6 pb-8 flex flex-col gap-2 bg-neutral-600;
  @apply hover:bg-neutral-500 active:bg-neutral-700 active:border-r-2 active:border-primary-500;
}

.intro-request-new {
  @apply w-[450px] pt-8 px-6 pb-8 flex flex-col gap-2 bg-neutral-600;
  @apply hover:bg-neutral-500 active:bg-neutral-700 active:border-r-2 active:border-alert-500;
}

.update-new {
  @apply w-[450px] pt-8 px-6 pb-8 flex flex-col gap-2 bg-neutral-600;
  @apply hover:bg-neutral-500 active:bg-neutral-700 active:border-r-2 active:border-secondary-500;
}

.shared-to {
  @apply flex gap-2 items-center;
}

.shared-to .profile-picture:nth-child(n+2) {
  margin-left: -12px;
}

.shared-to p {
  @apply text-neutral-100 font-normal text-xs;
}

.ask-history-edit-view {
  @apply p-4 rounded-lg w-full;
  @apply hover:bg-neutral-500 active:bg-[#1B1D21] cursor-pointer;
}

.ask-history-edit-view:hover {
  .ask-history-edit-actions {
    @apply flex;
  }
}

.ask-history-content {
  @apply max-w-[360px];
}

.ask-history-edit-view:hover {
  .ask-history-content {
    @apply max-w-[250px];
  }
}

.ask-history-edit-view.editing {
  .ask-history-content {
    @apply hidden;
  }
  .ask-history-edit-input {
    @apply block;
  }
}

.ask-history-edit-view.editing:hover {
  .ask-history-edit-actions {
    @apply hidden;
  }
}

.ask-history-edit-input {
  @apply hidden;
}

.ask-history-edit-actions {
  @apply hidden gap-2 items-center;
}

.ask-history-edit-clicked {
  @apply border-primary-500 border bg-neutral-700 rounded-lg;
}

.ask-history-default-view {
  @apply p-4 flex gap-6 justify-between rounded-lg bg-neutral-600 cursor-pointer;
  @apply hover:bg-neutral-500 active:bg-neutral-700;
}

.actions {
  @apply flex gap-2;
}

.new-activity-dot {
  @apply w-5 h-5 rounded-full;

  background: linear-gradient(90deg, rgba(120, 140, 255, 0.2) 0%, rgba(113, 191, 206, 0.2) 99.82%);
}

.email-draft {
  @apply flex gap-6 flex-col;
}

.email-draft-content {
  font-style: italic;

  @apply border-t border-b border-neutral-300 py-6;
  @apply text-neutral-100 text-sm font-normal;
}

.email-draft-header p {
  @apply inline-block italic text-sm text-neutral-100;
}

.post-ask-draft {
  @apply rounded-xl py-8 px-6 border border-neutral-400;
}

.post-intro-request-draft {
  @apply rounded-xl py-8 px-6 border border-neutral-400 flex flex-col gap-6;
}

.post-update-draft {
  @apply rounded-xl py-8 px-6 border border-neutral-400;
}

.chat-post {
  @apply bg-neutral-700 py-8 px-6 rounded-xl border border-neutral-400;
  @apply hover:bg-neutral-600 active:bg-neutral-800;
}

.chat-post-intro-request {
  @apply flex flex-col gap-6;
}
.chat-history {
  @apply sm:border-r sm:border-neutral-400 bg-neutral-600 overflow-auto scrollbar;
  width: 0px;
  height: 100%;
  z-index: 1000;
  transition: width 0.3s ease-in-out;
  overflow: hidden;
}

.chat-history.active {
  @apply sm:w-[450px] w-full;
}
.followup-actions {
  @apply rounded-md border border-neutral-400 p-3 flex justify-between items-center;
  @apply hover:bg-neutral-600 active:bg-neutral-800;
}

.recommended-contact-card-chat {
  @apply rounded-2xl border border-neutral-400 bg-[#1B1D21] p-6 pb-8;
  @apply hover:bg-neutral-600 active:bg-neutral-800;
}

.recommended-contact-card-activity-log {
  @apply rounded-2xl border border-neutral-400 bg-neutral-700 px-6 py-8;
  @apply hover:bg-neutral-600 active:bg-neutral-800;
}

.recommended-contact-card-take-action, .recommended-contact-card-declining {
  @apply border-gradient;
}

.carousel {
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  padding-right: 4px;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-item {
  flex: 0 0 48.5%; /* 50% to show 2 items at once */
  min-width: 48.5%; /* Adjust to fit two items */
  text-align: left;
  box-sizing: border-box;
}

.progress-line-new {
  @apply flex-1 h-[0.5px] bg-neutral-200;
}

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

.message-cloud {
  @apply bg-neutral-600 px-6 py-4 rounded-[48px] w-fit self-end ml-16;
}
.message-cloud p {
  @apply text-neutral-50 font-normal;
}

.conversation-detail {
  @apply flex flex-col gap-4 sm:gap-10;
}

.ai-response-detail {
  @apply flex gap-4;
}

.people-suggestion-result {
  @apply bg-neutral-700 border border-neutral-400 py-8 px-6 flex justify-between rounded-xl;
  @apply hover:bg-neutral-600 active:bg-neutral-800;
  @apply cursor-pointer;
}

.people-suggestion-result-sm {
  @apply bg-neutral-700 border border-neutral-400 p-6 flex justify-between rounded-xl;
  @apply hover:bg-neutral-600 active:bg-neutral-800;
  @apply cursor-pointer;
}

.company-suggestion-result {
  @apply bg-neutral-700 border border-neutral-400 py-8 px-6 flex justify-between rounded-xl;
  @apply hover:bg-neutral-600 active:bg-neutral-800;
  @apply cursor-pointer;
}

.tip {
  @apply border-neutral-400 border px-4 py-2 rounded-[48px] flex gap-3 items-center ml-16;
}

.tip p {
  @apply text-neutral-100 font-normal italic text-xs;
}
.chatbot-logo {
  @apply rounded-full  bg-neutral-600;
}

.chatbot-logo-md {
  @apply w-12 h-12 p-2;

  svg {
    @apply w-8 h-8;
  }
}

.chatbot-logo-xmd {
  @apply w-9 h-9 p-1.5;

  svg {
    @apply w-6 h-6;
  }
}

.chatbot-logo-sm {
  @apply w-8 h-8 p-[5px];

  svg {
    @apply w-[22px] h-[22px];
  }
}

.linkedin-experience {
  @apply bg-neutral-700 border border-neutral-400 rounded-[10px] flex p-3;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.breadcrum {
  @apply bg-neutral-500 flex items-center sticky top-0;
}
.company-circle {
  @apply w-20 h-20 p-4 border border-neutral-400 rounded-xl hover:bg-neutral-400 active:bg-neutral-700;
}
.settings-popup {
  @apply flex justify-between cursor-pointer items-center rounded-lg py-2 pr-3 pl-4 border border-neutral-300 gap-4 hover:bg-[#30333A80];
}

.settings-popup.active {
  @apply border-gradient !bg-neutral-600;
}

/* thinking_animation.css */
.step {
  display: flex;
  align-items: end;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.step.hidden {
  display: none;
}

.step.fade-in {
  opacity: 1;
}

.step.fade-out {
  opacity: 0;
}

/* Optional: Add pulse animation for the dots */
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.thinking-dot {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.thinking-dot.visible {
  opacity: 1;
}

.connector-type {
    @apply w-[120px] flex justify-between items-center px-2 py-1 text-xs font-normal flex-shrink-0 rounded;

    svg {
      @apply w-3 h-3;
    }
  }

  .connector-type.connector {
    @apply bg-[#788CFF1A] text-primary-500 hover:text-primary-400 hover:bg-[#788CFF33] active:text-primary-400 active:bg-[#788CFF1A];
  }

  .connector-type.investor {
    @apply bg-[#71BFCE33] text-secondary-500 hover:text-secondary-400 hover:bg-[#71BFCE33] active:text-secondary-600 active:bg-[#71BFCE1A];
  }

  .connector-type.limited_partner {
    @apply bg-[#81EBC533] text-success-500 hover:text-success-400 hover:bg-[#81EBC533] active:text-success-600 active:bg-[#81EBC51A];
  }

  .connector-type.advisor {
    @apply bg-[#88B8E733] text-info-500 hover:text-info-400 hover:bg-[#88B8E733] active:text-info-600 active:bg-[#88B8E71A];
  }
.rotate-180 {
  transform: rotate(180deg);
}

.h-screen-with-alert {
  height: calc(100vh - 43px);
}

.eclipse-13 {
  position: absolute;
  width: 514.02px;
  height: 514.02px;
  left: calc(50% - 514.02px/2 - 0px);
  top: 65.92px;
  background: linear-gradient(90deg, rgba(120, 140, 255, 0.2) 0%, rgba(113, 191, 206, 0.2) 99.82%);
  filter: blur(150px);
  flex: none;
  order: 1;
  flex-grow: 0;
  z-index: 1;
}

.question-mark-button {
  @apply w-12 h-12 rounded-full p-3 active:bg-primary-600 hover:bg-primary-400 bg-primary-500 cursor-pointer;

  svg {
    @apply text-neutral-10 w-6 h-6;
  }
}

.filter-tab-line {
  @apply flex gap-3 p-1.5 border border-neutral-400 rounded-lg items-center;
}

.filter-tab {
  @apply h-12 rounded-lg p-2 text-primary-400;
}

.filter-tab-active {
  @apply bg-primary-500 text-neutral-10;
}

.filtering-button {
  @apply rounded-xl py-3 px-6 bg-neutral-400 hover:bg-neutral-300 active:bg-neutral-500;

  svg {
    @apply text-neutral-10;
  }
}

.filtering-button:hover, .filtering-button:active {
  svg {
    @apply !text-neutral-10;
  }
}

.filtering-button-selected {
  @apply bg-[#788CFF1A];

  svg {
    @apply text-primary-400;
  }
}

.notification-toast {
  box-shadow: 0px 0px 250px 0px #0000009E;

  @apply bg-[#FF68831A] px-4 py-6 rounded-xl items-center gap-3;
}

.assistant-message-cloud {
  @apply bg-[#788CFF33] p-4 rounded-l self-start;

  border-top-left-radius: 4px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 24px;
}

.assistant-message-cloud p {
  @apply text-neutral-10 font-normal;
}

.user-message-cloud {
  @apply bg-neutral-600 p-6 w-fit self-end;

  border-top-left-radius: 24px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 24px;
}

.user-message-cloud p {
  @apply text-neutral-10 font-normal;
}

.start-call-button {
  width: 240px;
  height: 56px;
  gap: 8px;
  padding-top: 12px;
  padding-right: 16px;
  padding-bottom: 12px;
  padding-left: 16px;
  border-radius: 8px;
  background: linear-gradient(89.76deg, #5E73EA 0.21%, #56C9DF 148.41%);
}

.start-call-button:hover {
  background: linear-gradient(89.76deg, #667bf4 0.21%, #56c9dfe0 148.41%);
}

.vapi-btn {
  display: none !important;
  /* position: relative !important;
  width: 240px !important;
  height: 56px !important;
  gap: 8px !important;
  padding-top: 12px !important;
  padding-right: 16px !important;
  padding-bottom: 12px !important;
  padding-left: 16px !important;
  border-radius: 8px !important;

  background: linear-gradient(89.76deg, #5E73EA 0.21%, #56C9DF 148.41%) !important; */
}
@keyframes expand {
  0% {
    width: 240px;
    height: 56px;
  }

  50% {
    width: 269px;
    height: 76.69px;
    border-radius: 12px;
  }

  100% {
    width: 296px;
    height: 104.6px;
    border-radius: 16px;
  }
}

@keyframes expand1 {
  0% {
    width: 240px;
    height: 56px;
    border-radius: 8px;
  }

  25% {
    width: 269px;
    height: 76.69px;
    border-radius: 12px;
  }

  50% {
    width: 296px;
    height: 104.6px;
    border-radius: 16px;
  }

  100% {
    width: 296px;
    height: 104.6px;
    border-radius: 16px;
  }
}

@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.expand-animation-2 {
  width: 240px;
  height: 56px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background: rgba(93, 132, 232, 0.2);
  animation: expand 1s 0.5s ease-in-out forwards;
  animation-iteration-count: infinite;
}

.expand-animation-1 {
  width: 240px;
  height: 56px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background: rgba(93, 132, 232, 0.2);
  animation: show 0s forwards, expand1 1s 0s ease-in-out forwards;
  animation-iteration-count: infinite;
}

.conversation-summary {
  @apply bg-[#788CFF33] p-4 rounded-l self-start my-10  sm:w-[720px] mx-auto text-neutral-50;
}
.agent-talking-container {
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.agent-talking-circle {
  border-radius: 50%;
  background: linear-gradient(180deg, #5E75E9 0%, #59A7E3 100%);
  width: 112px;
  height: 112px;
  position: absolute;
  opacity: 0;
  animation: scaleIn 2.5s infinite cubic-bezier(.36, .11, .89, .32);
}
@keyframes scaleIn {
  from {
    transform: scale(1, 1);
    opacity: 1;
  }
  to {
    transform: scale(1.7, 1.7);
    opacity: 0;
  }
}

.community-card {
  @apply bg-neutral-700 border border-neutral-400 rounded-xl sm:p-8 p-4 sm:w-[921px] hover:bg-neutral-600 active:bg-neutral-800;
}

.people-suggestion-result-blur {
  position: absolute;
  background-color: #16171B1A;
  backdrop-filter: blur(3px);
  width: 100%;
  z-index: 10;
  height: 100%;
}

[contenteditable][placeholder]:empty:before {
  content: attr(placeholder);
  pointer-events: none;
  display: block;
  color: #7F8597;
}
#breadCrumbContainer {
  max-width: 100vw;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
 * 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.
 *


 */

.landing-text-gradient {
  background: linear-gradient(270deg, #A3B0FF 2.16%, rgba(120, 135, 222, 0.00) 2.16%, #A3B0FF 2.17%, rgba(122, 233, 255, 0.29) 97.06%);
  background-clip: text;
  -webkit-background-clip: text;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  pointer-events: none;
  display: block;
  color: #7F8597;
}

.tooltip[data-popper-placement^=top]>.tooltip-arrow {
  bottom: -4px;
}

[data-popper-arrow] {
  visibility: hidden;
}
[data-popper-arrow], [data-popper-arrow]:before {
  background: inherit;
  height: 12px;
  position: absolute;
  width: 14px;
}
.tooltip-arrow {
  visibility: hidden;
}
.tooltip-arrow, .tooltip-arrow:before {
  background: inherit;
  height: 12px;
  position: absolute;
  width: 14px;
}

[role=tooltip].invisible>[data-popper-arrow]:after, [role=tooltip].invisible>[data-popper-arrow]:before {
  visibility: hidden;
}

.tooltip.invisible>.tooltip-arrow:before {
  visibility: hidden;
}
[role=tooltip]>[data-popper-arrow]:before {
  border-color: #e5e7eb;
  border-style: solid;
}
[data-popper-arrow]:after, [data-popper-arrow]:before {
  content: "";
  transform: rotate(45deg);
  visibility: visible;
}
[data-popper-arrow], [data-popper-arrow]:before {
  background: inherit;
  height: 12px;
  position: absolute;
  width: 14px;
}
.tooltip-arrow:before {
  content: "";
  transform: rotate(45deg);
  visibility: visible;
}
.tooltip-arrow, .tooltip-arrow:before {
  background: inherit;
  height: 12px;
  position: absolute;
  width: 14px;
}

[role=tooltip].invisible>[data-popper-arrow]:after, [role=tooltip].invisible>[data-popper-arrow]:before {
  visibility: hidden;
}

[role=tooltip]>[data-popper-arrow]:after {
  border-color: #e5e7eb;
  border-style: solid;
}
[data-popper-arrow]:after {
  background: inherit;
  height: 12px;
  position: absolute;
  width: 14px;
}
[data-popper-arrow]:after, [data-popper-arrow]:before {
  content: "";
  transform: rotate(45deg);
  visibility: visible;
}

[data-loading-state-target="spinner"] {
  display: none;
}

form[aria-busy="true"] [data-loading-state-target="spinner"] {
  display: block;
}

[aria-expanded="false"] [data-accordion-show] {
  display: none;
}

[aria-expanded="false"] [data-accordion-hide] {
  display: block;
}

[aria-expanded="true"] [data-accordion-show] {
  display: block;
}

[aria-expanded="true"] [data-accordion-hide] {
  display: none;
}