/* temporal to be removed once we update theme config */
.page-header{
    background-color: white !important
}
.page-header .dnd-section {
    padding: 0 !important;
}
.page-header .dnd-section > .row-fluid {
    display:flex;
    min-height: 65px
}
.logo {
    height: 25px;
}



:where([role=menu],[role=menubar]){
    padding: 0;
    margin: 0;
}
:where([role=menu],[role=menubar])>.menu-li {
    list-style: none;
}

.menu-a{
    align-items: center;
    display: flex;
    /*height: 100%;*/
    cursor: pointer;
    color: var(--ele-color);
    font-size: var(--header-link-font-size, inherit);
    font-style: var(--header-link-font-style, inherit);
    font-weight: var(--header-link-font-weight, inherit);
    line-height: 1.2em;
}
:not(.cta_button).menu-a{
    --ele-color: var(--header-link-color);
}
.menu-a .menu-a-desc{
    --ele-color: #484f72;
    display: block;
    font-size: .75rem;
    font-weight: 400;
    margin-left: 0;
    margin-top: .2em;
    line-height: 1rem;
}
.no-js .menu-a.depth-1:is(:hover,:focus),
.js .menu-a.depth-1[aria-expanded="true"]){
    --ele-color: var(--header-link_hover-color);
}
.js .menu-a.depth-1:not(.active)[aria-expanded=false]:focus{
    background-size: 0;
}
.submenu-wrapper{
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease-in-out;
}
.submenu-wrapper .menu-a{
    line-height: 1em;
    font-size: .875rem;
    margin-bottom: .5rem;
    border-radius: 8px;
}

[aria-expanded=true] ~ .submenu-wrapper{
    max-height: calc(100vh - var(--header-height) - 1rem);
}
.menu-wrapper .icon{
    pointer-events: none;
    font-size: var(--header-link-font-size);
    margin-right: .5rem;
    flex-shrink: 0;
   /*margin-bottom: .5rem;*/
}
.menu-wrapper .depth-1 > .icon:not(.icon-has-children){
    font-size: 1.25rem;
}
.menu-wrapper .icon-has-children {
    font-size: .6em;
    margin: .2rem 0 0 .5rem;
}
[aria-expanded] .icon-has-children {
    transform: rotate(0);
    transition: transform .4s;
}
[aria-expanded=true] .icon-has-children {
    transform: rotate(180deg);
}

.menu-a[data-type="blue"]{
    --ele-color: var(--typo-link-color);
}

.menu-active .page-body {
    filter: contrast(0.9);/*blur(5px);*/
}

.multilingual-wrapper,
.multilanguage {
    display: flex;
    width: max-content;
    align-items: center;
    justify-content: center
}


.multilingual-wrapper .icon-has-children {
    display: none
}

.multilanguage-list {
    background-color: transparent;
    margin: 0;
}

.menu-wrapper .icon.lang {
    margin-right: .1em;
    font-size: 1.25rem;
}
.multilanguage-item {
    display: inline-block;
    list-style:none;
}

.header-container .multilanguage {
    align-items: baseline;
    background: transparent;
    color: var(--header-link-color);
    display: flex;
    margin-bottom: 0;
    /*padding-top: 1rem;*/
    font-size: .6rem;
    text-transform: uppercase;
}
.multilanguage {
    position: absolute;
    margin-right: -3rem;
    /*margin-top: .1rem;*/
    z-index: 1;
}

.page-header .multilingual-wrapper a{
    font-size: .6rem;
    overflow: hidden;
    vertical-align: sub;
    display: flex;
    align-items: self-end;
    text-transform: uppercase;
    padding: 1rem .5rem;
}
/*
.page-header .multilanguage-link .lang,
.page-header .multilingual-menu .lang {
    font-size: 1.2rem;
    margin-right: .1em;
    vertical-align: initial;
    width: 1.2rem
}
*/
.multilanguage-link {
    padding: .4rem 0;
    
    clip-path: polygon(0 0, 0 0,0 100%,0 100%);
    transform: translateX(-100%);
    max-width: 0;
    pointer-events: none;
    transition: max-width .4s ease-in-out,
                opacity .4s .1s ease-in-out,
                clip-path .4s .1s ease-in-out,
                transform .4s .1s ease-in-out;
}

