//日历
.lh-calendar {
  //common视图
  .lh-calendar-table {
    background-color: white;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    th{
      height: 28px;
      line-height: 28px;
      font-size:14px;
      color:#858585;
      text-align: center;
      background-color: white;
      border-bottom: 1px solid #e4e8eb;
      font-weight: normal;
    }
    tr{
      border-bottom:1px solid #e4e8eb;
      &:last-child {
        border-bottom:none
      }
    }
    td{
      padding: 0;
      vertical-align: top;
      .info {
        min-height:85px;
        padding-top: 13px;
        .info-header {
          display: inline-block;
          height: 24px;
          line-height: 24px;
          padding-left: 15px;
          padding-right: 11px;
          border-bottom-right-radius: 12px;
          border-top-right-radius: 12px;
          color:#666666;
          cursor: pointer;
          &.isToday {
            background-color: #e4e8eb;
          }
          &.active {
            background-color: @color_theme6;
            color:white;
          }
          &:hover {
            background-color: @color_theme6;
            color:white;
          }
        }
        &.disabled {
          .info-header {
            cursor: not-allowed;
            color:#b2b2b2;
            &:hover {
              background-color: white;
              color:#b2b2b2;
            }
          }
        }
      }
      border-right: 1px solid #e4e8eb;
      &:last-child {
        border-right:none
      }
    }
  }
  //尝试使用flex布局
  .lh-calendar-flex {
    background-color: white;
    .flex-header {

      display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
      display: -moz-flex; /* Firefox 18+ */
      display: -ms-flexbox; /* IE 10 */
      display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

      -ms-flex-direction: row;
      -webkit-flex-direction: row;
      flex-direction: row;

      height: 28px;
      line-height: 28px;

      border-bottom: 1px solid #e4e8eb;
      div {

        -ms-flex: 1 1 0%;
        -webkit-flex: 1 1 0%;
        flex: 1 1 0%;

        text-align: center;
        color:#858585;
      }
    }
    .flex-wapper{
      min-height:350px;


      display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
      display: -moz-flex; /* Firefox 18+ */
      display: -ms-flexbox; /* IE 10 */
      display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */


      -ms-flex-direction: column;
      -webkit-flex-direction: column;
      flex-direction: column;


      .flex-rows {

        display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
        display: -moz-flex; /* Firefox 18+ */
        display: -ms-flexbox; /* IE 10 */
        display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */


        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;

        -ms-flex: 1 1 0%;
        -webkit-flex: 1 1 0%;
        flex: 1 1 0%;

        border-bottom:1px solid #e4e8eb;
        &:last-child {
          border-bottom:none
        }
        .flex-columns {

          -ms-flex: 1 1 0%;
          -webkit-flex: 1 1 0%;
          flex: 1 1 0%;

          border-right: 1px solid #e4e8eb;
          &:last-child {
            border-right:none
          }
          .info {
            height: 100%;
            position: relative;
            .info-header {
              display: inline-block;
              height: 20px;
              line-height: 20px;
              padding-left: 15px;
              padding-right: 11px;
              border-bottom-right-radius: 12px;
              border-top-right-radius: 12px;
              color:#666666;
              cursor: pointer;
              margin-top: 10px;
              &.isToday {
                background-color: #e4e8eb;
              }
              &.active {
                background-color: @color_theme6;
                color:white;
              }
              &:hover {
                background-color: @color_theme6;
                color:white;
              }
            }
            &.disabled {
              .info-header {
                cursor: not-allowed;
                color:#b2b2b2;
                &:hover {
                  background-color: white;
                  color:#b2b2b2;
                }
              }
            }
          }
        }
      }
    }
  }
}
//日期选择器
.lh-date {
  width: 280px;
  background-color: white;
  .lh-date-header {
    padding-top: 12px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    height: 40px;
    .lh-date-header-left {
      float: left;
    }
    .lh-date-header-right {
      float: right;
    }
    .lh-date-header-label {
      font-size:14px;
      padding: 0 5px;
      cursor: pointer;
      font-weight: 500;
      &:hover {
        color: @color_theme6;
      }
    }
    .lh-date-header-btn {
      width: 20px;
      cursor: pointer;
      padding-left: 6px;
      padding-right: 6px;
      .icon_drop_down1 {
        transform:rotate(90deg);
      }
      .icon_drop_down2 {
        transform:rotate(270deg);
      }
      .icon_unfold1 {

      }
      .icon_unfold2 {
        transform:rotate(180deg);
      }
      i{
        font-size:14px;
        color:@color_b3;
        display: inline-block;
      }
      &:hover
      {
        i{
          color:@color_theme6;
        }

      }
    }
  }
  .lh-date-content {
    padding: 12px 15px 12px 15px;
    .lh-date-table {
      background-color: white;
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;

      th{
        height: 24px;
        line-height: 24px;
        text-align: center;
        font-weight: 400;
        color: @color_b1;
        font-size:14px;
      }
      td{
        width: 32px;
        text-align: center;
        color: @color_b2;
        font-size:14px;
        div {
          padding: 2px 0 2px 0;
          cursor: pointer;
          span {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height:24px;
            text-align: center;
            border-radius: 2px;
            position: relative;
            label {
              display: none;
              position: absolute;
              width: 5px;
              height: 5px;
              background: @color_warning_red;
              box-shadow: 0px 1px 0px #FFFFFF;
              top:2px;
              right: 2px;
              border-radius: 50%;
            }
          }
        }
        &:hover {
          span {
            background-color: @color_theme1;
          }
        }
        &.isToday {
          color: @color_theme6;
          span {
            border: 1px solid @color_theme6;
            line-height:22px;
          }
        }
        &.active {
          span {
            background-color: @color_theme6;
            color:white;
            box-shadow: 0 0 20px rgba(6,105,255,0.4);
          }
        }
        &.disabled {
          div {
            background-color: @color_b8;
            color: @color_b3;
            cursor: not-allowed;
          }
        }
        &.other-month {
          color: @color_b4;
          &:hover {
            color: @color_b4;
          }
        }
        &.activityDate {
          div {
            span {
              label {
                display: block;
              }
            }
          }
        }
      }
    }
    .lh-year-table {
      background-color: white;
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;
      color:#858585;
      td {
        text-align: center;
        padding: 20px 3px;
        cursor: pointer;
        .cell {
          width: 48px;
          height: 32px;
          display: block;
          line-height: 32px;
          color: #606266;
          margin: 0 auto;
        }
        &:hover {
          .cell {
            color:  @color_theme6;
          }
        }
        &.selected {
          .cell {
            color:  @color_theme6;
            font-weight: 700;
          }
        }
        &.disabled {
          cursor: not-allowed;
          .cell {
            color:#b2b2b2;
          }
          &:hover {
            color:#b2b2b2;
          }
        }
      }
    }
    .lh-month-table {
      background-color: white;
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;
      color:#858585;
      td {
        text-align: center;
        padding: 8px 0;
        cursor: pointer;
        div {
          height: 48px;
          padding: 6px 0;
          .cell {
            width: 60px;
            height: 36px;
            display: block;
            line-height: 36px;
            color: #606266;
            margin: 0 auto;
            border-radius: 18px;
          }
        }
        &:hover {
          .cell {
            color:  @color_theme6;
          }
        }
        &.selected {
          .cell {
            color:  @color_theme6;
            font-weight: 700;
          }
        }
      }
    }
  }
}
.lh-date-picker {
  position: relative;
  display: inline-block;
  .lh-date-picker__suffix {
    position: absolute;
    cursor: pointer;
    right:8px;
    line-height: 32px;
    i{
      font-size: 14px;
    }
    .icon_component_error02 {
      color:@color_b4;
      display: none;
    }
    .icon_component_date {
      color:@color_b4;
      display: inline-block;
    }
  }
  &.mini {
    .lh-date-picker__suffix {
      line-height: 24px;
    }
  }
  &:hover {
    .lh-date-picker__suffix {
      .icon_component_error02 {
        color:@color_b4;
        display: inline-block;
        &:hover {
          color:@color_b3;
        }
      }
    }
  }
  &.clearable {
    &:hover {
      .lh-date-picker__suffix {
        .icon_component_date {
          display: none;
        }
      }
    }
  }

}
.lh-date-picker-popover {
  box-shadow: 0 9px 28px rgba(0,0,0,0.05);
}
.pingFangSC {
  font-family:PingFang-SC-Bold,Helvetica Neue,Helvetica,Arial,pingfang sc,Hiragino Sans GB,Microsoft YaHei,STHeiti,SimSun,sans-serif;
}


