html{margin:0;padding:0;width:100%;height:100%;min-width:800px;box-sizing:border-box;font-family:verdana;font-size:12px;}
body{margin:0;padding:0;width:100%;height:100%;background:#f5f5f5;}

.button-red{background:#ce2121 !important;border-color:#bb1d1d !important;color:#FFF !important;}
.button-red:hover{background:#e62929 !important;border-color:#dc2323 !important;}
.button-orange{background:#ff9800 !important;border-color:#f39102 !important;color:#FFF !important;}
.button-orange:hover{background:#ffa92b !important;border-color:#f1a02a !important;}
.button-blue{background:#218bce !important;border-color:#1e82c1 !important;color:#FFF !important;}
.button-blue:hover{background:#2397e0 !important;border-color:#218fd4 !important;}
.button-green{background:#27b740 !important;border-color:#23a539 !important;color:#FFF !important;}
.button-green:hover{background:#2bc546 !important;border-color:#29bd43 !important;}

.input-element-two li{margin:0 0 -15px 0 !important;width:calc((100% / 2) - 3px) !important;float:none !important;display:inline-block;}
.input-element-three li{margin:0 0 -15px 0 !important;width:calc((100% / 3) - 3px) !important;float:none !important;display:inline-block;}
.input-element-four li{margin:0 0 -15px 0 !important;width:calc((100% / 4) - 5px) !important;float:none !important;display:inline-block;}
.float-left{float:left;}
.float-right{float:right !important;}
.float-clear{clear:both !important;}
.hide{display:none !important;}
.input{font-family:verdana;font-size:100%;}
.vcenter-helper{margin:0;padding:0;display:table;width:100%;height:100%;}
.vcenter-content{margin:0;padding:0;display:table-cell;vertical-align:middle;position:relative;}

#login{margin:0;padding:0;background:#00B285 url('../img/bg-login.jpg') no-repeat top left;background-size:cover;width:100%;height:100%;box-sizing:border-box;position:fixed;overflow:auto;}
#login .title-form{margin:-20px -15px 20px -15px;padding:10px;text-align:center;font-weight:bold;color:#7d7d7d;border-bottom:solid 1px #dcdcdc;font-size:90%;}
#login .wrap-form{margin:0 auto;padding:20px;background:#FFF;width:300px;box-sizing:border-box;box-shadow: 0 10px 6px -5px #484848;}
#login .wrap-form:after{content:"";display:block;clear:both;}
#login .wrap-input{margin:0 0 15px 0;padding:8px;border:solid 1px #cecece;box-sizing:border-box;}
#login .wrap-input:focus-within{border-color:#95ceb5;}
#login .wrap-input:focus-within i{color:#55b58a;}
#login .wrap-input:focus-within .input{color:#55b58a;}
#login .wrap-input:focus-within .input::-webkit-input-placeholder{color:#55b58a;}
#login .wrap-input:focus-within .input::-moz-placeholder{color:#55b58a;}
#login .wrap-input:focus-within .input:-ms-input-placeholder{color:#55b58a;}
#login .wrap-input:focus-within .input:-moz-placeholder{color:#55b58a;}
#login .wrap-input i{margin:0;padding:2px 0 0 0;color:#8a8a8a;width:15px;box-sizing:border-box;float:left;text-align:center;}
#login .wrap-input .input{margin:-8px -8px -8px 0;padding:8px;border:none;width:calc(100% - 8px);box-sizing:border-box;outline:none;color:#8a8a8a;font-family:verdana;font-size:12px;}
#login .wrap-input textarea.input{resize:none;height:70px;}
#login .wrap-img-captcha{margin-bottom:14px;float:left;cursor:pointer;width:100px;height:auto;}
#login .wrap-input-captcha{margin-top:2px;float:right;width:calc(100% - 110px);clear:none;}
#login .wrap-input-captcha:after{content:"";display:block;clear:both;}
#login .wrap-button{margin:0;padding:8px 10px;border:none;background:#fff;cursor:pointer;color:#FFF;width:100%;float:left;outline:none;}
#login .wrap-button i{margin:0 0 0 -5px;padding:0 5px;}
#login .wrap-button[type="submit"]{background:#5796ea;}
#login .wrap-button:hover, #login .wrap-button:focus{transition:all ease 0.2s;background:#4982ce;}

#footer{margin:15px 0 0 0;padding:0;text-align:center;color:#000;font-size:75%;}

#loading{margin:0;padding:0;position:fixed;z-index:888;width:100%;height:100%;background:rgba(255, 255, 255, 0.8);top:0;left:0;text-align:center;}
#loading i{margin:0;padding:0;font-size:200%;position:absolute;width:30px;top:calc((100% - 30px) / 2);left:calc((100% - 30px) / 2);}

#alert{z-index:999 !important;}
#alert{margin:0;padding:0;position:absolute;z-index:300;width:100%;height:100%;top:0;left:0;box-sizing:border-box;background:rgba(255, 255, 255, 0.58);}
#alert .alert-box{margin:0;padding:10px;background:#FFF;border:solid 1px #adadad;box-shadow: 0 10px 6px -5px #a2a2a2;position:absolute;box-sizing:border-box;width:320px;max-height:calc(100% - 100px);overflow:auto;text-align:right;border-radius:4px;top:50px;left:calc((100% - 320px) / 2);cursor:move;}
#alert .alert-content{margin:0 0 10px 0;padding:10px;border-bottom:solid 1px #ccc;text-align:left;cursor:auto;color:#525252;line-height:18px;}
#alert .alert-content ul{margin:0;padding:0;}
#alert .alert-content li{margin:5px 0 0 5px;padding:0 0 0 12px;position:relative;list-style:none;}
#alert .alert-content li:before{content:"\f04d";position:absolute;height:100%;left:0;top:6px;font: normal normal normal 6px/1 FontAwesome;}
#alert .alert-content b{text-transform:uppercase;}
#alert .alert-content p{margin:0;}
#alert .alert-content .same-width{width:60px;display:inline-block;}
#alert .alert-box .form-button{margin:0 10px 0 0;padding:8px 15px;border:none;background:#fff;cursor:pointer;color:#FFF;outline:none;font-size:95%;border-radius:3px;}
#alert .alert-box .form-button i{margin:0 0 0 -10px;padding:0 10px;}
#alert .alert-box .form-button:last-child{margin:0;}
#alert .alert-box .form-button.button-submit{background:#5796ea;}
#alert .alert-box .form-button:last-child{background:#ea5776;}
#alert .alert-box .form-button.button-submit:hover, #alert .alert-box .form-button.button-submit:focus{background:#4982ce;}
#alert .alert-box .form-button:last-child:hover, #alert .alert-box .form-button:last-child:focus{background:#ce4b4b;}

#header{margin:0;padding:0;width:100%;box-sizing:border-box;background:#5495ca;height:40px;}
#header ul{margin:0;padding:0;list-style:none;}
#header li{margin:0;padding:12.5px 20px 10px 20px;display:table-cell;height:40px;box-sizing:border-box;vertical-align:middle;font-size:85%;float:right;color:#fff;}
#header li.link{cursor:pointer;font-size:100%;float:left;}
#header li.link.actived{background:#417fb1;}
#header li.link:hover{background:#4787bb;}
#header .link-logout{background:#c13e3e;}
#header .link-logout:hover{background:#ab3434 !important;}

#content{margin:0;padding:0;width:100%;height:calc(100% - 40px);box-sizing:border-box;}
#content .content-menu{margin:0;padding:0;list-style:none;box-sizing:border-box;height:50px;}
#content .content-menu li{margin:0;padding:12px 0;display:table-cell;height:50px;box-sizing:border-box;vertical-align:middle;float:left;}
#content .content-menu li button{margin:0 10px;padding:5px 10px;box-sizing:border-box;background:#dadada;border:solid 1px #bdbdbd;border-radius:3px;cursor:pointer;outline:none;}
#content .content-menu li button i{margin:0;padding:0;width:20px;text-align:left;}
#content .content-menu li:last-child{padding:11px 10px;float:right;}
#content .content-menu li input[type="text"]{margin:0;padding:5px;box-sizing:border-box;width:250px;outline:none;border-radius:4px;border:solid 1px #adadad;color:#5a5a5a;}
#content .content-menu li input[type="text"]:focus{border-color:#313131;}
#content .content-menu li.temp-text{width:100%;}
#content .content-menu li.temp-text .input{width:100%;}
#content .content-main{margin:0;padding:0 10px 10px 10px;width:100%;height:calc(100% - 50px);box-sizing:border-box;overflow:auto;}
#content .content-main table{margin:0;padding:0;width:100%;font-size:90%;border-spacing:0;border-left:solid 1px #7d7d7d;position:relative;}
#content .content-main table tr.tr-link td{cursor:pointer;}
#content .content-main table thead{position:absolute;display:table-cell;font-size:90%;}
#content .content-main table th{margin:0;padding:10px;background:#c3e0ec;text-align:left;border-bottom:solid 1px #7d7d7d;border-top:solid 1px #7d7d7d;border-right:solid 1px #7d7d7d;cursor:default;text-transform:uppercase;}
#content .content-main table th.th-sort{cursor:pointer;}
#content .content-main table th.th-sort:hover{background:#b9d6e2;}
#content .content-main table th i{margin:0;padding:0;width:20px;text-align:left;}
#content .content-main table th:first-child{padding:10px;width:20px;cursor:pointer;font-size:100%;}
#content .content-main table th:first-child i{margin:0;padding:0;width:20px;text-align:left;}
#content .content-main table td{margin:0;padding:10px;vertical-align:top;border-bottom:solid 1px #7d7d7d;border-right:solid 1px #7d7d7d;cursor:default;box-sizing:border-box;}
#content .content-main table .live-input td{background:#f9eede;position:relative;vertical-align:middle;}
#content .content-main table .live-input td .wrap-input{margin:0;padding:0;}
#content .content-main table .live-input td .wrap-input ul{margin:0;padding:0;list-style:none;}
#content .content-main table .live-input td .wrap-input li{margin:3px 0;padding:5px 10px;}
#content .content-main table .live-input td .wrap-input button{margin:0;padding:0;border:none;outline:none;background:none;cursor:pointer;width:100%;display:inline-block;text-align:left;}
#content .content-main table .live-input td .wrap-input button i{margin:0;padding:0;width:20px;}
#content .content-main table .live-input td.area-edit{padding:0;background:#f5d9b0;}
#content .content-main table .live-input:first-child .input{margin-top:-10px !important;}
#content .content-main table .live-input td:nth-child(2){padding:10px;}
#content .content-main table .live-input td .input{margin:0;padding:0 10px;width:100%;height:100%;box-sizing:border-box;border:none;font-size:100%;background:none;outline:none;top:0;position:absolute;vertical-align:top;}
#content .content-main table .cell-act{padding:10px;width:20px;cursor:pointer;}
#content .content-main table .cell-act i{margin:0;padding:0;width:20px;text-align:left;}
#content .content-main table .cell-no{width:60px;min-width:60px;}
#content .content-main table .cell-time{width:200px;min-width:200px;}
#content .content-main table .cell-time i{margin:0 5px 0 0;padding:0;text-align:left;}
#content .content-main table .cell-time i:last-child{margin-left:15px;}
#content .content-main table .cell-name{width:230px;min-width:230px;}
#content .content-main table .cell-nick{width:120px;min-width:120px;}
#content .content-main table .cell-mid{width:80px;min-width:80px;}
#content .content-main table .cell-ket{min-width:150px;}
#content .content-main table .cell-ket ul{margin:0;padding:0;list-style:square;}
#content .content-main table .cell-ket li{margin:0 0 8px 20px;padding:0;}
#content .content-main table .cell-ket li:last-child{margin-bottom:0;}

#content form{margin:0;padding:20px;width:100%;height:100%;box-sizing:border-box;overflow:auto;}
#content .wrap-form{margin:0;padding:10px;width:600px;background:#FFF;border:solid 1px #e4e8ed;border-radius:3px;border-top:solid 3px #00a65a;box-sizing:border-box;clear:both;}
#content .wrap-form:last-child{margin-bottom:0;}
#content .wrap-form.wrap-form-float{width:calc(50% - 10px);clear:none;display:inline-block;}
#content .wrap-form h2{margin:-10px -10px 10px -10px;padding:10px;font-size:120%;color:#444;border-bottom:solid 1px #f4f4f4;font-weight:normal;}
#content .wrap-form .wrap-input{margin:0 0 15px 0;padding:0;width:100%;box-sizing:border-box;clear:both;}
#content .wrap-form .wrap-input-akun .input{text-transform:lowercase;}
#content .wrap-form .wrap-input.wrap-input-float{width:calc(50% - 10px);clear:none;}
#content .wrap-form .wrap-input:last-child{margin-bottom:0;}
#content .wrap-form .wrap-input ul{margin:0;padding:0;list-style:none;}
#content .wrap-form .wrap-input li{margin:0 10px 0 0;padding:0 2px 10px 2px;float:left;width:calc((100% / 2) - 10px);box-sizing:border-box;}
#content .wrap-form .wrap-input li:nth-child(even){margin-right:0;float:right;}
#content .wrap-form .wrap-input li button{margin:0;padding:0;border:none;background:transparent;outline:none;cursor:pointer;text-align:left;width:100%;}
#content .wrap-form .wrap-input li button:focus, #content .wrap-form .wrap-input li button:hover{color:#008e6a !important;transition:all 0.5s ease;}
#content .wrap-form .wrap-input li i{margin:0;padding:0;width:20px;text-align:left;font-size:120%;float:left;}
#content .wrap-form .wrap-input li:last-child{margin-right:0;}
#content .wrap-form .wrap-input li button span{margin:0;padding:5px 0 0 20px;display:block;width:100%;box-sizing:border-box;color:#00b285;font-size:85%;}
#content .wrap-form .wrap-input li button span i{float:none;}
#content .wrap-form .img-group{margin:0;padding:0;text-align:center;position:relative;}
#content .wrap-form .img-group button{margin:0;padding:6px 10px;background:#c957ea;border:none;color:#FFF;border-radius:3px;cursor:pointer;float:left;outline:none;}
#content .wrap-form .img-group button:hover, #content .wrap-form .img-group button:focus{background:#ab4cc5;}
#content .wrap-form .img-group button.del-img{margin:0;background:#ea5757;float:none;position:absolute;top:0;right:0;}
#content .wrap-form .img-group button.del-img:hover, #content .wrap-form .img-group button.del-img:focus{background:#c54c4c;}
#content .wrap-form .img-group input{margin:0 0 20px 10px;padding:5px 0;width:calc(100% - 180px);box-sizing:border-box;float:left;outline:none;border:none;cursor:auto;color:#8a8a8a;}
#content .wrap-form .img-preview{margin:0 auto;padding:5px;clear:both;box-sizing:border-box;width:200px;border:solid 1px #e2e2e2;}
#content .wrap-form .img-preview img{margin:0;padding:0;width:100%;}
#content .wrap-form .upload-group button{margin:0;padding:6px 10px;background:#c957ea;border:none;color:#FFF;border-radius:3px;cursor:pointer;float:left;outline:none;}
#content .wrap-form .upload-group button:hover, #content .wrap-form .upload-group button:focus{background:#ab4cc5;}
#content .wrap-form .upload-group input.file-preview{margin:0 0 0 10px;padding:6px;box-sizing:border-box;width:calc(100% - 100px);border:none;cursor:auto;color:#5d5d5d;}
#content .wrap-form .upload-group a{margin:10px 0 -10px 5px;padding:0;display:block;text-decoration:none;color:#5d5d5d;}
#content .wrap-form .upload-group a:hover{color:#008e6a;}
#content .wrap-form .button-group{margin:10px -10px -10px -10px;padding:10px;border-top:solid 1px #f4f4f4;clear:both;}
#content .wrap-form .button-group button{margin:0 10px 0 0;padding:8px 12px;background:#298cce;border:none;color:#FFF;border-radius:3px;cursor:pointer;outline:none;}
#content .wrap-form .button-group button:hover, #content .wrap-form .button-group button:focus{background:#267fbb;}
#content .wrap-form .button-group button[type="button"]{background:#ce2929;}
#content .wrap-form .button-group button[type="button"]:hover, #content .wrap-form .button-group button[type="button"]:focus{background:#b92626;}
#content .wrap-form .input-group{margin:0;padding:0;width:100%;box-sizing:border-box;border:solid 1px #d2d6de;position:relative;}
#content .wrap-form .input-group:focus-within{border-color:#00b285 !important;transition:all 0.5s ease;}
#content .wrap-form .input-group:focus-within i{color:#008e6a !important;border-color:#00b285 !important;transition:all 0.5s ease;}
#content .wrap-form .input-group:focus-within .input{color:#008e6a !important;transition:all 0.5s ease;}
#content .wrap-form .input-group:focus-within .input::-webkit-input-placeholder{color:#008e6a;}
#content .wrap-form .input-group:focus-within .input::-moz-placeholder{color:#008e6a;}
#content .wrap-form .input-group:focus-within .input:-ms-input-placeholder{color:#008e6a;}
#content .wrap-form .input-group:focus-within .input:-moz-placeholder{color:#008e6a;}
#content .wrap-form .input-group .input{margin:0 0 0 30px;padding:8px;border:none;width:calc(100% - 30px);box-sizing:border-box;outline:none;color:#555;font-family:verdana;font-size:100%;background:#FFF;}
#content .wrap-form .input-group textarea.input{resize:none;height:70px;}
#content .wrap-form .input-group select.input{padding:7px 8px;}
#content .wrap-form .input-group > i{margin:0;padding:10px 0 0 0;box-sizing:border-box;width:30px;height:100%;text-align:center;position:absolute;border-right:solid 1px #d2d6de;color:#555;}
#content .wrap-form.wrap-form-fix-width{width:500px;}
#content .wrap-form.wrap-form-fix-width .wrap-data-img{margin:0 auto;padding:0;width:150px;}
#content .wrap-form.wrap-form-fix-width .wrap-data-img img{padding:2px;width:100%;border-radius:50%;border:solid 1px #ccc;box-sizing:border-box;}
#content .wrap-form.wrap-form-fix-width .wrap-detail-data{margin:15px -10px -10px -10px;padding:0;list-style:none;}
#content .wrap-form.wrap-form-fix-width .wrap-detail-data li{margin:0;padding:10px 0;text-align:center;border-top:solid 1px #ccc;font-size:90%;}
#content .wrap-form.wrap-form-fix-width .wrap-detail-data li:first-child{font-weight:bold;text-transform:uppercase;font-size:100%;}
#content .wrap-form.wrap-form-fix-width .wrap-detail-data li span{margin-bottom:10px;display:inline-block;width:calc(100% / 3);float:left;}
#content .wrap-form.wrap-form-fix-width .wrap-detail-data li span:nth-child(2){margin:0 auto;float:none;}
#content .wrap-form.wrap-form-fix-width .wrap-detail-data li span:last-child{float:right;}
#content .wrap-form.wrap-form-fix-width .wrap-detail-data button{padding:8px 20px;background:#2b97df;}
#content .wrap-form.wrap-form-fix-width .wrap-detail-data button:hover, #content .wrap-form.wrap-form-fix-width .wrap-detail-data button:focus{background:#278acc;}
#content .wrap-form.wrap-form-fix-width .wrap-detail-data button i{margin:0 10px 0 0 !important;}
#content .wrap-input .wrap-input-error{margin:0;padding:5px 2px;color:#df2b2b;}
#content .wrap-input .wrap-input-error i{margin:0 5px 0 0;padding:0;font-size:125%;}

#content .sub-content{margin:0;padding:0;float:left;height:100%;box-sizing:border-box;overflow:auto;}
#content .sub-content.sub-left{background:#454748;width:250px;padding-top:20px;}
#content .sub-content.sub-left ul{margin:0;padding:0;list-style:none;color:#d0d0d0;font-size:95%;}
#content .sub-content.sub-left li{margin:0;padding:0;box-sizing:border-box;cursor:pointer;}
#content .sub-content.sub-left .title-tree{margin:0;padding:10px 10px 10px 25px;display:block;}
#content .sub-content.sub-left .title-tree.actived{color:#c7b661;}
#content .sub-content.sub-left .title-tree.disabled{color:#696969;}
#content .sub-content.sub-left .title-tree.disabled:hover{color:#8a8a8a;}
#content .sub-content.sub-left .title-tree i{margin:0 0 0 -15px;padding:0;width:10px;text-align:left;}
#content .sub-content.sub-left li:hover > .title-tree{color:#61c7ab;}
#content .sub-content.sub-left li ul{margin:0 0 0 10px;padding:0;list-style:none;display:none;font-size:100%;}
#content .sub-content.sub-right{margin:20px 20px 0 20px;padding:0;float:right;width:calc(100% - 250px - 40px);height:calc(100% - 20px);}

#title{margin:-10px 15px 15px 15px;padding:5px 10px;position:absolute;background:rgba(41, 41, 41, 0.80);color:#FFF;font-size:80%;border-radius:4px;z-index:500;text-align:center;}

@media screen and (max-width:350px){
    #alert .alert-box{width:90%;left:calc((100% - 90%) / 2);}
}

@media screen and (max-width:340px){
    #login .wrap-form{width:90%;}
    #login .wrap-img-captcha{margin:0 auto 14px auto;float:none;display:block;}
    #login .wrap-input-captcha{float:none;width:100%;}
}