:root {
	--normal-text: .8125rem;
	--large-text: .9375rem;
	--larger-text: 1rem;
	--text-color: rgb(51, 51, 51);  
	--link-color: #005599;	
	--link-hover-color: blue; /* #52afff; */
	--available-color: #008000;	
	--border-radius: .375rem;	
	--info-text-color: #0e50a0;	
	--slide-shadow-color:#959595;
	--popup-arrow-pos: var(--border-radius);
	--sidebar-width: 20rem;
	--sidebar-user: 20rem;
}
* {	
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--text-color);
}
*:focus {
    outline: 0 !important;
}

a {
	text-decoration: none;
}
.hidden {
	display: none !important;
}
#scroll_to_top{
	-webkit-tap-highlight-color: transparent;	
}
html {
	overflow-y: auto;
	font-family: sans-serif;	
	height: 100%;
}
body {
	font-size: var(--normal-text);
	background-color: var(--body-bg-color);
}
html, body {
	margin: 0;	
	-webkit-touch-action: manipulation !important;	
	-moz-touch-action: manipulation !important;	
	touch-action: manipulation !important;
}
.no-overflow, .no-overflow body {
	overflow: hidden !important;
}
.panel-content {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch !important;
}

/* SCROLLBAR CUSTOMIZATION*/
/*mozilla*/
* {
	scrollbar-color: var(--second-bg-color) var(--inactive-bg-color);
	scrollbar-width: thin;
}
/*chrome, edge, ..*/
::-webkit-scrollbar {
    width: 0.5rem;
} 
::-webkit-scrollbar-thumb {    
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    border-radius: .5rem;
}
::-webkit-scrollbar-track {
	background: var(--inactive-bg-color);
}
::-webkit-scrollbar-thumb {
    background: var(--second-bg-color);
}
::-webkit-scrollbar-thumb:hover {
	background: var(--active-bg-color); 
}

header, footer, aside {	
	position: fixed;	
}
header {	
	top: 0;
}
footer {	
	bottom: 0;
}
header, footer {
	width: 100%;
	height: 2.75rem;
	z-index: 100;
	background-color: var(--main-bg-color);	
    -webkit-box-shadow: 0 .0625rem .1875rem rgb(0 0 0 / 20%);
    -moz-box-shadow: 0 .0625rem .1875rem rgba(0, 0, 0, 0.2);
	box-shadow: 0 .0625rem .1875rem rgb(0 0 0 / 20%);
}
aside {
	z-index: 200;
	top: 0;	
	width: 0;
	display: grid;
	grid-template-rows: auto 1fr;
	user-select: none;
	background-color: var(--panel-bg-color);
}
aside.too-short {
	grid-template-rows: 1fr 2.2rem;
}
main {		
	margin: 0;
	padding: 3.75rem 1rem;
	background: transparent;
}
.sidebar-left {
	left: 0;
}
.sidebar-right {
	right: 0;
}
.sidebar-open {
	display: grid;	
	height: 100%;
	max-width: 80% !important;
	width: var(--sidebar-width);
	z-index: 1000;	
	-webkit-box-shadow: .3125rem 0 .3125rem rgb(0 0 0 / 15%);
	-moz-box-shadow: .3125rem 0 .3125rem rgb(0 0 0 / 15%);
	box-shadow: .3125rem 0 .3125rem rgb(0 0 0 / 15%);
}
#sidebar_right.sidebar-open {
	width: var(--sidebar-user);
}
.header-items, .footer-items {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	margin: 0 .5rem;
	overflow: visible;
}
.opac-name-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	height: 100%;
	width: calc(100% - 4.5rem);
	margin: 0 .5rem;	
}
.logo {
	display: none;
}
#popup-opac-name {
	text-align: center;	
}
.opac-name {
	text-align: center;	
    font-weight: bold;
	font-size: var(--larger-text);
	color: var(--main-txt-color);    
	white-space: nowrap;
	flex: 1;    
}
.load-more {
    margin: 0;
    padding: 0;    
    text-align: center;
    color: gray;
	display: none;
}
.notext::after {
	content: "";
}
.shadow {
	-webkit-box-shadow: 0 .0625rem .1875rem rgba(0,0,0,.2);
	-moz-box-shadow: 0 .0625rem .1875rem rgba(0,0,0,.2);
	box-shadow: 0 .0625rem .1875rem rgba(0,0,0,.2);
}
.zindex-top {
	z-index: 1001 !important;
}
.modal-screen {
    grid-area: none;
    position: absolute;
	filter: alpha(opacity=0);    
	opacity: 0;
	z-index: 900;
}
.modal-screen-open {    
    width: 100%;
    height: 100vh;
	position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    background-color: rgb(0 0 0);
	filter: alpha(opacity=50);
	opacity: 0.5;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

#main .search-field {
	padding: 0 !important;
	display: grid;
	grid-template-columns: 2.3125rem 1fr 2.3125rem;
	border: none;
}
#home_btn{
    grid-column: 1;
    border: 0.0625rem solid var(--main-bg-color);
    border-left: 0;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}
