:root {
  /* Old variables */
  --blackColor: #000000;
  --grayColorBorder: #e8e8e8;
  --grayColorComponents: #f9f9fb;
  --grayColorHover: #f4f4f4;
  --grayColorDisabled: #bbbbbb;
  --grayColorCard: #f7f7f7;
  --grayColorText: #696158;
  --grayColorCardDashed: #d7d9d9;
  --grayColorLineDashed: #bababa;
  --grayColorStep: #a29d98;
  --greenColor: #00a499;
  --greenColorBalance: #00ae99;
  --greenColorHover: #059f8d;
  --greenColorSelectCard: #eefbf9;
  --orangeColorHover: #ea4800;
  --orangeColorMain: #ff4f00;
  --orangeColorMainActive: #f04c02;
  --redColorError: #ff4646;
  --tooltipColor: rgb(105, 97, 88);
  --whiteColorBase: #ffffff;
  --placeholderColor: #9d9994;
  --yellowBoldColor: #ffcd00;
  --colorGrayBorder: #e8e8e8;
  --blueColor: #002d74;
  --orangeColor200: #ff9565;
  --orangeColor300: #ffe4d9;
  --yellowColor: #ffd380;
  --redColorMain: #fff2f2;
  --beigeColorMain: #fff6eb;
  --grayColor200: #aaa9a9;
  --grayColor300: #ececec;
  --grayColorBackground: #f6f6f7;

  /* Radius */
  --radius4: 4px;
  --radius6: 6px;
  --radius8: 8px;
  --radius12: 12px;
  --radius16: 16px;
  --radius20: 20px;
  --radius24: 24px;
  --radius999: 999px;

  /* Elevations */
  --elevation-XS: 0px 1px 4px 0px rgba(69, 73, 78, 0.16);
  --elevation-S: 0px 16px 32px -4px rgba(69, 73, 78, 0.10), 0px 2px 4px 0px rgba(69, 73, 78, 0.04);

  /* Focus elevations */
  --elevation-Focus-Primary: 0px 0px 0px 3px rgba(255, 79, 0, 0.2);
  --elevation-Focus-Secondary: 0px 0px 0px 3px rgba(0, 204, 204, 0.2);
  --elevation-Focus-Tertiary: 0px 0px 0px 3px rgba(255, 205, 0, 0.2);
  --elevation-Focus-Error: 0px 0px 0px 3px rgba(255, 0, 0, 0.2);
  --elevation-Focus-Gray: 0px 0px 0px 3px rgba(41, 43, 46, 0.2);
  --elevation-Focus-Check: 0px 0px 0px 2px rgba(0, 204, 204, 0.2);
}

/* Global */
html {
  font-size: 16px;
  overflow: auto;
}

body {
  font-family: 'Lexend';
  font-size: 1rem;
  font-weight: 400;
}

img {
  max-width: 100%;
}

/* Animations */
.fade-in {
  animation: fadeIn ease 1.2s;
  -webkit-animation: fadeIn ease 1.2s;
  -moz-animation: fadeIn ease 1.2s;
  -o-animation: fadeIn ease 1.2s;
  -ms-animation: fadeIn ease 1.2s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-out {
  display: none !important;
  animation: fadeOut ease 1.2s;
  -webkit-animation: fadeOut ease 1.2s;
  -moz-animation: fadeOut ease 1.2s;
  -o-animation: fadeOut ease 1.2s;
  -ms-animation: fadeOut ease 1.2s;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}