:root{
    --html-font-family: Verdana,sans-serif;
    --html-font-S12:12px; --font-S36: 36px; --font-S30: 30px; --font-S24: 24px; --font-S20: 20px; --font-S18: 18px; --font-S16: 16px;
    --Font-Color:white;
    --html-line-H1:1.5;
    --html-BG: #575a5d;
    --input-P: 3px; --input-D: block; --input-B:1px solid #ccc; --input-W:100%;
    --color-B: #58b055;
    --border-S: 1px;
    --border-ST: solid;
    --border-B: var(--border-S) var(--border-ST) var(--color-B)!important;
    --radio-W: 12px; --radio-position: relative;
    --CB-W: 12px; --CB-position: relative;
    --select-P:3px 0; --select-W:100%; --select-B:1px solid #ccc;
    --button-B:none; --button-MIN-W:90px; --button-D:inline-block; --button-P:4px 8px; --button-Text-Allign:center; --button-Cursor:pointer;
    --button-H-C: #000!important; --button-H-BC:#556e50 !important;

}
/* HTML, BODY*/
html,body{
    font-family: var(--html-font-family);font-size:var(--html-font-S12);line-height:var(--html-line-H1); background-color:var(--html-BG);
    color:var(--Font-Color);
}
.html-BG{
    background-color:var(--html-BG);
}
/* Header */
h1{font-size: var(--font-S36);} h2{font-size: var(--font-S30);} h3{font-size: var(--font-S24);} h4{font-size: var(--font-S20);} h5{font-size: var(--font-S18);} h6{font-size: var(--font-S16);}
/*input*/
.py-input{padding:var(--input-P);display:var(--input-D);border:var(--input-B); width:var(--input-W)}
/*border*/
.py-border{border:var(--border-B)}
.py-border-top{border-top:var(--border-B)}.py-border-bottom{border-bottom:var(--border-B)}
.py-border-left{border-left:var(--border-B)}.py-border-right{border-right:var(--border-B)}
/*radio*/
.py-radio{width:var(--radio-W);position:var(--radio-position);}
/*check*/
.py-check{width:var(--CB-W);position:var(--CB-position);}
/*select*/
.py-select{padding:var(--select-P);width:var(--select-W);border:var(--select-B)}
/*button*/
.py-button{border:var(--button-B);min-width: var(--button-MIN-W);display:var(--button-D);padding:var(--button-P);text-align:var(--button-Text-Allign);cursor:var(--button-Cursor);}
.py-button:hover{color:var(--button-H-C);background-color:var(--button-H-BC)}

/* grid */
.grid-inline{
    display:grid; grid-template-columns: repeat(1, 1fr);grid-gap: 10px;
}
.grid-double{
    display:grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px;
}
.grid-triple{display:grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;}
.grid-four{display:grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px;}
.grid-six{display:grid; grid-template-columns: repeat(6, auto); grid-gap: 10px;}
.grid-twelve{display:grid; grid-template-columns: repeat(12, auto); grid-gap: 10px;}
.grid-eight{display:grid; grid-template-columns: repeat(8, auto); grid-gap: 10px;}

/*flex*/
.flex-box{ display:flex;}


.icon-bar{
  display: block;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 8px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}
.icon-bar span {
  padding: 10px;
}
.icon-bar:hover {
  background-color: #000;
}

.tab-grid{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 26px 1fr;
    grid-template-areas: "header" "content";
    height: 100%;
}
.tab-header{
    grid-area: header
}
.tab-content{
    grid-area: content
}
.tab-header-color{
    background-color: #353a38;
    color: #fff;
}

.pzheader-Portal{
    grid-area: H;
}
.pzFooter-Portal{
    grid-area: F;
}
.pzleftnav-Portal{
    grid-area: L;
}
.pzrightnav-Portal{
    grid-area: R;
}
.pzMain-Portal{
    grid-area: M;
    overflow: auto;
}
.menu-icon {display:none;}

.sidenav_close-icon {
  display: none;
}
@media screen and (max-width: 767px) {

    .pzleftnav-Portal{
        grid-area: L;
        position: fixed;
        overflow-y: auto;
        background-color: #394263;
        color: #FFF;
        width: 90px;
        transform: translateX(-245px);
        transition: all 0.6s ease-in-out;
        z-index: 2;
        height:100%;
    }
    .menu-icon {
      position: fixed;
      display: flex;
      top: 5px;
      left: 10px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      z-index: 1;
      cursor: pointer;
      padding: 12px;
      background-color: #DADAE3;
    }
    .sidenav_close-icon {
      position: absolute;
      display: block;
      top: 8px;
      right: 12px;
      cursor: pointer;
      font-size: 20px;
      color: #ddd;
    }
}
.sidenav--active {
    transform: translateX(0);
}