/* 表单内输入框 */
.form-input-group {
  display: flex;

  label {
    width: 100px;
    text-align: right;
    + * {
      flex: 1;
      box-sizing: border-box;
    }
  }
}
// 下拉选择框占据剩余全部空间
.select-overspread {
  .form-group {
    // margin: 0px 5px 10px 0px;
    .form-control {
      margin-right: 0px;
    }
  }
  .btn-group, .btn-group-vertical {
    width: 100%;
    // padding-right: 5px;
    button {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .dropdown-menu {
    width: 100%
  }
}
.no-close .nav-tabs a {
  padding: 8px;
}
/* checkbox和radio的样式 */
.magic-radio,
.magic-checkbox {
  position: absolute;
  display: none;
}

.magic-radio[disabled],
.magic-checkbox[disabled] {
  cursor: not-allowed;
}

.magic-radio + label,
.magic-checkbox + label {
  position: relative;
  display: block;
  padding-left: 30px;
  cursor: pointer;
  vertical-align: middle;
  text-align: left;
}

.magic-radio + label:hover:before,
.magic-checkbox + label:hover:before {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  animation-name: hover-color;
}

.magic-radio + label:before,
.magic-checkbox + label:before {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  content: '';
  border: 1px solid #c0c0c0;
}

.magic-radio + label:after,
.magic-checkbox + label:after {
  position: absolute;
  display: none;
  content: '';
}

.magic-radio[disabled] + label,
.magic-checkbox[disabled] + label {
  cursor: not-allowed;
  color: #e4e4e4;
}

.magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
.magic-checkbox[disabled] + label:hover,
.magic-checkbox[disabled] + label:before,
.magic-checkbox[disabled] + label:after {
  cursor: not-allowed;
}

.magic-radio[disabled] + label:hover:before,
.magic-checkbox[disabled] + label:hover:before {
  border: 1px solid #e4e4e4;
  animation-name: none;
 }

.magic-radio[disabled] + label:before,
.magic-checkbox[disabled] + label:before {
  border-color: #e4e4e4;
}

.magic-radio:checked + label:before,
.magic-checkbox:checked + label:before {
  animation-name: none;
}

.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after {
  display: block;
}

.magic-radio + label:before {
  border-radius: 50%;
}

.magic-radio + label:after {
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #98CFEE;
}

.magic-radio:checked + label:before {
  border: 2px solid #98CFEE;
}

.magic-radio:checked[disabled] + label:before {
  border: 2px solid #c9e2f9;
}

/*.magic-radio:checked[disabled] + label:after {
background: #c9e2f9; }*/

.magic-checkbox + label:before {
  border-radius: 3px;
}

.magic-checkbox + label:after {
  top: 2px;
  left: 7px;
  box-sizing: border-box;
  width: 6px;
  height: 12px;
  transform: rotate(45deg);
  border-width: 2px;
  border-style: solid;
  border-color: #fff;
  border-top: 0;
  border-left: 0;
}

.magic-checkbox:checked + label:before {
  border: #98CFEE;
  background: #98CFEE;
}

.magic-checkbox:checked[disabled] + label:before {
  border: #c9e2f9;
  background: #c9e2f9;
}
/* 滚动条样式 */
/*---滚动条默认显示样式--*/
::-webkit-scrollbar-thumb{
//  display: none;
 background-color:rgba(0,0,0,0.2);
 height:50px;
 outline-offset:-2px;
 /*outline:2px solid #fff;*/
 -webkit-border-radius:4px;
 /*border: 2px solid #fff;*/
}

/*---鼠标点击滚动条显示样式--*/
::-webkit-scrollbar-thumb:hover{
//  display: inherit;
 background-color:rgba(0,0,0,0.4);
 height:50px;
 -webkit-border-radius:4px;
}
/*---滚动条大小--*/
::-webkit-scrollbar{
 width:8px;
 height:8px;
}
/*---滚动框背景样式--*/
::-webkit-scrollbar-track-piece{
/* 全透明，不显示 */
 background-color:rgba(255,255,255,0);
 -webkit-border-radius:0;
}

/* 组件内通用样式 */
.select-error {
  button {
    border-bottom: 1px solid #a94442!important;
  }
}
/* 表单输入框组 */
.form-input-group {
  display: flex;

  label {
    width: 100px;
    text-align: right;
    + * {
      flex: 1;
    }
  }
}
// 日期组件在表单中沾满
.form-horizontal .datepicker {
  width: 100%;
}
// 下拉选择框占据剩余全部空间
.select-overspread {
  .form-group {
    // margin: 0px 5px 10px 0px;
    .form-control {
      margin-right: 0px;
    }
  }
  .btn-group, .btn-group-vertical {
    width: 100%;
    // padding-right: 5px;
    button {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .dropdown-menu {
    width: 100%
  }
}
// 需要特定宽度的的样式
.width-60 {
  width: 60px;
}
.width-80 {
  width: 80px;
}
.width-100 {
  width: 100px;
}



/*右侧区域的背景*/
.right-bg {
  width: 100%;
  flex: 1;
  padding: 10px 20px;
  color: #304A66;
}
.tree-flex {
  height: 100%;
  // width: 150px;
  /*width: 60px;*/
  background: #4C637B;
  color: #fff;

}
.tree-flex-icon {
  width: 50px;
  /*transition: 0.5s;*/
  > .span {
    overflow-x: visible;
  }
}
.tree-flex h3 {
  text-align: center;
  line-height: 80px;
  margin: 0px;
}

.tree-flex-footer {
  height: 150px;
  display: flex;
  flex-direction:column;
  color: #fff;
}
.tree-flex-footer a,.tree-flex-footer button{
  flex: 1;
  padding: 8px 5px;
  font-size: 1.2em;
  border-top: 1px solid #697D93;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}
.tree-flex-footer button {
  height: auto;
  width: 100%;
  border-radius: 0px;
  background-color: rgba(255,255,255,0);
  border: none;
  border-top: 1px solid #697D93;
  text-align: left;
}
.tree-flex-footer button:hover{
  outline: none;
  background-color: rgba(255,255,255,0.2);
}
.tree-flex-footer button:focus {
  outline: none;
  background-color: rgba(255,255,255,0.5);
}
.tree-flex-footer a:hover {
  color: #FFF;
  background-color: rgba(255,255,255,0.2);
}
.tree-flex  .btn-group {
  height: 50px!important;
}

.tree-flex .dropdown-menu {
  /* 控制显示列表的样式 */
  background: #4C637B;
  border-radius: 0px;
  color: #fff;
  width: auto;
  margin: 0px;
  padding: 0px;
}
.tree-flex .dropdown-menu-up {
  /* bottom，top控制上下，left和right控制左右*/
  left: 100%!important;
  top: auto!important;
  bottom: 0;
}
.tree-flex .dropdown-menu-down {
  /* bottom，top控制上下，left和right控制左右*/
  left: 100%!important;
  top: 0!important;
}
.tree-flex .dropdown-menu li{
  text-align: center;
  line-height: 50px;
  border-bottom: 1px solid #697D93;
  font-size: 1.2em;
  width: auto;
  white-space: nowrap;
  cursor: default;

}
.tree-flex .dropdown-menu li + li {
  text-align: left;
  border: 0;
  line-height: 40px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 1em;
  cursor: pointer;
}
.tree-flex .dropdown-menu li + li:hover {
  background-color: rgba(255,255,255,0.2);
}
.tree-flex .dropdown-menu li a {
  border: none;
  color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 1em;
  padding: 0px;
}
.tree-flex .dropdown-menu li a:hover {
  color: #fff;
  background-color: rgba(255,255,255,0);
}
.tree-flex img{
  height: 30px;
  margin-right: 15px;
}
.line {
  height: 100%;
  width: 5px;
  background: #4C637B;
  cursor: e-resize;
}
/*为树（tree）组件写的样式*/
.tree-img {
  font-size: 1.2em;
}

/* 滚动条样式 */
/* 隐藏与现实滚动条 */
.scrollbar {
  ::-webkit-scrollbar{
    display: none;
  }
  &:hover {
    ::-webkit-scrollbar{
      display: inherit;
      // float: right;
      // left: 8px;
    }
  }
}


// 日期组件样式分开打不进去
.datepicker{
  position: relative;
  display: inline-block;
}
input.datepicker-input.with-reset-button {
  padding-right: 25px;
}
.datepicker > button.close {
  position: absolute;
  top: 0;
  right: 0;
  outline: none;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
}
.datepicker > button.close:focus {
  opacity: .2;
}
.datepicker-popup{
  position: absolute;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  margin-top: 2px;
  z-index: 1000;
  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
}
.datepicker-inner{
  width: 218px;
}
.datepicker-body{
  padding: 10px 10px;
}
.datepicker-ctrl p,
.datepicker-ctrl span,
.datepicker-body span{
  display: inline-block;
  width: 28px;
  line-height: 28px;
  height: 28px;
  border-radius: 4px;
}
.datepicker-ctrl p {
  width: 65%;
}
.datepicker-ctrl span {
  position: absolute;
}
.datepicker-body span {
  text-align: center;
}
.datepicker-monthRange span{
  width: 48px;
  height: 50px;
  line-height: 45px;
}
.datepicker-item-disable {
  background-color: white!important;
  cursor: not-allowed!important;
}
.decadeRange span:first-child,
.decadeRange span:last-child,
.datepicker-item-disable,
.datepicker-item-gray{
  color: #999;
}
.datepicker-dateRange-item-active:hover,
.datepicker-dateRange-item-active {
  background: rgb(50, 118, 177)!important;
  color: white!important;
}
.datepicker-monthRange {
  margin-top: 10px
}
.datepicker-monthRange span,
.datepicker-ctrl span,
.datepicker-ctrl p,
.datepicker-dateRange span {
  cursor: pointer;
}
.datepicker-monthRange span:hover,
.datepicker-ctrl p:hover,
.datepicker-ctrl i:hover,
.datepicker-dateRange span:hover,
.datepicker-dateRange-item-hover {
  background-color : #eeeeee;
}
.datepicker-weekRange span{
  font-weight: bold;
}
.datepicker-label{
  background-color: #f8f8f8;
  font-weight: 700;
  padding: 7px 0;
  text-align: center;
}
.datepicker-ctrl{
  position: relative;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  text-align: center;
}
.month-btn{
  font-weight: bold;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.datepicker-preBtn{
  left: 2px;
}
.datepicker-nextBtn{
  right: 2px;
}
.table-condensed> thead> tr> th,
.table-condensed> tbody> tr> th,
.table-condensed> tfoot> tr> th,
.table-condensed> thead> tr> td,
.table-condensed> tbody> tr> td,
.table-condensed> tfoot> tr> td {
 padding: 5px;
}
input.datepicker-input.with-reset-button {
  padding-right: 25px;
}

div.datepicker > button.close {
  position: absolute;
  top: calc(50% - 13px);
  right: 10px;
}

div.datepicker > button.close {
  outline: none;
  z-index: 2;
}

div.datepicker > button.close:focus {
  opacity: .2;
}