@CHARSET "UTF-8";
:root {
    --standardText: #101010;
    --lightText: #333;
    --lightTextInversed: #ccc;
    --standardBackground: #e0e0e0;
    --detailedBackground: #f8f8f8;
    --overlayBackground: #dcdcdc;
    --lightBackground: #f3f3f3;
    --lighterBackground: #caeaff;
    --darkBorder: #333;
    --titleColor: #00354b;
    --titleColorBright: #00638c;
    --regionBoxBack: #ededed;
    --hoverColor:#adf;
    /* Opacity */
    --shadowColor: #00354b80;
    --shadowBW: #00000015;
    --opaBrightBW: #FFFFFF85;
    --opa97BrightBW: #FFFFFFdd;
    /* colors */
    --mediumOkColor: #128812;
    --highlightInputBack: #60afd0;
}
body,html {height:100%;}

body {
	font-family:"Roboto","Arial";
	font-size: 15px;
	padding: 0;
	margin: 0;
	background: var(--lightBackground);
	cursor:default;
    color: var(--standardText);
}

img {
	border: 0px;
}

.overlayClose, #WaitOverlayClose, .menu, #Logo {
    cursor:pointer;
    }
/* ***********************  Header ******************************/
#header {
    position:fixed;
    top:0px;
    left:0px;
    height:73px;
    width:100%;
    background-color:#282f38;
    z-index:155;
}
#StatusText {
    position:fixed;
    top:26px;
    left:33px;
    color:#f4f4f4;
    font-size:23px;
}
#Logo {
    position:fixed;
    left:50%;
    top:4px;
    margin-left:-46px;
    background-image:url('../img/LogoSmall.png');
    background-size:80px 80px;
    width:80px;
    height:80px;
}
#ScreenConfig {
    position:fixed;
    right:375px;
    top:28px;
    width:32px;
    color:white;
    height:32px;text-transform:uppercase;
    cursor:pointer;

    background-image:url('../img/Config.png');
    background-size:24px;
    background-repeat:no-repeat;
}
#Help {
    position:fixed;
    right:310px;
    top:26px;
    width:32px;
    color:white;
    height:32px;text-transform:uppercase;
    cursor:pointer;
    background-image:url('../img/help.png');
    background-size:26px;
    background-repeat:no-repeat;
}
.positionable {
    position: absolute !important;
}
.positionable.configMode {
    border: 1px solid #00a8ec !important;
    z-index: 1000 !important;
    cursor: move !important;
}
.positionable.configMode > :not(.ui-resizable-handle) * {
    cursor: move !important;
}
/* Disable pointer events on all child elements of a positionable element in config mode */
.positionable.configMode button {
    pointer-events: none;
    cursor: move !important;
}

/* Enable pointer events on a positionable element when it's being dragged or resized */
.positionable.configMode .ui-draggable-dragging * {
    pointer-events: auto !important;
}

.positionable.configMode .ui-resizable-resizing * {
    pointer-events: auto !important;
}

#PositionConfig {
    position:fixed;
    right:446px;
    top:28px;
    width:32px;
    color:white;
    height:32px;text-transform:uppercase;
    cursor:pointer;

    background-image:url('../img/PositionConfig.png');
    background-size:24px;
    background-repeat:no-repeat;
    display: none;
}
#color-scheme {
    position:fixed;
    right: min(600px, calc(100vw - 100px));
    top:2px;
}

#color-scheme .switch {
    position: relative;
    display: block;
    width: 45px;
    height: 24px;
    margin: 24px;
}

#color-scheme .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
#color-scheme .switch .Text {
    position: absolute;
    left: 58px;
    top: 5px;
    cursor: pointer;
    color: #f1f1f1;
    width: 120px;
}
#color-scheme .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .2s;
}

#color-scheme .slider:before {
    position: absolute;
    content: "";
    height: 21px;
    width: 21px;
    left: 2px;
    bottom: 1px;
    background-color: white;
    transition: .2s;
}

#color-scheme input:disabled + .slider {
    background-color: #bfc5cd !important;
}
#color-scheme input:checked + .slider {
    background-color: #2196F3;
}

#color-scheme input:checked + .slider:before {
    transform: translateX(21px);
}

#color-scheme .slider.round {
    border-radius: 26px;
}

