.flex-wrap{flex-wrap:wrap;}
.flex-start{display:flex;justify-content:flex-start;align-items:flex-start;}
.flex-center{display:flex;justify-content:center;align-items:center;}
.flex-center-start{display:flex;justify-content:center;align-items:flex-start;}
.flex-center-end{display:flex;justify-content:center;align-items:flex-end;}
.flex-btw{display:flex;justify-content:space-between;align-items:center;}
.flex-start-center{display:flex;justify-content:flex-start;align-items:center;}
.flex-start-end{display:flex;justify-content:flex-start;align-items:flex-end;}
.flex-btw-start{display:flex;justify-content:space-between;align-items:flex-start;}
.flex-btw-end{display:flex;justify-content:space-between;align-items:flex-end;}
.flex-end{display:flex;justify-content:flex-end;align-items:flex-end;}
.flex-end-start{display:flex;justify-content:flex-end;align-items:flex-start;}
.flex-end-center{display:flex;justify-content:flex-end;align-items:center;}

.container-user{position:relative;padding-left:300px!important;background-color:#fff;margin:15px 0;box-shadow:0 0 3px rgba(0,0,0,0.04);border-radius:var(--theme-radius);overflow:hidden;}
.container-user .content{margin-right:0;padding:20px;margin-bottom:0;width:100%;float:none}
.userside{float:left;margin-left:-300px;width:300px;background-color:#fafafa;padding:20px;height: 100%;position: absolute;}
.usermenu{list-style:none;margin:0 0 15px;padding:0}
.usermenu li{margin-bottom:1px}
.usermenu li a{display:block;padding:5px 20px;font-size:16px;color:#888;border-radius:3px}
.usermenu li a:hover{color:#666}
.usermenu li.active a{color:#666;background-color:#eee;position:relative;text-decoration:none}
.usermenu li.active i{color:var(--theme-color);}
.usermenu li:last-child a{border-bottom:none}
.usermenu li .icon{font-size:18px}
.usermenu h4{margin:0}
.usermenu h4 a{color:#666;background-color:#F7F9FA;padding-top:15px;cursor:default;border-bottom-color:#e6e6e6}
.usercheck{background: var(--theme-color);color: #fff !important;border-radius: 15px;padding: 3px 12px;font-size: 12px;display: inline-block;width: 76px;text-align: center;}
.usercheck.active{background: #aaa !important}
.user-main{position:relative;min-height:650px}



.form-control,
select,
textarea.form-control{background-color:#f9f9f9;border:1px solid #eee;font-size:13px;color:#999;line-height:42px;margin-bottom:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;padding:0 10px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.form-control:focus,
textarea.form-control:focus{background-color:#f9f9f9;border-color:#18bc9c;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control{background-color:#eee;opacity:1}
.form-control[disabled],
fieldset[disabled] .form-control{cursor:not-allowed}
.form-control::-webkit-input-placeholder{color:#999}
.form-control:-moz-placeholder{color:#999}
.form-control::-moz-placeholder{color:#999}
.form-control:-ms-input-placeholder{color:#999}




input[type=checkbox],input[type=radio]{clear:none;display:inline-block;margin:-2px 4px 0 0;padding:0!important;width:16px;height:16px;min-width:16px;outline:0;border-radius:3px;color:#fff;border:1px solid #ddd;vertical-align:middle;text-align:center;line-height:0;cursor:pointer;-webkit-transition:.05s border-color ease-in-out;transition:.05s border-color ease-in-out;-webkit-appearance:none}
input[type=radio]{border-radius:20px}
input[type=checkbox]:checked,input[type=radio]:checked{border-color:#18bc9c;background:#18bc9c;}
input[type=checkbox]:checked:before,input[type=radio]:checked:before{display:inline-block;margin-top:1px;background:#18bc9c;color:#fff;content:"√";vertical-align:middle;font:normal 14px/1 "Microsoft Yahei";speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
input[type=file]{display:block}
input[type=range]{display:block;width:100%}


.button-primary{color:#fff;background:#18bc9c;text-shadow:0 -1px 0 rgb(0 0 0 / 12%);box-shadow:0 2px #f2f2f2;}
.button-primary:active,
.button-primary:hover,
.button-primary:focus{color:#fff;opacity:.8;filter:alpha(opacity=80);}
.button-primary::before{color:#fff;opacity:.8;filter:alpha(opacity=80);}




.register-login-modal .modal-dialog{width:385px;margin:100px auto;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
.register-login-modal .modal-content{border:none;box-shadow:none;position:relative;background-color:transparent}
.register-login-modal .nav-tabs{border-bottom:none;text-align:center;padding-left:0;padding:10px;list-style:none;margin:0}
.register-login-modal .nav-tabs>li{float:none;display:inline-block}
.register-login-modal .nav-tabs>li>a{opacity:.3;padding:0 10px;border:none;font-size:15px;text-transform:capitalize;font-weight:600;color:#18bc9c;}
.register-login-modal .nav-tabs>li.active>a,
.register-login-modal .nav-tabs>li.active>a:focus,
.register-login-modal .nav-tabs>li.active>a:hover,
.register-login-modal .nav-tabs>li>a:active,
.register-login-modal .nav-tabs>li>a:focus,
.register-login-modal .nav-tabs>li>a:hover{background-color:transparent;border:none;opacity:1;color:#18bc9c;}
.register-login-modal .tab-content{padding:20px;background-color:#fff;border-radius:4px}
.register-login-modal .open-oauth .btn{color:#fff!important;font-size:14px;margin:0;-webkit-border-radius:50%;-moz-border-radius:2px;position:relative;display:inline-block;margin-right:10px;width:32px;height:32px;text-align:center;line-height:32px;cursor:pointer;margin-left:10px;padding:0;letter-spacing:0;font-weight:400}
.register-login-modal .open-oauth .btn:hover{opacity:.5}
.register-login-modal .open-oauth{margin-bottom:20px}
.register-login-modal .open-oauth .btn-qq{background-color:#1296db}
.register-login-modal .open-oauth .btn-weixin{background-color:#23bf36}
.register-login-modal .open-oauth .btn-weibo{background-color:#ff9100}
.register-login-modal .btn--facebook i{margin-right:7px}
.register-login-modal .or-text{position:relative;text-align:center;line-height:1;margin:15px}
.register-login-modal .or-text:after{content:"";position:absolute;top:6px;left:0;background-color:#e5e5e5;width:100%;height:1px}
.register-login-modal .or-text span{background:#fff;color:#999;display:inline-block;padding:0 8px;z-index:2;position:relative;font-size:14px;}
.register-login-modal .form-group{margin-bottom:15px}
.register-login-modal .signup-checkbox{color:#777;}
.register-login-modal .signup-checkbox .input-checkbox{padding-top:10px;margin-bottom:25px}
.register-login-modal .signup-checkbox .label-checkbox span,
.register-login-modal .signup-checkbox .label-checkbox span a{color:#aaa}
.register-login-modal .signup-checkbox .label-checkbox span a{text-decoration:underline}
.register-login-modal .protocol-a{color:#18bc9c;}
.register-login-modal .forget-password{margin-top:20px;display:block;text-align:center;text-decoration:underline;color:#aaa;font-size:13px}



.user_wrap{position:relative;padding-left:300px!important;background-color:#fff;margin:0 0 15px;box-shadow:0 0 3px rgba(0,0,0,0.04);border-radius:var(--theme-radius);overflow:hidden;}
.user_content{margin-right:0;padding:20px;margin-bottom:0;width:100%;min-height:600px;float:none}

@media (max-width:767px){
.user_wrap{padding-left:0!important;}
.user_content{margin-right:0;padding:20px;margin-bottom:0;width:100%;float:none}
.userside{float:left;margin-left:0;width:100%;}
}


.userside .side_face img{display:block;max-width:50%;margin:0 auto;border-radius:50%;}
.userside .side_face .name{display:block;margin:20px 0;font-size:14px;color:#666;text-align:center;}
.userside .side_face .name span{color:#FF5C26;}
.userside .side_nav{display:flex;flex-wrap: wrap;flex-shrink:0;width:100%;}
.userside .side_nav li{flex-shrink:1;width:100%;margin:5px;height:38px;line-height:38px;font-size:15px;cursor:pointer;transition:.5s all;}
.userside .side_nav li i{font-size:16px;margin-right:5px;}
.userside .side_nav li a{background:#f6f6f6;border-radius:19px;color:#888;}
.userside .side_nav li.active a,
.userside .side_nav li:hover a{color:#18bc9c;background:#f2f2f2;}

.panels{float:left;width:100%;margin-bottom:15px;}
.panels .panels-heading{width:100%;height:40px;margin-bottom:15px;padding-left:15px;border-bottom:1px solid #f3f3f3;position:relative;}
.panels .panels-heading:before{position:absolute;top:10px;left:-1px;content:'';width:6px;height:20px;background:#18bc9c;box-shadow: 0 2px 5px rgba(24,188,156,0.5);}
.panels .panels-heading h3{position:relative;display:inline-block;font-size:15px;font-weight:600;line-height:40px;}
.panels .panels-heading .more p{font-size:16px;}

.panels .panels-body{width:100%;height:auto;}




.userInfo{float:left;width:100%;overflow:hidden;}
.userInfo ul{margin:0 -8px;}
.userInfo ul li{float:left;width:calc(25% - 16px);height:auto;margin:0 8px;border:1px solid #f1f1f1;border-radius:5px;font-size:15px;text-align:center;overflow:hidden;}
.userInfo ul li span{float:left;width:100%;height:50px;line-height:50px;font-size:20px;font-weight:normal;}
.userInfo ul li:nth-child(9n+1) span{color:#f60;}
.userInfo ul li:nth-child(9n+2) span{color:#f00;}
.userInfo ul li:nth-child(9n+3) span{color:#00f;}
.userInfo ul li:nth-child(9n+4) span{color:#f60;}
.userInfo ul li p{float:left;width:100%;height:30px;line-height:30px;font-size:13px;color:#666;background:#f5f5f5;}

.templateList{display:flex;flex-wrap:wrap;align-content:flex-start;margin:10px 0;}
.templateList li{flex-shrink: 0;width:25%;padding:0 10px;text-align: center;}
.templateList li .picture{overflow: hidden;}
.templateList li img{display: block;width: 100%;transition: .5s all;}
.templateList li .name{font-size:14px;color: #333;margin-top: 15px;}
.templateList li:hover .name{color: #18bc9c;transition: .5s all;}
.templateList li:hover img{transform: scale(1.03);}

.picture-list{display:flex;flex-wrap:wrap;}
.picture-list li{flex-shrink:0;width:25%;padding:5px 10px;text-align: center;position: relative;}
.picture-list li .picture{overflow: hidden;}
.picture-list li img{display: block;width: 100%;transition: .5s all;}
.picture-list li .name{font-size:14px;color: #333;margin-top: 15px;}
.picture-list li:hover .name{color: #18bc9c;transition: .5s all;}
.picture-list li:hover img{transform: scale(1.03);}



.OperateAll{width:30px;background:rgba(0,0,0,0.6);position:absolute;right:15px;top:20px;border-radius:30px;padding:8px 0;transition:.5s all;opacity:0;}
.OperateAll dd{height:30px;cursor:pointer;}
.OperateAll dd i{font-size:18px;color:#fff;}
.OperateAll dd.active i{color:#18bc9c;}
.OperateAll dd span{font-size:13px;color:#fff;background:rgba(0,0,0,0.8);border-radius:10px;width:82px;height:30px;line-height:30px;position:absolute;left:-90px;text-align:center;opacity:0;transition:.5s all;}

/* pointer-events: none; */
.OperateAll dd span::after{content:'';width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid rgba(0,0,0,0.8);position:absolute;right:-8px;top:0;bottom:0;margin:auto;}
.OperateAll dd:hover span{opacity:1;}
.OperateAll .collect.active i{}
.picture-list li:hover .OperateAll{opacity:1;}


@media (max-width:767px){
.user_wrap{flex-direction: column;}
.userside{width:100%;}
.userside .side_nav li{width:calc(50% - 10px);font-size:13px;}
.user_content{width:100%;}
.userInfo .avatar{display:none;}
.userInfo .infoDetail{width:calc(100% - 10px);margin-left:10px;}
.userInfo .infoDetail ._labels li{width:100%;}
.templateList li{width:50%;padding:0 10px;}
.picture-list li{width:50%;padding:5px;}
}


.EditProfile{margin: 0 20px;}
.UploadAvatar img{margin-right: 15px;width: 16%;border-radius: 50%;} 
.UploadAvatar #avatarInput{display:none}
.UploadAvatar .custom-file-button{display:inline-block;padding:10px;font-size:var(--font16);cursor:pointer;text-align:center;text-decoration:none;outline:0;border:none;border-radius:15px;background-color:#EDF2F5;color:#fff;width:100px;height:50px;color: #000;}
.UploadAvatar .custom-file-button:hover{background-color:#EDF2F0}
.EditProfile .inputItem{margin-top:20px;}
.EditProfile .inputItem .i_child{flex-shrink: 0;width: 48%;margin-right:4%;}
.EditProfile .inputItem .i_child:nth-child(odd){}
.EditProfile .inputItem .i_child:nth-child(even){margin-right:0;}
.EditProfile .inputItem .i_describe{flex-shrink: 0;width: 100%;}
.EditProfile .inputItem label{display: block;font-size:15px;color: #000;margin-bottom: 10px;}
.EditProfile .inputItem input,.EditProfile .inputItem select,.EditProfile .inputItem textarea{border: 1px solid #E8E8E9;border-radius: 5px;padding:0 10px;line-height: 38px;height: 38px;font-size:16px;color: #000;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;}
.EditProfile .inputItem textarea{height: 150px;line-height: 1.8;padding: 10px;}
.EditProfile .i_submit{width:100%;height: 50px;line-height: 50px;border-radius: 10px;color: #fff;background: #18bc9c;font-size: var(--font16);cursor: pointer;margin-top: 30px;display: block;}


/*-- 表格 --*/
.leaf-table-top{display: flex;margin-bottom: 15px;justify-content: space-between;}
.leaf-table-bottom{display: flex;margin-top: 15px;justify-content: space-between;}
.leaf-table{width:100%;border:1px solid #ebeef5}
.leaf-table > thead > tr > th{border-top:0;vertical-align:bottom;font-weight:normal;color:#999;font-size: 14px;padding:10px 12px;border-bottom:1px solid #ebeef5;border-right:1px solid #ebeef5;background-color:#fafafa;text-align:left;line-height:20px}
.leaf-table > tbody > tr > td{line-height:24px;border-top:1px solid #fafafa;padding:8px 12px;border-bottom:1px solid #ebeef5;border-right:1px solid #ebeef5;vertical-align:middle}
.leaf-table > tbody + tbody{border-top:2px solid #fafafa}
.leaf-table > tbody > tr:hover{background-color:#fbfbfb;}
.leaf-table-sort,.leaf-table-sort-desc,.leaf-table-sort-asc{background-repeat:no-repeat;background-position:center right;cursor:pointer}
.leaf-table-sort{background-image:url("data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==")}
.leaf-table-sort-desc{background-image:url("data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7")}
.leaf-table-sort-asc{background-image:url("data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7")}
.leaf-table input[type="checkbox"]{width:16px;height:16px;cursor:pointer;-webkit-appearance:none;border:1px solid #ddd;border-radius:2px}
.leaf-table input[type="checkbox"]:checked{border:1px solid #ddd;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAA1klEQVQ4T53S0Q2CMBAA0LsygI7gBjICI7iBOIB40DiFARocQNjAERhBN5EB7JmSlhSDCdIfclfeXa+AsHDhQgd/QSJaB6jbvKzC2ZCINgHqOwBs87LCWfBMFGrULQCszGgDlGlS52UVT80riXaAunYIABrzbt9Rpgm7hI+z7Bgj483L9cjEPjTxsCHTRAHAySFGPhTF1XTul4Mmsbe5xj5d3DEy+WiA9rg+doU7wSK6KPX4nn90q+aSvM5PwSKeQqOOrqLF4ZtFpJR6/fqzZn3HKbwYfgBL/U8Pdu1XZQAAAABJRU5ErkJggg==")}
.leaf-table-nodata{padding:20px 10px;text-align:center;font-size:14px;color: var(--primary-color);}
.leaf-table-list-img{max-width:60px;max-height:60px}
.leaf-table-list-status-0 {padding: 2px 3px;font-size: 12px;background-color: #18bc9c;color: #fff;border-radius: 2px;}
.leaf-table-list-status-1 {padding: 2px 3px;font-size: 12px;background-color: #ff5722;color: #fff;border-radius: 2px;}