:root {
    --tbl-shows-h-background: rgba(255, 255, 255, .75);
    --tbl-shows-grad-background: linear-gradient(90deg, var(--tbl-shows-h-background) 0%, var(--tbl-shows-h-background) 32%, rgba(255, 255, 255, 0) 100%);
}

.shows-cnt-root {
    max-width: 64rem;
    min-width: 52rem;
    /* reset for modern browser */
    min-width: calc(1rem - 1rem);
}

.header-shows {
    background: rgba(255, 255, 255, .84);
    padding: .375rem 0;
    box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.5);
    min-width: 52rem;
    min-width: calc(1rem - 1rem);
}

.header-shows .root-cnt {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-shows-logo {
    height: 2rem;
    width: auto;
    fill: #333;
}

.shows-nav {
    color: #a3a3a3;
    font-size: 92%;
}

.shows-nav-link {
    margin-left: 1rem;
    padding-left: 1rem;
    display: inline-block;
    border-left: 2px solid var(--tbl-accent-color);
}

.shows-nav-link:hover {
    color: var(--tbl-accent-color-dark);
    text-decoration: underline;
}

main.shows-cnt-root {
    position: relative;
}

main.shows-cnt-root::after {
    content: "";
    display: block;
    float: none;
    clear: both;
}

.shows-article,
.show-rules-main {
    width: 50%;
    max-width: calc(100% - 27rem);
    float: right;
    clear: right;
}

.shows-thank-you .shows-article,
.shows-thank-you .show-rules-main {
    width: 55%;
    max-width: none;
}

.shows-form-wrap,
.shows-image,
.show-rules-form {
    /* only modern browser */
    min-width: calc(27rem - 1rem);
}

.shows-thank-you .shows-form-wrap,
.shows-thank-you .shows-image,
.shows-thank-you .show-rules-form {
    min-width: 0;
}

.shows-h1 {
    margin: 2rem 0 1rem -5rem;
    font-size: 195%;
    padding: 1.625rem 1rem 1.625rem 5rem;
    background: var(--tbl-shows-h-background);
    background: var(--tbl-shows-grad-background);
}

.shows-h1-span {
    display: block;
    font-size: 70%;
    font-weight: normal;
}

.shows-h1-span2 {
    display: block;
    font-size: 60%;
    font-style: italic;
    font-weight: normal;
    margin-top: .5rem;
}

.shows-image {
    position: absolute;
    display: block;
    top: 1rem;
    left: 1rem;
    width: 45.4%;
    /* percentage must be the same as .shows-form-wrap and .show-rules-form */
    width: calc(47% - 1rem);
    box-shadow: 2px 2px 4px 0 rgba(50, 50, 50, 0.75);
}

.shows-form-wrap,
.show-rules-form {
    margin-top: 1rem;
    /* percentage must be the same as width: calc(%...) in .shows-image */
    width: 47%;
}


.shows-thank-you .shows-image {
    width: 40.2%;
    width: calc(42% - 1rem);
}

.shows-h2 {
    margin: 1.375rem 0;
    font-size: 125%;
    border-bottom: 1px dotted #333;
    padding-bottom: 1.375rem;
}

.shows-h2-span {
    display: block;
}

.shows-location {
    position: relative;
    padding-left: 1.75rem;
    margin: 1.5em 0;
}

.shows-location::before {
    content: '';
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xMiAyYTYuNSA2LjUgMCAwIDAtNi41IDYuNWMtMC4wMTU2IDIuNTEgMi4zMSA1Ljg4IDYuNTQgMTMuNSA0LjE3LTcuNyA2LjQ4LTExIDYuNDYtMTMuNWE2LjUgNi41IDAgMCAwLTYuNS02LjV6bTAgMy41YTMgMyAwIDAgMSAzIDMgMyAzIDAgMCAxLTMgMyAzIDMgMCAwIDEtMy0zIDMgMyAwIDAgMSAzLTN6IiBmaWxsPSJub25lIiBzdHJva2U9IiM0MjdjYTYiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==') no-repeat;
    background-size: 1.25rem 1.25rem;
    position: absolute;
    left: 0;
    top: .125rem;
}

.shows-location-venue {
    display: block;
    font-weight: bold;
}

.shows-location-map {
    font-size: 98%;
    font-weight: bold;
}

.schedule-header {
    padding: .5rem .75rem;
    font-size: 110%;
    background: var(--tbl-shows-h-background);
    background: var(--tbl-shows-grad-background);
    margin-bottom: 0;
    position: relative;
}

.shows-share-fb,
.shows-share-x {
    position: absolute;
    top: 50%;
    margin-top: -1.125rem;
    display: block;
}

.shows-share-fb {
    right: 3.25rem;
}

.shows-share-x {
    right: .5rem;
}


.shows-share-fb-icon,
.shows-share-x-icon {
    width: 2.25rem;
    height: 2.25rem;
}

.shows-share-fb-icon {
    fill: #0866ff;
}

.shows-share-x-icon {
    fill: #000;
}

.schedule-list {
    padding: 0;
    margin: 0 0 1.5rem;
    list-style: none;
}

.schedule-item {
    display: block;
    position: relative;
    border-bottom: 1px dotted gray;
    padding: .5rem 0 .625rem .5rem;
    margin-left: 1.25rem;
}

.schedule-item::before {
    content: "";
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im02IDJ2MmgtMWMtMC41NSAwLTEuMDIgMC4xOTYtMS40MSAwLjU4OHMtMC41ODggMC44NjItMC41ODggMS40MXYxNGMwIDAuNTUgMC4xOTYgMS4wMiAwLjU4OCAxLjQxczAuODYyIDAuNTg4IDEuNDEgMC41ODhoMTRjMC41NSAwIDEuMDItMC4xOTYgMS40MS0wLjU4OHMwLjU4OC0wLjg2MiAwLjU4OC0xLjQxdi0xNGMwLTAuNTUtMC4xOTYtMS4wMi0wLjU4OC0xLjQxcy0wLjg2Mi0wLjU4OC0xLjQxLTAuNTg4aC0xdi0yaC0ydjJoLTh2LTJoLTJ6bS0xIDRoMTR2MmgtMTR2LTJ6bTAgNGgxNHYxMGgtMTR2LTEwem05LjUgM2EyLjUgMi41IDAgMCAwLTIuNSAyLjUgMi41IDIuNSAwIDAgMCAyLjUgMi41IDIuNSAyLjUgMCAwIDAgMi41LTIuNSAyLjUgMi41IDAgMCAwLTIuNS0yLjV6IiBmaWxsPSIjNDI3Y2E2Ii8+PC9zdmc+') no-repeat;
    display: block;
    position: absolute;
    left: -1.125rem;
    top: 50%;
    width: 1.125rem;
    height: 1.125rem;
    background-size: 1.125rem 1.125rem;
    margin-top: -.5rem;
}

.schedule-show-full,
.schedule-show-full .schedule-day {
    color: rgb(160, 160, 160);
}

.schedule-show-full::before {
    opacity: .5;
}

.schedule-show-full::after {
    content: "FULL";
    position: absolute;
    font-weight: bold;
    font-size: 130%;
    font-family: sans-serif;
    color: red;
    border: .25em solid rgba(255, 0, 0, .7);
    height: 1.625rem;
    line-height: 1.625rem;
    left: 20%;
    top: 50%;
    margin-top: -1rem;
    padding: 0 2rem;
    transform: rotate(-3deg);
}

.schedule-day {
    display: block;
    font-size: 84%;
    color: #AA8585;
    margin-bottom: -.375em;
}

.schedule-date {
    font-size: 112.5%;
    padding-left: .375em;
}

.schedule-time {
    font-size: 118%;
}

.schedule-extra {
    font-size: 95%;
    display: block;
    margin-left: .5rem;
}

.shows-finished {
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: .5rem;
    background: var(--tbl-shows-h-background);
    box-sizing: border-box;
    box-shadow: 0 0 3px rgba(0, 0, 0, .375);
}

.shows-finished-h {
    margin: 0;
}

.shows-finished-sig {
    font-size: 90%;
    text-align: right;
    font-style: italic;
    color: gray;
}

.shows-form-wrap {
    float: left;
    margin-bottom: 1.5rem;
}

.shows-thank-you .shows-form-wrap {
    color: #222;
}

.shows-thank-you .shows-form-wrap,
.shows-thank-you .show-rules-form {
    margin-top: 1rem;
    width: 42%;
}

.shows-form-h3 {
    text-transform: uppercase;
    border-bottom: 2px solid dimgray;
    color: #111;
}

.shows-thank-you .shows-form-h3 {
    margin-top: 1.375em;
}

.show-rules-main,
.show-rules-form {
    margin-top: 0;
    padding: 0 0 0 1em;
    font-style: italic;
    font-size: 85%;
    list-style-position: outside;
    box-sizing: border-box;
}

.show-rules-item {
    margin-bottom: .25rem;
}

/* form -------------------- */

#tix_form {
    counter-reset: section;
    position: relative;
}