.multilanguage-item:not(.active)>.multilanguage-link:not(.active,:hover,:focus) {
    filter: grayscale(1);
    --ele-color: #bdc8d4;
}
.no-js .multilingual-wrapper:focus-within .multilanguage-link,
.js .multilingual-wrapper [aria-expanded=true] ~ .multilanguage .multilanguage-link {
    max-width: 50px;
    padding-inline: .4rem;
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0)
}
.js .search-wrapper ul.hs-search-field__suggestions:empty {
    display: none;
}
.hs-search-field__suggestions{
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 1rem 0;
    margin: 0;
    transform: translateY(10px);
}
.hs-search-field__suggestions:empty{
    padding:0
}
.search-wrapper ul.hs-search-field__suggestions {
    position: absolute;
     padding: 1rem;
    pointer-events: none;
    /* top: var(--header-height); */
    visibility: hidden;
    list-style: none;
    width: max-content;
    max-width: 600px;
    left: initial;
    right: 0;
    /*margin-left: -2.5rem; */
    /* for mobile scroll faking */
    z-index: -1; 
    /*touch-action: none;*/
}

.no-js .search-wrapper:is(:focus,:focus-within) .hs-search-field__suggestions,
.js [aria-expanded="true"] ~ .hs-search-field--open .hs-search-field__suggestions {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
input[type="search" i]::-webkit-search-cancel-button{
    all: initial;
    width: 1rem;
    height: 1rem;
    -webkit-user-modify: read-only !important;
    user-select: none !important;
    flex: 0 0 auto;
    background-image: url('data:image/svg+xml,<svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M7 1.17157L1.34315 6.82842" stroke="%231D0058" stroke-linecap="round"/><path d="M1.29297 1.17157L6.94982 6.82842" stroke="%231D0058" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}

.hs-search-field__suggestions .result-item {
    border: 0;
    margin: 0;
    list-style: none;
    padding: 0;
}

.hs-search-field__suggestions .search-result {
    display: block;
    background: #F9FAFE;
    box-shadow: 2px 2px 4px 0 rgba(0,0,0,0);
    padding: 4px 1rem;
    transition: background-color .4s;
    border-radius: 10px;
    font-size: .8rem;
    --ele-color: inherit;
}

.search-result .a{
    font-size: 1rem;
    line-height: 1rem;
    color: var(--header-link-color)
}
.search-result-desc {
    margin-block: .15rem;
    font-size: .88rem;
}
.hs-search-field__suggestions .search-result:hover {
    background-color: #F0F3FF;
    box-shadow: 2px 2px 4px 0 rgba(0,0,0,.1);
}

.hs-search-field__suggestions .search-result:hover .a{
    background-size: 0;
}
.hs-search-highlight,
.hs-highlight-html{
    --ele-color: var(--typo-link_hover-color);
}




.search-wrapper {
    width: max-content;
    display: flex;
    align-items: center;
    align-self: flex-end;
    z-index: 1;
    max-width: calc(100% - 4rem);
    transform: translateY(0);
    transition: .4s width .4s;
}
.hs-search-field{
    width: auto;
}
.search-wrapper [aria-expanded=false] ~ .hs-search-field {
    width: 0 !important;
}
.search-wrapper .hs-search-field [type=search], /*remove if you want to use it even with no-active menu */
.search-wrapper .hs-search-field [type=search] {
    border: 0;
    padding: 0;
    transition: .4s width;
    width: 0;
}

.js .search-wrapper [aria-expanded="true"] ~ .hs-search-field input[type=search],
.no-js .search-wrapper:is(:focus,:focus-within) ~ .hs-search-field input[type=search] {
    background-color: #f0f3ff;
    border: 0;
    color: var(--dark_blue);
    font-size: .9em;
    font-weight: 700;
    /*margin-top: .3em;*/
    width: 350px;
    max-width: 90vw;
    font-weight: 400;
    font-size: .875rem;
    line-height: 1.5em;
    padding: .55rem .8rem;
}
[data-type="card"] .icon {
    font-size: 2rem;
}
.menu-a[data-type="card"] {
    display: flex;
    background-color: var(--off_white);
    border-radius: 6px;
    transition: .4s
}

.menu-a:not([data-type="blue"],.depth-1):hover {
    background-color: #F0F3FF;
}
.menu-a:is(.depth-1[aria-expanded="true"],.depth-1:hover){
    --ele-color: var(--primary);
}
@media (max-width: 1269px){
    .page-header .logo > #hs-link-header_logo_hs_logo_widget{
        position: relative;
    }
    .page-header .logo > #hs-link-header_logo_hs_logo_widget,
    .page-header .menu-button{
        z-index: 9;
    }
    .cm.menu{
        z-index: 9;
        padding: 0;
        overflow-y: hidden;
        transition: height .4s, visibility .4s ease-in-out;
        display: block;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        height: 0;
        background: #fff;
        pointer-events: none;
        visibility: hidden;
    }
    .menu-wrapper {
        display: flex;
        flex-wrap: wrap;
        min-height: 100%;
        flex-direction: column;
        position: relative;
        transition: .4s padding-top;
    }
    #menu-toggle:checked ~ .page-header .cm.menu{
        height: calc(100vh - var(--header-height));
        padding: .5rem 1rem 3rem;
        overflow-y: auto;
        pointer-events: auto;
        visibility: visible;
    }
    .menu-a,
    .col-header {
        padding: .75rem 1rem;
    }
    .menu-a{
        background-size: 0 !important; /* this is to remove hover line */
        display: flex;
    }

    .menu-a.depth-1{
        border-bottom: 1px solid #BDC8D4;
        position: relative;
    }
    .menu-a.depth-1[aria-expanded="true"]{
        border-color: var(--primary);
        position: sticky;
        top: -8px;
        background-color: var(--white);
    }
    .menu-li:is(.search-wrapper,.multilingual-wrapper,.no-line) .menu-a.depth-1{
        border: none;
    }
    .icon-has-children {
        position: absolute;
        right: 1rem;
        top: calc(50% - .5rem);
    }

    .menu-button {
        aspect-ratio: 1;
        color: var(--header-link-color);
        cursor: pointer;
        display: block;
        height: 100%;
        position: absolute;
        right: .5rem;
        top: 0;
        z-index: 2;
    }
    
    .menu-button span {
        background: var(--header-link-color);
        border-radius: 3px;
        width: 1rem;
        height: 2px;
        transition: .4s cubic-bezier(.68,-.6,.32,1.6);
        right: .4rem;
        left: calc(50% - .6rem);
        display: block;
        position: absolute;
    }
    .menu-button>span:nth-of-type(1){
        top: calc(50% - 8px);
    }
    .menu-button>span:nth-of-type(2){
        top: calc(50%)
    }
    .menu-button>span:nth-of-type(3){
        top: calc(50% + 8px);
    }
    #menu-toggle:checked~.page-header .menu-button>span:first-of-type {
        transform: rotate(45deg) translate(10px,7px);
        transform-origin: center;
        top: calc(25% + 4px);
        height: 1.5px;
    }
    #menu-toggle:checked~.page-header .menu-button>span:nth-of-type(2) {
        transform: rotate(-45deg);
        transform-origin: center;
        height: 1.5px;
    }
    #menu-toggle:checked~.page-header .menu-button>span:nth-of-type(3) {
        transform-origin: center;
        transition: width;
        width: 0
    }

    .submenu-wrapper{
        flex-wrap: nowrap;
        flex-direction: column;   
        height: auto;
    }
    .submenu-wrapper,
    .menu-col{
        margin: 0;
        width: 100%;
    }
    .submenu-wrapper.menu-col{
        display: flex;
        align-items: stretch;
        flex-direction: column;
    }
    .submenu-footer{
        display: none;
    }
    .col-header.empty{
        display: none;
    }
    .col-header {
        margin-block: 1rem 0;
        font-size: 1rem;
        letter-spacing: 2px;
        font-family: 'Poppins';
    }
    [aria-expanded=true] ~ .submenu-wrapper{
        max-height: calc(700vh - var(--header-height) - 1rem);
    }
    
    li:not(.search-wrapper,.multilingual-wrapper,.only-icon,.cta-wrapper).menu-li {
        width: 100%;
    }
    
    .search-wrapper ~ .menu-li {
        position: fixed;
        top: calc(100vh - 3rem);
        z-index: 2;
        background-color: inherit;
        display: flex;
        width: max-content;
        margin-left: calc(3.3rem * var(--ele-pos,0));
        transition: transform .4s var(--ele-transition-d, .4s);
        transform: translateY(100px);
    }
    #menu-toggle:checked ~ .page-header .search-wrapper ~ .menu-li{
        
        transform: translateY(0);
    }
    
    
    .menu-li.multilingual-wrapper{
        order: 3;

    }

    .search-wrapper {
        order: -1;
        top: .8rem;
        position: fixed;
        right: 5rem;
        /* left: 0; */
        width: max-content;
        display: flex;
        /*flex-wrap: wrap;*/
        /* flex-direction: row-reverse; */
        align-items: center;
        align-self: flex-end;
        z-index: 2;
        max-height: var(--header-height);
        max-width: calc(100% - 4rem);
        transition: .4s width .4s, .4s transform .8s;
        transform: translateY(-100px);
        transition-timing-function: ease-in-out;
    }
    #menu-toggle:checked ~ .page-header .search-wrapper {
        transform: translateY(0);
    }
    /*
    .search-wrapper:focus-within{
        width: 100%;
    }
    */
    .search-wrapper > .depth-1 {
        padding: .5rem;
        flex-shrink: 0;
    }

    .search-wrapper ul.hs-search-field__suggestions{
        max-height: calc(100vh - var(--header-height) - 1rem);
        display: flex;
        justify-content: stretch;
        background-color: #fff;
        /*box-shadow: 4px 4px 4px 0px #484F7226;*/
        border-radius: 12px;
        /*left: initial;
        width: auto;*/
        max-width: 100vw;
        left: initial;
        right: -3rem;
        max-width: 100vw;
    }
    
    .page-header .cta-wrapper {
        width: max-content;
        margin-left: auto;
        flex-grow: 1;
        order: 3;
        right: 2rem;
    }
    .page-header .cta-wrapper .cta_button{
        width: max-content;
        float: right;
        margin-left: auto;
    }
    
    .menu-li.multilingual-wrapper:before {
        content: "";
        width: 100vw;
        position: fixed;
        background: #fff;
        height: 4rem;
        bottom: -1rem;
        left: -2rem;
        pointer-events: none;
    }
    .menu-a[data-type="card"]{
        width: max-content;
    }

}

    @media (min-width: 1270px){ /* desktop 1270px */
        #top-nav-search-menu-mobile{display: none !important;}
        .page-header .menu{
            display: block;
            flex-grow: 1;
        }
        .menu-wrapper,
        .submenu-wrapper.menu-col{
            display: flex;
            align-items: stretch;
            flex-direction: column;
        }
        .menu-wrapper{
            flex-flow: row;
            align-items: flex-end;
            width: 100%;
        }
        .menu-a:where(:not(.cta_button)).depth-1{
            padding: 1rem .5rem
        }
        .menu-li.cta-wrapper{
            align-self: center;
            /*margin-top: -.7rem;*/
        }

        .submenu-wrapper .menu-a{
            background-size: 0 !important; /* this is to remove hover line */
            padding: .5rem;
        }
        .menu-wrapper > .menu-li:hover > .menu-a:before,
        .menu-a[aria-expanded=true]:before {
            content: "";
            width: 100%;
            height: 2rem;
            position: absolute;
            top: 100%;
            left: 0;
        }
        .submenu-wrapper{
            position: absolute;
            top: var(--header-height);
            left: 50%;
            transform: translate(-50%, 10px);
            display: flex;
            flex-direction: row;
            justify-content: stretch;

            background-color: #fff;

            max-height: calc(100vh - var(--header-height) - 1rem); /* cancel mobile transition */
            /*box-shadow: 4px 4px 4px 0px #484F7226;*/
            border-radius: 12px;

            visibility: hidden;
            /*opacity: 0; this breaks animations API? */
            pointer-events: none;
            /*max-width: 0;*/

            width: min(calc((250px * var(--cols)) + 2rem), 90vw);
            max-width: 100vw;

        }
        .no-js .submenu-wrapper{
            transition: .4s opacity, .4s width, .4s height;
        }
        .no-js [aria-expanded=true] ~ .submenu-wrapper{
            animation: animation-menu-left;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        [aria-expanded=true] ~ .submenu-wrapper{
            /*
            animation: animation-menu-left;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            */
            padding-bottom: 3rem;
        }
        /*
        .hs-search-field{
            padding-bottom: .75rem;
        }*/
        :is(.search-wrapper,.multilignaul-wrapper,.only-icon) .menu-a.depth-1 {
            padding-inline: 1rem;
        }
        .search-wrapper{
            margin-left: auto;
            align-self: center;
        }
        .search-wrapper ul.hs-search-field__suggestions{
            right: -100%;
            display: flex;
            flex-wrap: wrap;
        }


        .page-header .multilingual-wrapper a{
            /*padding: .5rem .5rem 1rem;*/
            transition: .4s;
        }
        .page-header .multilingual-wrapper .depth-1[aria-expanded=true] {
            margin-right: 3rem;
        }

        .col-wrapper{
            /*width: calc(250px * var(--col-size, 1));*/
            width: calc(100% / var(--cols));
            padding: 1rem 1rem;
        }
        [aria-expanded=true] ~ .submenu-wrapper .col-wrapper{
            max-height: 100%;

        }
        .no-js [aria-expanded=true] ~ .submenu-wrapper .col-wrapper,
        [aria-expanded=true] ~ .submenu-wrapper.active .col-wrapper{
            overflow-y: auto;
        }
        .col-header{
            font-family: 'Poppins';
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            letter-spacing: 2px;
            padding: 0 .5rem 1rem;
        }
        .menu-col {
            margin: 0;
        }
        .submenu-item .icon:not(.icon-has-children) {
            font-size: 1.5rem;
            margin-right: .5rem;
        }

        .submenu-footer{
            bottom: 0;
            position: absolute;
            padding-left: 1rem;
            width: 100%;
            background: #F7F9FF;
        }
        .submenu-footer .menu-a{
            margin: 0;
            padding: .75rem .5rem;
        }
}