html {
  font-size: 16px;

  @media screen and (max-width: 1200px) {
    font-size: 15px;
  }
  @media screen and (max-width: 960px) {
    font-size: 14px;
  }
  @media screen and (max-width: 640px) {
    font-size: 13px;
  }
  @media screen and (max-width: 480px) {
    font-size: 12px;
  }
  @media screen and (max-width: 320px) {
    font-size: 11px;
  }
}

a {
  text-decoration: none;
}

:root {
  --black: #000000;
  --black-50: #00000080;
  --white: #ffffff;
  --white-50: #ffffff80;
  --primary5: #03030a;
  --primary10: #050614;
  --primary20: #0a0c28;
  --primary30: #0f123c;
  --primary40: #141850;
  --primary50: #191e64;
  --primary60: #474b83;
  --primary70: #535ac4;
  --primary80: #9498d0;
  --primary90: #c9cbe8;
  --primary95: #e4e4f3;
  --secondary5: #0c1718;
  --secondary10: #172d30;
  --secondary20: #2e5a60;
  --secondary30: #458790;
  --secondary40: #5cb4c0;
  --secondary50: #73e1f0;
  --secondary60: #8fe7f3;
  --secondary70: #abedf6;
  --secondary80: #c7f3f9;
  --secondary90: #e3f9fc;
  --secondary95: #f1fcfd;
  --tertiary5: #0f101a;
  --tertiary10: #1e1f33;
  --tertiary20: #3c3f66;
  --tertiary30: #5a5e99;
  --tertiary40: #787ecc;
  --tertiary50: #969dff;
  --tertiary60: #abb1ff;
  --tertiary70: #c0c4ff;
  --tertiary80: #d5d8ff;
  --tertiary90: #eaebff;
  --tertiary95: #f4f5ff;
  --neutral0: #000000;
  --neutral4: #0f0f0f;
  --neutral5: #141414;
  --neutral6: #1f1f1f;
  --neutral10: #282828;
  --neutral12: #333333;
  --neutral15: #3c3c3c;
  --neutral17: #454545;
  --neutral20: #505050;
  --neutral22: #575757;
  --neutral25: #646464;
  --neutral30: #787878;
  --neutral35: #8c8c8c;
  --neutral40: #a0a0a0;
  --neutral45: #b4b4b4;
  --neutral50: #c8c8c8;
  --neutral55: #cdcdcd;
  --neutral60: #d3d3d3;
  --neutral65: #d9d9d9;
  --neutral70: #dedede;
  --neutral75: #e3e3e3;
  --neutral80: #e9e9e9;
  --neutral85: #ededed;
  --neutral90: #f0f0f0;
  --neutral92: #f2f2f2;
  --neutral94: #f5f5f5;
  --neutral95: #f7f7f7;
  --neutral96: #fafafa;
  --neutral98: #fcfcfc;
  --neutral100: #ffffff;
  --success5: #030a08;
  --success10: #051410;
  --success20: #0a2820;
  --success30: #0f3b31;
  --success40: #144f41;
  --success50: #196351;
  --success60: #478274;
  --success70: #75a197;
  --success80: #a3c1b9;
  --success90: #d1e0dc;
  --success95: #e8efee;
  --error5: #0f0406;
  --error10: #1e080c;
  --error20: #3b1018;
  --error30: #591724;
  --error40: #761f30;
  --error50: #94273c;
  --error60: #a95263;
  --error70: #bf7d8a;
  --error80: #d4a9b1;
  --error90: #ead4d8;
  --error95: #f4e9eb;
  --warning5: #181406;
  --warning10: #2f280c;
  --warning20: #5f5118;
  --warning30: #8e7923;
  --warning40: #bea22f;
  --warning50: #edca3b;
  --warning60: #f1d562;
  --warning70: #f4df89;
  --warning80: #f8eab1;
  --warning90: #fbf4d8;
  --warning95: #fdfaeb;
  --content-on-background: var(--neutral10);
  --content-on-surface: var(--neutral20);
  --content-on-surface-variant: var(--neutral30);
  --content-on-background-inverse: var(--neutral100);
  --content-on-surface-inverse: var(--neutral85);
  --content-on-surface-variantinverse: var(--neutral60);
  --content-content-disabled: var(--neutral70);
  --content-primary: var(--primary50);
  --content-link: var(--primary70);
  --content-link-hover: var(--primary60);
  --content-link-pressed: var(--primary50);
  --content-info: var(--primary50);
  --content-infobold: var(--primary40);
  --content-warning: var(--warning50);
  --content-warning-bold: var(--warning40);
  --content-error: var(--error50);
  --content-errorbold: var(--error40);
  --content-success: var(--success50);
  --content-success-bold: var(--success40);
  --background-background: var(--neutral100);
  --background-hover: var(--neutral50);
  --background-pressed: var(--neutral80);
  --background-selected: var(--primary90);
  --background-disabled: var(--neutral50);
  --background-inverse: var(--neutral10);
  --background-primary: var(--primary50);
  --background-primary-hover: var(--primary40);
  --background-primary-pressed: var(--primary30);
  --background-info: var(--primary50);
  --background-info-subtle: var(--primary95);
  --background-warning: var(--warning50);
  --background-warning-subtle: var(--warning95);
  --background-error: var(--error50);
  --background-error-subtle: var(--error95);
  --background-success: var(--success50);
  --background-success-subtle: var(--success95);
  --surface-container-lowest: var(--neutral100);
  --surface-surface: var(--neutral98);
  --surface-surface-bright: var(--neutral98);
  --surface-container-low: var(--neutral96);
  --surface-container: var(--neutral94);
  --surface-container-high: var(--neutral92);
  --surface-container-highest: var(--neutral90);
  --surface-surface-dim: var(--neutral85);
  --border-on-background: var(--neutral40);
  --border-on-surface: var(--neutral50);
  --border-on-surface-variant: var(--neutral60);
  --border-border-disabled: var(--neutral80);
  --border-primary: var(--primary50);
  --border-inverse: var(--neutral100);
  --border-focus: var(--primary50);
  --border-info: var(--primary50);
  --border-warning: var(--warning50);
  --border-error: var(--error50);
  --border-success: var(--success50);
  --overlay-50: var(--black-50);
  --overlay-50-inverse: var(--white-50);

  /* Typography */

  --heading-font-family: "VerdanaBold";
  --text-font-family: "Arial";
  --heading-l-bold: 2rem;
  --heading-m-bold: 1.5rem;
  --heading-s-bold: 1.25rem;
  --heading-xs-bold: 1rem;
  --heading-2xs-bold: 0.875rem;
  --text-xl-bold: 1.25rem;
  --text-xl-regular: 1.25rem;
  --text-l-bold: 1rem;
  --text-l-regular: 1rem;
  --text-m-bold: 0.875rem;
  --text-m-regular: 0.875rem;
  --text-s-bold: 0.875rem;
  --text-s-regular: 0.75rem;
  --text-xs-bold: 0.625rem;
  --text-xs-regular: 0.625rem;
}