#search {		
	font-size: var(--large-text);
	padding-left: .6rem !important;
	grid-column: 2;
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important;
	border-width: 0.0625rem 0 !important;
	border-style: solid !important;
    border-color: var(--main-bg-color) !important;    
	margin: 0 !important;
	border-collapse: collapse !important;
}
#search_btn {
	grid-column: 3;
    border: 0.0625rem solid var(--main-bg-color);
    border-left: 0;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}
#home_btn .icon-home {
    left: 0;
    margin-left: 0.4375rem !important;
    margin-top: -0.6875rem !important;
}
#search_btn .icon-search {	
	right: 0;
	margin-right: .4375rem !important;
	margin-top: -0.6875rem !important;
}
#main_list, .main-list {
	overflow: visible;
}
.main-list, .status-txt {
	display: none;
}
.current {
	display: block !important;
}
.status {
	margin: .5rem 0 1rem 0;    
}
.italic {
	font-style: italic !important;
}
.normal-text {
	font-size: var(--normal-text) !important;
}
#list{
	margin-top: .5rem;
}
.material, .collection {
	display: flex;
    flex-direction: column;	
	margin-bottom: 1rem;
	overflow: visible;
}
.m-header{
	display: flex;
    flex-direction: row;
    justify-content: space-between;	
	padding: .5rem;
	white-space: nowrap;
	background-color: var(--second-bg-color);
	border: .0625rem solid var(--second-bg-color);
	border-bottom: 0;
    -webkit-border-radius: var(--border-radius) var(--border-radius) 0 0;
    -moz-border-radius: var(--border-radius) var(--border-radius) 0 0;
    border-radius: var(--border-radius) var(--border-radius) 0 0;	
}
.m-header span {
	color: var(--second-txt-color);
	text-shadow: none;
}
.m-icon {
	display: flex;
    flex-direction: row;
	padding-left: 1.2rem;
	background-size: 1rem 1rem !important;
}
.m-icon.type-0 {
	background: url(../../images/book16.png) no-repeat left;
}
.m-icon.type-1 {
	background: url(../../images/periodical16.png) no-repeat left;
}
.m-icon.type-2 {
	background: url(../../images/thesis16.png) no-repeat left;
}
.m-icon.type-3 {
	background: url(../../images/avm16.png) no-repeat left;
}
.collection .m-icon {
	background: url(../../images/collection16.png) no-repeat left;
}

