@layer utilities {
  .duration-700 {
    --tw-duration: 0.7s;
    transition-duration: 0.7s;
  }

  .duration-1000 {
    --tw-duration: 1s;
    transition-duration: 1s;
  }

  .delay-150 {
    --tw-animation-delay: 0.15s;
    animation-delay: 0.15s;
  }

  .delay-300 {
    --tw-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }

  .delay-500 {
    --tw-animation-delay: 0.5s;
    animation-delay: 0.5s;
  }

  .fill-mode-both {
    --tw-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[background\:linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.16\)0\%\,rgba\(255\,255\,255\,0\)100\%\)\,\#181B25\] {
    background: linear-gradient(#ffffff29 0%, #fff0 100%), #181b25;
  }

  .\[background\:linear-gradient\(transparent\,transparent\)_padding-box\,linear-gradient\(to_right\,\#FFFFFF\,transparent\)_border-box\] {
    background:
      linear-gradient(#0000, #0000) padding-box padding-box,
      linear-gradient(90deg, #fff, #0000) border-box;
  }

  .fade-in {
    --tw-enter-opacity: 0;
  }

  .running {
    animation-play-state: running;
  }

  .slide-in-from-bottom-4 {
    --tw-enter-translate-y: calc(4 * var(--spacing));
  }

  .slide-in-from-top-4 {
    --tw-enter-translate-y: calc(4 * var(--spacing) * -1);
  }

  .peer-checked\:bg-primary-dark:is(:where(.peer):checked ~ *) {
    background-color: var(--color-primary-dark);
  }

  .peer-focus\:ring-2:is(:where(.peer):focus ~ *) {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width))
      var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
      var(--tw-ring-shadow), var(--tw-shadow);
  }

  .peer-focus\:ring-primary-base\/50:is(:where(.peer):focus ~ *) {
    --tw-ring-color: #5eead480;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .peer-focus\:ring-primary-base\/50:is(:where(.peer):focus ~ *) {
      --tw-ring-color: color-mix(in oklab, var(--color-primary-base) 50%, transparent);
    }
  }

  .peer-focus\:outline-none:is(:where(.peer):focus ~ *) {
    --tw-outline-style: none;
    outline-style: none;
  }

  .placeholder\:text-text-secondary::placeholder {
    color: var(--color-text-secondary);
  }

  .placeholder\:text-text-tertiary::placeholder {
    color: var(--color-text-tertiary);
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .after\:start-0\.5:after {
    content: var(--tw-content);
    inset-inline-start: calc(var(--spacing) * 0.5);
  }

  .after\:top-px:after {
    content: var(--tw-content);
    top: 1px;
  }

  .after\:size-5:after {
    content: var(--tw-content);
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .after\:rounded-full:after {
    content: var(--tw-content);
    border-radius: 3.40282e38px;
  }

  .after\:bg-white:after {
    content: var(--tw-content);
    background-color: var(--color-white);
  }

  .after\:shadow-\[0_1px_3px_0_rgba\(16\,24\,40\,0\.10\)\,0_1px_2px_0_rgba\(16\,24\,40\,0\.06\)\]:after {
    content: var(--tw-content);
    --tw-shadow:
      0 1px 3px 0 var(--tw-shadow-color, #1018281a), 0 1px 2px 0 var(--tw-shadow-color, #1018280f);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
      var(--tw-ring-shadow), var(--tw-shadow);
  }

  .after\:transition-all:after {
    content: var(--tw-content);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .after\:content-\[\'\'\]:after {
    --tw-content: '';
    content: var(--tw-content);
  }

  .peer-checked\:after\:translate-x-\[calc\(100\%-2px\)\]:is(:where(.peer):checked ~ *):after {
    content: var(--tw-content);
    --tw-translate-x: calc(100% - 2px);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  @media (hover: hover) {
    .hover\:border-red-100:hover {
      border-color: var(--color-red-100);
    }
    .hover\:bg-background-secondary:hover {
      background-color: var(--color-background-secondary);
    }
    .hover\:bg-background-tertiary:hover {
      background-color: var(--color-background-tertiary);
    }
    .hover\:bg-gray-700:hover {
      background-color: var(--color-gray-700);
    }
    .hover\:bg-primary-base\/20:hover {
      background-color: #5eead433;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary-base\/20:hover {
        background-color: color-mix(in oklab, var(--color-primary-base) 20%, transparent);
      }
    }
    .hover\:bg-red-50:hover {
      background-color: var(--color-red-50);
    }
    .hover\:text-gray-600:hover {
      color: var(--color-gray-600);
    }
    .hover\:text-gray-700:hover {
      color: var(--color-gray-700);
    }
    .hover\:text-primary-base:hover {
      color: #0f766e;
    }
    .hover\:text-primary-dark:hover {
      color: var(--color-primary-dark);
    }
    .hover\:text-red-700:hover {
      color: var(--color-red-700);
    }
    .hover\:text-text-primary:hover {
      color: var(--color-text-primary);
    }
    .hover\:text-text-secondary:hover {
      color: var(--color-text-secondary);
    }
    .hover\:opacity-80:hover {
      opacity: 0.8;
    }
  }

  .focus\:border-primary-base:focus {
    border-color: var(--color-primary-base);
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width))
      var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
      var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-4:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width))
      var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
      var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-primary-base:focus {
    --tw-ring-color: var(--color-primary-base);
  }

  .focus\:ring-primary-base\/10:focus {
    --tw-ring-color: #5eead41a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-primary-base\/10:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-primary-base) 10%, transparent);
    }
  }

  .focus\:ring-primary-base\/20:focus {
    --tw-ring-color: #5eead433;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-primary-base\/20:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-primary-base) 20%, transparent);
    }
  }

  .focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width)
      var(--tw-ring-offset-color);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:border-primary-base:focus-visible {
    border-color: var(--color-primary-base);
  }

  .focus-visible\:ring-4:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width))
      var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
      var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:\[box-shadow\:0_1px_2px_0_rgba\(16\,24\,40\,0\.05\)\,0_0_0_4px_\#F2F4F7\]:focus-visible,
  .focus-visible\:\[box-shadow\:_0_1px_2px_0_rgba\(16\,_24\,_40\,_0\.05\)\,_0_0_0_4px_\#F2F4F7\]:focus-visible {
    box-shadow:
      0 1px 2px #1018280d,
      0 0 0 4px #f2f4f7;
  }

  .focus-visible\:ring-\[rgba\(16\,_24\,_40\,_0\.05\)\]:focus-visible {
    --tw-ring-color: #1018280d;
  }

  .focus-visible\:outline-0:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 0;
  }

  .focus-visible\:outline-primary-base:focus-visible {
    outline-color: var(--color-primary-base);
  }

  .focus-visible\:outline-primary-dark:focus-visible {
    outline-color: var(--color-primary-dark);
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:opacity-50:disabled {
    opacity: 0.5;
  }

  .nth-3\:rounded-b-2xl:nth-child(3) {
    border-bottom-right-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
  }

  .nth-3\:bg-background-secondary:nth-child(3) {
    background-color: var(--color-background-secondary);
  }

  @media (min-width: 40rem) {
    .sm\:right-4 {
      right: calc(var(--spacing) * 4);
    }
    .sm\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }
    .sm\:h-full {
      height: 100%;
    }
    .sm\:min-h-50 {
      min-height: calc(var(--spacing) * 50);
    }
    .sm\:w-100 {
      width: calc(var(--spacing) * 100);
    }
    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
    .sm\:text-left {
      text-align: left;
    }
  }

  @media (min-width: 48rem) {
    .md\:top-6 {
      top: calc(var(--spacing) * 6);
    }
    .md\:top-28 {
      top: calc(var(--spacing) * 28);
    }
    .md\:col-span-3 {
      grid-column: span 3 / span 3;
    }
    .md\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }
    .md\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }
    .md\:mt-5 {
      margin-top: calc(var(--spacing) * 5);
    }
    .md\:mt-10 {
      margin-top: calc(var(--spacing) * 10);
    }
    .md\:mt-11 {
      margin-top: calc(var(--spacing) * 11);
    }
    .md\:mt-12 {
      margin-top: calc(var(--spacing) * 12);
    }
    .md\:mt-16 {
      margin-top: calc(var(--spacing) * 16);
    }
    .md\:h-75 {
      height: calc(var(--spacing) * 75);
    }
    .md\:h-auto {
      height: auto;
    }
    .md\:w-1\/2 {
      width: 50%;
    }
    .md\:w-23\.75 {
      width: calc(var(--spacing) * 23.75);
    }
    .md\:w-45 {
      width: calc(var(--spacing) * 45);
    }
    .md\:w-62\.5 {
      width: calc(var(--spacing) * 62.5);
    }
    .md\:w-\[178px\] {
      width: 178px;
    }
    .md\:w-fit {
      width: fit-content;
    }
    .md\:max-w-75 {
      max-width: calc(var(--spacing) * 75);
    }
    .md\:max-w-100 {
      max-width: calc(var(--spacing) * 100);
    }
    .md\:max-w-117\.5 {
      max-width: calc(var(--spacing) * 117.5);
    }
    .md\:max-w-\[45\%\] {
      max-width: 45%;
    }
    .md\:max-w-full {
      max-width: 100%;
    }
    .md\:min-w-\[178px\] {
      min-width: 178px;
    }
    .md\:grow {
      flex-grow: 1;
    }
    .md\:grow-0 {
      flex-grow: 0;
    }
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .md\:flex-col {
      flex-direction: column;
    }
    .md\:flex-row {
      flex-direction: row;
    }
    .md\:flex-row-reverse {
      flex-direction: row-reverse;
    }
    .md\:flex-nowrap {
      flex-wrap: nowrap;
    }
    .md\:items-center {
      align-items: center;
    }
    .md\:items-start {
      align-items: flex-start;
    }
    .md\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }
    .md\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }
    .md\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }
    .md\:gap-7\.5 {
      gap: calc(var(--spacing) * 7.5);
    }
    .md\:gap-y-6 {
      row-gap: calc(var(--spacing) * 6);
    }
    .md\:rounded-2xl {
      border-radius: var(--radius-2xl);
    }
    .md\:rounded-3xl {
      border-radius: var(--radius-3xl);
    }
    .md\:rounded-\[17px\] {
      border-radius: 17px;
    }
    .md\:rounded-\[20px\] {
      border-radius: 20px;
    }
    .md\:rounded-\[28px\] {
      border-radius: 28px;
    }
    .md\:p-2 {
      padding: calc(var(--spacing) * 2);
    }
    .md\:p-7 {
      padding: calc(var(--spacing) * 7);
    }
    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }
    .md\:px-0 {
      padding-inline: calc(var(--spacing) * 0);
    }
    .md\:px-3 {
      padding-inline: calc(var(--spacing) * 3);
    }
    .md\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }
    .md\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }
    .md\:py-14 {
      padding-block: calc(var(--spacing) * 14);
    }
    .md\:pt-10 {
      padding-top: calc(var(--spacing) * 10);
    }
    .md\:pt-43\.25 {
      padding-top: calc(var(--spacing) * 43.25);
    }
    .md\:pb-4 {
      padding-bottom: calc(var(--spacing) * 4);
    }
    .md\:pb-14 {
      padding-bottom: calc(var(--spacing) * 14);
    }
    .md\:text-left {
      text-align: left;
    }
    .md\:text-start {
      text-align: start;
    }
    .md\:text-md {
      font-size: var(--text-md);
      line-height: var(--tw-leading, var(--text-md--line-height));
    }
    .md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
}