body {
background-color: #ffffff;
color: navy;
font-size: 15px;
height: 100%;

}

.bottomnav {
  overflow: hidden;
  background-color: navy;
  color: white;

    position: fixed; /* Set the navbar to fixed position */
    bottom: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
}


.grid-container {
  position: static;
  bottom: 0px;
}


.headlinepic {
height: 300px; 
background-image: url(https://www.upodia.io/Loyalty/images/social.svg); 
background-position: center;
background-repeat: no-repeat;
background-size: cover; 
color: white;
border-bottom: 2px solid navy;

}

.headlinepicregister {
height: 300px; 
background-image: url(https://www.upodia.io/Loyalty/images/topx1b.jpg); 
background-position: top;
background-repeat: no-repeat;
background-size: cover; 
color: white;
border-bottom: 2px solid gold;

}

.headlinepicabout {
height: 300px; 
background-image: url(https://www.upodia.io/Loyalty/images/topx1b.jpg); 
background-position: top;
background-repeat: no-repeat;
background-size: cover; 
color: white;
border-bottom: 2px solid green;

}

.headlinepicabout1 {
height: 300px; 
background-image: url(https://www.upodia.io/Loyalty/images/topx1b.jpg); 
background-position: top;
background-repeat: no-repeat;
background-size: cover; 
color: white;
border-bottom: 2px solid green;

}


.flex-container {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}


.flex-container-element {
  width: 450px;
  margin-right: 15px;
}


#loadWrap  {
  	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.loader {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid navy;
  width: 20px;
  height: 20px;
  -webkit-animation: spin 1.2s linear infinite; /* Safari */
  animation: spin 1.2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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

#loadWrap  {
	display: none;
	
}

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



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

}
p.navy {
	color: navy;
}

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

}

p.pgreen {
font-size: 15px;
width: 100%;
color: green;

}

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

}
p.ppunchline2 {
font-size: 15px;
width: 100%;
color: navy;

}

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.psmallwhite {
font-size: 12px;
width: 100%;
color: white;
}

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: #efefef;
border: 0.5px solid #6388ff;

}

table.menutable {
font-size: 15px;
color: navy;
border: 0px solid #6388ff;

}
tr.stripesmenu:nth-child(even) {
background-color: #ffffff;
border-bottom: 0.5px dotted #6388ff;

}

tr.stripesmenu:nth-child(odd) {
background-color: #efefef;
border-bottom: 0.5px dotted #6388ff;

}

tr.ridestripes:nth-child(odd) {
background-color: #efefef;
border: 0.5px solid red;

}
tr.ridestripes:nth-child(even) {
background-color: #f2f2f2;
border: 0.5px solid #6388ff;

}

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

}

table.onindex {
border: 0.3px solid dodgerblue;
background-color: #efefef;

}


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

}



.heading {
color: white;
background-color: #651fff;
font-size: 110%;
padding: 10px 10px;
width: 100%;
text-align: center;
position: relative;
display: inline-block;
font-weight: bold;
}

.headingconsvoucher {
color: #a0d468;
font-size: 22px;
padding: 0;
margin: 1 px 1px;
width: 96%;
text-align: center;
position: relative;
display: inline-block;
font-weight: bold;
}

.consvoucher {
  width: 100%;
  background-color: #f1f1f1;
  font-weight: bold;
}

.consvoucher .vouchericon {
  position: absolute;
  top: 0.2px;
  left: 0.2px;
  padding: 0px 0px;
  color: white;
  margin: 0;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  background-color: #E0ECF8;
}

.heading .icon {
  position: absolute;
  top: -18px;
  left: 3px;
  padding: 0px 0px;
  border-radius: 50%;
  background-color: #651fff;
  color: white;
  border: 0px solid #efefef;
  margin: 0;
}
h3.voucherheader {
color: white;
background-color: lime;
font-size: 110%;
padding: 10px 10px;
width: 100%;
text-align: center;

} 

h3.profileheader {
color: navy;
background-color: white;
font-size: 110%;
padding: 5px 5px;
margin: 1 px 1px;
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: #E0ECF8;
font-size: 100%;
padding: 10px 10px;
margin: 0 0 0 0;
width: 100%;
text-align: center;
border-radius: 12px 12px 0px 0px;
} 

