yonui-ys/lib/theme/home.less

yonui ys

.home-1 {
  background: #f1f1f1;
  min-height: 100%;
}

.home-title-right {
  float: right;
}

.home-title-right .u-tabs-mini .u-tabs-tab {
  padding: 14px 0 14px;
  margin: 0 10px;
}

.home-title-right .u-tabs-mini .u-tabs-tab:hover {
  color: #ee2223
}

.u-tabs-nav .u-tabs-tab {
  color: #666
}

.home-title-right .u-tabs-bar {
  margin-top: 4px;
  margin-bottom: 1px
}

.home-title-picker {
  width: 200px;
  float: right;
  margin-top: 9px;
  margin-right: 20px;
}

.ant-layout {
  height: 100%;
  background: transparent;
}

.home-panel {
  background: #fff;
  margin: 0 10px 10px 0;
}



.home-title-picker .ant-input {
  font-size: 12px;
  height: 28px;
  color: #999
}

.home-panel-2 {
  padding-left: 50px;
  line-height: 24px;
}

.home-panel-3 {
  margin-top: 30px;
}

.home-panel-3 .anticon-award {
  font-size: 19px;
  margin: 0 10px 4px;
  vertical-align: middle;
}

.home-panel-3 span {
  margin: 0 10px;
  width: 19px;
  display: inline-block;
  text-align: center
}

.home-panel-3 .award-1 {
  color: #fecb2f
}

.home-panel-3 .award-2 {
  color: #b4c9d8
}

.home-panel-3 .award-3 {
  color: #d2aa75
}

.home-panel-3 .fixedDataTableLayout_main {
  float: right
}

.home-panel-5 .ant-card-head-title {
  color: #333
}

.home-panel-5 .ant-card {
  border-radius: 0;
  background: #fff;
  margin-bottom: 10px;
  box-shadow: none
}

.home-panel-5 .ant-card-extra {
  top: 0;
  line-height: 50px;
}

.home-panel-5 .ant-card-body {
  padding: 20px 8px 12px 20px;
}

.home-panel-5 .textCol {
  color: #333;
  font-size: 14px;
}

.home-panel-6 {
  color: #999
}

.home-panel-6 em {
  color: #333;
  font-style: normal
}

.home-panel-6 .red-txt {
  color: #ff0000;
  margin-left: 5px;
}

.index-eq-01 {
  background: url(./images/icon-eq.png) no-repeat;
  display: block;
  width: 98px;
  height: 98px;
  margin: 25px auto 0
}

#container,
#container>.yon-row,
#container>.yon-row>div:last-of-type>div,
#container>.yon-row>div:last-of-type>div>div {
  height: 100%;
}

.ant-card:not(.ant-card-no-hovering):hover {
  box-shadow: 0 0px 0px rgba(0, 0, 0, .2);
  border-color: transparent;
}

.ant-layout {
  background-color: #F0F1F4;
}

/* 头部 */
.ant-menu-item>a:after {
  height: 0px !important;
}

