:root {

  --white: #fff;
  --black: #000;
  --blue-to-gray: #040059;
  --app-background: #ffffff;
  --text-color: #707070;
  --title-color: #040059;
  --alternate-text-color: #A2A2A2;
  --inactive-text: #cccccc;

  --main-color: #040059;
  --secondary-color: #1A73E8;
  --secondary-color-text: var(--secondary-color); //used in some texts that have the secondary color as light mode but different dark mode color
  --tooltip-color: #DFEAF7;

  --error-color: #EE6969;
  --inactive-color: #EFEFEF;
  --attention-color: #E3AC16;
  --success-color: #2BC48A;

  --list-border: #D9D9D9;
  --list-hover: #f5f5f5;
  --list-shadow: #00000029;
  --main-box-shadow: #00000029;
  --dropdown-color: white;

  --generic-block-border: #d0e4ff; //used in most blocks with block background
  --generic-block-border-hover: #040059;

  --form-background: #F3F8FC; //used in many blocks-sections like form section etc.
  --quick-access-background: #F3F8FC; //used in quick access and service header

  --white-box-background: white;
  --grayish-box-background: #f8f8f8;

  --rolebox-background: #E8F2FB;

  --gray-border: #ccc;

  --overlay-bg:rgb(12, 52, 61, 0.3);
  --yellowish: #f7df94;


  --background-color-status-completed: #cccccc;
  --background-color-status-critical: #EE6969;
  --background-color-status-inactive: #404E4D;
  --background-color-status-warning: #E3AC16;
  --background-color-status-success: #2BC48A;
  --background-color-status-pending: #1A73E8;
  --background-color-status-error: #0C343D;
  --background-success-completed: linear-gradient(158deg, #cccccc 50%, #2BC48A 50%);


  --background-disabled: #40474F;
  --text-disabled: #20262E;

  //charts
  --line: #1A73E8;
  --marks-bg: #ffffff;
  --marks-color: #040059;
  --ratebox-border: #E1E1E1;
  --alt-line: #040059;

  --category-net-support: #A9ADB8;
  --category-support: #0dc8c2;
  --category-announcements: #e3ac16;
  --category-personal: #13865C;
  --category-service: #56B798;
  --category-dpass: #1a73e8;
  --category-anakoinosi: #c81d61;
  --category-service-is-down: #4a6d7c;

  //SVG filter colors
  --svg-default: inherit;
  --svg-main-color: brightness(0) saturate(100%) invert(18%) sepia(23%) saturate(7452%) hue-rotate(237deg) brightness(56%) contrast(132%);
  --svg-inactive: brightness(0) saturate(100%) invert(58%) sepia(84%) saturate(0%) hue-rotate(152deg) brightness(111%) contrast(113%);
  --svg-white: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(109deg) brightness(102%) contrast(104%);
  --svg-to-dark-gray: brightness(0) saturate(100%) invert(7%) sepia(66%) saturate(5604%) hue-rotate(240deg) brightness(78%) contrast(118%);
}

:root[data-theme="dark"] {

  --white: #ccc;
  --black: #ccc;
  --blue-to-gray: #20262E;
  --white-to-gray: #ccc;

  --app-background: #2F363E;
  --main-color: #2F363E;
  --secondary-color: #20262E;
  --secondary-color-text: var(--white);
  // --secondary-color: #0055AB;


  //--dropdown-color: #2F363E;
  --dropdown-color: #40474F;

  --text-color: #ccc;
  --title-color: #CCCCCC;
  //--inactive-text: transparent;

  --form-background: #40474F;
  --quick-access-background: #20262E; //used in many blocks-sections like form section etc.

  --tooltip-color: #DFEAF7;

  --white-box-background: #40474F;
  --grayish-box-background: #40474F;
  --rolebox-background: #20262E;
  --attention-color: #0055AB;
  --inactive-color: #20262E; //not sure if correct
  --success-color: #61C765;
  --error-color: #EE9C86;

  --generic-block-border: transparent;
  --generic-block-border-hover: #CCCCCC;
  --gray-border: #434552;

  --overlay-bg:rgba(0, 0, 0, 0.5);

  --yellowish: #d6bf73;

  --list-border: #2F363E;
  --list-hover: #40474F;
  --list-shadow: #00000029;
  --main-box-shadow: #00000029;
  --background-color-status-completed: #20262E;
  --background-color-status-critical: #20262E;
  --background-color-status-inactive: #20262E;
  --background-color-status-warning: #20262E;
  --background-color-status-success: #20262E;
  --background-color-status-pending: #20262E;
  --background-color-status-error: #20262E;
  --background-success-completed: #20262E;

  --background-disabled: #40474F;
  --text-disabled: #20262E;

  //charts
  --line: #cccccc;
  --marks-bg: #ffffff;
  --marks-color: #040059;
  --ratebox-border: #20262E;
  --alt-line: #cccccc;

  --category-net-support: #A9ADB8;
  --category-support: #0dc8c2;
  --category-announcements: #e3ac16;
  --category-personal: #13865C;
  --category-service: #56B798;
  --category-dpass: #1a73e8;
  --category-anakoinosi: #c81d61;
  --category-service-is-down: #4a6d7c;

  //--svg-default: brightness(0) invert(1);
  --svg-default: brightness(0) saturate(100%) invert(91%) sepia(0%) saturate(105%) hue-rotate(142deg) brightness(96%) contrast(81%);
  --svg-main-color: brightness(0) invert(1);
  --svg-to-dark-gray: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(2619%) hue-rotate(175deg) brightness(97%) contrast(85%);
}


// font-family
$titleFont: gill-sans-nova, sans-serif;
$textFont: gill-sans-nova, sans-serif;
$font-family: "Roboto Flex", sans-serif;


//LAYOUT VARS
$sidebarWidth: 91px;
$quickAccessWidth: 307px;
$quickAccessClosedWidth: 24px;
$mixedWidth: $sidebarWidth + $quickAccessWidth;
$mixedClosedWidth: $sidebarWidth + $quickAccessClosedWidth;
$alternative-bg-color: #B6C2C4;


$paddingClosed: 2vw;
$paddingOpen: 2vw;

//FONT-SIZE
//BASE FONT SIZE IS 10PX
$text-size: 2rem;
$subtext-size: 1.6rem;
$input-size: 1.6rem;
$info-size: 1.4rem;
$index-large: 1.3rem;
$table-size: 1.4rem;
$btn-txt-size: 1.5rem;
$copyright-size: 1.2rem;
$index-size: 1.2rem;
$title: 1.8rem;

$thin: 100;
$extra-light: 200;
$light: 300;
$regular: 400;
$medium: 500;
$semi-bold: 600;
$bold: 700;
$extra-bold: 800;
$italic: italic;


//COLORS
$white: var(--white);
$black: var(--black);

$blue-to-gray: var(--blue-to-gray);
$app-background: var(--app-background);
$main-color: var(--main-color);
$secondary-color: var(--secondary-color);
$secondary-color-text: var(--secondary-color-text);

$form-background: var(--form-background);
$quick-access-background: var(--quick-access-background);

$white-box-background: var(--white-box-background);
$grayish-box-background: var(--grayish-box-background);
$rolebox-background: var(--rolebox-background);
$generic-block-border: var(--generic-block-border);
$generic-block-border-hover: var(--generic-block-border-hover);
$gray-border: var(--gray-border);
$yellowish: var(--yellowish);
$attention-color: var(--attention-color);
$inactive-color: var(--inactive-color);
$success-color: var(--success-color);
$error-color: var(--error-color);

$tooltip-color: var(--tooltip-color);

$list-border: var(--list-border);
$list-hover: var(--list-hover);
$main-box-shadow: var(--main-box-shadow);

$overlay-bg:var(--overlay-bg);

//NOTIFICATIONS CATEGORIES
$category-support: #0dc8c2;
$category-net-support: #A9ADB8;
$category-announcements: #e3ac16;
$category-personal: #13865C;
$category-service: #56B798;
$category-dpass: #1a73e8;
$category-anakoinosi: #c81d61;
$category-service-is-down: #4a6d7c;


$input-border: #cccccc;

$dropdown-color: var(--dropdown-color);

$scrollbar-track: #EFF3F9;
$orange-square: #f5bd63;


//TEXT COLOR
$text-color: var(--text-color);
$alternate-text-color: var(--alternate-text-color);
$inactive-text: var(--inactive-text); //not sure if correct
$title-color: var(--title-color);
$error-text: var(--error-color);


// COLORS ΕΝ ΘΥΜΑΜΑΙ ΓΙΑΤΙ ?
//simba... thimisou...

$old: #E1E8F2;


//STATUSES FOR FILTERS / LISTS
$status-pending: #1A73E8;
$status-success: #2BC48A;
$status-completed: #cccccc;
$status-inactive: #404E4D;
$status-error: #0C343D;
$status-critical: #EE6969;
$status-warning: #E3AC16;


//SVG FILTER COLORS
$svg-default: var(--svg-default);
$svg-main-color: brightness(0) saturate(100%) invert(18%) sepia(23%) saturate(7452%) hue-rotate(237deg) brightness(56%) contrast(132%);
$svg-inactive: brightness(0) saturate(100%) invert(58%) sepia(84%) saturate(0%) hue-rotate(152deg) brightness(111%) contrast(113%);
$svg-white: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(109deg) brightness(102%) contrast(104%);
$svg-to-dark-gray: var(--svg-to-dark-gray);