/*
@font-face { font-family: Do Hyeon; src: url('DoHyeon-Regular.ttf'); }
@font-face { font-family: Roboto; src: url('Roboto-Regular.ttf'); } 
@font-face { font-family: Source Sans Pro; src: url('/css/SourceSansPro-Regular.ttf'); }
*/
* { box-sizing: border-box; }
.row { max-width: 1600px; }
.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html, body { height:100%; } body {scroll-behavior:smooth;}
html,body,input,select,textarea,h1,h2,h3,h4,h5,h5,form { font-family: "Roboto", sans-serif; margin:0; }
a { text-decoration:none; } .strike { text-decoration:line-through; }
.nopad { padding: 0px; } .hpad { padding: 15px 10px 0px 0px; } 
.hpad .module { margin-bottom: 0; } .hpad .module { padding:15px; } .hpad .module.nopad { padding: 0; margin: -15px 0; }

.ls-bg{ background: #2c312e; height:100%; position:fixed; z-index:-1; box-shadow: 2px 0px 8px rgba(0, 0, 0, 0.44); max-width:333px; }
.m-ls-t, .m-menu-b, .m-menu-p {display:none;}
.ls .logo {
    font-size: 30px;
    padding: 25px 0px;
    text-align: center;
    text-shadow: 2px 3px 5px rgba(0,0,0,0.3);
    display:block; transition: 1s;
    font-family: 'Do Hyeon';
}
.ls .logo:hover {color:#fff;text-shadow: 2px 3px 5px rgba(0,0,0,0.6);}
.ls .options ul {
    list-style-type: none;
    margin: 0;
    padding: 20px 2%;
}
.ls .options li, .ls .options li a {
    padding: 5px 0px;
    margin: 0px;
    width: 100%;
    display:inline-block;
    font-size: 14px;
    text-align:center;  
    /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}
.ls .options li { width:31%; } .ls {padding-bottom: 10px;}
.ls .options .fa { font-size: 35px; margin: 15px 0px; }
.ls .tab { background: #404843; padding: 7%; margin-bottom: 8%; }
.ls .tab-i { padding: 10px 5%; line-height:300%; font-size:16px; } .ls .tab-i .img.t {font-size: 30px;text-align: center;color: #2c312e;height:50px;padding-left:5px;}
.ls .tab-i .img { width:50px; border-radius:100%; margin-right:3%;vertical-align: bottom; } .ls .tab-i .img.t .fa {line-height:50px;}
.ls .textbox {text-align: center;color: #dcddde;background-color: rgba(79,84,92,.3);border-color: #2c312e;padding: 15px;}
.ls .notmem .inp .text:invalid, .ls .notmem .inp .text:focus { border-bottom: solid 3px #a7a7a7; }
.ls .notmem .inp label {color: #d4d4d4;} .ls .notmem .inp .text {background: transparent;color:white;border-bottom: solid 3px #a7a7a7;}
.ls .notmem .logi {padding:20px;border-right:0;background-color: rgba(79,84,92,.3);} .ls .notmem .inp .b1, .notmem .b1 {background: rgba(255, 255, 255, 0.24);}
.ls .links {padding: 10px 20px;color:#80b57f;text-shadow: 1px 1px 2px #000;margin-top:10px;} .ls .links a {color:#fff;} .ls .links a:hover {color:#666;}
.rs { background: #2c312e; width:100%; height:100%; position:fixed; right:0; border-left: 4px solid #bbbbbb; } 
.rs .l .img { width:4vw; height:4vw; border-radius:60px; position:absolute; margin-left: -13px; z-index: 2; } .rs .l .img.logo {display: none;}
.rs .fa { font-size: 2.5vw; } .rs ul {list-style-type: none; margin: 0; padding:0; position: absolute; bottom:10%; width:100%; } 
/* position: relative; top: 50%; transform: perspective(1px) translateY(-50%); } */
.rs li .l, .rs li .hidden { width:100%; height:5vw; line-height: 5vw; display:block; padding: 14%; font-size: 1.3vw; }
.rs .offline-icon a { color: #757575; } .rs .offline-icon:hover a { color: #fff; }
.rs li .hidden { width:0; overflow:hidden; position:absolute; right: 100%; border-left: 4px solid #bbbbbb; padding:0; } 
.rs li:hover .hidden { min-width:fit-content; padding: 0 20px; padding-right: 100px; transition:0.2s; } .rs li:hover { background: #667166; }
.rs .search { height: 100%;width: 100%;border: 0;background: #667166;font-size: 1.4vw; color: white; outline: none; }
.rs .search::placeholder { color: #d8d8d8; } .rs #notfcb { display:none; } 
.rs .notifications { width:0; color: #d4d4d4; overflow-x: hidden; height:0; padding:0; position:fixed; }
.notifications h2 small {float: right;padding-right: 20px;font-size: 13px;font-weight: normal;line-height: 39px;}
.notifications .notice .img { width:40px; height:40px; border-radius:100%; margin-right:10px; } 
.notifications .notice { padding:10px; display:inline-block; width:100%; vertical-align:top; }
.rs #notfcb:checked + .notifications { width:50vw; padding:15px; background: #2c312e; display:block; position:fixed; right: 3.89%; top:10vh; 
transition:0s; border-left: 4px solid #bbbbbb; height:80vh; z-index:1; transition:width 0.5s; } .notifications .notice .text { display:inline-block; vertical-align:top; padding-top:11.5px; width: calc(100% - 50px); } .rs #notfcb:not(:checked) + .notifications {width: 0;overflow-x: hidden;transition: width 0.2s;right: 0;background: #000;top: 10vh;height: 80vh;}
.notifications h2, .rs h2 { margin-bottom:10px; } .rs .signuptext { writing-mode: tb-rl;color: #fff;text-align: center;width: 85%;height: 100%; }
.module { background: #fff; box-shadow: 1px 1px 5px rgba(68, 68, 68, 0.3); margin-bottom: 14px; border-radius:5px; }
.count {background: #80b57f;border-radius: 10px;padding: 6px;color: #fff;height: 20px;overflow: hidden;display: block;font-size: 16px;line-height: 10px;position: absolute;margin-top: -110%;right: 5px;}
.module-b1 {background: #80b57f;border-radius: 50px;padding: 10px 10px;color: #fff;font-size: 15px;position: absolute;right: 20px;top: 10px;}
.module-b1 .img.t {color: #fff;width: 23px;text-align: center;}
.module-b1:hover {color: #fff;}
.welcome-image {height: 130px; position: absolute; right: -40px; bottom: 0px;}
.rs li.offline-icon, .rs li.reload-icon { display: none; } .rs li.offline-icon.show, .rs li.reload-icon.show { display: block; }

.newpost textarea { width:calc(98% - 70px); height:75px; border:0; outline:none; padding:15px; resize:none; border-bottom:1px solid #e6e6e6; } 
.fr { float: right; } .margin {margin-bottom:10px;} .rel {position:relative;} 
.newpost textarea:focus, .newpost textarea:not([value=""]) {transition:0.5s;height:200px;} .post-img-up {display:none;} .newpost textarea:not(:focus){transition:0.5s;}
.newpost .img { width:70px; height:70px; display:inline-block; vertical-align:top; border-radius: 50px; }
.b1 {min-width: 100px;padding: 10px; margin:5px; display:inline-block; font-size: 15px;font-weight: bold;
border: 0;border-radius: 30px; outline: none; text-align:center; cursor:pointer; margin-top:10px;} 
.iconb { min-width: auto; width:37px; font-size:20px; padding: 0 6.5px; } .iconb .fa { line-height:37px; } 
.iconb.up { background: #dc6666; border-radius: 10px 10px 0 0;} .iconb.down { background: #2681ca; border-radius: 0 0 10px 10px; } 
.iconb.up:hover { background: #b34141; } .iconb.down:hover { background: #1c66a0 } .iconb.black { background:#444; }
.statsb .b1 {margin: 7px 0;margin-bottom:10px;cursor:default;background:#80b57f;} .statsb .connect {background:#ca5a5a;cursor:pointer;} .statsb .connect .fa {padding: 0 5px;} 
.statsb .b1:hover {background:#80b57f;}

.feedpost .head .img { width:50px; height:50px; border-radius:70px; display:inline-block; margin-right:10px;} 
.feedpost .head .text {vertical-align:top;display:inline-block;margin-top:8px;} .feedpost .time { font-size:12px; }
.feedpost .post { margin-top:10px;overflow: hidden;word-wrap: break-word;display: inline-block;width: 100%; } .feedpost .head a { font-weight:bold; position: relative; } 
.feedpost .actions { float: left;width: 35px;display: inline-block; }
.feedpost .main {float: left;display: inline-block;width: calc(100% - 35px);min-height: 110px;margin-top: 5px;}
.feedpost .actions .iconb {font-size: 11px;padding: 7px 0px;width: 22px;line-height: 10px;margin: 0;}
.iconb.purple,.iconb.purple:hover {background: linear-gradient(#dc6666, #2681ca);border-radius: 0;} 
.iconb.purple.up {background: linear-gradient(#dc6666 60%, #2681ca);}  .iconb.purple.down {background: linear-gradient(#dc6666, #2681ca 40%);}  
.feedpost .actions .iconb .fa {font-size: 15px;line-height: 30px;}
.feedpost .reply button { height: 35px; padding: 0px; margin-bottom: 18px; width: 70px; min-width: auto; vertical-align:bottom; }
.feedpost .reply textarea { height:34px; width:calc(100% - 90px); border: 3px solid rgba(128, 181, 127, 0.39); border-radius:20px; padding:6.5px 10px; outline: none; resize:none; margin-bottom:15px; font-size: 12px; } 
.feedpost .reply textarea:focus[value=""] {height:50px!important; transition: 0.2s;}
.feedpost .reply textarea:focus, .feedpost .reply textarea:not([value=""]) { width:calc(100% - 5px); height: 50px; transition: 0.2s; margin-bottom:0; } 
.feedpost .reply textarea:focus ~ button, .feedpost .reply textarea:not([value=""]) ~ button { width:150px; transition: width 0.2s; margin-left: calc(100% - 155px);}
.feedpost.subposts { padding: 5px 0px 0px 3%; margin-left: 0px; border-left: 4px solid rgba(128, 181, 127, 0.39); float:left; width:100%; } 
.feedpost .head .online {position:absolute; margin-left: 1px;margin-top: 2px;border: 2px solid #fff;width: 12px;height: 12px; z-index: 1;} .feedpost .head .online.no {border:0;}
.feedpost .moreopt {float: right; margin:3px;display:inline-block;} .moreopt .delet {color: #ff4a5a;} .moreopt .edit {color: #2681ca;} .subposts .moreopt {font-size: 11px;}
.feedpost .hl {padding-left: 27px;} .feedpost .hl .img { width: 20px;height: 20px;position: absolute;margin-left: -23px;margin-top: -1px;}
.feedpost .b1.fp {height: 25px;line-height: 20px;margin: 5px 0 0 0;padding: 0;}
.subp:hover ~ .feedpost.subposts {border-left: 4px solid rgba(128,181,127,0.8);}
.post-image { max-width: 100%; max-height: 700px; width: auto !important; margin-top: 5px; } .hp-more { display:block; padding: 5px 0; float:left; width:100%; } .more { display:none; }
.post-file {width: 100%;max-width: 200px;display: block;padding: 10px;border: 1px solid #bbb;border-radius: 3px;margin-top: 10px;background: #f9f9f9;}
.subposts .head { display:inline-block; } .subposts.feedpost .head { margin-top:11px;vertical-align: top; } .subposts .foot { margin-top: 10px; }
.subposts.feedpost .post { display: inline-block; width: calc(100% - 75px); margin-top: 25px; padding-bottom: 10px; border-bottom: 1px solid #e6e6e6; } 
.subposts .foot .iconb {font-size: 10px;width: auto;min-width: 20px;height: 20px;padding: 0 5px;margin: 0;line-height: 20px;vertical-align: top;} 
.subposts .iconb.purple {width:25px;background: linear-gradient(to right, #dc6666, #2681ca);} .subposts .iconb.up {border-radius: 10px 0 0 10px;}
.subposts .iconb.down {border-radius: 0 10px 10px 0;} .subposts .text a { font-weight:bold; } 
.subposts .head .img { width:45px; height:45px; } .subposts .foot .iconb .fa { line-height:20px; } 
.subposts .reply textarea {margin-top: 10px;margin-bottom: 0;height: 30px;padding: 4px 10px;} .subposts .reply .b1 {margin-bottom: 4px;height: 30px;font-size: 14px;}
.subposts .head .online {position: absolute;margin-top: 0.5px;margin-left: 0.5px;border: 2px solid #fff;width:11px;height:11px;} .subposts .head .online.no {border: none;}
.suggestions {position: absolute;z-index: 2;background: rgba(247, 247, 247, 0.98); display: block;width: 100%;max-width: 40%;/*width: calc(100% - 90px);*/padding: 5px;border-radius: 15px;border: 3px solid rgba(128, 181, 127, 0.39);
color: #555;font-weight: bold;}
.suggestions span {padding:5px; display:block;} .suggestions .highlight {color: #7fb581;padding:3px;cursor: pointer;} //.sugpar {position:relative;}

.banner { width:100%; height: 250px; background:linear-gradient(0deg,rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url('/css/banner1.jpg');  
background-size:cover; border-radius:5px; color:#fff; } .banner .title { margin-left:10px; margin-right:-4px; }
.banner .text { text-shadow: 2px 2px 2px rgba(0,0,0,0.7); padding: 13px 0px 20px 55px; display:block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.banner h2 { text-shadow: 3px 2px 2px rgba(0,0,0,0.3); padding: 80px 0px 0px 50px; font-size:55px; letter-spacing:2px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.banner .options {float:right; font-size:20px; padding-right:7px; /*background: rgba(0,0,0,0.2); border-radius: 0px 0px 8px 0px;*/ } 
.banner .options a {display:inline-block; padding:8px 10px 0px 12px; border-radius:100%; } .banner .options .fa { width:30px; font-size:30px; }
.banner a { color:#fff; text-shadow: 3px 3px 5px rgba(0,0,0,0.3); } .banner a:hover { color: #fff; text-shadow: 4px 4px 7px rgba(0,0,0,0.7); }
.tabs {border-bottom: 1px solid #598858; margin-bottom:15px;} 
.tabs .b1 {margin-top: 10px;border: 1px solid #598858;margin: 10px -10px -1px 0px;border-radius: 15px 15px 0 0;padding: 7px 20px; min-width: auto;}

.h-side { text-align:center; } .h-side .img, .img.hicon { width:90px; height:90px; border-radius:100%; text-align:center; } .morec, .llesst { display:none; }
.h-side .info { margin-top:10px; font-size:14px; } .h-side .info .more-t { display:none; } .morec:checked + .more-t { display:block; } .morec:checked ~ .lmoret { display:none; }
.morec:checked ~ .llesst { display:block; }

.h-poll { background-color: #ff4a5a; color:white; } .h-poll .feedpost { display:none; } .h-poll .pollbars h2 { padding: 0 0 10px 0; font-size: 20px; }
.h-poll .pollbars .text { margin-left:0; color: #fff; } .h-poll .pollbars .p { margin: 5px 0px 15px 0px; width: 100%; } .h-poll .pollbars .p.b1 { padding:5px; margin: 5px 0; }

.h-links ul { margin:none; list-style-type:none; padding:10px; text-align:center; } 
.h-links li a { border-radius: 5px; text-align:center; padding:10px 0; display:inline-block; width:72px; color: #777; } 
.h-links li a:hover { background:#80b57f; color: #fff; } .h-links li { width:64px; display:inline-block; } .h-links .fa { font-size: 35px; margin-bottom:10px;}
.h-links li a.selected { color: #b57f7f; } .h-links li a.selected:hover { color: #fff; }

.side-link.b1 {width: 100%;margin-top: 0;border-radius: 5px;height: 30px;line-height: 30px;padding: 0;background: #f1f1f1;color: #666;border: 1px solid rgba(51, 51, 51, 0.25);}
.membercard.b1 {display: inline-block;text-align: center;text-shadow: 1px 1px 3px #000;margin: 0;border: 3px solid #fff;border-radius: 0px;max-width: 210px;background: #3f4240;}
.membercard .img {width: 70px;height: 70px;border-radius: 100%;margin-bottom: 5px;}
.module.rb {box-shadow: 2px 2px 5px rgba(68, 68, 68, 0.6);border: 1px solid #f44336;background: #F44336;color: #fff;min-height:200px;}
.card {margin: 0;height: 50px;margin-bottom: 10px;} .card .img {width: 50px;border-radius: 100%;} .card a {color: #fff;line-height: 50px;display: inline-block;vertical-align: top;margin-left: 10px;} .module.rb:target {border: 2px solid #000;}

.hpad .module.updates {margin:0;padding-bottom:15px;} .module.updates h4 {padding:15px} .module.updates .b1 {width: 100%;margin: 0;border-radius: 0;}
.disc-button {width: 100%;float: left;}
.discover {margin-top:15px; padding:5px;} .discover .dsbanner {width: 100%;height: 150px;border-radius: 5px;color: #fff;position:relative;margin:0;}
.discover .dsbanner .img {width:50px;height:50px;border-radius:100%;margin-top: 20px;} 
.discover .dsbanner .text {text-shadow: 2px 2px 2px rgba(0,0,0,0.7);padding: 0 10px;display: block;height: 50px;margin-top: 3px;font-size: 14px;position: absolute; top: 85px;overflow: hidden;}
.discover .dsbanner h2 {text-shadow: 2px 1px 2px rgba(0,0,0,0.6);font-size: 17px;letter-spacing: 1px;text-align: center;line-height: 50px;display: inline-block;padding: 0 10px;text-overflow: ellipsis;white-space: nowrap;max-width: calc(100% - 50px);overflow: hidden;}
.discover .dsbanner2 {height:175px;} .discover .dsbanner2 .b1 { position: absolute;left: calc(50% - 50px);bottom: 5px;box-shadow: 2px 2px 4px rgba(0,0,0,0.4); background: rgba(58, 58, 58, 0.7); }
.discover .text {overflow: hidden;word-wrap: break-word;display: inline-block;width: 100%;}
.notibig .notice .img {width: 50px;height: 50px;} .notibig .notice .text {padding-left: 5px;padding-top: 15.5px;width: calc(100% - 60px);} .notibig .notice {border-bottom: 1px solid #eee;}
.profile-p .img {border-radius:100%;display:inline-block;width:200px;float:left;}
.profile-p .r {width:calc(100% - 210px);display:inline-block;float:left;padding:20px 0 0 40px;}
.profile-p .online {float: left;width: 25px;height: 25px;margin-top: 30px;margin-left: -30px;border: 3px solid #fff;}
.profile-p .r h1 {margin-bottom:10px;} .profile-p .r .text {display:block; margin: 5px 0;}
/* bug, cogs, eye, gavel, globe, heart, beaker | meh-o, ban */
.badge, .badge.b1 { color: #fff; background: #000; display: inline-block; border-radius: 100px; box-sizing: border-box; border: 0; width:auto; padding: 0 7px 0 5px; font-size: 18px; margin: 5px; margin-top: 10px; }
.badge:hover, .badge.b1:hover { opacity: 0.95; }
.badge::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; border: 0; }
.badge i { display: inline-block; vertical-align: middle;  border: 0; text-align: center; width: auto;}
.badge .badgetext { background: inherit; border-radius: 5px; box-sizing: border-box; }
.badge.icon { width: 20px; height: 20px; font-size: 14px; padding: 1px 0px; min-width: 0; } .badge.icon::before { display:inline; }
.badge.icon .badgetext { font-size:0; padding: 0; width: 0px; } .badge.icon i { width: 100%; }
.badge { padding: 0 7px; height: 30px; font-size: 20px; }
.badge .badgetext { font-size: 14px; padding-left: 5px; display: inline-block; }
.badge.brown { background: #a94a4a; } .badge.red { background: #d62127; } .badge.orange { background: #e2a927; }
.badge.blue { background: #49a0ae; }  .badge.green { background: #a0bf19; }
.badge.infestation { background: #5d0000; color: #c50000; }
.r.statsb .badge {height: 38px; font-weight: bold;}
.level {height: 30px;background: #eee;border-radius: 40px;display: inline-block;width: 100%;margin-bottom: 0px;color: #333;overflow: hidden;}.level span { background: #8ad650;display: inline-block;height: calc(100% - 3px);border-radius: 40px;margin: 2px;padding: 4px 0;text-align: center;color: #eee;box-sizing: border-box;max-width: calc(100% - 3px);overflow: hidden;}
.leveldiv { background: #8ad650;color: #fff;margin-left: 28px;padding: 5px 20px;font-size: 15px;display: inline-block;transform: skew(310deg);margin-bottom: -4px;border-bottom: 0;margin-top: 15px;}
.leveldiv div {transform: skew(50deg); } .leveldiv.lv2 {margin-left: 20px;background: #e8e8e8;margin-top: -5px;color: #555;transform: skew(40deg);margin-bottom:10px;}  .leveldiv.lv2 div {transform: skew(-40deg);}
.level > * { vertical-align: middle; }

.chat .person {display:inline-block;position: relative;} .pad {padding:15px;} .chat .person:hover {background: #80b57f;color: #fff;} .chat .person .details span {color:#777;}
.chat .person {display: inline-block;padding: 5px 15px;width: 100%;} .chat .person .img {width: 50px;height: 50px;border-radius: 100%;float: left;} .chat .person .img.t {font-size: 40px;padding: 3px;padding-left: 7px;color: #fff; }
.chat .person .details {display: inline-block;line-height: 20px;float: left;padding: 5px 0 0 10px;width: calc(100% - 50px);overflow: hidden;height: 50px;text-overflow: ellipsis;white-space: nowrap;}
.chat {height:calc(100vh - 26px);min-height: 300px;overflow: auto;} .chat.right {height:calc(100vh - 90px);position:relative;} 
.chat .person:hover > .details span {color:#fff;} .chat .cm .details {border-bottom:1px solid #ddd;padding-bottom:10px} 
.chat .person .online {position: absolute;margin-left: 1px;margin-top: 2px;border: 2px solid #fff;width: 12px;height: 12px;z-index: 1;}
.chat .cc span {display: inline-block;clear:both;padding: 5px 10px;max-width: 60%;border-radius: 15px;margin: 4px;/*overflow: hidden;*/word-wrap: break-word;}
.chat .cc .other {background: #e6e6e6;color: #444;} .chat .cc .me {background: #80b57f;color: #fff;float: right;} .chat .cc .cf {float:left; width:100%;}
.chat .cc {position: absolute;bottom: 15px;width: calc(100% - 30px);overflow-y:scroll;max-height:calc(100% - 65px);padding-top: 30px;padding-right: 10px;margin-top: 5px;}
.chat .cc::-webkit-scrollbar {width: 5px;} .chat .cc::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.1);} .chat .cc::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.3);border-radius: 100px;}
.chatinput textarea {width: calc(100% - 110px);padding: 8px;outline: none;border-radius: 30px;border: 3px solid rgba(128, 181, 127, 0.39);resize:none;height:42px;}
.chatinput .b1 {height: 40px;margin: 0;float: right;} .hpad .chatinput.module {margin: 7px 0;padding: 7px;}
.chat.main.nopad {height: 300px;padding: 5px;margin-top: 0px;}
.chat.main .cc {width: calc(100% - 5px);max-height: 246px;} .chat.main .cc span {max-width:80%;}
.me.bubble:hover .btext {max-width: fit-content;right: -4px;left: auto;} .other.bubble:hover .btext {max-width: fit-content;}

.inp .b1 { cursor: pointer; font-size: 14px; width:190px; max-width: 100%; margin: 15px 5px; border-radius: 10px; background: #ff6565; transition: 0.5s; }
.inp .b1:hover { background:#58a758; }
.inp label, .inptext { font-size: 17px; padding: 5px; font-variant: all-small-caps; font-weight: bold; color: #666; }
.inp select, .inp .text {
    margin: 5px;
    padding: 5px 0;
    border: none;
    border-bottom: solid 3px #739e00;
    transition: border 0.3s;
    font-size: 14px;
    box-shadow: none;
    max-width: 100%;
    outline: none;
    width: 190px;
    margin-bottom: 20px;
}
.inp .text:invalid { border-bottom: solid 3px #ff6565; }
.inp select:focus, .inp .text:focus,
.inp .text:focus:invalid { border-bottom: solid 3px #3c630f; } 
.cborder {border: 3px solid rgba(128, 181, 127, 0.39);border-radius: 20px;padding: 5px;outline: none;}
.searchbox {text-align:right;} .searchbox .b1 {height: 30px;margin: 3px;padding: 5px;min-width: 30px;}

.h-form {width: 75%; margin: auto;} .h-preview .img { width: 150px; height: 150px; position: absolute; left: calc(60% - 75px); margin-top: -70px; border-radius: 100%; }
.h-preview { margin-top: 50px; } .inpb .text { padding: 5px 0; margin:0; width:100%; } .inpb label { padding:0; } .inp .text[type=file] { padding:10px 5px; }
.inpb { float: left; width: 100%; box-shadow: 2px 2px 2px #dadada; border: 1px solid #999; border-radius: 7px; padding: 12px; margin-bottom: 10px; }
.inpb.badgeradio input {display:none;} .inpb.badgeradio .badge {opacity:0.5;} .inpb.badgeradio input:checked + label .badge {opacity:1;}

.pie {transition: 1s;float: left;margin: 20px 10px 0px 20px;width: 200px;height: 200px;background: rgba(154, 154, 154, 0.3);overflow: hidden;
border-radius: 50%;transform: rotate(45deg);} .pie .p {width:100%; background: rgba(154, 154, 154, 0.3); border-bottom: 1px solid #fff;text-align:center;
font-size:12px;color:#fff; text-shadow:2px 1px 2px #666; padding:4px;}
.pie .p:nth-of-type(1), .pie-key li:nth-of-type(1) {background-color:#5da5da;} .pie .p:nth-of-type(2), .pie-key li:nth-of-type(2) {background-color:#b276b2;}
.pie .p:nth-of-type(3), .pie-key li:nth-of-type(3) {background-color:#f15854;} .pie .p:nth-of-type(4), .pie-key li:nth-of-type(4) {background-color:#faa43a;}
.pie .p:nth-of-type(5), .pie-key li:nth-of-type(5) {background-color: #4d4d4d;} .pie .p:nth-of-type(6), .pie-key li:nth-of-type(6) {background-color: #decf3f;}
.pie .p[val="1"] { height:0%; } .pie .p[val="1"] { height:10%; } .pie .p[val="2"] { height:20%; } .pie .p[val="3"] { height:30%; } .pie .p[val="4"] { height:40%; } 
.pie .p[val="5"] { height:50%; } .pie .p[val="6"] { height:60%; } .pie .p[val="7"] { height:70%; } .pie .p[val="8"] { height:80%; } 
.pie .p[val="9"] { height:90%; } .pie .p[val="10"] { height:100%; } .pie:hover {transform:rotate(65deg);} .pie .p:last-of-type {border-bottom:0;}
.pie-key {float: left;margin-top: 30px;list-style: none;display: table;border-collapse: separate;padding-left: 20px;width: calc(100% - 240px);max-width: 100%;}
.pie-key > li {display: table-row;} .pie-key > li > * {display: table-cell;border-bottom: 12px solid #fff;}
.pie-key .percent {color: #fff;padding: 10px 10px;text-align: center;} .pie-key .choice {padding: 5px 10px;color: #fff;}
.pollbars .p {margin:5px 10px 15px 10px;text-align:center;border-radius:3px;background:#E8E8E8;width:95%;max-width:400px;position:relative;} 
.pollbars .text {text-align: left;margin-left: 10px;font-weight: bold;color: #666;} .pollbars h2 { padding: 15px 10px; } 
.pollbars .p-in {background:#ff4a5a;padding:5px;border-radius:3px;color:#fff;border:1px solid #dedede;min-width: fit-content;} .pollbars label {cursor:pointer;}
.pollbars .p10{width:100%;} .pollbars .p9{width:90%;} .pollbars .p8{width:80%;} .pollbars .p7{width:70%;} .pollbars .p6{width:60%;} 
.pollbars .p5{width:50%;}   .pollbars .p4{width:40%;} .pollbars .p3{width:30%;} .pollbars .p2{width:20%;} .pollbars .p1{width:70%;} .pollbars .p0{width:0%;}
.pollbars .inp {position:absolute;right:7px;top:7px;width:18px;height:18px; background:#fff;border:3px solid #ff4a5a;} .pollbars input {display:none;}
.pollbars .inp.radio {border-radius:100%;} .pollbars .inp.checkbox {border-radius:5px;} .pollbars input:checked + .inp {background:#ff4a5a;border:3px solid #503838;}
.pollbars .p.img { width: auto; height: 80px; padding: 5px; margin: 3px; } .pollbars .p.img img { height: 70px; } .pollbars .p.b1 { color: #777; } 
.pollbars .p.b1:hover { background: #ddd; }
.img { display:inline-block; background: #80b57f; }
.online {width: 8px;height: 8px;border-radius: 100%;display: inline-block;background: #49d21c;vertical-align: top;} .online.no {background:transparent;}
.message { padding: 20px; background-color: #58a758; color: white; box-shadow: 2px 2px 3px #848484; margin-bottom:10px; float: left; width:100%; }
.message.red { background-color: #b54c4c; }
.apologetic-div {position: relative;min-height: 191px;margin-top: 20px;} .apologetic-div div {width: 70%;}
.apologetic-div img {width: 30%;position: absolute;right: 0;border-radius: 10px;bottom: 0;}
.popup {opacity:0;transition:0.1s;}
.popup .box {position: fixed;width:80%;max-width:400px;left: 50%;top: 50%;background: #FFF;z-index: 20;box-shadow: 5px 5px 7px #292929;transform: translate(-50%, -50%);}
.popup .box.full {max-width:80%;} .popup .title {background:#80b57f;color:#fff;padding:10px;font-size:21px;letter-spacing:-1px} .popup .text { padding:20px 10px; } 
.popup .button {border-radius:2px;display:inline-block;min-width:70px; padding:7px;float:right;margin:10px; } .popup .button.c2 { margin-right:0px; background: #a2a2a2; }
.popcheck:checked + .popup { position: fixed;top: 0;left: 0;bottom: 0;right: 0;background: rgba(0, 0, 0, 0.7);z-index: 19;opacity:1;transition:0.1s; } 
.popcheck:not(:checked) + .popup { -webkit-box-shadow:  0; box-shadow:  0; opacity:0; transition:0.1s; } .popcheck { display:none; }
.popcheck:not(:checked) + .popup .box { top:-50% }
.bubble .btext {opacity:0;transition:opacity 0.2s;visibility: hidden;max-width: 300px;background-color: rgba(51,51,51,.95);color: #fff;text-align: center; line-height: 14px;
padding: 7px;border-radius: 3px;bottom: 100%;left: -100vw; margin-bottom: 5px;position: absolute;z-index: 1;font-size:12px;white-space: nowrap;} .bubble .btext.menu {width:300px;}
.bubble .btext::after {content: " ";position: absolute;top: 100%;left: 15px;margin-left: -5px;border-width: 5px;border-style: solid;border-color: rgba(51,51,51,.9) transparent transparent transparent;} .bubble:hover .btext {left: 0%;visibility: visible;opacity:1;} .bubble {display: inline-block;position: relative;}

.modular-t.data {width: 100%;text-align: center;max-width: 500px;margin: auto;} /*Table*/
.modular-t.data td {padding: 15px 0;border-bottom: 1px solid #bbb;} 
.modular-t.data td:nth-child(1) {width:50%;} 
.modular-t.data .cover {width:100%;height:95px;}

.aside {
    //background-color: #33b5e5;
    padding: 15px;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}

body{ background: #E8E8E8; }
a { color: #5ea25e; } a:hover { color: #4d6350; transition:0.2s; cursor:pointer; } .d-none { display: none; }
.ls .options li a, .rs li a { color: #d6d6d6; } .ls .tab, .ls .tab-i { color:#d6d6d6; } .ls .tab-i:hover { background: #667166; color: #fff; }
.notifications a:hover { background-color: #667166; color: #ffffff; } .ls .options li a:hover { color: #fff; background: #667166; }
.rs .hidden { background-color: #667166; color: #ffffff; } .b1:hover, .b1.selected { background:#508650; color: #fff; }
.logo { background-color: #80b57f; color: #ffffff; } .b1 { background: #80b57f;color: #fff; }

.col-1 {width: 4.16%;} .col-2 {width: 8.33%;}
.col-3 {width: 12.5%;} .col-4 {width: 16.66%;}
.col-5 {width: 20.83%;} .col-6 {width: 25%;}
.col-7 {width: 29.16%;} .col-8 {width: 33.33%;}
.col-9 {width: 37.5%;} .col-10 {width: 41.66%;}
.col-11 {width: 45.83%;} .col-12 {width: 50%;}
.col-13 {width: 54.16%;} .col-14 {width: 58.33%;}
.col-15 {width: 62.5%;} .col-16 {width: 66.66%;}
.col-17 {width: 70.83%;} .col-18 {width: 75%;}
.col-19 {width: 79.16%;} .col-20 {width: 83.33%;}
.col-21 {width: 87.5%;} .col-22 {width: 91.66%;}
.col-23 {width: 95.83%;} .col-24 {width: 100%;} 
@media only screen and (max-width: 768px) {
    /* For tablets: */
    .col-m-1 {width: 4.16%;} .col-m-2 {width: 8.33%;}
    .col-m-3 {width: 12.5%;} .col-m-4 {width: 16.66%;}
    .col-m-5 {width: 20.83%;} .col-m-6 {width: 25%;}
    .col-m-7 {width: 29.16%;} .col-m-8 {width: 33.33%;}
    .col-m-9 {width: 37.5%;} .col-m-10 {width: 41.66%;}
    .col-m-11 {width: 45.83%;} .col-m-12 {width: 50%;}
    .col-m-13 {width: 54.16%;} .col-m-14 {width: 58.33%;}
    .col-m-15 {width: 62.5%;} .col-m-16 {width: 66.66%;}
    .col-m-17 {width: 70.83%;} .col-m-18 {width: 75%;}
    .col-m-19 {width: 79.16%;} .col-m-20 {width: 83.33%;}
    .col-m-21 {width: 87.5%;} .col-m-22 {width: 91.66%;}
    .col-m-23 {width: 95.83%;} .col-m-24 {width: 100%;} 
    .nolpad {padding:15px;} .ls .options { padding-left: 4%; } .ls .options li { width:42%; }
    .ls .options .fa { font-size:25px; } .ls .options li a { font-size:12px; }
    .rs .fa { font-size: 25px; } .rs li a {padding:14% } .rs li {font-size:25px; height: 40px;}
    .rs li a, .rs li .hidden {height:40px; line-height: 40px; font-size: 13px;}
    .rs #notfcb:checked + .notifications {width:70%; right:7%;}
    .ls .tab-i { font-size:12px; } .ls .tab-i .img, .ls .tab-i .img.t .fa, .ls .tab-i .img.t { width:35px; height:35px; line-height:35px; } 
    .hpad { padding: 7px 15px; } .rs li .l .img {width:40px;height:40px;margin-top:-10px;}
    .banner h2 { font-size:35px; } .banner .text { font-size:15px; }
    .h-preview .img { width: 100px; height: 100px; position: relative; left: calc(54% - 50px); top: 30px; }
    .pie {position:relative;left:calc(50% - 125px);} .pie-key {width:100%;} 
    .count {margin-top: -80%;}
}
@media only screen and (max-width: 600px) {
   /* For mobile phones: */
   [class*="col-"] {
       width: 100%;
   }
   .banner {height:170px;} .banner h2 { font-size:30px; padding:40px 0px 0 20px; } .banner .text { font-size:13px; padding: 10px 0 20px 25px;}
   .ls {display:none; background: #2c312e; } .ls-bg { background:transparent; box-shadow:none; position:inherit; text-align:right; } //.rs {display:none;}
   #btnControl:checked + .ls {display:block;} .m-menu-b, .m-menu-p {display:block;} .m-menu-p {height:20px;}
   .ls .tab-i .img.t { padding-left: 2px; }
   .inp .text, .inp .b1 { width:100%; } 
   .modular-t td, .modular-t.data td:nth-child(1) {display:block;width:100%;}

   .rs {height: 50px;border: 0;position :fixed;top: 0;z-index: 2;} .rs ul {top : 0px;} .welcome-image {right: 0;}
   .rs li {display: inline-block;padding: 0px;vertical-align: top;height: 50px;width: 50px;} .rs li.offline-icon.show, .rs li.reload-icon.show {display: inline-block;}
   .rs li .l {line-height: 50px;padding:13px;padding-top:8px;} .rs .l .img {width: 50px;height: 50px;margin-left: -10px;} .rs .l .img.logo {display:block;width: 30px;height: 30px;margin-top: 3px;margin-left: -3px;}
   .rs #notfcb:checked + .notifications {width: 100%;right: 0;top: 50px;height: calc(100vh - 50px);} 
   .m-menu-b {display: block;position: fixed;z-index: 3;right: 0;top: 0;color: #fff;background: #80b57f;padding: 15.3px;}
   .rs .notifications .notice .text {padding-top:3px;} .rs .notifications .notice {height:60px;}
   .rs .signuptext {writing-mode: initial;line-height: 50px;font-size: 12px;overflow: hidden;}
   .profile-p .r {width:100%;} .rs li .l .img {width: 50px;height: 50px;margin-top: 0;}
   .rs li .hidden { top: -100px }
   .pcount {position: relative;} .count {width: auto;position: absolute;z-index: 1;top: -4px;left: -10px;right: auto;}
   .ls:active {display:block;} .noscroll-mobile {overflow: hidden;position: fixed;}
} 
//body{ background:#36393E; color:white; }