/*  Scale rem-based sizes (Bootstrap headings, .small, fs-*,
    buttons, badges) down about 10% for E-Care.  The px font
    sizes below were reduced to match. */
html {
  font-size:		90%;
}

body {
  display:			flex;
  flex-direction:	column;
  min-height:		100vh;
  font-size: 		14.4px;
  font-family: 		Helvetica,Arial,Tahoma;
  font-weight: 		normal;
  color:			#151C54;
  background-image: url(../pics/sign-in-bg.png);
  background-size:  cover;
}

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

label {
  float:			left;
}

a {
  color:			#151C54;
}

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

.card-title {
  font-size:		14.4px;
}

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

.row {
	margin-top:     calc(-1 * var(--bs-gutter-y));
}

.col-form-label {
	padding-top:    4px;
	padding-bottom: 4px;
}

.form-control {
  padding:			0.2rem 0.4rem;
  min-height:		23px;
  border-color:		#151C54 !important;
}

.form-select {
  padding:				0.2rem 1.4rem 0.2rem 0.4rem;
  border-color:		#151C54 !important;
}

.form-check-input {
  padding:			0.16rem 0.32rem;
}

/*----------------------------------------------------------
  Data tables - the "list of tiles" styling is in mbs3.css;
  E-Care uses roomier sizes, its own colors, uppercase
  column headers, and pill-shaped row links.
----------------------------------------------------------*/
:root {
  --mbs-table-text:				#151C54;
  --mbs-table-row-hover-bg:		#e8f0ff;
  --mbs-table-row-selected-bg:	#dbe7ff;
  --mbs-table-row-selected-text:	#151C54;
  --mbs-table-accent:			#0066FF;

  --mbs-table-row-gap:			6px;
  --mbs-table-cell-padding:		10px 12px;
  --mbs-table-head-padding:		4px 12px 2px 12px;
  --mbs-table-font-size:		13.5px;
  --mbs-table-head-font-size:	10.8px;
  --mbs-table-radius:			10px;
}

table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
  letter-spacing:   0.5px;
  text-transform:   uppercase;
}

/* Links inside a row become small pill buttons. */
table.dataTable tbody td a.linkHighlight,
table.dataTable tbody td a.linkHighlight:link,
table.dataTable tbody td a.linkHighlight:visited {
  display:          inline-block;
  padding:          2px 12px;
  border-radius:    999px;
  background-color: #e0ebff;
  color:            #0066FF;
  font-size:        11.7px;
  font-weight:      600;
  text-decoration:  none;
  transition:       background-color 0.15s ease, color 0.15s ease;
}

table.dataTable tbody td a.linkHighlight:hover {
  background-color: #0066FF;
  color:            #FFFFFF;
}

.btn {
  font-size:			14.4px;
  padding:			0.16rem 0.32rem;
}

.accordion-button {
    font-size:		14.4px;
    background-color:	#FFFFFF;
}

.accordion-button:not(.collapsed) {
    background-color:	#151C54;
    fill:				#FFFFFF;
}

.accordion-button span {
    color:			#FFFFFF;
    fill:				#FFFFFF;
    font-size:		9px;
    font-weight:		400;
}

.accordion-button:not(.collapsed) span {
    color:			#888888;
    fill:				#888888;
}

.accordion-button i, .accordion-button svg {
    color:			#151C54;
    fill:				#151C54;
}

.accordion-button:not(.collapsed) i, .accordion-button:not(.collapsed) svg {
    color:			#FFFFFF;
    fill:				#FFFFFF;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' stroke='%232278FD'%3E%3Cg id='Lager_19' data-name='Lager 19' transform='translate(-6 -6)'%3E%3Crect id='Rectangle_7' data-name='Rectangle 7' width='4' height='20' rx='1.98' transform='translate(14 6)' /%3E%3Crect id='Rectangle_8' data-name='Rectangle 8' width='20' height='4' rx='1.98' transform='translate(6 14)' /%3E%3C/g%3E%3C/svg%3E%0A");
    fill:				#151C54;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' stroke='%23FFFFFF' fill='%23FFFFFF'%3E%3Cg id='Lager_19' data-name='Lager 19' transform='translate(-6 -6)'%3E%3Crect id='Rectangle_8' data-name='Rectangle 8' width='20' height='4' rx='1.98' transform='translate(6 14)' /%3E%3C/g%3E%3C/svg%3E%0A");
}

.accordion-button h5 {
    font-size:		14.4px;
}

.accordion-button .dropdown-item {
    color:			#151C54 !important;
    fill:				#151C54 !important;
}

.form-control {
  font-size:			14.4px;
}

.header {
  height:			60px;
}

/* E-Care header.  Builds on the .mbsHeader rules in mbs3.css,
   sized for E-Care's taller header and larger text. */
