body {
  background-color: #fefefe;
  font-family: var(--fontFamily-Regular-0);
}
html h1,
html h2 {
  text-transform: var(--h1-uppercase);
}
@font-face {
  font-family: "TitlingGothicFBCond-Bold";
  src: url("../fonts/TitlingGothic.ttf") format("truetype");
}
@font-face {
  font-family: "Harmonia Sans Pro";
  src: url("../fonts/HarmoniaSansPro-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Harmonia Sans Pro";
  src: url("../fonts/HarmoniaSansPro-Black.otf") format("opentype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Harmonia Sans Pro";
  src: url("../fonts/HarmoniaSansPro-Black.otf") format("opentype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Harmonia Sans Pro";
  src: url("../fonts/HarmoniaSansPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Harmonia Sans Pro";
  src: url("../fonts/HarmoniaSansPro-SemiBd.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Harmonia Sans Pro";
  src: url("../fonts/HarmoniaSansPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-Extrabld.ttf");
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-Bold.ttf");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-Semibold.ttf");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-Regular.ttf");
  font-weight: 400;
  font-display: swap;
}

.desktopHamburger {
  display: flex;
  border: 0;
  height: 48px;
  width: 48px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  .line {
    display: flex;
    transition: all 0.1s ease-in;
    width: 100%;
    height: 4px;
  }

  .line:nth-child(2) {
    margin: 6px 0;
  }

  &.open {
    .line {
      &:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
      }

      &:nth-child(2) {
        opacity: 0;
      }

      &:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
      }
    }
  }
}

.hamburger {
  border: 0;
  cursor: pointer;

  .line {
    display: block;
    margin: 6px 0;
    height: 3px;
    width: 30px;
    transition: all 0.1s ease-in;
  }

  &.open {
    .line {
      &:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
      }

      &:nth-child(2) {
        opacity: 0;
      }

      &:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
      }
    }
  }
}

