@import url('https://fonts.googleapis.com');

/* Home Page */
body {
	padding: 0;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #fafafa;
}

table
{
    border-spacing:1px;
    border-style:solid;
    border-color:#D8D8D8;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    padding:0;
    box-shadow:0px 0px #000000;
    table-layout:auto;
}

td {
    padding: 3px 5px;
    text-align: left;
    vertical-align: top;
    font-weight: bold;
    font-size: 14px;
}

input[type="radio"]+label {
	width:25px;
	height:25px;
		color:#f2f2f2;
		font-family:Arial, sans-serif;
		font-size:14px;
	}
	
	input:-moz-read-only { /* For Firefox */
		background-color:#FFCC00;
	}
	
	input:read-only { 
		background-color:#FFFF66;
	}
	
	input[type="text"][readonly],
	textarea[readonly] {
	  background-color: #CCCCCC;
	}
	
	select {
		padding:3px;
		 background:white;
		 font-size:14px;
		 font-weight:bold;
	 }
	 /* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
	 @media screen and (-webkit-min-device-pixel-ratio:0) {
		 select {padding-right:30px}
	 }
	 input[type=text] {
	 border-radius:5px;
	 outline: none;
	 padding: 3px 0px 3px 3px;
	 border: 1px
	 solid #999;
	 font-size:14px;
	 font-weight:bold;
	 }
	 input[type=text]:focus{
	  background-color:#FFF;
	  border: 1px
	 solid #07c;
	  box-shadow: 0
	 0 10px #760AAB;
	 } 
	 
	 input[type=password] {
	 border-radius:5px;
	 outline: none;
	 padding: 3px 0px 3px 3px;
	 border: 1px
	 solid #999;
	 font-size:14px;
	 font-weight:bold;
	 }
	 input[type=password]:focus{
	  background-color:#FFF;
	  border: 1px
	 solid #07c;
	  box-shadow: 0
	 0 10px #07c;
	 } 
	 
	 .hm-img-txt{
		animation: 16s autoplay1;
		opacity: 0;
	  padding:10px;
	  min-width:20%;
	  width: fit-content;
	  text-align: center;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  background-color: RED;
	 
	  color: #FFF;
	  border-radius: 10px;
	  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	  transform: translate(-50%, -50%);
	}
	
	.hm-img-txt h3{
		text-transform: capitalize !important;
	}

	
	@keyframes autoplay1 {
	  0% {opacity: 1}
	  63.33% {opacity: 0}
	  100% {opacity: 0}
	}

#msg {
	display: none;
	position: absolute;
	z-index: 200;
	background: url(../images/msg_arrow.gif) left center no-repeat;
	padding-left: 7px
}

#msgcontent {
	display: block;
	font: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #990000;
	font-size: 16px;
	background: #f3e6e6;
	border: 2px solid #924949;
	border-left: none;
	padding: 5px;
	min-width: 150px;
	max-width: 250px
}

.home-header img {
	width: 100%;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.home-navbar {
	/* margin: auto;
	width: 50%;
	padding: 10px;
	margin-bottom: 40px; */
	display:flex;
	justify-content:space-between;
	margin: auto;
	width: 50%;
	padding: 40px;
}

.buttonHarmonic {
  background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
}

.buttonHarmonic {
display: inline-block;
		padding: 5px 10px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;            
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
		border-radius: 20px;
		cursor: pointer;
		outline: none;
		border: none;
		text-decoration: none;
		font-weight: bold;
		width: fit-content;
}

.buttonHarmonic:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}

.buttonAqua {
  background-image: linear-gradient(to right, #1A2980 0%, #26D0CE 51%, #1A2980 100%);
}

.buttonAqua {
display: inline-block;
		padding: 5px 10px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;            
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
		border-radius: 20px;
		cursor: pointer;
		outline: none;
		border: none;
		text-decoration: none;
		font-weight: bold;
		width: fit-content;
}

.buttonAqua:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}

.buttonNimvelo {
  background-image: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%);
}