.mbsEcareHeader {
  padding:			0 14px 0 10px;
}

.mbsEcareHeader .toggle-sidebar-btn {
  width:			40px;
  height:			40px;
  font-size:		26px;
}

.mbsEcareHeader .mbsEcareLogo {
  display:			flex;
  align-items:		center;
  height:			100%;
  min-width:		0;
  margin-left:		6px;
  background-color:	transparent;
}

.mbsEcareHeader .mbsEcareLogo .mainHeader {
  display:			flex;
  align-items:		center;
  width:			auto;
  height:			100%;
  background-color:	transparent;
}

.mbsEcareHeader .mbsEcareLogo img {
  display:			block;
  width:			auto;
  max-width:		min(320px, 50vw);
  max-height:		44px;
  padding-left:		0;
  object-fit:		contain;
}

.mbsEcarePayButton,
.mbsEcarePayButton:link,
.mbsEcarePayButton:visited {
  display:			inline-flex;
  align-items:		center;
  gap:				8px;
  height:			36px;
  margin-right:		8px;
  padding:			0 18px;
  font-size:		14px;
  font-weight:		600;
  white-space:		nowrap;
  color:			var(--mbs-header-bg);
  background-color:	var(--mbs-header-text);
  border-radius:	999px;
  box-shadow:		0 1px 3px rgba(0, 0, 0, 0.2);
  transition:		transform 0.15s ease, box-shadow 0.15s ease;
}

.mbsEcarePayButton:hover,
.mbsEcarePayButton:focus {
  color:			var(--mbs-header-bg);
  transform:		translateY(-1px);
  box-shadow:		0 4px 10px rgba(0, 0, 0, 0.25);
}

.mbsEcarePayButton i {
  font-size:		16px;
}

.mbsEcareHeader .header-nav .nav-icon {
  width:			40px;
  height:			40px;
  font-size:		22px;
}

.mbsEcareHeader .header-nav .nav-profile .rounded-circle {
  width:			36px !important;
  height:			36px !important;
  font-size:		16px !important;
}

.mbsEcareHeader .header-nav .nav-profile span {
  font-size:		14px;
}

.mbsEcareHeader .header-nav .profile {
  min-width:		230px;
}

.mbsEcareHeader .header-nav .profile .dropdown-header .mbsHeaderUserName {
  font-size:		15px;
}

.mbsEcareHeader .header-nav .profile .dropdown-item {
  font-size:		14.4px;
}

.mbsEcareHeader .header-nav .profile .dropdown-item i {
  font-size:		18px;
}

.header-nav .profile .dropdown-item {
  font-size:			14.4px;
}

.header-nav .profile .dropdown-item i {
  font-size:			21.6px;
}

.mainNoMenu {
  margin-left:      0px !important;
}

.mainHeader {
  width:			80%;
  margin-left:		0px;
  padding:			0px;
  display:			inline-block;
  vertical-align:	middle;
}

.mainHeaderRight {
  width:			20%;
  margin-right:		0px;
  padding:			0px;
  display:			inline-block;
  vertical-align:	middle;
  float:			right;
  text-align:		right;
  padding:			0px;
}

/* -----------------------------------------------------------
   Sidebar menu (f_infr_html_menu(), built for E-Care by
   m_ecar_sidebar_menu.php).

   Colors and sizes are CSS variables, so a company can
   restyle the menu from EC_CUST_TEXT (label CSS) without
   repeating these rules, e.g.
     :root { --ecare-menu-accent: #c8102e; }
   They are declared on :root so the page content offset
   (#main) can follow --ecare-menu-width.  The selectors
   match the template's (style.css), so a customization
   using the same selector also overrides them.
   ----------------------------------------------------------- */
:root {
  --ecare-menu-width:			220px;
  --ecare-menu-bg:				#ffffff;
  --ecare-menu-border:			#e2e8f0;
  --ecare-menu-text:			#151C54;
  --ecare-menu-icon:			#64748b;
  --ecare-menu-accent:			#00509c;
  --ecare-menu-accent-text:		#ffffff;
  --ecare-menu-hover-bg:		#eef4fb;
  --ecare-menu-open-bg:			#f5f8fc;
  --ecare-menu-font-size:		14px;
  --ecare-menu-sub-font-size:	13px;
  --ecare-menu-icon-size:		17px;
}

.sidebar {
  width:			var(--ecare-menu-width);
  padding:			14px 10px;
  top:				60px;
  background-color:	var(--ecare-menu-bg);
  color:			var(--ecare-menu-text);
  border-right:		1px solid var(--ecare-menu-border);
}

@media (min-width: 1200px) {
  #main, #footer {
    margin-left:	var(--ecare-menu-width);
  }
}

