.view-top-header {
    height:77px;
    background-color:var(--black-light);
    color:var(--white);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 30px;

    &.training {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 2;
        background-color:var(--white);
    }
}

.view-top-header_logo-container {
    background-image:url(/core/bypass/html5/css/2022/images/logotype_horizontal_ldpi.png);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    height:50px;
    width:200px;

    &.training {
        background-image:url(/core/bypass/html5/css/2022/images/lyssnheaderblack-cbtpro.png)
    }

    @media (width < 630px) {
        width:100px;
    }
}

.view-top-header_nav-container {
    color:var(--white);
    width:auto;
    background:none;
    box-shadow:none;
    height:auto;
    line-height:revert;

    &.training {
        color: var(--pink);
        font-family: 'Barlow', sans-serif;
    }
}

.view-top-header_nav-ul {
    font-size:14px;
    font-weight:500;
    display:flex;
    column-gap:25px;
}

.view-top-header_nav-ul > li > .view-top-header_nav-ul-support-menu {
    display:flex;
    flex-direction:column;
    position:absolute;
    background-color:var(--grey-light);
    color:var(--black-light);
    border-radius:var(--border-radius);
    border:var(--border);
    width:150px;
    margin-top:15px;
    right:-12px;
    z-index: 1;
}

.top-nav-li:not(:last-child):after {
    content: '|';
    position: absolute;
    right: -12px;
}

.top-nav-li:hover {
    text-decoration: underline;
    cursor: pointer;
}

.sub-nav-li {
    padding: 8.5px 15px;
    font-weight: 400;
    background-color: var(--white);
    transition: background-color .3s linear;
    margin-bottom: revert;
}

.sub-nav-li > a {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
}

.sub-nav-li:first-child {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.sub-nav-li:last-child {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.sub-nav-li:hover {
    background-color: var(--grey-light);
}
.sub-nav-li > a:hover {
    text-decoration: none;
}


.sub-nav-li:not(:last-child) {
    border-bottom: var(--border);
}

.hidden {
    display: none !important;
}