@import url('/imcms/lots/lerum/style-mobile-menu.css?_=89712346');
@import url('/imcms/lots/lerum/font/TrajanPro3Light/style.css');

:root {
	--lerum-light-blue: #D6EFEC;
	--lerum-dark-blue: #002447;

	--lerum-blacktext: #000;
	--lerum-textcolor: var(--lerum-blacktext);
	--lerum-bluetext: #003b6c;
	--lerum-whitetext: #FFF;
	--lerum-link-hover: rgba(0, 123, 255, 1);

	--lerum-lightest-yellow: rgba(255, 230, 102, .3);
	--lerum-light-yellow: rgb(255, 236, 194);
	--lerum-dark-yellow: rgb(246, 202, 53);
	--lerum-light-gray: #ebe8e5;
	
	--lerum-logo-text: #222;

	--lerum-plate-bg: rgb(185,182,185);

	--lerum-button-color: black;
	--lerum-button-hover-shadow: inset 0 0 10px 0 rgba(255, 255, 255, .7);

	--site-link-box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 1);
}

body {
	background-color: var(--lerum-whitetext);
	font-family: 'Open Sans', sans-serif;
	color: var(--lerum-textcolor);
}


h2.plate-heading {
	color: var(--lerum-blacktext);
	background-color: var(--lerum-plate-bg);
}

#latestListHeading,
h2.plate-heading.kohalist-heading {
	background-color: var(--lerum-plate-bg);
}

footer a,
footer a:link,
footer a:visited {
	color: var(--lerum-textcolor);
	text-decoration: underline;
}


a:active,
a:focus,
a.stretched-link:active::after,
a.stretched-link:focus::after {
	box-shadow: var(--site-link-box-shadow);
}

a:hover,
#footer a:hover {
	color: var(--lerum-link-hover);
}

.start-box a:link,
.start-box a:visited {
	color: var(--lerum-textcolor) !important;
}


#topMenu ul.top-menu-ul > li > a,
#topMenu ul.top-menu-ul > li > span {
	color: var(--lerum-blacktext);
}

#topMenu ul.top-menu-ul > li > a.drop-down-toggler,
#topMenu ul.top-menu-ul > li > span.drop-down-toggler {
	left: -10px;
}

#topMenu ul.nav-menu-sub li > a,
#topMenu ul.nav-menu-sub li > span,
#mobileMenu ul.nav-menu-sub li > a,
#mobileMenu ul.nav-menu-sub li > span {
	font-size: 15px;
}

#topMenu ul.nav-menu-sub li > a > span,
#topMenu ul.nav-menu-sub li > span {
	position: relative;
}
#topMenu ul.nav-menu-sub li > a:hover,
#topMenu ul.nav-menu-sub li > a:active {
	color: var(--lerum-textcolor) !important;
	background-color: var(--lerum-light-yellow);
	text-decoration: none !important;
}


#topMenu .nav-menu-sub li.branch-inact > a > span > i,
#topMenu .nav-menu-sub li.branch-act > a > span > i,
#mobileMenu li.branch-inact > a > span > i,
#mobileMenu li.branch-inact > span > i,
#mobileMenu li.branch-act > a > span > i,
#mobileMenu li.branch-act > span > i {

}

#topMenu .nav-menu-sub li.branch-act > a > span > i,
#mobileMenu li.branch-act > a > span > i,
#mobileMenu li.branch-act > span > i {

}

/* *******************************************************************************************
 *         Hide calendar until CSS is loaded                                                 *
 ******************************************************************************************* */

.calendar-content {
	display: none;
}
.calendar-content.calendar-content-shown {
	display: block;
}


/* *******************************************************************************************
 *         Content                                                                           *
 ******************************************************************************************* */

#header {
	background-color: transparent;
}


#headerTopPart {
	margin: 0 auto !important;
	padding: 15px 20px 20px 20px !important;
	background-color: white !important;
}
#headerTopPart > .row {
	align-items: baseline;
}

#headPlateWrapper {
	position: relative;
	padding: 0;
	background-color: var(--lerum-plate-bg);
	border-top:0;
}

#logo {
	float: left;
	flex: 0 1 95px;
	padding: 0;
	background-color: transparent;
	transition: all ease-in-out .3s;
}
@media screen and (max-width: 600px){
	#logo {
		flex: 0 0 80px;
	}
}
@media screen and (max-width: 400px){
	#logo {
		flex: 0 0 65px;
	}
}
#logo img {
	min-width: 55px;
}

#headerLeft h1 {
	font: 45px/1.1 'Open Sans', sans-serif;
	font-size: clamp(2rem, 1.5789rem + 2.1053vw, 2.5rem);
	color: var(--lerum-logo-text);
	float: right;
	margin: 0 0 0 clamp(1rem, 4vw, 2rem);
	transition: all ease-in-out .3s;
}
#headerLeft h1 > span {
	display: inline;
}