:root {
  /** beacon colors **/
  /**
    * @tokens Colors
    * @presenter Color
    */
  --primary900: #011d2f;
  --primary800: #0c1d36;
  --primary700: #01395f;
  --primary600: #1f4b8f;
  --primary500: #025f9e;
  --primary400: #3171ba;
  --primary300: #4585ce;
  --primary200: #76a5db;
  --primary100: #aecaea;
  --primary50: #dcf1ff;
  --primarydisable: #93aecc;

  --secondary900: #513302;
  --secondary800: #875403;
  --secondary700: #bd7604;
  --secondary600: #f39805;
  --secondary500: #faa41a;
  --secondary400: #fbad31;
  --secondary300: #fcbf5f;
  --secondary200: #fdd28c;
  --secondary100: #feedd1;
  --secondary50: #fff6e8;

  --neutral900: #16191c;
  --neutral800: #25272a;
  --neutral700: #3b3e41;
  --neutral600: #676b70;
  --neutral500: #84888c;
  --neutral400: #94989c;
  --neutral300: #bfc3c7;
  --neutral200: #dfe2e5;
  --neutral100: #eeeff0;
  --neutral50: #fafafa;

  --success900: #064e3b;
  --success800: #065f46;
  --success700: #047857;
  --success600: #059669;
  --success500: #10b981;
  --success400: #6ee7b7;
  --success300: #6ee7b7;
  --success200: #a7f3d0;
  --success100: #d1fae5;
  --success50: #ecfdf5;

  --warning900: #78350f;
  --warning800: #92400e;
  --warning700: #b45309;
  --warning600: #d97706;
  --warning500: #f59e0b;
  --warning400: #fbbf24;
  --warning300: #fcd34d;
  --warning200: #fde68a;
  --warning100: #fef3c7;
  --warning50: #fffbeb;

  --danger900: #7f1d1d;
  --danger800: #991b1b;
  --danger700: #b61b1b;
  --danger600: #dc2626;
  --danger500: #ef4444;
  --danger400: #f87171;
  --danger300: #fca5a5;
  --danger200: #fecaca;
  --danger100: #fee2e2;
  --danger50: #fef2f2;

  --dealprimary900: #000b24;
  --dealprimary800: #001033;
  --dealprimary700: #001542;
  --dealprimary600: #001b57;
  --dealprimary500: #00216a;
  --dealprimary400: #003099;
  --dealprimary300: #1a61ff;
  --dealprimary200: #6696ff;
  --dealprimary100: #99b8ff;
  --dealprimary50: #e5edff;
  --dealprimarydisable: #93aecc;

  --dealsecondary900: #76091b;
  --dealsecondary800: #8e0b21;
  --dealsecondary700: #a10d25;
  --dealsecondary600: #b30e29;
  --dealsecondary500: #c8102e;
  --dealsecondary400: #ed1c36;
  --dealsecondary300: #f0425e;
  --dealsecondary200: #f6899b;
  --dealsecondary100: #fbd0d7;
  --dealsecondary50: #fef1f3;

  --qxoprimary900: #001570;
  --qxoprimary800: #001e87;
  --qxoprimary700: #002aa8;
  --qxoprimary600: #0039c9;
  --qxoprimary500: #004bea;
  --qxoprimary400: #3c7cf2;
  --qxoprimary300: #639df8;
  --qxoprimary200: #97c2fc;
  --qxoprimary100: #cbe2fd;
  --qxoprimary50: #e6f1fe;
  --qxoprimarydisable: #93aecc;

  --qxosecondary900: #001570;
  --qxosecondary800: #001e87;
  --qxosecondary700: #002aa8;
  --qxosecondary600: #0039c9;
  --qxosecondary500: #004bea;
  --qxosecondary400: #3c7cf2;
  --qxosecondary300: #639df8;
  --qxosecondary200: #97c2fc;
  --qxosecondary100: #cbe2fd;
  --qxosecondary50: #e6f1fe;

  --qxosuccess900: #064e3b;
  --qxosuccess800: #065f46;
  --qxosuccess700: #047857;
  --qxosuccess600: #059669;
  --qxosuccess500: #10b981;
  --qxosuccess400: #34d399;
  --qxosuccess300: #6ee7b7;
  --qxosuccess200: #a7f3d0;
  --qxosuccess100: #d1fae5;
  --qxosuccess50: #ecfdf5;

  --white: #ffffff;
  --black: #0a0a0a;
  --pewter: #323640;

  /** beacon colors end **/

  --background: hsl(0 0% 100%);
  --foreground: hsl(222.2 47.4% 11.2%);

  --muted: hsl(210 40% 96.1%);
  --muted-foreground: hsl(215.4 16.3% 46.9%);

  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(222.2 47.4% 11.2%);

  --border: hsl(214.3 31.8% 91.4%);

  --card: hsl(0 0% 100%);
  --card-foreground: hsl(222.2 47.4% 11.2%);

  --primary-foreground: hsl(210 40% 98%);

  --secondary: hsl(210 40% 96.1%);
  --secondary-foreground: hsl(222.2 47.4% 11.2%);

  --accent: hsl(210 40% 96.1%);
  --accent-foreground: hsl(222.2 47.4% 11.2%);

  --destructive: hsl(0 100% 50%);
  --destructive-foreground: hsl(210 40% 98%);

  --ring: hsl(215 20.2% 65.1%);

  --radius: $global-radius;
}

.nice-scroll::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--neutral200);
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--neutral600);
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

input[type="checkbox"] {
  accent-color: var(--colors-primary);
}

.dark-blue input[type="checkbox"] {
  accent-color: var(--dealprimary500);
}

.protip-skin-default--scheme-pro.protip-container {
  background-color: var(--colors-primary) !important;
}

.protip-skin-default--scheme-pro[data-pt-position="right"] .protip-arrow {
  border-right-color: var(--colors-primary) !important;
}

.protip-skin-default--scheme-pro[data-pt-position="top"] .protip-arrow {
  border-top-color: var(--colors-primary) !important;
}

.protip-skin-default--scheme-pro[data-pt-position="top-left-corner"]
  .protip-arrow {
  border-right-color: var(--colors-primary) !important;
}

.dark-blue .protip-skin-default--scheme-pro.protip-container {
  background-color: var(--dealprimary500) !important;
}

.dark-blue
  .protip-skin-default--scheme-pro[data-pt-position="right"]
  .protip-arrow {
  border-right-color: var(--dealprimary500) !important;
}

.dark-blue
  .protip-skin-default--scheme-pro[data-pt-position="top"]
  .protip-arrow {
  border-top-color: var(--dealprimary500) !important;
}

.dark-blue
  .protip-skin-default--scheme-pro[data-pt-position="top-left-corner"]
  .protip-arrow {
  border-right-color: var(--colors-primary) !important;
}

label.error {
  color: #f00;
}

#username:-webkit-autofill,
#username:-webkit-autofill:hover,
#username:-webkit-autofill:focus,
#username:-webkit-autofill:active,
#password:-webkit-autofill,
#password:-webkit-autofill:hover,
#password:-webkit-autofill:focus,
#password:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #16191C !important;
  background-color: #ffffff !important;
}