.m-id {
	margin-left:.2rem;
}
.m-content {
	padding: 1rem;
	background-color: var(--panel-bg-color);
	border: .0625rem solid var(--second-bg-color);
	border-top: 0;
    -webkit-border-radius: 0 0 var(--border-radius) var(--border-radius);
    -moz-border-radius: 0 0 var(--border-radius) var(--border-radius);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.m-content .cover {
	float: left;
    width: 7.5rem;
    margin-right: 1rem;
    margin-bottom: .8rem;
	border: solid 0.0625rem #cdcdcd;
}
.m-info {
	display: inline;  
	margin-bottom: .625rem;
}
.m-info p, .loan-info p, .panel[class*="defer"] .panel-content p {
	margin: 0;
	padding: 0;
	/*width: fit-content;*/
}
.m-volumes {
	clear: both;
}
.m-volumes ol {
	width: fit-content;
}
.history-back {
	margin-bottom: .625rem !important;
}
.history-back-btn-wrapper {	
    width: 100%;
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
	overflow: visible;
	margin-top: -0.5rem;
}
.get-more-btn-wrapper {	
    width: 100%;
	display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
	overflow: visible;
}
.more-info.list-items {
	clear:both;
}
#data_list {
	overflow: visible;
}
.icon-new {	
    position: relative;
	overflow: visible;
}
.icon-new-below {
	padding-right: 2.5rem !important;
}
.icon-new::after {
	content:"";
	display: block;
	position: absolute;	
	background: url(../../images/new.png);
	background-position: center;
    background-size: contain;
    background-repeat: no-repeat;	
	top: -0.75rem;
    right: -0.6875rem;
    width: 3rem;
    height: 2rem;
}
.icon-new.small-icon::after {
	top: -0.7rem !important;
    right: -2.2rem !important;
    width: 2.5rem !important;
    height: 1.3rem;
}
.material:has(.icon-new),.m-content:has(.icon-new), .more-info:has(.icon-new), .m-volumes:has(.icon-new) {
	overflow:visible;
}
.intent {
	text-indent: 1rem;
}
.margin-left1 {
	margin-left: 1rem !important;
}
.margin-top1 {
	margin-top: .3rem !important;
}
.margin-top2 {
	margin-top: .625rem !important;
}
.margin-bottom1 {
	margin-bottom: .3rem !important;
}
.margin-bottom2 {
	margin-bottom: .625rem !important;
}

.title-name {
	font-size: 1.125rem;
}
.not-available {
	cursor: initial !important;
}
.label, .not-available {
	color: gray !important;	
}
.available {
	color: var(--available-color) !important;	
}
.m-info .label {
    font-size: var(--normal-text);	
}
.label {
	font-style:normal;
}
.ebooks, .volumes, .essays, .serials, .collection-count {	
	font-weight: bold;	
	margin: .625rem 0 0 0; 
}
.available-count {
	/*color: var(--available-color) !important;*/
	width: initial !important;
}
.volume-list, .ebook-list, .essay-list, .serial-list {    
    margin: 0;
    margin-inline-start: 1rem;
    padding-inline-start: 1rem;
    overflow: visible;	
}
.volume-list li, .ebook-list li, .essay-list li, .serial-list li {
	overflow: visible;
	margin-top: .5rem;
	width: fit-content;
}
.volume-child-list {
    padding-inline-start: .5rem;
}
.volume-child-list li{
    list-style-type: none;
}
.volume-child-list li:before, .binder-list li:before {
	display:inline-block;	
	padding-right: .5rem;
	text-decoration: none !important;
}
.volume-child-list li.available-lib:before, .binder-list li.available-binder:before {
	content: '✓'; 
	color: var(--available-color) !important;
}
.volume-child-list li.not-available-lib, .binder-list li.not-available-binder {
	margin-left: 1.125rem;
}
.volume-child-list li.not-available-lib:before, .binder-list li.not-available-binder:before {
	content: 'x'; 
	position: absolute;
	margin-left: -1rem;
	margin-top: -0.0825rem;
	/*margin-right: .1875rem;*/ 
	color: red !important;
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
}
ol.volume-list>li:not(:first-child) {
	margin-top: .8rem;
}
.binder-list {
	padding-inline-start: 1.5rem;
}
.binder-list li {
	margin-top: .2rem;
	list-style-type: none;  
}
.binder-list ul li {
	list-style-type: initial;  
}
.no-group{
	margin: 0 0 0 .5rem;
}
.no-group li {
	margin-top: .5rem;
}
ol li::marker {
	font-style: normal;
    color: var(--text-color);
}
.no-number {
	list-style-type: none;
}
.nav-paging {
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: .5rem;
	margin-top: .5rem;
}
.nav-paging .loading-wrapper{
	column-gap: 1rem;
}
.ebook {
	display: flex;
    flex-direction: row;
    align-content: flex-start;
    align-items: baseline;
}
.ebook-list li span {	
	margin: 0 .5rem;
}
.ebook-icon {
	flex-shrink: 0;
    width: 1rem;
    height: 1rem;
	background-position: left;
    background-size: 1rem 1rem;
    background-repeat: no-repeat;
	margin: auto 0;
}
.ebook-tagged {
	background-image: url(../../images/patron16.png);
}
.ebook-not-tagged {
	background-image: url(../../images/glob16.png);
}
.ebook-url {
	background-image: url(../../images/chain16.png);
}
.ebook-pdf {
	background-image: url(../../images/pdf16.png);
}
.ebook-image {
	background-image: url(../../images/image16.png);
}
.ebook-flip {
	background-image: url(../../images/ebook16.png);
}
.ebook-other {
	background-image: url(../../images/other16.png);
}
.panel-header:not(.collapsed) {
	color: var(--main-txt-color);
	/*border: .0625rem solid var(--main-bg-color);	*/
	-webkit-border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
	-moz-border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
	border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}