/* Single links render nav-link on both the <li> and its <a>;
   only the <a> is styled. */
.sidebar-nav li.nav-link,
.sidebar-nav li.nav-link:hover,
.sidebar-nav li.nav-link.collapsed {
  padding:			0 !important;
  background:		transparent;
}

/* Top-level links and group headers */
.sidebar-nav .nav-link,
.sidebar-nav .nav-link.collapsed {
  font-size:		var(--ecare-menu-font-size);
  color:			var(--ecare-menu-text);
  background:		transparent;
  padding:			9px 12px;
  border-radius:	8px;
  transition:		background-color 0.15s ease, color 0.15s ease;
}

.sidebar-nav .nav-link i,
.sidebar-nav .nav-link.collapsed i {
  font-size:		var(--ecare-menu-icon-size);
  color:			var(--ecare-menu-icon);
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:focus-visible {
  color:			var(--ecare-menu-accent);
  background:		var(--ecare-menu-hover-bg);
}

.sidebar-nav .nav-link:hover i,
.sidebar-nav .nav-link:focus-visible i {
  color:			var(--ecare-menu-accent);
}

/* Open group header */
.sidebar-nav .nav-link:not(.collapsed) {
  color:			var(--ecare-menu-accent);
  background:		var(--ecare-menu-open-bg);
}

.sidebar-nav .nav-link:not(.collapsed) i {
  color:			var(--ecare-menu-accent);
}

.sidebar-nav .nav-link i.bi-chevron-down {
  font-size:		12px;
}

/* Current page (set by m_ecar_sidebar_menu.php) */
.sidebar-nav .nav-link.active,
.sidebar-nav .nav-link.active:hover {
  color:			var(--ecare-menu-accent-text);
  background:		var(--ecare-menu-accent);
}

.sidebar-nav .nav-link.active i,
.sidebar-nav .nav-link.active:hover i {
  color:			var(--ecare-menu-accent-text);
}

/* Group items */
.sidebar-nav .nav-content {
  margin:			2px 0 6px 21px;
  border-left:		2px solid var(--ecare-menu-border);
}

.sidebar-nav .nav-content a,
.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
  font-size:		var(--ecare-menu-sub-font-size);
  font-weight:		normal;
  color:			var(--ecare-menu-text);
  padding:			7px 10px;
}

.sidebar-nav .nav-content a i {
  display:			none;
}

.sidebar-nav .nav-content a:hover {
  color:			var(--ecare-menu-accent);
  background:		var(--ecare-menu-hover-bg);
}

/* Current page within a group, styled like .nav-link.active */
.sidebar-nav .nav-content a.active,
.sidebar-nav .nav-content a.active:hover {
  color:			var(--ecare-menu-accent-text);
  background:		var(--ecare-menu-accent);
  border-radius:	8px;
}

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:		60px;
  padding-left:		10px;
}

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

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

.input-group-text {
  border-color:		#151C54 !important;
}

/* Centers a spinner (input group) in its cell without splitting it. */
.spinnerCenter {
  display:			flex;
  justify-content:	center;
}

.spinnerCenter > .input-group {
  width:			auto;
}

.wizButtons {
  position:         fixed;
  z-index:          1000;
  bottom:           0px;
  left:             0px;
  right:            0px;
  background-color: #151C54;
  color:			#FFFFFF;
}

.ecareWizardOuterArea {
    display:        inline-block;
    width:          auto;
    margin:         auto;
}

.ecareWizardArea {
  padding:			15px;
}

.mainFooter {
  position:         fixed;
  z-index:          1000;
  bottom:           0px;
  left:             0px;
  right:            0px;
  background-color: #151C54;
  color:			#FFFFFF;
}

.mainFooterLeft {
  display:			inline-block;
  padding:			5px 10px 5px 10px;
  font-size:        10.8px;
}

.mainFooterRight {
  display:			inline-block;
  float:			right;
  vertical-align:	top;
  text-align:		right;
  padding:			5px 10px 5px 10px;
  font-size:        10.8px;
}

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

.loginFooter {
  color:			#FFFFFF;
}

.loginFooterLeft {
  font-size:        10.8px;
}

.loginFooterRight {
  text-align:		right;
  font-size:        10.8px;
}

.contcontainer {
  width:			100vw;
  overflow:			hidden;
  background-image: url(../pics/sign-in-bg.png);
  background-size:  cover;
  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: 		normal;
  font-size:		12.6px;
  min-width: 		100px;
  width:			100%;
  border-style: 	solid;
  border-width: 	1px;
  border-color:		#00509c !important;
  background-color: #00509c;
}

.button:hover {
  height:			auto;
  padding:			6px;
  font-family: 		Helvetica,Arial,Tahoma;
  border-style: 	solid;
  border-width: 	1px;
  border-color:		#00509c !important;
  background-color: #002E6B;
  color:			#FFFFFF;
  cursor:			pointer;
}

