@font-face {
    font-family: 'quicksand';
    src: url('../fonts/quicksand.ttf');
}

html {
    background-color: #f5f6fa;
    min-height: 100%;
}

body {
    min-height: 100%;
    background-color: #f5f6fa;
}

#particleJs {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
}

.material-icons-round {
    font-family: 'Material Icons Round' !important;
}

.material-icons {
    font-family: 'Material Icons' !important;
}

/* SECTION : Loader */

#loaderContainer {
    position: absolute;
    width: 450px;
    top: 50%;
    left:50%;
    margin-left: -225px;
    margin-top: -209px;
}

#wrapper {
    min-height: 100%;
}

#pageContentWrapper {
    padding-top: 41px;
    min-height: 100%;
}

#sidebarWrapper {
    position: fixed;
    height: 100%;
    left: 0px;
    top:0px;
    padding-top: 41px;
    width: 250px;
    margin-left: -250px;
}

.sidebar-show {
    margin-left: 0px !important;
}

.content-shifted {
    margin-left: 250px;
}

#eventsContainer {
    position: fixed;
    width: 50%;
    bottom: 0px;
    left: 0px;
}

#alarmsContainer {
    position: fixed;
    width: 50%;
    bottom: 0px;
    right: 0px;
}

.ea-visible-padding {
    padding-bottom: 225px;
}

div:focus,
canvas:focus
{
    outline:0;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome, Opera and Firefox */
}

.noselect::selection {
    background-color: transparent;
}

/* SECTION: Navbar */

.navbar {
    background: #ffffff;
    padding: 0px;
}

.navbar .separator {
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    height: 1px;
    background: #dee2e6;
    z-index: -1;
}

.navbar-icons {
    /*background: #f5f6fa;
    border: solid 1px #f5f6fa;
    border-radius: 10px;*/
    padding: 0px 12px;
}

.navbar-title {
    background: #f5f6fa;
    border: solid 1px #f5f6fa;
    border-radius: 10px;
    padding: 4px 15px;
}

.navbar .nav-tabs-visual .nav-item.show .nav-link, .nav-tabs-visual .nav-link {
    border-color: #dee2e6 #dee2e6 #f5f6fa;
    color: rgba(0,0,0,.70);
}

.navbar .nav-tabs-visual .nav-item.show .nav-link, .nav-tabs-visual .nav-link.active {
    color: rgba(1,87,155 ,1);
    background-color: #f5f6fa;
    border-color: #dee2e6 #dee2e6 #f5f6fa;
    font-weight: 500;
}

.navbar .nav-tabs-visual .nav-item.show .nav-link, .nav-tabs-visual .nav-link:hover {
    background: #f5f6fa;
}

.navbar .nav-tabs-visual .nav-item.show .nav-link, .nav-tabs-visual, .nav-item-visual {
    white-space: nowrap;
    overflow: hidden;
}

.close-tab-visual {
    position: absolute;
    top: 4px;
    right: 5px;
    font-size: 12px;
    color: rgba(1,87,155 ,0.8);
}

.close-tab-visual:hover {
    color: rgba(1,87,155 ,1);
    cursor: pointer;
}


/* SECTION: Modal */
.modal-header {
    background: rgba(1,87,155 ,1);
    color: #f8f9fa;
}

.modal-header .close {
    color: #f8f9fa;
}

/* SECTION: Cards */
.card-blue-header {
    background: rgba(1,87,155 ,1);
    color: #f8f9fa;
}

.card-blue-header .cbh-title {
}

.card-blue-header .nav-link {
    color: #f8f9fa;
}

.card-blue-header .nav-link .active {
    color: #343a40;
}

.card-yellow-header {
    background: rgba(255,171,0 ,1);
    color: #212121;
}

.card-yellow-header .nav-link {
    color: #212121;
}

.card-yellow-header .nav-link .active {
    color: #212121;
}

.card-gray-header {
    background: #546E7A;
    color: #f8f9fa;
}

.card-gray-header .nav-link {
    color: #f8f9fa;
}

.card-gray-header .nav-link .active {
    color: #212121;
}

.card-red-header {
    background: rgba(221,44,0 ,1);
    color: #f8f9fa;
}

.card-red-header .nav-link {
    color: #f8f9fa;
}

.card-red-header .nav-link .active {
    color: #212121;
}

.card-blue-badge {
    background: rgba(220,230,241 ,1);
    color: rgba(1,87,155 ,1);
}

.card-blue-badge.pulse {
    box-shadow: 0 0 0 0 rgba(52, 172, 224, 1);
    animation: pulse-blue 1s infinite;
}

@keyframes pulse-blue {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
    }
}


.pulse-blue-2 {
    box-shadow: 0 0 0 0 rgba(52, 172, 224, 1);
    animation: pulse-blue2 1s infinite;
}

