.schedule-item {
    margin: 0 0 40px;
    display: flex;
    flex-direction: column;
}

.schedule-heading { margin: 0 0 20px }

.schedule-heading-link { color: #333 }

.schedule-heading-link:hover { color: #000 }

.schedule-head {
    display: flex;
    margin: 0 0 10px 80px;
}

.schedule-head-item {
    font-size: 12px;
    width: 70px;
    margin: 0 3px;
    text-align: center;
}

.schedule-head-item-weekday {
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 3px;
}

.schedule-head-item-weekday-weekend { color: #DBBA34 }

.schedule-head-item-day {
    display: none;
    font-size: 15px;
}

.schedule-content { display: flex }

.schedule-content-date { padding: 0 3px }

.schedule-content-time,
.schedule-content-label,
.schedule-content-time-empty {
    width: 70px;
    height: 32px;
    line-height: 32px;
    margin: 0 0 6px;
    text-align: center;
    font-size: 14px;
}

.schedule-content-time {
    border-radius: 7px;
    cursor: pointer;
}

.schedule-content-time-lock {
    background-color: #e3e3e3;
    color: silver;
    cursor: not-allowed;
}

.schedule-content-time-oldest {
    opacity: .4;
    cursor: not-allowed;
}

.schedule-content-label {
    text-align: right;
    margin: 0 6px 6px 0;
}

.schedule-legend {
    margin: 10px 3px 0 86px;
    border-top: 1px solid silver;
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
}

.schedule-legend-item {
    display: flex;
    align-items: center;
}

.schedule-legend-color {
    width: 40px;
    height: 20px;
    border-radius: 5px;
    margin: 0 10px;
}

.schedule-legend-color { background-color: #e3e3e3 }

.schedule-legend-price { font-size: 12px }

.schedule-switcher {
    border-bottom: 1px solid #d5d5d5;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 40px;
    padding: 0 0 10px;
}

.schedule-switcher-control {
    width: 45px;
    height: 45px;
    display: block;
    background-repeat: no-repeat;
}

.schedule-switcher-prev { background-image: url(../../img/quest/arrow-prev.svg) }
.schedule-switcher-next { background-image: url(../../img/quest/arrow-next.svg) }

.schedule-switcher-heading {
    font-size: 16px;
    padding: 0 30px;
    text-align: center;
}

@media (max-width: 900px) {
    .schedule-item { align-items: center }
}

@media (max-width: 800px) {
    .schedule-head-item,
    .schedule-content-time-empty,
    .schedule-content-time,
    .schedule-content-label { width: 65px }
}

@media (max-width: 700px) {
    .schedule-head { margin: 0 0 0 34px }

    .schedule-head-item,
    .schedule-content-time-empty,
    .schedule-content-time,
    .schedule-content-label {
        width: 30px;
        height: 36px;
        line-height: 36px;
        margin: 0 0 4px;
        font-size: 11px;
    }

    .schedule-head-item {
        margin: 0 2px 2px;
        font-size: 12px;
        height: auto;
        line-height: normal;
    }

    .schedule-content-date { padding: 0 2px }

    .schedule-legend {
        flex-direction: column;
        margin: 10px 0 0;
    }

    .schedule-legend-item { margin: 10px 0 0 }

    .schedule-legend-item:first-child { margin: 0 }

    .schedule-legend-color { margin: 0 10px 0 0 }

    .schedule-head-item-date { display: none }

    .schedule-head-item-day { display: block }

    .schedule-head-item-weekday { font-size: 12px }

    .schedule-switcher { margin: 0 0 10px }

    .schedule-switcher-heading { padding: 0 10px }
}

/* ########## start MODAL ########## */

.schedule-modal {
    width: 100%;
    height: 100%;
    background-color: rgba(190,190,190,.8);
    position: fixed;
    top:0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.schedule-modal-content {
    padding: 40px;
    background-color: #fff;
    border: 3px solid #F9BF3B;
    border-left: none;
    border-right: none;
    width: 450px;
}

.schedule-modal-field {
    width: 100%;
    border: 1px solid #d5d5d5;
    height: 35px;
    padding: 0 10px;
    display: block;
    box-sizing: border-box;
}

.schedule-modal-field-text {
    height: 70px;
    padding: 7px 10px;
    resize: none;
}

.schedule-modal-submit {
    height: 35px;
    padding: 0 20px;
    background-color: #F9BF3B;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.schedule-modal-submit:hover { background-color: #ffca5a }

.schedule-modal-submit-submitted {
    background-image: repeating-linear-gradient(45deg, #f1f1f1, #f1f1f1 10px, #ffca5a 10px, #ffca5a 20px);
    background-image: -webkit-repeating-linear-gradient(45deg, #f1f1f1, #f1f1f1 10px, #ffca5a 10px, #ffca5a 20px);
    background-image: -moz-repeating-linear-gradient(45deg, #f1f1f1, #f1f1f1 10px, #ffca5a 10px, #ffca5a 20px);
    animation: waiting 16s linear infinite;
    background-size: 400%;
}

@keyframes waiting {
    0% { background-position: 0 100% }
    100% { background-position: 100% 0 }
}

.schedule-modal-group { margin: 0 0 5px }

.schedule-modal-consent { font-size: 12px }

.schedule-modal-checkbox { display: none }

.schedule-modal-label {
    font-size: 14px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: flex-start;
}

.schedule-modal-label:before {
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid #F9BF3B;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 0;
    flex-shrink: 0;
}

.schedule-modal-checkbox:checked + .schedule-modal-label:after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    background-color: #F9BF3B;
}

.schedule-modal-message {
    font-size: 14px;
    color: #c0402a;
}

.schedule-modal-head {
    border-bottom: 1px solid #d5d5d5;
    font-size: 14px;
    background-color: #f5f5f5;
    padding: 5px;
}

@media (max-width: 700px) {
    .schedule-modal-content {
        padding: 20px;
        width: auto;
    }
}

/* ########## end MODAL ########## */



/* ########## start LSD MODAL ########## */

.lsd-modal {
    width: 100%;
    height: 100%;
    background-color: rgba(190,190,190,.8);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.lsd-modal-content {
    background-color: #fff;
    border: 3px solid #F9BF3B;
    border-left: none;
    border-right: none;
    width: 600px;
}

.lsd-modal-inner { padding: 0 40px 40px }

.lsd-modal-control {
    display: flex;
    justify-content: space-between;
}

.lsd-modal-tab {
    width: 50%;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    background-color: #F9BF3B;
    font-size: 14px;
}

.lsd-modal-tab-active:hover {
    background-color: #fff;
    cursor: not-allowed;
}

.lsd-modal-tab-active { background-color: #fff }

.lsd-modal-head {
    border-bottom: 1px solid #d5d5d5;
    font-size: 14px;
    background-color: #f5f5f5;
    padding: 5px;
    margin: 10px 0 0;
}

.lsd-modal-heading {
    font-weight: normal;
    margin: 20px 0 10px;
}

.lsd-modal-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 0;
}

.lsd-modal-button {
    height: 35px;
    padding: 0 20px;
    background-color: #F9BF3B;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.lsd-modal-button:disabled {
    background-color: #dadada;
    cursor: not-allowed;
}

.lsd-modal-button-submit { margin: 10px 0 0 }

.lsd-modal-wrap-consent {
    margin: 10px 0 0;
    display: block;
}

.lsd-modal-consent { font-size: 12px }

.lsd-modal-select,
.lsd-modal-field {
    border: 1px solid #dadada;
    height: 35px;
    background-color: #fff;
    padding: 0 0 0 10px;
    margin: 10px 10px 0 0;
}

.lsd-modal-select:focus,
.lsd-modal-field:focus { border-color: #F9BF3B }

.lsd-modal-field { padding: 0 10px }

.lsd-modal-field-players-count { width: 185px }

.lsd-modal-field-text {
    height: 70px;
    padding: 7px 10px;
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
}

.lsd-modal-field-form { width: 100% }

.lsd-modal-price { font-size: 14px }

.lsd-modal-price-value {
    font-weight: bold;
    font-size: 16px;
}

.lsd-modal-wrap-message { min-height: 35px }

.lsd-modal-message {
    font-size: 14px;
    color: #c0402a;
    padding: 9px 0 0
}

@media (max-width: 500px) {

    .lsd-modal-heading { font-size: 16px }

    .lsd-modal-price { font-size: 12px }

}

/* ########## end LSD MODAL ########## */
