@import "variables.css";
@import "header.css";
@import "footer.css";

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    max-height: 100vh;
    font-family: Ubuntu, sans-serif;
    line-height: calc(1.5 * var(--unity));
    letter-spacing: 0.01em;
}

body > * {
    margin: var(--border);
    width: calc(100vw - 4 * var(--border));
}

main {
	font-family: raleway-regular, sans-serif;
	font-size: 19pt !important;
}

::backdrop {
    background-color: #999;
    opacity: 0.75;
}

a {
    text-decoration: none;
}

a .collection-preview-metadata {
    color: black !important;
}

button a {
    color: inherit !important;
}

.btn {
    background: var(--bs-secondary-bg);
}

.btn:hover {
    background: var(--bs-secondary-bg);
}

p {
    font-weight: lighter;
}

/*p, */ul, figure, .like-p {
    padding-left: calc(15 * var(--unity));
    margin-bottom: calc(1.5 * var(--unity));
}

ul {
    padding-left: calc(16.75 * var(--unity));
}

h1, h2, h3 {
	color: rgb(226,85,43);
	font-family: raleway-bold;
    line-height: calc(1.5 * var(--unity));
}

h2 {
    font-weight: normal;
    font-size: 18pt;
}

h5.card-title {
	font-family: raleway-medium;
	font-size: 11pt !important;
}

figure {
    padding-top: calc(2 * var(--unity));
}

figure img {
    max-height: 66vh;
    max-width: 100%;
}

figcaption {
    padding-top: calc(1 * var(--unity));
    padding-bottom: calc(2 * var(--unity));
    margin-right: 50%;
    line-height: calc(1.2 * var(--unity));
    font-size: 0.75em;
}

.collection-preview li, .text li {
    margin-left: calc(1 * var(--unity));
}

.listing li {
    margin-left: 0
}

li p {
    padding-left: calc(0.5 * var(--unity));
    margin-bottom: 0;
}

.collection-preview p, .collection-preview ul, .collection-preview table, td p, .mirador-viewer p {
    padding-left: 0;
    margin-bottom: 0;
}

/*@media screen and (max-width: 1400px) {
    p, ul, figure, .like-p {
        padding-left: calc(13 * var(--unity));
    }
}*/

@media screen and (max-width: 1200px) {
    p, ul, figure, .like-p {
        padding-left: calc(7 * var(--unity));
    }
}

@media screen and (max-width: 992px) {
    p, ul, figure, .like-p {
        padding-left: calc(0 * var(--unity));
    }
}

@media screen and (max-width: 768px) {
    .collection-preview {
        border-top: none !important;
    }

    .collection-preview-metadata {
        border: 1px solid var(--bs-secondary);
    }

    :root {
        --unity: 1.11rem;
    }
}

body > main {
    position: relative;
    top: var(--header-height);
    height: var(--main-height);
    max-height: var(--main-height);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    border-top: 10px black solid;
}

@media (max-width: 992px) {
    body > main {
        position: fixed !important;
        height: calc(100% - var(--header-height));
        z-index: 9;
    }
}

.nav-link {
    line-height: calc(2 * var(--unity));
    padding: 0;
}

.content-wrapper {
    margin: calc(2 * var(--unity)) calc(2 * (var(--border) + var(--unity)));
    width: calc(100vw - 4 * (var(--border) + var(--unity)));
}

.content-wrapper > section:not(#mirador), .splitter {
    min-height: var(--main-height);
}

#search-and-nav {
    background-color: white;
}

#search-and-nav .btn {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white !important;
    margin-left: 5px;
}

#btn-back-to-top {
    position: fixed;
    bottom: calc(2 * var(--unity));
    display: none;
}

.content-wrapper > section {
    min-height: var(--main-height);
    /*max-height: var(--main-height);*/
}

section > h2 {
    padding-top: calc(3 * var(--unity));
}

.text h2 {
    margin: calc(5 * var(--unity)) 0 calc(2 * var(--unity));
}

.text > h2 {
    margin-top: 0;
}

#home-search-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    min-width: 60%;
}

#home-search-bar .search-form {
    background-color: white;
    border: 1px solid black;
    min-width: 60%;
}

