html,body {
  margin: 0;
  padding: 0;
}
body {
       font-family:  arial;
  font-size:  13px;
//-webkit-font-smoothing: antialiased;
//-moz-osx-font-smoothing: grayscale;
//-webkit-text-stroke: 0.45px;
// or
//-webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.1);
// or
//text-shadow: 10px 2px 3px #000;
}
#topbar {
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 1;
  width: 100%;
 wheight:22px;
  background:#F8F8F8;  
   -webkit-box-shadow: 0 0 15px #9999;
    -moz-box-shadow:    0 0 15px #9999;
    box-shadow:         0 0 15px #9999;	
	
padding-left:5px;	
padding-top:5px;	
}

#topbar span a:hover {
    background: #888888;
    padding-top: 14px;
    padding-bottom: 2px;
    border-radius: 2px;
padding-right:0px;
padding-left:-5px;
}

/*init*/
#topbar {margin-top:0px;height:30px; width:100%;position:fixed}
#topbar span {margin-right:6px;margin-left:5px;}
#topbar span a:hover {background:#dfdfdf;padding-top: 14px;padding-bottom: 2px;  border-radius: 5px;}

* html #topbar {
  position: absolute;
}
#maincont{
oldleft:150px;
  position: relative;
  z-index: 0;
  padding-top: 18px;
  padding-left: 10px;
  padding-bottom: 40px;
  margin-left: 0px;
  margin-right: 0px;
 // background: //#ccc;
  min-height: 100%;
 // transition:  .7s;  
margin-top:18px;
}
#bottombar {
  position: fixed;
  bottom: 0;
  left: 0px;
  padding-left:10px;
  z-index: 2;
  width: 100%;
  height:10px;
}

* html #bottombar {
  position: absolute;
  bottom: -1px;
}

#bottombar {
  height: 16px;
  font-size:12px;  
  background: rgb(220,220,220,0.9);
color:inherit;
  //background:#F8F8F8;  
   -webkit-box-shadow: 0 0 1px grey;
    -moz-box-shadow:    0 0 1px grey;
    box-shadow:         0 0 1px grey;	
}
#bottombar a:link,a:visited {
text-decoration: none;
color:inherit;
}
#maincont a:link,a:visited {
text-decoration: none;
color:inherit;
}
#sbcont{
display:none;
    top:33px;
    width: 0px;	
    height: 100%;
	left:-200px;
    position: fixed;
    //outline: 1px solid;  
    //border-right: #8888 1px solid;	
	  box-shadow: 15px 10px 15px -20px #bbb;

//transition:  .5s;	 
	z-index:1;
}
.mhead {float:left;margin-top:-8px;font-size:26px;}
.mhead{
	display:none;/*Off when wider than 800(bellow set) */	
}
.whead{display:none;}
@media screen and (max-width: 500px) {
	.mhead{display:block;padding-left:5px;	
padding-top:5px;	}
	.whead{display:none;}	
}	
.right {float:right;padding-right:10px;}

.customoon {
	//filter:  brightness(0%) invert(1);
	//filter: brightness(50%) invert(70%);
	filter: invert(91%) sepia(47%) saturate(1810%) hue-rotate(313deg) brightness(106%) contrast(103%);
	
	}
.custodark {
	filter:  brightness(0%) invert(1);
	//filter: brightness(50%) invert(70%);	
	filter:  brightness(100%) invert(1);
}
.custolight {
	body {background:inherit;}	
}
.vsmenu {
padding: 12px 8px; 
background:rgba(228, 240, 247,0.1) ;

}
.vsmenu a {   
  display: block;
  text-align: left; 
  padding: 4px 8px; 
  border-bottom: rgba(195,195,195,0.1) 1pt solid;
  text-decoration: none;
  color:inherit;
}
.vsmenu a:hover {
  background-color: rgba(62, 110, 138,0.6) ;
  border-radius:2px;	
}
.vsmenu a.active {
// text-decoration: underline;
//  border-bottom: slateblue 1pt solid; //rgba(195,195,195,0.5) 1pt solid;
//     -webkit-text-decoration: slateblue solid underline;
	//text-decoration: slateblue solid underline;
	-webkit-text-underline-position: under;
	text-underline-position: under;
	text-decoration-thickness: 0.05em;
 color:  #bf0808;//#183ea8;//#009080;
//color:white;
//black;
}	
#maincont {

