body{
	font-family: 'Bai Jamjuree', sans-serif;
	font-size: 1rem;
	margin: 0;
	color: #212529;
	background-color: #fafafa;
}
.x-cursor-hand{
	cursor: pointer;
}
A.disabled{
	pointer-events: none;
	cursor: default;
}

/* Font */
.x-h3{
  font-size: 1.75rem;
}
.x-h4{
  font-size: 1.5rem;
}
.x-h5{
  font-size: 1.25rem;
}
.x-h6{
  font-size: 1rem;
}
.x-h7{
  font-size: 0.8rem;
}
.x-h8{
  font-size: 0.64rem;
}

/* width */
.x-w-100{
	width: 100px;
}

/* image */
.image50-50{
	width: 50px;
	height: 50px;
}
.image100-100{
	width: 100px;
	height: 100px;
}
.image100-75{
	width: 100px;
	height: 75px;
}
.image120-90{
	width: 120px;
	height: 90px;
}
.image160-120{
	width: 160px;
	height: 120px;
}
/* Icon */
.fa-blank{
	width: 13px;
}
.icon-16{
	font-size: 16px;
}

/* Line เส้น */
.ride-line{
	position:relative;
	text-align:center;
}
.ride-line span{
	background-color:#fff;
	padding-left:12px;
	padding-right:12px;
	display:inline-block;
	line-height:24px;
	position:relative;
	z-index:1;
	color:#747487
}
.ride-line:before{
	content:'';
	height:1px;
	width:100%;
	position:absolute;
	left:0;
	top:12px;
	background-color:#ededf4
}

/* Button */
.btn.btn-rose {
  color: #fff;
  background-color: #e91e63;
  border-color: #e91e63;
  box-shadow: 0 2px 2px 0 rgba(233, 30, 99, 0.14), 0 3px 1px -2px rgba(233, 30, 99, 0.2), 0 1px 5px 0 rgba(233, 30, 99, 0.12);
}

.btn.btn-rose:hover {
  color: #fff;
  background-color: #ea2c6d;
  border-color: #b8124a;
}

.btn.btn-rose:focus,
.btn.btn-rose.focus,
.btn.btn-rose:hover {
  color: #fff;
  background-color: #ea2c6d;
  border-color: #b8124a;
}

.btn.btn-rose:active,
.btn.btn-rose.active,
.open>.btn.btn-rose.dropdown-toggle,
.show>.btn.btn-rose.dropdown-toggle {
  color: #fff;
  background-color: #ea2c6d;
  border-color: #b8124a;
  box-shadow: 0 2px 2px 0 rgba(233, 30, 99, 0.14), 0 3px 1px -2px rgba(233, 30, 99, 0.2), 0 1px 5px 0 rgba(233, 30, 99, 0.12);
}

.btn.btn-rose:active:hover,
.btn.btn-rose:active:focus,
.btn.btn-rose:active.focus,
.btn.btn-rose.active:hover,
.btn.btn-rose.active:focus,
.btn.btn-rose.active.focus,
.open>.btn.btn-rose.dropdown-toggle:hover,
.open>.btn.btn-rose.dropdown-toggle:focus,
.open>.btn.btn-rose.dropdown-toggle.focus,
.show>.btn.btn-rose.dropdown-toggle:hover,
.show>.btn.btn-rose.dropdown-toggle:focus,
.show>.btn.btn-rose.dropdown-toggle.focus {
  color: #fff;
  background-color: #ea2c6d;
  border-color: #7b0c32;
}

.open>.btn.btn-rose.dropdown-toggle.bmd-btn-icon {
  color: inherit;
  background-color: #e91e63;
}

.open>.btn.btn-rose.dropdown-toggle.bmd-btn-icon:hover {
  background-color: #ea2c6d;
}

.btn.btn-rose.disabled:focus,
.btn.btn-rose.disabled.focus,
.btn.btn-rose:disabled:focus,
.btn.btn-rose:disabled.focus {
  background-color: #e91e63;
  border-color: #e91e63;
}