#tix_form.sending {
    pointer-events: none;
    opacity: .8;
}

#tix_form.sending .tbl-input {
    opacity: .8;
}

#tix_form.sending::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.form-section,
.tix-form-section {
    margin: .5rem 0 0 0;
    padding: .3rem 1rem .8rem;
    display: block;
    border: none;
    position: relative;
    background: #F4F5F6;
    background: rgba(255, 255, 255, .64);
    border-radius: .5rem;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    gap: 1.9%;
}

.form-section {
    padding: .375rem 1rem 1.25rem;
    margin: 0 0 .5rem;
}

.tix-form-section::before {
    counter-increment: section;
    content: counter(section);
    display: block;
    position: absolute;
    text-align: center;
    top: -.3em;
    left: -.4em;
    width: 1.7em;
    height: 1.7em;
    line-height: 1.5em;
    padding: 0;
    font-size: 130%;
    border-radius: 100%;
    background: #485B6D;
    border: .1em solid white;
    color: white;
    box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.50), inset 1px 1px 3px 0px rgba(50, 50, 50, 0.50);
    box-sizing: border-box;
}

.tix-form-sec-h5 {
    border-bottom: 1px solid #999999;
    margin: 0 0 .25em 1.125em;
    padding: 0 0 .125em .125em;
    font-size: .95em;
    font-weight: normal;
    flex-basis: 100%;
}

