/***************** font-face *****************/
@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 {
	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-Medium.ttf?') format('truetype');
	font-weight: bold;
	font-style: normal;
}

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

/************** font-face : DB HelvethaicaX  *****************/
@font-face {
    font-family: 'DB HelvethaicaX Li';
    src: url('../fonts/DBHelvethaicaX Li.TTF');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DB HelvethaicaX Med';
    src: url('../fonts/DBHelvethaicaX Med.TTF');
    font-weight: normal;
    font-style: normal;
}
@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-Regular';
	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-bold';
    src: url('../fonts/DBHelvethaicaX Med.TTF');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'THSarabun';
	src: url('../fonts/THSarabun.ttf?') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'THSarabun';
	src: url('../fonts/THSarabun-Bold.ttf?') format('truetype');
	font-weight: bold;
	font-style: normal;
}


/************** font-face : Cordia New *****************/

@font-face {
    font-family: 'Cordia New';
    src: url('../fonts/Cordia New.ttf?') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Cordia New';
    src: url('../fonts/Cordia New Bold.ttf?') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Cordia New';
    src: url('../fonts/Cordia New Italic.ttf?') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Cordia New';
    src: url('../fonts/Cordia New Bold Italic.ttf?') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/************** font-face : THSarabunIT๙ *****************/

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


/************** Layout ****************/
body {
	font-family: "Tahoma";
	font-size: 13px;
}

.content-wrapper {
	/* background-image: url('../img/white-bg.png'); */
	background-color: #fff;
}
.main-header {border-bottom: 2px solid #3abfbb;}
.main-header .logo {font-size: 1.2em;}
.main-header .logo .logo-lg img {height: 35px;}
.main-footer {
	background-color: #1c0044;
	/* background-color: #080B10; */
	/* background-image: url('../img/black-bg.png'); */
 	background-repeat: no-repeat;
 	background-position: left;
	color: #fff;
	font-size: 12px;
}

.title-label {
	color: #ffffff;
	padding: 8px 10px;
	border-bottom:  none;
	margin-bottom: 25px;
	background: #462b6e;
	font-size: 24px;
    font-family: 'DB HelvethaicaX Med';
}
.title-label .fa { color: #fff; margin-right: 5px; position: relative; top: 3px; }

/***************** 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;
}


/*********** BOX **************/
.box-widget { box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px; }
.box-page > .box-header {
	background: #123558; 
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.box-header.with-border {border-bottom: none;}
.box-page > .box-header .box-title{
 	font-family: 'ThaiSans Neue' ;
 	font-weight: bold;
 	font-size: 26px;
 	color: #ffffff;
}

.box-page .box-title-submenu {
	margin-bottom: -10px;
}
.box-page .box-title-submenu .box-title-submenu-item {
	display: inline-block;
	padding: 0 10px;
	font-weight: bold;
	height: 45px;
	vertical-align: middle;
	line-height: 45px;
 	font-size: 14px;
}
.box-page .box-title-submenu .box-title-submenu-active {
	border-bottom: 3px solid #3A8ADC;
	color: #fff;
	cursor: pointer;
}
.box-page .box-title-submenu .box-title-submenu-item a {
	color: #fff;
}
.box-page .box-title-submenu .box-title-submenu-item a:hover {
	color: #ededed;
}

/*********** Button Zone ******************/
.button-zone {
	margin-top: 5px;
	text-align: right;
}
.button-zone.button-zone-top {
	margin-bottom: 20px;
}
.button-zone .btn {
 	font-family: 'ThaiSans Neue' ;
 	font-size: 20px;
}

/***************** panel *****************/
.panel-detail {
	font-size: 16px;
}
.panel-detail .form-group {margin-bottom: 25px;}
.panel-detail input, .panel-detail select, .panel-detail textarea, .panel-detail .divControl {
	font-family: tahoma;
	font-size: 14px;
}
.panel-detail .help-block {font-size: 16px; margin-bottom: 0px; color: #20409A;}
.panel-detail label.control-label { padding-top: 5px;}
.panel-detail .form-inline.radio {padding-top: 2px;}
.panel-detail .radio-inline {padding-top: 0px;}
.panel-detail .btn {font-size: 13px;}

/************** Validation ***************/
.panel-detail .help-block.error, .help-block.error  {color: red; font-style: italic;}

.form-group .labelRequest::after {
	color: red;
	content: " *";
}

/************ Search Panel *****************/
.searchPanel {
	font-size: 16px;
}
.searchPanel input[type=text], .searchPanel select, .searchPanel .checkbox {
	font-family: 'tahoma' ;
	font-size: 13px;
	height: 41px;
}
.searchPanel label.control-label {}
.searchPanel .btn {font-size: 13px; padding-top: 4px; padding-bottom: 5px;}

/****************Check box & radio ******************/
.checkbox.with-icheck, .radio.with-icheck {
	
}
.checkbox.with-icheck label {
	padding-left: 0px;
}
.checkbox.with-icheck div[class*=icheckbox] {
	margin-right: 5px;
}
.radio.with-icheck label {
	padding-left: 0px;
	font-family: "cordia new";
	font-size: 23px;
}
.radio.with-icheck div[class*=iradio] {
	margin-right: 5px;
}

/**************** Form Config *****************/
.form-config {padding: 15px 15px 0; background-color: #eee; border: 1px solid #D2D6DE; margin-top: 5px;}
.form-config .form-group {margin-left: 0px; margin-right: 0px;}
.panel-detail .form-config label.control-label, 
.form-config label.control-label  {padding-top: 0;}

/********* DataTable *************/
.dataTables_wrapper {
	clear: both;
	position: relative;
}
.dataTable caption {
	background: #462b6e;
	/* background: linear-gradient(to right, #462b6e, #A13670); */
	color: #ffffff;
	padding-left: 10px; 
	padding-right: 10px;
	font-size: 24px;
    font-family: 'DB HelvethaicaX Med';
}
.dataTable thead tr th {
	background: linear-gradient(#E6E6E6, #FFFFFF); 
	vertical-align: middle;
	font-size: 22px;
    font-family: 'DB HelvethaicaX Med';
	font-weight: normal;
}
.dataTable tbody tr td {
	font-size: 14px;
}
.dataTable tbody tr td a {
	word-break: break-word; 
	display: block;
}
.dataTable .bottom {font-size: 14px;}
.dataTable .bottom select {font-size: 16px;}
.dataTable .bottom .dataTables_info , .dataTable .bottom .dataTables_length {float: left; width: auto;}
.dataTable .bottom .dataTables_paginate{float: right; width: auto;}
.dataTable .bottom .dataTables_length {padding-top: 4px; margin-left: 10px; padding-left: 10px; border-left: 1px solid #ccc;}

.skin-smart .pagination > .active > a, 
.skin-smart .pagination > .active > a:focus, 
.skin-smart .pagination > .active > a:hover, 
.skin-smart .pagination > .active > span, 
.skin-smart .pagination > .active > span:focus, 
.skin-smart .pagination > .active > span:hover {
	background-color: #462b6e;
	border-color: #462b6e;
}

/**************** Map *****************/
.mapThai .jqvmap-zoomin, .mapThai .jqvmap-zoomout {width: auto; height: auto;}
.mapDesc {margin-top: 10px;}
.mapDesc .box-desc {display: inline-block; padding: 5px;}
.mapDesc .box-color {width: 25px;}

/**************** Overwrite ****************/
.help-block { font-size: 12px; font-style:italic }
.skin-smart .btn:not(.bs-placeholder) {
	/* font-size: 16px; */
	font-size: 22px;
    font-family: 'DBHelvethaicaX';
	padding-bottom: 3px;
}
.dropdown-toggle { font-family: tahoma !important; }
.skin-smart .btn-primary {
  color: #fff;
  background: #462b6e;
  background-color: #462b6e;
  border-color: #462b6e;
}
.skin-smart .btn-primary:focus,
.skin-smart .btn-primary.focus {
  color: #fff;
  background-color: #432c69;
  border-color: #432c69;
}
.skin-smart .btn-primary:hover {
  color: #fff;
  background-color: #432c69;
  border-color: #432c69;
}
.skin-smart .btn-primary:active,
.skin-smart .btn-primary.active,
.skin-smart .open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #432c69;
  border-color: #432c69;
}
.skin-smart .btn-primary:active:hover,
.skin-smart .btn-primary.active:hover,
.skin-smart .open > .dropdown-toggle.btn-primary:hover,
.skin-smart .btn-primary:active:focus,
.skin-smart .btn-primary.active:focus,
.skin-smart .open > .dropdown-toggle.btn-primary:focus,
.skin-smart .btn-primary:active.focus,
.skin-smart .btn-primary.active.focus,
.skin-smart .open > .dropdown-toggle.btn-primary.focus {
  color: #fff;
  background-color: #432c69;
  border-color: #432c69;
}
.skin-smart .btn-primary:active,
.skin-smart .btn-primary.active,
.skin-smart .open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.skin-smart .btn-primary-light,
.skin-smart .btn-primary-light:focus,
.skin-smart .btn-primary-light:hover,
.skin-smart .btn-primary-light:active {
	color: #462b6e;
	background: #fff;
	background-color: #fff;
	border-color: #462b6e;
}
/* .skin-smart .btn-primary .badge {
  color: #EA09B1;
  background-color: #fff;
}

.skin-smart .box.box-primary {
  border-top-color: #EA09B1;
}
.skin-smart .box.box-solid.box-primary {
  border: 1px solid #EA09B1;
}
.skin-smart .box.box-solid.box-primary > .box-header {
  color: #ffffff;
  background: #EA09B1;
  background-color: #EA09B1;
}

.skin-smart .box.box-info {
  border-top-color: #FA76D9;
}
.skin-smart .box.box-solid.box-info {
  border: 1px solid #FA76D9;
}
.skin-smart .box.box-solid.box-info > .box-header {
  color: #ffffff;
  background: #FA76D9;
  background-color: #FA76D9;
}
.skin-smart .btn-info {
  background-color: #FA76D9;
  border-color: #FF56D4;
}
.skin-smart .btn-info:hover,
.skin-smart .btn-info:active,
.skin-smart .btn-info.hover {
  background-color: #FF56D4;
} */

/************* overwrite ***************/
.skin-smart .sidebar {background-color: #123558;}
.skin-smart .sidebar-menu {font-family: 'ThaiSans Neue' ; font-size: 18px;}
.skin-smart .sidebar-menu > li > a {border-left: 3px solid transparent;font-weight: normal; padding-left: 10px;}
.skin-smart .sidebar-menu > li.active > a {font-weight: normal; background-color: #462b6e;}
.skin-smart .sidebar-menu li *{color: white;}
.skin-smart .sidebar-menu li.header {font-size: 16px;}
.skin-smart .sidebar-menu > li > .treeview-menu {background-color: #88bdf3;}
.skin-smart .sidebar-menu > li > .treeview-menu li em {color:#333;}
.skin-smart .sidebar-menu .treeview-menu > li > a  {font-size: 16px; color: #333;}
.skin-smart .sidebar-menu li>a>.pull-right.arrow { width: 15px; margin-right: 0px; }
.skin-smart .user-panel {background-color: #1d7dde;}
.skin-smart .user-panel .user-panel-img {padding: 0px 5px ; text-align: center;}
.skin-smart .user-panel .user-panel-img .img-logo {max-width: 100%;}
.skin-smart .user-panel .user-system {font-weight: bold; font-size: 18px; color: #CCCCCC; text-align: center; font-family: "ThaiSans Neue"; padding: 5px;}
.skin-smart .user-panel .user-system-sub {font-family: 'ThaiSans Neue'; font-weight: bold; font-size: 18px; color: #FFFFFF; text-align: center; margin-bottom: 0px; margin-top: 5px;}
.skin-smart.sidebar-collapse .user-panel .user-panel-img {padding: 0px;}
.skin-smart.sidebar-collapse .user-panel .user-system {display: none;}
.skin-smart.sidebar-collapse .user-panel .user-system-sub {display: none;}
.skin-smart .divControl .jFiler-theme-default .jFiler-input {margin-bottom: 0px;}

.nav-tabs-custom>.nav-tabs>li.active {border-top-color: #f9eb21;}

.noty_type_warning .noty_text > span {display: inline-block;}
.noty_type_warning .text-noty-warning {float: left; text-align: left; display: inline-block;}

/************* overwrite : icheck ***************/
.icheckbox_minimal-blue.disabled {background-position: 0 0;}
.icheckbox_minimal-blue.checked.disabled {background-position: -40px 0;}
.iradio_minimal-blue.disabled {background-position: -100px 0; }
.iradio_minimal-blue.checked.disabled {background-position: -140px 0; }

.icheckbox_minimal-purple.disabled {background-position: 0 0;}
.icheckbox_minimal-purple.checked.disabled {background-position: -40px 0;}
.iradio_minimal-purple.disabled {background-position: -100px 0; }
.iradio_minimal-purple.checked.disabled {background-position: -140px 0; }

/*** tbl schedule result ****/
.tbl-schedule-result { width: 100%; font-size: 14px; background-color: #fff;}
.tbl-schedule-result caption { background: #333; color: #ffffff; font-size: 16px; padding: 10px 10px; font-weight: bold; }
.tbl-schedule-result th, .tbl-schedule-result td.th { padding: 10px 10px; border: solid 1px #eee; text-align: center; font-size: 16px; border-bottom: none; background-image: linear-gradient(#ccc, #fff); font-weight: bold; }
.tbl-schedule-result td { padding: 10px 15px; border: solid 1px #eee;  }
.tbl-schedule-result td.cell-input {padding-left: 5px; padding-right: 5px;}

/*** battle result ****/
.battle-result {}
.battle-result .box {border: 1px solid #000; border-radius: 5px;}
.battle-result .box .flag {max-width: 120px; text-align: center;}
.battle-result .box .box-title {margin-top: 10px; margin-bottom: 5px; font-weight: bold;}
.battle-result .box table {width: 100%;}
.battle-result .box table td {padding: 15px 15px; vertical-align: middle;}
.battle-result .box table td.score {width: 120px; background-color: #000; text-align: center; font-size: 24px; color: #fff; font-weight: bold;}
.battle-result .vs {text-align: center; font-weight: bold; padding: 45px 15px;}
.battle-result .resulttype { }
.battle-result .resulttype-W {color:green;font-weight: bold;}
.battle-result .resulttype-L {color:red;font-weight: bold;}
.battle-result .resulttype-D {color:brown;font-weight: bold;}

/*** battle result : sub ****/
.battle-sub-zone {}
.battle-sub {padding: 15px; background-color: #F2F2F2; border: solid 1px #CCCCCC; position: relative; margin-bottom: 15px;}
.battle-sub .remove {position: absolute; top: 15px; right: 15px; z-index: 100;}
.battle-sub-button-zone {margin-bottom: 15px; text-align: right;}

.result-status-W { font-weight: bold; color: #333; }
.result-status-R { font-weight: bold; color: orange; }
.result-status-L { font-weight: bold; color: orange; }
.result-status-U { font-weight: bold; color: red; }
.result-status-O { font-weight: bold; color: green; }

/***************** Tab & validate *****************/
.nav-tabs li .warning {display: none;}
.nav-tabs li.warning .warning {display: inline-block;}

/*** jFiler ****/
.jFiler-items .icon-jfi-trash.jFiler-item-trash-action {display: inline-block;}

/****************** bootstrap-select *****************/
.bootstrap-select button.btn.dropdown-toggle.btn-default,
.bootstrap-select>.dropdown-toggle.bs-placeholder, 
.bootstrap-select>.dropdown-toggle.bs-placeholder:active, 
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus, 
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover { 
	color: #555;
    background-image: unset;
    font-size: 14px;
    background: no-repeat;
    padding: 6px 15px;
    border-radius: 0;
}
.bootstrap-select .dropdown-menu>li>a { color: #555; }
.bootstrap-select .dropdown-menu>.active>a { color: #fff; }

/*************** custom data sweet alert ***************/
.swal2-content { font-family: "cordia new"; font-size: 23px; }
.swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel { font-size: 18px; font-family: 'DBHelvethaicaX'; padding: 10px 25px; }
#swal2-content { line-height: 1.6; }
.swal2-title { font-family: 'DB HelvethaicaX Med'; font-size: 26px; font-weight: normal; }
.swal2-container.swal2-shown { z-index: 2000; }

/****************** custom data table *****************/
.dataTable .bottom { text-align: center; }
.dataTable .bottom .dataTables_paginate { float: unset; display: inline-block; }
.dataTable .bottom .dataTables_length { float: right; margin-left: 0; padding-left: 0; border: none; }

/*************** default responsive css ****************/
@media (max-width: 991px) {
	h3.box-title { font-size: 22px !important; }
	.btn-primary, .btn-warning, .btn-danger, .btn-default { font-size: 19px !important; }
	.panel-detail { font-size: 19px !important; }
	.report-table caption { font-size: 19px !important; }
	label.control-label { font-size: 19px !important; }
	.title-label{ font-size: 20px !important; }
	th { padding: 5px 10px !important; font-size: 19px !important; }
	table.report-table { min-width: 100px; }
	table.report-table thead tr:nth-child(1) th:nth-child(1) { min-width: unset; }
	td { padding: 5px 10px !important; font-size: 18px !important; }
	.dataTable caption { font-size: 20px !important; }
	.filter-option-inner-inner { font-size: 18px !important; }
	.panel-detail .form-group { margin-bottom: 20px !important; }
	.pagination>li>a { font-size: 17px !important; margin-top: 5px !important; margin-bottom: 5px !important; }
	.radio.with-icheck label { display: block !important; margin: 10px 0px !important; }
	.checkbox.with-icheck label { display: block !important; }
	.jFiler-theme-default .jFiler-input { width: 100% !important; }
}
@media (max-width: 768px) {
	#btnDraft,
	#btnSave,
	#btnSearch,
	#btnReset,
	#btnPrint,
	#btnEdit,
	#btnDelete,
	#btnCancel,
	#btnReport,
	#btnTemplate,
	#btnAddPersonnel,
	#btnImportResult,
	#btnUpdateTop,
	#btnDeleteTop,
	#btnBackTop,
	#btnCancelTop,
	#btnSaveTop,
	#lstChangeStatus,
	#lnkChangeStatus,
	#btnBack { display: block; width: 100%; margin-bottom: 10px; }
	.input-group #btnSearch ,
	.input-group #btnReset ,
	.input-group #btnAdvance { display: inline-block; width: unset; padding-top: 6px; padding-bottom: 6px; }
	.input-group #btnAdvance { position: relative; bottom: 5px; }
}

/************** IPST Only responsive css ****************/
.modal-dialog { width: 80%; margin: 0 auto; margin-top: 15px; margin-bottom: 15px; }
.modal-dialog table.dataTable { width: 100% !important; }
@media (max-width: 768px) { .modal-dialog { width: 100%; margin-top: 0px; margin-bottom: 0px; } }
.bootstrap-dialog.type-primary .modal-header { background: none; box-shadow: 0px 2px 2px #ccc; }
.bootstrap-dialog .bootstrap-dialog-title { font-weight: bold; color: #462b6e; font-family: 'DB HelvethaicaX Med'; font-size: 24px; font-weight: normal; height: 30px; }
.modal-header .close { color: #462b6e; opacity: 1; font-weight: bold; position: relative; top: 3px; right: 3px; font-size: 30px;font-family: 'DB HelvethaicaX Med'; }

.box-page .box-title-submenu { margin-top: 15px; }
.box-page .box-title-submenu .box-title-submenu-item {
	margin-right: 5px;
	min-width: 100px;
	text-align: center;
	height: 40px;
	line-height: 40px;
	border: solid 1px #CCC;
	background-color: #8267aa;
	border-bottom: unset !important;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-size: 22px; 
	font-family: 'DB HelvethaicaX Med';
	font-weight: normal;
}
.box-page .box-title-submenu .box-title-submenu-item.box-title-submenu-active { border: solid 1px #462b6e; color: #fff; background: #462b6e; }



/************** DataTable (Status And Icon) ****************/
.check-icon-Y {color: red; font-size: 30px;}
.check-icon-Y:hover {color: #e50000;}
.check-icon-N {color: #61b73e; font-size: 30px;}
.check-icon-N:hover {color: #57a437;}

.status {color:white; display: block; text-align: center; border-radius: 5px; padding: 5px 15px; margin-top: -5px; margin-bottom: -5px; }
.status-Y {background-color: #61b73e; color:white !important; }
.status-Y:hover {background-color:#57a437; }
.status-N {background-color: #ffb100; color:white !important; }
.status-N:hover {background-color:#e59f00; }
.status-W {background-color: #ffb100; color:white !important; }
.status-W:hover {background-color:#e59f00; }
.check-status-Y {background-color: #ffb100; color:white !important; }
.check-status-Y:hover {background-color:#e59f00; }

.tag {width: 100px; text-align: center; border-radius: 15px; }
.tag-status-D {background-color: #ffb100; color:white;}
.tag-status-S {background-color: #61b73e; color:white;}
.tag-status-Y {background-color: #61b73e; color:white;}
.tag-status-N {background-color: #ffb100; color:white;}
.tag-status-W {background-color: #ffb100; color:white;}


.hashtag {width: 100px; text-align: center; border-radius: 4px; background-color: #462b6e; color: white; padding: 4px 8px; margin-right: 5px}

.dialog-header{color: #2D529A; font-family: 'ThaiSans Neue'; font-weight: bold; font-size: 26px;}

.contanier-contentcategory .table caption { background-color: #462b6e; color: #ffffff; font-weight: bold; padding-left: 8px; padding-right: 8px; font-size: 16px;}
.contanier-contentcategory .table thead tr > th { text-align: center; vertical-align: middle; font-size: 14px;}
.contanier-contentcategory .table tbody em { font-size: 18;}

.btn > em.fa { margin-right: 3px; position: relative; top: 2px; }

/************** END DataTable (Status And Icon) ****************/

.searchPanel .control-label {font-family: 'DB HelvethaicaX Med'; font-size: 22px; font-weight: normal; }
.box-page > .box-header .box-title { font-family: 'DB HelvethaicaX Med'; font-weight: normal; font-size: 26px; }
.box-page > .box-header .box-title em { margin-right: 5px; }
table.table-bordered tbody td { font-family: "cordia new"; font-size: 20px; }
.searchPanel input[type=text], .searchPanel select, .searchPanel .checkbox { font-size: 20px; height: 41px; font-family: "cordia new"; }
.bootstrap-select button.btn.dropdown-toggle.btn-default, .bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover { font-size: 22px; font-family: "cordia new" !important; border-radius: 5px; }
.searchPanel .form-control-static { font-family: 'DBHelvethaicaX'; font-size: 24px; word-break: break-word; }
.dataTable .bottom .dataTables_info, .dataTable .bottom .dataTables_length { float: unset; width: auto; font-family: "cordia new"; font-size: 22px; }
.dataTable .bottom .dataTables_info { float: left; }
.dataTable .bottom .dataTables_length { float: right; }
.pagination>li>a { background: #fafafa; color: #666; font-family: "cordia new"; font-size: 20px; }
.panel-detail label.control-label { padding-top: 5px; font-family: 'DB HelvethaicaX Med'; font-weight: normal; font-size: 24px !important; }
.panel-detail .form-control-static { font-family: "cordia new"; font-size: 24px; padding-top: 5px; word-break: break-word; }
th { font-family: 'DBHelvethaicaX'; font-size: 22px; font-weight: normal; }

section.content b { font-family: 'DB HelvethaicaX Med'; font-size: 22px; font-weight: normal; }
section.content table.table-bordered tbody td, section.content p { font-family: "cordia new"; font-size: 24px; vertical-align: top; padding-top: 15px; }
.panel-detail input, .panel-detail select, .panel-detail textarea, .panel-detail .divControl { font-family: "cordia new"; font-size: 22px; }
.panel-detail select { padding-top: 0px; }


input::-webkit-calendar-picker-indicator {
	display: none;
}

.panel-detail .radio-inline { padding-left: 0px; }
.panel-detail .radio-inline div[class*=iradio] { margin-right: 5px; }

.datepicker .year.disabled, .datepicker .month.disabled, .datepicker .day.disabled { color: #999; }