﻿html, body {
	color: #666; /*#212121*/
	font-family: 'Roboto',sans-serif, 'Segoe UI';
	font-size: 1em;
	-webkit-font-smoothing: antialiased;
	line-height: 1em;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	margin: 0;
	padding: 0;
	height: 100%;
}

#tblogin {
	margin: 0 auto; /* or margin: 0 auto 0 auto */
}

#page-header {
	position: fixed;
	z-index: 10;
	right: 0;
	left: 0;
	top: 0;
	transition: transform 350ms ease-in-out;
}

#ctl00_h1Topheader {
	color: #fff;
	left: 100px;
}

#divtop {
	height: 100px;
	background-color: #FFFF;
	color: #fff;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	border-bottom: 2px solid #008C95;
	position: fixed;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

.divcenter {
	margin: auto;
	width: 80%;
	padding: 10px;
	padding-top: 0;
}

#divtoprow {
	margin: 0 auto;
	max-width: 1400px;
	padding-top: 10px;
}

#divcontent {
	position: fixed;
	top: 112px;
	margin: 0 auto;
	max-width: 2400px;
	bottom: 55px;
	left: 0;
	right: 0;
	overflow: auto;
}

.header table {
	border-collapse: separate;
	border-spacing: 10px;
	width: 100%;
}

.header td {
	vertical-align: bottom;
	padding: 0;
height: 102px;
}

#header {
	width: 100%;
}

#LogoHd {
	width: 200px;
	height: auto;
	padding: 20px;
}

#tdRightHeader {
	text-align: right;
}

#rightHeader {
	color: white;
	font-size: 20px;
	letter-spacing: 4px;
}

#centerHeader {
	color: white;
	font-size: 50px;
	letter-spacing: 4px;
}

#otherdivtoprapper {
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
}

#otherdivtop1 {
	background-color: #fff;
	height: 75px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
}

#otherdivtop2 {
	top: 75px;
	padding-top: 0;
	position: fixed;
	width: 100%;
	background-color: #008C95;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

.otherdivcenter {
	margin: auto;
	width: 80%;
	padding: 0;
}

#otherdivcontent {
	position: fixed;
	top: 130px;
	margin: 0 auto;
	max-width: 2400px;
	bottom: 40px;
	left: 0;
	right: 0;
	overflow: auto;
}

#divtopotherrow {
	position: fixed;
	width: 100%;
	background-color: #008C95;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}



#logo {
	height: 54px;
	float: right;
	padding-right: 40px;
}

#logoa {
	display: block;
}


#footer {
	font-size: 86%;
	background-color: #008C95;
	position: fixed;
	height: 54px;
	bottom: 0;
	left: 0;
	right: 0;
	width: auto;
	z-index: 250000;
	border-top: 2px solid #B5DDB4;
}

.footer {
	width: 100%;
	text-align: right;
}

	.footer table {
		border-collapse: separate;
		border-spacing: 2px;
		padding: 2px 5px 15px 2px;
	}

	.footer td {
		vertical-align: middle;
		padding: 1px 0 0 15px;
	}

.bntthemedark {
	border: 0;
	padding: 4px;
	font-size: 14px;
	cursor: pointer !important;
	white-space: nowrap;
}

.bntthemeHover {
	padding: 4px;
	color: white;
	background-color: #00cb00;
	font-size: 14px;
	cursor: pointer !important;
	white-space: nowrap;
}

.bntthemePressed {
	padding: 4px;
	color: white;
	background-color: #3399ff;
	font-size: 14px;
	cursor: pointer !important;
	white-space: nowrap;
}

/*Inner*/
.zonediv {
	float: left;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}
#centerdiv {
	/*margin: 0 auto;*/
	width: 95vw;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

#leftdiv {
	width: 400px;
	height: 500px;
	border: none;
	display: block;
	padding-left: 20px;
	margin-right: 10px;
	min-width: 320px;
        border: 2px solid #B5DDB4;
}


#rightdiv {
	background-color: #0072C6;
	height: 500px;
	width: 900px;
	border: none /*solid 1px #4285f4*/;
	display: block;
	/*background: url(/Content/Images/login.png) -770px -500px;*/
	background: url(Images/login.png) 10px -50px;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

