:root {
    --page-background: #fff;
    --page-text: rgba(0,0,0,0.87);
    --header-background: rgb(219, 219, 219);

    --link-text: #1f3c8f;

    --toast-background: #949494;
    --toast-positive: rgb(0, 128, 0);
    --toast-neutral: rgb(255, 165, 0);
    --toast-negative: rgb(255, 0, 0);

    --footer-background: rgb(255, 255, 0);

    --button-text: #fff;
    --button-background: #3369ff;

    --input-background: #fff;
    --input-text: rgba(0,0,0,0.87);

    --shadow-1: rgba(0,0,0,0.17);
    --shadow-2: rgba(255,255,255,0.15);
    --shadow-3: rgba(255,255,255,0.12);

    --normal-border: rgb(128, 128, 128);
    --bold-border: #000;
    --light-border: rgb(175, 175, 175);

    --event-text: #000;
    --event-background-today: rgba(0,255,0,0.5);

    --option-text: #000;
    --option-background-pressed: rgba(0,0,0,0.15);

    --code-background-checked: rgba(0, 189, 25, 0.3);

    --tab-text: rgb(128, 128, 128);
    --tab-active-text: #21429c;
}

@media (prefers-color-scheme: dark) {
	:root {
        --page-background: #000;
        --page-text: rgba(255,255,255,0.87);
        --header-background: rgb(59, 59, 59);

        --link-text: #6480ce;
    
        --toast-background: #949494;
        --toast-positive: rgb(0, 128, 0);
        --toast-neutral: rgb(255, 165, 0);
        --toast-negative: rgb(255, 0, 0);
    
        --footer-background: rgb(255, 255, 0);
    
        --button-text: rgba(255,255,255,0.87);
        --button-background: #1c3375;

        --input-background: #222222;
        --input-text: rgba(255,255,255,0.87);
    
        --shadow-1: rgba(0,0,0,0.17);
        --shadow-2: rgba(255,255,255,0.15);
        --shadow-3: rgba(255,255,255,0.12);
    
        --normal-border: rgb(128, 128, 128);
        --bold-border: #000;
        --light-border: rgb(175, 175, 175);
    
        --event-text: rgba(255,255,255,0.87);
        --event-background-today: rgba(0,255,0,0.5);
    
        --option-text: rgba(255,255,255,0.87);
        --option-background-pressed: rgba(0,0,0,0.15);
    
        --code-background-checked: rgba(0, 189, 25, 0.3);
    
        --tab-text: rgb(128, 128, 128);
        --tab-active-text: #2f5bd4;
    }
    .faicon {
        filter: invert(100%);
    }
}

html {
    height: 100%;
}
body {
    margin: 0px;
    height: 100%;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    background-color: var(--page-background);
    color: var(--page-text);
}

a {
    color: var(--link-text);
}

#ticketscan_file_upload {
    position: absolute;
    left: -1000px;
    width: 0px;
    height: 0px;
    opacity: 0%;
}
#container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.header {
    min-height: 54px;
    background-color: var(--header-background);
    display: flex;
    align-items: center;
}
.header_title {
    text-align: center;
    flex-grow: 1;
    font-weight: bold;
    font-size: 0.8em;
    user-select: none;
}
.noselect {
    user-select: none;
}
.content {
    background-color: var(--page-background);
    flex-grow: 1;
    overflow: auto;
    overflow-x: hidden;
}
.content.positive {
    background-color: green;
}

.content.negative {
    background-color: red;
}

.toast {
    background-color: var(--toast-background);
    user-select: none;
}

.toast > div {
    padding: 5px;
}

.toast .check {
    background-color: var(--toast-positive);
}
.toast .uncheck {
    background-color: var(--toast-neutral);
}
.toast .notfound, .toast .error {
    background-color: var(--toast-negative);
}
.toast .alreadychecked {
    background-color: var(--toast-negative);
}

.toast > div {
    display: flex;
}
.toast_content {
    flex-grow: 1;
}
.toast_next, .toast_previous, .toast_left, .toast_close {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
}
.toast_left {
    flex: 0 0 36px;
    font-size: 2em;
    font-weight: bold;
}

.toast_time {
    font-size: 0.8em;
    font-style: italic;
    text-align: right;
}

.footer {
    background-color: var(--footer-background);
}

a {
    text-decoration: none;
}