@media screen and (max-width: 400px){
	#imcms-admin {
		display: none;
	}
	#headerLeft h1 {
		font-size: 35px;
		font-size: clamp(1.8rem, 10vw, 2.3rem);
		margin: 15px 0 15px 15px;
	}
}

#searchForm_lookfor:focus,
#searchForm_type:focus,
#searchForm .form-control:focus {
	-webkit-box-shadow: var(--site-link-box-shadow);
	-moz-box-shadow: var(--site-link-box-shadow);
	-o-box-shadow: var(--site-link-box-shadow);
	box-shadow: var(--site-link-box-shadow);
}

#memberentry_password .alert-info {
	background-color: var(--lerum-light-gray) !important;
}

#menuBtn {
	margin-bottom: 0;
}
#menuBtn.hamburger-menu {
	display: block;
	cursor: pointer;
	position: relative;
	width: auto;
	height: auto;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 10px;
	translate: 15px 2px;
	flex: 0 0 50px;
}
#menuBtn .menu-btn-bars::before {
	transition: all ease-in-out .3s;
}
@media screen and (max-width: 400px){
	#menuBtn .menu-btn-bars::before {
		font-size: 2.2rem;
	}
}
.xs #menuBtn.hamburger-menu {
	margin-right: 10px;
}

#headPlateWrapper .dropdown-menu {
	padding: 0 !important;
	border-radius: 0 !important;
}


#headPlateWrapper .dropdown-menu .dropdown-header {
	font-weight: 600 !important;
}

#headPlateWrapper .dropdown-menu .dropdown-item {
	padding-left: 34px !important;
}


#headPlateWrapper .dropdown-menu .dropdown-header {
	background-color: var(--lerum-light-gray) !important;
	color: var(--lerum-textcolor) !important;
}

.dropdown-item:focus, .dropdown-item:hover {
	background-color: var(--lerum-light-yellow) !important;
	color: var(--lerum-textcolor) !important;
}

.dropdown-item.active, .dropdown-item:active {
	color: var(--lerum-textcolor) !important;
	background-color: var(--lerum-light-yellow) !important;
}

.dropdown-in-header .dropdown-item.active, .dropdown-in-header .dropdown-item:active, .dropdown-in-header .dropdown-item:hover, .dropdown-in-header .dropdown-item:focus, .dropdown-in-header .dropdown-item.active a, .dropdown-in-header .dropdown-item:active a, .dropdown-in-header .dropdown-item:hover a, .dropdown-in-header .dropdown-item:focus a {
	color: var(--lerum-textcolor) !important;
	background-color: var(--lerum-light-yellow) !important;
}

#headPlateWrapper .dropdown-menu {
	background-color: var(--lerum-light-gray) !important;
}

#headPlateWrapper .dropdown-menu a {
	color: #000 !important;
}



ul.header-menu li > a,
.library-info-head-heading::before,
ul.header-menu li.item-login a.my-lib-link-0 {
	display: inline-block;
	box-sizing: content-box !important;
	padding-right: 38px !important;
	background: transparent url(/imcms/lots/lerum/images_gui/icons/header_icons_sprite.png?_=871936) right 0 no-repeat;
	line-height: 26px !important;
}
#mobileMenu ul.header-menu li a {
	background: transparent none !important;
	padding-right: 0;
}

ul.header-menu li.item-lang > a {
	background-position: right 0;
}
ul.header-menu li.item-listen > a {
	background-position: right -100px;
}
ul.header-menu li.item-card > a {
	background-position: right -200px;
}
ul.header-menu li.item-login > a,
ul.header-menu li.item-login a.my-lib-link-0 {
	background-position: right -300px;
}
#loginLinkHtml {
	margin-right: 2px;
}
#loginLinkHtml a {
	font-size: clamp(0.8rem, 0.4444rem + 1.7778vw, 1rem);
	padding: 0 36px 0 10px !important;
	letter-spacing: -.2px;
	white-space: nowrap;
}
.lt-xl #loginLinkHtml a {
	padding: 0 0 0 10px !important;
	border: 0 !important;
	background: none !important;
}

/* *******************************************************************************************
 *         Open Hours                                                                        *
 ******************************************************************************************* */

#openHoursListCaption,
#openHoursList dt, .open-hours-list dt {
	background-color: var(--lerum-lightest-yellow);
}

.accordion .card .card-header .btn-header-link {
	background: var(--lerum-plate-bg);
}


.accordion .card .collapsing {
	background: var(--lerum-plate-bg);
}

.accordion .card .collapse.show {
	background: var(--lerum-plate-bg);
}


#boxes .col-box-content {
	background-color: var(--lerum-plate-bg);
}