#rightdivother {
	height: 460px;
	width: 50%;
	border: none /*solid 1px #4285f4*/;
	display: block;
	float: left;
}

.overlaytransbox {
	padding-left: 0;
}

div.overlaytransbox {
	display:none;
}

	div.overlaytransbox p {
		margin: 2%;
		font-weight: bold;
		color: #fff;
		opacity: 100;
	}

overlayLogin {
	padding-left: 0;
}


/*REG*/

#regctrdiv {
	width: 400px;
	height: 650px;
	border: none;
	display: block;
	min-width: 320px;
	float: left;
	background-color: #fff;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

#tableReg {
	border-collapse: separate;
	border-spacing: 10px;
	vertical-align: bottom;
	padding: 15px;
}

.logoa_class {
	display: block;
height:75px;
}

#logoa {
	display: block;
}
/*END REG*/
/*PLAIN MASTER*/
/*

#pln-divtop {
	height: 120px;
	background-color: #fff;
	color: #fff;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	border-bottom: 2px solid #3367d6;
	position: fixed;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

.pln-divcenter {
	margin: auto;
	width: 80%;
	padding: 10px;
	padding-top: 0;
}

#pln-divtop2 {
	top: 75px;
	padding-top: 10px;
	position: fixed;
	width: 100%;
	background-color: #008C95;
	height: 75px;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

.pln-divcenter {
	margin: auto;
	width: 80%;
	padding: 0;
}

#pln-divcontent {
	position: fixed;
	top: 170px;
	margin: 0 auto;
	max-width: 2400px;
	bottom: 55px;
	left: 0;
	right: 0;
	overflow: auto;
}
	*/
#pln-page-header {
	position: fixed;
	z-index: 10;
	right: 0;
	left: 0;
	top: 0;
	transition: transform 350ms ease-in-out;
}

#pln-divtop {
	display: none;
}

#pln-divtop2 {
	display: none;
}

.pln-divcenter {
	margin: auto;
	width: 80%;
	padding: 10px;
	padding-top: 0;
}
/*PASSWORD AND REG USER*/
.fl-page {
	padding: 10px 30px 20px 30px;
}


.fl-flex-container {
	display: flex;
	flex-direction: column;
	border-radius: 5px;
	padding: 10px 5px 5px 10px;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
	min-width: 320px;
}

	.fl-flex-container > div {
		background-color: #fff;
		width: 99%;
		margin: 3px;
		text-align: center;
		line-height: 75px;
	}


.fl-Row50 {
	display: flex;
	flex-direction: row;
}

	.fl-Row50 > div {
		padding: 0 2px;
		width: 50%;
	}

.fl-Row {
	display: flex;
	flex-direction: row;
}

	.fl-Row > div {
		padding: 0 2px;
		width: 50%;
	}

.fl-Input {
	width: 100%;
	font-size: 16px;
}

.fl-Input-Cap {
	font-size: 16px;
	padding: 0 0 5px 0;
}

.fl-Err {
	font-size: 20px;
}

.fl-Input-Button {
	height: 40px;
	width: 100%;
	min-width: 320px;
}

#flRegCaptcha {
	min-width: 300px;
}
/*END PASSWORD AND REG USER*/
/*PAT SURVEY*/
.ps-page {
	padding: 0 30px 20px 30px;
}
.ps-heading{
	padding:0 0 10px 0;
}
.ps-Row50C {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
	.ps-Row50C > div {
		padding: 0 2px;
		width: 50%;
	}


.ps-Row {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items:flex-start;
	text-align:left;
}

	.ps-Row > div {
		padding: 0 2px;
		width: 50%;
		text-align: left;
	}

.ps-flex-container {
	display: flex;
	flex-direction: column;
	border-radius: 5px;
	padding: 10px 5px 5px 10px;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
	min-width: 320px;
}

	.ps-flex-container > div {
		width: 99%;
		margin: 5px;
		text-align: center;
		line-height: 75px;
	}

.ps-grey-back {
	background-color: #f5f5f7;
}
.ps-buttons {
	width: 150px;
	height: 40px;
}

.ps-pad-bott10{
	padding-bottom:10px;
}
.ps-pad-bott5 {
	padding-bottom: 5px;
}

.ps-pad-tb10 {
	padding: 10px 0 10px 0;
}
.ps-pad-top10 {
	padding-top: 10px;
}
.ps-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding:30px 10px 30px 10px;
}

