/**
  * @file Main styles
  *
  * This file contain general styles that should be applied to host page.
  */
:root {
  --neutral-10: #121b21;
  --neutral-15: #1b2832;
  --neutral-20: #243542;
  --neutral-25: #2d4253;
  --neutral-30: #365063;
  --neutral-35: #3e5d74;
  --neutral-40: #476a85;
  --neutral-45: #507795;
  --neutral-50: #5985a6;
  --neutral-55: #6a91af;
  --neutral-60: #7a9db8;
  --neutral-65: #8ba9c1;
  --neutral-70: #9cb6c9;
  --neutral-75: #acc2d2;
  --neutral-80: #bdcedb;
  --neutral-85: #cddae4;
  --neutral-90: #dee7ed;
  --neutral-95: #eef3f6;
  --neutral-97: #f5f8fa;
  --neutral-98: #f8fafb;
  --neutral-100: #ffffff;
  --honey-72: #fad275;
  --honey-75: #fbd784;
  --honey-82: #fce2a6;
  --honey-85: #fce7b5;
  --honey-92: #fef2d8;
  --coral-65: #f37c58;
  --coral-74: #f69e83;
  --coral-75: #f7a288;
  --coral-84: #fac3b3;
  --coral-85: #fac7b7;
  --coral-94: #fde9e2;
  --warm-77: #ffbb8a;
  --warm-87: #ffd8bd;
  --warm-97: #fff6f0;
  --sea-salt-57: #7fa4a4;
  --sea-salt-67: #9db9b9;
  --sea-salt-88: #dbe6e6;
  --cloud-43: #447c97;
  --cloud-75: #a7c7d7;
  --cloud-88: #d5e4ec;
  --ocean-38: #3c6286;
  --ocean-75: #a7c0d7;
  --ocean-88: #d5e1ec;
  --sky-64: #68a5de;
  --sky-75: #96c1e8;
  --sky-85: #c0daf1;
  --lukso-70: #cc99ae;
  --lukso-80: #ddbbc9;
  --lukso-90: #eedde4;
  --yellow-55: #ffa31a;
  --yellow-65: #ffb84d;
  --yellow-75: #ffcc80;
  --yellow-85: #ffe0b3;
  --green-45: #31b452;
  --green-54: #47cd68;
  --green-75: #9be4ad;
  --green-85: #c3efce;
  --blue-50: #0567fa;
  --blue-60: #3785fb;
  --blue-75: #82b3fc;
  --blue-85: #b4d1fd;
  --red-55: #e23636;
  --red-65: #e96363;
  --red-75: #ef8f8f;
  --red-85: #f5bcbc;
  --purple-15: #1d202f;
  --purple-31: #3c4262;
  --purple-41: #4f5882;
  --purple-51: #646ea0;
  --purple-58: #7a83ae;
  --purple-63: #8a92b7;
  --purple-82: #c6cadc;
  --purple-94: #ecedf3;
  --pink-90: #f8dad3;
  --pink-91: #f9ddd7;
  --pink-92: #f9e1dc;
  --pink-93: #fae5e0;
  --pink-94: #fbe9e5;
  --pink-95: #fcece9;
  --pink-96: #fcf0ed;
  --pink-97: #fdf4f2;
  --gradient-1-start: #D39B9D;
  --gradient-1-end: #9071D1;
  --gradient-2-start: #F8DAD3;
  --gradient-2-end: #CC99AE;
  --gradient-3-start: #393e56;
  --gradient-3-end: #646ea0;
}

/**
  * @file Fonts
  *
  * This file contains all fonts used in designs.
  */
