.bg-dark {
    background-color: rgba(45, 52, 54, 0.95) !important;
}

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

.navbar-brand {
    font-family: 'Roboto', sans-serif;
}

.nav-link {
    color: #ffffff !important;
}

.nav-item.active > .nav-link-wrapper >  a {
    color: #aab5bf !important;
}

.nav-link:hover {
    color: #6C757D !important;
}

.btn-outline-dc {
    color: #ffffff;
    background-color: #6C7A89;
}

.btn-outline-dc:hover {
    color: #2D3436;
    background-color: #BDC3C7;
}

.btn-outline-dc:disabled {
    color: #ffffff;
    background-color: #6C7A89;
}

.modal-content {
    background-color: rgba(247, 247, 247);
    color: #2D3436 !important;
}

.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: rgba(247, 247, 247);
    color: #2D3436 !important;
    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;
    }
}