.headerButton, .headerButton:hover {
  background:       linear-gradient(0deg, #DDDDDD, #FFFFFF);
  color:			#151C54;
  border-radius:	10px;
}

.installButton, .installButton:hover {
  background:       linear-gradient(0deg, #DDDDDD, #FFFFFF);
  color:			#151C54;
  font-weight: 		bold;
  border-radius:	10px;
}

/* Install app banner on the login page (same as the Workforce
   wkfc-install-banner).  Shown with display:flex by the page. */
.ecareInstallBanner {
  position:			fixed;
  left:				12px;
  right:			12px;
  bottom:			calc(12px + env(safe-area-inset-bottom, 0px));
  z-index:			1060;
  display:			flex;
  align-items:		center;
  gap:				12px;
  max-width:		560px;
  margin:			0 auto;
  padding:			12px 14px;
  font-size:		14px;
  color:			#212529;
  background-color:	#FFFFFF;
  border-radius:	14px;
  box-shadow:		0 10px 30px rgba(10, 15, 40, 0.25);
}

.ecareInstallBanner .btn {
  flex:				0 0 auto;
  white-space:		nowrap;
}

.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:		12.6px;
  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:		left;
}

.quickPayArea {
  padding:			10px 15px 10px 15px;
  text-align:		left;
}

.quickPayArea {
  max-width:		600px;
}

#main {
    margin-top: 60px;
}

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

.modal-content {
  max-width:		700px;
}

.ecareLogin {
  width:            75vw;
}

.mainBody {
  padding:		    0px;
  margin:			auto;
}

.advertisementArea {
  width:			auto;
}

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

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

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

.totalDueText {
  font-size:		13.5px;
}

.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 {
	
}

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

.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:		10.8px;
  margin:			10px 10px 0px 0px;
}

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

.installCalendar {
  margin-bottom:	10px;
}

.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:		14.4px;
  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:		12.6px;
  font-weight:		bold;
}

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

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

.installCalDayAvail:hover, .installCalDaySelected:hover {
  cursor:			pointer;
}

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

.installChgSummaryProductSep {
  height:			20px;
}

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

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

.calcell:hover {
  background-color:	#151C54 !important;
}

.wizardArea {
  margin-left:		auto;
  margin-right:		auto;
}

.ecareWizardDetail {
  max-width:		1400px;
  width:			70vw;
  min-width:		400px;
}

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

.wizardProgressBar {
  display:			flex;
  align-items:		center;
  justify-content:	center;
  width:			fit-content;
  max-width:		100%;
  margin:			10px auto 20px auto;
  padding:			12px 22px;
  background-color:	#FFFFFF;
  border:			1px solid #E9EEF5;
  border-radius:	999px;
  box-shadow:		0 2px 10px rgba(21, 28, 84, 0.06);
}

/* Connector segments shrink so the bar always fits its area. */
.wizardProgressBranchArea {
  display:			flex;
  flex:				0 1 26px;
  min-width:		4px;
  align-items:		center;
  padding:			0px;
}

.wizardProgressNodeArea {
  display:			flex;
  flex:				0 0 auto;
  position:			relative;
  margin:			0px 6px;
  padding:			0px;
}

/* The connector SVG box is drawn as a solid bar. */
.wizardProgressBranch, .wizardProgressBranchSelected {
  display:			block;
  width:			100%;
  height:			4px;
  fill:				transparent;
  stroke:			transparent;
  background-color:	#E3E8EF;
  transition:		background-color 0.3s ease;
}

.wizardProgressBranchSelected {
  background-color:	#0066FF;
}

.wizardProgressNode, .wizardProgressNodeSelected {
  display:			block;
  width:			40px;
  height:			40px;
  border-radius:	50%;
  stroke:			none;
  transition:		fill 0.3s ease, box-shadow 0.3s ease;
}

.wizardProgressNode {
  fill:				#E9EEF5;
}

.wizardProgressNodeSelected {
  fill:				#0066FF;
  filter:			drop-shadow(0 2px 4px rgba(0, 102, 255, 0.30));
}

/* Current step: slightly larger, with a soft halo. */
.wizardProgressNodeAreaCurrent .wizardProgressNodeSelected {
  width:			46px;
  height:			46px;
  box-shadow:		0 0 0 5px rgba(0, 102, 255, 0.16);
}

.wizardProgressNumber {
  position: 		absolute;
  inset:			0px;
  display:			flex;
  align-items:		center;
  justify-content:	center;
  padding:			0px;
  color: 			#FFFFFF;
  fill:				#FFFFFF;
  stroke:			none;
  font-size:		15px;
  font-weight:		600;
}