ps-font-30pt {
	font-size: 30pt;
}
.pcSurv {
	font-family: "Lato",'Roboto',"Segoe UI", "Helvetica Neue", "Droid Sans", Arial, Tahoma, Geneva, Sans-serif;
	border: 0 !important;
}

.dxtc-content {
	border: 0 !important;
}

.dxtcLite_Moderno.dxtc-noTabs > .dxtc-content {
	border: 0 !important;
}

.ps-Title {
	font-family: "Lato",'Roboto',"Segoe UI", "Helvetica Neue", "Droid Sans", Arial, Tahoma, Geneva, Sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	font-size: 22px;
	line-height: normal;
	color: #2b2b2b;
}

.ps-Text {
	font-family: "Lato",'Roboto',"Segoe UI", "Helvetica Neue", "Droid Sans", Arial, Tahoma, Geneva, Sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: normal;
	color: #2b2b2b;
}

.ps-Buttons {
	width: 100%;
	-moz-box-flex: 0;
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-moz-box-orient: vertical;
	-webkit-box-orient: vertical;
	-moz-box-direction: normal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: 10px 0 10px 0;
}

.ps-Question {
	font-family: "Lato",'Roboto',"Segoe UI", "Helvetica Neue", "Droid Sans", Arial, Tahoma, Geneva, Sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	font-size: 18px;
	line-height: normal;
	color: #666;
}

.ps-Instruction {
	font-family: "Lato",'Roboto',"Segoe UI", "Helvetica Neue", "Droid Sans", Arial, Tahoma, Geneva, Sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	font-size: 16px;
	line-height: normal;
	color: #666;
}
.ps-Add-Instruction {
	font-family: "Lato",'Roboto',"Segoe UI", "Helvetica Neue", "Droid Sans", Arial, Tahoma, Geneva, Sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	font-size: 14px;
	line-height: normal;
	color: #666;
}

.ps-Resp {
	font-family: "Lato",'Roboto',"Segoe UI", "Helvetica Neue", "Droid Sans", Arial, Tahoma, Geneva, Sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: normal;
	color: #2b2b2b;
	width: 100%;
}

.psdivProgress {
	width:100%;
}
/*END PAT SURVEY*/
/*GETTING STARTED*/
.gs-page {
	padding: 40px;
}

.gs-header {
	display: flex;
	height: 95px;
	width: 100%;
	margin: 0 auto;
	position: fixed;
	background-color: hsla(0,0%,100%,.8);
}

.gs-content {
	width: 500px;
	text-align: left;
	margin: 95px auto;
}

.gs-logo2 {
	display: block;
}

#gslogo {
	display: block;
}

.gs-body {
	display: flex;
	flex-direction: column;
}

.flex-container {
	display: flex;
	flex-direction: column;
	border-radius: 5px;
	background-color: #f2f2f2;
	padding: 10px;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

	.flex-container > div {
		background-color: #f1f1f1;
		width: 99%;
		margin: 10px;
		text-align: center;
		line-height: 75px;
	}

#gsFullName {
	display: flex;
	flex-direction: row;
}

	#gsFullName > div {
		padding: 0 2px;
		width: 50%;
	}

#gsPwords {
	display: flex;
	flex-direction: row;
}

	#gsPwords > div {
		padding: 0 2px;
		width: 50%;
	}

.gsInput {
	width: 100%;
	font-size: 20px;
}

.gsInputcap {
	font-size: 20px;
	padding: 0 0 10px 0;
}

.gsInputErr {
	font-size: 20px;
}

.gsInputButton {
	height: 50px;
}

#gsP {
	display: none;
}

#gsH2 {
	display: none;
}

/*END GETTING STARTED*/
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
	#divcontent {
		position: fixed;
		top: 122px;
		margin: 0 auto;
		max-width: 100vw;
		bottom: 55px;
		left: 0;
		right: 0;
		overflow: auto;
	}

	#centerdiv {
		width: 98vw;
		max-width: 98vw;
		padding: 0;
		position: fixed;
		left: 0;
	}

	.zonediv {
		box-shadow: none;
	}
}

