/* Punsarn CSS */
@import url('https://fonts.googleapis.com/css?family=Sarabun');

body {
    font-family: 'Sarabun';
}

#wrapper {
    padding: unset;
}

#header-region {
    background: #F3F6F8;
    border-bottom: 2px solid #BE1E2D;
}

/* Global Link Color */
a {
    color: #BE1E2D;
}

a:hover,
a:focus {
    color: #901622;
    text-decoration: underline;
}

.btn a,
a.btn {
    color: #fff;
    /* Keep button links white */
}

/* Ensure header links might need specific overrides if strictly white/grey */
#header-region .navbar-expand #main-header #members a {
    color: #4F575E;
    /* Keep header member links grey as per original design unless hovered */
}

#header-region .navbar-expand #main-header #members a:hover {
    color: #BE1E2D;
}

/* Hide Cart and Lists */
.cart-label,
.lists-label,
#cartmenulink,
#listsmenulink,
li:has(> a[href*="opac-basket.pl"]),
li:has(> a[href*="opac-shelves.pl"]) {
    display: none !important;
}

/* Fix User Menu Dropdown "Breaking" */
#members .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #ccc;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    z-index: 9999 !important;
    min-width: 160px;
}

#members .dropdown-menu li {
    display: block !important;
    /* Ensure content is visible */
    margin: 0;
}

#members .dropdown-menu a {
    color: #333 !important;
    padding: 3px 20px;
    display: block;
    font-weight: normal;
}

#members .dropdown-menu a:hover {
    background-color: #f5f5f5;
    color: #BE1E2D !important;
}

#wrapper>div:nth-child(2) {
    display: none;
}

/* 
#wrapper>div:nth-child(2) .row,
#wrapper>div:nth-child(2) .row a {
    background: #BE1E2D;
    color: #FFFFFF;
    padding: 0% 6%;
} 
*/

#wrapper>.container-fluid:last-child .col {
    padding: unset;
}

#header-region .navbar-expand {
    margin: 0% 7%;
}

#header-region .navbar-expand #main-header {
    width: 100%;
}

#header-region .navbar-expand #main-header #menu-header {
    padding: 25px 0px;
}

#header-region .navbar-expand #main-header #menu-header .row {
    float: right;
}

#header-region .navbar-expand #main-header #menu-header .row:last-child {
    margin-right: 5%;
}

#header-region .navbar-expand #main-header #members .search-history {
    display: unset !important;
}

#header-region .navbar-expand #main-header #members li {
    margin: 0px 5px;
}

#header-region .navbar-expand #main-header #members a {
    color: #4F575E;
    font-weight: unset;
}

#header-region ul.nav {
    display: none;
}

#header-region #members ul.nav.pull-right {
    display: flex;
}

#header-region div#members {
    /*display:none;*/
    margin-top: -50px;
}

#header-region div#members ul li:nth-child(2) {
    display: none;
}

.navbar-inverse .nav>li>a {
    color: #069;
    font-weight: 700;
    text-shadow: none;
}

#opac-main-search .row-fluid {
    display: none;
}

/* #userauthdetails>h1 {
    display: none;
} */

#userauthdetails .usedin {
    display: none;
}

#userauthdetails .authstanza {
    display: none;
}

#userauthdetails .authstanza.seealso {
    display: none;
}

#userauthdetails #authdescriptions {
    display: none;
}

#xslt {
    margin-top: 30px;
    font-size: 16px;
}

#xslt span.paragraph {
    margin-left: 50px;
    margin-top: 5px;
}

#labeledmarc .marclib {
    width: 20%;
}



/* customize */

#opac-authoritiesresultlist,
#opac-authoritiesdetail,
#opac-patron-update {
    font-family: 'Sarabun', sans-serif;
}




#header-region #logo {
    background-image: url(/punsarn/opac/img/logo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 410px;
    padding: 40px 50px;
}

/* #opac-authoritiesresultlist,
#opac-authoritiesdetail{
    background-image: url(../img/banner.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
} */

#opac-authoritiesresultlist #wrap,
#opac-authoritiesdetail #wrap {
    padding-right: unset;
    padding-left: unset;
}

#opac-authoritiesresultlist #wrap #header-region,
#opac-authoritiesdetail #wrap #header-region {
    background-color: rgba(255, 255, 255, 0.35);
}


#opac-authoritiesresultlist #header-region div.navbar,
#opac-authoritiesdetail #header-region div.navbar {
    margin-bottom: unset;
    border: transparent;
    background: transparent;
}

#opac-authoritiesresultlist #header-region div.navbar-inner,
#opac-authoritiesdetail #header-region div.navbar-inner {
    background: transparent;
}

#opac-authoritiesresultlist #header-region div.container-fluid,
#opac-authoritiesdetail #header-region div.container-fluid {
    padding-left: 3%;
}

#opac-authoritiesresultlist .breadcrumb {
    margin: unset;
    background-color: rgba(169, 169, 169, 0.3);
    color: #ffffff;
}

