/********************
CUSTOM PROPERTIES
********************/
:root {
    --red-400: #dde8ee;
    --red-400\50: rgba(221, 232, 238, 0.5);
    --red-200: #f0eccf;
    --gray-600: #3b3b3b;
    --gray-600\50: rgba(59, 59, 59, 0.5);
    --gray-400: #595959;
}

/********************
CUSTOM NAV STYLES
********************/
.headerAndNavContainer .navContainer .navContent {
    margin-block: 0 !important;
}

#navTopLevel > li {
    position: relative;
    margin-block: 0 !important;
    margin-inline: 0 !important;
    padding-inline: 24px;
    padding-block: 12px;
}

#navTopLevel > li:last-of-type {
    padding-block: 0 !important;
}

#navTopLevel > li:not(:last-of-type)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: white;
}

#navTopLevel > li:not(:last-of-type):hover {
    background-color: var(--red-400);
}

#navTopLevel > li:not(:last-of-type).active {
    background-color: var(--red-400\50);
}

#navTopLevel > li:not(:last-of-type):hover :is(a, span),
#navTopLevel > li:not(:last-of-type).active :is(a, span) {
    color: white !important;
}