:root {
  --color-black--rgb: 0, 0, 0;
  --color-black: #000000;
  --color-white--rgb: 255, 255, 255;
  --color-white: #ffffff;
  --color-grey-010--rgb: 248, 248, 248;
  --color-grey-010: #f8f8f8;
  --color-grey-020--rgb: 160, 160, 160;
  --color-grey-020: #a0a0a0;
  --color-grey-050--rgb: 217, 217, 217;
  --color-grey-050: #d9d9d9;
  --color-grey-100--rgb: 164, 172, 193;
  --color-grey-100: #a4acc1;
  --color-grey-200--rgb: 171, 171, 171;
  --color-grey-200: #ababab;
  --color-grey-300--rgb: 98, 101, 112;
  --color-grey-300: #626570;
  --color-grey-400--rgb: 70, 70, 70;
  --color-grey-400: #464646;
  --color-blue-100--rgb: 38, 90, 166;
  --color-blue-100: #265aa6;
  --color-blue-200--rgb: 22, 41, 91;
  --color-blue-200: #16295b;
  --color-green-100--rgb: 67, 98, 54;
  --color-green-100: #436236;
  --color-highlight--rgb: 255, 196, 90;
  --color-highlight: #ffc45a;
  --color-error--rgb: 217, 89, 89;
  --color-error: #d95959;
  --color-red: #ff3030;
}

html {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

@media (min-width: 1200px) {
  :root {
    --wrap: 2.604vw;
    --wrap-1: 18.489vw;
    --wrap-2: 22.708vw;
    --wrap-colored: calc(var(--wrap-1) - var(--wrap));
  }
}

@media (min-width: 1200px) and (min-width: 1920px) {
  :root {
    --wrap: calc((100vw - 1820px) / 2);
    --wrap-1: calc((100vw - 1110px) / 2);
    --wrap-colored: 22.1875rem;
    --wrap-2: calc((100vw - 1080px) / 2);
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  :root {
    --wrap: 5vw;
    --wrap-1: 5vw;
    --wrap-2: 5vw;
    --wrap-colored: 5vw;
  }
}

@media (max-width: 899px) {
  :root {
    --wrap: 5vw;
    --wrap-1: 5vw;
    --wrap-2: 5vw;
    --wrap-colored: 5vw;
  }
}

:root {
  --color-black--rgb: 0, 0, 0;
  --color-black: #000000;
  --color-white--rgb: 255, 255, 255;
  --color-white: #ffffff;
  --color-grey-010--rgb: 248, 248, 248;
  --color-grey-010: #f8f8f8;
  --color-grey-020--rgb: 160, 160, 160;
  --color-grey-020: #a0a0a0;
  --color-grey-050--rgb: 217, 217, 217;
  --color-grey-050: #d9d9d9;
  --color-grey-100--rgb: 164, 172, 193;
  --color-grey-100: #a4acc1;
  --color-grey-200--rgb: 171, 171, 171;
  --color-grey-200: #ababab;
  --color-grey-300--rgb: 98, 101, 112;
  --color-grey-300: #626570;
  --color-grey-400--rgb: 70, 70, 70;
  --color-grey-400: #464646;
  --color-blue-100--rgb: 38, 90, 166;
  --color-blue-100: #265aa6;
  --color-blue-200--rgb: 22, 41, 91;
  --color-blue-200: #16295b;
  --color-green-100--rgb: 67, 98, 54;
  --color-green-100: #436236;
  --color-highlight--rgb: 255, 196, 90;
  --color-highlight: #ffc45a;
  --color-error--rgb: 217, 89, 89;
  --color-error: #d95959;
}

::-webkit-scrollbar {
  width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--color-grey-010);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-blue-100);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--color-blue-200);
}

html {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

* {
  -webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 899px) {
  * {
    outline: none;
  }
}

body,
input,
textarea,
button,
select {
  font-family: "Roboto", sans-serif;
}

a {
  text-decoration: none;
}

html,
body {
  overflow-x: hidden;
  height: unset !important;
  font-weight: 400;
  font-size: 1rem;
  line-height: 140%;
  color: var(--color-black);
  background-color: var(--color-white);
}

html._lock,
body._lock {
  overflow: hidden;
}