#opac-authoritiesresultlist #wrap .breadcrumb a {
    color: #ffffff;
}

#opac-authoritiesresultlist div.main {
    margin-left: 10%;
    margin-right: 10%;
    background-color: #F3F6F8;
    margin-top: 0px;
    margin-bottom: 0px;
}

#opac-authoritiesresultlist .breadcrumb {
    margin-left: 10%;
    margin-right: 10%;
    background-color: #FFFFFF;
}

#opac-authoritiesresultlist .breadcrumb li a,
#opac-authoritiesresultlist .breadcrumb li span {
    color: #6A7178;
}

#opac-authoritiesresultlist .breadcrumb li span {
    padding: 0px 5px;
}

#opac-authoritiesresultlist div.main>div,
#opac-authoritiesdetail div.main>div {
    padding-left: 10%;
    padding-right: 10%;
}

/* Main container full width expansion */
#opac-authoritiesdetail div.main {
    margin: 0 auto;
    width: 98% !important;
    max-width: 100% !important;
    padding-top: unset;
    background: #F3F6F8;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 0px 0px 3px 3px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#opac-authoritiesdetail .breadcrumb {
    margin: unset;
    padding: 15px 105px;
    background: #FFFFFF;
}

#opac-authoritiesdetail .breadcrumb a {
    color: #6A7178;
}

#opac-authoritiesdetail .breadcrumb a:hover,
#opac-authoritiesdetail .breadcrumb a:focus,
#opac-authoritiesdetail .breadcrumb a:active,
#opac-authoritiesdetail .breadcrumb li:last-child a {
    color: #0076b2;
}




/* detail view tabs */
#userauthdetails #views,
#userauthMARCdetails #views {
    display: flex !important;
    gap: 8px !important;
    /* Added gap between tabs */
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
    /* Increased margin to separate from content below */
    z-index: 10 !important;
    /* Higher z-index to stay above content cards */
}

#userauthdetails #views .view,
#userauthMARCdetails #views .view {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

#userauthdetails #views .view>a,
#userauthdetails #views .view>span,
#userauthMARCdetails #views .view>a,
#userauthMARCdetails #views .view>span {
    display: block !important;
    padding: 15px 35px !important;
    /* Increased padding for a more premium feel */
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    /* Rounded corners on all sides since there's a gap now */
    background: #f1f3f5 !important;
    color: #4f575e !important;
    text-decoration: none !important;
    font-weight: normal !important;
    font-size: 15px !important;
    transition: all 0.2s ease;
}

#userauthdetails #views .view>span[id],
#userauthMARCdetails #views .view>span[id] {
    background: #ffffff !important;
    color: #BE1E2D !important;
    font-weight: bold !important;
    border-top: 3px solid #BE1E2D !important;
    border-left: 1px solid #e0e0e0 !important;
    border-right: 1px solid #e0e0e0 !important;
    border-bottom: 1px solid #ffffff !important;
    /* Visual connection to background if needed */
}

#userauthdetails #views .view>a:hover,
#userauthMARCdetails #views .view>a:hover {
    background: #e9ecef !important;
    color: #BE1E2D !important;
}

/* Custom Dropdown for Tabs */
.custom-dropdown {
    position: relative;
}

.custom-dropdown-menu {
    position: absolute;
    top: 100% !important;
    left: 0 !important;
    z-index: 1000 !important;
    display: none;
    min-width: 200px !important;
    padding: 8px 0 !important;
    margin: 10px 0 0 !important;
    font-size: 14px !important;
    text-align: left !important;
    list-style: none !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid rgba(0, 0, 0, .1) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Arrow for dropdown */
.custom-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    transform: rotate(45deg);
}

.custom-dropdown-menu li {
    margin: 0 !important;
    padding: 0 !important;
}

.custom-dropdown-menu li a {
    display: block !important;
    padding: 12px 20px !important;
    clear: both !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #444 !important;
    white-space: nowrap !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.custom-dropdown-menu li a:hover {
    color: #BE1E2D !important;
    background-color: #f8f9fa !important;
    text-decoration: none !important;
}

#opac-authoritiesdetail .jstree-classic .jstree-leaf>span {
    color: #000000;
    font-size: 20px;
}

#opac-authoritiesdetail .card {
    border: 1px solid #F3F6F8;
    box-sizing: border-box;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 1px;
}

#opac-authoritiesdetail .seealso-container .card {
    padding-top: 10px;
    height: 100%;
}

#opac-authoritiesdetail #xslt .results_summary.geographic {
    padding-left: 1%;
    font-weight: bold;
    font-size: 18px;
    color: #6A7178;
}

#opac-authoritiesdetail #xslt .results_summary a,
#opac-authoritiesdetail #xslt>div.trees .jstree-open a,
#opac-authoritiesdetail #xslt>div.trees .jstree-closed a {
    color: #005580;
}

