@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
    html.rotated {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        height: 100vw;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
    }
}


body {
    padding-top: 65px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    margin: 0;
    padding: 0;
    xdisplay: flex;
    min-height: 100vh;
    flex-direction: column;
    xfont: 15px / 1.15 Helvetica, Arial, sans-serif
}

.ptr--ptr {
    font: 15px / 1.15 Helvetica, Arial, sans-serif;
    xmin-height: 150px;
}

.wrap {
    max-width: 800px;
    padding: 0 10px;
    margin: 0 auto
}

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

header {
    background: #33c;
    color: #fff;
    padding: 20px 0;
    position: relative;
    z-index: 1
}

header h1 {
    margin: 0
}

pre {
    background: rgba(0, 0, 0, 0.1);
    font-size: 12px;
    overflow: auto;
    padding: 5px
}

#main {
    flex: 1;
    padding-top: 20px;
    transition: transform .3s
}

.container#mainContainer {
    overflow: auto;
}

.trigger {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    float: right;
    display: block;
    border: 1px solid white
}

.buttons {
    border-bottom: 1px solid silver;
    padding-bottom: 20px;
    text-align: center
}

.buttons>* {
    border: 1px solid silver;
    background: silver;
    color: black;
    padding: 5px
}

.links {
    display: flex;
    flex-wrap: wrap
}

.links a {
    margin-right: 1em
}

.links a:last-child {
    margin: 0
}

.flex {
    display: flex
}

.flex>* {
    width: 50%
}

#footer {
    /*background: #eef;*/
    padding: 10px 0
}

#footer a {
    color: #5c5cd6
}

#footer ul.footer-links {
    list-style: none;
    margin: 0;
    padding: 0
}

#footer ul.footer -links>li {
    display: inline
}

#footer ul.footer-links>li+li:before {
    color: #33c;
    content: '•';
    opacity: .52;
    margin: 0 .4em
}

.no-border {
    border: 0;
    box-shadow: none;
    /* You may want to include this as bootstrap applies these styles too */
}

.player-highlight td {
    background-color: var(--bs-primary-bg-subtle) !important;
}

.accordion-item .accordion-button {
    background-color: var(--bs-secondary-border-subtle);
    color: var(--bs-white);
}

.accordion-item #header {
    background-color: var(--bs-secondary-border-subtle);
    color: var(--bs-white);
}

.accordion-item.current #header {
    background-color: var(--bs-green);
    color: var(--bs-white);
}

.accordion-item.current .accordion-button {
    background-color: var(--bs-green);
}

.accordion-item.approved #header {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}

.accordion-item.approved .accordion-button:not(.collapsed) {
    xbackground-color: #f4b96d;
    background-color: var(--bs-primary);
    color: var(--bs-white);
    xcolor: white;
}

.accordion-item.approved .accordion-button.collapsed {
    xbackground-color: #f4b96d;
    background-color: var(--bs-primary);
    color: var(--bs-white);
    xcolor: white;
}

/* .accordion-item.uploadable .accordion-button {
    background-color: var(--bs-red);
} */

.accordion-item.uploadable .accordion-button {
    background-color: var(--bs-red);
}

.accordion-item.approvable .accordion-button {
    background-color: var(--bs-orange);
}

.accordion-item .accordion-button #warning {
    display: none;
}

.accordion-item.uploadable .accordion-button #warning {
    display: inline-block;
}

.carousel-inner .carousel-item {
    transition: -webkit-transform .2s ease;
    transition: transform .2s ease;
    transition: transform .2s ease, -webkit-transform .2s ease;
}

@font-face {
    font-family: 'dejavu_sansbook';
    src: url('DejaVuSans-webfont.eot');
    src: url('DejaVuSans-webfont.eot?iefix') format('eot'),
        /* url('./fonts/DejaVuSans-webfont.woff') format('woff'), */
        url('../fonts/DejaVuSans-webfont.ttf') format('truetype'),
        url('DejaVuSans-webfont.svg#webfont') format('svg');
}

@font-face {
    font-family: 'playing-cards';
    src: url('playing-cards.eot');
    src: url('playing-cards.eot?iefix') format('eot'),
        /* url('./fonts/playing-cards.woff') format('woff'), */
        url('../fonts/playing-cards.woff2') format('woff2'),
        url('../fonts/playing-cards.ttf') format('truetype'),
        url('playing-cards.svg#webfont') format('svg');
}

/* autohide navbar */
.autohide {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
}

.scrolled-down {
    transform: translateY(-100%);
    transition: all 0.3s ease-in-out;
}

.scrolled-up {
    transform: translateY(0);
    transition: all 0.3s ease-in-out;
}

.min-vh-75 {
    min-height: 75vh !important;
}

@media (max-width: 350px) {
    [type=button] {
        padding: 0.3rem;
    }
}

[type=button] {
    xpadding: 0.3rem;
}

.form-group.required .control-label:after {
    content: "*";
    color: red;
}

xform .card-body {
    padding: 0px;
}

xform .card {
    --bs-card-border-width: 0px;
}

@media (prefers-color-scheme: dark) {
    html {
        color: var (--bs-primary-text);
        background-color: var(--bs-primary-bg-subtle);
        background-color: transparent;
    }
}

