/* 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 */

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;
}

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;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    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
    {
        /*background-color: red;*/
    }
}

@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;
}

:root {
  --font-color: #F00;
}

.whiteBackground,
.segmentButton.orders,
.tableSegmentValue, .areaValue, .seatValue, .freeTable
{
    background: #FFF !important;
    background-image: none !important;
    color: #000 !important;
}

.timeUrgent,
.redBackground,
.seatValueSelected, .serviceTable,
.filterButtonStatus, .filterButtonCourse, .filterButtonType, #serviceFilterButton,
.serviceFilterButtonType, #serviceFilterButton, #serviceListModeButton.pushedButton
{
    color: #FFFFFF !important;
    /*background-color: #F5C3D8 !important;
    background: -webkit-gradient(linear, 0 100%, 0 0%, from(#440000), to(#FF0000)) !important;*/
    /*background: #fc3c3c !important;
    background-image: -webkit-linear-gradient(top, #fc3c3c, #570c0c) !important;
    background-image: -moz-linear-gradient(top, #fc3c3c, #570c0c) !important;
    background-image: -ms-linear-gradient(top, #fc3c3c, #570c0c) !important;
    background-image: -o-linear-gradient(top, #fc3c3c, #570c0c) !important;
    background-image: linear-gradient(to bottom, #fc3c3c, #570c0c) !important;*/
    background: #fc3c3c !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,
.upperbar
{
    color: #FFFFFF !important;
    /*background-color: #B0FFA0 !important;
    background: -webkit-gradient(linear, 0 100%, 0 0%, from(#004400), to(#00FF00)) !important;*/
    /*background: #2ae045 !important;
    background-image: -webkit-linear-gradient(top, #2ae045, #0e4516) !important;
    background-image: -moz-linear-gradient(top, #2ae045, #0e4516) !important;
    background-image: -ms-linear-gradient(top, #2ae045, #0e4516) !important;
    background-image: -o-linear-gradient(top, #2ae045, #0e4516) !important;
    background-image: linear-gradient(to bottom, #2ae045, #0e4516) !important;*/
    background-color: #0d5128 !important; /* was #19974a */
    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: #FFFFFF !important;
    /*background: -webkit-gradient(linear, 0 100%, 0 0%, from(#000044), to(#0000FF)) !important;*/
    /*background-image: -webkit-gradient(linear, 0 100%, 0 0%, from(#2C388D), to(#1F9AC1)) !important;*/
    /*background: #3498db !important;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9) !important;
    background-image: -moz-linear-gradient(top, #3498db, #2980b9) !important;
    background-image: -ms-linear-gradient(top, #3498db, #2980b9) !important;
    background-image: -o-linear-gradient(top, #3498db, #2980b9) !important;
    background-image: linear-gradient(to bottom, #3498db, #2980b9) !important;*/
    background-color: #2980b9 !important;
    background-image: none !important;
}

.timeOlder,
.voucherTable,
.yellowBackground,
.lowerbar
{
    /*color: #FFFFFF !important;*/
    /*background: -webkit-gradient(linear, 0 100%, 0 0%, from(#444400), to(#FFFF00)) !important;*/
    /*background: #dede2a !important;
    background-image: -webkit-linear-gradient(top, #dede2a, #43450f) !important;
    background-image: -moz-linear-gradient(top, #dede2a, #43450f) !important;
    background-image: -ms-linear-gradient(top, #dede2a, #43450f) !important;
    background-image: -o-linear-gradient(top, #dede2a, #43450f) !important;
    background-image: linear-gradient(to bottom, #dede2a, #43450f) !important;*/
    color: #000 !important;
    background: #dede2a !important;
    background-image: none !important;
}

.orangeBackground,
.paymentPendingTable,
.billPendingTable
{
    color: #FFFFFF !important;
    background-color: #ff7600 !important;
    background-image: none !important;
}

.occupiedTable
{
    color: #FFF !important;
    background-color: #000 !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);
    border-top: 0.1rem solid #222;
    border-bottom: 0.1rem solid #222;
    z-index: 2147483647;
}

/* Font colours */
.redFont
{
    color: red;
}

.greenFont
{
    color: green;
}

.blueFont
{
    color: blue;
}

.blackFont
{
    color: black;
}

.whiteFont
{
    color: white;
}

.yellowFont
{
    color: yellow;
}

.orangeFont
{
    color: orange;
}

.violetFont
{
    color: purple;
}

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

.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;
}

.right
{
    text-align: right;
}

.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);

    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    border-radius: 0.25rem;

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

    -o-box-shadow:
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px rgba(255,255,255,0.3),
        inset 0 10px rgba(255,255,255,0.2),
        inset 0 10px 20px rgba(255,255,255,0.25),
        inset 0 -15px 30px rgba(0,0,0,0.3);

    -webkit-box-shadow:
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px rgba(255,255,255,0.3),
        inset 0 10px rgba(255,255,255,0.2),
        inset 0 10px 20px rgba(255,255,255,0.25),
        inset 0 -15px 30px rgba(0,0,0,0.3);

    -moz-box-shadow:
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px rgba(255,255,255,0.3),
        inset 0 10px rgba(255,255,255,0.2),
        inset 0 10px 20px rgba(255,255,255,0.25),
        inset 0 -15px 30px rgba(0,0,0,0.3);

    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;
}