#color-scheme .slider.round:before {
    border-radius: 50%;
}
#User {
    position:fixed;
    right:194px;
    top:29px;
    color:white;
    text-transform:uppercase;
    padding-left:22px;
    cursor:pointer;
}
#User[LoggedIn="true"]{
    background-image:url('../img/UserLogo.png');
    background-size:16px;
    background-repeat:no-repeat;
}
#Time {
    position:fixed;
    right:12px;
    top:16px;
    color:white;
    background-image:url('../img/Clock.png');
    background-size:19px;
    background-position:0px 13px;
    background-repeat:no-repeat;
    padding-left:26px;
    text-align:center;
}
#Login {
    display:none;
    position:fixed;
    left:0px;
    top:72px;
    width:100%;
    height:100%;
    z-index:99;
}
#Login>div{
    position:fixed;
    right:170px;
    top:72px;
    padding:10px;

    background:var(--regionBoxBack);
}
#Login button {
    width:calc(100% - 40px);
    margin:10px 20px;
    height:50px;
    min-width: 250px;
}
/* ***********************  Content ******************************/
#content {
    padding-top:73px;

    overflow-y:auto;
    overflow-x:hidden;
    }
/* ***********************  Overlay ******************************/
.overlay {
    display:none;
    position:absolute;
    overflow:auto;
    top:73px;
    left:0px;
    bottom:100px;
    right:0px;
    background:rgba(110, 114, 120, 0.7);
    z-index:150;
}
.innerOverlay {
    position:absolute;
    top:75px;
    left:58px;
    right:58px;
    min-height:500px;
    border:27px solid var(--regionBoxBack);
    border-radius:19px;
    background-color:var(--detailedBackground);
    padding-bottom:100px;
    margin-bottom:40px;
    padding-left:30px;
    padding-right:30px;
}
.overlayClose {
    background-image:url('../img/Close.png');
    width:34px;
    height:34px;
    position:absolute;
    top:-43px;
    left:50%;
    margin-left:-17px;
}
.OverlayButtons {
    text-align: center;
    position: absolute;
    bottom: 10px;
    width: calc(100% - 60px);
}
.title {
    font-size:30px;
}
.subtitle {
    font-size:24px;
}
.title,.subtitle {
    color:#282f38;
    width:100%;
    text-align:center;
    margin-top:22px;
    margin-bottom:10px;
}
.titleimg {
    display:block;
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
    object-fit:contain;
    max-width:90%;
    border-radius: 15px;
}
.subtitleLeft {
    font-size:20px;
    color:#282f38;
    width:100%;
    text-align:left;
    margin-top:12px;
    margin-bottom:5px;
    }
p {
    margin-bottom:10px;
    }
/* ***********************  Footer ******************************/
#footer {
    box-shadow: inset 0px 11px 30px -16px rgba(0,0,0,0.75);
    position:fixed;
    bottom:0px;
    left:0px;
    height:110px;
    width:100%;
    background-color:#dcdcdc;
    z-index:100;
}
#left {
    position:fixed;
    bottom:0px;
    left:0px;
    height:110px;
    width:calc(100% - 130px);
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
    padding-top: 10px;
}
#right {
    position:fixed;
    bottom:0px;
    right:0px;
    height:100px;
    display:flex;
}
.menu {
    width:120px;
    height:90px;
    margin-top:0px;
    padding-top:65px;
    font-size:16px;
    color:var(--titleColor);
    text-align:center;
    z-index:20;
    display:inline-block;
}
div.menu > div {
    position:relative;
    top:-54px;
    margin-bottom:-50px;
    left:35px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border:3px solid transparent;
    background-repeat:no-repeat;
    background-position: -13px -13px;
    background-size: 70px;
    }

.menu:hover > div {
    background-color:var(--hoverColor);
}
.menuBig {
    zoom:2;
    display:inline-block;
    margin:0 auto;
}

