:root {
  color-scheme: light dark;
  --scheme-base-light-rgb: 250, 250, 250;
  --scheme-base-dark-rgb: 25, 25, 25;
  --scheme-contrast-color-rgb: var(--scheme-base-dark-rgb);
  --scheme-background-color-rgb: var(--scheme-base-light-rgb);
  /*calculated*/
  --theme-text-color-rgb: var(--scheme-contrast-color-rgb);
  --theme-text-color: rgb(var(--theme-text-color-rgb));
  --theme-body-background-rgb: var(--scheme-background-color-rgb);
  --theme-body-background: rgb(var(--theme-body-background-rgb));
  --theme-body-background-alpha: rgba(var(--theme-body-background-rgb), .8);
  --theme-secondary-background-color-rgba: var(--scheme-contrast-color-rgb), 0.1;
  --theme-secondary-background-color: rgba(var(--scheme-contrast-color-rgb), 0.1);
  /**/

  --theme-overlay-background: rgba(var(--theme-body-background-rgb), 0.75);
  --theme-overlay-border: 1px solid rgba(var(--scheme-contrast-color-rgb), 0.25);
  --theme-overlay-backdrop-filter: blur(1rem);
  --theme-box-shadow-color-rgb: 0, 0, 0;
  --theme-box-shadow-color: rgb(var(--theme-box-shadow-color-rgb));
  --theme-box-shadow: 0px 1px 0.25rem rgba(var(--theme-box-shadow-color-rgb), 0.25);
  --theme-font-family: "Segoe UI", Tahoma, Verdana, Arial, Sans-serif;
  --theme-font-size: 1rem;
  --theme-main-color-rgb: 69, 98, 114;
  --theme-main-color: rgb(var(--theme-main-color-rgb));
  --theme-main-highlight-color-rgb: 228, 173, 52;
  --theme-main-highlight-color: rgb(var(--theme-main-highlight-color-rgb));
  --theme-main-background-color-rgb: 189, 210, 221;
  --theme-main-background-color: rgba(var(--theme-main-background-color-rgb),1);
  --theme-text-color-secondary: #1d1d1d;
  --theme-text-color-tertiary: #505050;
  --theme-scrollbar-color: rgba(var(--theme-secondary-background-color-rgba));
  --theme-main-button-color-rgb: var(--theme-main-color-rgb);
  --theme-main-button-color: rgb(var(--theme-main-button-color-rgb));
  --theme-main-default-background-color: rgb(var(--theme-main-background-color-rgb));
  --theme-color: rgb(var(--theme-main-color-rgb));
  --theme-color-rgb: var(--theme-main-color-rgb);
  --theme-color-secondary: #666;
  --theme-color-secondary-rgb: 102, 102, 102;
  --theme-button: #333;
  --theme-border-radius: .25rem;
  --theme-input-border: transparent;
  --theme-input-border-bottom: #d9d9d9;
  --theme-input-required-border: #009900;
  --theme-input-border-solid: #d9d9d9;
  --theme-input-background: #fff;
  --theme-header-background-color-rgb: var(--theme-body-background-rgb);
  --theme-header-background-color: rgb(var(--theme-header-background-color-rgb));
  --theme-header-button-color-rgb: var(--theme-main-color-rgb);
  --theme-header-button-color: rgb(var(--theme-header-button-color-rgb));
  --theme-controls-label-color: #999;
  --theme-controls-placeholder-color: #b7b7b7;
  --theme-background-primary: transparent;
  --theme-background-secondary-rgb: 245, 245, 245;
  --theme-background-secondary: rgb(var(--theme-background-secondary-rgb));
  --theme-background-tertiary-rgb: 251, 251, 251;
  --theme-background-tertiary: rgb(var(--theme-background-tertiary-rgb));
}

.TelerikModalOverlay {
  background-color: rgb(170, 170, 170) !important;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --scheme-contrast-color-rgb: var(--scheme-base-light-rgb);
    --scheme-background-color-rgb: var(--scheme-base-dark-rgb);
    --theme-text-color-rgb: var(--scheme-contrast-color-rgb);
    --theme-text-color: rgb(var(--theme-text-color-rgb));
    --theme-body-background-rgb: var(--scheme-background-color-rgb);
    --theme-body-background: rgb(var(--theme-body-background-rgb));
    --theme-body-background-alpha: rgba(var(--theme-body-background-rgb), .8);
    --theme-main-background-color-rgb: 189, 210, 221;
    --theme-main-background-color: rgba(var(--theme-main-background-color-rgb),0.5);
    --theme-secondary-background-color-rgba: var(--scheme-contrast-color-rgb), 0.2;
    --theme-secondary-background-color: rgba(var(--scheme-contrast-color-rgb), 0.2);
    --theme-main-color-rgb: 220, 220, 220 !important;
    --theme-main-color: rgb(var(--theme-main-color-rgb));
  }

  .TelerikModalOverlay {
    background-color: rgb(40, 40, 40) !important;
  }
}

.light {
  color-scheme: light !important;
}

.dark {
  color-scheme: dark !important;
}