@charset "utf-8";
/* CSS Document */
* {
margin: 0px; 
padding: 0px;
}

/*
@font-face {	
	font-family: 'Helvetica';
	src: url('fonts/Helvetica-Regular.ttf') format('truetype'),
       url('fonts/Helvetica-Bold.ttf') format('truetype'),
		url('fonts/Roboto-Italic.ttf') format('truetype');
}
*/

body, html {font-family: Helvetica, Arial,Sans-Serif; font-size: 12px; font-weight: normal;}

a {
color: #8DC63F;
margin: 0px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
text-decoration: none;
}

a:focus {outline: none !important;}
a:hover {text-decoration: none; color: #1C2B58;}


h1,h2,h3,h4,h5,h6 {
margin: 0px;
}
h2 { font: normal normal bold 18px/21px Helvetica; letter-spacing: 0.45px; color: #7A7A7A; padding-bottom:10px; }
h3 {text-align: left; font: normal normal normal 16px/21px Helvetica; letter-spacing: 0.45px; color: #7A7A7A; opacity: 1; padding-bottom:10px;}
p {line-height: 1.7; margin: 0px; text-align: left; font: normal normal normal 12px/14px Helvetica; letter-spacing: 0.3px; color: #7A7A7A;}
label {font: normal normal normal 12px/14px Helvetica; letter-spacing: 0.3px; color: #7A7A7A; vertical-align: middle}

ul, li {margin: 0px; list-style-type: none;}

/* used on invoice upload page*/
ul.upload, ul.upload li {margin: 0px;list-style-type: circle;}

input {outline: none; border: none;}

textarea {outline: none; border: none;}
select.input::-ms-expand {display: none;}
select, select:focus{border: 0; appearance:none;}
select:focus {border-color: transparent !important;}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }

input::-webkit-input-placeholder { color: #6c6a6a; }
input:-moz-placeholder { color: #6c6a6a; }
input::-moz-placeholder { color: #6c6a6a; }
input:-ms-input-placeholder { color: #6c6a6a; }

textarea::-webkit-input-placeholder { color: #6c6a6a; }
textarea:-moz-placeholder { color: #6c6a6a; }
textarea::-moz-placeholder { color: #6c6a6a; }
textarea:-ms-input-placeholder { color: #6c6a6a; }

button {outline: none !important; border: none;background: transparent;}
button:hover, input[type=submit]:hover {cursor: pointer; background: #428242;}


/* class */

.sitelog{ width: 100%; min-height:100vh; height:100%; background-color: #FFF;	}
.sitelogn{ width: 100%;	background-color: #FFF;	}
.site{	width: 100%; min-height:100vh; height:100%;	background-color: #333;	}
.header{ overflow:auto;box-sizing: border-box; width:100%; border:0px solid #FFF;	padding: 5px 10px 3px 10px;	}
.logoc{ width:125px; 	display: block;	margin:0 auto;	}
.logoc IMG{	width:100%;	}
.logocm{width:150px; display: block; margin:0 auto 10px auto;	}
.logocm IMG{width:100%;	}
.logol{	width:125px; display: block; float:left;padding:0 0 0px 20px;	}
.logol IMG{	width:100%;	}
.logoHome {width:150px; display: block;	float:left; padding-bottom:10px;}
.logoHome IMG{ width:100% }

/* nd mod; get logout link in right, black square on top bar*/
.headerWrap { float: right; text-align: center; line-height: 22px; box-sizing: border-box; padding: 0; color: #FFFFFF; z-index: 10; top: 0; right: 0; position: absolute;  }
.headerblock {float: left; }
.headerblock a { color: #FFFFFF; font-weight: bold; }
.headerblock img {padding-bottom: 0;}

.settings-bg { text-align:center; min-height:31px; min-width: 80px; line-height: 22px; padding: 20px; float: right; display: block; z-index: 10; }
	.settings-bg a { color: #FFFFFF; text-align: center; }

.contact-bg { text-align:center; min-height:31px; min-width: 80px; line-height: 22px; padding: 20px; float: right; display: block; z-index: 10; }
	.contact-bg a { color: #FFFFFF; text-align: center; }

.logout-bg { background: #000000; text-align:center; min-height:31px; min-width: 80px; line-height: 22px; padding: 20px; float: right; display: block; z-index: 10;  }
	.logout-bg a { color: #FFFFFF; text-align: center; }

.settings-bg a:hover,.contact-bg a:hover,.logout-bg a:hover {color: #8DC63F;}

.server{color:#a3c1f4;}
.group { font-size: 12px; color: #FFFFFF; }
.logged{font-style: italic;}

.sitebody{clear: both; width:100%; min-height: 300px; overflow: hidden;	padding: 0px; box-sizing: border-box; display: block; }
.sitebodyd{
		clear: both;
		width:100%;
		min-height: 300px;
		overflow: hidden;
		padding: 10px;
		background-image: url("graphics/bubblesbgd.jpg");
		background-repeat: repeat-x;
		background-color: #041751;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		display: block;
	}
	.footer{
		box-sizing: border-box;
		width:100%;
		height: auto;
		background-color:#333;
		color:#FFF;
		padding: 10px;
		text-align: center;
	}
.full{width:100%;clear:both; box-sizing: border-box; padding:0 14px 0 0; float:left; }
.fulls{width:100%;clear:both; box-sizing: border-box; padding:0 7px 0 0; float:left; }
.ninety{width:90%; box-sizing: border-box; padding-right:1%; float:left;}
.full checkbox{margin:0 auto;}
.eighty{width:80%; box-sizing: border-box; padding-right:5%; float:left;}
.threequarter{width:83.3%; box-sizing: border-box; padding-right:1%; float:left;}
.twothirds{width:66%; box-sizing: border-box; padding-right:1%; float:left; margin-bottom:15px;}
.half{width:50%; box-sizing: border-box; padding:0 14px 0 0; float:left; max-width:550px; }
.halfs{width:50%; box-sizing: border-box; padding:0 7px 0 0; float:left; max-width:550px; }
.half2 {width: 50%; box-sizing: border-box;	padding-right: 5%; float: left;	max-width: 500px;}
.third{width:32%; box-sizing: border-box; padding-right:1%; float:left; margin-bottom:15px }
.thirdl { width: 33%; box-sizing: border-box; padding-right: 1%; float: left; }
.thirdm { width: 34%; box-sizing: border-box; padding-left: 1%; padding-right: 1%; float: left; }
.thirdr { width: 33%; box-sizing: border-box; float: right; }
label.schedule {text-align: right; padding-right: 2px; white-space: nowrap; display: block; padding-top: 2px; }
.quarter{width:25%; box-sizing: border-box; padding:0 14px 0 0; float:left;}
.quarters{width:25%; box-sizing: border-box; padding:0 7px 0 0; float:left;}
.twenty{width:20%; box-sizing: border-box; padding-right:1%; float:left;}
.fifth{width:20%; box-sizing: border-box; padding-right:1%; float:left;}
.twentieth{width:5%; box-sizing: border-box; padding-right:1%; float:left;}
.tenth{width:10%; box-sizing: border-box; padding-right:1%; float:left;}
.tenths { width: 10%; box-sizing: border-box; padding-right: 1%; float: left; }
.sixth{width:16.66%; box-sizing: border-box; padding-right:1%; float:left;}
.seventh{width:14.2%; box-sizing: border-box; padding-right:1%; float:left;}
.eighth{width:12.5%; box-sizing: border-box; padding-right:1%; float:left;}
.sidenav { float: left;  background-color: #414141; min-height: 99vh; height: 100%; border: 0.25px solid #343434; width: 178px; } 
.fill{margin-left:215px;}
.padtop{padding-top: 10px;}
.padtopfive{padding-top: 0px;}
.padleft{padding-left: 10px;}
.padright{padding-right: 10px;}
.padbot{padding-bottom: 10px;}
.left{float: left; display: block;}
.bold{font-weight: bold;}
.right{float: right;}
.center{margin:0 auto; text-align: center;}
.clearit{clear: both;}
.datatable{width:100%; border:1px solid #dbdbdb; border-spacing: 0px;}
.datatable td{padding:3px; border:1px solid #dbdbdb; font-size:14px;}
.datatable tr:nth-child(odd) {background: #EFEFEF;}
.datatable tr.head{background-color: #c3c3c3;}
	.iconbox{
	float:left; box-sizing: border-box; padding:10px; border-radius: 0px; text-align: center;  transition: all 0.4s; min-height: 500px; height:auto;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;}
.iconboxalt { margin-top: 3px; float: left; box-sizing: border-box; padding: 3px; border-radius: 0px; text-align: center; transition: all 0.4s; min-height: 504px; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; }
.iconboxnk{
	float:left; opacity:.7; box-sizing: border-box; padding:10px; border-radius: 25px; text-align: center; transition: all 0.4s; 
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;}
.iconlogosm{width:auto; padding-right:8px;float:left; transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s; opacity:.9;}
.iconlogosm IMG{max-width:25px;}
.iconlogosm:hover{opacity: 1;}
.iconlogo{display:block;opacity: .9; margin-top: 0px; transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;}
.on{margin-top: -3px; padding-bottom: 3px; opacity: 1; transition: none;
-webkit-transition: none;
-o-transition: none;
-moz-transition: none;}
.iconlogo IMG{width:100%; max-width:138px;}
.iconboxnk:hover, .iconboxnk:focus  {opacity:1; }
.iconbox:hover .iconlinks, .iconbox:focus .iconlinks{opacity:1;}
.iconbox:hover .iconlogo, .iconbox:focus .iconlogo{margin-top: -3px; padding-bottom: 3px;}
.iconboxnk:hover .iconlogo, .iconboxnk:focus .iconlogo{margin-top: -3px; padding-bottom: 3px;}
.icontitle{display: block;font-size:20px; color:#020F39; padding-bottom:10px; font-weight: bold;}
.wrap-in {display: block; width: 100%;	/*max-width:1200px;*/height: auto;	box-sizing: border-box;	margin: 0 auto;}
.on{opacity:1;}
.hide{display:none;}
.hides{display:none;}
.show{display:block;}
.shows{display:block;}
.hidePanel { display: none; }
.showPanel { display: block; }
.content {
/*float:left;*/
background: #f4f4f4;
opacity:1;
box-sizing: border-box;
border-radius: 0px;
overflow: hidden;
margin: 0 auto;
padding: 40px 20px;
min-height:100vh;
	height:auto;
box-shadow: 0px 5px 5px #000;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
	display: block;
	z-index:1;
}
.contentnr {
float:left;
background: #FFF;
opacity:.85;
box-sizing: border-box;
border-radius: 0px;
overflow: hidden;
margin: 0 auto;
padding: 40px 20px;
min-height:506px;
/*box-shadow: 0px 5px 5px #000;*/
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
	display: block;
	z-index:1;
}
.contenthr {
float:left;
/*background: #FFF;
opacity:.85;*/
box-sizing: border-box;
border-radius: 0;
overflow: hidden;
margin: 0 auto;
padding: 0;
min-height:506px;
/*box-shadow: 0px 5px 5px #000;*/
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
	display: block;
	z-index:1;
}

.larger p {line-height: 250%; font: normal normal normal 14px/16px Helvetica; margin: 2%;}

fieldset { border: 1px solid black; width: 95%; padding: 15px;}
fieldset legend {padding: 6px;	font-weight: bold; font-style: italic;	}
ol {list-style: none; counter-reset: mycounter; padding: 0;}
ol li {	position: relative; margin-left: 30px; padding: 8px 0;	text-transform:capitalize;}
	ol li:before { content: counter(mycounter); counter-increment: mycounter; position: absolute; top: 0; left: -30px; width: 25px; height: 25px; line-height: 25px; border-radius: 50%; color: #fff; background: #00000029; text-align: center; }

@keyframes slidebot {
  0% {
    transform: translateY(100%);
	  opacity:0;
  }
  100% {
    transform: translateY(0);
	  opacity:.9;
  }
}
.wrap-login {
width:95%;
max-width: 400px;
background: #FFF;
opacity:.9;
box-sizing: border-box;
border-radius: 25px;
overflow: hidden;
margin: 0 auto;
padding: 40px 20px;
/* box-shadow: 0px 5px 5px #000; */
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
z-index: 9;
animation: 1s ease-out 0s 1 slidebot;
}

.wrap-loginn {
width:95%;
max-width: 400px;
background: #f6f6f6;
opacity:.9;
box-sizing: border-box;
border-radius: 25px;
overflow: hidden;
margin: 100px auto 0 auto;
padding: 20px;
box-shadow: 0px 5px 5px #000;

}
.wrap-cc:before{
	font-size:30px;
    color: #041751;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 6px;
    pointer-events: none;
	-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}

.wrap-cc:hover:before{
  	font: var(--fa-font-brands);
    content: "\f1f0";
	/*
	visa f1f0
	mc f1f1
	disc f1f2
	amex f1f3
	*/
	font-size:30px;
    color: #041751;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 6px;
    pointer-events: none;
	-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.wrap-loginf {
width:95%;
max-width: 400px;
background: #FFF;
opacity:.9;
box-sizing: border-box;
border-radius: 25px;
overflow: hidden;
margin: 0 auto;
padding: 40px 20px;
box-shadow: 0px 5px 5px #000;
}
.wrap-login:hover, .wrap-loginf:hover{opacity: 1;}
.login-form {margin: 0 auto;}
.login-title {font-size: 28px; color: #1C2B58; text-align: center; width:100%; display: block; padding-bottom: 24px; clear:both;}

.recover{clear:both; text-align: center; font-size: 12px; display: block; padding-top:12px;}

.wrap-input {box-sizing: border-box; z-index: 1; margin: 0 0 10px 0;}
.wrap-input50l {position: relative; float:left; width: 50%; max-width: 240px; z-index: 1; padding-right:2px; margin-bottom: 10px;}
.wrap-input50r {position: relative; float:left; width: 50%; max-width: 240px; z-index: 1; margin-bottom: 10px;}
.wrap-input100 { position: relative; width: 100%; box-sizing: border-box; z-index: 1; margin: 10px auto; }

.input { width:100%; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #C5C5C5; border-radius: 10px; height: 38px; font: normal normal normal 14px Helvetica; letter-spacing: 0.3px; color: #6c6a6a; padding-left: 5px; }
.inputLN { font-size: 16px; font-family: Helvetica,Helvetica,Arial,Sans-Serif; color: #B0AFAF; display: block; width: 100%; background: #FFFFFF; height: 35px; border-radius: 25px; padding: 0 30px 0 68px; box-sizing: border-box; border: 1px solid #C5C5C5; }
.inputReadOnly { width: 100%; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #C5C5C5; border-radius: 10px; height: 38px; font: normal normal normal 14px Helvetica; letter-spacing: 0.3px; color: #D2D2D2; padding-left: 5px; }
span.error{ color: #ED8181; font-size: 16px; padding:10px; font-weight: bold }
div.error { color: #ED8181; font-size: 16px;}
p#validation { color: #ED8181; font-size: 16px; padding: 10px; font-weight: bold }
input[type="text"].error { background-color: red; color:#FFF;}
input[type="number"].error { background-color: red; color:#FFF;}
input[type="email"].error {	background-color: red;color:#FFF;}
textarea.error { background-color: red; color:#FFF;}
select.error { background-color: red;color:#FFF;}

.inputm{
font-size: 12px;
font-family: Roboto,Helvetica,Arial,Sans-Serif;
color: #6c6a6a;
display: block;
box-sizing: border-box;
width:100%;
background: #ececec;
height: 35px;
border-radius: 25px;
padding: 0 30px; box-shadow: 0px 2px 4px #aeaeae;
}

.inputmo{
font-size: 12px;
font-family: Roboto,Helvetica,Arial,Sans-Serif;
color: #020f39;
display: block;
box-sizing: border-box;
width:100%;
background: #FFF;
height: 35px;
border-radius: 25px;
padding: 0 30px;
border:1px solid #DBDBDB;
}

.inputmini { background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #C5C5C5; border-radius: 10px; height: 30px; width: 100%; font: normal normal normal 12px/14px Helvetica; letter-spacing: 0.3px; color: #6c6a6a; padding-left: 5px; }
.inputsmall { background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #C5C5C5; border-radius: 10px; height: 30px; width: 50%; font: normal normal normal 12px/14px Helvetica; letter-spacing: 0.3px; color: #6c6a6a; padding-left: 5px; }
.minititle{font-weight: bold;font-size:12px; display: block; margin:0; padding-top:0px;}
select.input{padding: 0 5px 0 5px; width:100%; font: normal normal normal 14px Helvetica; letter-spacing: 0.3px; color: #6c6a6a; }
select.inputm{padding: 0 30px;}

.wrap-select {position: relative;}

.wrap-select:before{
  	font: var(--fa-font-solid);
    content: "\f13a";
    color: #8dc63f;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 13px;
    pointer-events: none;
	-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}

.wrap-select:focus-within:before{transform: rotate( -180deg );  transition: transform 150ms ease;}
.wrap-selectm { position: relative;}

.wrap-selectm:before{
  	font: var(--fa-font-solid);
    content: "\f13a";
    color: #8dc63f;
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 8px;
    pointer-events: none;
	-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}

.wrap-selectm:focus-within:before{  transform: rotate( -180deg );   transition: transform 150ms ease;}

a.larger {font-size: 16px; font-weight: bold}

textarea.input {box-sizing: border-box; margin-top: 0px; float: left; font-size: 12px; font-family: Helvetica,Helvetica,Arial,Sans-Serif; color: #020f39; background: #FFFFFF;  border: 0px; padding: 25px; display: block; width: 100%; height: 70px; border: 1px solid #C5C5C5; border-radius: 10px; resize: none; overflow-y: hidden; overflow-x: hidden; }
.select option:hover {box-shadow: 0 0 0px 0px #8dc63f inset;}

.focus-input {display: block; position: absolute; border-radius: 25px; bottom: 0; left: 0; z-index: -1; width:100%; height:100%; box-shadow: 0px 0px 0px 0px; color: #8dc63f;}
.focus-inputm {display: block; position: absolute; border-radius: 25px; bottom: 0; left: 0; z-index: -1; width:100%; height:100%; box-shadow: 0px 0px 0px 0px; color: #1c2b58;}
.onefortypad{min-height: 140px;}
.seventypad{min-height: 70px;}
@-webkit-keyframes anim-shadow {
to {
box-shadow: 0px 0px 70px 25px;
opacity: 0;
}
}

@keyframes anim-shadow {to {box-shadow: 0px 0px 70px 25px; opacity: 0;}}

.input:hover, .input:focus{box-shadow: 0px 2px 4px #7b7b7b; border:1px solid #1c2b58; background-color:#ECECEC;}
.inputm:hover{border:1px solid #b7b7b7; }
.inputm:focus{border:1px solid #888;}
.inputmo:hover{border:1px solid #b7b7b7; }
.inputmo:focus{border:1px solid #888; background-color:#F4F4F4}
.alert{border: 1px solid #F00; box-shadow: 0 0 8px 0px #F00;}
.alert:hover{border: 1px solid #F00;}
.symbol-input { font-size: 10px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; position: absolute; border-radius: 25px; bottom: 0; left: 0; width: 100%; height: 100%; padding-left: 8px; pointer-events: none; color: #8dc63f; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }

.input:focus + .focus-input + .symbol-input {color:#8dc63f; }

.container-login-form-btn {padding-top: 20px;}

.login-form-btn { background: #66CC66 0% 0% no-repeat padding-box; border-radius: 10px; height: 38px; font: normal normal bold 14px/16px Helvetica; letter-spacing: 0.35px; color: #FFFFFF; width: 100%; margin-top: 29px; }
	

.login-form-btnmi {
font-size: 12px;
color: #FFF;
font-weight: bold;
margin-top:5px;
width:100%;
height: 30px;
display:block;
background: #8DC63F none;
background-image:none;
padding: 0 10px 0;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}


.login-form-btnmin {
font-size: 11px;
color: #FFF;
font-weight: bold;
margin-top:5px;
width:100%;
height: auto;
display:block;
border-radius: 25px;
background: #8DC63F;
padding: 5px 10px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}

.feeButton { font-size: 11px; color: #FFF; font-weight: bold; margin-top: 15px; width: 80%; height: 30px; display: block; border-radius: 10px; background: #8DC63F; padding: 5px 10px; }
.feeCheckBox { margin-top: 15px; display: block; padding-top:15px;  }
.receiptbutton { background-color: #66CC66; border: none; color: white; padding: 15px; width: 75px; }


.login-form-btnm { background: #66CC66 0% 0% no-repeat padding-box; border-radius: 10px; height: 38px; font: normal normal bold 14px/16px Helvetica; letter-spacing: 0.35px; color: #FFFFFF; width: 100%; margin-top: 29px;}
.report-btn { background: #66CC66 0% 0% no-repeat padding-box; border-radius: 10px; height: 30px; font: normal normal bold 14px/16px Helvetica; letter-spacing: 0.35px; color: #FFFFFF; width: 100%; margin-top: 17px;}
.dxbButton_MetropolisBlue { background: #66CC66 !important; border-radius: 10px; height: 38px; font: normal normal bold 14px/16px Helvetica; letter-spacing: 0.35px; color: #FFFFFF; width: 100%; margin-top: 29px;  }

.validate-input { position: relative; }

nav {width: auto; height: 100%;}
nav ul{border-radius: 25px;}
nav li, ul label.title { text-align: left; font: normal normal bold 12px/14px Helvetica; letter-spacing: 0.3px; color: #FFFFFF; opacity: 0.9;
		height: 90px; padding-bottom: 15px;	display: block;	box-sizing: border-box;	}

/* drop down items*/
	nav ul a { clear: both;	font-size: 12px; line-height: 22px; padding: 0 0 0 5px;	width: 100%; color: #FFF; background-color: #555353;
		border: 0.25px solid #343434; height: auto;	display: block;	text-align: left;	}

nav ul a:hover{background-color: #8DC63F; color:#FFF;} 		
nav ul a.selected { background-color: #8DC63F; }

/* drop down main category*/
nav ul label:before {font: var(--fa-font-solid);
    content: "\f13a";
    color: #8dc63f;
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 10px;
    pointer-events: none;
	-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;  }
nav ul li {height: 30px; width: 175px; overflow: hidden; transition: all .3s; border-bottom: 1px solid #323232; background: #414141 0% 0% no-repeat padding-box;	}

nav li {display: block;}
nav label.title { font-weight: bold; font-size: 12px; padding: 5px;	text-align: left; vertical-align: middle; display: block; white-space: nowrap; height: 30px; cursor: pointer;}

/* navigation link layout for items without a submenu*/
	nav ul a.nosubnav { background: #414141; }
	nav ul a.subnav:hover { background-color: #414141; color: #FFF; } 

/* sizing on dropdown subnavs*/	
nav input[type="radio"] {	display: none;}
nav #vpay:checked + li{height:100px;}
nav #nonvpay:checked + li{height:147px;}
nav #ach:checked + li{height:100px;}
nav #consents:checked + li{height:110px;}
nav #recurring:checked + li{height:130px;}
nav #invoice:checked + li {	height: 100px;	}
nav #scheduled:checked + li, #settle:checked + li{height:70px;}
nav #reports:checked + li {	height: 200px;}

.top {vertical-align: top;}
.statusMsg {  border-radius: 25px;   border: 2px solid #73AD21;  padding: 20px; display: block;}
.resultMsg {  font-weight: bold; color: #00CC00; font-family: Helvetica,Helvetica,Arial,Sans-Serif; font-size: 14px;  }

.hidden { visibility: hidden; }

/* credit card image as background */
.visa {background: #ececec url("../Images/cc_visa_mid.jpg") no-repeat right 10px center;}
.amex { background: #ececec url("../Images/cc_amex_mid.jpg") no-repeat right 10px center;}
.mastercard { background: #ececec url("../Images/cc_MasterCard_mid.jpg") no-repeat right 10px center;}
.discover { background: #ececec url("../Images/cc_Discover_mid.jpg") no-repeat right 10px center;}
.diners { background: #ececec url("../Images/cc_Diners_mid.jpg") no-repeat right 10px center;}
.dx-vam{display: none;}
/* .dxb-hb{display: block; background-color:#020F39;color:#FFF;padding:5px; border-radius:15px; cursor: pointer;} */

/* hide panels on EMV pages */
.mockPanel {  width: 100%; border-width: 0 !important; }
.dxrp dxrpcontent dx-borderBox {  border-width: 0  }

/* force devex buttons to use correct style. styles aren't applied via class names until postback, so use ID selectors */
#b1, #btnASPxGetTransactions, #searchBtn { background: #66CC66 0% 0% no-repeat padding-box; border-radius: 10px; height: 38px; font: normal normal bold 14px/16px Helvetica; letter-spacing: 0.35px; color: #FFFFFF; width: 100%; margin-top: 29px; }
#ContentPlaceHolder1_b1, #ContentPlaceHolder1_btnASPxGetTransactions, #ContentPlaceHolder1_searchBtn, #ContentPlaceHolder1_Btn_Reset { background: #66CC66 0% 0% no-repeat padding-box; border-radius: 10px; height: 38px; font: normal normal bold 14px/16px Helvetica; letter-spacing: 0.35px; color: #FFFFFF; width: 100%; margin-top: 29px; }
.dxbButton_MetropolisBlue { background: #66CC66 0% 0% no-repeat padding-box; border-radius: 10px; height: 38px; font: normal normal bold 14px/16px Helvetica; letter-spacing: 0.35px; color: #FFFFFF; width: 100%; margin-top: 29px; }

.dxbButton { border-width:0}

/* force devex buttons to use correct style. styles aren't applied via class names until postback, so use ID selectors; Use these classes on report top bar */
div.seventh #b1, div.seventh #btnASPxGetTransactions, div.seventh #searchBtn { background: #66CC66 0% 0% no-repeat padding-box; border-radius: 10px; height: 30px; font: normal normal bold 14px/16px Helvetica; letter-spacing: 0.35px; color: #FFFFFF; width: 100%; margin-top: 16px; }
div.seventh #ContentPlaceHolder1_b1, div.seventh #ContentPlaceHolder1_btnASPxGetTransactions, div.seventh #ContentPlaceHolder1_searchBtn, div.seventh #ContentPlaceHolder1_Btn_Reset { background: #66CC66 0% 0% no-repeat padding-box; border-radius: 10px; height: 30px; font: normal normal bold 14px/16px Helvetica; letter-spacing: 0.35px; color: #FFFFFF; width: 100%; margin-top: 16px; }

div.seventh #b1:hover, div.seventh #btnASPxGetTransactions:hover, div.seventh #searchBtn:hover { background: #428242; }
div.seventh #ContentPlaceHolder1_b1:hover, div.seventh #ContentPlaceHolder1_btnASPxGetTransactions:hover, div.seventh #ContentPlaceHolder1_searchBtn:hover, div.seventh #ContentPlaceHolder1_Btn_Reset:hover { background: #428242; }


/* Use these classes on report top bar */
div.eighth #b1, div.eighth #btnASPxGetTransactions, div.eighth #searchBtn { background: #66CC66 0% 0% no-repeat padding-box; border-radius: 10px; height: 30px; font: normal normal bold 14px/16px Helvetica; letter-spacing: 0.35px; color: #FFFFFF; width: 100%; margin-top: 16px; }
div.eighth #ContentPlaceHolder1_b1, div.eighth #ContentPlaceHolder1_btnASPxGetTransactions, div.eighth #ContentPlaceHolder1_searchBtn, div.eighth #ContentPlaceHolder1_Btn_Reset { background: #66CC66 0% 0% no-repeat padding-box; border-radius: 10px; height: 30px; font: normal normal bold 14px/16px Helvetica; letter-spacing: 0.35px; color: #FFFFFF; width: 100%; margin-top: 16px; }

div.eighth #b1:hover, div.eighth #btnASPxGetTransactions:hover, div.eighth #searchBtn:hover { background: #428242; }
div.eighth #ContentPlaceHolder1_b1:hover, div.eighth #ContentPlaceHolder1_btnASPxGetTransactions:hover, div.eighth #ContentPlaceHolder1_searchBtn:hover, div.eighth #ContentPlaceHolder1_Btn_Reset:hover { background: #428242;}


.dxbButton_MetropolisBlue { background: #66CC66 0% 0% no-repeat padding-box; border-radius: 10px; height: 38px; font: normal normal bold 14px/16px Helvetica; letter-spacing: 0.35px; color: #FFFFFF; width: 100%; margin-top: 19px; }
div.dxbButtonSys {vertical-align: top}

#b1:hover, #btnASPxGetTransactions:hover, #searchBtn:hover, #ContentPlaceHolder1_b1:hover, #ContentPlaceHolder1_btnASPxGetTransactions:hover, #ContentPlaceHolder1_searchBtn:hover, #ContentPlaceHolder1_Btn_Reset:hover, .dxbButton_MetropolisBlue 
{background: #428242;}
        
/* show loading spinner on long pages */
 .loader,
        .loader:after {
            border-radius: 50%;
            width: 10em;
            height: 10em;
        }
        .loader {            
            margin: 60px auto;
            font-size: 10px;
            position: relative;
            text-indent: -9999em;
            border-top: 1.1em solid rgba(255, 255, 255, 0.2);
            border-right: 1.1em solid rgba(255, 255, 255, 0.2);
            border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
            border-left: 1.1em solid #ffffff;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
        }
  @-webkit-keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
 #loadingDiv {
            position:absolute;;
            top:0;
            left:0;
            width:100%;
            height:100%;
           <!-- background-color:#000; -->
        }