html {
  scroll-behavior: smooth;
}

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("../webfonts/fa-brands-400.eot");
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands'; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

/* EXPERIMENT CSS */

.experiment{
	margin-left: 0px;
	font-weight: normal;
}

/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px){
	.h3details{
		text-align: inherit !important;
	}

	#txtSearchDashboard{
		margin-top: -15px !important;
	}

/*	.rating>label{
		font-size: 6em !important;
	}*/

/*Small devices (landscape phones, 576px and up)*/
/*@media (max-width: 767.98px){
	.rating>label{
		font-size: 8em !important;
	}
}*/

/*	.far{
		font-size: 4em !important;
	}*/
}

/*.far{
		font-size: 10em;
	}*/


/*for large/big screens only*/
@media only screen and (min-width: 1900px){
	.divUsers{
		height: 700px !important;
	}

	#txtSearchDashboard{
		margin-left: -20px !important;
	}

	.imgLogo{
		width: 50px;
	}

	.tblDashboard_holder{
		height: 650px;
	}

	.tblPR_holder{
		height: 650px;
	}
}



/*for normal size of screens/monitor like my AOC monitor only*/
@media only screen and (min-width: 1200px) and (max-width: 1366px){
	.divUsers{
		height: 400px !important;
	}

	#txtSearchDashboard{
		margin-left: -20px !important;
	}

	.imgLogo{
		width: 30px;
	}
	
	.pHeader{
		font-size: 4vmin !important;
	}

	#tblDashboardBody{
		font-size: small;
	}

	#tblPR{
		font-size: small;
	}

	

	.tblDashboard_holder{
		height: 350px;
	}

	.tblPR_holder{
		height: 450px;
	}

	.sideNav_actions{
		font-size: small;
	}
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	
	.imgLogo{
		width: 30px;
	}
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 991px){ 
	#txtSearchDashboard{
		margin-top: -15px !important;
	}

	.imgLogo{
		width: 30px;
	}
 }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.imgLogo{
		width: 30px;
	}	  
}





.starSpan{
	font-size: 40px;
	color: #00aeef;
	transition: all 0.3s;
}

.newStars:checked~.starSpan{
	color: #FFD600;
	transition: all 0.3s;
}

.naSpan{
	font-size: 40px;
	color: #00aeef;
	transition: all 0.3s;
}

.newStars:checked~.naSpan{
	color: #000;
	transition: all 0.3s;
}


.rating { 
/* border: none;
 float: left;
 transition: all 0.2s;*/
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	margin-top: -5%;
 }

.rating > input { display: none; } 
.rating > label.full:before { 
	margin: 5px;
	font-size: 10em;
	display: inline-block;
	content: "\2605";
	transition: all 0.2s;
	cursor: pointer;
 }

.rating > .rateNA:before { 
	content: "\29B8";
	margin: 5px;
	font-size: 10em;
	display: inline-block;
	transition: all 0.2s;
	cursor: pointer;
}