h4.voucherheader2 {
color: red;
background-color: #f1f1f1;
font-size: 28px;
padding: 0;
margin: 0 0 0 0;
width: 100%;
text-align: center;

} 

h4.voucherheader3 {
color: purple;
background-color: white;
font-size: 24px;
padding: 0;
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;
} 

.speechbubble {
  width: 50%;
  margin: 1px auto;
  border: 3px solid green;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  font-weight: normal;
  color: navy;
  font-family: arial;
  position: relative;
}

.speechbubbletop:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid green;
  right: 46%;
  top: -23px;
}

.speechbubbletop:after {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid red;
  right: 46%;
  top: -18px;
}


.toplearningmenu {
text-align: center; 
border: 1px solid green; 
border-bottom: 2px solid green; 
color: navy; 
background-color: white; 
padding: 7px 4px; 
margin: 1px; 
margin-right: 10px;
margin-left: 10px;
display: inline-block; 
border-radius: 6px;

}

.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-onindex {
box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
padding: 7px; 
margin-bottom: 9px;

}
.w3-card-voucher{
box-shadow:1px 2px 5px 1px rgba(0,0,0,0.2),0 2px 10px 0 rgba(0,0,0,0.2);
border-radius: 12px 12px 12px 12px;
background-color: #f1f1f1;
margin: 1px 1px;
}

.w3-card-profile{
box-shadow: 1px 2px 5px 1px grey;
border-radius: 2px 2px 2px 2px;
background-color: #efefef;
}

.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;
background-color: #f1f1f1;
}

.w3-card-longnew{
box-shadow:1px 2px 5px 0 rgba(0,0,0,0.2),0 2px 10px 0 rgba(0,0,0,0.2);
border-radius: 0px;
background-color: #ffffff;
}


.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);


}

.w3-card-listednugget {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  width: 80%;
}

.w3-card-listednugget2 {
  float: right;
  width: 27%;
}

.w3-card-listednugget3 {
  width: 80%;
}

.w3-card-listednugget-item{
box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
margin-top: 4px; 
margin-bottom: 8px; 
padding-bottom: 10px; 
padding-top: 2px; 
padding-left: 10px; 
border: 0.7px solid green; 
border-bottom: 3px solid green; 
color: navy; 
text-align: left;
}

.contentline {
border-top: 4px solid navy;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 15px;
background-color: #efefef;
}


.providerdetail {
font-size: 14px; 
margin-top: 5px; 
padding: 5px; 
border: 0.8px dotted navy; 
text-align: center; 
background-color: silver; 
width: 67%; 
margin-left: 5px;
}


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

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

form.red {
    border: 1px solid red;
	font-size: 18px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	background-color: #f1f1f1;
}

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

}

input[type=checkboxtext]   {
    border: 1px solid #ccc;
    box-sizing: border-box;
    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;

}

input.textonindex[type=text]::placeholder {
	text-align: center;

}

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

}

input.integersize[type=number]  {
    width: 55%;
    height: 60px;
    padding: 4px 10px;
    margin: 8px;
    margin-bottom: 12px;
    display: inline-block;
    border-top: 1px dotted navy;
    border-bottom: 1px solid navy;
    border-left: 0px;
    border-right: 0px;
    box-sizing: border-box;
  	border-radius: 0px;
	color: navy;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
}

input.decimalsize[type=number]  {
    width: 32%;
    height: 60px;
    padding: 4px 10px;
    margin: 8px;
    margin-bottom: 12px;
    display: inline-block;
    border-top: 1px dotted navy;
    border-bottom: 1px solid navy;
    border-left: 0px;
    border-right: 0px;
    box-sizing: border-box;
  	border-radius: 0px;
	color: navy;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
}

input.menuorder[type=number]  {
    width: 60px;
    height: 30px;
    padding: 4px 10px;
    margin: 4px 0;
    display: inline-block;
    border-top: 1px dotted navy;
    border-bottom: 1px solid navy;
    border-left: 0px;
    border-right: 0px;
    box-sizing: border-box;
  	border-radius: 0px;
	color: navy;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
}
textarea {
    width: 100%;
    height: 80px;
    padding: 14px 20px;
    margin-bottom: 12px;
    box-sizing: border-box;
    border: 1px solid navy;
    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:15px; 
color:navy; 
    border-top: 1px dotted navy;
    border-bottom: 1px solid navy;
    border-left: 0px;
    border-right: 0px;
height: 44px; 
padding: 2px 10px;
margin: 8px 0;
border-radius: 0px;

 } 