.verticalBar {
    border-left:1px solid var(--titleColor);
    margin:10px;
    display:inline-block;
    height:50px;
    height:50px;
    padding-left:1px;
}
div#backToSelection > div {
    background-image:url('../img/iconSetMenu/001__arrow_left.png');
}
.darkMode div#backToSelection > div {
    background-image:url('../img/iconSetBright/001__arrow_left.png');
}
/* Position Menu */
#PositionMenu {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
    background: red;
    padding: 9px;
    line-height: 50px;
}
#PositionMenu button {
    width: 130px;
    margin-left:20px;
}
/* General Elements *************************************************************/
textarea {
    background-color: var(--detailedBackground);
    color: var(--standardText);
}
button,
input[type="submit"],
input[type="button"] {
    background: var(--overlayBackground);
    color: var(--lightText);
    font-size: 16px;
    margin:5px 1px;
    padding:8px 2px;
    display: inline-block;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    border: 1px solid var(--lightTextInversed);
    line-height: 1.3;
    width: 300px;
    height:45px;
    transition: box-shadow 0.2s ease-in-out;
}
button:not([disabled]),
input[type="submit"]:not([disabled]),
input[type="button"]:not([disabled]) {
    cursor:pointer;
}
button:not([disabled]):hover,
button:not([disabled]):focus-visible,
input[type="submit"]:not([disabled]):hover,
input[type="submit"]:not([disabled]):focus-visible,
input[type="button"]:not([disabled]):hover,
input[type="button"]:not([disabled]):focus-visible {
    box-shadow: 0px 0px 15px var(--shadowColor);
}
button[type="webapp"] {
    background: var(--regionBoxBack);
}
button[type="webapp"] img {
    width:100px;
}
button:active,input[type="submit"]:active,input[type="button"]:active {
    background: var(--shadowBW);
}
button[readonly="readonly"],button[disabled] {
    color:#aaa;
    background-color:var(--standardBackground);
}
button {
    vertical-align: bottom;
}
select:not([multiple]) {
    /* styling */
    display: inline-block;
    /* reset */
    margin: 0;
    box-sizing: border-box;
}


input[type="number"],
input[type="text"],
input[type="date"],
input[type="password"],
input[type="datetime-local"],
input[type="time"],
input[type="date"],
input[type="checkbox"],
select {
    background-color: var(--detailedBackground);
    color: var(--lightText);
    font-weight: 500;
    margin: 5px 0;
    box-shadow: 0 1px 3px var(--shadowBW);
    border: 1px solid #ddd;
    width: 300px;
    border-radius: 4px;
}
select[size="1"] {
    padding: 10px;
}
option {
    background-color: var(--detailedBackground);
    color: var(--lightText);
    font-weight: 500;
    border: 1px solid #ddd;
    padding: 10px;
}
option:checked {
    background-color:#00638c;
    color:white;
}
input[type=range]{
    appearance: none;
    width:265px;
    padding-top:10px;
    padding-bottom:15px;
    background:none;
}

input[type=range]::-webkit-slider-runnable-track {
    height: 7px;
    background: #bbb;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    appearance: none;
    border: none;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: var(--titleColor);
    margin-top: -7px;
}

input[type=range]:focus {
    outline: none;
}
input[type=range] + span {
    position:relative;
    top:0px;
    left:0px;
    border:4px solid #bbb;
    border-left:0px;
    border-radius:18px;
    padding:4px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}
input:disabled,
select:disabled{
    color:#a1a1a1;
}

input[type="checkbox"],input[type="radio"] {
    height: 30px;
    width: 30px;
    min-width: 30px;
    margin: 8px 5px 8px 0px;
}

/* Disable default Spinners for number inputs */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}
input[type=number] {
    border-radius:4px 0px 0px 4px;
    width: 224px;
}
input[type=number]+span,input[type=number]+span+span {
    position:relative;
    display:inline-block;
    width:45px;
    height:45px;
    line-height:45px;
    background-color: var(--detailedBackground);
    color: var(--lightText);
    font-size:18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    border: 1px solid var(--regionBoxBack);
    text-align:center;
    top:2px;
}
input[type=number]:disabled+span,input[type=number]:disabled+span+span {
    color:#a1a1a1;
}
input,select {
    font-size: 22px;
}

input[hideButtons] {
    width: 300px;
}
input,select:not([size]) {
    height:45px;
    vertical-align:middle;
}

.jsonError {
    width:400px;
    height:250px;
}
.ModifyButtons {
    position:fixed;
    bottom:110px;
    display:flex;
    justify-content:space-around;
    width:100%;
}
#HideManual {
    position: absolute;
    right: 20px;
    top: 10px;
}
@media print {
    body, #content{
        margin: 0;
        border: 0;
        padding: 0;
    }
    #header, #footer {
        display: none;
        visibility: collapse;
    }
}