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

/*********** SEARCH **********/

#search {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    overflow: hidden;
}

#search #search-bar {
    position: fixed;
    width: 100%;
    background: rgba(0, 0, 0, .8);
    padding: var(--HD15px);
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--HD120px);
    z-index: 800;
}

#search #search-bar .icon {
    color: rgb(81, 151, 0);
    font-size: var(--HD36px);
    margin-left: calc(0px - var(--HD45px));
    pointer-events: none;
}

#search #inputfield {
    width: 43vw;
    height: var(--HD60px);
    font-size: var(--HD36px);
    background: #fff;
    padding: 0 var(--HD60px) 0 var(--HD15px);
    border-radius: 10px;
}

#search .content {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 16vw auto;
    grid-template-rows: 1fr;
    grid-template-areas: "details results";
}

#search #search-spinner {
    width: 100%;
    height: 100%;
    background: rgba(0, 20, 0, .8);
    position: fixed;
    z-index: 500;
}

#search-spinner .spinner {
    top: 42%;
    left: 50%;
}

#search-spinner .text {
    color: #fff;
    font-size: var(--HD30px);
    position: absolute;
    text-align: center;
    top: 42%;
    left: 50%;
    width: 100%;
    margin: 70px 0 0 -50%;
}

#search #search-error {
    width: 100%;
    height: 100%;
    background: rgba(0, 20, 0, .8);
    position: fixed;
    z-index: 500;
}

#search-error .text {
    color: #fff;
    font-weight: bold;
    font-size: var(--HD30px);
    position: absolute;
    text-align: center;
    top: 38%;
    left: 50%;
    width: 100%;
    margin: 70px 0 0 -50%;
}

#search-error .text .err {
    font-size: 0.8em;
    margin-top: 0.8em;
    font-weight: initial;
}

#search #search-results {
    grid-area: results;
    color: #000;
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    overflow: auto;
    /* mobile paddings */
    padding: 90px 0 120px 0;
}

#search-results .no-hits {
    position: fixed;
    color: #fff;
    font-size: var(--HD36px);
    text-align: center;
    top: 30%;
}

#search #search-results .preload img {
    opacity: 0;
    width: 10px;
}

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

/******* ITEM  **********/

#search .item {
    display: grid;
    /* mobile */
    width: 140px;
    grid-template-rows: 100px 9px auto 24px;
    margin: 15px 10px;
}

/* billedboks på item */

#search .item .sky {
    grid-area: 1 / 1 / span 2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    /* mobile */
    font-size: 14px;
}

#search .item .sky .cover {
    width: auto;
    height: auto;
    position: relative;
}

#search .item .sky .cover img {
    /* mobile */
    max-width: 90px;
    max-height: 120px;
    box-shadow: 0px -5px 20px 0px rgba(0, 0, 0, 0.5);
}

#search .item .covertext {
    position: absolute;
    top: calc(28% - 1em);
    font-weight: bold;
    padding: 0 var(--HD24px);
    font-size: 0.7em;
    /* color: rgba(255, 255, 255, .6); */
    word-break: break-word;
}

.covertext span {
    text-align: left;
}

/*  tekster på item */

#search .item .floor {
    grid-area: 2 / 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    /* mobile */
    font-size: 15px;
    padding: 10px;
    padding-top: 18px;
}

#search .item .title {
    font-size: 0.88em;
}

#search .item .author {
    font-size: 0.73em;
    /* color: rgba(0, 0, 0, 0.6); */
    padding-top: .1em;
}

/* ikon linje på items */

#search .item .icons {
    grid-area: 4 / 1 / span 1;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "status type";
    border-top: 1px solid rgba(0, 0, 0, .1);
    opacity: .9;
    /* mobile */
    padding: 2px 6px;
}

#search .item .icons div {
    display: flex;
    align-items: center;
    background-size: contain;
    background-repeat: no-repeat;
    min-width: 40px;
}

#search .item .type {
    grid-area: type;
    font-weight: bold;
    justify-content: flex-end;
    background-position: 100%;
}

#search .item .type img {
    height: var(--HD18px);
    opacity: 0.7;
}

#search .item .lang {
    grid-area: lang;
    color: #000;
    display: none;
}

#search .item .status {
    grid-area: status;
    justify-content: flex-start;
    font-size: 10px;
    font-weight: bold;
}

#search .item .status.home,
#search .item .status.availableonline {
    /* color: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.9); */
    opacity:1;
}

#search .item .status.onloan {
    /* color: rgba(255, 255, 255, 0.4);
    color: rgba(0, 0, 0, 0.4); */
    opacity:0.4;
}