.btn {
    display:inline-block;
    padding:0.7em 1.7em;
    margin:0 0.3em 0.3em 0;
    border-radius:0.2em;
    box-sizing: border-box;
    font-weight:400;
    color:var(--button-text);
    background-color:var(--button-background);
    box-shadow:inset 0 -0.6em 1em -0.35em var(--shadow-1),inset 0 0.6em 2em -0.3em var(--shadow-2),inset 0 0 0em 0.05em var(--shadow-3);
    text-align:center;
    outline: none;
    cursor: pointer;
    background-position: center;
    transition: background 0.8s;
}
.btn:active, a:hover {
    box-shadow:inset 0 0.6em 2em -0.3em var(--shadow-1),inset 0 0 0em 0.05em var(--shadow-3);
    transition: background 0s;
}
.btn.secondary {
    background-color:#808080;
}
.btn.disabled {
    background-color:#949494;
    pointer-events: none;
    transition: background 0s;
}

.event_container {
    display: flex;
    align-items: center;
    align-items: stretch;
}

.event {
    display: block;
    flex-grow: 1;
    border: 1px solid var(--normal-border);
    border-radius: 4px;
    margin: 4px;
    padding: 2px;
    margin-bottom: 0px;
    color: var(--event-text);
}

.event_container.today .event {
    background-color: var(--event-background-today);
}

.event_title {
    font-size: 1.2em;
    font-weight: bold;
}
.event_info {
    display: flex;
    flex-direction: row;
}

.event_date {
    flex: 0 0 80px;
    width: 80px;
}

.event_subtitle {
    flex-grow: 1;
}

.option_btn {
    min-height: 40px;
    display: inline-block;
    cursor: pointer;
    color: var(--option-text);
    flex: 0 0 40px;
    width: 40px;
    text-align: center;
    font-size: 1.5em;
    border: 1px solid var(--normal-border);
    border-radius: 4px;
    margin: 4px;
    padding: 2px;
}

.option_btn.pressed {
    background-color: var(--option-background-pressed);
}

.optionlist {
    margin: 4px 2px 8px 4px;
    text-align: right;
    border-bottom: 1px solid var(--bold-border);
}

input {
    box-sizing: border-box;
    margin: 2px;
    max-width: 100%;
    border: 1px solid var(--light-border);
    border-radius: 4px;
    padding: 7px;
}
input[type=text], input[type=search], input[type=url], input[type=password] {
    min-width: 300px;
    max-width: 100%;
    background-color: var(--input-background);
    color: var(--input-text);
}

input:focus, input:hover {
    border-color: var(--bold-border);
}

.code_container {
    display: flex;
    border: 1px solid var(--normal-border);
    border-radius: 4px;
    margin: 2px;
    padding: 4px;
    align-items: center;
}

#qrevent_container {
    min-width: 250px;
    min-height: 250px;
}

.code_container.checked {
    background-color: var(--code-background-checked);
}

.code_code {
    min-width: 80px;
    font-size: 1.5em;
}
.code_name {
    flex-grow: 1;
    font-size: 1.5em;
}

.code_amount {
    flex: 0 0 70px;
    text-align: right
}
.code_date {
    font-size: 0.7em;
}

.ticketsearch_container {
    display: flex;
}

.ticketsearch {
    flex-grow: 1;
    font-size: 2.5em;
}

dialog {
    background-color:var(--page-background);
    color:var(--page-text);
}

.dialogbuttons {
    border-top: 1px solid var(--normal-border);
    margin-top: 20px;
    padding-top: 4px;
    text-align: right;
}

.dialog_message {
    user-select: none;
}

.dialog_options {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}

#qr_container {
    border: 1px solid var(--normal-border);
    width: 300px;
    height: 300px;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}

.mode_selector {
    display: flex;
    justify-content: center;
}
.mode_selector > * {
    border: 1px solid var(--normal-border);
    margin: 4px;
    padding: 8px;
    min-width: 60px;
    text-align: center;
}

.login_events_entry {
    display: flex;
    border: 1px solid gray;
    border-radius: 5px;
    margin: 5px;
    padding: 3px;
}

.login_events_entry_details {
    flex-grow: 1;
}

.tab {
    color: var(--tab-text);
}
.tab.active {
    color: var(--tab-active-text);
    font-weight: bold;
}

.tab .faicon {
    display: block;
    min-width: 20px;
    min-height: 20px;
}

.faicon {
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
}

/* https://yoksel.github.io/url-encoder/ */

.faicon.bars{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E");
}

.faicon.circle-arrow-left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M512 256A256 256 0 1 0 0 256a256 256 0 1 0 512 0zM231 127c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-71 71L376 232c13.3 0 24 10.7 24 24s-10.7 24-24 24l-182.1 0 71 71c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L119 273c-9.4-9.4-9.4-24.6 0-33.9L231 127z'/%3E%3C/svg%3E");
}

.faicon.lightbulb{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 384 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z'/%3E%3C/svg%3E");
}