/* Upcoming steps: muted icon on a light node. */
.wizardProgressNode + .wizardProgressNumber {
  color:			#8A94A6;
  fill:				#8A94A6;
}

.wizardProgressIcon {
  width:			18px;
  height:			18px;
  margin:			0px;
  fill:				inherit;
  stroke:			none;
}

.wizardProgressNodeAreaCurrent .wizardProgressIcon {
  width:			20px;
  height:			20px;
}

.wizardConfirmArea {
  margin:			auto;
}

.wizardConfirmSpacer {
  height:			5px;
}

.wizardConfirmGroupArea {
  border-radius:	20px;
  box-shadow:		none;
  padding:			10px;
  margin-bottom:	10px;
}

.wizardConfirmationPrintButton {
  padding-bottom:	5px;
}

.wizardConfirmationTitle {
  font-size:		12.6px;
}

.wizardConfirmationSectionTitle {
  padding:			10px 0px 10px 0px;
  border-bottom:	1px solid #DDDDDD;
  margin-left:		8px;
}

.wizardConfirmDataLabel, .wizardConfirmDataValue {
  display:			inline-block;
  white-space:		normal;
  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:		12.6px;
  padding:			10px 0px 15px 0px;
  border-bottom:	1px solid #DDDDDD;
  white-space:		normal;
  margin-bottom:	10px;
}

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

/* -----------------------------------------------------------
   Product option / upgrade cards (l_ecar_features_available.php,
   used by the sign-up wizard and Upgrade Service).

   The cards also carry the Bootstrap card classes and sit in a
   productGroupArea, so existing .card / .productGroupArea
   customizations apply.  Colors are CSS variables, so a company
   can restyle them from EC_CUST_TEXT (label CSS), e.g.
     :root { --ecare-feature-accent: #c8102e; }
   A selected card has the featureCardSelected class.
   ----------------------------------------------------------- */
:root {
  --ecare-feature-card-min-width:	230px;
  --ecare-feature-bg:				#ffffff;
  --ecare-feature-border:			#d5dcea;
  --ecare-feature-text:				#151C54;
  --ecare-feature-muted:			#64748b;
  --ecare-feature-accent:			#0066FF;
  --ecare-feature-selected-bg:		#e8f0ff;
  --ecare-feature-selected-text:	#151C54;
  --ecare-feature-footer-bg:		#f5f8fc;
  --ecare-feature-price-size:		21.6px;
}

.featureListArea {
  width:			100%;
  margin-bottom:	10px;
}

.featureCardGrid {
  display:			grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ecare-feature-card-min-width)), 1fr));
  gap:				15px;
}

.featureCard {
  position:			relative;
  height:			100%;
  border:			2px solid var(--ecare-feature-border);
  background-color:	var(--ecare-feature-bg);
  color:			var(--ecare-feature-text);
  white-space:		normal;
  cursor:			pointer;
  overflow:			hidden;
  transition:		border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.featureCard:hover {
  border-color:		var(--ecare-feature-accent);
  box-shadow:		0 2px 8px rgba(0, 0, 0, 0.12);
}

.featureCard .card-body {
  color:			inherit;
  padding:			15px 15px 10px 15px;
}

.featureCardSelected {
  border-color:		var(--ecare-feature-accent);
  background-color:	var(--ecare-feature-selected-bg);
  color:			var(--ecare-feature-selected-text);
}

.featureCardCheck {
  display:			none;
  position:			absolute;
  top:				10px;
  right:			12px;
  font-size:		18px;
  color:			var(--ecare-feature-accent);
}

.featureCardSelected .featureCardCheck {
  display:			block;
}

.featureCardTitle {
  font-weight:		bold;
  padding-right:	24px;
  margin-bottom:	8px;
}

.featureCardPrice {
  font-size:		var(--ecare-feature-price-size);
  font-weight:		bold;
  line-height:		1.2;
  color:			var(--ecare-feature-accent);
}

.featureCardFrequency, .featureCardPriceNote {
  font-size:		12.6px;
  color:			var(--ecare-feature-muted);
}

.featureCardDetail {
  margin-top:		10px;
  font-size:		13.5px;
}

.featureCardLabel {
  margin-top:		10px;
}

.featureCardAction {
  display:			flex;
  align-items:		center;
  justify-content:	space-between;
  gap:				10px;
  background-color:	var(--ecare-feature-footer-bg);
  border-top:		1px solid var(--ecare-feature-border);
}

.featureCardSelected .featureCardAction {
  background-color:	transparent;
}

.featureCardAction .form-check-input {
  float:			none;
  margin:			0px;
  width:			1.3em;
  height:			1.3em;
  order:			2;
  cursor:			pointer;
}

.featureCardActionLabel {
  font-weight:		bold;
}

.featureCardEmpty {
  grid-column:		1 / -1;
  padding:			10px 0px;
  color:			var(--ecare-feature-muted);
}

.chatWindow, #chatBotIframe, #btnChatClose {
  width:			320px;
  height:			530px;
  max-width:		95vw;
  max-height:		80vh;
  /* Keep below the 60px fixed header: 80px bottom + 60px + 10px gap. */
  max-height:		min(80vh, calc(100dvh - 150px));
  position:			fixed;
  right:			0px;
  bottom:			80px;
  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;
}

