@import url('/static/lib/select2/css/select2.min.css');
@import url('./select2.css');
:root{
  --menu-width: 200px
}
body{background-color: #fff;}

/* header */
#page-topbar {position: fixed;top: 0;right: 0;left: 0;z-index: 1002;background-color: #ffffff;-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);}
.navbar-header {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-pack: justify;-webkit-box-pack: justify;
  justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;
  margin: 0 auto;
  height: 70px;
  padding: 0 calc(24px / 2) 0 0;
}
.navbar-brand-box {padding: 0 1.5rem;width: var(--menu-width);background: #252b3b;}
.navbar-brand-box .logo {line-height: 70px;}
.header-profile-user {height: 36px;width: 36px;background-color: #f1f5f7;padding: 3px;}

/* menu */
.vertical-menu {
  width: var(--menu-width);
  z-index: 1001;
  background: #252b3b;
  bottom: 0;
  margin-top: 0;
  position: fixed;
  top: 70px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); 
}
#sidebar-menu {padding: 10px 0 30px 0;}
.metismenu {margin: 0;}
.metismenu li {display: block;width: 100%;}
.menu-title {
  padding: 12px 20px !important;
  letter-spacing: .05em;
  pointer-events: none;
  cursor: default;
  font-size: 11px;
  text-transform: uppercase;
  color: #505d69;
  font-weight: 600;
  font-family: "sans-serif";
  opacity: .5;
}
#sidebar-menu ul li a {
  display: block;
  padding: .625rem 1.5rem;
  color: #8590A5;
  position: relative;
  font-size: 13.3px;
  -webkit-transition: all .4s;
  transition: all .4s;
  font-family: "sans-serif";
  font-weight: 500;
}
#sidebar-menu ul li a:hover {color: #d7e4ec;}
#sidebar-menu ul li a:hover i {color: #d7e4ec;}
#sidebar-menu ul li a i {
  display: inline-block;
  min-width: 1.5rem;
  padding-bottom: .125em;
  font-size: 1.1rem;
  line-height: 1.35625rem;
  vertical-align: middle;
  color: #8590A5;
  -webkit-transition: all .4s;
  transition: all .4s;
  opacity: .75;
  font-size: 14px;
}
#sidebar-menu .has-arrow:after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1px solid #8590A5;
  border-bottom: 1px solid #8590A5;
  transform: rotate(45deg);
  display: block;
  float: right;
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
  font-size: 1rem;
  margin-top: 5px;
}
#sidebar-menu ul li .mm-active{color: #d7e4ec;}
#sidebar-menu ul li .mm-active i{color: #d7e4ec;}
.metismenu .sub-menu {display: none;height: 0;overflow: hidden;transition: all .3s;}
.metismenu .active .sub-menu{display: block !important;height: auto;}
.metismenu .active .has-arrow:after{transform: rotate(225deg) !important;}

/* content */
.main-content {margin-left: var(--menu-width);}
.page-content {padding: calc(70px + 24px) calc(24px / 2) 60px calc(24px / 2);}