/* animation for sliding */
  -webkit-animation: linear ;
  -webkit-animation-name: run0;
  -webkit-animation-duration: 0s;
 /* animation for sliding */
}
@-webkit-keyframes run0 {
  0% {left: 0%;width:10%;}
5% {left:10px;width:90%;}  
10% {left:20px;width:100%;}  
100%{left:150px;width: 100%;}
}

.dark-mode {
	background-color: black;
	color: var(beautifulColor);
	color: var(--global-text-color);
	color: grey; 
	}
.sun-mode {
		color: orange;
	}
.green-mode {
	//background-color: black;
	color: green;
}
.red-mode {
	
		color: red;
	}
.button0 {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;

text-align: bottom;
  text-decoration: none;
  display: inline-block;
  font-size: 9px;
  //margin: 4px 2px;
    border-radius:5px;	
  cursor: pointer;
padding: 2px 4px;
  line-height: 1;
  display: inline-block;
    padding-top: 3.5px; 
}
.button1 {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 2px 4px;
  text-align: center;
  text-decoration: none;  
  font-size: 13px;  
  cursor: pointer;
     justify-content: center; /* Horizontal center alignment */
    border-radius:6px;	 
   display: inline-flex;
  align-items: center; 
  line-height: 1;
  display: inline-block;
    padding-top: 2px;

}
.button2 {
  background-color: #4CAF50; /* Green */
  border: 1px solid #999999;
  color: inherit;
  padding: 2px 8px;
  text-align: center;
  text-decoration: none;  
  font-size: 13px;
  //margin: 2px 2px;
  cursor: pointer;
     justify-content: center; /* Horizontal center alignment */
    border-radius:6px; 
   //display: inline-flex;
  align-items: center; 
}
.button3 {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 4px 8px;
  text-align: center;
  text-decoration: none;  
  font-size: 15px;  
  cursor: pointer;
     justify-content: center; /* Horizontal center alignment */
    border-radius:6px;	 
   display: inline-flex;
  align-items: center; 
}
.blue {background-color: #008CBA;color: white;} /* Blue */
.red {background-color: #e82727;color: white;} /* Red */ 
.green {background-color: # #79d279; color: black;} /* Gray */ 
.grey {background-color: rgba(125,125,125,0.1);color: black;} /* Gray #ddd; */ 
.yellow {background-color: #ffff66; color: black;} /* Gray */ 
.black {background-color: #222;} /* Black */

.iwarning {
  width: 50px;
  height: 20px;
  color:inherit;
  -webkit-animation: brink1 1s infinite;  /* Safari 4+ */
  -moz-animation: brink1 1s infinite;  /* Fx 5+ */
  -o-animation: brink1 1s infinite;  /* Opera 12+ */
  animation: brink1 1s infinite;  /* IE 10+, Fx 29+ */
}

@-webkit-keyframes brink1 {
  0%, 19% {
    background-color: #777;//rgb(117, 209, 63);
  //  border: 1 solid #e50000;
  }
   40%,100% {
    background-color: #ff0000;//#e50000;
   // border: 1px solid red;//rgb(117, 209, 63);
  }
}
.ibrinking {
 width: 50px;
  height: 13px;
  color:inherit;
  //background:grey;
  -webkit-animation: brink2 2s infinite;  /* Safari 4+ */
  -moz-animation: brink2 2s infinite;  /* Fx 5+ */
  -o-animation: brink2 2s infinite;  /* Opera 12+ */
  animation: brink2 2s infinite;  /* IE 10+, Fx 29+ */
}

@-webkit-keyframes brink2 {
   0%,5% {
   color:green;
  // background-color:inherit;   #222;//rgb(117, 209, 63);
     opacity: .9;
   // border: 2 solid #e50000;
  }
   20%,100% {
    opacity: 1;
	color:black;
//	background-color:filter: invert(99%) sepia(0%) saturate(500%) hue-rotate(0deg);
   // border: 1px solid red;//rgb(117, 209, 63);
  }}
  
#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #ed1b24;
  color: #fff;  
  border-radius: 5px;
  padding: 5px 10px;
  position: fixed;
  z-index: 12;
  right: 4%;
  top: 11px;
  font-size: 13px;
-webkit-box-shadow: 0px 7px 18px 10px rgba(221,221,221,.3);
-moz-box-shadow: 0px 7px 18px 10px rgba(221,221,221,.3);
box-shadow: 0px 7px 18px 10px rgba(221,221,221,.3); 
}
#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.3s, fadeout 0.5s 2.5s;
  animation: fadein 0.3s, fadeout 0.5s 2.5s;
}		
#snackbar2 {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 6px;
  position: fixed;
  z-index: 11;
  left: 50%;  
  bottom: 10px;
  font-size: 15px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.6);
	box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.6);
	position: absolute;
	width:30%;
       height: 10px;
       margin:0 auto;
       display:table;
       position: fixed;
       left: 0;
       right:0;
       //border:1px solid #dddddd;
       -webkit-transform:translateY(-10%);
       -moz-transform:translateY(-10%);
       -ms-transform:translateY(-10%);
       -o-transform:translateY(-10%);
       transform:translateY(-10%);
}
#snackbar2.show {
  visibility: visible;
  -webkit-animation: fadein2 0.5s, fadeout2 0.5s 2.5s;
  animation: fadein2 0.5s, fadeout2 0.5s 2.5s;
}

