/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    This file contains rules for
    SEARCH
    that implement the UU design system specifically for Sitevision

    Note! There is a bug in Sitevision and when the CSS is
    compressed background images with spaces in the URL are not
    working. Because of this, this file cannot be compressed when
    added to the templated CSS & Skript - Grundmall. When this bug
    is fixed, this file should be changed to be compressed.

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


/* The search form */

.sv-facetedsearch-portlet form div[role="search"],
.sv-searchform-portlet form div[role="search"] {
    justify-content: space-between;
    margin-bottom: 1em;
    display: flex;
}

.sv-facetedsearch-portlet input[type="text"],
.sv-searchform-portlet input[type="text"] {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGFnZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNDQ0NDQ0M7fQ0KCS5zdDF7ZmlsbDpub25lO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTUuNSwxNGgtMC44bC0wLjMtMC4zYzEtMS4xLDEuNi0yLjYsMS42LTQuMkMxNiw1LjksMTMuMSwzLDkuNSwzUzMsNS45LDMsOS41UzUuOSwxNiw5LjUsMTYNCgljMS42LDAsMy4xLTAuNiw0LjItMS42bDAuMywwLjN2MC44bDUsNWwxLjUtMS41TDE1LjUsMTR6IE05LjUsMTRDNywxNCw1LDEyLDUsOS41UzcsNSw5LjUsNVMxNCw3LDE0LDkuNVMxMiwxNCw5LjUsMTR6Ii8+DQo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMCwwaDI0djI0SDBWMHoiLz4NCjwvc3ZnPg0K);
    background-position: left 0.5em center;
    background-repeat: no-repeat;
    background-size: 2em;
    flex-grow: 1;
    margin-right: .75rem;
    padding-right: 1.25rem;
    padding-left: 2.75em;
}

.sv-facetedsearch-portlet input[type="submit"],
.sv-searchform-portlet input[type="submit"] {
    background-color: #333;
    border: 3px solid #333;
    border-radius: 4px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    letter-spacing: .05em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: filter 200ms ease-in-out, transform 150ms ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Suggestions */

ul.sv-autocomplete-search-result .sv-autocomplete-result-item {
    padding: 0.5em 1em;
}

ul.sv-autocomplete-search-result .sv-autocomplete-result-item:hover {
    cursor: pointer;
}

ul.sv-autocomplete-search-result {
    font-family: WorkSans, sans-serif;
    font-size: var(--font-size-regular);
}


/* Hide the placeholder text in the search input element */

.sv-facetedsearch-portlet input::placeholder,
.sv-searchform-portlet input::placeholder {
    visibility: hidden;
}


/* Search facets - override the sitevision style */

.sv-search-facets {
    float: none !important;
    padding: 0 !important;
}

.sv-search-facets ul {
    max-width: 100%;
}


/* Search facets - add UU style */

.sv-search-facet-item {
    background-color: var(--color-grey-light);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    cursor: pointer;
    color: var(--color-text);
    display: inline-block;
    font-size: var(--font-size-regular);
    letter-spacing: 0.05em;
    margin-right: 0.5rem;
    padding: 0.45rem 0.8rem !important;
    text-align: center;
}

.sv-search-facet-item-selected::before {
    content: '';
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGFnZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7fQ0KCS5zdDF7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMCwwaDI0djI0SDBWMHoiLz4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xOSw2LjRMMTcuNiw1TDEyLDEwLjZMNi40LDVMNSw2LjRsNS42LDUuNkw1LDE3LjZMNi40LDE5bDUuNi01LjZsNS42LDUuNmwxLjQtMS40TDEzLjQsMTJMMTksNi40eiIvPg0KPC9zdmc+DQo=);
    background-repeat: no-repeat;
    display: inline-block;
    filter: invert(1);
    height: 1em;
    vertical-align: text-bottom;
    width: 1em;
}


/* The search results  */

.sv-search-result {
    max-width: 100%;
}


/* Paragraphs in the search results  */

.sv-facetedsearch-portlet p {
    margin: 1em 0;
}

.sv-facetedsearch-portlet p:last-child {
    margin-bottom: 0;
}


