:root{
  --mainColor: #1e9fff;
  --subColor: #66B1FF;
}

body{
  margin: 10px;
  background-color: #eeeeee;
}

/**滚动条 */
::-webkit-scrollbar {
  width: 7px;
  height: 7px
}
::-webkit-scrollbar-track {
  background-color: transparent;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
::-webkit-scrollbar-thumb {
  background-color: #9c9da0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em
}

.layui-icon {
   /*font-size: inherit;*/
}

/* 主题颜色 */
.layui-breadcrumb a:hover{
  color: var(--subColor) !important;
}
.layui-menu-lg .layui-menu-body-title a:hover,.layui-menu-lg li:hover{
  color: var(--subColor);
}
.layui-laypage a:hover{
  color: var(--mainColor);
}
.layui-nav .layui-this:after, .layui-nav-bar {
  background-color: var(--subColor);
}
.layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover {
  background-color: var(--mainColor);
}
.layui-nav-tree .layui-nav-bar {
  background-color: var(--mainColor);
}
.layui-form-select dl dd.layui-this {
  background-color: var(--subColor);
  color: #ffffff;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
  background-color: var(--mainColor);
}
.layui-laypage input:focus,.layui-laypage select:focus{
  border-color: var(--mainColor) !important
}
.layui-table-edit:focus{
  border-color: var(--subColor) !important;
}
.layui-upload-drag[lay-over]{
  border-color: var(--mainColor);
}
.layui-transfer-active .layui-btn{
  background-color: var(--subColor);
  border-color: var(--subColor);
}
.layui-btn{
  background: 0 0;
  border-color:#d2d2d2;
  color:#5f5f5f;
}
.layui-btn:hover{
  border-color: var(--mainColor);
  color:#333
}
.layui-btn.layui-btn-primary{
  background-color: var(--mainColor);
  border-color: var(--mainColor);
  color: #ffffff;
}
.layui-btn.layui-btn-normal{
  background-color: #1e9fff;
  border-color: #1e9fff;
  color: #ffffff;
}
.layui-btn.layui-btn-warm{
  background-color: #ffb800;
  border-color: #ffb800;
  color: #ffffff;
}
.layui-btn.layui-btn-danger{
  background-color: #ff5722;
  border-color: #ff5722;
  color: #ffffff;
}
.layui-btn.layui-btn-info{
  background-color: #03a9f4;
  border-color: #03a9f4;
  color: #ffffff;
}
.layui-btn.layui-btn-success{
  background-color: #009688;
  border-color: #009688;
  color: #ffffff;
}
.layui-btn.layui-btn-warning{
  background-color: #FFB800;
  border-color: #FFB800;
  color: #ffffff;
}
.layui-btn.layui-btn-pink {
  background-color: #e91e63;
  border-color: #e91e63;
  color: #ffffff;
}
.layui-btn.layui-btn-teal {
  background-color: #26A69A;
  border-color: #26A69A;
  color: #ffffff;
}
.layui-btn.layui-btn-purple {
  background-color: #673ab7;
  border-color: #673ab7;
  color: #ffffff;
}
.layui-btn.layui-btn-indigo {
  background-color: #3f51b5;
  border-color: #3f51b5;
  color: #ffffff;
}

.layui-colorpicker-main .layui-btn-container button[colorpicker-events="clear"]{
  background: 0 0;
  border-color:#d2d2d2;
  color:#5f5f5f;
}
.layui-colorpicker-main .layui-btn-container button[colorpicker-events="confirm"]{
  background-color: var(--mainColor);
  border-color: var(--mainColor);
  color: #ffffff;
}

.table-row-selected{
  color: var(--mainColor);
}
.layui-btn-group .layui-btn-primary:hover{
  border-color:#d2d2d2;
  color: var(--mainColor);
}

.layui-form-checkbox[lay-skin=primary]>.layui-icon-indeterminate {
  border-color: var(--subColor);
}
.layui-form-checkbox[lay-skin=primary]>.layui-icon-indeterminate:before {
  background-color: var(--subColor);
}
.layui-form-checked,.layui-form-checked:hover{
  border-color: var(--subColor);
}
.layui-form-checked span,.layui-form-checked:hover span{
  background-color: transparent;
}
.layui-form-checked i,.layui-form-checked:hover i{
  color: var(--subColor);
}
.layui-form-checkbox[lay-skin=primary]:hover i{
  border-color: var(--subColor);
}
.layui-form-checked[lay-skin=primary] i{
  border-color: var(--subColor) !important;
  background-color: var(--subColor);
}
.layui-form-onswitch{
  border-color: var(--subColor);
  background-color: var(--subColor);
}
.layui-form-radio:hover *, .layui-form-radioed, .layui-form-radioed>i {
  color: var(--subColor);
}

/* 灰色模式 */
.mode-gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* 微调CSS */
.layui-nav-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  border-radius: 0;
  border-bottom: 1px solid #666666;
  background-color: #393D49;
}
.layui-nav-header-logo{
  height: 100%;
  display: inline-block;
  width: 220px;
  text-align: center;
  line-height: 60px;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 18px;
}
.layui-nav-header-btn{
  height: 100%;
  display: inline-block;
  vertical-align: top;
  width: 50px;
  text-align: center;
  line-height: 60px;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 18px;
}
.layui-nav-header-left{
  position: absolute;
  left: 220px;
  top: 0;
  border-radius: 0;
  background-color: transparent;
}
.layui-nav-header-right{
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 0;
  background-color: transparent;
}
.layui-input:focus, .layui-textarea:focus{
  border-color: var(--mainColor) !important;
}
.layui-form-item .layui-input-inline {
  width: 150px;
  margin-right: 0;
}
.layui-form-item .layui-inline .layui-form-label{
  width: unset;
}
.layui-layer.layui-layer-dialog.layui-layer-msg{
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.layui-layer-main .layui-layer-title{background:#333333; color:#fff; border: none;}
.layui-layer-main .layui-layer-btn{border-top:1px solid #E9E7E7}
/*.layui-layer-main .layui-layer-btn a{background:#03a9f4;}*/
.layui-layer-main .layui-layer-btn .layui-layer-btn1{background:#fff;}
.layui-layer-main .layui-layer-setwin .layui-layer-close1 {color: #ffffff;}
.layui-layer-setwin .layui-layer-min, .layui-layer-setwin .layui-layer-max {
  filter: brightness(100);
  -webkit-filter: brightness(100);
  -moz-filter: brightness(100);
  -o-filter: brightness(100);
}



.layui-fluid{
  padding: 0;
}
.layui-card{
  margin-bottom: 0;
}

.layui-table-checked{
  background-color: lightblue;
}
/*.layui-table-cell .layui-form-checkbox, .layui-table-cell .layui-badge{
  margin-top: 5px;
}*/
.layui-table-cell .layui-btn{
  margin-top: 3px;
}
.layui-table, .layui-table-view{
  margin: 0;
}
/* TODO */
/*.layui-table-cell {
  height: auto;
  line-height: 24px;
  padding: 5px 10px;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
}*/
.layui-table-click{
  background-color: unset;
}
.layui-table-hover {
  background-color: #e5e5e5;
}

.layui-btn-disabled, .layui-btn-disabled:active, .layui-btn-disabled:hover {
  border-color: #eee!important;
  background-color: #fbfbfb!important;
  color: #d2d2d2!important;
  cursor: not-allowed!important;
  opacity: 1;
}

.layui-elem-quote {
  padding: 10px 15px;
  border-left: 5px solid var(--mainColor);
  background-color: #eeeeee;
}

.layui-input[disabled], .layui-textarea[disabled],
.layui-input.layui-disabled, .layui-textarea.layui-disabled{
  color: #666666 !important;
  background-color: #fafafa;
}

.layui-tree .layui-form-radio {
  margin: 0 !important;
}
.layui-tree .layui-form-radio>i {
  font-size: 18px !important;
}



/* 自定义class */
.layui-text-center{
  text-align: center;
}
.layui-text-left{
  text-align: left;
}
.layui-text-right{
  text-align: right;
}
.layui-pull-left{
  float: left;
}
.layui-pull-right{
  float: right;
}


.layui-font-size-12 {
  font-size: 12px !important;
}
.layui-font-size-14 {
  font-size: 14px !important;
}
.layui-font-size-16 {
  font-size: 16px !important;
}
.layui-font-size-18 {
  font-size: 18px !important;
}
.layui-font-size-20 {
  font-size: 20px !important;
}
.layui-font-size-22 {
  font-size: 22px !important;
}
.layui-font-size-24 {
  font-size: 24px !important;
}
.layui-font-size-26 {
  font-size: 26px !important;
}
.layui-font-size-28 {
  font-size: 28px !important;
}


/* padding */
.layui-padding-0 {
  padding: 0 !important;
}
.layui-padding-5 {
  padding: 5px !important;
}
.layui-padding-10 {
  padding: 10px !important;
}
.layui-padding-15 {
  padding: 15px !important;
}
.layui-padding-20 {
  padding: 20px !important;
}
.layui-padding-30 {
  padding: 30px !important;
}
.layui-padding-50 {
  padding: 50px !important;
}


.layui-padding-t-0 {
  padding-top: 0 !important;
}
.layui-padding-t-5 {
  padding-top: 5px !important;
}
.layui-padding-t-10 {
  padding-top: 10px !important;
}
.layui-padding-t-15 {
  padding-top: 15px !important;
}
.layui-padding-t-20 {
  padding-top: 20px !important;
}
.layui-padding-t-30 {
  padding-top: 30px !important;
}
.layui-padding-t-50 {
  padding-top: 50px !important;
}


.layui-padding-b-0 {
  padding-bottom: 0 !important;
}
.layui-padding-b-5 {
  padding-bottom: 5px !important;
}
.layui-padding-b-10 {
  padding-bottom: 10px !important;
}
.layui-padding-b-15 {
  padding-bottom: 15px !important;
}
.layui-padding-b-20 {
  padding-bottom: 20px !important;
}
.layui-padding-b-30 {
  padding-bottom: 30px !important;
}
.layui-padding-b-50 {
  padding-bottom: 50px !important;
}


.layui-padding-l-0 {
  padding-left: 0 !important;
}
.layui-padding-l-5 {
  padding-left: 5px !important;
}
.layui-padding-l-10 {
  padding-left: 10px !important;
}
.layui-padding-l-15 {
  padding-left: 15px !important;
}
.layui-padding-l-20 {
  padding-left: 20px !important;
}
.layui-padding-l-30 {
  padding-left: 30px !important;
}
.layui-padding-l-50 {
  padding-left: 50px !important;
}


.layui-padding-r-0 {
  padding-right: 0 !important;
}
.layui-padding-r-5 {
  padding-right: 5px !important;
}
.layui-padding-r-10 {
  padding-right: 10px !important;
}
.layui-padding-r-15 {
  padding-right: 15px !important;
}
.layui-padding-r-20 {
  padding-right: 20px !important;
}
.layui-padding-r-30 {
  padding-right: 30px !important;
}
.layui-padding-r-50 {
  padding-right: 50px !important;
}

.layui-padding-v-5{
  padding-top: 5px;
  padding-bottom: 5px;
}
.layui-padding-v-10{
  padding-top: 10px;
  padding-bottom: 10px;
}
.layui-padding-v-15{
  padding-top: 15px;
  padding-bottom: 15px;
}
.layui-padding-v-30{
  padding-top: 30px;
  padding-bottom: 30px;
}
.layui-padding-v-50{
  padding-top: 50px;
  padding-bottom: 50px;
}

.layui-padding-h-5{
  padding-left: 5px;
  padding-right: 5px;
}
.layui-padding-h-10{
  padding-left: 10px;
  padding-right: 10px;
}
.layui-padding-h-15{
  padding-left: 15px;
  padding-right: 15px;
}
.layui-padding-h-30{
  padding-left: 30px;
  padding-right: 30px;
}
.layui-padding-h-50{
  padding-left: 50px;
  padding-right: 50px;
}

/***margins**/
.layui-margin-b-0 {
  margin-bottom: 0px;
}

.layui-margin-b-5 {
  margin-bottom: 5px;
}

.layui-margin-b-10 {
  margin-bottom: 10px;
}

.layui-margin-b-15 {
  margin-bottom: 15px;
}

.layui-margin-b-20 {
  margin-bottom: 20px;
}

.layui-margin-b-30 {
  margin-bottom: 30px;
}

.layui-margin-b-50 {
  margin-bottom: 50px;
}

.layui-margin-t-0 {
  margin-top: 0px;
}

.layui-margin-t-5 {
  margin-top: 5px;
}

.layui-margin-t-10 {
  margin-top: 10px;
}

.layui-margin-t-15 {
  margin-top: 15px;
}

.layui-margin-t-20 {
  margin-top: 20px;
}

.layui-margin-t-30 {
  margin-top: 30px;
}

.layui-margin-t-50 {
  margin-top: 50px;
}

.layui-margin-l-0 {
  margin-left: 0px;
}

.layui-margin-l-5 {
  margin-left: 5px;
}

.layui-margin-l-10 {
  margin-left: 10px;
}

.layui-margin-l-15 {
  margin-left: 15px;
}

.layui-margin-l-20 {
  margin-left: 20px;
}

.layui-margin-l-30 {
  margin-left: 30px;
}

.layui-margin-l-50 {
  margin-left: 50px;
}

.layui-margin-r-0 {
  margin-right: 0px;
}

.layui-margin-r-5 {
  margin-right: 5px;
}

.layui-margin-r-10 {
  margin-right: 10px;
}

.layui-margin-r-15 {
  margin-right: 15px;
}

.layui-margin-r-20 {
  margin-right: 20px;
}

.layui-margin-r-30 {
  margin-right: 30px;
}

.layui-margin-r-50 {
  margin-right: 50px;
}


.layui-text-primary {
  color: var(--mainColor);
}
.layui-text-success {
  color: #4CAF50;
}
.layui-text-danger {
  color: #F44336;
}
.layui-text-warning {
  color: #FF7043;
}
.layui-text-blue {
  color: #03A9F4;
}
.layui-text-info {
  color: #56afd7;
}
.layui-text-teal {
  color: #26A69A;
}
.layui-text-indigo {
  color: #7986CB;
}


/**circle**/
.layui-circle {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 500px;
  margin: 0 .5em;
  background-color: #f5f5f5;
  vertical-align: baseline;
  border: 2px solid transparent;
}

.layui-circle-primary {
  background: var(--mainColor);
}

.layui-circle-success {
  background: #4CAF50;
}

.layui-circle-info {
  background: #56afd7;
}

.layui-circle-warning {
  background: #FF7043;
}

.layui-circle-danger {
  background: #F44336;
}

.layui-circle-teal {
  background: #26A69A;
}

.layui-circle-indigo {
  background: #7986CB;
}

.layui-circle-lg {
  width: 11px;
  height: 11px;
}

.layui-square {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.footer {
  height: 40px;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 40px;
  position: absolute;
  padding: 0 15px;
  background-color: #fbfbfb;
  border-top: 1px solid #e1e8ed;
  text-align: right;
  font-size: 12px;
  color: #666666;
}

.layui-box-shadow-5{
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.layui-box-shadow-10{
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.layui-box-shadow-15{
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.layui-box-shadow-30{
  box-shadow: 0 0 30px rgba(0,0,0,0.1);
}

.layui-loading-mask{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  opacity: 0;
  background-color: rgba(0,0,0,0.3);
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;

  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  overflow: hidden;
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
  -o-animation-delay: 1s;
}
.layui-loading .layui-loading-mask{
  opacity: 1;
  z-index: 9999;
}


.layui-alert{
  border-radius: 3px;
  margin-bottom: 15px;
  padding: 10px 15px;
  border: 1px solid transparent;
}
.layui-alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.layui-alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.layui-alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.layui-alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}



.layui-selector{
  overflow: hidden;
  padding: 0 10px;
  height: 38px;
  line-height: 1.3;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  color: rgba(0, 0, 0, .85);
  border-radius: 2px;
  border-color: #eee;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
}