/* Θ */
/* BODY */
body{margin:0;padding:0;width:100%;color:#222;text-decoration:none;font-family:Verdana;font-weight:normal;font-size:16px;background-color:#f2f2f2;text-decoration:none;}
a:link{color:#222;text-decoration:none;}
a:visited{color:#222;text-decoration:none;}
a:hover{color:#4154F1;text-decoration:none;}
a:active{color:#222;text-decoration:none;}
div{transition:all 0.3s ease;}
/* BODY */
/* TOP */
.top{position:fixed;top:0;left:0;width:100%;height:50px;border:0;background-image:url("top.png");z-index:99;box-shadow:0px 8px 16px 0px rgba(227,227,227,0.8);}
.logo{float:left;position:relative;width:50px;height:50px;border:0;}
.logotext{padding-top:10px;float:left;position:relative;width:150px;height:40px;font-size:22px;font-weight:bold;border:0;}
.grammes{float:right;position:relative;width:50px;height:40px;border:0;text-align:center;padding-top:10px;cursor:pointer;}
/* TOP */
.button {border: 0;color: #FFFFFF;border: 1px solid #E7E7E7;padding: 10px 0 10px 0;border-radius: 5px;width: 99%;background-color: #0D6EFD;text-align: center;margin-top: 10px;}
.button:hover {background-color: #0B5ED7;color: #FFFFFF;cursor: pointer;}
.input {border: 0;color: #222222;padding: 10px 0 10px 0;border-radius: 5px;border: 1px solid #E7E7E7;width: 100%;background-color: #FFFFFF;text-align: center;margin-top: 10px;margin-bottom: 10px;}
.form {width:14.28%;float:left;}
/* LEFT */
.leftbar{position:fixed;top:50px;left:0;height:calc(100% - 50px);width:250px;background:#fff;display:block;overflow:scroll;scrollbar-width:none;z-index:98;}
.leftbar.leftopen{width:250px;display:none;}
.leftbar.leftopen ~ .main{left:0;width:calc(100% - 10px)}
ul{list-style:none;padding:0;margin:0;}
#tom{float:left;width:100%;margin:0;border:0;}
#tom li a{display:block;padding:15px 15px 15px 40px;text-decoration:none;color:#222;background:#fff;border-top:1px solid #E7E7E7;border-bottom:1px solid #E7E7E7;}
#tom li a.active{background-image:linear-gradient(to right, #8BC7FF, #fff);color:#222;}
#tom li .down{position:absolute;right:5px;padding:10px;background-image:url("arrows.png");background-position:center right;background-repeat:no-repeat;background-size:20px 20px;}
#tom li a:hover{color:#4154F1;}
#tom li ul{display:none;list-style:circle;padding-left:40px;background-image:linear-gradient(to right, #8BC7FF, #fff);}
#tom li ul li a{padding:5px;background:#fff;border-bottom:2px dotted #E7E7E7;}
.main{position:absolute;left:250px;top:50px;width:calc(100% - 260px);padding:10px 0 0 10px;margin:0;text-align:center;}
/* LEFT */
/* ICONS */
.home{background-image:url("home.webp");}
.red{background-image:url("red.webp");}
.blue{background-image:url("blue.webp");}
.green{background-image:url("green.webp");}
.yellow{background-image:url("yellow.webp");}
.sat{background-image:url("sat.webp");}
.mail{background-image:url("mail.webp");}
.home,.red,.green,.yellow,.blue,.sat,.mail{position:absolute;left:5px;padding:10px 10px 10px 10px;background-position:top;background-repeat:no-repeat;background-size:20px 20px;}
/* ICONS */
.pagetitle{padding:0 20px 10px 20px;font-size:20px;font-weight:bold;text-align:center;}
.res100{margin:auto;width:1300px;}
.maincontent{margin:0;padding-right:10px;padding-bottom:10px;}
.round{border-radius:8px;background:#fff;padding:0;margin:0;width:100%;border:1px solid #CDDFFF;}
.roundin{margin:0;padding:10px;}
/* MOBILE */
@media (max-width:1500px){
.res100 {width:100%;}
}
/* MOBILE */
/* MOBILE */
@media (max-width:620px){
.main{left:0;width:calc(100% - 10px);}
.leftbar{width:250px;height:calc(100% - 120px);display:none;}
.leftbar.leftopen{width:250px;display:block;}
}
/* MOBILE */