/* 
 * GESThabil css style sheet
 *	version : 1.0.5
 * Author : Erik Martre
 * date : 20220215
*/

/*—————————————————————————————— general style ——————————————————————————————*/

* {
  box-sizing: border-box;
  border-collapse: collapse;
}

.col-sixth {width: 1.39vw;}
.col-thrd {width: 2.77vw;}
.col-half {width: 4.16vw;}
.col-2thrds {width: 5.54vw;}
.col-1 {width: 8.33vw;}
.col-1cnt {width: 6.83vw;}
.col-1andThrd {width: 11.11vw;}
.col-1andHalf {width: 12.5vw;}
.col-1andTwoThirds {width: 13.89vw;}
.col-2 {width: 16.66vw;}
.col-2cnt {width: 14.66vw;}
.col-2andThrd {width: 19.44vw;}
.col-2andHalf {width: 20.83vw;}
.col-2andTwoThirds {width: 22.17vw;}
.col-3 {width: 25vw;}
.col-3cnt {width: 23vw;}
.col-3andHalf {width: 29.16vw;}
.col-3andHalfcnt {width: 27.16vw;}
.col-4 {width: 33.33vw;}
.col-5 {width: 41.66vw;}
.col-5cnt {width: 39.66vw;}
.col-6 {width: 50vw;}
.col-7 {width: 58.33vw;}
.col-8 {width: 66.66vw;}
.col-9 {width: 75vw;}
.col-10 {width: 83.33vw;}
.col-11 {width: 91.66vw;}
.col-12 {width: 100vw;}
.col-3-28 {width: 10.71vw;}
.autowidth {
    width: auto;
    min-width: 2.77vw;
}

