@import url("c01_globalVariables.css");

/* Structural Layout CSS */
    html{height:100%;width:100%;}
    html {scroll-behavior: smooth;}
    body{position:relative;height:100%;width:100%;}
    *{box-sizing: border-box;border:0; padding: 0; margin: 0;font: var(--poppins13);color:var(--grayDark);}
    .container{width: 100%; height: 100%;box-sizing: border-box;border:0; padding: 0; margin: 0;font: var(--poppins13);color:var(--grayDark);}
    .row{display: flex; flex-direction: row;}
    .column{display: flex; flex-direction: column;}
    .mobile{display: none;}
    .laptop{display: block;}
    .invisible {visibility: hidden;opacity:0;transition:opacity 2s;}
    .visible {visibility:visible;opacity:1;transition:opacity 2s;}
    .relative{position: relative;} .absolute{position: absolute;} .zindex1{z-index:1;} .zindex2{z-index:2;}
    .top0px{top:0;} .right0px{right:0;} .left0px{left:0;} .bottom0px{bottom:0;} .top50px{top:50px;} 
    .scrollBar{overflow: auto;}
    .hand{cursor: pointer;}
    
    .bordered {border:1px solid #F7AA40;}
    .rounded {border-radius: 10px;} 
    .floatL{float:left;}

    
    .w100{width:100%;} .w50{width:50%;} .w33{width:33.333%} .w25{width:25%;} .w20{width:20%;} 
    .w50px{width:50px;} .w30px{width:30px;} .w20px{width:20px;} .w0px{width:0;} 
    .w100-100px{width:calc(100% - 100px);} .w100-50px{width:calc(100% - 50px);}.w100-30px{width:calc(100% - 30px);}
    .h100{height:100%;} .h50{height:50%;} .h33{height:33.333%} .h25{height:25%;} .h20{height:20%;} 
    .h50px{height:50px;} .h40px{height:40px;}.h30px{height:30px;} .h20px{height:20px;} .h15px{height:15px;} .h0px{height:0;} 
    .h100-50px{height: calc(100% - 50px);}.h100-30px{height: calc(100% - 30px);}.h100-60px{height: calc(100% - 60px);}.h100-90px{height: calc(100% - 90px);}.h100-120px{height: calc(100% - 120px);}
    
    .pad20px{padding:20px;}.pad10px{padding:10px;}.pad8px{padding:8px;}.pad6px{padding:6px;}.pad5px{padding:5px;} .pad3px{padding:3px;}.pad1px{padding:1px;}
    .marBot5px{margin-bottom:5px;} .marBot15px{margin-bottom:15px;} .marBot25px{margin-bottom:25px;}
    
    /* Structural Layout CSS -Responsive */
    @media screen and (max-width: 600px) {
        .row{display: flex; flex-direction: column;}
        .w50{width:100%;}/* delete entire line */
        .mobile{display: block;}
        .laptop{display: none;}
        .w33{width:100%} .w25{width:100%;} .w20{width:100%;} 
    }

/* alignment*/
    .verticallyAligned {display: flex; flex-direction: column; justify-content: center;}
    .centered{text-align: center;} .leftAlign{text-align: left;} .rightAlign{text-align: right;}

/* images css */
    .img-fluidH {max-width: 100%; height: auto;}
    .img-fluidV {max-height: 100%; width: auto;}
    .photoRounded{border-radius: 50%;} 

   /*colors*/
   .backBlue{background-color:var(--blue);} 
   .backBlueDark{background-color:var(--blueDark);} 
   .backOrange{background-color:var(--orange);} 
   .backOrangeDark{background-color:var(--orangeDark);} 
   .backOrangeLight{background-color:var(--orangeLight);} 
   .backGrayDark{background-color:var(--grayDark);} 
   .backWhite{background-color:var(--white);} 
   .backWhiteOff{background-color:var(--whiteOff);} 

   .fontBlue{color:var(--blue);} 
   .fontBlueDark{color:var(--blueDark);} 
   .fontOrange{color:var(--orange);} 
   .fontOrangeDark{color:var(--orangeDark);} 
   .fontOrangeLight{color:var(--orangeLight);} 
   .fontGrayDark{color:var(--grayDark);} 
   .fontWhite{color:var(--white);} 
   .fontWhiteOff{color:var(--whiteOff);} 
   
   .font10{font-size:10px;}
   .font15{font-size:15px;}
   .font20{font-size:20px;}
   .font30{font-size:30px;}
   .font40{font-size:40px;}
   .font50{font-size:50px;}
   
   /*generic table*/
    .tableSimple{border-collapse: collapse;width: 100%;font-family: monospace;}
    .tableSimple th {text-transform: uppercase;}
    .tableSimple th, td {text-align: left;padding: 2px;}
    .tableSimple tr:nth-child(even){background-color: rgba(45, 65, 102, 0.3);}
    .tableSimple th {background-color: var(--blue);color: white;}
    /*updatable table*/
    .tableUpdatable{border-collapse: collapse;width: 100%;}
    .tableUpdatable th {text-transform: uppercase;}
    .tableUpdatable th, td {text-align: left;padding: 2px;}
    .tableUpdatable th {background-color: var(--blue);color: white;}
   
   /*specific Elements*/     
   #appHeader{}
   #appHeader_menuBtn{display: none;}
        @media screen and (max-width: 600px) { #appHeader_menuBtn{display:block;} }
   #appHeader_nav{display: flex; flex-direction: row;position:relative;opacity:1;transition:opacity 2s;visibility:visible;width:50%;z-index:1;}
        @media screen and (max-width: 600px) {#appHeader_nav{display:flex;flex-direction: column;position:absolute;top:50px;left:0;visibility:hidden;opacity:0;background-color:var(--orange);}}
   #appBody{position: relative;overflow:auto;height:calc(100% - 50px);background-color:var(--whiteOff);}
   #appMessages{position:absolute;top:100px;left:100px;width:0px;height:0px;}
   
   #login{right:0;top:0;left:unset;bottom:unset;width:300px;}
         @media screen and (max-width: 600px) {#login{right:unset;top:unset;left:0;bottom:0;width:100%;}}
         
    .treeParent{padding:10px;}
    .treeChildren{height: 30px;padding: 5px; top: 100%; }
        @media screen and (max-width: 600px) {.treeChildren{top: 0%; left:100%;}}
    .chartBorder{padding: 10px 10px 10px 10px;
                border: 1px solid #BFBFBF;
                background-color: white;
                box-shadow: 3px 3px 3px #aaaaaa;
                border-radius: 8px;
    }