.sidebar-open .panel-header {
	border-radius: 0 !important
}

.panel-content {
	padding: 1rem;
	background-color: var(--panel-bg-color);
	border: .0625rem solid var(--second-bg-color);
	border-top: 0;
	-webkit-border-radius: 0 0 var(--border-radius) var(--border-radius);
	-moz-border-radius: 0 0 var(--border-radius) var(--border-radius);
	border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.panel[class*="defer"] {	
	margin-top: .8rem;
	clear: both;
}
.panel[class*="defer"] .panel-header {
	height: 1.8rem;
	background-color: var(--second-bg-color);
	border-color: var(--second-bg-color);
}
.panel[class*="defer"] .panel-header.collapsed {
	-webkit-border-radius: var(--border-radius);
	-moz-border-radius: var(--border-radius);
	border-radius: var(--border-radius);
}
.panel.defer-request .panel-header span, .panel.defer-response .panel-header span {
	text-shadow: none;
    font-weight: normal;
	font-size: inherit;
}
.panel.defer-send-request .panel-header span {	
	text-shadow: none;
	font-size: inherit;
}
.panel[class*="defer"] .btn-submit{
	float: right;
	height: 1.8rem;
}
.field label {
	font-size: var(--normal-text)!important;
}
.input input, textarea {
	font-size: var(--large-text)!important;
}
.field .tooltip {
	font-style: italic;
	padding: .3rem 0 0 .5rem;
	opacity: .8;
}
textarea {
	height: 6rem;
    width: 100%;
    margin: 0;    
	font-family: inherit;
	padding: .5rem;
    resize: none;
	overflow: auto;
}
#window_change_password {
	max-width: 20rem;
}
dialog .panel-header, .banner-main .panel-header, .defer-request .panel-header, .defer-response .panel-header, .btn-close.countdown {	
	cursor: initial !important;
}
.sidebar .panel-header {
	height: 2.2rem !important;
	background-color: var(--main-bg-color);
	border: .0625rem solid var(--main-bg-color);
}
.sidebar .panel {
	display: grid;
	grid-template-rows: 2.2rem 1fr;
	min-height: 2.2rem;
}
.sidebar .panel:nth-child(1) {
	border-bottom-width: .0625rem;
    border-color: transparent;
    border-bottom-style: solid;
}
.panel-header span {	
	width: 100%;
    padding-left: 1rem;
    text-align: left !important;	
	font-size: var(--large-text); 
	font-weight: bold;	
    color: var(--second-txt-color);
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
}
.sidebar .panel-header span{
	color: var(--main-txt-color);
	margin-right: 3.75rem;
	width: calc(100% - 3.75rem);
}
.panel-header .icon-refresh, .panel-header .icon-reload {
    right: 2.1rem;	
}
.panel-content .field:last-child{
	margin-bottom: 0;
}
.panel-content .field:first-child{
	margin-top: -0.5rem;
}
.top-line {
    border-top-style: solid;
    border-top-width: .0625rem;
    border-top-color: var(--second-bg-color);	
}
.top-line:not(.private-links) {
	padding-top: .4rem !important;
}
.bottom-line {
	border-bottom-style: solid;
    border-bottom-width: .0625rem;
	border-bottom-color: var(--second-bg-color);
}
#banner_left .panel-content ul li.bottom-line {
	padding-bottom: .3rem;
}
#banner_left .panel-content {
	padding: 0;
}
#banner_left .panel-content:has(.loader), #banner_right .panel-content:has(.loader) {
	display: flex;
    flex-direction: column;    
    justify-content: center;
}
#banner_left ul {
	margin: 0 0 .5rem 0;
    padding: .5rem .5rem 0 1rem;   
	list-style-type: disc;
	margin-left: .8rem;	
	overflow: visible;
}
#banner_left ul li {	
	line-height: 1.5;
	margin-bottom: .5rem;
    overflow: visible;	
}