#opac-authoritiesdetail #xslt>div.trees .jstree-leaf a,
#opac-authoritiesdetail #xslt>div.trees .jstree-leaf span {
    color: #4F575E;
}

#opac-authoritiesdetail #marc th {
    color: #6A7178;
}

#opac-authoritiesdetail #wrap>div.main>div:nth-child(1) {
    padding-left: 1%;
    padding-right: 1%;
}



#opac-authoritiesdetail #xslt {
    margin-top: unset;
}

#opac-authoritiesdetail #xslt .title {
    color: black;
    margin-left: 1%;
    margin-top: 20px;
    font-weight: bold;
    font-size: 24px;
}

#opac-authoritiesdetail #xslt .label {
    padding-left: 4%;
    font-weight: bold;
    font-size: 18px;
    color: #6A7178;
}

#opac-authoritiesdetail #xslt>div:nth-child(3) {
    background-color: #fff;
    margin: 1%;
    min-height: 100px;
    padding: 1%;
}

#opac-authoritiesdetail #xslt>div:nth-child(3)>span.label {
    padding-left: 2%;
    font-weight: unset;
}

#opac-authoritiesdetail #xslt div.row {
    margin: 1%;
}

#opac-authoritiesdetail #xslt>div:nth-child(3)>div.col-xs-6,
#opac-authoritiesdetail #xslt>div:nth-child(4)>div.col-xs-6 {
    width: 49.5%;
    background-color: #fff;
    margin-right: 1%;
    padding: 1%;
}

#opac-authoritiesdetail #xslt span.paragraph {
    font-size: 18px;
    margin-right: 2%;
}

#opac-authoritiesdetail #xslt>div:nth-child(4)>div:nth-child(2),
#opac-authoritiesdetail #xslt>div:nth-child(4)>div:nth-child(4),
#opac-authoritiesdetail #xslt>div:nth-child(5)>div:nth-child(2),
#opac-authoritiesdetail #xslt>div:nth-child(5)>div:nth-child(4) {
    padding-right: 0px;
    padding-left: 5px;
}

#opac-authoritiesdetail #xslt>div:nth-child(3),
#opac-authoritiesdetail #xslt>div:nth-child(4)>div.col-xs-6,
#opac-authoritiesdetail #xslt>div:nth-child(5)>div.col-xs-6 {
    border-radius: 5px;
}

#opac-authoritiesdetail #views>li:nth-child(3) {
    text-align: right;
    padding-top: 1%;
    padding-right: 1%;
}

#opac-authoritiesdetail #format {
    padding: 1%;
    border-radius: 3px;
    color: #4F575E;
    font-weight: unset;
}

#opac-authoritiesdetail #hierarchies {
    background: #FFFFFF;
    border: 1px solid #F3F6F8;
    box-sizing: border-box;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 20px;
    margin: 20px 0 20px 0;
    font-size: 15px;
    overflow-x: auto;
    width: 100%;
}

#hierarchies .jstree-anchor {
    white-space: nowrap;
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 4px;
}

#opac-authoritiesdetail #xslt>div.trees {
    margin: unset;
    background-color: transparent;
    padding: unset;
    border-radius: unset;
    font-size: 16px;
}

#opac-authoritiesdetail #xslt>div.trees>span {
    font-weight: bold;
    font-size: 18px;
    color: #6A7178;
}

/* #userauthdetails>h1 {
    display: none !important;
} */

#opac-authoritiesdetail #labeledmarc {
    padding-left: 1%;
    padding-right: 1%;
    background-color: #fff;
    border: 1px solid #F3F6F8;
    box-sizing: border-box;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 1px;
    margin: 1%;
}

#opac-authoritiesdetail #marc {
    border: unset;
    margin: 1%;
    font-size: 18px;
}

#opac-authoritiesdetail #marc>tbody>tr:nth-child(1)>th {
    padding-top: 2%;
}

#opac-authoritiesdetail #marc>tbody>tr:last-child>td {
    padding-bottom: 2%;
}

#opac-authoritiesdetail #userauthMARCdetails>h1 {
    margin-left: 1%;
    margin-top: 20px;
    color: black;
    font-size: 24px;
    font-weight: bold;
}

#opac-authoritiesdetail #xslt>div:nth-child(4),
#opac-authoritiesdetail #xslt>div:nth-child(5) {
    display: flex;
}

#opac-authoritiesdetail #views>li.col-xs-6>div>ul>li>a:hover {
    background-color: #d1e5fe;
}

/* --- Authority Detail Layout: Strict Named Grid --- */
#opac-authoritiesdetail .main .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 40px !important;
}

#opac-authoritiesdetail .main .container-fluid>.row {
    display: block !important;
}

#userauthdetails {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
        "toolbar toolbar"
        "heading heading"
        "meaning meaning"
        "bt uf"
        "nt rt"
        "nt rt" !important;
    /*  "hierarchy hierarchy" !important; */
    gap: 40px !important;
    width: 100% !important;
    margin-top: 20px;
}

