* {
    margin:0px;
    box-sizing: border-box;
}
:root {
    --background-color: white; /* Changing this has issues in firefox */
    --alarm-alarm: rgba(255, 0, 0, 0.589);
    --alarm-safety: rgb(184, 80, 184);
    --alarm-alarm-strong: rgb(255, 0, 0);
    --alarm-safety-strong: rgb(204, 66, 204);
}
body, html {
    height: 100%;
}
#header {
    height: 70px;
    background-color: #151515;
    display:inline-block;
    width:100%;
    position:static;
}
#header > span {
    color:white;
    position:relative;
    top:15px;
    left: 15px;
    font-size: 24pt;
}
#logo {
    position:absolute;
    right: 10px;
    margin-top: 5px;
    line-height: 60px;
    display:inline-block;
    height:60px;
}
#sidebar {
    position:fixed;
    top:70px;
    height: calc(100% - 70px);
    width: 300px;
    background-color: darkslategrey;
    z-index:20;
}
.sidebar-small {
    left: calc( 50px - 300px ); /* remainder minus width of sidebar */
    transition: all 0.1s;
}
#content {
    position: relative;
    left: 50px;
    width: calc(100% - 50px);
    height: calc(100% - 70px);
    background-color: var(--background-color);
}
.content-sidebar-open {
    left: 300px !important;
    width: calc(100% - 300px) !important;
    height: calc(100% - 70px) !important;
}
#content > iframe {
    width: 100% !important;
    height: 100% !important;
    z-index:10;
}
.sidebar-small-open {
    left: 0px;
}
.sidebar-elem {
    position:relative; /* relative to ensure .sidebar-elem-icon stays absolute to parent not document body */
    width:100%;
    height:60px;
    background-color: #252525;
    transition: all 0.3s;
    color: lightgray;
    display: inline-block;
    text-align:center;
}
.sidebar-elem:hover {
    background-color: #151515;
    color: white;
}
.sidebar-elem > span {
    line-height: 60px;
    vertical-align: middle;
    margin:0px auto;
    display: inline-block;
}
.sidebar-elem > .sidebar-elem-icon {
    height:30px;
    width: 30px;
    position:absolute;
    right: 10px;
    top:15px;
}

/* Dashboard alarms display */
#alarmsContainer {
    width:1100px;
    height:450px;
    /*border: 2px solid black;*/
}
.col2{
    width: 46%;
    height: 420px;
    margin-top: 15px;
    margin-bottom:15px;
    margin-left: 2%;
    margin-right: 0%;
    float:left;
    border-radius: 12px;
}
.alarm {
    background-color: var(--alarm-alarm);
    width: 96%;
    margin: 2%;
    border-radius: 5px;
}
.alarm > p {
    font-size: 18pt;
    padding: 10px;
}
.e-stop {
    background-color: var(--alarm-safety);
}
.drawer {
    padding-left: 40px;
    padding-top: 20px;
}
.drawer:first-child {
    padding-top: 70px;
}
.drawer > span{
    font-size: 40pt;
    color:black;
}
.drawer span:nth-child(2) {
    position:absolute;
    left: 160px;
}
#alarms > span:first-child {
    color:red;
}
#warnings > span:first-child {
    color: rgb(255, 153, 0);
}
#safety > span:first-child {
    color: rgb(189, 22, 189);
    font-weight: 600;
}
/* Dashboard sidebar with singlestat boxes */
:root {
    --singleStatContainerHeight: 100px;
    --singleStatContainerWidth: 300px;
    --singleStatNumberRight: 50px;
    --singleStatSidebarWidth: 390px;
    --singleStatContainerTextMarigin: 8px;
}
#singleStatSidebar {
    position: fixed;
    top: 70px;
    left: 50px;
    height: calc(100% - 70px);
    width: var(--singleStatSidebarWidth);
    background-color: rgb(68, 90, 90);
    z-index: 15;
}
.singleStatContainer {
    background-color: rgb(46, 66, 66);
    width: 300px;
    height: var(--singleStatContainerHeight);
    margin-top: calc(90px / 4);
    margin-left: calc(90px / 2);
    position:relative;
    border-radius: 3px;
}
.singleStatContainer.low {
    height: calc(var(--singleStatContainerHeight)  - 10px);
}
.singleStatContainer > .title {
    color: lightblue;
    margin: var(--singleStatContainerTextMarigin);
    position: absolute;
}
.title.big {
    margin-top: 20px;
    font-size: 30pt;
}
.singleStatContainer > .number {
    color: lightgreen;
    position:absolute;
    font-size: 40pt;
    right: var(--singleStatNumberRight);
    top: calc((var(--singleStatContainerHeight) - 62px) / 2)
}
.singleStatContainer > .sub.number {
    font-size: 10pt;
    line-height: 20px;
    position: absolute;
    top:74px;
    right: calc(var(--singleStatNumberRight) + 5px);
}
.number.small {
    font-size: 30pt;
    line-height: 62px;
}
.singleStatContainer > .unit {
    color: lightgreen;
    position: absolute;
    left: calc(var(--singleStatContainerWidth) - var(--singleStatNumberRight) + 5px);
    bottom: calc((var(--singleStatContainerHeight) - 62px) / 2 + 10px);
}
.singleStatContainer > .other {
    color: rgb(163, 163, 163);
    position: absolute;
    bottom: 0px;
    left: 0px;
    margin: var(--singleStatContainerTextMarigin);
    font-style: italic;
}

.singleStatContainer.orange > .number,
.singleStatContainer.orange > .unit {
    color: orange;
}
.singleStatContainer.purple > .number,
.singleStatContainer.purple > .unit {
    color: var(--alarm-safety-strong);
}
.singleStatContainer.red > .number,
.singleStatContainer.red > .unit {
    color: red;
}
.progressBarContainer {
    width: calc(var(--singleStatSidebarWidth) - 90px);
    margin-left: calc(90px / 2);
    height: 20px;
    background-color: lightgray;
    z-index: 17;
    text-align: center;
}
.progressBarContainer > .progress {
    background-color: rgb(101, 194, 224);
    height: 100%;
    z-index: 18;
    width: calc((var(--singleStatSidebarWidth) - 90px) * 0.888);
    transition: width 1s;
}
.progressBarContainer > .eta {
    display: inline-block;
    position: relative;
    top:-20px;
}

/* Map warning/alarm/safety borders */
.mapAlarmZone {
    padding:5px;
    border: 9px solid var(--alarm-alarm-strong);
    z-index:5;
}
.mapSafetyZone {
    padding:5px;
    border: 15px solid var(--alarm-safety-strong);
    z-index:5;
}