/* Bootstrap/Datatables/Template overrides */
.g-1, .gx-1 {
	--bs-gutter-x: 0.176rem
}

.g-1, .gy-1 {
	--bs-gutter-y: 0.176rem
}

.g-2, .gx-2 {
	--bs-gutter-x: 0.36rem
}

.g-2, .gy-2 {
	--bs-gutter-y: 0.36rem
}

.g-3, .gx-3 {
	--bs-gutter-x: 0.72rem
}

.g-3, .gy-3 {
	--bs-gutter-y: 0.72rem
}

.g-4, .gx-4 {
	--bs-gutter-x: 1.08rem
}

.g-4, .gy-4 {
	--bs-gutter-y: 1.08rem
}

.g-5, .gx-5 {
	--bs-gutter-x: 2.16rem
}

.g-5, .gy-5 {
	--bs-gutter-y: 2.16rem
}

.mt-1 {
	margin-top: 0.18rem !important
}

.mt-2 {
	margin-top: 0.36rem !important
}

.mt-3 {
	margin-top: 0.72rem !important
}

.mt-4 {
	margin-top: 1.08rem !important
}

.mt-5 {
	margin-top: 2.16rem !important
}

.me-1 {
	margin-right: 0.18rem !important
}

.me-2 {
	margin-right: 0.36rem !important
}

.me-3 {
	margin-right: 0.72rem !important
}

.me-4 {
	margin-right: 1.08rem !important
}

.me-5 {
	margin-right: 2.16rem !important
}

.mb-1 {
	margin-bottom: 0.18rem !important
}

.mb-2 {
	margin-bottom: 0.36rem !important
}

.mb-3 {
	margin-bottom: 0.72rem !important
}

.mb-4 {
	margin-bottom: 1.08rem !important
}

.mb-5 {
	margin-bottom: 2.16rem !important
}

.ms-1 {
	margin-left: 0.18rem !important
}

.ms-2 {
	margin-left: 0.36rem !important
}

.ms-3 {
	margin-left: 0.72rem !important
}

.ms-4 {
	margin-left: 1.08rem !important
}

.ms-5 {
	margin-left: 2.16rem !important
}

.p-1 {
	padding: 0.18rem !important
}

.p-2 {
	padding: 0.36rem !important
}

.p-3 {
	padding: 0.72rem !important
}

.p-4 {
	padding: 1.08rem !important
}

.p-5 {
	padding: 2.16rem !important
}

.px-1 {
	padding-right: 0.18rem !important;
	padding-left: 0.18rem !important
}

.px-2 {
	padding-right: 0.36rem !important;
	padding-left: 0.36rem !important
}

.px-3 {
	padding-right: 0.72rem !important;
	padding-left: 0.72rem !important
}

.px-4 {
	padding-right: 1.08rem !important;
	padding-left: 1.08rem !important
}

.px-5 {
	padding-right: 2.16rem !important;
	padding-left: 2.16rem !important
}

.py-1 {
	padding-top: 0.18rem !important;
	padding-bottom: 0.18rem !important
}

.py-2 {
	padding-top: 0.36rem !important;
	padding-bottom: 0.36rem !important
}

.py-3 {
	padding-top: 0.72rem !important;
	padding-bottom: 0.72rem !important
}

.py-4 {
	padding-top: 1.08rem !important;
	padding-bottom: 1.08rem !important
}

.py-5 {
	padding-top: 2.16rem !important;
	padding-bottom: 2.16rem !important
}

.pt-1 {
	padding-top: 0.18rem !important
}

.pt-2 {
	padding-top: 0.36rem !important
}

.pt-3 {
	padding-top: 0.72rem !important
}

.pt-4 {
	padding-top: 1.08rem !important
}

.pt-5 {
	padding-top: 2.16rem !important
}

.pe-1 {
	padding-right: 0.18rem !important
}

.pe-2 {
	padding-right: 0.36rem !important
}

.pe-3 {
	padding-right: 0.72rem !important
}

.pe-4 {
	padding-right: 1.08rem !important
}

.pe-5 {
	padding-right: 2.16rem !important
}

.pb-1 {
	padding-bottom: 0.18rem !important
}

.pb-2 {
	padding-bottom: 0.36rem !important
}

.pb-3 {
	padding-bottom: 0.72rem !important
}

.pb-4 {
	padding-bottom: 1.08rem !important
}

.pb-5 {
	padding-bottom: 2.16rem !important
}

.ps-1 {
	padding-left: 0.18rem !important
}

.ps-2 {
	padding-left: 0.36rem !important
}

.ps-3 {
	padding-left: 0.72rem !important
}

.ps-4 {
	padding-left: 1.08rem !important
}

.ps-5 {
	padding-left: 2.16rem !important
}

.fs-1 {
	font-size: calc(0.9896rem + 1.5vw) !important
}

.fs-2 {
	font-size: calc(0.9536rem + .9vw) !important
}

.fs-3 {
	font-size: calc(0.936rem + .6vw) !important
}

.fs-4 {
	font-size: calc(0.9176rem + .3vw) !important
}

.fs-5 {
	font-size: 0.9rem !important
}

.fs-6 {
	font-size: 0.72rem !important
}

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

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

/* Application settings */
body {
  font-family: 		Tahoma,Arial,Verdana;
  font-size: 		0.6rem;
  background-color:	#e5ebf8;
}

tr {
  cursor:			pointer;
}

ul {
  margin-bottom:	10px;
}

a {
  color:			#001538;	
}

a:hover {
  color:			#001538;	
}

h1, h2, h3, h4, h5, h6{
  font-family: 		Tahoma,Arial,Verdana;
}

.logo span {
  font-size:		1.152rem;
  color:			#ffffff;
}

/* -----------------------------------------------------------
   Sidebar menu (f_infr_html_menu(), built for back office by
   m_infr_sidebar_menu.php).

   Colors and sizes are CSS variables; each theme (mbs-*2.css)
   sets its own values.  They are declared on :root so the
   page content offset (#main) can follow the menu width.

   E-Care also loads this file, ahead of ecare3.css.  Rules
   that also match the E-Care menu use the same selectors as
   ecare3.css, so its rules take precedence there.
   ----------------------------------------------------------- */
:root {
  --mbs-menu-width:				220px;
  --mbs-menu-bg:				#00509c;
  --mbs-menu-text:				rgba(255, 255, 255, 0.92);
  --mbs-menu-muted:				rgba(255, 255, 255, 0.62);
  --mbs-menu-hover-bg:			rgba(255, 255, 255, 0.12);
  --mbs-menu-open-bg:			rgba(255, 255, 255, 0.08);
  --mbs-menu-active-bg:			#ffffff;
  --mbs-menu-active-text:		#00509c;
  --mbs-menu-guide:				rgba(255, 255, 255, 0.22);
  --mbs-menu-font-size:			13px;
  --mbs-menu-sub-font-size:		12.5px;
  --mbs-menu-icon-size:			16px;
}

.sidebar {
  width:			var(--mbs-menu-width);
  padding:			10px 8px;
  top:				44px;
  background-color:	var(--mbs-menu-bg);
  color:			var(--mbs-menu-text);
  border-right:		1px solid rgba(0, 0, 0, 0.08);
  box-shadow:		none;
  overflow-x:		hidden;
}

.sidebar-nav .nav-item {
  margin-bottom:	2px;
}

/* 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;
  box-shadow:		none;
}

/* Top-level links and group headers */
.sidebar-nav .nav-link,
.sidebar-nav .nav-link.collapsed {
  display:			flex;
  align-items:		center;
  gap:				10px;
  font-size:		var(--mbs-menu-font-size);
  font-weight:		600;
  color:			var(--mbs-menu-text);
  background:		transparent;
  padding:			8px 10px;
  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(--mbs-menu-icon-size);
  margin-right:		0;
  color:			var(--mbs-menu-muted);
  transition:		color 0.15s ease;
}

.sidebar-nav .nav-link .menu-icon {
  display:			inline-flex;
}

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

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

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

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

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

/* Group items */
.sidebar-nav .nav-content {
  margin:			2px 0 6px 18px;
  padding:			0 0 0 8px;
  border-left:		2px solid var(--mbs-menu-guide);
}

.sidebar-nav .nav-content a,
.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
  font-size:		var(--mbs-menu-sub-font-size);
  font-weight:		normal;
  color:			var(--mbs-menu-text);
  padding:			6px 8px;
  margin:			1px 0;
  border-radius:	6px;
  transition:		background-color 0.15s ease, color 0.15s ease;
}

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

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

/* Selected page (set by selectMBSMenu()) */
.sidebar-nav .nav-content a.active,
.sidebar-nav .nav-content a.active:hover {
  color:			var(--mbs-menu-active-text);
  font-weight:		600;
  background:		var(--mbs-menu-active-bg);
}

/* "Open in a new window" icons (back office only), always
   shown in a muted color so they don't compete with the
   labels; brighter on hover. */
.sidebar-nav .nav-content li > a.pe-2,
.sidebar-nav li.nav-link > a:not(.nav-link) {
  flex:				0 0 auto;
  width:			auto;
  margin-left:		2px;
  padding:			6px !important;
  color:			var(--mbs-menu-muted);
  background:		transparent;
  opacity:			0.6;
  transition:		opacity 0.15s ease, color 0.15s ease;
}