.form-section-header {
    margin: .5rem 0 .25rem;
}

.form-input-group,
.tix-input-group {
    margin-top: .625em;
    display: inline-block;
    vertical-align: top;
    width: 49%;
    flex-basis: 49%;
}

.form-input-group .tbl-label,
.tix-input-group .tbl-label {
    white-space: nowrap;
    margin-bottom: .125em;
    padding-left: .1em;
}

.form-input-group .tbl-input,
.tix-input-group .tbl-input {
    width: 100%;
    box-sizing: border-box;
}

.single-show-date {
    font-size: 110%;
    color: #555;
    margin-top: .625em;
    padding-top: .625em;
    border-top: 1px solid #D1D1D1;
}

#tf_contact_name {
    width: 100%;
    flex-basis: 100%;
}

#tf_contact_email {
    width: 56%;
    flex-basis: 56%;
}

#tf_contact_tel {
    width: 42%;
    flex-basis: 42%;
}

#tf_contact_ref {
    width: 44%;
    flex-basis: 44%;
}

#tf_contact_zip,
#tf_contact_age {
    width: 26%;
    flex-basis: 26%;
}

.form-section .err-label,
.tix-form-section .err-label {
    padding-bottom: 0;
}

.tix-form-info-label {
    color: dimgray;
    font-size: .75em;
    padding-top: .125em;
    display: block;
}

.input-err .tix-form-info-label {
    display: none;
}

.form-section-captcha,
.tix-form-section-captcha {
    display: block;
    text-align: center;
}

.tix-form-section-captcha .tix-form-sec-h5 {
    margin-bottom: .875em;
    text-align: left;
}

.form-captcha-group-wrap,
.captcha-group-wrap {
    display: inline-block;
    text-align: left;
    position: relative;
}

.form-captcha-group-wrap {
    margin: 0 auto;
    white-space: nowrap;
}

.form-captcha-label {
    margin-top: 1rem;
    margin-bottom: .875rem;
    width: 100%;
    padding-bottom: .125rem;
    border-bottom: 1px solid #a3a3a3;
}

.form-captcha-image,
.tix-form-captcha-image {
    display: inline-block;
    vertical-align: top;
    padding: 0;
    border: 1px solid dimgray;
    border-radius: .5rem;
    overflow: hidden;
    background-clip: border-box;
    height: 4em;
    /* 4em x 2.5 */
    min-width: 10em;
    width: auto;
}

.form-arrow-svg,
.tix-form-arrow-svg {
    stroke: rgba(0, 0, 0, .375);
    width: 4.5rem;
    height: auto;
    display: inline-block;
    vertical-align: top;
    margin-top: .125rem;
}

.captcha-input-wrap {
    display: inline-block;
}

.captcha-input-wrap>.err-label {
    margin-bottom: 1.25em;
    text-align: center;
}

.input-captcha {
    font-size: 115%;
    font-weight: bold;
    width: 4.5em;
    vertical-align: top;
    /* display: inline-block; */
    text-align: center;
    background: #fff;
}

.form-captcha-group-wrap .button,
.form-section-captcha .button,
.tix-form-section-captcha .button {
    float: right;
    margin-top: -.75em;
    position: relative;
}

.form-captcha-group-wrap .button {
    margin-top: -.5em;
}

.tix-form-session-timeout {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .75);
    font-size: 150%;
    color: #fff;
    text-align: center;
    white-space: pre;
    cursor: pointer;
    justify-content: center;
    align-self: center;
    align-items: center;
    border-radius: .5rem;
}

/* end form -------------------- */