/* 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;
    -webkit-box-shadow: inset 0 0.2rem 0.1rem rgba(255, 255, 255, 0.5);
    -moz-box-shadow: inset 0 0.2rem 0.1rem rgba(255, 255, 255, 0.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
{
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.rotatedRight
{
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* cssarrowplease.com */
.arrow:after, .arrow:before
{
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow:after
{
    border-color: rgba(245, 245, 245, 0);
    border-width: 30px;
}

.arrow:before
{
    border-color: rgba(0, 0, 0, 0);
    border-width: 36px;
}

.arrow.upArrow:after, .arrow.downArrow:after
{
    margin-left: -30px;
}

.arrow.upArrow:before, .arrow.downArrow:before
{

    margin-left: -36px;
}

.arrow.leftArrow:after, .arrow.rightArrow:after
{
    margin-top: -30px;
}

.arrow.leftArrow:before, .arrow.rightArrow:before
{
    margin-top: -34px;
}

/* arrow on bottom */
.arrow.downArrow:after, .arrow.downArrow:before
{
    top: 100%;
    left: 50%;
}

.arrow.downArrow:after
{
    border-top-color: #F5F5F5;
}

.arrow.downArrow:before
{
    border-top-color: #000000;
}

/* arrow on top */
.arrow.upArrow:after, .arrow.upArrow:before
{
    bottom: 100%;
    left: 50%;
}

.arrow.upArrow:after
{
    border-bottom-color: #F5F5F5;
}

.arrow.upArrow:before
{
    border-bottom-color: #000000;
}

/* arrow on right */
.arrow.rightArrow:after, .arrow.rightArrow:before
{
    left: 100%;
    top: 50%;
}

.arrow.rightArrow:after
{
    border-left-color: #F5F5F5;
}

.arrow.rightArrow:before
{
    border-left-color: #000000;
}

/* arrow on left */
.arrow.leftArrow:after, .arrow.leftArrow:before
{
    right: 100%;
    top: 50%;
}

.arrow.leftArrow:after
{
    border-right-color: #F5F5F5;
}

.arrow.leftArrow:before
{
    border-right-color: #000000;
}
/* Arrows END */
/* 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: 0.1rem solid #000;
    border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: #FFFFFF;
    overflow: hidden;
    /*white-space: nowrap;*/
}

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

.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
{
    -webkit-filter: blur(0.5rem);
    -moz-filter: blur(0.5rem);
    -o-filter: blur(0.5rem);
    -ms-filter: blur(0.5rem);
    filter: blur(0.5rem);
}

.lightblurred
{
    -webkit-filter: blur(0.1rem);
    -moz-filter: blur(0.1rem);
    -o-filter: blur(0.1rem);
    -ms-filter: blur(0.1rem);
    filter: blur(0.1rem);
}

.ignoreclicks
{
    pointer-events: none;
}

.flexContainer
{
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}

.flexItem
{
    flex: 1;
}

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

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

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

label.onoff
{
    display: block;
    position: relative;
    border: 0.1rem solid #fff;
    border-radius: 0.25rem;
    color: #fff;
    background-color: #6a8494;
    box-shadow: 0 0 2rem rgba(0, 0, 0, .2);
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    transition: background-color .2s, box-shadow .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: #4b9500;
}

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

input.onoff:disabled + label.onoff
{
    background-color: #aaaaaa;
    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 #fff;
    border-radius: 0.25rem;
    transition: background-color .2s;
}

input.onoff:not(:checked) + label.onoff::before
{
    left: 0.25rem;
}

input.onoff:checked + label.onoff::after
{
    right: 0.25rem;
    background-color: #fff;
}
/* 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: -moz-linear-gradient(-45deg,  #FFF 0%, #EEE 50%, #CCC 100%);
    background: -webkit-linear-gradient(-45deg, #FFF 0%, #EEE 50%, #CCC 100%);
    background: -o-linear-gradient(-45deg, #FFF 0%, #EEE 50%, #CCC 100%);
    background: -ms-linear-gradient(-45deg, #FFF 0%, #EEE 50%, #CCC 100%);
    background: linear-gradient(-45deg,  #FFF 0%, #EEE 50%, #CCC 100%);
    border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    -webkit-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;
}

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

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

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

select
{
    background: #ddd;
    color: #222;
}

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


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

.underlined
{
    text-decoration: underline;
}

.glow-frame-button
{
    position: relative;
    border-radius: 0.5rem;
    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: 0.5rem;
    opacity: 1;
}

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


.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: #999;
}

input[readonly="readonly"].focusable
{
    background: #fff;
}

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

.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;
}