body{
	margin-top:60px;
	margin-bottom:40px;
	font-family: "Sarabun", sans-serif;
	font-size: 14px; color:#777;
}
.container{
	width:100%
}
.paging{
	text-align:right;
}
legend{
	font-family: "Sarabun", sans-serif;
	font-size: 14px; color:#777;
}

.checkbox {
	padding-left: 20px; 
 }
.checkbox label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 5px; 
}
.checkbox label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
.checkbox label::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    margin-left: -20px;
    padding-left: 3px;
    padding-top: 1px;
    font-size: 11px;
    color: #555555; }
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
    opacity: 0;
    z-index: 1; }
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
    font-family: "FontAwesome";
    content: "\f00c"; }
.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
    opacity: 0.65; }
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
	background-color: #eeeeee;
    cursor: not-allowed; }
.checkbox.checkbox-circle label::before {
    border-radius: 50%; }
.checkbox.checkbox-inline {
    margin-top: 0; }
.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
	background-color: #337ab7;
	border-color: #337ab7; }
.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
	color: #fff; }
.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
	background-color: #d9534f;
	border-color: #d9534f; }
.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
	color: #fff; }
.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
	background-color: #5bc0de;
	border-color: #5bc0de; }
.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
	color: #fff; }

.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
	background-color: #f0ad4e;
	border-color: #f0ad4e; }
.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
	color: #fff; }

.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
	background-color: #5cb85c;
	border-color: #5cb85c; }
.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
	color: #fff; }

.radio {
	padding-left: 20px; }
.radio label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 5px; }
.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out; }
.radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 11px;
    height: 11px;
    left: 3px;
    top: 3px;
    margin-left: -20px;
    border-radius: 50%;
    background-color: #555555;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
.radio input[type="radio"] {
    opacity: 0;
    z-index: 1; }
.radio input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.radio input[type="radio"]:checked + label::after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); }
.radio input[type="radio"]:disabled + label {
    opacity: 0.65; }
.radio input[type="radio"]:disabled + label::before {
        cursor: not-allowed; }
.radio.radio-inline {
    margin-top: 0; }