@media (prefers-dark-interface) {
    html {
        color: var (--bs-primary-text);
        background-color: var(--bs-primary-bg-subtle);
        background-color: transparent;
    }
}

body[data-bs-theme=dark] input {
    background-color: var(--bs-body-bg);
}

body[data-bs-theme=dark] input:focus {
    background-color: var(--bs-body-bg);
}

body[data-bs-theme=dark] select.form-control {
    background: var(--bs-body-bg);
}

body[data-bs-theme=dark] select.form-control:focus {
    background: var(--bs-body-bg);
}

body[data-bs-theme=dark] nav {
    background-color: var(--bs-body-bg) !important;
}

input.form-control[disabled]:not(.text-white) {
    xcolor: var(--bs-danger) !important;
}

.tooltip-inner pre {
    text-align: initial;
}

.btn-seat.active {
    font-weight: bold;
    background-color: orange;
}

.btn-table.active {
    font-weight: bold;
    background-color: orange;
}

/* @media only screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
	html{
		transform: rotate(-90deg);
		transform-origin: left top;
		width: 100vh;
		height: 100vw;
		overflow-x: hidden;
		position: absolute;
		top: 100%;
		left: 0;
	}
} */

@media (min-width: 1560px) {
    .col-xxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-xxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .d-xxl-none {
        display: none !important;
    }

    .d-xxl-inline {
        display: inline !important;
    }

}

@media (min-width: 1560px) {

    .row-cols-xxl-1>* {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-xxl-2>* {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-xxl-3>* {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row-cols-xxl-4>* {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-xxl-5>* {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-xxl-6>* {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .row-cols-xxl-7>* {
        -ms-flex: 0 0 14.285714%;
        flex: 0 0 14.285714%;
        max-width: 14.285714%;
    }

    .row-cols-xxl-8>* {
        -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .row-cols-xxl-9>* {
        -ms-flex: 0 0 11.11111%;
        flex: 0 0 11.11111%;
        max-width: 11.11111%;
    }

    .row-cols-xxl-10>* {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }

    .row-cols-xxl-11>* {
        -ms-flex: 0 0 9.09090909%;
        flex: 0 0 9.09090909%;
        max-width: 9.09090909%;
    }

    .row-cols-xxl-12>* {
        -ms-flex: 0 0 8.3333333%;
        flex: 0 0 8.3333333%;
        max-width: 8.3333333%;
    }

}


@media (min-width: 2208px) {
    .col-xxxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xxxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-xxxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xxxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xxxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xxxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xxxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xxxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xxxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xxxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xxxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xxxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .d-xxxl-none {
        display: none !important;
    }

    .d-xxxl-inline {
        display: inline !important;
    }

}

@media (min-width: 2208px) {

    .row-cols-xxxl-1>* {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-xxxl-2>* {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-xxxl-3>* {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row-cols-xxxl-4>* {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-xxxl-5>* {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-xxxl-6>* {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .row-cols-xxxl-7>* {
        -ms-flex: 0 0 14.285714%;
        flex: 0 0 14.285714%;
        max-width: 14.285714%;
    }

    .row-cols-xxxl-8>* {
        -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .row-cols-xxxl-9>* {
        -ms-flex: 0 0 11.11111%;
        flex: 0 0 11.11111%;
        max-width: 11.11111%;
    }

    .row-cols-xxxl-10>* {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }

    .row-cols-xxxl-11>* {
        -ms-flex: 0 0 9.09090909%;
        flex: 0 0 9.09090909%;
        max-width: 9.09090909%;
    }

    .row-cols-xxxl-12>* {
        -ms-flex: 0 0 8.3333333%;
        flex: 0 0 8.3333333%;
        max-width: 8.3333333%;
    }

}

@media (min-width: 3000px) {
    .col-xxxxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xxxxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-xxxxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xxxxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxxxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xxxxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xxxxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xxxxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxxxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xxxxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xxxxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xxxxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xxxxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xxxxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .d-xxxxl-none {
        display: none !important;
    }

    .d-xxxxl-inline {
        display: inline !important;
    }

}

@media (min-width: 3000px) {

    .row-cols-xxxxl-1>* {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-xxxxl-2>* {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-xxxxl-3>* {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row-cols-xxxxl-4>* {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-xxxxl-5>* {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-xxxxl-6>* {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .row-cols-xxxxl-7>* {
        -ms-flex: 0 0 14.285714%;
        flex: 0 0 14.285714%;
        max-width: 14.285714%;
    }

    .row-cols-xxxxl-8>* {
        -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .row-cols-xxxxl-9>* {
        -ms-flex: 0 0 11.11111%;
        flex: 0 0 11.11111%;
        max-width: 11.11111%;
    }

    .row-cols-xxxxl-10>* {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }

    .row-cols-xxxxl-11>* {
        -ms-flex: 0 0 9.09090909%;
        flex: 0 0 9.09090909%;
        max-width: 9.09090909%;
    }

    .row-cols-xxxxl-12>* {
        -ms-flex: 0 0 8.3333333%;
        flex: 0 0 8.3333333%;
        max-width: 8.3333333%;
    }

}

@media (min-width: 3000px) {
    div.card-body {
        font-size: smaller;
    }
}