html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  overflow: hidden;
  background-color: var(--background-secondary-color);
}

#root {
  width: 100vw;
  height: 100vh;
}

:root {
  --default-text-blue: #0f1955;
  --default-light-blue: #4455b3;
  --default-grey-blue: #4d648d;
  --default-text-grey: #bababa; // Используется в проекте
  --default-dark-grey: #757575; // Используется в проекте
  --default-light-grey: #dfdddd; // Используется в проекте
  --default-light-black: #647d915c;
  --default-primary: #2185c7; // Используется в проекте
  --default-success: #42985f;
  --default-info: #ffc000; // Используется в проекте
  --default-warning: #a52020; // Используется в проекте
  --default-text-light-grey: #717171; // Используется в проекте
  --default-search-input-border: #666666;
  --default-error: #a52020;
  --default-liquidation: #ffcaca;
  --light-grey: #d4d4d4; // Используется в проекте
  --alice-blue: rgba(33, 150, 243, 0.05);
  --dodger-blue: #2196f3; //Используется в проекте
  --default-white: #e7e7e7; //Используетя в проекте
  --background-secondary-color: #d2d2d2; //используется в проекте
  --shadow-primary-color: rgba(100, 125, 145, 0.3); //используется в проекте
  --shadow-dark-color: rgba(0, 0, 0, 0.37);
  --darken-hover: rgba(0, 0, 0, 0.025); // Используется в проекте
  --darken-hover-hex: #f8f8f8; // Используется в проекте; идентичен darken-hover, но без прозрачности
  --lynch: #667e90;
  --cloud-burst: #323d4e;
  --base-white: #ffffff; // Используется в проекте
  --base-input-border: #c4c4c4;
  --base-input-text: #647d91;
  --border-color: #758ca4;
  --text-primary: #505050; // Используется в проекте
  --text-secondary: #bababa; //Используется в проекте
  --text-action: #ffffff;
  --text-dark: #505050; // Используется в проекте
  --text-bg-active: #a39159; // Используется в проекте
  --effects-active: #126a95;
  --header-title: #505050;
  --header-text: #505050;
  --success-main: #42985f;
  --info-main: #fac036;
  --warning-main: #a52020;
  --critical-main: #7a1818;
  --black-main: #000000;
  --chart-blue: #223f99;
  --chart-lightGrey: #a2b2c8;
  --chart-red: #d63d3d;
  --chart-lightGreen: #00ee69;
  --chart-deepBlue: #111a51;
  --chart-grey: #697c8f;

  --rf-canvas-back: #eeeeee; //Используется в проекте
  --rf-node-back: #fff; //Используется в проекте
  --rf-shadow: #607d8b1c; //Используется в проекте
  --rf-highlighting-border-color: #607d8b; //Используется в проекте
  --rf-button-primary: #90caf9; //Используется в проекте
  --rf-button-critical: #ef9a9a; //Используется в проекте
  --rf-button-primary-hover: #64b5f6; //Используется в проекте
  --rf-button-critical-hover: #e57373; //Используется в проекте
  --node_title-secondary: #888888;

  --generic-transition-dur: 0.35s;
  --generic-transition-func: ease-in-out;

  --mini-map-mask-color: rgba(183, 183, 183, 0.694); //Используется в проекте
  /*
    * paddings for page contents
    * also used for appbar to nicely symmetrically align it with home page content
   */
  --page-content-padding-left: 1.75rem;
  --page-content-padding-right: 1.75rem;
}

.content_layout {
  box-shadow: var(--shadow-primary-color) 10px 20px 40px 0;
  // border: 1px solid #9f9fa0;
  border-radius: 5px;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 100px;
}

*::-webkit-scrollbar-thumb {
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: content-box;
  background-color: rgb(179 170 170 / 45%);

  &:hover {
    background: rgb(174 165 165 / 45%);
  }
}

@-moz-document url-prefix() {
  .scroller {
    scrollbar-width: thin;
    scrollbar-color: var(--default-dark-grey);
    cursor: pointer;
  }
}