:root {
    --primary-text-color: # primary-text-color;
    --primary-background-color: # primary-background-color;
    --primary-border-color: # primary-border-color;
    --primary-link-color: # primary-link-color;
    --secondary-background-color: # secondary-background-color;
    --secondary-text-color: # secondary-text-color;
    --status-available: # status-available;
    --status-informational: # status-informational;
    --status-degraded: # status-degraded;
    --status-unavailable: # status-unavailable;
    --status-maintenance: # status-maintenance;
}

#page-wrapper { background-color: var(--primary-background-color) }


.navbar { background-color: var(--primary-background-color) !important; }

.top-navigation .nav > li a:hover,
.top-navigation .nav > li a:focus,
.tooltipster-sidetip.tooltipster-shadow .tooltipster-box,
.dropdown-menu, .historygrid tbody tr:hover { background-color: var(--secondary-background-color); }

.search,
.btn-arrow,
.btn-options,
.form-control {
    background-color: var(--primary-background-color) !important;
    color: var(--primary-text-color) !important;
}

.modal-content {
    background-color: var(--secondary-background-color) !important;
    border-color: var(--primary-border-color) !important;
    box-shadow: 0 0 5px 1px var(--primary-border-color) !important;
}


.panel {
    background-color: var(--secondary-background-color) !important;
    border-color: var(--primary-border-color) !important;
    box-shadow: 0 0 5px 1px var(--primary-border-color) !important;
}

.ibox-title {
    background-color: var(--secondary-background-color);
    border-color: var(--primary-border-color);
    color: var(--secondary-text-color);
}

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

.btn-white { background-color: var(--primary-background-color) !important; }

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

.fa-chevron-up, .fa-chevron-down, .fa-expand { color: var(--secondary-text-color) }


.footer-brand a { color: var(--primary-text-color) }

.component-uptime-from { color: var(--primary-text-color); }

.text-secondary.component-uptime-to { color: var(--primary-text-color) !important; }

.component-uptime-percentage { color: var(--primary-text-color); }

.subscribe-link {
    background-color: var(--primary-background-color) !important;
    color: var(--primary-text-color) !important;
}

.card,
.search-result-item,
.select-dropdown,
.components-dropdown,
.groups-dropdown {
    background-color: var(--secondary-background-color) !important;
    color: var(--primary-text-color) !important;
}

.dropdown-menu > li > a:hover,
.search-result-item:hover { background-color: var(--primary-background-color) !important; }

#filter-result label { color: var(--primary-text-color) !important; }

.btn-link:hover { color: var(--primary-link-color) !important; }

body { color: var(--primary-text-color); }

a { color: var(--primary-link-color) !important; }

table, td, th, .border { border-color: var(--primary-border-color) !important; }

table > thead > tr > th {
    background-color: var(--primary-background-color) !important;
    color: var(--primary-text-color);
}

table > tbody > tr > td { color: var(--primary-text-color); }

.component-available { color: var(--status-available); }

.component-informational { color: var(--status-informational); }

.component-degraded { color: var(--status-degraded); }

.component-unavailable { color: var(--status-unavailable); }

.component-maintenance { color: var(--status-maintenance); }

.status-available { background-color: var(--status-available); }

.status-degraded { background-color: var(--status-degraded); }

.status-informational { background-color: var(--status-informational); }

.status-unavailable { background-color: var(--status-unavailable); }

.status-maintenance { background-color: var(--status-maintenance); }