@font-face {
  font-family: Inter;
  src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("/assets/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("/assets/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("/assets/fonts/Inter-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("/assets/fonts/Inter-ExtraBold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Mono";
  src: url("/assets/fonts/PT-Mono-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "PT Mono";
  src: url("/assets/fonts/PT-Mono-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: Apax;
  src: url("/assets/fonts/Apax-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: Apax;
  src: url("/assets/fonts/Apax-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: Apax;
  src: url("/assets/fonts/Apax-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: Apax;
  src: url("/assets/fonts/Apax-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
/**
  * @file Typography
  *
  * This file contains all typography classes used in designs.
  * They should be used instead of individual font attributes.
  *
  * You can use them same as the normal Tailwind classes, e.g.: class="heading-inter-26-semi-bold"
  */
@layer base {
  .heading-inter-26-semi-bold {
    @apply text-26 not-italic font-600 leading-31 font-inter;
  }
  .heading-inter-21-semi-bold {
    @apply text-21 not-italic font-600 leading-26 font-inter;
  }
  .heading-inter-17-semi-bold {
    @apply text-17 not-italic font-600 leading-22 font-inter;
  }
  .heading-inter-12-bold-uppercase {
    @apply text-12 not-italic font-700 leading-15 font-inter uppercase tracking-[.02em];
  }
  .heading-inter-14-bold {
    @apply text-14 not-italic font-700 leading-17 font-inter;
  }
  .heading-apax-48-regular {
    @apply text-48 not-italic font-400 leading-58 font-apax;
  }
  .heading-apax-48-bold {
    @apply text-48 not-italic font-500 leading-58 font-apax;
  }
  .heading-apax-44-regular {
    @apply text-44 not-italic font-400 leading-40 font-apax;
  }
  .heading-apax-44-medium {
    @apply text-44 not-italic font-500 leading-40 font-apax;
  }
  .heading-apax-40-regular {
    @apply text-40 not-italic font-400 leading-48 font-apax;
  }
  .heading-apax-40-bold {
    @apply text-40 not-italic font-500 leading-48 font-apax;
  }
  .heading-apax-32-regular {
    @apply text-32 not-italic font-400 leading-38 font-apax;
  }
  .heading-apax-32-medium {
    @apply text-32 not-italic font-500 leading-38 font-apax;
  }
  .heading-apax-24-medium {
    @apply text-24 not-italic font-500 leading-28 font-apax;
  }
  .nav-apax-14-medium-uppercase {
    @apply text-14 not-italic font-500 leading-17 font-apax uppercase tracking-[.08em];
  }
  .nav-apax-12-medium-uppercase {
    @apply text-12 not-italic font-500 leading-14 font-apax uppercase tracking-[.08em];
  }
  .nav-apax-10-regular {
    @apply text-10 not-italic font-400 leading-12 font-apax;
  }
  .nav-apax-8-medium-uppercase {
    @apply text-8 not-italic font-500 leading-10 font-apax uppercase tracking-[.08em];
  }
  .paragraph-inter-20-regular {
    @apply text-20 not-italic font-400 leading-32 font-inter;
  }
  .paragraph-inter-16-regular {
    @apply text-16 not-italic font-400 leading-24 font-inter;
  }
  .paragraph-inter-16-semi-bold {
    @apply text-16 not-italic font-600 leading-24 font-inter;
  }
  .paragraph-inter-16-semi-bold-underlined {
    @apply text-16 not-italic font-600 leading-24 font-inter underline;
  }
  .paragraph-inter-14-regular {
    @apply text-14 not-italic font-400 leading-22 font-inter;
  }
  .paragraph-inter-14-medium {
    @apply text-14 not-italic font-500 leading-22 font-inter;
  }
  .paragraph-inter-14-semi-bold {
    @apply text-14 not-italic font-600 leading-22 font-inter;
  }
  .paragraph-inter-13-regular {
    @apply text-13 not-italic font-400 leading-20 font-inter;
  }
  .paragraph-inter-12-regular {
    @apply text-12 not-italic font-400 leading-20 font-inter;
  }
  .paragraph-inter-12-medium {
    @apply text-12 not-italic font-500 leading-20 font-inter;
  }
  .paragraph-inter-12-semi-bold {
    @apply text-12 not-italic font-600 leading-20 font-inter;
  }
  .paragraph-inter-10-semi-bold {
    @apply text-10 not-italic font-600 leading-12 font-inter;
  }
  .paragraph-inter-10-bold-uppercase {
    @apply text-10 not-italic font-700 leading-12 font-inter uppercase;
  }
  .paragraph-ptmono-16-regular {
    @apply text-16 not-italic font-400 leading-22 font-mono;
  }
  .paragraph-ptmono-16-bold {
    @apply text-16 not-italic font-700 leading-22 font-mono;
  }
  .paragraph-ptmono-14-regular {
    @apply text-14 not-italic font-400 leading-20 font-mono;
  }
  .paragraph-ptmono-14-bold {
    @apply text-14 not-italic font-700 leading-20 font-mono;
  }
  .paragraph-ptmono-12-bold {
    @apply text-12 not-italic font-700 leading-14 font-mono;
  }
  .paragraph-ptmono-12-regular {
    @apply text-12 not-italic font-400 leading-14 font-mono;
  }
  .paragraph-ptmono-10-bold {
    @apply text-10 not-italic font-700 leading-14 font-mono;
  }
  .paragraph-ptmono-10-regular {
    @apply text-10 not-italic font-400 leading-14 font-mono;
  }
}
@layer utilities {
  .scrollbar-none {
    scrollbar-width: none;
  }
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
}
/**
  * @file Variables
  *
  * This file contains all CSS variables used in designs.
  */
.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0;
}

.tippy-arrow::before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}

.tippy-box[data-placement^=top] > .tippy-arrow::before {
  border-top-color: initial;
  transform-origin: center top;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow::before {
  border-bottom-color: initial;
  transform-origin: center bottom;
}

.tippy-box[data-placement^=left] > .tippy-arrow::before {
  border-left-color: initial;
  transform-origin: center left;
}

.tippy-box[data-placement^=right] > .tippy-arrow::before {
  border-right-color: initial;
  transform-origin: center right;
}

.tippy-box[data-inertia][data-state=visible] {
  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}

.tippy-arrow {
  width: 16px;
  height: 16px;
}

.tippy-size-medium {
  @apply px-2 py-2 rounded-4 text-10 not-italic font-600 leading-12 font-inter shadow-neutral-drop-shadow-1xl;
}
.tippy-size-medium[data-placement^=top] > .tippy-arrow {
  bottom: 0;
}
.tippy-size-medium[data-placement^=top] > .tippy-arrow::before {
  bottom: -6px;
  left: 2px;
  border-width: 6px 6px 0;
}
.tippy-size-medium[data-placement^=bottom] > .tippy-arrow {
  top: 0;
}
.tippy-size-medium[data-placement^=bottom] > .tippy-arrow::before {
  top: -6px;
  left: 2px;
  border-width: 0 6px 6px;
}
.tippy-size-medium[data-placement^=left] > .tippy-arrow {
  right: 0;
}
.tippy-size-medium[data-placement^=left] > .tippy-arrow::before {
  border-width: 6px 0 6px 6px;
  right: -6px;
  top: 2px;
}
.tippy-size-medium[data-placement^=right] > .tippy-arrow {
  left: 0;
}
.tippy-size-medium[data-placement^=right] > .tippy-arrow::before {
  left: -6px;
  top: 2px;
  border-width: 6px 6px 6px 0;
}

.tippy-size-large {
  @apply px-3 py-2 rounded-8 text-12 not-italic font-400 leading-20 font-inter shadow-neutral-drop-shadow-1xl;
}
.tippy-size-large[data-placement^=top] > .tippy-arrow {
  bottom: 0;
}
.tippy-size-large[data-placement^=top] > .tippy-arrow::before {
  bottom: -8px;
  left: 0;
  border-width: 8px 8px 0;
}
.tippy-size-large[data-placement^=bottom] > .tippy-arrow {
  top: 0;
}
.tippy-size-large[data-placement^=bottom] > .tippy-arrow::before {
  top: -8px;
  left: 0;
  border-width: 0 8px 8px;
}
.tippy-size-large[data-placement^=left] > .tippy-arrow {
  right: 0;
}
.tippy-size-large[data-placement^=left] > .tippy-arrow::before {
  border-width: 8px 0 8px 8px;
  right: -8px;
}
.tippy-size-large[data-placement^=right] > .tippy-arrow {
  left: 0;
}
.tippy-size-large[data-placement^=right] > .tippy-arrow::before {
  left: -8px;
  border-width: 8px 8px 8px 0;
}

.tippy-variant-dark {
  @apply text-neutral-100 bg-neutral-30;
}
.tippy-variant-dark[data-placement^=top] .tippy-arrow::before {
  @apply border-t-neutral-30;
}
.tippy-variant-dark[data-placement^=bottom] .tippy-arrow::before {
  @apply border-b-neutral-30;
}
.tippy-variant-dark[data-placement^=left] .tippy-arrow::before {
  @apply border-l-neutral-30;
}
.tippy-variant-dark[data-placement^=right] .tippy-arrow::before {
  @apply border-r-neutral-30;
}
.tippy-variant-dark > .tippy-backdrop {
  @apply bg-neutral-30;
}
.tippy-variant-dark > .tippy-svg-arrow {
  @apply fill-neutral-30;
}

.tippy-variant-light {
  @apply text-neutral-20 bg-neutral-97;
}
.tippy-variant-light[data-placement^=top] .tippy-arrow::before {
  @apply border-t-neutral-97;
}
.tippy-variant-light[data-placement^=bottom] .tippy-arrow::before {
  @apply border-b-neutral-97;
}
.tippy-variant-light[data-placement^=left] .tippy-arrow::before {
  @apply border-l-neutral-97;
}
.tippy-variant-light[data-placement^=right] .tippy-arrow::before {
  @apply border-r-neutral-97;
}
.tippy-variant-light > .tippy-backdrop {
  @apply bg-neutral-97;
}
.tippy-variant-light > .tippy-svg-arrow {
  @apply fill-neutral-97;
}

.tippy-variant-success {
  @apply text-neutral-100 bg-green-54;
}
.tippy-variant-success[data-placement^=top] .tippy-arrow::before {
  @apply border-t-green-54;
}
.tippy-variant-success[data-placement^=bottom] .tippy-arrow::before {
  @apply border-b-green-54;
}
.tippy-variant-success[data-placement^=left] .tippy-arrow::before {
  @apply border-l-green-54;
}
.tippy-variant-success[data-placement^=right] .tippy-arrow::before {
  @apply border-r-green-54;
}
.tippy-variant-success > .tippy-backdrop {
  @apply bg-green-54;
}
.tippy-variant-success > .tippy-svg-arrow {
  @apply fill-green-54;
}

.tippy-variant-danger {
  @apply text-neutral-100 bg-red-65;
}
.tippy-variant-danger[data-placement^=top] .tippy-arrow::before {
  @apply border-t-red-65;
}
.tippy-variant-danger[data-placement^=bottom] .tippy-arrow::before {
  @apply border-b-red-65;
}
.tippy-variant-danger[data-placement^=left] .tippy-arrow::before {
  @apply border-l-red-65;
}
.tippy-variant-danger[data-placement^=right] .tippy-arrow::before {
  @apply border-r-red-65;
}
.tippy-variant-danger > .tippy-backdrop {
  @apply bg-red-65;
}
.tippy-variant-danger > .tippy-svg-arrow {
  @apply fill-red-65;
}

.tippy-box[data-theme~=dark-medium] {
  @apply tippy-variant-dark tippy-size-medium;
}

.tippy-box[data-theme~=dark-large] {
  @apply tippy-variant-dark tippy-size-large;
}

.tippy-box[data-theme~=light-medium] {
  @apply tippy-variant-light tippy-size-medium;
}

.tippy-box[data-theme~=light-large] {
  @apply tippy-variant-light tippy-size-large;
}

.tippy-box[data-theme~=success-medium] {
  @apply tippy-variant-success tippy-size-medium;
}

.tippy-box[data-theme~=success-large] {
  @apply tippy-variant-success tippy-size-large;
}

.tippy-box[data-theme~=danger-medium] {
  @apply tippy-variant-danger tippy-size-medium;
}

.tippy-box[data-theme~=danger-large] {
  @apply tippy-variant-danger tippy-size-large;
}

@tailwind base;
@tailwind components;
@tailwind utilities;
strong {
  @apply font-600;
}

/*# sourceMappingURL=main.css.map */
