/* ### HP MIDDLE MENU ### */

section.hp-middle-menu {
    padding: 0;
}

.middle-menu__content {
    background-color: #3a5a50!important;
    padding: .5rem 0;
    position: static;
    bottom: auto;
    border-radius: 10px;
    margin: 0 auto;
    width: 95%;
    align-items: flex-start;
}

.middle-menu__content ul {
    display: flex;
    list-style: none;
}

.middle-menu__content li {
    display: block;
    flex: 1;
    color: white;
    border-right: 1px solid var(--white-50);
    display: none;
    padding: 0 .1rem;
}

.middle-menu__content li:nth-child(-n+4) {
    display: list-item;
}

.middle-menu__content li:last-of-type {
    border-right: none;
}

.middle-menu__content li img {
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
    width: 18px;
    height: 18px;
    display: block;
    margin: 8px auto;
}

.middle-menu__content li:before {
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
    width: 18px;
    height: 18px;
    display: block;
    margin: 8px auto;
    display: none;
}

.middle-menu__content li:nth-of-type(1):before {
    background-image: url('/images/icons/vial-solid-white.png');
}

.middle-menu__content li:nth-of-type(2):before {
    background-image: url('/images/icons/user-solid-white.png');
}

.middle-menu__content li:nth-of-type(3):before {
    background-image: url('/images/icons/plus-circle-solid-white.png');
}

.middle-menu__content li:nth-of-type(4):before {
    background-image: url('/images/icons/briefcase-solid-white.png');
}

.middle-menu__content li:nth-of-type(5):before {
    background-image: url('/images/icons/tags-solid-white.png');
}

.middle-menu__content a,
.middle-menu__content a:visited,
.middle-menu__content span.mod-menu__heading,
.middle-menu__content span.mod-menu__separator {
    display: block;
    color: #fff;
    font-size: .7rem;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
}

/* Override to remove fixed bottom on mobile */
@media only screen and (max-width: 767px) {
    .middle-menu__content {
        position: static;
        bottom: auto;
        border-radius: 0;

                display: none;

    }
}

@media only screen and (min-width: 768px) {
    .middle-menu__content li {
        display: list-item;
    }
    .middle-menu__content a,
    .middle-menu__content a:visited,
    .middle-menu__content span.mod-menu__heading,
    .middle-menu__content span.mod-menu__separator {
        font-size: .85rem;
        text-transform: uppercase;
    }
}

@media only screen and (min-width: 900px) {
    section.hp-middle-menu {
        padding: 0;
    }
    .hp-middle-menu .container {
        width: 100%;
    }
    .middle-menu__content li img,
    .middle-menu__content li:before {
        width: 20px;
        height: 20px;
        margin: 10px auto;
    }
    .middle-menu__content {
        position: static;
        width: 100%;
        border-radius: 0;
    }
}

@media only screen and (min-width: 1200px) {
    section.hp-middle-menu {
        padding: 0;
    }
}




/* ### VERTICAL MENU ### */

.vertical-menu {
    list-style: none;
}

.vertical-menu li {
    margin: .3rem;
    padding: .3rem;
    text-transform: uppercase;
    font-weight: 600;
    background-color: var(--sky-blue-05);
    border-bottom: 2px solid #fff;
}

.vertical-menu li:hover {
    background-color: var(--sky-blue-10);
}

.vertical-menu li a {
    width: 100%;
    display: block;
}

.vertical-menu li.active {
    background-color: var(--sky-blue-10);
}

.vertical-menu .mod-menu.mod-list li {
    margin: .3rem;
    padding: .3rem;
    text-transform: uppercase;
    font-weight: 600;
    background-color: var(--sky-blue-05);
    border-bottom: 2px solid #fff;
}

.vertical-menu .mod-menu.mod-list li:hover {
    background-color: var(--sky-blue-10);
}

.vertical-menu .mod-menu.mod-list li a {
    width: 100%;
    display: block;
}

.vertical-menu .mod-menu.mod-list li.active {
    background-color: var(--sky-blue-10);
}

/* ### INLINE MENU ### */

.inline-menu {
    list-style: none;
}

ul.inline-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.inline-menu li {
    font-weight: 600;
    border: 1px solid var(--dark-blue);
    color: var(--dark-blue);
    text-align: center;
    line-height: 1.2;
    min-height: 2rem;
    min-width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inline-menu li:hover {
    background-color: var(--dark-blue);
}

.inline-menu a,
.inline-menu a:visited {
    color: var(--dark-blue);
    font-size: 1rem;
    line-height: 1.2;
    padding: .3rem .5rem;
    width: 100%;
    display: block;
}

.inline-menu li:hover a {
    color: #fff;
}

.mod-menu.mod-list {
    list-style: none;
}

.inline-menu ul.mod-menu.mod-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}

.inline-menu .mod-menu.mod-list li {
    font-weight: 600;
    border: 1px solid var(--dark-blue);
    color: var(--dark-blue);
    text-align: center;
    line-height: 1.2;
    min-height: 2rem;
    min-width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inline-menu .mod-menu.mod-list li:hover {
    background-color: var(--dark-blue);
}

.inline-menu .mod-menu.mod-list a,
.inline-menu .mod-menu.mod-list a:visited {
    color: var(--dark-blue);
    font-size: 1rem;
    line-height: 1.2;
    padding: .3rem;
    width: 100%;
    display: block;
}

.inline-menu .mod-menu.mod-list li:hover a {
    color: #fff;
}

/* ### QUICK ACCESS MENU ### */

.quick__access ul,
.quick__access ul.mod-articlescategory,
ul.quick__access {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 1em 0;
}

.quick__access li,
.quick__access .mod-articlescategory li {
    border: 1px solid var(--dark-blue);
    border-radius: 10em;
    margin: 0;
    width: auto;
    min-width: 100px;
    color: var(--dark-blue);
    text-align: center;
    line-height: 1.2;
}

.quick__access li:hover {
    background-color: var(--dark-blue);
    border: 1px solid var(--dark-blue);
}

.quick__access a,
.quick__access a:visited {
    color: var(--dark-blue);
    font-size: 1rem;
    font-weight: 600;
    padding: .25em 1em;
    display: block;
    width: 100%;
}

.quick__access li:hover a {
    color: #fff;
}

.quick__access .mod-articles-category-intro-img {
    display: none;
}

.quick__access .mod-articlescategory__item h3 {
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.header__search .quick__access {
    gap: .8rem;
    padding-top: 1.5em;
}

.header__search .quick__access h3 {
    position: relative;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
}

.header__search .quick__access h3::after {
    position: absolute;
    content: '';
    width: 10%;
    height: 2px;
    left: 50%;
    top: 110%;
    transform: translateX(-50%);
    background-color: var(--orange);
}

.header__search .quick__access li {
    font-size: .9rem;
}

.header__search .quick__access a {
    font-size: .9rem;
}