@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,400;0,700;1,400;1,700&family=Sarabun:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

:root {
    --ps-green-1: #ECF7FC;
    --ps-green-2: #E2F3FB;
    --ps-green-3: #C3E7F7;
    --ps-green-4: #3DB0E4;
    --ps-green-5: #379ECD;
    --ps-green-6: #318DB6;
    --ps-green-7: #2E84AB;
    --ps-green-8: #256A89;
    --ps-green-9: #1B4F67;
    --ps-green-10: #153E50;
    --ps-white: #FFFFFF;
}

*,
body,
.fonts-loaded body,
.fonts-loaded button,
.fonts-loaded input,
.fonts-loaded optgroup,
.fonts-loaded option,
.fonts-loaded select,
.fonts-loaded textarea {
    font-family: 'Sarabun', sans-serif;
}

/* tag a */
a,
a:link,
a:visited {
    color: var(--ps-green-9);
}
a:hover,
a:active,
a:focus {
    color: var(--ps-green-7);
}

#opac-main-search {
    border-radius: 0px;
    background: var(--ps-green-7);
}

#opac-main-search label {
  color: whitesmoke;
}

#logo {
  display: none;
}

#cart-list-nav {
    justify-content: right;
}

.coverimages img.thumbnail {
    width:90px;
   height:110px;
   padding:0;
   border:none;
}

.navbar.navbar-expand .navbar-nav>li>a {
    color: var(--ps-white);
}

.navbar.navbar-expand {
    background: var(--ps-green-7);
}

.navbar.navbar-expand .fa.fa-icon-black {
    color: var(--ps-white);
}

#opac-user #wrap #header-region .navbar.navbar-inverse.navbar-static-top {
    padding-left: 20px;
    padding-right: 20px;
}

body {
    background-color: #f2f2f2;
}

#opacheader {
    background-color: #f2f2f2;
}
#opacheader img {
    width: 100%;
}
#header-region {
    padding-left: 15px;
    padding-right: 15px;
}
#header-region .container-fluid {
    padding: unset;
}
#OpacMainUserBlock .img-circle {
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
}

.btn-primary.disabled, .btn-primary:disabled {
    background-color: #548300;
    border-color: #335000;
}

#opac-main-search {
    margin: unset;
}

#coverflow .flipster__item__content {
	background-color: #ffffff;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
	text-align: center;
	-webkit-box-reflect: unset;
}

#coverflow .flipster__item .flipster__item__content p {
	font-weight: 600;
	font-family: 'Prompt', sans-serif;
	display: -webkit-box !important;
	margin: 0 auto;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}


/*  button */
.btn-primary {
    background-color: var(--ps-green-6);
    border-color: var(--ps-green-6);
    color: var(--ps-white);
}
.btn-primary:focus,
.btn-primary:active,
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle,
.btn-primary:not(:disabled,.disabled).active,
.btn-primary:not(:disabled,.disabled):active,
.btn-primary:not(:disabled,.disabled):focus,
.btn-primary:not(:disabled,.disabled).focus {
    background-color: var(--ps-green-5);
    border: 1px solid var(--ps-green-5);
    -webkit-box-shadow: 0 0 0 1px var(--ps-green-5);
    box-shadow: 0 0 0 1px var(--ps-green-5);
}
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--ps-green-6);
    border-color: var(--ps-green-6);
    color: var(--ps-white);
}
.btn-primary.disabled:hover,
.btn-primary.disabled.hover,
.btn-primary:disabled:hover,
.btn-primary:disabled.hover {
    background-color: var(--ps-green-6);
    border-color: var(--ps-green-6);
    color: var(--ps-white);
}

/* link in table */
.table-striped tbody>tr:nth-child(odd)>td a,
.table-striped tbody>tr:nth-child(odd)>th a {
    color: var(--ps-green-9);
}
.table-striped tbody>tr:nth-child(odd)>td a:hover,
.table-striped tbody>tr:nth-child(odd)>td a:focus,
.table-striped tbody>tr:nth-child(odd)>td a:active,
.table-striped tbody>tr:nth-child(odd)>th a:hover,
.table-striped tbody>tr:nth-child(odd)>th a:focus,
.table-striped tbody>tr:nth-child(odd)>th a:active {
    color: var(--ps-green-7);
}


/* tab */
.view a i.fa,
.view button i.fa,
.actions a i.fa,
.actions button i.fa,
.toolbar a i.fa,
.toolbar button i.fa,
#action a i.fa,
#action button i.fa {
    color: var(--ps-green-9);
}
.btn-link:hover {
    color: var(--ps-green-7);
}


/* sidebar action */
#action a {
  color: var(--ps-green-9);
}
#action a:hover,
#action a:active,
#action a:focus {
  color: var(--ps-green-7);
}

/* bib detail */
#opac-detail span.results_summary.online_resources a {
  font-weight: bold;
}