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

.bgPurple {
	background:#6250D9 ;
	color: #FFFFFF;
}

.bgYellow{
	background:#F5CF02;
	color: #FFF;
}

.bgYellow h4 {
	padding-top: 15px;
}

.bgGreen{
	background:#14B37B;
	color: #fff;
}

.bgGreen h4 {
	padding-top: 15px;
}

.bgGold {
	background: #bdc850;
	color: #fff;
}

.bgGold h4 {
	padding-top: 15px;
}

.bgSilver {
	background: #C0C0C0;
	color: #FFF;
}

.bgSilver h4 {
	padding-top: 15px;
}

.bgBronze {
	background: #cd7f32;
	color: #FFF;
}

.bgBronze h4 {
	padding-top: 15px;
}

.bgRed {
	background: #ff0000;
	color: #FFF;
}

.bgRed h4 {
	padding-top: 15px;
}

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

.bgHead h1  h3{
	padding: 5px;
	color: #FFFFFF;
	font-weight: 600;
}

.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;
}
.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;
	}
	.loader {
        /*display:none;*/
        position: fixed;
        top: 0px;
        left: 0px;
        background: #ccc;
        width: 100%;
        height: 100vh;
        opacity: .85;
        filter: alpha(opacity=85);
        -moz-opacity: .85;
        z-index: 9999;
        background: #fff url(https://assets.materialup.com/uploads/fa8430a1-4dea-49d9-a4a3-e5c6bf0b2afb/preview.gif
) 50% 50% no-repeat;
    }
@media (min-width: 768px) {

	.borderBox1 {
		height: 140px;
	}

	.borderBox2 {
		height: 140px;
	}

}

@media (min-width: 1600px) {

	.borderBox1 {
		height: 120px;
	}

	.borderBox2 {
		height: 120px;
	}

}