.sidebar-nav .nav-content li:hover > a.pe-2,
.sidebar-nav li.nav-link:hover > a:not(.nav-link) {
  opacity:			1;
}

.sidebar-nav .nav-content li > a.pe-2:hover,
.sidebar-nav li.nav-link > a:not(.nav-link):hover {
  color:			var(--mbs-menu-text);
  background:		var(--mbs-menu-hover-bg);
}

.sidebar-nav .nav-content li > a.pe-2 i,
.sidebar-nav li.nav-link > a:not(.nav-link) i {
  display:			inline;
  font-size:		10px;
}

.sidebar-cc {
  width:			273px;
  background-color:	#FFFFFF;
}

.nav-pills .nav-link {
  color:			#00509c;
}

.nav-pills .nav-link.active, .nav-pills .nav-link:hover {
  background-color: #00509c;
  color:			#ffffff;
}

#main, #footer {
  margin-left:		var(--mbs-menu-width);
}

#main {
  padding:			10px;
  margin-top:		44px;
  transition:       all 0.5s;
}

#full-container {
  z-index:          2;
  margin-right:		0px;
}

body.aiagent-active #main {
  margin-right:		400px;
}

body.aiagent-active .header {
  right:		    400px;
}

body.aiagent-active .aiagent{
  right:            0px;
}

.aiagent {
  transition:       all 0.5s;
  position:         fixed;
  top:              0px;
  right:            -400px;
  height:           100vh;
  padding:          0px;
  width:            400px;
  background:       url(../pics/eevee.jpg) center/cover;
}

/* Stand-alone Nova window (m_infr_ai_agent.php) fills the window instead of sliding in. */
.aiagent.aiagent-window {
  position:         static;
  right:            auto;
  width:            100%;
}

.main-cc {
  margin-left:		273px;
  padding:			5px 0px 0px 0px !important;
  margin-top:		44px !important;
  transition:       all 0.3s;
}

@media (max-width: 1199px) {

    .main-cc,
    .footer-cc {
        margin-left: 0px;
    }

    body.aiagent-active #main {
      margin-right:		0px;
    }

    body.aiagent-active .header {
      right:		    0px;
    }

    body.aiagent-active .aiagent{
      right:            0px;
      z-index:          1000;
    }
}

@media (max-width: 400px) {
    .aiagent {
      width:            100vw;
    }
}

@media (min-width: 1200px) {
    .main-cc,
    .footer-cc {
        margin-left: 273px;
    }
}

@media (min-width: 1200px) {

    .toggle-sidebar .main-cc,
    .toggle-sidebar .footer-cc {
        margin-left: 0;
    }
}

.footer-cc {
  margin-left:		273px;
}

.mbsExpandArea {
  width: 			98vw;
  height: 			98vh;
  min-height: 		98vh;
  z-index:			1000;
  position:			fixed;
  top:				50%;
  left:				50%;
  transform:		translate(-50%, -50%);
  box-shadow:		0 4px 21px 0 rgba(82, 63, 105, 0.2);
}

.mbsMain {
  padding:			7px;
}

/* -----------------------------------------------------------
   Login page (m_infr_login.php).
   ----------------------------------------------------------- */
body:has(.mbsLogin) {
  background:		radial-gradient(circle at 20% 0%, rgba(13, 110, 253, 0.10), transparent 55%),
					radial-gradient(circle at 100% 100%, rgba(0, 46, 107, 0.12), transparent 50%),
					#f4f6fb;
}

.mbsLogin {
  --mbs-login-accent:	var(--mbs-header-bg);
  display:			flex;
  flex-direction:	column;
  align-items:		center;
  justify-content:	center;
  min-height:		calc(100vh - 14px);
  padding:			24px 12px;
}

@keyframes mbsLoginEnter {
  from {
    opacity:		0;
    transform:		translateY(12px);
  }
  to {
    opacity:		1;
    transform:		none;
  }
}

.mbsLoginCard {
  width:			100%;
  max-width:		400px;
  margin:			0;
  border:			none;
  border-top:		4px solid var(--mbs-login-accent);
  border-radius:	14px;
  box-shadow:		0 18px 48px rgba(15, 23, 42, 0.14);
  overflow:			hidden;
  animation:		mbsLoginEnter 250ms ease-out;
}

.mbsLoginCardTest {
  border-top-color:	#f59f00;
}

.mbsLoginCard .card-body {
  padding:			32px 32px 24px 32px;
}

.mbsLoginEnvBadge {
  display:			table;
  margin:			0 auto 14px auto;
  padding:			5px 10px;
  font-size:		11px;
  font-weight:		600;
  letter-spacing:	0.06em;
  text-transform:	uppercase;
  color:			#8a5300;
  background-color:	#fff3d6;
  border:			1px solid #ffe08a;
  border-radius:	999px;
}

.mbsLoginLogo {
  max-width:		180px;
  max-height:		64px;
  margin-bottom:	14px;
}

.mbsLoginTitle {
  margin:			0;
  font-size:		22px;
  font-weight:		600;
  color:			#001538;
}

.mbsLoginCompany {
  margin-top:		4px;
  font-size:		13px;
  color:			#6c757d;
}

.mbsLoginAlert {
  margin:			20px 0 0 0;
  padding:			10px 12px;
  font-size:		13px;
}

.mbsLoginField {
  margin-top:		18px;
}

.mbsLoginField .form-label {
  margin-bottom:	6px;
  font-size:		13px;
  font-weight:		600;
  color:			#334155;
}

.mbsLoginField .input-group {
  border-radius:	var(--bs-border-radius);
  transition:		box-shadow 0.15s ease-in-out;
}