.buttonNimvelo {
 display: inline-block;
		padding: 5px 10px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;            
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
		border-radius: 20px;
		cursor: pointer;
		outline: none;
		border: none;
		text-decoration: none;
		font-weight: bold;
		width: fit-content;
}

.buttonNimvelo:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}

.buttonHorizon {
  background-image: linear-gradient(to right, #003973 0%, #E5E5BE 51%, #003973 100%);
}

.buttonHorizon {
	display: inline-block;
		padding: 5px 10px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;            
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
		border-radius: 20px;
		cursor: pointer;
		outline: none;
		border: none;
		text-decoration: none;
		font-weight: bold;
		width: fit-content;
}

.buttonHorizon:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}


.buttonHome {background-image: linear-gradient(to right, #b5843a 0%, #1c3858  51%, #b56930  100%)}
.buttonHome {
	display: inline-block !important;
	padding: 10px 20px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	border-radius: 20px;
	cursor: pointer;
	outline: none;
	border: none;
	text-decoration: none;
	font-weight: bold;
	width: fit-content;
 }

 .buttonHome:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;

 }

 


 .buttonGray {background-image: linear-gradient(to right, #642B73 0%, #C6426E  51%, #642B73  100%)}
 .buttonGray {
	   
	padding: 5px 10px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	border-radius: 20px;
	display: inline-block !important;
	cursor: pointer;
	outline: none;
	border: none;
	text-decoration: none;
	font-weight: bold;
	width: fit-content;
  }

  .buttonGray:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
  }
 


.buttonDarkBlue {
	background-image: linear-gradient(to right, #b5843a 0%, #1c3858  51%, #b56930  100%)
}
.buttonDarkBlue {
	   
	padding: 5px 10px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	border-radius: 20px;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: none;
	text-decoration: none;
	font-weight: bold;
	width: fit-content;
  }

  .buttonDarkBlue:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
  }
  


.buttonBlue {
	background-image: linear-gradient(to right, #b5843a 0%, #1c3858  51%, #b56930  100%);
}
.buttonBlue {
	   
	padding: 5px 10px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	border-radius: 20px;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: none;
	text-decoration: none;
	font-weight: bold;
	width: fit-content;
  }

  .buttonBlue:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
  }

  
  .buttonPurple {
	background-image: linear-gradient(to right, #FC354C 0%, #0ABFBC 51%, #FC354C 100%);
}
  .buttonPurple {
	   
	padding: 5px 10px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	border-radius: 20px;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: none;
	text-decoration: none;
	font-weight: bold;
	width: fit-content;
  }

  .buttonPurple:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
  }
  
  .buttonDarkGreen {background-image: linear-gradient(to right, #283c86 0%, #45a247  51%, #283c86  100%)}

  .buttonDarkGreen {
	   
	padding: 5px 10px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	border-radius: 20px;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: none;
	text-decoration: none;
	font-weight: bold;
	width: fit-content;
  }

  .buttonDarkGreen:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
  }

  

  .buttonLightGreen {background-image: linear-gradient(to right, #ADD100 0%, #7B920A  51%, #ADD100  100%)}

  .buttonLightGreen {
	   
	padding: 5px 10px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	border-radius: 20px;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: none;
	text-decoration: none;
	font-weight: bold;
	width: fit-content;
  }

  .buttonLightGreen:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
  }

  .buttonGreen {background-image: linear-gradient(to right, #C33764 0%, #1D2671  51%, #C33764  100%)}

  .buttonGreen {
	   
	padding: 5px 10px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	border-radius: 20px;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: none;
	text-decoration: none;
	font-weight: bold;
	width: fit-content;
  }

  .buttonGreen:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
  }

  .button {background-image: linear-gradient(to right, #1D4350 0%, #A43931  51%, #1D4350  100%)}

  .button {
	   
	padding: 5px 10px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	border-radius: 20px;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: none;
	text-decoration: none;
	font-weight: bold;
	width: fit-content;
  }

  .button:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
  }

#content {
	
	background-image: url("../images/KIMISBackground.jpeg");
	  background-repeat: no-repeat;
  background-size: 100%;
	border: 1px groove #000033;
	position: relative;
	text-align: center;
	text-shadow: 0 1px 0 #fff;
	width: 500px;
	min-height: 390px;
	margin-right: 15px;

}

#content h3:before,
#content h3:after {
	content: "";
	height: 1px;
	position: absolute;
	top: 10px;
	width: 27%;

}

#content h3:after {
	background: -webkit-linear-gradient(left, #fff 0%, #fff 100%);
right: 0;
}

#content h3:before {
	background: -webkit-linear-gradient(right, #fff 0%, #fff 100%);
	
	left: 0;
}

#content:after,
#content:before {
	background: -webkit-linear-gradient(top, #b5843a 0%, #b56930 100%);
	
	border: 1px double #228B26;
	content: "";
	display: block;
	height: 100%;
	left: -1px;
	position: absolute;
	width: 100%;
}

#content:after {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	transform: rotate(2deg);
	top: 0;
	z-index: -1;
}

#content:before {
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	transform: rotate(-3deg);
	top: 0;
	z-index: -2;
}

#content form {
	margin: 0 20px;
	position: relative
}

#content form input[type="text"],
#content form input[type="password"] {

	-webkit-border-radius: 10px;
	border-radius: 10px;
	color: #777;
	font: 18px Helvetica, Arial, sans-serif;
	margin: 0 0 10px;
	padding: 15px 10px 15px 40px;
	width: 80%;
}