#home-search-bar .search-form button {
    border-top: none;
    border-bottom: none;
    border-color: black;
    background-color: white !important;
}

#artwork {
    overflow: hidden;
    display: flex;
    justify-content: center;
    max-height: calc(var(--main-height) - 4 * var(--unity)) !important;
    min-height: calc(var(--main-height) - 4 * var(--unity)) !important;
    position: relative;
}

#artwork > div {
    display: flex;
    height: 90%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
}

#artwork img {
    min-height: 100%;
    object-fit: cover;
}

#collections a, #topics a, #focus a, .hit-link {
    text-decoration: none;
}

.hit-link .col-md-4 {
    height: 100px;
}

.hit-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--bs-secondary);
    min-height:200px;
    border:1px solid var(--bs-secondary);
}

.collection-preview {
    border-top: 1px solid var(--bs-secondary);
    padding-top: calc(2 * var(--unity));
    line-height: calc(1.3 * var(--unity));
}

#result_hits .document_preview_container:nth-child(2) .collection-preview {
    border-top: 0;
}

.collection-preview .img-thumbnail, .jama-collection .img-thumbnail {
    width: 100%;
    object-fit: contain;
    background-color: #333;
    border-width: 0;
    border-radius: 0;
}

.collection-preview .img-thumbnail {
    height: 70%;
}

.collection-preview .img-thumbnail .img-thumbnail {
    height: 100%;
}

.jama-collection .img-thumbnail {
    height: auto;
}

.collection-preview .img-thumbnail img, .jama-collection .img-thumbnail img {
    background-color: transparent;
}

.collection-preview-thumb {
    max-height: 275px !important;
}

.collection-preview-thumb a {
    flex-grow: 1;
}

.collection-preview-metadata p {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.collection-preview-metadata li label {
    font-weight: lighter;
}

.img-thumbnail {
    cursor: pointer;
}

.placeholder-glow, .placeholder-glow picture {
    display: flex;
    justify-content: center;
    min-width: 100%;
    min-height: 100%;
}

.jama-collection-preview {
    margin-bottom: 2em;
}

.jama-collection-preview ul {
    list-style-type: none;
    font-size: 0.8rem;
}

.jama-collection-preview .img-thumbnail {
    object-fit: contain;
    cursor: pointer;
    width: 100%;
}

.jama-collection > div {
    padding-right: calc(1 * var(--unity));
    padding-left: calc(1 * var(--unity));
}

.jama-collection th, .document_preview_container th {
    font-weight: lighter;
    padding-right: calc(1 * var(--unity));
}

.jama-collection td, .document_preview_container td {
    word-break: break-word;
}

.jama-collection td, .jama-collection th, .document_preview_container td, .document_preview_container th {
    line-height: calc(1.2 * var(--unity));
}

.see-more {
    width: 9%;
    padding: 0 !important;
    text-align: right;
}

.pagination .btn, .see-more .btn {
    background: var(--bs-secondary-bg);
}

.page-head-image {
    width: 100%;
    padding-top: calc(2 * var(--unity));
    margin-bottom: calc(2 * var(--unity));
}

.page-head-content {
    margin-top: calc(2 * var(--unity));
    margin-left: calc(2 * var(--unity));
    line-height: calc(1.25 * var(--unity));
}

.page-head-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.phouse-card {
    padding: calc(1 * var(--unity)) calc(2 * var(--unity)) calc(1 * var(--unity)) 0;
}

/*.collection-card.institution {
    display: flex;
    justify-content: center;
}

.collection-card.institution .card {
    width: 250px;
    height: 250px;
}

.collection-card.institution .card-body {
    display: none;
}

.collection-card img {
    aspect-ratio: 4/3 !important;
}

.collection-card.institution img {
    object-fit: contain;
}*/

.permalink-wrapper button {
    margin: 0.5rem;
}

.tooltip-btn {
    --bs-tooltip-bg: var(--bs-secondary-color);
    --bs-tooltip-color: var(--bs-white);
    opacity: 1 !important;
}

img.iiifimg {
    width: 100%
}

#search_container {
    padding: calc(2 * var(--unity));
    padding-top: 0;
}

#facets_form * {
    line-height: var(--bs-body-line-height);
}