/* Hide clutter - Auth descriptions only, keep usedin visible for our grid */
#authdescriptions {
    display: none !important;
}

/* Hide any direct child that is NOT one of our designated areas */
/* Hide any direct child that is NOT one of our designated areas */
#userauthdetails>*:not(.ga-heading):not(.ga-toolbar):not(.ga-meaning):not(.ga-bt):not(.ga-uf):not(.ga-nt):not(.ga-rt):not(.ga-hierarchy):not(.ga-termtype) {
    display: none !important;
}

/* Ensure our designated areas display block */
.ga-heading,
.ga-toolbar,
.ga-meaning,
.ga-bt,
.ga-uf,
.ga-nt,
.ga-rt,
.ga-hierarchy,
.ga-termtype {
    display: block !important;
}

/* Area mapping classes */
.ga-toolbar {
    grid-area: toolbar !important;
}

.ga-termtype {
    grid-area: termtype !important;
    padding-left: 20px !important;
    font-size: 1.25rem;
    font-weight: bold;
    color: #6c757d;
}

.ga-heading {
    grid-area: heading !important;
    padding-left: 20px !important;
}

.ga-meaning {
    grid-area: meaning !important;
}

.ga-bt {
    grid-area: bt !important;
}

.ga-uf {
    grid-area: uf !important;
}

.ga-nt {
    grid-area: nt !important;
}

.ga-rt {
    grid-area: rt !important;
}

/* Force Hierarchy Position */
#opac-hierarchy-sidebar {
    grid-area: hierarchy !important;
    width: 100% !important;
    display: none !important;
}

/* Individual card styling */
#userauthdetails>div,
#userauthMARCdetails>div,
#userauthdetails>.card,
#userauthdetails>.authstanza,
#opac-hierarchy-sidebar,
#hierarchies,
#labeledmarc,
#marc,
#authority_hierarchy,
#authority_subheadings {
    background: #FFFFFF !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    padding: 30px 30px 30px 80px !important;
    box-sizing: border-box !important;
}

#userauthdetails span.label,
#userauthMARCdetails span.label,
#userauthdetails .authstanzaheading,
#userauthMARCdetails h1:first-child {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #2c3e50 !important;
    border-bottom: 2px solid #BE1E2D !important;
    display: block !important;
    padding-bottom: 8px !important;
    margin-bottom: 15px !important;
}

#userauthdetails .results_summary.paragraph,
#userauthdetails .paragraph {
    font-size: 14px !important;
    line-height: 1.6 !important;
    border-bottom: 1px dashed #eee !important;
    margin-bottom: 12px !important;
}

#userauthdetails .results_summary.paragraph:last-of-type {
    border-bottom: none !important;
}



#hierarchies .jstree-anchor {
    font-size: 14px !important;
    height: 28px !important;
    line-height: 28px !important;
    white-space: nowrap !important;
}

.show-more-terms {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    border: 1px solid #BE1E2D !important;
    color: #BE1E2D !important;
    background: #fff !important;
    border-radius: 6px !important;
    padding: 12px 0 !important;
    margin-top: 15px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

.show-more-terms:hover {
    background: #BE1E2D !important;
    color: #fff !important;
}

/* #userauthdetails>h1 {
    display: none !important;
} */

#opac-authoritiesdetail #xslt>div.trees {
    margin: 0;
    padding: 0;
}

#wrap>.container-fluid {
    background-color: rgba(255, 255, 255, 0.35);
}

#opaccredits #divider {
    padding: 1px 0px;
    background: #BE1E2D;
}

#opaccredits #contact {
    background-color: #4f575e;
    padding: 10px 0px;
    text-align: center;
    color: #FFFFFF;
    font-family: 'Sarabun';
}

@media (max-width: 1024px) {
    #header-region #logo {
        width: 350px;
    }

    #header-region .navbar-expand {
        margin: unset;
    }

    #searchboxhead {
        inline-size: unset !important;
    }

    #searchboxhead button {
        margin-top: 5px;
    }
}



