body {
background-color: #ffffff;
color: navy;
font-size: 16px;

}

p {
font-size: 16px;
width: 100%;

}
p.navy {
	color: navy;
}

p.prednormal {
font-size: 16px;
width: 100%;
color: red;

}

p.ppunchline {
font-size: 24px;
width: 100%;
color: navy;
font-weight: bold;

}
p.ppunchline2 {
font-size: 16px;
width: 100%;
color: dodgerblue;
font-weight: bold;

}

p.pred {
font-size: 12px;
width: 100%;
color: red;

}

p.psmall {
font-size: 12px;
width: 100%;
color: grey;

}

p.psmallnavy {
font-size: 12px;
width: 100%;
color: navy;

}

p.psmallnavyrows {
font-size: 12px;
width: 100%;
color: navy;
margin-top: 0.3px;
margin-bottom: 0.3px;
}

p.psmallwhite {
font-size: 12px;
width: 100%;
color: white;

}

p.TCs {
font-size: 14px;
width: 100%;
color: navy;
font-weight: bold;

}

table.smallnavytable {
font-size: 12px;
color: navy;
border: 0.5px solid #6388ff;

}

td.smallnavytext {
font-size: 12px;
color: navy;

}
th.smallnavytext {
font-size: 12px;
color: white;
background-color: grey;

}

tr.stripes:nth-child(even) {
background-color: #f2f2f2;

}

table.admintable {
color: navy;
border: 0.5px solid #6388ff;

}

table.onindex {
border: 0.5px solid #9999ff;

}


h2 {
color: white;
background-color: #651fff;
font-size: 110%;
padding: 10px 10px;
margin-left: auto;
margin-right: auto;
text-align: center;

}

h3 {
color: white;
background-color: grey;
font-size: 110%;
padding: 10px 10px;
width: 100%;
text-align: center;

} 
h3.voucherheader {
color: white;
background-color: lime;
font-size: 110%;
padding: 10px 10px;
width: 100%;
text-align: center;

} 

h4 {
color: white;
background-color: dodgerblue;
font-size: 100%;
padding: 10px 10px;
width: 100%;
text-align: center;

}
h4.withcounter {
color: white;
background-color: dodgerblue;
font-size: 100%;
padding: 5px 5px;
width: 100%;
text-align: center;

} 
h4.voucherheader {
color: navy;
background-color: #99ff66;
font-size: 100%;
padding: 10px 10px;
width: 100%;
text-align: center;
} 

h4.voucherheader2 {
color: red;
background-color: white;
font-size: 120%;
padding: 1px 1px;
margin: 1 px 1px;
width: 100%;
text-align: center;

} 

h4.voucherheader3 {
color: purple;
background-color: white;
font-size: 120%;
padding: 1px 1px;
margin: 1 px 1px;
width: 100%;
text-align: center;

} 

h4.voucherheadergreen {
color: #a0d468;
background-color: white;
font-size: 120%;
padding: 1px 1px;
margin: 1 px 1px;
width: 100%;
text-align: center;

} 


a:link, a:visited {
color: #6699ff;
text-decoration: none;

}

a:hover, a:active {
background-color: #f1f1f1;
} 

.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)

}

.w3-card-long{
box-shadow:1px 2px 5px 0 rgba(0,0,0,0.2),0 2px 10px 0 rgba(0,0,0,0.2);
border-radius: 10px;

}
.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)

}

form {
    border: 1px solid #ffffff;
	font-size: 18px;
	width: 100%;
	background-color: #f1f1f1;
  	border-radius: 4px;
}

form.noborder {
    border: 1px solid #ffffff;
	font-size: 18px;
	width: 100%;
	background-color: #ffffff;
  	border-radius: 4px;
	margin: 0 0;
}

form.red {
    border: 0px solid #efefef;
	font-size: 18px;
	width: 100%;
	background-color: #ffffff;
  	border-radius: 0px;
        padding: 1px;
}

input[type=text], input[type=password], input[type=email], input[type=number], input[type=file]   {
    width: 100%;
    padding: 14px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  	border-radius: 7px;
	color: navy;
	font-family:Arial, Helvetica, sans-serif; 

}

input.pwd[type=password]  {
    width: 90%;
    padding: 14px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  	border-radius: 7px;
	color: navy;
	font-family:Arial, Helvetica, sans-serif; 

}

input.integersize[type=number]  {
    width: 60%;
    padding: 14px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  	border-radius: 7px;
	color: navy;

}

input.decimalsize[type=number]  {
    width: 30%;
    padding: 14px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  	border-radius: 7px;
	color: navy;

}

