.red-fc {color:#e30030 !important;}
.blue-fc {color:blue !important;}
.green-fc {color:#00c000 !important;}
.orange-fc {color:#ff5a00 !important;}
.black-fc {color:#333 !important;}
.logo-fc {color:#497dbc !important;}

.topOuter {background:rgba(249,249,249,.8);border-bottom:1px solid #ddd;}

body {padding:0;line-height:22px;}
.wrap {width:100%;height:100%;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;background:url(../images/userbg2.jpg) no-repeat center center;background-size:cover;}
.tab {width:320px;padding:20px 50px 20px;border-radius:5px;background-color:rgba(255,255,255,1);box-shadow:0px 6px 12px 2px rgba(0,0,0,.2);}

.tab .title {display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end;padding-bottom:10px;}
.tab .title .logo img {width:114px;height:30px;}
.tab .title h1 {padding:1px 0;font-weight:bold;font-size:18px;line-height:19px;color:#555;}
.tab .title h1 a {display:block;color:inherit;}

.head {position:relative;width:320px;height:40px;line-height:40px;border-bottom:1px solid #ccc;}
.head ul {position:absolute;left:0;top:0;width:320px;}
.head li {float:left;width:160px;height:30px;line-height:30px;padding-bottom:10px;border-bottom:1px solid #ccc;}
.head li:last-child {text-align:right;}
.head li a {text-decoration:none;font-size:24px;color:#888;}
.head li.active {border-bottom-color:#497dbc;}
.head li.active a {color:#497dbc;}

.control-group {position:relative;margin-top:20px;}
.control-group input::-webkit-input-placeholder,
.control-group textarea::-webkit-input-placeholder {color:#acacac;opacity:1;font-weight:normal;}
.control-group input:-moz-placeholder,
.control-group textarea:-moz-placeholder {color:#acacac;opacity:1;font-weight:normal;}
.control-group input::-moz-placeholder,
.control-group textarea::-moz-placeholder {color:#acacac;opacity:1;font-weight:normal;}
.control-group input:-ms-input-placeholder,
.control-group textarea:-ms-input-placeholder {color:#acacac;opacity:1;font-weight:normal;}

.control-group label {position:absolute;top:-11px;left:11px;padding:0 5px;background-color:#fff;}
.control-group label:before {margin-left:0;}
.control-group input {width:100%;height:44px;padding-top:11px;padding-left:16px;font-size:14px;font-weight:bold;border:1px solid #ccc;border-radius:2px;background:rgba(255,255,255,1);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
.control-group input:focus {outline:none;border-color:#33ccff;}
.control-group img {position:absolute;top:10px;right:10px;cursor:pointer;}
.control-group input.user_yzm {width:118px;height:42px;padding:0;font-weight:normal;border:none;position:absolute;top:1px;right:1px;background-color:#ebebeb;border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid #ccc;font-size:13px;text-align:center;color:#666;cursor:pointer;}
.control-group .msg {display:none;font-size:12px;}
.control-group .msg::before {font-size:1rem;}
.control-group .icon-info-circled-2 {color:#55aadd;}
.control-group .icon-cancel-circled {color:#df2b2b;}

.control-group[class^="icon-"]:before,
.control-group[class*=" icon-"]:before {position:absolute;left:12px;top:0px;z-index:2;display:block;font-style:normal;font-weight:normal;width:1em;height:44px;line-height:44px;margin:0;text-align:center;color:#bdbdbd;font-size:1rem;font-variant:normal;text-transform:none;text-decoration:inherit;font-family:"fontello";speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.control-group.success:after,
.control-group.success:after {position:absolute;left:330px;top:0px;z-index:2;display:block;font-style:normal;font-weight:normal;width:1em;height:44px;line-height:44px;margin:0;text-align:center;color:#99cc99;font-size:1.125rem;font-variant:normal;text-transform:none;text-decoration:inherit;font-family:"fontello";speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:'\e81b';}

.form-actions {margin-top:20px;}
.form-actions .btn[type="button"] {width:320px;height:46px;outline:none;font-weight:normal;font-size:18px;color:#fff;cursor:pointer;border-radius:2px;padding:0;overflow:hidden;}
.form-actions .btn.green[type="button"] {border:1px solid #336600;background:#3bb000;color:#ffffff !important;}
.form-actions .btn.green[type="button"]:hover {border-color:#336600;background:#339900;}
.form-actions .btn.green[type="button"]:active {box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);}
.form-actions .btn.red[type="button"] {border:1px solid #990000;background-color:rgba(204,0,0,1);color:#ffffff !important;}
.form-actions .btn.red[type="button"]:hover {background-color:rgba(204,0,0,.8);}
.form-actions .btn.red[type="button"]:active {background-color:rgba(204,0,0,1);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);}
.form-actions .btn.blue[type="button"] {border:1px solid #396eaf;background-color:rgba(73,125,188,1);color:#ffffff !important;}
.form-actions .btn.blue[type="button"]:hover {background-color:rgba(73,125,188,.9);}
.form-actions .btn.blue[type="button"]:active {background-color:rgba(73,125,188,1);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);}

.addMess input[type="submit"],
.addMess input[type="button"],
input[type="submit"].mybut,
input[type="button"].mybut,
button.mybut {
  background-color:#ffb94b;
  background-image:-webkit-linear-gradient(top, #fddb6f, #ffb94b);
  background-image:-moz-linear-gradient(top, #fddb6f, #ffb94b);
  background-image:-ms-linear-gradient(top, #fddb6f, #ffb94b);
  background-image:-o-linear-gradient(top, #fddb6f, #ffb94b);
  background-image:linear-gradient(top, #fddb6f, #ffb94b);
  border-width:1px;
  border-style:solid;
  border-color:#d69e31 #e3a037 #d5982d #e3a037;
  border-radius:3px;
  text-shadow:0 1px 0 rgba(255,255,255,0.5);
  -webkit-box-shadow:0 0 1px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255,0.3) inset;
  -moz-box-shadow:0 0 1px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255,0.3) inset;
  box-shadow:0 1px 0 rgba(255,255,255,0.3) inset;
  min-width:120px;height:34px;padding:0 20px;
  cursor:pointer;
  font-weight:bold;
  font-size:inherit;
  letter-spacing:1px;
  color:#8f5a0a;}
input[type="button"].mybut.green {
  background:rgb(143,200,0);
  background:-webkit-linear-gradient(top, rgba(143,200,0,1) 0%, rgba(102,142,0,1) 100%);
  background:-moz-linear-gradient(top, rgba(143,200,0,1) 0%, rgba(102,142,0,1) 100%);
  background:-ms-linear-gradient(top, rgba(143,200,0,1) 0%, rgba(102,142,0,1) 100%);
  background:-o-linear-gradient(top, rgba(143,200,0,1) 0%, rgba(102,142,0,1) 100%);
  background:linear-gradient(top, rgba(143,200,0,1) 0%, rgba(102,142,0,1) 100%);
  border:1px solid rgba(0,0,0,0.4);
  text-shadow:0 1px 0 rgba(0,0,0,0.5);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.5);
  font-weight:normal;
  letter-spacing:0;
  color:#ffffff !important;
}

.addMess input[type="submit"]:active,
.addMess input[type="button"]:active,
input[type="submit"].mybut:active,
input[type="button"].mybut:active,
button.mybut:active {
  background-color:#fddb6f;
  background-image:-webkit-linear-gradient(top, #ffb94b, #fddb6f);
  background-image:-moz-linear-gradient(top, #ffb94b, #fddb6f);
  background-image:-ms-linear-gradient(top, #ffb94b, #fddb6f);
  background-image:-o-linear-gradient(top, #ffb94b, #fddb6f);
  background-image:linear-gradient(top, #ffb94b, #fddb6f);}
input[type='button'].mybut.green:active {
  background:rgb(102,142,0);
  background:-webkit-linear-gradient(top, rgba(102,142,0,1) 0%, rgba(143,200,0,1) 100%);
  background:-moz-linear-gradient(top, rgba(102,142,0,1) 0%, rgba(143,200,0,1) 100%);
  background:-ms-linear-gradient(top, rgba(102,142,0,1) 0%, rgba(143,200,0,1) 100%);
  background:-o-linear-gradient(top, rgba(102,142,0,1) 0%, rgba(143,200,0,1) 100%);
  background:linear-gradient(top, rgba(102,142,0,1) 0%, rgba(143,200,0,1) 100%);
}
input[type='submit'][disabled='disabled'].mybut,
input[type='button'][disabled='disabled'].mybut {cursor:not-allowed;}





form.html5-form div.username {position:relative;margin-top:20px;}
form.html5-form div.password {position:relative;margin-top:10px;}
form.html5-form div.authcode {position:relative;margin-top:10px;}
form.html5-form div.authcode img {position:absolute;top:10px;right:10px;cursor:pointer;}
form.html5-form div.username:before,
form.html5-form div.password:before,
form.html5-form div.authcode:before {
  position:absolute;z-index:2;top:0;
  font-family:"fontello";font-style:normal;font-weight:normal;speak:none;
  display:inline-block;text-decoration:inherit;
  width:30px;height:44px;line-height:44px;
  text-align:center;font-variant:normal;text-transform:none;font-size:18px;color:#999;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
form.html5-form div.username:before {content:'\e800';}
form.html5-form div.password:before {content:'\e801';}
form.html5-form div.authcode:before {content:'\f132';}
form.html5-form input[type="text"],
form.html5-form input[type="password"] {width:100%;height:44px;padding:6px 15px 6px 30px;line-height:30px;border:1px solid #ccc;border-radius:5px;font-size:14px;font-weight:bold;background-color:#f1f1f1;box-shadow:0 1px 1px #ccc inset,0 1px 0 #fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}

form.html5-form input::-webkit-input-placeholder,
form.html5-form textarea::-webkit-input-placeholder {color:#999;opacity:1;font-weight:normal;}
form.html5-form input:-moz-placeholder,
form.html5-form textarea:-moz-placeholder {color:#999;opacity:1;font-weight:normal;}
form.html5-form input::-moz-placeholder,
form.html5-form textarea::-moz-placeholder {color:#999;opacity:1;font-weight:normal;}
form.html5-form input:-ms-input-placeholder,
form.html5-form textarea:-ms-input-placeholder {color:#999;opacity:1;font-weight:normal;}
form.html5-form input[type="button"] {border-radius:5px !important;}
form.html5-form input[type="button"]::-moz-focus-inner {border:none;}
.form-other {display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;font-size:14px;margin-top:20px;}

.popup {position:fixed;z-index:999999;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);opacity:0;visibility:hidden;
display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;
-webkit-transition:opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition:opacity 0.3s 0s, visibility 0s 0.3s;
transition:opacity 0.3s 0s, visibility 0s 0.3s;
}
.popup.is-visible {opacity:1;visibility:visible;
-webkit-transition:opacity 0.3s 0s, visibility 0s 0s;
-moz-transition:opacity 0.3s 0s, visibility 0s 0s;
transition:opacity 0.3s 0s, visibility 0s 0s;
}
.popup .tab {
-webkit-transform:translateY(60px);
-moz-transform:translateY(60px);
-ms-transform:translateY(60px);
-o-transform:translateY(60px);
transform:translateY(60px);
-webkit-backface-visibility:hidden;
-webkit-transition-property:-webkit-transform;
-moz-transition-property:-moz-transform;
transition-property:transform;
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
}
.is-visible .tab {
-webkit-transform:translateY(0);
-moz-transform:translateY(0);
-ms-transform:translateY(0);
-o-transform:translateY(0);
transform:translateY(0);
}