@media only screen and (max-width: 600px) {
    #header-region #logo {
        width: 350px;
        padding: unset;
        margin: unset;
    }

    #header-region .navbar-expand {
        margin: unset;
    }


    #header-region .navbar-expand #main-header #menu-header {
        padding: 4% 12%;
    }

    #header-region .navbar-expand #main-header #menu-header .row {
        float: unset;
    }

    #search-history-count,
    #searchboxhead {
        text-align: unset !important;
    }

    /* #user-menu-trigger { } removed to fix lint */

    #logo {
        height: 100px;
        background-position: unset;
        /* margin: 10px 0 20px 0; */
    }

    .nav>li>a {
        padding: unset;
    }

    /* Result */
    #opac-authoritiesresultlist {
        font-size: 15px;
    }

    #opac-authoritiesresultlist div.main,
    #opac-authoritiesdetail div.main,
    #opac-authoritiesresultlist .breadcrumb {
        margin-left: 0;
        margin-right: 0;
    }

    #opac-authoritiesresultlist div.main>div.container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    #opac-authoritiesresultlist #userauthsearchresults>h1 {
        font-size: 25px;
    }

    #opac-authoritiesresultlist #userauthsearchresults div.authorizedheading>div>div.col-xs-8 {
        font-size: unset;
    }

    #opac-authoritiesresultlist #userauthsearchresults div.geography {

        text-align: center;
        font-weight: normal;
        font-size: 80%;
    }

    #opac-authoritiesresultlist div.pages div {
        text-align: center;
        display: flex;
    }

    #opac-authoritiesresultlist .pages a {
        padding: 4px 8px;
        margin: auto;
    }

    /* Detail */
    #opac-authoritiesdetail #xslt div.row {
        margin: 1%;
    }

    #opac-authoritiesdetail #logo {
        background-position: cover;
    }

    #opac-authoritiesdetail #marc {
        font-size: 15px;
    }

    #opac-authoritiesdetail #marc td.marclib,
    #opac-authoritiesdetail #marc td.marcvalue {
        display: block;
        width: 100% !important;
        margin-left: 2%;
        text-indent: 2% !important;
    }

    #opac-authoritiesdetail table#marc.table-striped>tbody>tr:nth-of-type(2n+1) {
        background-color: unset;
    }

    #opac-authoritiesdetail #marc th {
        background-color: #eaeaea;
    }

    #opac-authoritiesdetail #xslt>div.trees {
        margin: unset;
    }

    #opac-authoritiesdetail .row>.seealso-container:nth-child(1) {
        padding-right: unset;
        margin: 5px 0px;
        border-radius: 5px;
    }

    #opac-authoritiesdetail #xslt>div:nth-child(4)>div:nth-child(2),
    #opac-authoritiesdetail #xslt>div:nth-child(4)>div:nth-child(4),
    #opac-authoritiesdetail #xslt>div:nth-child(5)>div:nth-child(2),
    #opac-authoritiesdetail #xslt>div:nth-child(5)>div:nth-child(4) {
        padding-left: unset;
        margin: 5px 0px;
        border-radius: 5px;
    }

    .mastheadsearch input {
        width: unset;
    }

    #opac-authoritiesdetail #views>li:nth-child(3) {
        text-align: unset;
    }

    #moresearches li:after {
        content: '';
    }
}

.mastheadsearch {
    display: none;
}

#opac-authoritiesresultlist .mastheadsearch,
#opac-authoritiesdetail .mastheadsearch {
    display: block;
}

#logo {
    background-image: url(/punsarn/opac/img/logo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 350px;
    padding: 40px 50px;
}

#logo a {
    width: 100%;
}

body {
    background-image: url("/punsarn/opac/img/banner.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

#header-region .navbar.navbar-inverse .navbar-inner {
    background-color: rgba(255, 255, 255, 0.35);
}

body.custom-auth-home .breadcrumb {
    display: none !important;
}

/* Custom Authority Search Home */
body.custom-auth-home #wrap>.container-fluid {
    background-color: transparent;
}

body.custom-auth-home .main {
    background-color: transparent;
    box-shadow: none;
    border: none;
}

body.custom-auth-home #userauthhome {
    display: flex;
    justify-content: center;
    padding-top: 50px;
    min-height: 400px;
}

.custom-auth-home .auth-home-container {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 40px 60px;
    width: 100%;
    max-width: 900px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    /* Stack children vertically */
}

.custom-auth-home .auth-home-title {
    font-family: 'Sarabun', sans-serif;
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 30px;
    color: #000;
}

.custom-auth-home .auth-form-wrapper {
    flex-grow: 1;
    /* Allow form to take available space */
    display: flex;
    flex-direction: column;
}

.custom-auth-home .auth-input-group {
    display: flex;
    margin-bottom: 20px;
}

.custom-auth-home .auth-search-input {
    flex: 1;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 4px 0 0 4px;
    padding: 15px;
    font-size: 18px;
    font-family: 'Sarabun', sans-serif;
    height: 50px;
}

.custom-auth-home .auth-search-btn {
    background-color: #BE1E2D;
    border: none;
    color: white;
    padding: 0 25px;
    border-radius: 0 4px 4px 0;
    font-size: 20px;
    cursor: pointer;
}

.custom-auth-home .auth-search-btn:hover {
    background-color: #901622;
}

.custom-auth-home .auth-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    /* Add margin top to separate from form/advanced */
    margin-bottom: 20px;
}