@media only screen and (max-width: 768px) {

    .shows-nav {
        text-align: right;
    }

    .shows-nav-txt {
        display: block;
        font-size: 84%;
    }

    .shows-nav-link {
        margin-left: 0;
        padding-left: 0;
        border: none;
        text-decoration: underline;
    }

    .shows-cnt-root,
    .header-shows {
        min-width: 21rem;
    }

    main.root-cnt {
        margin-top: 1.5rem;
        max-width: 36rem;
    }

    .shows-article,
    .shows-form-wrap,
    .show-rules-main,
    .show-rules-form,
    .shows-thank-you .shows-article,
    .shows-thank-you .shows-form-wrap,
    .shows-thank-you .show-rules-main,
    .shows-thank-you .show-rules-form {
        float: none;
        width: auto;
        max-width: none;
        min-width: 0;
    }

    .shows-h1 {
        margin: 0 0 1rem;
        font-size: 210%;
        padding: 0;
        background: none;
        text-align: center;
    }

    .shows-image,
    .shows-thank-you .shows-image {
        position: static;
        width: 90%;
        max-width: 32rem;
        margin: 0 auto;
        min-width: 0;
    }

    .shows-h2 {
        text-align: center;
        font-size: 125%;
        font-weight: normal;
        border-bottom: none;
        padding-bottom: initial;
    }

    .shows-h2-span {
        font-size: 95%;
        font-weight: bold;
    }

    .shows-share-fb {
        right: 4rem;
    }

    .schedule-list {
        margin-bottom: 0;
    }

    .ratio-spacer {
        padding-top: unset !important;
    }

    .shows-form-wrap {
        margin-top: 2rem;
    }

    .show-rules-main,
    .show-rules-form {
        margin-bottom: 0;
    }

    .form-arrow-svg {
        margin-left: .75rem;
        margin-right: .5rem;
    }
}

@media only screen and (max-width: 540px) {

    main.shows-cnt-root {
        margin-bottom: 3rem;
        margin-top: 0;
    }

    .shows-h1 {
        font-size: 175%;
        margin: .625rem 0;
    }

    .shows-image,
    .shows-thank-you .shows-image {
        width: 110%;
        margin-left: -5%;
        width: calc(100% + 2rem);
        margin-left: -1rem;
        max-width: none;
        box-shadow: none;
    }

    .shows-h2 {
        margin: .625rem 0;
        border-bottom: 1px dotted dimgray;
        padding-bottom: .625rem;
    }

    .shows-article>p,
    .shows-location,
    .schedule-list,
    .shows-thank-you .shows-form-wrap {
        font-size: 118%;
    }

    .shows-form-h3,
    .schedule-header {
        font-size: 125%;
    }

    .shows-thank-you .shows-form-h3 {
        margin-top: 1em;
    }

    .shows-share-fb,
    .shows-share-x {
        position: absolute;
        top: 50%;
        margin-top: -1.25rem;
        display: block;
    }

    .shows-share-fb-icon,
    .shows-share-x-icon {
        width: 2.5rem;
        height: 2.5rem;
    }


    /* form -------------------- */

    #contact_form,
    #join_form,
    #tix_form {
        font-size: 1.25rem;
    }

    .form-input-group,
    .tix-input-group,
    #tf_contact_name,
    #tf_contact_email,
    #tf_contact_tel,
    #tf_contact_ref {
        width: 100%;
        flex-basis: 100%;
    }

    #tf_contact_zip,
    #tf_contact_age {
        width: 49%;
        flex-basis: 49%;
    }

    .tix-form-section::before {
        font-size: 120%;
    }

    .tix-form-sec-h5 {
        font-size: .9em;
    }

    .tix-form-sec-h5-sub {
        font-size: 80%;
        font-style: italic;
        white-space: nowrap;
    }

    .form-captcha-group-wrap,
    .captcha-group-wrap {
        text-align: center;
    }

    .form-captcha-image,
    .tix-form-captcha-image {
        display: block;
        margin: 0 auto .75em;
    }

    .form-arrow-svg,
    .tix-form-arrow-svg {
        margin-top: -.5rem;
        margin-left: 0;
        margin-right: 0;
        width: 5.25rem;
    }

    .form-arrow-wide,
    .tix-form-arrow-wide {
        display: none;
    }

    .input-captcha {
        width: 5em;
    }

    .form-captcha-group-wrap>.err-label,
    .captcha-input-wrap>.err-label {
        margin-bottom: 0;
        text-align: center;
    }

    .form-captcha-group-wrap {
        white-space: normal;
    }

    .form-captcha-group-wrap .button,
    .tix-form-section-captcha .button {
        float: none;
        font-size: 1em;
        margin-top: 1.25em;
        min-width: 100%;
        justify-content: center;
    }

    /* end form -------------------- */

}