body {
  display:			flex;
  flex-direction:	column;
  min-height:		100vh;
  font-size: 		11px;
  font-family: 		Helvetica,Arial,Tahoma;
  font-weight: 		normal;
  color:			#151C54;
}

input, select, textarea {
  border: 			1px solid #0066FF !important;
}

label {
  float:			left;
}

a {
  color:			#151C54;
}

.card {
  border-radius:	15px;
  box-shadow:		none;
}

.card-body {
  padding:			10px 15px 10px 15px;
  color:			#151C54;
}

.mainHeaderContainer {
  background-color: #FFFFFF;
}

.mainHeader {
  background-color: #FFFFFF;
  width:			50%;
  margin-left:		0px;
  padding:			0px;
  display:			inline-block;
  vertical-align:	middle;
}

.mainHeaderRight {
  background-color: #FFFFFF;
  width:			50%;
  margin-right:		0px;
  padding:			0px;
  display:			inline-block;
  vertical-align:	middle;
  float:			right;
  text-align:		right;
}

a.ecarelink:link, a.ecarelink:hover, a.ecarelink:visited {
  font-weight: 		bold;
}

a.iconlink:link, a.iconlink:hover, a.iconlink:visited {
  font-weight: 		normal;
  text-decoration: 	none;
}

a.linkHighlight:link,a.linkHighlight:visited {
  color:			#0066FF;
}

a.linkHighlight:hover {
  color:			#0066FF;
}

a.linkWhite:link,a.linkWhite:visited {
  color:			#FFFFFF;
}

a.linkWhite:hover {
  color:			#FFFFFF;
}

.ecareheaderimage {
  max-width:		100%;
  max-height:		100%;
}

#errorboxarea ul {
list-style-type: none; 
}

#errorboxarea ul li:before {
  content:"\2713\0020";
}

.mainFooter {
  background-color: #000000;
  color:			#FFFFFF;
  width:			100vw;
}

.mainFooterLeft {
  display:			inline-block;
  margin-left:		0px;
  padding:			40px 0px 40px 40px;
  max-width:		50%;
}

.mainFooterRight {
  display:			inline-block;
  float:			right;
  vertical-align:	top;
  text-align:		right;
  padding:			40px 40px 40px 0px;
}

.mainFooterLinkArea {
  padding:			0px 0px 10px 0px;
}

.contcontainer {
  width:			100vw;
  overflow:			hidden;
  background-color:	#F4F4F4;
  flex:				1 1 auto;
}

.groupBoxInstructions {
  padding:			5px 5px 7px 7px;
  white-space:		normal;
  max-width:		500px;
}

.iconButton:hover {
  cursor:			pointer;
}