.mbsLoginField .form-control,
.mbsLoginField .input-group-text,
.mbsLoginField .input-group .mbsLoginEye {
  height:			42px;
  font-size:		14px;
  transition:		border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.mbsLoginField .input-group-text,
.mbsLoginField .input-group .mbsLoginEye {
  color:			#6c757d;
  background-color:	#f8f9fa;
  border:			var(--bs-border-width) solid var(--bs-border-color);
}

.mbsLoginField .form-control:focus,
.mbsLoginField .input-group .mbsLoginEye:focus {
  box-shadow:		none;
}

.mbsLoginField .input-group:focus-within {
  box-shadow:		0 0 0 3px rgba(13, 110, 253, 0.15);
}

.mbsLoginField .input-group:focus-within .form-control,
.mbsLoginField .input-group:focus-within .input-group-text,
.mbsLoginField .input-group:focus-within .mbsLoginEye {
  border-color:		var(--mbs-login-accent);
}

.mbsLoginField .input-group:focus-within .input-group-text {
  color:			var(--mbs-login-accent);
}

.mbsLoginField .input-group .mbsLoginEye {
  padding:			0 12px;
}

.mbsLoginField .input-group .mbsLoginEye:hover,
.mbsLoginField .input-group .mbsLoginEye:focus-visible {
  color:			#334155;
  background-color:	#eef1f5;
  border-color:		var(--bs-border-color) !important;
}

.mbsLoginField .input-group:focus-within .mbsLoginEye:hover,
.mbsLoginField .input-group:focus-within .mbsLoginEye:focus-visible {
  border-color:		var(--mbs-login-accent) !important;
}

.mbsLoginSubmit {
  height:			44px;
  margin-top:		24px;
  font-size:		15px;
  font-weight:		600;
  background-color:	var(--mbs-login-accent);
  border-color:		var(--mbs-login-accent);
  border-radius:	8px;
}

.mbsLoginSubmit:hover,
.mbsLoginSubmit:focus {
  filter:			brightness(1.15);
  background-color:	var(--mbs-login-accent);
  border-color:		var(--mbs-login-accent);
}

.mbsLoginLinks {
  display:			flex;
  justify-content:	space-between;
  gap:				12px;
  margin-top:		16px;
  font-size:		13px;
}

.mbsLoginLinks a {
  color:			var(--mbs-login-accent);
  text-decoration:	none;
}

.mbsLoginLinks a:hover,
.mbsLoginLinks a:focus-visible {
  text-decoration:	underline;
}

.mbsLoginLinks a i {
  margin-right:		5px;
}

.mbsLoginLinks a:only-child {
  margin:			0 auto;
}

.mbsLoginInfo {
  display:			flex;
  flex-wrap:		wrap;
  justify-content:	center;
  gap:				6px 16px;
  padding:			12px 16px;
  font-size:		11.5px;
  color:			#6c757d;
  background-color:	#f8f9fa;
  border-top:		1px solid #edf0f4;
}

.mbsLoginInfo i {
  margin-right:		5px;
}

.mbsLoginCopyright {
  margin-top:		18px;
  font-size:		11.5px;
  color:			#8a94a6;
  text-align:		center;
}

@media (max-width: 480px) {

    .mbsLogin {
      padding:			16px 8px;
    }

    .mbsLoginCard {
      box-shadow:		0 8px 24px rgba(15, 23, 42, 0.12);
    }

    .mbsLoginCard .card-body {
      padding:			24px 20px 20px 20px;
    }

    .mbsLoginInfo {
      flex-direction:	column;
      align-items:		center;
    }
}

@media (prefers-reduced-motion: reduce) {

    .mbsLoginCard {
      animation:		none;
    }
}

.mbsLayer {
  min-width:		98%;
}

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

.modal-title {
  font-size:		14px;
}

.hovertextarea {
  overflow:			visible;
  position:			fixed;
  width:			auto;
  text-align:		left;
  border-style:		solid;
  border-width:		0px;
  white-space:		normal;
  z-index:			1001;
  padding:			9px;
  background-color: #FFFFFF;
  display:			none;
  border-color:		#000000;
  max-width:		300px;
}

.pagetitle h1 {
  font-size:		0.864rem;
}

.form-control {
  font-size:		0.6rem;
  padding:			0px 0.4rem;
  min-height:		20px;
}

.form-select {
  background-position:	right .1rem center;
  padding:				0px 1.4rem 0px 0.4rem;
}

/* -----------------------------------------------------------
   Fields (f_infr_html_bs.php): text, select, textarea, check
   boxes and the add-on buttons attached to them.  Sizes and the
   per-theme background colors are unchanged; this only adds
   shape and state feedback.  The accent color follows the
   theme's data table accent.
   ----------------------------------------------------------- */
.form-control,
.form-select {
  border-color:		rgba(100, 116, 139, 0.45);
  border-radius:	6px;
  transition:		border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:hover,
.form-select:hover {
  border-color:		rgba(100, 116, 139, 0.8);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color:		var(--mbs-table-accent);
  box-shadow:		0 0 0 3px color-mix(in srgb, var(--mbs-table-accent) 25%, transparent);
  outline:			none;
}

.form-control::placeholder {
  color:			rgba(100, 116, 139, 0.8);
  opacity:			1;
}

textarea.form-control {
  padding-top:		3px;
  padding-bottom:	3px;
  line-height:		1.4;
  resize:			vertical;
}

/* Read only and disabled fields are tinted (over the theme's own
   background) so they are recognizable in every theme. */
.form-control[readonly]:not(.form-select),
.form-control:disabled {
  background-image:	linear-gradient(rgba(100, 116, 139, 0.14), rgba(100, 116, 139, 0.14));
}

.form-control:disabled,
.form-select:disabled {
  cursor:			not-allowed;
  opacity:			0.7;
}

.form-select {
  cursor:			pointer;
}

.form-check-input,
.form-check-label {
  cursor:			pointer;
}

.form-check-input {
  transition:		background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-check-input:disabled,
.form-check-input:disabled ~ .form-check-label {
  cursor:			not-allowed;
}

.input-group-text {
  color:			var(--mbs-table-muted);
  background-color:	var(--mbs-table-row-bg);
  border-color:		rgba(100, 116, 139, 0.45);
  border-radius:	6px;
}

.form-check-input {
  font-size:		1rem;
  padding:			0px 0.32rem;
  border-color:		#B1B4B7;
  margin-top:       .18em;
}

.btn {
  --bs-btn-border-radius:	6px;
  display:			inline-flex;
  align-items:		center;
  justify-content:	center;
  gap:				4px;
  font-size:		0.6rem;
  font-weight:		500;
  min-height:       24px;
  padding:          0px 5px 1px 4px;
  background-color:	#00509c;
  border-color:		#00509c !important;
  color:			#ffffff;
  box-shadow:		0 1px 2px rgba(15, 23, 42, 0.14);
  transition:		background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.btn:hover {
  box-shadow:		0 2px 6px rgba(15, 23, 42, 0.2);
}

.btn:active {
  transform:		translateY(1px);
  box-shadow:		none;
}

.btn:focus-visible {
  outline:			none;
  box-shadow:		0 0 0 3px color-mix(in srgb, var(--mbs-table-accent) 35%, transparent);
}

/* Buttons attached to fields stay flat. */
.input-group .btn,
.input-group .btn:hover,
.input-group-text .btn,
.input-group-text .btn:hover {
  box-shadow:		none;
}

.input-group-text .btn {
  height:           auto;
  padding:          2px 0.32rem;
  min-height:       0px;
}

.btn:hover {
  background-color: var(--bs-btn-hover-bg);
  border-color:		#00509c !important;
}

.btn:disabled, .btn.disabled{
  background-color:	#CCCCCC;
  color:			#5f6368;
  box-shadow:		none;
  cursor:			not-allowed;
}

.btn-light {
  background-color: #FFFFFF;
  color:			#00509c;
  border-color:		#00509c !important
}

.input-group .btn {
  background-color:	#FFFFFF;
  color:			#000000;	
}

/* -----------------------------------------------------------
   Header bar.

   Colors are CSS variables; each theme (mbs-*2.css) sets its
   own values.  The defaults are E-Care's header colors (E-Care
   loads this file but not the themes).  The base rules below
   style every page's header; the .mbsHeader rules refine the
   main application header (f_infr_html_non_ecare_bs.php) and
   the E-Care header (f_infr_html_ecare_bs.php, sized further by
   the .mbsEcareHeader rules in ecare3.css).
   ----------------------------------------------------------- */
:root {
  --mbs-header-bg:				#002E6B;
  --mbs-header-text:			#ffffff;
  --mbs-header-hover-bg:		rgba(255, 255, 255, 0.14);
  --mbs-header-field-bg:		rgba(255, 255, 255, 0.12);
  --mbs-header-field-border:	rgba(255, 255, 255, 0.24);
  --mbs-header-field-text:		#ffffff;
  --mbs-header-field-placeholder:	rgba(255, 255, 255, 0.65);
  --mbs-header-field-arrow:		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --mbs-header-divider:			rgba(255, 255, 255, 0.2);
  --mbs-header-shadow:			0 1px 0 rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.12);
  --mbs-header-menu-text:		#001538;
}

.header {
  height:			44px;
  background-color:	var(--mbs-header-bg);
  color:			var(--mbs-header-text);
  right:			auto;
  position:         fixed;
  top:              0px;
  right:            0px;
  left:             0px;
}

.headerLink {
  color:			var(--mbs-header-text);
}

.header .search-form input {
  font-size:		0.6rem;
}

.header .toggle-sidebar-btn {
  padding-left:		0px;
  color:			var(--mbs-header-text);
}

.header-nav .nav-icon {
  color:			var(--mbs-header-text);
}

.header-nav .nav-profile {
  color:			var(--mbs-header-text);
}

.header-nav .profile {
  top:				0px !important;
  padding-top:		0px;
}

.mbsTitle {
  color:			var(--mbs-header-text);
}

/* Main application header. */
.mbsHeader {
  padding:			0 12px 0 8px;
  gap:				4px;
  box-shadow:		var(--mbs-header-shadow);
}

/* Menu toggle and current page */
.mbsHeader .toggle-sidebar-btn {
  display:			inline-flex;
  align-items:		center;
  justify-content:	center;
  width:			34px;
  height:			34px;
  font-size:		22px;
  border-radius:	8px;
  transition:		background-color 0.15s ease;
}

.mbsHeader .toggle-sidebar-btn:hover {
  background-color:	var(--mbs-header-hover-bg);
}

.mbsHeader .mbsPageIcon {
  display:			inline-flex;
  align-items:		center;
  justify-content:	center;
  width:			28px;
  height:			28px;
  margin:			0 8px 0 6px;
  font-size:		15px;
  border-radius:	7px;
  background-color:	var(--mbs-header-hover-bg);
}

.mbsHeader .mbsPageIcon:empty {
  display:			none;
}

.mbsHeader .mbsPageTitle {
  font-size:		14px;
  font-weight:		600;
  white-space:		nowrap;
  overflow:			hidden;
  text-overflow:	ellipsis;
  max-width:		260px;
}

.mbsHeader .mbsPageIcon:empty + .mbsPageTitle {
  margin-left:		8px;
}

/* Company logo, company selection and quick search */
.mbsHeader .search-bar {
  padding:			0 10px;
}

.mbsHeader .search-bar .row {
  align-items:		center;
  flex-wrap:		nowrap;
}

.mbsHeader .mbsHeaderLogo {
  max-height:		30px;
  max-width:		140px;
  padding-right:	12px;
  border-right:		1px solid var(--mbs-header-divider);
}

.mbsHeader .search-form select.mbsCompany,
.mbsHeader .search-form .mbsHeaderSearch input {
  height:			30px;
  font-size:		12px;
  color:			var(--mbs-header-field-text);
  background-color:	var(--mbs-header-field-bg);
  border:			1px solid var(--mbs-header-field-border);
  border-radius:	999px;
  transition:		background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mbsHeader .search-form select.mbsCompany {
  padding:			0 28px 0 12px;
  background-image:	var(--mbs-header-field-arrow);
  background-repeat:	no-repeat;
  background-position:	right 10px center;
  background-size:	10px 10px;
  appearance:		none;
}

.mbsHeader .search-form select.mbsCompany option {
  color:			#001538;
  background-color:	#ffffff;
}

.mbsHeaderSearch {
  position:			relative;
  min-width:		180px;
}

.mbsHeaderSearch > .bi-search {
  position:			absolute;
  left:				11px;
  top:				50%;
  transform:		translateY(-50%);
  font-size:		12px;
  color:			var(--mbs-header-field-placeholder);
  pointer-events:	none;
}

.mbsHeader .search-form .mbsHeaderSearch input {
  width:			100%;
  padding:			0 12px 0 30px;
}

.mbsHeader .search-form .mbsHeaderSearch input::placeholder {
  color:			var(--mbs-header-field-placeholder);
}

.mbsHeader .search-form select.mbsCompany:hover,
.mbsHeader .search-form .mbsHeaderSearch input:hover,
.mbsHeader .search-form select.mbsCompany:focus,
.mbsHeader .search-form .mbsHeaderSearch input:focus {
  outline:			none;
  border-color:		var(--mbs-header-text);
  box-shadow:		0 0 0 3px var(--mbs-header-hover-bg);
}

/* Action icons */
.mbsHeader .header-nav .nav-icon {
  display:			inline-flex;
  align-items:		center;
  justify-content:	center;
  width:			34px;
  height:			34px;
  margin:			0 1px;
  font-size:		18px;
  color:			var(--mbs-header-text);
  border-radius:	8px;
  transition:		background-color 0.15s ease;
}

.mbsHeader .header-nav .nav-icon:hover {
  background-color:	var(--mbs-header-hover-bg);
}

.mbsHeader .header-nav .nav-icon .bi-at {
  font-size:		22px;
}

.mbsHeader .header-nav .badge-number {
  inset:			1px -1px auto auto;
  min-width:		16px;
  padding:			2px 4px;
  font-size:		9.5px;
  line-height:		1.1;
  border-radius:	999px;
  box-shadow:		0 0 0 2px var(--mbs-header-bg);
}

/* User */
.mbsHeader .header-nav .nav-profile {
  margin-left:		6px;
  padding:			3px 8px 3px 3px !important;
  border-radius:	999px;
  transition:		background-color 0.15s ease;
}

.mbsHeader .header-nav .nav-profile:hover {
  background-color:	var(--mbs-header-hover-bg);
}

.mbsHeader .header-nav .nav-profile img,
.mbsHeader .header-nav .nav-profile .rounded-circle {
  width:			30px !important;
  height:			30px !important;
  font-size:		14px !important;
  box-shadow:		0 0 0 2px var(--mbs-header-divider);
}

.mbsHeader .header-nav .nav-profile span {
  font-size:		12px;
  font-weight:		600;
}

.mbsHeader .header-nav .profile {
  min-width:		210px;
  margin-top:		8px !important;
  padding:			6px;
  border:			none;
  border-radius:	10px;
  box-shadow:		0 12px 32px rgba(15, 23, 42, 0.18);
}

.mbsHeader .header-nav .profile .dropdown-header {
  padding:			6px 10px 8px 10px;
  color:			var(--mbs-header-menu-text);
}

.mbsHeader .header-nav .profile .dropdown-header .mbsHeaderUserName {
  display:			block;
  font-size:		13px;
  font-weight:		600;
}

.mbsHeader .header-nav .profile .dropdown-header .mbsHeaderUserId {
  font-size:		11px;
  opacity:			0.7;
}

.mbsHeader .header-nav .profile .dropdown-item {
  gap:				10px;
  padding:			7px 10px;
  font-size:		12.5px;
  border-radius:	6px;
}

.mbsHeader .header-nav .profile .dropdown-item i {
  font-size:		15px;
  opacity:			0.8;
}

.mbsHeader .header-nav .profile .dropdown-divider {
  margin:			4px 0;
}

/* Narrow screens: the search bar becomes a panel under the
   header, in the header's colors. */
@media (max-width: 990px) {
  .mbsHeader .search-bar {
    background-color:	var(--mbs-header-bg);
    box-shadow:		var(--mbs-header-shadow);
  }

  .mbsHeader .search-bar .row {
    flex-wrap:		wrap;
    row-gap:		8px;
  }

  .mbsHeader .mbsHeaderLogo {
    border-right:	none;
  }

  .mbsHeader .mbsPageTitle {
    max-width:		160px;
  }
}

.card-title {
  font-size:		0.648rem;
  padding:			7px 0px 7px 0px;
  margin-bottom:	0px;
}

.chart-title {
  font-size:		0.6rem;
}

.cardtitle span {
  font-size:		0.648rem;
}

.chart-title span {
  font-size:		0.504rem;
}

.card {
  margin-bottom:	7px;
  border:			1px solid rgba(100, 116, 139, 0.28);
  border-radius:	10px;
  box-shadow:		0 1px 3px rgba(15, 23, 42, 0.08);
}

/* The body (colored per theme) follows the card's corners. */
.card > .card-body {
  border-radius:	inherit;
}

.card > .card-header,
.card > .card-footer {
  border-color:		rgba(100, 116, 139, 0.18);
}

.card > .card-header:first-child {
  border-radius:	calc(10px - 1px) calc(10px - 1px) 0 0;
}

.card > .card-footer:last-child {
  border-radius:	0 0 calc(10px - 1px) calc(10px - 1px);
}

.card-body {
  padding:			0px 10px 7px 10px;
}

.sales-card .card-title span, .revenue-card .card-title span, .customers-card .card-title span {
  font-size:		0.504rem;
}

.dashboard .info-card h6 {
  font-size:		calc(0.4rem + 1.0vw);
}

.accordion-body {
  padding:			10px;
}

.accordion-item, .accordion-item:first-of-type, .accordion-item:first-of-type .accordion-button, .accordion-item:last-of-type, .accordion-item:last-of-type .accordion-button, .accordion-item:last-of-type .accordion-button.collapsed{
  border-radius:	7px;
}

.accordion-item {
  margin-bottom:	3px;	
}

.accordion-button {
  font-size:		0.6rem;
  padding:			0.504rem;
  background-color:	#FFFFFF;
  border-bottom:	0px solid #EEEEEE;
  border-radius:	7px;
  height:			27px;
}

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

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

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

.accordion-button i, .accordion-button svg {
  color:			#00509c;
  fill:				#00509c;
}

.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");
  background-size: 	7px 7px;
  background-position: center;
  fill:				#2278FD;
}

.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");
  background-size: 	7px 7px;
  background-position: center;
}

.accordion-button h5 {
  font-size:		0.6rem;
}

.accordion-button .dropdown-item {
  color:			#0d6efd !important;
  fill:				#0d6efd !important;
}

/* Accordion polish (f_infr_html_start_accordion_item and accordions built
   in page code).  Colors stay with the themes; this adds the card edge,
   hover and focus feedback, and squares the header against its open body. */
.accordion-item {
  border:			1px solid rgba(100, 116, 139, 0.28);
  box-shadow:		0 1px 3px rgba(15, 23, 42, 0.08);
}

.accordion-button {
  font-weight:		500;
  cursor:			pointer;
  transition:		background-color 0.15s ease, box-shadow 0.15s ease;
}

.accordion-button.collapsed:hover {
  background-image:	linear-gradient(rgba(100, 116, 139, 0.1), rgba(100, 116, 139, 0.1));
}

.accordion-button:not(.collapsed):hover {
  /* No filter here: it makes the button the containing block for the header context menus. */
  background-image:	linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
}

.accordion-button:focus {
  border-color:		transparent;
  outline:			none;
  box-shadow:		inset 0 0 0 2px color-mix(in srgb, var(--mbs-table-accent) 45%, transparent);
}

.accordion-button:not(.collapsed) {
  box-shadow:		none;
}

.accordion-button:not(.collapsed):focus {
  box-shadow:		inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.accordion-item > .accordion-header > .accordion-button:not(.collapsed) {
  border-bottom-left-radius:	0;
  border-bottom-right-radius:	0;
}

.accordion-item > .accordion-collapse > .accordion-body {
  border-bottom-left-radius:	6px;
  border-bottom-right-radius:	6px;
}

.mbsIconButton {
  color:			#0d6efd;
  fill:				#0d6efd;
  stroke:			#0d6efd;
  cursor: 			pointer;
}

/* Clear icon inside the end of the datatable header filter field. */
.mbsDataTableFilterClear {
  position:			absolute;
  top:				50%;
  right:			0.5rem;
  transform:		translateY(-50%);
  line-height:		1;
  opacity:			0.6;
}

/* Sits on the filter field, so ignore the accordion header icon colors (white when expanded). */
.accordion-button .mbsDataTableFilterWrap .mbsDataTableFilterClear {
  color:			var(--bs-secondary-color, #6c757d);
  fill:				var(--bs-secondary-color, #6c757d);
}

.mbsDataTableFilterClear:hover {
  opacity:			1;
}

.mbsDataTableFilter:placeholder-shown + .mbsDataTableFilterClear {
  display:			none;
}

/* Bold hyperlinked text in datatable cells so links stand out from plain data. */
table.dataTable tbody td a:not(.btn) {
  font-weight:		bold;
}

.mbs-datatable-pageinfo {
  font-weight:		400;
  font-size:		10.5px;
}

.modal-header {
  border-width:		0px;
}

.cmenuarea {
  position:			fixed;
  display:			none;
  z-index:			996;
  width:			auto;
  min-width:		170px;
  max-height:		70vh;
  overflow-y:		auto;
  overflow-x:		hidden;
  border-radius:	10px;
  box-shadow:		0 12px 32px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
}

/* -----------------------------------------------------------
   Context menus (f_infr_html_context_menu_button).  The menu
   background, text and border come from each theme's
   .dropdown-menu rules; the hover color is a variable that
   defaults to the data table hover color.
   ----------------------------------------------------------- */
:root {
  --mbs-cmenu-hover-bg:			var(--mbs-table-row-hover-bg);
  --mbs-cmenu-divider:			rgba(127, 127, 127, 0.28);
}

.mbsListMenu {
  display:			block;
  position:			relative;
  margin:			0;
  padding:			4px;
  border-radius:	10px;
}

.mbsListMenu .dropdown-item {
  padding:			6px 12px;
  border-radius:	6px;
  white-space:		nowrap;
  transition:		background-color 0.12s ease;
}

.mbsListMenu .dropdown-item:hover,
.mbsListMenu .dropdown-item:focus {
  background-color:	var(--mbs-cmenu-hover-bg);
}

.mbsListMenu .dropdown-divider {
  margin:			2px 8px;
  border-top-color:	var(--mbs-cmenu-divider);
  opacity:			1;
}

/* Items that open a sub menu get a chevron; sub menu items are indented. */
.mbsListMenu .mbsSubMenuParent::after {
  content:			"";
  width:			5px;
  height:			5px;
  margin-left:		auto;
  margin-right:		2px;
  border-right:		1.5px solid currentColor;
  border-bottom:	1.5px solid currentColor;
  transform:		rotate(-45deg);
  opacity:			0.7;
  transition:		transform 0.15s ease;
}

.mbsListMenu .mbsSubMenuParent:has(+ .dropdown-menu[style*="block"])::after {
  transform:		translateY(-1px) rotate(45deg);
}

.mbsListMenu .mbsListMenu {
  min-width:		0;
  padding:			0 0 0 12px;
  border-radius:	0;
}

.svgicon {
  width:			13px;
  height:			13px;
  color:			#4154f1;
  fill:				#4154f1;
}

.modal-content {
  background-color:	#f6f9ff;
  margin:			auto;
}

.subscriberSelect {
  background-color: #fff;
  color:			#000;
  padding:			5px;
  border-radius:	10px;
}

/* -----------------------------------------------------------
   Subscriber detail header (m_subs_detail.php).  Builds on the
   .mbsHeader rules above and uses the same header variables,
   so each theme's header colors apply.  The subscriber name
   chip keeps the colors of .subscriberSelect (set per theme).
   ----------------------------------------------------------- */
.mbsSubsHeader .mbsSubsMenuBtn {
  display:			inline-flex;
  align-items:		center;
  justify-content:	center;
  width:			34px;
  height:			34px;
  margin-left:		2px;
  font-size:		22px;
  color:			var(--mbs-header-text);
  cursor:			pointer;
  border-radius:	8px;
  transition:		background-color 0.15s ease;
}

.mbsSubsHeader .mbsSubsMenuBtn:hover {
  background-color:	var(--mbs-header-hover-bg);
}

.mbsSubsHeader .search-bar {
  align-items:		center;
  flex-wrap:		nowrap;
  margin-left:		6px !important;
  padding-left:		12px;
  border-left:		1px solid var(--mbs-header-divider);
}

.mbsSubsHeader .subscriberSelect {
  display:			inline-flex;
  align-items:		center;
  max-width:		420px;
  overflow:			hidden;
  text-overflow:	ellipsis;
  padding:			4px 14px;
  border-radius:	999px;
}

.mbsSubsHeader .mbsSubsComment {
  min-width:		0;
}

.mbsSubsHeader .mbsSubsComment > div {
  max-width:		420px;
  overflow:			hidden;
  text-overflow:	ellipsis;
  white-space:		nowrap;
}

.mbsSubsHeader .mbsSubsComment > div.rounded {
  padding:			3px 12px !important;
  border-radius:	999px !important;
}

.mbsSubsHeader .mbsSubsComment a {
  font-size:		12px;
  text-decoration:	none;
}

.mbsSubsHeader .mbsSubsComment a.headerLink {
  display:			inline-block;
  padding:			3px 12px;
  border:			1px dashed var(--mbs-header-field-border);
  border-radius:	999px;
  opacity:			0.8;
  transition:		background-color 0.15s ease, opacity 0.15s ease;
}

.mbsSubsHeader .mbsSubsComment a.headerLink:hover {
  background-color:	var(--mbs-header-hover-bg);
  opacity:			1;
}

/* Session number and effective date. */
.mbsSubsHeader .mbsSubsSession,
.mbsSubsHeader .mbsSubsEffDate {
  display:			inline-flex;
  align-items:		center;
  gap:				6px;
  margin-right:		8px;
  font-size:		12px;
  white-space:		nowrap;
}

.mbsSubsHeader .mbsSubsSession {
  height:			26px;
  padding:			0 12px;
  font-weight:		600;
  border-radius:	999px;
  background-color:	var(--mbs-header-field-bg);
  border:			1px solid var(--mbs-header-field-border);
}

.mbsSubsHeader .mbsSubsLabel {
  font-weight:		400;
  opacity:			0.75;
}

.mbsSubsHeader .mbsSubsEffDate input {
  height:			26px;
  padding:			0 12px;
  font-size:		12px;
  text-align:		center;
  color:			var(--mbs-header-field-text);
  background-color:	var(--mbs-header-field-bg);
  border:			1px solid var(--mbs-header-field-border);
  border-radius:	999px;
  transition:		background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mbsSubsHeader .mbsSubsEffDate input:hover,
.mbsSubsHeader .mbsSubsEffDate input:focus {
  outline:			none;
  border-color:		var(--mbs-header-text);
  box-shadow:		0 0 0 3px var(--mbs-header-hover-bg);
}

/* The effective date field keeps its width (the subscriber note on the
   left shrinks instead) and its calendar button stays attached on one line. */
.mbsSubsHeader nav.header-nav,
.mbsSubsHeader .search-bar2,
.mbsSubsHeader .search-bar2 > ul {
  flex-shrink:		0;
  flex-wrap:		nowrap;
}

.mbsSubsHeader .mbsSubsEffDate {
  flex:				0 0 auto;
}

.mbsSubsHeader .mbsSubsEffDate .input-group {
  flex-wrap:		nowrap;
  width:			auto;
}

.mbsSubsHeader .mbsSubsEffDate input {
  flex:				0 0 auto;
  width:			96px;
  min-width:		96px;
}

.mbsSubsHeader .mbsSubsEffDate .input-group > input:not(:last-child) {
  border-top-right-radius:		0;
  border-bottom-right-radius:	0;
}

.mbsSubsHeader .mbsSubsEffDate .input-group-text {
  flex:				0 0 auto;
  height:			26px;
  color:			var(--mbs-header-text);
  background-color:	var(--mbs-header-field-bg);
  border:			1px solid var(--mbs-header-field-border);
  border-left:		none;
  border-radius:	0 999px 999px 0;
}

.mbsSubsHeader .mbsSubsEffDate .input-group-text .btn {
  display:			inline-flex;
  align-items:		center;
  justify-content:	center;
  width:			28px;
  height:			24px;
  padding:			0;
  color:			var(--mbs-header-text);
  background-color:	transparent;
  border:			0 !important;
  border-radius:	0 999px 999px 0;
  white-space:		nowrap;
}

.mbsSubsHeader .mbsSubsEffDate .input-group-text .btn:hover {
  background-color:	var(--mbs-header-hover-bg);
  color:			var(--mbs-header-text);
}

@media (max-width: 990px) {
  .mbsSubsHeader .search-bar {
    border-left:	none;
    margin-left:	0 !important;
    padding:		12px 18px;
  }

  .mbsSubsHeader .search-bar {
    flex-wrap:		wrap;
    row-gap:		8px;
  }

  .mbsSubsHeader .search-bar > div {
    flex:			0 1 auto;
    width:			auto;
    max-width:		100%;
    min-width:		0;
    padding-left:	0 !important;
  }

  .mbsSubsHeader .subscriberSelect {
    max-width:		100%;
  }

  .mbsSubsHeader .mbsSubsComment > div {
    max-width:		100%;
  }
}

/* -----------------------------------------------------------
   Data tables - a soft "list of tiles" look rather than a
   grid: each row is a rounded, lightly tinted tile.

   Colors and sizes are CSS variables.  Each theme
   (mbs-*2.css) sets its own colors, and E-Care (ecare3.css)
   sets its own colors and roomier sizes.
   ----------------------------------------------------------- */
:root {
  --mbs-table-text:				#001538;
  --mbs-table-muted:			#64748b;
  --mbs-table-row-bg:			#f5f7fb;
  --mbs-table-row-hover-bg:		#e8eef9;
  --mbs-table-row-selected-bg:	#c6dbef;
  --mbs-table-row-selected-text:	#001538;
  --mbs-table-accent:			#00509c;

  --mbs-table-row-gap:			2px;
  --mbs-table-cell-padding:		3px 8px;
  --mbs-table-head-padding:		3px 8px 1px 8px;
  --mbs-table-font-size:		11px;
  --mbs-table-head-font-size:	10.5px;
  --mbs-table-radius:			6px;
}

table.dataTable,
table.dataTable.no-footer,
.dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom:	none !important;
}

table.dataTable {
  border-collapse:	separate !important;
  border-spacing:	0 var(--mbs-table-row-gap) !important;
  margin-top:		0 !important;
  color:			var(--mbs-table-text) !important;
  font-variant-numeric:	tabular-nums;
}

/* Column headers: small, muted labels instead of a heavy header bar. */
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
  padding:			var(--mbs-table-head-padding);
  border-bottom:	none;
  background:		transparent;
  font-size:		var(--mbs-table-head-font-size);
  font-weight:		600;
  line-height:		1.3;
  color:			var(--mbs-table-muted);
  vertical-align:	bottom;
}

table.dataTable > thead > tr > td.sorting,
table.dataTable > thead > tr > td.sorting_asc,
table.dataTable > thead > tr > td.sorting_desc {
  padding-right:	22px;
}

table.dataTable > thead > tr > td.sorting_asc,
table.dataTable > thead > tr > td.sorting_desc {
  color:			var(--mbs-table-text);
}

table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_desc:after {
  right:			8px;
  font-size:		0.7em;
}

/* Rows */
table.dataTable > tbody > tr > td,
table.dataTable.display > tbody > tr > td {
  padding:			var(--mbs-table-cell-padding);
  height:			auto;
  font-size:		var(--mbs-table-font-size);
  color:			var(--mbs-table-text);
  border:			none !important;
  background-color:	var(--mbs-table-row-bg);
  box-shadow:		none !important;
  vertical-align:	middle;
  transition:		background-color 0.15s ease;
}

table.dataTable > tbody > tr > td:first-child {
  border-radius:	var(--mbs-table-radius) 0 0 var(--mbs-table-radius);
}

table.dataTable > tbody > tr > td:last-child {
  border-radius:	0 var(--mbs-table-radius) var(--mbs-table-radius) 0;
}

table.dataTable > tbody > tr > td:only-child {
  border-radius:	var(--mbs-table-radius);
}

table.dataTable > tbody > tr:hover > td,
table.dataTable.display > tbody > tr:hover > td {
  background-color:	var(--mbs-table-row-hover-bg);
}

/* Selected row: a tint with an accent edge.  DataTables paints
   selection with an inset box-shadow, so the tint is applied
   the same way (and these selectors outrank its own). */
table.dataTable.display > tbody > tr.selected > *,
table.dataTable.display > tbody > tr.selected:hover > *,
table.dataTable.display > tbody > tr.odd.selected > *,
table.dataTable.display > tbody > tr.odd.selected:hover > * {
  box-shadow:		inset 0 0 0 9999px var(--mbs-table-row-selected-bg) !important;
  color:			var(--mbs-table-row-selected-text) !important;
}

table.dataTable.display > tbody > tr.selected > *:first-child,
table.dataTable.display > tbody > tr.odd.selected > *:first-child {
  box-shadow:		inset 3px 0 0 var(--mbs-table-accent), inset 0 0 0 9999px var(--mbs-table-row-selected-bg) !important;
}

table.dataTable tbody tr.selected a {
  color:			var(--mbs-table-accent);
}

/* Amount-style (right aligned) columns read as figures. */
table.dataTable > tbody > tr > td[style*="text-align: right"] {
  font-weight:		600;
}

/* Empty-table message. */
table.dataTable td.dataTables_empty {
  padding:			16px 12px;
  color:			var(--mbs-table-muted);
  text-align:		center;
  border-radius:	var(--mbs-table-radius);
}

.dataTables_info {
  display:			none;
}

.mbsCompany {
  min-width:		144px;
}

.listCommentWidth {
  width:			360px;
}

.ifmMerchantIframe {
  border:			none;
  width:			100%;
}

.ifmMerchant415 {
  height:			calc(100vh - 350px);
  min-height:		200px;
}

.ifmMerchant480 {
  height:			calc(100vh - 150px);
  min-height:		200px;
}

.ifmMerchant415e {
  height:			calc(100vh - 400px);
  min-height:		200px;
}

.ifmMerchant480e {
  height:			calc(100vh - 200px);
  min-height:		200px;
}

.iconactive, a.iconactive:link, a.iconactive:visited, a.iconactive:hover {
  color:			#008C4E;
  fill:				#008C4E;
}

.iconinactive, a.iconinactive:link, a.iconinactive:visited, a.iconinactive:hover {
  color:			#6A6A6A;
  fill:				#6A6A6A;
}

.icondeactive, a.icondeactive:link, a.icondeactive:visited, a.icondeactive:hover {
  color:			#B80000;
  fill:				#B80000;
}

.icontempdeactive, a.icontempdeactive:link, a.icontempdeactive:visited, a.icontempdeactive:hover {
  color:			#AFB600;
  fill:				#AFB600;
}

/* -----------------------------------------------------------
   Tree view (f_infr_html_tree).

   Colors are CSS variables that default to the data table
   colors, so each theme (mbs-*3.css) follows its own table
   palette.  A theme only needs to set --mbs-tree-* to differ.
   ----------------------------------------------------------- */
:root {
  --mbs-tree-text:				var(--mbs-table-text);
  --mbs-tree-muted:				var(--mbs-table-muted);
  --mbs-tree-line:				rgba(100, 116, 139, 0.25);
  --mbs-tree-hover-bg:			var(--mbs-table-row-hover-bg);
  --mbs-tree-caret-hover-bg:	rgba(127, 127, 127, 0.18);
  --mbs-tree-selected-bg:		var(--mbs-table-row-selected-bg);
  --mbs-tree-selected-text:		var(--mbs-table-row-selected-text);
  --mbs-tree-accent:			var(--mbs-table-accent);

  --mbs-tree-row-height:		20px;
  --mbs-tree-caret-size:		16px;
  --mbs-tree-radius:			5px;
}

.treeUl {
  list-style:			none;
  margin:				0;
  padding:				0;
  color:				var(--mbs-tree-text);
}

/* Nested levels: indent with a guide line under the parent's caret. */
.treeUl .treeUl {
  margin-left:			calc(var(--mbs-tree-caret-size) / 2 + 4px);
  padding-left:			6px;
  border-left:			1px solid var(--mbs-tree-line);
}

.treeLi {
  margin:				0;
  padding:				0;
}

.treeRow {
  display:				flex;
  align-items:			center;
  gap:					2px;
  min-height:			var(--mbs-tree-row-height);
  margin:				1px 0;
  padding:				1px 6px 1px 4px;
  border-radius:		var(--mbs-tree-radius);
  transition:			background-color 0.15s ease;
}

.treeRow:hover {
  background-color:		var(--mbs-tree-hover-bg);
}

.treeRow > a,
.treeRow > a:hover {
  color:				inherit;
}

.treeRow > a {
  display:				flex;
  align-items:			center;
  flex:					1 1 auto;
  min-width:			0;
  gap:					4px;
  text-decoration:		none;
}

.treeLabel {
  min-width:			0;
  overflow-wrap:		anywhere;
}

/* Expand/collapse chevron.  Leaf rows get an equal-width spacer so labels line up. */
.treeCaret,
.treeCaretSpacer {
  display:				inline-flex;
  align-items:			center;
  justify-content:		center;
  flex:					0 0 var(--mbs-tree-caret-size);
  height:				var(--mbs-tree-caret-size);
}

.treeCaret {
  cursor:				pointer;
  border-radius:		4px;
  color:				var(--mbs-tree-muted);
  -webkit-user-select:	none;
  user-select:			none;
  transition:			background-color 0.15s ease, color 0.15s ease;
}

.treeCaret:hover {
  background-color:		var(--mbs-tree-caret-hover-bg);
  color:				var(--mbs-tree-accent);
}

.treeCaret::before {
  content:				"";
  width:				6px;
  height:				6px;
  border-right:			1.5px solid currentColor;
  border-bottom:		1.5px solid currentColor;
  transform:			translateY(-1px) rotate(45deg);
  transition:			transform 0.15s ease;
}

.treeCaret-down::before {
  transform:			translateX(-1px) rotate(-45deg);
}

.treeNested {
  display:				none;
}

.treeActive {
  display:				block;
}

.treeSelected,
.treeSelected:hover {
  background-color:		var(--mbs-tree-selected-bg);
  color:				var(--mbs-tree-selected-text);
  box-shadow:			inset 3px 0 0 var(--mbs-tree-accent);
}

.sub-nav-icon {
  margin-right: 		7px !important;
}

.wizardConfirmArea {
  width:			90%;
}

.wizardConfirmSpacer {
  height:			4px;
}

.wizardConfirmGroupArea {
  width:			auto;
  overflow:			hidden;
  border-radius:	7px;
  background-color:	#FFFFFF;
  padding:			14px;
  margin-bottom:	7px;
  box-shadow:		0px 0 21px rgba(1, 41, 112, 0.1);
}

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

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

.wizardConfirmationSectionTitle {
  display:			block;
  padding:			7px 0px 7px 0px;
  font-weight:		bold;
  white-space:		normal;
  border-bottom:	1px solid #0066AC;
  margin-left:		6px;
}

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

.wizardConfirmDataLabel {
  width:			200px;
  margin-left:		14px;
}
	
.wizardConfirmDataValue {
  width:			216px;
}
	
.calhead {
  text-align:		center;
  font-size:		0.8rem;
  padding-top:		5px;
  padding-bottom:	5px;
}
 
.calcell {
  text-align:		center;
  font-size:		0.8rem;
  padding-top:		5px;
  padding-bottom:	5px;
}
 
.calcell:hover {
  background-color:	#00509c !important;
  color:			#FFFFFF;
  cursor:			pointer;
}

.calcellselected {
  background-color:	#2278FD;
  color:			#FFFFFF;
}

.calcelloth {
  background-color:	#EEEEEE;
}

@media (max-width: 1199px) {
  #main, #footer {
	margin-left:		0px;
  }

  .mbsCompany {
	min-width:			72px;
  }
}

@media (max-width: 600px) {
  .listCommentWidth {
	width:				144px;
  }
  .mbsLayer {
    min-width:			auto;
  }
  .calhead {
	font-size:			1.5rem;
	padding-top:		15px;
	padding-bottom:		15px;
  }
  .calcell {
	font-size:			1.5rem;
	padding-top:		15px;
	padding-bottom:		15px;
  }
}

.taskcalhead {
  font-weight:		bold;
  padding:			2px;
  text-align:		center;
  border-width:		1px 1px 1px 0px;
  border-color:		#999999;
  border-style:		solid;
  background-color:	#0066AC;
  color:			#FFFFFF;
  fill:				#FFFFFF;
}
 
.taskcalweek {
  color:			#000000;
  fill:				#000000;
}
 
.taskcalday {
  border-width:		0px 1px 1px 0px;
  height:			112px;
  vertical-align:	top;
  background-color:	#FFFFFF;
  padding:			2px;
  border-color:		#999999;
  border-style:		solid;
}
 
.taskcaldayother {
  background-color:	#E9E9E9;
}
 
.taskcaldaytimehead {
  border-width:		1px 0px 0px 0px;
  vertical-align:	top;
  overflow-x:		hidden;
  padding:			2px;
  background-color: #FFFFFF;
  border-color:		#FFFFFF;
  border-style:		solid;
}
 
.taskcaldetail {
  border-width:		1px 0px 0px 0px;
  padding:			2px;
  border-color:		#FFFFFF;
  border-style:		solid;
}
 
.taskcalcellouter {
  padding:			0px;
  text-align:		center;
  border-width:		0px 1px 1px 0px;
  border: 			1px solid #FFFFFF;
}

.taskcalcell {
  padding:			2px;
  text-align:		center;
  background-color: #FFFFFF;
  border-bottom:	1px solid #FFFFFF;
}
 
.taskcalcellselected {
  padding:			2px;
  text-align:		center;
  background-color:	#FEB69B;
  border-bottom:	1px solid #FFFFFF;
}

.taskcalslot {
  padding:			2px;
  position:			relative;
  overflow:			hidden;
  text-align:		left;
}

.taskcaldroparea {
  padding:			2px;
  display:			inline-block;
  position:			absolute;
  width:			43px;
  height:			51px;
}

.taskcalweekdroparea {
  padding:			2px;
  position:			absolute;
  width:			100%;
  height:			24px;
}

.dragover {
  border:			1px solid #5CCC22;
  background-color:	#5CCC22;
}

.schdbordercolor {
  border-color: 	#999999 #999999 #999999 #999999;
  border-style: 	solid solid solid solid;
}

.schdhead {
  border-color: 	#0066AC #0066AC #0066AC #0066AC;
  background-color:	#0066AC;
  color:			#FFFFFF;
}

.schdDeptDateHeader {
  background-color:	#2272B5;
  color:			#ffffff;
  fill:				#ffffff;
}

.schdLegend {
  background-color:	#ffffff;
  border-radius:	5px;
  padding:			3px;
}

canvas {
  background-color:	#FFFFFF;
}

.canvasClickArea {
  border:			1px solid #FF0000;
  border-radius:	4px;
  background-color:	rgba(255,0,0,0.2);
  position:			absolute;
}

.canvasClickArea:hover {
  border:			1px solid #FF0000;
  border-radius:	4px;
  background-color:	rgba(255,0,0,0.5);
  position:			absolute;
  cursor:			pointer;
}

.canvasClickAreaPrint {
  border:			0px solid #FF0000;
  border-radius:	4px;
  background-color:	transparent;
  position:			absolute;
}

.canvasInternalClickArea {
  border:			1px solid #FF0000;
  border-radius:	4px;
  background-color:	rgba(255,255,0,0.2);
  position:			absolute;
}

.canvasInternalClickArea:hover {
  border:			1px solid #FF0000;
  border-radius:	4px;
  background-color:	rgba(255,255,0,0.5);
  position:			absolute;
  cursor:			pointer;
}

.canvasInternalClickAreaPrint {
  border:			0px solid #FF0000;
  border-radius:	4px;
  background-color:	transparent;
  position:			absolute;
}

.canvasButtonArea {
  position:			fixed;
  left:				8px;
  top:				8px;
}

.button {
  height:			19px;
  font-size: 		8px;
  font-family: 		Tahoma,Arial,Verdana;
  width: 			80px;
  cursor:			pointer;
  font-family: 		Tahoma,Arial,Verdana;
  background-color:	#003D6D;
  border-radius: 	5px;
  box-shadow: 		rgba(0, 0, 0, 0.1) 0 2px 4px;
  color:			#FFFFFF;
  fill:				#FFFFFF;
  overflow: 		hidden;
  text-align: 		center;
  touch-action: 	manipulation;
  white-space: 		nowrap;
  border: 			1px solid #003D6D;
  width:			100%;
}

.header .search-form input, .header .search-form select {
  font-size:		9px;
}

.header .search-bar2-show, .header .search-bar-show {
  top:				46px;
}

.dropdown-menu {
  font-size: 		0.6rem;
}

.dropdown-toggle::after {
  font-size:		1rem;
}

.dropdown-menu .dropdown-item {
    color:			#001538 !important;
    fill:			#001538 !important;
}

.mbs-dropdown {
  cursor:			pointer;
}

.mbs-dropdown svg {
  cursor:			pointer;
  color:			#001538 !important;
  fill:				#001538 !important;
}

.header-nav .profile .dropdown-item {
  color:			var(--mbs-header-menu-text) !important;
  fill:				var(--mbs-header-menu-text) !important;
}

.fontattention {
  color:			#ff0000;
}

/*----------------------------------------------------------
  Payment detail (m_infr_payment_detail.php).  Shared by
  E-Care, customer care and the cash drawer, so sizes are
  relative (em) and colors are translucent to suit every
  theme.
----------------------------------------------------------*/
.payAmtChoices {
  display:			flex;
  flex-wrap:		wrap;
  gap:				0.5em;
  padding:			0.25em 0;
}

a.payAmtChoice, a.payAmtChoice:link, a.payAmtChoice:visited {
  display:			inline-flex;
  flex-direction:	column;
  align-items:		flex-start;
  padding:			0.4em 0.9em;
  border:			1px solid rgba(13, 110, 253, 0.35);
  border-radius:	0.6em;
  background-color:	rgba(13, 110, 253, 0.06);
  color:			inherit;
  text-decoration:	none;
  line-height:		1.25;
  cursor:			pointer;
  transition:		background-color 0.15s ease, border-color 0.15s ease;
}

a.payAmtChoice:hover, a.payAmtChoice:focus {
  background-color:	rgba(13, 110, 253, 0.16);
  border-color:		rgba(13, 110, 253, 0.7);
  color:			inherit;
}

.payAmtChoice .payAmtValue {
  font-weight:		700;
  font-size:		1.1em;
  font-variant-numeric: tabular-nums;
}

.payAmtChoice .payAmtDesc {
  font-size:		0.85em;
  opacity:			0.7;
}

.payAuthorization {
  display:			flex;
  align-items:		flex-start;
  gap:				0.75em;
}

.payAuthorization .payAuthCheck {
  flex-shrink:		0;
  padding-top:		0.15em;
}

.payAuthorization .payAuthText {
  white-space:		normal;
  line-height:		1.4;
}

.payProcessing {
  align-items:		center;
  font-weight:		600;
}

/*  Payment detail card title icons.  Drawn with CSS so the
    group box titles (used as security keys) stay plain text. */
.payCard > .row > .col-8 > .card-title::before {
  font-family:		bootstrap-icons !important;
  font-weight:		normal;
  font-style:		normal;
  margin-right:		0.4em;
  vertical-align:	-0.125em;
}

.payCard-details > .row > .col-8 > .card-title::before {
  content:			"\f2da";	/* bi-credit-card-2-front */
}

.payCard-ach > .row > .col-8 > .card-title::before {
  content:			"\f62e";	/* bi-bank */
}

.payCard-name > .row > .col-8 > .card-title::before {
  content:			"\f8c9";	/* bi-person-vcard */
}

.payCard-account > .row > .col-8 > .card-title::before {
  content:			"\f538";	/* bi-shield-lock */
}

/* -----------------------------------------------------------
   Digital twin widget (part/ecar/b_ecar_digital_twin_status.php)
   Used by both back office and E-Care (E-Care loads mbs2.css
   ahead of ecare3.css).
   ----------------------------------------------------------- */
.twin-container-wrap { background-color: #f8fafc; color: #1e293b; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding: 0.5rem 0.5rem 0.85rem 0.5rem; border-radius: 16px; }
/* .card.twin-card / .card.client-card outrank the generic .card rule in ecare3.css,
   which E-Care loads after this file. */
.card.twin-card { background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.03); padding: 0.75rem !important; overflow: visible !important; }
.canvas-container { position: relative; width: 100%; height: 130px; background: radial-gradient(circle at center, #ffffff 0%, #f8fafc 100%); border-radius: 12px; border: 1px solid #cbd5e1; overflow: visible !important; }
.canvas-container canvas { width: 100%; height: 100%; display: block; }

/* Modern Auto-Fitting High-Density SaaS Grid Layout */
.card.client-card { position: relative; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.015); border-top: 3px solid #e2e8f0; padding: 0.65rem 0.8rem !important; display: flex; flex-direction: column; justify-content: space-between; overflow: visible !important; }
.client-card:hover { transform: translateY(-4px); border-top-color: #05ca86; border-left-color: #e2e8f0; border-right-color: #e2e8f0; border-bottom-color: #e2e8f0; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); z-index: 50 !important; }
.client-card.is-5g { border-top-color: #3b82f6; }
.client-card.is-5g:hover { border-top-color: #05ca86; }
.client-card.is-loading {
    opacity: 0.65;
    filter: grayscale(100%);
    border-top-color: #cbd5e1 !important;
    pointer-events: none;
}

.client-hover-overlay {
    position: absolute;
    top: 50%;
    width: 270px;
    background-color: #ffffff;
    color: #1e293b;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    padding: 1rem !important;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
}
.client-hover-overlay.hover-align-left {
    left: 0;
    transform: translateY(10px);
}
.client-hover-overlay.hover-align-right {
    right: 0;
    transform: translateY(10px);
}
.client-card:hover .client-hover-overlay.hover-align-left {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.client-card:hover .client-hover-overlay.hover-align-right {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Inline Telemetry Experience Section */
.telemetry-inline-panel { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed #e2e8f0; }

.canvas-tooltip { 
    background-color: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08) !important; 
    border-radius: 8px !important; 
}

/* Premium Modern SaaS Button Overhaul Styles */
.btn-speedtest-icon,
.btn-refresh-icon {
    background-color: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    height: 36px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.2px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}
.btn-speedtest-icon:hover,
.btn-refresh-icon:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}
.btn-speedtest-icon:active,
.btn-refresh-icon:active {
    transform: translateY(0);
}

.btn-reboot-icon {
    background-color: #ef4444;
    color: #ffffff;
    border: 1px solid #ef4444;
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    height: 36px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.2px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}
.btn-reboot-icon:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.25);
}
.btn-reboot-icon:active {
    transform: translateY(0);
}
.btn-reboot-icon:disabled {
    background-color: #fca5a5;
    border-color: #fca5a5;
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Auto-hide icon when spinner is active */
.btn-refresh-icon .spinner-border:not(.d-none) ~ .bi {
    display: none !important;
}
.btn-reboot-icon .spinner-border:not(.d-none) ~ .bi {
    display: none !important;
}

/* Header row keeps the title and action buttons on the same row, wrapping
   only if the available width truly can't fit both. */
.twin-header-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

/* Action button row: flex-wrap keeps all three buttons grouped together and lets
   them wrap as a unit instead of one button splitting off onto its own line. */
.twin-btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}
.twin-btn-row .btn-speedtest-icon,
.twin-btn-row .btn-refresh-icon,
.twin-btn-row .btn-reboot-icon {
    margin: 0;
}

/* On smaller screens, show icon-only buttons (hide verbiage) so the title and
   buttons keep fitting on the same row instead of wrapping to a new one. */
@media (max-width: 575.98px) {
    .btn-speedtest-icon,
    .btn-refresh-icon,
    .btn-reboot-icon {
        width: 36px;
        padding: 0.35rem;
    }
    .btn-speedtest-icon .btn-label,
    .btn-refresh-icon .btn-label,
    .btn-reboot-icon .btn-label {
        display: none;
    }
}

/* Compact styling used when this widget is embedded on the Dashboard tab
   (see $display_context) - smaller canvas/fonts/icons and a horizontally
   scrolling connected-devices strip so it fits a small corner panel. The
   widget already lives inside the dashboard's own sgbox card, so the nested
   gray background/border/shadow are flattened here for a cleaner, more
   modern look that doesn't look like a "card inside a card". */
.twin-context-dashboard { background-color: transparent; padding: 0.15rem 0.1rem 0.3rem 0; }
.twin-context-dashboard .twin-card { padding: 0.35rem !important; background-color: transparent; border: none; box-shadow: none; }
.twin-context-dashboard .canvas-container { height: 80px; }
.twin-context-dashboard .row.mb-2 { margin-bottom: 0.25rem !important; }
.twin-context-dashboard .twin-header-row { margin-top: 0.1rem !important; margin-bottom: 0.4rem !important; }
.twin-context-dashboard h4 { font-size: 0.85rem; }
.twin-context-dashboard .badge { font-size: 9px !important; padding: 3px 6px !important; }
.twin-context-dashboard .btn-speedtest-icon,
.twin-context-dashboard .btn-refresh-icon,
.twin-context-dashboard .btn-reboot-icon {
    width: 30px;
    height: 30px;
    padding: 0.25rem;
}
.twin-context-dashboard .btn-label {
    display: none;
}
.twin-devices-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* The hover overlay is detached to <body> on mouseenter (see j_infr_digital_twin.js), so it
       no longer needs extra vertical room here. Forcing overflow-y: hidden (instead
       of visible) also avoids a CSS quirk where mixing overflow-x: auto with
       overflow-y: visible makes the browser compute overflow-y as auto too, which
       was producing an unwanted vertical scrollbar on this row. */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.6rem;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
}
.twin-devices-scroll::-webkit-scrollbar { height: 6px; }
.twin-devices-scroll::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 3px; }
.twin-devices-scroll::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
.twin-devices-scroll::-webkit-scrollbar-thumb:hover { background: #64748b; }
.twin-devices-scroll .client-card-col {
    flex: 0 0 120px;
    max-width: 120px;
}
.twin-context-dashboard .client-card { padding: 0.4rem 0.5rem !important; }
/* .twin-devices-scroll uses overflow-y: hidden (see comment above), which would
   clip off the vertical lift/glow from the shared .client-card:hover effect.
   Replace it with a flatter, non-clipped hover response for the dashboard tiles. */
.twin-context-dashboard .client-card:hover {
    transform: none;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* Smaller canvas hover tooltip on the Dashboard tab so it doesn't dwarf the
   compact WAN/ONT/Router diagram. */
.twin-context-dashboard .canvas-tooltip {
    min-width: 170px !important;
    padding: 0.5rem !important;
    font-size: 10px !important;
}

/* Embedded styling used when this widget is rendered inside the Equipment
   Status card (see $display_context) - the card already provides the
   outer background/border, so the wrapper is flattened to avoid a
   "card inside a card" look. */
.twin-context-equipment { background-color: transparent; padding: 0; }
.twin-context-equipment .twin-card { background-color: #f8fafc; box-shadow: none; }
.twin-context-equipment .twin-header-row h4 { font-size: 1rem; }

/* Layer detail modal - matches the rounded, softly-shadowed card look used
   throughout the rest of the widget instead of Bootstrap's sharp default corners. */
.twin-modal-content {
    background-color: #ffffff;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
    overflow: hidden;
}

/* -----------------------------------------------------------
   Circuit map (part/nele/b_nele_circuit_map.php,
   js/j_infr_circuit_map.js)
   ----------------------------------------------------------- */
.circuit-map { color: #0f172a; }
.circuit-map-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.circuit-map-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 13px; }
.circuit-map-crumb { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 999px; color: #2563eb; text-decoration: none; background: #eff6ff; }
.circuit-map-crumb:hover { background: #dbeafe; color: #1d4ed8; }
.circuit-map-crumb.current { color: #0f172a; font-weight: 600; background: #f1f5f9; }
.circuit-map-crumb-sep { font-size: 10px; color: #94a3b8; }
.circuit-map-back { border: 1px solid #cbd5e1; background: #ffffff; color: #334155; border-radius: 8px; width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center; margin-right: 0.25rem; }
.circuit-map-back:hover { background: #f1f5f9; }
.circuit-map-hint { font-size: 12px; color: #64748b; }
.circuit-map-stage { position: relative; max-height: 68vh; overflow: auto; border: 1px solid #e2e8f0; border-radius: 12px; background: radial-gradient(circle at 50% 0%, #ffffff 0%, #f8fafc 70%); }
.circuit-map-stage canvas { display: block; }
.circuit-map-tooltip { position: absolute; z-index: 20; min-width: 200px; max-width: 280px; pointer-events: none; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); padding: 0.55rem 0.7rem; font-size: 11.5px; }
.circuit-map-tooltip-title { font-weight: 700; color: #2563eb; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.25rem; margin-bottom: 0.3rem; word-break: break-all; }
.circuit-map-tooltip-row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.1rem 0; }
.circuit-map-tooltip-row span:first-child { color: #64748b; white-space: nowrap; }
.circuit-map-tooltip-row span:last-child { font-weight: 600; text-align: right; word-break: break-word; }
.circuit-map-popup { position: absolute; z-index: 30; min-width: 190px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18); padding: 0.35rem; }
.circuit-map-popup-title { font-size: 12px; font-weight: 700; color: #334155; padding: 0.3rem 0.5rem 0.4rem; border-bottom: 1px solid #f1f5f9; margin-bottom: 0.2rem; word-break: break-all; }
.circuit-map-popup-action { display: flex; align-items: center; gap: 0.5rem; width: 100%; border: 0; background: transparent; text-align: left; font-size: 13px; color: #0f172a; padding: 0.4rem 0.5rem; border-radius: 6px; }
.circuit-map-popup-action:hover { background: #eff6ff; color: #1d4ed8; }
.circuit-map-popup-action i { color: #2563eb; }

/* Browser printing: show every datatable row, not only the visible scroll area */
@media print {
  .dataTables_scrollBody, .table-responsive { height: auto !important; max-height: none !important; overflow: visible !important; }
  table.dataTable thead { display: table-header-group; }
  table.dataTable tr { break-inside: avoid; page-break-inside: avoid; }
}