.btn.btn-rose.disabled:hover,
.btn.btn-rose:disabled:hover {
  background-color: #e91e63;
  border-color: #e91e63;
}

.btn.btn-rose:focus,
.btn.btn-rose:active,
.btn.btn-rose:hover {
  box-shadow: 0 14px 26px -12px rgba(233, 30, 99, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(233, 30, 99, 0.2);
}

.btn.btn-rose.btn-link {
  background-color: transparent;
  color: #e91e63;
  box-shadow: none;
}

.btn.btn-rose.btn-link:hover,
.btn.btn-rose.btn-link:focus,
.btn.btn-rose.btn-link:active {
  background-color: transparent;
  color: #e91e63;
}


.btn.btn-purple {
  color: #fff;
  background-color: #9c27b0;
  border-color: #9c27b0;
  box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12);
}

.btn.btn-purple:hover {
  color: #fff;
  background-color: #9124a3;
  border-color: #701c7e;
}

.btn.btn-purple:focus,
.btn.btn-purple.focus,
.btn.btn-purple:hover {
  color: #fff;
  background-color: #9124a3;
  border-color: #701c7e;
}

.btn.btn-purple:active,
.btn.btn-purple.active,
.open>.btn.btn-purple.dropdown-toggle,
.show>.btn.btn-purple.dropdown-toggle {
  color: #fff;
  background-color: #9124a3;
  border-color: #701c7e;
  box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12);
}

.btn.btn-purple:active:hover,
.btn.btn-purple:active:focus,
.btn.btn-purple:active.focus,
.btn.btn-purple.active:hover,
.btn.btn-purple.active:focus,
.btn.btn-purple.active.focus,
.open>.btn.btn-purple.dropdown-toggle:hover,
.open>.btn.btn-purple.dropdown-toggle:focus,
.open>.btn.btn-purple.dropdown-toggle.focus,
.show>.btn.btn-purple.dropdown-toggle:hover,
.show>.btn.btn-purple.dropdown-toggle:focus,
.show>.btn.btn-purple.dropdown-toggle.focus {
  color: #fff;
  background-color: #9124a3;
  border-color: #3f1048;
}

.open>.btn.btn-purple.dropdown-toggle.bmd-btn-icon {
  color: inherit;
  background-color: #9c27b0;
}

.open>.btn.btn-purple.dropdown-toggle.bmd-btn-icon:hover {
  background-color: #9124a3;
}

.btn.btn-purple.disabled:focus,
.btn.btn-purple.disabled.focus,
.btn.btn-purple:disabled:focus,
.btn.btn-purple:disabled.focus {
  background-color: #9c27b0;
  border-color: #9c27b0;
}

.btn.btn-purple.disabled:hover,
.btn.btn-purple:disabled:hover {
  background-color: #9c27b0;
  border-color: #9c27b0;
}

