.calendar-container h2 {
    font-size: 3em;
    font-weight: normal;
    color: #F1F1FF;
}

.selected {
    background-color: rgba(30, 30, 30, 0.5);;
}

.table {
    background-color: rgba(5, 5, 5, 0.5)
}

table th {
    color: #F1F1FF;
}

div.calendar tr.week > td,
div.calendar tr.week > td.other-month {
    color: #F1F1FF;
}

div.calendar tr.week:hover > td,
div.calendar tr.week:hover > td.other-month {
    background-color: lightgrey !important;
    color: black;
}

div.calendar tr.week td.other-month {
    background-color: rgba(0, 0, 0, .1);
}

div.calendar .btn {
    --phoenix-btn-bg: transparent;
    border: 0;
}

.year-selector h2 {
    font-size: 3em;
    font-weight: normal;
    color: #F1F1FF;
}


.modal {
    background: linear-gradient(135deg, rgba(0, 155, 206, 0.8), rgba(0, 155, 206, 0.8), rgba(246, 160, 53, 0.5)), url(../src/img/QBG.png) no-repeat;
    color: rgba(0, 155, 206, 0.8);
}

#booking-modal .modal-content {
    background: linear-gradient(135deg, rgba(0, 155, 206, 0.6), rgba(0, 155, 206, 0.6), rgba(255, 255, 255, 0.3));
    border: 2px solid rgba(250, 250, 250, 0.2);
}

form label {
    color: #F1F1FF;
    margin-top: 2em;
}