.main-menu {
    display: flex;
    justify-content: space-between;
    height: 45px;
}

.main-menu-item > a {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    padding: 0 20px;

    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #FFFFFF;
    white-space: nowrap;
}

.header-menu-with-search {
    position: relative;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;

    display: none;
    background-color: #FFFFFF;

    border-top: 1px solid #E5ECF2;
    border-bottom: 1px solid #E5ECF2;

    box-shadow:
        0 8px 24px rgba(24,49,73,.06),
        0 26px 55px rgba(24,49,73,.09);
}

.mega-menu.active {
    display: block;
}

.mega-menu-block {
    display: flex;
}

.mega-menu-block a {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;

    color: #141414;

    align-items: center;
    justify-content: flex-start;
}

.second-item a img {
    height: 27px;
    width: 27px;
    margin-right: 6px;
    object-fit: contain;
}

.megamenu-left {
    flex: 0 0 312px;
    padding: 15px 52px 39px 0;

    max-height: 73vh;
    overflow-y: auto;

    margin-right: 1rem;

    background: #F8FAFC;
    border-right: 1px solid #E5ECF2;
}

.megamenu-left::-webkit-scrollbar {
    width: 4px;
}

.megamenu-left::-webkit-scrollbar-track {
    background-color: transparent;
}

.megamenu-left::-webkit-scrollbar-thumb {
    background-color: #BFD6E5;
    border-radius: 8px;
}

.megamenu-left::-webkit-scrollbar-thumb:hover {
    background-color: #0793D7;
}
.megamenu-left .second-item a {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;

    color: #30465A;

    padding: 6px 0;
    display: flex;

    border-radius: 7px;

    transition:
        color .18s ease,
        background-color .18s ease;
}

.megamenu-left .second-item a svg {
    margin: 5.5px 13px 5.5px 7px;
}

.megamenu-left .second-item a:hover {
    color: #0879B3;
    background-color: #EAF5FC;
}

.megamenu-left .second-item.active a {
    color: #0879B3;
    background-color: #E2F2FC;
    font-weight: 600;

    box-shadow: inset 3px 0 0 #0793D7;
}
.megamenu-right {
    flex: 1 1 auto;
    padding: 33px 0 0 0;

    max-height: 73vh;
    overflow-y: auto;

    background: #FFFFFF;
}

.megamenu-right::-webkit-scrollbar {
    width: 4px;
}

.megamenu-right::-webkit-scrollbar-track {
    background-color: transparent;
}

.megamenu-right::-webkit-scrollbar-thumb {
    background-color: #BFD6E5;
    border-radius: 8px;
}

.megamenu-right::-webkit-scrollbar-thumb:hover {
    background-color: #0793D7;
}

/* Переключение содержимого */

.megamenu-right .dropdown-menu-list {
    display: none;
    flex-wrap: wrap;
}

.megamenu-right .dropdown-menu-list.active {
    display: flex;
}
.mega-menu-right-column {
    flex: 0 0 calc(25% - 28px);
    padding-right: 28px;
}
.third-menu-list {
    margin-bottom: 33px;
}

.third-menu-list > a {
    font-family: 'Open Sans';
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;

    color: #20374C;

    margin-bottom: 11px;
    white-space: normal;
    display: block;

    transition: color .18s ease;
}

.third-menu-list > a:hover {
    color: #0879B3;
}
.four-menu-list > a {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;

    color: #52677A;

    margin-bottom: 9px;
    white-space: normal;
    display: block;

    transition: color .18s ease;
}

.four-menu-list > a:hover {
    color: #0879B3;
    text-decoration: none;
}
.four-menu-list span {
    position: relative;

    font-family: 'Open Sans';
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;

    text-decoration-line: underline;
    color: #0879B3;

    cursor: pointer;
    padding-right: 12px;

    transition: color .18s ease;
}

