body {
    background: #fafbfc;
}

header .header-nav .nav-item {
    white-space: nowrap;
}

header .header-nav .nav-item .far,
header .header-nav .nav-item .fas {
    margin-left: 6px;
    margin-right: 6px;
}

@media (max-width: 768px) {
    header .container-md {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    header .header-nav .nav-link {
        padding-right: .33rem;
        padding-left: .33rem;
    }
}

#content {
    padding-top: 24px;
    padding-bottom: 24px;
}

footer.footer {
    background-color: inherit;
}

header .header-nav .nav-item.active {
    color: #146BC8;
}

header .header-brand {
    padding-left: 8px;
}

.card-img-top {
    overflow: hidden;
    background-color: #f5f5f5;
}

.card-title {
    position: relative;
}

.card-title > .fas,
.card-title > .far,
.card-title > .fal {
    position: absolute;
    top: -4px;
    right: 0;
    font-size: 1.5em;
    opacity: 0.10;
}

.signal-strength.excellent,
.signal-quality.excellent {
    color: #00B73F;
}
.signal-strength.good,
.signal-quality.good {
    color: #B8D200;
}
.signal-strength.fair,
.signal-quality.fair {
    color: #FFA700;
}
.signal-strength.poor,
.signal-quality.poor {
    color: #FF6000;
}
.signal-strength.no-signal,
.signal-quality.no-signal {
    color: #FF3000;
}

.signal-strength.value,
.signal-quality.value {
    color: #AAA;
}

.system-reports-tilemap {
    margin-bottom: .5rem;
}

.system-reports-tilemap .hour {
    display: flex;
    justify-content: space-between;
}

.system-reports-tilemap .hour .minute {
    content: ' ';
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: top;
    background-color: #eee;
    width: 1.66666666%;
    padding-bottom: 1.66666666%;
    box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.3);
}

.system-reports-tilemap .hour .minute.available {
    background-color: #0095DD;
}

.system-reports-tilemap .hour .minute.restarted {
    background-color: #DF00FF;
}

.system-reports-tilemap .hour .minute.missing {
    background-color: #F0F0F0;
}

.system-reports-tilemap .hour .minute.now {
    background-color: #FFB000;
}

.system-reports-tilemap .hour .minute:hover {
    box-shadow: inset 0px 0px 5px 1px rgba(255,255,255,0.75);
}

.camera-image-preview {
    width: 100%;
    position: relative;
    z-index: 10;
}

.camera-objects {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 11;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.camera-objects .object {
    position: absolute; 
    background-color: rgba(200, 200, 200, 0.15);
    box-shadow: 0px 0px 0px 1px rgba(255,255,255,1), inset 0px 0px 5px 0px rgba(255,255,255,0.75);
    animation: fadein 0.75s;
    opacity: 1;
}

.camera-objects:hover .object {
    animation: fadeout 0.25s;
    opacity: 0;
}

.camera-objects .object.person {
    background-color: rgba(255, 128, 42, 0.15);
    box-shadow: 0px 0px 0px 1px rgba(255,64,42,1), inset 0px 0px 5px 0px rgba(255,42,42,0.75);
}

.camera-objects .object.car {
    background-color: rgba(42, 128, 255, 0.15);
    box-shadow: 0px 0px 0px 1px rgba(42,64,255,1), inset 0px 0px 5px 0px rgba(42,42,255,0.75);
}

.object-badges .badge {
    border: 1px solid #686868;
    background-color: #888;
    font-variant: small-caps;
}

.object-badges .badge.person {
    border: 1px solid #ca1515;
    background-color: #E85353;
}

.object-badges .badge.car {
    border: 1px solid #253ad0;
    background-color: #4475C2;
}