/* Maxitel brand overrides (Brand Style Guide v1.0) for the MyMaxiTEL portal.
 * Every selector is scoped to body.brand-maxitel so PortalBrand tenants,
 * trendcall and ResellMobiel keep their own look.
 */
body.brand-maxitel {
  --mt-blue-d: #093559;
  --mt-blue-m: #1563a3;
  --mt-blue-l: #3f93d4;
  --mt-orange: #ed7416;
  --mt-orange-dark: #d0640f;
  --mt-neutral: #f1ede0;
  --mt-neutral-soft: #f8f6ef;
  --mt-text: #041f35;
  --mt-muted: #5a6b7a;
  --mt-border: #e0e3e8;
  --mt-page-bg: #f3f5f8;
  --mt-radius: 6px;
  --mt-shadow: 0 1px 2px rgba(4, 31, 53, 0.06), 0 4px 14px rgba(4, 31, 53, 0.06);
  --mt-sidebar: #041f35;
  --mt-sidebar-line: #0d3f66;
  --mt-head: 'Manrope', 'Segoe UI', sans-serif;
  --mt-body: 'Rubik', 'Segoe UI', sans-serif;
  font-family: var(--mt-body);
  color: var(--mt-text);
  background-color: var(--mt-sidebar);
}

body.brand-maxitel h1,
body.brand-maxitel h2,
body.brand-maxitel h3,
body.brand-maxitel h4,
body.brand-maxitel .page-title,
body.brand-maxitel .portlet > .portlet-title > .caption,
body.brand-maxitel .modal-title {
  font-family: var(--mt-head);
  font-weight: 700;
  color: var(--mt-text);
}

body.brand-maxitel a {
  color: var(--mt-blue-m);
}

body.brand-maxitel a:hover,
body.brand-maxitel a:focus {
  color: var(--mt-blue-d);
}

/* Header */
body.brand-maxitel .page-header.navbar {
  background-color: var(--mt-blue-d);
}

body.brand-maxitel .page-header.navbar .page-logo .logo-default {
  margin-top: 8px;
}

body.brand-maxitel .page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle,
body.brand-maxitel .page-header.navbar .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle,
body.brand-maxitel .page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover {
  background-color: var(--mt-blue-m);
}

body.brand-maxitel .page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle .username,
body.brand-maxitel .page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle > i,
body.brand-maxitel .page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle > i {
  color: #fff;
}

body.brand-maxitel .page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle .badge.badge-default {
  background-color: var(--mt-orange);
}

body.brand-maxitel .page-header.navbar .menu-toggler {
  filter: brightness(1.6);
}

/* Sidebar */
body.brand-maxitel .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover,
body.brand-maxitel .page-sidebar,
body.brand-maxitel .page-sidebar .page-sidebar-menu:hover .sub-menu {
  background-color: var(--mt-sidebar);
}

body.brand-maxitel .page-sidebar .page-sidebar-menu > li > a,
body.brand-maxitel .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a {
  border-top-color: var(--mt-sidebar-line);
  color: #dbe6f0;
  font-family: var(--mt-body);
  font-weight: 500;
}

body.brand-maxitel .page-sidebar .page-sidebar-menu > li > a > i,
body.brand-maxitel .page-sidebar .page-sidebar-menu > li > a > i[class^="icon-"],
body.brand-maxitel .page-sidebar .page-sidebar-menu > li > a > i[class*="icon-"],
body.brand-maxitel .page-sidebar .page-sidebar-menu li > a > .arrow:before,
body.brand-maxitel .page-sidebar .page-sidebar-menu li > a > .arrow.open:before {
  color: var(--mt-blue-l);
}

body.brand-maxitel .page-sidebar .page-sidebar-menu > li:hover > a,
body.brand-maxitel .page-sidebar .page-sidebar-menu > li.open > a,
body.brand-maxitel .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a,
body.brand-maxitel .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a {
  background: var(--mt-blue-d);
  color: #fff;
}

