/*
    This CSS file styles the calendars used to create reservations.
    If you edit this file, please add the desired selectors in alphabetical order to keep a well organized code structure.
    If you add CSS properties that use media queries for responsive-design, please add them at the bottom of the file.
*/

#calendar-ui {
    overflow: auto;
}

.calendar-wrapper {
    background-color: #f9f9f9;
    border: 1px solid #e5e5e5;
    display: inline-block;
    height: 465px;
    margin: 0 30px 0 0;
    padding: 20px;
    width: 445px;
    vertical-align: top;
}

input[readonly].selected {
    background-color: #fff;
}

.legend-state {
    width: 18px;
    height: 18px;
    margin: 0 5px 0 15px;
}

.legend-state-available {
    background-color: #cfed9a;
}

.legend-state-selected {
    background-color: #0e69ab;
}

.legend-state-unavailable {
    background-color: #EEADB0;
}

.legend-text {
    color: #292929;
    font-style: italic;
    font-size: 85%;
    font-weight: 400;
}

.reservation-wrapper {
    background-color: #f9f9f9;
    border: 1px solid #e5e5e5;
    display: inline-block;
    height: 465px;
    padding: 20px;
    width: 415px;
    vertical-align: top;
    overflow: auto;
}

.schedule-item {
    color: #3e464d;
    margin-bottom: 1px;
}

.schedule-item:hover {
    background-color: #0e69ab;
    color: #fff;
    cursor: pointer;
}

.schedule-item-selected {
    background-color: #0e69ab;
    color: #fff;
}

.schedule-title {
    font-family: Arial, Helvetica, sans-serif;
    color: #3e464d;
    font-size: 1em;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.schedule-wrapper {
    background-color: #f9f9f9;
    border: 1px solid #e5e5e5;
    display: inline-block;
    height: 465px;
    padding: 20px;
    width: 445px;
    vertical-align: top;
    overflow: auto;
}

td.ui-datepicker-other-month span.ui-state-default {
    opacity: 0.35;
    background-color: #d9d9d9;
    color: rgb(62, 70, 77);
}

td.unavailable-schedule span.ui-state-default {
    background-color: #d92027;
    color: #fff;
}

.ui-datepicker table {
    font-size: 14px;
}

.ui-state-default {
    width: 55px;
    height: 55px;
}

.ui-timepicker {
    box-sizing: content-box;
    display: block;
    height: 205px;
    list-style: none outside none;
    margin: 0;
    padding: 0 1px;
    text-align: center;
}

.ui-timepicker-container {
    position: absolute;
    overflow: hidden;
    box-sizing: border-box;
}

.ui-timepicker-corners,
.ui-timepicker-corners .ui-corner-all {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.ui-timepicker-hidden {
    display: none;
}

.ui-timepicker-no-scrollbar .ui-timepicker {
    border: 0;
}

.ui-timepicker-standard {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.1em;
    background-color: #fff;
    border: 1px solid #aaa;
    color: #222;
    margin: 0;
    padding: 2px;
}

.ui-timepicker-standard a {
    border: 1px solid transparent;
    color: #222;
    display: block;
    padding: 0.2em 0.4em;
    text-decoration: none;
}

.ui-timepicker-standard .ui-menu-item {
    margin: 0;
    padding: 0;
}

.ui-timepicker-standard .ui-state-hover {
    background-color: #dadada;
    border: 1px solid #999;
    font-weight: 400;
    color: #212121;
}

.ui-timepicker-viewport {
    box-sizing: content-box;
    display: block;
    height: 205px;
    margin: 0;
    padding: 0;
    overflow: auto;
    overflow-x: hidden;
}

/*
    This media query only works for the devices with a width less than 1399 pixels (extra large screens).
    Again, please add the desired selectors in alphabetical order to keep a well organized code structure.
*/

@media only screen and (max-width: 1399px) {
    .calendar-wrapper {
        display: block;
        margin: 0 auto;
    }

    .reservation-wrapper {
        display: block;
        margin: 0 auto;
    }

    .schedule-wrapper {
        display: block;
        margin: 0 auto;
    }
}

/*
    This media query only works for the devices with a width less than 575 pixels (smartphones, smartwatches, etc).
    Again, please add the desired selectors in alphabetical order to keep a well organized code structure.
*/

@media only screen and (max-width: 575px) {
    .calendar-wrapper {
        height: 100%;
        width: 100%;
        margin: 0;
    }

    .legend-state {
        width: 14px;
        height: 14px;
    }

    .legend-text {
        font-size: 60%;
        font-weight: 400;
    }

    .reservation-wrapper {
        height: 100%;
        width: 100%;
    }

    .schedule-wrapper {
        height: 100%;
        width: 100%;
    }

    .ui-state-default {
        width: 100%;
        height: 100%;
    }
}