.button {
  height:			auto;
  padding:			6px;
  font-family: 		Helvetica,Arial,Tahoma;
  font-weight: 		bold;
  font-size:		12px;
  min-width: 		100px;
  width:			auto;
  border-style: 	solid;
  border-width: 	1px;
  border-radius:	20px;
  border-color:		#DDDDDD !important;
  background:		linear-gradient(0deg, #DDDDDD, #FFFFFF);
  border-color:		#DDDDDD #DDDDDD #DDDDDD #DDDDDD;
  color:			#151C54;
}

.button:hover {
  height:			auto;
  padding:			6px;
  font-family: 		Helvetica,Arial,Tahoma;
  font-weight: 		bold;
  width: 			100px;
  border-style: 	solid;
  border-width: 	1px;
  border-radius:	20px;	
  background:		linear-gradient(0deg, #CCCCCC, #EEEEEE);
  border-color:		#555555;
  cursor:			pointer;
}

.loginButton,.loginButton:link,.loginButton:visited,.loginButton:hover {
  width:			100%;
  padding:			8px;
}

.registerButton,.registerButton:link,.registerButton:visited,.registerButton:hover {
  width:			100%;
  padding:			8px;
}

.signupButton,.signupButton:link,.signupButton:visited,.signupButton:hover {
  width:			100%;
  padding:			8px;
}

.loginAccess {
  padding:			10px 0px 10px 0px;
  margin:			auto;
  font-size:		14px;
  text-align:		center;
  font-weight:		bold;
}

.loginAccessExtended {
  padding:			0px 0px 5px 0px;
  margin:			auto;
  text-align:		center;
  color:			#555555;
  white-space:		pre-wrap;
}

.loginPadding {
  padding:			20px 30px 20px 30px;
  text-align:		center;
}

.mainMenu {
  border-style: 	solid;
  border-color:		#FFFFFF;
  border-width: 	1px;
  border-radius:	10px 0px 0px 0px;	
  background:		#FFFFFF;
  position:			absolute;
  right:			0px;
  margin-top:		-30px;
  width:			auto;
  padding:			0px;
  line-height:		1.2em;
}

.mainMenuLinkDiv {
  display:			inline-block;
  text-align:		center;
  padding:			8px 13px 8px 13px;
}

.mainMenuLink {
  font-family: 		Helvetica,Arial,Tahoma;
  font-weight: 		normal;
  text-decoration: 	none;
  padding:			8px 0px 8px 0px;
}

.mainMenuLink:link {
  font-weight: 		normal;
}

.mainMenuLink:visited {
  font-weight: 		normal;
}

.mainMenuLink:hover {
  border-bottom:	4px solid #0066FF;
}

.mainMenuLinkSelected {
  border-bottom:	4px solid #0066FF;
}

.mainMobileMenu {
  position:			absolute;
  right:			10px;
  margin-top:		-42px;
  width:			auto;
  padding:			0px;
  border-radius:	10px 0px 0px 0px;	
}

.mbs-dropdown {
  cursor:			pointer;
}

.mbsModal {
  --bs-modal-margin:	7px;
}

.modal-content {
  max-width:		500px;
  margin:			auto;
}

.mainBody {
  padding-top:		15px;
  width:			94vw;
  max-width:		1000px;
}

.advertisementArea {
  width:			auto;
}

.advertisementImage, .ecareCustImageAD {
  max-width:		100%;
  max-height:		100%;
}

.dueAmount {
  font-size:		22px;
  font-weight:		bold;
}

.divAutopayText {
  display:			inline-block;
  vertical-align:	top;
  padding-top:		2px;
}

.totalDueText {
  font-size:		15px;
}

.eftNotEnrolled {
  fill:				#333333;
  color:			#333333;
  vertical-align:	middle;
}

.eftPending {
  fill:				#2ECCFF;	
  color:			#2ECCFF;	
  vertical-align:	middle;
}

.eftActive {
  fill:				#55F000;	
  color:			#55F000;	
  vertical-align:	middle;
}

.eftSuspended {
  fill:				#2ECCFF;	
  color:			#2ECCFF;	
  vertical-align:	middle;
}

.dueButtons {
  padding:			5px;
  text-align:		center;
}

.payButton,.payButton:link,.payButton:visited,.payButton:hover {
  width:			100%;
  height:			auto;
}

.invoiceButton,.invoiceButton:link,.invoiceButton:visited,.invoiceButton:hover {
  width:			100%;
  height:			auto;
}

.ecareCustImage {
	
}

#divViewInvoiceButton {
  display:			none;
}

.supportButton,.supportButton:link,.supportButton:visited,.supportButton:hover {
  background:		linear-gradient(0deg, #DDDDDD, #FFFFFF);
  border-color:		#DDDDDD #DDDDDD #DDDDDD #DDDDDD;
  width:			100%;
  height:			auto;
  display:			none;
}

.supportButton:hover {
  border-color:		#9E9E9E #9E9E9E #9E9E9E #9E9E9E;
}

.payDetailButtons {
  padding-bottom:	5px;
}

.invoicePayLinks {
  padding:			5px;
  line-height:		2.0;
  width:			100%;
  margin-left:		0px;
  text-align:		center;
}

.fontattention {
  color: 			#FF0000;
}

.installInstructions {
  white-space:		normal;	
  padding:			15px;
}

.installTimeInstructions {
  text-align:		center;
  padding:			5px;
  white-space:		normal;
}

.installTime, .installTimeSelected {
  padding:			5px 5px 5px 5px;
  border:			1px solid #0066FF;
  border-radius:	5px;
  width:			80px;
  display:			inline-block;
  text-align:		center;
  font-weight:		bold;
  font-size:		12px;
  margin:			10px 10px 0px 0px;
}

.installTimeSelected {
  background-color:	#0066FF;
  color:			#FFFFFF;
}

.installCalendar, .installTimeArea {
  border:			0px solid #0066FF;
  border-radius:	15px;
  padding:			10px;
  background-color:	#FFFFFF;
}

.installTimeArea {
  margin-top:		5px;
  text-align:		center;
  padding:			5px;
  white-space:		normal;
}

.installCalendarMonth, .installTimeInstructions {
  font-size:		16px;
  font-weight:		bold;
  text-align:		center;
  border-bottom:	1px solid #DDDDDD;
  padding:			3px 0px 5px 0px;
}

.installCalMonthNav {
  padding:			0px 20px 0px 20px;
}

.installCalHead, .installCalDay, .installCalDayAvail, .installCalDaySelected {
  padding:			5px 3px 5px 3px;
  text-align:		center;
  font-size:		14px;
  font-weight:		bold;
}

.installCalDayAvail, .installCalDaySelected {
  border-radius:	15px;
  border:			1px solid #0066FF;
}

.installCalDaySelected {
  background-color:	#0066FF;
  color:			#FFFFFF;
}

.installCalDayAvail:hover, .installCalDaySelected:hover {
  cursor:			pointer;
  background-color:	
}

.installChgSummaryProductTitle {
  font-weight:		bold;
  font-size:		14px;
  min-width:		200px;
}

.installChgSummaryProductSep {
  height:			20px;
}

.installChgSummaryLineDescription {
  padding:			5px 10px 5px 10px;
}

.installChgSummaryLineTotal {
  padding:			5px 0px 5px 0px;
}

.wizardArea {
  max-width:		900px;
  margin-left:		auto;
  margin-right:		auto;
}

.wizardpagetitle {
  font-size: 		12px;
  font-weight: 		bold;
  border-bottom:	1px solid #DDDDDD;
  white-space:		normal;
  padding:			10px;
  margin-bottom:	10px;
  text-align:		center;
}

.wizardProgressBar {
  text-align:		center;
  width:			fit-content;
  padding-top:		10px;
  margin-left:		auto;
  margin-right:		auto;
}

.wizardProgressBranchArea {
  display:			inline-block;
  vertical-align:	middle;
  padding:			0px;
}

.wizardProgressNodeArea {
  display:			inline-block;
  vertical-align:	middle;
  padding:			0px;
  position:			relative;
}

.wizardProgressNode, .wizardProgressBranch {
  fill:				#C4C4C4;
  stroke:			#C4C4C4;
}

.wizardProgressNodeSelected, .wizardProgressBranchSelected {
  fill:				#0066FF;
  stroke:			#0066FF;
}

.wizardProgressNumber {
  position: 		absolute;
  top: 				0px;
  left: 			0px;
  color: 			#FFFFFF;
  fill:				#FFFFFF;
  stroke:			#FFFFFF;
  font-weight:		bold;
  width:			36px;
  height:			36px;
  padding:			0px;
  align-items:		center;
  display:			flex;
  text-align:		center;
}

.wizardProgressNode, .wizardProgressNodeSelected {
  width:			36px;
  height:			36px;
}

.wizardProgressIcon {
  width:			20px;
  height:			20px;
  margin:			auto;
  fill:				#FFFFFF;
}

.wizardConfirmArea {
  margin:			auto;	
}

.wizardConfirmSpacer {
  height:			5px;
}

.wizardConfirmGroupArea {
  width:			auto;
  overflow:			hidden;
  border-radius:	20px;
  box-shadow:		none;
  background-color:	#FFFFFF;
  padding:			10px;
  margin-bottom:	10px;
}

.wizardConfirmationPrintButton {
  margin-right:		0px;
  padding-bottom:	5px;
}

.wizardConfirmationTitle {
  white-space:		normal;	
  font-weight:		bold;
  font-size:		14px;
}

.wizardConfirmationSectionTitle {
  display:			block;
  padding:			10px 0px 10px 0px;
  font-weight:		bold;
  white-space:		normal;
  border-bottom:	1px solid #DDDDDD;
  margin-left:		8px;
}

.wizardConfirmDataLabel, .wizardConfirmDataValue {
  display:			inline-block;
  white-space:		normal;
  vertical-align:	top;
  padding:			5px 0px 5px 0px;
}

.wizardConfirmDataLabel {
  width:			250px;
  margin-left:		20px;
}
	
.productOffering {
  border-radius:	15px;
  border-style: 	solid;
  border-width: 	2px;
  border-color:		#000000;
  width:			auto;
  padding:			10px;
  display:			inline-block;
  margin-right:		20px;
  margin-bottom:	20px;
  vertical-align:	top;
}

.productOfferingSelected {
  border-radius:	15px;
  border-style: 	solid;
  border-width: 	2px;
  border-color:		#000000;
  width:			auto;
  padding:			10px;
  display:			inline-block;
  margin-right:		20px;
  margin-bottom:	20px;
  background-color:	#0066FF;
  vertical-align:	top;
  color:			#FFFFFF;
}

.productOffering:hover, .productOfferingSelected:hover {
  cursor:			pointer;
}

.productShowSelected {
  display:			none;
}

.productShowUnselected {
  display:			block;
}

.productGroupArea {
  border-radius:	15px;
  background-color:	#FFFFFF;
  padding:			20px;
  margin-bottom:	10px;
}

.productGroupTitle {
  font-weight:		bold;
  font-size:		14px;
  padding:			10px 0px 15px 0px;
  border-bottom:	1px solid #DDDDDD;
  white-space:		normal;
  margin-bottom:	10px;
}

.productQuantityArea {
  margin:			auto;
  text-align:		center;
}

.chatWindow, #chatBotIframe {
  width:			320px;
  height:			530px;
  max-width:		95vw;
  max-height:		80vh;
  position:			fixed;
  right:			0px;
  bottom:			10vh;
  margin-right:		5vw;
  background-color:	#ffffff;
  border-radius:	20px;
  filter:			drop-shadow( 2px 2px 2px rgba(80, 80, 80, .5));
  border:			3px solid #151C54;
  display:			none;
}

.chatIcon {
  position:			absolute;
  right:			0px;
  bottom:			0vh;
  margin-right:		5vw;
}

.groupheadlist {
  text-align:		left;
  padding:			10px 15px 0px 15px;
  vertical-align:	middle;
  font-weight:		bold;
  font-size:		14px;
  display:			inline-flex;
}

.staticlisthead {
  background-color: #FFFFFF;
  font-weight: 		normal;
  vertical-align: 	bottom;
  padding:			5px;
  border-bottom:	1px solid #9E9E9E;
}

.staticlistdata {
  font-weight: 		normal;
  vertical-align: 	middle;
  padding:			5px 3px 5px 3px;
}

.readonlycolor {
  color:			#AAAAAA !important;
}

@media only screen and (max-width: 480px) {
  body {
	font-size: 			0.8rem;
  }
  .form-control {
	font-size:			0.8rem;
  }
  .button, .button:hover, .button:visited {
	min-width:			100px;
  	width:				100%;
  }
  .loginButton, .loginButton:hover, .loginButton:visited,
  .registerButton, .registerButton:hover, .registerButton:visited,
  .signupButton, .signupButton:hover, .signupButton:visited,
  .payButton, .payButton:hover, .payButton:visited,
  .invoiceButton, .invoiceButton:hover, .invoiceButton:visited,
  .supportButton, .supportButton:hover, .supportButton:visited
   {
	width:				100%;
  }
  .svgicon {
	width:				28px;
	height:				28px;
  }
  .mainHeader {
	width:				100vw;
  }
  .mainHeaderRight {
  	display:			none;
  }
  .mainFooterLeft {
	padding:			20px 0px 20px 20px;
  	font-size:			11px;
  }
  .mainFooterRight {
	padding:			20px 20px 20px 0px;
  	font-size:			11px;
  }
  .mainFooterCopyright {
  	white-space:		normal;
  }
  .wizardProgressBar {
	padding:			5px 5px 15px 5px;
  }
  .wizardProgressBranchExtra {
	display:			none;
  }
  .wizardProgressNumber {
  	display:			none;
  }
  .wizardProgressNode, .wizardProgressNodeSelected {
	width:				20px;
	height:				20px;
  }
  .wizardArea {
	padding:			10px;	
  }
  .wizardpagetitle {
	font-size:			17px;	
  }
  .wizardConfirmArea {
	width:				auto;
  }
  .wizardConfirmDataLabel {
	display:			block;
  	margin-left:		10px;
  }
  .wizardConfirmDataValue {
	display:			block;
  	float:				left:
  	white-space:		normal;
  	margin-left:		40px;
  }
  .productOffering, .productOfferingSelected {
	margin-right:		0px;
  }
  .installCalHead, .installCalDay, .installCalDayAvail, .installCalDaySelected {
	font-size:			19px;
  }
  a.linkHighlight, a.linkHighlight:hover, a.linkHighlight:visited {
	font-size:			14px;
	margin-right:		10px;
  }
  .chatWindow, #chatBotIframe {
	margin-left:		auto;
	margin-right:		auto;
	right:				0px;
	left:				0px;
  }
}