/* start logic dark-light*/
:root {
  --ON_toggle: initial;
  --OFF_toggle: ;
}

body {
  --ms-LEFT-block-width: 208px;  
}
@media (min-width: 992px) {
  body {
    --ms-LEFT-block-width: calc(208px + (318 - 208) * ((100vw - 992px) / (1200 - 992)));
  }
}
@media (min-width: 1200px) {
  body {
    --ms-LEFT-block-width: 318px;
  }
}

body #content .left_block {width: 100% !important;}
body #content .right_block.wide_N,
body #content .right_block.wide_{width: 100% !important;}
@media (min-width: 992px){
  body #content .left_block {width: var(--ms-LEFT-block-width) !important;}
  body .side_RIGHT #content .right_block.wide_N,
  body .side_RIGHT #content .right_block.wide_{
      width: calc(100% - var(--ms-LEFT-block-width)) !important;
  }
  body .side_LEFT #content .right_block.wide_N,
  body .side_LEFT #content .right_block.wide_{
      width: calc(100% - var(--ms-LEFT-block-width) - 30px) !important;
  }
}

/* Light theme is on by default */
.m-theme-default,
.m-theme-light {
  --light: var(--ON_toggle);
  --dark: var(--OFF_toggle);
}

/* Dark theme is off by default */
.m-theme-dark {
  --light: var(--OFF_toggle);
  --dark: var(--ON_toggle);
}

body {
  --white_text_black: var(--light, #333) var(--dark, white);
  --white_text_black2: var(--light, #222) var(--dark, white);
  --white_text_black_reverse: var(--light, #fff) var(--dark, #333);
  --basic_text_black: var(--light, #555) var(--dark, #ccc);
  --light_basic_text_black: var(--light, #666) var(--dark, #ccc);

  --black_bg_black: var(--light, #fff) var(--dark, #1b1b1b);
  --darkerblack_bg_black: var(--light, #f8f8f8) var(--dark, #121212);
  --stroke_black: var(--light, #ececec) var(--dark, #3a3a3a);
  --stroke_black_hover: var(--light, #fff) var(--dark, #3a3a3a);
  --card_bg_black: var(--light, #fff) var(--dark, #232323);
  --card_bg_hover_black: var(--light, #fff) var(--dark, #2b2b2b);
  --arrows_bg_black: var(--light, #fff) var(--dark, #444);
  --line_bg_black: var(--light, #f2f2f2) var(--dark, #2b2b2b);

  --light_bg_black: var(--light, #fafafa) var(--dark, #1b1b1b);
  --light2_bg_black: var(--light, #fafafa) var(--dark, #232323);
  --gray_bg_black: var(--light, #ccc) var(--dark, #3a3a3a);
  --white_bg_ccc: var(--light, #fff) var(--dark, #ccc);

  --fill_dark_light: var(--light, #333) var(--dark, #fff);
  --fill_dark_light_ccc: var(--light, #333) var(--dark, #ccc);
  --fill_dark_light_hover: var(--light, var(--theme-base-color)) var(--dark, #ccc);
  --fill_dark_light_white_hover: var(--light, var(--theme-base-color)) var(--dark, #fff);

  --dark_light-wtheme-hue: var(--light, var(--theme-base-color-hue)) var(--dark, 0);
  --dark_light-wtheme-saturation: var(--light, var(--theme-base-color-saturation)) var(--dark, 0%);
  --dark_light-wtheme-lightness: var(--light, var(--theme-base-color-lightness)) var(--dark, 100%);
  --dark_light-hue: var(--light, 0) var(--dark, 0);
  --dark_light-saturation: var(--light, 0%) var(--dark, 0%);
  --dark_light-lightness: var(--light, 97%) var(--dark, 7%);

  --checkbox_dark_light: var(--light, #afafaf) var(--dark, #3a3a3a);
  --opacity_dark_light_hover: var(--light, var(--theme-base-opacity-color)) var(--dark, #3a3a3a);

  --dff_dark_light: var(--light, #fff) var(--dark, #121212);
}

/* If user prefers dark, then that's what they'll get */
@media (prefers-color-scheme: dark) {
  .m-theme-default {
    --light: var(--OFF_toggle);
    --dark: var(--ON_toggle);
  }
}
/* end logic*/