input.uploadfile[type=file] {
width:100%; 
background-color: dodgerblue; 
font-size:20px; 
color: white; 
padding: 8px 15px 8px 15px; 
border-style: solid; 
border-width: 0.5px; 
border-radius:0%; 
border-color:#efefef;

}

textarea {
    width: 100%;
    height: 60px;
    padding: 14px 20px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 7px;
    background-color: #ffffff;
    resize: none;
	color: navy;
	font-family:Arial, Helvetica, sans-serif; 

} 

select{ 
background:white; 
width: 100%; 
font-family:Arial, Helvetica, sans-serif; 
font-size:16px; 
color:navy; 
border: 1px solid #ccc;
border-radius: 0; 
height: 44px; 
padding: 2px 10px;
margin: 8px 0;
border-radius: 7px;

 } 

select.day{ 
background:white; 
width: 27%; 
font-family:Arial, Helvetica, sans-serif; 
font-size:16px; 
color:navy; 
border: 1px solid #ccc;
border-radius: 7px; 
height: 44px; 
padding: 2px 10px;
margin: 8px 0;
 } 

select.month{ 
background:white; 
width: 40%; 
font-family:Arial, Helvetica, sans-serif; 
font-size:16px; 
color:navy; 
border: 1px solid #ccc;
border-radius: 7px; 
height: 44px; 
padding: 2px 10px;
margin: 8px 0;
 } 

select.year{ 
background:white; 
width: 30%; 
font-family:Arial, Helvetica, sans-serif; 
font-size:16px; 
color:navy; 
border: 1px solid #ccc;
border-radius: 7px; 
height: 44px; 
padding: 2px 10px;
margin: 8px 0;
 } 

select.gmt { 
background:white; 
width: 20%; 
font-family:Arial, Helvetica, sans-serif; 
font-size:16px; 
color:navy; 
border: 1px solid #ccc;
border-radius: 7px; 
height: 44px; 
padding: 2px 10px;
margin: 8px 0;
 } 

select.award{ 
background:white; 
width: 15%; 
font-family:Arial, Helvetica, sans-serif; 
font-size:16px; 
color:navy; 
border: 1px solid #ccc;
border-radius: 7px; 
height: 44px; 
padding: 2px 10px;
margin: 8px 0;
 } 


button {
    background-color: #651fff;
    color: white;
    padding: 14px 20px;
    margin: 4px 0;
    border: 1px solid #ffffff;
    cursor: pointer;
	font-weight: bold;
	border-radius: 9px;


}

.backbutton {
    background-color: #ffffff;
    color: #3bafda;
    font-size: 16px;
    padding: 2px 2px;
    margin: 2px 0;
    border: 0px solid #ffffff;
    cursor: pointer;

}
.searchbutton {
    background-color: #ffffff;
    color: navy;
    padding: 4px 7px;
    margin: 4px 0;
    border: 1px solid navy;
    cursor: pointer;
    width: auto;
	border-radius: 23px;
	font-size: 100%;
}

button:hover {
    opacity: 0.8;
}

.cancelbtn {
    width: auto;
    padding: 14px 20px;
    background-color: #f44336;
}

.navbutton {
    width: auto;
    padding: 4px 7px;
    background-color: #ffffff;
	color: navy;
    border: 1px solid blue;
	font-weight: bold;
	border-radius: 5px;
}

.awardbuttondisabled {
    width: auto;
    padding: 4px 7px;
    background-color: #ffffff;
    border: 1px solid #f1f1f1;
	color: #f1f1f1;
	font-weight: bold;
	border-radius: 23px;
}

.awardbutton {
    width: auto;
    padding: 4px 7px;
    background-color: #ffffff;
    border: 1px solid navy;
	color: red;
	font-weight: bold;
	border-radius: 23px;
}

.voucherawardbutton {
    width: auto;
    padding: 4px 7px;
    background-color: #ffffff;
    border: 1px solid navy;
	color: red;
	font-weight: bold;
	border-radius: 23px;
}


.exitbutton {
    width: auto;
    padding: 4px 7px;
    background-color: #ac92ec;
	color: white;
	font-weight: bold;
	border-radius: 15px;

}

.imgcontainer {
    text-align: center;
	width: 100%;
	margin-left: auto;
	margin-right: auto;

}

.vouchercontainer {
    text-align: center;
	width: 96%;
	margin-left: auto;
	margin-right: auto;

}

.indexpagecontainer {
    text-align: center;
	width: 96%;
	margin-left: auto;
	margin-right: auto;

}

.smallfontgrey {
font-size: 80%;
width: 100%;
color: grey;
text-align: left;

}
.scanbutton {
    text-align: center;
	margin-left: auto;
	margin-right: auto;
    position: fixed;
    bottom: 0;


}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

