/**font mixin style weight size lineheight fontfamily**/
@import url('https://fonts.googleapis.com/css?family=Sarabun:400&subset=thai');

body,
#Options blockquote {
   font-family: Sarabun, sans-serif, Helvetica Neue, Helvetica, Arial;
   font-size: 16px;
}

#nav-menu {
   /** เซ็ทเพื่อไม่ให้เมนูตกลงมาจากเฮดเดอร์ **/
   padding-top: 0px;
}

/** id 10001 **/
.navbar-default {
   background: linear-gradient(to right, #FFFFFF 66%, #9AFEFF 5%);
   color: #FFFFFF;
   border-color: #e7e7e7;
   border-width: 2px;
   -webkit-border-radius: 16px;
   -moz-border-radius: 16px;
   border-radius: 16px;
   border-style: outset;
   padding: 1px;
   margin-left: 13px;
   margin-right: 13px;
   margin-top: 13px;
   margin-bottom: 13px;
   height: 218.1px;
   text-shadow: 0px 0px 0px transparent;
   box-shadow: 1px 4px 38px undefined;
}

@media (max-width: 767px) {
   .navbar-default {
      height: auto;
   }
}

/** id 10002 **/
.navbar-default #main-navigation>li a {
   padding: 86.5px 13px 13px 13px;
}

.navbar-default li a,
.navbar-default .navbar-nav>.open>a {
   color: #777777 !important;
   text-shadow: undefined undefined undefined #FFFFFF;
   background: transparent;
   font: normal normal 17px / 1 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
}

.navbar-default li a:hover,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default li a:focus,
.navbar-default .navbar-nav>.open>a:focus {
   color: hsl(0, 0%, 60%) !important;
}

.dropdown-menu {
   background-color: #FFFFFF;
}

.dropdown-menu li>a {
   color: #777777 !important;
   text-shadow: undefined undefined undefined #FFFFFF;
   background: transparent;
   font: normal normal 17px / 1 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
   padding: 8.5px 20px !important;
}

.dropdown-menu li>a:hover,
.dropdown-menu li>a:focus {
   background-color: hsl(0, 0%, 40%) !important;
   color: hsl(0, 0%, 66.66666667%) !important;
}

/**10003**/
.form-control {
   color: #333;
   background-color: #FFFFFF;
   border-color: #CCC;
   border-width: 1px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   border-style: solid;
   font: normal normal 14px / 1 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
   text-shadow: 0px 0px 0px transparent;
   padding: 6px 12px;
}

/**10004**/
/**changing percentage to number**/
/**positive numbers**/
.pull-md-right form button {
   color: #333;
   background-color: #ffffff;
   border-color: #CCC;
   border-width: 1px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   border-style: solid;
   font: normal normal 14px / 1.42857143 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
   text-shadow: 0px 0px 0px transparent;
}

.pull-md-right form button:hover {
   background-color: hsl(0, 0%, 90%);
}

.pull-md-right form button:focus {
   background-color: hsl(0, 0%, 90%);
}

.pull-md-right form button:hover:focus {
   background-color: hsl(0, 0%, 90%);
}

/**10005 page font and background**/
body,
.media-body p,
.media-body .authors,
.media-body .lea,
.page_about p {
   color: #333;
   font: normal normal 16px / 1.5 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
   text-shadow: 0px 0px 0px transparent;
}

body {
   background-color: #E7E7E7;
}

/**10006 journal image **/
.homepage-image>img {
   border-color: #ffffff;
   border-width: 0px;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   border-style: solid;
   padding: 0px;
}

/**10007 content font**/
.journal-description>p {
   color: #333;
   font: normal normal 16px / 1.5 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
   text-shadow: 0px 0px 0px transparent;
   margin: 15px 0px;
}

/**10008 topic font**/
.media .page-header h2,
.page-header h1,
.page-header h2,
.page-header,
h3,
small,
.page_about h3,
h2 small {
   color: #333;
   text-shadow: 0px 0px 0px transparent;
}

.media .page-header h2,
.page-header h1,
.page-header h2,
.page-header,
h3,
h2 {
   font: normal normal 30px / 1.40 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
}

