body {font-family: 'Lato', sans-serif;font-size:1.1em;margin:0;}
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey; border-radius: 5px;}
::-webkit-scrollbar-thumb {background: #444;border-radius: 5px;}
::-webkit-scrollbar-thumb:hover {background: #666;}
.mybody {position:fixed;left:0;right:0;top:0;bottom:0;height:100%;overflow:none;font-size:1.1em;}
#CHATT {background:#eee;position:fixed;right:0;z-index:999999;width:320px;bottom:0;top:61px;padding-bottom:5px;border:1px solid #ccc;}
#CHATTOP {text-align:right;padding:5px;color:#000;height:20px;cursor: move;}
#CHATTOP h4 {float:left;margin:0 0 0 5px;font-size:16px;padding:0;}
#CHATBOX {height:calc(100% - 85px);overflow-y:auto;background:#fff;margin:5px;padding:5px;font-family: Helvetica, sans-serif;}
.CHATF {background:#eee;margin:0 5px;padding:0;}
.obrt {margin:0;}
.obrx {margin-bottom:2px;background:#fcfcfc;border:1px solid #ccc;border-radius:2px;padding:0 10px;}
.obrn {color:#d91b7b;margin-right:20px;}
.obrw {color:#999;font-size:11px;}
.obri {color:#444;font-size:14px;background:#fff;border:1px solid #ddd;padding:5px 10px;border-radius:20px;margin:3px 2px 2px 2px }
#pesanku {display:inline-block;background:#fff;float:left;font-size:15px;color:#555;padding:0 10px;width:256px;height:50px;border:1px solid #ccc;overflow-y:auto;}
.popss{position:fixed;z-index:99999999999999;top:45%;left:20%;right:20%;padding:10px 5px;text-align:center;color:#fff;font-size:1.2em;border:10px solid #eee;border-radius:0px;opacity:0.9;box-shadow: 0 25px 45px #000;}
#toptop {text-align:left;position:fixed;color:#fff;top:8px;right:150px;font-size:11px;padding:2px 2px;border:none;}
.popss p {padding:20px 0}
.popss {animation:animatezoom 0.3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
#smile {height:50px;width:26px;float:left;padding:0;border:1px solid #ccc;}
#kirpes {height:50px;width:26px;float:right;padding:0;border:1px solid #ccc;}
#smilx {position:absolute;margin-top:-130px;width:200px;background:#fff;border:1px solid #ccc;}
#smilx img {margin:0 3px;}
#CHATT img {max-width:98%;}
.top {font-size:24px;padding:2px 5px;background:#274164;border-bottom:1px solid #aaa;height:48px;color:#fff;}
.menu {
    display: inline-block;
    padding: 2px 7px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    border: 1px solid #4460a1;
    
}
.menu:hover {
    display: inline-block;
    padding: 2px 7px;
    color: orange;
    font-size: 24px;
    cursor: pointer;
    border: 1px solid red;
    background: red;
}
table .fa {cursor:pointer;margin:2px 3px;}
td .fa-file {color:blue;font-size:20px;}
td .fa-trash {color:red;font-size:20px;}
td .fa-print {color:green;font-size:20px;}
.judul {border-top:1px solid #ccc;margin-top:8px;}
#layarbadan {font-size:1.2em;}
#displayx a {color:black;padding:10px;}
#displayx a:hover {background:red;color:#fff;}
.pageU {width:100%;margin:3px 5px;height:calc(100% - 41px); overflow-y:auto;}
.overlay {
  height:0px;
  position: fixed;
  z-index: 1;
  top: 48px;
  left: 0;right:0;
  background-color: #eee;opacity:1;
  overflow-x: hidden;
  transition: 0.5s;
}
.overlay-content {
  position: relative;
  width: 100%;text-align:left;
}
.overlay a {
  text-decoration: none;
  font-size: 14px;text-align:center;
  color: #333;
  display: inline-block;
  transition: 0.6s;
  border:1px solid #dcdcdc;
  margin:2px;height:130px;
  width:calc(20% - 10px);
  padding:10px 0 10px 0;
}
@media only screen and (max-width: 760px){
.overlay a {width:calc(50% - 10px);height:120px;}    
}    
.overlay .fa {display:block;font-size:60px;color:#cbaa24;}
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;background:#274164;
}
.overlay a:hover .fa {color:#f1f1f1;}
.overlay .closebtn {
  position: absolute;
  top: 0px;
  right: 15px;
  font-size: 16px;
}
.overlay .closebtn1 {
  position: absolute;
  top: 0px;
  left: 5px;
  font-size: 24px;
}
.loader1 {width:300px;position:fixed;background:#09aae7;left:50%;margin-left:-150px;top:48%;color:#fff;border-radius:1px;}
.textx {width: 92%;margin:10px auto;overflow: hidden;position:relative;}
.loader {height: 12px;width: 92%;margin:10px auto;overflow: hidden;position:relative;background-color: #79cae9;}
.loader:before{display: block;position: absolute;content: "";left: -100px;width: 100px;height: 12px;background-color: #fff;animation: loading 0.7s linear infinite;}
#laybesar {background:#000;opacity:0.5;position:fixed;left:0;top:0;right:0;bottom:0;z-index:999999991}
#layar {background:#ddd;position:fixed;left:10px;top:10px;right:10px;bottom:0;z-index:999999992;border-radius:3px 3px 0 0;opacity:0.99;}
#layaratas {height:33px;margin:2px 10px;font-size:20px;color:#777;}
#layaratas .imghx {height:30px;width:30px;;margin-right:10px;}
#layarbadan {height:calc(100% - 40px); margin:3px 5px;padding:0 10px;background:#fff;color:#555;overflow-y:auto;display:block;}
#enmayB {position:fixed;z-index:999999994;top:20%;left:30%;right:30%;background:#09aae7;}
.tutp {float:right;color:#999;cursor:pointer;display:inline-block;font-size:15px;padding:2px 6px;}
.tutp:hover {background:#d76464;color:#fff;}
.hapus, #enmayB, #layar {animation:animatezoom 0.4s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
#layarbadan h2 {font-size:22px;margin:5px;padding:0;color:#999;}
#layarbadan h3 {font-size:18px;margin:5px;padding:0;color:#999;}
#layarbadan h4 {font-size:16px;margin:5px;padding:0;color:#999;}
#enmayC {background:#fff; margin:0 10px 10px 10px; padding:30px 20px;overflow-y:auto;color:#444;font-size:16px; text-align:center}
@keyframes loading {
from {left: -100px; width: 30%;}
50% {width: 30%;}
70% {width: 70%;}
80% { left: 50%;}
95% {left: 120%;}
to {left: 100%;}
}
.loaderx {height:1px;position:fixed;width: 100%;top:0;left:0;right:0;overflow: hidden;background-color: #09aae7;}
.loaderx:before{display: block;position: absolute;content: "";left: -100px;width: 100px;height: 1px;background-color: cyan;animation: loadingx 0.7s linear infinite;}
@keyframes loadingx {
 from {left: -100px; width: 30%;}
 50% {width: 30%;}
 70% {width: 70%;}
 80% { left: 50%;}
 95% {left: 120%;}
 to {left: 100%;}
}
.loader2 {position:fixed;z-index:999999999;width:150px;height:150px;left:50%;margin-left:-75px;top:50%;margin-top:-75px;}
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}