/* The side navigation menu */
 .sidenav1,.sidenav2,.sidenav3,.sidenav4 {
  border: 1px solid #383737;
  height: 100%; /* 100% Full-height */
  position: fixed; /* Stay in place */
  top: 0; /* Stay at the top */
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 0px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav1 {
  width: 12px; /* 0 width - change this with JavaScript */
  background-color: #111; /* Black*/
  z-index: 105; /* Stay most top */
}
 .sidenav2 {
  width: 24px; /* 0 width - change this with JavaScript */
  background-color: #1F1F1F; /* Black*/
  z-index: 104;
}
.sidenav3 {
  width: 36px; /* 0 width - change this with JavaScript */
  background-color: #111; /* Black*/
  z-index: 103;
}
.sidenav4 {
  width: 48px; /* 0 width - change this with JavaScript */
  background-color: #1F1F1F; /* Black*/
  z-index: 102;
}


/* The navigation menu links */
.sidenav1 a,.sidenav2 a,.sidenav3 a,.sidenav4 a  {
  text-decoration: none;
  /* defined in bellow Cell_01 a, .Cell_02 a, .Cell_03 a */
}


/* When you mouse over the navigation links, change their color */
.sidenav1 a:hover,.sidenav2 a:hover,.sidenav3 a:hover,.sidenav4 a:hover {
  text-decoration: none;
  /* defined in bellow Cell_01 a:hover, .Cell_02 a:hover, .Cell_03 a:hover */
}


/* Position and style the close button (top right corner) */
.sidenav1 .closebtn,.sidenav2 .closebtn,.sidenav3 .closebtn,.sidenav4 .closebtn {
  position: absolute;
  top: -4px;
  right: 6px;
  font-size: 28px;
  margin-left: 20px;
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}



/******************************* Below customize by Michael Au ************************************/
.BAR01,.BAR02,.BAR03,.BAR04 {
  position: absolute;
  top: 16px;
  margin-left: 8px;
  font-family:Arial;
  font-size: 16px;
  font-weight:bold;
  color: #818181;
  white-space: nowrap;
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

hr.line1 {position: absolute; top: -10px; right:-10px; width: 100%; }  /* sidenavBox1 width minus 20px */
hr.line2 {position: absolute; top: -10px; right:-10px; width: 100%; }  /* sidenavBox2 width minus 10px */
hr.line3 {position: absolute; top: -10px; right:-10px; width: 100%; }  /* sidenavBox3 width minus 10px */
hr.line4 {position: absolute; top: -10px; right:-10px; width: 100%; }  /* sidenavBox4 width minus 10px */

#Open_HandleA,#Open_HandleB,#Open_HandleC,#Open_HandleD {
  display:block;
  position: absolute;
  font-family:Arial;
  font-size: 10px;
  font-weight:bold;
  color: #818181;
  z-index: 188; /* Stay most top */
  transition:0.5s;
  transform: rotate(-90deg);
  -ms- transform: rotate(-90deg); 
  -moz- transform: rotate(-90deg); 
  -webkit- transform: rotate(-90deg); 
  -o- transform: rotate(-90deg); 
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
} 

#Open_HandleA {top: 60px;left: -9px;}     /* top: 15px;  left: -9px; */
#Open_HandleB {top: 105px;left: 3px;}      /* top: 60px;  left: 3px; */
#Open_HandleC {top: 150px;left: 15px;}    /* top: 105px; left: 15px; */ 
#Open_HandleD {top: 195px;left: 27px;}    /* top: 150px; left: 27px; */

.sidenavBox1,.sidenavBox2,.sidenavBox3,.sidenavBox4 {border: 0px dotted yellow; position: absolute; right: 10px;}
.sidenavBox1{width: 400px;}
.sidenavBox2{width: 430px;}
.sidenavBox3{width: 330px;}
.sidenavBox4{width: 300px;}

#tittle_line1,#tittle_line2,#tittle_line3,#tittle_line4 {
  display:block;
  border: 0px solid yellow;
  width: 100%;
  position: absolute; top: 45px; left:0px;
}

.sidenavTable1{
  visibility: hidden;
  border: 0px solid #5f5f5f;
  width: 100%;
  position: absolute; top: 45px; left:0px;
  border-collapse: collapse; padding-bottom: 1px;
}

.sidenavTable2,.sidenavTable3,.sidenavTable4 {
  visibility: hidden;
  border: 1px solid #5f5f5f;
  width: 100%;
  position: absolute; top: 45px; left:0px;
  border-collapse: collapse; padding-bottom: 1px;
}

.tableA {background:None;display: grid;border: 1px solid #5f5f5f;grid-template-columns: 40px auto 100px 60px;}
.tableA_title {border-bottom:0px;}

.tableA ul{float:left;margin:0px;padding:0px;}

.tableA ul li{list-style:none;padding:0px;}

.tableA ul li.title {
    font-family:Arial;
    font-size: 15px;
    font-weight:bold;
    color: #c5c3c3;
    white-space: nowrap;
    padding: 4px 2px 4px 4px;
    text-decoration: none;
}

.tableA ul li.level_1, .tableA ul li.level_2 { 
    font-family: Lucida; 
    font-size: 14px;
    font-weight:normal;
    color: #c5c3c3;
    padding: 4px 2px 4px 4px;
    text-decoration: none;
}
.tableA ul li.level_1 {background:#2e2e2e;}
.tableA ul li.level_2 {background:#585858;}


.tableA ul li a{
  text-decoration: none;
  font-size: 15px;
  color: #818181;
  display: block;
  transition: 0.3s;
  white-space: nowrap;
}

.tableA ul li a:hover {color: #ddf6f5;}

.tableA ul li.blink a:hover {color: #ac3003;}




/****************************************************/
.Cell_01, .Cell_02, .Cell_03, .Cell_04 {
  border: 1px Solid #818181; 
  padding: 8px 2px 8px 4px;
  text-decoration: none;
  font-family: Lucida; 
  font-size: 15px;
  color: #818181;
}

.Cell_01 a,.Cell_02 a,.Cell_03 a,.Cell_04 a {
  text-decoration: none;
  font-size: 15px;
  color: #818181;
  display: block;
  transition: 0.3s;
  white-space: nowrap;
}

.Cell_01 a:hover {color: #ddf6f5;}

.Cell_02 a:hover {color: #ac3003;}

.Cell_03 a:hover {color: #ddf6f5;}

.Cell_04 a:hover {color: #ddf6f5;}

.Cell_01aa, .Cell_02aa, .Cell_03aa {
  border: 1px Solid #818181;
  padding: 8px 2px 8px 4px;
  text-decoration: none;
  font-size: 15px;
  color: #818181;
  text-align:center
}
/****************************************************/




.closebtn {
  text-decoration: none;
  font-size: 15px;
  color: #818181;
  display: block;
  white-space: nowrap;
  margin-top: 7px;
}

a.closebtn:hover {color: red;}









/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav1 {padding-top: 15px;}
  .sidenav1 a {font-size: 18px;}
  .sidenav2 {padding-top: 15px;}
  .sidenav2 a {font-size: 18px;}
}