/* Header AI Search */
#header-ai-search-container {
    display: flex;
    position: relative;
    flex-grow: 8 !important;
    max-width: none !important;
    max-height: 3.15rem;
    align-items: flex-start !important;
}

.modal-form-outer.ai-input-outer.ai-search-outer.ai-input-outer.header-ai-search {
    position: relative;
    flex-grow: 8 !important;
    max-width: none !important;
    max-height: 3.15rem;
    margin: 0 2rem;
    align-items: flex-start !important;
}

.modal-form-outer.ai-input-outer.ai-search-outer.ai-input-outer.header-ai-search .modal-form,
.modal-form-outer.ai-input-outer.ai-search-outer.ai-input-outer.header-ai-search .modal-form .ai-input-form-inner {
    width: 100% !important;
    max-width: 58rem;
}

@media (min-width: 768px) and (max-width: 1024px) {

    .modal-form-outer.ai-input-outer.ai-search-outer.ai-input-outer.header-ai-search .modal-form,
    .modal-form-outer.ai-input-outer.ai-search-outer.ai-input-outer.header-ai-search .modal-form .ai-input-form-inner {
        width: 95% !important;
    }
}


.find-supplier-modal .modal-form-outer.ai-input-outer.ai-search-outer.ai-input-outer.header-ai-search {
    margin: 0 !important;
}

#header-outer.at-top.transparent .modal-form .ai-input-form-inner {
    background-color: rgb(148 172 165 / 11%) !important;
}

body.light-theme #header-outer.at-top.transparent .modal-form .ai-input-form-inner,
#header-outer.at-top.transparent.light-theme .modal-form .ai-input-form-inner {
    background-color: rgb(242 243 232) !important;
}

body.light-theme #header-outer.at-top.transparent .ai-input-form-inner:hover,
body.light-theme #header-outer.at-top.transparent .ai-input-outer.active .ai-input-form-inner,
body.light-theme #header-outer.at-top.transparent .ai-input-form-outer.active .ai-input-form-inner {
    background-color: rgb(236 237 227) !important;
}

body.light-theme #header-outer.at-top.transparent .ai-input-outer.active .ai-input-form-inner,
.ai-input-outer.light-theme .ai-input-form-inner {
    background-color: rgb(241 242 228) !important;
}

body.light-theme .ai-input-outer .ai-input-form.active,
.ai-input-outer.light-theme .ai-input-form.active {
    background-color: rgb(247 248 239) !important;
}

body.light-theme .ai-input-outer:not(.at-top) .modal-form .ai-input-form-inner {
    background-color: rgb(241 244 231) !important;
}

body.light-theme #header-outer:not(.at-top) .ai-input-outer .ai-input-form.active,
#header-outer:not(.at-top) .ai-input-outer.light-theme .ai-input-form.active {
    background-color: rgb(250 251 245) !important;
    box-shadow: 0 24px 24px #1f292617;
}

.ai-input-outer .ai-input-form .ai-input-form-inner .ai-input-form-button:not(.modified) {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    transition: 0.3s all ease-out !important;
}

.ai-input-outer .ai-input-form .ai-input-form-inner .ai-input-form-button .circles {
    display: none;
}

.ai-input-outer .ai-input-form .ai-input-form-inner .ai-input-form-button:not(.modified) span {
    opacity: 0 !important;
    margin: 0 !important;
    display: none !important;
    transition: 0.3s all ease-out !important;
}

@media only screen and (min-width: 640px) {
    .ai-input-outer .ai-input-form .ai-input-form-inner .ai-input-form-button span {
        opacity: 1 !important;
    }
}

@media only screen and (max-width: 640px) {
    .ai-input-outer .ai-input-form .ai-input-form-inner .ai-input-form-button span {
        font-size: 0 !important;
    }

    .ai-input-outer .ai-input-form .ai-input-form-inner .ai-input-form-button.modified:before {
        content: '';
        display: block;
        width: 1rem;
        height: 1rem;
        background-image: url(/wp-content/uploads/2024/05/icon-arrow-right.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin: 0 auto !important;
        position: absolute;
    }

    .ai-input-outer.light-theme .ai-input-form .ai-input-form-inner .ai-input-form-button.modified:before {
        filter: invert(1);
    }
}

.header-ai-search .ai-input::placeholder {
    color: rgba(195, 212, 207, 0.3) !important;
}

.mobile-search-icon {
    display: none;
    width: 1.4rem;
    height: 1.4rem;
    font-size: 0;
}

.circles-mobile-header {
    position: relative;
    width: 100%;
    height: 100%;
}

.circle-mobile-header {
    box-sizing: border-box;
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    border: 0.5px solid var(--color-accent);
    border-radius: 130% 130% 117% 114% / 115% 120% 77% 125%;
    box-shadow: 0 0 0.7px 0.7px var(--color-accent), inset 0 0 1.5px 0.7px var(--color-accent);
    opacity: 0.7;
}

.circle-mobile-header:nth-child(4),
.circle-mobile-header:nth-child(5) {
    border-width: 0px;
    box-shadow: 0 0 3px 0px var(--color-accent), inset 0 0 3px 1px var(--color-accent);
    opacity: 0.3;
}

.circle-mobile-header:nth-child(1) {
    transform-origin: 48% 50%;
    animation: spin1 5s linear infinite;
}

.circle-mobile-header:nth-child(2) {
    transform-origin: 50% 52%;
    animation: spin2 5s linear infinite;
}

.circle-mobile-header:nth-child(3) {
    transform-origin: 52% 50%;
    animation: spin3 5s linear infinite;
}

.circle-mobile-header:nth-child(4) {
    transform-origin: 50% 48%;
    animation: spin4 5s linear infinite;
    width: 90% !important;
    height: 105% !important;
}

.circle-mobile-header:nth-child(5) {
    transform-origin: 49.7% 49.7%;
    animation: spin5 5s linear infinite;
    width: 105% !important;
}

#header-outer .modal-form-outer.ai-input-outer.ai-search-outer.ai-input-outer.header-ai-search .modal-form {
    margin: 0 auto;
}

#header-outer #top>.container>.row>.col {
    margin: 0;
}