.link:not(.inactive), .link:not(.inactive) * {
	cursor: pointer;
}
.link, .link * {
	color: var(--link-color);
}
.link:not(.inactive):hover, .link:not(.inactive):hover *, .focused-text, .focused-text * {
	color: var(--link-hover-color) !important;
	text-decoration: underline;
}

.link.inactive, .link.inactive * {
	text-decoration: none !important;
}
.m-note, .m-note span {
	display: initial;
    white-space: pre-wrap;
}

.flex-right{
	display: flex;
    flex-direction: row-reverse;
}
#btn_login, #btn_logout {
	margin-top: 1rem;
}
.user-info{
	display: grid;
    grid-template-columns: 3.75rem 1fr;
    grid-column-gap: .5rem;
	padding-bottom: .5rem;
	min-height: 3.75rem;
}
.user-portrait {	
    text-indent: 100%;
	position: relative;
	grid-column: 1;
	-webkit-border-radius: var(--border-radius);
	-moz-border-radius: var(--border-radius);
	border-radius: var(--border-radius);
	border: .0625rem solid var(--second-bg-color);    
    margin: .0625rem;	
}
.user-portrait::after {
	content: "";
    position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;    
    background-repeat: no-repeat;
    background-position: center;	
}

.logged-in-user {
    background-color: white !important;	
    background-size: cover !important;	
	background-repeat: no-repeat;
    background-position: center center;
	border: 0.125rem solid var(--btn-icon-border);
	max-height: 5rem;	
}
.logged-in-user:not(.user-portrait):hover::after, .logged-in-user.focused:after  {
  top: -30%;
  right: -200%;
  width: 50%;
  height: 200%;
  transform: rotate(30deg);
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient( to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
  animation: shine 1s .5s infinite;  
}
@keyframes shine {
  to {
    opacity: 1;
    right: 210%;
  }
}

.user-name-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: stretch;
    row-gap: .3rem;	
    min-height: 3.75rem;
}
.user-name{
	align-self: stretch;
	flex-grow: 2;
	font-weight: bold;
	font-size: var(--large-text);
	white-space: nowrap;	
}
.change-pass{
	flex-grow: 1;
}
#user .panel-content .link {
	font-weight: bold;	
}
#user .msg-counts .link, #user .private-links .link{
	display: block;
	margin-top: .8rem;	
}
#user .msg-counts .link {
	text-wrap-mode: nowrap;
	white-space: nowrap;
}