.noborder tr td {
    border: none;
}
.center {
    text-align: center;
}
.hcenter {
    margin: 0;
    position: relative;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.hz_margin_center {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
.vcenter {
    margin: 0;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.hvcenter {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.floatLeft {
    position: relative;
    display: block;
    float: left;
}
.floatRight {
    position: relative;
    display: block;
    float: right;
}
.noStyle {
    list-style-type: none;
    padding:0;
    margin: 0;
}
h1 {
    text-align: center;
}
h2 {
    text-align: center;
}
h3 {
    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
    text-align: center;
}
h4 {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 0.5em;
}
h5 {
    text-align: center;
    font-size: var(--fontsize_h5);
    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
}
/* hereunder is a workaround for borders not displaying in a sticky-positioned header with border-collapse: collapse - "inset" is needed */
/* see for example https://stackoverflow.com/questions/57166162/table-headers-positionsticky-and-border-issue/57170489 */
.lshad {
   box-shadow:  inset 2px 0 var(--light_shadow);
}
.floatContainer:after { 
    content: " "; 
    display: block;
    clear: both;
} 
.show {
    display: block;
}

/*——————————————————————————————————— grid ——————————————————————————————————*/

.grid-container {
    display: grid;
    gap: 2px;
    padding: 2px;
    background-color: var(--theme_base);
}
.grid-container div {
    background-color: var(--pale_grey);
}

/*—————————————————————————— page general structure —————————————————————————*/

body {
    position: relative;
    display: block;
    width: 100vw;
	background: #ffffff;
	margin: 0;
	font-size: 1em; 
	top: 0;
    font-family: petrasans-regular, open_sansregular, sans-serif;
}	
header{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 4vh;
	background-color: var(--pale_grey);
	z-index: 1;
}	
#page {
    position: relative;
    top: 4vh;
    height: 92vh;
    min-height: 92vh;
    width: 100%;
    z-index: 0;
}
.info{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   /*  width: auto;
    height: auto; */
    min-width: 20vw;
    min-height: 10vh;
    padding: 1vh 1vw 2vh 1vw;
    margin: 5px;
    color: var(--pale_grey);
    background-color: var(--classic_accent);
    font-weight: bold;
    font-size: var(--fontsize_vw_XS);
    z-index: 9999;
    text-align: center;
    box-shadow: 0px 19px 38px 0px rgba(0,0,0,0.3), 0px 15px 12px 0px rgba(0,0,0,0.22);
    -webkit-box-shadow: 0px 19px 38px 0px rgba(0,0,0,0.3), 0px 15px 12px 0px rgba(0,0,0,0.22);
    -moz-box-shadow: 0px 19px 38px 0px rgba(0,0,0,0.3), 0px 15px 12px 0px rgba(0,0,0,0.22);
}
.dialog{
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    padding : 1vh 1vw 1vh 1vw;
    color: black;
    background-color: white;
    /*font-weight: bold;*/
    font-size: var(--fontsize_vw_XS);
    z-index: 900;
    box-shadow: 0px 19px 38px 0px rgba(0,0,0,0.3), 0px 15px 12px 0px rgba(0,0,0,0.22);
    -webkit-box-shadow: 0px 19px 38px 0px rgba(0,0,0,0.3), 0px 15px 12px 0px rgba(0,0,0,0.22);
    -moz-box-shadow: 0px 19px 38px 0px rgba(0,0,0,0.3), 0px 15px 12px 0px rgba(0,0,0,0.22);
}
footer{
	position: relative;
	top: 4vh;
	width: 100%;
	height: 4vh;
    color: #FFFFFF;
	background-color: var(--footer_grey);
    font-size: var(--fontsize_vh_L);
    z-index: 2;
}
#title{
	text-align: center;
}
thead {
    top: 0px;
    font-size: var(--fontsize_em_XS);
    height: 1em;
    z-index: 100;
}
.sticky {
    position: sticky; 
    border-collapse: separate;
}
th{
    padding-left: 10px;
    padding-right: 10px;
}
td{
    border-style: solid;
    border-width: 1px;
    padding-left: 5px;
    padding-right: 5px;
}
tr.odd {
   background-color: var(--main_pale);
}
tr.even {
    background-color: var(--pale_grey);
}
.alternateColor tr:nth-child(odd) {
    background-color: var(--main_pale);
}
.alternateColor tr:nth-child(even) {
    background-color: var(--pale_grey);
}
.alternateColor tr:nth-child(odd) td:nth-child(1){
    background-color: var(--main_pale);
}
.alternateColor tr:nth-child(even) td:nth-child(1){
    background-color: var(--pale_grey);
}
.tableSum td{
	background-color: var(--theme_light);
	color: var(--main_char);
	font-weight: bold;
	font-size: var(--fontsize_tr_tableSum);
}
.valid {
    color:  var(--freezed);
    font-style: italic;
    /* font-weight: bold; */
}
.accountingNr {
    text-align: right;
    padding-right: 5px;
}
/*———————————————————————— forms, buttons, links and searches ————————————————————————*/

button {
    cursor: pointer;
}
button :active {
    background-color: var(--menu_hover);
}
.transpt_button {
    background-color: transparent;
    border: none;
    padding: 0;
}
.note{
    font-size: var(--fontsize_em_XS);
    color: var(--main_table);
    border: none;
    background: var(--pale_grey);
    font-style: italic;
}
.form_container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background: var(--pale_grey);
    text-align: center;
    padding-bottom: 10px;
}
input {
   display: inline-block;
   /* border-radius: 4px; */
   margin: 0;
}
select {
    margin: 0;
    border-radius: 0;
    background-color: var();
}
label {
    display: inline-block;
    /* vertical-align: middle; */
    text-align: right;
}
a, a:link, a:visited {
   text-decoration: none;
   color: var(--main_table);
} 
.mainTable a:link, .mainTable a:visited {
	color: var(--link);
}
a:hover, .mainTable a:hover{
	color: var(--pale_grey);
	font-weight: bold;
	background-color: var(--main);
}
.topSelect {
    /* display: block;
    position: absolute;
    left: 11vw;
    top: 2vh;
    height: 8vh; */
    color: var(--classic_accent);
    font-size: var(--fontsize_vh_XL);
    background-color: transparent;
    border: none;
    height: 4vh;
    font-family: caviar_dreamsregular ;
    font-weight: bolder;
}
.searchTool {
    position:absolute; 
    top: 0;
    right: 0;
    height: 6vh;
    width: max-content;
    background-color: white;
}
.searchTool > * {
    height: 4vh;
    margin-top: 1vh;
	margin-bottom: 1vh;
	margin-left: 0.5vh;
	margin-right: 0.5vh;
    padding: 0;
}
.found {
    background-color: var(--found);
}
form button, #editArea button, #btArea button, #btAreaDense button, #dialog button {
    /* height: 6vh;
    width: 4vw; */
    padding:0;
    margin: 0 1vw 0 1vw;
    border: none;
    background-color: transparent;
}
/*form button > img, #editArea button > img, #dialog button > img, .dialog img, .info img {
    height: 5vh;*/
    /*width: 6vh;*/