#btnChatClose {
  height:			30px;
  bottom:			45px;
}

.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:		12.6px;
  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;
}

.acctSumHero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
}

.acctSumHeroLabel {
  font-size: 11.7px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #64748b;
}

.acctSumHero .dueAmount {
  font-size: 28.8px;
  line-height: 1.2;
  padding-left: 0;
}

.acctSumHero .dueDate {
  padding-left: 0;
  color: #475569;
}

.acctSumActions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 200px;
}

.acctSumActions .button {
  width: 100%;
  margin: 0;
}

.acctSumRow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eef2f6;
}

.acctSumLabel {
  color: #64748b;
}

.acctSumValue {
  font-weight: 600;
  text-align: right;
}

.acctSumTotal {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0 0.25rem 0;
  border-top: 2px solid #cbd5e1;
  font-size: 1.1em;
  font-weight: 700;
}

.acctSumNote {
  margin-top: 0.75rem;
  font-size: 10.8px;
  color: #64748b;
}

.acctSumText {
  margin: 0.75rem 0;
  color: #475569;
}

.acctSumCardActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.autopayBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 11.7px;
  font-weight: 600;
}

.autopayBadge.isActive {
  background-color: #dcfce7;
  color: #166534;
}

.autopayBadge.isSuspended {
  background-color: #fef3c7;
  color: #92400e;
}

.autopayBadge.isPending {
  background-color: #dbeafe;
  color: #1e40af;
}

.autopayBadge.isNotEnrolled {
  background-color: #f1f5f9;
  color: #475569;
}

@media only screen and (max-width: 480px) {
    body {
        font-size: 14.4px;
    }

    #main {
        padding-left:0px;
        padding-right:0px;
    }

    /*  Kept at 16px: iOS zooms the page on focus when a field's
        font is smaller than 16px. */
    .form-control, .form-select, textarea {
        font-size: 16px;
    }

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

    .loginInner {
        padding-right:  0px !important;
        padding-left:   0px !important;
    }

    .quickPayArea {
        padding:        0px 0px 0px 0px !important;
    }

    .svgicon {
        width: 28px;
        height: 28px;
    }

    .ecareWizardArea {
      padding:			5px;
    }

    .ecareWizardOuterArea {
        display:        block;
        width:          100%;
    }

    .ecareWizardDetail {
      width:			100%;
      min-width:		100px;
    }

    .header-nav .profile .dropdown-item,
    .mbsEcareHeader .header-nav .profile .dropdown-item {
        font-size: 18px;
        padding: 10px 8px 10px 8px;
    }

    .mbsEcareHeader .mbsEcareLogo img {
        max-height: 36px;
    }

    .mainBody {
        padding: 0px 0px 0px 0px;
        margin-left: 9px;
        margin-right: 9px;
    }

    .mainHeaderRight {
        display: none;
    }

    .mainFooterLeft, .loginFooterLeft {
        text-align: center !important;
    }

    .mainFooterRight, .loginFooterRight {
        text-align: center !important;
    }

    :root {
        --ecare-menu-width:				260px;
        --ecare-menu-font-size:			16px;
        --ecare-menu-sub-font-size:		15px;
        --ecare-menu-icon-size:			19px;
    }

    .mainFooterCopyright {
        white-space: normal;
    }

    .wizardProgressBar {
        margin: 5px auto 15px auto;
        padding: 8px 10px;
    }

    .wizardProgressBranchExtra {
        display: none;
    }

    .wizardProgressNodeArea {
        margin: 0px 3px;
    }

    .wizardProgressBranchArea {
        flex-basis: 14px;
    }

    .wizardProgressBranch, .wizardProgressBranchSelected {
        height: 3px;
    }

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

    .wizardProgressNodeAreaCurrent .wizardProgressNodeSelected {
        width: 34px;
        height: 34px;
        box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.16);
    }

    .wizardProgressNumber {
        font-size: 12px;
    }

    .wizardProgressIcon, .wizardProgressNodeAreaCurrent .wizardProgressIcon {
        width: 14px;
        height: 14px;
    }

    .wizardArea {
        padding: 10px;
    }

    .wizardpagetitle {
        font-size: 15.3px;
    }

    .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: 17.1px;
    }

    a.linkHighlight, a.linkHighlight:hover, a.linkHighlight:visited {
        font-size: 12.6px;
        margin-right: 10px;
    }

    .chatWindow, #chatBotIframe {
        margin-left: auto;
        margin-right: auto;
        right: 0px;
        left: 0px;
    }

    .ecareLogin {
        width: 95vw;
    }
}