.rating > label { 
	color: #ddd; 
	/*float: right; */
	transition: all 0.2s;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label.full, /* show gold star when clicked */
.rating:not(:checked) > label.full:hover, /* hover current star */
.rating:not(:checked) > label.full:hover ~ label.full { 
	color: #FFD700;
	transition: all 0.2s;
} 
/*        hover previous stars in list */

.rating > input:checked + label.full:hover,
.rating > input:checked ~ label.full:hover,
.rating > label:hover ~ input.full:checked ~ label.full, 
.rating > input:checked ~ label.full:hover ~ label.full { 
	color: #FFED85;
	transition: all 0.2s;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: flash;
	animation-name: flash;
    transition: all 0.3s;
}

.rating > input.rateNAinput:checked ~ label.rateNA, /* show gold star when clicked */
.rating:not(:checked) > label.rateNA:hover, /* hover current star */
.rating:not(:checked) > label.rateNA:hover ~ label.rateNA { 
	color: black;
	transition: all 0.2s;
} 
/*        hover previous stars in list */

.rating > input.rateNAinput:checked + label.rateNA:hover,
.rating > input.rateNAinput:checked ~ label.rateNA:hover,
.rating > label.rateNAinput:hover ~ input.rateNA:checked ~ label.rateNA, 
.rating > input.rateNAinput:checked ~ label.rateNA:hover ~ label.rateNA { 
	color: #999999;
	transition: all 0.2s;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: flash;
	animation-name: flash;
    transition: all 0.3s;
}














































/*.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    margin-top: -5%;
}

.rating>input {
    display: none;
}

.rating > input.rateNAinput:checked ~ label.rateNA{ 
	color: black !important;
    opacity: 1;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: flash;
	animation-name: flash;
    transition: all 0.3s; 
}

.rating > input.rateNAinput:hover ~ label.rateNA{ 
	color: black !important; 
}

.rating>label {
    position: relative;
    width: 1em;
    font-size: 10em;
    color: #FFD600;
    cursor: pointer;
    transition: all 0.3s;
}

.rating>label.rateNA {
    color: #999999;
}

.rating>label.starRating:before {
    content: "\2605";
}

.rating>label::before {
    position: absolute;
    opacity: 0;
    transition: all 0.3s;
}



.rating>label.starRating:hover:before,
.rating>label.starRating:hover~label.starRating:before {
	color: #FFD600 !important;
    opacity: 1 !important;
    transition: all 0.3s;
}

.rating>label:hover~label.rateNA:before {
	color: black !important;
    opacity: 0.4 !important;
    transition: all 0.3s;
}

.rating>input:checked~label:before {
    opacity: 1;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: flash;
	animation-name: flash;
    transition: all 0.3s;
}

.rating:hover>input:checked~label.starRating:before {
    opacity: 0.4;
    transition: all 0.3s;
}*/

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.body_style{
	/*padding-top: 5%;*/
	font-family: Arial !important; /*pag set ng Font Style sa lahat ng HTML*/
}

.nav-bg{
	background-color: #f4e318;
}  

.nav-bgPOST{
	background-color: #74009A;
}  

.divCategories{
	background-color: #f05053; 
	margin-left: 1%; 
	border-radius: 20px; 
	padding-top: 0.3%;
	transition: all 0.3s;
}

.divCategories:hover{
	opacity: 0.75;
	transition: all 0.3s;
	cursor: pointer;
}

.forms_textbox{
	/*margin-top: 40px;
	font-family: 'Raleway',sans-serif;
	width: 30%;
    padding: 12px 20px;
    margin: 5px 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 10px;
    transition: all 1s;
    font-weight: bold;
    height: 8%;*/
    margin: 4px 0;
    font-weight: bold !important;
    color: #757575 !important;
}

.forms_textbox::placeholder{
	font-weight: normal;
}

.textboxesLibrary{
	text-align: center;
}

/*.forms_textbox:focus{
    transition: all 1s;
}*/

.formsbutton{
	font-family: 'Raleway',sans-serif;
	background-color: #AC92E4 !important;
	color: #fff !important;
	padding: 8px 0px 8px;
	text-transform: uppercase;
	font-weight: bold !important;
	margin-top: 0px;
	margin-bottom: 10px;
	width: 80%;
	transition: all 0.5s !important;
	/*margin-left: -5% !important;*/
}

.formsbutton:hover{
	background-color: #ffffff00 !important;
	color: #AC92E4 !important;
	transition: all 0.5s !important;
	border: #AC92E4 2px solid;
}

.deleteButton{
	background-color: #8b0000 !important;
	color: #fff !important;
}

.deleteButton:hover{
	background-color: #fff !important;
	color: #8b0000 !important;
	border: #8b0000 2px solid;
}

/*.secondaryformsbutton{
	font-family: 'Raleway',sans-serif;
	background-color: #ffffff !important;
	color: #f4e318 !important;
	padding: 8px 0px 8px;
	text-transform: uppercase;
	font-weight: bold !important;
	margin-top: 0px;
	margin-bottom: 10px;
	width: 80%;
	transition: all 0.5s !important;	
	border: 2px solid #f4e318 !important;
}

.secondaryformsbutton:hover{
	background-color: #f4e318 !important;
	transition: all 0.5s !important;
}*/

.btnProceedDashboard{
	width: 100%;
	background-color: #dbdb0d !important;
	transition: all 0.5s;
}

.btnProceedDashboard:hover{
	background-color: #fff !important;
	border-color: #dbdb0d;
	color: #dbdb0d !important;
	transition: all 0.5s;
}

.btnConfirmDashboard{
	width: 100%;
	background-color: #623db1 !important;
	transition: all 0.5s;
}

.btnConfirmDashboard:hover{
	background-color: #fff !important;
	border-color: #623db1;
	color: #623db1 !important;
	transition: all 0.5s;
}

.btnConfirmModal{
	background-color: #623db1 !important;
	transition: all 0.5s;
}

.btnConfirmModal:hover{
	background-color: #fff !important;	
	color: #623db1 !important;
	border-color: #623db1;
	transition: all 0.5s;
}

.txtCenter{
	text-align: center;
}



.tbl_srf th{
	text-align: center;
	color: #757575;
}

.modalAlert{
	margin-top: 20%;
	color: #ffffff;
	text-align: center;
}

.proLong{
	animation-iteration-count: 3;
}

#divInternal{
	display: none;
}