/* } */ 
.btImg {
    height: 5vh;
}
#actionArea button {
    position: relative; 
    top: 2vh; 
    height: 5vh;
}
#storeBt {
    height: 6vh;
    width: 4vw;
}
#storeBt img {
    height: 5vh;
}
.salesBt {
    height: 3vh;
    width: 1vw;
    float: left;
}
.salesBt img {
    width: 1vw;
    height: 1vw;
    float: left;
}
.btImg {
    height: 5vh;
}
#btArea, #btAreaDense{
    position: absolute;
    left: 95.83vw;
    height: 92vh;
    padding-top: 4vh;
    /* background-color: #cdcdcdff; */
}
/* #btAreaDense {
    padding-top: 0.5vh;
} */
#btArea button, #btAreaDense button, #btArea > img, #btAreaDense > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5vh;
    margin-bottom: 2.5vh;
    padding: 0;
}
#btArea button {
    margin-top: 5vh;
    margin-bottom: 5vh;
}
#btArea button:hover, #btAreaDense button:hover {
    background-color: var(--main_pale);
}
#btArea button img, #btAreaDense button img{
    max-width: 4vw;
    max-height: 6vh;
    height: auto;
    width: auto;
}
.ok_button {
    background: var(--main_table);
    font-size: var(--fontsize_em_L);
    color: var(--pale_grey);
    border-radius: 4px;
}
.no_button {
    background-color: var(--warning);
    font-size: var(--fontsize_em_L);
    color: var(--pale_grey);
    border-radius: 4px;
}
.btDiv {
    position: relative;
    display: inline-block;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vh;
}
.btDiv button {
    float: left;
    text-align: center;
}
.inventoryButton {
    width: 5vw;
    text-align: center;
    box-shadow: 3px 3px 5px var(--footer_grey) inset;
}
.inventoryButton:hover {
    background-color: var(--pale_mauve);
}
#selectFinYear button, #findDocForm button, #findCredStructForm button {
    background-color: var(--classic_accent);
    font-size: var(--fontsize_em_L);
    color: var(--pale_grey);
    border-radius: 4px;
    padding-left: 5px;
    padding-right: 5px;
    width: auto;
}
#selectFinYear button:hover {
    background: var(--main);
}
.infobt {
	margin: 5px;
	height: 3vh;
    cursor: help;
}
.info button, #editArea .info button {
    font-weight: bold;
    height: 4vh;
    width: 3vw;
    margin: 0.8vh 0.8vw;
    background-color: var(--classic_accent);
    color: var(--pale_grey);
    border: none;
}
.closeBt {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
}

#editArea .closeBt, #editArea .closeBt img{
    width: 2vh;
    height: 2vh;
    margin: 0;
}


/*———————————————————————————————— header ———————————————————————————————————*/

#logo {
    display: block;
	position: relative;
    float: left;
}
#logo img {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1vh;
    height: 2vh;
}
#user {
    position: relative;
    float: left;
    height: 4vh;
    /* z-index: 950; */
}
#user>div {
    /* z-index: 1; */
    width: 100%;
    height: 100%;
    background-color: var(--theme_base);
}
#user img {
    height: 3vh;
    margin-left: 0.2vw;
}
#user p {
    color: var(--pale_grey);
    position: relative;
    float:left;
    /* text-align:center; */
    padding: 0;
    margin: 0;
    font-weight: bold;
}
#user form {
    display: block;
    position: relative;
    float: right;
    right: 0.5vw;
    height: 4vh;
}
/* #user:hover > ul {
    display: block;
    top: 4vh;
} */
#user button {
    border-style: none;
    margin: 0.5vh 0 0.5vh 0 ;
    height: 3vh;
}
#user button img {
    height: 3vh;
    margin: 0;
}
#user > ul {
    position: absolute;
    display: block;
    margin: 0;
    padding: 1vh 0.5vw 0 0.5vw;
    background-color: var(--theme_base);
}
#user > ul > li{
    position: relative;
    left: -2px;
    top: 0;
	height: 5vh;
    list-style-type: none;
}
#user a{
    display: block;
    position: relative;
    color: var(--pale_grey);
    top: 50%;
    transform: translateY(-50%);
    padding:0;
    margin: 0;
    text-align:center;
    /* font-size: 0.75vw; */
    line-height: 100%;
}
#user a:hover {
    /* color: var(--theme_base); */
    background-color: var(--main_theme);
    font-style: bold;
    /* font-size: 0.9vw;
    font-weight: bold; */
}
#disconnectLink > a:hover {
    color: var(--warning_acute);
}
nav {
	position: relative;
	float: left;
	height: 4vh;
	/* z-index: 910; */
	background-color: var(--main);
    font-family: caviar_dreamsregular;
    font-weight: bolder;
}
/*———————————————————————— menu ————————————————————————*/

