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;*/
	padding:25px 20px 20px 20px;
	border-radius: 4px;
	margin-bottom: 3px;
	height: auto;
}

.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;
}
.text-justify{
	display:flex;
	align-items: center;
	justify-content: center;
	min-height:115px;
}

	.td_store{
		background: #9a8bfa !important;
		color:#000000;
	}

	.td_res{
		background: #bdc850 !important;
		color:#000000;
	}
	.th_total_silver{
		background: #C0C0C0 !important;
		color:#000000;
	}
	.th_total_bronze{
		background: #cd7f32 !important;
		color:#000000;
	}
	.th_total_fail{
		background: #fa7e7e  !important;
		color:#000000;
	}
	.th_total_in_progress{
		background: #f5e9a9 !important;
		color:#000000;
	}
	h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0; /* Removes default margin */
}

td > a > img , td > img {
	height:70px;
	width:70px;
}
.pagination {
display: inline-block;
padding-left: 0;
margin-top: 1rem;
margin-bottom: 1rem;
border-radius: .25rem
}
.page-item {
display: inline
}
.page-item:first-child .page-link {
margin-left: 0;
border-bottom-left-radius: .25rem;
border-top-left-radius: .25rem
}
.page-item:last-child .page-link {
border-bottom-right-radius: .25rem;
border-top-right-radius: .25rem
}
.page-item.active .page-link,
.page-item.active .page-link:focus,
.page-item.active .page-link:hover {
z-index: 2;
color: #fff;
cursor: default;
background-color: #0275d8;
border-color: #0275d8
}
.page-item.disabled .page-link,
.page-item.disabled .page-link:focus,
.page-item.disabled .page-link:hover {
color: #818a91;
pointer-events: none;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd
}
.page-link {
position: relative;
float: left;
padding: .5rem .75rem;
margin-left: -1px;
color: #0275d8;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd
}
.page-link:focus,
.page-link:hover {
color: #014c8c;
background-color: #eceeef;
border-color: #ddd
}
.pagination-lg .page-link {
padding: .75rem 1.5rem;
font-size: 1.25rem
}
.pagination-lg .page-item:first-child .page-link {
border-bottom-left-radius: .3rem;
border-top-left-radius: .3rem
}
.pagination-lg .page-item:last-child .page-link {
border-bottom-right-radius: .3rem;
border-top-right-radius: .3rem
}
.pagination-sm .page-link {
padding: .275rem .75rem;
font-size: .875rem
}
.pagination-sm .page-item:first-child .page-link {
border-bottom-left-radius: .2rem;
border-top-left-radius: .2rem
}
.pagination-sm .page-item:last-child .page-link {
border-bottom-right-radius: .2rem;
border-top-right-radius: .2rem
}







.autocomplete {
	position: relative;
	display: inline-block; 
}

#autocomplete-results {
    position: absolute;
    border: 1px solid #ccc;
    border-top: none;
    z-index: 1000;
    background-color: white;
    max-height: 150px;
    overflow-y: auto;
    display: none; 
    box-sizing: border-box;
	margin-right: calc(var(--bs-gutter-x) / 2);
	/*padding-left: calc(var(--bs-gutter-x) / 2);*/
}
#autocomplete-results div {
	padding: 8px;
	cursor: pointer;
	border-bottom: 1px solid #eee;
	color: #000000;
}

#autocomplete-results div:hover {
	background-color: #f1f1f1;
}

@media (min-width: 768px) {

	.borderBox1 {
		height: auto;
	}

	.borderBox2 {
		height: 160px;
	}
	
}

@media (min-width: 1600px) {
	.modal-xl{
		min-width:80%;
	}
	.borderBox1 {
		height: auto;
	}

	.borderBox2 {
		height: 150px;
	}
	
	
}