@media only screen and (max-width: 800px) {
	#rightdiv, #LogoHd, #loginh1 {
		visibility: hidden;
		width: 0;
		padding: 0;
		border: none;
		box-shadow: none;
		height: 0;
	}

	#footer {
		width: 100vw;
	}

	#tdFootPwr {
		visibility: hidden;
	}

	#tdFootlogo {
		visibility: hidden;
	}

	#tbFootCopy {
		display: block;
	}

	#wrapper {
		width: 90vw;
	}

	#divtop {
		background: url("Images/whitelogo.png") no-repeat;
		background-color: #fff;/* #0072C6;*/
		background-size: 258px 60px;
		background-position-y: 0;
		background-position-x: 5px;
		height: 65px;
		/*  border-bottom: 2px solid #e0e0e0;*/
		width: 100%;
	}

	#ctl00_h1Topheader {
		color: #fff;
		font-size: 1em;
		margin-left: 5px;
	}
	#logoa {
		display: block;
		padding: 0 5px;
	}
	#divcontent {
		position: fixed;
		top: 75px;
		overflow: auto;
		width: 100%;
		height: 100vh;
		max-width: 100vw;
		float: left;
		bottom: auto;
	}

	#centerdiv {
		width: 100%;
		max-width: 100vw;
		padding: 0;
		position: fixed;
		left: 0;
	}

	.zonediv {
		box-shadow: none;
	}

	#leftdiv {
		width: 90vw;
		height: 100vh;
		padding-left: 5px;
		margin-right: auto;
		min-width: 90vw;
		max-width: 100vw;
		border: 0;
		box-shadow: none;
	}



	.otherdivcenter {
		margin: 0;
		padding: 0;
		height: 100%;
		max-width: 100vw;
		min-width: 400px;
	}


	#otherdivcontent {
		position: fixed;
		top: 110px;
		left: 0;
		right: 0;
		overflow: auto;
		width: 400px;
		max-width: 400px;
	}

	#otherdivtop1 {
		height: 60px;
		padding-top: 0;
	}

	#otherdivtop2 {
		top: 60px;
		padding-top: 0;
		position: fixed;
		width: 100%;
		background-color: #008C95;
		height: 40px;
		box-shadow: none;
	}

	/*REG*/
	#regctrdiv {
		width: 290px;
		height: 900px;
		min-width: 290px;
		box-shadow: none;
	}

	#tableReg {
		padding: 0;
	}


	#tdRightHeader {
		line-height: 1em;
		width: 30%;
	}

	#tdCenterHeader {
		display: none;
	}

	#tdLeftHeader {
		width: 22%;
		padding-left: 20px;
	}

	#centerHeader {
		display: none;
	}

	#rightHeader {
		color: white;
		font-size: 12px;
		letter-spacing: 4px;
	}

	.header td {
		padding-right: 2px;
		height: 60px;
	}


	/*PASSWORD AND REG USER*/
	.fl-page {
		padding: 15px 5px 5px 5px;
	}


	.fl-flex-container {
		display: flex;
		flex-direction: column;
		border-radius: 0;
		padding: 0;
		min-width: 300px;
		box-shadow: none;
	}

		.fl-flex-container > div {
			background-color: #fff;
			width: 93%;
			margin: 0;
			text-align: center;
			line-height: 75px;
		}

	.fl-Row50 {
		display: flex;
		flex-direction: column;
	}

		.fl-Row50 > div {
			padding: 0;
			width: 100%;
		}

	.fl-Row {
		display: flex;
		flex-direction: column;
	}

		.fl-Row > div {
			padding: 5px 0 5px 0;
			width: 100%;
		}

	.fl-Input {
		width: 100%;
		font-size: 20px;
	}

	.fl-Input-Cap {
		font-size: 20px;
		padding: 0 0 10px 0;
	}

	.fl-Err {
		font-size: 20px;
	}

	.fl-Input-Button {
		height: 50px;
		width: 100%;
		min-width: 50px;
	}

	#flRegCaptcha {
		min-width: 300px;
	}
	/*END PASSWORD AND REG USER*/


}

@media only screen and (max-height: 620px) and (min-width: 820px) {
	#divtop {
		height: 100px;
	}

	#divcontent {
		top: 65px;
	}

	.header td {
		padding: 0;
	}

	#leftdiv {
		height: 400px;
	}

	#rightdiv {
		height: 400px;
	}

	div.overlaytransbox {
		top: 315px;
	}
}