/* upload images */
.upload-images-box{display: flex;flex-wrap: wrap;margin-bottom: 24px;}
.upload-images-box .upload-btn{width: 120px;height: 120px;border: 1px solid #ced4da;border-radius: 5px;overflow: hidden;font-size: 20px;}
.upload-images-box .upload-btn .webuploader-pick {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background: #ced4da;}
.upload-images-box .images-list{display: flex;flex-wrap: wrap;}
.upload-images-box .images-list .imgs{width: 120px;height: 120px;overflow: hidden;position: relative;border-radius: 5px;margin-right: 20px;}
.upload-images-box .images-list img{width: 100%;height: auto;border: 1px solid #ced4da;}
.upload-images-box .images-list span{position: absolute;right: 1px;top: 1px;display: inline-block;width: 20px;height: 20px;background: rgba(0, 0, 0, 0.4);display: flex;justify-content: center;align-items: center;border-bottom-left-radius: 10px;cursor: pointer;color: #fff;}
.upload-images-box .images-list .tips{position: absolute;width: 100%;background: rgba(0, 0, 0, 0.4);bottom: 0;left: 0;text-align: center;display: none;font-size: 14px;}
.upload-images-box .images-list .success{color: aquamarine;}
.upload-images-box .images-list .fail{color: red;}

/* upload files */
/* .custom-file .webuploader-pick{width: 100%;height: 100%;background: transparent;} */
/* .custom-file-label::after{content: '上传文件';} */
.upload-file-box{position: relative;}
.upload-file-box .webuploader-pick{position: absolute;right: 0;top: 0;padding: 8px 15px;background-color: #5664d2;}
.upload-file-box .webuploader-container{position: static;}
.upload-file-box .label span{padding-right: 10px;cursor: pointer;display: inline-block;}
.upload-file-box .label{display: flex;}
.upload-file-box .label label{display: inline-block;max-width: 400px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.uploader-file-input{display: none;}

/* 登录 */
.login-box{background: url('/static/images/bg.jpg') no-repeat;background-size: cover;}
.login-container{padding: 35px 20px;border-radius: 5px;margin-top: 100px;background: rgba(255, 255, 255, 0.8);}
.login-box i{font-weight: bold;}
.cover-box{width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);}

.bg-fff{background: #fff;}
.container-form{width: 80%;margin: auto;}
.table-operation{color: #5664d2;outline: none;border: none;}
table img{height: 30px;width: auto;}
table a{margin: 0 5px;}
.detail-img{height: 100px;width: auto;margin-right: 12px;}
.page-title{display: flex;align-items: center;}
.page-title h4{margin: auto;padding-left: 12px;font-size: 500;}

/* 图片预览 */
.img-preview{cursor: pointer;}
.img-preview-cover{width: 100vw;height: 100vh;z-index: 9999;background: rgba(0, 0, 0, 0.8);position: fixed;top: 0;left: 0;overflow: hidden;}
.img-preview-cover img{width: 800px;height: 800px;object-fit: contain;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.img-preview-cover i{font-size: 48px;color: #fff;position: absolute;right: 10px;top: 10px;background: rgba(255, 255, 255, 0.4);}
.img-preview-cover i{display: flex;justify-content: center;align-items: center;border-radius: 50%;cursor: pointer;}

/* 检索输入框 */
.input-tips-box{position: absolute;z-index: 5;background: #fff;width: 100%;border-left: 1px solid #ced4da;border-right: 1px solid #ced4da;border-bottom: 1px solid #ced4da;border-radius: 3px;z-index: 99999;}
.input-tips-box{max-height: 200px;overflow-y: auto;}
.input-tips-box .item{margin: 0;padding: 6px 12px;cursor: pointer;}
.input-tips-box .item:hover{background: #5664d2;color: #fff;}
.input-tips-box .ic{font-size: 24px;padding: 10px 0;display: flex;justify-content: center;}
.input-tips-box .ic i{animation: searcha .5s linear infinite;}
.input-tips-box p{text-align: center;color: #9999;font-size: 12px;padding-top: 1rem;}
@keyframes searcha {
  0%{transform: rotate(0deg);}
  50%{transform: rotate(-180deg);}
  100%{transform: rotate(-360deg);}
}
.input-tips-hide{display: none;}


/* yy弹窗 */
.yyalert-box{position: fixed;width: 100%;height: 100%;left: 0;top: 0;z-index: 9999;background: rgba(0, 0, 0, 0.5);}
.yyalert-box .yyalert{width: 400px;background: #fff;border-radius: 5px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);padding: 20px;}
.yyalert-box .yyalert{animation: yyalert .3s ;transition: all .3s;}
.yyalert-box .yyalert .title{text-align: center;font-size: 24px;}
.yyalert-box .yyalert .btns{display: flex;justify-content: center;}
.yyalert-box .yyalert .btns button{margin: 0 10px;}
@keyframes yyalert {
  0%{transform: translate(-50%,-50%) scale(0)}
  45%{transform: translate(-50%,-50%) scale(1.05)}
  80%{transform: translate(-50%,-50%) scale(0.95)}
  100%{transform: translate(-50%,-50%) scale(1)}
}

/* 新增 */
table .form-control{width: 100px;}
table tr>td{vertical-align: middle;}
.img-small{width: 100px;height: 60px;object-fit: cover;}
.vertical-middle{vertical-align: middle;}
.m-l-26{margin-left: -26px;}
.detail-img{
    height: 120px;
    width: 200px;
    margin-right: 12px;
    object-fit: cover;
    border-radius:5px;
  }
.page-title{display: flex;align-items: center;}
.page-title h4{margin: auto;padding-left: 12px;font-size: 500;}
.upload-images-box .upload-btn{width: 200px;margin-bottom: 20px;}
.upload-images-box .images-list .imgs{width: 200px;margin-bottom: 20px;}
.three-type-input{display: none;}

.importMouldFile{width: 556px;height: 300px;}
.importMouldFile .webuploader-pick{position: absolute;left: 0;top: 0;width: 510px;height: 300px;background: #F7F7F7;color: #5664d2;
    display: flex;flex-direction: column;align-items: center;justify-content: center;}
.importMouldFile .webuploader-pick i{color: #B8BCC5;font-size: 60px;}

.border-color{color: #D8BCC5;border-radius: 5px;color: #000;}
.color-red{color: red;}
.color-green{color: green;}

.qualifications-type-input{display: none;}
/* 不分页table */
.table-max-height{max-height: 500px;overflow-y: auto;}

.form-control:disabled{
  background: #efefef;
}
/* 异步排序 */
.table tbody tr:nth-child(1) .table-sort .top{display: none;}
.table tbody tr:nth-last-child(1) .table-sort .bottom{display: none;}
.table-sort{position: relative;width: 100px;}
.table-sort .sort{position: absolute;bottom: 15px;cursor:pointer}
.table-sort .sort i{display: flex;}
.table-sort .top{transform: rotate(90deg);right: 15px;}
.table-sort .bottom{transform: rotate(-90deg);right: 0px;}
.table-row{white-space: nowrap;max-width: 200px;overflow: hidden;text-overflow: ellipsis;}
.table-delete span{margin: 0 5px;position: relative;}
.table-delete span i{color: #5664d2;position: absolute;right: -5px;top: -5px;font-size: 14px;border: 1px solid rgba(0, 0, 0, 0.1);display: flex;justify-content: center;align-items: center;border-radius: 50%;background: rgba(0, 0, 0, 0.1);cursor: pointer;}
.table-delete span i:hover{background: rgba(0, 0, 0, 0.5);color: #fff;}