/* =========================================================
   OUTBREAK RESERVATIONS
   ========================================================= */

.reservations-outbreak {
    width: 100%;
}


/* =========================================================
   RESERVATION PANEL
   ========================================================= */

.reservations-panel {
    margin-bottom: 18px;

    background: #121212;
    border: 1px solid var(--outbreak-line);

    overflow: hidden;
}


/* =========================================================
   PANEL HEADER
   ========================================================= */

.reservations-panel-header {
    padding: 13px 16px;

    background: #171717;
    border-bottom: 1px solid #303030;

    color: #e8e3da;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.reservations-panel-header span {
    margin-right: 8px;

    color: var(--outbreak-red);
}


/* =========================================================
   INTRO TEXT
   ========================================================= */

.reservations-desc {
    padding: 20px 24px;

    background: #121212;

    color: #88847d;

    font-size: 12px;
    line-height: 1.7;

    text-align: justify;
}


/* =========================================================
   FORM
   ========================================================= */

.reservations-form-content {
    padding: 22px 24px;

    background: #121212;
}

.reservations_formularPage form {
    width: 100%;
    max-width: 650px;

    margin: 0 auto;
}


/* =========================================================
   FORM LABEL
   ========================================================= */

.reservations_formular-label {
    display: block;

    width: 100%;
    margin-bottom: 6px;

    color: #d8d2c5;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* =========================================================
   FORM ROW
   ========================================================= */

.reservations_formular-input {
    display: flex;

    flex-wrap: nowrap;

    gap: 10px;

    justify-content: space-between;

    margin-bottom: 12px;
}


/* =========================================================
   FORM FIELDS
   ========================================================= */

.reservations_formular-select,
.reservations_formular-select select,
.reservations_formular-field,
.reservations_formular-field input.textbox,
.reservations_formular-field .select2-container {
    width: 100%;

    box-sizing: border-box;
}


/* =========================================================
   INPUTS
   ========================================================= */

.reservations_formular-field input.textbox,
.reservations_formular-field select,
.reservations_formular-select select {

    padding: 10px 11px;

    background: #0b0b0b;

    border: 1px solid #303030;

    border-radius: 0;

    color: #ddd;

    font-family: inherit;
    font-size: 11px;

    outline: none;

    transition: border-color .2s;
}

.reservations_formular-field input.textbox:focus,
.reservations_formular-field select:focus,
.reservations_formular-select select:focus {
    border-color: var(--outbreak-red);
}


/* =========================================================
   RESERVATION LIST
   ========================================================= */

.reservations_page-container {
    padding: 18px 20px;

    background: #121212;

    color: #aaa;
}


/* =========================================================
   RESERVATION ENTRIES
   ========================================================= */

.reservations-reservation {
    width: 100%;
}

.reservations_entry {
    padding: 10px 0;

    border-bottom: 1px solid #292929;

    color: #aaa;

    font-size: 11px;
}

.reservations_entry:last-child {
    border-bottom: 0;
}


/* =========================================================
   GENDER
   ========================================================= */

.reservationsSingle,
.reservations-genderflex {
    display: flex;

    flex-wrap: nowrap;

    justify-content: flex-start;

    gap: 8px;
}

.reservations-genderline {
    padding: 5px 8px;

    color: var(--outbreak-red);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================================
   RESERVATION TYPES
   ========================================================= */

.reservations_types {
    margin-bottom: 12px;
}


/* =========================================================
   BLOCKED RESERVATIONS
   ========================================================= */

.reservations_blocked {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto 20px;

    box-sizing: border-box;

    background: #121212;

    border: 1px solid var(--outbreak-line);

    color: #88847d;

    font-size: 11px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .reservations-form-content {
        padding: 18px;
    }

    .reservations-desc {
        padding: 18px;
    }

    .reservations_page-container {
        padding: 15px;
    }

    .reservations_formularPage form {
        width: 100%;
    }

    .reservations_formular-input {
        flex-direction: column;
        gap: 8px;
    }

    .reservationsSingle,
    .reservations-genderflex {
        flex-wrap: wrap;
    }

}

/* =========================================================
   RESERVATION TYPES
   ========================================================= */

.reservations-types {
    width: 100%;
}

.reservations-types-header {
    padding: 13px 16px;

    background: #171717;

    border-bottom: 1px solid #303030;

    color: #e8e3da;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================================
   GENDER SECTION
   ========================================================= */

.reservations-reservation {
    background: #111;

    border-bottom: 1px solid #292929;
}

.reservations-reservation:last-child {
    border-bottom: 0;
}

.reservations-genderline {
    padding: 9px 14px;

    background: #151515;

    border-bottom: 1px solid #292929;

    color: var(--outbreak-red);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* =========================================================
   RESERVATION USERS
   ========================================================= */

.reservations-users {
    padding: 10px 14px;
}


/* =========================================================
   GROUP
   ========================================================= */

.reservations-subline {
    padding: 8px 14px;

    background: #171717;

    border-top: 1px solid #292929;
    border-bottom: 1px solid #292929;

    color: #aaa;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


/* =========================================================
   GROUP CONTENT
   ========================================================= */

.reservations-subline + .reservationsSingle,
.reservations-subline + .reservations-genderflex {
    padding: 10px 14px;
}

/* =========================================================
   RESERVATION TABS
   ========================================================= */

.reservationTab {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 14px;
}


/* =========================================================
   TAB BUTTON
   ========================================================= */

.reservationTablinks {
    padding: 9px 13px;

    background: #171717;

    border: 1px solid #303030;

    color: #77736c;

    cursor: pointer;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition: .2s;
}

.reservationTablinks:hover {
    border-color: var(--outbreak-pink);
    color: var(--outbreak-pink);
}

.reservationTablinks.active {
    background: #1b1b1b;

    border-color: var(--outbreak-red);

    color: var(--outbreak-red);
}


/* =========================================================
   TAB CONTENT
   ========================================================= */

.reservationTabcontent {
    width: 100%;

    background: #121212;

    border: 1px solid var(--outbreak-line);

    box-sizing: border-box;
}


/* =========================================================
   TAB HEADER
   ========================================================= */

.reservations-tab-header {
    padding: 13px 16px;

    background: #171717;

    border-bottom: 1px solid #303030;

    color: #e8e3da;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .reservationTab {
        display: grid;
        grid-template-columns: 1fr;
    }

    .reservationTablinks {
        text-align: center;
    }

}

/* =========================================================
   RESERVATION TAB DISPLAY
   ========================================================= */

.reservationTabcontent {
    display: none;
}

.reservationTabcontent.active {
    display: block;
}