:root {
    --bg: #FFFFFF;
    --text: #444444;
    --text-light: #FFFFFF;
    --grey: #777777;
    --primary-light: #1565C0;
    --primary: #1259A9;
    --primary-dark: #104D92;
}

.logo {
    opacity: 73.5%;
}

.modal-backdrop {
    z-index: 950;
}

.modal {
    z-index: 960;
}

html {
    height: 100%;
}

body {
    position: relative;
    min-height: 100%;
    background-color: var(--bg);
    color: var(--text);
}

header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    border-bottom: 1px solid var(--grey);
}

header.transparent {
    background: linear-gradient(to bottom, rgb(58, 58, 58) 0%, rgba(58, 58, 58, 0) 100%);
}

nav {
    padding: 16px 0;
}

.logo {
    height: 40px;
}

.btn, .navbar-light .navbar-nav .nav-link.btn {
    border-radius: 20px;
    padding: 4px 20px;
    margin: 4px;
}

.btn-color, .navbar-light .navbar-nav .nav-link.btn-color {
    background: var(--primary-light);
    color: var(--text-light);
}

section.padded {
    padding-top: 100px;
    padding-bottom: 100px;
}

section h1 {
    font-size: 40px;
}

u {
  text-decoration-color: var(--primary-light);
  text-decoration-thickness: 6px;
}

section h2 {
    font-size: 32px;
    font-weight: 700;
}

.bg-color, .bg-color-light, .bg-color-dark {
    color: var(--text-light);
}

.bg-color {
    background-color: var(--primary);
}

.bg-color-light {
    background-color: var(--primary-light);
}

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

.border-color {
    border-color: var(--primary);
}

.hr-color {
    border-top: 2px solid var(--primary-dark);
}

#pp-nav ul li .active span {
    background: #54a0ff;
}

.form-control {
    padding: 8px;
    border-width: 0;
}

.form-control, .ckeditor {
    background-color: #eee;
}

.modal-header .form-control, .modal-body.ckeditor {
    background: none;
}

.blog-header-wrapper {
    position: relative;
    min-height: 300px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.blog-header-shadow {
    height: 300px;
    background: linear-gradient(to bottom, rgba(58, 58, 58, 0) 50%, rgba(58, 58, 58, 0.65) 90%, rgb(58, 58, 58) 100%);
}

.blog-header {
    position: absolute;
    top: 65%;
    color: #fff;
}

.blog-container {
    max-width: 768px;
}

.badge {
    border-radius: 10px;
    border: 1px solid var(--primary);
    background-color: transparent;
    color: var(--primary);
    transition: all 0.3s;
}

.badge:hover {
    background-color: var(--primary);
    color: var(--text-light);
}

footer {
    background-color: var(--primary-dark);
    color: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.sf-toolbar-clearer {
    display: none !important;
}

.align-center {
    vertical-align: middle !important;
    text-align: center !important;
}

.container-image {
    position: relative;
}

.info-block {
    background-color: rgba(0, 0, 0, 0.5);
}

.image {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .info-block {
        background: none;
    }

    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        background-color: var(--primary-dark);
    }

    .container-image:hover .overlay {
        opacity: 1;
    }

    .overlay-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 16px;
        color: var(--text-light);
    }
}

.battery {
    border: 3px solid #333;
    width: 90px;
    height: 150px;
    padding: 2px;
    border-radius: 4px;
    position: relative;
    margin: 15px 0;
}

.battery:before {
    content: "";
    height: 10px;
    width: 24px;
    background: #333;
    display: block;
    position: absolute;
    top: -10px;
    border-radius: 4px 4px 0 0;
    left: 50%;
    transform: translateX(-50%);
}

.battery:after {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid #fff;
    border-radius: 2px;
}

.battery-level {
    background: #30b455;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
}

.battery-level.warn {
    background-color: #EFAF13;
}

.battery-level.alert {
    margin: 0!important;
    background-color: #e81309;
}

@keyframes flashing {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.battery-level.alert:before {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%3E%3C%2Fg%3E%20%3Cpath%20fill%3D%22%23e81309%22%20d%3D%22M17.927%2012l2.68-10.28c0.040-0.126%200.060-0.261%200.060-0.4%200-0.726-0.587-1.32-1.314-1.32-0.413%200-0.78%200.187-1.019%200.487l-13.38%2017.353c-0.18%200.227-0.287%200.513-0.287%200.827%200%200.733%200.6%201.333%201.333%201.333h8.073l-2.68%2010.28c-0.041%200.127-0.060%200.261-0.060%200.4%200.001%200.727%200.587%201.32%201.314%201.32%200.413%200%200.78-0.186%201.020-0.487l13.379-17.353c0.181-0.227%200.287-0.513%200.287-0.827%200-0.733-0.6-1.333-1.333-1.333h-8.073z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
    background-repeat: no-repeat;
    background-size: 32px;
    height: 32px;
    width: 32px;
    margin: -75px 0 0 10px;
    content: "";
    display: inline-block;
    position: absolute;
    animation: flashing 1.5s infinite;
}

.picture {
    width: 512px;
    height: 384px;
}