#divExternal{
	display: none;
}
.formFooter{
	display: none;
}

.btnInternal{
	background-color: #ccb5d3; 
/*	margin-left: 1%; */
	border-radius: 50%; 
/*	padding-top: 0.3%;*/
	transition: all 0.5s;
	height: 480px;

}

.btnInternal:hover{
	opacity: 0.75;
	transition: all 0.5s;
	cursor: pointer;
}

.btnExternal{
	background-color: #b5b2de; 
/*	margin-left: 1%; */
	border-radius: 50%; 
/*	padding-top: 0.3%;*/
	transition: all 0.3s;
	height: 480px;
}

.btnExternal:hover{
	opacity: 0.75;
	transition: all 0.3s;
	cursor: pointer;
}

#btnAddRow{
	transition: all 0.3s;
}

#btnAddRow:hover{
	transition: all 0.3s;
	opacity: 0.75;
}

#btnDeleteRow{
	transition: all 0.3s;
}

#btnDeleteRow:hover{
	transition: all 0.3s;
	opacity: 0.75;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.newAddedRow{
	display: none;
}

.btnInternalTPDC{
	background-color: #ccb5d3; 
/*	margin-left: 1%; */
	border-radius: 50%; 
/*	padding-top: 0.3%;*/
	height: 100%;
}

.btnInternalTPDC:hover{
	opacity: 0.75;
	cursor: pointer;
}

.btnExternalTPDC{
	background-color: #b5b2de; 
/*	margin-left: 1%; */
	border-radius: 50%; 
/*	padding-top: 0.3%;*/
	height: 145%;
}

.btnExternalTPDC:hover{
	opacity: 0.75;
	cursor: pointer;
}

.NumberServed{
	background-color: #b16b3d; 
	border-radius: 10%;
	padding: 1%;
}

.textboxesTPDCDash{
	text-align: center;
	margin: 0 0 4% 0;	
}


.modal-header{
	color: #fff;
}

.modal-danger{
	background-color: #8d0101;
	color: #fff;
}

.modal-confirm{
	background-color: #28a745;
	color: #fff;
}

.colorConfirm{
	background-color: #018d01;
}

.colorConfirmTXTBOX{
	background-color: #018d01 !important;
	border-width: 2px !important;
	border-color: #018d01 !important;
}

.colorConfirmTXTBOX:hover{
	color: #018d01 !important;
	background-color: #ffffff !important;
}

.txtboxNotRequired{
	border-color: #018d01 !important;
	border-width: 2px !important;
}

.txtboxConfirmAppear{
	text-align: center;
}

.txtboxConfirmAppear::placeholder{
	font-weight: bold;	
}

.h3details{
	text-align: left;
}

.txtHighlight::placeholder{
	font-weight: bold;
}































.prtextboxes{
	border: none !important;
	border-bottom: 2px double #AC92E4 !important;
}



.divUsers{
	overflow-y: auto;
}


#tblUsers thead tr:nth-child(1) th{
	background: white;
	position: sticky;
	top: 0;
	z-index: 10;
}