.custom-auth-home .auth-opt-btn,
.custom-auth-home .auth-new-btn,
.custom-auth-home .auth-manual-btn {
    background-color: #BE1E2D;
    border: none;
    color: white;
    padding: 10px 30px;
    border-radius: 4px;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.custom-auth-home .auth-opt-btn:hover,
.custom-auth-home .auth-new-btn:hover,
.custom-auth-home .auth-manual-btn:hover {
    background-color: #901622;
    color: white;
}

/* Advanced Options Styling */
.custom-auth-home .auth-advanced {
    text-align: left;
    background: transparent;
    padding: 20px 0;
    border: none;
    width: 100%;
    clear: both;
}

.custom-auth-home .auth-advanced legend {
    display: none;
}

.custom-auth-home .auth-advanced fieldset {
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.custom-auth-home .auth-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    clear: both;
}

/* New Subject Card Styles */
.new-subject-card {
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.new-subject-card .subject-title {
    font-size: 18px;
    font-weight: bold;
    color: #0076b2;
    margin-bottom: 5px;
}

.new-subject-card .subject-title a {
    text-decoration: none;
    color: #0076b2;
}

.new-subject-card .subject-code {
    color: #666;
    margin-bottom: 5px;
    font-family: monospace;
}

.new-subject-card .subject-desc {
    color: #444;
    font-size: 14px;
    margin-bottom: 10px;
}

.new-subject-card .subject-date {
    font-size: 12px;
    color: #888;
    text-align: right;
}

.custom-auth-home .auth-advanced ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-auth-home .auth-advanced li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.custom-auth-home .auth-advanced label {
    width: 150px;
    display: inline-block;
    font-weight: bold;
    margin-bottom: 0;
    text-align: right;
    margin-right: 15px;
}

.custom-auth-home .auth-advanced select {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
    width: 100%;
    max-width: 300px;
}

.custom-auth-home .auth-advanced input[type="text"] {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Responsive */
@media (max-width: 768px) {
    .custom-auth-home .auth-home-container {
        padding: 20px;
    }

    .custom-auth-home .auth-home-title {
        font-size: 24px;
    }

    .custom-auth-home .auth-actions {
        flex-direction: row;
        gap: 10px;
    }

    .custom-auth-home .auth-opt-btn,
    .custom-auth-home .auth-new-btn {
        padding: 10px 15px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .custom-auth-home .auth-actions {
        flex-direction: row;
    }

    .custom-auth-home .auth-search-btn {
        padding: 0 15px;
    }
}

#usermenu ul li {
    display: none;
}

#usermenu ul li:nth-child(3),
#usermenu ul li:nth-child(5),
#usermenu ul li:nth-child(6) {
    display: block;
}

.modal .modal-dialog .modal-content .modal-header button.close {
    float: right;
    font-size: 35px;
}

.modal .modal-dialog .modal-content .modal-body ul li {
    line-height: 25px;
    margin-bottom: 10px;
}

#search-history-count,
#searchboxhead {
    color: #4F575E;
    font-weight: bold;
}

#searchboxhead {
    inline-size: max-content;
}

#searchboxhead button {
    background: #BE1E2D;
    color: #FFFFFF;
    border: 1px solid #BE1E2D;
    border-radius: 4px;
}

#moresearches span {
    font-family: 'Sarabun';
}



#opac-patron-registration #modal-termofuse {
    font-family: 'Sarabun', sans-serif;
}

/* --footer-- */
#footer {
    border-top: 2px solid #BE1E2D;
    background-color: #4f575e;
    color: #ffffff;
}

#footer .fa {
    margin-right: 10px;
}

#footer a {
    color: #ffffff;
}

#mainpage .footer-table {
    padding: 0% 20% 0% 20%;
    width: 100%;
    background-color: #4f575e;
    color: #fff;
    font-size: 15px;
}

.footertable1 {
    padding-left: 10%;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #4f575e;
    width: 45%;
}

.footertable2 {
    padding-top: 30px;
    padding-bottom: 30px;
    width: 35.8922%;
    background-color: #4f575e;
}

.footertable3 {
    padding-top: 30px;
    padding-bottom: 30px;
    width: 29.1078%;
    background-color: #4f575e;
}

/* Hide Number of records used in: 0 */
#userauthMARCdetails p:first-of-type {
    display: none !important;
}

/* --- OPAC Login Customization --- */
/* Hide "Don't have a password..." and "Don't have a library card..." */
#nologininstructions {
    display: none !important;
}

/* Align Login and Registration buttons side-by-side */
#header-region #logo {
    background-image: url(/punsarn/opac/img/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 280px;
    /* Reduced width */
    height: 80px;
    /* Fixed height to control size */
    padding: 0;
    margin: 20px 0 20px 50px;
}

/* Ensure Logo container doesn't overflow */
.navbar-brand {
    padding: 0 !important;
    height: auto !important;
}

/* Login Form Container Adjustment */
#auth {
    display: flex;
    flex-direction: column;
}

/* Button Container - This relies on JS moving #registrationinstructions here */
.action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4%;
    /* Space between buttons */
}

/* Shared styles for both buttons to ensure equality */
#auth input.btn.btn-primary,
#registrationinstructions a {
    display: inline-block !important;
    width: 48% !important;
    /* Exactly half minus gap adjustment */
    height: 38px !important;
    /* Reduced height */
    line-height: 38px !important;
    /* Center text vertically */
    padding: 0 !important;
    /* Reset padding to let height/line-height control size */
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    /* Reduced font size */
}

