/***************** font-face : ThaiSans Neue *****************/
@font-face {
    font-family: 'ThaiSans Neue';
    src: url('../fonts/ThaiSansNeue-Regular.eot');
    src: url('../fonts/ThaiSansNeue-Regular.eot?') format('embedded-opentype'),
    	url('../fonts/ThaiSansNeue-Regular.woff?') format('woff'),
    	url('../fonts/ThaiSansNeue-Regular.ttf?') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ThaiSans Neue';
    src: url('../fonts/ThaiSansNeue-Bold.eot');
    src: url('../fonts/ThaiSansNeue-Bold.eot?') format('embedded-opentype'),
    	url('../fonts/ThaiSansNeue-Bold.woff?') format('woff'),
    	url('../fonts/ThaiSansNeue-Bold.ttf?') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'ThaiSans Neue';
    src: url('../fonts/ThaiSansNeue-Italic.eot');
    src: url('../fonts/ThaiSansNeue-Italic.eot?') format('embedded-opentype'),
    	url('../fonts/ThaiSansNeue-Italic.woff?') format('woff'),
    	url('../fonts/ThaiSansNeue-Italic.ttf?') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'ThaiSans Neue';
    src: url('../fonts/ThaiSansNeue-BoldItalic.eot');
    src: url('../fonts/ThaiSansNeue-BoldItalic.eot?') format('embedded-opentype'),
    	url('../fonts/ThaiSansNeue-BoldItalic.woff?') format('woff'),
    	url('../fonts/ThaiSansNeue-BoldItalic.ttf?') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/***************** font-face : prompt *****************/
@font-face {
    font-family: 'Prompt';
    src: url('../fonts/PROMPT-REGULAR.TTF?') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Prompt';
    src: url('../fonts/PROMPT-BOLD.TTF?') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Prompt';
    src: url('../fonts/PROMPT-ITALIC.TTF?') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Prompt';
    src: url('../fonts/PROMPT-BOLDITALIC.TTF?') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/***************** font-face : Kanit *****************/
@font-face {
	font-family: 'Kanit';
	src:url('../fonts/Kanit-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'Kanit';
	src:url('../fonts/Kanit-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
	font-family: 'Kanit';
	src:url('../fonts/Kanit-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
	font-family: 'Kanit';
	src:url('../fonts/Kanit-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/***************** font-face : K2D *****************/
@font-face {
	font-family: 'K2D';
	src:url('../fonts/K2D-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'K2D';
	src:url('../fonts/K2D-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
	font-family: 'K2D';
	src:url('../fonts/K2D-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
	font-family: 'K2D';
	src:url('../fonts/K2D-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

 /***************** font-face : THSarabunNew *****************/
@font-face {
    font-family: 'THSarabunNew';
    src: url('../fonts/THSarabunNew.eot');
    src: url('../fonts/THSarabunNew.eot?') format('embedded-opentype'),
    	url('../fonts/THSarabunNew.woff?') format('woff'),
    	url('../fonts/THSarabunNew.ttf?') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'THSarabunNew';
    src: url('../fonts/THSarabunNewBold.eot');
    src: url('../fonts/THSarabunNewBold.eot?') format('embedded-opentype'),
    	url('../fonts/THSarabunNewBold.woff?') format('woff'),
    	url('../fonts/THSarabunNewBold.ttf?') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'THSarabunNew';
    src: url('../fonts/THSarabunNewItalic.eot');
    src: url('../fonts/THSarabunNewItalic.eot?') format('embedded-opentype'),
    	url('../fonts/THSarabunNewItalic.woff?') format('woff'),
    	url('../fonts/THSarabunNewItalic.ttf?') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'THSarabunNew';
    src: url('../fonts/THSarabunNewBoldItalic.eot');
    src: url('../fonts/THSarabunNewBoldItalic.eot?') format('embedded-opentype'),
    	url('../fonts/THSarabunNewBoldItalic.woff?') format('woff'),
    	url('../fonts/THSarabunNewBoldItalic.ttf?') format('truetype');
    font-weight: bold;
    font-style: italic;
}


 /***************** font-face : tahoma *****************/
@font-face {
    font-family: 'tahoma';
    src: url('../fonts/TAHOMA.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'tahoma';
    src: url('../fonts/TAHOMABD.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'tahoma';
    src: url('../fonts/TAHOMA0.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'tahoma';
    src: url('../fonts/TAHOMAB0.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/***************** font-face : Kanit *****************/
@font-face {
    font-family: 'Kanit';
    src: url('../fonts/Kanit-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Kanit';
    src: url('../fonts/Kanit-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Kanit';
    src: url('../fonts/Kanit-Italic.ttf');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Kanit';
    src: url('../fonts/Kanit-BoldItalic.ttf');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Kanit Medium';
    src: url('../fonts/Kanit-Medium');
    font-weight: normal;
    font-style: normal;
}

/***************** font-face : Mitr *****************/
@font-face {
    font-family: 'Mitr Light';
    src: url('../fonts/Mitr-Light');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Mitr Regular';
    src: url('../fonts/Mitr-Regular');
    font-weight: normal;
    font-style: normal;
}

 /***************** font-face : SRISURYWONGSE *****************/
@font-face {
    font-family: 'SRISURYWONGSE';
    src: url('../fonts/SriSuryWongse.eot');
    src: url('../fonts/SriSuryWongse.eot?') format('embedded-opentype'),
    	url('../fonts/SriSuryWongse.woff?') format('woff'),
    	url('../fonts/SriSuryWongse.ttf?') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/***************** font-face : CSPraJad *****************/
@font-face {
  font-family: 'cs_prajadregular';
  src: url('../fonts/CSPraJad.eot');
  src: url('../fonts/CSPraJad.eot?#iefix') format('embedded-opentype'),
       url('../fonts/CSPraJad.woff') format('woff'),
       url('../fonts/CSPraJad.ttf') format('truetype'),
       url('../fonts/CSPraJad.svg#cs_prajadregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/***************** font-face : DBHelvethaicaX *****************/
@font-face {
  font-family: 'DBHelvethaicaX';
  src: url('../fonts/DBHelvethaicaX-55Regular.eot');
  src: url('../fonts/DBHelvethaicaX-55Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/DBHelvethaicaX-55Regular.woff') format('woff'),
       url('../fonts/DBHelvethaicaX-55Regular.ttf') format('truetype'),
       url('../fonts/DBHelvethaicaX-55Regular.svg#DBHelvethaicaX-55Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
    font-family: 'DBHelvethaicaX Med';
    src: url('../fonts/DBHelvethaicaX Med.TTF');
    font-weight: normal;
    font-style: normal;
}

/***************** font-face : Material Icons *****************/
@font-face {
  font-family: 'Material Icons';
  src: url('../fonts/MaterialIcons-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}


html, body {
	font-family: 'THSarabunNew';
}
body {font-size: 2.2rem;}

/* ************** Loading *********** */
.loading-screen {position: fixed;top: 0;left: 0;right: 0;background-color: #fff;z-index: 9999;}
.loading-screen .loading-img {position: fixed; top: 35%; left: 0; right: 0; width: 100%; height: 150px; text-align: center;}
.loading-screen .loading-img img {max-height: 100%;}

/* ************** Menu addon *********** */
.menu-has-icon em {display: inline-block; margin-right: 5px; line-height: 14px; height: 14px; font-size: 14px;}
.menu-has-image img {display: inline-block; width: 16px; height: 16px; object-fit: cover; margin-right: 5px;}

/************** Validation ***************/
.help-block.error {color: red; font-style: italic;}
.form-group .labelRequest::after {color: red;content: " *";}

/***************** layout *****************/
.btn.disabled {border: #cbcbcb !important;background: #cbcbcb !important;}
.btn-info.active {background-color: #ad7801;border-color: #ad7801;}

/***************** Header *****************/
.breadcrumbs-panel .breadcrumb>.active {color: #bb590f;}
.information-panel .detail-zone #im-detail-list .item {padding-top: 13px;}
.information-panel .detail-zone #im-detail-list .item small {color: #0c86f3;font-size: 19px;}
.infodetail .hilight-panel .hilight-inner-top .title {font-size: 4.5rem;}

.wrapper {background-color: #fff;}
.content-wrapper {background-color: #fff;}
.content-header, .content {padding-left: 0px;padding-right: 0px;} 

h2.pageName {
	color: #B21F29;
	font-family: 'DBHelvethaicaX' ;
	/* font-family: 'ThaiSans Neue' ; */
	font-size: 32px;
	font-weight: bold; 
	border-bottom: 1px solid #B21F29;
	padding: 3px 0px 5px;
	margin-bottom: 5px;
}

.title-label {
    background: var(--color1);
    /* background: linear-gradient(to left, #0170b8, #2b5094); */
    color: #fff;
    padding: 5px 15px 7px;
    font-family: 'DBHelvethaicaX Med';
    /* font-family: 'ThaiSans Neue'; */
    font-size: 2.3rem;
    font-weight: normal;
    margin-bottom: 25px;
	/* color: #215770;
	font-size: 22px;
	font-family: 'ThaiSans Neue' ;
	padding: 2px 0px 3px;
	border-bottom: 1px solid #215770;
	margin-bottom: 15px;
	font-weight: bold; */
}
.pointer { cursor: pointer; }

/***************** layout : breadcrumb *****************/
.content-header > .breadcrumb {
  position: relative;
  margin-top: 5px;
  top: 0;
  right: 0;
  float: none;
  background: #d2d6de;
  padding-left: 10px;
}
.content-header > .breadcrumb li:before {
  color: #97a0b3;
}


/***************** button *****************/
.btn-action, .btn-sidemenu {
	font-family: 'DBHelvethaicaX' ;
	/* font-family: 'ThaiSans Neue' ; */
	text-align: left;
	font-size: 20px;
}
.infodetail.infopage .hilight-panel .hilight-inner-top {padding: 35px 0px 15px;}


/************* Authentication ***********/

.navbar-custom-menu>.navbar-nav>li>.dropdown-menu { z-index: 11000; position: absolute; top: 50px; right: 0px; }
.navbar-nav>.user-menu>.dropdown-menu { width: auto; min-width: 200px; }
.navbar-nav>.user-menu>.dropdown-menu>.user-footer div a { display: block; color: #444444; }
.navbar-nav>.user-menu>.dropdown-menu>.user-footer div:hover { background-color: #E5E5E5; }
.navbar-nav>.user-menu>.dropdown-menu>.user-footer div.active { background-color: #E5E5E5; }
/* .navbar-nav>.user-menu>.dropdown-menu>.user-footer .btn-default { min-width: 120px; } */

/********** Fix Position Header ***********/
.content-header-fix { position: fixed; top: 0px; height: 20px; width: 100%; z-index: 10000; }


/*************** Header ***************/
.title-logo.mobile img{ width: 50px; margin-left: 60px; }
.navbar-header.mobile { position: absolute; left: 0px; top: -12px; font-size: 32px; }


/*************** Back to Top **************/
#back-to-top {
	position: fixed;
	bottom: 10px;
	right: 20px;
	z-index: 9999;
	text-align: center;
	cursor: pointer;
	border: 0;
	text-decoration: none;
	transition: opacity 0.2s ease-out;
	opacity: 0;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, .5);
	text-align: center;
	min-width: 100px;
}
#back-to-top:hover { background: #e9ebec; }
#back-to-top.show { opacity: 1; }
#back-to-top .toTop-content { margin: 5px; color: black; font-weight: bold; opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ }
#back-to-top .toTop-content div { margin-top: 5px; }
#back-to-top .toTop-img { height: 45px; }

/** info page **/
.hilight-panel {position: relative; }
.hilight-panel img {width: 100%;}
.hilight-panel .hilight-inner-top {position: absolute; width: 100%; top: 14px; padding: 15px 0px; color: #fff; text-align: center;padding: 50px 0px 0px;}
.hilight-panel .hilight-inner-top .title {font-size: 6.5rem; font-family: 'SRISURYWONGSE'; font-weight: bold;text-shadow: 1px 1px 1px #636161;}
.hilight-panel .hilight-inner-top .subtitle {font-size: 3rem; font-family: 'SRISURYWONGSE';text-shadow: 1px 1px 1px #636161;}
.hilight-panel .hilight-inner {position: absolute; width: 100%; bottom: 0px; background-color: rgba(0,0,0, 0.5); padding: 15px 0px;}
.hilight-panel .hilight-inner-title {color: #fff; font-size: 5rem; line-height: 1.4;}
.hilight-panel .hilight-inner-category {padding: 0px 25px; border-top: 1px solid #fff; border-bottom: 1px solid #fff;}
.hilight-panel .hilight-inner-category .hilight-inner-category-item {}
.hilight-panel .hilight-inner-category .hilight-inner-category-item:hover {background-color: rgba(0,0,0,0.75);}
.hilight-panel .hilight-inner-category .hilight-inner-category-item.active {background-color: #fff;}
.hilight-panel .hilight-inner-category .hilight-inner-category-item.active:hover {background-color: #ccc;}
.hilight-panel .hilight-inner-category a {display: block; width: 100%; padding: 7px; font-weight: bold; font-size: 2.1rem; color: #fff; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.hilight-panel .hilight-inner-category .active  a {color: #000;}
.breadcrumbs-panel {}
.breadcrumbs-panel .breadcrumb {background-color: unset; padding-right: 0px; padding-left: 0px; margin-bottom: 0px; font-size: 1.8rem;}
.breadcrumbs-panel .breadcrumb > li + li::before {content: ' >> '; font-size: 1.8rem; color: #999;}
.breadcrumbs-panel .breadcrumb a {font-size: 1.8rem; color: #333;}
.title-panel {padding: 7px 0px;}
.title-panel .container {position: relative;}
.title-panel hr {margin-top: 7px; margin-bottom: 5px; border-color: #cccccc;}
.title-panel .title {font-family: 'DBHelvethaicaX Med'; font-size: 3.1rem; font-weight: normal;}
.title-panel small { font-size: 1.8rem; line-height: 1.2; display: inline-block; position: absolute;right: 0px; top: 50%; -webkit-transform: translate(0, -50%);-moz-transform: translate(0, -50%);transform: translate(0, -50%); margin-right: 15px;}
.title-panel small img {height: 20px;}
.title-panel .switch-view-part {}
.title-panel .switch-view-part a, .title-panel .switch-view-part span {display: inline-block; margin-left: 30px; text-align: center;}
.title-panel .switch-view-part a {color: #ccc;}
.title-panel .switch-view-part a:hover {color: #333;}
.title-panel .switch-view-part span {color: #333;}
.title-panel .switch-view-part span .fa {color: #0099cc;}
.result-list-panel {margin-top: 15px; margin-bottom: 15px;}
.result-list-panel .infocard {padding-bottom: 15px; border-bottom: 1px solid #e4e4e4; margin-bottom: 30px;}
.result-list-panel .infocard .fa.fa-map-marker {color: #999999;}
.result-map-panel {margin-top: 15px; margin-bottom: 15px;}
.result-map-panel .result-amount, .result-list-panel .result-amount {font-size: 1.8rem; color: #0066ff; padding: 3px 0 15px;}

/********* infodetail **********/
.infodetail {}
.infodetail .hilight-panel {}
.infodetail .hilight-panel img {/*height: 170px;*/ }
.infodetail .hilight-panel .hilight-inner-top {position: absolute; padding: 35px 0px 15px; width: 100%; top: 50%; color: #fff; text-align: right; -webkit-transform: translate(0, -50%);-moz-transform: translate(0, -50%);transform: translate(0, -50%);}

.infodetail .information-panel {font-size: 2.3rem; padding-bottom: 15px;}
.infodetail .information-panel .title {color: #333; padding-bottom: 5px; line-height: 1.5; font-size: 40px; }
.infodetail .information-panel .detail { line-height: 1.5;}
.infodetail .information-panel h3 {margin-top: 0px;   margin-bottom: 15px;   font-family: 'DBHelvethaicaX';   font-size: 2.6rem;;   font-weight: bold;}
.infodetail .information-panel h3 em {color: #1aa3d1; width: 28px; font-size: 2.2rem; text-align: center;}
.infodetail .information-panel p.subtitle { background-color: #87bfdb; color: #fff; text-align: center; padding: 5px 0px;} 
.infodetail .information-panel ul {margin-left: 20px;}
.infodetail .information-panel ul li {list-style-position: outside; list-style-type: disc;}
.infodetail .information-panel .btn-source, 
.infodetail .information-panel .btn-source:active, 
.infodetail .information-panel .btn-source:focus, 
.infodetail .information-panel .btn-source:hover { font-size: 2.1rem; color: #fff; background-color: #0000ff; border-color: #0000ff;}
.infodetail .information-panel .more-info {text-align: center;}
.infodetail .information-panel .more-info .btn {background-color: #9999cd; color: #fff; border-radius: 25px; font-size: 2.1rem; padding-right: 15px; padding-left: 15px;}

.infodetail .title-label {font-size: 2.8rem; padding: 2px 0px 3px; margin-bottom: 15px; margin-top: 15px; border-bottom: none; font-family: 'DBHelvethaicaX'; }
.infodetail .title-label  img {height: 24px; margin-top: -5px;}
.infodetail .topcontent { display: block; width: 100%; text-align: right; color: #555555; }
.infodetail div.effect-box { overflow: hidden; margin-top: 20px; } 
.infodetail div.effect-image { overflow: hidden; text-align: center; margin-top: 20px; }
.infodetail div.effect-image img { max-width: none; width: 100%; height: auto; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.infodetail div.effect-image:hover img { opacity: 1; -webkit-transform: scale3d(1.1,1.1,1); transform: scale3d(1.1,1.1,1); }
.infodetail div.effect-box .item-img { border: solid 1px #CCCCCC; border-radius: 0px; text-align: center; position: relative; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center; }
.infodetail div.effect-box .item-img img { visibility: hidden; width: 100%; }
.infodetail div.effect-box .item-img > a { width: 100%; height: 100%; display: block; }
.infodetail div.effect-box .item-img > li { width: 100%; height: 100%; display: block; }

.mb-15 {margin-bottom: 15px;}

/********* infocard **********/
.infocard {margin-bottom: 15px;}
.infocard .image {box-shadow: 5px 5px 5px rgba(125, 125, 125, 0.34); width: 100%; position: relative;}
.infocard .image .image-inner {width: 100%; padding-top: 56.25%; position: relative; }
.infocard .image a {position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.infocard .image img { object-fit: cover; width: 100%; height: 100%; object-position: top; }
.infocard .image .openhour {position: absolute; bottom: 15px; right: 15px; padding: 5px 15px; background-color: #ccc; font-size: 1.6rem; color: #fff;}
.infocard .image .openhour.OPEN {background-color: #339933;}
.infocard .image .openhour.CLOSE {background-color: #e11130;}
.infocard .image .openhour.NEARLYCLOSE {background-color: #f1ba39;}
.infocard .image .ordering {position: absolute; top: 15px; left: 15px; font-size: 1.6rem; color: #fff; }
.infocard .image .ordering img {height: 40px; width: auto; object-fit: unset;}
.infocard .image .ordering span {position: absolute; top: 10px; left: 30px; font-size: 16px; font-weight: bold;}
.infocard .detail {font-size: 2rem; padding: 15px 0px 7px;}
.infocard .detail .detail-date .detailbt  { display: none; }
.infocard .detail .detail-date .eformdetail { display: none; }
.infocard .detail .detail-date .polldetail { display: none; }
.infocard .detail .detail-date a { display: none; }
.infocard .detail .btDetail { display: none; }
.infocard .detail .detail-moredetail { display: none; }
.infocard .detail .btShowDetail { display: none; }
.infocard .detail .detail-date { font-family: 'DBHelvethaicaX'; font-size: 18px; color: #999; }
.infocard .detail .detail-date .fa { margin-right: 3px; }
.infocard .detail .detail-date .line { margin: 0 5px; }
.infocard .detail .detail-title {font-size: 2.6rem; font-weight: bold; overflow: hidden; line-height: 27px;}
.infocard .detail .detail-title, .infocard .detail .detail-row, .infocard .detail .detail-date, .infocard .detail .detail-symbol {padding: 3px 0px;}
.infocard .detail .detail-row {position: relative;}
.infocard .detail .detail-address {color: #245aa3; overflow: hidden; font-size: 22px;}
.infocard .detail .detail-address img {height: 25px;}
.infocard .detail .detail-rating {width: 100px; display: block; position: absolute; top: 0; right: 0;}
.infocard .detail .detail-rating img {width: 20px; display: inline-block;}
.infocard .detail .detail-symbol {height: 24px;}
.infocard .detail .detail-title a {color: #333333; font-weight: normal; }
.infocard .detail .detail-symbol img {height: 100%; display: inline-block;}
.infocard .detail .detail-introtext {color: #000; height: 72px; line-height: 1.2; overflow: hidden; position: relative;margin-top: 5px;}
.infocard .detail .detail-bottom-gradient {
      position: absolute;
      width: 100%;
      height: 25px;
      bottom: 0;
      right: 0;
      background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
      background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
      background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
      background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
   }
/*.infocard .detail .detail-address img {display:none;}*/

.infocard.with-border {box-shadow: 0px 2px 5px 0px #7d7d7d;}
.infocard.with-border .image {box-shadow: unset;}
.infocard.with-border .detail {padding-right: 15px; padding-left: 15px;}

.infopage .hilight-panel .hilight-inner-top {padding: 100px 0px 0px;}

.infopage .result-list .col-md-6.col-sm-6.col-xs-12 .detail .detail-title { font-weight: normal; white-space: unset; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; height: 32px; }
.infopage .result-list .col-md-6.col-sm-6.col-xs-12 .detail .detail-intro{ /*display: none;*/ height: 60px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.infopage .result-list .col-md-4.col-sm-6.col-xs-12 .detail .detail-title { font-weight: normal; white-space: unset; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 58px; }
.infopage .result-list .col-md-4.col-sm-6.col-xs-12 .detail .detail-intro{ /*display: none;*/ height: 60px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.infopage .result-list .col-md-3.col-sm-6.col-xs-12 .detail .detail-title { font-weight: normal; white-space: unset; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 58px; }
.infopage .result-list .col-md-3.col-sm-6.col-xs-12 .detail .detail-intro{ /*display: none;*/ height: 60px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.infopage .result-list .nodata {border: 1px solid #ccc; background-color: #eee; padding: 15px; text-align: center; margin-bottom: 15px;}

/********* infocard document **********/

.infopage.document .result-list-panel .col-md-3.col-sm-6.col-xs-12 .image{ box-shadow: unset; width: 0%; float: left; }
.infopage.document .result-list-panel .col-md-3.col-sm-6.col-xs-12 .infocard .detail .detail-title a { color: var(--colorText); font-size: 25px; font-family: 'DBHelvethaicaX'; font-weight: normal; }
.infopage.document .result-list .col-md-3.col-sm-6.col-xs-12 .detail { float: unset; margin-left: 0px; width: 100%; padding: 0 20px 0px 30px; }
.infopage.document .result-list .col-md-3.col-sm-6.col-xs-12 .detail .fa-calendar,
.infopage.document .result-list .col-md-3.col-sm-6.col-xs-12 .detail .fa-eye { margin-right: 5px; }
.infopage.document  .result-list .col-md-3.col-sm-6.col-xs-12 .detail .detail-date { font-size: 18px; font-family: 'DBHelvethaicaX'; color: #999999; } 
.infopage.document .result-list .col-md-3.col-sm-6.col-xs-12 .fa-file-text { color: var(--color1); }

.infopage.document .result-list-panel .col-md-6.col-sm-6.col-xs-12 .image{ box-shadow: unset; width: 0%; float: left; }
.infopage.document .result-list .col-md-6.col-sm-6.col-xs-12 .detail { float: unset; margin-left: 0px; width: 100%; padding: 0 20px 0px 30px; }
.infopage.document .result-list .col-md-6.col-sm-6.col-xs-12 .detail .fa-calendar,
.infopage.document .result-list .col-md-6.col-sm-6.col-xs-12 .detail .fa-eye { margin-right: 5px; }
.infopage.document  .result-list .col-md-6.col-sm-6.col-xs-12 .detail .detail-date { font-size: 18px; font-family: 'DBHelvethaicaX'; color: #999999; } 
.infopage.document .result-list .col-md-6.col-sm-6.col-xs-12 .fa-file-text { color: var(--color1); }
.infopage.document .result-list-panel .col-md-6.col-sm-6.col-xs-12 .infocard .detail .detail-title a { color: var(--colorText); font-size: 25px; font-family: 'DBHelvethaicaX'; font-weight: normal; }

.infopage.document .result-list-panel .col-md-4.col-sm-6.col-xs-12 .infocard { padding-bottom: 15px; border-bottom: unset; margin-bottom: 30px; }
.infopage.document .result-list-panel .col-md-4.col-sm-6.col-xs-12 .image{ box-shadow: unset; width: 0%; float: left; }
.infopage.document .result-list-panel .col-md-4.col-sm-6.col-xs-12 .infocard .detail .detail-title a { color: var(--colorText); font-size: 25px; }
.infopage.document .result-list .col-md-4.col-sm-6.col-xs-12 .detail { margin-left: 0px; width: 100%; padding: 0 20px 0px 30px;  background: unset; border-bottom: 1px solid #eee;}
.infopage.document .result-list .col-md-4.col-sm-6.col-xs-12 .fa-file-text { color: var(--color1); }
.infopage.document .result-list .col-md-4.col-sm-6.col-xs-12 .detail .fa-calendar,
.infopage.document .result-list .col-md-4.col-sm-6.col-xs-12 .detail .fa-eye { margin-right: 5px; }
.infopage.document  .result-list .col-md-4.col-sm-6.col-xs-12 .detail .detail-date { font-size: 18px; font-family: 'DBHelvethaicaX'; color: #999999; } 


/******** Inforow *********/
/* .inforow {margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ccc;} */
/* .inforow { margin-left: 0%; margin-right: 0%; padding-top: 15px; padding-bottom: 15px; } */
.inforow { margin-left: 0%; margin-right: 0%; padding-top: 15px; margin-bottom: 45px; border-bottom: 1px solid #ccc; }
.inforow:last-child {margin-bottom: 0;}

.inforow .image {display: block; float: left; width: 250px; }
.inforow .image .image-inner {width: 100%; padding-top: 100%; position: relative; }
.inforow .image a {position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
/* .inforow .image img {width: 100%; height: 100%; object-fit: cover; } */
.inforow .image img { width: 314px; height: 200px; object-fit: cover; border-radius: 0; box-shadow: 0 3px 10px 0 rgb(0 0 0 / 34%); object-position: top; }
.inforow .detail {margin-left: 265px; font-size: 2.2rem;}
.inforow .detail { margin-left: 340px; margin-right: 20px; }
.inforow .detail.with-no-image {margin-left: 0px;}
.inforow .detail .detail-title {font-size: 3rem; font-weight: bold; padding-bottom: 7px;}
/* .inforow .detail .detail-intro {padding-bottom: 15px;} */
.inforow .detail .detail-intro { font-family: 'DBHelvethaicaX'; font-size: 22px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 45px; margin-bottom: 10px; line-height: 23px; }
.inforow .image .image-date { display: none; }
.inforow .detail .detail-date { font-family: 'DBHelvethaicaX'; font-size: 18px; color: #999; }
.inforow .detail .detail-date .polldetail { display: none; }
.inforow .detail .detail-date .eformdetail { display: none; }
.inforow .detail .detail-date .detailbt { display: none; }
.inforow .detail .btShowDetail { display: none; }
.inforow .detail .detail-moredetail { display: none; }
.inforow .detail .detail-date a { display: none; }
.inforow .detail .btDetail { display: none; }
.inforow .detail .detail-date .fa { margin-right: 3px; }
.inforow .detail .detail-date .line { margin: 0 5px; }

.inforow .detail .detail-title a { color: var(--colorText); font-size: 25px; font-weight: normal; font-family: "DBHelvethaicaX"; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 70px;  }

.infopage.document .result-list .inforow:nth-child(even) { background: #f6f6f6; }
.info .rss-feed img { width: 17px !important; }
.fa-print { margin-left: 5px; }
.infocard .image { box-shadow: none !important; }
.article-date { margin-top: 15px; margin-bottom: 15px; font-size: 18px; }
.article-date em { margin-right: 5px; }
.article-title-zone .article-title { display: none; }
.title-panel hr { border: unset !important; }

/* .infocard .image.no-img-icon { box-shadow: none; }
.inforow .image.no-img-icon { width: 50px; padding-top: 5px; }
.inforow .detail.detail-no-img { margin-left: 65px; }
.inforow .detail.detail-no-img .detail-date { display: none; } */
@media screen and (max-width: 991px) {
	.inforow .image { display: block; float: unset; width: 100%; }  
    .inforow .image .image-inner { width: 100%; padding-top: 270px; position: relative; }
    .inforow .image img { width: 100%; height: 250px; }
    .inforow .detail { margin-left: 0; margin-right: 0; width: 100%; }
}
/******** Inforow Document *********/

.infopage.document .inforow .detail { float: left; margin-left: 0px; width: 90%; }
.infopage.document .inforow .no-img-icon { width: 5%; padding: 10px; text-align: center; font-size: 35px; margin-right: 10px; color: var(--color1); margin-left: 10px; }

@media screen and (max-width: 991px) {
	.infopage.document .inforow .no-img-icon { box-shadow: unset; width: 0%; float: left; font-size: 22px; padding: 0; margin-left: 0px; }
    .infopage.document .inforow .detail { float: unset; margin-left: 0px; width: 100%; padding: 0 20px 0px 30px; }  
}

/******** Content: Article ************/
.article-title { padding: 0; margin-bottom: 30px; }
.article-date {margin-top: 15px; text-align: right;}
.article-introimage {margin-bottom: 15px; width: 100%;}
.article-introimage img {max-width: 100%; margin-left: auto; margin-right: auto; display: block;}
.article-date .article-social {display: inline;}

.article-detail {}
.article-document {}
.article-gallery {}
.article-gallery .img-container {width: 100%; /*padding-top: 100%;*/ padding-top: 75%; /*padding-top: 66.66%;*/ /*padding-top: 62.5%;*/ position: relative; cursor: pointer; margin-bottom: 15px;}
.article-gallery .img-container .img-inner {position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.article-gallery .img-container .img-inner img {object-fit: cover; width: 100%; height: 100%;}

.article-rss-zone {margin-bottom: 0; margin-top: 15px; }
.rss-feed img {width: 30px; margin-left: 5px; display: inline-block;}

/*************** Input date calendar icon *****************/
.inner-addon { position: relative; }
.inner-addon .fa { position: absolute; padding: 10px; pointer-events: none; }
.left-addon .fa  { left:  15px;}
.right-addon .fa { right: 15px;}
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }
/****************Check box & radio ******************/
.checkbox.with-icheck, .radio.with-icheck {}
.checkbox.with-icheck label {padding-left: 0px; padding-top: 0;}
.checkbox.with-icheck div[class*=icheckbox] {margin-right: 5px; background-color: #fff; }
.radio.with-icheck label {padding-left: 0px; padding-top: 0;}
.radio.with-icheck div[class*=iradio] {margin-right: 5px; background-color: #fff; border-radius: 50%; }


/******************* Bootstrap Overwrite ******************/
.form-control {font-size: 1.8rem; height: 37px; }
.form-control-static { /*padding-top: 2px; */}
.form-control-feedback { right: 1.6rem; }
.modal-dialog .modal-header { background: #0099CC; font-weight: bold; color: #FFFFFF; }
.modal-dialog .btn.btn-primary { background: linear-gradient(to left, #0170b8, #2b5094); border-color: #2b5094; }
.btn { font-size: 1.8rem; padding: 6px 12px 4px; }
.btn.btn-primary { background: linear-gradient(to left, #0170b8, #2b5094); border-color: #2b5094; }

/** D2MS Widget **/
.d2ms-headerimage {position: relative;}
.d2ms-headerimage img {max-width: 100%;}
.d2ms-headerimage .menuheaderzone {position: absolute; bottom: 15px; padding: 15px; left: 0; width: 100%;}
.d2ms-headerimage .menuheaderzone .menuheadertitle {margin-bottom: 15px; font-weight: bold;}
.d2ms-headerimage .menuheaderzone .menuheadersubtitle {}

.d2ms-widget {}

.d2ms-template-preview-main {padding: 250px 15px; text-align: center; background-color: #eee; border: 2px dashed #ccc; font-weight: bold;}

/*** offCanvas ***/
#offCanvas {}
#offCanvas .close-offcanvas {position: absolute; top: 10px; right: 10px; height: 22px; width: 22px; line-height: 22px; font-size: 12px; text-align: center; font-size: 12px; color: #fff; border-radius: 50%; background: rgba(0,0,0,0.3);} 
#offCanvas .offcanvas-inner { margin-top: 35px;} 

.d2ms-widget-menu-wrapper {position: relative;}
.d2ms-widget-menu-wrapper #toggleCanvas {float: right;}
.d2ms-widget-menu-wrapper .d2ms-widget-menu {float:left;}
.d2ms-widget-menu-wrapper.with-offcanvas .d2ms-widget-menu {margin-right: 30px;}
.d2ms-widget-menu-wrapper.with-offcanvas #toggleCanvas {position: absolute; top: 5px; right: 0px;}

#offCanvas { background: var(--color1) !important; }
#offCanvas .offcanvas-inner { margin-top: 0 !important; }
.widget-menu-3 > ul > li:last-child > a, .widget-menu-3 > ul > li.last > a { border-bottom: 1px solid var(--color1) !important; }
.widget-menu-3 > ul > li > a:hover, .widget-menu-3 > ul > li.active > a, .widget-menu-3 > ul > li.open > a { color: #eeeeee; background: var(--color1) !important; background: var(--color1) !important; background: -moz-linear-gradient(#2677C7, #1992d1); background: -o-linear-gradient(#2677C7, #1992d1); background: -ms-linear-gradient(#2677C7, #1992d1); background: var(--color1) !important; }
.widget-menu-3 > ul > li > a { padding: 15px 20px; border-left: 1px solid var(--color1) !important; border-right: 1px solid var(--color1) !important; border-top: 1px solid var(--color1) !important; cursor: pointer; z-index: 2; font-size: 14px; font-weight: bold; text-decoration: none; color: #ffffff; text-shadow: 0 1px 1px rgb(0 0 0 / 35%); background: var(--color1) !important; background: var(--color1) !important; background: -moz-linear-gradient(#226BB2, #2677C7); background: -o-linear-gradient(#226BB2, #2677C7); background: -ms-linear-gradient(#226BB2, #2677C7); background: var(--color1) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%); }
.widget-menu-3 > ul > li.open > a { box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 1px rgb(0 0 0 / 15%); border-bottom: 1px solid var(--color1) !important; }
.widget-menu-3 ul ul li a { cursor: pointer; border-bottom: 1px solid var(--color2) !important; border-left: 1px solid var(--color2) !important; border-right: 1px solid var(--color2) !important; padding: 10px 20px; z-index: 1; text-decoration: none; font-size: 13px; color: #eeeeee; background: var(--color2) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%); }
.widget-menu-3 > ul > li > a { font-family: 'DBHelvethaicaX'; font-size: 22px !important; font-weight: normal !important; }
.widget-menu-3 ul ul li a { font-family: 'DBHelvethaicaX'; font-size: 20px !important; }


/*************** custom data sweet alert ***************/
.swal2-title { font-size: 26px; font-family: 'DBHelvethaicaX';}
.swal2-content { font-size: 22px; font-family: 'DBHelvethaicaX';}
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel { font-size: 22px; font-family: 'DBHelvethaicaX'; line-height: 1;}
#lightboxOverlay { width: 100% !important; }

/*************** i-service / e-service ***************/

.banner-list .result-list-panel { display: flex; flex-direction: row; flex-wrap: wrap; gap: 50px 10px; justify-content: space-between; padding: 0 10px; }
.banner-list .result-list-panel .banner-box { width: 20%; }
/* .banner-list .result-list-panel .banner-box img { box-shadow: rgb(0 0 0 / 15%) 0px 15px 25px, rgb(0 0 0 / 5%) 0px 5px 10px; } */
.banner-list .banner-box .banner-title { background: var(--color1); padding: 10px; height: 85px; overflow: hidden; font-size: 24px; color: #fff; }
.banner-list .banner-box .banner-title a { color: #fff; }
.banner-list .banner-box img { width: 100%; }

/*************** i-service / e-service ***************/

.iservice-section .iservice-box { text-align: center; position: relative; overflow: hidden; padding: 15px ; box-shadow: 5px 5px 5px rgb(204 202 202 / 34%); background: rgb(241 241 241 / 46%); margin-bottom: 15px; border-radius: 12px; }
.iservice-section .iservice-box a img { border-radius: 50%; height: 140px ; width: 140px ; position: relative ; background: white; padding: 3px; }
.iservice-section .iservice-title { height: 65px; font-size: 21px; }
.iservice-section .iservice-title a { color: #000000; }


.eservice-box { margin-left: 0%; margin-right: 0%; padding-top: 15px; padding-bottom: 15px; }
.eservice-box > a { display: block; float: left; width: 250px; }
.eservice-box img { width: 314px; height: 200px; object-fit: cover; border-radius: 0; box-shadow: 0 3px 10px 0 rgb(0 0 0 / 34%); object-position: top; }
.eservice-box .eservice-title { margin-left: 340px; margin-right: 20px; }
.eservice-box .eservice-title a { color: var(--colorText); font-size: 25px; font-weight: normal; font-family: "DBHelvethaicaX"; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 70px; }
.eservice-box .eservice-intro-text { margin-left: 340px; margin-right: 20px; }
.eservice-box .eservice-intro-text a { font-family: 'DBHelvethaicaX'; font-size: 22px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 45px; margin-bottom: 10px; line-height: 23px; color: var(--colorText); }
.eservice-box .eservice-intro-department { margin-left: 340px; margin-right: 20px; }
.eservice-box .eservice-intro-department a { font-family: 'DBHelvethaicaX'; font-size: 22px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 45px; margin-bottom: 10px; line-height: 23px; color: var(--colorText); }
.eservice-button { display: none !important; }

.iservice-section .search .flex-container { display: flex; align-items: center; justify-content: flex-end; }
.iservice-section .search .flex-box { padding: 10px; }
.iservice-section .search .flex-box.box1 { width: 47%; padding-right: 0; padding-left: 0; }
.iservice-section .search .flex-box.box2 { width: 15%; }
.iservice-section .search .flex-box.box3 { width: 15%; }
.iservice-section .search .flex-box.box4 { width: 15%; }
.iservice-section .search .flex-box.box5 { width: 8%;  padding-right: 0; }
.iservice-section .search .flex-box.box5 button{ width: 100%; }

@media screen and (max-width: 991px) {
	.eservice-box > a { display: block; float: unset; width: 100%; margin-bottom: 15px; }  
    /* .eservice-box > a { width: 100%; padding-top: 270px; position: relative; } */
    .eservice-box img { width: 100%; height: 250px; }
    .eservice-box .eservice-title, .eservice-box .eservice-intro-text, .eservice-box .eservice-intro-department { margin-left: 0; margin-right: 0; width: 100%; }

    .iservice-section .search .flex-container { display: flex; align-items: center; justify-content: flex-end; flex-direction: column; }
    .iservice-section .search .flex-box { padding: 5px 10px !important; width: 100% !important; text-align: center; }
}

.eservice-lists span.pull-right { position: absolute; right: 10px; top: 10px; }

/* Shine */
@-webkit-keyframes shine {100% {left: 125%;}}
@keyframes shine {100% {left: 125%;}}

.iservice-box {position: relative; overflow:hidden;}
.iservice-box::before {position: absolute;top: 0;left: -75%;z-index: 2;display: block;content: '';width: 50%;height: 100%;background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgb(220 221 222 / 32%) 100%);background: linear-gradient(to right, rgb(255 255 255 / 0%) 0%, rgb(220 221 222 / 32%) 100%);-webkit-transform: skewX(-25deg);transform: skewX(-25deg);}
.iservice-box:hover::before {-webkit-animation: shine .75s;}



 /*************** weblink ***************/
 .weblink-box { margin-left: 0%; margin-right: 0%; padding-top: 15px; padding-bottom: 15px; }
 .weblink-box > a { display: block; float: left; width: 250px; }
 .weblink-box img { width: 314px; height: 200px; object-fit: cover; border-radius: 0; box-shadow: 0 3px 10px 0 rgb(0 0 0 / 34%); object-position: top; }
 .weblink-box .weblink-title { margin-left: 340px; margin-right: 20px; }
 .weblink-box .weblink-title a { color: var(--colorText); font-size: 25px; font-weight: normal; font-family: "DBHelvethaicaX"; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 70px; }
 .weblink-box .weblink-intro-text { margin-left: 340px; margin-right: 20px; }
 .weblink-box .weblink-intro-text a { font-family: 'DBHelvethaicaX'; font-size: 22px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 45px; margin-bottom: 10px; line-height: 23px; color: var(--colorText); }
 .weblink-box .weblink-intro-department { margin-left: 340px; margin-right: 20px; }
 .weblink-box .weblink-intro-department a { font-family: 'DBHelvethaicaX'; font-size: 22px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 45px; margin-bottom: 10px; line-height: 23px; color: var(--colorText); }
 .weblink-button { display: none !important; }
 .weblink-category { background: var(--color1) !important; }
 .weblink-index { background: var(--color1) !important; }

 @media screen and (max-width: 991px) {
	.weblink-box > a { display: block; float: unset; width: 100%; margin-bottom: 15px; }  
    .weblink-box img { width: 100%; height: 250px; }
    .weblink-box .weblink-title, .weblink-box .weblink-intro-text, .weblink-box .weblink-intro-department { margin-left: 0; margin-right: 0; width: 100%; }
}


/*************** Content ***************/
.btn-primary-search { background-color: var(--color1); border-color: var(--color1); color: white; }

/*************** Content ***************/
.article-search-zone { margin-bottom: 30px; margin-top: 30px; }
.info .article-search-zone #ArticleSearchCategory, .info .article-search-zone #ArticleSearchText { width: 250px; display: inline-block; }
.info .article-search-zone .input-date.has-feedback { width: 140px; display: inline-block; }
.keyword {background: var(--color1); color: #fff; }
.keywordtext { font-family: 'DBHelvethaicaX Med'; font-size: 24px; float: left; margin-right: 15px; position: relative; top: 2px; }
.article-document .docname { background: #eee; border-radius: 5px; padding: 10px 15px; }
.article-detail .title-label { padding: 2px 10px 3px !important; }
.article-detail .video-embed { width: 100%; height: 510px; }
video { display: inline-block; vertical-align: baseline; width: 90%; }
.article-datail-template-6 .docdetail { background: var(--color1) !important;  }
.article-document .docdetail-date a { color: #fff; }
.article-document .docdetail-date { font-weight: normal; font-size: 20px;  }


@media screen and (max-width: 991px) {
	.info .article-search-zone #ArticleSearchCategory, .info .article-search-zone #ArticleSearchText { width: 100% !important; margin-bottom: 10px; }
    .info .article-search-zone .input-date.has-feedback { width: 100% !important; display: inline-block; margin-bottom: 10px; }
    .info .article-search-zone button { width: 100% !important; }
    .article-detail .video-embed { width: 90%; height: 330px; }
    .pull-right { float: unset !important; }
}

/*************** Calendar ***************/

.info .calendar-search-zone #CalendarSearchCategory, .info .calendar-search-zone #CalendarSearchText { width: 250px; display: inline-block; }
.info .calendar-search-zone .input-date.has-feedback { width: 140px; display: inline-block; }
.calendar-search-zone { margin-bottom: 25px; margin-top: 15px; }

@media screen and (max-width: 991px) {
	.info .calendar-search-zone #CalendarSearchCategory, .info .calendar-search-zone #CalendarSearchText { width: 100%; margin-bottom: 10px; }
    .info .calendar-search-zone .input-date.has-feedback  { width: 100% !important; display: inline-block; margin-bottom: 10px; }
    .info .calendar-search-zone button { width: 100% !important; }
}

/*************** Gallery ***************/

.gallery-search { display: inline-block; width: 100%; margin-bottom: 15px; margin-top: 15px; }

/*************** RSS ***************/
#rss-section .item-list { padding: 15px; }
#rss-section .item-list:nth-child(odd) { background: #eee; }
#rss-section .item-header {  font-weight: bold; padding: 10px 15px; border-top: solid 1px #CCC; border-bottom: solid 2px #CCC; background: #c7c7c7; }
#rss-section .item-list-title img { width: 25px; height: 25px; margin-left: 10px; }

.info .article-search-zone #ItemSearchCategory, .info .article-search-zone #ItemSearchText { width: 250px; display: inline-block; }
.info .article-search-zone .input-date.has-feedback { width: 140px; display: inline-block; }

@media screen and (max-width: 991px) {
	.info .article-search-zone #ItemSearchCategory, .info .article-search-zone #ItemSearchText { width: 100%; margin-bottom: 10px; }
    .info .article-search-zone .input-date.has-feedback { width: 100% !important; display: inline-block; margin-bottom: 10px; }
    .info .article-search-zone button { width: 100% !important; }
}

/*************** FAQ ***************/
.faq-detail { height: auto !important; font-family: 'DBHelvethaicaX'; border-width: 12px; border-style: solid; border-radius: 18px; border-color: #EEEEEE; }

/*************** eform2 ***************/
.eform .print { position: absolute; top: 32px; right: 35px; }
.eform .form-inline { margin-right: 20px !important; }
#formPreview { font-size: 22px; }
.divPreview .title-panel .title { font-family: 'DBHelvethaicaX Med'; font-size: 25px; font-weight: normal; }
.divPreview .bootstrap-dialog-title { color: #fff; display: inline-block; font-family: 'DBHelvethaicaX Med' !important; font-weight: normal !important; font-size: 26px !important; }

.pagination>li>a, .pagination>li>span { border: none; border-radius: 50%; margin: 5px; line-height: 19px; }
.pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; width: auto; }
.paging { text-align: center; }

/* ---------------------- News Letter -------------------- */

#Newsletter .panel-body .title-label-new { color: #fff; padding: 5px 15px; background: var(--color1); margin-bottom: 15px; }
#Newsletter label.textname-news.col-md-2.control-label { padding-left: 15%; width: 40%;}
#Newsletter .form-group .divControl { width: 60%; padding-right: 10%; }

/* ---------------------- Site Map -------------------- */
.just-padding .menugroup { font-family: 'DBHelvethaicaX Med'; font-size: 24px; }



.d2ms-headerimage img { max-width: 100%; height: 320px; width: 100%; object-fit: cover; }
#d2ms-section-section-header- .d2ms-headerimage {
    box-shadow: rgb(0 0 0 / 15%) 0px 15px 25px, rgb(0 0 0 / 5%) 0px 5px 10px;
}
#d2ms-section-section-header- .d2ms-headerimage .menuheaderzone { text-align: center; position: absolute; background: #236093; background: rgb(113 113 113 / 60%); width: 300px; bottom: 0%; color: #fff;  font-weight: bold; padding: 10px; font-size: 35px; letter-spacing: 1px; left: 8%; height: 100%; padding-top: 9%; }
.d2ms-headerimage .menuheaderzone .menuheadersubtitle { font-weight: normal; }


.breadcrumb { padding: 0% 0% 0% 7%; background-color: #eee; margin-bottom: 0px; overflow: hidden; white-space: nowrap; width: 100%; }
.breadcrumb li { font-size: 19px; line-height: 19px;}
.title-panel { margin-top: 20px; }
label { font-weight: normal; font-family: 'DBHelvethaicaX Med'; }
.infopage .information-panel .title, .title-panel .title .infopage .information-panel .title, .title-panel .title { font-family: DBHelvethaicaX Med; font-size: 33px; font-weight: normal; color: var(--colorText) !important; width: 100%; line-height: 36px; border-left: 3px solid var(--color1); padding-left: 15px; padding-bottom: 0px; padding-top: 5px; margin-bottom: 30px; }
.btn-default.btn-on.active { background-color: var(--color1) !important; color: white; }
.btn.btn-primary { background: var(--color1) !important; border-color: var(--color1) !important; }
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { background-color: var(--color1) !important; border-color: var(--color1) !important; }
.recommendpage { display: none; }
.article-date-date, .article-date-view, .article-date-print { margin-right: 5px; }


/* -------------------------- bootstrap-dialog --------------------------------------------- */
.bootstrap-dialog .bootstrap-dialog-title {
	font-size: 30px !important;
	font-family: 'DBHelvethaicaX' !important;
	font-weight: normal !important;
	padding: 10px 5px;
	line-height: 30px; 
}
.bootstrap-dialog .bootstrap-dialog-body .bootstrap-dialog-message {
	font-size: 19px;
}

/* -------------------------- bootstrap-dialog share --------------------------------------------- */
.dialogShareSocial.bootstrap-dialog {
    font-family: 'K2D';
}
.dialogShareSocial.bootstrap-dialog .suggest {
    margin-top: 10px;
    font-size: 14px;
}

/* x-twitter */
.fa.custom-x-twitter {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('../fonts/x-twitter.svg');
    background-size: contain;
    background-repeat: no-repeat;
}