@CHARSET "UTF-8";
body,html {height:100%;}

body {
	font-family:"Roboto","Arial";
	font-size: 15px;
	padding: 0;
	margin: 0;
	background: #f4f4f4;
	cursor:default;

}

img {
	border: 0px;
}

.overlayClose, #WaitOverlayClose, .menu, #Logo {
    cursor:pointer;
    }
/* ***********************  Header ******************************/
#header {
    position:fixed;
    top:0px;
    left:0px;
    height:73px;
    width:100%;
    background-color:#282f38;
    border-bottom:5px solid #00435f;
    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;
}
#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%;
    background:rgba(110,114,120,0.6);
    z-index:99;
}
#Login>div{
    position:fixed;
    right:170px;
    top:72px;
    padding:10px;

    background:#dcdcdc;
}
#Login button {
    width:calc(100% - 40px);
    margin:10px 20px;
    height:50px;
    min-width: 250px;
}
#Login input {
    height:30px;
    margin:10px 20px;
    font-size:20px;
}
/* ***********************  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 white;
    border-radius:19px;
    background-color:#f4f4f4;
    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%;
}
.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;
}
#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:#00354b;
    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;
    background:#f4f4f4;
    border:3px solid #00354b;
    background-repeat:no-repeat;
    background-position:-4px -3px;
    }

.menu:hover > div {
    background-color:#adf;
}
.menuBig {
    zoom:2;
    display:inline-block;
    margin:0 auto;
}
.verticalBar {
    border-left:1px solid #00354b;
    margin:10px;
    display:inline-block;
    height:70px;
    padding-left:1px;
}
div#backToSelection > div {
    background-image:url('../img/iconSetMenu/001__arrow_left.png');
    background-position: -13px -13px;
    background-size: 70px;
}

/* General Elements *************************************************************/
button,input[type="submit"],input[type="button"] {
    background: linear-gradient(#f9f9f9,#e9e9e9);
    color: #333;
    font-weight: 700;
    font-size: 16px;
    margin:5px 0;
    padding:8px 2px;
    display: inline-block;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    border: 1px solid #ddd;
    line-height: 1.3;
    width: 300px;
    height:45px;
}
button:active,input[type="submit"]:active,input[type="button"]:active {
    background: linear-gradient(#e9e9e9,#f9f9f9);
}
button[readonly="readonly"],button[disabled] {
    color:#aaa;
    background-color:#eaeaea;
}
button {
    vertical-align: bottom;
}
select {
    /* styling */
    display: inline-block;
    /* reset */
    margin: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    /* Round and Arrow */
    background-image:
            linear-gradient(45deg, transparent 50%, gray 50%),
            linear-gradient(135deg, gray 50%, transparent 50%),
            radial-gradient(#ddd 70%, transparent 72%);
    background-position:
            calc(100% - 16px) 14px,
            calc(100% - 8px) 14px,
            calc(100% - 4px) 6px;
    background-size:
            8px 8px,
            8px 8px,
            22px 22px;
    background-repeat: no-repeat;
}


input[type="number"],input[type="text"],input[type="date"],select {
    background-color: #f8f8f8;
    color: #333;
    font-weight: 700;
    margin: 5px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    border: 1px solid #ddd;
    width: 300px;
    border-radius: 4px;
}
option {
    background-color: #f8f8f8;
    color: #333;
    font-weight: 700;
    border: 1px solid #ddd;
}
input[type=range]{
    -webkit-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 {
    -webkit-appearance: none;
    border: none;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: #00354b;
    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;
    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 {
    -webkit-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: #f8f8f8;
    color: #333;
    font-size:18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    border: 1px solid #ddd;
    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%;
}