.heading-l-bold {
  font-family: var(--heading-font-family);
  font-size: var(--heading-l-bold);
  line-height: 1.25;
  font-weight: 700;
}
.heading-m-bold {
  font-family: var(--heading-font-family);
  font-size: var(--heading-m-bold);
  line-height: 1.333333;
  font-weight: 700;
}
.heading-s-bold {
  font-family: var(--heading-font-family);
  font-size: var(--heading-s-bold);
  line-height: 1.4;
  font-weight: 700;
}
.heading-xs-bold {
  font-family: var(--heading-font-family);
  font-size: var(--heading-xs-bold);
  line-height: 1.5;
  font-weight: 700;
}
.heading-2xs-bold {
  font-family: var(--heading-font-family);
  font-size: var(--heading-2xs-bold);
  line-height: 1.428571;
  font-weight: 700;
}
.text-xl-bold {
  font-family: var(--text-font-family);
  font-size: var(--text-xl-bold);
  line-height: 1.4;
  font-weight: 700;
}
.text-xl-regular {
  font-family: var(--text-font-family);
  font-size: var(--text-xl-regular);
  line-height: 1.4;
  font-weight: 400;
}
.text-l-bold {
  font-family: var(--text-font-family);
  font-size: var(--text-l-bold);
  line-height: 1.5;
  font-weight: 700;
}
.text-l-regular {
  font-family: var(--text-font-family);
  font-size: var(--text-l-regular);
  line-height: 1.5;
  font-weight: 400;
}
.text-m-bold {
  font-family: var(--text-font-family);
  font-size: var(--text-m-bold);
  line-height: 1.428571;
  font-weight: 700;
}
.text-m-regular {
  font-family: var(--text-font-family);
  font-size: var(--text-m-regular);
  line-height: 1.428571;
  font-weight: 400;
}
.text-s-bold {
  font-family: var(--text-font-family);
  font-size: var(--text-s-bold);
  line-height: 1.428571;
  font-weight: 700;
}
.text-s-regular {
  font-family: var(--text-font-family);
  font-size: var(--text-s-regular);
  line-height: 1.666667;
  font-weight: 400;
}
.text-xs-bold {
  font-family: var(--text-font-family);
  font-size: var(--text-xs-bold);
  line-height: 1.4;
  font-weight: 700;
}
.text-xs-regular {
  font-family: var(--text-font-family);
  font-size: var(--text-xs-regular);
  line-height: 1.4;
  font-weight: 400;
}