body.brand-maxitel .page-sidebar .page-sidebar-menu > li:hover > a > i,
body.brand-maxitel .page-sidebar .page-sidebar-menu > li.open > a > i,
body.brand-maxitel .page-sidebar .page-sidebar-menu li:hover > a > .arrow:before,
body.brand-maxitel .page-sidebar .page-sidebar-menu li:hover > a > .arrow.open:before {
  color: #fff;
}

body.brand-maxitel .page-sidebar .page-sidebar-menu > li.active > a,
body.brand-maxitel .page-sidebar .page-sidebar-menu > li.active.open > a,
body.brand-maxitel .page-sidebar .page-sidebar-menu > li.active > a:hover,
body.brand-maxitel .page-sidebar .page-sidebar-menu > li.active.open > a:hover,
body.brand-maxitel .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a,
body.brand-maxitel .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a {
  background: var(--mt-blue-m);
  color: #fff;
  box-shadow: inset 4px 0 0 var(--mt-orange);
}

body.brand-maxitel .page-sidebar .page-sidebar-menu > li.active > a > .selected {
  border-right-color: #fff;
}

body.brand-maxitel .page-sidebar .page-sidebar-menu > li.active.open + li > a {
  border-top-color: var(--mt-sidebar-line);
}

body.brand-maxitel .page-sidebar .page-sidebar-menu .sub-menu > li > a {
  color: #b7c9db;
}

body.brand-maxitel .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a,
body.brand-maxitel .page-sidebar .page-sidebar-menu .sub-menu > li.open > a,
body.brand-maxitel .page-sidebar .page-sidebar-menu .sub-menu > li.active > a {
  background: var(--mt-blue-d) !important;
  color: #fff;
}

body.brand-maxitel .page-sidebar .page-sidebar-menu .sub-menu > li.active > a {
  color: #fff;
  box-shadow: inset 4px 0 0 var(--mt-orange);
}

/* Page bar, title, footer */
body.brand-maxitel .page-content {
  background-color: var(--mt-page-bg);
  border-left: 0;
}

body.brand-maxitel .page-bar {
  background: transparent;
  border-bottom: 1px solid var(--mt-border);
  margin-bottom: 20px;
}

body.brand-maxitel .page-bar .page-breadcrumb > li > a,
body.brand-maxitel .page-bar .page-breadcrumb > li > span,
body.brand-maxitel .page-bar .page-breadcrumb > li > i {
  color: var(--mt-muted);
}

body.brand-maxitel .page-title {
  font-weight: 800;
  letter-spacing: -0.01em;
}

body.brand-maxitel .page-title small {
  font-family: var(--mt-body);
  font-weight: 400;
  color: var(--mt-muted);
}

body.brand-maxitel .page-footer {
  background-color: var(--mt-blue-d);
}

body.brand-maxitel .page-footer .page-footer-inner {
  color: #b7c9db;
}

body.brand-maxitel .page-footer .go-top {
  background-color: var(--mt-blue-m);
  color: #fff;
}

/* Portlets and tables */
body.brand-maxitel .portlet {
  border-radius: var(--mt-radius);
}

body.brand-maxitel .portlet.box,
body.brand-maxitel .portlet.light,
body.brand-maxitel .portlet.bordered,
body.brand-maxitel .well {
  background: #fff;
  box-shadow: var(--mt-shadow);
}

body.brand-maxitel .portlet.light,
body.brand-maxitel .portlet.bordered {
  border: 1px solid var(--mt-border);
  padding: 12px 20px 15px;
}

body.brand-maxitel .well {
  border-color: var(--mt-border);
  border-radius: var(--mt-radius);
}

body.brand-maxitel .portlet.box > .portlet-title {
  border-radius: var(--mt-radius) var(--mt-radius) 0 0;
}

body.brand-maxitel .portlet.box > .portlet-body {
  border-radius: 0 0 var(--mt-radius) var(--mt-radius);
}

body.brand-maxitel .portlet > .portlet-title {
  border-bottom-color: var(--mt-border);
}

