@active-color: rgb(30, 48, 148);
@active-light-color: lighten(@active-color,40%);
.calendar-container {
    width: 100%;
    border-collapse: collapse;
    td,
    th {
        border: 1px solid #ddd;
        padding: 8px 16px;
    }
    .month-selector{
        display: flex;
        column-span: all;
        justify-content: space-around;
        align-items:center;
        .tool-button-group{
            white-space: nowrap;
            .tool-button{
                &:first-child{
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }
                &:last-child{
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                }
            }
        }
        .control{
            margin: 0 4px;
        }
    }
    .day {
        font-size: 14px;
        font-weight: bold;
       
    }
    .date{
        color:#aaa;;
        &-title,&-content{
            display: block;
        }

        &.nowmonth{
            color:#333;
            font-weight: bold;
            background: rgb(239, 245, 255);
        }
        &.today{
            outline: 2px double @active-light-color;
        }
        &.now{
            color:white;
            background: @active-color;
        }
    }
}