#user .private-links {
    margin-top: 1rem;
}
#btn_change_pass {
	width: 100%;
}
.lang {	
	width:4.4rem;	
}
.lang span {
	padding-right: 1.3rem !important;	
	padding-left: 0 !important;	
}
.lang::after {
	right: .2rem !important;
}

dialog[class*="popup-"] {
	margin: 0;	
	overflow: visible;
}
dialog[class*="popup-"]:not(#bottom_info) {	
	padding: 1rem;
	background-color: #ffffff;    
    color: #333333;	
}
dialog[class*="popup-"]::after {
    content: "";
    position: absolute;
    display: block;
	left: var(--popup-arrow-pos);
    border-width: .625rem .375rem;
    border-style: solid;    
}
.popup-above::after {
	top: 100%;
	border-color: #ffffff transparent transparent transparent;
}
.popup-under::after {
	bottom: 100%;
	border-color: transparent transparent #ffffff transparent;
}


dialog {
	padding: 0;
    border: none;
	background-color: transparent;
	-webkit-border-radius: var(--border-radius);
	-moz-border-radius: var(--border-radius);
	border-radius: var(--border-radius);
	-webkit-box-shadow: 0 0 0.75rem rgb(0 0 0 / 60%);
	-moz-box-shadow: 0 0 0.75rem rgb(0 0 0 / 60%);
	box-shadow: 0 0 0.75rem rgb(0 0 0 / 60%);
}
dialog::backdrop {  
	background-color: rgb(0 0 0);
	filter: alpha(opacity=50);
	opacity: 0.5;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

dialog .panel-header {
	border: 0.0625rem solid var(--second-bg-color) !important;;
	border-bottom: 0 !important;
}
dialog .panel-content {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}
#dialog .msg {
	margin: 0 0 1rem;
}
dialog .msg a {
	color: var(--link-color);
}
dialog .btn-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 1rem;
	overflow: visible;
}
dialog .btn {
	align-self: center;
	min-width: 6rem;
}
.panel-content button {
	border: 0;
}

#window_change_password .btn-wrapper{
	margin-top: .5rem;
}
.loan-exceeded, .expiry-text {
	color: red !important;
}
.loan-warning, .warning-text {
	color: orange !important;
}

/*(max-width: 32rem) font-size larger on mobile
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 512px),
	only screen and (-moz-min-device-pixel-ratio: 2) and (max-width: 512px),
	only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 512px),
	only screen and (min-device-pixel-ratio: 2) and (max-width: 512px),
	only screen and (min-resolution: 192dpi) and (max-width: 512px),
	only screen and (min-resolution: 2dppx) and (max-width: 512px) { 
		:root {	
			font-size: 125%;
		}
}
*/
/*20rem : 320px*/
@media ( max-width: 20rem ) {
	.m-content {					
		display: flex;
		flex-direction: column;
	}	
	.m-content img.cover {					
		margin-left: auto;
		margin-right: auto;
	}
}
/*30rem : 480px*/
@media ( min-width: 30rem ) {
	main {		
		margin-left: calc((100% - 30rem)/2);
		margin-right: calc((100% - 30rem)/2);
		width: 30rem;
	}	
	.header-items, .footer-items {
		width: 29rem;
		margin: 0 auto;
	}
}
/*48rem : 768px standard break point*/