#search .item .status.nearby {
    /* color: rgba(255, 255, 255, 0.7);
    color: rgba(0, 0, 0, 0.7); */
    opacity:0.7;
}

#search #search-details {
    grid-area: details;
    padding: var(--HD180px) var(--HD45px);
    background: rgba(0, 0, 0, .2);
}

#search .cscroll-pane {
    height: calc(100vh - var(--HD150px));
}

#search #btn-load-more-row {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#search #btn-load-more {
    /* color: #000; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* mobile */
    font-size: 12px;
    width: 180px;
    height: 30px;
    margin: 9px;
    margin-top: 40px;
    
}

/*  load more button */

#search #btn-load-more.active {
    background: none;
}

#search #btn-load-more .spinner {
    position: relative;
    margin: initial;
    display: none;
}

#search #btn-load-more.active span {
    display: none;
}

#search #btn-load-more.active .spinner {
    display: block;
}

/* left side */

#search #resultscount {
    font-size: var(--HD15px);
    color: #fff;
    text-align: center;
    padding-bottom: var(--HD18px);
    border-bottom: rgba(255, 255, 255, 0.3) solid 1px;
    margin-bottom: var(--HD30px);
}

#search #resultscount .results {
    font-weight: bold;
    font-size: var(--HD24px);
}

#search #resultscount .results .plus {
    font-weight:normal;
    opacity: .4;
    margin-left:.4em;
    margin-top:.2em;
    font-size: var(--HD15px);
    position: absolute;
}

#facets {
    overflow: scroll;
    height: calc(98vh - var(--HD360px));
    color: #fff;
}

#facets .facet-type {
    margin-bottom: var(--HD24px)
}

#facets .facet-header {
    /* text-transform: uppercase; */
    font-weight: bold;
    /* text-align: center; */
    font-size: var(--HD15px);
    color: rgba(255, 255, 255, 0.5)
}

#facets .facet {
    padding: var(--HD9px) var(--HD12px);
    margin: var(--HD9px) 0;
    font-size: var(--HD15px);
    display: flex;
    justify-content: space-between;
}

#facets .facet span {
    /* color: #ccc; */
    font-size: var(--HD15px);
}

#facets .facet.active {
    /* background: var(--no); */
    color: #000;
}

#facets .btn-show-all {
    background: #000;
    text-align: left;
    color: #fff;
    padding: var(--HD9px) var(--HD12px);
}

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

/********** (DESKTOP LANDSCAPE) *********/

@media (min-width: 900px) {
    #search .content {
        grid-template-columns: 16vw auto;
        grid-template-areas: "details results";
    }
    #search #search-results {
        padding: var(--HD180px);
        padding-left: var(--HD45px);
    }
    #search .item {
        width: var(--HD240px);
        grid-template-rows: var(--HD180px) var(--HD18px) auto var(--HD36px);
        margin: var(--HD12px);
        margin-bottom: var(--HD24px);
    }
    #search .item .sky .cover img {
        max-width: calc(var(--HD180px) - var(--HD12px));
        max-height: var(--HD210px);
        box-shadow: 0px -5px 20px 0px rgba(0, 0, 0, 0.5);
    }
    #search .item .sky {
        font-size: var(--HD18px);
    }
    #search .item .floor {
        font-size: var(--HD18px);
        padding: var(--HD15px);
        padding-top: var(--HD36px);
    }
    #search .item .status {
        font-size: var(--HD12px);
    }
    #search .item .icons {
        padding: var(--HD6px) var(--HD15px);
    }
    #search #btn-load-more {
        font-size: var(--HD18px);
        width: var(--HD300px);
        height: var(--HD45px);
        margin: var(--HD12px);
        margin-top: var(--HD75px);
    }
}

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

/********** (DESKTOP PORTRAIT) *********/

@media (min-width: 900px) and (orientation: portrait) {
    #search #search-bar {
        padding: var(--HD15px);
        height: var(--HD150px);
    }
    #search #inputfield {
        width: 70vw;
    }
    #search .content {
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        grid-template-columns: 26vw auto;
        grid-template-rows: 1fr;
        grid-template-areas: "details results";
    }
    #search #search-details {
        padding: var(--HD210px) var(--HD30px);
    }
    #search #search-results {
        justify-content: center;
        padding: var(--HD210px) var(--HD9px) var(--HD180px);
    }
    #search .item {
        width: var(--HD210px);
    }
    #search .cscroll-pane {
        height: calc(100vh - var(--HD210px));
    }
}