@charset "UTF-8";
:root {
  --grey0-90: #FFFFFFE6;
  --grey0-82: #FFFFFFD1;
  --grey0-75: #ffffffbf;
  --grey0-50: #ffffff80;
  --grey0-25: #ffffff40;
  --grey0-15: #ffffff26;
  --grey0-5: #ffffff0d;
  --grey0: #ffffff;
  --grey1: #f0f0f0;
  --grey2: #dcdcdc;
  --grey3: #bebebe;
  --grey4: #a0a0a0;
  --grey5: #808080;
  --grey6: #606060;
  --grey7: #404040;
  --grey8: #202020;
  --grey9: #000000;
  --grey9-5: #0000000d;
  --grey9-10: #0000001A;
  --grey9-15: #00000026;
  --grey9-25: #00000040;
  --grey9-50: #00000080;
  --grey9-75: #000000bf;
  --grey9-82: #000000D1;
  --grey9-90: #000000e6;
  --grey9-95: #000000F2;
  --color-primary-ultralight: #ebebff;
  --color-primary-light: #3255c8;
  --color-primary: #000a96;
  --color-primary-dark: #000064;
  --color-primary-darker: #000032;
  --color-primary-darker90: #000032E6;
  --color-secondary-light: #CB9C67;
  --color-secondary: #7D572B;
  --color-secondary-dark: #312211;
  --color-secondary-darker: #1B1209;
  --color-border: #dde2e1;
  --color-copy: #232928;
  --color-copy-light: #5e6e6c;
  --color-copy-lighter: #849593;
  --color-success: #015201;
  --color-warning: #525201;
  --color-error: #520101;
  --color-success-content: #55fd55;
  --color-warning-content: #fdfd55;
  --color-error-content: #fd5555;
}

/* THEMES CLASS */
.theme-grey {
  color: var(--grey1);
  background-color: var(--grey9-95);
}

.theme-grey-light {
  color: var(--grey2);
  background-color: var(--grey7);
}

.theme-std {
  color: var(--color-primary-darker);
  background-color: var(--grey0);
}

.theme-light-inverse {
  color: var(--grey0);
  background-color: var(--color-primary);
}

.theme-light {
  color: var(--color-primary);
  background-color: var(--grey0);
}

.theme-std-bkg {
  color: var(--color-primary-darker);
  background-color: var(--grey3);
}

/* GREY CLASS */
.grey0-95 {
  color: var(--grey0-95);
}

.grey0-95-bkg {
  background-color: var(--grey0-95);
}

.grey0-85 {
  color: var(--grey0-85);
}

.grey0-85-bkg {
  background-color: var(--grey0-85);
}

.grey0-75 {
  color: var(--grey0-75);
}

.grey0-75-bkg {
  background-color: var(--grey0-75);
}

.grey0-50 {
  color: var(--grey0-50);
}

.grey0-50-bkg {
  background-color: var(--grey0-50);
}

.grey0-25 {
  color: var(--grey0-25);
}

.grey0-25-bkg {
  background-color: var(--grey0-25);
}

.grey0-15 {
  color: var(--grey0-15);
}

.grey0-15-bkg {
  background-color: var(--grey0-15);
}

.grey0-5 {
  color: var(--grey0-5);
}

.grey0-5-bkg {
  background-color: var(--grey0-5);
}

.grey0 {
  color: var(--grey0);
}

.grey0-bkg {
  background-color: var(--grey0);
}

.grey1 {
  color: var(--grey1);
}

.grey1-bkg {
  background-color: var(--grey1);
}

.grey2 {
  color: var(--grey2);
}

.grey2-bkg {
  background-color: var(--grey2);
}

.grey3 {
  color: var(--grey3);
}

.grey3-bkg {
  background-color: var(--grey3);
}

.grey4 {
  color: var(--grey4);
}

.grey4-bkg {
  background-color: var(--grey4);
}

.grey5 {
  color: var(--grey5);
}

.grey5-bkg {
  background-color: var(--grey5);
}

.grey6 {
  color: var(--grey6);
}

.grey6-bkg {
  background-color: var(--grey6);
}

.grey7 {
  color: var(--grey7);
}

.grey7-bkg {
  background-color: var(--grey7);
}

.grey8 {
  color: var(--grey8);
}

.grey8-bkg {
  background-color: var(--grey8);
}

.grey9 {
  color: var(--grey9);
}

.grey9-bkg {
  background-color: var(--grey9);
}

.grey9-5 {
  color: var(--grey9-5);
}

.grey9-5-bkg {
  background-color: var(--grey9-5);
}

.grey9-15 {
  color: var(--grey9-15);
}

.grey9-15-bkg {
  background-color: var(--grey9-15);
}

.grey9-25 {
  color: var(--grey9-25);
}

.grey9-25-bkg {
  background-color: var(--grey9-25);
}

.grey9-50 {
  color: var(--grey9-50);
}

.grey9-50-bkg {
  background-color: var(--grey9-50);
}

.grey9-75 {
  color: var(--grey9-5);
}

.grey9-75-bkg {
  background-color: var(--grey9-75);
}

.grey9-85 {
  color: var(--grey9-85);
}

.grey9-85-bkg {
  background-color: var(--grey9-85);
}

.grey9-95 {
  color: var(--grey9-95);
}

.grey9-95-bkg {
  background-color: var(--grey9-95);
}

/* COLORS CLASS */
.color-primary-ultralight {
  color: var(--color-primary-ultralight);
}

.color-primary-light {
  color: var(--color-primary-light);
}

.color-primary {
  color: var(--color-primary);
}

.color-primary-dark {
  color: var(--color-primary-dark);
}

.color-primary-darker {
  color: var(--color-primary-darker);
}

.color-secondary-light {
  color: var(--color-secondary-light);
}

.color-secondary {
  color: var(--color-secondary);
}

.color-secondary-dark {
  color: var(--color-secondary-dark);
}

.color-secondary-darker {
  color: var(--color-secondary-darker);
}

.color-border {
  color: var(--color-border);
}

.color-copy {
  color: var(--color-copy);
}

.color-copy-light {
  color: var(--color-copy-light);
}

.color-copy-lighter {
  color: var(--color-copy-lighter);
}

.color-success {
  color: var(--color-success);
}

.color-warning {
  color: var(--color-warning);
}

