#navbarNavAltMarkup {
    background: var(--color6);
}

.modoOscuro #navbarNavAltMarkup {
    background: var(--color9);
}

#chkModoOscuro {
    cursor: pointer;
}

.navbar {
    background: var(--color1);
    background: linear-gradient(90deg, var(--color1) 0%, var(--color1) 30%, var(--color2) 50%);
}

.navbar-toggler {
    color: var(--color7);
    margin-right: 10px !important;
    margin-top: 10px !important;
}

.navbar-toggler-icon {
    background-image: none;
    width: 40px !important;
    height: 100%;
    color: white;
}

.navbar-toggler-icon::before {
    font-family: FontAwesome;
    content: "\f0c9"; /* fa-bars, fa-navicon */
    font-size: 2em;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

/*-----Opciones del Menú*/

.nav-item:active {
    background: none;
}

/*Normal*/
.dropdown-toggle::after {
    display: none;
}

.nav-link, .opcionMenu {
    color: var(--color9);
    font-weight: lighter;
    font-size: 1.3em;
}

.modoOscuro .nav-link, .modoOscuro .opcionMenu, .modoOscuro {
    color: var(--color7);
}

/*Hover y Active*/
a.nav-link:hover, a.nav-link.active,
span.nav-link:hover, span.nav-link.active,
.opcionMenu:hover, .dropdown-item.active, .dropdown-item:active {
    color: var(--color9);
}

.modoOscuro a.nav-link:hover, .modoOscuro a.nav-link.active,
.modoOscuro span.nav-link:hover, .modoOscuro span.nav-link.active,
.modoOscuro .opcionMenu:hover, .modoOscuro .dropdown-item.active, .dropdown-item:active {
    color: var(--color7);
}

/*-----SubMenu*/
.dropdown-menu {
    background: var(--color9);
    border: 1px solid !important var(--color8);
}

.modoOscuro .dropdown-menu {
    background: var(--color9);
}

.dropdown-header {
    color: var(--color7);
}

.modoOscuro .dropdown-divider {
    color: var(--color7);
    border-color: var(--color7);
}

.submenuItem {
    color: var(--color7) !important;
    font-size: 1.2em;
    cursor: pointer;
    border: none;
    background: var(--color9);
}

.noSubmenuItem {
    color: var(--color7) !important;
    font-size: 1.2em;
    border: none;
    background: var(--color9);
}

.noSubmenuItem:active, .noSubmenuItem:hover, .noSubmenuItem label:active, .noSubmenuItem label:hover {
    background: var(--color9);
}

.noSubmenuItem label {
    pointer-events: none;
}

.submenuItem:hover, .submenuItem.active, .submenuItem:active, .dropdown-item:hover, .dropdown-item.active, li:active {
    background: var(--color8);
    color: var(--color7) !important;
}



/*lg -> Large devices (desktops)*/
@media (min-width: 992px) {
    #navbarNavAltMarkup {
        background: none !important;
    }

    .nav-link, .opcionMenu {
        font-size: 1.1em;
    }

    .submenuItem {
        font-size: 1em;
    }

    .noSubmenuItem {
        font-size: 1em;
    }
}