.page-header {
   background-color: #BBF9FF;
   border-color: #eee;
   border-width: 0px 0px 1px 0px;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   border-style: solid;
   padding: 0px 0px 9px 0px;
   margin: 40px 0px 20px 0px;
}

/**10009 logo**/
@media (min-width: 768px) {
   .navbar-brand-logo {
      height: 100%;
   }
}

.navbar-brand-logo img {
   max-height: 100%;
   height: 160px;
   width: auto;
}

.navbar-form {
   margin-top: 63px;
}

/**10010 hyperlink**/
.media-heading a,
.issue a,
.page_about a,
.pkp_block a {
   color: #337ab7;
   font: normal normal 14px / 1 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
   text-shadow: 0px 0px 0px transparent;
   padding: 0px 0px 0px 0px;
}

.media-heading a:hover,
.issue a:hover,
.page_about a:hover,
.pkp_block a:hover {
   color: #1d4567;
}

.media-heading a:focus,
.issue a:focus,
.page_about a:focus,
.pkp_block a:focus {
   color: #1d4567;
}

/**10011**/
.media-body p,
.media-body .authors,
.media-body .lead {
   color: #333;
   font: normal normal 16px / 1 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
   text-shadow: 0px 0px 0px transparent;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;
}

/**10012**/
.heading .thumbnail,
.cover-image,
.media-left {
   background-color: #ffffff;
   border-color: #ddd;
   border-width: 1px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   border-style: solid;
   padding: 4px;
}

/**10013**/
/**changing percentage to number**/
/**positive numbers**/
/**changing percentage to number**/
/**positive numbers**/
.btn-group .btn-primary,
.current_issue .btn-primary,
.download .btn-primary {
   background-color: #337ab7;
   border-color: #2e6da4;
   border-width: 1px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   border-style: solid;
   padding: 6px 12px 6px 12px;
   color: #FFF;
   font: normal normal 14px / 1 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
   text-shadow: 0px 0px 0px transparent;
}

.btn-group .btn-primary:hover,
.current_issue .btn-primary:hover,
.download .btn-primary:hover {
   background-color: hsl(207.72727273, 56.41025641%, 58.04705882%);
   color: hsl(0, 0%, 87.48282353%);
}

.btn-group .btn-primary:focus,
.current_issue .btn-primary:focus,
.download .btn-primary:focus {
   background-color: hsl(207.72727273, 56.41025641%, 58.04705882%);
   color: hsl(0, 0%, 87.48282353%);
}

.btn-group .btn-primary:hover:focus,
.current_issue .btn-primary:hover:focus,
.download .btn-primary:hover:focus {
   background-color: hsl(207.72727273, 56.41025641%, 58.04705882%);
   color: hsl(0, 0%, 87.48282353%);
}

/**10014**/
aside .pkp_block {
   background-color: #FFFFFF;
   border-color: #ddd #ddd #ddd #ddd;
   border-width: 1px 1px 1px 1px;
   -webkit-border-radius: 4px 4px 4px 4px;
   -moz-border-radius: 4px 4px 4px 4px;
   border-radius: 4px 4px 4px 4px;
   border-style: solid solid solid solid;
   margin: 0px 0px 4px 0px;
   box-shadow: 0px 0px 0px transparent;
   padding: 0px 15px 0px 15px;
}

.pkp_block .content {
   padding: 0px;
}

.pkp_block .content>.content,
.block_information .content {
   padding: 0px 0px 10px 0px;
   -webkit-border-radius: 0px 0px 3px 3px;
   -moz-border-radius: 0px 0px 3px 3px;
   border-radius: 0px 0px 3px 3px;
}

.pkp_block .title {
   background-color: #a1a1a1;
   color: #333;
   border-bottom: 1px solid #ddd;
   font: normal normal 18px / 1 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
   text-shadow: 0px 0px 0px transparent;
   -webkit-border-radius: 3px 3px 0px 0px;
   -moz-border-radius: 3px 3px 0px 0px;
   border-radius: 3px 3px 0px 0px;
   margin: 0px -15px 10px -15px;
}