.twelve-columns-container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 1200px;

  @media screen and (max-width: 1200px) {
    width: 960px;
  }
  @media screen and (max-width: 960px) {
    width: 640px;
  }
  @media screen and (max-width: 640px) {
    width: 480px;
  }
  @media screen and (max-width: 480px) {
    width: 320px;
  }
}

.grayscale {
  filter: grayscale(100%);
}

.utis-flex-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.ut_button {
  border: none;
  display: flex;
  padding: 0.375rem 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  color: var(--content-on-background-inverse);
  background-color: transparent;
  text-align: center;
  font-family: Arial;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;

  :active {
    background-color: var(--content-link);
  }
}

.ut-accordion {
  font-family: Arial;

  display: flex;
  flex-direction: column;

  .ut-accordion-header {
    display: flex;
    flex-direction: row;
    align-items: center;

    color: var(--content-link);
    text-align: left;

    font-size: 1rem;
    font-weight: 700;

    padding: 0.5rem 1rem;
    gap: 0.5rem;

    /* unbuttonize */
    background: none;
    border: none;
    cursor: pointer;
    outline: inherit;
  }

  .ut-accordion-header:hover {
    color: var(--content-link-hover);
  }
  .ut-accordion-header:active {
    color: var(--content-link-pressed);
  }

  .ut-accordion-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 0 1rem 3rem;
    font-size: 1rem;
    font-weight: 400;
  }

  .ui-accordion-header-active {
    border-left: 0.25rem solid var(--background-selected);
  }

  .ui-accordion-content-active {
    border-left: 0.25rem solid var(--background-selected);
  }

  .ui-accordion-content-active:empty {
    height: 0px !important;
  }
}

.ut-accordion-image {
  width: 560px;
  object-fit: contain;

  flex-shrink: 0;
  border-radius: 0.5rem;
  border: 0.25rem solid var(--background-selected);
  box-shadow: 0 0.25rem 3.25rem 0 var(--background-selected);

  &.unbordered {
    border: none;
    box-shadow: none;
  }

  @media screen and (max-width: 960px) {
    width: 100%;
  }
}

.utis-custom-list-bullet {
  ul {
    padding-left: 0px !important;

    li {
      list-style-type: none;
      background-image: url(./icons/checkbox-circle.svg);
      background-repeat: no-repeat;
      background-position-y: center;
      padding-left: 2.5rem;
      min-height: 24px;
      display: flex;
      align-items: center;
    }
  }
}

.utis-right-menu-container {
  z-index: 999;
  position: fixed;
  right: 0.5rem;
  top: 50%;
  transform: translate(0px, -50%);

  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  .right-menu-item {
    width: 1rem;
    height: 1rem;

    border: none;
    margin: 0;
    text-decoration: none;
    background: none;
  }
}