:root {
    --cust-highlight-input-border-width: 5px;
    --cust-highlight-input-border-color: darkgreen;
    --cust-highlight-input-border-style: solid;
    --cust-highlight-input-border-radius: 10px;
    --cust-highlight-input-border-cursor: pointer;

    --cust-highlight-input-border:
        var(--cust-highlight-input-border-width)
        var(--cust-highlight-input-border-style)
        var(--cust-highlight-input-border-color);

    --cust-highlight-small-border: 5px solid darkgreen;
    --cust-highlight-small-border-radius: 8px;

    --src-gold: rgba(227, 170, 56, 1);
    --sr-maroon-background-color: #8b0000;
    /*--customer-spec-event-background-color: rgba(227, 170, 56, 1);*/
    --customer-spec-event-background-color: rgb(243, 211, 100);
}

ul {
    padding-left: 0;
    margin-top: 0;
}

/* covers labels for regular series and optional which start with opt_  */
label[for^=id_series_]:hover, label[for^=id_seating_tier_]:hover,
label[for^=id_ss_]:hover,
label[for^=id_opt-series_]:hover, label[for^=id_opt-seating_tier_]:hover,
label[for^=id_opt-ss_]:hover,
label[for^=id_donate]:hover {
    color: white;
    background: cadetblue;
    border-color: #aaab9c #fff #fff #ccc;
}
li>label>input.indent_series {
    margin-left: 2em;
}

a.toggle_link {
    font-size: 150%;
}
.borderless_table {
    border: none;
}
.receipt_table {
    width: auto;
}
.number_cell {
    text-align: right;
}
.number_note_cell {
    text-align: left;
}

.donation_levels>.donate_level {
    font-size: medium;
}

.donation_levels>.donate_level:hover {
    cursor: pointer;
}

/* ------------- for customer2 (starting 2023 season) ----------------------*/
ul.series_selection_list {
    list-style: none;
    padding-left: 0.2em;
}

ul.series_selection_list li, div#delivery_radio {
    display: grid;
    grid-template-columns: 0fr 1fr;
    grid-gap: 10px;
}

div#delivery_radio {
    grid-template-columns: 0fr 0fr 0fr;
}

div#delivery_radio label, #donation_level_radios label {
    display: inline-flex;
    align-items: center;
}

ul.series_selection_list label, div#delivery_radio label, #donation_level_radios label {
    display: grid;
    grid-template-columns: 35px 1fr;
    font-size: large;
    width: max-content;
    /*margin-top: 3px;*/
    /*margin-bottom: 3px;*/
}

/*@media (max-width: 600px) {*/
/*    ul.series_selection_list label {*/
/*        display: grid;*/
/*        grid-template-columns: 40px 290px;*/
/*        font-size: large;*/
/*        width: max-content;*/
/*    }*/
/*}*/

@media (max-width: 375px) {
@supports(display: grid) {
    div#main {
        grid-template-columns: minmax(0, 5px) auto minmax(0, 5px);
    }
}
}

fieldset.customer_special_event {
    background-color: var(--customer-spec-event-background-color);
}

.border_hover_highlight {
    padding: 3px 15px 5px 10px;
    border: var(--cust-highlight-input-border);
    border-color: transparent;
    display: inline-block;
    white-space: nowrap;
}

select.border_hover_highlight {
    padding: 5px 15px 5px 0;
    border: var(--cust-highlight-input-border);
    border-color: white;
    outline: black solid 1px;
    box-shadow: none;
}

/*ul.series_selection_list label:hover {*/
.border_hover_highlight:hover, form#cust_intro_form select:hover {
    border: var(--cust-highlight-input-border);
    border-radius: var(--cust-highlight-input-border-radius);
    cursor: var(--cust-highlight-input-border-cursor);
}

ul.series_selection_list input {
    grid-row: 1 / 3;
    list-style: none;
    width: 25px;
    height: 25px;
}

div#delivery_radio input, #donation_level_radios input{
    list-style: none;
    height: 25px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 5px;
}

.secondary {
    font-size: medium;
    font-weight: normal;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

div.content_wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-gap: 20px;
    /*margin-top: 5px;*/
    /*margin-bottom: 5px;*/
}

div.content_wrapper div.flex_wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* Item in a flex layout in 3 columns */
.flex_main_1_seat_map {
    flex: 1 1 300px;
}

.flex_main_1 {
    flex: 1;
}

.flex_main_2 {
    flex: 1 1 200px;  /* grow shrink basis */
}

.flex_main_3 {
    flex: 0 0 275px;  /* grow shrink basis */
}

.seat_select_column_header {
    /*margin: 5px 0;*/
    margin: 0 0;
    /*margin-left: 10px;*/
}

select#party_count {
    margin-top: 5px;
    margin-left: 10px;
    text-align-last: right;
}

h2.customer_note {
    font-size: large;
}

h2.customer_note {
    margin-top: 15px;
    margin-left: 10px;
}

button.go_next_view {
    /*margin-top: 10px;*/
    font-size: x-large;
}

button.go_next_view:enabled {
    cursor: pointer;
}

button.enlarge_on_enabled:enabled {
    transform: scale(1.2);
}

button.go_next_view:hover:enabled {
    cursor: pointer;
}

button.go_next_view.enlarge_on_enabled:hover:enabled {
    cursor: pointer;
    transform: scale(1.3)
}

/*button.enlarge_on_hover:first-of-type {*/
/*    margin-top: 10px;*/
/*}*/

.enlarge_on_hover {
    margin: 5px 0;
}

