.calendarPage {
  width: 100%;
  height: 100%;
  display: flex;


  .leftContent {

    height: 100%;
    // min-height: 100%;
    display: flex;
    overflow-y: scroll;
    flex-shrink: 0;
    flex-direction: column;
    background-color: #fff;
    border-radius: 5px;
    padding: 15px;

    .calendarBox {
      // height: 60%;
      width: 1127px;


      :global {
        .ant-picker-content {
          border-color: #DBE6F2;
          // border-collapse: collapse;
          border-spacing: 1px;

          .ant-picker-cell {}


          th,
          td {
            border: 1px solid #DBE6F2;
          }

          th {
            height: 39px;
            background-color: #F3F9FF;
            text-align: center;
            color: #616467;
          }
        }
      }

      .calendarCell {
        position: relative;
        width: 159px;
        height: 88px;

        .tiemBox {
          position: absolute;
          top: 8px;
          left: 5px;

          p {
            text-align: center;
            margin-bottom: 0;
          }

          p:nth-of-type(1) {
            color: #000000;
            font-size: 16px;

          }

          p:nth-of-type(2) {
            color: #474747;
            font-size: 14px;
          }
        }

      }

      .calendarCell:hover {
        border: 1px solid #FAAD14;
      }

      .otherMonthDay {
        .tiemBox {

          p:nth-of-type(1) {
            opacity: 0.25;

          }

          p:nth-of-type(2) {
            opacity: 0.25;
          }
        }


      }

      .weekend {

        background: #FFF2F2;

        .tips {
          position: absolute;
          top: 5px;
          right: 10px;
          width: 10px;
          height: 10px;

        }

        .tiemBox {

          p:nth-of-type(1) {
            color: #FF5933;

          }


        }

      }


      .rest {
        background: linear-gradient(0deg, #E8FDD7 0%, #FFFFFF 100%);

        .icon {
          position: absolute;
          left: 56px;
          top: 30px;
          width: 91px;
          height: 50px;
          background: url("../../../../assets/images/holidays/rest.png") no-repeat;
          background-size: 100% 100%;
        }
      }



      .holidays {
        background: linear-gradient(0deg, #FFF8EE 0%, #FFFFFF 100%);

        .icon {
          position: absolute;
          left: 56px;
          top: 30px;
          width: 91px;
          height: 50px;
          background: url("../../../../assets/images/holidays/holidays.png") no-repeat;
          background-size: 100% 100%;
        }


      }


      .calendarHeader {
        display: flex;
        align-items: center;
        height: 40px;
        width: 100%;
        justify-content: space-between;




        .left {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .right {
          height: 100%;
          display: flex;
          align-items: center;
        }
      }

      .choose {
        border: 1px solid #6394FF;
      }
    }

    .workTiemContainer {
      display: flex;
      flex-direction: column;

      width: 100%;
      flex: 1;


      // display: flex;
      .header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;

        .headerLeft {
          display: flex;
          align-items: center;
          font-weight: 700;

          .lineBox {
            width: 3px;
            height: 14px;
            background-color: #1685FF;
            margin-right: 5px;
          }
        }
      }

      .content {
        display: flex;
        justify-content: space-between;
        flex: 1;
        align-items: center;

        .workTimeBox {

          display: flex;
          align-items: center;
          // justify-content: center;
          width: 358px;
          height: 123px;
          transition: transform 0.5s;
          cursor: pointer;
          .left {
            margin-left: 38px;
            margin-right: 20px;

            .icon {
              width: 54px;
              height: 54px;

              img {
                width: 100%;
              }
            }
          }

          .right {
            color: #000000;

            .title {
              margin-bottom: 5px;
            }
          }
        }

        .workTimeBox:hover {
          transform: scale(1.05);
        }

        .mor {
          background: url("../../../../assets/images/holidays/mor.png");
          background-size: 100% 100%;
        }

        .aft {
          background: url("../../../../assets/images/holidays/aft.png");
          background-size: 100% 100%;
        }

        .eve {
          background: url("../../../../assets/images/holidays/eve.png");
          background-size: 100% 100%;
        }
      }
    }
  }

  .rightContent {
    flex: 1;
    background-color: #ffffff;
    height: 100%;
    margin-left: 15px;
    border-radius: 5px;
    padding: 15px;
    overflow-y: scroll;

    .header {
      width: 100%;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      height: 50px;
      font-weight: 700;

      .lineBox {
        width: 3px;
        height: 14px;
        background-color: #1685FF;
        margin-right: 5px;
      }


    }

    .statisticsBox {
      display: flex;
      flex-wrap: wrap;

      width: 100%;
      justify-content: space-between;

      .statistics {
        width: 45%;
        height: 50px;
        text-align: center;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        margin-bottom: 15px;

        .left {
          .icon {
            width: 46px;
            height: 46px;

            img {
              width: 100%;
            }
          }


        }

        .right {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin-left: 9px;
          height: 60px;

          .desBox {
            width: 100%;
            padding: 0 5px;
            display: flex;
            justify-content: space-between;
            align-items: baseline;

            .value {
              i {
                font-style: normal;
                font-weight: 700;
                font-size: 20px;
              }
            }
          }

          .progress {
            margin-top: 10px;
            width: 135px;
            height: 5px;
            background-color: #E2E8EE;
            border-radius: 3px;

            .rate {
              height: 100%;
              border-radius: 3px;
            }
          }
        }

      }
    }

    .holidaysList {
      width: 100%;
      padding-bottom: 10px;
      height: calc(100% - 200px);
      overflow-y: scroll;

      .itemBox {


        background: #F3F9FF;
        border: 1px solid #DBE6F2;
        border-radius: 10px;
        padding: 10px 15px;
        margin-bottom: 12px;

        .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 25px;

          .del {
            display: flex;
            align-items: center;
          }
        }

        .content {
          display: flex;
          flex-wrap: wrap;

          span {
            width: 100px;
          }
        }
      }
    }

    .ant-table-wrapper {
      height: calc(100% - 170px);

      .ant-table {
        height: calc(100% - 0px);

        .ant-table-body {

          border-left: 1px solid #f0f0f0;

        }

        .ant-table-container {
          height: 100%;
        }
      }
    }

  }
}