/* The side navigation menu */
 .sidenav1,.sidenav2,.sidenav3,.sidenav4 {
  border: 1px solid #383737;
  height: 1200px; /* 100% Full-height */
  position: absolute; /* Stay in place */
  top: 0; /* Stay at the top */
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  overflow-y: hidden; /* Disable vertical 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;
}

.div_A {border: 1px solid #5f5f5f; background:None;display: grid;grid-template-columns: 40px auto 100px 60px;}
.div_A ul{float:left;margin:0px;padding:0px;}
.div_A ul li{list-style:none; }


.div_tiltle { border: 1px solid #5f5f5f;}
.div_parent { background: #2e2e2e; border: 1px solid #5f5f5f;border-top:0px; transition: 1.2s;}
.div_child  { background: #585858;border: 0px; display: grid;grid-template-columns: auto; transition: 0.8s;}

.div_parent:hover {background: #bb4949;}

.div_child_shown { border: 1px solid #5f5f5f;border-width:0px 1px 0px 1px;}  

.title {
    font-family:Arial;
    font-size: 15px;
    font-weight:bold;
    color: #c5c3c3;
    white-space: nowrap;
    padding: 10px 1px 10px 8px;
    text-decoration: none;
}

.parentA,.childA{ 
    font-family: Lucida; 
    font-weight:normal;
    color: #c5c3c3;
    text-decoration: none;
}
.parentA {padding: 8px 1px 8px 8px; font-size: 14px;}
.childA  {display: none; padding: 8px 1px 8px 62px; font-size: 13px;}


.childA_shown,.childA_shown {
    display: block;
    visibility: visible;
    opacity: 1;
}







/****************************************************/
.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;}
}