.dina-site-header__search-box-expand-button {
    position: relative;
    font-size: .875em;
    font-family: var(--dina-font-normal);
    background-color: transparent;
    border: solid 1px var(--dina-light-green-70);
    border-radius: var(--dina-border-radius-7);
    border-radius: var(--dina-border-radius-7);
    padding: 0.87rem;
    padding-left: var(--dina-spacing-16);
    padding-right: var(--dina-spacing-80);
    cursor: pointer;
    width: 18.5em;
    text-align: left;
}

.dina-site-header__search-box-expand-button.dina-hide-element {
    display: none;
}

.dina-site-header__search-box-expand-button::before,
.dina-site-header__search-box-expand-button::after {
    content: "";
    position: absolute;
    height: 2.4em;
    width: 2.4em;
    right: 0.35em;
    top: 0.25em;
}

.dina-site-header__search-box-expand-button::before {
    border: solid 2px var(--dina-light-green-40);
    border-radius: 50%;
}

.dina-site-header__search-box-expand-button::after {
    background-image: var(--dina-icon-url__dina-search-refraction);
    background-repeat: no-repeat;
    background-position: 44% 65%;
    background-size: 59%;
    filter: var(--dina-filter--light-green-100);
}

.dina-site-header__search-box {
    display: none;
}

.dina-site-header__search-box {
    position: absolute;
    right: 0;
    top: -0.3em;
    border: solid 2px var(--dina-light-green-70);
    border-radius: var(--dina-border-radius-4);
    width: calc(100% - 13em);
    padding: var(--dina-spacing-16) var(--dina-spacing-72);
    background-color: var(--dina-light-green-10);
    z-index: 1;
}

.dina-site-header__search-box-input,
.dina-site-header__search-box-button {
    background-color: transparent;
    border: none;
}

.dina-site-header__search-box-input {
    padding: 0 var(--dina-spacing-8);
    border-left: solid 1px var(--dina-dark-green-100);
}

.dina-site-header__search-box-button {
    position: absolute;
    font-size: 0;
    left: 0.5rem;
    height: 3rem;
    width: 3.5rem;
    background-image: var(--dina-icon-url__dina-search-refraction);
    background-repeat: no-repeat;
    background-position: 44% 50%;
    background-size: 53%;
    top: 0.4rem;
    filter: var(--dina-filter--dark-green-100);
    border-radius: var(--dina-border-radius-3);
}

.dina-site-header__search-box-expand-button:focus-within,
.dina-site-header__search-box:focus-within {
    outline: solid 2px var(--dina-dark-green-90);
}

.dina-site-header__search-box-input:focus,
.dina-site-header__search-box-input:focus-within {
    outline: none;
}

.dina-site-header__search-box-close-button {
    position: absolute;
    font-size: 0;
    width: 3.3rem;
    height: 3.3rem;
    background-color: transparent;
    background-image: var(--dina-icon-url__dina-x-close);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
    right: 0.3rem;
    top: 0.3rem;
    border: none;
    cursor: pointer;
    border-radius: var(--dina-border-radius-3);
}

.dina-site-header__search-box-input.normal {
    font-size: 140%;
    color: var(--dina-dark-green-100);
    font-weight: 600;
}

.dina-site-header__search-box-input.normal::placeholder {
    color: var(--dina-dark-green-100);
}

ul.sv-autocomplete-search-result {
    border: solid 2px var(--dina-light-green-20);
    border-radius: var(--dina-border-radius-3);
    padding: 0;
    margin: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

ul.sv-autocomplete-search-result .sv-autocomplete-result-item {
    padding: 0;
    border-bottom: solid 2px var(--dina-light-green-20);
    display: inline-block;
}

ul.sv-autocomplete-search-result .sv-autocomplete-result-item:last-child {
    border: none;
}

li.sv-autocomplete-result-item a {
    font-size: 1em;
    padding: var(--dina-spacing-16) var(--dina-spacing-24);
    display: block;
    color: var(--dina-dark-green-100);
}

li.sv-autocomplete-result-item a:hover,
li.sv-autocomplete-result-item a:active,
li.sv-autocomplete-result-item a:focus-visible,
li.sv-autocomplete-result-item a:focus-within,
li.sv-autocomplete-result-item.sv-autocomplete-result-item-active a {
    background-color: var(--dina-light-green-10);
}

@media screen and (min-width: 1036px) and (max-width: 1435px) {
    .dina-site-header__search-box-expand-button {
        padding-right: var(--dina-spacing-48);
        width: 12em;
    }
}

@media screen and (min-width: 1036px) and (max-width: 1295px) {
    .dina-site-header__search-box-expand-button {
        border-radius: var(--dina-border-radius-3);
        padding: 0;
    }


    .dina-site-header__search-box-expand-button {
        border: solid 2px var(--dina-light-green-40);
        font-size: 0;
        height: 2.87rem;
        width: 4.755rem;
    }

    .dina-site-header__search-box-expand-button::before {
        content: "Sök";
        font-size: 0.875rem;
        font-family: var(--dina-font-headline);
        text-transform: uppercase;
        color: var(--dina-light-green-100);
        border-radius: unset;
        border: none;
        top: 0.8rem;
        right: -0.1rem;
        height: auto;
    }

    .dina-site-header__search-box-expand-button::after {
        left: 0.3rem;
        top: 0.2rem;
        height: 2rem;
        width: 2rem;
    }

    .dina-site-header__search-box {
        width: calc(100% - 11em);
    }


}

@media screen and (min-width: 1036px) and (max-width: 1199px) {
    .dina-site-header__search-box-expand-button {
        height: 2.36rem;
    }

    .dina-site-header__search-box-expand-button::before {
        top: 0.58rem;
    }

    .dina-site-header__search-box-expand-button::after {
        top: -0.05rem;
    }
}

@media screen and (max-width: 992px) {
    .dina-site-header__search-box {
        margin-right: 1em;
        width: calc(100% - 14.8em);
    }
}

/* Mobile */
@media screen and (max-width: 767px) {

    .dina-site-header__search-box-expand-button,
    .dina-site-header__search-box {
        display: none;
    }
}