.calendar {
    background: #fff;
    .month-list {
        height: 450px;
        border: solid 2px #000;
    }
    .month-container {
        width: 100%;
        .month {
            width: 100%;
            padding: 1px .12rem;
            display: flex;
            display: -webkit-flex;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            text-align: center;
            color: #787878;
            .monthYear-container {
                 flex: 3.1;
                 height: .32rem;
                 line-height: .32rem;
                 margin-top: .27rem;
                 -webkit-flex: 3.1;
                 -webkit-box-flex: 3.1;
            }
            .month-text {
                color: #667580;
                font-size: .24rem;
                span:first-child {
                    font-weight: 500;
                }
            }

            .year-text {
                color: #acb7bf;
                font-size: .24rem;
            }
            .icon-con {
                flex: 1;
                -webkit-flex: 1;
                margin-top: 20px;
                -webkit-box-flex: 1;
                .month-icon {
                    display: none;
                }
                .icon {
                    color: #ACB7BF;
                }
            }
        }
        .weeks {
            padding-left: .12rem;
            padding-right: .12rem;
            box-sizing: border-box;
            line-height: .2rem;
            display: table;
            table-layout: fixed;
            width: 100%;
            height: .2rem;
            background-color: #f5f6f7;
            span {
                text-align: center;
                font-size: .12rem;
                display:table-cell;
                color: #667580;
            }
        }
        .days-container {
            margin: 0.06rem .12rem 0 .12rem;
            transition:All 0.4s ease-in-out;
          	-webkit-transition: All 0.4s ease-in-out;
            .days-row {
                display: table;
                table-layout: fixed;
                width: 100%;
                box-sizing: border-box;
                margin-top: 0.04rem;
                .current > span {
                    color:#2196f3;
                }
                .active > span{
                    background-color: #007ed9;
                    color:#fff;
                }
                .firstActive > span {
                    width: 100%;
                    height: .44rem;
                    line-height: .44rem;
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                    border-top-left-radius: .22rem;
                    border-bottom-left-radius: .22rem;
                }
                .hidden > span {
                    visibility: hidden;
                }
                .disabled > span {
                    color: #acb7bf;
                    background-color: #fff;
                }
                .range > span {
                    width: 100%;
                    height: .44rem;
                    line-height: .44rem;
                    color: #fff;
                    border-radius: 0;
                    background-color: #007ed9;
                }
            }
        }
    }
    .calendar-month {
        height: 100%;
        overflow-y: scroll;
        &.show-part{
            height:auto;
            min-height:.4rem;
            .days-row:not(.always-show) {
                display:none;
            }
        }
    }
}

.day {
    text-align: center;
    display:table-cell;
    & > span {
        width: .44rem;
        height: .44rem;
        margin: 1px auto;
        display: inline-block;
        font-size: .16rem;
        line-height: .44rem;
        border-radius: 50%;
        color: #36434d;
    }
    &.lastActive > span {
        width: 100%;
        height: .44rem;
        line-height: .44rem;
        border-top-right-radius: .22rem;
        border-bottom-right-radius: .22rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}