/* 预警 */
.billing-expireInfoWrap {
    float: left;
    width: calc(~'100% - 145px');
    background: #FFF7E7;
    height: 37px;
    line-height: 37px;
    font-size: 12px;
    color: #333;
    margin-left: 145px;
    margin-top: -5px;
    padding-left: 15px;
    position: relative;
    .exp-btn {
      font-size: 12px;
      color: #FFFFFF;
      height: 20px;
      line-height: 20px;
      padding: 0 8px;
      display: inline-block;
      background-image: linear-gradient(-45deg, #FC4C2F 0%, #EE2223 100%);
      border-radius: 20px;
      margin-left: 15px;
  
      &:hover {
        background-image: linear-gradient(45deg, #FC4C2F 0%, #EE2223 100%);
      }
    }
  
    .ant-btn-primary {
      height: 22px;
      padding: 0 6px;
    }
    .item{
      padding-left: 22px;
    }
  }
  
  .billing-expireInfoWrap svg {
      width: 16px;
      height: 16px;
      position: absolute;
      top: 9px;
      left: 15px;
      margin-right: 6px;
      color: #e23;
  }

/* 过期 */
.billing-expire-overdue {
  width: 800px;
  margin: 0 auto;

  dl {
    padding-top: 20%;

    dt {
      background: url(images/overdue.png);
      width: 320px;
      height: 300px;
      background-size: 100%;
      float: left;
      background-repeat: no-repeat;
      margin-right: 75px;
    }

    dd.title {
      font-family: PingFang-SC-Regular;
      font-size: 30px;
      color: #333333;
      line-height: 34px;
      margin-bottom: 20px;
      margin-top: 22px;
    }

    dd {
      font-size: 16px;
      color: #333333;
    }

    dd.btn {
      margin-top: 56px;

      button {
        border: none;
        background: #FFFFFF;
        border: 2px solid #ADB4BC;
        box-shadow: 0 5px 15px 0 #DBE0E5;
        border-radius: 100px;
        font-size: 18px;
        color: #505766;
        width: 140px;
        height: 46px;
        outline: none;

        &:hover {
          border: 2px solid #7E8792;
          cursor: pointer;
        }

        &.primary {
          border: none;
          background-image: linear-gradient(-45deg, #FC4C2F 0%, #EE2223 100%);
          box-shadow: 0 5px 15px 0 rgba(175, 2, 2, 0.26);
          color: #fff;

          &:hover {
            border: none;
            background-image: linear-gradient(45deg, #FC4C2F 0%, #EE2223 100%);
          }
        }
      }
    }
  }
}

/* 下拉 */

.ant-layout-content>.u-tabs-content.u-tabs-content-no-animated {
  margin-left: 10px;
}

.rootTabs>.u-tabs-content {
  background-color: #f1f1f1;
}

/* 中间内容 */
.home-1 .home-panel.home-my-panel {
  margin: 0 0px 10px 0;
}

.home-panel {
  .home-list {
    padding-bottom: 30px;

    .home-panel-21 {
      padding: 25px 0 5px;

      h5 {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

.home-my-panel ul {
  display: flex;
  background-color: #f1f1f1;

  li {
    flex: 1;
    margin-right: 10px;
    border-radius: 2px;

    h2 {
      font-size: 14px;
      height: 30px;
      background-color: #f1f1f1;
    }

    .home-my-con {
      background-color: #fff;
      padding: 20px 0;
    }

    svg {
      width: 29px;
      height: 29px;
      margin-top: 8px;
    }

    i {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      line-height: 44px;
      float: left;
      margin-left: 15px;
      margin-right: 10px;
      margin-top: 2px;
      display: block;
      text-align: center;
    }

    p {
      font-size: 22px;
      color: #ee2223;
    }

    h4 {
      font-size: 14px;
      color: #666;
      line-height: 26px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      b {
        font-weight: normal;
        float: left;
        margin-right: 10px;
      }

      span {
        font-size: 22px;
        color: #ee2223;
      }
    }
  }

  li:hover {
    box-shadow: 3px 3px 8px #e3e3e3;
    cursor: pointer;
  }
}

@media screen and (max-width:1310px) {
  .home-my-panel ul li i {
    margin-left: 10px;
  }
}

.home-panel-2 {
  padding-left: 30px;

  span {
    position: relative;
    margin-left: 3px;

    svg {
      width: 12px;
      height: 10px;
      position: absolute;
      top: 8px;
    }
  }

  b {
    font-size: 26px;
    color: #333;
    font-weight: normal;
  }

  p {
    font-size: 10px;
    color: #999;
    line-height: auto;
  }

  .red-txt {
    color: #ee2223
  }

  .green-txt {
    color: #44c789
  }
}

.home-title {
  padding: 0;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  background-color: #fff;

  .home-title-left {
    line-height: 50px;
    font-size: 14px;
    color: #333;
    float: left;
    margin-left: 20px;
  }
}

.home-title-right {

  .ant-input,
  .ant-input-number,
  .ant-select-selection {
    height: 28px;
    border-radius: 4px;
    margin-top: 12px;
    margin-right: 10px;
    min-width: 150px;
  }

  button.ant-btn {
    margin-top: 11px;
    margin-right: 10px;
  }

  .ant-select {
    min-width: 150px !important;
    width: auto !important
  }

  .ant-select-selection--multiple .ant-select-selection__choice {
    margin-top: 2px;
  }

  .ant-select-selection--multiple .ant-select-selection__choice__content {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.home-overview {
  .ant-select {
    width: 200px !important;
    height: 40px;
    border-radius: 10px;
    margin-right: 10px;

    .ant-select-selection {
      margin-right: 0px;
    }
  }

  .ant-select-selection__rendered {
    line-height: 26px;
  }

  .u-tabs-ink-bar {
    top: 42px;
    height: 3px;
  }
}

.home-panel-5 {
  .u-tile {
    margin-bottom: 10px;
  }

  .u-tile-title {
    height: 50px;
    line-height: 50px;
    padding: 0;
    padding: 0 20px;
    border-bottom-color: #e4e4e4;
  }

  .u-tile-content {
    .yon-row {
      margin-bottom: 12px;

    }

    .col-float {
      margin-bottom: 10px;
    }

    .u-tag {
      margin: 0 !important;
      height: 38px;
      background-color: #f7f7f7;
      border-radius: 4px;
      border: none;
      width: 90%;
      text-align: center;
      color: #666;
      border: 1px solid #f7f7f7;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      white-space: normal;
      vertical-align: middle;
      display: table;
      line-height: 14px;
      padding: 0px 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        vertical-align: middle;
        max-height: 32px;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
      }

      &:hover {
        border: 1px solid #505766;
        color: #505766;
        background: #fff;
      }
    }

  }

  .ant-card-extra {
    right: 20px;

    a {
      svg {
        width: 23px;
        height: 23px;
        margin-top: 15px;
      }
    }
  }
}

/* 公告 */
.home-notice {
  .ant-card-body {
    padding: 15px 20px 12px 20px;
    height: 242px;
    overflow: hidden;
    >div{
        height: 215px;
        overflow: hidden;
    }
    .textCol {
      line-height: 28px;

      a {
        width: 70%;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      div {
        color: #999;
        float: right;
      }
    }
  }

  .yon-row {
    margin-bottom: 10px;
  }

  .notice_title,
  .notice_time {
    display: block;
    width: 100% !important;
    font-size: 12px;
    float: left;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  .notice_title:hover {
    color: #ee2223;
  }

  .notice_time {
    color: #999;
    line-height: 15px;
    margin-top: 2px;
  }
}

/* 销售排名 */
.home-rank {
  padding: 15px 28px 0 28px;
  font-size: 14px;

  .col-float {
    padding-right: 30px;

    div.title {
      line-height: 24px;

      svg {
        width: 19px;
        height: 22px;
        margin-right: 5px;
        float: left;

        use {
          display: none;
        }
      }
    }

    ul {
      margin: 20px 0 25px 20px;

      li {
        margin-bottom: 10px;
        font-size: 12px;

        .ant-progress-bg {
          height: 6px !important;
        }
      }

      li {
        span {
          display: block;
          float: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        span.saleRank_name {
          color: #333;
          max-width: calc(~'100% - 87px');
        }

        /*3.22  门店自己变红*/
        .saleRank_self {
          span.saleRank_name {
            color: #f00;
          }
        }

        span.saleRank_value {
          color: #999;
          margin-left: 5px;
          max-width: 82px;
        }
      }

      .ant-progress-bg {
        background: -webkit-linear-gradient(right, #1dd7a5, #18b782) !important;
      }

    }
  }

  .col-float:first-child {
    .ant-progress-bg {
      background: -webkit-linear-gradient(right, #fea667, #fc4c2f) !important;
    }

    div.title {
      line-height: 20px;

      svg {
        width: 26px;
        height: 18px;
      }
    }
  }

  .col-float:last-child {
    padding-right: 20px;

    .ant-progress-bg {
      background: -webkit-linear-gradient(right, #95abff, #588ce9) !important;
    }
  }

  .saleRank_nodata {
    text-align: center;
    color: #999;
    svg{
      width: 70px;
      height: 70px;
      margin: 0 auto;
      display: block;
    }
    i.anticon-nodata {
      display: block;
      color: #ccc;
      font-size: 70px;
      margin-bottom: 10px;
    }
  }
}

/* 门店弹窗 */
.saleTrend_popover {
    .ant-popover-inner-content .pull-left .ant-checkbox-wrapper {
      width: 100%;
    }
    .filter-btn-fixed{
      padding-bottom: 30px;
      .filter-txt{
          padding-bottom: 0px;
          .yon-row,.yon-row div{
              height: 32px;
              line-height: 32px;
          }
      }
      .filter-btn-1 {
          bottom: 8px;
          .ant-btn{
              height: 26px;
              padding: 0px 12px;
              font-size: 12px;
          }
        }
    }
}

.ant-progress-inner {
  background-color: #fff;
}

.home-title-date {
  float: right;
  width: 180px
}
.home-title-date .ant-tabs-ink-bar{
  background-color: #ee2233;
}
.home-overview .home-title-date {
  width: 210px !important
}

/* 档案 */
/* 列表左侧树 */
.u-tabs-content {
  .height-100 {
    .form-left {
      .bg-white.border-r {
        border-right: 1px solid #f5f5f5;
      }

      .search-tree-2 {
        position: relative;

        .ant-btn {
          position: absolute;
          right: -10px;
          left: auto;
          top: 11px;
        }
      }

      .search-tree-2.with-expand-button {

        >.yonicon-close-circle {
          right: calc(~'20% + 34px') !important;
        }

        .u-button-icon {
          right: calc(~'20% + 10px') !important;
        }

        .u-select {
          width: 80% !important;

          .u-select-selection {

            .u-select-selection-rendered {

              .u-select-search-field-wrap {
                width: 80%;
              }
            }
          }
        }

        .uf {
          padding: 0 4px;
          display: inline-block;
          position: absolute;
          top: 12px;
          right: 20px;
          transform: rotate(-90deg);
          border: 1px solid #d9d9d9;

          &:before {
            color: #adb4bc;
          }

          &:hover {
            cursor: pointer;
          }
        }
      }

      .ant-select-combobox .ant-select-selection__rendered {
        margin-left: 15px;
      }

      .search-tree-2 .ant-select-selection,
      .search-tree-2 .ant-select-selection:focus,
      .search-tree-2 .ant-select-selection:hover {
        border: 1px solid #d9d9d9;
        border-radius: 0;
        width: 200px;
        height: @base-input-height;
        line-height: @base-input-height - 2;
        border-radius: 4px;
      }

      .search-tree-2 .ant-select-selection:focus,
      .search-tree-2 .ant-select-selection:hover {
        border: 1px solid #505766;
      }
    }

    .viewCell h1 {
      font-size: 14px;
      font-weight: bolder;
      margin-bottom: 10px;
      margin-top: 10px;
      color: #505766;
      padding-left: 7px;
    }

    .bottom-toolbar {
      margin-top: 0;
      padding-left: 10px;
    }

    // .bottom-toolbar .ant-btn {
    //   padding: 0px 20px !important;
    //   height: @base-input-height  !important;
    //   line-height: @base-input-height  !important;
    //   border-radius: 4px;
    //   min-width: 68px;
    // }

  }

}

.u-tabs-content .height-100 .btn-group-bottom button svg {
  display: none
}

.u-tabs-content .container-edit-mode .yon-row.card-tabs,
.u-tabs-content .container-edit-mode .line-tabs,
.u-tabs-content .container-browse-mode .yon-row.card-tabs,
.u-tabs-content .container-browse-mode .line-tabs,
.u-tabs-content .meta-option {
  .tab-top-right {
    /* 入库 */
    .col-auto {
      width: 100%;
      position: relative;

      >.yon-row {
        float: left;
        width: calc(~'100% - 275px') !important;

        .renwu {
          position: absolute;
          top: 4px;
        }

        >div {
          line-height: 30px;
          height: 32px;
          width: auto;
          margin-right: 10px;
          padding-top: 1px;
          font-size: 12px;
        }

        .ant-col-6 {
          width: auto;

          .ant-progress-status-success .ant-progress-text {
            color: #588ce9;
            padding-left: 8px;
          }

          .ant-progress-circle .ant-progress-text {
            top: 54%;
          }
        }

        .ant-col-6.name {
          max-width: 250px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .ant-col-6.tips {
          color: #ee2223;
          margin-left: 15px;
          max-width: 84px;

          .success {
            color: #00a854;
          }
        }

        .ant-col-6.percent {
          margin-left: 15px;
          margin-right: 15px;

          span.num {
            color: #588CE9;

          }
        }

        .ant-col-6.error {
          color: #ee2223;
          cursor: pointer;
          margin-right: 5px;

          .anticon-icon-tishi1 {
            font-size: 14px;
            margin-right: 5px;
          }
        }

        .ant-col-4.error:hover {
          cursor: pointer;
        }

        .ant-progress {
          position: relative;
          top: -2px;

          .ant-progress-inner {
            width: 60px !important;
            height: 20px !important;

            svg.ant-progress-circle {
              width: 16px;
              height: 16px;
              position: relative;
              top: -4px;
              float: left;
              margin-top: 8px;
            }

            .ant-progress-circle-trail {
              stroke: #E5E9EC;
            }

            .ant-progress-circle-path {
              stroke: #588ce9;
            }
          }
        }
      }

      >.yon-row+.basic-input-text {
        position: absolute;
        right: 78px;

        svg {
          width: 18px;
          height: 18px;
          position: relative;
          top: 1px;
        }
      }

      >.yon-row+.basic-input-text+button {
        position: absolute;
        right: 0;
        width: 68px;
      }

      button.btn-inspecting {
        border: 1px solid #ee2223;
        color: #ee2223;
        height: @base-input-height;
      }
    }
  }
}

.diancun-yanhuo {
  .tab-top-right {
    width: calc(~'100% - 105px')
  }
}

/* 扫码验货 */
.yanhuo {
  .ant-popover-inner-content {
    max-height: 1000px;
    overflow-y: initial;
    padding-bottom: 0;

    .meta-table.listTable {
      background: none;

      .yon-row {
        height: auto;
        line-height: auto;
      }

      .yon-row:hover {
        background: none;
      }

      .yon-row div {
        height: auto;
        line-height: auto
      }

      .public_fixedDataTableCell_disabled.textCol {
        color: #333 !important;
      }

      .yon-row div.table-header-name {
        color: #666;
      }

      .yon-row div.public_fixedDataTableCell_main {
        border-bottom: 1px solid #dbe0e5
      }

      .ant-btn:not(.ant-btn-circle):not(.ant-btn-circle-outline).ant-btn-icon-only {
        height: 5px;
      }

      .btn-caret {
        margin-top: 6px;
      }

      .table-nodata {
        line-height: 70px;
      }
    }
  }
}


/* 客显  pos外设 */
.u-tabs-content .container-browse-mode .line-tabs,
.u-tabs-content .container-edit-mode .line-tabs {

  div[id^='aa_posdevicesetting'] .group-container {
    .meta-default-container {
      &:first-child {
        margin-top: 20px;
      }
    }
  }

  .radio-icon {
    display: block;
    width: 160px;
    height: 96px;
    border: 1px solid #d9d9d9;
    line-height: 118px;

    svg {
      width: 160px;
      height: 160px;
      margin-left: -1px;
      margin-top: -33px;
    }
  }

  .control-radio {
    .input-control {
      height: auto;
    }

    .yon-row {
      width: 100%;
    }

    .input-control {
      width: 60% !important
    }

    .u-radio-group {
      .radio-svg-btn {
        width: 160px;
        margin-right: 20px;
        text-align: center;

        span {
          width: 14px;
          margin-right: 0;
        }
      }

      span:hover {
        .radio-icon {
          border: 1px solid #cacaca;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1)
        }
      }

      .radio-icon:hover {
        cursor: pointer;
      }

      .radio-icon.selected {
        border: 1px solid #A6AAB5;
      }

    }
  }

  .control-radio>.yon-row {
    margin-bottom: 5px;
  }

  .u-tabs-content {
    .fileList {
      margin-left: 5px;
    }
  }

  .viewCell.width-percent-100>div .ant-upload {
    margin-bottom: 0
  }
}

.u-tabs-content .container-browse-mode .line-tabs {
  .radio-icon+.control-text {
    min-width: 160px;
    border: none;
    text-align: center;
    min-height: 14px;
    line-height: 14px;
    margin-top: 8px;
  }

  .viewCell.width-percent-100>div .input-control .input-number-has-config-style .control-text {
    min-width: 100px;
  }
}

//库存单据序列号商品点击"序列号"进入孙表后，点击最大化无法返回单据界面
.u-tabs-content .container-edit-mode .line-tabs+.line-tabs-maximize,
.u-tabs-content .container-edit-mode .line-tabs-maximize+.yon-row,
.u-tabs-content .container-browse-mode .line-tabs+.line-tabs-maximize {
  margin-top: 0px;
}

.u-tabs-content .container-browse-mode .line-tabs+.yon-row .upload-content {
  margin-top: 15px;
}

// 物料清单全阶维护
.ed_bom_structure .u-tabs-content .container-edit-mode .line-tabs .group-container .meta-default-container:first-child {
  margin-top: 0;
}

.ed_bom_structure {
  .tab-bottom-txt {
    position: absolute !important;
  }

  .split_container .split_left .left-tree-select-count .bg-white.border-r {
    height: calc(~'100% - 58px');
  }

  .split_right {
    .jDiwork-container>.meta-default-container {
      height: 100%;

      >.meta-default-container {
       min-height: 100%;
       &+.meta-default-container {
         min-height: auto;
       }
      }
    }
  }
}

.st_standingbook .u-tabs-tabpane .jDiwork-container>.meta-default-container {
  height: 100%;
}

.viewCell {
  .input-control .u-select-show-search.u-select {
    display: inherit;
  }
  .input-control .u-select {
    max-width: 100%;
  }
}

.gettingParameters {
  background-color: #f7f9fd;
  padding: 10px;
  margin-right: 30px;
  margin-top: 20px;

  h3 {
    font-size: 14px;
    line-height: 30px;
  }

  span {
    line-height: 45px;
  }
}

.uretail-loading-bg {
  background: none !important;
  z-index: 9999;
}

.viewContainer.width-percent-33 {
  width: 33.33% !important;
  float: left;
  line-height: 32px;

  .tag-refer.tag-refer-01 .p-v-5 {
    float: left;
  }

  .tag-refer.tag-refer-01 {
    position: relative;
    margin-bottom: 8px;

    .ant-form-explain {
      position: absolute;
      left: 115px;
      top: 26px;
      color: #f04134
    }
  }

  .tag-refer.tag-refer-01 .TagList {
    width: 60%;
    float: left;
    position: relative;
    max-height: 84px;
    overflow: auto;
    padding-right: 20px;

    &.tag-disabled {
      background-color: #f7f7f7;
      .u-button.u-button[disabled] {
        background-color: #f7f7f7;
      }
    }

    .u-tag {
      &:first-child {
        margin-left: 4px;
      }

      .uf-close {
        color: #adb4bc;
        transform: scale(.8);
        display: inline-block;
      }
    }

    &>span:last-child {
      display: inline-block;
      position: absolute;
      right: 0;
    }

  }

  .width-percent-100 {
    .tag-refer.tag-refer-01 .TagList {
      padding-right: 0;
    }

    // async
    .basic-tagarea.has-feedback {
      width: 100%;
      overflow: hidden;

      >.yon-row {
        .control-width {
          width: 60%;
          height: auto;

          textarea.u-form-control {
            padding: 4px 8px;
            resize: none;
          }
        }
      }

    }
  }
}

.width-percent-33+.yon-row+.line-tabs {
  .u-tabs .u-tabs-content div>.yon-row:first-child .yon-row {
    margin-top: 0 !important;
  }
}

.u-tabs-content .container-browse-mode .line-tabs .u-tabs .u-tabs-content div>.yon-row:first-child .yon-row.caption-title,
.u-tabs-content .container-browse-mode .line-tabs .u-tabs .u-tabs-content div>.yon-row:first-child .yon-row.caption-title+.listTable .yon-row {
  margin-top: 0 !important;
}

// 日结
.u-tabs-content .line-tabs {
    .u-tabs-tabpane-active {
      .yon-row {
        h3 {
          display: none;
        }
      }
  
      .u-tabs .u-tabs-content div>.yon-row:first-child .yon-row {
        margin-top: 0
      }
  
      .listTable {
        .public_fixedDataTableCell_main {
  
          .headerName {
            color: #333;
          }
        }
  
        .fixedDataTableCellLayout_wrap3 .public_fixedDataTableCell_cellContent .public_fixedDataTableCell_main:first-child .textCol.table-header-name {
          padding-left: 20px;
        }
  
        .fixedDataTableCellGroupLayout_cellGroupWrapper .fixedDataTableCellGroupLayout_cellGroup .fixedDataTableCellLayout_main:first-child .retail-table-cell .public_fixedDataTableCell_wrap3 .editCol,
        .fixedDataTableCellGroupLayout_cellGroupWrapper .fixedDataTableCellGroupLayout_cellGroup .fixedDataTableCellLayout_main:first-child .retail-table-cell .public_fixedDataTableCell_wrap3 .textCol {
          margin-left: 0;
  
          .viewCell:first-child {
            margin-top: 0px;
          }
  
          div.viewCell+span {
            margin-left: 5px;
          }
  
          .has-related+.ant-form-explain {
            height: auto !important;
          }
  
        }
  
        .public_fixedDataTableCell_disabled.textCol {
          color: #333 !important
        }
      }
  
    }
  
    .width-percent-30 {
      width: 30% !important;
      margin-top: 30px;
      margin-left: 2%;
      overflow: hidden;
      float: left;
  
      .listTable {
        .public_fixedDataTableCell_main {
          background: none;
          border: none;
        }
  
        .public_fixedDataTable_footer .aggregates,
        .public_fixedDataTable_footer .subtotal {
          line-height: 45px;
        }
      }
  
      .listTable .fixedDataTableCellGroupLayout_cellGroupWrapper .fixedDataTableCellGroupLayout_cellGroup .fixedDataTableCellLayout_main:first-child .retail-table-cell .public_fixedDataTableCell_wrap3 .textCol {
        padding-left: 20px !important;
      }
  
      .listTable .fixedDataTableLayout_main.public_fixedDataTable_main .fixedDataTableRowLayout_rowWrapper .fixedDataTableCellGroupLayout_cellGroup .fixedDataTableCellLayout_main.public_fixedDataTableCell_main:first-child {
        .public_fixedDataTableCell_disabled {
          padding-left: 20px !important;
        }
      }
  
      .fixedDataTableRowLayout_rowWrapper .fixedDataTableCellGroupLayout_cellGroup .public_fixedDataTableCell_main:first-child {
        .fixedDataTableCellLayout_wrap1.public_fixedDataTableCell_wrap1.headerName {
          padding-left: 20px;
        }
      }
  
      .fixedDataTableLayout_rowsContainer {
        bottom: -2px;
      }
  
      .public_fixedDataTableRow_CheckedRow,
      .public_fixedDataTableRow_CheckedRow .public_fixedDataTableCell_main,
      .public_fixedDataTable_bodyRow:hover {
        background-color: #fff !important;
      }
  
      .public_fixedDataTable_footer .fixedDataTableCellGroupLayout_cellGroup .public_fixedDataTableCell_main:first-child {
        padding-left: 20px;
      }
  
      .fixedDataTableCellLayout_wrap3 .public_fixedDataTableCell_cellContent .textCol {
        cursor: initial;
      }
  
      .fixedDataTableCellLayout_wrap3 .public_fixedDataTableCell_cellContent .textCol.table-header-name {
        padding: 0 10px !important;
      }
  
      .public_fixedDataTableCell_disabled,
      .public_fixedDataTableCell_disabled .ant-tag,
      .public_fixedDataTableCell_disabled.textCol {
        padding: 0;
  
      }
  
      .public_fixedDataTable_footer {
        .fixedDataTableCellLayout_wrap3 .public_fixedDataTableCell_cellContent .textCol {
          line-height: 21px !important;
        }
      }
  
      .caption-title {
        width: 130px;
        position: relative;
        left: 50%;
        margin-left: -65px;
  
        svg {
          float: left;
          width: 24px;
          height: 24px;
          margin-top: 12px;
          margin-right: 5px;
        }
      }
  
      h3 {
        line-height: 50px;
        color: #333;
        text-align: center;
        font-size: 16px;
        display: block !important;
        float: left;
      }
  
      .public_fixedDataTableCell_main {
        border: none;
      }
  
      .public_fixedDataTableCell_main:hover {
        background: none;
      }
  
      .fixedDataTableLayout_main {
        border: none;
      }
  
      .fixedDataTableRowLayout_main {
        border: none;
  
      }
  
      .public_fixedDataTable_header {
        background: #fff;
  
      }
  
      .columnSetting,
      .columnSetting button {
        background: #fff;
      }
  
      .columnSetting:hover {
        background: #fff;
      }
    }
  
    .width-percent-30 {
      padding-left: 0;
  
      .table-nodata {
        padding-left: 0px;
      }
  
      .yon-row {
        display: block !important;
        margin-bottom: 0;
      }
  
      border: 1px solid #ffa600;
      box-shadow: 0 0 10px 0 #fff0d3;
      border-radius: 5px;
      width: 30% !important;
      margin-bottom: 20px;
  
      .public_fixedDataTable_footer {
        background: #fff7e7;
        color: #ff5735;
      }
    }
  
    .width-percent-30:first-child {
      border: 1px solid #588ce9;
      box-shadow: 0 0 10px 0 #e3edff;
      border-radius: 5px;
      margin-left: 3%;
      width: 30% !important;
      margin-bottom: 20px;
  
      .public_fixedDataTable_footer {
        background: #f0f6ff;
        color: #588ce9;
      }
    }
  
    .width-percent-30:last-child {
      border: 1px solid #18b681;
      box-shadow: 0 0 10px 0 #c9e8de;
      border-radius: 5px;
      width: 30% !important;
      margin-bottom: 20px;
  
      .public_fixedDataTable_footer {
        background: #e8f8f3;
        color: #18b681;
      }
    }
  }

.table-nodata {
  padding-left: 65px;
  top: 30%;
  font-size: 12px;
  transform: translateY(-30%);

  svg {
    width: 70px;
    height: 70px;
    float: left;
    position: relative;
    margin-left: -130px;
    left: 50%;
  }
}

/* 6.13  大屏设置 */
.eChartPanelDesign_LeftPanel {
  width: 250px !important;
  padding: 15px 10px 20px 20px;
  overflow-y: auto;

  .tab {
    width: 140px;
    position: relative;
    left: 50%;
    margin-left: -62px;
    margin-bottom: 10px;

    button {
      width: 60px;
      border: 1px solid #D9D9D9;
      font-size: 12px;
      color: #505766;
      background: #fff;
      border-radius: 0;
      height: 26px;
      line-height: 24px;
      padding: 0;
      margin-left: -1px;
      position: relative;

    }

    button:first-child {
      border-radius: 100px 0 0 100px;
    }

    button:last-child {
      border-radius: 0 100px 100px 0;
    }

    button:hover {
      border: 1px solid #505766;
      z-index: 1
    }

  }

  .chart-img {
    height: 36px;
    line-height: 36px;
    margin-bottom: 15px;

    svg {
      width: 36px;
      height: 36px;
      float: left;
      margin-right: 9px;
    }

    svg+div {
      float: left;
      line-height: 36px;
    }

    button {
      width: 16px;
      height: 16px;
      border: 1px solid #E4E4E4;
      border-radius: 100px;
      padding: 0;
      float: right;

      span {
        position: relative;
        top: -1px;
      }
    }

    .icon-jia {
      float: right;
      width: 24px;
      height: 24px;
      border: 1px solid #E4E4E4;
      border-radius: 50%;
      cursor: pointer;
      margin-top: 7px;
      position: relative;
      margin-right: 5px;

      i {
        position: absolute;
        left: 5px;
        top: 5px;
        font-size: 10px;
      }
    }
  }

  .chart-img:hover {
    color: #ee2223;

    .icon-jia {
      border: 1px solid #ee2223;
    }

    i {
      color: #ee2223;
    }
  }

  .title {
    font-size: 12px;
    color: #333333;
    margin-bottom: 10px;
    margin-top: 15px;
  }

  .tab+.title {
    margin-top: 0px;
  }

  .eChartPanelDesign_TemplateLayOut {
    >div {
      width: 98px !important;
      text-align: center;
      font-size: 12px;
      color: #333333;
      margin-right: 15px;
      margin-bottom: 10px;
      float: left;
      cursor: pointer;

      >div.icon {
        width: 100% !important;
        height: 55px !important;
        border: 1px solid #d9d9d9 !important;
        position: relative;
        border-radius: 4px;

        svg {
          width: 140px;
          height: 90px;
          position: absolute;
          left: -22px;
          top: -19px;
        }
      }

      div.explain {
        margin-top: 5px;
      }

      >.eChartPanelDesign_template {
        width: 100% !important;
        height: 55px !important;
        border-radius: 2px;
        margin-bottom: 5px;
      }
    }

    .eChartPanelDesign_Template_Selected {
      div.icon {
        border: 1px solid #505766 !important;
      }
    }

    .eChartPanelDesign_Template_UnSelected:hover {
      div.icon {
        border: 1px solid #505766 !important;
      }
    }

    >div:nth-child(2n) {
      margin-right: 0;
    }

    >div:last-child {
      margin-bottom: 0;
    }


  }

  .eChartPanelDesign2_TemplateLayOut {
    >div {
      margin-right: 9px;

      >div.icon {
        width: 100% !important;
        height: 36px !important;
        border: 1px solid #d9d9d9 !important;
        position: relative;
        border-radius: 4px;

        svg {
          width: 90px;
          height: 58px;
          position: absolute;
          left: -14px;
          top: -12px;
        }
      }
    }

    >div.eChartPanelDesign2_Template_UnSelected {
      width: 64px !important;
    }

    .eChartPanelDesign2_Template_Selected {
      width: 64px !important;
    }

    .eChartPanelDesign2_Template_Selected {
      div.icon {
        border: 1px solid #505766 !important;
      }
    }

    .eChartPanelDesign2_Template_UnSelected:hover {
      div.icon {
        border: 1px solid #505766 !important;
      }
    }

    >div:nth-child(2n) {
      margin-right: 9px;
    }

    >div:nth-child(3n) {
      margin-right: 0;
    }
  }

  .proportion {
    margin-bottom: 10px;

    button {
      width: 98px;
      height: 30px;
      border: 1px solid #D9D9D9;
      border-radius: 4px;
      margin-right: 15px;
      font-size: 12px;
      color: #333333;
      background: none;

      i {
        font-style: normal;
        color: #ee2223;
      }
    }

    button:hover {
      border: 1px solid #505766;
    }

    button:last-child {
      margin-right: 0;
    }

  }

  .wide-high {
    line-height: 30px;

    >div {
      float: left;
      margin-right: 7px;
    }

    >div:last-child {
      margin-right: 0;
    }

    .little-title {
      width: 98px !important;
      text-align: center;
      margin-right: 15px;
      color: #666;
    }

    .nums {
      width: 40px !important;
    }

    .bi {
      margin-right: 0;
      width: 9px !important;
    }

    .ant-input {
      padding: 0;
      width: 40px;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }
  }

  .background-color {
    button {
      width: 26px;
      height: 26px;
      border: none;
      border-radius: 100px;
      padding: 0;
      margin-right: 10px;
      float: left;

      i {
        color: #fff;
        font-size: 12px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -6px;
        margin-top: -5px;
      }
    }

    .backgroundcolor2 {
      i {
        color: #aaa;
      }
    }

    button.backgroundcolorselected {
      border: 3px solid #d9d9d9;
      transition: none;

    }

    button+div {
      svg {
        width: 30px;
        height: 30px;
        position: relative;
        top: -3px;
        cursor: pointer;
      }
    }
  }

  .bg-style {
    margin-top: 18px;
    margin-bottom: 8px;
    padding-right: 8px;

    button {
      float: right;
      border: none;
      padding: .0;
      height: auto;
      color: #588CE9;
      padding-right: 2px;
    }
  }

  .bg-style-list {
    .col-float {
      width: 98px !important;
      margin-right: 15px;
      text-align: center;
      font-size: 12px;
      color: #333333;
      margin-bottom: 10px;
      cursor: pointer;

      img {
        width: 100%;
      }

      div:first-child {
        border-radius: 2px;
        width: 100% !important;
        height: 55px;
        margin-bottom: 5px;
      }

      .eChartPanelDesign_BackStyle_Selected {
        position: relative;
      }

      .eChartPanelDesign_BackStyle_Selected:before {
        position: absolute;
        content: "";
        transform: rotate(45deg) scale(1);
        position: absolute;
        left: 50%;
        top: 50%;
        display: table;
        width: 7px;
        height: 12px;
        margin-top: -7px;
        margin-left: -3px;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        content: " ";
        transition: all .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
      }

    }

    .col-float:nth-child(2n) {
      margin-right: 0;
    }

    .col-float:hover {
      div:first-child {
        position: relative;
      }

      div:first-child:before {
        position: absolute;
        content: "";
        transform: rotate(45deg) scale(1);
        position: absolute;
        left: 50%;
        top: 50%;
        display: table;
        width: 7px;
        height: 12px;
        margin-top: -7px;
        margin-left: -3px;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        content: " ";
        transition: all .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
      }
    }

  }
}

.eChartPanelDesign_EditPanel {
  background: #F0F1F4;
  width: calc(~'100% - 250px') !important;
  padding-left: 20px;
  padding-right: 0px;
  position: relative;

  /*滚动条*/
  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  .template-name {
    height: 52px;

    span {
      font-size: 12px;
      color: #666666;
      line-height: 32px;
      margin-right: 15px;

      .ant-input {
        width: 400px;
      }
    }
  }

  .template-content {
    background: #fff;
    padding: 2px;
    height: calc(~'100% - 100px');
    overflow-y: auto;

    .yon-row {
      .col-all {
        .qingchu-btn {
          position: absolute;
          top: 0px;
          left: 0px;
        }

        .edit-btn,
        .del-btn {
          position: relative;
          float: right;
          width: 30px;
          height: 100%;
          margin-right: 10px;

          .qingchu-btn-bg {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 0 10px 0 #E4E4E4;
            position: absolute;
            bottom: 4px;

            svg {
              width: 18px;
              height: 18px;
              margin: 6px;
            }
          }
        }

        >div.panelLayer-col-inner {
          position: relative;

          >div {
            height: 100%;

            .upload-content {
              position: relative;
              float: right;
              width: 30px;
              height: 100%;
              margin-right: 10px;

              .yon-row {
                position: absolute;
                bottom: 3px;
                width: 30px;
                height: 30px;
                background: #fff;
                border-radius: 50%;
                box-shadow: 0 0 10px 0 #E4E4E4;
              }

              .btn-gray {
                background: none;
                font-size: 12px;
                color: #333333;
                padding: 0;

                svg {
                  width: 17px;
                  height: 17px;
                  margin-top: 6px;
                  margin-left: 6px;
                }
              }

            }

            .eChartPanelSplit {
              position: relative;
              float: right;
              width: 18px;
              height: 100%;
              margin-right: 10px;

              .chaifen {
                position: absolute;
                bottom: 4px;
                padding: 0px;
                border: none;
                right: 0px;
                background: #fff;
                width: 30px;
                height: 30px;
                box-shadow: 0 0 10px 0 #E4E4E4;
                border-radius: 50%;

                svg {
                  width: 21px;
                  height: 21px;
                }
              }

            }
          }

          .panelLayer-col-hasbackgroundimage {
            position: relative;

            .eChartPanelSplit {
              position: absolute;
              right: 0px;
              bottom: 0px;

              .chaifen {
                right: 0px !important;
              }
            }
          }

          .eChartPanelDesign_HasValue {
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -5%;
            width: 10% !important;
            height: 100%;
            min-width: auto;
            display: flex;
            align-items: center;

            svg {
              width: 100%;
              height: 50%;
              flex: 1;
              display: flex;
              justify-content: center;
              /*水平轴居中*/
            }

            svg+span {
              display: none;
            }
          }

        }

        .panelLayer-col-final {
          white-space: nowrap;
          overflow-x: auto;
          box-sizing: border-box;
          overflow-y: hidden;

          >div {
            min-width: 86px;
            position: relative;
            overflow-x: auto;
            overflow-y: hidden;
          }

        }

        .eChartPanelSplit_HasImg {
          .chaifen {
            right: 10px !important;
          }
        }
      }
    }
  }
}

.ele_Panel {
  height: 100%;
}

.crashed-component-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-height: 70px;
  background-color: #fcfcfc;
  height: 70px;
  width: 100%;
  overflow: hidden;
  text-align: center;

  .anticon-icon-tishi1 {
    font-size: 18px;
    opacity: 0.6;
  }

  .text {
    color: red;
  }
}

.eChartPanelDesign_EditPanel_bottom {
  width: 100%;
  padding-left: 20px !important;
  right: 0;
  position: fixed;
  left: 409Px;
  bottom: 0;

  button {
    margin-right: 10px;
  }
}

/* 拆分 */
.eChartPanelSplit_content {
  width: 340px;
  padding: 10px;

  >.clearfix {
    margin-bottom: 15px;
  }

  >.clearfix>.yon-row {
    height: 28px;
    line-height: 28px;
  }

  .direction {
    .col-all {
      width: 38px;
      height: 28px;
      float: left;
      border: 1px solid #D9D9D9;
      overflow: hidden;
      cursor: pointer;
      margin-left: -1px;
      position: relative;

      svg {
        width: 16px;
        height: 16px;
        margin-left: 10px;
        position: relative;
        top: -1px;
      }
    }

    .col-all:first-child {
      border-radius: 4px 0 0 4px;
    }

    .col-all:last-child {
      border-radius: 0 4px 4px 0;
    }

    .col-all:hover {
      border: 1px solid #588CE9;
      z-index: 1;
    }

    .selected {
      background: rgba(88, 140, 233, 0.05);
      border: 1px solid #588CE9;
      z-index: 1;
    }
  }

  .label-title {
    width: 108px;
    float: left;
  }

  .yon-row.label-title {
    padding: 0;
    margin-left: 10px;
  }

  .yon-row.direction,
  .yon-row.num,
  .bili {
    float: left;
    margin-left: -10px;
  }

  .yon-row.num {
    button {
      width: 38px;
      height: 28px;
      background: none;
      color: #333;
      border: 1px solid #d9d9d9;
      position: relative;
      margin-left: -1px;
    }

    button:hover {
      border: 1px solid #588CE9;
      z-index: 1;
    }

    button:first-child {
      border-radius: 4px 0 0 4px;
    }

    button:last-child {
      border-radius: 0 4px 4px 0;
    }

    button.ant-btn-primary {
      background: rgba(88, 140, 233, 0.05);
      border: 1px solid #588CE9;
      color: #588CE9;
      z-index: 1;
    }
  }

  .yon-row:hover {
    background: none;
  }

  .bili {
    padding: 0 10px;

    input {
      width: 50px;
      height: 32px;
      float: left;
      margin-right: 6px;
      text-align: center;
    }

    span {
      float: left;
      margin-right: 6px;
    }
  }
}

.eChartPanelSplit_bottom {
  border-top: 1px solid #e9e9e9;
  padding-top: 10px;
  padding-right: 10px;

  button {
    float: right;
    margin-right: 10px;
  }
}

/*添加图文 */
.eChartPanelDesign_SetImageText {
  width: 400px !important;

  .ant-modal-header {
    padding: 20px 20px 15px 20px;
    font-size: 14px;
    color: #666666;
    border-bottom: none;
  }

  .ant-modal-body {
    padding: 20px;
    padding-top: 0;
    height: 340px;

    .tuwen-xs {
      span.tw {
        display: block;
        float: left;
        width: 98px;
      }

    }

    .logo-sc {
      >span:first-child {
        width: 80px;
        height: 80px;
        float: left;
        background: #EDF0F2;
        border: 1px solid #D9D9D9;
        margin-right: 10px;
        border-radius: 4px;
        overflow: hidden;

        .dj-sc {
          position: initial;
          background: url(images/default-logo22_03.png);
          background-size: 100% 100%;
          position: relative;

          img {
            width: 100%;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
          }

          .info-person-mask {
            width: 80px;
            height: 80px;
            position: initial;
            border-radius: 0;
            position: absolute;

            p {
              font-size: 12px;
            }
          }

        }

        .eChartUpLoad_HasImg {
          background: #f6f6f6 !important;
        }
      }

      .tips {
        font-size: 12px;
        color: #999;
        line-height: 15px;
        margin-top: 25px;
        float: left;
        width: 170px;
      }
    }

    .yon-row {
      margin-top: 15px;

      span {
        display: block;
        float: left;
        width: 98px;
      }

      .fileupload-txt {
        width: 190px;
        line-height: 16px;
        padding-left: 18px;
        margin-top: 13px;
      }

      input {
        width: 230px;
      }

      .eChartPanelDesign_Img {
        width: 80px;
        height: 80px;
        float: left;
        cursor: pointer;
        background: url(images/default-logo22.png);
        background-size: 90px 90px;
        float: left;
        background-position: -6px -6px;

        img {
          display: none;
        }
      }

      .btn-gray {
        display: block;
        position: absolute;
        left: -73px;
        background: rgba(0, 0, 0, 0.5);
        width: 80px;
        height: 80px;
        top: -11px;
        text-align: center;
        line-height: 80px;
        color: #fff;
      }

      .upload-content {
        float: left;
      }

      div.fl {
        float: left;
        margin-right: 20px;

        .col-all {
          width: 38px;
          height: 28px;
          float: left;
          overflow: hidden;
          border: 1px solid #D9D9D9;
          cursor: pointer;
          margin-top: 2px;
          position: relative;
          margin-left: -1px;

          svg {
            width: 20px;
            height: 20px;
            margin-top: 2px;
            margin-left: 8px;
          }
        }

        .col-all:first-child {
          border-radius: 4px 0 0 4px;
        }

        .col-all:last-child {
          border-radius: 0 4px 4px 0;
        }

        .col-all:hover {
          border: 1px solid #588CE9;
          z-index: 1;
        }

        .selected {
          background: rgba(88, 140, 233, 0.05);
          border: 1px solid #588CE9;
          z-index: 1;
        }
      }

      div.fl:last-child {
        margin-right: 0
      }
    }

    .yon-row.fontSize {
      input {
        width: 54px;
        text-align: center;
      }
    }
  }
}

/*图表 */
.eChartPanelDesign_SetChart {
  width: 800px !important;

  .ant-modal-header {
    padding: 20px;
    padding-bottom: 15px;
    border-bottom: 0;
  }

  .ant-modal-body {
    padding: 16px 0 16px 25px;
    padding-top: 0;
    min-height: 340px;
    max-height: 491px;
    overflow-y: auto;

    >div>.yon-row {
      margin-bottom: 15px;

      >.col-all:first-child {
        font-size: 12px;
        color: #333;
        width: 75px;
        float: left;
      }

      .up-show {
        top: 0px;
        overflow: hidden;
        left: 580px;
        right: auto;

        .ant-popover-open-count {
          float: right;
        }
      }

      .filter-controls .yon-row {
        line-height: 32px;

        .basic-predicate-data-picker {
          .yon-row {
            .label-control {
              width: 60px !important;
              margin-right: 10px;
              margin-bottom: 0px;
            }

            .input-control {
              float: left;
            }

            .query-scheme-date {
              width: 292px;
              margin-left: 1px;

              .col-float {
                margin-bottom: 0px;
              }

              .yon-row {
                .col-float {
                  width: 110px !important;
                }
              }
            }
          }
        }

        .col-float {
          margin-bottom: 15px;

          .filter-hide {
            .col-float {
              margin-bottom: 0px;
            }
          }
        }

      }

      .filter-controls .filter-hide {
        >.yon-row {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          display: -webkit-flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          height: 32px;

          .label-control {
            width: 60px !important;
            margin-right: 10px;
          }

          .col-float {
            float: left;
            padding-left: 0px;
            text-align: center;
            line-height: 32px;
            max-height: 32px;
            overflow: hidden;