html, body {
    background: #2D3436;
    margin: 0;
}

.bg-dark {
    background-color: var(--nav-bg) !important;
}

.navbar {
    font-family: 'Roboto', sans-serif;
    font-size: 16px !important;
}

.navbar-brand {
    font-family: 'Roboto', sans-serif;
    color: var(--nav-brand) !important;
}

.nav-link {
    color: var(--nav-text) !important;
}

.nav-item.active > .nav-link-wrapper >  a {
    color: var(--nav-active) !important;
}

.nav-link:hover {
    color: var(--nav-text-hover) !important;
}

.btn-outline-dc {
    color: var(--btn-dc-text);
    background-color: var(--btn-dc-bg);
    border: 1px solid var(--btn-dc-border);
}

.btn-outline-dc:hover {
    color: var(--btn-dc-hover-text);
    background-color: var(--btn-dc-hover-bg);
}

.btn-outline-dc:disabled {
    color: var(--btn-dc-text);
    background-color: var(--btn-dc-bg);
}

.modal-content {
    background-color: var(--modal-bg);
    color: var(--modal-text) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--modal-border);
}

.modal-title {
    color: var(--modal-text);
}

.dropdown-menu {
    background-color: var(--nav-dropdown-bg);
    border: 1px solid var(--nav-dropdown-border);
}

.dropdown-item {
    color: var(--nav-dropdown-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--nav-dropdown-text);
    background-color: var(--nav-dropdown-hover-bg);
}

.ui-widget-content {
    border: 1px solid #dddddd;
    background: #fff;
    display: inline-block;
}

/* nav hover popup */

.nav-link-wrapper {
    position: relative;
}

/* Popup hidden by default */
.nav-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--nav-dropdown-bg);
    color: var(--nav-dropdown-text) !important;
    border: 1px solid var(--nav-dropdown-border);
    padding: 10px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1000;

    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Desktop only */
@media (hover: hover) and (pointer: fine) {
    .nav-link.active:hover + .nav-popup {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }
}

/* Explicitly disable on touch devices */
@media (hover: none), (pointer: coarse) {
    .nav-popup {
        display: none !important;
    }
}

/* Priority+ navbar overflow */

/* Keep inline cemetery names on one line so the greedy layout can measure widths */
.navbar-expand-lg .navbar-nav .nav-cemetery > .nav-link-wrapper > .nav-link {
    white-space: nowrap;
}

/* Cemetery items relocated into the overflow dropdown render as menu items */
.nav-overflow-menu .nav-cemetery {
    display: block;
}

.nav-overflow-menu .nav-cemetery > .nav-link-wrapper > .nav-link {
    display: block;
    padding: 0.35rem 1.5rem;
    white-space: nowrap;
    color: var(--nav-dropdown-text) !important;
}

.nav-overflow-menu .nav-cemetery > .nav-link-wrapper > .nav-link:hover {
    color: var(--nav-dropdown-text) !important;
    background-color: var(--nav-dropdown-hover-bg);
}

.nav-overflow-menu .nav-cemetery.active > .nav-link-wrapper > .nav-link {
    color: var(--nav-active) !important;
}

/* Hover detail popups make no sense inside the dropdown */
.nav-overflow-menu .nav-popup {
    display: none !important;
}