#content form input[type="text"]:focus,
#content form input[type="password"]:focus {
	-webkit-box-shadow: 0 0 2px #ed1c24 inset;
	-moz-box-shadow: 0 0 2px #ed1c24 inset;
	-ms-box-shadow: 0 0 2px #ed1c24 inset;
	-o-box-shadow: 0 0 2px #ed1c24 inset;
	box-shadow: 0 0 2px #ed1c24 inset;
	background-color: #fff;
	outline: none;
	color: #006633;
}

#username {
	background-position: 10px 10px !important
}

#password {
	background-position: 10px -53px !important
}





.buttonlogin {background-image: linear-gradient(to right, #b5843a 0%, #b56930  51%, #b5843a  100%)}
.buttonlogin {
	padding: 10px 20px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	border-radius: 20px;
	display: inline;
	cursor: pointer;
	outline: none;
	border: none;
	text-decoration: none;
	font-weight: bold;
	width: fit-content;
	margin-top: 20px;
 }

 .buttonlogin:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }




.financialyear {
	padding: 10px 25px;
	margin-bottom: 10px;
	border-radius: 10px;
}

.login-head {
	color: #fff;
	text-transform: uppercase;
	margin-top: 50px;
}

.footer {
	background-image: linear-gradient(to right, #1c3858 0%, #2c3e50 51%, #1c3858 100%)
}

.footer {
	padding: 10px;
	text-align: center;
	text-transform: uppercase;
	/* transition: 0.5s;
	background-size: 200% auto; */
	color: white;
	box-shadow: 0 0 20px #eee;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100% ;
}

.version-image {
	text-align: center;
	margin: 20px 0px 50px 0px;
}

.version-image img {
	width: 5%;
}

/* The Modal (background) */
.modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 1;
	/* Sit on top */
	padding-top: 100px;
	/* Location of the box */
	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.4);
	/* Black w/ opacity */
}

/* Modal Content fefefe */
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	border: 1px solid #888;
	width: 80%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
	from {
		top: -300px;
		opacity: 0
	}

	to {
		top: 0;
		opacity: 1
	}
}

@keyframes animatetop {
	from {
		top: -300px;
		opacity: 0
	}

	to {
		top: 0;
		opacity: 1
	}
}

/* The Close Button */
.close {
	color: 656565;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: #990000;
	text-decoration: none;
	cursor: pointer;
}

.modal-header {
	padding: 2px 16px;
	background-color: #CACACA;
	color: #232121;
}

.modal-body {
	padding: 2px 16px;
}