.btn.btn-purple:focus,
.btn.btn-purple:active,
.btn.btn-purple:hover {
  box-shadow: 0 14px 26px -12px rgba(156, 39, 176, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(156, 39, 176, 0.2);
}

.btn.btn-purple.btn-link {
  background-color: transparent;
  color: #9c27b0;
  box-shadow: none;
}

.btn.btn-purple.btn-link:hover,
.btn.btn-purple.btn-link:focus,
.btn.btn-purple.btn-link:active {
  background-color: transparent;
  color: #9c27b0;
}


/* TAB */
.nav-tabs .nav-item.nav-link{
	color: #555;
}
.nav-tabs.nav-tabs-white .nav-item.nav-link.active,
.nav-tabs.nav-tabs-white .nav-item.nav-link.active:focus,
.nav-tabs.nav-tabs-white .nav-item.nav-link.active:hover {
	color: black;
	font-weight: bold;
	background-color: #FFFFFF;
}


.nav-pills .nav-item .nav-link {
	color: #555;
}
.nav-pills.nav-pills-warning .nav-item .nav-link.active,
.nav-pills.nav-pills-warning .nav-item .nav-link.active:focus,
.nav-pills.nav-pills-warning .nav-item .nav-link.active:hover {
  background-color: #ff9800;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);
  color: #fff;
}
.nav-pills.nav-pills-rose .nav-item .nav-link.active,
.nav-pills.nav-pills-rose .nav-item .nav-link.active:focus,
.nav-pills.nav-pills-rose .nav-item .nav-link.active:hover {
  background-color: #e91e63;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4);
  color: #fff;
}

.nav-pills.nav-pills-success .nav-item .nav-link.active,
.nav-pills.nav-pills-success .nav-item .nav-link.active:focus,
.nav-pills.nav-pills-success .nav-item .nav-link.active:hover {
  background-color: #4caf50;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 175, 80, 0.4);
  color: #fff;
}

.nav-pills.nav-pills-warning .nav-item .nav-link.active,
.nav-pills.nav-pills-warning .nav-item .nav-link.active:focus,
.nav-pills.nav-pills-warning .nav-item .nav-link.active:hover {
  background-color: #ff9800;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);
  color: #fff;
}

.nav-pills.nav-pills-danger .nav-item .nav-link.active,
.nav-pills.nav-pills-danger .nav-item .nav-link.active:focus,
.nav-pills.nav-pills-danger .nav-item .nav-link.active:hover {
  background-color: #f44336;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(244, 67, 54, 0.4);
  color: #fff;
}
.nav-pills.nav-pills-info .nav-item .nav-link.active,
.nav-pills.nav-pills-info .nav-item .nav-link.active:focus,
.nav-pills.nav-pills-info .nav-item .nav-link.active:hover {
  background-color: #00bcd4;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4);
  color: #fff;
}


/* text-color */
.text-secondary-warning{
	color: #6c757d !important;
}
a.text-secondary-warning:hover, a.text-secondary-warning:focus{
	color: #ffc107 !important;
}
.text-secondary-danger{
	color: #6c757d !important;
}
a.text-secondary-danger:hover, a.text-secondary-danger:focus{
	color: #dc3545 !important;
}
.text-secondary-info{
	color: #6c757d !important;
}
a.text-secondary-info:hover, a.text-secondary-info:focus{
	color: #17a2b8 !important;
}
.text-secondary-success{
	color: #6c757d !important;
}
a.text-secondary-success:hover, a.text-secondary-success:focus{
	color: #28a745 !important;
}

/* Input Checkbox */
.custom-checkbox-success .custom-control-input:checked ~ .custom-control-label::before {
	border-color: #28a745 !important;
	background-color: #28a745 !important;
}
.custom-checkbox-success .custom-control-input:checked:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 255, 0, 0.25);
}
.custom-checkbox-success .custom-control-input:focus ~ .custom-control-label::before {
	border-color: #28a745 !important;
	box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 255, 0, 0.25);
}
.custom-checkbox-success .custom-control-input:active ~ .custom-control-label::before {
	background-color: #C8FFC8 !important; /* เวลากดตอนปกติ */
}
.custom-checkbox-success .custom-control-input:disabled:active ~ .custom-control-label::before {
	background-color: #e9ecef !important; /* เวลากดตอน Diable */
}
.custom-checkbox-success .custom-control-input:disabled:checked ~ .custom-control-label::before {
	background-color: rgba(40,167,69,0.5) !important; /* ตอน Diable */
}
.custom-checkbox-success .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
	background-color: rgba(40,167,69,0.5) !important;
}



/* Table X */
.table-row-select{
  background-color: #c1e2fc;
}
.table-hover .table-row-select:hover{
  background-color: #a9d7fb;
}
.orderby-select{
	color: #17a2b8;
}
.orderby-select:hover{
	color: #0f6674;
}
.orderby-default{
	color: #FFFFFF;
}
.orderby-default:hover{
	color: #0f6674;
}