/* Specific Style for Login Button (Green) */
#auth input.btn.btn-primary {
    background-color: #548300;
    /* Original Green */
    border: 1px solid #335000;
    color: #fff;
}

#auth input.btn.btn-primary:hover {
    background-color: #335000;
}

/* Specific Style for Create Account Button (Red/White) */
#registrationinstructions {
    margin: 0 !important;
    width: 48% !important;
    /* Container follows button width */
    padding: 0 !important;
}

#registrationinstructions a {
    background-color: #fff;
    color: #BE1E2D !important;
    border: 1px solid #BE1E2D;
    transition: all 0.2s ease;
}

#registrationinstructions a:hover {
    background-color: #BE1E2D;
    color: #fff !important;
    text-decoration: none;
}

/* Move registration instructions INTO the action bar via visual trickery or JS might be needed, 
   but since they are separate DIVs in DOM, we might need a different approach if they aren't siblings. 
   
   If they are siblings:
   #opac-auth (parent) { display: flex; flex-direction: column; }
   We can't easily move #registrationinstructions INTO .action without JS.
   
   Let's try to float them or use absolute positioning if structure is rigid, 
   BUT purely CSS solution for separate parents is hard.
   
   Let's check the DOM structure again from inspection:
   - #auth (form)
     - fieldset.rows
     - fieldset.action (Login btn)
   - #registrationinstructions (Link)
   
   They are siblings inside #opac-main-search or similar? No, usually:
   <div id="opac-auth">
     <form id="auth">...</form>
     <div id="registrationinstructions">...</div>
   </div>
   
   So we can target #opac-auth (or the main container) and use Flexbox on IT?
   No, the form contains inputs.
   
   BETTER CSS STRATEGY:
   Make #auth display: inline-block or width: 50%? No.
   
   Let's use the JS approach to move the element, 
   OR since I see the user asked for CSS changes, maybe visual alignment.
*/

/* Hide only the 'Search History' link in the sidebar on specific account pages */
#opac-search-history #navigation a[href*="opac-search-history.pl"],
#opac-patron-update #navigation a[href*="opac-search-history.pl"],
#opac-passwd #navigation a[href*="opac-search-history.pl"],
#opac-user #navigation a[href*="opac-search-history.pl"] {
    display: none !important;
}

/* Header Authority Search Box Styles */
#members {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 5px !important;
}

.header-authority-search-item {
    display: flex !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding: 0 !important;
    margin-top: 8px !important;
}

.header-authority-search-item .input-group {
    width: 180px !important;
}

.header-authority-search-item .form-control {
    border-radius: 20px 0 0 20px !important;
    border: 1px solid #ced4da !important;
    height: 32px !important;
    font-size: 13px !important;
    padding-left: 15px !important;
}

.header-authority-search-item .form-control:focus {
    border-color: #BE1E2D !important;
    box-shadow: 0 0 0 0.2rem rgba(190, 30, 45, 0.1) !important;
}

.header-authority-search-item .btn-danger {
    border-radius: 0 20px 20px 0 !important;
    height: 32px !important;
    padding: 0 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #BE1E2D !important;
    border-color: #BE1E2D !important;
}

.header-authority-search-item .btn-danger:hover {
    background-color: #a01a26 !important;
}