.modal-footer {
	padding: 2px 16px;
	background-color: #5cb85c;
	color: white;
}

/*---- Dashboard ----*/

.dashboard {
	text-align: center;
}



.dashboard-data {
	background-image: linear-gradient(to right, #ECE9E6 0%, #FFFFFF 51%, #ECE9E6 100%);
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

}

.userDetail{
	display: flex;
	flex-direction: column;
	background-image: linear-gradient(to right, #ECE9E6 0%, #FFFFFF 51%, #ECE9E6 100%);
	background-size: 200% auto;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	width: 40%;
	margin: 0 auto;
	padding: 10px;
	/* margin-top: 20px; */
  outline: none;
  border: none;
  margin-bottom: 100px;
}

.userDetail:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}
.details{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	/* float: left; */
	font-weight: 600;
	font-family: "Arial", Helvetica, sans-serif;
	color: #2c3e50;
	
}
.detail1{
	margin-bottom: 15px;
	
}
.buttongrey {
	background-image: linear-gradient(to right, #b56930 0%, #b56930 51%, #b56930 100%);
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 5px;
	display: inline-block;
	cursor: pointer;
	color: #FFF;
	font-size: 12px;
	font-weight: bold;
	padding: 6px 12px;
	text-decoration: none;
	/* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	margin-top: 2px !important;
	margin-right: 1px;
	border: none;
	/* margin-top: 10px; */

}

.buttongrey:hover {
	background-image: linear-gradient(to right, #2c3e50 0%, #2c3e50 51%, #2c3e50 100%);

}

.buttongrey:active {
	position: relative;
	top: 1px;
}

.headRow {
	background-image: linear-gradient(to right, #1c3858 0%, #b56930 51%, #1c3858 100%);
	margin-bottom: 10px !important;
	color: #fff;
}

.table_border_top {
	font-weight: 700;
	font-size: 16px;
	color: #182848;
}


.table_border_bottom {
	font-weight: 600;
	font-size: 14px;
}


/* Style The Dropdown a */
.dropbtn {
	background-color: #4b6cb7;
	color: white;
	padding: 16px;
	font-size: 10px;
	border: none;
	cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	position: relative;
	display: inline-block;

}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #FFF5CC;
	min-width: 200px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	z-index: 1;

}

/* Links inside the dropdown */
.dropdown-content a {
	color: #000;
	padding: 12px 16px;
	text-decoration: none;
	font-weight: 900;
	display: block;
	border: 1px #E0D9CF solid;
	font-family: "Times New Roman", Times, serif;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	background-color: #2c3e50;
	color: #fff;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
}

/* Change the background color of the dropdown a when the dropdown content is shown */
.dropdown:hover .dropbtn {
	background-color: #ebd4d9;
}

.style5 {
	color: #000000;
	font-weight: bold;
}

.nine h1 {
	text-align: center;
	font-size: 35px;
	text-transform: uppercase;
	color: #2c3e50;
	letter-spacing: 1px;
	font-family: "Playfair Display", serif;
	font-weight: 600;
}

.nine h1 span {
	margin-top: 5px;
	font-size: 25px;
	color: #2c3e50;
	word-spacing: 1px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-family: "Playfair Display", serif;
	font-weight: 900;
	display: grid;
	grid-template-columns: 1fr max-content 1fr;
	grid-template-rows: 27px 0;
	grid-gap: 20px;
	align-items: center;
}

.nine h1 span:after,
.nine h1 span:before {
	content: " ";
	display: block;
	border-bottom: 1px solid #b56930;
	border-top: 1px solid #b56930;
	height: 5px;
	background-color: #f8f8f8;
}


.heading1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #2c3e50;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

.heading1 span {
  display: block;
  font-size: 0.5em;
  line-height: 1.3;
}
.heading1 em {
  font-style: normal;
  font-weight: 600;
}
.GeneralHeading{
	margin: 20px;
}

/* === HEADING STYLE #1 === */
.GeneralHeading .heading1{
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 5px;
}
.GeneralHeading .heading1:before {
  width: 50px;
  height: 5px;
  display: block;
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  margin-left: -25px;
  background-color: #b5843a;
}
.GeneralHeading .heading1:after {
  width: 160px;
  height: 1px;
  display: block;
  content: "";
  position: relative;
  margin-top: 10px;
  left: 50%;
  margin-left: -80px;
  background-color: #b80000;
}

/*------- viewCounters.jsp ------*/

.HeaderLabel {
	text-align: center;
	font-weight: 700;
	color: #1c3858;
	font-size: 18px;
	text-transform: uppercase;
}

.HeaderLabelRed {
	text-align: center;
	font-weight: 700;
	color: #B00020;
	font-size: 18px;
	text-transform: uppercase;
	
}
.HeaderLabelOrange {
	text-align: center;
	font-weight: 700;
	color: #983015;
	font-size: 18px;
	text-transform: uppercase;
	
}


.counter_table {
	background-color: #F2EFE9;
	text-align: center;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	padding: 20px;
	border-radius: 5px;
	border: 1px solid lightgray;
}

.counter_table th {

	font-size: 15px;
	text-align: left;
	border-bottom: 1px solid #FFF;
	

}
.counter_table td {

	font-size: 15px;
	text-align: left;
	border-bottom: 1px solid #FFF;
	

}

 .input_details {
	padding: 10px;
	margin: 2px;
	border: none;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	border-radius: 5px;
	width: 100% !important;
	box-sizing: border-box;
	background-color: #FFF;
}

.display {

	border: 1px solid darkgray;
	/* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
	font-weight: bold;
	font-size: 14px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	padding: 2px;
	
	
}

.display th {
	background-color: #F2EFE9;
	padding: 10px;
	border: 1px solid lightgray;
	text-align: left !important;
	
}


.display tr:nth-child(odd) {
	background-color: #F8F6F0;

}

.display tr {
	border: 1px solid lightgray;
}

.style5 {
    color: #000000;
    font-weight: bold;
}

#fade{
	display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 1000%;
    background-color: #ababab;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .70;
    filter: alpha(opacity = 80);
}

#modal {
    display: none;
    position: absolute;
    top: 45%;
    left: 45%;
    width: 120px;
    height: 67px;
    padding: 30px 15px 0px;
    border: 3px solid #ababab;
    box-shadow: 1px 1px 10px #ababab;
    border-radius: 20px;
    background-color: white;
    z-index: 1002;
    text-align: center;
    overflow: auto;
}

.purchaseTable {

	border:2px solid #B5843A;
	/* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
	font-weight: bold;
	font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	padding: 2px;
	
	
}

.purchaseTable th {
	background-color: #F2EFE9;
	padding: 5px;
	border: 1px solid lightgray;
	text-align: left !important;
	
}


.purchaseTable tr:nth-child(odd) {
	background-color: #f5f8fd;

}

.purchaseTable tr {
	border: 1px solid lightgray;
}
.shadow {

	border: 1px solid darkgray;
	/* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
	font-weight: bold;
	font-size: 14px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	padding: 2px;
	
	
}

.shadow th {
	background-color: #F2EFE9;
	padding: 10px;
	border: 1px solid lightgray;
	text-align: left !important;
}


.shadow tr:nth-child(odd) {
		background-color: #F8F6F0;

}

.shadow tr {
	border: 1px solid lightgray;
}
/* .display tr:hover {
	background-color: #E5E5BE !important;
} */
.dataTables_length{
	margin: 0px 0px 10px 25px;
}
#example_filter{
	margin:0px 25px 10px 0px ;
}

/* Purchase */












.style17{
	font-weight: 700;
}
.style2{
	
	padding: 5px 0px;
	font-weight: 600;
}
.style2Background{
	background-image: linear-gradient(to right, #003973 0%, #E5E5BE 51%, #003973 100%);
	padding: 5px 0px;
}


.headRadio{

	background-image: linear-gradient(to right, #afd4ff 0%, #ffb882 51%, #afd4ff 100%);
	color: #000 !important;
	/* background-image: linear-gradient(to right, #cad3fc 0%, #E5E5BE 51%, #cad3fc 100%); */
	box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px 0px;
	border-top:  1px solid #b5843a !important;
	border-bottom:  1px solid #b5843a !important;
	border-radius: 10px;
	/* color: #000 !important; */

}
.headRadio1{
	background-image: linear-gradient(to right, #1c3858 0%, #1c3858 51%, #1c3858 100%);
	box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px 0px;
	color: #FFF !important;


}




/* .button{
	background-color: #E5E5BE !important;
	cursor: pointer;
	padding: 5px 15px;
	border-radius: 20px !important;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.button:hover{
	background-color: #666 !important;
	color: #fff;
} */

.productSearch{
	font-weight: 600;
	margin: 20px 15px;
	padding: 5px;
	border: 1px solid darkgray;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	
}

.searchBy{
	margin-bottom: 20px !important;
	background-image: linear-gradient(to right, #afd4ff 0%, #ffb882 51%, #afd4ff 100%);
	border: none;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
	padding: 0px 0px 10px 0px;
	margin-bottom: 10px;
	border-radius: 5px;
}


#modal {
    display: none;
    position: absolute;
    top: 45%;
    left: 45%;
    width: 120px;
    height: 67px;
    padding:30px 15px 0px;
    border: 3px solid #ababab;
    box-shadow:1px 1px 10px #ababab;
    border-radius:20px;
    background-color: white;
    z-index: 1002;
    text-align:center;
    overflow: auto;
}





	.buttonMerun {background-image: linear-gradient(to right, #FF512F 0%, #DD2476  51%, #FF512F  100%)}
	.buttonMerun {
		display: inline-block;
	   padding: 5px 10px;
	   text-align: center;
	   text-transform: uppercase;
	   transition: 0.5s;
	   background-size: 200% auto;
	   color: white;            
	   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	   border-radius: 20px;
	   cursor: pointer;
	   outline: none;
	   border: none;
	   text-decoration: none;
	   font-weight: bold;
	   width: fit-content;
	 }

	 .buttonMerun:hover {
	   background-position: right center; /* change the direction of the change here */
	   color: #fff;
	   text-decoration: none;
	 }

	 
	 .buttonOrange {background-image: linear-gradient(to right, #FF512F 0%, #F09819  51%, #FF512F  100%)}
	 .buttonOrange {
		display: inline-block;
		padding: 5px 10px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;            
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
		border-radius: 20px;
		cursor: pointer;
		outline: none;
		border: none;
		text-decoration: none;
		font-weight: bold;
		width: fit-content;
	  }
 
	  .buttonOrange:hover {
		background-position: right center; /* change the direction of the change here */
		color: #fff;
		text-decoration: none;
	  }	  
	 .dimScreen
	{
		position:absolute;
		padding:0;
		margin:0;
		z-index: 999;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
	    background-color: rgba(43, 45, 65, 0.8); 
	    filter: blur(10px);
	}


	.container {

		z-index: 9999999;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		/* width: fit-content; */
		 background-color: rgba(255, 255, 255, 0.4);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
         border: 1px solid #d4af37;
		 color: #fff !important;
		margin: 6rem auto;
		border-radius: 20px;
		padding: 20px;
		max-width: 569px;
		width: 100%;
		 box-shadow: 
    0 0 5px #d4af37,        /* Inner sharp glow */
    0 0 15px #b8860b,       /* Medium soft glow */
    0 0 30px rgba(212, 175, 55, 0.4); /* Large diffused ambient glow */
		@media (max-width: 590px) {
		width: 90%;
		/* border: 2px solid #b5843a; */
	}

	
	}

.info, .success, .warning, .error, .validation {
	box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
	margin: 10px 0px;
	padding:15px 10px 15px 150px;
	background-repeat: no-repeat;
	background-position: 10px center;
	}
	.info {
	color: #00529B;
	background-color: #BDE5F8;
	background-image: url('info.png');
	}
	.success {
	color: #4F8A10;
	background-color: #DFF2BF;
	background-image:url('../images/success.png');
	}
	.warning {
	color: #9F6000;
	background-color: #FEEFB3;
	background-image: url('warning.png');
	}
	.error {
	color: #D8000C;
	background-color: #FFBABA;
	background-image: url('../images/error.png');
	}

	
	.btn_new {background-image: linear-gradient(to right, #642B73 0%, #C6426E  51%, #642B73  100%)}
	.btn_new {
	   padding: 8px 24px;
	   text-align: center;
	   text-transform: uppercase;
	   transition: 0.5s;
	   background-size: 200% auto;
	   color: white;            
	   border-radius: 10px;
	   display: block;
	   text-decoration: none;
	  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	 }
	 .btn_new:hover {
	   background-position: right center; /* change the direction of the change here */
	   color: #fff;
	   text-decoration: none;
	 }

	 
	 .btn_red {background-image: linear-gradient(to right, #000000 0%, #e74c3c  51%, #000000  100%)}
	.btn_red {
	   padding: 8px 24px;
	   text-align: center;
	   text-transform: uppercase;
	   transition: 0.5s;
	   background-size: 200% auto;
	   color: white;            
	   border-radius: 10px;
	   display: block;
	   text-decoration: none;
	   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	 }
	 .btn_red:hover {
	   background-position: right center; /* change the direction of the change here */
	   color: #fff;
	   text-decoration: none;
	 }

	 
	 .btn_green {background-image: linear-gradient(to right, #134E5E 0%, #71B280  51%, #134E5E  100%)}
	 .btn_green {
		padding: 8px 24px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;            
		border-radius: 10px;
		display: block;
		text-decoration: none;
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	  }
	  .btn_green:hover {
		background-position: right center; /* change the direction of the change here */
		color: #fff;
		text-decoration: none;
	  }

	  
	  .btn_yellow {background-image: linear-gradient(to right, #F2994A 0%, #F2C94C  51%, #F2994A  100%)}
	  .btn_yellow {
		padding: 8px 24px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;            
		border-radius: 10px;
		display: block;
		text-decoration: none;
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	  }
	  .btn_yellow:hover {
		background-position: right center; /* change the direction of the change here */
		color: #fff;
		text-decoration: none;
	  }

	  
	  .btn_brown {background-image: linear-gradient(to right, #F3904F 0%, #3B4371  51%, #F3904F  100%)}
	  .btn_brown {
		padding: 8px 24px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;            
		border-radius: 10px;
		display: block;
		text-decoration: none;
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	  }
	  .btn_brown:hover {
		background-position: right center; /* change the direction of the change here */
		color: #fff;
		text-decoration: none;
	  }

	  .btn_lightorange {background-image: linear-gradient(to right, #FF512F 0%, #F09819  51%, #FF512F  100%)}
	  .btn_lightorange {
		padding: 8px 24px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;            
		border-radius: 10px;
		display: block;
		text-decoration: none;
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	  }
	  .btn_lightorange:hover {
		background-position: right center; /* change the direction of the change here */
		color: #fff;
		text-decoration: none;
	  }
	   
	   .btn_pur {background-image: linear-gradient(to right, #4776E6 0%, #8E54E9  51%, #4776E6  100%)}
	   .btn_pur {
		padding: 8px 24px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;            
		border-radius: 10px;
		display: block;
		text-decoration: none;
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	  }
	  .btn_pur:hover {
		background-position: right center; /* change the direction of the change here */
		color: #fff;
		text-decoration: none;
	  }

	  
	  .btn_pink {background-image: linear-gradient(to right, #DA22FF 0%, #9733EE  51%, #DA22FF  100%)}
	  .btn_pink {
		padding: 8px 24px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;            
		border-radius: 10px;
		display: block;
		text-decoration: none;
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	  }
	  .btn_pink:hover {
		background-position: right center; /* change the direction of the change here */
		color: #fff;
		text-decoration: none;
	  }

	  .btn_blue {
		background-image: linear-gradient(to right, #1A2980 0%, #26D0CE  51%, #1A2980  100%)
	}
	.btn_blue {
		padding: 8px 24px;
		
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;            
		border-radius: 10px;
		display: block;
		text-decoration: none;
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	  }
	  .btn_blue:hover {
		background-position: right center; /* change the direction of the change here */
		color: #fff;
		text-decoration: none;
	  }

	  .custom-select {
		position: relative;
		width: 90%;
		height: 36px;
		border: 1px solid ;
	  
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		user-select: none;
		background-color: #D9DBE1;
		font-weight: bold;
		font-size: 11px; 
		font-family: Verdana,  Arial, Sans-Serif; 
		font-style: normal;
	  }
	  .custom-select a {
		display: inline-block;
		width: 90%;
		height: 20px;
		padding: 8px 10px;
		color: #000;
		background-color: #D9DBE1;
		text-decoration: none;
		cursor: pointer;
	  }
	  
	  .custom-select a span {
		display: inline-block;
		width: 90%;
		white-space: nowrap;
		overflow: hidden;
	  }
	  .custom-select select {
		display: none !important;
	  }
	  .custom-select > div {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		margin: 1px 0 0 -1px;
		width: 100%;
		border: 1px solid #888;
		border-top: 0;
		background: #FFFFFF;
		z-index: 10;
		overflow: hidden;
	  }
	  .custom-select input {
		width: 90%;
		border: 1px solid #888;
		margin: 5px 5px 0;
		padding: 5px;
		  font-weight: bold;
		font-size: 11px; 
		font-family: Verdana,  Arial, Sans-Serif; 
		font-style: normal;
		background: #fff url('../images/multilist.search.png') no-repeat 5px 50%;
		line-height: 2em;
		padding: 2px 5px 2px 25px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		background-color: #EAEBEE;
		
	  }
	  
	  .custom-select loading{
		   background: white url('../images/multilist.indicator.gif') right center no-repeat;
		  
	  }
	  
	  .custom-select > div > div {
		position: relative;
		overflow-x: hidden;
		overflow-y: visible;
		margin: 5px;
		max-height: 250px;
	  }
	  .custom-select div ul {
		padding: 0;
		margin: 0;
		list-style: none;
	  }
	  .custom-select div ul li {
		display: none;
		padding: 5px;
	  }
	  .custom-select div ul li.active {
		display: block;
		cursor: pointer;
	  }
	  .custom-select div ul li:hover {
		background: #9298A9;
		color: #fff;
	  }
	  .custom-select div ul li.option-hover {
		background: #808040;
		color: #fff;
	  }
	  .custom-select div ul li.option-disabled {
		color: #999;
	  }
	  .custom-select div ul li.option-disabled:hover {
		background: #ff9999;
		color: #C4C8D2;
	  }
	  .custom-select div ul li.option-hover.option-disabled {
		background: #ff6666;
		color: #C4C8D2;
	  }
	  .custom-select div ul li.no-results {
		display: none;
		background: #f2f2f2;
		color: #000;
	  }
	  
	  .autocomplete-suggestions strong {
		  font-weight: normal; 
		  color: #3399ff;
		  }
	  
	  /* Custom Select - Open
	  ----------------------------------*/
	  .custom-select-open {
		border-bottom: 1px solid ;
		  background-color: #D9DBE1;
	  }
	  .custom-select-open div {
		display: block;
		  background-color: #D9DBE1;
	  }
	  
	  /* Hide Input Box
	  ----------------------------------*/
	  .custom-select input.custom-select-hidden-input {
		position: absolute !important;
		top: 0 !important;
		left: -1000px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		background: transparent !important;
		z-index: -1 !important;
	  }
	  
	  /* Mobile Override
	  ----------------------------------*/
	  .custom-select-mobile select {
		display: inline !important;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	  }

	  .GrantedList option{
		box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
		margin: 5px;
		padding: 5px;
		color: #1c3858;
	  }

	    #DeniedList option{
		box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
		margin: 5px;
		padding: 5px;
		color: #1c3858;
	  }