/* 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:			var(--mbs-tree-width, 273px);
  background-color:	#FFFFFF;
}

/* Drag handle on the right edge of the subscriber tree (desktop only). */
.mbsTreeResize {
  position:			fixed;
  top:				44px;
  bottom:			0px;
  left:				calc(var(--mbs-tree-width, 273px) - 3px);
  width:			6px;
  z-index:			997;
  cursor:			col-resize;
  touch-action:		none;
  transition:		background-color 0.15s ease;
}

.mbsTreeResize:hover,
body.mbs-tree-resizing .mbsTreeResize {
  background-color:	rgba(13, 110, 253, 0.35);
}

body.mbs-tree-resizing {
  cursor:			col-resize;
  user-select:		none;
}

body.mbs-tree-resizing .sidebar-cc,
body.mbs-tree-resizing .main-cc,
body.mbs-tree-resizing .footer-cc {
  transition:		none;
}

@media (max-width: 1199px) {
    /* As an overlay the tree always uses the default width. */
    .sidebar-cc {
        width: 273px;
        left: -273px;
    }

    .toggle-sidebar .sidebar-cc {
        left: 0;
    }

    .mbsTreeResize {
        display: none;
    }
}

@media (min-width: 1200px) {
    .toggle-sidebar .sidebar-cc {
        left: calc(-1 * var(--mbs-tree-width, 273px));
    }

    .toggle-sidebar .mbsTreeResize {
        display: none;
    }
}

.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:		var(--mbs-tree-width, 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: var(--mbs-tree-width, 273px);
    }
}

@media (min-width: 1200px) {

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

.footer-cc {
  margin-left:		var(--mbs-tree-width, 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;
}

/* Bold clickable text in content areas (cards, accordion items such as the
   subscriber summary, modals) so links stand out from plain values.  Links
   with no target (empty href) aren't clickable, so they stay normal weight. */
.accordion-body a[href]:not([href=""]):not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link),
.card-body a[href]:not([href=""]):not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link),
.modal-body a[href]:not([href=""]):not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
  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; }
}