.table a{
	cursor: pointer;
}

.actionPills{
	/*background-color: black;*/
	border-bottom: #343a40 1px solid;	
	color: #343a40;
}

#select_SearchColumn{
	font-weight: bold;
	background-color: #009aee;
	color: #ffffff;
	transition: all 0.5s;
	cursor: pointer;
}

#select_SearchColumn:hover{	
	background-color: #0487cf;
}

.tableheader{
	position: sticky;
	top: 0;
}

.dashboard_dropdown{
	border: none !important;
	color: #fff !important;
	font-weight: bold !important;
	margin-left: -5%;
}

.formsbuttondark{
	font-family: 'Raleway',sans-serif;
	background-color: #343a40 !important;
	color: #fff !important;
	padding: 8px 0px 8px;
	text-transform: uppercase;
	font-weight: bold !important;
	margin-top: 0px;
	margin-bottom: 10px;
	width: 80%;
	transition: all 0.5s !important;
	/*margin-left: -5% !important;*/
}

.formsbuttondark:hover{
	background-color: #ffffff00 !important;
	color: #343a40 !important;
	transition: all 0.5s !important;
	border: #343a40 2px solid;
}

.prtextboxesdark{
	border: none !important;
	border-bottom: 2px double #343a40 !important;
}

.formsbuttonsupplier{
	font-family: 'Raleway',sans-serif;
	background-color: #CAE492 !important;
	color: #fff !important;
	padding: 8px 0px 8px;
	text-transform: uppercase;
	font-weight: bold !important;
	margin-top: 0px;
	margin-bottom: 10px;
	width: 80%;
	transition: all 0.5s !important;
	/*margin-left: -5% !important;*/
}

.formsbuttonsupplier:hover{
	background-color: #ffffff00 !important;
	color: #CAE492 !important;
	transition: all 0.5s !important;
	border: #CAE492 2px solid;
}

.prtextboxessupplier{
	border: none !important;
	border-bottom: 2px double #CAE492 !important;
}

.prtextboxessupplieralt{
	border: none !important;
	border-bottom: 2px double #e49f92 !important;
}

.formsbuttonsupplieralt{
	font-family: 'Raleway',sans-serif;
	background-color: #e49f92 !important;
	color: #fff !important;
	padding: 8px 0px 8px;
	text-transform: uppercase;
	font-weight: bold !important;
	margin-top: 0px;
	margin-bottom: 10px;
	width: 80%;
	transition: all 0.5s !important;
	/*margin-left: -5% !important;*/
}

.formsbuttonsupplieralt:hover{
	background-color: #ffffff00 !important;
	color: #e49f92 !important;
	transition: all 0.5s !important;
	border: #e49f92 2px solid;
}

.forms_textboxsupplier{
	/*margin-top: 40px;
	font-family: 'Raleway',sans-serif;
	width: 30%;
    padding: 12px 20px;
    margin: 5px 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 10px;
    transition: all 1s;
    font-weight: bold;
    height: 8%;*/
    margin: 4px 0;
    /*font-weight: bold !important;*/
    /*color: #CAE492 !important;*/
}

.forms_textbox::placeholder{
	font-weight: normal;
}

.overdue{
	background-color: #9b9b9b !important;
	color: #fff !important;
	transition: all 0.3s;
}

.overdue:hover{
	background-color: #3a3a3a !important;
	color: #fff !important;
	transition: all 0.3s;
}

.due{
	background-color: #8b0000 !important;
	color: #fff !important;
	transition: all 0.3s;
}

.due:hover{
	background-color: #950505 !important;
	color: #fff !important;
	transition: all 0.3s;
}

.neardue{
	background-color: #ffc107 !important;
	transition: all 0.3s;
}

.neardue:hover{
	background-color: #e0a800 !important;
	transition: all 0.3s;
}

.healthy{
	background-color: #28a745 !important;
	color: #fff !important;
	transition: all 0.3s;
}

.healthy:hover{
	background-color: #218838 !important;
	color: #fff !important;
	transition: all 0.3s;
}

.tblPR_holder{
	overflow-y: auto;
}