@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: -moz-scrollbars-none;
}

html {box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}


body {background-color: #999; color: black; font-size: 15px; font-family: 'Roboto', 'Arial', sans-serif;}



/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding: 10px;}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto;}
/*
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
*/
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */

::-webkit-scrollbar {
  width: 0px;
}

scrollbar {-moz-appearance: none !important;display: none !important;}

::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #ddd;
}
::-webkit-scrollbar-thumb:hover {
  background: #888;
}

:root {
    /*Constants*/
    --dark-grey: #454545; --middle-grey: #999; --light-grey: #f1f1f1;
    --base-blue: #0099CC;
    
    --dark-blue: #008dc1;
    --thin-blue: #cbf1ff;
    --green: green; --clear-green: #4caf50; --pale-green: #b7ffa9;
    --dark-red: #cb0000; --red: #e30000; --pale-red: #ff7171; --thin-red: #ffd0aa;
    
    --main-page-body-width: 1024px;
    --main-header-transition: all 0.35s ease;
    
}

h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px}
h1, h2, h3, h4, h5, h6 {color: #777; font-weight:700; margin:10px 0}

h1, h2, h3, h4 {
    line-height: 30px;
}

hr {border:0; border-top: 1px solid #ececec; margin:20px 0;}

a, a:link, a:active, a:visited {color: inherit; text-decoration: none; cursor: pointer;}
a:hover {color: orange; text-decoration: none;}


input[type="text"], input[type="date"], input[type="datetime"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="time"], input[type="url"], textarea, select {
	-webkit-transition: all 0.10s ease-in-out;
	-moz-transition: all 0.10s ease-in-out;
	-ms-transition: all 0.10s ease-in-out;
	-o-transition: all 0.10s ease-in-out;
	outline: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	background: #f2f2f2;
	border: 0px solid #ccc;/*ccc*/
	padding: 4px 10px 2px 10px;
    border-radius: 0px 5px 5px 5px;
    line-height: 30px;
}

textarea {
    padding: 8px 10px 8px 10px;
    line-height: 20px;
}

input[type="date"] {
    line-height: 20px;
}

input[type="date"], input[type="datetime"] {
    -webkit-appearance: none;
	padding: 8px 10px 6px 10px;
}

/*CHECKBOX*/
label > input[type="checkbox"] {
  display: none;
}

label > input[type="checkbox"] + *::before {
  content: " ";
  display: inline-block;
  vertical-align: bottom;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border-style: solid;
  border-width: 0.1rem;
  border-color: #0099cc;
  background: #fff;
  cursor: pointer;
  margin: 2px 4px 2px 4px;
}

label > input[type="checkbox"]:checked + *::before {
  content: "✓";
  font-size: 26px;
  padding: 6px 4px 0px 4px;
  color: white;
  text-align: center;
  vertical-align: middle;
  background: #4caf50;
  border-color: #4caf50;
}
label > input[type="checkbox"]:checked + * {
  color: green;
}



/*RADIO*/
.radio-toolbar input[type="radio"] {
  display: none;
}
.radio-toolbar label {
    display: inline-block;
    background-color: #efefef;
    padding: 9px 10px;
    color: #000;
    font-size: 15px;
    cursor: pointer;
    margin: 0px 5px 8px 0px;
    border-radius: 5px 5px 5px 5px;
    transition: var(--main-header-transition); 
}
.radio-toolbar input[type="radio"]:checked+label {
    background-color: #0099cc;
    color: #fff;
}
.radio-toolbar label:hover {background: #ddd; color: black;}




/*origineel
select {
    padding: 8px 10px 8px 5px; 
}
*/

/*To remove button from IE11*/ 
select::-ms-expand {
     display: none;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
/*  background: transparent;*/
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  padding: 4px 10px 2px 10px;
  line-height: 30px;
}


.select-small {
    font-size: 14px;
    padding: 6px 10px 6px 5px;
    height: 32px;
/*	border: 1px solid #f1f1f1;*/
/*    -moz-appearance: none;
    -webkit-appearance: none;*/
    color: #0099cc;
}


.select-small:hover {
    cursor: pointer;
    color: #000;
}

input[type="text"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="time"]:focus, input[type="tel"]:focus, input[type="password"]:focus, input[type="url"]:focus, /*textarea:focus,*/ select:focus {
/*	box-shadow: 0 0 5px var(--base-blue);
	border: 1px solid var(--base-blue);*/
}

input[type="submit"], input[type="button"], button, .button {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	/*width: 100%;*/
	padding: 7px 12px 7px 12px;
	background: var(--base-blue);
	border-style: none;
	color: white;
    font-weight: 700;
    font-size: 0.9em;
    border-radius: 5px;
    margin: 0px 5px 0px 0px;
    transition: var(--main-header-transition);
    cursor: pointer;
    height: 30px;
}

input[type="submit"] {
	background: var(--clear-green);
}

input[type="submit"]:hover, input[type="button"]:hover, button:hover, .button:hover {background: #ddd; color: black;}


input[type="checkbox"], input[type="radio"] {margin: 0px 0px 0px -8px;}

input[type="text"]:disabled {
    background: #efefef;
}


.button-small {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 3px 8px 3px 8px;
	background: var(--base-blue);
	border-style: none;
	color: white;
    font-weight: 700;
    font-size: 0.9em;
    border-radius: 5px;
    margin: 0px 5px 0px 0px;
    transition: var(--main-header-transition);    
    cursor: pointer;
}

.button-small:hover {
    background: #ddd; color: black;
}

.button-stripped {
	background: transparent;
	border-style: none;
	color: black;
    transition: var(--main-header-transition);
    cursor: pointer;
}

.button-stripped:hover {
    background: #f1f1f1;
}

.button-back {
    cursor: pointer;
    position: fixed;
    display: block;
    top: 100px;
    font-size: 1.8em;
	background: white;
    z-index: 12;
    padding: 15px 15px 15px 0px;
    color: var(--base-blue);
}    

.button-back:hover {
    color: #000;
}

.button-back-popup {
    cursor: pointer;
    padding: 0px 5px 0px 0px;
    color: var(--base-blue);
}    

.button-back-popup:hover {
    color: #000;
}

.button-in-row {
    cursor: pointer; margin: -3px 0px; padding: 3px 8px;
}

.page-body {

    width: 100%; 
    max-width: var(--main-page-body-width); 
    background-color: #fff;  
    color: black; 
    line-height: 1em; 
    overflow-x: hidden; 
    overflow-y: auto; 	
    border-radius: 5px;
    border: 1px solid #ddd; 
    scroll-behavior: smooth;
}    

.page-body.hide {
}

    .side-menu-left-background {
        opacity: 0.0; 
        background-color: black; 
        position: fixed; 
        top: 65px; 
        left: calc(50% - 820px); 
        width: 300px; 
        height: calc(100vh - 80px); 
        overflow-x: hidden; 
        overflow-y: auto; 
        border-radius: 5px;    
    }
    
    .side-menu-left-content {
        color: white; 
        position: fixed; 
        top: 65px; 
        left: calc(50% - 820px); 
        width: 300px; 
        height: calc(100vh - 80px); 
        overflow-x: hidden; 
        overflow-y: auto; 
        border-radius: 5px; 
        border: 0px solid #888; 
        padding: 15px; 
        text-align: right;"    
    }   
    
    .side-menu-left-header {
        font-family: 'Rubik', 'Arial', sans-serif;    
        font-size: 1.1em;
        color: #999;
        font-weight: bold;
        line-height: 30px;
        width: 100%;
        padding-right: 10px;
    }

    .side-menu-left-item {
        font-size: 0.9em;
        color: #ccc;
        font-weight: bold;
        line-height: 30px;
        transition: all 0.35s ease;
        width: 100%;
        padding-right: 10px;
        cursor: pointer;
    }

    .side-menu-left-item:hover {
        color: #9ad8ff;
    }

    .side-menu-right-background {
        opacity: 0.0; 
        background-color: black; 
        position: fixed; 
        top: 65px; 
        left: calc(50% + 520px); 
        width: 300px; 
        height: calc(100vh - 80px); 
        overflow-x: hidden; 
        overflow-y: auto; 
        border-radius: 5px;    
    }


.flex-search-50 {
    width: calc(100% - 60px);
    max-width: 250px;
}

.flex-search-100 {
    width: calc(100% - 100px);
    max-width: 250px;
}

.flex-search-150 {
    width: calc(100% - 130px);
    max-width: 250px;
}


.flex-search-50-nomax {
    width: calc(100% - 60px);
}

.flex-search-100-nomax {
    width: calc(100% - 100px);
}

.flex-search-150-nomax {
    width: calc(100% - 130px);
}
    
.color-white {color: #fff;}
.color-green {color: var(--green);}
.color-clear-green {color: var(--clear-green);}
.color-pale-green {color: var(--pale-green);}
.color-blue {color: var(--base-blue);}
.color-dark-blue {color: var(--dark-blue);}
.color-red {color: var(--red);}
.color-pale-red {color: var(--pale-red);}
.color-grey {color: #666;}
.color-light-grey {color: #aaa;}
.color-orange {color: orange;}

.border-blue {border-color: var(--base-blue) !important;}

/*.padding-auto {padding-top: auto; padding-bottom: auto;}*/

.background-green {background: var(--green);}
.background-clear-green {background: var(--clear-green);}
.background-red {background: var(--red);}
.background-pale-red {background: var(--pale-red);}
.background-blue {background: var(--base-blue);}
.background-grey {background: #999;}

.field-mandatory {background: #d7f4ff !important;}
.field-alert {background: #ffd0aa !important; }

.width-5-pc   {width:  5%;}
.width-10-pc  {width: 10%;}
.width-15-pc  {width: 15%;}
.width-20-pc  {width: 20%;}
.width-25-pc  {width: 25%;}
.width-30-pc  {width: 30%;}
.width-35-pc  {width: 35%;}
.width-40-pc  {width: 40%;}
.width-45-pc  {width: 45%;}
.width-50-pc  {width: 50%;}
.width-55-pc  {width: 55%;}
.width-60-pc  {width: 60%;}
.width-65-pc  {width: 65%;}
.width-70-pc  {width: 70%;}
.width-75-pc  {width: 75%;}
.width-80-pc  {width: 80%;}
.width-85-pc  {width: 85%;}
.width-90-pc  {width: 90%;}
.width-95-pc  {width: 95%;}
.width-100-pc {width:100%;}

.width-30-px  {width:  30px;}
.width-35-px  {width:  35px;}
.width-40-px  {width:  40px;}
.width-45-px  {width:  45px;}
.width-50-px  {width:  50px;}
.width-75-px  {width:  75px;}
.width-80-px  {width:  80px;}
.width-100-px {width: 100px;}
.width-105-px {width: 105px;}
.width-110-px {width: 110px;}
.width-115-px {width: 115px;}
.width-120-px {width: 120px;}
.width-125-px {width: 125px;}
.width-130-px {width: 130px;}
.width-135-px {width: 135px;}
.width-140-px {width: 140px;}
.width-145-px {width: 145px;}
.width-150-px {width: 150px;}
.width-155-px {width: 155px;}
.width-160-px {width: 160px;}
.width-165-px {width: 165px;}
.width-170-px {width: 170px;}
.width-175-px {width: 175px;}
.width-180-px {width: 180px;}
.width-185-px {width: 185px;}
.width-190-px {width: 190px;}
.width-195-px {width: 195px;}
.width-200-px {width: 200px;}
.width-250-px {width: 250px;}
.width-300-px {width: 300px;}


.text-align-left   {text-align: left;}
.text-align-center {text-align: center;}
.text-align-right  {text-align: right;}
.large {font-size: 1.4em}
.small {font-size: 0.8em}
.bold {font-weight: 700}
.italic {font-style: italic;}
.pointer {cursor: pointer;}
.no-wrap {white-space: nowrap;}
.wordwrap {word-wrap: break-word; overflow-wrap: break-word; word-break: break-all;}
.ptext {line-height: 1.4em;}

.vertical-align-top {vertical-align: top !important;}
.vertical-align-middle {vertical-align: middle !important;}
.vertical-align-bottom {vertical-align: bottom !important;}

.margin-top {margin-top: 6px !important;}
.margin-right {margin-right: 6px !important;}
.margin-bottom {margin-bottom: 6px !important;}
.margin-left {margin-left: 6px !important;}

.add-margin-top {margin-top: 20px !important;}
.add-margin-right {margin-right: 20px !important;}
.add-margin-bottom {margin-bottom: 20px !important;}
.add-margin-left  {margin-left: 20px !important;}

.padding-top {padding-top: 6px !important;}
.padding-right {padding-right: 6px !important;}
.padding-bottom {padding-bottom: 6px !important;}
.padding-left {padding-left: 6px !important;}


.add-padding-right {padding-right: 20px;}

/*.padding-auto {padding-top: auto; padding-bottom: auto;}*/


.no-pointer-events {pointer-events: none !important;}
.no-border {border: 0 !important;}
.display-none {display: none}
.display-table {display: table !important}
.display-inline-block {display: inline-block;}

/*DASHBORD*/
.button-special { 
    width: 100%; 
    max-width: 200px;
    height: 74px;
    text-align: center; 
    font-size: 13px; 
    background: #f0f0f0; 
    margin: 5px; 
    padding: 8px; 
    border-radius: 5px; 
    transition: all 0.35s ease;
}

.button-special:hover { 
    background: #eaeaea; 
}



.field-label {color: #0099cc; font-weight: 700; padding: 8px 0px 5px 0px; font-size: 15px; vertical-align: top;}

.field-label-extra-option {float: right; margin-top: -1px; padding: 0 15px; color: green; cursor: pointer; transition: all 0.35s ease;}
.field-label-extra-option:hover {color: black; }

.field-row {display: table; margin-bottom: 0px; padding: 4px 0px 0px 0px; }
.field-label, .field-data {display: inline-block; min-width: 100%;}

.field-data-text {display: inline-block; min-width: 100%; padding: 10px 10px 5px 0px; line-height: 1.2em; font-size: 15px; vertical-align: top; -ms-word-break: break-all;
     word-break: break-all; /* Non standard for webkit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}

.date-field {width: 130px;}



.table {display: table;}

.table-header {
    display: none; 
/*    background: white; */
/*    color: #0099cc;/*777*/ 
    margin-bottom: 0px; 
    border-bottom: 1px solid var(--base-blue); 
    padding: 8px 0px 6px 0px; 
    line-height: 24px;
}

.table-title-header {
    color: #0099cc; 
    display: inline-block; 
    min-width: 100%; 
    vertical-align: top; 
    font-weight: 700; 
    font-size: 15px; 
    padding: 0px 8px;
}

.table-title-row {
    color: #000; 
    display: inline-block; 
    min-width: 100%; 
    vertical-align: bottom; 
    font-weight: 700; 
    font-size: 14px; 
    padding: 10px 8px 0px 8px; 
    margin-bottom: 0px;
/*    border-top: 1px solid #eee; */
}

.table-row {
    display: table; 
    margin-bottom: 0px; 
    border-bottom: 1px solid #eee; 
    padding: 0px 0px 0px 0px; 
    transition: all 0.35s ease;
    height: 32px; 
    font-size: 15px; 
/*    background: white;*/
}

.table-td {
    display: inline-block; 
    min-width: 100%; 
    vertical-align: top; 
    margin-bottom: 4px; 
    padding: 12px 8px 10px 8px;
    color: #111;
    line-height: 1.2em;
}

.table-rows-scroll {
    height: calc(100vh - 500px); 
    overflow-x: hidden; 
    overflow-y: auto; 
}

/*extra opmaak inhoud cel met div*/
.table-title-text {
    padding: 0px 0px 0px 0px;
    font-weight: bold;
    color: #0099cc;
}

.table-sub-text {
    padding: 4px 0px 0px 0px;
    font-size: 0.9em;
    color: #000;
    
}

/*.table-row-entry-line {display: table; background: #f1f1f1; margin-bottom: 0px; border-bottom: 1px solid #eee; padding: 8px 0px 8px 0px; transition: var(--main-header-transition);}*/

.table-row-add {display: none; background: #f1f1f1; margin-bottom: 0px; border-bottom: 1px solid #eee; padding: 8px 0px 8px 0px; transition: var(--main-header-transition);}
.table-row-clean {display: table; margin-bottom: 0px; padding: 0px; cursor: none;}
.table-row-quiet {display: table; margin-bottom: 0px; padding: 0px; border-bottom: 1px solid #eee;}

.table-row:hover {background: #eee}
/*.table-row-entry-line:hover, .table-row-add:hover {background: #e5e5e5}*/


.line-blue {width: 100%; border-bottom: 1px solid var(--base-blue); margin: 10px 0px}
.line-grey {width: 100%; border-bottom: 1px solid #aaa; margin: 10px 0px}


.link {cursor: pointer; transition: all 0.35s ease;}
.link:hover {color: var(--base-blue) !important; text-decoration: underline !important;}

.link2black {cursor: pointer; transition: all 0.35s ease;}
.link2black:hover {color: black !important;}


.nav-logout {display: none;}
.top-logout {display: block;}

.div-top {
    height: 45px; line-height: 45px; color: #fff; background: #222; font-size: 16px; padding-left: 15px
}

.div-breadcrumbs {
/*    height: 45px; 
    line-height: 45px; */
    color: #aaa; 
/*    background: #fff; */
    font-size: 14px; 
    font-weight: bold; 
    padding: 0px 0px; 
    margin: 10px 0px 0px 0px;
    text-align: right;
}

.div-breadcrumbs a {
    text-decoration: underline;
}

.div-breadcrumbs a:hover {
    color: #0099cc;
    transition: all 0.35s ease;
}

.div-page-title {
    color: #0099cc; 
    font-family: 'Rubik', 'Arial', sans-serif;    
    font-size: 24px; 
    line-height: 32px; 
    font-weight: 800; 
    padding: 10px 0px; 
    margin: 5px 0px 40px 0px; 
    border-bottom: 1px solid #fff; 
}

.div-modal-header-title {
    width: 100%;
    font-size: 15px; 
    font-weight: bold; 
    padding: 25px 0px; 
    color: #666; 
    text-align: left;
    line-height: 1.5em;
}

.div-page-header-small {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    line-height: 40px;
/*    background: #efefef;*/
    font-size: 22px;
    margin: 0px 0px 10px 0px;
}

.div-page-header-back {
    display: flex;
    width: 200px;
    align-items: center; 
    color: #000;
    cursor: pointer;
    transition: all 0.35s ease;
    height: 30px;
    line-height: 30px;
    font-size: 22px;
    vertical-align: middle;
    margin: -15px 0 0 -15px;
}

.div-page-header-back:hover {
    color: #0099cc;
}

.div-page-header-back-icon {
    margin: 0px 6px 0px 3px;
}

.div-page-header-back-text {
    font-size: 15px;
}



.div-page-header-subject-icon {
    color: orange;
    padding: 0px 0px 0px 0px;
    line-height: 40px;
}

.div-page-header-small-label {
    display: inline-block;
    color: #666;
    padding: 0px 0px 0px 0px;
    font-size: 15px;
    font-weight: bold;
}

.div-page-header-small-right {
    display: inline-block;
    color: #0099cc;
    min-width: 30px;
    padding: 0px 5px 0px 0px;
    transition: all 0.35s ease;
    cursor: pointer;
}

.div-page-header-small-right:hover {
    color: #000;
}


.div-page-button-header {
    width: 100%;
    height: 30px;
    text-align: right;
    margin: 0px 0px 10px 0px;
}

.div-page-button-footer {
    width: 100%;
    height: 30px;
    text-align: left;
    margin: 0px 0px 0px 0px;
    padding: 20px 0 0 0;
    border-top: 1px solid #ececec; 
}

.div-page-button-footer-modal {
    background: #ededed;
    padding: 0 30px 0 30px; 
    margin: 2px 0 1px 0;
    width: 100%; 
    text-align: left; 
    color: black;
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 50px;
    line-height: 50px;
    box-shadow: inset 0px 11px 8px -10px #CCC;
   
   
}

.tab-form {
    -moz-scrollbar-width: none; 
    scrollbar-width: none; 
    overflow: -moz-scrollbars-none; 
}

.noscrollbar {
    -moz-scrollbar-width: none; 
    scrollbar-width: none; 
    overflow: -moz-scrollbars-none; 
}



.title-icon {
    color: orange;
    margin-right: 10px;
}


.div-search {
    text-align: left;
    margin: 0px 0px 10px 0px;
}

.div-search span{
    line-height: 40px;
}


.search-go-icon {
    color: var(--base-blue);
    margin: 5px 10px 0px 5px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.35s ease;
}

.search-go-icon:hover {
    color: black;
}

.icon-after-input {
    cursor: pointer;
    font-size: 18px;
    margin: 5px 10px 0px 5px;
    transition: all 0.35s ease;
}

.icon-after-input:hover {
    color: black;
}


.clear-input-icon-active {
    color: #0099cc;
    cursor: pointer;
    transition: all 0.35s ease;
}

.clear-input-icon-active:hover {
    color: #000;
}


.div-year-navigation {
    text-align: center; 
    padding: 20px 0px 20px 0px; 
    font-size: 15px; 
    color: #000;
}


.div-list-navigation {
    text-align: center; 
    padding: 20px 0px 20px 0px; 
    font-size: 13px; 
    color: #aaa;
}

.div-list-navigation a:hover {
    color: black;
}


.div-table-navigation {
    
    margin: 0px; 
    width: 100%; 
    text-align: center; 
    color: black;
    position: absolute;
    left: 0px;
    bottom: 50px;
}

.table-navigation-button-wrapper {
    padding: 10px;
    margin: 0 -5px;
    cursor: pointer;
}

.page-menu-paragraph-title {
    color: #777; 
    font-weight:700; 
    margin:30px 0px 10px 0px;
    font-size:18px;
}





.button-top-right {
    float: right; color: orange; font-size: 14px; font-weight: bold; background: transparent; padding: 0px 15px;
}

.button-top-right:hover {
    color: #fff; background: #0099cc;
    cursor: pointer;
    transition: all 0.35s ease;
}

.div-alert-container {
    display: none;
    width: 100%; 
    height: calc(100vh); 
    background-color: rgba(0,0,0,0.4);
    position: absolute; 
    top: 0px; 
    left: 0px;
    z-index: 500;
}

.div-alert-small {
    display: block;
    position: fixed;
    top: 250px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 80%; 
    background-color: rgba(255, 255, 255, 1);
    /*rgba(255, 208, 170, 1);  /* rgba(241, 241, 241, 1);*/
    border: 1px solid #bbb;
    text-align: center; 
    padding: 25px; 
    margin-bottom: 10px;
    min-height: 50px;
    min-width: 200px;
    max-width: 400px;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 501;
    border-radius: 5px;

    animation-name: modal-container;
    animation-duration: 0.3s;    
    
}

.comment15 {
    line-height: 1.5em;
}


.div-alert-icon {
    color: orange; width: 100%; text-align: left; font-size: 20px; margin: -10px -10px 10px -10px;
}


.div-modal-container {
    display: none;
    width: 100%; 
    height: calc(100vh); 
    background-color: rgba(0,0,0,0.4);
    position: absolute; 
    top: 0px; 
    left: 0px; 
    
    animation-name: modal-container;
    animation-duration: 0.3s;    
}

@keyframes modal-container {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes modal-container {
    0% {
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes slideLeft {
    from {
        margin-left: 400px;
    }
    to {
        margin-left: 0px;    
    }
}

@-webkit-keyframes slideLeft {
    0% {
        margin-left: 400px;
    }
    100%{
        margin-left: 0px;    
    }
}

@keyframes slideRight {
    from {
        margin-left: -400px;
    }
    to {
        margin-left: 0px;    
    }
}

@-webkit-keyframes slideRight {
    0% {
        margin-left: -400px;
    }
    100%{
        margin-left: 0px;    
    }
}

.slideLeft {
    animation-name: slideLeft;
    animation-iteration-count: 1;
    transition-timing-function: cubic-bezier(0, 0, 0.9, 1.0);
    animation-duration: 0.5s;    
}

.slideRight {
    animation-name: slideRight;
    animation-iteration-count: 1;
    transition-timing-function: cubic-bezier(0, 0, 0.9, 1.0);
    animation-duration: 0.5s;    
}




.div-modal-small {
    display: block;
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 70%; 
    background-color: rgba(255, 255, 255, 1);
    /*rgba(255, 208, 170, 1);  /* rgba(241, 241, 241, 1);*/
    border: 1px solid #bbb;
    text-align: center; 
    padding: 25px; 
    margin-bottom: 10px;
    min-height: 50px;
    min-width: 200px;
    max-width: 400px;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/*    z-index: 100;*/
    border-radius: 5px;
}

.div-modal-medium {
    display: none;
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 90%; 
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #bbb;
    text-align: left; 
    padding: 30px 30px 30px 30px; 
    margin-bottom: 0px;
    min-height: 300px;
    min-width: 300px;
    max-width: 800px;
    height: calc(100vh - 170px); overflow-x: hidden; overflow-y: auto;    
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 100;
    border-radius: 5px;
    
    animation-name: modal-medium;
    animation-duration: 0.3s; 
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
}

    @keyframes modal-medium {
    from {
        opacity: 0;
        margin-top: 30px;
    }
    to {
        opacity: 1;
        margin-top: 0px;
    }
}

    @-webkit-keyframes modal-medium {
    from {
        opacity: 0;
        margin-top: 30px;
    }
    to {
        opacity: 1;
        margin-top: 0px;
    }
}    

.div-modal-medium-block {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 50%; 
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #bbb;
    text-align: left; 
    padding: 15px; 
    margin-bottom: 10px;
    min-height: 300px;
    min-width: 500px;
    max-width: 800px;
    height: calc(100vh - 140px); overflow-x: hidden; overflow-y: auto;    
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 100;
    border-radius: 5px;
}

.divscroll {
    height: calc(100vh - 250px); 
    overflow-x: hidden; 
    overflow-y: auto; 
    margin: 0; 
    padding: 0 0 0 0;
    -moz-scrollbar-width: none; 
    scrollbar-width: none; 
    overflow: -moz-scrollbars-none; 
}

.divscroll-medium {
    height: calc(100vh - 265px); 
    overflow-x: hidden; 
    overflow-y: auto; 
    margin: 0; 
    padding: 0 0 0 0;
    -moz-scrollbar-width: none; 
    scrollbar-width: none; 
    overflow: -moz-scrollbars-none; 
}



.modal-message {
    color: #333;
    font-size: 1em;
    font-weight: normal;
    margin: 0px 0px 25px 0px;
}

.close-button {
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    color: #008db5;
    top: -8px;
    right: -2px;    
    cursor: pointer;
    padding: 20px 20px 20px 20px;
    border-radius: 50px;
/*    transition: var(--main-header-transition);*/
}

.close-button:hover {
    color: #000;
}

.dropdown-container {
    position: relative;
}

.dropdown-list {
      display: none; 
      position: absolute; 
      margin-top: 2px;
      padding-bottom: 1px;
      background-color: #fff; 
      height: auto; 
      border: 1px solid #0099cc; 
/*      
      border-top: 1px solid #efefef; 
      border-right: 1px solid #efefef; 
      border-left: 1px solid #efefef; 
      border-radius: 0px;
*/      
/*      box-shadow: 0 0 5px orange;*/
      z-index: 150;
}

.dropdown-list-text {
    margin-bottom: 4px;
    font-size: 15px;
}

.dropdown-list-sub-text {
    margin-top: 2px;
    font-size: 13px;
    color: #555;
}

.dropdown-list-empty {
    text-align: center;
    color: #000;
    padding: 8px 0px;
    font-size: 14px;
    font-weight: normal;
    background-color: #ffd0aa; 
}


.div-bottom {
    position: absolute; bottom: 30px;
}




.common-grey-box {
    background-color: #f2f2f2; 
    width: 100%; 
    margin: 20px 20px 20px 0px; 
    padding: 10px 20px 10px 20px; 
    border-radius: 10px;
    /*border: 1px solid var(--base-blue);*/
}  

.common-bordered-box {
    width: 100%; 
    margin: 20px 20px 20px 0px; 
    padding: 10px 20px 10px 20px; 
    border-radius: 10px;
    border: 1px solid #eee
}  

.fieldset-light-grey {
    border-radius: 10px;
    border: 1px solid #eee
    
    
}

.top-app-name {display: inline-block;}

.span-mobile-only {display: none;}
.span-desktop-only {display: inline-block;}
.div-mobile-only {display: none;}
.div-desktop-only {display: block;}
.mobile-center {}


.slider {
    overflow-y: hidden;
    max-height: 0px;

    -webkit-transition-property: all;
    -webkit-transition-duration: .5s;
    -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

    -moz-transition-property: all;
    -moz-transition-duration: .5s;
    -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

    -ms-transition-property: all;
    -ms-transition-duration: .5s;
    -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

    background: transparent;
    height: 44px; 
    width: 100%;
}

.slider.open {
    max-height: 44px;
}

.fadein {
    opacity: 0;
    transition:opacity 0.3s linear;
}

.fadein.show {
    opacity: 1;
}

.slide-div {
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;}    
}

/*
.slide-form:hover {
    transform:translateX(-100%);
    -ms-transform:translateX(-100%);
    -webkit-transform:translateX(-100%);
}
*/

.slide-form.left {
    transform:translateX(-100%);
    -ms-transform:translateX(-100%); /* prefix for IE 9 */
    -webkit-transform:translateX(-100%); /* prefix for Safari and Chrome */    
}


.shrink {
  width: 100%;
  height: 100%;
  overflow: hidden;    
    opacity: 1;
    transition:opacity 0.3s linear;
}

.shrink.close {
    opacity: 0;
  top: 100%;
  height: 0;    
}


    .fog_div {
      display: none;
      position: fixed;
      top: 0px;
      left: 0px;
      height: 100%;
      width: 100%;
      z-index: 100;
      background-color: rgba(30, 30, 30, 0.5);
    }
    #busybox.show {
      display: block;
    }

.graph-wrapper { width: 60%; margin: 0 auto; }    


/*oud*/
.div_breadcrumbs {
/*    height: 45px; 
    line-height: 45px; */
    color: #999; 
/*    background: #fff; */
    font-size: 13px; 
    font-weight: bold; 
    padding: 0px 0px; 
    margin: 10px 0px 0px 0px;
    text-align: right;
}

.div_page_title {
    color: #0099cc; 
/*    background: #fff; */
    font-size: 24px; 
    line-height: 32px; 
    font-weight: bold; 
    padding: 10px 0px; 
    margin: 5px 0px 40px 0px; 
    border-bottom: 1px solid #fff; 
}


.section-title-1 {
    width: 100%;
/*    background: var(--base-blue);*/
    background: #ffe0bf;
    color: #555;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1.1em;
    
}


/* MEDIA QUERIES MAIN HEADER */
@media screen and (min-width: 769px) {

    body, html {
    background-image: url("../images/banner.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }

    .field-label {display: table-cell; padding-top: 9px; padding-bottom: 0px; color: #0099cc; font-size: 15px; border-top: 1px solid #ececec;}  
    .field-data {display: table-cell; padding-top: 0px; padding-bottom: 0px; color: #000; font-size: 15px;}  
    .field-data-text {display: table-cell; font-size: 15px;}
/*    .field-label {padding-top: 11px; border-top: 1px solid #ececec;}*/
    .field-row {margin-bottom: 6px;}
    .table-header {display: table;}
    .table-title-row {display: none;}
    .table-row {font-size: 15px; border-bottom: 1px solid #eee;}
    .table-td, .field-label, .field-data, .field-data-text {display: table-cell; min-width: 0px; margin-bottom: 0px;}
    .table-title-header {display: table-cell; min-width: 0px;}
    .display-small-only {display: none;}
    
    .page-body {
        margin: 15px auto 10px auto; 
        padding: 10px 30px 10px 30px; 
        height: calc(100vh - 80px); 
        border-radius: 5px;
        border: 0px solid #ddd; 
        animation-name: page-body;
        animation-duration: 0.8s;
        
    }
    
    @keyframes page-body {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}    
    
    
    
    
    .div-list-navigation {font-size: 14px;}  
    .div-page-header-small {display: none;}
    .top-app-name {display: inline-block;}
    .select-small {font-size: 14px;}
    /*.div-page-button-header {margin: 0px 0px 0px 0px;}*/
    .div-modal-container {background-color: rgba(0,0,0,0.4);}
    .div-top {display: block;}
    .nav-logout {display: none;}
    .top-logout {display: block;}
    .div-breadcrumbs {display: block;}
    .span-mobile-only {display: none;}
    .span-desktop-only {display: inline-block;}
    .div-mobile-only {display: none;}
    .div-desktop-only {display: block;}
    .cell-desktop-only {display: table-cell;}
    .cell-mobile-only {display: none;}
    
}


@media screen and (max-width: 992px) {

    .page-body {
        
        margin: 0px auto 10px auto; 
        padding: 10px 15px 10px 15px; 
        height: calc(100vh - 50px); 
        border-radius: 0px;
        border: 0px solid #ddd; 
        
        
/*        
/*     
        margin: 50px auto 0px auto; 
        padding: 10px 15px 150px 15px; 
        height: calc(100vh - 50px); 
        border-radius: 0px;
        border: 0px solid #ddd;
 
        height: auto;
        min-height: 800px;*/
/*
       */ 
    }
    
    
}


@media screen and (max-width: 768px) {
    
/*    .login {top: 50px;}*/
    .table-row {font-size: 15px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; margin-bottom: 3px; background: #f6f6f6; border-radius: 10px; padding: 5px 10px;
}
    .table-row-clean {width: 100%; font-size: 1.1em;}
/*    .table-title-row {color: #000; }*/
/*    .field-label {padding-bottom: 5px; color: #0099cc; font-size: 15px;}*/
    .field-label {padding-bottom: 5px; color: #000; font-size: 15px; font-weight: normal}
    .field-data-text {padding: 0px 10px 5px 0px; color: #666;}
    .table-td {line-height: 1.1em; padding: 6px 8px 0px 8px;}
    .display-wide-only {display: none;}
    .div-list-navigation {font-size: 16px;}    
    .top-app-name {display: none;}
    .select-small {font-size: 16px;}
    .div-page-button-header {margin: 30px 0px 10px 0px; text-align: center;}
    .div-page-button-footer {
        text-align: center;
        position: fixed;
        bottom: 0px;
        background: #eee;
        padding: 16px;
        height: 60px;
        vertical-align: top;
        margin: 0px 0px -10px -15px;
        box-shadow: inset 0px 11px 8px -10px #CCC;
    }  
    
    .div-page-button-footer-modal {
        text-align: center; 
        padding: 0px 20px 0px 20px; 
    
    }
    
    .div-modal-container {background-color: rgba(0,0,0,0.4);}
    .div-modal-medium {top: 55px; padding: 20px; height: calc(100vh - 135px);}
    .div-alert-small {top: 120px;}

    .div-search {text-align: left;}
    .div-top {display: none;}
    .nav-logout {display: block;}
    .top-logout {display: none;}
    .div-breadcrumbs {display: none;}
    .div-page-title {display: none; margin: 5px 0px 10px 0px; font-size: 20px; }
    .div-page-header-small {display: flex;}
    .title-icon {margin-right: 10px;}
    .div-modal-header-title {padding: 0px 0px; text-align: center;}

    .table-rows-scroll {height: calc(100vh - 330px);}
    .div-page-button-header {display: none;}
    .span-mobile-only {display: inline-block;}
    .span-desktop-only {display: none;}
    .div-mobile-only {display: block;}
    .div-desktop-only {display: none;}
    .cell-desktop-only {display: none;}
    .cell-mobile-only {display: table-cell;}
    .mobile-center {text-align: center;}

    .dropdown-list {
/*        background-color: transparent; */
        border: 1px solid #ddd; 
        padding: 10px 10px 0px 10px;
        margin-right: 10px;
    }
    .dropdown-list-empty {
        padding: 8px 0px;
        margin-bottom: 10px;
    }
    .slider {
        height: 70px; 
    }
    .slider.open {
        max-height: 70px;
    }
    

    .radio-toolbar label {padding: 5px 10px;}
    
    input[type="text"], input[type="date"], input[type="datetime"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="time"], input[type="url"], select {
        padding: 4px 10px 2px 10px;
        line-height: 30px;
    }
    

    select {
        background-position-y: 2px;
/*        padding: 4px 10px 2px 10px;
        line-height: 24px;*/
    }
    
    .div-table-navigation {
        bottom: 20px;
    }    
    
    .graph-wrapper { width: 100%;}    
    .div-page-header-back { margin: -10px 0 0 -12px; padding-bottom: 6px;}
    .divscroll {height: calc(100vh - 160px);}
    .divscroll-medium {height: calc(100vh - 160px);}
    
    .div-year-navigation {
        padding: 0px 0px 0px 0px; 
    }
    .table-title-text {
    color: #333;
    }

    
    
}


@media screen and (max-width: 1623px) {

.side-menu-container {display: none;}

}

@media screen and (min-width: 1624px) {

.side-menu-container {display: block;}


}