.calendar {
    background: #fff;
    color: #1a1a1a;
    width: 100%;
    border: 1px solid #eaf2f9;
    table-layout: fixed;

    &.purple {
        background: #913CCD;
    }

    &.pink {
        background: #F15F74;
    }

    &.orange {
        background: #F76D3C;
    }

    &.yellow {
        background: #F7D842;
    }

    &.green {
        background: #98CB4A;
    }

    &.grey {
        background: #839098;
    }

    &.blue {
        background: #5481E6;
    }
}

.calendar-title th {
    font-size: 20px;
    font-weight: bold;
    padding: 15px;
    text-align: center;
    text-transform: uppercase;
    background: #f6f9fc;
    border: 1px solid #eaf2f9;
}

.calendar-header th {
    padding: 10px;
    text-align: center;
    border: 1px solid #eaf2f9;
    background: #fff;
}

.calendar tbody tr td {
    text-align: center;
    border: 1px solid #eaf2f9;
    vertical-align: top;
    width: 14.28%;
    color: #5f7d94;

    &.pad {
        background: rgba(255, 255, 255, 0.1);
    }

    &.day div {
        &:first-child {
            padding: 4px;
            line-height: 40px;
            height: 25px;
        }

        &:last-child {
            font-size: 10px;
            padding: 4px;
            min-height: 25px;
        }
    }

    &.today {
        background: #f6f9fc;
    }

    &.mask-start,
    &.mask,
    &.mask-end {
        background: #C23B22;
    }
}