:root {
    --darkest: #4A7A65;
    --dark: #63A388;
    --light: #83D1AF;
    --light2: #90E5C0;
    --lightest: #E6F7EF;
    --emph: #F4F4F4;
}

body, select {
    font-family: 'Albert Sans', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 300;
    background-color: var(--dark);
}

#content 
{
    height: 100%;
}

#containerDiv {
    opacity: .2;
}

.panel50 {
    padding: 10px;
    width: 50%;

    height: 100%;

    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

.panel33 {
    padding: 10px;
    width: 33%;
    float: left;
    box-sizing: border-box;
    text-align: center;
}

#videoAndMapDiv {
    width: 100%;
    height: 420px;
    text-align: center;
    overflow: hidden;
    background-color: white;
}

#videoDiv {
    height: 580px;
}

#liveViewIframe {
    width: 75%;
    height: 75%;
    border: 0;
    margin-top: 33px;
}

#mapContainer {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    min-height: 320px;
    display: flex;
    text-align: center;
}

#mapDiv {
    width: 100%;
    height: 100%;
    display: flex;
    flex: 0 0 580px;
    overflow: hidden;
}

.map {
    border: 0 !important;
    /*position: initial !important;*/
    top: 12px !important;
}

#fix {
    /*margin-left: 640px;*/
    margin-left: 580px;
    flex: 1;
}

#fix p {
    margin-left: 32px;
}

.fixHeader {
    margin: 0;
    padding: 4px;
    font-weight: 500;
}

.fixInfo {
    margin: 4px 0 12px 0;
}

.gpsCentered {
    float: none !important;
    margin: 0 auto;
    height: 100%;
}

.sectionHeader {
    font-size: 16px;
    font-weight: 600;
    color: white;
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 8px 0px 8px 0px;
    text-align: center;
    box-sizing:border-box;
}

.sectionHeader p {
    margin: 0;
    text-align: center;
}

.dark {
    background-color: var(--dark);
}

.darkest {
    background-color: var(--darkest);
}

#dataContainer {
    background-color: var(--dark);
    width: 100%;
    clear: both;
    box-sizing: border-box;
    border-top: 1px solid var(--darkest);
    overflow: hidden;
    /*position: fixed;
    bottom: 0;*/
}

#remarksContainer, #infoContainer {
    margin: 0;
}

.remarks {
    background-color: white;
    border-radius: 8px;
    padding: 4px;
    height: 160px;
    overflow-y: auto;
    text-align: left;
}

#objectData {
    width: 100%;
    text-align: left;
    background-color: white;
    border-radius: 8px;
}

#alarmContainer, #alarmSelector, #listDiv {
    background-color: white;
    border-radius: 8px;
}

#alarmSelector {
    background-color: white;
    overflow: hidden;
    padding: 4px;
}

#filterCmb {
    width: 100%;
}

#listDiv {
    background-color: white;
    height: 257px;
    overflow-y: auto;
}

tr:nth-child(odd) {
    background-color: white;
}

tr:nth-child(even) {
    background-color: var(--emph);
}

tr td:first-child {
    font-weight: 500;
}

th {
    text-align: center;
    font-weight: 500;
}

#alarmsTable th {
    background-color: var(--dark);
    color: white;
}

input, select {
    border: 0;
    background-color: white;
}

#toast {
    display: none;
    position: fixed;
    text-align: center;
    width: 240px;
    bottom: 30px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 3;
    padding: 8px;
    border-radius: 8px;
}

#filterCmb {
    font-weight: 500;
}

#Location_IsFix {
    font-size: 16px;
    font-weight: 500;
    width: 32px;
    text-align: center;
    margin-right: 24px;
}

#spinner {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 24px;
    width: 260px;
    height: 260px;
    text-align: center;
    background-color: black;
    color: white;
    z-index: 10;
}

#BatteryLevel {
    float: right;
    font-weight: initial;
}