/* FONTS 
	font-family: 'gilroythin';
	font-family: 'gilroylight';
	font-family: 'gilroyregular';
	font-family: 'gilroybold';
	font-family: 'gilroyextrabold';
*/

@font-face {
    font-family: 'gilroylight';
    src: url('fonts/gilroy-light-webfont.woff2') format('woff2'),
         url('fonts/gilroy-light-webfont.woff') format('woff'),
         url('fonts/gilroy-light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gilroyextrabold';
    src: url('fonts/gilroy-extrabold-webfont.woff2') format('woff2'),
         url('fonts/gilroy-extrabold-webfont.woff') format('woff'),
         url('fonts/gilroy-extrabold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gilroybold';
    src: url('fonts/gilroy-bold-webfont.woff2') format('woff2'),
         url('fonts/gilroy-bold-webfont.woff') format('woff'),
         url('fonts/gilroy-bold-webfont.ttf') format('truetype'),
         url('fonts/gilroy-bold-webfont.svg#gilroybold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gilroy';
    src: url('fonts/gilroy-regular-webfont.woff2') format('woff2'),
         url('fonts/gilroy-regular-webfont.woff') format('woff'),
         url('fonts/gilroy-regular-webfont.ttf') format('truetype'),
         url('fonts/gilroy-regular-webfont.svg#gilroyregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gilroythin';
    src: url('fonts/gilroy-thin-webfont.woff2') format('woff2'),
         url('fonts/gilroy-thin-webfont.woff') format('woff'),
         url('fonts/gilroy-thin-webfont.ttf') format('truetype'),
         url('fonts/gilroy-thin-webfont.svg#gilroythin') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* VARIABLES */

:root {
  --default-font: gilroy;
  --default-font-size: 14px;
  --default-input-font-size: 12px;

  --col-primary: #000;
  --col-primary-rgb: 0,0,0;

  --col-accent: #000;
  --col-accent-rgb: 0, 0, 0;

  --col-text: #000;
  --col-input: #000;
  --col-placeholder: #000;
  --col-input-bg: #fff;

  --col-button: #fff;
  --col-button-rgb: 255, 255, 255;

  --col-link: #000;
  --col-link-rgb: 0,0,0;

  --col-link-hover: #000000;
  --col-link-hover-rgb: 0, 0, 0;

  --col-error: #ff6633;
  --col-error-rgb: 255, 51, 0;

  --col-attention: #ff6633;
  --col-attention-rgb: 255, 51, 0;

  --col-warning: #f5b00e;
  --col-warning-rgb: 245, 176, 14;

  --col-missing: #ff6633;
  --col-missing-rgb: 255, 51, 0;

  --col-burger: #000;

  --col-border: #707070;
  --col-border-rgb: 112, 112, 112;

  --dim-site-width: 4000px;
  --dim-default-space: 50px;
  --dim-input-height: 32px;

  --grid-spacing: 40px;
  --grid-spacing-neg: -40px;
  --grid-spacing-2x: 80px;
  --grid-margin: 40px;
  --grid-margin-neg: -40px;


	--col-bg: #000000;
	--col-fg: #ffffff;
	--col-txt: #000000;

  --vh: 1vh;
}

/* theme */

body { font-weight: normal;}
html.overlay-active, html.overlay-active body { max-height: 100vh; overflow: hidden;}

/*CORE HTML*/

h1, h2, h3, h4, h5, h6 { font-weight: normal;}
h2 { font-size: 28px; font-family: 'gilroythin'; margin-bottom: 20px;}
h3 { font-size: 20px; font-family: 'gilroy';  margin-bottom: 10px}
p { font-size: 18px; margin-bottom: 20px}

/*CONTAINERS*/

grid { display: flex; gap: 20px; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; padding: 20px;}
column { display: flex; flex-grow: 1; gap: 20px; flex-direction: column; }
column.x2 { flex-grow: 2}
column.x3 { flex-grow: 3}
widget { display: flex; width: 100%; min-height: 100px; justify-content: space-between; align-items: stretch; flex-direction: column; gap: 0}
whead { display: block; width: 100%; background: var(--col-bg); color: var(--col-fg); text-align: left; font-size: 16px; font-family: 'gilroylight'; padding: 10px 20px; flex-grow: 0;}
wbody { display: block; width: 100%; color: var(--col-txt); padding: 20px; text-align: left;  font-size: 16px; border: 1px solid var(--col-bg); flex-basis: auto; flex-grow: 1;}

div.info {display: block; width: 100%; margin-bottom: 20px;} 
div.info:last-child {margin-bottom: 0px;} 
row {display:flex; gap: 0;  justify-content: space-between; align-items: flex-start; align-content: center; padding: 5px 0; border-bottom: 1px solid #000} 
row:last-child {border-bottom: 0px} 
cell {display:block; padding: 5px 0; flex-grow: 1} 

div.info-2-1 cell:first-child {width: 150px; font-family: 'gilroybold';flex-grow: 0} 
div.info-2-1 cell:last-child {text-align: right;} 

div.info-2-2 cell:first-child { } 
div.info-2-2 cell:last-child {text-align: right; width: 150px; flex-grow: 0}

/*BUTTONS*/
a.btn { line-height: 32px; color: #000; font-size: 10px; font-weight: 400;; text-transform: uppercase; padding: 0 30px; border: 1px solid #000; font-family: gilroy; text-transform: uppercase;}
buttons { display: flex; gap: 20px; margin-top: 20px}

/*HEADER AND NAV*/
header { position: relative; display: block; width: 100%; background-color: var(--col-bg); }
header div.logo { display: block; width: 200px; position: absolute; top: 0; left: 60px; height: 60px;}
header div.burger { display: block; width: 60px; height: 60px; position: absolute; top: 0; left: 0}
header nav { display: block; text-align: left; width: 100%; padding-right: 20px; padding-left: 20px}
header nav > ul { display: flex; gap: 50px; justify-content: center; width: 100%;}
header nav > ul > li { display: block; }
header nav > ul > li > a { color: var(--col-fg); text-align: right; font-size: 16px; font-family: 'gilroybold'; line-height: 60px;}
header div.tools { display: flex; width: 100%; justify-content: space-between; height: 60px;background-color: #fff; border-bottom: 1px solid var(--col-bg);} 
header div.tools > div { display: block; }
header div.tools > div.quick-actions { display: flex; justify-content: flex-start; gap: 30px; padding-left: 20px}
header div.tools > div.quick-actions a { color: var(--col-txt); text-align: left; font-size: 16px; font-family: 'gilroybold'; line-height: 60px;}
header div.tools > div.switch-unit { width: 250px; padding: 10px 20px; height: 60px; }
header .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; font-size: 16px; text-align: right; padding-right: 40px}
header .select2-container--default .select2-selection--single .select2-selection__arrow { width: 30px; height: 100%; background-size: 18px 9px;}
header .select2-container--default .select2-selection--single .select2-selection__arrow:hover {    background-size: 18px 9px; }
header .select2-container--default .select2-selection--single { border: 0px; text-align: right;}


/*ELEMENTS*/
div.announcement { display: block; width: 100%; margin: 0 auto 50px; padding: 0px 0 50px; border-bottom: 1px dotted #cccc}
div.announcement:last-child { margin-bottom: 0px; border: 0; padding: 0}

div.icons { display: flex; flex-wrap: wrap; gap: 100px; }
div.icons a { display: block; font-size: 72px; text-align: center;}
div.icons a span { display: block; font-size: 16px; font-family: 'gilroybold'; margin-top: 10px;}



div.ui-datepicker-header { display: flex; gap: 20px}
div.ui-datepicker-title { display: flex; gap: 20px}
@media only screen and (max-width: 1280px) {

}