body {
    --black-color: #2b2b2b;
    --grey-color: #555555;
    --white-color: #ffffff;
    --light-grey-color: #e5e5e5;
}

.homecalendar {
    border: solid 1px var(--black-color);
    background-color: var(--white-color);
    position: absolute;
    width: 50%;
    left: 25%;
    height: auto;
    z-index: 10;
    top: 13rem;
    padding: 0.5rem;
}

    .homecalendar.notpopup {
        position: unset;
        width: unset;
        height: unset;
        z-index: unset;
        top: unset;
        left: unset;
        margin-bottom: 1rem;
    }

    .homecalendar .monthtitle {
        text-align: center;
        font-weight: bold;
        margin-bottom: 0.2rem;
        margin-top: 0.2rem;
    }

    .homecalendar .column-block {
        margin: 0;
        border: solid 1px var(--grey-color);
        background-color: #dddddd;
    }

    .homecalendar .showcalendar {
        font-size: 1rem;
        text-align: right;
        border: solid 1px var(--grey-color);
        padding: 2px;
        margin-top: 0.5rem;
    }

        .homecalendar .showcalendar .calendarheader {
            background-color: var(--black-color) !important;
            color: var(--white-color) !important;
            font-weight: bold;
            text-align: center;
        }

        .homecalendar .showcalendar .calendardate {
            color: var(--black-color);
            padding-right: 0.4rem;
            cursor: pointer;
        }

            .homecalendar .showcalendar .calendardate.calendarselect {
                background-color: #435959;
                color: var(--white-color);
            }

            .homecalendar .showcalendar .calendardate:hover {
                background-color: var(--black-color);
                color: var(--white-color);
            }

                .homecalendar .showcalendar .calendardate.calendarselect.cantchange {
                    cursor: not-allowed;
                }

                    .homecalendar .showcalendar .calendardate.calendarselect.cantchange:hover {
                        background-color: var(--black-color);
                        color: var(--white-color);
                    }

            .homecalendar .showcalendar .calendardate.cantchange {
                cursor: not-allowed;
            }

                .homecalendar .showcalendar .calendardate.cantchange:hover {
                    background-color: #dddddd;
                    color: inherit;
                }

        .homecalendar .showcalendar .calendaroos {
            background-color: #eeeeee;
            color: #cccccc;
            padding-right: 0.2rem;
        }

        .homecalendar .showcalendar .calbetween {
            background-color: #435959;
            background: rgba(67, 89, 89, .5);
            color: var(--white-color);
            padding-right: 0.2rem;
            cursor: not-allowed;
        }

        .homecalendar .showcalendar .calendarblank {
            background-color: var(--grey-color);
        }

.availabilityselect {
    margin-top: 3rem;
    margin-bottom: 5rem;
}

    .availabilityselect select, .availabilityselect input {
        border-color: var(--black-color);
        color: var(--black-color);
        margin-bottom: 2rem;
    }

    .availabilityselect [type="button"] {
        margin: 0;
    }

    .availabilityselect [type="text"]:read-only {
        background-color: var(--white-color);
        cursor: pointer;
    }

        .availabilityselect [type="text"]:read-only::placeholder {
            color: var(--black-color);
        }

.touropmenu {
    padding-top: 3rem;
    padding-left: 5rem;
}

    .touropmenu label {
        font-size: 1.2rem;
    }

        .touropmenu label a {
            color: black;
        }

.bookingarea {
    background-color: var(--light-grey-color);
}

/*  Small   */
@media screen and (max-width: 39.9375em) {
    .homecalendar {
        width: 90%;
        left: 5%;
        padding: 0.3rem 0rem;
    }
}

/*  Medium  */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .homecalendar {
        width: 70%;
        left: 15%;
    }
}

/*  Large   */
@media screen and (min-width: 64em) {
    .homecalendar {
        width: 50%;
        left: 25%;
    }
}