body { font-family: 'Montserrat', sans-serif; background-color:#ffffff;margin:50px auto;}
input {
	font-family: 'Montserrat', sans-serif;
	color: #666666;
}
div.loginSideImgDiv {
   display:table-cell;vertical-align:middle; 
}
div.loginSideImgDiv img {
    
}
#ContainerTbl{display:table;margin:0 auto;width:80vw;}
#mainDiv{margin:auto auto; width:calc(100vw - 100px);height:calc(100vh - 100px);display:table-row;}
#mainlogin{width:75%;max-width:410px;text-align:left;padding:10px 50px;margin:0px auto;}

.forgotpwdDivMain {text-align:center;height:100%;height:calc(100vh - 190px);vertical-align:middle;display:table-cell;width:100vw;}
.forgotpwdLblHeading {font-size:16pt; text-align:center;margin:0 auto 20px auto;width:300px;}
#divForgotten{display:inline-block;}
.forgotpwdTxtEmailAddress{width:260px; padding:10px; border:0px solid #ffffff; font-size:16px;}
.forgotpwdBtnSendDiv {margin-top:15px; margin-bottom:15px; text-align:center;}
.forgotpwdDivComplete {margin-top:15px; text-align:center;}
#BtnSendPwd{background-color:#9dca47;cursor:pointer;border:hidden;color:#ffffff;padding:12px;width:280px;}

#pwdIcon { position: relative; width:100%; }
.regIconTxtBox {border:none; background:#fff; display:block; width: 240px; box-sizing: border-box; padding:10px;font-size:16px;margin-bottom:20px;}
#pwdIcon img { position: absolute; top: 11px; right: 15px } 
#TxtPasswordValMsg{color:#ffffff;margin-top:15px;margin-bottom:10px;font-weight:bold;text-align:left;}
#conpwdIcon { position: relative; width:100%; }
#conpwdIcon img { position: absolute; top: 11px; right: 15px } 
.regTxtHolder{margin-left:0px; margin-right:15px;background:#fff;width:280px;}
.regValMsg{margin-top:5px; font-size:12pt; color:#ffffff;}
.regValMsgRed{margin-left:5px; margin-top:5px; font-size:8pt; color: #e60000;}

.loginTbl{background-color:#ffffff;display:table-cell;width:550px;max-width:550px;vertical-align:middle;}
#pRow{display:table;width:100%;max-width:410px;}
.loginLogo{text-align:center;padding:40px 0px;max-width:400px;margin:0px auto;}
.heading{color:#202022; font-weight:bold; font-size:15pt;padding-bottom:30px;vertical-align:middle;display:inline-block;}
.heading2{color:#202022; font-weight:800; font-size:20pt;padding-bottom:35px;padding-top:30px;}
.txtBox{width:380px;border:1px solid #666666;border-radius:5px;padding:15px;}
.greenText{font-size:14pt; color:#9dca47; font-weight:bold;}
a.greenLink{font-size:12pt; color:#9dca47; font-weight:600;}
.tdspace{padding-bottom:20px;}
.btnLogin{cursor: pointer;font-family: 'Montserrat', sans-serif;background-color:#9dca47;color:#fff; width:412px; padding:15px; font-size:16pt; font-weight:bold; border:1px solid #9dca47;border-radius:5px;}
.btnLogin:hover{cursor: pointer;font-family: 'Montserrat', sans-serif;background-color:#9dca47;color:#fff; width:412px; padding:15px; font-size:16pt; font-weight:bold; border:1px solid #9dca47;border-radius:5px;border: solid #36C0B9 1px;
   background: #8DC645;
   background-image: -webkit-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -moz-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -ms-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -o-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -webkit-gradient(to bottom, #8DC645, #36C0B9);}
 .imgResponse{max-width:100%;height:auto;}
.topMenu{background-color:#004890;position:fixed;left:0px;top:0px;width:100%;z-index:5;}
.btnLoading {border:hidden;height:39px;width:190px;background-image:url(../loading.gif);background-repeat:no-repeat; background-position:center;display:inline-block;}
.buttonLogin {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   color: #FFFFFF;
   font-family: 'Montserrat', sans-serif;
   font-size: 40px;
   font-weight: 100;
   padding: 40px;
   background-color: #9DCA47;
   -webkit-box-shadow: 1px 1px 20px 0 #000000;
   -moz-box-shadow: 1px 1px 20px 0 #000000;
   box-shadow: 1px 1px 20px 0 #000000;
   text-shadow: 1px 1px 20px #000000;
   border: solid #B1DE5B 1px;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
   text-align: center;
}

.buttonLogin:hover {
   border: solid #36C0B9 1px;
   background: #8DC645;
   background-image: -webkit-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -moz-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -ms-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -o-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -webkit-gradient(to bottom, #8DC645, #36C0B9);
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   text-decoration: none;
}

/*IPHONE 5*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 355px) 
and (orientation : portrait) {
  div.loginSideImgDiv {display: none;}
  #mainDiv{margin:0px auto; width:90vw;}
  .loginTbl{background-color:#ffffff;display:inline-block;width:100vw;}
#mainlogin{width:100%;text-align:left;padding:10px 0px;margin:0px auto;}
.loginLogo{text-align:center;margin:20px 15px 0 15px;}
.txtBox{width:280px;border:1px solid #666666;border-radius:5px;padding:15px;} 
#pRow{display:table;width:85%;}
.btnLogin{cursor: pointer;font-family: 'Montserrat', sans-serif;background-color:#9dca47;color:#fff; width:313px; padding:15px; font-size:16pt; font-weight:bold; border:1px solid #9dca47;border-radius:5px;}
.btnLogin:hover{cursor: pointer;font-family: 'Montserrat', sans-serif;background-color:#9dca47;color:#fff; width:313px; padding:15px; font-size:16pt; font-weight:bold; border:1px solid #9dca47;border-radius:5px;border: solid #36C0B9 1px;
   background: #8DC645;
   background-image: -webkit-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -moz-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -ms-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -o-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -webkit-gradient(to bottom, #8DC645, #36C0B9);}
}

/*Samsung-huawei*/
@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 370px) 
and (orientation : portrait) {
  div.loginSideImgDiv {display: none;}
  #mainDiv{margin:0px auto; width:90vw;}
  .loginTbl{background-color:#ffffff;display:inline-block;width:100vw;}
#mainlogin{width:100%;text-align:left;padding:10px 10px;margin:0px auto;}
.loginLogo{text-align:center;margin:20px 15px 0 15px;}
.txtBox{width:330px;border:1px solid #666666;border-radius:5px;padding:15px;} 
#pRow{display:table;width:85%;}
.btnLogin{cursor: pointer;font-family: 'Montserrat', sans-serif;background-color:#9dca47;color:#fff; width:363px; padding:15px; font-size:16pt; font-weight:bold; border:1px solid #9dca47;border-radius:5px;}
.btnLogin:hover{cursor: pointer;font-family: 'Montserrat', sans-serif;background-color:#9dca47;color:#fff; width:363px; padding:15px; font-size:16pt; font-weight:bold; border:1px solid #9dca47;border-radius:5px;border: solid #36C0B9 1px;
   background: #8DC645;
   background-image: -webkit-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -moz-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -ms-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -o-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -webkit-gradient(to bottom, #8DC645, #36C0B9);}
}

/*IPHONE 6,7,8*/
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 400px) 
and (orientation : portrait) { 
  div.loginSideImgDiv {display: none;}
  #mainDiv{margin:0px auto; width:100vw;}  
  .loginTbl{background-color:#ffffff;display:inline-block;width:100vw;} 
.loginLogo{text-align:center;margin:20px 15px 0 15px;}   
#mainlogin{width:100%;text-align:left;padding:10px 10px;margin:0px auto;} 
.txtBox{width:330px;border:1px solid #666666;border-radius:5px;padding:15px;}   
#pRow{display:table;width:85%;}
.btnLogin{cursor: pointer;font-family: 'Montserrat', sans-serif;background-color:#9dca47;color:#fff; width:363px; padding:15px; font-size:16pt; font-weight:bold; border:1px solid #9dca47;border-radius:5px;}
.btnLogin:hover{cursor: pointer;font-family: 'Montserrat', sans-serif;background-color:#9dca47;color:#fff; width:363px; padding:15px; font-size:16pt; font-weight:bold; border:1px solid #9dca47;border-radius:5px;border: solid #36C0B9 1px;
   background: #8DC645;
   background-image: -webkit-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -moz-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -ms-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -o-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -webkit-gradient(to bottom, #8DC645, #36C0B9);}
}

/*IPHONE 6,7,8 PLUS*/
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { 
  div.loginSideImgDiv {display: none;}
  #mainDiv{margin:0px auto; width:100vw;} 
  .loginTbl{background-color:#ffffff;display:inline-block;width:100vw;}  
#mainlogin{width:90%;text-align:left;padding:10px 10px;margin:0px auto;} 
.loginLogo{text-align:center;margin:20px 15px 0 15px;}    
.txtBox{width:330px;border:1px solid #666666;border-radius:5px;padding:15px;} 
#pRow{display:table;width:95%;}
.btnLogin{cursor: pointer;font-family: 'Montserrat', sans-serif;background-color:#9dca47;color:#fff; width:363px; padding:15px; font-size:16pt; font-weight:bold; border:1px solid #9dca47;border-radius:5px;}
.btnLogin:hover{cursor: pointer;font-family: 'Montserrat', sans-serif;background-color:#9dca47;color:#fff; width:363px; padding:15px; font-size:16pt; font-weight:bold; border:1px solid #9dca47;border-radius:5px;border: solid #36C0B9 1px;
   background: #8DC645;
   background-image: -webkit-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -moz-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -ms-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -o-linear-gradient(top, #8DC645, #36C0B9);
   background-image: -webkit-gradient(to bottom, #8DC645, #36C0B9);}
}

/*laptop*/
@media only screen 
and (min-width : 1280px) 
and (max-width : 1600px)  { 
}

@media screen and (max-width : 1200px)  { 
   div.loginSideImgDiv {display: none;}
}

/*
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 1500px) { 
  div.loginSideImgDiv {display: none;}
  #mainDiv{margin:0px auto; width:100vw;}
}*/


/*Dashboard*/
#DashboardMain{margin:10px;background-color:#fff;}
#DashCounts{display:block;text-align:center;margin-top:25px;background-color:#fff;padding:20px;}
#DashAvgs{display:block;text-align:center;margin-top:15px;background-color:#fff;padding:20px;}
#DashTop5{display:block;text-align:center;margin-top:15px;background-color:#fff;padding:20px;}
.dashContainer {display:inline-block;width:300px;height:180px;border:1px solid #ccc;margin:10px;}
.dashAvgContainer {display:inline-block;width:300px;height:80px;border:1px solid #ccc;margin:10px;padding:20px;}
.dashOpen {color:#e60000;font-weight:bold;font-size:20pt;}
.dashInProgress {color:#ed6c21;font-weight:bold;font-size:20pt;}
.dashAvg {color:#202022;font-weight:bold;font-size:16pt;}

/*Loading indicator*/
.cssload-dots {
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	outline: 1px solid red;
	filter: url(#goo);
		-o-filter: url(#goo);
		-ms-filter: url(#goo);
		-webkit-filter: url(#goo);
		-moz-filter: url(#goo);    
}

.cssload-dot {
	width: 0;
	height: 0;
	position: absolute;
	left: 0;
	top: 0;
}
.cssload-dot:before {
	content: "";
	width: 34px;
	height: 34px;
	border-radius: 49px;
	background: rgb(157,202,71);
	position: absolute;
	left: 50%;
	transform: translateY(0);
		-o-transform: translateY(0);
		-ms-transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
	margin-left: -17.5px;
	margin-top: -17.5px;
}



.cssload-dot:nth-child(5):before {
	z-index: 100;
	width: 44.5px;
	height: 44.5px;
	margin-left: -21.75px;
	margin-top: -21.75px;
	animation: cssload-dot-colors 4.6s ease infinite;
		-o-animation: cssload-dot-colors 4.6s ease infinite;
		-ms-animation: cssload-dot-colors 4.6s ease infinite;
		-webkit-animation: cssload-dot-colors 4.6s ease infinite;
		-moz-animation: cssload-dot-colors 4.6s ease infinite;
}


.cssload-dot:nth-child(1) {
	animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
		-o-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
		-ms-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
		-webkit-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
		-moz-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
}
.cssload-dot:nth-child(1):before {
	background-color: rgb(60,192,179);
	animation: cssload-dot-move 4.6s 0s ease infinite;
		-o-animation: cssload-dot-move 4.6s 0s ease infinite;
		-ms-animation: cssload-dot-move 4.6s 0s ease infinite;
		-webkit-animation: cssload-dot-move 4.6s 0s ease infinite;
		-moz-animation: cssload-dot-move 4.6s 0s ease infinite;
}

.cssload-dot:nth-child(2) {
	animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
		-o-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
		-ms-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
		-webkit-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
		-moz-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
}
.cssload-dot:nth-child(2):before {
	background-color: rgb(157,202,71);
	animation: cssload-dot-move 4.6s 1.15s ease infinite;
		-o-animation: cssload-dot-move 4.6s 1.15s ease infinite;
		-ms-animation: cssload-dot-move 4.6s 1.15s ease infinite;
		-webkit-animation: cssload-dot-move 4.6s 1.15s ease infinite;
		-moz-animation: cssload-dot-move 4.6s 1.15s ease infinite;
}

.cssload-dot:nth-child(3) {
	animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
		-o-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
		-ms-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
		-webkit-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
		-moz-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
}
.cssload-dot:nth-child(3):before {
	background-color: rgb(60,192,179);
	animation: cssload-dot-move 4.6s 2.3s ease infinite;
		-o-animation: cssload-dot-move 4.6s 2.3s ease infinite;
		-ms-animation: cssload-dot-move 4.6s 2.3s ease infinite;
		-webkit-animation: cssload-dot-move 4.6s 2.3s ease infinite;
		-moz-animation: cssload-dot-move 4.6s 2.3s ease infinite;
}

.cssload-dot:nth-child(4) {
	animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
		-o-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
		-ms-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
		-webkit-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
		-moz-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
}
.cssload-dot:nth-child(4):before {
	background-color: rgb(157,202,71);
	animation: cssload-dot-move 4.6s 3.45s ease infinite;
		-o-animation: cssload-dot-move 4.6s 3.45s ease infinite;
		-ms-animation: cssload-dot-move 4.6s 3.45s ease infinite;
		-webkit-animation: cssload-dot-move 4.6s 3.45s ease infinite;
		-moz-animation: cssload-dot-move 4.6s 3.45s ease infinite;
}

@keyframes cssload-dot-move {
	0% {
		transform: translateY(0);
	}
	18%, 22% {
		transform: translateY(-68px);
	}
	40%, 100% {
		transform: translateY(0);
	}
}

@-o-keyframes cssload-dot-move {
	0% {
		-o-transform: translateY(0);
	}
	18%, 22% {
		-o-transform: translateY(-68px);
	}
	40%, 100% {
		-o-transform: translateY(0);
	}
}

@-ms-keyframes cssload-dot-move {
	0% {
		-ms-transform: translateY(0);
	}
	18%, 22% {
		-ms-transform: translateY(-68px);
	}
	40%, 100% {
		-ms-transform: translateY(0);
	}
}

@-webkit-keyframes cssload-dot-move {
	0% {
		-webkit-transform: translateY(0);
	}
	18%, 22% {
		-webkit-transform: translateY(-68px);
	}
	40%, 100% {
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes cssload-dot-move {
	0% {
		-moz-transform: translateY(0);
	}
	18%, 22% {
		-moz-transform: translateY(-68px);
	}
	40%, 100% {
		-moz-transform: translateY(0);
	}
}

@keyframes cssload-dot-colors {
	0% {
		background-color: rgb(157,202,71);
	}
	25% {
		background-color: rgb(60,192,179);
	}
	50% {
		background-color: rgb(157,202,71);
	}
	75% {
		background-color: rgb(60,192,179);
	}
	100% {
		background-color: rgb(157,202,71);
	}
}

@-o-keyframes cssload-dot-colors {
	0% {
		background-color: rgb(157,202,71);
	}
	25% {
		background-color: rgb(60,192,179);
	}
	50% {
		background-color: rgb(157,202,71);
	}
	75% {
		background-color: rgb(60,192,179);
	}
	100% {
		background-color: rgb(157,202,71);
	}
}

@-ms-keyframes cssload-dot-colors {
	0% {
		background-color: rgb(157,202,71);
	}
	25% {
		background-color: rgb(60,192,179);
	}
	50% {
		background-color: rgb(157,202,71);
	}
	75% {
		background-color: rgb(60,192,179);
	}
	100% {
		background-color: rgb(157,202,71);
	}
}

@-webkit-keyframes cssload-dot-colors {
	0% {
		background-color: rgb(157,202,71);
	}
	25% {
		background-color: rgb(60,192,179);
	}
	50% {
		background-color: rgb(157,202,71);
	}
	75% {
		background-color: rgb(60,192,179);
	}
	100% {
		background-color: rgb(157,202,71);
	}
}

@-moz-keyframes cssload-dot-colors {
	0% {
		background-color: rgb(157,202,71);
	}
	25% {
		background-color: rgb(60,192,179);
	}
	50% {
		background-color: rgb(157,202,71);
	}
	75% {
		background-color: rgb(60,192,179);
	}
	100% {
		background-color: rgb(157,202,71);
	}
}

@keyframes cssload-dot-rotate-1 {
	0% {
		transform: rotate(-105deg);
	}
	100% {
		transform: rotate(270deg);
	}
}

@-o-keyframes cssload-dot-rotate-1 {
	0% {
		-o-transform: rotate(-105deg);
	}
	100% {
		-o-transform: rotate(270deg);
	}
}

@-ms-keyframes cssload-dot-rotate-1 {
	0% {
		-ms-transform: rotate(-105deg);
	}
	100% {
		-ms-transform: rotate(270deg);
	}
}

@-webkit-keyframes cssload-dot-rotate-1 {
	0% {
		-webkit-transform: rotate(-105deg);
	}
	100% {
		-webkit-transform: rotate(270deg);
	}
}

@-moz-keyframes cssload-dot-rotate-1 {
	0% {
		-moz-transform: rotate(-105deg);
	}
	100% {
		-moz-transform: rotate(270deg);
	}
}

@keyframes cssload-dot-rotate-2 {
	0% {
		transform: rotate(165deg);
	}
	100% {
		transform: rotate(540deg);
	}
}

@-o-keyframes cssload-dot-rotate-2 {
	0% {
		-o-transform: rotate(165deg);
	}
	100% {
		-o-transform: rotate(540deg);
	}
}

@-ms-keyframes cssload-dot-rotate-2 {
	0% {
		-ms-transform: rotate(165deg);
	}
	100% {
		-ms-transform: rotate(540deg);
	}
}

@-webkit-keyframes cssload-dot-rotate-2 {
	0% {
		-webkit-transform: rotate(165deg);
	}
	100% {
		-webkit-transform: rotate(540deg);
	}
}

@-moz-keyframes cssload-dot-rotate-2 {
	0% {
		-moz-transform: rotate(165deg);
	}
	100% {
		-moz-transform: rotate(540deg);
	}
}

@keyframes cssload-dot-rotate-3 {
	0% {
		transform: rotate(435deg);
	}
	100% {
		transform: rotate(810deg);
	}
}

@-o-keyframes cssload-dot-rotate-3 {
	0% {
		-o-transform: rotate(435deg);
	}
	100% {
		-o-transform: rotate(810deg);
	}
}

@-ms-keyframes cssload-dot-rotate-3 {
	0% {
		-ms-transform: rotate(435deg);
	}
	100% {
		-ms-transform: rotate(810deg);
	}
}

@-webkit-keyframes cssload-dot-rotate-3 {
	0% {
		-webkit-transform: rotate(435deg);
	}
	100% {
		-webkit-transform: rotate(810deg);
	}
}

@-moz-keyframes cssload-dot-rotate-3 {
	0% {
		-moz-transform: rotate(435deg);
	}
	100% {
		-moz-transform: rotate(810deg);
	}
}

@keyframes cssload-dot-rotate-4 {
	0% {
		transform: rotate(705deg);
	}
	100% {
		transform: rotate(1080deg);
	}
}

@-o-keyframes cssload-dot-rotate-4 {
	0% {
		-o-transform: rotate(705deg);
	}
	100% {
		-o-transform: rotate(1080deg);
	}
}

@-ms-keyframes cssload-dot-rotate-4 {
	0% {
		-ms-transform: rotate(705deg);
	}
	100% {
		-ms-transform: rotate(1080deg);
	}
}

@-webkit-keyframes cssload-dot-rotate-4 {
	0% {
		-webkit-transform: rotate(705deg);
	}
	100% {
		-webkit-transform: rotate(1080deg);
	}
}

@-moz-keyframes cssload-dot-rotate-4 {
	0% {
		-moz-transform: rotate(705deg);
	}
	100% {
		-moz-transform: rotate(1080deg);
	}
}