//日期范围选择器
.lh-date-range-picker-popover {
  box-shadow: 0 9px 28px rgba(0,0,0,0.05);
  .range-popover-content {
    .range-popover-left {
      width: 80px;
      height: 240px;
      padding-left: 10px;
      padding-top: 10px;
      .lh-button-text.mini {
        height: 24px;
      }
    }
    .range-popover-date {
      border-left:1px solid @color_b6;
    }
  }
}
.lh-date-range-picker {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 32px;
  border: 1px solid @color_b5;
  border-radius: 2px;
  .text_right {
    position: absolute;
    left:50%;
    line-height: 24px;
    font-size: 14px;
    margin-left: -8px;
    color:@color_b4;
  }
  .range__suffix {
    position: absolute;
    cursor: pointer;
    right:8px;
    line-height: 30px;
    &.range__suffix_left {
      right: auto;
      left:50%;
      margin-left: -30px;
    }
    i{
      font-size: 14px;
    }
    .icon_component_error02 {
      color:@color_b4;
      display: none;
    }
    .icon_component_date {
      color:@color_b4;
      display: inline-block;
    }
  }
  .lh-input {
    .lh-input-cornInput {
      border: none;
      height: 30px;
    }
  }
  &.mini {
    height: 24px;
    .text_right {
      line-height: 20px;
    }
    .lh-input {
      .lh-input-cornInput {
        border: none;
        height: 22px;
      }
    }
    .range__suffix {
      line-height: 22px;
    }
  }
  &:hover {
    border:1px solid @color_theme6;
    .range__suffix {
      .icon_component_error02 {
        color:@color_b4;
        display: inline-block;
        &:hover {
          color:@color_b3;
        }
      }
    }
  }
  &.clearable {
    &:hover {
      .range__suffix {
        .icon_component_date {
          display: none;
        }
      }
    }
  }


  &.active {
    border:1px solid @color_theme6;
  }
}
.width240 {
  width: 240px;
}