.calender {
    background: #18131c;
    min-height: 400px;
    border-radius: 15px;
    padding: 10px;
    opacity: 1;
}

    .calender .month {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        align-items: center;
        background: var(--main-color);
        color: #fff;
        border-radius: 10px 10px 0 0;
        text-align: center;
    }

        .calender .month i {
            cursor: pointer;
            font-size: var(--Xlarg-font-size);
            font-weight: 600;
        }

            .calender .month i.prev {
                cursor: no-drop;
            }

        .calender .month .date h1 {
            text-align: center;
            font-size: var(--larg-font-size);
            font-weight: bold;
            text-transform: uppercase;
            margin-top: 15px;
        }

        .calender .month .date p {
            font-size: var(--small-font-size);
        }

    .calender .weekdays {
        display: flex;
        justify-content: space-around;
        align-items: center;
        min-height: 50px;
        gap: 5px;
        color: white;
        font-size: var(--small-font-size);
    }

        .calender .weekdays > div {
            width: calc(100% / 7 - 2px);
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

    .calender .days {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
    }

        .calender .days > div {
            width: calc(100% / 7 - 2px);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            user-select: none;
            font-size: 16px;
            margin-bottom: 2px;
            transition: 0.5s;
            border-radius: 8px;
            padding: 10px;
            color: white;
            background-color: #8944b1;
        }

            .calender .days > div.today {
                color: white;
                font-size: 18px;
                border: 1px solid transparent;
                position: relative;
            }

                .calender .days > div.today::after {
                    content: "";
                    position: absolute;
                    width: 70%;
                    height: 2px;
                    left: calc(50% - 35%);
                    bottom: 5px;
                    background-color: #ffffff;
                    border-radius: 20px;
                    -webkit-border-radius: 20px;
                    -moz-border-radius: 20px;
                    -ms-border-radius: 20px;
                    -o-border-radius: 20px;
                }

            .calender .days > div.reserved-day {
                background-color: #ffbbbb !important;
                color:white !important;
                opacity: 0.3;
                cursor:not-allowed;
            }
            .calender .days > div.departure-day {
                background-color: #ffbbbb !important;
                color: white !important;
                opacity: 0.3;
                cursor: pointer;
            }

        .calender .days > div {
            background-color: transparent;
        }

            .calender .days > div.arrived-selected,
            .calender .days > div.leaved-selected,
            .calender .days > div.day-selected {
                background-color: var(--main-color) !important;
                color: #fff;
            }

            .calender .days > div.before-today,
            .calender .days > div.cancel {
                text-decoration: line-through;
            }

            .calender
            .days > div.day:not( .reserved-day, .cancel, .before-today, .day-selected, .leaved-selected, .arrived-selected ) {
                border: 1px solid #eeeeee00;
            }

            .calender
            .days > div.day:hover:not( .reserved-day, .cancel, .before-today, .day-selected, .leaved-selected, .arrived-selected ) {
                background: #bebebe;
                border: 1px solid #eee;
            }

.before-today {
    background-color: #391e4ee8 !important;
    cursor: default !important;
}

.prev-date,
.next-date {
    text-decoration: line-through;
    background-color: #3e294ee8 !important;
    color: #494949 !important;
    cursor: default !important;
}

.selected-reserve-dates {
    display: flex;
    max-width: 500px;
    width: 100%;
    direction: rtl;
    background: #fff;
    padding: 7px 15px 7px;
    position: relative;
    justify-content: center;
    border: 1px solid #e1e1e1;
    border-radius: 15px;
    cursor: pointer;
    margin: auto;
    margin-bottom: 20px;
}

    .selected-reserve-dates > div:not(.close-icon) {
        max-width: 200px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .selected-reserve-dates > div .title {
        font-size: 16px;
        opacity: 0.9;
    }

    .selected-reserve-dates > div .date {
        text-align: right;
        font-weight: 600;
    }

.buttonsContainer {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 15px auto 5px;
}

.close-icon {
    background: var(--main-color);
    color: #fff;
    padding: 10px 15px;
    border-radius: 7px;
    cursor: pointer;
    font-size: var(--main-font-size);
    text-align: center;
    width: 40%;
}

.buttonsContainer.show {
    display: flex;
}

.month img {
    width: 40px;
    cursor: pointer;
}

    .month img.prev {
        transform: rotate(180deg);
    }

@media (max-width: 991px) {
    .calender {
        min-height: 360px;
    }
}

@media (max-width: 767px) {
    .calender {
        min-height: 330px;
    }
}