.color-error {
  color: var(--color-error);
}

.color-success-content {
  color: var(--color-success-content);
}

.color-warning-content {
  color: var(--color-warning-content);
}

.color-error-content {
  color: var(--color-error-content);
}

/* 390px */
/* 568px */
/* 768px */
/* 1024px */
/* 1280px */
/* 1600px */
/**
 * variable font definition
 */
.inter-500 {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/**
 * Configs
 */
:root {
  --bp-xs: 390px ;
  --bp-sm: 568px ;
  --bp-md: 768px ;
  --bp-lg: 1024px ;
  --bp-xl: 1280px ;
  --bp-xxl: 1600px ;
  /* Fonts */
  --font-primary: "Inter", sans-serif;
  --font-secondary: serif;
  --font-monospace: monospace;
  --font-cursive: cursive;
  --font-xxs: 10px;
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-xxl: 22px;
  --spacing: 1rem ;
}

html, body {
  scroll-behavior: smooth;
  font-family: var(--font-primary), serif;
  line-height: 1.2;
}

:root {
  --grey0-90: #FFFFFFE6;
  --grey0-82: #FFFFFFD1;
  --grey0-75: #ffffffbf;
  --grey0-50: #ffffff80;
  --grey0-25: #ffffff40;
  --grey0-15: #ffffff26;
  --grey0-5: #ffffff0d;
  --grey0: #ffffff;
  --grey1: #f0f0f0;
  --grey2: #dcdcdc;
  --grey3: #bebebe;
  --grey4: #a0a0a0;
  --grey5: #808080;
  --grey6: #606060;
  --grey7: #404040;
  --grey8: #202020;
  --grey9: #000000;
  --grey9-5: #0000000d;
  --grey9-10: #0000001A;
  --grey9-15: #00000026;
  --grey9-25: #00000040;
  --grey9-50: #00000080;
  --grey9-75: #000000bf;
  --grey9-82: #000000D1;
  --grey9-90: #000000e6;
  --grey9-95: #000000F2;
  --color-primary-ultralight: #ebebff;
  --color-primary-light: #3255c8;
  --color-primary: #000a96;
  --color-primary-dark: #000064;
  --color-primary-darker: #000032;
  --color-primary-darker90: #000032E6;
  --color-secondary-light: #CB9C67;
  --color-secondary: #7D572B;
  --color-secondary-dark: #312211;
  --color-secondary-darker: #1B1209;
  --color-border: #dde2e1;
  --color-copy: #232928;
  --color-copy-light: #5e6e6c;
  --color-copy-lighter: #849593;
  --color-success: #015201;
  --color-warning: #525201;
  --color-error: #520101;
  --color-success-content: #55fd55;
  --color-warning-content: #fdfd55;
  --color-error-content: #fd5555;
}

/* THEMES CLASS */
.theme-grey {
  color: var(--grey1);
  background-color: var(--grey9-95);
}

.theme-grey-light {
  color: var(--grey2);
  background-color: var(--grey7);
}

.theme-std {
  color: var(--color-primary-darker);
  background-color: var(--grey0);
}

.theme-light-inverse {
  color: var(--grey0);
  background-color: var(--color-primary);
}

.theme-light {
  color: var(--color-primary);
  background-color: var(--grey0);
}

.theme-std-bkg {
  color: var(--color-primary-darker);
  background-color: var(--grey3);
}

/* GREY CLASS */
.grey0-95 {
  color: var(--grey0-95);
}

.grey0-95-bkg {
  background-color: var(--grey0-95);
}

.grey0-85 {
  color: var(--grey0-85);
}

.grey0-85-bkg {
  background-color: var(--grey0-85);
}

.grey0-75 {
  color: var(--grey0-75);
}

.grey0-75-bkg {
  background-color: var(--grey0-75);
}

.grey0-50 {
  color: var(--grey0-50);
}

.grey0-50-bkg {
  background-color: var(--grey0-50);
}

.grey0-25 {
  color: var(--grey0-25);
}

.grey0-25-bkg {
  background-color: var(--grey0-25);
}

.grey0-15 {
  color: var(--grey0-15);
}

.grey0-15-bkg {
  background-color: var(--grey0-15);
}

.grey0-5 {
  color: var(--grey0-5);
}

.grey0-5-bkg {
  background-color: var(--grey0-5);
}

.grey0 {
  color: var(--grey0);
}

.grey0-bkg {
  background-color: var(--grey0);
}

.grey1 {
  color: var(--grey1);
}

.grey1-bkg {
  background-color: var(--grey1);
}

.grey2 {
  color: var(--grey2);
}

.grey2-bkg {
  background-color: var(--grey2);
}

.grey3 {
  color: var(--grey3);
}

.grey3-bkg {
  background-color: var(--grey3);
}

.grey4 {
  color: var(--grey4);
}

.grey4-bkg {
  background-color: var(--grey4);
}

.grey5 {
  color: var(--grey5);
}

.grey5-bkg {
  background-color: var(--grey5);
}

.grey6 {
  color: var(--grey6);
}

.grey6-bkg {
  background-color: var(--grey6);
}

.grey7 {
  color: var(--grey7);
}

.grey7-bkg {
  background-color: var(--grey7);
}

.grey8 {
  color: var(--grey8);
}

.grey8-bkg {
  background-color: var(--grey8);
}

.grey9 {
  color: var(--grey9);
}

.grey9-bkg {
  background-color: var(--grey9);
}

.grey9-5 {
  color: var(--grey9-5);
}

.grey9-5-bkg {
  background-color: var(--grey9-5);
}

.grey9-15 {
  color: var(--grey9-15);
}

.grey9-15-bkg {
  background-color: var(--grey9-15);
}

.grey9-25 {
  color: var(--grey9-25);
}

.grey9-25-bkg {
  background-color: var(--grey9-25);
}

.grey9-50 {
  color: var(--grey9-50);
}

.grey9-50-bkg {
  background-color: var(--grey9-50);
}

.grey9-75 {
  color: var(--grey9-5);
}

.grey9-75-bkg {
  background-color: var(--grey9-75);
}

.grey9-85 {
  color: var(--grey9-85);
}

.grey9-85-bkg {
  background-color: var(--grey9-85);
}

.grey9-95 {
  color: var(--grey9-95);
}

.grey9-95-bkg {
  background-color: var(--grey9-95);
}

/* COLORS CLASS */
.color-primary-ultralight {
  color: var(--color-primary-ultralight);
}

.color-primary-light {
  color: var(--color-primary-light);
}

.color-primary {
  color: var(--color-primary);
}

.color-primary-dark {
  color: var(--color-primary-dark);
}

.color-primary-darker {
  color: var(--color-primary-darker);
}

.color-secondary-light {
  color: var(--color-secondary-light);
}

.color-secondary {
  color: var(--color-secondary);
}

.color-secondary-dark {
  color: var(--color-secondary-dark);
}

.color-secondary-darker {
  color: var(--color-secondary-darker);
}

.color-border {
  color: var(--color-border);
}

.color-copy {
  color: var(--color-copy);
}

.color-copy-light {
  color: var(--color-copy-light);
}

.color-copy-lighter {
  color: var(--color-copy-lighter);
}

.color-success {
  color: var(--color-success);
}

.color-warning {
  color: var(--color-warning);
}

.color-error {
  color: var(--color-error);
}

.color-success-content {
  color: var(--color-success-content);
}

.color-warning-content {
  color: var(--color-warning-content);
}

.color-error-content {
  color: var(--color-error-content);
}

/**
 * @section CSS Reset
 * Adapted from Andy Bell's modern CSS reset
 * @link https://hankchizljaw.com/wrote/a-modern-css-reset/
 */
/**
 * Remove the tap delay in webkit
 * @link https://medium.com/@adactio/delay-a9df9edceef3#.7dmbl3xow
 */
a,
button,
input,
select,
textarea,
label,
summary {
  touch-action: manipulation;
}

/**
 * Add box sizing to everything
 * @link http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 */
*,
*:before,
*:after {
  box-sizing: border-box;
}

/**
 * 1. Force scrollbar display to prevent jumping on pages.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  overflow-x: hidden;
  overflow-y: hidden;
  text-size-adjust: 100%;
}

/**
 * 1. Remove the margin in all browsers (opinionated).
 * 2. For the body to fill the viewport
 */
body {
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100vw;
  margin: auto;
}

/**
 * Prevent img and video elements from spilling outside of the page on smaller screens.
 */
img,
video {
  max-width: 100%;
  height: auto;
}

/**
 * Prevent iframe, object, and embed elements from spilling outside of the page on smaller screens.
 * height: auto causes iframes to smush, so it's omitted here.
 */
iframe,
object,
embed {
  max-width: 100%;
}

/**
 * @workaround Remove focus from tabindex="-1" elements which are only script focusable
 * @link https://code.google.com/p/chromium/issues/detail?id=37721
 */
[tabindex="-1"]:focus {
  outline: none;
}

.noSelectFlash {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.noSelectFlash:focus {
  outline: none !important;
}

.resetMarginPadding {
  margin: 0;
  padding: 0;
}

svg {
  pointer-events: none;
}

/**
 * @section Grid
 * Structure and layout
 */
/**
 * Aspect ratio for item in cell grid
 */
.as1-1 .item {
  aspect-ratio: 1/1;
}

.as2-3 .item {
  aspect-ratio: 2/3;
}

.as4-3 .item {
  aspect-ratio: 4/3;
}

.as3-4 .item {
  aspect-ratio: 3/4;
}

.as16-9 .item {
  aspect-ratio: 16/9;
}

.as9-16 .item {
  aspect-ratio: 9/16;
}

/**
 * Base wrapper class
 */
.container {
  margin: 0 auto;
  width: 100%;
  height: auto;
  padding: var(--spacing);
}

/**
 * GRIDS
 */
/* row */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
}

.row-autofit {
  grid-template-columns: repeat(auto-fit, minmax(1em, 1fr));
}

/* grid gap */
.gap-l {
  row-gap: calc(var(--spacing) * 1.5);
  column-gap: 3.5%;
}

.gap-m {
  row-gap: var(--spacing);
  column-gap: 2%;
}

.gap-s {
  row-gap: calc(var(--spacing) * 0.75);
  column-gap: 1.5%;
}

.gap-xs {
  row-gap: calc(var(--spacing) * 0.25);
  column-gap: 1%;
}

.gap-s-x {
  row-gap: 0;
  column-gap: 1.5%;
}

.gap-s-xs {
  row-gap: 0;
  column-gap: 0.5%;
}

.gap-0 {
  row-gap: 0;
  column-gap: 0;
}

/* grid alignment */
.grid-center-xy {
  justify-items: center;
  align-items: center;
}

.grid-center-x {
  justify-items: center;
}

.grid-center-y {
  align-items: center;
}

/* align item */
.self-center-y {
  align-self: center;
}

.self-center-x {
  justify-self: center;
}

.self-left-x {
  justify-self: start;
}

.self-right-x {
  justify-self: end;
}

.self-center-xy {
  align-self: center;
  justify-self: center;
}

.c1-12, .c8 {
  grid-column: auto/span 1;
}

.c1-6, .c2-12, .c17 {
  grid-column: auto/span 2;
}

.c1-4, .c3-12, .c25 {
  grid-column: auto/span 3;
}

.c1-3, .c4-12, .c33 {
  grid-column: auto/span 4;
}

.c5-12, .c42 {
  grid-column: auto/span 5;
}

.c1-2, .c6-12, .c50 {
  grid-column: auto/span 6;
}

.c7-12, .c58 {
  grid-column: auto/span 7;
}

.c2-3, .c4-6, .c8-12, .c66 {
  grid-column: auto/span 8;
}

.c3-4, .c9-12, .c75 {
  grid-column: auto/span 9;
}

.c5-6, .c10-12, .c83 {
  grid-column: auto/span 10;
}

.c11-12, .c92 {
  grid-column: auto/span 11;
}

.c1, .c12-12, .c100 {
  grid-column: auto/span 12;
}

@media (min-width: 568px) {
  .c1-12-sm, .c8-sm {
    grid-column: auto/span 1;
  }
  .c1-6-sm, .c2-12-sm, .c17-sm {
    grid-column: auto/span 2;
  }
  .c1-4-sm, .c3-12-sm, .c25-sm {
    grid-column: auto/span 3;
  }
  .c1-3-sm, .c4-12-sm, .c33-sm {
    grid-column: auto/span 4;
  }
  .c5-12-sm, .c42-sm {
    grid-column: auto/span 5;
  }
  .c1-2-sm, .c6-12-sm, .c50-sm {
    grid-column: auto/span 6;
  }
  .c7-12-sm, .c58-sm {
    grid-column: auto/span 7;
  }
  .c2-3-sm, .c8-12-sm, .c66-sm {
    grid-column: auto/span 8;
  }
  .c3-4-sm, .c9-12-sm, .c75-sm {
    grid-column: auto/span 9;
  }
  .c5-6-sm, .c10-12-sm, .c83-sm {
    grid-column: auto/span 10;
  }
  .c11-12-sm, .c92-sm {
    grid-column: auto/span 11;
  }
  .c1-sm, .c12-12-sm, .c100-sm {
    grid-column: auto/span 12;
  }
}
@media (min-width: 768px) {
  .c1-12-md, .c8-md {
    grid-column: auto/span 1;
  }
  .c1-6-md, .c2-12-md, .c17-md {
    grid-column: auto/span 2;
  }
  .c1-4-md, .c3-12-md, .c25-md {
    grid-column: auto/span 3;
  }
  .c1-3-md, .c4-12-md, .c33-md {
    grid-column: auto/span 4;
  }
  .c5-12-md, .c42-md {
    grid-column: auto/span 5;
  }
  .c1-2-md, .c6-12-md, .c50-md {
    grid-column: auto/span 6;
  }
  .c7-12-md, .c58-md {
    grid-column: auto/span 7;
  }
  .c2-3-md, .c8-12-md, .c66-md {
    grid-column: auto/span 8;
  }
  .c3-4-md, .c9-12-md, .c75-md {
    grid-column: auto/span 9;
  }
  .c5-6-md, .c10-12-md, .c83-md {
    grid-column: auto/span 10;
  }
  .c11-12-md, .c92-md {
    grid-column: auto/span 11;
  }
  .c1-md, .c12-12-md, .c100-md {
    grid-column: auto/span 12;
  }
}
@media (min-width: 1024px) {
  .c1-12-lg, .c8-lg {
    grid-column: auto/span 1;
  }
  .c1-6-lg, .c2-12-lg, .c17-lg {
    grid-column: auto/span 2;
  }
  .c1-4-lg, .c3-12-lg, .c25-lg {
    grid-column: auto/span 3;
  }
  .c1-3-lg, .c4-12-lg, .c33-lg {
    grid-column: auto/span 4;
  }
  .c5-12-lg, .c42-lg {
    grid-column: auto/span 5;
  }
  .c1-2-lg, .c6-12-lg, .c50-lg {
    grid-column: auto/span 6;
  }
  .c7-12-lg, .c58-lg {
    grid-column: auto/span 7;
  }
  .c2-3-lg, .c8-12-lg, .c66-lg {
    grid-column: auto/span 8;
  }
  .c3-4-lg, .c9-12-lg, .c75-lg {
    grid-column: auto/span 9;
  }
  .c5-6-lg, .c10-12-lg, .c83-lg {
    grid-column: auto/span 10;
  }
  .c11-12-lg, .c92-lg {
    grid-column: auto/span 11;
  }
  .c1-lg, .c12-12-lg, .c100-lg {
    grid-column: auto/span 12;
  }
}
@media (min-width: 1280px) {
  .c1-12-xl, .c8-xl {
    grid-column: auto/span 1;
  }
  .c1-6-xl, .c2-12-xl, .c17-xl {
    grid-column: auto/span 2;
  }
  .c1-4-xl, .c3-12-xl, .c25-xl {
    grid-column: auto/span 3;
  }
  .c1-3-xl, .c4-12-xl, .c33-xl {
    grid-column: auto/span 4;
  }
  .c5-12-xl, .c42-xl {
    grid-column: auto/span 5;
  }
  .c1-2-xl, .c6-12-xl, .c50-xl {
    grid-column: auto/span 6;
  }
  .c7-12-xl, .c58-xl {
    grid-column: auto/span 7;
  }
  .c2-3-xl, .c8-12-xl, .c66-xl {
    grid-column: auto/span 8;
  }
  .c3-4-xl, .c9-12-xl, .c75-xl {
    grid-column: auto/span 9;
  }
  .c5-6-xl, .c10-12-xl, .c83-xl {
    grid-column: auto/span 10;
  }
  .c11-12-xl, .c92-xl {
    grid-column: auto/span 11;
  }
  .c1-xl, .c12-12-xl, .c100-xl {
    grid-column: auto/span 12;
  }
}
/**
 * @section Typography
 * Sets font styles for entire site
 */
p {
  margin: 0 0 var(--spacing);
}

/**
 * Hyperlink styling
 */
a {
  color: inherit;
  text-decoration-skip-ink: auto;
  word-wrap: break-word;
  transition: 0.3s ease-in-out;
}
a:active, a:focus, a:hover {
  color: var(--color-secondary-100);
  filter: drop-shadow(0 0 1rem var(--grey0));
  font-weight: 900;
}

a.selected {
  text-decoration: underline;
}

/**
 * Heading styling for h1 through h6 elements.
 * Heading class lets you use one heading type for semantics, but style it as another heading type.
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary), sans-serif;
  line-height: 1.2;
  margin: 0 0 1rem;
  padding: 1rem 0 0;
  word-wrap: break-word;
}

h1, .h1 {
  font-size: 2rem;
  font-weight: 800;
  padding-top: 0.5rem;
}

h2, .h2 {
  font-size: 1.5rem;
}

h3,
.h3 {
  font-size: 1.25rem;
  font-weight: 400;
}

h4, h5, h6, .h4, .h5, .h6 {
  font-size: 1.15rem;
}

@media (min-width: 40em) {
  h1, .h1 {
    font-size: 3rem;
  }
  h2, .h2 {
    font-size: 2rem;
  }
  h3, .h3 {
    font-size: 1.75rem;
  }
  h4, h5, .h4, .h5 {
    font-size: 1.4rem;
  }
  h6, .h6 {
    font-size: 1.15rem;
  }
}
/**
 * fonts
 */
.font-primary {
  font-family: var(--font-primary), sans-serif;
}

.font-secondary {
  font-family: var(--font-secondary), sans-serif;
}

.font-monospace {
  font-family: var(--font-monospace), monospace;
}

.font-cursive {
  font-family: var(--font-cursive), cursive;
}

/**
 * Lines, Quotes and Emphasis
 */
/**
 * Lines
 */
hr {
  border: 0;
  border-top: 1px solid var(--grey8);
  margin: 2rem auto;
}

/**
 * Use a lighter yellow for better readability
 */
mark {
  background: var(--color-highlight);
  color: var(--grey1);
}

/**
 * Blockquotes
 */
blockquote {
  font-size: 1.1875rem;
  font-style: italic;
  margin: 0 0 var(--spacing);
  padding-left: 0.8125rem;
  padding-right: 0.8125rem;
}

cite {
  color: var(--grey8);
  display: block;
  font-size: 0.8125rem;
  padding-top: 1rem;
}

/**
 * Text sizes
 */
.text-062 {
  font-size: 0.625rem !important;
}

.text-075 {
  font-size: 0.75rem !important;
}

.text-087 {
  font-size: 0.875rem !important;
}

.text-093 {
  font-size: 0.9375rem !important;
}

.text-100 {
  font-size: 1rem !important;
}

.text-110 {
  font-size: 1.1rem !important;
}

.text-115 {
  font-size: 1.15rem !important;
}

.text-125 {
  font-size: 1.25rem !important;
}

.text-150 {
  font-size: 1.5rem !important;
}

.text-175 {
  font-size: 1.75rem !important;
}

.text-200 {
  font-size: 2rem !important;
}

.text-300 {
  font-size: 3rem !important;
}

.text-400 {
  font-size: 4rem !important;
}

.text-500 {
  font-size: 5rem !important;
}

.text-600 {
  font-size: 6rem !important;
}

/**
 * Line Height
 */
.lineheight-100 {
  line-height: 1rem;
}

.lineheight-125 {
  line-height: 1.25rem;
}

/**
 * Text weight
 */
.text-light {
  font-weight: 200;
}

.text-bold {
  font-weight: 700;
}

.text-xbold {
  font-weight: 900;
}

/**
 * Text alignment
 */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-center-vertical {
  vertical-align: middle;
}

/**
 * Text decoration
 */
.text-italic {
  font-style: italic;
}

.text-underline {
  text-decoration: underline;
}

/**
 * Text colors
 */
.text-muted {
  color: var(--gray8);
}

/**
 * Text vertical
 */
.text-lr {
  writing-mode: vertical-lr;
}

.text-rl {
  writing-mode: vertical-lr;
  text-orientation: sideways;
}

.text-rl-topdown {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/**
 * Text clamp clip
 */
.text-overflow-clip {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clamp {
  position: relative;
  opacity: 0;
  display: inline-block;
  -webkit-line-clamp: 5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
}

.clampEllipsis {
  position: absolute;
  bottom: 0;
  right: 0;
}

.clampFull {
  display: none;
}

/**
 * @section Overrides
 * Nudge and tweak alignment, spacing, and visibility.
 */
/**
 * Floats
 */
.float-left {
  float: left;
}

.float-center {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.float-right {
  float: right;
}

/**
 * Margins
 */
.no-margin-padding {
  margin: 0 !important;
  padding: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

.margin {
  margin: 1em !important;
}

.margin-xxsmall {
  margin: calc(var(--spacing) * 0.25) !important;
}

.margin-right-xxsmall {
  margin-right: calc(var(--spacing) * 0.25) !important;
}

.margin-left-xxsmall {
  margin-left: calc(var(--spacing) * 0.25) !important;
}

.margin-xsmall {
  margin: 0.5em !important;
}

.margin-small {
  margin: 0.75em !important;
}

.margin-large {
  margin: 2em !important;
}

.no-margin-top {
  margin-top: 0 !important;
}

.margin-top {
  margin-top: var(--spacing);
}

.margin-top-xxsmall {
  margin-top: calc(var(--spacing) * 0.25) !important;
}

.margin-left {
  margin-left: var(--spacing) !important;
}

.margin-left-xsmall {
  margin-left: calc(var(--spacing) * 0.5) !important;
}

.margin-right {
  margin-right: var(--spacing) !important;
}

.margin-right-xsmall {
  margin-right: calc(var(--spacing) * 0.5) !important;
}

.no-margin-bottom {
  margin-bottom: 0 !important;
}

.margin-bottom {
  margin-bottom: var(--spacing) !important;
}

.margin-left-right-small {
  margin-left: calc(var(--spacing) * 0.75) !important;
  margin-right: calc(var(--spacing) * 0.75) !important;
}

.margin-left-right-xsmall {
  margin-left: calc(var(--spacing) * 0.5) !important;
  margin-right: calc(var(--spacing) * 0.5) !important;
}

.margin-left-right-xxsmall {
  margin-left: calc(var(--spacing) * 0.25) !important;
  margin-right: calc(var(--spacing) * 0.25) !important;
}

/**
 * Padding
 */
.no-padding {
  padding: 0 !important;
}

.padding {
  padding: var(--spacing) !important;
}

.padding-xxsmall {
  padding: calc(var(--spacing) * 0.25) !important;
}

.padding-xsmall {
  padding: calc(var(--spacing) * 0.5) !important;
}

.padding-small {
  padding: calc(var(--spacing) * 0.75) !important;
}

.padding-large {
  padding: calc(var(--spacing) * 1.5) !important;
}

.padding-xlarge {
  padding: calc(var(--spacing) * 2) !important;
}

.no-padding-top {
  padding-top: 0 !important;
}

.padding-top {
  padding-top: var(--spacing) !important;
}

.padding-top-xsmall {
  padding-top: calc(var(--spacing) * 0.5) !important;
}

.padding-top-xxsmall {
  padding-top: calc(var(--spacing) * 0.25) !important;
}

.padding-top-xlarge {
  padding-top: calc(var(--spacing) * 2) !important;
}

.no-padding-bottom {
  padding-bottom: 0 !important;
}

.padding-bottom {
  padding-bottom: var(--spacing) !important;
}

.padding-bottom-xlarge {
  padding-bottom: calc(var(--spacing) * 2) !important;
}

.padding-bottom-small {
  padding-bottom: calc(var(--spacing) * 0.5) !important;
}

.padding-bottom-xsmall {
  padding-bottom: calc(var(--spacing) * 0.25) !important;
}

.padding-bottom-xxsmall {
  padding-bottom: calc(var(--spacing) * 0.25) !important;
}

.no-padding-left {
  padding-left: 0 !important;
}

.padding-left-right {
  padding-left: var(--spacing) !important;
  padding-right: var(--spacing) !important;
}

.padding-left-large {
  padding-left: calc(var(--spacing) * 1.5) !important;
}

.padding-left {
  padding-left: var(--spacing) !important;
}

.padding-left-small {
  padding-left: calc(var(--spacing) * 0.5) !important;
}

.padding-left-xxsmall {
  padding-left: calc(var(--spacing) * 0.2) !important;
}

.no-padding-right {
  padding-right: 0 !important;
}

.padding-right {
  padding-right: var(--spacing) !important;
}

.padding-right-small {
  padding-right: calc(var(--spacing) * 0.5) !important;
}

.padding-right-xsmall {
  padding-right: calc(var(--spacing) * 0.35) !important;
}

.padding-right-xxsmall {
  padding-right: calc(var(--spacing) * 0.2) !important;
}

.padding-right-large {
  padding-right: calc(var(--spacing) * 1.5) !important;
}

.padding-left-right-small {
  padding-left: calc(var(--spacing) * 0.75) !important;
  padding-right: calc(var(--spacing) * 0.75) !important;
}

.padding-left-right-xsmall {
  padding-left: calc(var(--spacing) * 0.5) !important;
  padding-right: calc(var(--spacing) * 0.5) !important;
}

.padding-left-right-xxsmall {
  padding-left: calc(var(--spacing) * 0.2) !important;
  padding-right: calc(var(--spacing) * 0.2) !important;
}

/**
 * Accessibility
 */
/*
 * Hide only visually, but have it available for screen readers:
 * @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  /* 1 */
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard
 * @link https://www.drupal.org/node/897638
 */
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/**
 * Remove all animations and transitions for people that prefer not to see them
 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/**
 * Clear any floats
 */
.clearfix:before, .container:before,
.clearfix:after,
.container:after {
  display: table;
  content: " ";
}

.clearfix:after, .container:after {
  clear: both;
}

/**
 * hide show portrait landscape
 */
.hideInPortraitBlock {
  display: none;
}

.landscape .hideInPortraitBlock {
  display: block;
}

.hideInPortraitInlineBlock {
  display: none;
}

.landscape .hideInPortraitInlineBlock {
  display: inline-block;
}

.hideInLandscapeBlock {
  display: block;
}

.landscape .hideInLandscapeBlock {
  display: none;
}

.hideInPortraitGrid {
  display: none;
}

.landscape .hideInPortraitGrid {
  display: grid;
}

.hideInPortraitInline {
  display: none;
}

.landscape .hideInPortraitInline {
  display: inline;
}

/* ========== FIXE TOP =========*/
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 995;
}

/* ========== FLEX =========*/
.dflex {
  display: flex;
  flex-wrap: wrap;
}

.dflex-col {
  flex-direction: column;
}

.dflex-x-center {
  justify-content: center;
}

.dflex-x-start {
  justify-content: start;
}

.dflex-x-end {
  justify-content: end;
}

.dflex-x-between {
  justify-content: space-between;
}

.dflex-y-center {
  align-items: center;
}

.dflex-y-start {
  align-items: start;
}

.dflex-xy-stretch {
  align-content: stretch;
}

.dflex-xy-center {
  align-content: center;
  justify-content: center;
}

.dflex-item-center {
  align-self: center;
}

.dflex-item-start {
  align-self: flex-start;
}

.dflex-item-end {
  align-self: flex-end;
}

.dflex-item-stretch {
  align-self: stretch;
}

/* ========== border =========*/
.border-no {
  border: 0;
}

.border-1-solid {
  border-width: 1px;
  border-style: solid;
}

.border-circle {
  border-radius: 50%;
  border-color: transparent;
}

.border-round-small {
  border-radius: 0.125em;
}

.border-round,
.border-round-medium {
  border-radius: 0.25em;
}

.border-round-large {
  border-radius: 0.5em;
}

.border-round-xlarge {
  border-radius: 1em;
}

.border-round-xxlarge {
  border-radius: 2em;
}

.border-bottom-1px {
  border-bottom: 1px solid var(--grey3);
}

/* ========== display =========*/
.hide {
  display: none !important;
}

.show {
  display: block !important;
}

.showflex {
  display: flex !important;
}

.showgrid {
  display: grid !important;
}

.showinline {
  display: inline !important;
}

.opacity-off {
  opacity: 0 !important;
}

.opacity-on {
  opacity: 1 !important;
}

.block {
  display: block;
  width: 100%;
}

.responsive {
  display: block;
  overflow-x: auto;
}

/* ========== IMAGE =========*/
.image {
  vertical-align: middle;
  border-style: none;
  border: 0;
  width: auto;
  height: 100%;
}

/* ========== ROTATE =========*/
.rotate45 {
  transform: rotate(45deg);
}

.rotate90 {
  transform: rotate(90deg);
}

.rotate180 {
  transform: rotate(180deg);
}

.rotate270 {
  transform: rotate(270deg);
}

/* ========== SPACER =========*/
.spacer5double {
  margin-bottom: 0.5rem !important;
  margin-top: 0.5rem;
}

.spacer2 {
  margin-top: 0.2rem;
}

.spacer5 {
  margin-top: 0.5rem;
}

.spacer10 {
  margin-top: 1rem;
}

.spacer20 {
  margin-top: 2rem;
}

.spacer30 {
  margin-top: 3rem;
}

.spacer40 {
  margin-top: 4rem;
}

.spacer50 {
  margin-top: 5rem;
}

.spacer60 {
  margin-top: 6rem;
}

.spacer70 {
  margin-top: 7rem;
}

.spacerP5 {
  margin-top: 5%;
}

.spacerP10 {
  margin-top: 10%;
}

.spacerP20 {
  margin-top: 20%;
}

.spacerP30 {
  margin-top: 30%;
}

.lineSoftG {
  height: 1px;
  width: 100%;
  background-color: var(--grey3);
}

.lineSoftGmargin {
  height: 1px;
  width: 100%;
  background-color: var(--grey3);
  margin: 0.5rem 0 1rem 0;
}

.lineSoftPrimary {
  height: 1px;
  width: 100%;
  background-color: var(--color-primary-300);
}

.lineSoftPrimary_marginLR {
  height: 1px;
  width: 90%;
  background-color: var(--color-primary-600);
  margin: 0 auto;
  text-align: center;
}

.lineGradient {
  height: 10px;
  width: 100%;
  background: #122630;
  background: linear-gradient(to top, rgba(18, 38, 48, 0.5019607843) 0%, rgba(81, 153, 189, 0.5019607843) 50%, rgba(18, 38, 48, 0.5019607843) 100%);
}

/*============== SPIN =============*/
.spinner {
  animation-name: spin;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/**
 * List styling
 */
ul, ol {
  margin: 0;
  padding: 0;
}

ul ul, ul ol, ol ol, ol ul {
  margin-bottom: 0;
}

ul {
  list-style: square;
  list-style-position: outside;
}

dl, dd {
  margin: 0;
  padding: 0;
}

dd {
  margin-bottom: var(--spacing);
}

dt {
  font-weight: bold;
}

/**
 * @bugfix Prevent webkit from removing list semantics
 * 1. Add a non-breaking space
 * 2. Make sure it doesn't mess up the DOM flow
 */
.list-inline, .list-unstyled {
  list-style: none;
  margin-left: 0;
}
.list-inline > li::before, .list-unstyled > li::before {
  content: "​";
  /* 1 */
  position: absolute;
  /* 2 */
}

/**
 * Removes list styling.
 * For semantic reasons, should only be used on unordered lists.
 */
.list-unstyled {
  margin-left: 0;
}

/**
 * Display lists on a single line.
 */
.list-inline {
  margin-left: -0.5em;
  margin-right: -0.5em;
  padding: 0;
}
.list-inline > li {
  display: inline-block;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

/*--------------------------------------------------------------
# li title
--------------------------------------------------------------*/
ul.title li {
  display: table;
  width: 100%;
  padding-bottom: 1em;
}

ul.title li div {
  display: table-cell;
}

ul.title li div:first-child {
  font-weight: 700;
  width: 25%;
  padding-right: 1em;
}

ul.title li div:last-child {
  max-width: 75%;
}

/*--------------------------------------------------------------
# li fisheye
--------------------------------------------------------------*/
ul.fisheye {
  list-style-position: outside;
}

ul.fisheye li {
  list-style: none;
  position: relative;
  line-height: 1.5rem;
  margin: 0 0 0 2.5em;
}

ul.fisheye li:after {
  content: "";
  position: absolute;
  top: -0.05rem;
  left: -2rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--grey5);
}

ul.fisheye li.disabled:after {
  content: "◯";
  position: absolute;
  top: -0.05rem;
  left: -1.25rem;
  font-size: 1.5rem;
  color: var(--grey3);
  pointer-events: none;
}

ul.fisheye li.selected:after {
  content: "";
  top: -0.05rem;
  left: -2rem;
  padding: 0.5rem;
  background-color: var(--color-primary);
}

.round-checkbox {
  /* 1. Remove default styling */
  appearance: none;
  -webkit-appearance: none;
  /* 2. Set dimensions and make it a circle */
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--grey5);
  border-radius: 50%; /* This creates the circle */
  /* 3. Basic setup for the "check" mark */
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  background-color: var(--grey1);
  transition: 0.2s all;
}

/* Style when checked */
.round-checkbox:checked {
  border: 0.25rem solid var(--color-primary);
}

/* Add a small white dot or checkmark inside when checked */
.round-checkbox::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  transform: scale(0);
  transition: 120ms transform ease-in-out;
}

.round-checkbox:checked::before {
  transform: scale(1);
}

/*--------------------------------------------------------------
# CHECKMARKS ALIGNED PARAGRAPH
--------------------------------------------------------------*/
li.unicode {
  list-style: none;
  position: relative;
  padding-left: 3em;
  padding-bottom: 1em;
}

li.checkmark, li.crossmark {
  list-style: none;
  position: relative;
  padding-left: 3em;
  padding-bottom: 1em;
}

li.checkmark:before, li.crossmark:before {
  position: absolute;
  font-size: 3em;
  left: 0;
  margin-top: -0.25em;
}

li.checkmark:before {
  color: #00FF00;
  content: "☑";
  border: 1px solid var(--grey3);
}

.crossmark:before {
  color: #FF0000;
  content: "✗";
}

/*--------------------------------------------------------------
# TOGGLE SWITCH
--------------------------------------------------------------*/
/* The box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
}

/* Hide default checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The background track */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 1.5rem; /* Rounded track */
}

/* The moving knob */
.slider:before {
  position: absolute;
  content: "";
  height: 1.25rem;
  width: 1.25rem;
  left: 0.2rem;
  bottom: 0.15rem;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%; /* Rounded knob */
}

/* Change track color when checked */
input:checked + .slider {
  background-color: var(--color-primary);
}

/* Move the knob to the right when checked */
input:checked + .slider:before {
  transform: translateX(1.2rem);
}

input:disabled + .slider {
  background-color: var(--grey3);
  pointer-events: none;
}

/**
 * @section Buttons
 */
button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
}

.btn {
  border: none;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all 100ms ease-in;
  padding: 0.1em 0.15em;
}
.btn:hover {
  color: var(--grey1);
  background-color: var(--color-primary);
  box-shadow: inset 0 0.25em 0.25em rgba(0, 0, 0, 0.35), 0 1px 0.25em rgba(0, 0, 0, 0.25);
  outline: 0;
}
.btn:active {
  color: var(--grey1);
  background-color: var(--color-primary);
  box-shadow: inset 0 0.25em 0.25em rgba(0, 0, 0, 0.35), 0 1px 0.25em rgba(0, 0, 0, 0.25);
  outline: 0;
}

.btn-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--grey0);
  background-color: var(--grey9);
  color: var(--grey0);
  font-weight: 700;
  font-size: var(--font-xs);
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}
.btn-i:hover {
  color: var(--color-primary);
  background-color: var(--grey3);
  box-shadow: none;
  opacity: 1;
}
.btn-i:active {
  color: var(--grey5);
  background-color: var(--grey8);
  box-shadow: none;
  opacity: 0.5;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.25em 0.75em;
  border-radius: 0.5rem;
  background-color: var(--grey0);
  color: var(--color-primary-darker);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: var(--font-xs);
  opacity: 0.85;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover {
  color: var(--color-primary-darker);
  background-color: var(--color-primary-ultralight);
  box-shadow: 0 2px 8px var(--grey0-25);
  opacity: 1;
}
.btn-primary:active {
  color: var(--color-primary-darker);
  background-color: var(--color-primary-ultralight);
  box-shadow: none;
  opacity: 0.7;
}

/**
 * card
 */
#cards-container {
  width: var(--cards-width);
  margin-left: auto;
  margin-right: auto;
}