.pkp_block ul li {
   background-color: transparent;
   border-style: solid solid solid solid;
   border-color: #ddd #ddd #ddd #ddd;
   border-top: 1px solid #ddd;
   border-bottom: 0px;
}

.pkp_block ul li:last-child {
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
}

/**10015 lead หัวข้อวารสาร**/
.current_issue .lead {
   color: #333;
   font: normal 300 21px / 1.4 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
   text-shadow: 0px 0px 0px transparent;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;
}

/**10016**/
.navbar-default #navigationUser>li a {
   color: #777777;
   font-style: normal;
   font-weight: normal;
   font-size: 17px;
   line-height: 1;
   text-shadow: 0px 0px 0px transparent;
   text-shadow: undefined undefined undefined #FFFFFF;
   padding: 10px;
}

.navbar-default #navigationUser>li a:hover,
.navbar-default #navigationUser>li a:focus {
   color: hsl(0, 0%, 60%) !important;
}

/**10017**/
.date,
.media-body .date {
   color: #777777;
   text-shadow: 0px 0px 0px transparent;
   padding: 0px;
   font: normal normal 12px / 1 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
}

/**10018**/
.breadcrumb {
   background-color: #f5f5f5;
   border-color: #ddd #ddd #ddd #ddd;
   border-style: solid solid solid solid;
   border-width: 0px 0px 0px 0px;
   -webkit-border-radius: 4px 4px 4px 4px;
   -moz-border-radius: 4px 4px 4px 4px;
   border-radius: 4px 4px 4px 4px;
   margin: 0px 0px 20px 0px;
   padding: 8px 15px 8px 15px;
}

/**10019*/
.panel {
   background-color: #FFFFFF;
   border-color: #ddd #ddd #ddd #ddd;
   border-width: 1px 1px 1px 1px;
   -webkit-border-radius: 4px 4px 4px 4px;
   -moz-border-radius: 4px 4px 4px 4px;
   border-radius: 4px 4px 4px 4px;
   border-style: solid solid solid solid;
   margin: 0px 0px 4px 0px;
   box-shadow: 0px 0px 0px transparent;
   padding: 0px 0px 0px 0px;
}

.panel-default>.panel-heading {
   background-color: #a1a1a1;
   color: #333;
   border-color: #ddd #ddd #ddd #ddd;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
   font: normal normal 18px / 1 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
}

/**10020**/
.breadcrumb .active {
   color: #777;
   font: normal normal 18px / 1 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
   text-shadow: 0px 0px 0px transparent;
}