/* The search hit */

.sv-search-hit {
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 1.25em !important;
}

.sv-search-hit+.sv-search-hit {
    border-top: none;
}

.sv-search-hit a {
    text-decoration: underline;
}


/* The path (that doesnt have a specific css class) */

.sv-search-hit p+p:last-child {
    font-size: var(--font-size-small);
    max-width: 100%;
}

.sv-search-hit p+p:last-child a {
    color: var(--color-text-muted);
}


/* search button for header has dropdown element */

.search-portlet-wrapper {
    background-color: var(--color-white);
    box-shadow: rgb(0, 0, 0, 0.2) 0 0.5em 0.5em;
    display: flex;
    height: var(--uu-calc-height);
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: var(--header-height, 120px);
    transition: height 0.3s ease-in-out;
    z-index: 10;
}


.search-portlet-wrapper>.container {
    align-self: center;
}

.search-portlet-wrapper.hidden {
    height: 0px;
}

.search-portlet-wrapper .link-group {
    margin-top: 0.5rem;
    margin-bottom: -0.5rem;
    text-align: start;
}

.search-portlet-wrapper .link-group-item {
    margin: 0 0.5rem 0.5rem 0;
}

@media (max-width: 992px) {
    .search-result-hit-text-container {
        margin-right: 0 !important;
    }
}

/*********************************
	Website search (Extern/MI/SI)
*********************************/
/* Use flex for facets so that long facet names don't wrap */
.website-search-facets-container {
    margin: var(--space-medium) 0;
}

.website-search-facets-container ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    padding: 0;
    margin: 0;
    max-width: 100%;
}

.website-search-facet-item {
    background-color: var(--color-grey-light);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    cursor: pointer;
    color: var(--color-text);
    display: inline-block;
    font-size: var(--font-size-regular);
    letter-spacing: 0.05em;
    padding: 0.45rem 0.8rem !important;
    text-align: center;
}

.website-search-facet-item-selected::before {
    content: '';
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGFnZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7fQ0KCS5zdDF7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMCwwaDI0djI0SDBWMHoiLz4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xOSw2LjRMMTcuNiw1TDEyLDEwLjZMNi40LDVMNSw2LjRsNS42LDUuNkw1LDE3LjZMNi40LDE5bDUuNi01LjZsNS42LDUuNmwxLjQtMS40TDEzLjQsMTJMMTksNi40eiIvPg0KPC9zdmc+DQo=);
    background-repeat: no-repeat;
    display: inline-block;
    filter: invert(1);
    height: 1em;
    vertical-align: text-bottom;
    width: 1em;
}

/********************************
    Webapp search
********************************/

/* Set margin bottom to 0 for the search module so the modules has height zero when it does
   not display any content. If a content is displayed the margin will be set by module itself */
.sv-se-uu-uit-webb-webapp-search {
    margin-bottom: 0 !important;
}

/* Set style of the search form, if the search form is the last child, but only in webapp search,
   add a margin bottom */
.search .search-form:last-child {
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .search-form {
        flex-wrap: wrap;
    }
}

/* Set style of selects in the search form */
.search-form-select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border-radius: 0;
    color: var(--color-text);
    padding-right: 2.75rem;
    z-index: 2;
}

@media (max-width: 768px) {
    .search-form-select {
        flex-basis: 100%;
        border-right-color: var(--color-form-control);
        margin-bottom: var(--space-small);
    }
}

/* Explicitly set the border radius to 0 to avoid some browsers adding a border radius */
.search-form-input {
    background-color: var(--color-white);
    border-radius: 0;
    width: auto;
    z-index: 1;
}

.search-form-input:focus {
    z-index: 4;
}

/* Set style of the search form suggestions */
.search-form-suggestions {
    background-color: var(--color-white);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    line-height: 1.42857143;
    list-style: none;
    margin: 0;
    max-width: none;
    padding: 0;
    position: absolute;
    width: 100%;
    z-index: 4;
}

.search-form-suggestions li {
    padding: 0.5em 1em;
}