#snackbar5 {
  visibility: hidden;
  min-width: 100px;
  margin-left: -125px;
  background-color: #dadee6;
  color: #555555;
//  text-align: left;
  padding: 4px;
  position: fixed;
  z-index: 11;
 //cursor: pointer;
  font-size: 14px;
    border-radius: 5px;
  -webkit-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.5);
//box-shadow: 10px 20px 20px 20px rgba(0,0,0,0.3);
  border: 1px solid #fafafa;
// width: 100px;
// width:70%;
       height: 100px;
       margin:0 auto;
       display:table;
       position: fixed;
       left: 0;
       right:0;
       top: 16%; 
       top: 100px;
padding-right: 10px;
padding-left:26px;
       border:1px solid #8888;
       -webkit-transform:translateY(-50%);
       -moz-transform:translateY(-50%);
       -ms-transform:translateY(-50%);
       -o-transform:translateY(-50%);
       transform:translateY(-50%);

}
#snackbar5 input {
    //width: 100%; /* force to expand to container's width */ 
    border: 1px solid #afafaf;
background:#faFaFa;  
}
#snackbar5 label {
color:#222222;
}
#snackbar6 {
  visibility: hidden;
  min-width: 150px;
  margin-left: -125px;
  background-color: #eaeaea;
  color: #111111;
  text-align: center;
  padding: 5px;
  position: fixed;
  z-index: 11;
 //cursor: pointer;
  font-size: 15px;
    border-radius: 5px;
  -webkit-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 19px 29px -15px rgba(0,0,0,0.5);
//box-shadow: 10px 20px 20px 20px rgba(0,0,0,0.3);
  border: 1px solid #adadad;
 width:300px;
// width:20%;
       height: 0px;
       margin:0 auto;
       display:table;
       position: fixed;
       left: 0;
       right:0;
       top: 16%; 
  top: 100px;
       border:1px solid #d1d1d1;
       -webkit-transform:translateY(-50%);
       -moz-transform:translateY(-50%);
       -ms-transform:translateY(-50%);
       -o-transform:translateY(-50%);
       transform:translateY(-50%);
}
#snackbar5.show {
  visibility: visible;
  //-webkit-animation: fadein2 0.5s;
  //animation: fadein2 0.5s;
}
#snackbar6.show {
  visibility: visible;
  //-webkit-animation: fadein2 0.5s;
  //animation: fadein2 0.5s;
}
#snackbarx {

visibility: hidden;
  min-width: 150px;
  margin-left: -125px;
width:400px;
  background-color: #7b91b8;//#ed1b24;//red;//#333;
  color: #fff;  
  border-radius: 5px;
  padding: 5px 10px;
  position: fixed;
  z-index: 12;
  right: 4%;
  top: 11px;
  font-size: 13px;
-webkit-box-shadow: 0px 7px 18px 10px rgba(221,221,221,.3);
-moz-box-shadow: 0px 7px 18px 10px rgba(221,221,221,.3);
box-shadow: 0px 7px 18px 10px rgba(221,221,221,.3); 
overflow-y:auto;
}
#snackbarx.show {
  visibility: visible;
  -webkit-animation: fadein 0.3s;
  animation: fadein 0.3s;
}
@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;} 
  to {top: 10px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 10px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 10px; opacity: 1;} 
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 10px; opacity: 1;}
  to {top: 0; opacity: 0;}
}
@-webkit-keyframes fadein2 {
  from {bottom: 0; opacity: 0;}
  to {bottom: 10px; opacity: 1;}
}

@keyframes fadein2 {
  from {bottom: 0; opacity: 0;}
  to {bottom: 10px; opacity: 1;}
}