.faicon.lightbulb-light {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 384 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M297.2 248.9C311.6 228.3 320 203.2 320 176c0-70.7-57.3-128-128-128S64 105.3 64 176c0 27.2 8.4 52.3 22.8 72.9c3.7 5.3 8.1 11.3 12.8 17.7l0 0c12.9 17.7 28.3 38.9 39.8 59.8c10.4 19 15.7 38.8 18.3 57.5H109c-2.2-12-5.9-23.7-11.8-34.5c-9.9-18-22.2-34.9-34.5-51.8l0 0 0 0c-5.2-7.1-10.4-14.2-15.4-21.4C27.6 247.9 16 213.3 16 176C16 78.8 94.8 0 192 0s176 78.8 176 176c0 37.3-11.6 71.9-31.4 100.3c-5 7.2-10.2 14.3-15.4 21.4l0 0 0 0c-12.3 16.8-24.6 33.7-34.5 51.8c-5.9 10.8-9.6 22.5-11.8 34.5H226.4c2.6-18.7 7.9-38.6 18.3-57.5c11.5-20.9 26.9-42.1 39.8-59.8l0 0 0 0 0 0c4.7-6.4 9-12.4 12.7-17.7zM192 128c-26.5 0-48 21.5-48 48c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-44.2 35.8-80 80-80c8.8 0 16 7.2 16 16s-7.2 16-16 16zm0 384c-44.2 0-80-35.8-80-80V416H272v16c0 44.2-35.8 80-80 80z'/%3E%3C/svg%3E");
}

.faicon.format-list-bulleted {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Eformat-list-bulleted%3C/title%3E%3Cpath d='M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z' /%3E%3C/svg%3E");
}

.faicon.qrcode-scan {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Eqrcode-scan%3C/title%3E%3Cpath d='M4,4H10V10H4V4M20,4V10H14V4H20M14,15H16V13H14V11H16V13H18V11H20V13H18V15H20V18H18V20H16V18H13V20H11V16H14V15M16,15V18H18V15H16M4,20V14H10V20H4M6,6V8H8V6H6M16,6V8H18V6H16M6,16V18H8V16H6M4,11H6V13H4V11M9,11H13V15H11V13H9V11M11,6H13V10H11V6M2,2V6H0V2A2,2 0 0,1 2,0H6V2H2M22,0A2,2 0 0,1 24,2V6H22V2H18V0H22M2,18V22H6V24H2A2,2 0 0,1 0,22V18H2M22,22V18H24V22A2,2 0 0,1 22,24H18V22H22Z' /%3E%3C/svg%3E");
}

.faicon.barcode-scan {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Ebarcode-scan%3C/title%3E%3Cpath d='M4,6H6V18H4V6M7,6H8V18H7V6M9,6H12V18H9V6M13,6H14V18H13V6M16,6H18V18H16V6M19,6H20V18H19V6M2,4V8H0V4A2,2 0 0,1 2,2H6V4H2M22,2A2,2 0 0,1 24,4V8H22V4H18V2H22M2,16V20H6V22H2A2,2 0 0,1 0,20V16H2M22,20V16H24V20A2,2 0 0,1 22,22H18V20H22Z' /%3E%3C/svg%3E");
}

.faicon.camera-switch-outline {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Ecamera-switch-outline%3C/title%3E%3Cpath d='M20 4H16.8L15 2H9L7.2 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4M9.9 4H14.1L15.9 6H20V18H4V6H8.1M15 11H9V8.5L5.5 12L9 15.5V13H15V15.5L18.5 12L15 8.5V11Z' /%3E%3C/svg%3E");
}

.faicon.camera-switch {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Ecamera-switch%3C/title%3E%3Cpath d='M15,15.5V13H9V15.5L5.5,12L9,8.5V11H15V8.5L18.5,12M20,4H16.83L15,2H9L7.17,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' /%3E%3C/svg%3E");
}

.faicon.chevron-down {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Echevron-down%3C/title%3E%3Cpath d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /%3E%3C/svg%3E");
}

.flatbtn {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.flatbtn.close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Eclose%3C/title%3E%3Cpath d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' /%3E%3C/svg%3E");
}

.flatbtn.menu-right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Emenu-right%3C/title%3E%3Cpath d='M10,17L15,12L10,7V17Z' /%3E%3C/svg%3E");
}

.flatbtn.menu-left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Emenu-left%3C/title%3E%3Cpath d='M14,7L9,12L14,17V7Z' /%3E%3C/svg%3E");
}

.tab .faicon {
    opacity: 0.5;
}

.tab.active .faicon {
    opacity: 1;
}

.faicon.small {
    margin-left: -5px;
    padding-left: 0px;
    width: 20px;
    flex: 0 0 20px;
}