/* -----------------------------------------------------------
   Chatbot window (m_ecar_home.php, js/j_ecar_agent_chat.js).
   Colors are CSS variables, so a company can restyle it from
   EC_CUST_TEXT (label CSS), e.g.
     :root { --ecare-chat-accent: #c8102e; }
   ----------------------------------------------------------- */
:root {
  --ecare-chat-accent:			#00509c;
  --ecare-chat-accent-text:		#ffffff;
  --ecare-chat-bg:				#ffffff;
  --ecare-chat-log-bg:			#f5f7fb;
  --ecare-chat-reply-bg:		#ffffff;
  --ecare-chat-reply-text:		#151C54;
  --ecare-chat-border:			#e2e8f0;
}

.ecareChat {
  position:			fixed;
  right:			20px;
  bottom:			20px;
  z-index:			1040;
}

/* Toggle icon */
.ecareChatToggle {
  display:			inline-flex;
  align-items:		center;
  justify-content:	center;
  width:			56px;
  height:			56px;
  padding:			0;
  font-size:		24px;
  color:			var(--ecare-chat-accent-text);
  background-color:	var(--ecare-chat-accent);
  border:			none;
  border-radius:	50%;
  box-shadow:		0 6px 18px rgba(15, 23, 42, 0.25);
  cursor:			pointer;
  transition:		transform 0.15s ease, box-shadow 0.15s ease;
}

.ecareChatToggle:hover {
  transform:		translateY(-2px);
  box-shadow:		0 10px 24px rgba(15, 23, 42, 0.3);
}

.ecareChatToggle:focus-visible {
  outline:			3px solid var(--ecare-chat-border);
  outline-offset:	2px;
}

.ecareChatToggle .ecareChatIconClose,
.ecareChat.is-open .ecareChatToggle .ecareChatIconOpen {
  display:			none;
}

.ecareChat.is-open .ecareChatToggle .ecareChatIconClose {
  display:			inline;
}

/* Panel */
.ecareChatPanel {
  position:			absolute;
  right:			0;
  bottom:			68px;
  display:			none;
  flex-direction:	column;
  width:			360px;
  height:			520px;
  /* Room for the 60px fixed header (.header) above and the
     icon below (88px), plus a 12px gap.  dvh where supported. */
  max-height:		calc(100vh - 160px);
  max-height:		calc(100dvh - 160px);
  overflow:			hidden;
  background-color:	var(--ecare-chat-bg);
  border:			1px solid var(--ecare-chat-border);
  border-radius:	16px;
  box-shadow:		0 16px 40px rgba(15, 23, 42, 0.22);
}

.ecareChat.is-open .ecareChatPanel {
  display:			flex;
}

.ecareChatHeader {
  display:			flex;
  align-items:		center;
  gap:				10px;
  padding:			12px 12px 12px 16px;
  color:			var(--ecare-chat-accent-text);
  background-color:	var(--ecare-chat-accent);
}

.ecareChatTitle {
  flex:				1;
  font-size:		15px;
  font-weight:		600;
}

.ecareChatTitle small {
  display:			block;
  font-size:		11.5px;
  font-weight:		normal;
  opacity:			0.85;
}

.ecareChatHeaderBtn {
  display:			inline-flex;
  align-items:		center;
  justify-content:	center;
  width:			30px;
  height:			30px;
  padding:			0;
  font-size:		16px;
  color:			inherit;
  background:		transparent;
  border:			none;
  border-radius:	8px;
  cursor:			pointer;
}

.ecareChatHeaderBtn:hover {
  background-color:	rgba(255, 255, 255, 0.18);
}

.ecareChatHeaderBtn:disabled {
  opacity:			0.5;
  cursor:			default;
}

/* Messages */
.ecareChatMessages {
  flex:				1;
  overflow-y:		auto;
  padding:			14px 12px;
  background-color:	var(--ecare-chat-log-bg);
}

.ecareChatMsg {
  display:			flex;
  margin-bottom:	8px;
}

.ecareChatMsg-user {
  justify-content:	flex-end;
}

.ecareChatBubble {
  max-width:		82%;
  padding:			8px 12px;
  font-size:		13.5px;
  line-height:		1.4;
  white-space:		pre-wrap;
  overflow-wrap:	anywhere;
  border-radius:	14px;
}