@-webkit-keyframes fadeout2 {
  from {bottom: 10px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout2 {
  from {bottom: 10px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

.close5 {
cursor: pointer;
background-color:#ff7566;
padding:2px 5px;
margin-left:94%;
//margin-right:50px;
top:-12px;
font-size:13px;
color:white;
 border-radius: 50%;
}
.close5:hover {
cursor: pointer;
background-color: #ed1b24;
color:white;

}
.close6 {
cursor: pointer;
background-color:#ff7566;
padding:2px 5px;
margin-left:90%;
font-size:13px;
color:white;
border-radius: 50%;
}
.close6:hover {
cursor: pointer;
background-color: #ed1b24;
padding:2px 5px;
margin-left:90%;
font-size:13px;
color:white;
 border-radius: 50%;
}
.closex {
cursor: pointer;
background-color:#ff7566;
padding:2px 5px;
margin-left:97%;
font-size:13px;
color:white;
 border-radius: 50%;
}
.closex:hover {
cursor: pointer;
background-color: #ed1b24;
padding:2px 5px;
margin-left:97%;
font-size:13px;
color:white;
 border-radius: 50%;
}
/*end snackbar*/
/*breadcrumb*/
.breadcrumb {  
position:relative;
	//padding: 0px 1px;
	width:100%;
	color: grey;//#0275d8;
	font-size:13px;
	top:5px;
	margin-left:0px;
   
}
.breadcrumb a {
	text-decoration: none;
	//color:black;	
	  color: grey;//#0275d8;
    padding: 0px 2px;
	
	}
	
.breadcrumb a:hover {
	color: grey;//#0275d8;;
	
	text-decoration: underline;
	-webkit-text-decoration-color: currentColor; /* Safari */  
	text-decoration-color:currentColor;	
    -webkit-text-decoration: slateblue solid underline;
	//text-decoration: slateblue solid underline;
	-webkit-text-underline-position: under;
	text-underline-position: under;
	text-decoration-thickness: 0.05em;
	  //text-decoration-thickness: 2px;
}
.breadcrumb a.active {
 // background-color: #95bfe6;
 text-decoration: underline;
     -webkit-text-decoration: slateblue solid underline;
	//text-decoration: slateblue solid underline;
	-webkit-text-underline-position: under;
	text-underline-position: under;
	text-decoration-thickness: 0.05em;
}	
/*breadcrumb*/
.pg-normal {
	color: #888;
	font-family:arial;
	font-size: 14px;
	cursor: pointer;
	background: #eeee;//#D0B389;
	padding: 2px 4px 2px 4px;
	border-radius: 5px;

}

.pg-selected {
	color: #ffff;
	font-family:arial;
	font-size: 14px;
	background: #666;
	padding: 2px 4px 2px 4px;
    border-radius: 5px;

}
#pageNavPosition {
right:-100px;
}

#tble {
font-family:arial;
border-collapse:collapse;
//border: solid 1px #9f9f9f;
	  box-shadow: 25px 20px 15px -20px #bbb;
font-size:small;
box-shadow: 0px 20px 15px -20px #bbb;
}
#tble a:link,a:visited {
text-decoration: none;
color:inherit;

}
#tble td {
padding: 5px;
//border-right: solid 1px #efefef;
//box-shadow: 15px 10px 15px -20px #bbb;

}
#tble th {
border: 0px solid #7f7f7f;
padding: 5px;
height: auto;
background: #D0B389;
color:rgba(225,225,225,.9);
background-color: rgba(52, 63, 71,.9);
 font-weight: 400;
 color: #82afe8;
}
#tble th a {
text-decoration: none;
text-align: center;
padding-right: 20px;
font-weight:bold;
white-space:nowrap;
color:inherit;
}

#tble tr:nth-child(even){background-color: rgba(195,195,195,0.1);color:inherit;}
#tble tr:hover {
          background-color: rgba(85,121,154,0.2);//#d6e3ff;
		  color:inherit;
		  cursor:pointer;
}
#mySTInput {
 
  //background-position: 10px 10px;
  background-repeat: no-repeat;
  //width: 99%;
  
  font-size: 14px;
  padding: 4px 0px 4px 1%;
  width:48%;  
  border: 1px solid #ddd;
  margin-bottom: 12px;
  margin-right:0%;
}
#selecti {
    background: #eee;
sfloat:right;
}
.outertb{
        overflow-y: auto;
        height:300px;
        }

.outertb table{
        width: 100%;
        table-layout: fixed; 
        //border : 1px solid black;
        //border-spacing: 1px;
    }

.outertb table th {
            text-align: left;
            top:0;
            position: sticky;
            //background-color: #f1f1f1;  			
	
	
}

Edit file:z51.css15730