select.day{ 
background:white; 
width: 27%; 
font-family:Arial, Helvetica, sans-serif; 
font-size:15px; 
color:navy; 
    border-top: 1px dotted navy;
    border-bottom: 1px solid navy;
    border-left: 0px;
    border-right: 0px;
border-radius: 0px; 
height: 44px; 
padding: 2px 10px;
margin: 8px 0;
 } 

select.month{ 
background:white; 
width: 40%; 
font-family:Arial, Helvetica, sans-serif; 
font-size:15px; 
color:navy; 
    border-top: 1px dotted navy;
    border-bottom: 1px solid navy;
    border-left: 0px;
    border-right: 0px;
border-radius: 0px; 
height: 44px; 
padding: 2px 10px;
margin: 8px 0;
 } 

select.year{ 
background:white; 
width: 30%; 
font-family:Arial, Helvetica, sans-serif; 
font-size:15px; 
color:navy; 
    border-top: 1px dotted navy;
    border-bottom: 1px solid navy;
    border-left: 0px;
    border-right: 0px;
border-radius: 0px; 
height: 44px; 
padding: 2px 10px;
margin: 8px 0;
 } 

select.gmt { 
background:white; 
width: 20%; 
font-family:Arial, Helvetica, sans-serif; 
font-size:15px; 
color:navy; 
    border-top: 1px dotted navy;
    border-bottom: 1px solid navy;
    border-left: 0px;
    border-right: 0px;
border-radius: 0px; 
height: 44px; 
padding: 2px 10px;
margin: 8px 0;
 } 

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

select.selectregion{
width:100%; 
background-color: dodgerblue; 
font-size:20px; 
color: white; 
padding: 8px 15px 8px 15px; 
    border-top: 1px dotted navy;
    border-bottom: 1px solid navy;
    border-left: 0px;
    border-right: 0px;

}

option.optionregion{
width:100%; 
background-color: navy; 
font-size:20px; 
color: white;
}

button {
    background-color: #ffffff;
    color: navy;
    padding: 14px 20px;
    margin: 4px 0;
    border: 1.8px solid navy;
    cursor: pointer;
    width: 100%;
	font-weight: bold;
	border-radius: 15px;
	display: inline-block;
	outline: none;
}


button.submitregion {
    background-color: #ffffff;
    color: navy;
    padding: 14px 20px;
    margin: 4px 0;
    border: 1px solid dodgerblue;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
    border-radius: 15px;
}

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

.backbutton {
    background-color: #ffffff;
    color: #3bafda;
    font-size: 15px;
    padding: 2px 2px;
    margin: 2px 0;
    border: 0px solid #ffffff;
    cursor: pointer;
    font-weight: normal;
    width: auto;

}
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: 9px 12px;
    background-color: #ffffff;
    border: 1px solid #f1f1f1;
	color: #f1f1f1;
	font-weight: bold;
	border-radius: 7px;
}

.awardbutton {
    width: auto;
    padding: 9px 12px;
    background-color: green;
    border: 1px solid green;
	color: white;
	font-weight: bold;
	border-radius: 7px;
}

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

}

.imgcontainerleft {
    text-align: left;
	width: 90%;
	margin-left: auto;
	margin-right: auto;

}
.vouchercontainer {
    text-align: center;
	width: 90%;
	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;

}

.divcircle {
border-radius: 50%;
border: 1px solid navy;
padding: 10px;

}

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

img.imgcirclelearn {
border-radius: 50%;
border: 2px solid green;
padding: 5px;

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

}

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

}

img.imgcircle3 {
border-radius: 50%;
border: 1px solid navy;
padding: -9px;
background-color: white;
}
img.imgcirclevoucher {
border-radius: 50%;
border: 1.5px solid #ffffff;
background-color: #E0ECF8;
margin: 1px 0 0 0;
padding: 2px;

}

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

}

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

}


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

.formcontainer {
	font-size: 18px;
	width: 50%;
	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);
}
.consprofilecontainer {
	font-size: 18px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	box-shadow: 1px 2px 5px 1px grey;
	border-radius: 2px 2px 2px 2px;
	background-color: #ffffff;
}
.smallfont {
	font-size: 12px;
	width: 100%;
	color: navy;
}

