/* FONTFACE */
    /* NotoSansThai */
    @font-face {
        font-family: 'NotoSansThaiSemiBold';
        src: url('../fonts/NotoSansThai/NotoSansThai-SemiBold.woff2') format('woff2'),
            url('../fonts/NotoSansThai/NotoSansThai-SemiBold.woff') format('woff');
        font-weight: 600;
        font-style: normal;
        unicode-range: U+0E00–U+0E7F;
    }

    @font-face {
        font-family: 'NotoSansThaiExtraBold';
        src: url('../fonts/NotoSansThai/NotoSansThai-ExtraBold.woff2') format('woff2'),
            url('../fonts/NotoSansThai/NotoSansThai-ExtraBold.woff') format('woff');
        font-weight: bold;
        font-style: normal;
        unicode-range: U+0E00–U+0E7F;
    }

    @font-face {
        font-family: 'NotoSansThaiBold';
        src: url('../fonts/NotoSansThai/NotoSansThai-Bold.woff2') format('woff2'),
            url('../fonts/NotoSansThai/NotoSansThai-Bold.woff') format('woff');
        font-weight: bold;
        font-style: normal;
        unicode-range: U+0E00–U+0E7F;
    }

    @font-face {
        font-family: 'NotoSansThaiLight';
        src: url('../fonts/NotoSansThai/NotoSansThai-Light.woff2') format('woff2'),
            url('../fonts/NotoSansThai/NotoSansThai-Light.woff') format('woff');
        font-weight: 300;
        font-style: normal;
        unicode-range: U+0E00–U+0E7F;
    }

    @font-face {
        font-family: 'NotoSansThaiRegular';
        src: url('../fonts/NotoSansThai/NotoSansThai-Regular.woff2') format('woff2'),
            url('../fonts/NotoSansThai/NotoSansThai-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        unicode-range: U+0E00–U+0E7F;
    }

    @font-face {
        font-family: 'NotoSansThaiBlack';
        src: url('../fonts/NotoSansThai/NotoSansThai-Black.woff2') format('woff2'),
            url('../fonts/NotoSansThai/NotoSansThai-Black.woff') format('woff');
        font-weight: 900;
        font-style: normal;
        unicode-range: U+0E00–U+0E7F;
    }

    @font-face {
        font-family: 'NotoSansThaiMedium';
        src: url('../fonts/NotoSansThai/NotoSansThai-Medium.woff2') format('woff2'),
            url('../fonts/NotoSansThai/NotoSansThai-Medium.woff') format('woff');
        font-weight: 500;
        font-style: normal;
        unicode-range: U+0E00–U+0E7F;
    }

    @font-face {
        font-family: 'NotoSansThaiExtraLight';
        src: url('../fonts/NotoSansThai/NotoSansThai-ExtraLight.woff2') format('woff2'),
            url('../fonts/NotoSansThai/NotoSansThai-ExtraLight.woff') format('woff');
        font-weight: 200;
        font-style: normal;
        unicode-range: U+0E00–U+0E7F;
    }

    @font-face {
        font-family: 'NotoSansThaiThin';
        src: url('../fonts/NotoSansThai/NotoSansThai-Thin.woff2') format('woff2'),
            url('../fonts/NotoSansThai/NotoSansThai-Thin.woff') format('woff');
        font-weight: 100;
        font-style: normal;
        unicode-range: U+0E00–U+0E7F;
    }

    /* NotoSansThai */

    /* NotoSans */
    @font-face {
        font-family: 'NotoSansRegular';
        src: url('../fonts/NotoSans/NotoSans.woff2') format('woff2'),
            url('../fonts/NotoSans/NotoSans.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'NotoSansBold';
        src: url('../fonts/NotoSans/NotoSans-Bold.woff2') format('woff2'),
            url('../fonts/NotoSans/NotoSans-Bold.woff') format('woff');
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: 'NotoSansBoldItalic';
        src: url('../fonts/NotoSans/NotoSans-BoldItalic.woff2') format('woff2'),
            url('../fonts/NotoSans/NotoSans-BoldItalic.woff') format('woff');
        font-weight: bold;
        font-style: italic;
    }

    @font-face {
        font-family: 'NotoSansItalic';
        src: url('../fonts/NotoSans/NotoSans-Italic.woff2') format('woff2'),
            url('../fonts/NotoSans/NotoSans-Italic.woff') format('woff');
        font-weight: normal;
        font-style: italic;
    }
    /* NotoSans */

    /* Nunito */
    @font-face {
        font-family: 'NunitoExtraLightItalic';
        src: url('../fonts/Nunito/Nunito-ExtraLightItalic.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-ExtraLightItalic.woff') format('woff');
        font-weight: 200;
        font-style: italic;
    }

    @font-face {
        font-family: 'NunitoBlack';
        src: url('../fonts/Nunito/Nunito-Black.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-Black.woff') format('woff');
        font-weight: 900;
        font-style: normal;
    }

    @font-face {
        font-family: 'NunitoExtraBoldItalic';
        src: url('../fonts/Nunito/Nunito-ExtraBoldItalic.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-ExtraBoldItalic.woff') format('woff');
        font-weight: bold;
        font-style: italic;
    }

    @font-face {
        font-family: 'NunitoExtraBold';
        src: url('../fonts/Nunito/Nunito-ExtraBold.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-ExtraBold.woff') format('woff');
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: 'NunitoBold';
        src: url('../fonts/Nunito/Nunito-Bold.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-Bold.woff') format('woff');
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: 'NunitoItalic';
        src: url('../fonts/Nunito/Nunito-Italic.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-Italic.woff') format('woff');
        font-weight: normal;
        font-style: italic;
    }

    @font-face {
        font-family: 'NunitoBoldItalic';
        src: url('../fonts/Nunito/Nunito-BoldItalic.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-BoldItalic.woff') format('woff');
        font-weight: bold;
        font-style: italic;
    }

    @font-face {
        font-family: 'NunitoBlackItalic';
        src: url('../fonts/Nunito/Nunito-BlackItalic.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-BlackItalic.woff') format('woff');
        font-weight: 900;
        font-style: italic;
    }

    @font-face {
        font-family: 'NunitoExtraLight';
        src: url('../fonts/Nunito/Nunito-ExtraLight.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-ExtraLight.woff') format('woff');
        font-weight: 200;
        font-style: normal;
    }

    @font-face {
        font-family: 'NunitoLightItalic';
        src: url('../fonts/Nunito/Nunito-LightItalic.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-LightItalic.woff') format('woff');
        font-weight: 300;
        font-style: italic;
    }

    @font-face {
        font-family: 'NunitoMedium';
        src: url('../fonts/Nunito/Nunito-Medium.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-Medium.woff') format('woff');
        font-weight: 500;
        font-style: normal;
    }

    @font-face {
        font-family: 'NunitoLight';
        src: url('../fonts/Nunito/Nunito-Light.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-Light.woff') format('woff');
        font-weight: 300;
        font-style: normal;
    }

    @font-face {
        font-family: 'NunitoSemiBold';
        src: url('../fonts/Nunito/Nunito-SemiBold.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-SemiBold.woff') format('woff');
        font-weight: 600;
        font-style: normal;
    }

    @font-face {
        font-family: 'NunitoMediumItalic';
        src: url('../fonts/Nunito/Nunito-MediumItalic.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-MediumItalic.woff') format('woff');
        font-weight: 500;
        font-style: italic;
    }

    @font-face {
        font-family: 'NunitoRegular';
        src: url('../fonts/Nunito/Nunito-Regular.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'NunitoSemiBoldItalic';
        src: url('../fonts/Nunito/Nunito-SemiBoldItalic.woff2') format('woff2'),
            url('../fonts/Nunito/Nunito-SemiBoldItalic.woff') format('woff');
        font-weight: 600;
        font-style: italic;
    }
    /* Nunito */
/* FONTFACE */

/*MAIN*/
a {
    color: #3468FF;
}

html {
}

body {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    word-break: break-word;
    font-family: 'NotoSansThaiRegular', 'NotoSansRegular';
}

main {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    min-height: 500px;
    height: 100%;
}
/*MAIN*/

/*LOADING*/
.pre-loader {
    background: #ffffff;
    background-position: center center;
    background-size: 13%;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 12345;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.pre-loader .loader-logo {
    padding-bottom: 20px;
    text-align: center;
}

.pre-loader .loader-logo img {
    max-width: 200px;
    max-height: 100%;
}

.pre-loader .loader-progress {
    height: 8px;
    border-radius: 15px;
    max-width: 200px;
    margin: 0 auto;
    display: block;
    background: #ecf0f4;
    overflow: hidden;
}

.pre-loader .bar {
    width: 0%;
    height: 8px;
    display: block;
    background: #3750A2;
}

.pre-loader .percent {
    text-align: center;
    font-size: 24px;
    display: none;
}

.pre-loader .loading-text {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    padding-top: 15px;
}

.pre-loader .text-loading {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    padding-top: 15px;
    padding-bottom: 5px;
}

.pre-loader .loader-progress {
    visibility: hidden;
}

.pre-loader .loader-progress-sbs {
    text-align: center;
}

.pre-loader .loader-progress-sbs em, .data-loader em {
    font-size: 36px;
    color: #3750A2;
}

.pre-loader .loading-text {
    position: relative;
}

.pre-loader .loading-text::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #211f20;
    border-bottom: 6px solid #3750A2;
    animation: lod 2s linear infinite;
    font-weight: bold;
    font-size: 24px;
}
.pre-loader .loader-logo img,
.pre-loader .loader-progress-sbs, 
.pre-loader .text-loading, 
.pre-loader .loading-text {
    opacity: 0;
}

@keyframes lod {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.fa.fa-spinner.fa-spin.loader.useThememSbs {
    font-size: 24px;
}

/*LOADING*/

/*HEADER TOP*/
.blockHeaderTop {
    background-color: #3750A2;

}
.blockHeaderTop .blockChangeLanguage {
    display: inline-block;
    background-color: #F6F6F8;
    padding: 10px 35px 10px 18px;
    margin-right: 1rem;
    position: relative;
}

.blockHeaderTop .blockChangeLanguage .imgLang {
    width: 28px;
    margin-right: 12px;
}

.blockHeaderTop .blockChangeLanguage .dropdown-toggle {
    font-family: 'NotoSansThaiRegular', 'NotoSansRegular';
    color: #39499F;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    position: relative;
}

.blockHeaderTop .blockChangeLanguage .dropdown-toggle:hover,
.blockHeaderTop .blockChangeLanguage .dropdown-toggle:focus {
    text-decoration: none;
}

.blockHeaderTop .blockChangeLanguage .dropdown-toggle::after {
    border: none;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; 
    content: "\f107";
    position: absolute;
    padding-left: 6px;
}

.blockHeaderTop .blockChangeLanguage .dropdown-menu {
    background-color: #f6f6f8;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-animation: fadeInUp 300ms ease-in-out;
    animation: fadeInUp 300ms ease-in-out;
    border: 0.5px solid #E7E7E7;
    box-sizing: border-box;
    box-shadow: 4px 0px 5px rgb(232 237 243 / 50%);
    border-radius: 0.25rem;
    padding: 10px 0px;
    left: -25px !important;
    top: 25px !important;
    transform: translate(0%, 0%) !important;
}

.blockHeaderTop .blockChangeLanguage .dropdown-item {
    color: #39499F;
}

.blockHeaderTop .blockChangeLanguage .dropdown-item.active, 
.blockHeaderTop .blockChangeLanguage .dropdown-item:active {
    background-color: #334ea7;
    color: #ffffff !important;
}

.blockHeaderTop .aSignin {
    font-family: 'NotoSansThaiRegular', 'NotoSansRegular';
    color: #ffffff;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    padding-right: 5px;
}

.blockHeaderTop .blockDataLogin {
    display: inline-block;
    padding-right: 25px;
}

.blockHeaderTop .blockDataLogin .dropdown-toggle {
    font-family: 'NotoSansThaiRegular', 'NotoSansRegular';
    color: #ffffff;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    position: relative;
}

.blockHeaderTop .blockDataLogin .dropdown-toggle:hover,
.blockHeaderTop .blockDataLogin .dropdown-toggle:focus {
    text-decoration: none;
}

.blockHeaderTop .blockDataLogin .dropdown-toggle::after {
    border: none;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; 
    content: "\f107";
    position: absolute;
    padding-left: 6px;
}

.blockHeaderTop .blockDataLogin .dropdown-menu {
    background-color: #ffffff;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-animation: fadeInUp 300ms ease-in-out;
    animation: fadeInUp 300ms ease-in-out;
    border: 0.5px solid #E7E7E7;
    box-sizing: border-box;
    box-shadow: 4px 0px 5px rgb(232 237 243 / 50%);
    border-radius: 0.25rem;
    padding: 10px 0px;
    top: 23px !important;
    left: -13px !important;
    transform: translate(0%, 0%) !important;
}

.blockHeaderTop .blockDataLogin .dropdown-item {
    color: #39499F;
}

.blockHeaderTop .blockDataLogin .dropdown-item.active, 
.blockHeaderTop .blockDataLogin .dropdown-item:active {
    background-color: #3468ff;
    color: #ffffff !important;
}
/*HEADER TOP*/

/*HEADER*/
.blockHeader .navbar {
    padding-right: 0px;
    padding-left: 0px;
}

.blockHeader .navbar .navbar-brand img {
    max-width: 100%;
    max-height: 100%;
}

.blockHeader .navbar .navbar-brand img.horizontalImg {
    width: 200px;
}

.blockHeader .navbar .navbar-brand img.verticalImg {
    height: 90px;
}

.blockHeader .navbar .nav-item{
    background: #DFEBF6;
    border-radius: 20px;
    font-family: 'NotoSansThaiRegular', 'NotoSansRegular';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    padding: 3px 19px;
}

.blockHeader .navbar .nav-item.active {
    background-color: #3468FF;
}

.blockHeader .navbar .nav-item .nav-link {
    color: #39499F;
    padding: 0;
}

.blockHeader .navbar .navbar-toggler {
    background-color: #39499F;
}

.blockHeader .navbar .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.blockHeader .navbar .nav-item.active .nav-link{
    color: #ffffff;
}

.blockHeader .navbar .nav-item:hover:not(.active) .nav-link, 
.blockHeader .navbar .nav-item:focus:not(.active) .nav-link {
    text-decoration: underline;
}

.blockHeader .navbar .nav-item:not(:last-child){
    margin-right: 1.5rem;
}


.blockHeader .navbar .nav-item.dropdown {
    padding-right: 37px;
}

.blockHeader .navbar .nav-item.dropdown .dropdown-menu {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-animation: fadeInUp 300ms ease-in-out;
    animation: fadeInUp 300ms ease-in-out;
    background-color: #ffffff;
    border: 0.5px solid #E7E7E7;
    box-sizing: border-box;
    box-shadow: 4px 0px 5px rgba(232, 237, 243, 0.5);
    /*border-radius: 15px;*/
    border-radius: 0.25rem;
    padding: 10px 0px;
    left: -5px !important;
    top: 27px !important;
    transform: translate(0%, 0%) !important;
    width: 200px;
}

.blockHeader .navbar .nav-item.dropdown .dropdown-menu .dropdown-item {
    white-space: normal;
    color: #39499F;
}

.blockHeader .navbar .nav-item.dropdown .dropdown-menu .dropdown-item:focus, 
.blockHeader .navbar .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    text-decoration: none;
    background-color: #e9ecef;
}

.blockHeader .navbar .nav-item.dropdown .dropdown-menu .dropdown-item.active, 
.blockHeader .navbar .nav-item.dropdown .dropdown-menu .dropdown-item:active {
    background-color: #3468ff;
    color: #ffffff !important; 
}

.blockHeader .navbar .dropdown-toggle {
    position: relative;
}

.blockHeader .navbar .dropdown-toggle:hover,
.blockHeader .navbar .dropdown-toggle:focus {
    text-decoration: none;
}

.blockHeader .navbar .dropdown-toggle::after {
    border: none;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; 
    content: "\f107";
    position: absolute;
    padding-left: 6px;
}

.block-ecard-button {
    display: inline-block;
    background-color: #F6F6F8;
    /* padding: 10px 0px 10px 0px; */
    margin-right: 10px;
    position: relative;
}

.modal-ecard-r20 {
    position: relative;
    margin-top: 150px;
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 232px;
    height: 315px;
}

.modal-ecard-buttom-button {
    position: absolute;
    bottom: -42px;
}

.modal-ecard-button-dowload-icon {
    border-radius: 20px;
}

.btn-dowload-ecard-bottom {
    position: absolute;
    width: 85%;
    bottom: 14px;
    font-size: 12px;
    padding-top: 12px;
    border-top: 1px solid #9199a0;
}

.button-show-modal-ecard {
    top: 3px;
    cursor: pointer;
    background-color: transparent;
    color: #ffffff;
    font-size: 18px;
    line-height: 1px
}

.button-ecard-circle-select {
    top: 10px;
    width: 34px;
    height: 34px;
    background-color: #ffffff;
    color: #3468ff;
    border-radius: 100%;
    border: none;
}

.button-ecard-circle-select-active {
    top: 10px;
    width: 34px;
    height: 34px;
    background-color: #3468ff;
    color: #ffffff;
    border-radius: 100%;
    border: none;
}

.icon-close-m-ecard {
    margin-top: 1.5px;
}

.img-profiles-ecard {
    /*border: 1px solid;*/
    border-radius: 100%;
    width: 80px !important;
    height: 80px !important;
}

.size-img-profiles-ecard {
    width: 68px !important;
    height: 68px !important;
}

.img-barcode-show-ecard {
    max-width: 200px;
    max-height: 100px;
}

.modal-dowload-ecard {
    font-size: 14px;
}
/*HEADER*/

/*INPUT GROUP*/
.inputGroupSBS .form-control:first-child {
    border-radius: 50px 0px 0px 50px;
    border-color: #3468FF;
}


.inputGroupSBS select.form-control {
    display: inline-block;
    flex: 0 0 20%;
    max-width: 20%;
    padding: 0.375rem 1.75rem 0.375rem 1.75rem;
    color: #1E293B;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7071 11.7071C16.0976 11.3166 16.0976 10.6834 15.7071 10.2929C15.3166 9.90237 14.6834 9.90237 14.2929 10.2929L15.7071 11.7071ZM12 14L11.2929 14.7071C11.4804 14.8946 11.7348 15 12 15C12.2652 15 12.5196 14.8946 12.7071 14.7071L12 14ZM9.70711 10.2929C9.31658 9.90237 8.68342 9.90237 8.29289 10.2929C7.90237 10.6834 7.90237 11.3166 8.29289 11.7071L9.70711 10.2929ZM14.2929 10.2929L11.2929 13.2929L12.7071 14.7071L15.7071 11.7071L14.2929 10.2929ZM12.7071 13.2929L9.70711 10.2929L8.29289 11.7071L11.2929 14.7071L12.7071 13.2929Z' fill='%231E293B'/%3E%3C/svg%3E") no-repeat right .2rem center;
    background-size: 24px;
    background-color: #ffffff;
    border: 1px solid #1E293B;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 14px;
    position: relative;
    height: 45px;
}

.inputGroupSBS input.form-control {
    border: 1px solid #3468FF;
    border-right: none;
    height: auto;
    height: 45px;
    font-size: 14px;
}

.inputGroupSBS .input-group-append {
    height: 45px;
    border: 1px solid #3468FF;
    border-right: none;
    border-left: none;
    background-color: #ffffff;
}

.inputGroupSBS .input-group-append .input-group-text {
    border: none;
    background-color: #ffffff;
    padding: 0 0 0 10px;
}

.inputGroupSBS .input-group-append .input-group-text .btn-primary {
    background-color: #3468FF;
    border-color: transparent;
    border-radius: 20px;
    padding: 3px 20px;
}

.inputGroupSBS .input-group-append .input-group-text .btn-primary:hover, 
.inputGroupSBS .input-group-append .input-group-text .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgb(52 104 255 / 25%);
}

.inputGroupSBS .input-group-append .input-group-text .btn-danger {
    background-color: #EF4152;
    border-color: transparent;
    border-radius: 20px;
    padding: 3px 20px;
}

.inputGroupSBS .input-group-append .input-group-text .btn-danger:hover, 
.inputGroupSBS .input-group-append .input-group-text .btn-danger:focus {
    box-shadow: 0 0 0 0.2rem rgb(239 67 84 / 25%);
}

.inputGroupSBS .input-group-append:last-child {
    border-right: 1px solid #3468FF;
    border-radius: 0px 50px 50px 0px;
    padding-right: 15px;
}
/*INPUT GROUP*/

/*BLOCK ARICLE */
.blockDataAricle {
    background-color: #FFFFFF;
    border-radius: 20px;
    padding: 25px 50px;
}

.textHeaderAricle {
    text-align: center;
    color: #0035CF;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
}
/*BLOCK ARICLE */

/*PAGE HOME*/
.blockImageBanner {
    width: 350px;
    height: 350px;
}

.blockImageBanner img {
    max-width: 100%;
    max-height: 100%;
}

.textHeaderSystem {
    font-family: 'NotoSansThaiBold', 'NotoSansBold';
    font-style: normal;
    font-weight: 900;
    font-size: 36px;
    line-height: 48px;
    letter-spacing: 0.08em;
    color: #231F20;
}

.textCatchphrase {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 38px;
    color: #39499F;
    margin-top: 15px;
}

.dataBookHome {
    background-color: #FFFFFF;
    border-radius: 20px;
    padding: 25px 50px;
    position: relative;
}

.textHeaderHome {
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 22px;
    text-align: center;
    color: #231F20;
    position: relative;
}

.blockBookPopular .owl-item {
    padding: 30px;
}

.blockBookPopular .owl-item a  {
    color: #231F20;
}

.blockBookPopular .owl-item a img  {
    width: 142px; 
    height: 210px;
}

.title-book{
    font-family: 'NotoSansThaiRegular', 'NotoSansRegular';
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 25px;
    text-align: center;
    /*border-top: 1px solid #231F20;*/
    /*border-bottom: 1px solid #231F20;*/
    width: 85%;
    margin: 0 auto;
    padding: 5px 3px;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em;
    color: #231F20;
    background: rgb(255 255 255 / 80%);
    max-height: 69px;
}

.title-book-new{
    font-family: 'NotoSansThaiRegular', 'NotoSansRegular';
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 21px;
    right: 0;
    top: 25px;
    text-align: center;
    /*border-top: 1px solid #231F20;*/
    /*border-bottom: 1px solid #231F20;*/
    width: 85%;
    margin: 0 auto;
    padding: 5px 3px;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em;
    color: #231F20;
    background: rgb(255 255 255 / 80%);
    max-height: 69px;
}

.title-book-recommand{
    font-family: 'NotoSansThaiRegular', 'NotoSansRegular';
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 21px;
    right: 0;
    top: 15px;
    text-align: center;
    /*border-top: 1px solid #231F20;*/
    /*border-bottom: 1px solid #231F20;*/
    width: 75%;
    height: 70px;
    margin: 0 auto;
    padding: 5px 3px;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em;
    color: #231F20;
    background: rgb(255 255 255 / 80%);
}

.title-book-interest {
    font-family: 'NotoSansThaiRegular', 'NotoSansRegular';
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 10px;
    right: 0;
    top: 35px;
    text-align: center;
    /* border-top: 1px solid #231F20; */
    /* border-bottom: 1px solid #231F20; */
    width: 70%;
    margin: 0 auto;
    padding: 4px 3px;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em;
    color: #231F20;
    background: rgb(255 255 255 / 80%);
}

.checkin-title-book-recommand{
    font-family: 'NotoSansThaiRegular', 'NotoSansRegular';
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 21px;
    right: 0;
    top: 15px;
    text-align: center;
    /*border-top: 1px solid #231F20;*/
    /*border-bottom: 1px solid #231F20;*/
    width: 62%;
    height: 69px;
    margin: 0 auto;
    padding: 5px 3px;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em;
    color: #231F20;
    background: rgb(255 255 255 / 80%);
}

.blockBookPopular .owl-item label {
    font-family: 'NotoSansThaiBold', 'NotoSansBold';
    position: absolute;
    /*bottom: 0;
    left: 10px;*/
    bottom: -30px;
    left: -20px;
    color: #3468FF;
    margin: 0;
    text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    -webkit-text-stroke: 2px #EEF7FF;
    font-size: 64px;

}

.blockBookPopular .owl-item a:hover,
.blockBookPopular .owl-item a:focus {
    text-decoration: underline;
}

.blockBookPopular .owl-nav {
    position: absolute;
    top: 42%;
    z-index: -1;
    width: 100%;
}

.blockBookPopular .owl-nav .owl-prev {
    position: absolute;
    left: -30px;
}

.blockBookPopular .owl-nav .owl-next {
    position: absolute;
    right: -30px;
}

.blockBookPopular .owl-nav .owl-prev:not(.disabled) svg path,
.blockBookPopular .owl-nav .owl-next:not(.disabled) svg path {
    fill: #3468FF;
}

.blockBorderBottomCarousel {
    background-color: #F9F9F9;
    box-shadow: 0px 4px 10px 1px rgb(0 0 0 / 25%);
    padding: 8px;
    position: absolute;
    width: 100%;
    margin-top: -15px;
}

.pageHome .blockMonthlyData label {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #231F20;
}

.pageHome .blockMonthlyData select.form-control {
    display: inline-block;
    width: auto;
    padding: 0.375rem 1.75rem 0.375rem 1rem;
    color: #868686;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7071 11.7071C16.0976 11.3166 16.0976 10.6834 15.7071 10.2929C15.3166 9.90237 14.6834 9.90237 14.2929 10.2929L15.7071 11.7071ZM12 14L11.2929 14.7071C11.4804 14.8946 11.7348 15 12 15C12.2652 15 12.5196 14.8946 12.7071 14.7071L12 14ZM9.70711 10.2929C9.31658 9.90237 8.68342 9.90237 8.29289 10.2929C7.90237 10.6834 7.90237 11.3166 8.29289 11.7071L9.70711 10.2929ZM14.2929 10.2929L11.2929 13.2929L12.7071 14.7071L15.7071 11.7071L14.2929 10.2929ZM12.7071 13.2929L9.70711 10.2929L8.29289 11.7071L11.2929 14.7071L12.7071 13.2929Z' fill='%231E293B'/%3E%3C/svg%3E") no-repeat right .2rem center;
    background-size: 24px;
    border: 1px solid transparent;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
    position: relative;
    background-color: #F0F2F6;
}

.blockBookNew .owl-item {
    padding: 30px;
}

.blockBookNew .owl-item a  {
    color: #231F20;
}

.blockBookNew .owl-item label {
    font-family: 'NotoSansThaiBold', 'NotoSansBold';
    position: absolute;
    bottom: 0;
    left: 10px;
    color: #3468FF;
    margin: 0;
    text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    -webkit-text-stroke: 2px #EEF7FF;
    font-size: 64px;

}


input.form-control.form-control-date {
    display: inline-block;
    width: 100%;
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    line-height: 1.5;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8H20' stroke='%23BBBDC9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 4H5C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4Z' stroke='%23BBBDC9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.75 12H8.25C8.11193 12 8 12.1119 8 12.25V15.75C8 15.8881 8.11193 16 8.25 16H11.75C11.8881 16 12 15.8881 12 15.75V12.25C12 12.1119 11.8881 12 11.75 12Z' stroke='%23BBBDC9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 2V4' stroke='%23BBBDC9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 2V4' stroke='%23BBBDC9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .3rem center;
    background-size: 24px;
    border-radius: 0.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


.blockBookNew .owl-item a:hover,
.blockBookNew .owl-item a:focus {
    text-decoration: underline;
}

.blockBookNew .owl-nav {
    position: absolute;
    top: 42%;
    z-index: -1;
    width: 100%;
}

.blockBookNew .owl-nav .owl-prev {
    position: absolute;
    left: -30px;
}

.blockBookNew .owl-nav .owl-next {
    position: absolute;
    right: -30px;
}

.blockBookNew .owl-nav .owl-prev:not(.disabled) svg path,
.blockBookNew .owl-nav .owl-next:not(.disabled) svg path {
    fill: #3468FF;
}

.blockBookNew .blockIconBook {
    position: absolute;
    width: 34px;
    height: 34px;
    line-height: 36px;
    border-radius: 50%;
    left: 13px;
    top: 40px;
    text-align: center;
}

.blockBookNew .blockIconBook.bookNew {
    background-color: #EF4152;
    color: #ffffff;
    font-weight: 600;
    font-size: 11px;
    z-index: 1;
    /*top: 0;
    left: 0;*/
    top: 25px;
    left: -10px;
}

.linkMore {
    position: absolute;
    right: 0;
    margin-top: -4px;
    color: #3468FF;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 38px;
}

.linkMore:hover,
.linkMore:focus {
    color: #3468FF;
}

.blockBookRecommend .owl-item {
    padding: 15px 20px;
}

.blockBookRecommend .owl-item a  {
    color: #231F20;
}

.blockBookRecommend .owl-item label {
    font-family: 'NotoSansThaiBold', 'NotoSansBold';
    position: absolute;
    bottom: 0;
    left: 10px;
    color: #3468FF;
    margin: 0;
    text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    -webkit-text-stroke: 2px #EEF7FF;
    font-size: 64px;

}

.blockBookRecommend .owl-item a:hover,
.blockBookRecommend .owl-item a:focus {
    text-decoration: underline;
}

.blockBookRecommend .owl-nav {
    position: absolute;
    top: 42%;
    z-index: -1;
    width: 100%;
}

.blockBookRecommend .owl-nav .owl-prev {
    position: absolute;
    left: -30px;
}

.blockBookRecommend .owl-nav .owl-next {
    position: absolute;
    right: -30px;
}

.blockBookRecommend .owl-nav .owl-prev:not(.disabled) svg path,
.blockBookRecommend .owl-nav .owl-next:not(.disabled) svg path {
    fill: #3468FF;
}


.blockBookRecommend .owl-theme .owl-nav [class*='owl-']:hover {
    background: transparent
}

.blockBookRecommend .owl-theme .owl-dots {
    margin-top: 15px;
}   

.blockBookRecommend .owl-theme .owl-dots .owl-dot span {
    background: #C4C4C4;
}

.blockBookRecommend .owl-theme .owl-dots .owl-dot.active span, 
.blockBookRecommend .owl-theme .owl-dots .owl-dot:hover span {
    background: #3468FF;
}

.pageCheckin .owl-theme .owl-dots .owl-dot span {
    background: #C4C4C4;
}

.pageCheckin .owl-theme .owl-dots .owl-dot.active span, 
.pageCheckin .owl-theme .owl-dots .owl-dot:hover span {
    background: #3468FF;
}

.blockBookRecommend .blockIconBook {
    position: absolute;
    width: 34px;
    height: 34px;
    line-height: 36px;
    border-radius: 50%;
    left: 0px;
    top: 15px;
    text-align: center;
}

.blockBookRecommend .blockIconBook.bookRecommend {
    background-color: #00AE71;
    color: #ffffff;
    font-weight: 600;
    font-size: 11px;
    z-index: 1;
}

.blockBookRecommend .boxDataList {
    border: 1px solid #3468FF;
    border-radius: 10px;
    padding: 10px 15px;
}

.blockBookRecommend .boxDataList .textHeaderBook {
    color: #39499F;
    height: 52px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blockBookRecommend .boxDataList .textHeaderBook a {
    color: #231F20;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
}

.blockBookRecommend .boxDataList .textHeaderBook a:hover,
.blockBookRecommend .boxDataList .textHeaderBook a:focus{
    color: #39499F;
    text-decoration: none;
}

.blockBookRecommend .boxDataList .textBook {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #777777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blockBookRecommend .boxDataList .textBook span {
    color: #231F20;
}

.blockImageCategory img {
    max-width: 100%;
    max-height: 100%;
}

.textCategory span {
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 28px;
    text-align: center;
    color: #231F20
}


.blockDataCategory {
    background-color: #DFEBF6;
    border-radius: 15px;
    display: inline-block;
    padding: 10px;
    width: 170px;
}

.blockDataCategory .textDataCategory {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    color: #231F20;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blockDataCategory .numberDataCategory {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #3468FF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dataCategory a:hover .blockDataCategory,
.dataCategory a:focus .blockDataCategory {
    background-color: #3468FF;
}

.dataCategory a:hover .blockDataCategory .textDataCategory,
.dataCategory a:focus .blockDataCategory .textDataCategory,
.dataCategory a:hover .blockDataCategory .numberDataCategory,
.dataCategory a:focus .blockDataCategory .numberDataCategory {
    color: #ffffff;
}

.blockCarouselCategory {
    padding: 0px 30px;
}

.blockCategory .owl-item {
    padding: 0px 10px 35px 10px;
}

.blockCategory .owl-item a  {
    color: #231F20;
}

.blockCategory .owl-item label {
    font-family: 'NotoSansThaiBold', 'NotoSansBold';
    position: absolute;
    bottom: 0;
    left: 10px;
    color: #3468FF;
    margin: 0;
    text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    -webkit-text-stroke: 2px #EEF7FF;
    font-size: 64px;

}

.blockCategory .owl-item a:hover,
.blockCategory .owl-item a:focus {
    text-decoration: underline;
}

.blockCategory .owl-nav {
    position: absolute;
    top: 33%;
    z-index: -1;
    width: 100%;
}

.blockCategory .owl-nav .owl-prev {
    position: absolute;
    left: -30px;
}

.blockCategory .owl-nav .owl-next {
    position: absolute;
    right: -30px;
}

.blockCategory .owl-nav .owl-prev:not(.disabled) svg path,
.blockCategory .owl-nav .owl-next:not(.disabled) svg path {
    fill: #3468FF;
}

.blockCategory .owl-theme .owl-nav [class*='owl-']:hover {
    background: transparent
}

.blockCategory .owl-theme .owl-dots .owl-dot span {
    background: #C4C4C4;
}

.blockCategory .owl-theme .owl-dots .owl-dot.active span, 
.blockCategory .owl-theme .owl-dots .owl-dot:hover span {
    background: #3468FF;
}

.blockCategory .owl-theme .owl-dots {
    margin-top: -15px
}

.blockCategory .owl-carousel .owl-stage-outer {
    text-align: center;
}

.btnShowAll {
    background-color: #FFFFFF;
    border-radius: 20px;
    color: #3468FF;
    padding: 5px 20px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
}

.btnShowAll:hover,
.btnShowAll:focus {
    text-decoration: underline;
    color: #3468FF;
}

.pageHome .blockStatistics {
    background: linear-gradient(180deg, #CDEAFD 0%, rgba(205, 234, 253, 0) 100%);
}

.pageHome .blockStatisticsTotal {
    border-radius: 20px;
    padding: 30px 30px 10px;
    position: relative;
}

.pageHome .blockStatisticsTotal.totalMember{
    background: linear-gradient(90deg, #FF512F 0%, #DD2476 100%);

}

.pageHome .blockStatisticsTotal.totalBiblio {
    background: linear-gradient(90deg, #4776E6 0%, #8E54E9 100%);
}

.pageHome .blockStatisticsTotal.totalBiblio .iconData {
    position: absolute;
    background: #FFFFFF;
    border: 4px solid #556FE7 ;
    border-radius: 50%;
    left: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 0px;
    width: 62px;
    height: 62px;
    padding: 7px 8px;
}

.pageHome .blockStatisticsTotal.totalMember .iconData {
    position: absolute;
    background: #FFFFFF;
    border: 4px solid #E8335F;
    border-radius: 50%;
    left: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 0px;
    width: 62px;
    height: 62px;
    padding: 4px 9px;
}

.pageHome .blockStatisticsTotal .textData {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.pageHome .blockStatisticsTotal .numberData {
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 32px;
    text-align: center;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pageHome .blockStatisticsData {
    background-color: #FFFFFF;
    border: 1px solid #3468FF;
    border-radius: 20px;
    padding: 15px;
}

.pageHome .blockStatisticsData .textHeaderStatistics {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: #39499F;
}

.pageHome .blockStatisticsDataImages{
    padding: 15px;
    border-radius: 20px;
    height: 370px;
    background: linear-gradient(180deg, #0035CF 0%, rgba(23, 75, 228, 0.9125) 43.75%, rgba(52, 104, 255, 0.8) 100%);
}

.pageHome .blockStatisticsDataImages .textHeaderStatistics {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: #ffffff;
}

.pageHome .blockStatisticsDataImages .blockMonthlyData label {
    color: #ffffff;
}

.pageHome .blockStatisticsDataImages img {
    max-width: 100%;
    max-height: 100%;
}

.pageHome .blockStatisticsDataImages img.statisticsImages1 {
    position: absolute;
    width: 100px;
    bottom: 0;
    left: -5px;
}

.pageHome .blockStatisticsDataImages img.statisticsImages2{
    position: absolute;
    width: 230px;
    right: 0;
    bottom: 0;
}

.pageHome .blockStatisticsDataImages img.statisticsImages3 {
    position: absolute;
    width: 100px;
    top: -10px;
    right: 0;
}

.pageHome .blockStatisticsDataImages img.statisticsImages4 {
    position: absolute;
    width: 100px;
    top: 25px;
    left: 35px;
    transform: rotate(345deg);
}
/*PAGE HOME*/

/*PAGE SEARCH*/
.textResultsSearch {
    text-align: center;
    color: #0035CF;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
}

.blockChangeDisplay, .blockOrder {
    display: inline-block;
}

.textDisplay, .textOrder, .textFilter {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #1E293B;
}

.textFilter {
    margin-top: 8px;
}

.btnChangeDisplay {
    background-color: #F0F2F6;
    border-radius: 5px;
    border-color: transparent;
}


.btnChangeDisplay.active,
.btnChangeDisplay:hover, 
.btnChangeDisplay:focus {
    background-color: #F4951E;
}

.btnChangeDisplay.active svg path, 
.btnChangeDisplay:hover svg path, 
.btnChangeDisplay:focus svg path {
    fill: #ffffff;
}

.blockOrder select.form-control {
    display: inline-block;
    width: auto;
    padding: 0.375rem 1.75rem 0.375rem 1rem;
    color: #868686;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7071 11.7071C16.0976 11.3166 16.0976 10.6834 15.7071 10.2929C15.3166 9.90237 14.6834 9.90237 14.2929 10.2929L15.7071 11.7071ZM12 14L11.2929 14.7071C11.4804 14.8946 11.7348 15 12 15C12.2652 15 12.5196 14.8946 12.7071 14.7071L12 14ZM9.70711 10.2929C9.31658 9.90237 8.68342 9.90237 8.29289 10.2929C7.90237 10.6834 7.90237 11.3166 8.29289 11.7071L9.70711 10.2929ZM14.2929 10.2929L11.2929 13.2929L12.7071 14.7071L15.7071 11.7071L14.2929 10.2929ZM12.7071 13.2929L9.70711 10.2929L8.29289 11.7071L11.2929 14.7071L12.7071 13.2929Z' fill='%231E293B'/%3E%3C/svg%3E") no-repeat right .2rem center;
    background-size: 24px;
    border: 1px solid transparent;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 14px;
    position: relative;
    background-color: #F6F6F8;
}

.blockFilterData {
    background-color: #EEF7FF;
    border-radius: 20px;
    padding: 10px 20px;
    margin-bottom: 20px;
}

.blockFilterData .textHeaderFilter {
    color: #231F20;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 32px;
    position: relative;
}

.blockFilterData .textHeaderFilter.borderBottom {
    border-bottom: 1px solid #3468FF;
}

.blockFilterData .textHeaderFilter button {
    position: absolute;
    right: 0;
    background-color: transparent;
    border: none;
}

.dataFilter {
    display: block;
    margin-top: 5px;
    padding-top: 10px;
    transition: visibility 0s, opacity 0.5s linear;
}

.dataFilter.hideBlock {
    display: none;
}


.dataFilter .filterCheckbox {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 14px;
    padding: 5px 5px 5px 22px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.dataFilter .filterCheckbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.dataFilter .afterFilterCheckbox {
    position: absolute;
    top: 11px;
    left: 0px;
    height: 9px;
    width: 9px;
    background-color: #C4C4C4;
    border-radius: 50%;
}

.dataFilter .textFilterCheckbox {
    color: #231F20;
    word-break: break-word;
}

.dataFilter .filterCheckbox:hover input ~ .textFilterCheckbox{
    /*background-color: rgb(171 194 218 / 29%);*/
    text-decoration: underline;
}

.dataFilter .filterCheckbox:hover input ~ .afterFilterCheckbox {
    background-color: #C4C4C4;
}

.dataFilter .filterCheckbox:hover input ~ .textFilterCheckbox {
    color: #231F20;
}

.dataFilter .filterCheckbox input:checked ~ .afterFilterCheckbox {
    background-color: #0035CF;
}

.dataFilter .filterCheckbox input:checked ~ .textFilterCheckbox {
    color: #0035CF;
}

.dataFilter .afterfilterCheckbox:after {
    content: "";
    position: absolute;
    display: none;
}

.dataFilter .filterCheckbox input:checked ~ .afterFilterCheckbox:after {
    display: block;
}

.dataFilter .blockMoreData {
    text-align: center;
}

.dataFilter .blockMoreData .textShowMore {
    cursor: pointer;
    color: #9D9D9D;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
}

.blockFilterButton {
    /*position: relative;*/
    text-align: center;
    position: sticky;
    position: -webkit-sticky;
    transition: background-color .3s;
    z-index: 100;
    bottom: 10px;
    padding: 10px;
    border-radius: 5px;
}

.blockFilterButton.sticky-bg {
    background-color: rgb(55 80 162 / 70%)
}

.blockFilterButton .btnFilter {
    background-color: #3468FF;
    border-color: transparent;
    border-radius: 20px;
    padding: 3px 20px;
    color: #ffffff;
}

.blockFilterButton .btnFilter:hover,
.blockFilterButton .btnFilter:focus {
    box-shadow: 0 0 0 0.2rem rgb(52 104 255 / 25%);
}

.blockFilterButton .btnExcept {
    background-color: #EF4152;
    border-color: transparent;
    border-radius: 20px;
    padding: 3px 20px;
    color: #ffffff;
}

.blockFilterButton .btnExcept:hover,
.blockFilterButton .btnExcept:focus {
    box-shadow: 0 0 0 0.2rem rgb(239 67 84 / 25%);
}

.bookList .boxDataList {
    border: 1px solid #3468FF;
    border-radius: 10px;
    padding: 15px 25px;
}

.bookList .boxDataList .textHeaderBook {
    color: #39499F;
    height: 52px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bookList .boxDataList .textHeaderBook a {
    color: #231F20;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
}

.bookList .boxDataList .textHeaderBook a:hover,
.bookList .boxDataList .textHeaderBook a:focus{
    color: #39499F;
    text-decoration: none;
}

.bookList .boxDataList .textBook {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #777777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bookList .boxDataList .textBook span {
    color: #231F20;
}

.bookList .boxDataListImg {
    position: relative;
}

.bookList .boxDataListImg .blockIconBook {
    position: absolute;
    width: 34px;
    height: 34px;
    line-height: 36px;
    border-radius: 50%;
    left: -20px;
    top: 15px;
}

.bookList .boxDataListImg .blockIconBook.bookNew {
    background-color: #EF4152;
    color: #ffffff;
    font-weight: 600;
    font-size: 11px;
}


.bookList .boxDataListImg .blockIconBook.bookRecommend {
    background-color: #00AE71;
    color: #ffffff;
    font-weight: 600;
    font-size: 11px;
}


.bookList .boxDataListImg img {
    width: 100%;
    max-height: 100%;
}

.title-book-list{
    font-family: 'NotoSansThaiRegular', 'NotoSansRegular';
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 21px;
    right: 0;
    top: 15px;
    text-align: center;
    /*border-top: 1px solid #231F20;*/
    /*border-bottom: 1px solid #231F20;*/
    width: 85%;
    margin: 0 auto;
    padding: 5px 3px;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 21px;
    color: #231F20;
    background: rgb(255 255 255 / 80%);
    height: 70px;
}

.bookBlock .boxDataBlockImg .textHeaderBook {
    color: #39499F;
    height: 47px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 10px;
}

.bookBlock .boxDataBlockImg .textHeaderBook {
    color: #231F20;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
}

.bookBlock .boxDataBlockImg a:hover,
.bookBlock .boxDataBlockImg a:focus {
    text-decoration: none;
    color: #39499F;
}

.bookBlock .boxDataBlockImg a:hover .textHeaderBook,
.bookBlock .boxDataBlockImg a:focus .textHeaderBook{
    color: #39499F;
}

.bookBlock .boxDataBlockImg .textBook {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #777777;
}

.bookBlock .boxDataBlockImg .textBook span {
    color: #231F20;
}

.bookBlock .boxDataBlockImg {
    position: relative;
}

.bookBlock .boxDataBlockImg .blockIconBook {
    position: absolute;
    width: 34px;
    height: 34px;
    line-height: 36px;
    border-radius: 50%;
    left: -20px;
    top: 15px;
}

.bookBlock .boxDataBlockImg .blockIconBook.bookNew {
    background-color: #EF4152;
    color: #ffffff;
    font-weight: 600;
    font-size: 11px;
}


.bookBlock .boxDataBlockImg .blockIconBook.bookRecommend {
    background-color: #00AE71;
    color: #ffffff;
    font-weight: 600;
    font-size: 11px;
}


.bookBlock .boxDataBlockImg img {
    width: 100%;
    height: 100%;
}
/*PAGE SEARCH*/

/*PAGE BOOK DATA*/
.blockCounter {
    display: inline-block;
    background-color: #DFEBF6;
    border-radius: 5px;
    padding: 5px 20px;
    margin-right: 5px
}

.blockCounter span {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #0A65FF;
}

.textHeaderBookCopy {
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: #0035CF;
}

.blockListBookCopy {
    border: 1px solid #3468FF;
    border-radius: 10px;
    padding: 20px;
}

.pageBookData .boxDataList {
    border: 1px solid #3468FF;
    border-radius: 10px;
    padding: 15px 25px;
}

.pageBookData .boxDataList img {
    max-width: 100%;
    max-height: 100%;
}

.pageBookData .boxDataList .textBook {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 32px;
    color: #777777;
    word-break: break-word;
}

.pageBookData .boxDataList .textBook span {
    color: #231F20;
}

.pageBookData .boxDataListImg {
    position: relative;
}

.pageBookData .boxDataListImg .blockIconBook {
    position: absolute;
    width: 42px;
    height: 42px;
    line-height: 42px;
    border-radius: 50%;
    left: -20px;
    top: 15px;
}

.pageBookData .boxDataListImg .blockIconBook.bookNew {
    background-color: #EF4152;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
}


.pageBookData .boxDataListImg .blockIconBook.bookRecommend {
    background-color: #00AE71;
    color: #ffffff;
    font-weight: 600;
    font-size: 11px;
}


.pageBookData .boxDataListImg img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
}

.btn-bibliographic {
    border-color: transparent;
    background-color: #3468FF;
    border-radius: 20px;
    padding: 2px 23px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
}

.btn-bibliographic:hover, 
.btn-bibliographic:focus {
    box-shadow: 0 0 0 0.2rem rgb(52 104 255 / 25%);
}

.btn-marc {
    border-color: transparent;
    background-color: #FAA528;
    border-radius: 20px;
    padding: 2px 23px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
}

.btn-marc:hover, 
.btn-marc:focus {
    box-shadow: 0 0 0 0.2rem rgb(250 165 40 / 25%);
}

.blockTabBookData .nav-tabs {
    border: none;
}

.blockTabBookData .nav-tabs .nav-link {
    color: #231F20;
    padding: 10px 50px;
}

.blockTabBookData .nav-tabs .nav-link:focus:not(.active), 
.blockTabBookData .nav-tabs .nav-link:hover:not(.active) {
    color: #231F20;
    text-decoration: underline;
    border-color: transparent;
}

.blockTabBookData .nav-tabs .nav-item.show .nav-link, 
.blockTabBookData .nav-tabs .nav-link.active {
    color: #231F20;
    border: 1px solid #3468FF;
    border-radius: 10px 10px 0px 0px;
}

.blockTabBookData .tab-content {
    padding: 20px;
    border: 1px solid #3468FF;
    border-radius: 0px 10px 10px 10px;
}

.btn-reserve {
    border-color: transparent;
    background-color: #3468FF;
    border-radius: 20px;
    padding: 2px 20px;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #ffffff;
}

.btn-reserve.disabled {
    color: #777777;
    background-color: #E1E1E1;
    cursor: default;
}

.btn-reserve:hover:not(.disabled), 
.btn-reserve:focus:not(.disabled) {
    box-shadow: 0 0 0 0.2rem rgb(52 104 255 / 25%);
}
                                
.blockInterested {
    margin-top: 15px;
    padding: 10px 30px 0px;
}

.textInterested {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #0035CF;
    padding-left: 20px;
}

.blockInterested .owl-item {
    padding: 20px;
}

.blockInterested .owl-item a  {
    color: #231F20;
}

.blockInterested .owl-item label {
    height: 48px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #231F20;
    margin: 5px 5px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
    text-align: center;
    cursor: pointer;
}

.blockInterested .owl-item a:hover,
.blockInterested .owl-item a:focus {
    text-decoration: underline;
}

.blockInterested .owl-nav {
    position: absolute;
    top: 39%;
    z-index: -1;
    width: 100%;
}

.blockInterested .owl-nav .owl-prev {
    position: absolute;
    left: -30px;
}

.blockInterested .owl-nav .owl-next {
    position: absolute;
    right: -30px;
}

.blockInterested .owl-nav .owl-prev:not(.disabled) svg path,
.blockInterested .owl-nav .owl-next:not(.disabled) svg path {
    fill: #3468FF;
}
/*PAGE BOOK DATA*/

/*PAGE NEWS*/
.blockDataNews {
    background-color: #ffffff;
    border-radius: 20px;
}

.blockDataNews .imgNews img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 20px 20px 0px 0px;
}

.blockDataNews .dataNews {
    padding: 10px 20px 5px;
}

.blockDataNews .dataNews .textHeaderNews {
    height: 56px;
    max-height: 56px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #231F20;
}

.blockDataNews .dataNews .textHeaderNews a {
    color: #231F20;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
}

.blockDataNews .dataNews .textHeaderNews a:hover,
.blockDataNews .dataNews .textHeaderNews a:focus {
    color: #39499F;
    text-decoration: none;
}

.blockDataNews .dataNews .textNews {
    margin-top: 5px;
    color: #777777;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 74px;
    max-height: 74px;
}

.blockDataNews .dataNews .blockMore {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 38px;
    color: #0035CF;
    margin-top: 5px;
}

.blockDataNews .dataNews .blockMore a {
    color: #0035CF;
    float: right;
}
/*PAGE NEWS*/

/*PAGE NEWS DETAIL */

.blockNavigation {
    display: inline-block;
    background-color: #F0F2F6;
    border-radius: 15px;
    padding: 7px 20px;
}

.blockNavigation a {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    color: #252525;
    word-break: break-word;
}

.blockNavigation a.active {
    color: #0035CF;
}

.blockNavigation span {
    margin-left: 5px;
    margin-right: 5px;
}

.blockDateNewsDetail {
    display: inline;
    background-color: #DFEBF6;
    border-radius: 5px;
    padding: 5px 20px;
}

.blockDateNewsDetail span {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #0A65FF;
    margin-left: 5px;
}

.blockCounterNewsDetail {
    display: inline-block;
    background-color: #DFEBF6;
    border-radius: 5px;
    padding: 5px 20px;
    margin-right: 5px
}

.blockCounterNewsDetail span {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #0A65FF;
}

.blockSendMail,
.blockFacebook,
.blockTwitter {
    display: block;
    margin-left: 10px;
    float: right;
}

.blockSendMail a {
    width: 32px;
    height: 32px;
    line-height: 32px;
    background-color: #EA3629;
    border-radius: 50%;
    display: block;
    padding: 0 8px;
}

.blockSendMail a:hover,
.blockSendMail a:focus {
    box-shadow: 0 0 0 0.2rem rgb(234 54 41 / 25%);
}

.blockFacebook a {
    width: 32px;
    height: 32px;
    line-height: 32px;
    background-color: #3281F4;
    border-radius: 50%;
    display: block;
    padding: 1px 10px;
    color: #ffffff;
    font-size: 14px;
}

.blockFacebook a:hover,
.blockFacebook a:focus {
    box-shadow: 0 0 0 0.2rem rgb(50 129 244 / 25%);
}

.blockTwitter a {
    width: 32px;
    height: 32px;
    line-height: 32px;
    background-color: #5ACBFA;
    border-radius: 50%;
    display: block;
    padding: 1px 10px;
    color: #ffffff;
    font-size: 14px;
}

.blockTwitter a:hover,
.blockTwitter a:focus {
    box-shadow: 0 0 0 0.2rem rgb(90 203 250 / 25%);
}
 
.blockDataNewsDetailImg img {
    max-width: 100%;
    max-height: 100%;
}

.blockDataNewsDetail {
    border: 1px solid #3468FF;
    border-radius: 10px;
    padding: 20px 30px;
}

.blockDataNewsDetail img, 
.blockDataNewsDetail iframe,
.blockDataNewsDetail video,
.blockDataNewsDetail audio {
    max-width: 100%;
    max-height: 100%;
}

.blockSocialMediaNews {
    display: inline;
}
/*PAGE NEWS DETAIL */

/*PAGE LOGIN*/
.blockLogoSystemLogin {
    text-align: center;
}

.blockLogoSystemLogin img {
    width: 200px;
    max-width: 100%;
    max-height: 100%;    
}

.textHeaderLogin {
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 34px;
    letter-spacing: 0.05em;
    color: #1E293B;
}

.textHeaderLogin .textLibraryName {
    font-size: 18px;
}

.textLebelLogin {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: #1E293B;
    margin-bottom: 10px;
}

.blockImageLogin {
    background-image: url('../images/login_koukoo.png');
    max-height: 100%;
    background-position: center;
    height: 450px;

    /* min-height: 500px; */
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.pageLogin .form-control {
    background-color: #FFFFFF;
    border: 1px solid #3468FF;
    border-radius: 50px;
    padding: 9px 20px;
    height: 45px;
}

.pageLogin .form-row .input-group.custom .form-control {
    border: 1px solid #0A65FF;
    border-right: none;
    background-color: #ffffff;
    border-radius: 50px 0 0 50px;
    color: #7E8299;
}

.pageLogin .form-row .input-group.custom .input-group-text {
    border: 1px solid #0A65FF;
    border-left: none;
    background-color: #ffffff;
    border-radius: 0 50px 50px 0;
    padding-right: 20px;
}

.pageLogin .form-row .input-group.custom .input-group-text em {
    color: #7E8299;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-animation: slideInRight 500ms ease-in-out;
    animation: slideInRight 500ms ease-in-out;
}

.pageLogin .form-control-feedback {
    font-size: 16px;
    color: #dc3545;
}

.pageLogin #changeInputPassword {
    cursor: pointer;
}

.pageLogin .has-danger #changeInputPassword {
    cursor: default;
}

.textForgotPassword {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    color: #3468FF;
}

.textForgotPassword:hover,
.textForgotPassword:focus {
    color: #7E8299;
    text-decoration: none;
}

.btnLogin {
    background: #3468FF;
    border-radius: 50px;
    width: 100%;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 38px;
    color: #ffffff;
}

.btnLogin:hover,
.btnLogin:focus {
    background-color: #3468FF;
    box-shadow: 0 0 0 0.2rem rgb(10 101 255 / 25%);
}

.borderBottomTabLogin {
    border-bottom: 1px solid #3468FF;
    box-shadow: 0px 2px 5px rgb(0 0 0 / 25%);
    margin-top: -2px;
}

.tabSbsLogin > a.nav-link {
    border: none;
    background-color: transparent !important;
    color: #868686;
    font-size: 16px;
    padding-bottom: 0px;
}

.tabSbsLogin > a.nav-link.active > .borderBottomATab  {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-animation: fadeInLeft 300ms ease-in-out;
    animation: fadeInLeft 300ms ease-in-out;
}

.tabSbsLogin > a.nav-link > svg {
    margin-top: -5px;
}

.tabSbsLogin > a.nav-link > span {
    margin-left: 5px;
}

.tabSbsLogin > a.nav-link.active > span {
    color: #3468FF;
}

.tabSbsLogin > a.nav-link.active > svg > path {
    fill: #3468FF;
}

.tabSbsLogin > a.nav-link > .borderBottomATab {
    opacity: 0;
    border: 2px solid #3468ff;
    margin-top: 7px;
    border-radius: 10px;
}

.tabSbsLogin > a.nav-link.active > .borderBottomATab {
    opacity: 1;
}
/*PAGE LOGIN*/

/*PAGE NAVAR HISTORY*/
.blockNavbarHistory {
    text-align: center;
    padding-bottom: 35px;
}

.blockNavbarHistory a {
    display: inline-block;
    background-color: #DFEBF6;
    border-radius: 15px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #3468FF;
    padding: 7px 30px;
    position: relative;
    margin-top: 0.5rem
}

.blockNavbarHistory a:first-child {
    margin-right: 3rem;
}

.blockNavbarHistory a:last-child {
    margin-left: 3rem;
}

.blockNavbarHistory a.active {
    color: #ffffff;
    background-color: #3468FF;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
}

.blockNavbarHistory a.active:hover, 
.blockNavbarHistory a.active:focus {
    text-decoration: none;
}

.blockNavbarHistory a.active:after {
    content: "";
    position: absolute;
    bottom: -40px;
    border: 10px solid transparent;
    border-top-color: #3468FF;
    left: 50%;
    transform: translate(-50%, -50%);
}

.blockDataHistory {
    border: 1px solid #3468FF;
    border-radius: 10px;
    padding: 20px 30px;
}
/*PAGE NAVAR HISTORY*/

/*PAGE HISTORY*/
.blockSearchHistory {
    display: inline-block;
}

.textLabelSearchHistory {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #231F20;
}

.selectSearchHistory.form-control {
    display: inline-block;
    width: auto;
    padding: 0.375rem 1.75rem 0.375rem 1rem;
    color: #868686;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7071 11.7071C16.0976 11.3166 16.0976 10.6834 15.7071 10.2929C15.3166 9.90237 14.6834 9.90237 14.2929 10.2929L15.7071 11.7071ZM12 14L11.2929 14.7071C11.4804 14.8946 11.7348 15 12 15C12.2652 15 12.5196 14.8946 12.7071 14.7071L12 14ZM9.70711 10.2929C9.31658 9.90237 8.68342 9.90237 8.29289 10.2929C7.90237 10.6834 7.90237 11.3166 8.29289 11.7071L9.70711 10.2929ZM14.2929 10.2929L11.2929 13.2929L12.7071 14.7071L15.7071 11.7071L14.2929 10.2929ZM12.7071 13.2929L9.70711 10.2929L8.29289 11.7071L11.2929 14.7071L12.7071 13.2929Z' fill='%231E293B'/%3E%3C/svg%3E") no-repeat right .2rem center;
    background-size: 24px;
    border: 1px solid transparent;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
    position: relative;
    background-color: #F0F2F6;
}

.blockPrintHistory {
    display: inline-block;
    float: right;
}

.blockPrintHistory a {
    width: 36px;
    height: 36px;
    line-height: 36px;
    background-color: #0a65ff26;
    display: block;
    border-radius: 5px;
}

.blockPrintHistory a:hover,
.blockPrintHistory a:focus {
    box-shadow: 0 0 0 0.2rem #dfebf691;
}
/*PAGE HISTORY*/

/*PAGE STATISTICS*/
.pageStatistics .blockMonthlyData label {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #231F20;
}

.pageStatistics .blockMonthlyData select.form-control {
    display: inline-block;
    width: auto;
    padding: 0.375rem 1.75rem 0.375rem 1rem;
    color: #868686;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7071 11.7071C16.0976 11.3166 16.0976 10.6834 15.7071 10.2929C15.3166 9.90237 14.6834 9.90237 14.2929 10.2929L15.7071 11.7071ZM12 14L11.2929 14.7071C11.4804 14.8946 11.7348 15 12 15C12.2652 15 12.5196 14.8946 12.7071 14.7071L12 14ZM9.70711 10.2929C9.31658 9.90237 8.68342 9.90237 8.29289 10.2929C7.90237 10.6834 7.90237 11.3166 8.29289 11.7071L9.70711 10.2929ZM14.2929 10.2929L11.2929 13.2929L12.7071 14.7071L15.7071 11.7071L14.2929 10.2929ZM12.7071 13.2929L9.70711 10.2929L8.29289 11.7071L11.2929 14.7071L12.7071 13.2929Z' fill='%231E293B'/%3E%3C/svg%3E") no-repeat right .2rem center;
    background-size: 24px;
    border: 1px solid transparent;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
    position: relative;
    background-color: #F0F2F6;
}

.pageStatistics .blockStatistics {
    /*background: linear-gradient(180deg, #CDEAFD 0%, rgba(205, 234, 253, 0) 100%);*/
}

.pageStatistics .blockStatisticsTotal {
    border-radius: 20px;
    padding: 30px 30px 10px;
    position: relative;
}

.pageStatistics .blockStatisticsTotal.totalMember{
    background: linear-gradient(90deg, #FF512F 0%, #DD2476 100%);

}

.pageStatistics .blockStatisticsTotal.totalBiblio {
    background: linear-gradient(90deg, #4776E6 0%, #8E54E9 100%);
}

.pageStatistics .blockStatisticsTotal.totalAuthor {
    background: linear-gradient(90deg, #11998E 0%, #38EF7D 100%);
}


.pageStatistics .blockStatisticsTotal.totalBiblio .iconData {
    position: absolute;
    background: #FFFFFF;
    border: 4px solid #556FE7 ;
    border-radius: 50%;
    left: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 0px;
    width: 62px;
    height: 62px;
    padding: 7px 8px;
}

.pageStatistics .blockStatisticsTotal.totalMember .iconData {
    position: absolute;
    background: #FFFFFF;
    border: 4px solid #E8335F;
    border-radius: 50%;
    left: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 0px;
    width: 62px;
    height: 62px;
    padding: 4px 9px;
}

.pageStatistics .blockStatisticsTotal.totalAuthor .iconData {
    position: absolute;
    background: #FFFFFF;
    border: 4px solid #27C985;
    border-radius: 50%;
    left: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 0px;
    width: 62px;
    height: 62px;
    padding: 4px 9px;
}

.pageStatistics .blockStatisticsTotal .textData {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.pageStatistics .blockStatisticsTotal .numberData {
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 32px;
    text-align: center;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pageStatistics .blockStatisticsData {
    background-color: #FFFFFF;
    border: 1px solid #3468FF;
    border-radius: 20px;
    padding: 15px;
}

.pageStatistics .blockStatisticsData .textHeaderStatistics {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    color: #39499F;
}

.pageStatistics #graphDataResource .numberData,
.pageStatistics #graphDataResource .textData{
    font-family: 'NotoSansThaiRegular', 'NotoSansRegular';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    color: #231F20
}
/*PAGE STATISTICS*/

/*FOOTER*/
footer {
    position: relative;
    margin-top: auto;
}

.blockFooter {
    padding: 20px 0px 10px;
}

.footerBlock {
    border-radius: 20px;
    background-color: #3750A2;
    padding: 10px 30px 20px;
}

.blockRights {
    padding: 3px 0px 13px;
}

.textHeaderFooter {
    font-family: 'NotoSansThaiRegular', 'NotoSansRegular';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #FFFFFF;
    margin-bottom: 10px;
    margin-top: 10px;
}

.blockTextFooter {
    position: relative;
}

.iconFooterInText {
    position: absolute;
}

.t2px {
    top: 2px;
}

.textFooter {
    font-family: 'NotoSansThaiRegular', 'NotoSansRegular';
    padding-left: 35px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    color: #ffffff;
    word-break: break-word;
}

.textRights {
    font-family: 'NotoSansThaiRegular', 'NotoSansRegular';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #231F20;
}

.blockSocialMediaMinTwo {
    text-align: left !important;
}

.blockSocialMediaMinTwo .aCircle p {
    padding-left: 10px !important;
}

.blockSocialMedia {
    text-align: center;
    margin-top: 5px;
}

.blockSocialMedia .aCircle p {
    width: 36px;
    height: 36px;
    line-height: 36px;
    background-color: #EEF7FF;
    border: 1px solid transparent;
    box-sizing: border-box;
    box-shadow: 4px 4px 10px #3750a2;
    border-radius: 50%;
    display: inline-block;
}

.blockSocialMedia .aCircle:hover, .blockSocialMedia .aCircle:focus {
    text-decoration: none;
}

.blockSocialMedia .aCircle:hover p, .blockSocialMedia .aCircle:focus p {
    border: 1px solid #3750a2;
    box-sizing: border-box;
    /*box-shadow: 4px 4px 10px rgba(18, 124, 249, 0.25);*/
}

.blockSocialMedia .aCircle p em {
    color: #3750A2;
}
/*FOOTER*/

/*ALERT NOT FOUND*/
.alert-not-found {
    background-color: #ffffff;
    border-color: #3468ff;
    color: #3468ff;
}
/*ALERT NOT FOUND*/

/*BLOCK PAGINATION*/
.blockPagination .prevFirst, 
.blockPagination .prev,
.blockPagination .next,
.blockPagination .nextLast{
    background: transparent;
    border: none;
    color: #0035CF;
    font-size: 16px;
}

.blockPagination .prevFirst:hover, 
.blockPagination .prevFirst:focus,
.blockPagination .prev:hover,
.blockPagination .prev:focus,
.blockPagination .next:hover,
.blockPagination .next:focus,
.blockPagination .nextLast:hover,
.blockPagination .nextLast:focus{
    color: #231f2033;
}

.inputPagination {
    max-width: 80px;
    width: 50px;
    background-color: #0035CF;
    color: #ffffff;
    border-radius: 5px;
    border-color: transparent;
    height: 30px;
    text-align: center;
    margin-left: 5px;
}

.inputPagination:hover, .inputPagination:focus, .inputPagination:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgb(49 130 247 / 25%);
}

.spacePagination {
    border-left: 1px solid #BBBDC9;
    margin-right: 10px;
    margin-left: 5px;
}

.totalPagination {
    max-width: 80px;
    width: 50px;
    background-color: #F0F2F6;
    color: #231F20;
    border-radius: 5px;
    border-color: transparent;
    height: 30px;
    text-align: center;
    margin-right: 5px;
}

.totalPagination:hover .totalPagination:focus .totalPagination:focus-visible {
    box-shadow: 0 0 0 0.2rem rgb(240 242 246 / 25%);
}
/*BLOCK PAGINATION*/

/*TABLE SBS*/
.tableSbs {
    width: 99%;
    border-collapse: collapse;
    /*border-radius: 20px;*/
    /*overflow: hidden;*/
    margin: 0 auto;
}

.tableSbs > thead > tr.useThemeSbs {
    background-color: #F0F2F6;
    /*border-radius: 10px 10px 0px 0px;*/
}

.tableSbs > thead > tr > th,
.tableSbs > tbody > tr > th,
.tableSbs > thead > tr > td,
.tableSbs > tbody > tr > td
{
    padding: 10px 5px;
    border: none;
    /*padding: 15px;*/
    color: #231F20;
    vertical-align: middle;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
}

.tableSbs > thead > tr > th,
.tableSbs > tbody > tr > th {
    font-weight: bold;
    font-size: 16px;
    line-height: 26px;
}

.tableSbs > tbody > tr > th,
.tableSbs > tbody > tr > td {
    border-top: 1px solid #DFEBF6;
}

.tableSbs thead tr:first-child:not(.footerTable) th:first-child {
    border-radius: 10px 0px 0px 0px;
}

.tableSbs thead tr:first-child:not(.footerTable) th:last-child {
    border-radius: 0px 10px 0px 0px;
}

.tableSbs tbody tr:last-child:not(.footerTable) td {
    border-bottom: 1px solid #DFEBF6;
}

.tableSbs tbody tr:not(.footerTable) td:first-child {
    border-left: 1px solid #DFEBF6;
}

.tableSbs tbody tr:not(.footerTable) td:last-child {
    border-right: 1px solid #DFEBF6;
}

.tableSbs tr.footerTable {
    background-color: #DFEBF6;
}

.tableSbs tr.footerTable td {
    border: none;
    padding: 1px 0px 0px
}

.tableSbs tbody tr.footerTable td:first-child {
    border-radius: 0px 0px 0px 10px;
}

.tableSbs tbody tr.footerTable td:last-child {
    border-radius: 0px 0px 10px 0px;
}

td.ceil-wrap {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*TABLE SBS*/

/*CHECK BOX FILTER */
.checkbox-filter {
    display: block;
    position: relative;
    width: 74px;
    border-radius: 100px;
    height: 36px;
    float: right;
    margin-top: -3px;
    margin-left: 15px;
}

.checkbox-filter input[type="checkbox"] {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.checkbox-filter .checkbox-true,
.checkbox-filter .checkbox-true span {
    z-index: 2;
}

.checkbox-filter .checkbox-false {
    width: 100%;
    background-color: #fcebeb; 
    transition: 0.3s ease all;
    z-index: 1;
    border-radius: 100px;
}

.checkbox-filter .checkbox-true, 
.checkbox-filter .checkbox-false,
.checkbox-filter .checkbox-true span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.checkbox-filter .checkbox-true, 
.checkbox-filter .checkbox-false,
.checkbox-filter .checkbox-true span {
    transition: 0.3s ease all;
}

.checkbox-filter input[type="checkbox"]:checked ~ .checkbox-false {
    background-color: #ebf7fc;
}

.checkbox-filter .checkbox-true span {
    border-radius: 100px;
}


.checkbox-filter .checkbox-true span {
    position: absolute;
    top: 4px;
    left: 42px;
    width: 28px;
    height: 28px;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 10px 5px;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

.checkbox-filter .checkbox-true span.data-false {
    background-color: #f44336;
    display: block;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-animation: slideInLeft 300ms ease-in-out;
    animation: slideInLeft 300ms ease-in-out;
}

.checkbox-true span.data-true {
    display: none;
    left: 42px;
}

.checkbox-filter input[type="checkbox"]:checked + .checkbox-true span.data-true {
    display: block;
    left: 4px;
    background-color: #03a9f4;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-animation: slideInRight 300ms ease-in-out;
    animation: slideInRight 300ms ease-in-out;
}

.checkbox-filter input[type="checkbox"]:checked + .checkbox-true span.data-false {
    display: none;
    left: 28px;
}
/*CHECK BOX FILTER */

/*BTN SBS */
.btn em{
    margin-right: 5px;
}

.btn-sbs-primary, .btn-sbs-warning, 
.btn-sbs-danger, .btn-sbs-success, 
.btn-sbs-default, .btn-sbs-back {
    border-radius: 5px;
    font-size: 14px;
    padding: 6px 18px;
}

.btn-sbs-primary {
    background-color: #0A65FF;
    color: #ffffff;
    border-color: transparent;
}

.btn-sbs-primary:hover, .btn-sbs-primary:focus {
    color: #0A65FF;
    background-color: #ffffff;
    border-color: #0A65FF;
    box-shadow: 0 0 0 0.2rem rgb(10 101 255 / 25%);

}

.btn-sbs-primary-svg:hover svg path, .btn-sbs-primary-svg:focus svg path{
    stroke: #0A65FF;
}

.btn-sbs-success {
    background-color: #51b273;
    color: #ffffff;
    border-color: transparent;
}

.btn-sbs-success:hover, .btn-sbs-success:focus {
    color: #51b273;
    background-color: #ffffff;
    border-color: #51b273;
    box-shadow: 0 0 0 0.2rem rgb(81 178 115 / 25%);

}

.btn-sbs-success-svg:hover svg path, .btn-sbs-success-svg:focus svg path{
    stroke: #51b273;
}

.btn-sbs-warning {
    background-color: #f5c44d;
    color: #ffffff;
    border-color: transparent;
}

.btn-sbs-warning:hover, .btn-sbs-warning:focus {
    color: #f5c44d;
    background-color: #ffffff;
    border-color: #f5c44d;
    box-shadow: 0 0 0 0.2rem rgb(245 196 77 / 25%);

}

.btn-sbs-warning-svg:hover svg path, .btn-sbs-warning-svg:focus svg path{
    stroke: #f5c44d;
}

.btn-sbs-danger {
    background-color: #ed535f;
    color: #ffffff;
    border-color: transparent;
}

.btn-sbs-danger:hover, .btn-sbs-danger:focus {
    color: #ed535f;
    background-color: #ffffff;
    border-color: #ed535f;
    box-shadow: 0 0 0 0.2rem rgb(237 83 95 / 25%);

}

.btn-sbs-danger-svg:hover svg path, .btn-sbs-danger-svg:focus svg path{
    stroke: #ed535f;
}

.btn-sbs-default {
    background-color: #d7d8db;
    color: #000000;
    border-color: transparent;
}

.btn-sbs-default:hover, .btn-sbs-default:focus {
    color: #000000;
    background-color: #ffffff;
    border-color: #d7d8db;
    box-shadow: 0 0 0 0.2rem rgb(215 216 219 / 25%);
}

.btn-sbs-default-svg:hover svg path, .btn-sbs-default-svg:focus svg path{
    stroke: #ed535f;
}

.btn-sbs-back {
    background-color: #d7d8db;
    color: #131313;
    border-color: transparent;
}

.btn-sbs-back:hover, .btn-sbs-back:focus {
    color: #131313;
    background-color: #ffffff;
    border-color: #131313;
    box-shadow: 0 0 0 0.2rem rgb(19 19 19 / 25%);
}

.btn-sbs-back-svg:hover svg path, .btn-sbs-back-svg:focus svg path{
    stroke: #131313;
}
/*BTN SBS */

/* ON TOP */
.go-to-top {
    display: none;
}

.go-to-top .icon-bg {
    background-color: #231F20;
    box-shadow: 0px 0px 9px 0px rgb(35 31 32 / 72%);
    border-radius: 5px;
    height: 45px;
    position: absolute;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
    width: 45px;
    cursor: pointer;
}

.go-to-top {
    background-color: transparent;
    bottom: 40px;
    height: 45px;
    margin: 0;
    position: fixed;
    right: 5%;
    width: 45px;
    z-index: 10000;
}

.go-to-top .back-to-top-text {
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    left: 50%;
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0px);
    -moz-transform: translate3d(-50%, -50%, 0px);
    -ms-transform: translate3d(-50%, -50%, 0px);
    -o-transform: translate3d(-50%, -50%, 0px);
    transform: translate3d(-50%, -50%, 0px);
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
    width: 100%;
    z-index: 2;
    cursor: pointer;
}

.go-to-top .back-to-top-icon {
    color: #fff;
    font-size: 24px;
    left: 50%;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    top: 80%;
    -webkit-transform: translate3d(-50%, -50%, 0px);
    -moz-transform: translate3d(-50%, -50%, 0px);
    -ms-transform: translate3d(-50%, -50%, 0px);
    -o-transform: translate3d(-50%, -50%, 0px);
    transform: translate3d(-50%, -50%, 0px);
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
    z-index: 2;
    cursor: pointer;
}

.go-to-top:hover .back-to-top-text {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
    top: 40%;
}

.go-to-top:hover .back-to-top-icon {
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    top: 50%;
}

/* ON TOP */

/*BADGE*/
.badge-sbs {
    border-radius: 20px;
    padding: 2px 13px;
}

.badge-sbs-primary {
    background-color: #3182F7;
    color: #ffffff;
}

.badge-sbs-success {
    background-color: #51b273;
    color: #ffffff;
}

.badge-sbs-warning {
    background-color: #f5c44d;
    color: #ffffff;
}

.badge-sbs-danger {
    background-color: #ed535f;
    color: #ffffff;
}

.badge-sbs-default {
    background-color: #d7d8db;
    color: #ffffff;
}
/*BADGE*/

.invalid-feedback {
    font-size: 16px;
}

/*WIDTH PERCENT*/

.w-1 {
    width: 1%;
}
.w-2 {
    width: 2%;
}
.w-3 {
    width: 3%;
}

.w-4 {
    width: 4%;
}

.w-5 {
    width: 5%;
}

.w-6 {
    width: 6%;
}

.w-7 {
    width: 7%;
}

.w-8 {
    width: 8%;
}

.w-9 {
    width: 9%;
}

.w-10 {
    width: 10%;
}

.w-11 {
    width: 11%;
}

.w-12 {
    width: 12%;
}

.w-13 {
    width: 13%;
}

.w-14 {
    width: 14%;
}

.w-15 {
    width: 15%;
}

.w-16 {
    width: 16%;
}

.w-17 {
    width: 17%;
}

.w-18 {
    width: 18%;
}

.w-19 {
    width: 19%;
}

.w-20 {
    width: 20%;
}

.w-21 {
    width: 21%;
}

.w-22 {
    width: 22%;
}

.w-23 {
    width: 23%;
}

.w-24 {
    width: 24%;
}

.w-25 {
    width: 15%;
}

.w-26 {
    width: 26%;
}

.w-27 {
    width: 27%;
}

.w-28 {
    width: 28%;
}

.w-29 {
    width: 29%;
}

.w-30 {
    width: 30%;
}

.w-31 {
    width: 31%;
}

.w-32 {
    width: 32%;
}

.w-33 {
    width: 33%;
}

.w-34 {
    width: 34%;
}

.w-35 {
    width: 35%;
}

.w-36 {
    width: 36%;
}

.w-37 {
    width: 37%;
}

.w-38 {
    width: 38%;
}

.w-39 {
    width: 39%;
}

.w-40 {
    width: 40%;
}

.w-41 {
    width: 41%;
}

.w-42 {
    width: 42%;
}

.w-43 {
    width: 43%;
}

.w-44 {
    width: 44%;
}

.w-45 {
    width: 45%;
}

.w-46 {
    width: 46%;
}

.w-47 {
    width: 47%;
}

.w-48 {
    width: 48%;
}

.w-49 {
    width: 49%;
}

.w-50 {
    width: 50%;
}

.w-51 {
    width: 51%;
}

.w-52 {
    width: 52%;
}

.w-53 {
    width: 53%;
}

.w-54 {
    width: 54%;
}

.w-55 {
    width: 55%;
}

.w-56 {
    width: 56%;
}

.w-57 {
    width: 57%;
}

.w-58 {
    width: 58%;
}

.w-59 {
    width: 59%;
}

.w-60 {
    width: 60%;
}

.w-61 {
    width: 61%;
}

.w-62 {
    width: 62%;
}

.w-63 {
    width: 63%;
}

.w-64 {
    width: 64%;
}

.w-65 {
    width: 65%;
}

.w-66 {
    width: 66%;
}

.w-67 {
    width: 67%;
}

.w-68 {
    width: 68%;
}

.w-69 {
    width: 69%;
}

.w-70 {
    width: 70%;
}

.w-71 {
    width: 71%;
}

.w-72 {
    width: 72%;
}

.w-73 {
    width: 73%;
}

.w-74 {
    width: 74%;
}

.w-75 {
    width: 75%;
}

.w-76 {
    width: 76%;
}

.w-77 {
    width: 77%;
}

.w-78 {
    width: 78%;
}

.w-79 {
    width: 79%;
}

.w-80 {
    width: 80%;
}

.w-81 {
    width: 81%;
}

.w-82 {
    width: 82%;
}

.w-83 {
    width: 83%;
}

.w-84 {
    width: 84%;
}

.w-85 {
    width: 85%;
}

.w-86 {
    width: 86%;
}

.w-87 {
    width: 87%;
}

.w-88 {
    width: 88%;
}

.w-89 {
    width: 89%;
}

.w-90 {
    width: 90%;
}

.w-91 {
    width: 91%;
}

.w-92 {
    width: 92%;
}

.w-93 {
    width: 93%;
}

.w-94 {
    width: 94%;
}

.w-95 {
    width: 95%;
}

.w-96 {
    width: 96%;
}

.w-97 {
    width: 97%;
}

.w-98 {
    width: 98%;
}

.w-99 {
    width: 99%;
}

.w-100 {
    width: 100%;
}

.w-300{
    width: 300px;
}

.w-150{
    width: 150px;
}

.w-250{
    width: 250px;
}
/*WIDTH PERCENT*/

/*HEIGHT PERCENT*/
.h-80 {
    height: 80% !important;
}

.h-90 {
    height: 90% !important;
}

#tagCloud {
    height: 75% !important;
}
/*HEIGHT PERCENT*/

/*TOOLTIP*/
.tooltip-inner {
    /*font-family: 'NotoSansThaiRegular', 'noto_sansregular';*/
    background-color: #262e3f;
    color: #ffffff;
}
.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #262e3f !important;
}
.tooltip.bs-tooltip-left .arrow:before {
    border-right-color: #262e3f !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
    border-right-color: #262e3f !important;
}
.tooltip.bs-tooltip-top .arrow:before {
    border-right-color: #262e3f !important;
}
/*TOOLTIP*/

/* PACK */
.block-detail div > span {
    display: inline-block;
}
/*.block-detail p {
    display: inline-block;
}
*/
.blockDataNewsDetail div > span {
    display: inline-block;
}
/*.blockDataNewsDetail p {
    display: inline-block;
}*/

    /* CHECK IN */
        .img-checkin {
            width: 100px;
        }

        .text-checkin{
            font-style: normal;
            font-weight: 700;
            font-size: 28px;
            line-height: 48px;
            display: flex;
            align-items: center;
            letter-spacing: 0.05em;
            color: #1E293B;
        }

        .input-checkin{
            margin: 0 auto;
            background: #FFFFFF;
            border: 1px solid #3468FF;
            border-radius: 50px;
        }

        .text-checkin-user{
            font-weight: 700;
            color: #1E293B;
            font-style: normal;
            font-size: 28px;
            line-height: 48px;
            align-items: center;
            letter-spacing: 0.05em;
        }

        .text-checkin-date{
            font-size: 24px;
            font-weight: 700;
            line-height: 45px;
            align-items: center;
            letter-spacing: 0.1em;
            color: #1E293B;
        }

        .label-control {
            font-style: normal;
            font-weight: 500;
            color: #1E293B;
            margin-bottom: 8px;
            /*font-size: 18px;*/
            font-size: 16px;
        }

        .pl-11-5 {
            margin-top: 15px;
            padding-left: 11.5rem;
        }

        .h-90 {
            height: 90px !important;
        }

        .h-150 {
            height: 150px !important;
        }

        .num-student {
            color: #e33a4c !important;
            /*color: #3468FF !important;*/
        }

        .pageCheckin select.form-control {
            padding: 0.375rem 1.75rem 0.375rem 1.75rem;
            vertical-align: middle;
            background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7071 11.7071C16.0976 11.3166 16.0976 10.6834 15.7071 10.2929C15.3166 9.90237 14.6834 9.90237 14.2929 10.2929L15.7071 11.7071ZM12 14L11.2929 14.7071C11.4804 14.8946 11.7348 15 12 15C12.2652 15 12.5196 14.8946 12.7071 14.7071L12 14ZM9.70711 10.2929C9.31658 9.90237 8.68342 9.90237 8.29289 10.2929C7.90237 10.6834 7.90237 11.3166 8.29289 11.7071L9.70711 10.2929ZM14.2929 10.2929L11.2929 13.2929L12.7071 14.7071L15.7071 11.7071L14.2929 10.2929ZM12.7071 13.2929L9.70711 10.2929L8.29289 11.7071L11.2929 14.7071L12.7071 13.2929Z' fill='%231E293B'/%3E%3C/svg%3E") no-repeat right .2rem center;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            position: relative;
        }

        .btnCheckIn{
            padding: 0px;
            background: #3468FF;
            border-radius: 50px;
            width: 100%;
            font-style: normal;
            font-weight: 500;
            font-size: 18px;
            line-height: 38px;
            color: #ffffff;
        }

        .label-control {
            font-style: normal;
            font-weight: 500;
            color: #1E293B;
            margin-bottom: 8px;
            font-size: 16px;
        }

        .img-user-checkin{
            width: 160px;
            height: 160px;
        }

        .blockNewBook {
            background: #FFFFFF;
            border-radius: 20px;
            padding: 0px 10px 10px 10px;
            margin-top: 40px;
        }

        .text-1-line {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 20px;
        }

        .owl-carousel .item {
            /*height: 25rem;*/
            background: #fff;
            text-align: center;
        }

        .owl-carousel .item .block-item{
          height: 200px;
          /*background: #4DC7A0;*/
          margin: 1rem;
        }

        .recommendBookTitle{
            font-style: normal;
            font-weight: 700;
            font-size: 28px;
            line-height: 48px;
            text-align: center;
            color: #231F20;
            margin-top: 20px;
        }

        .blockBorderBottomCarouselCheckInPage {
            width: 90%;
            background-color: #F9F9F9;
            box-shadow: 0px 4px 10px 1px rgb(0 0 0 / 25%);
            padding: 8px;
        }

        .recommendImg {
            width: 140px !important;
            padding: 5px;
        }

        .blockBadgeRecommend {
            position: absolute;
            background: #00AE71;
            border-radius: 50%;
            padding: 2px 7px;
            top: 15px;
            left: 5px;
            font-size: 10px;
            font-weight: bold;
            color: #fff;
        }

        .boxDataRecommendList{
            border: 1px solid #3468FF;
            border-radius: 10px;
            padding: 30px 10px 20px 10px;
        }

        .mt-minus-20{
            margin-top: -20px;
        }

        .owl-stage-outer{
            margin-bottom: -10px;
        }

        .textHeaderBookRecommend{
            margin-top: -15px;
            margin-bottom: 10px;
            font-size: 18px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 28px;
            line-height: 30px;
        }

        .textHeaderBookRecommend a {
            color: #231F20;
        }

        .textHeaderBookRecommend a:hover {
            text-decoration: none;
        }

        .BlockCardUserCheckIn {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 15px;
        }

        .BlockCardUserCheckIn .blockImgUser{
            max-width: 200px;
            width: 100px;
            height: 100px;
            text-align: center;
        }

        .BlockCardUserCheckIn .img-card-user-checkin {
            width: 100px;
            border-radius: 50%;
            height: 100px;
        }

        .BlockCardUserCheckIn .img-card-user-gif {
            width: 110px;
            position: absolute;
            border-radius: 50%;
            height: 110px;
            opacity: 0.9; 
            /* top: 0px; */
            left: 25px;
        }

        .textBookCardUserCheckIn {
            color: #777777;
        }

        .textBookCardUserCheckIn span {
            color: #231F20;
        }

        .f-20 {
            font-size: 20px;
        }

        .verticalContentCenter {
            margin: auto;
            width: 100%;
            padding: 10px;
        }
    /* CHECK IN */
/* PACK */

/*@MEDIA*/
@media (max-height: 780px) {
    
}

@media (min-width: 992px) {
    
}


@media (min-width: 1301px) and (max-width: 1400px) {
    
}

@media (min-width: 1200px) and (max-width: 1400px) {

}

@media (max-width: 1300px) {
    
}

@media (min-width: 1025px) {
    
}

@media (min-width: 1024px) {
    
}

@media (min-width: 768px) {
    .blockBookRecommend .boxDataList {
        height: 210px;
    }

    .blockBookNew .owl-carousel .owl-item img,
    .blockBookRecommend .owl-carousel .owl-item img {
        height: 210px;
    }

    .bookList .boxDataList {
        height: 225px;
    }

    .bookList .boxDataListImg img {
        height: 225px;
    }

    .bookBlock .boxDataBlockImg img {
        height: 210px;
    }

    .blockDataNews .imgNews img {
        height: 200px;
    }

    .blockInterested .owl-carousel .owl-item img {
        height: 250px;
    }
}


@media (max-width: 1180px) {
    .blockHeader .navbar .nav-item {
        padding: 3px 9px;
        white-space: nowrap;
    }

    .blockImageLogin {
        max-height: 400px;
    }

    .blockStatisticsTotal {
        padding: 30px 10px 10px;
    }

    
}

@media (max-width: 1180px) and (orientation: landscape) {
    .pageStatistics #graphDataResource .highcharts-title {
        top: 71px !important;
    }
}

@media (max-width: 1025px) {
    .pageHome .blockStatisticsDataImages img.statisticsImages1 {
        width: 70px;
    }

    .pageHome .blockStatisticsDataImages img.statisticsImages2{
        width: 150px;
    }

    .pageHome .blockStatisticsDataImages img.statisticsImages3 {
        width: 80px;
    }
    
    .pageHome .blockStatisticsDataImages img.statisticsImages4 {
        width: 50px;
    }
}

@media (min-width: 992px) {
    .blockHeader .navbar .nav-item.dropdown:hover .dropdown-menu {
        display: block;
    }

    .blockHeaderTop .blockChangeLanguage:hover .dropdown-menu,
    .blockHeaderTop .blockDataLogin:hover .dropdown-menu {
        display: block;
    }
}

@media (max-width: 991.98px) {
    .blockHeader .navbar .navbar-collapse {
        background-color: #dcebf7;
        border-radius: 20px;
        padding: 15px;
        text-align: center;
    }


    .blockHeader .navbar .nav-item.active:not(.dropdown) {
        width: max-content;
        margin: 0 auto !important;
    }

    .blockHeader .navbar .nav-item:not(:last-child) {
        margin-right: 0;
    }

    .blockHeader .navbar .nav-item.dropdown {
        padding-right: 19px;
        padding-bottom: 16px;
    }


    .blockChangeDisplay{
        display: block;
    }

    .blockOrder {
        display: block;
        margin-top: 10px;
    }

    .blockImageLogin {
        max-height: 300px;
    }

    .blockNavbarHistory a:first-child {
        margin-right: 1rem;
    }

    .blockNavbarHistory a:last-child {
        margin-left: 1rem;
    }

    .tableSbs > thead > tr > th, .tableSbs > tbody > tr > th {
        white-space: nowrap;
    }

    main {
        background-size: 100%;
        background-repeat: repeat;
    }
}


@media (max-width: 768px) {
    /*.blockFooter {
        margin: 0px 20px;
    }*/

    .blockDataAricle {
        padding: 20px 15px;
    }

    .blockDataNews .dataNews .blockMore a {
        float: unset;
        margin-top: 5px;
    }

    .blockDataNewsDetail {
        padding: 10px;
    }

    .blockImageLogin {
        max-height: 300px;
    }

    .blockNavbarHistory a:first-child {
        margin-right: 0.5rem;
    }

    .blockNavbarHistory a:last-child {
        margin-left: 0.5rem;
    }

    td.ceil-wrap {
        max-width: 100%;
        overflow: unset;
        text-overflow: unset;
        white-space: nowrap;
    }

    .recommendImg {
        width: 97px !important;
        padding: 5px;
    }

    .textHeaderBookRecommend {
        margin-top: -15px;
        margin-bottom: 10px;
        font-size: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 23px;
        line-height: 30px;
    }

    .blockHeader .navbar .nav-item.dropdown .dropdown-menu {
        width: max-content;
        text-align: center;
        margin: 0 auto;
    }
}

@media (max-width: 850px) and (orientation: landscape) {
    .pageStatistics #graphDataResource .highcharts-title {
        top: 95px !important;
    }
}

@media (max-width: 768px) and (orientation: portrait) {
    .pageStatistics #graphDataResource .highcharts-title {
        top: 70px !important;
    }
}

@media (max-width: 650px) {
    .blockNavbarHistory a {
        display: block;
        margin-top: 15px;
    }

    .blockNavbarHistory a.active:after {
        display: none;
    }

    .blockNavbarHistory a:first-child {
        margin-right: 0;
    }

    .blockNavbarHistory a:last-child {
        margin-left: 0;
    }  
    
}

@media (max-width: 500px) {
    .linkMore {
        position: relative;
        display: block;
        float: right;
        margin-top: 20px;
    }

    .blockBookPopular .owl-carousel .owl-stage-outer,
    .blockBookNew .owl-carousel .owl-stage-outer,
    .blockBookRecommend .owl-carousel .owl-stage-outer,
    .blockCategory .owl-carousel .owl-stage-outer {
        width: 100%;
    }

    .pageHome .blockStatisticsDataImages img.statisticsImages1,
    .pageHome .blockStatisticsDataImages img.statisticsImages2,
    .pageHome .blockStatisticsDataImages img.statisticsImages3,
    .pageHome .blockStatisticsDataImages img.statisticsImages4 {
        display: none;
    }
}


@media (max-width: 425px) {
    .mt-mobile {
        margin-top: 90px !important;
    }

    .blockBookPopular .owl-item a img  {
        width: 100%; 
        height: 100%;
    }
}

@media (max-width: 375px) {
    
}

@media (max-width: 350px) {
    .blockHeaderTop .text-right {
        text-align: center !important;
    }
    .blockHeaderTop .aSignin {
        display: block;
        margin: 15px 0px;
    }

    .blockSocialMediaNews {
        display: block;
        margin-top: 10px;
    }

    .blockHeaderTop .blockDataLogin {
        display: block;
        margin: 15px 0px;
    }
}

@media (max-width: 320px) {
    .blockHeader .navbar .navbar-brand img {
        width: 140px;
    }
}

@media (max-width: 660px) {
    
}

@media (min-height: 1024px) {
    
}
/*@MEDIA