/**10021**/
footer[role="contentinfo"] {
   background: linear-gradient(to top, #1FCFFF 9%, #FFFFFF 4%);
   border-color: #eee;
   border-style: solid;
   border-width: 0px 0px 1px 0px;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   margin: 60px 0px 0px 0px;
   padding: 34px;
   color: #333;
   font: normal normal 14px / 1 Sarabun, Arial, Helvetica, Sans-serif, Geneva !important;
   text-shadow: 0px 0px 0px transparent;
}

.navbar-default,
.header_view {
   background-image: url(https://github.com/theerapon79-create/thaijo-images/blob/main/%E0%B8%9B%E0%B9%89%E0%B8%B2%E0%B8%A2%E0%B8%A7%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%B2%E0%B8%A310.png?raw=true);
}

.navbar-brand-logo {
   height: 100%;
}


.navbar-brand-logo img {
   height: 190px;
}

footer[role="contentinfo"] {
   background-image: url(https://github.com/theerapon79-create/thaijo-images/blob/main/%E0%B8%9B%E0%B9%89%E0%B8%B2%E0%B8%A2%E0%B8%A7%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%B2%E0%B8%A3_%E0%B8%A5%E0%B9%88%E0%B8%B2%E0%B8%873.png?raw=true);
}

/* =========================================================
   JMNPR FIX V3 — Thai article title
   Uses a fixed pixel line-height so the change is unmistakable.
   ========================================================= */
body .page-header,
body .page-header h1,
body .page-header h2,
body .page-header .title,
body .page-header .page_title,
body .page-header .page-title,
body .article-details h1,
body .article_title,
body .article-title {
   font-family: Sarabun, Arial, Helvetica, sans-serif !important;
   font-size: 30px !important;
   line-height: 45px !important;
   height: auto !important;
   min-height: 0 !important;
   white-space: normal !important;
   overflow: visible !important;
   overflow-wrap: break-word !important;
}

/* =========================================================
   JMNPR FIX V4 — Article titles on article-list pages only
   Keeps the article Abstract/View page title unchanged.
   ========================================================= */
body .media .media-heading,
body .media .media-heading a,
body .media-body .media-heading,
body .media-body .media-heading a {
   font-family: Sarabun, Arial, Helvetica, sans-serif !important;
   font-size: 18px !important;
   line-height: 1.45 !important;
   font-weight: 400 !important;
   white-space: normal !important;
   overflow-wrap: break-word !important;
}

/* =========================================================
   JMNPR FIX V6 — Submission and PDF buttons
   1) Enlarges only the "Make a Submission" button.
   2) Uses a dark green background for that button.
   3) Restores PDF/download buttons to their original compact size.
   ========================================================= */

/* Submission button — same large size in both English and Thai */
body .pkp_block.block_make_submission a,
body .block_make_submission a {
   font-family: Sarabun, Arial, Helvetica, sans-serif !important;
   font-size: 30px !important;
   line-height: 1.4 !important;
   font-weight: normal !important;
   display: block !important;
   width: calc(100% - 8px) !important;
   box-sizing: border-box !important;
   margin: 4px auto !important;
   padding: 10px 8px !important;
   min-height: 44px !important;
   text-align: center !important;
   background-color: #1f6f4a !important;
   border-color: #18583b !important;
   color: #ffffff !important;
}

body .pkp_block.block_make_submission a:hover,
body .pkp_block.block_make_submission a:focus,
body .block_make_submission a:hover,
body .block_make_submission a:focus {
   background-color: #18583b !important;
   border-color: #12442e !important;
   color: #ffffff !important;
}

/* PDF/download buttons — restore compact original size */
body .download .btn-primary,
body .media .btn-primary,
body .media-body .btn-primary,
body a.obj_galley_link,
body a.galley-link {
   font-family: Sarabun, Arial, Helvetica, sans-serif !important;
   font-size: 14px !important;
   line-height: 1 !important;
   padding: 6px 12px !important;
   min-height: 0 !important;
   height: auto !important;
}

/* =========================================================
   JMNPR FIX V7 — Localized submission-button label
   Thai pages: "ส่งบทความ"
   English pages: keeps the original "Make a Submission"
   ========================================================= */

/* Hide the original English label only when the active page language is Thai */
html[lang^="th"] body .pkp_block.block_make_submission a,
html[lang^="th"] body .block_make_submission a,
html[lang="th_TH"] body .pkp_block.block_make_submission a,
html[lang="th_TH"] body .block_make_submission a,
body.locale_th_TH .pkp_block.block_make_submission a,
body.locale_th_TH .block_make_submission a,
body.locale-th-TH .pkp_block.block_make_submission a,
body.locale-th-TH .block_make_submission a {
   font-size: 0 !important;
   display: block !important;
   width: calc(100% - 8px) !important;
   box-sizing: border-box !important;
   margin: 4px auto !important;
   padding: 10px 8px !important;
   text-align: center !important;
}

/* Insert the Thai label while retaining the same button size and styling */
html[lang^="th"] body .pkp_block.block_make_submission a::after,
html[lang^="th"] body .block_make_submission a::after,
html[lang="th_TH"] body .pkp_block.block_make_submission a::after,
html[lang="th_TH"] body .block_make_submission a::after,
body.locale_th_TH .pkp_block.block_make_submission a::after,
body.locale_th_TH .block_make_submission a::after,
body.locale-th-TH .pkp_block.block_make_submission a::after,
body.locale-th-TH .block_make_submission a::after {
   content: "ส่งบทความ";
   display: inline-block;
   font-family: Sarabun, Arial, Helvetica, sans-serif !important;
   font-size: 30px !important;
   line-height: 1.4 !important;
   font-weight: normal !important;
   color: #ffffff !important;
}