body {
    color: #797979;
    background: #ffffff;
    font-family: 'Sarabun', sans-serif;
	font-size: 16px;
	color: #222222;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Anantason',sans-serif;
}

a, a:hover {
	/* text-decoration: none; */
	color: #212529;
}

.form-group div[class^="col-"] {
	margin-bottom: 1rem;
}


.bgHead {
	background:#501766 ;
	color: #FFFFFF;
	padding: 35px 25px 20px 25px;
}


.bgWhite{
	background:#FFF ;
	color: #023C99;
	font-size: 14px;
	padding: 15px;

}

.borderBox1 {
	padding: 25px 0px 0px 25px;
	border-radius: 4px;
	margin-bottom: 3px;
	height: 130px;
}

.borderBox2 {
	padding: 15px;
    border-radius: 4px;
    margin-bottom: 3px;
	height: 130px;
}

.btn-search{
	background: #ffffff;
	padding: 10px 20px;
	text-align: center;
	border: 2px solid #444;
	font-size: 16px;
	border-radius: 5px;
}

.f-right {
    text-align: right;
}
.modal-header .btn-close {
	margin:0px;
}
.legend-item {
    
	align-items: center;
	font-family: Arial, sans-serif;
	font-size: 14px;
	padding: 0px 10px;
	}

	.legend-item::before {
		content: "";
		width: 10px;
		height: 10px;
		border: 1px solid #000;
		border-radius: 50%;
		display: inline-block;
		margin-right: 8px;
	}
	.legend-item.red::before {
		background-color: #bd0f0f;
	}

	.legend-item.green::before {
		background-color: #287829;
	}

	.legend-item.yellow::before {
		background-color: #f5fa61;
	}

	.legend-item.white::before {
		background-color: #FFFFFF;
	}
@media (min-width: 768px) {

	.borderBox1 {
		height: 140px;
	}

	.borderBox2 {
		height: 140px;
	}

}

@media (min-width: 1600px) {

	.borderBox1 {
		height: 120px;
	}

	.borderBox2 {
		height: 120px;
	}

}