img.imgcircle {
border-radius: 50%;
border: 1px solid #6388ff;
padding: 5px;

}

img.imgcircle2 {
border-radius: 50%;
border: 1px solid #efefef;
padding: 3px;

}

img.imgcircletop {
border-radius: 50%;
border: 1px solid #6388ff;
padding: 3px;
background-color: #ffffff;

}

img.navleft {
	width: 22px;
	height: 22px;
}

.container {
	margin-top: 60px;
	padding: 2px;
	font-size: 16px;
	background-color: #ffffff;
	border-radius: 10px;
	width: 100%;

}

.formcontainer {
	font-size: 18px;
	width: 92%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16);
}

.logincontainer {
	font-size: 18px;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16);
}
.smallfont {
	font-size: 12px;
	width: 100%;
	color: navy;
}

hr { 
border: 0; 
border-top: 0.8px solid #f1f1f1; 
border-bottom: 0.8px solid #f1f1f1; 
}


hr.hrfine {
	border: 0; 
	border-top: 0.4px dotted grey; 
	border-bottom: 0.4px dotted grey; 

}

hr.hrpurple {
	border: 0; 
	border-top: 0.8px dotted  purple; 
	border-bottom: 0.8px dotted  purple; 

}


span.psw {
	position: fixed;
	top: 10px;
	right: 10px;
}

span.psw2 {
	position: fixed;
	top: 10px;
	right: 90px;
}


span.scanbutton {
	position: fixed;
    bottom: 0;

}


span.dot {
  height: 25px;
  width: auto;
  color: red;
  font-weight: bold;
  font-size: 70%;
  padding: 4px;
  background-color: white;
  border: 2px solid;
  border-color: lime;
  border-radius: 50%;
  display: inline-block;
  margin: 0;
}

div.fixedbottom {
    position: fixed;
    bottom: 0;
	margin-left: auto;
	margin-right: auto;
    width: 100%;
    border: 3px solid #73AD21;
}

div.center {
    position: relative;
    width: 100%;
	 display: block;
	 margin-left: auto;
     margin-right: auto;
	 text-align: center;
}

div.relative {
    position: absolute;
    width: 100%;
    height: 500px;
    border: 0px solid #000000;
} 


div.absolute1 {
    position: absolute;
    width: 33%;
    top: 1px;
    left: 16%;
    height: 120px;
    border: 0px solid #ac92ec;
	text-align: center;
	padding: 5px;

}

div.absolute2 {
    position: absolute;
    width: 33%;
    top: 1px;
    left: 51%;
    height: 120px;
    border: 0px solid #ac92ec;
	text-align: center;
	padding: 5px;
}
	
div.absolute3 {
    position: absolute;
    width: 33%;
    top: 150px;
    left: 16%;
    height: 120px;
    border: 0px solid #ac92ec;
	text-align: center;
	padding: 5px;

}

div.absolute4 {
    position: absolute;
    width: 33%;
    top: 150px;
    left: 51%;
    height: 120px;
    border: 0px solid #ac92ec;
	text-align: center;
	padding: 5px;
}

div.absolute5 {
    position: absolute;
    width: 100%;
	top: 300px;
   left: 0%;
    height: 130px;
    border: 0px solid #ac92ec;
	text-align: center;
	padding: 5px;
}

div.absolutex1 {
    position: absolute;
    width: 33%;
    top: 1px;
    left: 16%;
    height: 120px;
    border: 0px solid #ac92ec;
	text-align: center;
	padding: 5px;
}

div.absolutex2 {
    position: absolute;
    width: 33%;
    top: 1px;
    left: 51%;
    height: 120px;
    border: 0px solid #ac92ec;
	text-align: center;
	padding: 5px;
}

div.absolutez1 {
    position: relative;
    width: 33%;
    top: 1px;
    left: 16%;
    height: 120px;
    border: 0px solid #ac92ec;
	text-align: center;
	padding: 5px;
}

div.absolutez2 {
    position: relative;
    width: 33%;
    top: 1px;
    left: 51%;
    height: 120px;
    border: 0px solid #ac92ec;
	text-align: center;
	padding: 5px;
}





/* Customize the label (the container) */
.container2 {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* Hide the browser's default checkbox */
.container2 input {
position: absolute;
opacity: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container2:hover input ~ .checkmark {
background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container2 input:checked ~ .checkmark {
background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}

/* Show the checkmark when checked */
.container2 input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container2 .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
} 

.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear 3s;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} 


@media only screen and (max-width: 768px) {
body {
background-color: #ffffff;
}