.enlarge_on_hover:hover:enabled {
    transform: scale(1.1);
}

/*button.delete {*/
/*    margin-left: 10px;*/
/*}*/

button:disabled {
    color: #AAA;
}

div.submit_button_wrapper {
    display: grid;
    /*grid-template-columns: 1fr 200px;*/
    grid-template-columns: auto 1fr;
}

div.submit_button_wrapper button {
    margin-top: 5px;
    margin-bottom: 5px;
    width: max-content;
}

div.stacked_button_wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
}

div.stacked_button_wrapper .stacked_buttons {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: 10px;
}

#reservations_wrapper {
    display: grid;
    padding: 5px 7px 5px 7px;
    border-width: 1px;
    border-color: black;
    border-style: solid;
    border-radius: 3px;
    margin-top: 0;
}

@media (min-width: 875px) {
    #reservations_wrapper {
    /*margin-top: 16px;*/
    margin-top: 5px;
    }
}

#reservations_wrapper ul {
    margin-top: 7px;
}

#reservations_list {
    list-style: none;
}

#cart_container {
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 10px;
    width: fit-content;
    height: fit-content;
}

.cart_item {
    display: grid;
    grid-template-columns:  1fr 7rem 100px;
    grid-column-gap: 20px;
}

.cust_order_item {
    display: grid;
    /*grid-template-columns:  1fr 125px 125px 85px;*/
    grid-template-columns:  1fr 125px 125px 85px;
    grid-column-gap: 10px;
    align-items: center;
}

.flex_right {
    display: flex;
    justify-content: flex-end;
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}

.no-dialog-title .ui-dialog-titlebar {
    display:none
}

.hidden, button.hidden {
    display: none;
}

button.inline {
    display: inline;
}

.seat_in_cart {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column-gap: 10px;
}

.ui-dialog .ui-dialog-buttonpane {
    padding: 0;
}

div.right_column button, div.right_column p {
    float: right;
}

div.seat_in_cart {
    border-color: lightgray;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    padding: 10px;
}

ul.cust_order_list {
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 10px;
    list-style: none;
    /*padding-left: 0.2em;*/
}

/*.cc_info_wrapper {*/
/*    width: 16rem;*/
/*}*/

.cc_info_wrapper input {
    font-size: x-large;
}

.cc_info_wrapper span {
    font-size: large;
    font-weight: bold;
}

#donation_rows {
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 5px;
}

#donation_level_radios li {
    display: inline-flex;
    margin-bottom: 0;
    margin-top: 0;
}

.border_hover_highlight_small {
    /*padding: 5px 6px 5px 0;*/
    padding-right: 6px;
    border: var(--cust-highlight-input-border);
    border-color: white;
}

.border_hover_highlight_small:hover {
    border: var(--cust-highlight-small-border);
    border-radius: var(--cust-highlight-small-border-radius);
    cursor: var(--cust-highlight-input-border-cursor);
}

#ccnumber {
    width: 16rem;
}

#ccexp {
    width: 6rem;
}

#cvv {
    width: 6rem;
}

.section.hidden {
    display: none;
}

.section {
    display: grid;
    grid-template-rows: auto;
}

#receipt_text {
    white-space: pre-line;
    font-size: large;
}

div#seat_map_title {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-gap: 10px;
    margin-bottom: 0;
}

div#seat_map_title button {
    font-size: large;
}

.purchase_terms {
    font-size: large;
    margin-bottom: 0;
}


label#agree_label {
    width: fit-content;
    margin: 5px 0px;
}

label#agree_label:hover {
    background-color: var(--src-gold);
    cursor: pointer;
}

input[type="button"].enlarge_on_hover:hover:enabled,
input[type="submit"].enlarge_on_hover:hover:enabled {
    transform: scale(1.1);
}

input[type="button"].go_next_view,
input[type="submit"].go_next_view {
    margin-top: 10px;
    font-size: large;
}

input[type="button"].go_next_view:enabled,
input[type="submit"].go_next_view:enabled {
    cursor: pointer;
}

.blink {
    /*animation: blinker 0.5s linear infinite;*/
    animation: blinker 1.0s step-start infinite;
    color: red;
    font-family: sans-serif;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.tour-backdrop {
    background-color: #777;
}

.customer_button {
    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-radius: var(--cust-highlight-input-border-radius);
    font-size: x-large;
}

/* tour-bootstrap  */
.btn {
    transition: none;
    border: 1px solid black;
}

.popover {
    max-width: 330px;
    font-size: x-large;
    line-height: 1;
}

.popover[class*="tour-"] .popover-navigation button[data-role='end'] {
    float: none;
}

.popover-navigation {
    line-height: 1.2;
}

/* Only offer step-by-step guidance if display is large enough */
@media (max-width: 1100px) {
    #step_by_step_button {
        display: none;
    }
}

.error_msg {
    color: red;
    font-weight: bold;
}

.more-indicator {
    font-size: medium;
    position: fixed;
    bottom: 10px;  /* Distance from the bottom of the window */
    right: 10px;  /* Distance from the right side of the window. You can adjust or remove this as needed. */
    background-color: var(--sr-maroon-background-color);
    /*background-color: rgba(160,0,0,0.7); !* semi-transparent black background for better visibility *!*/
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    display: none; /* Hidden by default. We'll use JavaScript to show it when necessary. */
}

@keyframes jiggle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
}

.jiggle {
  display: inline-block; /* Allow transform to work */
  animation: jiggle 0.5s ease infinite; /* Adjust timing as needed */
}

h3.spec_event_offer {
    color: var(--sr-maroon-background-color);
}