body{
  background-image: linear-gradient(60deg, #CFE2FF, white, #CFE2FF);
}






.msgwin {height:500px;width:600px; padding: 5px;background-color:#E2E3E5;border-radius: 15px;}
.msgwin {overflow: scroll;display:inline-block;position: relative;margin: 2px;float:left;background-color: #CFF4FC;border: 2px solid black;}
.msgin {background: #CFE2FF;color:black;padding: 5px;margin-left: 10px;margin-right: 10px;text-align: right;font-size: 18px;border-radius: 10px;margin-top: 2px;margin-bottom: 2px;}
.ntime {text-align: right; padding: 0px; font-size: 14px;margin-right: 5px;}
.msgbox {
  background-color:#CFE2FF;
  border: 4px solid #008CBA;
  border-radius: 5px;
  padding: 5px;
}






.primary{background-color: #CFE2FF;}
.secondary{background-color: #E2E3E5;}
.success{background-color: #D1E7DD;}
/*.danger{background-color: #F8D7DA;}*/
.danger{ background-color: #F8D7DA;}
.warning{background-color: #FFF3CD;}
.info{background-color: #CFF4FC;}
.light{background-color: #f8F9FA;}
.dark{background-color: #212529;}

.primary1{background-color: #CFE2FF;}
.secondary1{background-color: #E2E3E5;}
.success1{background-color: #D1E7DD;}
.danger1{background-color: #F8D7DA;}
.warning1{background-color: #FFF3CD;}
.info1{background-color: #CFF4FC;}
.light1{background-color: #f8F9FA;}
.dark1{background-color: #212529;}

.table{background-color: #008CBA; }


#hmenu {
  /*position: fixed; */
  /*position: absolute; */
  position: sticky; 
  top:0px;
  text-decoration: none;
  display: inline-block;
  margin: 2px 0px;
  cursor: pointer;
}

#spots{
  background-color: #212529;
  /*position: relative; */
  left: 0px; 
  top:0px;
  position: absolute; 
  overflow-y: scroll;
  /*height:700px;*/
}

.fullheight{
    height:100vh;
}

.sbutton {
  background-color: #efefef;
  color: black;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 10px 6px;
  cursor: pointer;
  transition-duration: 0.4s;
  z-index: auto; 
}
.abutton {
  background-color: #bebebe;
  color: black;
  padding: 10px 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  margin: 2px 2px;
  transition-duration: 5s;
  z-index: auto; 
}

.button {
  background-color: #efefef;
  color: black;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  transition-duration: 0.4s;
  z-index: auto; 
}
.button1 {box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);z-index: auto;}
.button2:hover {z-index: auto;
  /*background-color: #008CBA;*/
  background-color: #009EFF;
  color: white;
}

.nodecoration{
  text-decoration: none;
}

#loginform{
  position: fixed; 
  z-index: 10000;
  /*left: 400px; */
  left: 45vw; 
  top:100px;
  width:200px;
}


#blanket {background-color:black;   opacity: 0.70;   position:fixed; top:0px;   left:0px;   width:100%;   height:100%;}

#delwarning{
  position: fixed; 
  background-color: #FFF3CD;
  z-index: 10000;
  left: 20vw; 
  font-size: 30px;
  }

.size30{
  font-size: 30px;
}

.increasewarning:hover{
  font-size: 50px;
  position: relative;
}


#statusdiv{
  position: fixed; 
  z-index: 10000;
  /*left: 400px; */
  left: 50vw; 
  top:5px;
  width:800px;
}


.customer, .invoice, .setting, .gate{
  position: absolute;
  padding: 10px;
 margin: 0px 0px;
}



.datatable{
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagewidth{
width:100%; 
}

.center{
  display: flex;
  justify-content: center;
  align-items: center;
}
/*table:before{
  display: inline-block;
  content: "\00d7"; /* This will render the 'X' */
}*/
.mybackground background-color: #6756a9; // purple}

.mybackground1 {background: linear-gradient(0deg, #6756a9 0%, #cbc5e9 100%); // puple to light purple}

.tableborder {border: 6px double #6756a9; // purple border}
.txtshdow{text-shadow: 5px 5px 10px #000000;}
.touppercase {text-transform: uppercase;}

.txtprespective {perspective: 150px; }


.txtprespective1 {transform: rotateX(25deg) rotateY(20deg);
transform-style: preserve-3d;
}

.txtrotate {transform: rotate(35deg);}

.boxscale {transform: scale(1.9);}

.boxskey {transform: skew(31deg, 24deg);}


.gateaccess{
  padding: 20px;
  box-sizing: border-box;
  border: 4px solid #ccc;
  border-radius: 15px;
  background-color: #f8f8f8;
  font-size: 25px;
  resize: none;
}