.radio-primary input[type="radio"] + label::after {
  background-color: #337ab7; }
.radio-primary input[type="radio"]:checked + label::before {
  border-color: #337ab7; }
.radio-primary input[type="radio"]:checked + label::after {
  background-color: #337ab7; }

.radio-danger input[type="radio"] + label::after {
  background-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::before {
  border-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::after {
  background-color: #d9534f; }

.radio-info input[type="radio"] + label::after {
  background-color: #5bc0de; }
.radio-info input[type="radio"]:checked + label::before {
  border-color: #5bc0de; }
.radio-info input[type="radio"]:checked + label::after {
  background-color: #5bc0de; }

.radio-warning input[type="radio"] + label::after {
  background-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::before {
  border-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::after {
  background-color: #f0ad4e; }

.radio-success input[type="radio"] + label::after {
  background-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::before {
  border-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::after {
  background-color: #5cb85c; }

input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after {
  font-family: 'FontAwesome';
  content: "\f00c"; }
input[type="checkbox"] .styled:checked + label::before,
input[type="radio"] .styled:checked + label::before {
  color: #fff; }
input[type="checkbox"] .styled:checked + label::after,
input[type="radio"] .styled:checked + label::after {
  color: #fff; }

/* Important */
.dropdown:hover .dropdown-menu{ display: block; }

/*
.dropdown-inline {
	display: inline-block;
	position: relative;
}
*/

/* ================================== This APP =================================================== */

.hr_logo{ position:absolute; top:8px; left:1%; font-family: 'Kodchasan', sans-serif; font-size:30px; color:#33cccc; }
.logo{ position:absolute; top:1px; left:1%; }
.nav-right{ padding-right:1%; }

@media (max-width:970px) { #top_logo{ display:none; } }
.lang{ cursor:pointer; }

/* Sub Button Menu */
@media only screen and (max-width: 400px) {
	#menu2{display:''}
}
@media only screen and (min-width: 770px) {
	#menu2{display:none}
}

/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  src: local('Kanit Regular'), local('Kanit-Regular'), url(https://fonts.gstatic.com/s/kanit/v3/RPQGAQk3DD66RypwKRnBKQ.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}

@font-face {
  font-family: 'Itim';
  font-style: normal;
  font-weight: 400;
  src: local('Itim'), local('Itim-Regular'), url(https://fonts.gstatic.com/s/itim/v2/K0fGzmj4WhCGfRyqF-GWtw.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}

@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 400;
  src: local('Prompt'), local('Prompt-Regular'), url(https://fonts.gstatic.com/s/prompt/v2/VcBIOGXxp08iW8zks9yUFPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}

.app-title{ font-size:18px; font-family: "Times New Roman", Times, serif; }
.app-header { font-family: "Sarabun", sans-serif; font-size:2rem; color:#000; text-align:center; }
.app-copyright{ font-size:12px; }
.pagination{ margin-top:0px; float:right; }
.page_info{
	float:left;
	color:#444444;
	font-size:12px;
	font-weight:bold;
	margin-top:5px;
}
.page_info_num{ font-weight:normal; }
.pagination_rec{ margin-top:0px; }
.keyId{ display:none; }
.mt25{ margin-top:25px; }
.mt20{ margin-top:20px; }
.mt10{ margin-top:10px; }
.mt5{ margin-top:5px; }
.mt0{ margin-top:0px; }
.td-number{ text-align:right; }
.control-label { font-weight:bold; color:#777; } /* Overwrite standard bootstrap control-label

select option{ font-size: 14px; }

#fsearch{ margin-top:0px; }

/* POPUP on modal */
.ui-autocomplete{
    z-index:1050;
    background-color: #DFFFDF;
	border: solid #888 1px;
}

.upper{ text-transform: uppercase; }

.processing{
	position: fixed;
	z-index: 999;
	height: 2.5em;
	width: 2.5em;
	overflow: show;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-image: url("images/indicator.gif");
}

.message{
	position: fixed;
	z-index: 999;
	height: 6em;
	width: 20em;
	overflow: show;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

/* Table Hover Color */
.table-hover tbody tr:hover td { background-color:#ccff99; }
/* Table header color */
.th{
	background-color:#C6E2FF;
    color:#000;
	text-align:center;
} 
.col_head{ cursor:pointer; }

/*td { white-space: nowrap; }*/

/* Table Header */
/*
@media only screen and (max-width: 768px) {
    #header-center {
        display:none;
    }
}
*/

.top-menu { 
	font-family: "Sarabun", sans-serif;
	font-size: 14px; 
}
a .top-menu:hover { color:#999 }
a:hover { text-decoration:none; }

.footer{ 
	/*position:fixed;*/
    left:0;
    bottom:0;
    width:100%;
	height:40px;
    background-color:#eee;
    text-align:center;
	font-family: "Sarabun", sans-serif;
	font-size: 12px; color:#333;
	padding-top:10px;
}
.copyright{ 
	font-family: "Sarabun", sans-serif;
	font-size:12px; color:#333; 
}

/* CONTENT */
.show-page{ opacity:0.7; }
.page-hd{ 
	font-family: "Sarabun", sans-serif;
	font-size: 16px; color:#0099FF; padding-top:4px; 
}
.truncate{ white-space: nowrap;	overflow: hidden; text-overflow: ellipsis; }

/* CONTACT */
.contact { 
	font-family: "Sarabun", sans-serif;
	font-size:16px; color:#888; 
}
.contact h3 { 
	font-family: "Sarabun", sans-serif;
	color:#0099ff; 
}
.contact-details { 
	font-family: "Sarabun", sans-serif;
	font-size:14px; color:#888; 
}

/* ADMIN */
.admin { 
	font-family: "Sarabun", sans-serif;
	font-size:14px; padding-top:8px;
}
.login { 
	font-family: "Sarabun", sans-serif;
	font-size:16px; 
}
.text-app { 
	font-family: "Sarabun", sans-serif;
	font-size:18px; color:#0099FF; padding-bottom:8px;
}
.error { font-size:12px; color:#FF0000; padding-top:4px; }
.required { color:#FF0000; padding-left:4px;}

.btn-shadow{ box-shadow: 4px 4px 2px #ccc; }
.text-danger{ color:#ff0000; }
.page-header-title { font-size: 16px; font-weight:bold; color:#333; text-align:center;}
.text-subject { font-size: 16px; color:#333; }
.panel-heading { font-weight:bold; }

/* HOME */
.home-logo {
	font-family: "Sarabun", sans-serif;
	font-size:100px; text-align:center; color:DeepSkyBlue;
}
.btn-caption { font-size:14px; color:#fff; }

/* SAME HEIGHT THUMBNAIL IMAGE */
/* CSS used here will be applied after bootstrap.css */
/*@media only screen and (min-width : 481px) {*/
@media only screen and (min-width : 360px) {
    .row.equal-height {
        display: flex;
        flex-wrap: wrap;
    }
    .row.equal-height > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    .row.equal-height.row:after,
    .row.equal-height.row:before {
        display: flex;
    }

    .row.equal-height > [class*='col-'] > .thumbnail,
    .row.equal-height > [class*='col-'] > .thumbnail > .caption {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
    }
    .row.equal-height > [class*='col-'] > .thumbnail > .caption > .flex-text {
        flex-grow: 1;
    }
    .row.equal-height > [class*='col-'] > .thumbnail > img {
        width: 100%;
        height: 180px; /* force image's height */
        /*height: 200px;*/ /* force image's height */

        /* force image fit inside it's "box" */
        -webkit-object-fit: cover;
           -moz-object-fit: cover;
            -ms-object-fit: cover;
             -o-object-fit: cover;
                object-fit: cover;
    }
}

.grid-container {
	display: grid;
	grid-template-columns: auto auto auto auto;
	background-color: #2196F3;
	padding: 3px;
}
.grid-container > div {
	background-color: rgba(255, 255, 255, 0.8);
	text-align: center;
	padding: 3px 0;
	font-size: 30px;
}

.txt-img-left-top {
	position: absolute;
	top:0%;
	left:2%;
	/*transform: translate(-50%, -50%);*/
}
.label-danger { background:#ff0000; }
/* End Home */

/* Setting */
.setting{ height:50px; padding:15px 0; padding-left:10px; }
/* End Setting */


/* Schedule */
.schedule-td{
	cursor:pointer;
	text-align:center;
}
.schedule-select{
	background:#CCFF00;
}
.schedule-disabled{
	cursor:not-allowed;
}
/* End Schedule */

/* Num pad */
.numpad-selected{
	background:#eee;
	color:#000;
	font-weight:bold;
	font-size:20px;
}
/* End num pad */

/* Sweet alert 2 */
.swal2-popup { font-size: 1.4rem !important; font-family: Georgia, serif; }

/* Hidden */
.d-none{
	display:none;
}