/* ############################################## //
// ################## HEADER #################### //
// ############################################## */

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1224px;
    padding: 0 10px;
    height: 100%;
    margin: auto;
    gap: 10px
}

.header .logo-header img {
    width: 90px;
    padding-right: 10px;
}

.header .logo-header .text{
    border-left: 1px solid var(--white);
    padding: 5px ;
    /*padding: 12px 10px 10px;*/
}

/* ############# // END HEADER // ###############*/

/* ############################################## //
// ################ SEARCH BOX ################## //
// ############################################## */

/* Places? header, search-results, home */

.search-box {
    display: flex;
    align-items: center;
    flex-grow: 1;
    margin: 0 0;
}

.search-box-shadow {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    /*box-shadow: 0 10px 20px #0002;*/
}

.search-box input {
    flex-grow: 1;
    border-right: none;
    color: var(--text-black);
}

.search-box-border input {
    border: 1px solid var(--pale-gray) !important;
    border-right: none !important;
}

.search-rounded input {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.search-box button {
    border: 1px solid;
    border-radius: 0;
    text-align: center;
    font-family: 'Material Icons', sans-serif;
    border-left: none;
}

.search-box button.btn-search-gray{
    border: none;
    background: #e1e1e1;
}

.search-rounded button {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.search-box-header input {
    height: 40px;
}

.search-box-header button {
    background: var(--tu-delft-dark-blue);
    border-color: var(--tu-delft-dark-blue);
    height: 40px;
    width: 40px;
    line-height: 23px;
    font-size: 28px;
}

.search-box-header button:hover {
    background: var(--tu-delft-secondary-blue);
    border-color: var(--tu-delft-secondary-blue);
}

.search-box-component input {
    height: 47px;
}

.search-box-component button {
    background: var(--tu-delft-dark-blue);
    border-color: var(--tu-delft-dark-blue);
    /*background: var(--tu-delft-primary-blue);*/
    /*border-color: var(--tu-delft-primary-blue);*/
    height: 47px;
    width: 47px;
    line-height: 20px;
    font-size: 28px;
    color: var(--text-white);
}

.search-box-component button:hover {
    background: var(--tu-delft-secondary-blue);
    border-color: var(--tu-delft-secondary-blue);
}

/* ########### // END SEARCH BAR // #############*/

/* ############################################## //
// ################## FOOTER #################### //
// ############################################## */


.footer-container {
    margin: auto;
    max-width: 1200px;
    padding: 10px;
    justify-content: space-between;
    align-items: center;
}

.footer-container h2 {
    padding: 15px 0;
}

.footer-section.quick-links {
    background-color: var(--background-off-white);
    color: var(--text-black);
}

.footer-section.options {
    background-color: var(--darkmode-black);
}

.footer-section.options a {
    color: var(--white) !important;
}


.footer-section .about li, .footer-section .navigation li {
    padding: 4px 0;
    color: var(--tu-delft-secondary-blue);
}

/* ############# // END FOOTER // ###############*/

/* ############################################## //
// ################## RECORD ################### //
// ############################################# */

.record-wrap {
    margin: auto;
    padding: 40px 20px;
}

.record-container {
    padding: 0 20px;
}

.metadata {
    font-family: var(--font-family-base);
    color: #888888;
    font-size: 13px;
    line-height: 20px;
}

.metadata a {
    font-family: var(--font-family-base);
    color: var(--tu-delft-secondary-blue);
}

.more-info details {
    background-color: var(--white);
    padding: 5px 20px 15px;
    margin: 20px 0;
    border-top: var(--tu-delft-primary-blue) 4px solid;
}

.more-info .title {
    font-weight: bold;
}

.more-info a {
    font-family: var(--font-family-base);
    color: var(--tu-delft-secondary-blue);
}

.files {
    background-color: var(--white);
    margin: 10px 0;
    padding: 10px;
    color: var(--tu-delft-primary-blue);
    border-bottom: 4px solid var(--tu-delft-primary-blue);
}

.cc-icon{
    width: 24px;
    margin-top: 2px;
}

span.tooltip-license .icon {
    color: var(--lighter-gray);
    font-size: 12px;
    /*margin-left: -4px;*/
}

.related-tile {
    background-color: var(--white);
}

.related-tile img {
    aspect-ratio: 2;
    max-height: 200px;
}

.related-tile .title {
    color: var(--tu-delft-primary-blue);
    font-size: var(--font-lg);
    line-height: var(--font-line-base);
    font-weight: 700;
    padding: 20px;
}

.pdf-object {
    box-shadow: 0 10px 20px #0002;
}

.pdf-object object {
    width: 100%;
    height: calc(100vh - 200px);
}

img.main-file {
    margin: 0 auto;
}

.menu .title {
    font-size: 1rem;
    line-height: 1.5rem;
}

.menu .title {
    font-size: 1.15rem;
    line-height: 1.65rem;
    font-weight: 700;
}

.menu .filter input[type=checkbox] {
    margin-top: 0.27em;
}

.menu .filter .name {
    margin-left: 0.3rem;
}

.menu .filter .qty {
    color: #888888;
}

/* ############# // END RECORD // ###############*/

/* ############################################## //
// ############## SEARCH PAGE ################### //
// ############################################## */

.search-content {
    border-left: 1px solid var(--pale-gray);
}

.search-options select {
    border: 1px solid #cccccc;
    background: var(--white);
    padding: 12px 30px 12px 12px;
    appearance: none; /* Remove default arrow in some browsers */
    -webkit-appearance: none; /* Remove default arrow in older versions of WebKit */
    -moz-appearance: none; /* Remove default arrow in Firefox */
    background: url(/static/images/icons/selector-arrow.svg) no-repeat right 10px center;
    background-color: white;
    background-size: 16px; /* Adjust the size of the arrow */
}

.search-options select option {
    padding: 7px;
    font-size: var(--font-base);
}

/* Style for Firefox */
.search-options select::-ms-expand {
    display: none;
}

.search-options select::-ms-expand {
    margin-right: 3px;
}

.search-full-text input {
    border: 1px solid var(--light-gray);
}

.search-index .icon {
    color: var(--link-blue);
    padding-top: 2px;
    padding-right: 2px;
}

.search-index .results-qty {
    color: var(--light-gray);
    text-align: right;
}

.blurred {
    filter: blur(5px);
    pointer-events: none;
}

/* ############ MENU SEARCH FILTER ############## */

/* ########### LISTED RECORD ################ */
/* listed-domain-preview:domain displayed in search result */

.listed-record-preview {
    border-bottom: 1px solid var(--pale-gray);
}

.listed-record-preview h2 {
    color: var(--tu-delft-primary-blue);
}

.listed-record-preview h3 {
    font-family: var(--font-family-base);
    color: var(--lighter-gray);
    font-size: 19px !important;
    line-height: 23px !important;
    font-weight: 700 !important;
}

.listed-record-preview a {
    color: var(--tu-delft-primary-blue);
}

.listed-record-preview .metadata {
    font-size: var(--font-sm);
    line-height: var(--font-line-sm);
    color: var(--light-gray)
}

.listed-record-preview .btn-more {
    margin: 5px;
    padding: 10px;
    text-align: center;
    line-height: 28px;
    font-size: 28px;
    border-radius: 100%;
    border: 1px solid var(--tu-delft-secondary-blue);
    color: var(--tu-delft-secondary-blue);
    font-family: 'Material Icons', sans-serif;
    transition: padding 0.1s ease, margin 0.1s ease
}

.listed-record-preview .btn-more:hover {
    background: transparent;
    padding: 15px;
    margin: 0;
}

.listed-record-preview .embargo {
    color: var(--light-gray);
}

.listed-record-preview .keywords-wrap {
    margin-left: -3px;
}

.md-note {
    font-size: var(--font-base);
    line-height: var(--font-line-base);
    color: var(--light-gray);
}

.small-note {
    font-size: var(--font-sm);
    line-height: var(--font-line-sm);
    color: var(--light-gray);
    font-style: italic;
}

.small-note-not-italic {
    font-size: var(--font-sm);
    line-height: var(--font-line-sm);
    color: var(--light-gray);
}

/* ############################################## //
// ################# HOME PAGE ################## //
// ############################################# */

.welcome-image {
    height: 250px;
    /*background-image: url(/static/images/heroimage.jpg);*/
    background-image: url(/static/images/welcome_image.jpg);
    /*background-position-y: -300px;*/
    background-size: cover;
    position: relative;
    background-position: center 43%;
}

.faculty-image {
    height: 250px;
    background-image: url(/static/images/industrial_design_hero.png);
    background-size: cover;
    position: relative;
    background-position: center 45%;
}


/*.welcome-image::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*      !*background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);*!*/
/*      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 1) 100%);*/

/*  !*background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));*!*/
/*  !* You can adjust the gradient direction and colors as needed *!*/
/*}*/

.repo-info h3 {
    color: var(--text-black);
}

.repo-info .statistics-number {
    font-family: var(--font-family-titles);
    font-weight: 400 !important;
    color: var(--tu-delft-primary-blue);
    font-size: 2.2rem;
    line-height: 2.7rem;
    margin-bottom: 5px;
}

.contact-box {
    background-color: var(--white);
    border-left: 4px solid var(--tu-delft-primary-blue);
    width: 358px;
    padding: 20px;
    margin: 0 auto;
}

.contact-box h2 {
    color: var(--text-black);
}

.contact-box .contact-info {
    display: flex;
    flex-direction: row;
    align-content: center;
    margin: 5px 0;
}

.contact-box .contact-info span {
    margin-right: 5px;
    font-family: 'Material Icons', sans-serif;
    color: var(--tu-delft-primary-blue);
}

.featured-article img {
    width: 390px;
}

.featured-article .sub-title {
    color: var(--light-gray);
}

/* ############ // END HOME PAGE // #############*/

/* ############################################## //
// ################# THEME CARD ################# //
// ############################################# */

.theme-card {
    width: 200px;
    height: 200px;
    position: relative;
}

.theme-card .gradient {
    --tw-gradient-from: #000 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
    width: 200px;
    height: 200px;
    z-index: 10;
    position: absolute;
    border-radius: 5px;
}

.theme-card .info {
    position: absolute;
    bottom: 0;
    z-index: 20;
    padding: 10px 10px 20px;
    width: 200px;
    color: var(--text-white);
}

.theme-card .info h3 {
    color: var(--text-white);
    margin-bottom: 6px;
}

.theme-card img {
    width: 200px;
    height: 200px;
    border-radius: 5px;
}

/* ########### // END THEME CARD // #############*/

.overnight-altmetric a {
    width: 125px !important;
    height: 18px !important;
}

.yellow-font {
    color: #D4A300;
}

.record-navigator {
    top: 5%;
    left: 5%;
    position: sticky;
}

/* ############################################## //
// ################ PERSON PAGE  ################ //
// ############################################# */

.person .badge {
    width: 110px;
    height: 110px;
    text-align: center;
    font-family: var(--font-family-titles);
    font-size: var(--font-3xl);
    line-height: 110px;
    background: #2F80ED;
    border-radius: 9999px;
    color: var(--text-white);
}

.person .details {
    font-size: var(--font-sm);
    line-height: var(--font-line-sm);
}


/* ############## navigation tabs ################### */
.nav-tabs {
    overflow: hidden;
}

.person-nav ul{
    font-family: var(--font-family-titles);
    border-bottom: 1px solid var(--50perc-light-gray);
}


.person-nav ul li{
}

.person-nav ul li a{
    padding: 4px 20px;
    display: block;
    cursor: pointer;
}


.person-nav .nav-tab-link a.active {
    border-bottom: 5px solid var(--tu-delft-primary-blue);
}


/* ########### // END PERSON PAGE // ############*/