#content .rightSide .calendarBox .calendar {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: #fff;
    /*border-radius: 10px;*/
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);*/

}

    #content .rightSide .calendarBox .calendar .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }

        #content .rightSide .calendarBox .calendar .calendar-header .monthYear {
            text-align: center;
            font-weight: 600;
            font-family: Arial;
            width: 150px;
        }

        #content .rightSide .calendarBox .calendar .calendar-header button {
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            width: 40px;
            height: 40px;
            /*box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);*/
        }

    #content .rightSide .calendarBox .calendar .days {
        /*padding:10px;*/
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }

    #content .rightSide .calendarBox .calendar .day {
        text-align: center;
        padding: 5px;
        color: #999FA6;
        font-weight: 100;
        font-family: "FiraGO";
    }

    #content .rightSide .calendarBox .calendar .dates {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 5px;
    }

    #content .rightSide .calendarBox .calendar .date {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 10px;
        margin: auto;
        cursor: pointer;
        font-weight: 100;
        border-radius: 5px;
        width: 34px;
        height: 34px;
        transition: 0.2s;
        font-family: Arial;
    }

        #content .rightSide .calendarBox .calendar .date:hover,
        #content .rightSide .calendarBox .calendar .date.active {
            background: #ff0000;
            color: #fff;
        }

        #content .rightSide .calendarBox .calendar .date.inactive {
            color: #d2d2d2;
        }

.date.inactive:hover {
    color: #fff;
}

#content .rightSide .calendarBox .calendar .calendar-event {
    margin-top: 15px;
}

.calendar .event-item {
    display: flex;
    align-items: center;
    border: 1px solid #e57373;
    border-radius: 12px;
    background: #FFF7F8;
    padding:10px;
}

/* LEFT SIDE */
.calendar .event-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #d32f2f;
    min-width: 80px;
    font-family: "FiraGo"!important;
    color: #CB0C24!important;
}

.calendar .event-day {
    font-size: 20px;
    /*font-weight: bold;*/
    font-family: "FiraGo";
    text-transform: uppercase;
    font-feature-settings: "case" on;
   
}

.calendar .event-month {
    font-size: 20px;
    font-family: "FiraGo";
    text-transform: uppercase;
    font-feature-settings: "case" on;
}

/* DIVIDER */
.calendar .event-divider {
    width: 1px;
    height: 60px; 
    background: #e57373;
    margin: 0 20px;
}


.calendar .event-description {
    flex: 1;
    font-size: 16px;
    font-family: Arial;
    text-align: center;
    color: #444;
}
.calendar .event-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #d32f2f;
    min-width: 80px;
    font-family: "FiraGo" !important;
    color: #CB0C24 !important;
}