@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Raleway:wght@700;800&display=swap');

:root {
    --page-background-color: #FFF;
    --header-background-color: #FFF;
    --footer-background-color: #CCC;
    --container-max-width:;
    --icon-size: 0.80em;
    --dark-blue: #0c1d44;
    --grey: #727272;
    --base-font-family: 'Open Sans', sans-serif;
    --base-font-color: #333;
    --base-font-size: 1;
    --base-font-line-height: 1.6;
    --base-font-smaller: 14px;
    --base-font-bigger: 20px;
    --base-font-weight: 500;
    --header-font-family: 'Raleway';
    --header-font-color: #0c1d44;
    --header-font-size: 20px;
    --header-font-weight: 500;
    --header-font-size-multiplier: 2;
    --text-muted: #676868;
    --link-color: #212529;
    --link-color-hover: #066ab7;
    --link-font-weight:;
    --link-decoration:;
    --padding:;
    --border-width:;
    --border-color: #dee2e6;
    --fab-button-border-color: #d9d4e6;
    --pagenumber-link-color:;
    --pagenumber-link-background-color:;
    --pagenumber-link-color-hover:;
    --pagenumber-link-background-color-hover:;
    --pagenumber-link-color-active: #FFF;
    --pagenumber-link-background-color-active: #4ba8cc;
    --imput-check-background-color: #4ba8cc;
    --imput-check-border-color: #4ba8cc;
    --footer-link-color:;
    --footer-link-color-hover:;
    --btn-primary-background: #00c2ec;
    --btn-primary-color: #FFF;
    --btn-primary-border: #00c2ec;
    --btn-primary-background-hover: #1ab9c6;
    --btn-primary-color-hover: #FFF;
    --btn-primary-border-hover: #1ab9c6;
    --btn-primary-background-active:;
    --btn-primary-color-active:;
    --btn-primary-border-active:;
    --btn-outline-primary-background:#FFF;
    --btn-outline-primary-color:#000;
    --btn-outline-primary-border:#eeeeee;
    --btn-outline-primary-background-hover:#00c2ec;
    --btn-outline-primary-color-hover:#FFF;
    --btn-outline-primary-border-hover:#00c2ec;
    --btn-outline-primary-background-active:;
    --btn-outline-primary-color-active:;
    --btn-outline-primary-border-active:;
    --btn-secondary-background:#4ba8cc;
    --btn-secondary-color:#FFF;
    --btn-secondary-border:#4ba8cc;
    --btn-secondary-background-hover:#4e95b0;
    --btn-secondary-color-hover:#FFF;
    --btn-secondary-border-hover:#4e95b0;
    --btn-secondary-background-active:;
    --btn-secondary-color-active:;
    --btn-secondary-border-active:;
    --btn-outline-secondary-background:#FFF;
    --btn-outline-secondary-color:#333;
    --btn-outline-secondary-border:#ced4da;
    --btn-outline-secondary-background-hover:#FFF;
    --btn-outline-secondary-color-hover:#4ba8cc;
    --btn-outline-secondary-border-hover:#ced4da;
    --btn-outline-secondary-background-active:;
    --btn-outline-secondary-color-active:;
    --btn-outline-secondary-border-active:;
    --btn-login-background: #06c213;
    --btn-login-color: #FFF;
    --btn-login-border: #06c213;
    --btn-login-background-hover: #26d933;
    --btn-login-color-hover: #FFF;
    --btn-login-border-hover: #26d933;
    --btn-login-background-active: #26d933;
    --btn-login-color-active: #FFF;
    --btn-login-border-active: #26d933;
    --card-title-font-size: 14px;
    --card-title-line-height: 1.35;
    --card-subtitle-font-size: 14px;
    --card-subtitle-line-height: 1.35;
    --card-author-font-size:12px;
    --card-metadata-font-size: 12px;
    --bs-btn-active-border-color: #FFF;
    --bs-btn-active-color: #066ab7 !important;
    --bs-btn-hover-color: #066ab7 !important;
    --btn-border-radius: 3px !important;

    --reader-sansserif-font-family: 'Open Sans', sans-serif;
    --reader-serif-font-family: 'Source Serif 4', serif;

    --search-cover-background: #e4f0f2;
    --note-comment-font-size: 15px;
    --bg-light:     #e4f0f5;
    --gradient: -webkit-linear-gradient(320deg, #00bff3, #00f38a);
}

/* Boot rework */

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1200px; }
}
.svg-inline--fa { height: var(--icon-size); }

