:global {
  .calendar-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    .calendar-wrap {
      width: 100%;
      height: 0;
      flex: 1;
      background-color: #fff;
      overflow: auto;
      animation-duration: 0.3s;
      display: flex;
      flex-direction: column;

      .week-wrap {
        display: flex;
        font-size: 16px;
        border-bottom: 1px solid rgb(221, 221, 221);

        .week-item {
          height: 44px;
          line-height: 44px;
          width: 14.28571429%;
          text-align: center;
          color: rgba(0, 0, 0, 0.65);
        }
      }
      .table-wrap {
        height: 0;
        flex: 1;
        overflow-y: scroll;
      }

      .date-table {
        margin: 12px 0 15px 0;

        .desc {
          text-align: left;
          text-indent: 15px;
          font-size: 16px;
          height: 22px;
          line-height: 22px;
          color: #191f25;
        }

        .row {
          display: flex;
          margin: 8px 0;

          .date-wrap {
            height: 40px;
            width: 14.28571429%;
            line-height: 30px;
            text-align: center;

            .left {
              width: 100%;
            }

            .item {
              display: inline-block;
              width: 25px;
              height: 25px;
              font-size: 15px;
              line-height: 25px;
              border-radius: 50%;
              text-align: center;
            }

            .disable {
              background-color: rgb(238, 238, 238);
              color: rgb(187, 187, 187);
            }

            .active {
              background-color: #108ee9;
              color: #fff;
            }

            .right {
              width: 100%;
            }
          }
        }
      }

      .fake-area {
        height: 53px;
        width: 100%;
      }
    }
  }
}