ul {
    list-style-type: none;
}
nav ul {
    background-color: var(--main);
}
nav > ul {
    position: relative;
	top: 0;
	margin: 0;
	padding: 0;
	z-index: 1;
}
nav > ul > li {
    position: relative;
    margin-right: 1.5vw;
    display: block;
    float: left;
    height: 4vh;
    background-color: var(--main);
}
nav > ul > li > ul {
    position: absolute;
    display: none;
    top: 4vh;
    margin: 0;
}
nav ul ul {
    width: max-content;
    z-index: 2;
}
nav ul ul ul {
    z-index: 3;
}
nav p, nav a, nav div, nav button {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding:0;
    margin: 0;
	text-decoration: none;
    color: var(--classic_accent);
    font-size: 0.9vw;
}
nav ul ul li {
    position: relative;
    left: -2px;
    top: 0;
    background-color: var(--main);
    color: var(--pale_grey);
	height: 4vh;
}
nav > ul > li > ul > li a:hover, nav > ul > li > ul > li p:hover, nav button:hover, nav > ul> li > a > div:hover, nav > ul > li > div > div:hover {
    font-size: 0.9vw;
    color: var(--menu_hover);
}
.menuItemList {
    background-color: var(--pale_grey);
    padding: 1vh 1vw 1vh 1vw;
    box-shadow: 0px 19px 38px 0px rgba(0,0,0,0.3), 0px 15px 12px 0px rgba(0,0,0,0.22);
    -webkit-box-shadow: 0px 19px 38px 0px rgba(0,0,0,0.3), 0px 15px 12px 0px rgba(0,0,0,0.22);
    -moz-box-shadow: 0px 19px 38px 0px rgba(0,0,0,0.3), 0px 15px 12px 0px rgba(0,0,0,0.22);
}
nav button {
	font-family: caviar_dreamsregular;
    font-weight: bolder;
	display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
nav img {
    position: relative;
    max-height: 3vh;
    max-width: 2vw;
    height: auto;
    width: auto;
    margin-right: 5px;
    top: 50%;
    transform: translateY(-50%);
    float: left;
}
nav>ul>li>ul>li ul {
    display: none;
}
nav > ul > li > ul > li:hover > ul, nav > ul > li > ul > li > ul > li:hover > ul {
    display: block;
    position: relative;
    top: 0;
    left: 50%;
}
nav a:link,  nav a:visited{
    color: var(--classic_accent);
    }
/*————————————————————————————————— footer ——————————————————————————————————*/

footer {
	padding: 0.75vh 2vw 0.75vh 2vw;
}
footer a:link, footer a:visited{
	color: var(--classic_accent);
}
footer a:hover{
	color: #96e0e9;
	background-color: transparent;
}
.under {
    display: none;
    background-color: var(--footer_grey);
}
footer > ul:active .under, footer .under:active .under {
    display: block;
    position: absolute;
    bottom: 0vh;
    padding: 0.5vh 0.5vw 0 0.5vw;
}
footer p {
    margin:0;
    padding: 0;
}

/*——————————————————————————— loginView ————————————————————————————*/

.form_login {
    width: 40%;
    top:100px;
}
.form_login input{
    /*position: relative;*/
    width: 60%;
    font-size: 1.2em;
}
.form_login label {
    width: 35%;
    font-size: 1.2em;
}

/*———————————————————————— portal and help ————————————————————————*/

#portal ul {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
    padding-right: 1vh;
    width: 80%;
    max-width: 1200px;
    background-color: var(--pale_grey);
    top: 0;
    font-size: var(--fontsize_vh_L);
}
#portal li {
    position: relative;
    height: initial;
    border: none;
    padding: 0;
    margin: 0;
    text-align: justify;
}
#portal>ul>li:before {
    content: '';
    display: inline-block;
    height: 1.5em;
    width: 1.5em;
    background-size: 1.5em;
    background-image: url('../img/ul_img1.svg');
    background-repeat: no-repeat;
    margin-right: 5px;
    position: relative;
    top: 0.4em;
}
.faq:before {
    content: '';
    display: inline-block;
    height: 3.5vh;
    width: 3.5vh;
    background-size: 2vh;
    background-image: url('../img/help.svg');
    background-repeat: no-repeat;
    margin-right: 5px;
}
@keyframes portalTitleAnimation{
    0% {
        color: var(--animation_1);
    }
    10% {
        color: var(--animation_2);
    }
    40% {
        color: var(--animation_3);
    }
    70% {
        color: var(--animation_4);
    }
    100% {
        color: var(--animation_1);
    }
}
#portalTitle {
    animation: portalTitleAnimation 8s linear infinite;
}

