:root {

/* ==================================================== */
/* =====================  TEXT  ======================= */
/* ==================================================== */

  --font-color-common: #212121; 
  --font-color-header_1: white; 
  --font-color-header_2: white; /*#212121; */
  --font-color-inactive_1: #80808070;
  
  --font-family-common: 'segoe ui', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-size-common: 12px;
  --font-size-small: 10px;

  --font-family-header: 'century gothic';
  --font-size-header: 14px;
  --font-weight-header: 700;
  
/* ==================================================== */
/* =====================  BORDER  ===================== */
/* ==================================================== */

  --border-common-thickness: 1px; /* 0.1px; */
  --border-common-thickness-minus: -1px;
  --border-common-radius: 3px;
  
  --border-common-color: #888888; /* #515c6b; */ /*#666666 /*60% black*/ ;  /*#CCCCCC /*light grey*/; /*#00000040; /*#0000000d; /*#d5dce3;*/
  --border-common-color_2: #d5dce3;
  --border-input-color: rgba(0, 0, 0, 0.1); /* old-windows = rgba(169 177 184 1)  */
  
  --border-gradient_1: linear-gradient(to bottom, rgb(248, 249, 250) 2%, #515c6b 5%, #515c6b 95%, rgb(248, 249, 250) 98%) 1 100%;
  --border-gradient_2: linear-gradient(to bottom, #515c6b 2%, rgb(248, 249, 250) 5%, rgb(248, 249, 250) 95%, #515c6b 98%) 1 100%;
  --border-gradient_3: linear-gradient(to bottom, rgb(248, 249, 250) 0%, rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.1) 89%, rgb(248, 249, 250) 98%) 1 100%;
  --border-gradient_4: linear-gradient(to bottom, var(--background-main) 15%, var(--border-tab-color) 35%, var(--border-tab-color) 70%, var(--background-main) 90%) 1 100%;
  --border-gradient_5: linear-gradient(to left, var(--background-main) 15%, var(--border-tab-color) 35%, var(--border-tab-color) 70%, var(--background-main) 90%) 1 100%; 

  --border-tab-color: rgba(0, 0, 0, 0.2); 
  --border-tab-color-alter: white; 

  --border-container-color: rgba(0, 0, 0, 0.2); 

  --border-option-active: #99d1ff;

/* ==================================================== */
/* ==================  BACK-GROUND  =================== */
/* ==================================================== */

  --background-main: rgb(248, 249, 250);   /* old-windows = rgb(238 238 238)  */
  --background-header: #515c6b;  /* #648498 '#515c6b'; //very good dark metal grey
                            /* '#c6d6e0fc'; too bright  */
                            /* #464c50e6 - grey  */
  --background-header-aux: #515c6b; /* #535c6a /* #515c6b42; /*#515c6b; /*white;*/
  --background-light: #E7E9EC; /*'#5ea5c0'; /* #f1f1f1 */
  
  --background--limit-cell: #e5f3ff80;

  --background-input: white;
  --background-checkbox: #11a779; /* #82898b; - grey */
  --background-checkbox_2: #11a779; /* #06a906; - green */

  --background-tab-button: white;

  --background-calender-names: #e5ecf2;

  --background-tooltip: #ffff45; /* #fdfd8b;*/

/* ==================================================== */
/* ================  HOVER BACK-GROUND  =============== */
/* ==================================================== */

  --hover-background-row: #e5f3ff;
  --hover-background-cell: #e5f3ff;
  --hover-background-cell_2: #3e8ad769;
  
  --hover-element: #e5f3ff;   /* '#cce8ff'; */
  --hover-tab-button: #e5f3ff;   /* '#cce8ff'; */

/* ==================================================== */
/* ================  PADDING & MARGIN  ================ */
/* ==================================================== */
  
  --padding-common: 4px;
  --padding-common-half: 2px;
  --padding-common-sides: 6px;
  --padding-common-bottom: 0px; 

  --padding-input-top: 1px;
  --padding-input-bottom: 2px;

  --padding-label-top: 3px;

  --padding-header-sides: 8px;

  --padding-tab-top: 5px;
  --padding-tab-bottom: 5px;
  --padding-tab-vert: 10px;
  --padding-tab-sides: 16px;
  --padding-tab-sides-inactive: calc(var(--padding-tab-sides) + var(--border-common-thickness));


  --margin-common: 4px;
  --margin-common-right: 5px;
  --margin-common-sides: 6px; 
  --margin-common-bottom: 8px;  

  --margin-input-bottom: 2px;
  --margin-checkbox-sides: 2px;

  --margin-text-left: 6px;
  --margin-text-right: 6px;

  --gap-columns-common: 6px;
  --gap-rows-common: 4px;

/* ==================================================== */
/* =================  SIZES & WIDTHS  ================= */
/* ==================================================== */

  --size-currency: 27px; 
  --size-status: 100px; 
  --size-wage: 37px; 
  --size-uma-ref: 40px; 
  --size-wage-type: 45px;
  --size-date: 61px;
  --size-number-field: 15px;

 /* ALT = +6px */
  --size-alt-currency: calc(var(--size-currency) + var(--padding-common-sides)*2 + 3px); 
  --size-alt-status: calc(var(--size-status) + var(--padding-common-sides)*2 + 3px); 
  --size-alt-wage: calc(var(--size-wage) + var(--padding-common-sides)*2 + 1px); 
  --size-alt-uma-ref: calc(var(--size-wage) + var(--padding-common-sides)*2 + 1px); 
  --size-alt-wage-type: calc(var(--size-uma-ref) + var(--padding-common-sides)*2 + 1px); 
  --size-alt-date: calc(var(--size-date) + var(--padding-common-sides)*2 + 1px);
  --size-alt-number-field: calc(var(--size-number-field) + var(--padding-common-sides)*2 + 1px);
 
 
  --size-20: 20px;
  --size-27: 27px; /* currency */
  --size-32: 32px;
  --size-37: 37px; /* -wage */
  --size-40: 40px; /* uma-ref */
  --size-45: 45px; /* wage-type */
  --size-58: 58px;
  --size-66: 66px;
  --size-75: 75px;
  --size-95: 95px;
  --size-132: 132px;
  --size-170: 170px;
  --size-292: 292px;

  --input-tail-width: 15px;
  --input-tail-outer-width: 21px;

  --calendar-cell: 25px;


  --min-height-input: 16px;

/* ==================================================== */
/* ================  TOGGLE DIMENSIONS  =============== */
/* ==================================================== */

  --toggle-width: 30px;
  --toggle-half-height: 8px;
  --toggle-quarter-gap: 1px;
  --toggle-half-gap: calc( var(--toggle-quarter-gap) + var(--border-common-thickness));
  --toggle-slider-hight: calc( calc(var(--toggle-half-height) * 2) - calc(var(--toggle-half-gap) * 2));

/* ==================================================== */
/* ================    MINIMAL SIZES    =============== */
/* ==================================================== */

  --page_orders-min-col-1: 440px;
  --page_orders-min-col-2: 510px;
  --page_orders-min-col-3: 480px;
  --page_orders-min-col-4: 480px;

  --page_personnel-min-col-1: 440px;
  --page_personnel-min-col-2: 480px;
  --page_personnel-min-col-3: 480px;
  --page_personnel-min-col-4: 480px;

}


#orders_column_1{ min-width: var(--page_orders-min-col-1); }
#orders_column_2{ min-width: var(--page_orders-min-col-2); }
#orders_column_3{ min-width: var(--page_orders-min-col-3); }
#orders_column_4{ min-width: var(--page_orders-min-col-4); }

#personnel_column_1{ min-width: var(--page_personnel-min-col-1); }
#personnel_column_2{ min-width: var(--page_personnel-min-col-2); }
#personnel_column_3{ min-width: var(--page_personnel-min-col-3); }
#personnel_column_4{ min-width: var(--page_personnel-min-col-4); }