#search-modal {
    display: none;
    position: fixed;
    top: 0;
    background: var(--clr8);
    width: 100%;
    min-height: 100%;
    z-index: 9999999999;
    overflow-y: scroll;
    height: 100vh;
}
#search-modal .top-wrapper .top-middle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.search-results .item {
    opacity: 1;
    min-height: 15rem;
}
#search-modal input:focus {
    outline: none;
}
#search-modal input {
    width: 100%;
    height: 7.4rem;
    border-radius: 6.4rem;
    border: none;
    background: var(--Gray-20, #f5f5f5);
    color: var(--clr2);
    font-family: var(--Typeface-Family-Headings, 'DJH');
    font-size: var(--Typeface-Size-Headings-H3, 3.4rem);
    font-style: normal;
    font-weight: 700;
    line-height: var(--Typeface-Size-Line-height-H3, 3.8rem);
    padding: 1.6rem 1.6rem 1.6rem 7.8rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 54 54'%3E%3Cpath stroke='%230A0A0A' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M24.469 42.188c9.785 0 17.718-7.934 17.718-17.72 0-9.785-7.932-17.718-17.718-17.718S6.75 14.683 6.75 24.469c0 9.785 7.933 17.718 17.719 17.718ZM36.998 36.998 47.25 47.25'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 5.4rem 5.4rem;
    background-position: left 1.6rem center;
}
#search-modal input::placeholder {
    color: var(--Gray-70, #757575);
    opacity: 1;
}
#search-modal button.disabled {
    background-color: transparent !important;
    border: 1px solid var(--clr2);
    color: var(--clr2);
}
#search-modal .filter-label {
    margin-right: 0.8rem;
    color: var(--Gray-60, #9e9e9e);
    font-family: var(--Typeface-Family-Body, Inter);
    font-size: var(--Typeface-Size-Miscellaneous-SubH2, 1.8rem);
    font-style: normal;
    font-weight: 700;
    line-height: var(--Typeface-Size-Line-height-SubH2, 2.4rem);
}
#search-modal .type-switch {
    margin-top: 2.4rem;
    margin-bottom: 8.2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.8rem;
    row-gap: 0.8rem;
}
#search-modal .type-switch:not(.active) {
    display: none;
}
.results-wrapper {
    padding: 0 0 8rem;
}
.results-wrapper h3 {
    margin: 0 0 2.4rem;
    text-transform: uppercase;
}
#search-modal .top-wrapper {
    margin-top: 2.4rem;
    position: relative;
}
#search-modal .top-wrapper:after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.6rem;
    width: 3.2rem;
    background-size: 100%;
    height: 3.2rem;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="white"/><path d="M7.82371 14.27H19.5957L15.9777 10.634L18.0117 8.6L23.8977 14.504V17.114L18.0117 23L15.9777 20.966L19.6317 17.33H7.82371V14.27Z" fill="black"/></svg>');
}
.no-search-results {
    text-align: center;
    display: none;
}
.results-wrapper > div {
    display: flex;
    flex-direction: column;
    padding-bottom: 8rem;
    margin-bottom: 8rem;
    border-bottom: 1px solid var(--clr4);
}
.results-wrapper > div:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.results-wrapper .items-list {
    margin: 0;
}
.results-wrapper .columns-4 {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 2.4rem;
    column-gap: 2.4rem;
}
.placeholders span {
    display: none;
}
.full + .placeholders.js-search-placeholders {
    opacity: 0;
}
.placeholders.js-search-placeholders {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 1;
    transition: opacity 150ms ease;
    text-align: center;
    width: 100%;
    padding: 1.4rem;
    line-height: 1.2;
}
.results-wrapper .load-more-container {
    margin-top: 4rem;
}
.results-wrapper .woocommerce .load-more-container {
    margin-top: 4rem;
}
#search-modal .type-switch button.uddannelser,
#search-modal .type-switch button.events  {
    text-transform: capitalize;
}
.type-switch button {
    border: var(--border1);
    padding: 1.2rem 2rem !important;
    background-color: transparent;
    color: var(--clr2);
    font-family: var(--Typeface-Family-Body, 'Inter');
    font-size: var(--Typeface-Size-Miscellaneous-SubH3, 1.6rem);
    font-style: normal;
    font-weight: 700;
    line-height: var(--Typeface-Size-Miscellaneous-SubH3, 1.6rem); /* 100% */
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.type-switch button.active {
    color: var(--clr8);
    background-color: var(--clr2);
}

.type-switch button span {
    font-size: var(--Typeface-Size-Miscellaneous-SubH3, 1.2rem);
    line-height: var(--Typeface-Size-Miscellaneous-SubH3, 1.2rem);
}
.results-wrapper li.product {
    width: auto !important;
    margin-right: 0 !important;
}

.search-modal-head {
    height: 12rem;
    align-items: center;
    justify-content: space-between;
    display: flex;
    width: 100%;
}

.search-close {
    min-width: 3.2rem;
    padding: 2.8rem 0 0 0;
    border: none;
    background-color: transparent;
    color: var(--clr2);
    font-family: var(--Typeface-Family-Body, Inter);
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 25 24'%3E%3Cpath stroke='%230A0A0A' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m19.25 5.25-13.5 13.5M19.25 18.75 5.75 5.25'/%3E%3C/svg%3E");
    background-position: top center;
    background-size: 2.5rem 2.4rem;
    background-repeat: no-repeat;
}

.results-wrapper .item.card_witharrow_nomedia div.itemtext {
    position: relative;
    padding: 1.6rem 7.6rem 1.6rem 1.6rem;
    align-items: flex-start;
}

.results-wrapper.cards_module .item:not(.employee) a:hover .item-card-inner .arrow {
     transform: translate(0%, -50%) rotate(0) skewX(0) skewY(0) scaleX(1.25) scaleY(1.25);
}

.results-wrapper .item.card_witharrow_nomedia div.itemtext h3 {
    font-family: var(--Typeface-Family-Body, 'Inter');
    font-size: var(--Typeface-Size-Miscellaneous-SubH1, 2rem);
    font-style: normal;
    font-weight: 700;
    line-height: var(--Typeface-Size-Line-height-SubH1, 2.8rem); /* 140% */
    text-transform: capitalize;
    margin: 0 0 0.4rem;
}

.results-wrapper .item.card_witharrow_nomedia div.itemtext p {
    color: var(--Gray-70, #757575);
    font-size: var(--Typeface-Size-Body-Small, 1.4rem);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typeface-Size-Line-height-Small, 2rem); /* 142.857% */
    margin: 0;
}

.results-wrapper .item.card_witharrow_nomedia div.itemtext p .highlighted {
    background: #FFF1CD;
    padding: 2px 1px;
}

.results-wrapper .item.card_witharrow_nomedia div.itemtext .arrow {
    position: absolute;
    top: 50%;
    right: 1.6rem;
    transform: translateY(-50%);
}

/* layout changes only in div with class "events". 
not the best solution. need to add specific class to cards with media */
.results-wrapper .events .item.card_witharrow_nomedia .itemtext {
    display: grid;
    grid-template-columns: 10rem 1fr;
    column-gap: 1.6rem;
}
.results-wrapper .events .item.card_witharrow_nomedia .itemtext .media {
    grid-column: 1 / 2;
    grid-row: 1 / 5;
    align-self: center;
}

.results-wrapper .events .item.card_witharrow_nomedia .itemtext .media,
.results-wrapper .events .item.card_witharrow_nomedia .itemtext .media figure {
    height: 10rem;
    width: 10rem;
}

.results-wrapper .events .item.card_witharrow_nomedia .event-data {
    font-family: var(--Typeface-Family-Body, 'Inter');
    font-size: var(--Typeface-Size-Miscellaneous-SubH3, 1.6rem);
    font-style: normal;
    font-weight: 700;
    line-height: var(--Typeface-Size-Miscellaneous-SubH3, 1.6rem); /* 100% */
}

.results-wrapper .events .item.card_witharrow_nomedia .itemtext h3 {
    font-size: var(--Typeface-Size-Miscellaneous-SubH2, 1.8rem);
    line-height: var(--Typeface-Size-Line-height-SubH2, 2.4rem); /* 133.333% */
    margin-top: 0.4rem;
}

.results-wrapper .events .item.card_witharrow_nomedia .itemtext .tag {
    justify-self: flex-start;
    margin: 0;
}

.results-wrapper .tag {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 6rem;
    background: var(--Gray-40, #dbdbdb);
    color: var(--Gray-100, #0a0a0a);
    text-align: center;
    font-size: var(--Typeface-Size-Miscellaneous-Caption, 1rem);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typeface-Size-Line-height-Caption, 1.4rem); /* 140% */
    margin: 0 0 0.4rem;
}

.search-results .events .item:hover .itemtext {
    transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(0.97) scaleY(0.97);
    cursor: pointer;
}

.search-results .events .item .itemtext h3 a:hover{
    text-decoration: none;
}

.search-results .events .item:hover .itemtext .arrow {
    transform: translate(0%, -50%) rotate(0) skewX(0) skewY(0) scaleX(1.25) scaleY(1.25);
}

@media screen and (max-width: 1000px) {
    .search-close {
        position: relative;
    }
    #search-modal .site-branding {
        width: 12rem;
    }
    #search-modal .top-wrapper .top-right {
        display: flex;
    }
    .results-wrapper .columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 768px) {
    #search-modal ul.products li.product {
        width: auto !important;
        margin: 0 0 2.992em;
    }
}
@media screen and (max-width: 680px) {
    #search-modal .top-wrapper {
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        margin-top: 3.2rem;
        position: relative;
    }
    #search-modal .top-wrapper .top-middle {
        position: relative;
        transform: none;
        left: auto;
        margin-top: 2rem;
    }
    #search-modal .top-wrapper .top-right {
        position: absolute;
        right: 0;
        top: 0;
    }
    #search-modal .type-switch {
        margin-top: 3rem;
    }
    .results-wrapper .load-more-container {
        margin-top: 3rem;
        margin-bottom: 1rem;
    }
    .results-wrapper .woocommerce .load-more-container {
        margin-top: 0rem;
        margin-bottom: 1rem;
    }
    #search-modal ul.products li.product {
        width: auto !important;
        margin: 0 0 2.992em;
        /* margin-right: 0!important; */
    }
    .results-wrapper .columns-4 {
        grid-template-columns: 1fr;
        column-gap: 0.8rem;
        row-gap: 0.8rem;
    }
}