.monthly-calendar {
    font-size: 14px;
}

    .monthly-calendar .calendar-header {
        position: relative;
    }

    .monthly-calendar .title {
        font-size: 24px;
        padding: 10px 0;
        text-align: center;
        width: 100%;
    }

    .monthly-calendar .prev,
    .monthly-calendar .next {
        cursor: pointer;
        border: solid black;
        border-width: 0 3px 3px 0;
        padding: 3px;
        height: 20px;
        width: 20px;
    }

    .monthly-calendar .prev {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        position: absolute;
        left: 0;
        top: 20px;
    }

    .monthly-calendar .next {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        position: absolute;
        right: 0;
        bottom: 20px;
    }

    .monthly-calendar .calendar-days {
        margin: 0 auto;
        text-align: center;
    }

        .monthly-calendar .calendar-days .day {
            display: inline-block;
            text-align: center;
            margin: 1px;
            cursor: pointer;
            color: #fff;
            background: green;
            padding: 7px 0;
            width: 35px;
            height: 35px;
        }

            .monthly-calendar .calendar-days .day.selected {
                background: #fff;
                border: 0.1px solid green;
                color: green;
            }

            .monthly-calendar .calendar-days .day.past {
                text-decoration: line-through;
                cursor: default;
                background: #fd6c6c !important;
                pointer-events: none;
            }

    .monthly-calendar .cd-31 .day {
        margin: 1px 1.8px;
    }

    .monthly-calendar .cd-30 .day {
        margin: 1px 2.5px;
    }

    .monthly-calendar .cd-29 .day {
        margin: 1px 3.19px;
    }

    .monthly-calendar .cd-28 .day {
        margin: 1px 3.94px
    }


@media (max-width: 1367px) {

    .monthly-calendar .calendar-days .day {
        height: 30px;
        width: 30px;
        padding: 5px 0;
    }

    .monthly-calendar .cd-31 .day {
        margin: 1px 0.8px;
    }

    .monthly-calendar .cd-30 .day {
        margin: 1px 1.3px;
    }

    .monthly-calendar .cd-29 .day {
        margin: 1px 1.9px;
    }

    .monthly-calendar .cd-28 .day {
        margin: 1px 2.5px;
    }
}


@media all and (max-width: 480px) {
}