/*——————————————————————————— dash ————————————————————————————*/

#dash {
    display: block;
    height: 92vh;
    padding-top: 2vh;
}
#dash a {
	color: var(--main_char);
}
#productDash li {
    width: 30%;
}
#dash li {
    padding: 1vh 0 1vh 0;
}
#dash img {
    position: relative;
    display: block;
    /* float: left; */
    margin-left: auto;
    margin-right: auto;
    max-height: 6vh;
    max-width: 4vw;
    height: auto;
    width: auto;
}
/* #dash img {
    height: 5vh;
} */
.out {
    background-color: #eee6cd; /*#d0ceba;*/
    color: #555555;
}
.in {
    background-color: #96e0e9; /*#78cdd7;*/
    color: #555555;
}
.inner {
    background-color: #80b8e5;
    color: #555555;
}
.assign {
    background-color: #d2dde5;
    color: #555555;
}
#recDash {
    position: relative; 
    top: 1vh; 
    height: 8vh; 
    width: 100%;
}
.recDashEntry {
    margin: 1vw;
    height: 5vh;
    background-color: var(--pale_grey);
    border: 2px solid var(--main);
}
.recDashEntry a{
    color: var(--classic_accent);
    font-size: var(--fontsize_vh_XL);
}    
/*——————————————————————————— main ————————————————————————————*/
.mainTitle {
    position: relative;
    top: 0;
    display:block;
    width: 100%;
    height: 6vh;
    padding-top: 0;
    padding-bottom: 1vh;
    text-align: center;
}
.mainTitle p {
    margin-top: 1vh;
    margin-bottom: 1vh;
    font-weight: bold;
    font-size: var(--fontsize_vh_XXL);
}
.set {
    position: absolute;
    left: 0;
    top: 0;
}
.mainTable{
    position: relative;
    top: 0;
    display:block;
    height: 28vh;
    padding: 0;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid var(--main_table);
    table-layout: fixed;
    font-size: var(--fontsize_h5);
    color: var(--main_char);
    background-color: var(--light_grey);
}
.mainTable th, #actionArea table thead, #actionArea #closingInfo button {
    background-color: var(--main_table);
    color: var(--pale_grey);
}
.mainTable td {
    border: none;
    border-left: 1px solid var(--main_table);
    border-right: 1px solid var(--main_table);
    /*padding: 1px 6px 1px 6px;*/
    /*height: 1vh;*/
    overflow-wrap: anywhere;
}
.mainTable button, #pending_table button {
    margin: 0;
    padding: 0; 
    border: none;
    background-color: transparent;
}
.mainTable img{
    height: 1.2em;
}
.leftFixedCol {
        position: sticky;
        left: 0;
        min-width: 16.66vw;
        background-clip: border-box;
    }