.reader-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}


html,body   {  }
body { background-color: var(--page-background-color) !important; font-family: var(--base-font-family) !important; font-size: var(--base-font-size) !important; line-height: var(--base-font-line-height) !important; }
header  {}
.header-actions         { display: flex; }
.header-actions .fas    { margin-right: 0.3rem; }
.nav-access             { position: absolute; top: -100em; width: 100%; z-index: 1000; }
.page-top-banner        {}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--header-font-family);
    color: var(--header-font-color);
    font-weight: 900;
}

html a           { color: var(--link-color) }
html a:hover     { color: var(--link-color-hover) }

body.font-serif #reader { font-family: var(--reader-serif-font-family); }
body.font-serif #reader h1,
body.font-serif #reader .h1,
body.font-serif #reader h2,
body.font-serif #reader .h2,
body.font-serif #reader h3,
body.font-serif #reader .h3,
body.font-serif #reader h4,
body.font-serif #reader .h4,
body.font-serif #reader h5,
body.font-serif #reader .h5,
body.font-serif #reader h6,
body.font-serif #reader .h6 { font-family: var(--reader-serif-font-family); }

h1, .h1 { font-size: 3rem; }


header .page-link,
footer .page-link,
header .btn,
footer .btn                { font-family: var(--header-font-family); font-weight: 600 !important; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--btn-border-radius); }

@media (min-width: 768px) {
    header .page-link,
    footer .page-link,
    header .btn,
    footer .btn            { font-size: 14px; }
}


.btn           { font-size: 0.9rem !important; font-family: 'Open sans' !important; font-weight: 600 !important; }
.btn-more           {  padding: 0.175rem 0.75rem 0.175rem !important; line-height: 1rem !important; }