body.brand-maxitel .portlet.box > .portlet-title,
body.brand-maxitel .portlet.box.blue > .portlet-title,
body.brand-maxitel .portlet.box.blue-madison > .portlet-title,
body.brand-maxitel .portlet.box.blue-chambray > .portlet-title,
body.brand-maxitel .portlet.box.grey > .portlet-title,
body.brand-maxitel .portlet.box.grey-cascade > .portlet-title,
body.brand-maxitel .portlet.box.red > .portlet-title {
  background-color: var(--mt-blue-d);
}

body.brand-maxitel .portlet.box > .portlet-title > .caption,
body.brand-maxitel .portlet.box > .portlet-title > .caption > i {
  color: #fff;
}

body.brand-maxitel .portlet.box,
body.brand-maxitel .portlet.box.blue,
body.brand-maxitel .portlet.box.blue-madison,
body.brand-maxitel .portlet.box.grey,
body.brand-maxitel .portlet.box.red {
  border: 0;
}

body.brand-maxitel .portlet.light > .portlet-title > .caption > .caption-subject,
body.brand-maxitel .portlet.light > .portlet-title > .caption > i {
  color: var(--mt-blue-d);
}

body.brand-maxitel .table > thead > tr > th {
  color: var(--mt-muted);
  font-family: var(--mt-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--mt-blue-l);
}

body.brand-maxitel .table > tbody > tr > td {
  border-top-color: #eceff3;
  vertical-align: middle;
}

body.brand-maxitel .table-bordered,
body.brand-maxitel .table-bordered > tbody > tr > td,
body.brand-maxitel .table-bordered > thead > tr > th {
  border-color: var(--mt-border);
}

body.brand-maxitel .table-striped > tbody > tr:nth-child(odd) > td,
body.brand-maxitel .table-striped > tbody > tr:nth-child(odd) > th {
  background-color: var(--mt-neutral-soft);
}

body.brand-maxitel .table-hover > tbody > tr:hover > td,
body.brand-maxitel .table-hover > tbody > tr:hover > th {
  background-color: var(--mt-neutral);
}

body.brand-maxitel .nav-tabs > li.active > a,
body.brand-maxitel .nav-tabs > li.active > a:hover,
body.brand-maxitel .nav-tabs > li.active > a:focus {
  color: var(--mt-blue-d);
  border-top: 2px solid var(--mt-orange);
}

body.brand-maxitel .nav-tabs {
  border-bottom-color: var(--mt-border);
}

body.brand-maxitel .nav-tabs > li > a {
  border-radius: var(--mt-radius) var(--mt-radius) 0 0;
  color: var(--mt-muted);
}

/* Forms */
body.brand-maxitel .form-control,
body.brand-maxitel .input-group-addon,
body.brand-maxitel .select2-container .select2-choice {
  border-radius: var(--mt-radius);
  border-color: #d5dbe3;
  color: var(--mt-text);
}

body.brand-maxitel .form-control:focus {
  border-color: var(--mt-blue-l);
  box-shadow: 0 0 0 3px rgba(63, 147, 212, 0.2);
}

body.brand-maxitel .form-horizontal .control-label,
body.brand-maxitel .form-group > label,
body.brand-maxitel .control-label {
  color: var(--mt-text);
  font-weight: 500;
}

body.brand-maxitel .help-block {
  color: var(--mt-muted);
}

body.brand-maxitel .form-actions,
body.brand-maxitel .form .form-actions {
  background: var(--mt-neutral-soft);
  border-top-color: var(--mt-border);
  border-radius: 0 0 var(--mt-radius) var(--mt-radius);
}

/* Modals, alerts, dropdowns */
body.brand-maxitel .modal-content {
  border: 0;
  border-radius: var(--mt-radius);
  box-shadow: 0 24px 60px rgba(4, 31, 53, 0.35);
}

body.brand-maxitel .modal-header {
  border-bottom-color: var(--mt-border);
}