#filters {
    position: relative;
    top: 7vh;
    height: 84vh;
    display:block;
    padding: 0;
    border: 1px solid var(--main_table);
    font-size: var(--fontsize_vh_L);
    color: var(--main_char);
    background-color: var(--light_grey);
	font-weight: bold;
}
#filters form > * {
	text-align: center;
	width: 6.83vw;
}
#filters label {
	display: block;
	font-weight: normal;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
	padding-top: 1vh;
	padding-bottom: 0.5vh;
	font-size: var(--fontsize_h5);
}
#editArea {
    position: relative;
    top: 0.5vh;
    margin: 0;
    width: 100%;
    height: max-content;
    text-align: center;
    font-size: var(--fontsize_editArea);
    border : 2px solid var(--theme_base);
}
#editArea.prepared {
    position: relative;
    /* top: 1vh; */
    margin: 0;
    width: 100%;
    height: 54vh;
    text-align: center;
    font-size: var(--fontsize_editArea);
    background-color: var(--prep_bg);
    box-shadow: 5px 5px 3px var(--shadow);
}
#dialog {
    overflow: scroll;
}
#preparedContainer {
    position: relative;
    top:0;
    width : 100%;
    height: 26vh;
    overflow: auto;
    background-color: var(--main_pale);
    padding: 0;
    /* border-right: 2px solid var(--theme_base);
    border-left: 2px solid var(--theme_base); */
}
#opTitle {
    background-color: var(--theme_base);
    height: 3vh;
    margin: 0 auto 0 auto;
    text-align: center;
}
#opTitle > h3 {
    display: inline;
    line-height: 3vh;
    color: var(--pale_grey);
    margin: 0;
    /* margin-right: auto;
    margin-left: auto; */
}
#opTitle button {
    position: absolute;
    right: 0;
    top: 0;
    background-color: var(--pale_grey);
    width: 3vh;
    height: 3vh;
    margin: 0;
    padding: 0;
}
#opTitle > button > img {
    width: 3vh;
    height: 3vh;
}
#preparedContainer h3, #queryArea h3 {
    /* background-color: var(--theme_base); */
    color: var(--theme_base);
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
   /*  width: 50%; */
}
#queryArea p, #addRow p, #editRow p {
    margin: 0;
    font-size: var(--fontsize_em_XS);
    color: var(--main_char)
}
#preparedContainer button > img {
    width : 4vh;
    height: 4vh;
}
#preparedContainer #bt_save > img {
    width: 6vh;
    height: 6vh;
    margin: 5px;
}
#pending_table {
    width: 99.5%;
    /* float: left; */
    padding: 0;
    margin: 5px;
}
#pending_table th {
    color: var(--main_char);
    background-color: var(--attention);
}
#pending_table td {
    padding: 0.2%;
    border-color: var(--attention);
}
#queryArea th, #queryArea td {
    padding: 5px;
}
#queryArea {
    position: relative;
    width: 100%;
    height: 26vh;
    overflow: scroll;
    background-color: var(--pale_grey);
}
#addRow, #editRow {
    position:absolute;
    top: 0;
    width: 100%;
    height: 100%;;
    background-color: var(--pale_grey);
    overflow: scroll;
   
}
#queryFormTables {
    /* width: 83.33vw; */
    height: 20vh;
    margin-left: 1.3vw;
    display: grid;
    grid-template-columns: repeat(10, 8.2vw); 
    /* grid-template-rows: repeat(5, fr1); */
    gap: 1px;
    padding: 1px;
    /* background-color: none; */
}
/* #queryFormTables div {
    background-color: var(--pale_grey);
} */
#queryFormButtons{
    position: relative;
    width: 6vw;
    float: right;
    top: 50%;
    transform: translateY(-50%);
}
#queryFormButtons button{
    padding: 0;
    margin: 0;
    width: 6vw;
}
.qfInput {
    width: 100%;
    background-color: white;
    font-size: inherit;
}
.disabled {
    background-color: var(--pale-grey);
}
/* makes save_to_DB.svg too small*/
/* #queryForm img{
    width: 2em;
    height: 2em;
} */
/* #operationTab {
    width: 100%;
	padding-left: 10%;
} */
#editRow td {
    padding:0.5%;
}
#bt_save {
    margin-top: 1vh;
}
#thrd_hints, #ac_hints, #ac_lib, #activity_hints, #prod_hints, #prv_hints, #payer_hints {
    position: fixed;
    height: 15vh;
    display: block;
    border: 1px solid black;
    box-shadow: 3px 2px var(--shadow);
    z-index: 999;
}
#reclass #ac_hints, #reclass #ac_lib {
    position: absolute;
}
#ac_lib {
    height: 3vh;
    margin: 0;
    padding: 0;
    border-radius: 0;
}
#prod_hints_block {
    float: left;
    width: 30%;
    left:0;
    top: 1em;
}
#salesTab {
    float: left;
    padding-left: 10%;
    margin-left: 5%;
    margin-top: 1.5vh;
}
#delSales {
    float: left;
    width: 10%;
    padding: 0;
    margin-top: 1.5vh;
    margin-left: 1.5vw;
}
#delSales::before {
    content: "suppr. produits";
}
#ac_code5 {
    width: 17em;
}
#searchResults img {
    height: 1.5em;
}
#validatePage {
    /* display: block;
    width: 100%;
    height:100%;
    text-align: center; */
    font-size: var(--fontsize_em_XL);
}
#validatePage > div {
    margin-left: 20vw;
}

