wangUI_Javascript/wangui.css

body,html{width:100%;height:100%;margin:0;padding:0;font-weight:200;font-family:Microsoft YaHei;}
img{border:none;vertical-align:middle;}
span{display:inline-block;vertical-align:middle;}

a{display:inline-block;color:#29c; text-decoration: none;font-weight:500;}
a:link visited active{ color: #29c; text-decoration: none}
a:hover{color:#ff6600;}
select,input,textarea{outline:none;vertical-align:middle;}
textarea{border:1px solid #999;width:90%;border-radius:3px;}
input[type='checkbox']{background-color:#777;color:#f00;width:18px;height:18px;border-radius:3px;cursor:pointer;}



textarea:focus {border:1px solid #f00}
input[type='radio']{border:1px solid #f00;height:50px;width:16px;height:16px;cursor:pointer;color:#fe0;border-radius:3px;}

input[type='text']{border:1px solid #999;width:90%;height:28px;padding:3px;border-radius:3px;}
input[type='text']:focus {border:1px solid #f00}
input[type='date']{border:1px solid #999;height:30px;padding:5px;border-radius:3px;}
input[type='date']:focus {border:1px solid #f00}
input[type='password']{border:1px solid #999;width:90%;height:28px;padding:3px;border-radius:3px;}
input[type='password']:focus {border:1px solid #f00}
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {  
    -webkit-text-fill-color: #257 !important;  
    -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;  
    background-color:transparent;  
    background-image: none;  
     transition: background-color 50000s ease-in-out 0s; 
}  


.cancel{background:#999;border:0;height:38px;cursor:pointer;color:#fff;border-radius:5px;padding-left:20px;padding-right:20px;}
.submit{background:#257;border:0;height:38px;cursor:pointer;;color:#fff;border-radius:5px;padding-left:20px;padding-right:20px;margin-right:40px}

.EditRow{float:left;width:100%;margin-top:40px;min-width:700px}
.EditTitle{float:left;width:100px;margin-right:20px;text-align:right}
.EditValue{float:left;width:400px;min-height:30px;padding-left:10px;border-bottom:1px solid #999;padding-bottom:2px;font-weight:500}



select{border:1px solid #999;width:90%;height:30px;padding:3px;border-radius:5px;cursor:pointer;}
select::-webkit-scrollbar {width:8px;}
select::-webkit-scrollbar-thumb {border-radius: 10px;background:#29c }
select::-webkit-scrollbar-track {  background:#fff}

div{scrollbar-color:dark;scrollbar-width:thin;scrollbar-color:#f60 #fff;}
div::-webkit-scrollbar {width:8px;height:10px;}
div::-webkit-scrollbar-thumb { border-radius: 10px; height: 10px; box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2); background : #f60; }
div::-webkit-scrollbar-track { box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);  background:#fff}

table{width:100%;border-radius:5px;padding-bottom:5px;border-collapse: separate;border:0;border-spacing:0;box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5);white-space:nowrap;word-break: break-all; word-wrap: break-word}
td{max-width:500px;text-overflow:ellipsis;white-space:nowrap;overflow: hidden;border-top: 1px solid #dedede;}
table tr td:first-child{padding-left:20px}
table td:last-child {padding-right:10px;}
table tr:first-child td {border-top:0;}
tr{width:100%;height:0;border-spacing:0;white-space:nowrap;overflow: hidden;word-break: break-all; word-wrap: break-word;word-break:keep-all;}
iframe{transition:all .6s;}

#PageTitle{float:left;padding-bottom:4px;border-bottom:2px solid #257;font-weight:600;color:#257;padding-left:10px;padding-right:10px;}
.smart{border:0;padding:10px 15px 10px 15px;min-width:80px;cursor:pointer;background:#f50;color:#fff;border-radius:3px;}
.submit{border:0;padding:10px 15px 10px 15px;min-width:80px;cursor:pointer;background:#183;color:#fff;border-radius:3px;}
.cancel{border:0;padding:10px 15px 10px 15px;min-width:80px;cursor:pointer;background:#999;color:#fff;border-radius:3px;}
.SearchBG{text-align:center;margin-bottom:20px;}


.Loading{z-index:9999;position:absolute;left:calc( 50% + 65px);top:30%;width:50px;height:50px;border:3px solid transparent;border-left-color: #f50;border-right-color: #297;border-radius: 50%;-webkit-animation: 0.6s Loading linear infinite;animation: 0.6s Loading linear infinite;}
@-webkit-keyframes Loading{0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% { -webkit-transform: rotate(360deg);transform: rotate(360deg);}}
@keyframes Loading{0% { -webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}


.SwitchBox{appearance:none;width:60px;height:22px;position:relative;border-radius:16px;cursor:pointer;background-color:#aaa;}
.SwitchBox:before {content:"";position:absolute;width:18px; height:18px;background:white; left: 2px;top: 2px; border-radius: 50%;transition: left   0.3s;}
.SwitchBox:after {text-indent: 12px;word-spacing: 4px;display: inline-block; white-space: nowrap; color: white; font: 14px/30px monospace; font-weight: bold;}
.SwitchBox:checked {background-color: #f60;}
.SwitchBox:checked:before {left: 40px;}
.SwitchBox:checked:after {color: black;}



/***** Menu  *******/
.MenuItem0{float:left;white-space:nowrap;width:90%;margin-bottom:20px;height:20px;cursor:pointer;font-weight:500}
.MenuItem0:hover{color:#5ec}
.MenuItem0 img{max-width:20px;max-height:20px;margin-right:5px;margin-top:-3px}
.MenuItem0Arrow{float:right;padding-left:5px;margin-right:5px;margin-top:2px;transition:transform .4s;}
.MenuItem0Arrow:after{content:"〉"}
.MenuItem1BK{float:left;width:80%;padding-left:20%;margin-bottom:10px;height:0px;overflow:hidden;transition:height .4s;}
.MenuItem1{float:left;width:100%;margin-bottom:16px;height:20px;cursor:pointer;color:#5ef}
.MenuItem1:hover{color:#fff}

/***** Menu End *****/ 

.PageError{width:100%;margin-top:20%;text-align:center;font-size:30px;}
.PageError span{font-size:100px;color:#f60}
.TextButton{cursor:pointer;color:#2299cc;font-weight:500;-webkit-tap-highlight-color:transparent}
.TextButton:hover{color:#ff6600;}
.DataArea{float:left;width:98%;margin:0% 1% 0 1%;}
.Sigh{background:#f00;color:#fff;font-weight:600;border-radius:50%;font-size:13px;width:13px;padding-left:1px;padding-right:2px;text-align:center;height:16px;}
.DialogBottom{background:#fff;position:absolute;bottom:15px;padding-top:15px;padding-right:2%;text-align:right;width:98%;border-top:1px solid #eee;}
.OHI{float:left;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow: hidden;}
.DataItem{float:left;width:100%;height:30px;padding-top:15px;border-bottom:1px solid #eee;}
.DataItem:hover{background:#eee}

.zoom{position:absolute;z-index:999;bottom:10px;right:10px;cursor:pointer;opacity:0.3}
.zoom:hover{opacity:1}
.act{cursor:pointer;font-weight:400;transition: all .5s;}
.act:hover{filter:invert(100%);-webkit-filter: invert(100%);}
.SumArea{float:left;margin-top:3%;padding:20px;background:#fff;margin-right:3%;border-radius:3px;box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);}


.SumItem{float:left;width:100px;margin:10px;text-align:center;line-height:2;border-radius:3px;padding:10px;background:#F7F9FA;}

.TopNav{margin-left:50px;margin-right:50px;padding-bottom:3px;border-bottom:3px solid #fff;}
.TopNavAct{color:#f50;border-bottom:3px solid #f50;}

.editl{float:left;width:100%;margin-bottom:25px}
.edith{float:left;width:15%;text-align:right;margin-top:5px;}
.editt{float:left;width:85%;}
.ebnt{width:25px;height:20px;bacoground:#eee;border:1px solid #ccc;color:#000}