/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
    color: #fff;
}

/*
 * Base structure
 */


html {
    position: relative;
    min-height: 100%;
}

body {
    margin-top: 100px;
    height: 100%;
    background-color: #2c2c2c !important;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

main > .container {
    padding: 60px 15px 0;
}


.online {
    color: #83B621;
}

.offline {
    color: #ec0404;
}

th {
    color: #b2afa9;
}

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

/* just the line */
.sparkline {
    stroke: red;
    fill: none;
}

/* line with highlight area */
.sparkline {
    stroke: red;
    fill: rgba(255, 0, 0, .3);
}

/* change the spot color */
.sparkline--spot {
    stroke: blue;
    fill: blue;
}

/* change the cursor color */
.sparkline--cursor {
    stroke: orange;
}

/* style fill area and line colors using specific class name */
.sparkline--fill {
    fill: rgba(255, 0, 0, .3);
}

.sparkline--line {
    stroke: red;
}

.progress-bar[aria-valuenow="1"],
.progress-bar[aria-valuenow="2"] {
    z-index: 1;
}

.progress-bar[aria-valuenow="0"] {
    color: gray;
    z-index: 1;
    background: transparent !important;
    box-shadow: none;
}

.progress-bar-stat[aria-valuenow^="9"]:not([aria-valuenow="9"]) {
    background: red;
}

.blinking {
    animation: blinkingText 1.2s infinite;
    font-weight: bold;
}

@keyframes blinkingText {
    0% {
        color: #ff0000;
    }
    49% {
        color: #ff0000;
    }
    60% {
        color: transparent;
    }
    99% {
        color: transparent;
    }
    100% {
        color: #ff0000;
    }
}

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

@-o-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.animate-flicker {
    -webkit-animation: flickerAnimation 2.2s infinite;
    -moz-animation: flickerAnimation 2.2s infinite;
    -o-animation: flickerAnimation 2.2s infinite;
    animation: flickerAnimation 2.2s infinite;
}

.link {
    text-decoration: underline;
    color: #fff;
}

.pulse {
    overflow: visible;
    position: relative;
}

.pulse:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: inherit;
    border-radius: inherit;
    transition: opacity .3s, transform .3s;
    animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
    z-index: -1;
}

@keyframes pulse-animation {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
        transform: scale(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

.navbar .dropdown-menu {
    background-color: #49525a;
}

.dropdown-item {
    color: rgba(255, 255, 255, 0.5);
}