@keyframes pulse-blue2 {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
    }    

    70% {
        box-shadow: 0 0 50px 30px rgba(52, 172, 224, 0.1);
    }

    90% {
        box-shadow: 0 0 100px 30px rgba(52, 172, 224, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
    }
}

.card-yellow-badge {
    background: #FFECB3;
    color: #FF6F00;
}

.card-yellow-badge.pulse {
    box-shadow: 0 0 0 0 rgba(255, 177, 66, 1);
    animation: pulse-yellow 1s infinite;
}

@keyframes pulse-yellow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 177, 66, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 177, 66, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 177, 66, 0);
    }
}


.pulse-yellow-2 {
    box-shadow: 0 0 0 0 rgba(255, 177, 66, 1);
    animation: pulse-yellow2 1s infinite;
}

@keyframes pulse-yellow2 {
    0% {

        box-shadow: 0 0 0 0 rgba(255, 177, 66, 1);
    }

    70% {
        box-shadow: 0 0 100px 80px rgba(255, 177, 66, 0.05);
    }

    90% {
        box-shadow: 0 0 100px 80px rgba(255, 177, 66, 0);
    }

    100% {

        box-shadow: 0 0 0 0 rgba(255, 177, 66, 0);
    }
}

.card-red-badge {
    background: #FFCDD2;
    color: #B71C1C;
}

.card-red-badge.pulse {
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
    animation: pulse-red 1s infinite;
}