.search-form-suggestions li.active,
.search-form-suggestions li:hover {
    background-color: var(--color-grey-light);
}

.search-form-suggestions li:hover {
    cursor: pointer;
}

.search-form-suggestions li mark {
    background-color: transparent;
    font-weight: bold;
    padding: 0;
}

/* Set style of the search input on small screens */
@media (max-width: 400px) {
    .search-form-input {
        flex-basis: 50%;
        min-width: 0;
    }
}

/* Adjust z-index of search facets */
.search-filters-selected {
    z-index: 3;
}

/* Set style of the search facets button */
.search-selected-facets-button,
.search-selected-facets-button:hover {
    text-align: left;
}

/* Set a slightly smaller padding on the facet buttons to allow for long facet names. Also allow
   hyphenation in the facet names. */
.search-facet-button {
    -webkit-hyphenate-limit-after: 5;
    -webkit-hyphenate-limit-before: 4;
    hyphenate-limit-chars: 10 4 5;
    hyphens: auto;
    overflow-wrap: break-word;
    padding: 0.45rem 0.35rem;
    white-space: normal;
    word-break: break-word;
}

.search-facet-button:hover {
    padding: 0.45rem 0.35rem;
}

.search-show-more-facets-button,
.search-show-more-facets-button:hover {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
}

/* Set list style of list of facet values */
.search-facet-values {
    list-style: none;
    padding: 0;
}

/* Align the facet values to the left */
.search-facet-values-button,
.search-facet-values-button:hover {
    align-items: center;
    display: flex;
    text-align: left;
}

/* Set style of disabled facet values */
.search-facet-values-button[disabled] {
    background: none !important;
    border-color: transparent !important;
}

.search-facet-values-button[disabled]::before {
    filter: invert(0.5) !important;
}

/* Set style of the search label */
.search-label {
    font-weight: normal;
}

/* The search result info should have some margin */
.search-result-information {
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.search-result-hit-container {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
}

/* Any ul in the search hit should have no dots and no padding */
.search-result-hit ul {
    list-style: none;
    max-width: none;
    padding: 0;
}

.search-result-hit a:hover {
    text-decoration: underline;
}

/* Set cursor to pointer on hover to indicate that the hits are clickable */
.search-result-hit:hover {
    cursor: pointer;
}

/* Set style of the mark of the search result when hovering */
.search-result-hit:hover mark {
    background-color: var(--color-grey);
}

/* Style links in the search result details part */
.search-result-hit .text-muted a {
    color: var(--color-text-muted) !important;
    text-decoration: underline;
}

.search-result-hit .text-muted a:hover {
    background-color: var(--color-grey);
    color: var(--color-text) !important;
}


/* Style of search result hit with display mode text */

/* Images should be displayed to the left and hits shouldn't have any borders */
.search-result-hit-display-mode-text .card,
.search-result-hit-display-mode-text .card ul,
.search-result-hit-display-mode-text .card-body,
.search-result-hit-display-mode-text .search-result-hit {
    background: none;
    border: none;
    padding-left: 0;
}

/* The search hit should not have any left and right padding */
.search-result-hit-display-mode-text .search-result-hit-container {
    padding-left: 0;
    padding-right: 0;
}

/* Normally we do mobile first, but in this case the default style of search hits works almost fine
   on larger screens. */
@media (max-width: 767px) {
    .search-result-hit-display-mode-text .search-result-hit-container {
        display: flex;
        position: static !important;
    }

    .search-result-hit-display-mode-text .search-result-hit-text-container::before {
        display: none !important;
    }

    .search-result-hit-display-mode-text .search-result-hit-image {
        margin-top: 0.5rem;
        position: static !important;
    }
}

.search-result-hit-display-mode-text .search-result-hit:hover {
    cursor: default;
}

.search-result-hit-display-mode-text .search-result-hit-container {
    flex-direction: row-reverse;
}

.search-result-hit-display-mode-text .search-result-hit-text-container {
    flex-grow: 1;
    overflow-wrap: break-word;
    word-break: break-word;
}

.search-result-hit-display-mode-text .search-result-hit-image {
    cursor: pointer;
    margin-right: 1.5rem;
    text-align: left;
}

.search-result-hit-display-mode-text .search-result-hit .search-result-hit-text-container a {
    color: var(--color-link) !important;
    text-decoration: underline;
}

.search-result-hit-display-mode-text .search-result-hit:hover .search-result-hit-text-container .search-result-hit-title a,
.search-result-hit-display-mode-text .search-result-hit:hover .search-result-hit-text-container a {
    color: var(--color-link) !important;
}

/* The search result title should have the same color as the rest of the text */
.search-result-hit-title a {
    color: var(--color-text) !important;
}

/* Style of the search result hit title */
.search-result-hit-title {
    margin-top: 0;
}

/* Style of the search result hit info with date and source */
.search-result-hit-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.85rem;
    margin-bottom: var(--space-small);
    margin-top: calc(-1 * var(--space-small) / 1.25);
}