/* --- Responsive Fixes (Mobile) --- */
@media (max-width: 991px) {

    /* Header & Logo */
    #header-region {
        width: 100% !important;
        padding: 0 !important;
    }

    #header-region .container-fluid {
        padding: 0 !important;
    }

    #header-region .navbar-expand {
        margin: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 10px 0 !important;
        width: 100% !important;
        background: #F3F6F8 !important;
    }

    #header-region #logo {
        width: 100% !important;
        max-width: 330px !important;
        background-size: contain !important;
        padding: 10px 0 25px 0 !important;
        margin: 0 auto !important;
        display: block !important;
        background-position: center !important;
    }

    #header-region div#members {
        margin-top: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #header-region div#members ul.nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 5px !important;
    }

    #header-region div#members ul.nav>li {
        width: auto !important;
        text-align: center !important;
        margin: 5px 0 !important;
    }

    #header-region div#members ul.nav>li>a {
        display: inline-block !important;
        padding: 8px 15px !important;
    }

    .header-authority-search-item {
        width: 100% !important;
        padding: 0 15px !important;
        margin-top: 5px !important;
        display: block !important;
    }

    .header-authority-search-item form,
    .header-authority-search-item .input-group {
        width: 100% !important;
        display: flex !important;
    }

    .header-authority-search-item input.form-control {
        flex: 1 !important;
        height: 40px !important;
        font-size: 15px !important;
    }

    .header-authority-search-item button.btn-danger {
        height: 40px !important;
    }

    /* Main Page Search Full Width */
    body.custom-auth-home #userauthhome {
        padding-top: 15px !important;
        margin: 0 !important;
    }

    .custom-auth-home .auth-home-container {
        padding: 25px 15px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    .custom-auth-home .auth-home-title {
        font-size: 24px !important;
    }

    .custom-auth-home .auth-input-group {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .custom-auth-home .auth-search-input {
        border-radius: 8px !important;
        border-right: 1px solid #ccc !important;
        height: 50px !important;
    }

    .custom-auth-home .auth-search-btn {
        width: 100% !important;
        border-radius: 8px !important;
        height: 50px !important;
    }

    .custom-auth-home .auth-actions {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .custom-auth-home .auth-actions .btn,
    .custom-auth-home .auth-actions a {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* General Main Content Wrappers Full Width */
    body.custom-auth-home .main,
    #opac-authoritiesdetail div.main,
    #opac-authoritiesresultlist div.main {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
    }

    body.custom-auth-home .main .container-fluid,
    #opac-authoritiesdetail div.main .container-fluid,
    #opac-authoritiesresultlist div.main .container-fluid {
        padding: 0 !important;
        margin: 0 !important;
    }

    body.custom-auth-home .main .row,
    #opac-authoritiesdetail div.main .row,
    #opac-authoritiesresultlist div.main .row {
        margin: 0 !important;
    }

    #opac-authoritiesdetail .breadcrumb,
    #opac-authoritiesresultlist .breadcrumb {
        margin: 0 !important;
        padding: 10px 12px !important;
        border-radius: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
    }

    /* Remove grey gap - high specificity override */
    body#opac-authoritiesdetail div.main,
    body#opac-authoritiesresultlist div.main,
    body#opac-main-biblio-search div.main,
    div.main {
        background: #ffffff !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* Prevent body background from bleeding through transparent areas */
    body#opac-authoritiesdetail,
    body#opac-authoritiesresultlist {
        background-color: #ffffff !important;
        background-image: none !important;
    }

    #opac-authoritiesdetail #userauthdetails,
    #opac-authoritiesdetail #userauthMARCdetails {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 10px 0 !important;
        grid-template-columns: 1fr !important;
        /* Fallback */
    }

    #opac-authoritiesdetail #userauthdetails>div,
    #opac-authoritiesdetail #userauthdetails>h1,
    #opac-authoritiesdetail #userauthdetails>.card,
    #opac-authoritiesdetail #userauthdetails>.authstanza {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 20px 15px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        grid-area: auto !important;
        /* Break the grid mapping */
    }

    #opac-authoritiesdetail #auth-heading-wrapper {
        padding: 20px !important;
    }

    #opac-authoritiesdetail #views {
        flex-direction: column !important;
        gap: 8px !important;
    }

    #opac-authoritiesdetail #views .view {
        width: 100% !important;
        margin: 0 !important;
    }

    #opac-authoritiesdetail #views .view a,
    #opac-authoritiesdetail #views .view span {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* Hierarchy & Subheadings side-by-side */
    #authority_trees_row .auth_tree_col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }

}

/* --- Responsive Fixes (Mobile) --- */
/* (End of max-width: 991px block, previous contents except table override) */

/* Search Results Table to Cards (Applied Globally to force Card List view on PC too) */
#opac-authoritiesresultlist .main {
    padding: 10px !important;
}

#opac-authoritiesresultlist table.dataTable,
#opac-authoritiesresultlist table.dataTable thead,
#opac-authoritiesresultlist table.dataTable tbody,
#opac-authoritiesresultlist table.dataTable tr,
#opac-authoritiesresultlist table.dataTable td {
    display: block !important;
    width: 100% !important;
}

#opac-authoritiesresultlist table.dataTable thead {
    display: none !important;
}

#opac-authoritiesresultlist table.dataTable tr {
    margin-bottom: 20px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

#opac-authoritiesresultlist table.dataTable td {
    border: none !important;
    padding: 6px 0 !important;
    text-align: left !important;
}

/* Hide columns 2, 3, 4 since all info is now inside the card in the first column */
#opac-authoritiesresultlist table.dataTable td:not(:first-child),
#opac-authoritiesresultlist table.dataTable th:not(:first-child) {
    display: none !important;
}

#opac-authoritiesresultlist table.dataTable td:first-child {
    font-weight: normal !important;
    font-size: 14px !important;
    color: inherit !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Hide DataTables Responsive expand/collapse elements and generated child rows completely */
#opac-authoritiesresultlist table.dataTable tbody tr.child,
#opac-authoritiesresultlist table.dataTable.dtr-column>tbody>tr>td.control:before,
#opac-authoritiesresultlist table.dataTable.dtr-column>tbody>tr>th.control:before,
#opac-authoritiesresultlist table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
#opac-authoritiesresultlist table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
    display: none !important;
    content: none !important;
}

/* Reset DataTable padding and alignment since there are no columns now */
#opac-authoritiesresultlist table.dataTable td.control {
    padding-left: 0 !important;
}

/* Extra card styling for the XSLT page_card */
.page_card {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}