.outer-card {
  position: relative;
  border-radius: 1rem;
  padding: 0.25rem 0.5rem 0 0.5rem;
  margin-bottom: 1rem;
  display: grid;
}

.outer-card .remove-card {
  position: absolute;
  top: -0.5rem;
  right: -0.75rem;
  cursor: pointer;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--grey3);
  background-color: var(--grey0);
}

.outer-card .remove-card div {
  color: var(--grey5);
  font-size: 1.75rem;
  margin-top: -0.15rem;
  margin-left: 0.1rem;
  pointer-events: none;
}

.inner-card-top {
  display: grid;
  align-items: center;
}

.inner-card-bottom {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.currency-card {
  position: relative;
  display: grid;
  align-items: center;
  border-radius: 1rem;
  border: 1px solid var(--grey3);
}

.currency-card .from_to {
  position: absolute;
  top: -1rem;
  left: 2rem;
  padding: 0.5rem 0.5rem 0.25rem 0.5rem;
  font-size: 0.75rem;
  background-color: var(--grey0);
}

.currency-card input[type=text] {
  width: 95%;
  border: none;
  background-color: transparent;
  field-sizing: content;
}

.currency-card input[type=text].value0 {
  border: 1px solid var(--grey2);
}

.currency-card input[type=text].value1 {
  border: 1px solid var(--grey0);
}

.currency-card table {
  width: 12rem;
}

.outer-card .swap {
  border-radius: 50%;
  color: var(--grey5);
  border: 1px solid var(--grey3);
  background-color: var(--grey0);
  z-index: 2;
  margin: -1.25rem -0.5rem -2rem -0.5rem;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
}

.outer-card .swap-inner {
  pointer-events: none;
}

.outer-card .swap-inner.loader {
  color: var(--color-primary);
  background-color: var(--grey0);
}

.list-calculation {
  cursor: pointer;
  height: 20px;
  margin-top: 2px;
}

.list-values table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid var(--grey3);
}