.search-result-hit-info-date,
.search-result-hit-info-date-event,
.search-result-hit-info-source {
    display: inline-block;
}

.search-result-hit-info-date::before,
.search-result-hit-info-date-event::before,
.search-result-hit-info-source::before {
    background-size: 1rem;
    height: 1rem;
    margin-right: 0.35rem;
    min-width: 1rem;
    width: 1rem;
}

.search-result-hit-info-date::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'><path d='m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z'/></svg>");
}

.search-result-hit-info-date-event::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'><path d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z'/></svg>");
}

.search-result-hit-info-source::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'><path d='M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z'/></svg>");
}

/* Style of the search result hit image */
.search-result-hit-image {
    margin-bottom: 0.5rem !important;
    margin-top: 1rem;
    width: 100%;
}

.search-result-hit-image img {
    max-width: 100%;
}

/* Style of the search result hit on large screens */
@media (min-width: 768px) {

    /* On large screens the search result hit should be displayed as a flexbox */
    .search-result-hit-container {
        display: flex;
        flex-direction: row;
    }

    /* The search result hit text should have some margin on the right */
    .search-result-hit-text-container {
        margin-right: 1rem;
    }

    /* The style of the search result hit image on large screens */
    .search-result-hit-image {
        margin-bottom: 0.5rem;
        margin-left: auto;
        margin-top: 0.5rem;
        max-width: var(--search-result-hit-image-max-width);
        text-align: right;
    }

    .search-result-hit-image img {
        max-height: var(--search-result-hit-image-max-height);
        max-width: 100%;
    }
}

/* Add styling for details in search result */
.search-result-hit-details {
    max-width: none;
}

/* Add styling for spinner when loading search results */
.search-spinner-container {
    margin-left: 0.9rem;
}

.search-spinner-position-information {
    position: absolute;
    margin-top: -0.25rem;
}

.search-spinner-position-show-more {
    margin-top: -0.375rem;
}

/* Add styling for the show more button in the search result */
.search-result-show-more {
    display: flex;
    flex-direction: revert;
    flex-wrap: wrap;
}

.search-result-show-more-button {
    margin-right: 0;
}

.search-result-show-more-information {
    order: 3;
    flex: 1 1 100%;
}

.search-result-show-more>*:not(:first-child) {
    margin-top: 0.8rem;
}

@media screen and (min-width: 768px) {
    .search-result-show-more {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .search-result-show-more-button {
        margin-right: 1rem;
    }

    .search-result-show-more-information {
        order: 2;
        flex: revert;
    }

    .search-result-show-more-spinner-container {
        order: 3;
    }

    .search-result-show-more>*:not(:first-child) {
        margin-top: 0.65rem;
    }
}

/* If the search result hit has a collapsible content and the module is next to another module with
   a collapsible content, the margin should be reduced */
.sv-collapsible-content+.sv-se-uu-uit-webb-webapp-search:has(.sv-collapsible-content),
.sv-se-uu-uit-webb-webapp-search:has(.sv-collapsible-content)+.sv-collapsible-content,
.sv-se-uu-uit-webb-webapp-search:has(.sv-collapsible-content)+.sv-se-uu-uit-webb-webapp-search:has(.sv-collapsible-content) {
    margin-top: -1rem;
}