#boxes .odd .col-box-content {
	background-color: var(--lerum-light-gray);
}

#boxes .col-box-content-text {
	color: var(--lerum-textcolor) !important;
}

.slick-wrapper .item .itemContent .itemHeading {
	color: var(--lerum-textcolor) !important;
	background-color: var(--lerum-plate-bg);
}

.slick-next::before, .slick-prev::before {
	color: #333;
}


.btn-primary,
#cookieInfoDiv .btn-success,
#cookieInfoDiv .btn-outline-secondary {
	background-color: var(--lerum-button-color);
	border-color: var(--lerum-button-color) !important;
	padding: calc(.25rem + 1px) calc(.5rem + 1px) !important;
	border: 0 !important;
}
.btn-outline-primary {
  background-color: rgba(0, 0, 0, .1);
	border-color: var(--lerum-button-color) !important;
	color: var(--lerum-button-color) !important;
}
.btn-primary:hover,
.btn-outline-primary:hover,
#cookieInfoDiv .btn-success:hover,
#cookieInfoDiv .btn-outline-secondary:hover {
	background-color: var(--lerum-button-color);
	border-color: var(--lerum-button-color);
	color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
#cookieInfoDiv .btn-success:hover,
#cookieInfoDiv .btn-success:focus,
#cookieInfoDiv .btn-success:active,
#cookieInfoDiv .btn-outline-secondary:hover,
#cookieInfoDiv .btn-outline-secondary:focus,
#cookieInfoDiv .btn-outline-secondary:active {
	-webkit-box-shadow: var(--lerum-button-hover-shadow) !important;
	-moz-box-shadow: var(--lerum-button-hover-shadow) !important;
	-o-box-shadow: var(--lerum-button-hover-shadow) !important;
	box-shadow: var(--lerum-button-hover-shadow) !important;
}
#cookieInfoDiv .btn-success,
#cookieInfoDiv .btn-outline-secondary {
	color: #fff !important;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle,
#cookieInfoDiv .btn-success:not(:disabled):not(.disabled).active,
#cookieInfoDiv .btn-success:not(:disabled):not(.disabled):active,
#cookieInfoDiv .btn-outline-secondary:not(:disabled):not(.disabled).active,
#cookieInfoDiv .btn-outline-secondary:not(:disabled):not(.disabled):active {
	color: #fff;
	background-color: var(--lerum-button-color);
	border-color: var(--lerum-button-color);
}

.btn-search,
#searchForm button.btn-primary,
#searchForm .btn-primary {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	color: var(--lerum-whitetext);
	background-color: var(--lerum-button-color) !important;
	padding: calc(.25rem + 1px) 36px !important;
	border: 0 !important;
}

.btn-search:hover,
.btn-search.focus,
.btn-search:focus,
.btn-search:active {
	background-color: var(--lerum-button-color);
	border-color: var(--lerum-button-color);
}

.btn-search.focus,
.btn-search:focus {
	-webkit-box-shadow: var(--lerum-button-hover-shadow), var(--site-link-box-shadow) !important;
	-moz-box-shadow: var(--lerum-button-hover-shadow), var(--site-link-box-shadow) !important;
	-o-box-shadow: var(--lerum-button-hover-shadow), var(--site-link-box-shadow) !important;
	box-shadow: var(--lerum-button-hover-shadow), var(--site-link-box-shadow) !important;
}
.btn-search:hover,
.btn-search:active {
	-webkit-box-shadow: var(--lerum-button-hover-shadow) !important;
	-moz-box-shadow: var(--lerum-button-hover-shadow) !important;
	-o-box-shadow: var(--lerum-button-hover-shadow) !important;
	box-shadow: var(--lerum-button-hover-shadow) !important;
}

/* *******************************************************************************************
 *         Footer                                                                            *
 ******************************************************************************************* */

#pageWrapper footer {
	padding: 0 30px 0 65px;
	border-top: 0;
	background-color: var(--lerum-plate-bg);
	color: var(--lerum-textcolor);
}

footer h2 {
	color: var(--lerum-textcolor);
}

#footerColLogo {
	padding: 0;
	max-width: 110px;
}


/* *******************************************************************************************
 *         Site specific                                                                     *
 ******************************************************************************************* */

#bibbloTipserAdminBtn, #authorAdminBtn {
	display: none !important;
}


.newWinIconSpan {
	font-size: .1px;
	white-space: nowrap;
	vertical-align: 5px;
	margin-right: 5px;
}
.newWinIcon {
	margin: 0 0 0 5px;
	width: auto !important;
	height: auto !important;
}


/* *******************************************************************************************
 *         Vufind                                                                            *
 ******************************************************************************************* */

.breadcrumb {
	background-color: var(--lerum-light-gray);
}
.breadcrumb > li {
	color: var(--lerum-blacktext) !important;
}