a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,input,textarea,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
  margin: 0;padding: 0;border: 0;font-size: 100%;font-weight: 400;vertical-align: baseline; box-sizing: border-box; cursor: default;}
img {
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: -o-crisp-edges; /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

::-webkit-scrollbar {width: 5px;height: 5px;}
::-webkit-scrollbar-thumb {background-color: #ccc;border-radius: 5px;}
::-webkit-scrollbar-track {background: 0 0;}
html,body{width: 100%; height: 100%;}
table{width: 100%; border-collapse: collapse; vertical-align: middle;}
table tr td{vertical-align: middle;}
.main-container{position: relative; height: 100%; margin: auto; min-height: 550px; min-width: 800px; overflow: auto;}

.el-loading-mask {background: none !important;}
.el-dropdown-menu__item:focus,.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #4599FE !important;
  color: #ffffff !important;
}
.el-popper[x-placement^=top]{margin-bottom:5px !important;}
.el-popper[x-placement^=bottom]{margin-top:5px !important;}
.el-dropdown-menu__item {white-space: nowrap;}
.el-message-box {width: 300px !important; padding-bottom: 15px !important;}
.el-message-box__header {background: #F5F6F7; padding-top: 15px !important;}
.el-message-box__title {font-size: 16px !important;color: #333333;}
.el-message-box__headerbtn {display: none;}
.el-message-box__status+.el-message-box__message {}
.el-message-box__container {padding: 15px 0;}
.el-message-box__btns .el-button--small, .el-message-box__btns .el-button--small.is-round {padding: 6px 22px !important;}
.el-message-box__btns button:nth-child(2) {margin-left: 20px !important;}

.el-dialog__header {height: 42px; background: #E4E4E4; padding: 0 !important;}
.el-dialog__title {display: block; text-align: center; font-size: 16px !important; color:#333333  !important; text-align: center; line-height: 42px  !important;}
.el-dialog__headerbtn {display: none; top: 12px !important;}

.dialog-footer-btn-box{text-align: center; margin: 10px 20px 0 20px;}
.dialog-footer-btn-box button{width: 88px; height: 26px; font-size: 12px; line-height: 24px; text-align: center; border-radius: 4px; margin-left: 10px;}
.dialog-footer-btn-box button:first-child{border: 1px solid #C0C0C0; background: #ffffff; color: #666666;}
.dialog-footer-btn-box button:last-child{border: 1px solid #0486FE; background: #0486FE; color: #ffffff;}

.toleft-enter-active, .toleft-leave-active{transform: translate3d(0,0,0);transition: .3s}
.toleft-enter, .toleft-leave-to{transform: translate3d(100%,0,0)}
.totop-enter-active, .totop-leave-active{transform: translate3d(0,0,0);transition: .3s;}
.totop-enter, .totop-leave-to{transform: translate3d(0,100%,0)}
.tobottom-enter-active, .tobottom-leave-active{transform: translate3d(0,0,0);transition: .3s;}
.tobottom-enter,.tobottom-leave-to{transform: translate3d(0,100%,0)}
.tofade-enter-active, .tofade-leave-active {transition: opacity .3s linear;}
.tofade-enter, .tofade-leave-active {opacity: 0;}

.form-page{position: absolute; left: 0; right: 0; bottom: 0; top: 0;background: url("../img/bg.png") no-repeat center center;background-size: 100% 100%; min-height: 550px; overflow: hidden;}
.form-page-main{width: 732px; height: 532px; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; padding:13px 16px 12px 316px;
  background: url("../img/bg2.png") no-repeat center center;}
.form-page-main .form-header{height: 60px; overflow: hidden; padding: 13px 60px; font-size: 0;}
.form-page-main .form-header span{display: inline-block; font-size: 18px; color: #999999; margin-right: 40px; height: 34px; line-height: 34px;}
.form-page-main .form-header .active{color: #0486FE; position: relative;}
.form-page-main .form-header .active:before{content: ""; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 40px; height: 2px; background: #0486FE; border-radius: 2px;}
.form-page-main .form-box{width: 280px; margin: auto;}
.form-page-main .input-box{margin-bottom: 35px; font-size: 0; position: relative;}
.form-page-main .input-box:last-child{margin-bottom: 0 !important;}
.form-page-main .input-box label{display: block; font-size: 14px; color: #999999;}
.form-page-main .input-box input[type='text'],.form-page-main .input-box input[type='password']{display: block; width: 100%; height: 30px; line-height: 30px;
  font-size: 18px; color: #333333;border-bottom: 1px solid #E1E1E1; outline: none;}
.form-page-main .input-box input::placeholder{color: #DEDEDE; font-size: 14px;}
.form-page-main .input-box input:focus{border-bottom: 1px solid #0486FE;}
.form-page-main .input-box .code{position: absolute; right: 0px; bottom: 1px; height: 40px; vertical-align: top; overflow: hidden;}
.form-page-main .input-box .code img{width: 80px; height: 40px;}
.form-page-main .input-box .code span{display: inline-block; width: 80px; height: 40px; font-size: 14px; color: #666666; text-align: center; line-height: 40px; vertical-align: top;}
.form-page-main .input-box .code i{font-size: 20px; color: #999999; line-height: 40px; vertical-align: top; margin-left: 5px;}
.form-page-main .btn-box{margin-top: 20px;}
.form-page-main .btn-box button{background: #0486FE; border: none; border-radius: 4px; width: 140px; height: 40px; font-size: 16px; color: #ffffff; text-align: center; line-height: 40px;}
.form-page-main .btn-box span{display: inline-block; height: 40px; line-height: 40px; font-size: 14px; color: #666666; margin-left: 15px;}
.form-page-main .btn-box span a{color: #0486FE; text-decoration: none;}
.form-page-main .icon-eye-open{display: inline-block; height: 20px; width: 20px; position: absolute; right: 0; bottom: 5px;
  background: url("../img/icon-eye-open.png") no-repeat center center; background-size: 100% 100%;}
.form-page-main .icon-eye-close{display: inline-block; height: 20px; width: 20px; position: absolute; right: 0; bottom: 5px;
  background: url("../img/icon-eye-close.png") no-repeat center center; background-size: 100% 100%;}

.user-details .content-box{position: relative; border-radius: 6px; background: #F6F6F6; overflow: hidden; }
.user-details .close-btn{width: 30px; height: 30px; position: absolute; right: 0; top: 0; padding-left: 13px; text-align: center; color: #ffffff; line-height: 20px;
  background: url('../../static/img/close-bg.png') no-repeat right top;}
.user-details .top{height: 120px; background: #ffffff; display: flex; align-items: center; position: relative; padding: 0 30px; overflow: hidden;}
.user-details .top .left-content{}
.user-details .top .user-name{display: inline-block; font-size: 18px; color: #333333; line-height: 25px; padding-right: 17px; white-space: nowrap; text-overflow: ellipsis;
   overflow: hidden; min-width: 30px; max-width: 170px; background: url("../../static/img/icon-boy.png") no-repeat right center; background-size: 12px 12px;}
.user-details .top .user-name.gril{background: url("../../static/img/icon-gril.png") no-repeat right center; background-size: 12px 12px;}
.user-details .top .user-account{display: block; font-size: 14px; color: #666666; line-height: 20px;}
.user-details .top .avatar{height: 70px; width: 70px; border-radius: 50%; position: absolute; top: 25px; right: 30px; overflow: hidden; background: #EDEDED;}
.user-details .top .avatar img{width: 100%;}
.user-details .top .avatar .no-avatar{height: 70px; width: 70px; line-height: 70px; font-size: 20px;}
.user-details .user-info{padding: 30px;}
.user-details .user-info .list{font-size: 0; vertical-align: top; margin-bottom: 10px;}
.user-details .user-info .list .name,.user-details .user-info .list .val{display: inline-block; vertical-align: top; font-size: 12px; line-height: 20px; white-space: nowrap; text-overflow: ellipsis;
  overflow: hidden; max-width: 170px;}
.user-details .user-info .list .name{width: 80px; color: #999999;}
.user-details .user-info .list .val{color: #333333;}
.user-details .user-info .list .remarkName{}
.user-details .user-info .list input[type='text']{width: 170px; height: 20px; font-size: 12px; color: #333333; line-height: 20px; background: #E4E4E4; border-radius: 4px; padding: 0 .7em;}
.user-details .user-info .area-box{margin-top: 15px;}
.user-details .user-info .area-box textarea{width: 100%; height: 90px; padding: .7em; font-size: 12px; color: #333333; background: #E4E4E4; border-radius: 4px;}
.user-details .user-info .btn{height: 36px; background: #0486FE; border-radius: 4px; font-size: 16px; color: #ffffff; text-align: center; line-height: 36px; margin-top: 20px;}

.file-xlsx,file-xls{background: url("../img/icon-xls.png") no-repeat !important; background-size: 100% 100%;}
.file-doc,file-docx{background: url("../img/icon-word.png") no-repeat !important; background-size: 100% 100%;}
.file-pdf{background: url("../img/icon-pdf.png") no-repeat !important; background-size: 100% 100%;}
.file-ppt,.file-pptx{background: url("../img/icon-ppt.png") no-repeat !important; background-size: 100% 100%;}
.file-zip{background: url("../img/icon-zip.png") no-repeat !important; background-size: 100% 100%;}
.file-txt{background: url("../img/icon-txt.png") no-repeat !important; background-size: 100% 100%;}

.no-avatar{display: inline-block; height: 40px; width: 40px; overflow: hidden; background: #369fff; border-radius: 50%; font-size: 18px; text-align: center; line-height: 40px; color: #ffffff;}
.group-owner {background: linear-gradient(142deg, #e066ff, #F56C6C);}
.group-manager {background: linear-gradient(142deg, #66CDFF, #369FFF);}
.badge .el-badge__content.is-fixed {
  top: 0;
  right: 15px;
}

.badge .el-badge__content {
  height: 16px;
  line-height: 14px;
  padding: 0 4px 2px 4px;
}