: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: rgb(243, 211, 100);
}

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

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

.intro_fieldset {
    border-color: rgb(200, 200, 200);
    border-style: solid;
    border-width: 2px;
	border-radius: 10px;
    padding: 10px 20px;
    margin-bottom: 5px;
    margin-top: 5px;
    background-color: cornsilk;
    /* Fieldsets default to min-width: min-content, so a nowrap button inside
       forces them (and the page) wider than a phone screen. */
    min-width: 0;
}

/* Was inline on the template's discount block */
.discount-block {
    align-items: flex-start;
    margin-left: 40px;
    font-size: 1rem;
}

/* body is the whole page
Header, main body and footer are grid rows */
body {
    display: grid;
    grid-template-rows: auto;
    grid-gap: 10px;
}

/*
Header, footer and main area have 3 grid columns - left and right are margins
Central column of header is a grid with:
Two grid rows:
Top row with logo and phone number
Bottom row with menu  */

main {
    display: grid;
    grid-template-columns: minmax(10px, 100px) auto minmax(10px, 100px);
}

.customer-container h1, .customer-container h2, .customer-container h3, .customer-container h4 {
    /*line-height: 1;*/
    margin-bottom: 0;
}

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

/*New*/
/*------------------------------------------------------------------*/
/*Aider*/


.concert-section {
    margin-bottom: 3rem;
}

.concert-dates-collapse {
    margin-left: 1.5rem;
    border-left: 3px solid #eee;
    padding-left: 1rem;
}

.concert-date {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
}

.discount-notice {
    background-color: #f8f9fa;
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 5px;
    text-align: center;
}

.phone-number {
    font-size: 1.5rem;
    font-weight: bold;
    /*noinspection CssUnresolvedCustomProperty*/
    color: var(--src-primary);
    margin: 2rem 0;
}

.selection-header h1 {
    font-size: 1.75rem;
    font-weight: bold;
    margin-bottom: 0;
}

.selection-header h3 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
}

.section-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    /*noinspection CssUnresolvedCustomProperty*/
    color: var(--src-primary);
}

.select-seats-link {
    /*noinspection CssUnresolvedCustomProperty*/
    color: var(--src-primary);
    text-decoration: none;
    font-weight: bold;
}

.select-seats-link:hover {
    text-decoration: underline;
}

.review-order-btn {
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 0.75rem 2rem;
    font-size: 1.2rem;
    color: white !important;
}

.review-order-btn:hover {
    background-color: lightblue;
    color: black !important;
}

.accordion-header {
    cursor: pointer;
    /*background-color: #f1f1f1;*/
    background-color: #E9E9ED;
    /*padding: 10px;*/
    /*border: 1px solid #ddd;*/
    margin-bottom: 5px;
    border-radius: var(--cust-highlight-input-border-radius);
}
.accordion-header h2 {
    font-weight: bold;
}
.accordion-header:hover {
    background-color: #D0D0D7;
}

.accordion-content {
    display: none;
    padding: 10px;
    /*border: 1px solid #ddd;*/
}

.sub-accordion-header {
    cursor: pointer;
    background-color: #E9E9ED;
    font-size: large;
    margin-bottom: 3px;
}

.sub-accordion-content {
    display: none;
    padding: 8px;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.block {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 20px;
}

.block p {
    margin: 7px 0;
    font-size: 18px;
    float: left;
}

.or {
    font-size: 24px;
    font-weight: bold;
    padding: 10px;
    background-color: #ddd;
    border-radius: 50%;
    line-height: 1;
    text-align: center;
}
.flex-container, .col-flex-container {
    display: flex;
}
.flex-container {
    flex-direction: row;
    column-gap: 5px;
}
.col-flex-container {
    flex-direction: column;
    row-gap: 5px;
}
.flex-item {
    /*margin: 5px;*/
}
.special-event-subcontent button, .individual-concert-subcontent button {
    font-size: medium;
}
.complete-series-container {
    border-color: #AA6C39;
}
.complete-series-container .accordion-header, .complete-series-container button {
    background-color: #D0B198;
    border-radius: var(--cust-highlight-input-border-radius);
    line-height: 1;
}
.individual-series-container,
.individual-series-container .intro_fieldset {
    border-color: #407F7F;
    border-radius: var(--cust-highlight-input-border-radius);
}
.individual-series-container .accordion-header, .individual-series-container button,
.individual-series-container .sub-accordion-header {
    background-color: #93C0C0;
    border-radius: var(--cust-highlight-input-border-radius);
    font-weight: bold;
}
.special-event-container,
.special-event-container .intro_fieldset {
    border-color: #55AA55;
    border-radius: var(--cust-highlight-input-border-radius);
}
.special-event-container .accordion-header, .special-event-container button,
.special-event-container .sub-accordion-header {
    background-color: #AAC9AA;
    border-radius: var(--cust-highlight-input-border-radius);
    font-weight: bold;
}
#selections_container .intro_fieldset {
    padding: 8px 15px;
}
.accordion-content .intro_fieldset {

}

.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);
    text-decoration: none;
}

button span.primary {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: large;
    background-color: transparent;
    color: rgb(34, 34, 34);
    display: block;
    text-align: left;
    font-weight: bold;
}

button span.secondary {
    font-size: medium;
    display: block;
    text-align: left;
}

.customer-container a {
    color: inherit;
}

@media (max-width: 768px) {
    .phone-number {
        font-size: 1.3rem;
    }

    .selection-header h1 {
        font-size: 1.5rem;
    }

    .concert-title-btn {
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
    /* Let long labels wrap instead of forcing the fieldset wider than the
       screen, and span buttons/headers across the full fieldset width. */
    .border_hover_highlight {
        white-space: normal;
    }

    .accordion-header, .sub-accordion-header {
        display: block;
    }

    .accordion-content .flex-item,
    .accordion-content .event-block {
        width: 100%;
    }

    .accordion-content .event-block a {
        display: block;
    }

    button.border_hover_highlight {
        width: 100%;
    }

    .intro_fieldset {
        padding: 8px 10px;
    }

    .block {
        margin: 0;
    }

    .discount-block {
        margin-left: 0;
    }
}