/* Define our font faces */
@font-face
{
    font-family: VentiCF-Medium;
    src: url("../../../../uploads/default/fonts/VentiCF-Medium.otf") format("opentype");
}

@font-face
{
    font-family: Garamond;
    src: url('../../../../uploads/default/fonts/garamond.ttf');
}

@font-face
{
    font-family: DroidSansMono;
    src: url('../../../../uploads/default/fonts/DroidSansMono.ttf');
}

@font-face
{
    font-family: Roboto-Regular;
    src: url('../../../../uploads/default/fonts/Roboto-Regular.ttf');
}
/* END */

:root
{
    --bright-color: #ddd;
    --dark-color: #222;
    --font-color: light-dark(#222, #ddd);
    --font-color-inverted: light-dark(#ddd, #222);
    --border-color: light-dark(#222, #ddd);
    --border-color-inverted: light-dark(#ddd, #222);
    --border-style: 0.1rem solid var(--border-color);
    --border-style-inverted: 0.1rem solid var(--border-color-inverted);
    --border-radius: 2rem;
    --background-color: light-dark(#ddd, #222);
    --background-color-inverted: light-dark(#222, #ddd);

    /* white */
    --white-font-color: #222;
    --white-background-color: #ddd;
    /* "red" */
    --error-font-color: #ddd;
    --error-background-color: rgb(255, 69, 58);
    /* "green" */
    --confirm-font-color: #222;
    --confirm-background-color: rgb(48, 209, 88);
    /* blue */
    --blue-font-color: #ddd;
    --blue-background-color: #2980b9;
    /* yellow */
    --yellow-font-color: #222;
    --yellow-background-color: rgb(255, 214, 10);
    /* orange */
    --orange-font-color: #ddd;
    --orange-background-color: #ff7600;
    /* black */
    --black-font-color: #ddd;
    --black-background-color: #222;
}

html
{
    font-size: 62.5%;
    font-size: 1vw;
    height: 100%;
    width: 100%;
}

body
{
    /*font-family: "Droid Serif Pro Bold Italic Font", "Courier New", Courier, monospace;*/
    font-family: Roboto-Regular, Arial, Garamond;
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
    overflow-anchor: none;
    height: 100%;
    width: 100%;
    touch-action: pan-x pan-y;
    background: var(--background-color);
    color: var(--font-color);
}

body.backgroundImage
{
    background-color: transparent;
    /*-webkit-transition: background-image 1s ease-in-out;
    transition: background-image 1s ease-in-out;*/
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* Smartwatch */
@media only all and (min-device-width: 272px) and (orientation: landscape), only all and (min-device-height: 272px) and (orientation: portrait)
{
    html
    {
        font-size: 50%;
    }
}

/* Mobile device */
@media only all and (min-device-width: 320px) and (orientation: landscape), only all and (min-device-height: 320px) and (orientation: portrait)
{
    html
    {
        font-size: 50%;
    }
}

/* Tablets */
@media only all and (min-device-width: 768px) and (orientation: landscape), only all and (min-device-height: 768px) and (orientation: portrait)
{
    html
    {
        font-size: 100%;
    }
}

/* HD */
@media only all and (min-width: 1920px) and (orientation: landscape), only all and (min-height: 1920px) and (orientation: portrait)
{
    html
    {
        font-size: 125%;
    }
}

/* Ultra-HD */
@media only all and (min-width: 2560px) and (orientation: landscape), only all and (min-height: 2560px) and (orientation: portrait)
{
    html
    {
        font-size: 200%;
    }
}

/* For retina displays */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx),
only screen and (min-resolution: 144dpi)
{
    body
    {
    }
}

@media only all and (orientation: portrait)
{
    html
    {
        font-size: 2.5vw;
    }
}

@media only all and (orientation: landscape)
{
    html
    {
        font-size: 2vh;
    }
}

*
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Font colours */
.redFont
{
    color: var(--error-background-color);
}

.greenFont
{
    color: var(--confirm-background-color);
}

.blueFont
{
    color: var(--blue-background-color);
}

.blackFont
{
    color: black;
}

.whiteFont
{
    color: white;
}

.yellowFont
{
    color: var(--yellow-background-color);
}

.orangeFont
{
    color: var(--orange-background-color);
}

.violetFont
{
    color: purple;
}

.brownFont
{
    color: peru;
}
/* font colors end */

.whiteBackground,
.segmentButton.orders,
.tableSegmentValue, .areaValue, .seatValue, .freeTable
{
    color: var(--white-font-color) !important;
    background: var(--white-background-color) !important;
    background-image: none !important;
}

.timeUrgent,
.redBackground,
.seatValueSelected, .serviceTable,
.filterButtonStatus, .filterButtonCourse, .filterButtonType, #serviceFilterButton,
.serviceFilterButtonType, #serviceFilterButton, #serviceListModeButton.pushedButton,
.deleteButton, .deleteImageButton, .disableLang, .customDeleteButton /* from admin.css */
{
    color: var(--error-font-color) !important;
    background: var(--error-background-color) !important;
    background-image: none !important;
}

.greenBackground,
.slideShowSlide .details .functionButton,
.segmentButton,
.selectedTab,
.serviceFilterButtonType.pushedButton, #serviceFilterButton.pushedButton,
.tablePlanSetTable.pushed, .tablePlanSetColor.pushed,
.filterButtonStatus.pushedButton, .filterButtonCourse.pushedButton, .filterButtonType.pushedButton, #serviceFilterButton.pushedButton, #serviceListModeButton,
.timeOld,
.functionSelect.selected,
.pageSelected,
.submitButton, .newEntryButton, .enableLang /* from admin.css */
{
    color: var(--confirm-font-color) !important;
    background: var(--confirm-background-color) !important;
    background-image: none !important;
}

.blueBackground,
.stationSelected,
.stationFilterSelected,
.stationEntrySelected,
.tab-container ul.tabs li>div.activeTab,
#cashSystemNavBar>div.activeTab>i,
.functionSelect,
/*.popupButton, NOTE: must be separate */
.timeDefault
{
    color: var(--blue-font-color) !important;
    background: var(--blue-background-color) !important;
    background-image: none !important;
}

.timeOlder,
.voucherTable,
.yellowBackground
{
    color: var(--yellow-font-color) !important;
    background: var(--yellow-background-color) !important;
    background-image: none !important;
}

.orangeBackground,
.paymentPendingTable,
.billPendingTable
{
    color: var(--orange-font-color) !important;
    background: var(--orange-background-color) !important;
    background-image: none !important;
}

.blackBackground,
.occupiedTable
{
    color: var(--black-font-color) !important;
    background-color: var(--black-background-color) !important;
    background-image: none !important;
}
/* font colors start */

.responseMessage
{
    color: #222;
    font-weight: bold;
    text-align: center;
    font-size: 2.5rem;
    position: absolute;
    bottom: 20%;
    width: 100%;
    /*background: rgba(221, 221, 221, 0.9);*/
    background: #ddd;
    border-top: var(--border-style);
    border-bottom: var(--border-style);
    z-index: 2147483647;
    white-space: normal;
}

.centered
{
    text-align: center;
}

.vcenter:before
{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.vcenter :first-child
{
    display:inline-block;
}

.left
{
    text-align: left !important;
}

.right
{
    text-align: right !important;
}

.floatLeft
{
    float: left;
}

.floatRight
{
    float: right;
}

.clear
{
    clear: both;
}

.clearLeft
{
    clear: left;
}

.clearRight
{
    clear: right;
}

.bold
{
    font-weight: bold;
}

.italic
{
    font-style: italic;
}

/* http://cssdeck.com/labs/css3-glass-button */
.glassbutton
{
    color:#ffffff;
    text-align:center;
    font-size: 1.4rem;
    font-weight:bold;
    padding: 0.5rem;

    /* Simulating Text Stroke */
    /*text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;*/

    border: 0.1rem solid rgba(0,0,0,0.5);
    border-bottom: 0.3rem solid rgba(0,0,0,0.5);

    border-radius: var(--border-radius);

    background: rgba(0,0,0,0.25);

    box-shadow:
        0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
        inset 0 1px rgba(255,255,255,0.3), /* Top light Line */
        inset 0 10px rgba(255,255,255,0.2), /* Top Light Shadow */
        inset 0 10px 20px rgba(255,255,255,0.25), /* Sides Light Shadow */
        inset 0 -15px 30px rgba(0,0,0,0.3); /* Dark Background */

    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

.orderPopupdecOrder, .orderPopupincOrder, .placeOrderButton
{
    padding: 0.5rem;
    border: var(--border-style);
    border-radius: var(--border-radius);
}

/* http://cssdeck.com/labs/pure-css3-apples-ios-icons */
.gloss
{
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.2)));
    height: 50%;
    width: 100%;
    position: relative;
    /* adapt to button settings! */
    /*-webkit-border-top-right-radius: 38px;
    -webkit-border-top-left-radius: 38px;
    -webkit-border-bottom-right-radius: 120px 20px;
    -webkit-border-bottom-left-radius: 100px 20px;*/
    z-index: 5;
    box-shadow: inset 0 0.2rem 0.1rem rgba(255, 255, 255, 0.5);
}

.whiteTextBorder
{
  text-shadow: 1px 1px 0 #FFF,
    -1px 1px 0 #FFF,
    1px -1px 0 #FFF,
    -1px -1px 0 #FFF,
    0 1px 0 #FFF,
    0 -1px 0 #FFF,
    -1px 0 0 #FFF,
    1px 0 0 #FFF,
    2px 2px 0 #FFF,
    -2px 2px 0 #FFF,
    2px -2px 0 #FFF,
    -2px -2px 0 #FFF,
    0 2px 0 #FFF,
    0 -2px 0 #FFF,
    -2px 0 0 #FFF,
    2px 0 0 #FFF,
    1px 2px 0 #FFF,
    -1px 2px 0 #FFF,
    1px -2px 0 #FFF,
    -1px -2px 0 #FFF,
    2px 1px 0 #FFF,
    -2px 1px 0 #FFF,
    2px -1px 0 #FFF,
    -2px -1px 0 #FFF;
}

.greyTextBorder
{
    text-shadow: 1px 1px 0 #555,
    -1px 1px 0 #555,
    1px -1px 0 #555,
    -1px -1px 0 #555,
    0 1px 0 #555,
    0 -1px 0 #555,
    -1px 0 0 #555,
    1px 0 0 #555,
    2px 2px 0 #555,
    -2px 2px 0 #555,
    2px -2px 0 #555,
    -2px -2px 0 #555,
    0 2px 0 #555,
    0 -2px 0 #555,
    -2px 0 0 #555,
    2px 0 0 #555,
    1px 2px 0 #555,
    -1px 2px 0 #555,
    1px -2px 0 #555,
    -1px -2px 0 #555,
    2px 1px 0 #555,
    -2px 1px 0 #555,
    2px -1px 0 #555,
    -2px -1px 0 #555;
}

.blackTextBorder
{
    text-shadow: 1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0 1px 0 #000,
    0 -1px 0 #000,
    -1px 0 0 #000,
    1px 0 0 #000,
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0 2px 0 #000,
    0 -2px 0 #000,
    -2px 0 0 #000,
    2px 0 0 #000,
    1px 2px 0 #000,
    -1px 2px 0 #000,
    1px -2px 0 #000,
    -1px -2px 0 #000,
    2px 1px 0 #000,
    -2px 1px 0 #000,
    2px -1px 0 #000,
    -2px -1px 0 #000;
}

.rotatedLeft
{
    transform: rotate(-90deg);
}

.rotatedRight
{
    transform: rotate(90deg);
}

/* IScroll stuff START */
.iScroll.wrapper
{
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.iScroll.scroller
{
    z-index: 1;
    width: 100%;
}

.iScroll.scroller, .iScroll.scrollerX, .iScroll.scrollerY
{
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.iScroll.leftScroll
{
    direction: rtl;
}

.iScroll.leftScroll *
{
    direction: ltr;
}

.iScroll.scroller
{
    overflow-x: auto;
    overflow-y: auto;
}

.iScroll.scrollerX
{
    overflow-x: auto;
    overflow-y: hidden;
}

.iScroll.scrollerY
{
    overflow-x: hidden;
    overflow-y: auto;
}

.iScroll.scroller::-webkit-scrollbar, .iScroll.scrollerX::-webkit-scrollbar, .iScroll.scrollerY::-webkit-scrollbar
{
    /*display: none;*/
    -webkit-appearance: none;
    /* was 14px */
    width: 8px;
    height: 8px;
}

.iScroll.scroller::-webkit-scrollbar-thumb, .iScroll.scrollerX::-webkit-scrollbar-thumb, .iScroll.scrollerY::-webkit-scrollbar-thumb
{
    border-radius: 8px;
    border: 1px solid #fff;
    background-color: rgba(33, 33, 33, .8);
}

.iScroll.scroller.noscrollbar::-webkit-scrollbar, .iScroll.scrollerX.noscrollbar::-webkit-scrollbar, .iScroll.scrollerY.noscrollbar::-webkit-scrollbar
{
    display: none;
}

/*.iScroll.scroller>*
{*/
    /* http://cubiq.org/you-shall-not-flicker */
    /*-webkit-transform: translate3d(0, 0, 0);*/
    /* https://github.com/watusi/jquery-mobile-iscrollview */
    /*-webkit-transform: translateZ(0);
}*/
/* IScroll stuff END */
/* Button style from backend/POS */
.clickable
{
    font-weight: bold;
    font-size: 1rem;
    border: var(--border-style);
    border-radius: var(--border-radius);
    text-align: center;
    cursor: pointer;
    background-color: var(--background-color);
    color: var(--font-color);
    overflow: hidden;
    white-space: nowrap;
}

.clickable:active
{
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

.invisible
{
    visibility: hidden !important;
}

.removed
{
    display: none !important;
}

.red
{
    color: #FF0000 !important;
}

.blue
{
    color: #0080FF !important;
}

.green
{
    color: #006600 !important;
}

.orange
{
    color: #FF8C00 !important;
}

.yellow,
.voucher
{
    color: #FFD700 !important;
}

form
{
    padding: 0;
    margin: 0;
}

.blurred
{
    filter: blur(0.5rem);
}

.lightblurred
{
    filter: blur(0.1rem);
}

.ignoreclicks
{
    pointer-events: none;
}

.flexContainer
{
    display: flex;
}

.flexItem
{
    flex: 1;
}

select
{
    border-radius: var(--border-radius);
    background: var(--background-color);
    color: var(--font-color);
}                           

select>option
{
    border-radius: var(--border-radius);
    background: var(--background-color);
    color: var(--font-color);
}                 

input[type=submit], input[type=button], input[type=file], input[type=checkbox], input[type=color], button
{
    cursor: pointer;
}

input[type=submit]:hover, input[type=button]:hover, input[type=file]:hover, button:hover
{
    filter: brightness(0.6);
}

select, input, button
{
    font-size: 1rem;
    padding: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    min-height: 2rem;
    max-width: 100%;
    border: var(--border-style);
    border-radius: var(--border-radius);
}

textarea
{
    font-size: 1.2rem;
    border-radius: var(--border-radius);
    padding: 0.5rem;
}

input[type=checkbox], input[type=radio], input[type=color]
{
    /*height: 1.5rem;*/
    width: 2rem;
}

input[type=submit], input[type=button], input[type=file], button
{
    font-size: 1.2rem;
    display: inline-block;
    border: var(--border-style);

    /*color: #597390;*/
    max-width: 100%;
    white-space: normal;

    background-color: var(--background-color);
    color: var(--font-color);
}

button:disabled, button[disabled]
{
    /*color: #AAA !important;*/
    filter: brightness(0.6);
    cursor: not-allowed;
}

input[type=text]
{
    text-align: right;
}

input[type=number], input[type=text].number
{
    text-align: right !important;
}

input[type=color]
{
    background: transparent;
    border: none;
    width: 2.5rem; /* matches height which is 2rem + 2*0.25rem padding */
}

/* ON/OFF buttons START */
.onoffWrapper
{
    display: inline-block;
}

input.onoff
{
    position: absolute;
    /*left: -9999px;*/
    display: none;
}

label.onoff
{
    display: block;
    position: relative;
    border: var(--border-style);
    border-radius: var(--border-radius);
    color: var(--bright-color);
    background-color: var(--dark-color);
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    transition: background-color .2s;
    min-height: 2rem;
    min-width: 3.5rem;
    text-align: center;
}

input.onoff:not(:checked) + label.onoff
{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 2.5rem; /* 1.5rem from "checkbox" width + 0.5rem padding (checkbox to border) + 0.5rem */
    padding-right: 0.5rem;
}

input.onoff:checked + label.onoff
{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 2.5rem; /* 1.5rem from "checkbox" width + 0.5rem padding (checkbox to border) + 0.5rem */
}

/*
    item height is font-size+top padding+bottom padding
    so it's 1rem (font)+0.5rem+0.5rem = 2rem by default
    for symbol labels, we should make the font part of it larger, e.g.
    1.5rem (font)+0.25rem+0.25rem = 2rem
*/
/*input.onoff:not(:checked) + label.onoff.symbol
{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

input.onoff:checked + label.onoff.symbol
{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}*/

label.onoff:hover, input.onoff:focus + label
{
    box-shadow: 0 0 2rem rgba(0, 0, 0, .6);
}

input.onoff:checked + label.onoff
{
    background-color: rgb(48, 209, 88);
}

input.onoff.deleteStyle:checked + label.onoff
{
    background-color: #fc3c3c;
}

input.onoff:disabled + label.onoff
{
    /*background-color: #aaaaaa;*/
    filter: brightness(0.6);
    font-style: italic;
}

input.onoff:not(:checked) + label.onoff::before,
input.onoff:checked + label.onoff::after
{
    content: '';
    display: block;
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 1.5rem;
    /*border: 0.1rem solid light-dark(#ddd, #222);*/
    border-radius: var(--border-radius);
    transition: background-color .2s;
}

input.onoff:not(:checked) + label.onoff::before
{
    left: 0.5rem;
    border: var(--border-style);
}

input.onoff:checked + label.onoff::after
{
    right: 0.5rem;
    background-color: var(--bright-color);
}
/* ON/OFF buttons END */
/* Force landscape/portrait START */
@media only screen and (orientation: landscape)
{
    #landscapeWarning
    {
        display: none !important;
    }

    #portraitWarning
    {
        display: table !important;
    }

    .portraitOnly
    {
        display: none !important;
    }
}

@media only screen and (orientation: portrait)
{
    #landscapeWarning
    {
        display: table !important;
    }

    #portraitWarning
    {
        display: none !important;
    }

    .landscapeOnly
    {
        display: none !important;
    }
}

#portraitWarning, #landscapeWarning
{
    position: fixed;
    z-index: 99999;
    height: calc(100% - 1rem);
    width: calc(100% - 1rem);
    top: 0.5rem;
    left: 0.5rem;

    color: #000000;
    font-size: 3rem;
    background: #FFFFFF; /* Old browsers */
    background: linear-gradient(-45deg,  #FFF 0%, #EEE 50%, #CCC 100%);
    border-radius: 0.25rem;
    text-align: center;
}

#portraitWarning>div, #landscapeWarning>div
{
    vertical-align: middle;
}

#portraitWarning img, #landscapeWarning img
{
    height: 30%;
    width: auto;
}
/* Force landscape/portrait END */

[draggable="true"]
{
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* Try to solve the 300ms delay issue */
a, button, .button
{
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

.alternatedTable tr:nth-child(even)
{
    background: light-dark(#ecf6fc, #333);
}

.alternatedTable tr:nth-child(odd)
{
    background: light-dark(#FFF, #444);
}

.resizeable
{
    resize: both !important;
    overflow: auto !important;
}

table tr.sticky>th
{
    position: sticky;
    top: 0;
    z-index: 2147483647;
    background: aliceblue;
}

table tr.sticky>td
{
    position: sticky;
    top: 0;
    z-index: 2147483646; /* -1 */
    background: aliceblue;
}

@media (prefers-color-scheme: dark)
{
    table tr.sticky>td, table tr.sticky>th
    {
        background: #000;
    }
}

table tr.firstSticky>th:first-child
{
    position: sticky;
    left: 0;
    z-index: 2147483647;
    background: inherit;
}

table tr.firstSticky>td:first-child
{
    position: sticky;
    left: 0;
    z-index: 2147483646; /* -1 */
    background: inherit;
}

.underlined
{
    text-decoration: underline;
}

.glow-frame-button
{
    position: relative;
    border-radius: var(--border-radius);
    z-index: 0;
}

.glow-frame-button:before
{
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: var(--border-radius);
    opacity: 1;
}

.glow-frame-button:after
{
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #222;
    left: 0;
    top: 0;
    border-radius: var(--border-radius);
}


.glow-button
{
    position: relative;
    border-radius: 0.5rem;
    z-index: 0;
}

.glow-button:before
{
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -4px;
    left:-4px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 0.5rem;
    opacity: 1;
}

.glow-button:after
{
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    left: 0;
    top: 0;
    border-radius: 0.5rem;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

input[readonly="readonly"]
{
    background: var(--background-color-inverted);
    color: var(--font-color-inverted);
}

input[readonly="readonly"].focusable
{
    background: var(--background-color);
    color: var(--font-color);
}

.neonBorder
{
  border: 0.1rem solid #fff;
  padding: 0.2rem; /* 2x border with? */
  z-index: 1;
}

.neonBorder.pink
{
  box-shadow: 0 0 .2rem #fff,
              0 0 .2rem #fff,
              0 0 2rem #bc13fe,
              0 0 0.8rem #bc13fe,
              0 0 2.8rem #bc13fe,
              inset 0 0 1.3rem #bc13fe;
}

.neonBorder.blue
{
  box-shadow: 0 0 .2rem #fff,
              0 0 .2rem #fff,
              0 0 2rem #00fbff,
              0 0 0.8rem #00fbff,
              0 0 2.8rem #00fbff,
              inset 0 0 1.3rem #00fbff;
}

.neonBorder.green
{
  box-shadow: 0 0 .2rem #fff,
              0 0 .2rem #fff,
              0 0 2rem #00ff14,
              0 0 0.8rem #00ff14,
              0 0 2.8rem #00ff14,
              inset 0 0 1.3rem #00ff14;
}

.neonBorder.red
{
  box-shadow: 0 0 .2rem #fff,
              0 0 .2rem #fff,
              0 0 2rem #ff0000,
              0 0 0.8rem #ff0000,
              0 0 2.8rem #ff0000,
              inset 0 0 1.3rem #ff0000;
}

.neonText
{
    color: #fff;
    /*font-family: "Vibur", sans-serif;*/
}

.neonText.pink
{
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #f09,
      0 0 82px #f09,
      0 0 92px #f09,
      0 0 102px #f09,
      0 0 151px #f09;
    /*font-family: "Vibur", sans-serif;*/
}

.neonText.blue
{
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #00fbff,
      0 0 82px #00fbff,
      0 0 92px #00fbff,
      0 0 102px #00fbff,
      0 0 151px #00fbff;
}

.neonText.green
{
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #00ff14,
      0 0 82px #00ff14,
      0 0 92px #00ff14,
      0 0 102px #00ff14,
      0 0 151px #00ff14;
}

.neonText.red
{
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #ff0000,
      0 0 82px #ff0000,
      0 0 92px #ff0000,
      0 0 102px #ff0000,
      0 0 151px #ff0000;
}

/* toasts */
#snackbar
{
  /*visibility: hidden;*/
  min-width: 15rem;
  margin-left: -7.5rem;
  background-color: #222;
  color: #ddd;
  text-align: center;
  border-radius: 0.1rem;
  padding: 0.5rem;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 5rem;
  font-size: 2rem;
}

#snackbar.show
{
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein
{
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein
{
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout
{
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout
{
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

/* Slider */
input[type=range]
{
  -webkit-appearance: none;
  width: 80%;
  position: relative;
}

input[type=range]+span
{
    font-size: 1.5rem;
    width: 10%;
    position: relative;
    top: -0.5rem;
}

input[type=range]:focus
{
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track
{
    width: 100%;
    height: 1.5rem;
    cursor: pointer;
    animate: 0.2s;
    background: #B6B6B6;
    border-radius: var(--border-radius);
}

input[type=range]::-webkit-slider-thumb
{
    border: 0.1rem solid #8A8A8A;
    height: 2rem;
    width: 3rem;
    background: #DADADA;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -0.25rem;
    border-radius: var(--border-radius);
}

input[type=range]:focus::-webkit-slider-runnable-track
{
    background: #B6B6B6;
}

.tablespan
{
    column-span: all; /* W3C */
    -webkit-column-span: all; /* Safari & Chrome */
    -moz-column-span: all; /* Firefox */
    -ms-column-span: all; /* Internet Explorer */
    -o-column-span: all; /* Opera */
}

/* Prevent text-marking whereever possible */
*
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

textarea, input
{
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

.button
{
    font-weight: bold;
    font-size: 1rem;
    border-radius: var(--border-radius);
    min-height: 2.5rem;
    min-width:  2.5rem;
    text-align: center;
    cursor: pointer;
    background-color: #FFFFFF; /* button hat meist bereits eine vordefinierte Farbe vom Browser aus! */
}

.button:hover
{
    background-color: #EEEEEE;
}

.errorMsg
{
    font-weight:bold;
    font-size:  1.5rem;
    color:      var(--error-background-color);
    padding:    0;
    margin:     0;
}