[data-v-headerSearch]:host,
[data-v-headerSearch]:root {
    --brand-blue-dark-100: #1c2541;
    --brand-blue-brand-100: #007bb6;
    --brand-blue-brand-040: #99cae2;
    --brand-yellow-100: #f7d147;
    --accent-active-blue-100: #2997ff;
    --accent-active-blue-010: #eaf5ff;
    --bw-pure-white: #fff;
    --bw-grey-140-body: #555860;
    --bw-black: #000;
    --badges-blue-badge: #5a60f6;
    --badges-yellow-badge: #d1db1d;
    --bg-bg-grey-040: #e5e5e5;
    --background-blue-020: #f0f5f8;
    --3rd-redorange: #bb3e03;
    --2nd-green-02080: #519d49;
    --2nd-green-02100: #26851c;
    --2nd-green-02010: #e9f3e8;
    --base-turquoise: #247985;
    --bg-bg-bisque-010: #faf9f8;
    --bg-bg-blue-040: #e2ebf0;
    --base-amethyst: #815ac0;
    --bg-bg-blue-010: #f8fafb
}

.contrast-on[data-v-headerSearch] {
    --brand-yellow-100: #007bb6;
    --accent-active-blue-100: #1c2541;
    --accent-active-blue-010: #fbfcfd;
    --brand-blue-brand-040: #007bb6;
    --badges-blue-badge: #007bb6;
    --badges-yellow-badge: #007bb6;
    --2nd-green-02080: #007bb6;
    --2nd-green-02100: #007bb6;
    --2nd-green-02010: #fbfcfd;
    --3rd-redorange: #007bb6;
    --base-turquoise: #007bb6;
    --bg-bg-bisque-010: #fbfcfd;
    --bg-bg-blue-040: #fbfcfd;
    --bg-bg-blue-010: #fbfcfd;
    --text-color: #1c2541;
    --bw-grey-140-body: #1c2541;
    --2nd-violet-02020: #fbfcfd;
    --3rd-blueviolet: #1c2541
}

.header-search[data-v-headerSearch] {
    position: relative
}

@media(min-width:1024.02px) {
    .header-search[data-v-headerSearch] {
        width: 480px
    }
}

.header-search__dropdown[data-v-headerSearch] {
    background-color: #fff;
    padding: 16px
}

@media(min-width:1024.02px) {
    .header-search__dropdown[data-v-headerSearch] {
        margin-left: -1.5px;
        position: absolute;
        width: calc(100% + 3px);
        z-index: 1
    }
}

.header-search__placeholder-text[data-v-headerSearch] {
    color: var(--brand-blue-brand-100, #007bb6);
    font-size: 16px;
    font-weight: 700;
    left: 16px;
    line-height: 18px;
    position: absolute;
    visibility: visible
}

@media(min-width:1024.02px) {
    .header-search__placeholder-text[data-v-headerSearch] {
        font-size: 14px
    }
}

.header-search-list__title[data-v-headerSearch] {
    color: var(--brand-blue-brand-100, #007bb6);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.92px;
    line-height: 14px;
    margin-bottom: 8px;
    text-transform: uppercase
}

.header-search-list__item[data-v-headerSearch] {
    align-items: center;
    display: flex;
    margin-bottom: 8px
}

.header-search__icon[data-v-headerSearch] {
    cursor: pointer;
    height: 32px;
    position: absolute;
    right: 12px
}

.header-search__remove[data-v-headerSearch] {
    cursor: pointer;
    height: 24px;
    position: absolute;
    right: 52px
}

.header-search__mobile-text[data-v-headerSearch] {
    margin-bottom: 26px
}

.header-search__mobile-text .h3[data-v-headerSearch] {
    color: var(--brand-blue-brand-100, #007bb6)
}

@media(min-width:1024.02px) {
    .header-search__mobile-text[data-v-headerSearch] {
        display: none
    }
}

.header-search .input-container[data-v-headerSearch] {
    align-items: center;
    display: flex;
    position: relative;
    width: 100%
}

@media(min-width:1024.02px) {
    .header-search .input-container[data-v-headerSearch] {
        max-width: 480px
    }
}

.header-search input[data-v-headerSearch] {
    background: var(--bw-pure-white, #fff);
    border: 1px solid var(--bg-bg-blue-060, #d3e1e9);
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    height: 48px;
    padding: 12px 80px;
    width: 100%
}

@media(min-width:1024.02px) {
    .header-search input[data-v-headerSearch] {
        font-size: 14px;
        padding: 12px 80px 12px 68px;
        transition: padding .1s ease-in-out
    }
}

.search-active .header-search input[data-v-headerSearch] {
    border-radius: 6px 6px 0 0
}

.header-search input[data-v-headerSearch]::placeholder {
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px
}

.header-search input[data-v-headerSearch]:focus-visible {
    outline: 2px solid var(--accent-active-blue-100, #2997ff)
}

@media(min-width:1024.02px) {
    .header-search.active input[data-v-headerSearch] {
        border-radius: 6px 6px 0 0;
        outline: 2px solid var(--accent-active-blue-100, #2997ff);
        padding: 12px 80px 12px 12px;
        transition: padding .1s ease-in-out
    }

    .header-search.active .header-search__dropdown[data-v-headerSearch] {
        border: 2px solid var(--accent-active-blue-100, #2997ff);
        border-radius: 0 0 6px 6px;
        border-top: none
    }

    .header-search.active .header-search__placeholder-text[data-v-headerSearch] {
        transition: visibility .1s ease-in-out;
        visibility: hidden;
        width: 0
    }
}