body.brand-maxitel .modal-footer {
  border-top-color: var(--mt-border);
  background: var(--mt-neutral-soft);
  border-radius: 0 0 var(--mt-radius) var(--mt-radius);
}

body.brand-maxitel .alert {
  border-radius: var(--mt-radius);
  border-width: 0 0 0 4px;
}

body.brand-maxitel .alert-info {
  background: #e8f2fb;
  border-color: var(--mt-blue-m);
  color: var(--mt-blue-d);
}

body.brand-maxitel .alert-warning {
  background: #fdf1e6;
  border-color: var(--mt-orange);
  color: #7a3c06;
}

body.brand-maxitel .dropdown-menu {
  border-radius: var(--mt-radius);
  border-color: var(--mt-border);
  box-shadow: var(--mt-shadow);
}

body.brand-maxitel .dropdown-menu > li > a:hover,
body.brand-maxitel .dropdown-menu > li > a:focus {
  background: var(--mt-neutral-soft);
  color: var(--mt-blue-d);
}

/* Buttons, labels and badges: the Metronic "blue"/primary variants follow the brand blue,
 * the orange accent is reserved for the primary call to action. */
body.brand-maxitel .btn {
  border-radius: var(--mt-radius);
  font-family: var(--mt-body);
  font-weight: 500;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

body.brand-maxitel .btn.default,
body.brand-maxitel .btn-default {
  background: #fff;
  border: 1px solid #d5dbe3;
  color: var(--mt-text);
}

body.brand-maxitel .btn.default:hover,
body.brand-maxitel .btn-default:hover {
  background: var(--mt-neutral-soft);
  border-color: #c3cbd6;
  color: var(--mt-text);
}

body.brand-maxitel .btn.blue,
body.brand-maxitel .btn-primary,
body.brand-maxitel .btn.blue-madison,
body.brand-maxitel .btn.blue-chambray,
body.brand-maxitel .btn.blue-hoki {
  background-color: var(--mt-blue-m);
  border-color: var(--mt-blue-m);
  color: #fff;
}

body.brand-maxitel .btn.blue:hover,
body.brand-maxitel .btn.blue:focus,
body.brand-maxitel .btn.blue:active,
body.brand-maxitel .btn.blue.active,
body.brand-maxitel .btn-primary:hover,
body.brand-maxitel .btn-primary:focus,
body.brand-maxitel .btn-primary:active,
body.brand-maxitel .btn-primary.active,
body.brand-maxitel .btn.blue-madison:hover,
body.brand-maxitel .btn.blue-chambray:hover,
body.brand-maxitel .btn.blue-hoki:hover {
  background-color: var(--mt-blue-d);
  border-color: var(--mt-blue-d);
  color: #fff;
}

body.brand-maxitel .btn.btn-cta,
body.brand-maxitel .btn.orange {
  background-color: var(--mt-orange);
  border-color: var(--mt-orange);
  color: #fff;
}

body.brand-maxitel .btn.btn-cta:hover,
body.brand-maxitel .btn.btn-cta:focus,
body.brand-maxitel .btn.orange:hover,
body.brand-maxitel .btn.orange:focus {
  background-color: var(--mt-orange-dark);
  border-color: var(--mt-orange-dark);
  color: #fff;
}

body.brand-maxitel .label,
body.brand-maxitel .badge {
  border-radius: 10px;
  font-family: var(--mt-body);
  font-weight: 500;
}

body.brand-maxitel .label-primary,
body.brand-maxitel .badge-primary,
body.brand-maxitel .label.label-info,
body.brand-maxitel .badge.badge-info {
  background-color: var(--mt-blue-m);
}

body.brand-maxitel .label-warning,
body.brand-maxitel .badge-warning {
  background-color: var(--mt-orange);
}

body.brand-maxitel .pagination > li > a,
body.brand-maxitel .pagination > li > span {
  border-color: var(--mt-border);
  color: var(--mt-blue-m);
}

body.brand-maxitel .pagination > .active > a,
body.brand-maxitel .pagination > .active > a:hover,
body.brand-maxitel .pagination > .active > span {
  background-color: var(--mt-blue-m);
  border-color: var(--mt-blue-m);
  color: #fff;
}

/* Login page: logo and form render as one white card on the brand blue. */
body.brand-maxitel.login {
  background-color: var(--mt-blue-d) !important;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(63, 147, 212, 0.45), transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(237, 116, 22, 0.18), transparent 45%);
  background-attachment: fixed;
  min-height: 100vh;
}