.btn-primary                        { background: var(--btn-primary-background) !important; border-color: var(--btn-primary-border) !important; color: var(--btn-primary-color) !important;  }
.btn-primary.hover,
.btn-primary:hover                  { background-color: var(--btn-primary-background-hover) !important; border-color: var(--btn-primary-border-hover) !important; color: var(--btn-primary-color-hover) !important; }
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle,
.btn-primary.focus,
.btn-primary:focus                  { background-color: var(--btn-primary-background-hover) !important; border-color: var(--btn-primary-border-hover) !important; color: #FFF !important; }
.btn-primary.disabled			    { background-color: #cacaca !important; border-color: #cacaca !important; }
.btn-primary.disabled:focus		    { box-shadow: none; }

.btn-outline-primary                        { background: var(--btn-outline-primary-background) !important; border-color: var(--btn-outline-primary-border) !important; color: var(--btn-outline-primary-color) !important; font-weight: 500 !important; }
.btn-outline-primary.hover,
.btn-outline-primary:hover                  { background-color: var(--btn-outline-primary-background-hover) !important; border-color: var(--btn-outline-primary-border-hover) !important; color: var(--btn-outline-primary-color-hover) !important; }
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle,
.btn-outline-primary.focus,
.btn-outline-primary:focus                  { background-color: var(--btn-outline-primary-background-hover) !important; border-color: var(--btn-outline-primary-border-hover) !important; color: #FFF !important; }
.btn-outline-primary.disabled			    { background-color: #cacaca !important; border-color: #cacaca !important; }
.btn-outline-primary.disabled:focus		    { box-shadow: none; }

.btn-secondary                        { background: var(--btn-secondary-background) !important; border-color: var(--btn-secondary-border) !important; color: var(--btn-secondary-color) !important; font-weight: 500 !important; }
.btn-secondary.hover,
.btn-secondary:hover                  { background-color: var(--btn-secondary-background-hover) !important; border-color: var(--btn-secondary-border-hover) !important; color: var(--btn-secondary-color-hover) !important; }
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle,
.btn-secondary.focus,
.btn-secondary:focus                  { background-color: var(--btn-secondary-background-hover) !important; border-color: var(--btn-secondary-border-hover) !important; color: #FFF !important; }
.btn-secondary.disabled			    { background-color: #cacaca !important; border-color: #cacaca !important; }
.btn-secondary.disabled:focus		    { box-shadow: none; }


.btn-outline-secondary                        { background: var(--btn-outline-secondary-background) !important; border-color: var(--btn-outline-secondary-border) !important; color: var(--btn-outline-secondary-color) !important; font-weight: 500 !important; }
.btn-outline-secondary.hover,
.btn-outline-secondary:hover                  { background-color: var(--btn-outline-secondary-background-hover) !important; border-color: var(--btn-outline-secondary-border-hover) !important; color: var(--btn-outline-secondary-color-hover) !important; }
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.show>.btn-outline-secondary.dropdown-toggle,
.btn-outline-secondary.focus,
.btn-outline-secondary:focus                  { background-color: var(--btn-outline-secondary-background-hover) !important; border-color: var(--btn-outline-secondary-border-hover) !important; color: var(--btn-outline-secondary-color-hover) !important; }
.btn-outline-secondary.disabled			    { background-color: #cacaca !important; border-color: #cacaca !important; }
.btn-outline-secondary.disabled:focus		    { box-shadow: none; }

.btn-login                        { background: var(--btn-login-background) !important; border-color: var(--btn-login-border) !important; color: var(--btn-login-color) !important; font-weight: 500 !important; }
.btn-login.hover,
.btn-login:hover                  { background-color: var(--btn-login-background-hover) !important; border-color: var(--btn-login-border-hover) !important; color: var(--btn-login-color-hover) !important; }
.btn-login:not(:disabled):not(.disabled).active,
.btn-login:not(:disabled):not(.disabled):active,
.show>.btn-login.dropdown-toggle,
.btn-login.focus,
.btn-login:focus                  { background-color: var(--btn-login-background-hover) !important; border-color: var(--btn-login-border-hover) !important; color: #FFF !important; }
.btn-login.disabled			    { background-color: #cacaca !important; border-color: #cacaca !important; }
.btn-login.disabled:focus		    { box-shadow: none; }



/* KLEUREN */
.bg-light-blue  { background-color: var(--bg-light); }




/* PAGINATION */
.active > .page-link, .page-link.active {
    color: var(--btn-primary-color);
    background-color: var(--bs-btn-active-color) !important;
    border-color: var(--bs-btn-active-color) !important;
}
.offcanvas-body .page-link  { padding-left: 0.75rem; padding-right: 0.75rem; } 
 .page-link:NOT(.active)  {
    color: #333 !important;
} 
.page-link{
    display: flex !important;
    justify-content: center;
    min-width: 33px;
    margin-right: 5px;
    border-radius: 3rem !important;
    
}
.page-item.active .page-link  {
    color: #FFF !important;
    background-color: var(--pagenumber-link-background-color-active) !important;
    border-color: var(--pagenumber-link-background-color-active) !important;
}



*:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

/* SCHAKELAAR */
.form-check-input:checked {
    background-color: #E91E63 !important;
    border-color: #0d6efd;
}


/* HOMEPAGE HEADER */
.home .masthead-curve { position: absolute; top:0;left:0; width:100%;padding: 4rem 0; background: url('/images/pubconnect_beeldmerk_color.svg') -700px -300px / 200% no-repeat; filter: opacity(10%) grayscale(85%); }
.home .masthead .book-partner-logo { display: flex; justify-content: center; align-items: center; min-height: 150px; padding: 0 30px; }
.home .masthead .book-partner-logo img { height: auto; max-height: 150px; width: auto; max-width: 100%; }
.home .masthead-curve div { min-height: 150px; }
.home .masthead { padding-top: 4rem; padding-bottom: 4rem;
	background: linear-gradient(135deg, #cbecf1, #aae3eb, #ede4fa, #fed4fb);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
    position: relative;
    min-height: 150px;
    margin-bottom: 4rem;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* SEARCH switch */
.form-check-input:checked {
    background-color: var(--imput-check-background-color) !important;
    border-color: var(--imput-check-border-color) !important;
}

/* SEARCH RESULTS */
.form-check-label   { cursor: pointer; }

.book-search    { position: absolute; left: 0; bottom: -2rem; width: 100%; z-index: 5;  }
.card.pdf-search-item:hover,
.card.book-search-item:hover    { filter: drop-shadow(0px 10px 10px #00000023); }
.pdf-search-item .search-cover, .book-search-item .search-cover { background-color: var(--search-cover-background); display: flex; justify-content: center; align-items: start;    padding: 1rem 1rem; position:relative; overflow: hidden;}
.pdf-search-item .search-cover img, .book-search-item .search-cover img { max-width: 130px; width: 100%; }
.pdf-search-item .search-text, .book-search-item .search-text { display: flex; flex-direction: column;  }
.pdf-search-item .search-text .label-pdf-file { display: inline-block;  }
.pdf-search-item .search-text .search-source, .book-search-item .search-text .search-source { font-size: 0.8rem; line-height: 1.1rem; padding: 0.5rem 1rem 1rem; }
.pdf-search-item .search-text .search-source .search-publication-title, .book-search-item .search-text .search-source .search-publication-title { font-weight: 600; }
.pdf-search-item .search-text .search-source .search-publication-pagenum, .book-search-item .search-text .search-source .search-publication-pagenum { font-weight: 400; }

.input-group-book-search { border: 6px solid white; border-radius: 15px; filter: drop-shadow(0px 0px 5px #33333350); background-color: #FFF; }
.input-group-book-search .input-group .btn,
.input-group-book-search .input-group .form-control { border-width: 0 !important; }

/* .input-group-book-search { border: 6px solid white; border-radius: 15px; filter: drop-shadow(0px 0px 5px #33333350); }
.input-group-book-search .btn,
.input-group-book-search input { border: 0px; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 65%, rgba(236,236,236,1) 100%) !important; } */


/* OFFSCREEN */
.offscreen-item           { padding: 1rem 0; border-top: 1px solid var(--border-color); }
.offscreen-item-title     { font-size: 15px; font-weight: 600; }
.offscreen-item-date      { font-size: 0.8rem; color: var(--text-muted);  }
.offscreen-item-subtitle  { font-size: 14px; font-weight: 600; }
.offscreen-item-number    { font-size: 14px; color: #555; }
.offscreen-item-snippet   { font-size: 15px; line-height: 22px; margin-top: 5px; }
.offscreen-item-snippet:hover   { color: var(--bs-btn-hover-color); }

/* OFFCANVAS */
.offcanvas-footer{
    /* border-top: 1px solid var(--border-color); */
    /* flex-grow: 1; */
    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
    /* overflow-y: auto; */
}



/* CARDS */
.card { border-radius:  var(--btn-border-radius); border-color: var(--border-color); }

.card.book  { overflow: hidden; }
.card.book .card-header  { padding: 1.5rem 0 1rem; display: flex; justify-content: center;


    background: rgb(255,255,255);
    /* background: linear-gradient(355deg, rgba(255,255,255,1) 40%, rgba(247,237,215,1) 40%); */

    border-bottom: 0;

}


.card.book .card-header { perspective: 264px; transition: all ease-in-out 0.3s; min-height:200px;}
.card.book .card-header img { /* filter: drop-shadow(0px 4px 4px #00000061);*/ position: relative; z-index: 10; border-bottom: 0px solid #FFF; filter: drop-shadow(0px 0px 0px #00000040); }
.card.book .card-title  { font-size: var(--card-title-font-size); line-height: var(--card-title-line-height); margin-bottom: 4px; }
.card.book .card-subtitle  { font-size: var(--card-subtitle-font-size); line-height: var(--card-subtitle-line-height); color: var(--grey); margin-bottom: 0;  }
.card.book .card-metadata  { font-size: var(--card-metadata-font-size); line-height: var(--card-subtitle-line-height); color: var(--grey); margin-bottom: 0; opacity:1; transition: all ease-in-out 0.3s; margin-top: auto; }
.card.book .card-author  { font-size: var(--card-author-font-size); color: var(--grey); }

.card.book  { transition: all ease-in-out 0.2s; }
.card.book:hover { filter: drop-shadow(0px 10px 10px #00000023); }
.card.book:hover .card-metadata   { opacity:0; }
.card.book:hover .card-header  {
    border-bottom: 0;
}

.card-header img        { max-height: 190px; transition: all ease-in-out 0.4s; }

.card-header:before     {
    content: ''; position: absolute;
    top: -130px; right: -120px;
    width: 350%; height: 280px;
    border-radius: 50%;
    background: #eee;
    filter: saturate(80%) brightness(1.25);
    transition: height ease-in-out 0.5s;
    z-index: 8;
}

.card-header:after     {
    content: ''; position: absolute;
    top: -130px; right: -100px;
    width: 350%; height: 310px;
    border-radius: 50%;
    background: #eee;
    filter: saturate(30%) brightness(1.4);
    transition: height ease-in-out 0.5s;
    z-index: 6;
}

.card.book:hover .card-header:before       { height: 260px; }
.card.book:hover .card-header:after        { right: -70px; width: 500%; height: 360px; }

.card-author                                { margin: 0; }
.card.book .card-body                       { display: flex; flex-direction: column; }
.card-body-wrapper                          { position: absolute; bottom: -70px; transition: all ease-in-out 0.15s; opacity: 0; }
.card.book:hover .card-body-wrapper         { bottom: 0; opacity: 1; }
.card.book:hover .card-header { padding-top: 0;padding-bottom: 0; }
.card.book:hover .card-header img           { transform: translate(0px, -10px) rotateX(15deg) scale(1,0.8) skewY(3deg); border-bottom: 4px solid #b9b8b8; filter: drop-shadow(5px 20px 7px #00000025); }

/* This b0rks the swiper end calculation

.swiper.publications .swiper-slide               { height: 380px !important; min-width: 200px;}


.swiper .card.book          { height: 100%; }


.swiper.publications .swiper-slide               { max-width: 185px; }
*/

/* Dashboard welcom */
.dashboard-actions  { display: flex; flex-direction: column; height: 100%; }    
.dashboard-actions .row { height: 100%; }    
.dashboard-actions .row a.card { position: relative; height: 100%; text-decoration: none; padding: 0.75rem 0.75rem 2rem; font-size: 0.9rem; line-height: 1.2rem; min-height: 110px; border-radius: 0; background-color: #FFF; border: 0; border-top: 6px solid #bae7ee; transition: all ease 0.25s; }    
.dashboard-actions .row a.card:hover { border-color: #b9bddd;  }    
/* .dashboard-actions .row a.card h3 { font-size: 1.2rem; margin-bottom: 0.15rem; }     */
.dashboard-actions .row a.card .fa-arrow-right { position: absolute; right: 13px; bottom: 22px; z-index: 1; }