/*—————————————————————————— contextmenu ———————————————————————————*/
#ctxmenu
{
  position:absolute;    
  min-width: 128px;
  height:auto;
  padding: 8px 0px 8px 0px;
  margin:0;
  margin-left:32px;
  margin-top:-16px;
  border: 1px solid var(--shadow);;
  background: #F8F8F8;
  box-shadow: 2px 2px 2px var(--shadow);
  z-index:11;
  overflow: visible;
}
.ctxline
{
  display:block;
  margin:0px;
  padding:2px 8px 2px 8px;
  font-size: var(--fontsize_h5);
  overflow:visible;
}
.ctxline button {
  font-family: inherit;
  margin: 0;
  height: 100%;
  width: 100%;
  text-align: left;
}
.ctxline img {
    height: 2vh; 
    width: 2vh; 
    padding: 0; 
    margin: 0;
}
.ctxentry:hover
{
  color: white;
  background-color: var(--main);
}
.docChecked {
    color: #009933;
}
.docChecked a:link, .docChecked a:visited {
	font-weight: bold;
	color: #008399;
}
.docChecked a:hover {
	color: var(--pale_grey);
	font-weight: bold;
	background-color: var(--main);
}
.docMissing {
    color: #F33200;
}
.docNotChecked {
    color: grey;
}

/*——————————————————————————— budget —————————————————————————————*/

.sectionTitle {
    background-color: var(--theme_light); 
    color: var(--classic_accent); 
    font-size: larger; 
    font-weight: bold; 
    text-align: center;
}
.subSectionTitle {
    font-weight: bold; 
    color: var(--classic_accent); 
    background-color: var(--light_grey);
    text-align: center;
}
.borderTop {
    border-top: 1px solid var(--main_table);
}
.borderTopDouble {
    border-top: double var(--main_table);
}
.borderBottom {
    border-bottom: 1px solid var(--main_table);
}
.borderBottomDouble {
    border-bottom: double var(--main_table);
}
.budgetTotal {
    font-style: italic; 
    color: var(--classic_accent); 
    text-align: right;
}


/*——————————————————————————— annual —————————————————————————————*/

.GL_title {
    font-size: 1.2em;
    font-weight: bold; 
    color: var(--classic_accent); 
    /* background-color: var(--main_pale); */
    text-align: left;
    border-top: 4px solid #cacaca; 
}
.GL_sums {
    font-size: 1.1em; 
    font-weight: bold; 
    color: var(--classic_accent); 
    background-color: var(--theme_Xlight);
    text-align: right;
    border-bottom: 4px solid #cacaca; 
}
.annual_main{
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    height:fit-content; 
    min-height: 90vh; 
    background-color:#fafafa; 
    z-index: 2; 
    font-size: var(--fontsize_vw_XS); 
    padding-left: 1vw; 
    padding-right: 1vw;
    display: flow-root;   
}
.annual_level3, .annual_level4, .annual_level5 {
    display: block;
    text-align: left;
    font-weight: bold;
    margin-top: 2vh;
    margin-bottom: 1vh;
    clear: both;
}
.annual_level3 {
    font-size: var(--fontsize_vw_M);
}
.annual_level4 {
    font-size: var(--fontsize_vw_S);
}
.annual_level5 {
    font-size: var(--fontsize_vw_XS);
}
.annual_check {
    display: block;
    float: right;
    margin-top: 1vh;
    margin-bottom: 1vh;
}
.annual_grid {
    position: relative;
    display: inline-grid;
    padding: 3px;
    font-size: var(--fontsize_vw_XS);
    grid-gap: 1px;
    background-color: var(--main_table);
}
.annual_cell {
    position: relative;
    background-color: white;
    padding: 5px;
}
.left_text {
    margin-top: 1vh;
    margin-bottom: 1vh;
    float: left;
}
.annual_grid_bt {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0; 
    width: 3vw;
}
.annual_ok_box {
    display: inline-block; 
    width: 100%; 
    border: 2px solid; 
    border-color: var(--ok);
    border-radius:10px;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 1vh;
}

/*——————————————————————————— config —————————————————————————————*/

.config-group {
    font-size: 1.1em; 
    font-weight: bold; 
    color: var(--classic_accent); 
    background-color: var(--theme_Xlight);
    text-align: center;
    border-bottom: 4px solid #cacaca; 
    margin-top: 1vh;
}

.config-col {
    position: relative;
    padding-left: 10px; 
    padding-right: 10px; 
    border-right: 5px solid var(--theme_base);
    border-left: 5px solid var(--theme_base); 
    border-collapse: collapse;
    height: 84vh;
    float: left;
    background-color: var(--main);
}