.four-menu-list span:hover {
    color: #005F94;
}
.four-menu-list span:after {
    position: absolute;
    content: '';

    width: 8px;
    height: 8px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6' fill='none'%3E%3Cpath d='M4.31216 5.22247L7.8722 1.66237C7.9546 1.58003 8 1.47011 8 1.3529C8 1.2357 7.9546 1.12578 7.8722 1.04344L7.61008 0.781267C7.43929 0.610667 7.1617 0.610667 6.99116 0.781267L4.00166 3.77077L1.00884 0.77795C0.926432 0.695609 0.816579 0.650146 0.699441 0.650146C0.582174 0.650146 0.472322 0.695609 0.389851 0.77795L0.127804 1.04013C0.0453982 1.12253 0 1.23239 0 1.34959C0 1.46679 0.0453982 1.57671 0.127804 1.65905L3.69109 5.22247C3.77376 5.305 3.88413 5.35034 4.00146 5.35008C4.11925 5.35034 4.22956 5.305 4.31216 5.22247Z' fill='black'/%3E%3C/svg%3E");

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.second-item.has-child {
    position: relative;
}

.second-item.has-child:after {
    position: absolute;
    content: '';

    right: 0;
    top: 50%;
    transform: translateY(-50%);

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='8' viewBox='0 0 6 8' fill='none'%3E%3Cpath d='M5.22234 3.68784L1.66224 0.127804C1.5799 0.045398 1.46999 0 1.35278 0C1.23558 0 1.12566 0.045398 1.04332 0.127804L0.781145 0.389915C0.610545 0.560711 0.610545 0.838302 0.781145 1.00884L3.77065 3.99834L0.777828 6.99116C0.695487 7.07357 0.650024 7.18342 0.650024 7.30056C0.650024 7.41783 0.695487 7.52768 0.777828 7.61015L1.04 7.8722C1.12241 7.9546 1.23226 8 1.34947 8C1.46667 8 1.57659 7.9546 1.65893 7.8722L5.22234 4.30891C5.30488 4.22624 5.35021 4.11587 5.34995 3.99854C5.35021 3.88075 5.30488 3.77044 5.22234 3.68784Z' fill='%23ACACAC'/%3E%3C/svg%3E");

    background-size: contain;
    background-repeat: no-repeat;

    width: 4.7px;
    height: 8px;
}

.second-item.has-child.active:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='8' viewBox='0 0 6 8' fill='none'%3E%3Cpath d='M5.22234 3.68784L1.66224 0.127804C1.5799 0.045398 1.46999 0 1.35278 0C1.23558 0 1.12566 0.045398 1.04332 0.127804L0.781145 0.389915C0.610545 0.560711 0.610545 0.838302 0.781145 1.00884L3.77065 3.99834L0.777828 6.99116C0.695487 7.07357 0.650024 7.18342 0.650024 7.30056C0.650024 7.41783 0.695487 7.52768 0.777828 7.61015L1.04 7.8722C1.12241 7.9546 1.23226 8 1.34947 8C1.46667 8 1.57659 7.9546 1.65893 7.8722L5.22234 4.30891C5.30488 4.22624 5.35021 4.11587 5.34995 3.99854C5.35021 3.88075 5.30488 3.77044 5.22234 3.68784Z' fill='black'/%3E%3C/svg%3E");

    background-size: contain;
    background-repeat: no-repeat;
}
.main-menu-item-catalog > a {
    padding: 14px 36px 14px 22px;
    transition: all .2s;
}

.main-menu-item-catalog.active > a {
    color: #0879B3;
    background: #FFFFFF;
    position: relative;

    box-shadow: inset 0 -3px 0 #0793D7;
}

.main-menu-item-catalog.active > a:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' fill='none'%3E%3Cpath d='M5.32454 4.50742L8.82896 1.00289C9.05702 0.774939 9.05702 0.406368 8.82896 0.178413C8.601 -0.0495425 8.23243 -0.0495425 8.00448 0.178413L4.49995 3.68294L0.995528 0.178413C0.767466 -0.0495425 0.399001 -0.0495425 0.171046 0.178413C-0.0570154 0.406368 -0.0570154 0.774939 0.171046 1.00289L3.67547 4.50742L0.171046 8.01195C-0.0570154 8.23991 -0.0570154 8.60848 0.171046 8.83643C0.28465 8.95014 0.434022 9.00727 0.583287 9.00727C0.732552 9.00727 0.881818 8.95014 0.995528 8.83643L4.49995 5.3319L8.00448 8.83643C8.11819 8.95014 8.26745 9.00727 8.41672 9.00727C8.56598 9.00727 8.71525 8.95014 8.82896 8.83643C9.05702 8.60848 9.05702 8.23991 8.82896 8.01195L5.32454 4.50742Z' fill='%233E8ACD'/%3E%3C/svg%3E");

    content: '';
    width: 9px;
    height: 9px;

    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    top: 50%;
    right: 19px;
    transform: translateY(-50%);
}
.sub-menu-item {
    display: none;
    position: absolute;
    top: 100%;
    width: 250px;

    background: #FFFFFF;

    border: 1px solid #E5ECF2;
    border-radius: 0 0 10px 10px;

    box-shadow:
        0 12px 28px rgba(22,48,72,.07),
        0 24px 48px rgba(22,48,72,.08);
}

.sub-menu-item a {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;

    color: #141414;

    padding: 6px 20px;
    justify-content: flex-start;
    display: flex;

    transition:
        color .18s ease,
        background-color .18s ease;
}

.sub-menu-item a:hover {
    color: #0879B3;
    background-color: #EAF5FC;
}

.sub-menu-item a img {
    max-width: 27px;
    max-height: 27px;
    margin-right: 6px;
}
.main-menu-item:hover {
    background: #F5FAFD;
}

.main-menu-item:hover > a {
    color: #0879B3;
}

.main-menu-item.has-child:hover .sub-menu-item {
    display: block;
}

.main-menu-item.not-catalog.has-child {
    position: relative;
}
.mega-menu-bg {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    z-index: -1;
    background: rgba(17,35,53,.40);
}
.four-menu-list a:nth-child(n + 5) {
    display: none;
}

.four-menu-list.active a:nth-child(n + 5) {
    display: block;
}

@media (min-width: 1025px) {

    .main-menu-item > a:focus-visible,
    .mega-menu a:focus-visible,
    .sub-menu-item a:focus-visible {
        outline: 2px solid #0793D7;
        outline-offset: -2px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .main-menu-item-catalog > a,
    .megamenu-left .second-item a,
    .third-menu-list > a,
    .four-menu-list > a,
    .sub-menu-item a {
        transition: none;
    }
}
