/*-------------- Custom Css ------------*/

@font-face { 
	font-family: THSarabanPSK;  
	src: url('../fonts/THSarabun.ttf') format("truetype"); 
}
@font-face { 
	font-family: BaiJamjuree;  
	src: url('../fonts/BaiJamjuree-Regular.ttf') format("truetype"); 
}
@font-face { 
	font-family: BaiJamjuree-SemiBold;  
	src: url('../fonts/BaiJamjuree-SemiBold.ttf') format("truetype"); 
}	
.THSarabanPSK {
	font-family: THSarabanPSK;
}

.BaiJamjuree {
	font-family: BaiJamjuree;
}

.BaiJamjuree-SemiBold {
	font-family: BaiJamjuree-SemiBold;
}

.pop-loader {
	display: block; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 9999; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
}
.loader {
	padding: 0;
	position: fixed;
	top: 50%;
	left: 50%;	
	border: 5px solid #f3f3f3;
	border-radius: 50%;
	border-top: 5px solid #000000;
	transform: translate(-50%, -50%);
	width: 25px;
	height: 25px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
}
@keyframes spin {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}

.black_modal {
	  display:none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 1; /* Sit on top */
	  left: 0;
	  top: 65px;
	  width: 100%; /* Full width */
	  height: 90%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
}

/*----pop success----*/

.modal-confirm .modal-content {
	padding: 20px;
	border-radius: 5px;
	border: none;
}
.modal-confirm .modal-header {
	border-bottom: none;
	position: relative;
}
.modal-confirm .form-control, .modal-confirm .btn {
	min-height: 40px;
	border-radius: 3px;
}
.modal-confirm .close {
	position: absolute;
	top: -5px;
	right: -5px;
}

.modal-confirm .icon-box {
	margin: 0 auto;
	left: 0;
	right: 0;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	border: 5px solid #82ce34;
	padding: 15px;
	text-align: center;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.modal-confirm .icon-box .fa-check {
	color: #82ce34;
	font-size: 40px;
	position: relative;
	top: 5px;
}
.modal-confirm .btn {
	color: #fff;
	border-radius: 4px;
	background: #82ce34;
	text-decoration: none;
	transition: all 0.4s;
	line-height: normal;
	border: none;
  width: 120px;
}
.modal-confirm .btn:hover, .modal-confirm .btn:focus {
	background: #6fb32b;
	outline: none;
}

.modal-error .modal-content {
	border-radius: 5px;
	border: solid #888888 1px;
}
.modal-error .modal-header {
	border-bottom: none;
	position: relative;
}
.modal-error .form-control, .modal-error .btn {
	min-height: 40px;
	border-radius: 3px;
}
.modal-error .close {
	position: absolute;
	top: -5px;
	right: -5px;
}

.modal-error .icon-box {
	margin: 0 auto;
	left: 0;
	right: 0;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	border: 5px solid #dc5353;
	padding: 15px;
	text-align: center;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.modal-error .icon-box .fa-exclamation {
	color: #dc5353;
	font-size: 40px;
	position: relative;
	top: 5px;
}

.modal-error .btn {
	color: #fff;
	border-radius: 4px;
	background: #dc5353;
	text-decoration: none;
	transition: all 0.4s;
	line-height: normal;
	border: none;
	width: 100px;
}
.modal-error .btn:hover, .modal-error .btn:focus {
	background: #dc5353;
	outline: none;
}

.box-part{
	cursor:pointer;
    background:#FFF;
    border-radius:5px;
	border: #e3e9f3 solid 1px;
    padding:10px 5px;
    margin:30px 0px;
	text-decoration:none;
	color:#000000;
}

.box-part:hover{
	box-shadow: 0 2px 3px rgba(0,0,0,.2);
	color:#000000;
}

.box-part:active{
	box-shadow: 0 2px 3px rgba(0,0,0,.2);
	color:#000000;
}

.box-part:hover .fa{
	color:#000000;
}

.active, .box-part:hover {
	box-shadow: 0 2px 3px rgba(0,0,0,.2);
	background-color:#6c757d;
	color:#FFF;
}