/* https://www.w3schools.com/colors/colors_picker.asp */

html, body { height: 100%; background-color: #f2f2f2; font-size: 13px; /* background: url('/images/body_bg.png') 0 0 repeat; */ }

h1, h2, h3, h4 { margin-top: 0px; }
h4 { font-size: 16px; }
h3 { font-size: 18px; }
h2 { font-size: 20px; }
h1 { font-size: 22px; }

a, a:visited { color: #54667D; text-decoration: none; }
a:hover, a:active, a:focus { color: #39424E; text-decoration: none; }

.wrap { min-height: 100%; height: auto; margin: 0 auto -60px; padding: 0 0 60px; }
.wrap > .container { padding: 0px 15px 20px; }

.page-header { margin: 0 0 10px; padding: 0 0 5px; border-bottom: none; font-weight: bold; }
.page-header-underlined { margin: 0 0 10px; padding: 0 0 5px; border-bottom: #c4c4c4 1px solid; font-weight: bold; }

.top { background-color: #152839; padding: 5px 0; color: #fff; }
.top p { margin: 0; }
.top ul { margin: 0; padding: 0; }
.top li i { color: #fff; }
.top li a { color: #fff; }
.top li a:hover { text-decoration: none; }
.top li a:hover, .top li a:hover i { color: #ffad33; transition-property: all; transition-duration: 0.3s; transition-timing-function: linear; }

.navbar-custom {
    background-color: #1c354a;
    color: #fff;
    border-radius:0;
    box-shadow: 0 .3125em .325em rgba(0 ,0, 0, .2);
    min-height: 60px;
    border: 0;
}

.navbar-brand {
    float: left;
    height: 60px;
    padding: 20px 15px;
    font-size: 18px;
    line-height: 20px;
}

.navbar-custom .navbar-nav > li > a {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.navbar-custom .navbar-nav > .active > a {
    color: #fff;
    font-weight: bold;
    background-color: #23425c;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .open > a {
    text-decoration: none;
    background-color: #23425c;
    color: #fff;
}

.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
    text-decoration: none;
    background-color: #23425c;
    color: #fff;
}

.navbar-custom .navbar-brand {
    color: #fff;
}

.navbar-custom .navbar-toggle {
    background-color: #23425c;
}

.navbar-custom .navbar-toggle .icon-bar {
  background-color: #ffffff;
}

.footer {
    height: 60px;
    background-color: #1c252c;
    color: #979797;
    border-top: 1px solid #d2d6de;
    padding: 20px;
}

.btn-default,
.btn-default:hover,
.btn-default:active,
.btn-default:visited {
    color: #ffffff !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited {
    background-color: #505f7c !important;
    color: #ffffff;
}

.connect { margin-top: 15px; }
.connect .info { margin-bottom: 15px; }
.connect .position-info { margin-bottom: 5px; }
.connect .position { width: 100%; height: 400px; border: #fff 1px solid; padding: 1px; }
.connect .pdata-info { margin: 10px 0 15px; }

.camera-list a { color: #000; }
.camera-list .info { padding: 10px 0 4px; overflow: hidden; }
.camera-list .name { float: left; width: 75%; padding: 0 0 0 5px; }
.camera-list .stats { float: right; width: 22%; text-align: right; padding: 0 5px 0 0; }

.camera-nav { margin-bottom: 10px; overflow: hidden; }
.camera-nav .nav-left { float: left; }
.camera-nav .nav-right { float: right; }
.camera-player { margin-top: 10px; }
.camera-position { position: relative; width: 100%; height: 250px; margin: 15px 0 0; padding: 1px; border: #ffffff 1px solid; }
.camera-position .label { position: absolute; font-size: 13px; color: #000; top: -25px; padding: 0; margin: 0; font-weight: normal; }

.view-info { list-style: none; overflow: hidden; }
.view-info li { float: left; margin-left: 10px; }

.weather { margin-top: 15px; }
.weather-list { overflow: hidden; list-style: none; padding: 0; margin: 0; display: flex; justify-content: flex-end; align-items: center; }
.weather-list li { margin: 0 7px 0 0; }
.weather-list li.temp { padding: 3px 0 0; font-weight: bold; font-size: 16px; }

.links { overflow: hidden; }

.save-link { float: left; margin-top: 15px; }
.social-share { float: right; margin-top: 15px; }
.social-share .share-title { margin-bottom: 5px; }

a.ssk { color: #ffffff; }

.thumbnail { position: relative; }
.sound-label { position: absolute; top: 15px; left: 15px; }
.status-label { position: absolute; top: 15px; left: 105px; }
.status-labels { position: absolute; top: 15px; left: 15px; }