hr {
display:block;
height:1px;
border:0;
border-top:1px solid #ccc;
margin:1em 0;
padding:0;

}

hr.back { 
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;

}

fieldset {
  color: green;
  border: solid 1px green;
  color: navy;
  font-size: 18px;
  margin-bottom: 4px;
  background-color: #efefef;
}

legend {
  color: white;
  border: solid 1px green;
  font-size: 12px;
  background-color: green;
  padding: 2px;
}

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

span.headerimage {
	position: relative;
	top: 1px;
	left: 3px;
  padding: 0px;
  display: inline-block;
  margin: 0;
  float:left
}

span.consvoucher {
	position: relative;
	top: 1px;
	left: 3px;
  padding: 0px;
  display: inline-block;
  margin: 0;
  float:left
}

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: 32%;
    top: 1px;
    left: 1%;
    height: 120px;
    border: 0px solid #ac92ec;
	text-align: center;
	padding: 5px;
}

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

div.absolutex3 {
    position: absolute;
    width: 32%;
    top: 1px;
    left: 67%;
    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;
}

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

div.absolutehalf2 {
    position: absolute;
    width: 50%;
    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); }
} 



div.accordion {
  background-color: #eee;
  color: navy;
  content: '\0076';
  cursor: pointer;
  padding: 12px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
    font-weight: bold;
}

.accordion:after {
  content: '\21F5';
  color: navy;
  font-weight: bold;
  float: left;
  margin-left: 2px;
    background-color: white;
    font-size: 20px;
    border: 0.7px solid green;
    border-radius: 50%;
    padding: 0.5px 5.3px 0.5px 5.3px;
}

.active, .accordion:hover {
  content: '\0076';
  background-color: #ccc;
    font-weight: bold;
}




.panel {
  padding: 0 1px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panelmenu {
  padding: 0 1px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}


div.accordionmenu {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 12px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
    font-weight: bold;
}

.active, .accordionmenu:hover {
  background-color: #ccc;
    font-weight: bold;
}

.accordionmenu:after {
  content: '\002B';
  color: navy;
  font-weight: bold;
  float: left;
  margin-left: 5px;
    background-color: white;
    font-size: 20px;
    border: 0.5px solid navy;
    border-radius: 50%;
    padding: 0.5px 5.3px 0.5px 5.3px;
}

.active, .accordionmenu:after {
  content: '\002D';
    font-weight: bold;
}

.panelmenu {
  padding: 0 1px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}



.chatcontainer {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

.darker {
  border-color: #ccc;
  background-color: #ddd;
}

.chatcontainer::after {
  content: "";
  clear: both;
  display: table;
}

.chatcontainer img {
  float: left;
  max-width: 60px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
}

.chatcontainer img.right {
  float: right;
  margin-left: 20px;
  margin-right:0;
}

.time-right {
  float: right;
  color: #aaa;
}

.time-left {
  float: left;
  color: #999;
}


/* audioplayer */
button.audioplayer {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
    width: 40px;
    height: 40px;
    float: left;
}
#audio-player-container {
  --seek-before-width: 0%;
    --volume-before-width: 100%;
    --buffered-width: 0%;
    position: relative;
    margin: 0px;
    width: 100%;
    height: 100px;


}
#audio-player-container::before {
    position: absolute;
    content: '';
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    left: -2px;
    top: -2px;
    background: linear-gradient(to left, #007db5, #ff8a00);
    z-index: -1;
}
p.audioplayer {
    position: absolute;
    top: -18px;
    right: 5%;
    padding: 0 5px;
    margin: 0;
    font-size: 28px;
    background: #fff;
}
#play-icon {
    margin: 20px 2.5% 10px 2.5%;
}
path {
    stroke: #007db5;
}
.time {
    display: inline-block;
    text-align: center;
    font-size: 12px;
    color: red;
    margin: 2px;

}
output {
    display: inline-block;
    width: 32px;
    text-align: center;
    font-size: 14px;
    margin: 10px 2.5% 0 5%;
    float: left;
    clear: left;
}
#volume-slider {
    margin: 10px 2.5%;
    width: 58%;
}
#volume-slider::-webkit-slider-runnable-track {
    background: rgba(0, 125, 181, 0.6);
}
#volume-slider::-moz-range-track {
    background: rgba(0, 125, 181, 0.6);
}
#volume-slider::-ms-fill-upper {
    background: rgba(0, 125, 181, 0.6);
}
#volume-slider::before {
    width: var(--volume-before-width);
}
#mute-icon {
    margin: 0 2.5%;
}
input[type="range"] {

    -webkit-appearance: none;
    width: 70%;
    margin: 0;
    padding: 0;
    height: 19px;
    margin: 0;
    outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: black;
}
input[type="range"]::before {
    position: absolute;
    content: "";
    top: 4px;
    left: 0;
    width: var(--seek-before-width);
    height: 3px;
    background-color: #ffcd00;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    position: relative;
    -webkit-appearance: none;
    box-sizing: content-box;
    border: 1px solid #ffcd00;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #ffcd00;
    cursor: pointer;
    margin: -7px 0 0 0;
}
input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.2);
    background: #ffcd00;
}
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: black;
}
input[type="range"]::-moz-range-progress {
    background-color: #ffcd00;
}
input[type="range"]::-moz-focus-outer {
    border: 0.8px;
}
input[type="range"]::-moz-range-thumb {
    box-sizing: content-box;
    border: 1px solid #ffcd00;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #ffcd00;
    cursor: pointer;
}
input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.2);
    background: #ffcd00;
}
input[type="range"]::-ms-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: black;
    border: solid transparent;
    color: transparent;
}
input[type="range"]::-ms-fill-lower {
    background-color: #ffcd00;
}
input[type="range"]::-ms-fill-upper {
    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
}
input[type="range"]::-ms-thumb {
    box-sizing: content-box;
    border: 1px solid #ffcd00;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #ffcd00;
    cursor: pointer;
    margin: 0 0 0 0;
}
input[type="range"]:active::-ms-thumb {
    transform: scale(1.2);
    background: #ffcd00;
}

