/*  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;
}

/* -------------------------------------------------------------
   Appointment scheduling calendar and time selection
   (b_ecar_tech_calendar.php, b_ecar_install_available_times.php)
   ------------------------------------------------------------- */
.installCalendar, .installTimeArea {
  --install-accent:		var(--mbs-table-accent, #0066FF);
  --install-accent-soft:	var(--mbs-table-row-hover-bg, #e8f0ff);
  --install-text:		var(--mbs-table-text, #151C54);
  --install-muted:		#94a3b8;
  --install-border:		#E9EEF5;
  border:			1px solid var(--install-border);
  border-radius:	16px;
  padding:			16px;
  background-color:	#FFFFFF;
  box-shadow:		0 2px 10px rgba(21, 28, 84, 0.06);
  color:			var(--install-text);
}

.installCalendar {
  margin-bottom:	12px;
}

/* Appointment summary beside the calendar; both cards the same height. */
.installCalLayout {
  margin-bottom:	12px;
}

.installCalLayout .installCalendar {
  height:			100%;
  margin-bottom:	0px;
}

.installApptSummary .installCalendarMonth {
  justify-content:	flex-start;
  min-height:		38px;
}

.installCalendarMonth {
  display:			flex;
  flex-wrap:		nowrap;
  align-items:		center;
  justify-content:	center;
  gap:				8px;
  font-size:		16px;
  font-weight:		bold;
  text-align:		center;
  padding:			0px 0px 12px 0px;
  margin-bottom:	8px;
  border-bottom:	1px solid var(--install-border);
}

.installCalMonthLabel {
  flex:				1 1 auto;
  text-align:		center;
}

.installCalMonthNav {
  display:			inline-flex;
  flex:				0 0 auto;
  align-items:		center;
  justify-content:	center;
  width:			38px;
  height:			38px;
  padding:			0px;
  border-radius:	50%;
  border:			1px solid var(--install-border);
  color:			var(--install-accent);
  font-size:		18px;
  text-decoration:	none;
  transition:		background-color 0.15s, border-color 0.15s;
}

a.installCalMonthNav:hover, a.installCalMonthNav:focus-visible {
  background-color:	var(--install-accent-soft);
  border-color:		var(--install-accent);
  color:			var(--install-accent);
}

.installCalMonthNavOff {
  color:			#CBD5E1;
  cursor:			default;
}

.installCalGrid {
  display:			grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:				6px;
}

.installCalHead {
  padding:			4px 0px;
  text-align:		center;
  font-size:		11.7px;
  font-weight:		600;
  text-transform:	uppercase;
  letter-spacing:	0.04em;
  color:			#64748b;
}

.installCalDay, .installCalDayAvail, .installCalDaySelected, .installCalBlank {
  position:			relative;
  display:			flex;
  align-items:		center;
  justify-content:	center;
  aspect-ratio:		1 / 1;
  width:			100%;
  max-width:		52px;
  margin:			0px auto;
  padding:			0px;
  border-radius:	50%;
  border:			1px solid transparent;
  font-size:		14.4px;
  font-weight:		600;
  text-align:		center;
}

.installCalDay {
  color:			var(--install-muted);
  font-weight:		normal;
}

.installCalDayAvail {
  background-color:	var(--install-accent-soft);
  color:			var(--install-accent);
  cursor:			pointer;
  transition:		background-color 0.15s, border-color 0.15s, transform 0.1s;
}

.installCalDayAvail:hover, .installCalDayAvail:focus-visible {
  border-color:		var(--install-accent);
  outline:			none;
}

.installCalDaySelected {
  background-color:	var(--install-accent);
  border-color:		var(--install-accent);
  color:			#FFFFFF;
  cursor:			pointer;
  box-shadow:		0 0 0 3px rgba(0, 102, 255, 0.18);
}

.installCalDaySelected:focus-visible {
  outline:			none;
}

/* Small marker under today's date, whatever its state. */
.installCalGrid [data-today]::after {
  content:			'';
  position:			absolute;
  bottom:			12%;
  left:				50%;
  width:			5px;
  height:			5px;
  margin-left:		-2.5px;
  border-radius:	50%;
  background-color:	currentColor;
}

.installCalLegend {
  display:			flex;
  flex-wrap:		wrap;
  justify-content:	center;
  gap:				6px 16px;
  margin-top:		12px;
  padding-top:		10px;
  border-top:		1px solid var(--install-border);
  font-size:		11.7px;
  color:			#64748b;
}

.installCalLegend > span {
  display:			inline-flex;
  align-items:		center;
  gap:				6px;
}

.installCalLegendDot {
  display:			inline-block;
  width:			12px;
  height:			12px;
  border-radius:	50%;
}

.installCalLegendAvail {
  background-color:	var(--install-accent-soft);
  border:			1px solid var(--install-accent);
}

.installCalLegendSelected {
  background-color:	var(--install-accent);
}

.installCalLegendToday {
  width:			5px;
  height:			5px;
  background-color:	#64748b;
}

.installTimeArea {
  margin-top:		0px;
  text-align:		left;
  white-space:		normal;
}

.installTimePlaceholder {
  display:			flex;
  align-items:		center;
  justify-content:	center;
  gap:				10px;
  text-align:		center;
  color:			#64748b;
  border-style:		dashed;
  box-shadow:		none;
}

.installTimePlaceholder .bi {
  font-size:		20px;
  color:			var(--install-accent);
}

.installTimeInstructions {
  text-align:		center;
  padding:			0px 0px 12px 0px;
  margin-bottom:	4px;
  border-bottom:	1px solid var(--install-border);
  white-space:		normal;
}

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

.installTimeHint {
  font-size:		12.6px;
  color:			#64748b;
}

.installTimeGroupLabel {
  display:			flex;
  align-items:		center;
  gap:				6px;
  margin:			12px 0px 8px 0px;
  font-size:		12.6px;
  font-weight:		600;
  text-transform:	uppercase;
  letter-spacing:	0.04em;
  color:			#64748b;
}

.installTimeGrid {
  display:			grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap:				8px;
}

a.installTimeLink, a.installTimeLink:hover, a.installTimeLink:visited {
  display:			block;
  text-decoration:	none;
  border-radius:	10px;
}

a.installTimeLink:focus-visible {
  outline:			2px solid var(--install-accent);
  outline-offset:	2px;
}

.installTime, .installTimeSelected {
  display:			block;
  width:			100%;
  margin:			0px;
  padding:			10px 6px;
  border:			1px solid var(--install-accent);
  border-radius:	10px;
  text-align:		center;
  font-weight:		600;
  font-size:		14.4px;
  white-space:		nowrap;
  transition:		background-color 0.15s, color 0.15s;
}

.installTime {
  background-color:	#FFFFFF;
  color:			var(--install-accent);
}

a.installTimeLink:hover .installTime {
  background-color:	var(--install-accent-soft);
}

.installTimeSelected {
  background-color:	var(--install-accent);
  color:			#FFFFFF;
  box-shadow:		0 0 0 3px rgba(0, 102, 255, 0.18);
}

.installTimeEmpty {
  padding:			16px 0px 4px 0px;
  text-align:		center;
  color:			#64748b;
}

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

    .installCalendar, .installTimeArea {
        padding: 12px 10px;
    }

    .installCalGrid {
        gap: 4px;
    }

    .installCalHead {
        font-size: 10.8px;
        letter-spacing: 0;
    }

    .installCalDay, .installCalDayAvail, .installCalDaySelected, .installCalBlank {
        font-size: 14.4px;
    }

    .installTimeGrid {
        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    }

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