#facets_form p {
    margin-bottom: 1rem;
}

#facets_form li, #result_hits li {
    margin-left: 0;
}

#facets_form .card-header {
    height: calc(2 * var(--unity));
    line-height: calc(1.25 * var(--unity));
}

#filters {
    padding: calc(1 * var(--unity)) 0;
}

#filters .form-floating:not(:last-child) {
    margin-bottom: var(--unity);
}

#facets_form > .form-floating:first-child {
    margin-bottom: 0;
}

#result_hits {
    padding-left: calc(2 * var(--unity));
}

#result_ctr {
    position: sticky;
    line-height: var(--unity);
    padding-bottom: 0;
    padding-top: 4px;
    margin-bottom: 0;
    background-color: white;
    width: 100%;
    top: 0;
    margin-left: 0;
    z-index: 101;

}

#res-border {
    border-bottom: 1px solid black;
    margin-top: calc(0.25 * var(--unity));
    margin-bottom: calc(1.5 * var(--unity));
}

#result_container {
    top: calc(1 * var(--unity));
    padding-bottom: var(--unity);
}

#result_container > div.document_preview_container:nth-child(2) {
    z-index: 102;
    padding-bottom: calc(0.5 * var(--unity));
    background-color: white;
}

@media (max-width: 992px) {
    #result_ctr {
        padding-bottom: 10px;
        padding-top: var(--unity);
    }

    #search_container > div, .content-wrapper > section.container {
        padding-left: 0;
        padding-right: 0;
    }

    #result_container > div {
        width: 100%;
        padding-left: 0;
    }

    .collection-preview .img-thumbnail {
        height: 100%;
    }
}

.document_preview_container:nth-child(2) {
    margin-top: calc(-1.5 * var(--unity));
}

#queryInput + label:after {
    background-color: transparent !important;
}

.form-check-input:checked {
    background-color: var(--bg-grey-color);
    border-color: var(--bg-grey-color);
}

.form-check-input:focus {
    border-color: var(--bs-secondary-color);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(50, 50, 50, .25);
}

.form-control:focus {
    box-shadow: 0 0 0 .25rem rgba(50, 50, 50, .25);
}

.vsb-main {
    width: 100%;
}

.vsb-main button, .vsb-menu, .vsb-menu input {
    border-radius: 0 !important;
}

.vsb-main .title {
    font-weight: normal;
}

.vsb-main li:hover {
    background: var(--bs-secondary-bg) !important;
}

.vsb-menu .multi li:not(.grouped-option).active::after {
    height: 11px !important;
    width: 7px !important;
}

@media (max-width: 992px) {

    .vsb-menu .multi li {
        text-wrap: auto;
    }
}

mark {
    padding: 0 !important;
}

.xfade {
    animation: xfade-fx 1s ease;
}

@keyframes xfade-fx {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.alert {
    border-radius: 0;
}

#mirador * {
    font-family: "Ubuntu", "Roboto", "Helvetica", "Arial", sans-serif !important;

}

#mirador header {
    direction: ltr !important;
}

.mirador-companion-window-header {
    min-height: calc(2 * var(--unity)) !important;
}

.mirador-companion-window-header button {
    display: none;
}

.mirador-viewer dl {
    display: grid;
}

.mirador-viewer dt {
    grid-column: 1;
    border-top: 1px solid #EEE;
    margin-top: 0 !important;
    padding-top: 0.5em;
}

.mirador-viewer dd {
    grid-column: 2;
    border-top: 1px solid #EEE;
    margin-top: 0 !important;
    padding-top: 0.5em;
    padding-left: var(--unity);
}

.mirador-window-top-bar {
    border-top: 1px solid #000 !important;
}

.MuiTypography-h3 {
    padding-left: 8px;
}

.MuiTabs-indicator {
    background-color: inherit !important;
}

.MuiTab-textColorPrimary.Mui-selected {
    color: var(--bs-secondary-color) !important;
}

.Mui-selected {
    border-color: var(--bs-secondary-color) !important;
}

#window-1-osd canvas {
    background-color: #333 !important;
}

.table {
    tr:last-child {
        border-bottom-color: transparent !important;
    }
}