/* end of audioplayer */



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

.flex-container {
  width: 100%;
  display: block;

}

.flex-container-element {
  width: 100%;
  align-items: center;
  justify-content: center;
  
}

.w3-card-listednugget {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.w3-card-listednugget2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.w3-card-listednugget3 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.contentline {
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
background-color: white;
height: 0px;
}

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

.headlinepic {
height: 300px; 
background-image: url(https://www.upodia.io/Loyalty/images/social.svg); 
background-position: center;
background-repeat: no-repeat;
background-size: cover; 
color: white;
border-bottom: 1px solid navy;
}

.speechbubble {
  width: 80%;
  margin: 1px auto;
  border: 3px solid green;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  font-weight: normal;
  color: navy;
  font-family: arial;
  position: relative;
}

.providerdetail {
font-size: 14px; 
margin-top: 5px; 
padding: 5px; 
border: 0.8px dotted navy; 
text-align: center; 
background-color: silver; 
width: 100%; 
margin-left: 5px;
}

}




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

.flex-container {
  width: 100%;
  display: block;

}

.flex-container-element {
  width: 100%;
  align-items: center;
  justify-content: center;
  
}

.w3-card-listednugget {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.w3-card-listednugget2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.formcontainer {
	font-size: 18px;
	width: 96%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16);
}

.headlinepic {
height: 300px; 
background-image: url(https://www.upodia.io/Loyalty/images/social.svg); 
background-position: center;
background-repeat: no-repeat;
background-size: cover; 
color: white;
border-bottom: 1px solid navy;
}

.speechbubble {
  width: 80%;
  margin: 1px auto;
  border: 3px solid green;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  font-weight: normal;
  color: navy;
  font-family: arial;
  position: relative;
}

.toplearningmenu {
text-align: center; 
border: 1px solid green; 
border-bottom: 2px solid green; 
color: navy; 
background-color: white; 
padding: 7px 4px; 
margin: 1px; 
margin-right: 1px;
margin-left: 1px;
display: inline-block; 
border-radius: 6px;

}

}

@media (max-width: 250px)
{
body {
background-color: #ffffff;
}

h3 {
color: white;
background-color: #651fff;
font-size: 100%;
padding: 5px 5px;
margin-top: 1px;
margin-bottom: 1px;
width: 100%;
text-align: center;

} 

h4 {
color: white;
background-color: dodgerblue;
font-size: 100%;
padding: 5px 5px;
margin-top: 1px;
width: 100%;
text-align: center;

}
}