.list-values table tr:nth-child(even) {
  background-color: var(--grey2);
}

.list-values table td {
  padding: 0.1rem 0.1rem;
}

.list-values table td:first-child {
  text-align: right;
}

.list-values td.unicode {
  vertical-align: top;
  line-height: 1rem;
}

.inner-card-bottom input[type=text] {
  width: auto;
}

.inner-card-bottom input[type=text]:disabled {
  opacity: 0.3;
}

.parameters-right .buy input[type=checkbox],
.parameters-right .sell input[type=checkbox] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  accent-color: var(--color-primary);
}

/**
HTML,BODY
 */
@media screen {
  html, body {
    font-size: var(--font-xxs);
  }
  .date-update-label-long {
    display: none;
  }
  .date-update-label-short {
    display: inline;
  }
  :root {
    --col-width: 20rem;
    --cards-width: 90%;
    --scroll-bar-width: 0;
    --nav-open: 5rem;
  }
  .outer-card {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto;
  }
  .inner-card-top {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
  }
  .inner-card-top .left {
    padding: 0.75rem 1rem 0.5rem 1rem;
    margin: 1rem 0 0.5rem 0;
    grid-template-rows: 1fr;
    grid-template-columns: 9% 45% 6% 40%;
  }
  .inner-card-top .right {
    padding: 0.5rem 1rem 0.5rem 1rem;
    margin: 1rem 0 0 0;
    grid-template-rows: 1fr;
    grid-template-columns: 9% 45% 6% 40%;
  }
  .inner-card-top .swap-inner.double-arrow {
    transform: rotate(-90deg);
  }
  .currency-card input[type=text] {
    margin-top: 0;
  }
}
@media screen and (min-width: 391px) {
  html, body {
    font-size: var(--font-xxs);
  }
  :root {
    --col-width: 5.5rem;
    --cards-width: 90%;
  }
}
@media screen and (min-width: 431px) {
  html, body {
    font-size: var(--font-xs);
  }
  :root {
    --col-width: 6rem;
    --cards-width: 90%;
  }
}
@media screen and (min-width: 569px) {
  html, body {
    font-size: var(--font-sm);
  }
  :root {
    --col-width: 6.5rem;
    --cards-width: 90%;
  }
}
@media screen and (min-width: 768px) {
  html, body {
    font-size: var(--font-md);
  }
  :root {
    --col-width: 7rem;
    --cards-width: 90%;
  }
  .date-update-label-long {
    display: inline;
  }
  .date-update-label-short {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  html, body {
    font-size: var(--font-lg);
  }
  :root {
    --col-width: 7.5rem;
    --cards-width: 80%;
  }
  .nav-content {
    height: 2rem;
  }
  .nav-right {
    grid-template-columns: 1fr max-content;
    grid-template-rows: 1fr;
  }
  #nav.close {
    margin-top: -2rem;
  }
  .outer-card {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto;
  }
  .inner-card-top {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr;
  }
  .inner-card-top .left {
    padding: 0.75rem 1.1rem 0.5rem 1rem;
    margin: 1rem 0 0.5rem 0;
    grid-template-rows: 2.5rem;
    grid-template-columns: 12% 43% 6% 39%;
  }
  .inner-card-top .right {
    padding: 0.75rem 0.5rem 0.75rem 1.25rem;
    margin: 1rem 0 0.5rem 0;
    grid-template-rows: 2.5rem;
    grid-template-columns: 12% 43% 6% 39%;
  }
  .inner-card-top .swap-inner.double-arrow {
    transform: rotate(0deg);
  }
  .parameters {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr;
  }
  .parameters-spacer {
    display: block;
    min-width: 2.5rem;
  }
}
@media screen and (min-width: 1920px) {
  html, body {
    font-size: var(--font-lg);
  }
  :root {
    --col-width: 7.5rem;
    --cards-width: 70%;
  }
}

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