body.brand-maxitel.login .backstretch {
  display: none;
}

body.brand-maxitel.login .logo {
  position: relative;
  z-index: 1;
  width: 360px;
  margin: 70px auto 0;
  padding: 36px 30px 10px;
  background: #fff;
  border-radius: 12px 12px 0 0;
}

body.brand-maxitel.login .logo img {
  width: 190px;
  max-width: 100% !important;
}

body.brand-maxitel.login .content {
  position: relative;
  z-index: 0;
  width: 360px;
  padding: 18px 30px 28px;
  background: #fff;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 24px 60px rgba(2, 16, 30, 0.45);
}

body.brand-maxitel.login .content h3,
body.brand-maxitel.login .content h4 {
  color: var(--mt-text);
  font-family: var(--mt-head);
  font-weight: 700;
}

body.brand-maxitel.login .content h4 {
  font-size: 15px;
  margin-bottom: 4px;
}

body.brand-maxitel.login .content p,
body.brand-maxitel.login .content label {
  color: var(--mt-muted);
  font-size: 13px;
}

body.brand-maxitel.login .content .form-group {
  margin-bottom: 14px;
}

body.brand-maxitel.login .content .input-icon > i {
  color: #9aa7b5;
  margin-top: 14px;
  margin-left: 12px;
}

body.brand-maxitel.login .content .form-control {
  height: 46px;
  padding-left: 40px;
  border: 1px solid #d5dbe3;
  border-radius: var(--mt-radius);
  color: var(--mt-text);
  font-size: 14px;
}

body.brand-maxitel.login .content .form-control:focus {
  border-color: var(--mt-blue-l);
  box-shadow: 0 0 0 3px rgba(63, 147, 212, 0.2);
}

body.brand-maxitel.login .content .form-actions {
  margin: 6px 0 0;
  padding: 0 0 18px;
}

body.brand-maxitel.login .content .form-actions .btn {
  float: none !important;
  width: 100%;
  height: 46px;
  font-size: 15px;
  font-weight: 600;
}

body.brand-maxitel.login .content .btn.blue,
body.brand-maxitel.login .content .btn.blue.pull-right {
  background-color: var(--mt-orange);
  border-color: var(--mt-orange);
  color: #fff;
}

body.brand-maxitel.login .content .btn.blue:hover,
body.brand-maxitel.login .content .btn.blue:focus {
  background-color: var(--mt-orange-dark);
  border-color: var(--mt-orange-dark);
}

body.brand-maxitel.login .content .btn.default {
  border-color: #d5dbe3;
}

body.brand-maxitel.login .content .forget-password {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--mt-border);
}

body.brand-maxitel.login .content .forget-password p,
body.brand-maxitel.login .content .create-account p {
  margin: 0;
}

body.brand-maxitel.login .content .create-account {
  border-top: 0;
  padding-top: 8px;
  margin-top: 8px;
}

body.brand-maxitel.login .content .create-account a,
body.brand-maxitel.login .content .forget-password a {
  color: var(--mt-blue-m);
  font-weight: 500;
}

body.brand-maxitel.login .copyright {
  color: rgba(255, 255, 255, 0.6);
  margin-top: 20px;
  font-size: 12px;
}

@media (max-width: 480px) {
  body.brand-maxitel.login .logo {
    width: auto;
    margin: 20px 15px 0;
  }

  body.brand-maxitel.login .content {
    width: auto;
    margin: 0 15px;
    padding: 18px 24px 24px;
  }
}