.ecareChatMsg-assistant .ecareChatBubble {
  color:			var(--ecare-chat-reply-text);
  background-color:	var(--ecare-chat-reply-bg);
  border:			1px solid var(--ecare-chat-border);
  border-bottom-left-radius:	4px;
}

.ecareChatBubble a {
  color:			inherit;
  font-weight:		600;
  text-decoration:	underline;
  overflow-wrap:	anywhere;
}

.ecareChatMsg-user .ecareChatBubble {
  color:			var(--ecare-chat-accent-text);
  background-color:	var(--ecare-chat-accent);
  border-bottom-right-radius:	4px;
}

.ecareChatNotice {
  margin:			4px 0 10px 0;
  font-size:		11.5px;
  color:			#64748b;
  text-align:		center;
}

/* Suggested prompts */
.ecareChatPrompts {
  display:			flex;
  flex-wrap:		wrap;
  gap:				6px;
  margin:			4px 0 10px 0;
}

.ecareChatPrompt {
  max-width:		100%;
  padding:			6px 12px;
  font-size:		13px;
  line-height:		1.3;
  text-align:		left;
  white-space:		normal;
  overflow-wrap:	anywhere;
  cursor:			pointer;
  color:			var(--ecare-chat-reply-text);
  background-color:	var(--ecare-chat-reply-bg);
  border:			1px solid var(--ecare-chat-accent);
  border-radius:	14px;
}

.ecareChatPrompt:hover,
.ecareChatPrompt:focus-visible {
  color:			var(--ecare-chat-accent-text);
  background-color:	var(--ecare-chat-accent);
}

/* Typing indicator */
.ecareChatTyping .ecareChatBubble {
  display:			inline-flex;
  gap:				4px;
  padding:			11px 14px;
}

.ecareChatTyping .ecareChatBubble span {
  width:			6px;
  height:			6px;
  background-color:	#94a3b8;
  border-radius:	50%;
  animation:		ecareChatDot 1.2s infinite ease-in-out;
}

.ecareChatTyping .ecareChatBubble span:nth-child(2) { animation-delay: 0.2s; }
.ecareChatTyping .ecareChatBubble span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ecareChatDot {
  0%, 80%, 100%	{ opacity: 0.3; transform: translateY(0); }
  40%			{ opacity: 1;   transform: translateY(-3px); }
}

/* Input */
.ecareChatForm {
  display:			flex;
  align-items:		flex-end;
  gap:				8px;
  margin:			0;
  padding:			10px;
  background-color:	var(--ecare-chat-bg);
  border-top:		1px solid var(--ecare-chat-border);
}

.ecareChatForm textarea {
  flex:				1;
  min-height:		38px;
  max-height:		110px;
  padding:			8px 12px;
  font-size:		14px;
  line-height:		1.4;
  resize:			none;
  border:			1px solid var(--ecare-chat-border) !important;
  border-radius:	12px;
}

.ecareChatForm textarea:focus {
  outline:			none;
  border-color:		var(--ecare-chat-accent) !important;
}

.ecareChatSend {
  display:			inline-flex;
  align-items:		center;
  justify-content:	center;
  flex:				0 0 38px;
  width:			38px;
  height:			38px;
  padding:			0;
  font-size:		16px;
  color:			var(--ecare-chat-accent-text);
  background-color:	var(--ecare-chat-accent);
  border:			none;
  border-radius:	50%;
  cursor:			pointer;
}

.ecareChatSend:disabled {
  opacity:			0.5;
  cursor:			default;
}

/* Phones: a full-width panel above the icon. */
@media only screen and (max-width: 480px) {
  .ecareChat {
    right:			12px;
    bottom:			12px;
  }

  /* Top and bottom anchored: below the 60px fixed header
     (.header) and above the icon.  Not sized from 100vh,
     which on phones includes the area behind the browser bars
     and pushed the panel up under the header. */
  .ecareChatPanel {
    position:		fixed;
    top:			calc(68px + env(safe-area-inset-top, 0px));
    left:			8px;
    right:			8px;
    bottom:			80px;
    width:			auto;
    height:			auto;
    max-height:		none;
  }

  /* Kept at 16px: iOS zooms the page on focus when a field's font is smaller. */
  .ecareChatForm textarea {
    font-size:		16px;
  }
}

/* Cookie notice, shown at the bottom of every page until
   accepted.  Above the chat icon (1040), below modals (1055)
   and the login page install banner (1060). */
.mbsCookieConsent {
  position:			fixed;
  left:				12px;
  right:			12px;
  bottom:			calc(12px + env(safe-area-inset-bottom, 0px));
  z-index:			1045;
  max-width:		960px;
  margin:			0 auto;
  padding:			12px 16px;
  background:		#ffffff;
  color:			#212529;
  border:			1px solid #dee2e6;
  border-radius:	8px;
  font-size:		14px;
  white-space:		normal;
}