.config-label {
    display: block;
    margin-bottom: 0.3vh;
    margin-top: 1vh;
    font-size: 1vw;;
    font-weight: bold;
    text-align: center;
}

.config-input {
    font-size: 0.9vw;
}

/*——————————————————————————— special ————————————————————————————*/

.warning {
    font-size: var(--fontsize_vh_L);
    font-weight: bold;
    text-align: center;
    color: var(--warning);
    background-color: var(--warning-bk);
    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
}
/* .queryArea_warning {
    position: absolute;
    font-size: 2vh;
    font-weight: bold;
    text-align: center;
    color: var(--warning);
    background-color: var(--warning-bk);
} */
.simple_warning {
    display: inline;
    float: left;
    font-size: var(--fontsize_vh_L);
    font-weight: bold;
    text-align: left;
    color: var(--warning);
    background-color: var(--warning-bk);
    margin: 0;
}
.warning table {
    padding: 0.5vh;
    width: 30vw;
    margin: auto;
}
.warning h3 {
    margin-top: 1vh;
}
.notice {
    display: block;
    width: max-content;
    color: var(--classic_accent); 
    font-style: italic; 
    margin: 0.5vh auto 0.5vh auto;
    font-size: var(--fontsize_vw-XS);
}
.notImplemented {
    display: block;
    font-size: 4vw; 
    text-align: center;
    border: 4px solid var(--main);
    border-radius: 5px; 
    background-color: var(--pale_grey); 
    color: var(--main_table);
    position: absolute;
    top: 20vh;
    left: 50%;
    transform: translateX(-50%);
}

/*————————————————————————— overriding color classes ————————————————————————*/

.mainColor {
    background-color: var(--main);
}
.mainPaleColor {
    background-color: var(--main_pale);
}
.themeBaseColor {
    background-color: var(--theme_base);
}
.themeLightColor {
    background-color: var(--theme_light);
}
.themeXLightColor, tr .themeXLightColor  {
    background-color: var(--theme_Xlight);
}
.themeXXLightColor, tr .themeXXLightColor  {
    background-color: var(--theme_XXlight);
}
.LightGreyColor {
    background-color: var(--light_grey);
}
.color1 {
    background-color: var(--shortcut_1);
}
.color2 {
    background-color: var(--shortcut_2);
}
.color3 {
    background-color: var(--shortcut_3);
}
.color4 {
    background-color: var(--shortcut_4);
}
.color5 {
    background-color: var(--shortcut_5);
}
.color6 {
    background-color: var(--shortcut_6);
}
.classic-accent {
    color: var(--classic_accent);
}
.ok-color {
	color: var(--ok);
}
.warning-color {
	color: var(--warning);
}
.prepared-bgcolor {
	background-color: var(--prep_bg);
}
.shortcut_green {
    color: var(--shortcut_green);
}
.shortcut_gold {
    color: var(--shortdut_gold);
}
.theme_base_color {
    color: var(--theme_base);
}
.theme_light_color {
    color: var(--theme_light);
}
.budget_green {
    color: var(--budget_green);
}
.light_char_color {
    color: var(--light_char);
}
.attention_plus_color {
    color: var(--attention_plus);
}

  /*——————————————————— entry forms display classes —————————————————————*/

.entryFormDescription {
    color: var(--theme_base);
    font-style: italic;
}
.entryFormMainAccounting {
    color: var(--theme_base);
}
.entryFormAnalytic {
    color: #00796b;
}
.entryFormThird {
    color: var(--shortcut_gold);
}
.entryFormSales {
    color: #12a500;
}
.entryFormFixedAsset {
    color: #8d6e63;
}
.entryFormMainChar {
    color: var(--main_char);
}
.entryFormAddress {
    color: #6c5a55;
}
.entryFormOthers {
    color: #336270;
}
  /*—————————————————————————————— loader ———————————————————————————————*/
  
  @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  
    .loaderbg {
      position: fixed;
      top: 0; left: 0; 
      width: 100%; height:100%; 
      background-color: rgba(255, 255, 255, 0.6); 
      z-index: 999;
    }
    
    .simplespinner {
      width: 100px;
      height: 100px;
      position: fixed;
      top: 50%;
      left: 50%;
      margin: -50px 0 0 -50px;
      z-index: 1000;
      border-top: 10px solid rgba(0, 255, 255, 1);
      border-right: 10px solid transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }