@font-face {
  font-family: 'icons';
  font-display: swap;
  src: url("/public/fonts/icons.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

html, body{
  font-family: 'Roboto', normal;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-gutter: stable;
}

html{
  font-size: 16px;
  width: 100%;
  min-height: 100%;
  min-width: 320px;
}

body{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--background-color-primary);
}

::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--background-color-primary);        /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
  background-color: var(--text-color-additional);  /* color of the scroll thumb */
  border-radius: 2px;          /* roundness of the scroll thumb */
}

#outlet{
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: 1px;
}

body.modal-lock,
body.lock{
  overflow: hidden;
}

.visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.font-tester{
  position: absolute;
  left: 10px;
  top: 10px;
}

body{
  --scrollbar-background: #ffffff;

  --text-color-orange: #ff8562;
  --text-color-error: #ff0000;
  --text-color-link: #1a0dab;

  --text-color-primary: #50505a;
  --text-color-secondary: #a6afbd;
  --text-color-additional: #50505a;
  --text-color-hover: #a6afbd;

  --background-color-primary: #fbfcfd;
  --background-color-secondary: #f0f4f7;
  --background-color-additional: #a6afbd;
  --background-color-hover: #e2e6e9;

  --text-color-primary-inverted: #a6afbd;
  --text-color-hover-inverted: #f0f4f7;
  --background-color-primary-inverted: #44444d;
  
  --day-diagram-secondary: #a6afbd;

  --transactions-diagram-additional: #00141E;

  --labels-primary: #a6afbd;

  --header-background: #fbfcfd;
  --header-background-secondary: #f0f4f7;
  --header-menu-btn-background: #50505a;
  --header-menu-btn-color: #fbfcfd;

  --background-color-primary-RGB: 251, 252, 253;
  --background-color-secondary-RGB: 240, 244, 247;

  --btn-gray-background: #a6afbd;
  --btn-gray-color: #f0f4f7;
  --btn-gray-active: #50505a;

  --btn-light-background: #f0f4f7;
  --btn-light-color: #50505a;
  --btn-light-active: #e0e4e7;

  --social-btn-primary: #50505a;

  --landing-main-background: #f0f4f7;
  --landing-main-smoke-url: url("/public/img/landing/main/smoke.svg");
  --landing-main-smoke-mobile-url: url("/public/img/landing/main/smoke-mobile.svg");
  --landing-scheme-background1: #266763;
  --landing-scheme-background2: #D0C018;
  --landing-structure-background-url: url("/public/img/landing/structure/structure-bg.svg");
}

body.dark-theme{
  --scrollbar-background: #101617;

  --text-color-orange: #ff8562;
  --text-color-error: #ff5050;
  --text-color-link: #8fc0ff;

  --text-color-primary: #a6afbd;
  --text-color-secondary: #a6afbd;
  --text-color-additional: #f0f4f7;
  --text-color-hover: #f0f4f7;

  --background-color-primary: #44444d;
  --background-color-secondary: #50505a;
  --background-color-additional: #44444d;
  --background-color-hover: #38383f;

  --text-color-primary-inverted: #50505a;
  --text-color-hover-inverted: #a6afbd;
  --background-color-primary-inverted: #fbfcfd;

  --day-diagram-secondary: #f0f4f7;

  --transactions-diagram-additional: #fbfcfd;

  --labels-primary: #fbfcfd;

  --header-background: #50505a;
  --header-background-secondary: #44444d;
  --header-menu-btn-background: #fbfcfd;
  --header-menu-btn-color: #50505a;

  --background-color-primary-RGB: 68, 68, 77;
  --background-color-secondary-RGB: 80, 80, 90;

  --btn-gray-background: #44444d;
  --btn-gray-color: #a6afbd;
  --btn-gray-active: #38383f;

  --btn-light-background: #50505a;
  --btn-light-color: #a6afbd;
  --btn-light-active: #38383f;

  --social-btn-primary: #44444d;

  --landing-main-background: linear-gradient(99.85deg, #44444D 25.94%, #101617 100%);
  --landing-main-smoke-url: url("/public/img/landing/main/smoke-dark.svg");
  --landing-main-smoke-mobile-url: url("/public/img/landing/main/smoke-mobile-dark.svg");
  --landing-scheme-background1: #44444d;
  --landing-scheme-background2: #44444d;
  --landing-structure-background-url: url("/public/img/landing/structure/structure-bg-dark.svg");
}
/* @media (min-width: 760px),
(min-width: 608px) and (min-resolution: 1.25dppx),
(min-width: 506px) and (min-resolution: 1.5dppx){
  body{
    overflow-x: hidden;
  }
} */
/* @media (min-resolution: 1.25dppx){
  html{
    font-size: 12.8px;
  }
}
@media (min-resolution: 1.5dppx){
  html{ 
    font-size: 10.6px;
  }
} */