@keyframes pulse-red {
    0% {

        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }

    70% {

        box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
    }

    100% {

        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

.pulse-red-2 {
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
    animation: pulse-red2 1s infinite;
}

@keyframes pulse-red2 {
    0% {

        box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
    }

    70% {
        box-shadow: 0 0 100px 80px rgba(255, 82, 82, 0.05);
    }

    90% {
        box-shadow: 0 0 100px 80px rgba(255, 82, 82, 0);
    }

    100% {

        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

.card-gray-badge {
    background: #CFD8DC;
    color: #455A64;
}

.visual-data-card {
    padding: 0px 1em;
    text-align: center;
}

.visual-data-card hr {
    margin: 0.5rem 0rem;
}

/* SECTION: Column Lists */

.column-list-item {
    height: 40px;
}

.column-list-item i {
    margin: 0px 8px 0px 0px;
    color: #343a40 !important;
}

.column-list-item span {
    color: #6c757d !important;
}

/* SECTION: Visibility */

.element-hidden {
    visibility: hidden !important;
}

/* SECTION: Table */

table tr:first-child th {
    position : sticky;
    top: 0px;
    z-index: 100;
    background: white;
    border: 0px;
}
.table-container {
    overflow-y: auto;
}

.visual-row-hover:hover {
    background : rgba(0,0,0,.02);
}

/* SECTION: Texts */

.link-visual {
    color: rgba(1,87,155 ,1);
    font-weight: 500;
}

/* SECTION: Paths */

.path-visual {
    font-size: 16px;
    background: rgba(1,87,155 ,0.1);
    color: rgba(1,87,155 ,1);
    font-weight: 500;
    padding: 0.3em 0.9em;
    margin-right: 1em;
    outline: 0px;
}

.path-visual-active {
    background: rgba(1,87,155 ,1) !important;
    color: white;
    outline: 0px;
}

.path-visual:hover {
    background: rgba(1,87,155 ,1) !important;
    color: white;
    outline: 0px;
}

.path-visual:focus {
/*    background: rgba(1,87,155 ,1) !important;
    color: white;*/
    border: 0px;
    outline: 0px;
}

/* SECTION: Visual Alerts */


.state-badge {
    position: absolute;
    top: 0px;
    bottom: -1px;
    left: 0px;
    background: transparent;
    min-width: 10px;
}

.state-badge-top {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    background: transparent;
    min-height: 5px;
    max-height: 5px;
    border-radius: 4px 4px 0px 0px;
    overflow: visible;
}

.state-badge-bottom {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    background: transparent;
    min-height: 5px;
    max-height: 5px;
    border-radius: 0px 0px 4px 4px;
    overflow: visible;
}

.state-badge-sidebar {
    left: -1px;
    min-width: 5px;
}

.state-badge-ok {
    background: rgba(0,145,234 ,1);
}

.state-badge-down {
    background: rgba(221,44,0 ,1);
}

.state-badge-error {
    background: rgba(96, 125, 139,1);
}

.state-badge-query {
    background: rgba(255,171,0 ,1);
}

.ea-badge {
    position: absolute;
    top: 0px;
    bottom: -1px;
    right: 0px;
    background: transparent;
    min-width: 10px;
}

.ea-badge-sidebar {
    left: -1px;
    min-width: 5px;
}

.ea-badge-ok {
    background: rgba(0,145,234 ,1);
}

.nav-critical-active {
    color: rgba(221,44,0 ,1);
}

.nav-warning-active {
    color: rgba(255,214,0 ,1);
}

.nav-notification-active {
    color: #0056b3;
}

/* SECTION: Badges */

.badge-visual {
    font-size: 16px;
    background: rgba(1,87,155 ,0.1);
    color: rgba(1,87,155 ,1);
    font-weight: 500;
    padding: 0.3em 0.9em;
    margin-right: 1em;
    border: none;
}

.badge-visual:hover, .badge-visual:focus {
    background: rgba(1,87,155 ,1) !important;
}

.badge-visual-na:hover, .badge-visual-na:focus {
    background: rgba(1,87,155 ,1) !important;
    color: white !important;
}

.badge-visual-red {
    background: rgba(221,44,0 ,0.1);
    color: rgba(221,44,0 ,1);
}

.badge-visual-red:hover, .badge-visual-red:focus {
    background: rgba(221,44,0 ,1) !important;
}

.badge-visual-amber {
    background: rgba(255, 111, 0, 0.1);
    color: rgba(255, 111, 0, 1);
}

.badge-visual-amber:hover, .badge-visual-amber:focus {
    background: rgba(255, 111, 0,1) !important;
}

.badge-visual-green {
    background: rgba(100,221,23 ,0.2);
    color: rgba(100,221,23 ,1);
}

.badge-visual-green:hover, .badge-visual-green:focus {
    background: rgba(100,221,23 ,1) !important;
    color: rgba(249,251,231 ,1) !important;
}

.badge-visual-gray {
    background: rgba(108,117,125 ,0.2);
    color: rgba(108,117,125 ,1);
}

.badge-visual-gray:hover, .badge-visual-gray:focus {
    background: rgba(108,117,125 ,1) !important;
    color: rgba(248,249,250 ,1) !important;
}

.badge-visual-disabled {
    background: rgba(108,117,125 ,0.2);
    color: rgba(108,117,125 ,1);
}

.badge-visual-disabled:hover, .badge-visual-disabled:focus {
    background: rgba(108,117,125 ,0.2) !important;
    color: rgba(108,117,125 ,1) !important;
}

.badge-visual-nh {
    font-size: 16px;
    background: rgba(1,87,155 ,0.1);
    color: rgba(1,87,155 ,1);
    font-weight: 500;
    padding: 0.3em 0.9em;
    margin-right: 1em;
}

.badge-visual-nh-red {
    background: rgba(221,44,0 ,0.1);
    color: rgba(221,44,0 ,1);
}

.badge-visual-nh-amber {
    background: rgba(255, 111, 0, 0.1);
    color: rgba(255, 111, 0, 1);
}

/* SECTION: Overall State Badge */

.osb {
    height: 1.90rem;
    width: 1.90rem;
    margin-left: 1rem;
}

.osb-ok {
    background: #E3F2FD;
    color: #0D47A1;
}

.osb-down {
    background: #FFEBEE;
    color: #B71C1C;
}

.osb-query {
    background: #FFFDE7;
    color: #F57F17;
}

.osb-error {
    background: #CFD8DC;
    color: #455A64;
}

.rotating {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

/* SECTION: Buttons */

.btn-header {
    color: white;
    background: rgba(255,255,255 ,0.2);
    border: 0px;
    margin: 0px !important;
}

.btn-header:hover {
    color: white;
    background: rgba(255,255,255 ,0.35);
    border: 0px;
}

.round-button {
    border-radius: 100%;
    cursor: pointer;
}

.round-button-red {
    background: rgba(221,44,0 ,0.1);
    color: rgba(221,44,0 ,1);
}

.round-button-red:hover {
    background: rgba(221,44,0 ,1);
    color: rgba(255,235,238 ,1);
}

.round-button-green {
    background: rgba(100,221,23 ,0.2);
    color: rgba(100,221,23 ,1);
}

.round-button-green:hover {
    background: rgba(100,221,23 ,1);
    color: rgba(249,251,231 ,1)
}

.no-outline,
.no-outline:active,
.no-outline:hover,
.no-outline:focus {
    outline: none !important;
}

/* SECTION: Filter Forms */

.ff-label {
    font-weight: bold;
    color: #0056b3;
}

/* Summary table bell icon */
.bell-no-events {
    color: rgba(108,117,125 ,0.5) !important
}

.bell-notification {
    color: rgba(1,87,155 ,1) !important
}

.bell-warning {
    color: rgba(255,171,0 ,1) !important
}

.bell-critical {
    color: rgba(221,44,0 ,1) !important
}

/* SECTION: Map */

.map-round-button {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
    border-radius: 100%;
    background: rgba(255,255,255);
    color: rgba(1,87,155 ,1);
    border: 0px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    height: 2em;
    width: 2em;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25em;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.map-round-button:hover {
    background: rgba(1,87,155 ,1);
    color: white;
    cursor: pointer;
}

.map-round-button:focus {
    outline: 1px solid rgba(1,87,155 ,1);
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}