/* 30rem + 20rem + 1rem = 51rem : 816px*/
@media ( max-width: 51rem ) { 
	#sidebar_left .panel-header, #sidebar_left .panel-content {
	    border: 0;
	    -webkit-border-radius: 0;
	    -moz-border-radius: 0;
	    border-radius: 0;
	}
}
@media ( min-width: 51rem ) {
	main {
		margin-left: calc(var(--sidebar-width) + 1rem + (100% - 51rem)/2);
	}
	.opac-name-wrapper {
		width: calc(100% - 2.25rem);
		margin: 0;
		padding-left: .125rem;
		overflow: visible;
	}
	.logo {
		display: block;
		width: 2rem;
		height: 2rem;	
		margin-right: .5rem;
		flex-shrink: 0;		
		-webkit-box-shadow: 0 .0625rem .125rem 0 rgb(0 0 0 / 60%);
		-moz-box-shadow: 0 .0625rem .125rem 0 rgb(0 0 0 / 60%);
		box-shadow: 0 .0625rem .125rem 0 rgb(0 0 0 / 60%);
		background-repeat: no-repeat;
		background-position: center;    
		background-size: contain;
		background-color: #ffffff;
		background-origin: content-box;		
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	}
	#header_left_btn {
		display: none;
	}
	#sidebar_left {
		width: var(--sidebar-width);		
	    margin-top: 3.75rem;
	    margin-bottom: 3.75rem;
	    margin-left: calc(1rem + (100% - 51rem)/2);
		height: calc(100% - 7.5rem);
		background-color: transparent;
	}
	#sidebar_left .panel:nth-child(2) {
		margin-top: 1rem;
	}
	#sidebar_left .panel-header.collapsed {		
		-webkit-border-radius: var(--border-radius);
		-moz-border-radius: var(--border-radius);
		border-radius: var(--border-radius);
	}
	.header-items, .footer-items {
		width: 47rem;
		padding-left: calc(var(--sidebar-width) + 1rem);
		margin: 0 auto;
	}
}
/*64rem : 1024px standard break point*/

/* 30rem + 20rem  + 20rem + 1rem = 70rem : 1120px*/
@media ( max-width: 70rem ) {
	#sidebar_right .panel-header, #sidebar_right .panel-content {
	    border: 0;
	    -webkit-border-radius: 0;
	    -moz-border-radius: 0;
	    border-radius: 0;
	}
}
@media ( min-width: 70rem ) {
	main {
		width: calc(100% - (var(--sidebar-width) + 1rem)* 2);
		margin-left: calc(var(--sidebar-width) + 1rem);
	}
	#sidebar_left {
	    margin-left: 1rem;
	}
	.banner-main {
		width: 0 !important;
		height: 0 !important;
	}
	#header_right_btn {
		display: none;
	}		
	#sidebar_right {
		width: var(--sidebar-width);		
	    margin-top: 3.75rem;
	    margin-bottom: 3.75rem;
	    margin-right: 1rem;
		height: calc(100% - 7.5rem);
		background-color: transparent;
	}
	#sidebar_right .panel:nth-child(2) {
		margin-top: 1rem;
	}
	#sidebar_right .panel-header.collapsed {		
		-webkit-border-radius: var(--border-radius);
		-moz-border-radius: var(--border-radius);
		border-radius: var(--border-radius);
	}
	.header-items {
		width: calc(100% - 2rem);
		padding-left: 0;
	}
	.footer-items {
		width: calc(100% - 43rem);
		padding-left: 0;
	}
	.opac-name-wrapper {
		justify-content: center;
	}
	.opac-name {
		flex: initial;
	}
}

@media ( min-width: 82rem ) {
	main {
		width: 40rem;
		margin-left: calc(var(--sidebar-width) + 1rem + (100% - 82rem)/2);		
	}
	#sidebar_left {
	    margin-left: calc(1rem + (100% - 82rem)/2);
	}
	#sidebar_right {
	    margin-right: calc(1rem + (100% - 82rem)/2);
	}
	.header-items {
		width: 80rem;
	}
	.footer-items {
		width: 39rem;
	}
}

.patron-code{
	font-weight: normal;
	text-transform: uppercase;
	color: inherit;
}

#main:not(:has(.main-list.current div)) .loader {
	margin-top: calc((100vh - 18rem) / 2);
}

.loading-wrapper span, .loading-wrapper span:hover{
	text-decoration: initial !important;
	cursor: initial !important;
}

#bottom_info {
	padding: 0;
	margin: 0;
    width: 12.375rem;	
}

#bottom_info[open] {
	display: flex;
	flex-direction: column;	
	overflow: visible;
}

.company {	
	display: flex;
    justify-content: stretch;
    background-color: #0066cc;
	border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.company img {
	width: 11rem;
    height: auto;
    margin: 0.5rem 0.875rem 0.5rem 0.75rem;
}

.product {
	display: flex;
    flex-direction: column;
	background-color: #ffffff;
	row-gap: .2rem;
}

.product img {
	width: 10.775rem;
    height: auto;
	margin: 0.5rem .8rem 0 .8rem;
}

.product-description {
	font-size: .8rem;
}

.updated-date {
	font-size: smaller; 
	font-style: italic;
	text-align: right;
    padding: 0 1rem;	
	color: #0095da;
}

.customer-name {
    padding: 0.5rem 1rem 1rem 1rem;
	font-family: serif;
	border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
	background-color: #ffffff;
}

.license-date {
	color: var(--available-color);
	white-space: nowrap;
}

/* slider */

.slider-title, .slider-description {
	margin: 0;
    padding: 0;
}

.slider-description {
	margin-top: 0.625rem !important;
	margin-bottom: 1rem !important;
}

.image-slider {
	height: 12rem;
    overflow: hidden;
	display: flex;
    align-items: center;
	justify-content: center;
	gap:.125rem;
	margin-bottom:.5rem;
}

.slider2 {
    float: left;
    margin-right: 1rem;
    margin-bottom: .8rem;
	width: 11rem;
}

.img-slide {
	width: 1.5rem;
	/*cursor: pointer;
	position: relative;*/
	transition: 0.7s ease;	
}

.img-slide img {
	width: 100%;
	height: 100%;
	filter: brightness(0.7) blur(.0625rem);
	object-fit: cover;
	display: block;
	object-position: center;
}

.slider5 .img-slide:first-child, .slider5 .img-slide:last-child, .slider4 .img-slide:last-child {
	height: 6rem;
	box-shadow: .0625rem .0625rem .0625rem var(--slide-shadow-color);
}

.slider5 .img-slide:nth-child(2), .slider5 .img-slide:nth-child(4), 
.slider4 .img-slide:first-child, .slider4 .img-slide:nth-child(3),
.slider3 .img-slide:first-child, .slider3 .img-slide:last-child, 
.slider2 .img-slide:last-child {
	height: 8rem;
	width: 3rem;
	box-shadow: .125rem .125rem .25rem  var(--slide-shadow-color);
}

.slider5 .img-slide:first-child img, .slider5 .img-slide:nth-child(2) img, 
.slider4 .img-slide:first-child img,
.slider3 .img-slide:first-child img {
	object-position: left;
}

.slider5 .img-slide:last-child img, .slider5 .img-slide:nth-child(4) img, 
.slider4 .img-slide:last-child img, .slider4 .img-slide:nth-child(3) img, 
.slider3 .img-slide:last-child img, 
.slider2 .img-slide:last-child img {
	object-position: right;
}

.slider5 .img-slide:nth-child(3), 
.slider4 .img-slide:nth-child(2), 
.slider3 .img-slide:nth-child(2),
.slider2 .img-slide:first-child {
	width: 7.5rem;
	margin: 0 .1rem;
	box-shadow: .25rem .25rem .375rem var(--slide-shadow-color);
}

.slider5 .img-slide:nth-child(3) img, 
.slider4 .img-slide:nth-child(2) img,
.slider3 .img-slide:nth-child(2) img,
.slider2 .img-slide:first-child img {
	aspect-ratio: 1 / 1.3;
	filter: none;
	height:unset;
}

.display-flex {
	display: flex;
}

.jc-center {
	justify-content: center;
}

.margin-top3 {
	margin-top: 1rem !important;
}

.patron-code-email {
	font-size: var(--large-text);
	font-weight: bold;
	color: var(--main-bg-color);
}

.input:has(input[valid="0"][dirty]),textarea.input[valid="0"][dirty] {
	border-color:red;
}