.mailbox .message-center a .mail-contnet .mail-desc,
.mailbox .message-center a .mail-contnet .time {
  white-space: break-spaces;
}

.password-strength-meter .progress {
  height: 1rem;
}

#registration label.form-check [type=checkbox]:checked,
#registration label.form-check [type=checkbox]:not(:checked) {
  position: relative;
  left: -9999px;
  opacity: 1;
  left: 0;
}

.no-margin {
  margin: 0
}

body {
  height: auto
}

h3 {
  font-size: 18px;
  line-height: 30px
}

.background_fff {
  background-color: #fff
}

.page-wrapper {
  position: relative;
  padding-bottom: 0;
}

body,
#main-wrapper,
.page-wrapper {
  background-color: var(--he-bg, #f3f6fa);
}

.page-wrapper .page-titles {
  padding-bottom: 15px;
}

.topbar .navbar-nav>.nav-item>.nav-link {
  font-size: 14px;
  line-height: 48px;
}

.sidebar-nav>ul>li>a i {
  font-size: 17px;
}

.sidebar-nav>ul>li>a {
  padding: 10px 14px;
  border-radius: 10px;
  margin: 4px 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-nav ul li a.active,
.sidebar-nav ul li a:hover {
  background-color: rgba(25, 118, 210, 0.08);
}

.sidebar-nav>ul>li.active>a {
  border-left: none;
  box-shadow: none;
  background-color: rgba(25, 118, 210, 0.1);
}

.sidebar-nav ul li a.active i,
.sidebar-nav ul li a:hover i {
  color: inherit;
}

.sidebar-nav > ul > li {
  margin-bottom: 4px;
}

.sidebar-nav > ul > li > ul {
  margin: 6px 12px 10px 20px;
  padding: 8px 8px 8px 14px;
  border-left: 1px solid var(--he-border, #d9e3ee);
  border-radius: 0 12px 12px 0;
  background: var(--he-bg-light, #f7f9fc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sidebar-nav > ul > li > ul.collapse.in {
  box-shadow: var(--he-sidebar-submenu-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 18px rgba(23, 43, 77, 0.05));
}

.sidebar-nav ul li ul li {
  position: relative;
}

/* Hidden dots and fixed-width hover masks */
.sidebar-nav ul li ul li::before,
.sidebar-nav #sidebarnav li::before,
.sidebar-nav #sidebarnav li a::before,
.sidebar-nav #sidebarnav > ul > li > ul > li.active::before {
  display: none !important;
  content: none !important;
}

.sidebar-nav ul#sidebarnav,
.sidebar-nav ul#sidebarnav ul,
.sidebar-nav ul#sidebarnav li {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.sidebar-nav ul li ul li a,
.sidebar-nav #sidebarnav li a {
  display: block !important;
  margin: 2px 10px !important; /* Left aligned with slight margin */
  padding: 9px 15px !important;
  border-radius: 8px !important;
  color: var(--he-sidebar-link, #54657d);
  font-size: 13px;
  line-height: 1.35;
  transition: all 0.22s ease;
  width: var(--he-sidebar-link-width, 218px) !important; /* Fixed width mask */
  max-width: 95%;
  text-align: left;
}

.sidebar-nav ul li ul li a.active,
.sidebar-nav ul li ul li a:hover,
.sidebar-nav #sidebarnav li a:hover,
.sidebar-nav #sidebarnav li a.active {
  padding-left: 12px !important;
  background-color: var(--he-sidebar-link-hover-bg, rgba(0, 0, 0, 0.06)) !important;
  color: var(--he-sidebar-link-hover, #22324a) !important;
}

.sidebar-nav ul li ul li.active > a,
.sidebar-nav ul li ul li.active > a.active,
.sidebar-nav #sidebarnav li.active > a {
  padding-left: 12px !important;
  background-color: var(--he-sidebar-link-active-bg, rgba(0, 0, 0, 0.08)) !important;
  color: var(--he-sidebar-link-active, #1f3047) !important;
  font-weight: 600 !important;
}

.sidebar-nav ul li ul li a i {
  width: 16px;
  margin-right: 6px;
  text-align: center;
  opacity: 0.85;
}

.btn {
  font-size: 14px;
}

.btn,
.btn-sm,
.btn-xs,
.btn-lg,
.badge,
.label {
  border-radius: 10px;
}

header.topbar.is_stuck {
  background: white;
}

.StripeElement {
  padding: 9px 12px;
  float: left;
  width: 100%;
}

body .footer {
  position: static;
  color: var(--he-fg-muted, #67757c);
  padding: 17px 15px;
  border-top: 1px solid var(--he-border-soft, rgba(120, 130, 140, 0.13));
  background: var(--he-bg, #ffffff);
  clear: both;
}

.user-profile {
  padding-top: 15px;
}

.left-sidebar .user-profile .profile-text {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 8px 10px;
  border-radius: 6px;
  margin: 8px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.left-sidebar .user-profile .profile-text h5 {
  font-size: 14px;
  color: #99abb4;
  margin-bottom: 0.25rem !important;
}

.left-sidebar .user-profile .user-info small {
  font-size: 11px;
  color: #99abb4;
  display: block;
}

footer.footer ul li a.btn {
  color: #404040
}

footer.footer .copyright {
  margin: 10px 0 0;
}

footer.footer .nav-link {
  color: #000
}

footer.footer ul li {
  padding: 0
}

.domain-pricing .tld-pricing-header div:nth-child(odd) {
  border-color: #1976d2;
}

.custom-navbar .navbar-light .navbar-nav .nav-item>a.nav-link {
  font-size: 12px;
  line-height: 48px;
}

.client-help .card .card-body {
  padding: 1.6rem 1.25rem
}

.page-titles {
  padding: 15px 10px 15px 14px
}

.custom-navbar .btn-circle.btn-lg {
  width: 45px;
  height: 45px;
  padding: 10px
}

.modal-localisation .modal-content {
  background-color: #5c4ac7
}

.modal-localisation .item-selector .item.active {
  background-color: #fff;
  border-color: #fff
}

.modal-localisation .modal-footer .btn {
  padding: 6px 20px;
  border: none;
  font-size: 16px;
}

.modal-localisation .modal-body {
  padding: 1rem 2rem
}

.modal-localisation .item-selector .item {
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 14px;
  line-height: 36px;
  text-align: left;
  padding: 0 15px;
}

.home-domain-search button,
.domain-check-availability,
#order-standard_cart .input-group-lg>.form-control,
#btnKnowledgebaseSearch,
#inputKnowledgebaseSearch,
.topbar ul.dropdown-user li {
  font-size: 14px;
}

#inputKnowledgebaseSearch {
  height: 60px
}

#captchaContainer p {
  text-align: center;
}

.product-desc ul {
  padding-left: 20px;
}

.domain-checker-container {
  background: -webkit-linear-gradient(top, #5c4ac7, #1976d2);
}

#order-standard_cart .default-captcha {
  background: #fff;
}

#order-standard_cart .cart-body {
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.tld-pricing-header .col-md-4 {
  padding-top: 7px
}

.topbar .user-menu > .nav-link {
  padding: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  height: 42px;
  line-height: 1;
  position: relative;
  top: 0;
}

.topbar .user-menu > .nav-link::after {
  display: none;
}

.topbar .user-menu > .nav-link .btn-circle.btn-lg {
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  border: 1px solid var(--he-dashboard-action-border, #d7e1eb);
  border-radius: 10px;
  background: var(--he-dashboard-action-bg, #f6f8fb);
  color: var(--he-dashboard-action-color, #3b4b62);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, opacity 0.22s ease;
}

.topbar .user-menu > .nav-link .user-menu__trigger {
  border-color: var(--he-dashboard-action-border, #d7e1eb);
  background: var(--he-dashboard-action-bg, #f6f8fb);
  color: var(--he-dashboard-action-color, #3b4b62);
}

.topbar .user-menu > .nav-link:hover .btn-circle.btn-lg,
.topbar .user-menu.show > .nav-link .btn-circle.btn-lg {
  border-color: var(--he-dashboard-action-hover-border, #c2cfdd);
  background: var(--he-dashboard-action-hover-bg, #e7edf4);
  color: var(--he-dashboard-action-hover-color, #22324a);
}

.topbar .user-menu > .nav-link .btn-circle.btn-lg i {
  margin: 0;
  font-size: 16px;
  line-height: 1;
}

.topbar .user-menu > .dropdown-menu {
  min-width: 240px;
  top: 100%;
  right: 0;
  left: auto;
  margin-top: 0;
  padding: 10px;
  border: 1px solid var(--he-border, #dde5ee);
  border-radius: 12px;
  background: var(--he-card-bg, rgba(255, 255, 255, 0.96));
  box-shadow: var(--he-shadow-card, 0 16px 34px rgba(22, 36, 64, 0.12));
  backdrop-filter: blur(10px);
  transform-origin: top right;
}

.topbar .navbar-nav.my-lg-0 > .nav-item.user-menu,
.topbar .navbar-nav.my-lg-0 > .nav-item.language-menu {
  position: relative;
  min-height: var(--he-shell-topbar-height, 66px);
}

.topbar .navbar-nav.my-lg-0 > .nav-item.user-menu {
  align-items: center;
}

.topbar .navbar-nav.my-lg-0 > .nav-item.user-menu > .nav-link,
.topbar .navbar-nav.my-lg-0 > .nav-item.language-menu > .nav-link {
  align-self: center;
}

.topbar .navbar-nav.my-lg-0 > .nav-item.user-menu > .dropdown-menu.dropdown-menu-right.scale-up,
.topbar .navbar-nav.my-lg-0 > .nav-item.user-menu > .dropdown-menu.dropdown-menu-right,
.topbar .navbar-nav.my-lg-0 > .nav-item.language-menu > .dropdown-menu.dropdown-menu-right.language-menu-panel {
  top: 100%;
  margin-top: 0;
  transform: translateY(0);
}

.topbar ul.dropdown-user {
  margin: 0;
  padding: 0;
  list-style: none;
}

.topbar ul.dropdown-user li {
  margin: 0;
}

.topbar ul.dropdown-user li + li {
  margin-top: 4px;
}

.topbar ul.dropdown-user li a,
.topbar ul.dropdown-user li .dropdown-item1 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--he-fg, #44556d);
  text-decoration: none;
  transition: background-color 0.22s ease, color 0.22s ease, opacity 0.22s ease;
}

.topbar ul.dropdown-user li a:hover,
.topbar ul.dropdown-user li .dropdown-item1:hover {
  background: var(--he-sidebar-link-hover-bg, #f1f5f9);
  color: var(--he-sidebar-link-hover, #22324a);
}

.topbar ul.dropdown-user li i {
  width: 16px;
  margin-right: 0;
  text-align: center;
  opacity: 0.85;
}

.topbar .language-menu {
  position: relative;
}

.topbar .language-menu > .language-menu-trigger {
  min-height: 42px;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--he-fg, #3b4b62);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, opacity 0.22s ease;
  box-shadow: none;
}

.topbar .language-menu:hover > .language-menu-trigger,
.topbar .language-menu.show > .language-menu-trigger {
  border-color: transparent;
  background: var(--he-sidebar-link-hover-bg, transparent);
  color: var(--he-sidebar-link-hover, #22324a);
}

.topbar .language-menu > .dropdown-menu {
  top: 100%;
  right: 0;
  left: auto;
  min-width: 220px;
  margin-top: 0;
  padding: 10px;
  border: 1px solid var(--he-border, #dde5ee);
  border-radius: 12px;
  background: var(--he-card-bg, rgba(255, 255, 255, 0.96));
  box-shadow: var(--he-shadow-card, 0 16px 34px rgba(22, 36, 64, 0.12));
  backdrop-filter: blur(10px);
  transform-origin: top right;
}

.topbar .language-menu .language-menu-item {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--he-fg, #44556d);
  text-decoration: none;
  transition: background-color 0.22s ease, color 0.22s ease, opacity 0.22s ease;
}

.topbar .language-menu .language-menu-item:hover {
  background: #f1f5f9;
  color: #22324a;
}

.sidebar-nav ul li ul li a {
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 12px;
}

.custom-login-card .input-group-text,
.custom-login-card .input-group-append i {
  color: #99abb4
}

.client-home-cards .btn {
  font-size: 12px;
  padding: 5px 12px
}

.client-home-cards .bg-color-red:hover {
  color: #fff;
  background-color: #d9534f;
  box-shadow: 0 14px 26px -12px rgba(217, 83, 79, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(217, 83, 79, 0.2)
}

.client-home-cards .card-header .bg-color-gold:hover {
  color: #fff;
  background-color: #f0ad4e;
  box-shadow: 0 14px 26px -12px rgba(240, 173, 78, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(240, 173, 78, 0.2)
}

.client-home-cards .card-header .bg-color-blue:hover {
  color: #fff;
  background-color: #5bc0de;
  box-shadow: 0 14px 26px -12px rgba(91, 192, 222, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(91, 192, 222, 0.2)
}

#tabOverview #domainForm .btn-group {
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}

#tabOverview #domainForm .btn-group button {
  padding: 10px 20px;
  border: 1px solid #e9ecef;
}

#tabOverview #domainForm .btn-group button:hover,
#tabOverview #domainForm .btn-group button:focus {
  color: #fff;
  background-color: #5c4ac7;
  box-shadow: none;
}

#tabOverview #domainForm .dropdown-item {
  font-size: 13px;
}

#tabOverview #domainForm .dropdown-item i {
  margin-right: 5px
}

#order-standard_cart .field,
#order-standard_cart .form-control {
  font-size: 14px;
}

.mini-sidebar .navbar-brand span .dark-logo {
  display: none;
}

.full-dark-theme {
  background: #272c33;
}

.rtl-demo .left-sidebar {
  right: 0
}

.rtl-demo .navbar-nav.mr-auto {
  order: 2;
  margin-left: auto;
  margin-right: 0
}

.rtl-demo .navbar-collapse {
  order: 1
}

.rtl-demo .navbar-header {
  order: 2
}

.rtl-demo .topbar .top-navbar {
  padding: 0 0 0 15px
}

.rtl-demo .page-wrapper {
  margin-left: 0;
  margin-right: 240px
}

.rtl-demo.mini-sidebar .page-wrapper {
  margin-right: 60px
}

.rtl-demo .right-side-toggle {
  left: 0;
  right: auto
}

.rtl-demo .right-sidebar.shw-rside {
  left: 0
}

@media screen and (max-width:1024px) and (min-width:577px) {
  h4 {
    font-size: 16px;
  }

  h3 {
    font-size: 16px;
  }

  article {
    font-size: 14px;
    line-height: 24px;
  }

  .p-5 {
    padding: 2rem;
  }

  .btn-success {
    font-size: 14px;
  }

  .client-help .card-group>.card {
    margin-bottom: 1px;
  }

  .domainchecker-homepage-captcha p {
    font-size: 14px;
    line-height: 20px;
  }

  .font-14 {
    font-size: 12px;
  }

  .card-title {
    line-height: 20px;
  }

  .mini-sidebar .footer {
    left: 0
  }
}

@media screen and (max-width:767px) {
  h3 {
    font-size: 16px;
  }

  h4 {
    font-size: 16px;
  }

  .topbar .top-navbar .navbar-nav>.nav-item>.nav-link {
    padding-left: 1rem
  }

  .client-help card {
    margin-bottom: 10px
  }

  .domainchecker-homepage-captcha p {
    font-size: 14px;
    text-align: center;
  }

  .domainchecker-homepage-captcha .col-xs-6:first-child {
    text-align: right;
  }

  .domainchecker-homepage-captcha .col-xs-6 {
    width: 50%
  }

  .home-domain-search .btn-link {
    width: 100%;
    margin-top: 20px;
  }

  .domain-title,
  .domain-outer-box .flex-wrap {
    text-align: center;
    display: flow-root;
  }

  .account-detail .card {
    margin-bottom: 10px
  }

  .font-14 {
    font-size: 12px;
  }

  .card {
    margin-bottom: 10px;
  }

  .announcement article {
    font-size: 14px;
  }

  .announcement .btn {
    font-size: 14px;
  }

  .mini-sidebar .footer {
    left: 0
  }

  .topbar .top-navbar .navbar-nav>.nav-item>.nav-link {
    padding-right: 0;
    padding-left: 10px
  }

  #inputCaptchaImage {
    margin-top: 8px
  }

  footer.footer ul li {
    margin-right: 0
  }

  footer.footer .btn-icon {
    width: 1.5rem
  }

  .copyright {
    padding: 0 70px
  }

  .user-profile {
    padding-top: 20px
  }

  .topbar ul.dropdown-user li a {
    font-size: 14px;
  }

  .sidebar-nav ul li ul li a {
    font-size: 12px;
    line-height: 1.4;
    padding: 6px 12px;
  }

  article {
    font-size: 14px;
  }
}

.topbar .top-navbar .navbar-header {
  line-height: var(--he-shell-topbar-height, 65px);
}

.topbar .navbar-header {
  width: var(--he-shell-sidebar-width, 274px);
  min-width: var(--he-shell-sidebar-width, 274px);
  min-height: var(--he-shell-topbar-height, 66px);
  height: var(--he-shell-topbar-height, 66px);
  border-right: 1px solid var(--he-border-soft, #e7edf4);
}

.topbar .navbar-collapse {
  min-height: var(--he-shell-topbar-height, 66px);
}

.topbar .navbar-nav.my-lg-0 {
  align-items: center;
}

.topbar .navbar-nav.my-lg-0 > .nav-item {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.topbar .navbar-brand {
  width: 100%;
  min-height: var(--he-shell-topbar-height, 66px);
  height: var(--he-shell-topbar-height, 66px);
  margin: 0;
  padding: 0 18px;
  display: flex;
  align-items: center;
}

.topbar .navbar-brand span {
  display: flex;
  align-items: center;
  width: 100%;
}

.topbar .navbar-brand .dark-logo {
  display: block;
  width: 100%;
  max-width: 156px;
  height: auto;
}

.home-domain-search .input-group {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.home-domain-search .input-group .form-control {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  box-shadow: none;
}

.home-domain-search .input-group-append,
.home-domain-search .input-group-btn {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 8px;
  margin-left: 0;
}

.home-domain-search .input-group-append .btn,
.home-domain-search .input-group-btn .btn,
.home-domain-search button.btn-primary,
.home-domain-search button.btn-success,
.home-domain-search .btn.btn-link {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #dbe4ee;
  background: #f7f9fc;
  color: #3f5169;
  font-weight: 600;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  margin-left: 0;
}

.home-domain-search .input-group-append .btn + .btn,
.home-domain-search .input-group-btn .btn + .btn {
  margin-left: 0;
}

.home-domain-search .input-group-btn input[type="submit"],
.home-domain-search .input-group-append input[type="submit"] {
  min-width: 92px;
}

.home-domain-search .input-group-append .btn:hover,
.home-domain-search .input-group-btn .btn:hover,
.home-domain-search button.btn-primary:hover,
.home-domain-search button.btn-success:hover,
.home-domain-search .btn.btn-link:hover {
  border-color: #c8d4e2;
  background: #eef3f8;
  color: #24354b;
}

.home-domain-search .btn.btn-link {
  min-height: auto;
  padding: 6px 0;
  border: 0;
  background: transparent;
}

@media (max-width: 767px) {
  .topbar .navbar-header {
    display: none;
  }

  .topbar .mobile-sidebartoggler {
    font-size: 20px;
    line-height: 1;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .page-wrapper {
    margin-left: 0 !important;
    padding-top: 70px;
  }

  .left-sidebar {
    width: min(274px, calc(100vw - 44px));
    transform: translateX(-100%);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    z-index: 1042;
    box-shadow: none;
  }

  body.show-sidebar {
    overflow: hidden;
  }

  body.show-sidebar .left-sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.2);
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 70px 0 0;
    background: rgba(15, 23, 42, 0.38);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    z-index: 1040;
  }

  body.show-sidebar .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
  }
}

  .mini-sidebar .btn-circle.btn-lg {
  width: 40px;
  height: 40px;
  padding: 8px 0
}

@media (min-width: 576px) {
  .card-group>.card {
    flex: auto
  }

  div#default-captcha-domainchecker {
    margin-bottom: 10px;
  }
}

@media(min-width:768px) {
  .mini-sidebar .left-sidebar {
    background: #ffffff;
    border-right: 1px solid #e9ecef;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  }

  .mini-sidebar .sidebar-nav {
    background: transparent;
  }

  .mini-sidebar .sidebar-nav #sidebarnav>li>a {
    text-align: center;
    padding: 12px;
    margin: 2px 5px;
    border-radius: 4px;
    transition: all 0.3s ease;
  }

  .mini-sidebar .sidebar-nav #sidebarnav>li:hover>a {
    background: #f8f9fa;
    color: #1976d2;
    transform: translateZ(0);
  }

  .mini-sidebar .sidebar-nav #sidebarnav>li:hover>ul {
    background: #ffffff;
    border: 1px solid #e9ecef;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    margin-left: 8px;
    padding: 5px 0;
  }

  .mini-sidebar .user-profile {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mini-sidebar .user-profile .profile-img {
    width: 40px;
    height: 40px;
    margin: 0;
  }
}

.guest-profile {
  padding: 15px 10px;
}

.guest-profile .btn {
  font-size: 11px;
  padding: 4px 8px;
  margin: 2px;
}

@media (min-width: 768px) {
  .sidebartoggler.hidden-sm-down {
    display: none;
  }
}

.fix-header .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.fix-header .topbar.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

.fix-header .page-wrapper {
  padding-top: var(--he-shell-topbar-height, 70px);
}

.fix-header .left-sidebar {
  top: var(--he-shell-topbar-height, 70px);
  height: calc(100vh - var(--he-shell-topbar-height, 70px));
  position: fixed;
  left: 0;
  bottom: 0;
  overflow: hidden;
}

@media (max-width: 767px) {
  .fix-header .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
  }

  .fix-header .page-wrapper {
    padding-top: var(--he-shell-topbar-height, 70px);
  }

  .fix-header .left-sidebar {
    top: var(--he-shell-topbar-height, 70px);
    height: calc(100vh - var(--he-shell-topbar-height, 70px));
    left: 0;
    bottom: 0;
    z-index: 1042;
  }

  .sidebar-backdrop {
    z-index: 1040;
  }
}

.scroll-sidebar {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.left-sidebar {
  padding-top: 0;
  position: fixed;
  top: var(--he-shell-topbar-height, 70px);
  left: 0;
  bottom: 0;
  z-index: 1028;
}

.action-icon-btns>div {
  display: flex;
}

.action-icon-btns a {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.client-primary-content {
  background: var(--he-bg, #fff);
  padding-top: 15px;
}

.client-primary-content>p:first-of-type {
  background: #f7f9fb;
  border: 1px solid #e9eef3;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  color: #2c3e50;
  font-size: 14px;
}

.client-primary-content form[action="/upgrade"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.client-primary-content #accountCount {
  font-weight: 600;
  color: #1f2937;
}

.client-primary-content #accountCount .number,
.client-primary-content #accountCount .limit {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  background: #eef6ff;
  color: #1976d2;
  border-radius: 6px;
  padding: 2px 6px;
  margin: 0 2px;
}

.client-primary-content .btn.btn-link.no-padding {
  font-weight: 700;
  color: #1976d2;
  padding: 0;
  margin-left: 4px;
  text-decoration: none;
}

.client-primary-content .btn.btn-link.no-padding:hover {
  text-decoration: underline;
}

.client-primary-content .compact-control-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  margin: 14px 0;
}

.client-primary-content #btnAddAccount {
  background: #1976d2;
  border: 1px solid #1976d2;
  color: #fff;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(25, 118, 210, 0.18);
}

.client-primary-content #btnAddAccount:hover {
  filter: brightness(0.96);
}

.client-primary-content #btnRefresh {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #374151;
  padding: 8px 12px;
  border-radius: 8px;
}

.client-primary-content #btnRefresh.disabled {
  opacity: .6;
  cursor: not-allowed;
}

.client-primary-content #oxSuccess,
.client-primary-content #oxLoadError {
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid transparent;
}

.client-primary-content #oxSuccess {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.client-primary-content #oxLoadError {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #7c2d12;
}

.client-primary-content .table.table-striped {
  border: 1px solid #eef2f6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(18, 38, 63, 0.06);
}

.client-primary-content .table.table-striped thead th {
  background: #f7f9fb;
  border-bottom: 1px solid #eef2f6;
  color: #111827;
  font-weight: 700;
  font-size: 13px;
  padding: 12px;
}

.client-primary-content .table.table-striped tbody td {
  vertical-align: middle;
  font-size: 14px;
  color: #1f2937;
  padding: 12px;
}

.client-primary-content .table.table-striped tbody tr:hover td {
  background: #fbfdff;
}

.client-primary-content .table.table-striped .btn {
  border-radius: 8px;
  padding: 6px 10px;
  line-height: 1.2;
  margin-right: 6px;
}

.client-primary-content .table.table-striped .btn-default {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #374151;
}

.client-primary-content .table.table-striped .btn-default:hover {
  background: #f5f7fa;
}

.client-primary-content .table.table-striped .btn-danger {
  border: 1px solid #dc3545;
}

.client-primary-content .table.table-striped tr.loading td {
  color: #6b7280;
  background: #fff;
}

.client-primary-content .table.table-striped tr.no-accounts td {
  color: #6b7280;
  background: #fff;
  text-align: center;
}

.client-primary-content .nav.nav-tabs.responsive-tabs-sm {
  margin-top: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.client-primary-content .nav.nav-tabs.responsive-tabs-sm>li>a {
  padding: 10px 14px;
  font-weight: 700;
  color: #6b7280;
  border: none;
  background: transparent;
}

.client-primary-content .nav.nav-tabs.responsive-tabs-sm>li.active>a,
.client-primary-content .nav.nav-tabs.responsive-tabs-sm>li>a:hover {
  color: #1976d2;
  position: relative;
}

.client-primary-content .nav.nav-tabs.responsive-tabs-sm>li.active>a::after,
.client-primary-content .nav.nav-tabs.responsive-tabs-sm>li>a:hover::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: #1976d2;
}

.client-primary-content .tab-content.product-details-tab-container {
  background: #fff;
  border: 1px solid #eef2f6;
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(18, 38, 63, 0.06);
}

.client-primary-content .tab-content.product-details-tab-container table.table td {
  padding: 10px 12px;
  border-top: 1px dashed #eef2f6;
}

.client-primary-content .modal .modal-content {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(18, 38, 63, 0.28);
}

.client-primary-content .modal .card-header.bg-primary {
  background: #1976d2;
}

.client-primary-content .modal .card-header .modal-title {
  color: #fff;
  font-weight: 700;
}

.client-primary-content .modal .form-group .field-error-msg {
  display: none;
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
}

.client-primary-content .modal .card-footer .btn {
  border-radius: 8px;
}

@media (max-width: 767px) {
  .client-primary-content .compact-control-bar {
    flex-wrap: wrap;
    gap: 6px;
  }

  .client-primary-content .tab-content.product-details-tab-container {
    padding: 12px;
  }

  .client-primary-content .table.table-striped .btn {
    margin-bottom: 6px;
  }
}

.page-wrapper .client-primary-content {
  max-width: 100%;
}

.store-shell {
  padding: 0 24px 18px 24px;
  background-color: #f3f6fa;
}

.page-wrapper > .store-shell > .row {
  margin-left: 0;
  margin-right: 0;
}

.store-primary-content {
  background: #f3f6fa;
  padding: 0;
}

@media (max-width: 767px) {
  .store-shell {
    padding: 0 14px 16px 14px;
  }

  .store-primary-content {
    padding: 0;
  }
}

.client-dashboard {
  padding-left: 24px;
  padding-right: 24px;
  margin-top: 0;
  max-width: 100%;
}

.client-dashboard__hero {
  background: #fff;
  border-radius: 12px;
  padding: 20px 24px;
  border: 1px solid #e6e8ef;
  margin-bottom: 16px;
}

.client-dashboard__hero .breadcrumb {
  margin-bottom: 10px;
  padding: 0;
  background: transparent;
}

.client-dashboard__hero-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.client-dashboard__hero .hero-copy {
  flex: 1 1 320px;
}

.client-dashboard__hero .hero-title {
  font-size: 26px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 6px 0;
}

.client-dashboard__hero .hero-subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 15px;
}

.hero-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hero-actions .btn-hero {
  border-radius: 10px;
  padding: 9px 18px;
  font-weight: 700;
  min-width: 120px;
}

.primary-content .btn,
.table-container .btn,
.invoice-back-btn {
  border-radius: 10px;
  min-height: 40px;
  padding: 8px 16px;
  font-weight: 700;
}

.client-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.stat-card {
  display: block;
  background: #fff;
  border: 1px solid #e4e7ef;
  border-radius: 12px;
  padding: 16px 18px;
  text-decoration: none;
  color: #0f172a;
  min-height: 130px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  border-color: #a7baf5;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.stat-card__value {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 6px;
}

.stat-card__label {
  font-size: 14px;
  color: #1f2937;
  margin-bottom: 2px;
}

.stat-card__meta {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
}

.client-dashboard__panels {
  margin-top: 20px;
  margin-bottom: 20px;
}

.client-dashboard__content {
  margin-left: -8px;
  margin-right: -8px;
}

.dashboard-column {
  padding-left: 8px;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dashboard-column .dashboard-panel {
  margin-bottom: 0;
}

.client-dashboard__panel-grid {
  row-gap: 12px;
}

.dashboard-panel-slot {
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 8px;
}

.dashboard-panel-slot .dashboard-panel {
  height: auto;
}

.client-dashboard__addon {
  margin-bottom: 16px;
}

.client-dashboard__panels .dashboard-panel {
  border-radius: 12px;
  border: 1px solid #e6e8ef;
  box-shadow: none;
}

.client-dashboard__panels .dashboard-panel .card-header {
  border-bottom: 1px solid #f0f2f7;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.client-dashboard__panels .dashboard-panel .card-header .float-right {
  margin-left: auto;
  position: static;
}

.client-dashboard__panels .dashboard-panel .card-header .card-title {
  margin-bottom: 0;
  line-height: 1.4;
}

.card-header-action {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  flex: 0 0 auto;
}

.client-dashboard__panels .dashboard-panel .card-header .btn {
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  white-space: nowrap;
}

.client-dashboard__panels .dashboard-panel .card-header .card-header-action,
.client-dashboard__panels .dashboard-panel .card-header .btn.btn-default,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-gold,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-blue,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-asbestos,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-red,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-teal,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-emerald {
  border: 1px solid var(--he-dashboard-action-border, #dbe4ee);
  background: var(--he-dashboard-action-bg, #f7f9fc);
  color: var(--he-dashboard-action-color, #3f5169);
}

.client-dashboard__panels .dashboard-panel .card-header .card-header-action:hover,
.client-dashboard__panels .dashboard-panel .card-header .btn.btn-default:hover,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-gold:hover,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-blue:hover,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-asbestos:hover,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-red:hover,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-teal:hover,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-emerald:hover {
  border-color: var(--he-dashboard-action-hover-border, #c8d4e2);
  background: var(--he-dashboard-action-hover-bg, #eef3f8);
  color: var(--he-dashboard-action-hover-color, #24354b);
}

.client-dashboard__panels .dashboard-panel .card-header .card-header-action i {
  margin-right: 6px;
  color: inherit;
}

.client-dashboard__panels .dashboard-panel .card-body {
  padding: 8px 18px;
}

.client-dashboard__panels .dashboard-panel .list-group {
  border-radius: 0;
}

.client-dashboard__panels .dashboard-panel .card-footer {
  background: #fafbfc;
  border-top: 1px solid #f0f2f7;
  padding: 14px 18px;
}

.dashboard-stack-full {
  margin-top: 0;
  margin-bottom: 0;
}

.dashboard-panel--backup {
  min-height: auto;
  display: flex;
  flex-direction: column;
}

.dashboard-panel--backup .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 18px;
  padding-right: 18px;
}

.dashboard-panel--backup .promo-banner,
.dashboard-panel--backup .panel-mc-sso {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dashboard-panel--backup .panel-mc-sso .row {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

.dashboard-panel--backup .panel-mc-sso [class*="col-"] {
  padding: 0;
  flex: 1 1 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dashboard-panel--backup .panel-mc-sso img {
  max-width: 280px;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.dashboard-panel--backup .panel-mc-sso form {
  width: 100%;
  max-width: 100%;
  background: #f7f9fb;
  border: 1px solid #e4e7ef;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0;
}

.dashboard-panel--backup .panel-mc-sso form select,
.dashboard-panel--backup .panel-mc-sso form button,
.dashboard-panel--backup .panel-mc-sso form small,
.dashboard-panel--backup .panel-mc-sso form span,
.dashboard-panel--backup .panel-mc-sso form input,
.dashboard-panel--backup .panel-mc-sso form .text {
  font-size: 14px;
}

.dashboard-panel--backup .panel-mc-sso form select {
  border-radius: 12px;
  border: 1px solid #d6dae5;
  padding: 10px 12px;
  width: 100%;
  max-width: 100%;
}

.dashboard-panel--backup .panel-mc-sso form button {
  padding: 10px 18px;
  border-radius: 12px;
  width: 100%;
  font-weight: 600;
}

.dashboard-panel--backup .panel-mc-sso form small {
  color: #94a3b8;
  text-align: left;
}

.dashboard-panel .list-group-item {
  padding: 12px 18px;
  border: none;
  border-top: 1px solid #f0f2f7;
  line-height: 1.4;
}

.dashboard-panel .list-group-item:first-child {
  border-top: none;
}

#ClientAreaHomePagePanels-Recent_Support_Tickets .list-group-item {
  padding: 10px 16px;
}

#ClientAreaHomePagePanels-Recent_Support_Tickets .list-group-item:nth-child(n+5) {
  display: none;
}

#ClientAreaHomePagePanels-Active_Products_Services .list-group-item:nth-child(n+5) {
  display: none;
}

#ClientAreaHomePagePanels-Recent_News .list-group-item:nth-child(n+4) {
  display: none;
}

.dashboard-panel .list-group-item .badge,
.dashboard-panel .list-group-item .label {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 12px;
}

@media (max-width: 767px) {
  .client-dashboard {
    padding-left: 14px;
    padding-right: 14px;
  }

  .client-dashboard__hero,
  .stat-card,
  .client-dashboard__panels .dashboard-panel {
    border-radius: 16px;
  }

  .client-dashboard__hero {
    padding: 18px;
  }

  .client-dashboard__hero-body,
  .client-dashboard__stats {
    gap: 12px;
  }

  .hero-actions {
    width: 100%;
    margin-left: 0;
    justify-content: stretch;
  }

  .hero-actions .btn-hero {
    width: 100%;
  }

  .client-dashboard__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-dashboard__panels .dashboard-panel .card-header {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 16px 18px;
  }

  .client-dashboard__panels .dashboard-panel .card-header .card-title {
    width: 100%;
    line-height: 1.35;
  }

  .card-header-action {
    width: 100%;
  }

  .client-dashboard__panels .dashboard-panel .card-header .btn {
    width: 100%;
    white-space: normal;
  }

  .client-dashboard__panels .dashboard-panel .list-group {
    display: grid;
    gap: 12px;
    padding: 12px;
    background: transparent;
  }

  .dashboard-panel .list-group-item,
  .dashboard-panel .list-group-item.list-group-item-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid #e6edf6;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
    line-height: 1.45;
  }

  .dashboard-panel .list-group-item:first-child {
    border-top: 1px solid #e6edf6;
  }

  .dashboard-panel .list-group-item .float-right,
  .dashboard-panel .list-group-item .pull-right,
  .dashboard-panel .list-group-item .badge,
  .dashboard-panel .list-group-item .label {
    align-self: flex-start;
    margin-left: 0;
    float: none;
  }

  .dashboard-panel .list-group-item .badge,
  .dashboard-panel .list-group-item .label {
    padding: 5px 10px;
    font-size: 0.72rem;
  }
}

.dashboard-panel .promo-banner,
.dashboard-panel .panel-mc-sso {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
}

.dashboard-panel .promo-banner img,
.dashboard-panel .panel-mc-sso img {
  max-height: 120px;
  width: auto;
}

.dashboard-panel .promo-banner .btn,
.dashboard-panel .panel-mc-sso .btn {
  padding: 6px 14px;
  border-radius: 12px;
  font-weight: 600;
}

.dashboard-panel .promo-banner small,
.dashboard-panel .panel-mc-sso small {
  font-size: 12px;
  line-height: 1.3;
}

#ClientAreaHomePagePanels-Manage_Backups .card-body,
#ClientAreaHomePagePanels-Manage_Backups .card-body .card-body,
.dashboard-panel[menuitemname*="Codeguard"] .card-body,
.dashboard-panel[menuitemname*="Codeguard"] .card-body .card-body {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 16px;
  padding-right: 16px;
}

#ClientAreaHomePagePanels-Manage_Backups .panel-mc-sso label,
#ClientAreaHomePagePanels-Manage_Backups .panel-mc-sso .choose-domain-label,
.dashboard-panel[menuitemname*="Codeguard"] .panel-mc-sso label,
.dashboard-panel[menuitemname*="Codeguard"] .panel-mc-sso .choose-domain-label {
  display: none;
}

.login-action-btn {
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 10px;
  min-width: 140px;
  text-align: center;
  background: #1976d2;
  border: 1px solid #1976d2;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(25, 118, 210, 0.2);
  transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.login-action-btn:hover,
.login-action-btn:focus {
  background: #1565c0;
  border-color: #1565c0;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(21, 101, 192, 0.24);
  transform: translateY(-1px);
}

.left-sidebar .user-profile .login-action-btn {
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 10px;
}

.left-sidebar .user-profile .login-btn {
  min-width: 140px;
  text-align: center;
}

.login-page {
  padding: 40px 0 60px;
}

.login-page__inner {
  max-width: 560px;
  margin: 0 auto;
}

.login-page .login-card {
  border-radius: 18px;
  border: 1px solid #e3e8f0;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.login-page .login-card .card-header {
  background: #1976d2;
  padding: 18px 26px;
  border-bottom: none;
}

.login-page .login-card .card-header h4 {
  font-size: 18px;
  letter-spacing: 0.02em;
}

.login-page .login-card .card-body {
  padding: 26px;
}

.login-page .login-card .card-footer {
  border-top: 1px solid #edf1f7;
}

.login-page .input-group-text {
  background: #f4f7fb;
  border-color: #d7deed;
  color: #5f6c85;
}

.login-page .form-control {
  border-color: #d7deed;
  border-radius: 10px;
  font-size: 14px;
}

.login-page .form-control:focus {
  border-color: #1b3c7a;
  box-shadow: 0 0 0 2px rgba(27, 60, 122, 0.15);
}

.login-page .login-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 18px;
}

.login-page .login-actions .btn {
  flex: 0 0 auto;
  padding: 10px 20px;
  border-radius: 10px;
  min-width: 140px;
  position: relative;
  z-index: 1;
}

.login-page .login-remember {
  margin: 0;
  margin-left: 4px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.login-page .btn-reveal-pw {
  border-radius: 3px;
}

@media (max-width: 575px) {
  .login-page {
    padding: 24px 0 40px;
  }

  .login-page .login-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .login-page .login-actions .btn {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .navbar-nav .user-menu>.dropdown-menu,
  .navbar-nav .language-menu>.dropdown-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.24s ease, visibility 0.24s ease, transform 0.24s ease;
    pointer-events: none;
  }

  .navbar-nav .user-menu:hover>.dropdown-menu,
  .navbar-nav .user-menu.show>.dropdown-menu,
  .navbar-nav .language-menu:hover>.dropdown-menu,
  .navbar-nav .language-menu.show>.dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .navbar-nav .language-menu-item {
    color: inherit;
    text-decoration: none;
  }
}

@media (max-width: 991px) {
  .navbar-nav .user-menu.show > .dropdown-menu,
  .navbar-nav .user-menu > .dropdown-menu.show {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.clientarea-shell {
  padding: 8px 24px 14px 10px;
  background-color: var(--he-bg, #fff);
}

/* Ticket Pages */
.ticket-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ticket-page__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  border: 1px solid #e6edf5;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
  box-shadow: 0 14px 35px rgba(20, 35, 90, 0.06);
}

.ticket-page__hero--split {
  align-items: stretch;
}

.ticket-page__eyebrow {
  margin-bottom: 6px;
  color: #5b6b82;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ticket-page__title {
  margin: 0 0 8px;
  color: #162032;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
}

.ticket-page__desc {
  margin: 0;
  max-width: 760px;
  color: #607086;
  font-size: 0.96rem;
  line-height: 1.7;
}

.ticket-page__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none;
}

.ticket-submit-page__tips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: min(520px, 100%);
}

.ticket-submit-page__tip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid #e4ebf3;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.ticket-submit-page__tip strong {
  color: #132238;
  font-size: 0.88rem;
  font-weight: 700;
}

.ticket-submit-page__tip span {
  color: #68788d;
  font-size: 0.84rem;
  line-height: 1.6;
}

.ticket-submit-page .card,
.ticket-list-page .table-container,
.ticket-view-page .view-ticket,
.ticket-view-page #ticketReplyContainer {
  border: 1px solid #e6edf5;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(20, 35, 90, 0.08);
}

.ticket-submit-page .card-body.extra-padding {
  padding: 28px;
}

.ticket-submit-page .form-group label {
  margin-bottom: 8px;
  color: #233044;
  font-size: 0.88rem;
  font-weight: 700;
}

.ticket-submit-page .form-control,
.ticket-submit-page select.form-control,
.ticket-submit-page textarea.form-control,
.ticket-view-page .form-control,
.ticket-view-page textarea.form-control {
  min-height: 46px;
  border: 1px solid #d9e3ef;
  border-radius: 14px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ticket-submit-page textarea.form-control,
.ticket-view-page textarea.form-control {
  min-height: 160px;
  padding-top: 12px;
}

.ticket-submit-page .form-control:focus,
.ticket-submit-page select.form-control:focus,
.ticket-submit-page textarea.form-control:focus,
.ticket-view-page .form-control:focus,
.ticket-view-page textarea.form-control:focus,
.table-toolbar .toolbar-search-input:focus {
  border-color: #4d8fe6;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12);
}

.ticket-submit-page .custom-file,
.ticket-view-page .custom-file {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 46px;
  border: 1px dashed #c7d6e7;
  border-radius: 14px;
  background: #f8fbff;
}

.ticket-submit-page .custom-file-label,
.ticket-view-page .custom-file-label {
  position: static;
  margin: 0;
  padding: 11px 14px;
  width: 100%;
  border: 0;
  background: transparent;
  color: #607086;
}

.ticket-submit-page .custom-file-input,
.ticket-view-page .custom-file-input {
  height: 100%;
}

.ticket-submit-page .input-group-append .btn,
.ticket-view-page .input-group-append .btn {
  border-radius: 14px;
  box-shadow: none;
}

.ticket-submit-page .form-actions,
.ticket-view-page .form-group.text-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.ticket-submit-page .form-actions .btn,
.ticket-view-page .form-group.text-center .btn {
  min-width: 140px;
  border-radius: 999px;
  padding: 11px 18px;
  box-shadow: none;
}

.primary-content .table-container,
.ticket-list-page .table-container {
  padding: 16px;
  border: 1px solid var(--he-border, #e6edf5);
  border-radius: 10px;
  background: var(--he-card-bg, #fff);
  box-shadow: var(--he-shadow-card, 0 14px 35px rgba(20, 35, 90, 0.08));
}

.dataTables_wrapper .dataTables_info {
  float: none;
  display: block;
  width: 100%;
  padding-top: 0;
  margin-bottom: 12px;
}

.dataTables_wrapper {
  display: flex;
  flex-direction: column;
}

.dataTables_wrapper .dataTables_filter {
  order: 1;
  width: 100%;
}

.dataTables_wrapper .dataTables_info {
  order: 2;
}

.dataTables_wrapper table,
.dataTables_wrapper .table {
  order: 3;
}

.dataTables_wrapper .dataTables_paginate {
  order: 4;
}

.table-toolbar-wrapper {
  display: block;
  width: 100%;
  clear: both;
  margin-bottom: 18px;
}

.table-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--he-border-soft, #e4ebf4);
  border-radius: 10px;
  box-shadow: none;
  background: var(--he-bg-light, #f7f9fc);
  width: 100%;
}

.status-tabs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  justify-self: start;
  min-height: 36px;
  padding: 4px;
  border-radius: 8px;
  background: var(--he-bg-light, #f1f0ea);
  color: var(--he-fg-muted, #7d776e);
}

.status-tabs::-webkit-scrollbar {
  display: none;
}

.status-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 12px;
  border: 0;
  background: transparent;
  color: var(--he-fg-muted, #7d776e);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  border-radius: 6px;
  box-shadow: none;
  transition: color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
}

.status-tab:hover:not(.active) {
  background-color: var(--he-sidebar-link-hover-bg, #eeece5);
  border-color: transparent;
  transform: none;
}

.status-tab.active {
  border-color: transparent;
  background: var(--he-card-bg, #faf9f5);
  color: var(--he-fg-strong, #171717);
  box-shadow: 0 1px 3px rgba(58, 54, 45, 0.08), 0 1px 2px rgba(58, 54, 45, 0.05);
}

.status-tab.active .count-badge {
    background: transparent;
    color: inherit;
}

.status-tab .count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  white-space: nowrap;
}

.table-toolbar .toolbar-search {
  display: flex;
  justify-content: flex-end;
  justify-self: end;
  width: 260px;
  min-width: 260px;
  margin-left: 0;
}

.table-toolbar .toolbar-search-input {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border-color: #d8e3ef;
  background: #fff;
  padding: 0 14px;
  font-size: 0.92rem;
}

table.table-list thead th {
  padding: 14px 16px;
  background: #f3f6fa;
  color: #32435c;
  border-bottom: 1px solid #dfe6ef;
}

table.table-list thead th.sorting,
table.table-list thead th.sorting_asc,
table.table-list thead th.sorting_desc,
table.table-list thead th.sorting_disabled,
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.sorting_disabled {
  background-image: none;
  background-color: #f3f6fa;
  color: #32435c;
}

table.clickable-table tbody td {
  vertical-align: middle;
  padding: 16px;
}

table.clickable-table tbody tr {
  cursor: pointer;
  border-bottom: 1px solid #e6eaf2;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

table.clickable-table.dataTable tbody tr:hover > td,
table.clickable-table tbody tr:hover > td {
  background-color: #f6f9fe;
}

@media (max-width: 767.98px) {
  .table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    padding: 14px;
    gap: 12px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .status-tabs {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .table-toolbar .toolbar-search {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: stretch;
    box-sizing: border-box;
  }

  .table-toolbar .toolbar-search-input,
  .table-toolbar-wrapper,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .status-tab {
    max-width: 100%;
  }
}

.primary-content .table-container .btn {
  font-weight: 700;
  box-shadow: none;
}

@media (min-width: 768px) {
  .left-sidebar {
    width: 274px;
  }

  .page-wrapper {
    margin-left: 274px;
    transition: margin-left 0.28s ease;
  }

  .fix-header .left-sidebar {
    width: 274px;
  }

  .mini-sidebar .left-sidebar {
    width: 60px;
  }

  .mini-sidebar .page-wrapper {
    margin-left: 60px;
  }
}

body.page-leaving #main-wrapper {
  opacity: 0.82;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.page-transition-loader {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(246, 249, 252, 0.28);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.26s ease, visibility 0.26s ease;
}

body.page-leaving .page-transition-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.page-transition-loader__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  margin: 0 auto;
  line-height: 0;
}

.page-transition-loader__dots span {
  display: block;
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8fa3bb;
  animation: pageLoaderDot 1s ease-in-out infinite;
}

.page-transition-loader__dots span:nth-child(2) {
  animation-delay: 0.16s;
}

.page-transition-loader__dots span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes navPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.97);
    opacity: 0.78;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pageLoaderDot {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  40% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

a.nav-transition-pulse,
button.nav-transition-pulse,
.btn.nav-transition-pulse {
  animation: navPulse 0.78s ease-in-out infinite;
}

#order-standard_cart .cart-sidebar,
#order-standard_cart .secondary-cart-sidebar,
#order-standard_cart .cart-body,
#order-standard_cart .secondary-cart-body,
#order-standard_cart .panel.card.card-sidebar,
#order-standard_cart .order-summary {
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 18px;
  box-shadow: 0 14px 35px rgba(20, 35, 90, 0.08);
}

#order-standard_cart .cart-body,
#order-standard_cart .secondary-cart-body {
  padding: 24px 26px;
}

#order-standard_cart .view-cart-items-header,
#order-standard_cart .products-header {
  padding: 14px 16px;
  border: 1px solid #e4ebf4;
  border-radius: 12px;
  background: #f7f9fc;
  color: #32435c;
}

#order-standard_cart .view-cart-items .item,
#order-standard_cart .products .product,
#order-standard_cart .cart-sidebar .list-group-item {
  border-color: #e7edf4;
}

#order-standard_cart .view-cart-items .item {
  padding: 18px 16px;
  border-radius: 12px;
  background: #fff;
}

#order-standard_cart .order-summary {
  padding: 18px;
}

#order-standard_cart .summary-container,
#order-standard_cart .summary-totals {
  border-top-color: #e4ebf4;
}

#order-standard_cart .btn,
#order-standard_cart .form-control,
#order-standard_cart .form-select,
#order-standard_cart select {
  border-radius: 10px;
}

#order-standard_cart .btn-checkout,
#order-standard_cart .btn-success,
#order-standard_cart .btn-primary {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  body.page-leaving #main-wrapper {
    transition: none;
  }

  .page-transition-loader,
  .page-transition-loader__dots span,
  a.nav-transition-pulse,
  button.nav-transition-pulse,
  .btn.nav-transition-pulse {
    animation: none;
    transition: none;
  }
}

.ticket-view-page .view-ticket {
  overflow: hidden;
}

.ticket-view-page .view-ticket > .card-body:first-child {
  padding: 28px;
  border-bottom: 1px solid #edf2f7;
}

.ticket-view-page .view-ticket .card-body {
  padding: 0 28px 22px;
}

.ticket-view-page .view-ticket > .card-body + .card-body {
  padding-top: 18px;
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
}

.ticket-view-page .view-ticket > .card-body > .ticket-reply {
  margin: 0;
}

.ticket-view-page .view-ticket > .card-body::before,
.ticket-view-page .view-ticket > .card-body::after {
  display: none;
  content: none;
}

.ticket-view-page .card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
  color: #162032;
  font-size: 1.1rem;
  font-weight: 700;
}

.ticket-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ticket-title-eyebrow {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ticket-title-main {
  color: #111827;
  font-size: 1.35rem;
  line-height: 1.2;
}

.ticket-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ticket-actions .btn {
  margin: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  box-shadow: none;
}

.ticket-view-page .view-ticket p.mb-3 {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5b6778;
  font-size: 0.95rem;
  font-weight: 500;
}

.ticket-view-page .view-ticket p.mb-3 strong {
  margin-left: 6px;
  color: #111827;
  font-weight: 700;
}

.ticket-info-section {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.ticket-info-section .row {
  margin: -6px;
  align-items: stretch;
}

.ticket-info-section .row > [class*="col-"] {
  padding: 6px;
}

.ticket-info-section .ticket-info-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  height: 100%;
  padding: 16px 18px;
  margin: 0;
  border: 1px solid #e8eef5;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ticket-info-section .ticket-info-item:hover {
  transform: translateY(-2px);
  border-color: #d4e3f5;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.ticket-info-section .ticket-info-item i {
  width: 20px;
  margin: 0;
  font-size: 18px;
  text-align: center;
}

.ticket-info-section .info-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ticket-info-section .info-label {
  margin: 0;
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ticket-info-section .info-label::after {
  display: none;
}

.ticket-info-section .info-value {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #111827;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
  word-break: break-word;
}

.ticket-info-section .info-value .label,
.ticket-reply .label.requestor-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ticket-reply {
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid #e7edf3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.ticket-reply.staff {
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  border-color: #d8e6fb;
}

.ticket-reply .posted-by {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #f8fafc;
  border-bottom: 0;
  color: #6b7280;
  font-size: 0.92rem;
}

.ticket-reply.staff .posted-by {
  background: rgba(25, 118, 210, 0.08);
  color: #1d4ed8;
}

.ticket-reply .posted-by-name {
  color: #111827;
  font-weight: 700;
}

.ticket-reply .message,
.ticket-reply .message.p-3,
.ticket-reply div.message,
.card-body .ticket-reply .message,
.ticket-reply.markdown-content .message {
  padding: 18px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ticket-reply .attachments {
  padding: 0 18px 18px;
  color: #4b5563;
}

.ticket-reply .attachment-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ticket-reply .attachment-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e5ebf2;
  border-radius: 12px;
  background: #fff;
  color: #334155;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.ticket-reply .attachment-list li a:hover {
  background: #f8fbff;
  border-color: #c8d8ee;
  text-decoration: none;
}

.ticket-view-page #ticketReplyContainer .card-body {
  padding: 24px 28px;
}

.ticket-view-page #ticketReplyContainer .card-title {
  margin-bottom: 18px;
  color: #111827;
  font-size: 1.05rem;
  font-weight: 700;
}

@media (max-width: 1199px) {
  .ticket-submit-page__tips {
    grid-template-columns: 1fr;
    min-width: 280px;
  }
}

@media (max-width: 767px) {
  .ticket-page__hero,
  .ticket-submit-page .card-body.extra-padding,
  .ticket-view-page .view-ticket > .card-body:first-child,
  .ticket-view-page #ticketReplyContainer .card-body {
    padding: 18px;
  }

  .ticket-page__hero,
  .ticket-page__hero--split,
  .ticket-view-page .card-title {
    flex-direction: column;
  }

  .ticket-page__cta,
  .ticket-actions .btn,
  .ticket-submit-page .form-actions .btn,
  .ticket-view-page .form-group.text-center .btn {
    width: 100%;
  }

  .ticket-list-page .table-container,
  .ticket-view-page .view-ticket .card-body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .ticket-info-section .ticket-info-item {
    min-height: 84px;
    padding: 14px 16px;
  }

  .ticket-reply .posted-by {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================
   INVOICE PAGE STYLES (Clean & Professional)
   ========================================= */

body.viewinvoice {
  background-color: #f7f9fc;
  margin: 0;
  padding-top: 30px;
  /* Use padding for top spacing */
  padding-bottom: 30px;
}

/* Container */
.invoice-container {
  background: #ffffff;
  padding: 20px 50px;
  /* Force internal padding */
  border-radius: 8px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
  margin: 0 auto 30px auto;
  /* No top margin to avoid collapse */
  border: 1px solid #e1e4e8;
  width: 800px;
  max-width: 95%;
  /* Responsive fallback for small screens */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Header - Elegant & Aligned */
.invoice-header {
  margin-bottom: 40px;
  border-bottom: 1px solid #e1e4e8;
  padding-bottom: 30px;
  padding-top: 30px;
  /* Add space above logo */
  display: flex;
  /* Force flex for alignment */
  align-items: center;
  /* Vertically center logo and status */
  flex-wrap: wrap;
}

.invoice-header .invoice-col {
  margin-bottom: 0;
  /* Removing bottom margin for better alignment */
}

.invoice-header .invoice-col:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

/* Fix Status Badge Positioning */
.invoice-status {
  text-align: right;
  margin-top: 10px;
  /* Slight adjustment */
}

@media (min-width: 576px) {
  .invoice-status {
    margin-top: 0;
    text-align: right;
  }
}

.invoice-header h3 {
  margin-top: 15px;
  color: #32325d;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-size: 24px;
}

/* Typography - Elegant Brand Colors */
.invoice-col strong {
  color: #59698d;
  /* Softer blue-gray */
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.2px;
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

.invoice-col address,
.invoice-col span.small-text {
  color: #525f7f;
  font-size: 14px;
  line-height: 1.7;
}

/* Status Badges - Softer but Clear */
.invoice-status span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 18px;
  border-radius: 4px;
  /* Slightly more square for professional look */
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: white;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.invoice-status .unpaid {
  background-color: #f5365c;
}

.invoice-status .paid {
  background-color: #2dce89;
}

.invoice-status .refunded {
  background-color: #34495e;
}

/* Elegant dark slate */
.invoice-status .cancelled {
  background-color: #adb5bd;
}

.invoice-date-due {
  margin-top: 12px;
  text-align: right;
}

.payment-btn-container {
  margin-top: 16px;
}

.invoice-container .payment-btn-container table {
  margin: 0 auto;
}

.invoice-container .payment-btn-container a,
.invoice-container .payment-btn-container button,
.invoice-container .payment-btn-container input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  vertical-align: middle;
}

.invoice-container .payment-btn-container img,
.invoice-container .payment-btn-container i,
.invoice-container .payment-btn-container svg {
  display: block;
  flex: 0 0 auto;
  vertical-align: middle;
}

.invoice-container .payment-btn-container img {
  max-height: 28px;
  width: auto;
}

.invoice-container .payment-btn-container .hantepay-container {
  display: flex;
  justify-content: center;
}

.invoice-container .payment-btn-container #hantepay_pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  line-height: 1.2;
}

.invoice-container .payment-btn-container #hantepay_pay img {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0;
  flex: 0 0 34px;
  object-fit: contain;
}

.invoice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}

.invoice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.invoice-action-btn,
.invoice-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid #d7e3f2;
  background: #fff;
  color: #24364d;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.invoice-action-btn:hover,
.invoice-back-btn:hover {
  transform: translateY(-1px);
  border-color: #bfd3eb;
  background: #f8fbff;
  color: #16283d;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
}

.invoice-action-btn i,
.invoice-back-btn i {
  font-size: 0.95rem;
}

.invoice-action-btn--print {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
}

.invoice-action-btn--download {
  border-color: #c8decb;
  background: linear-gradient(180deg, #ffffff 0%, #f2fbf5 100%);
  color: #1f6a43;
}

.invoice-action-btn--download:hover {
  border-color: #b4d2b9;
  background: linear-gradient(180deg, #ffffff 0%, #eaf8ef 100%);
  color: #185236;
}

.invoice-back-btn {
  min-width: 220px;
  background: transparent;
}

@media (max-width: 575.98px) {
  .invoice-header .invoice-col:last-child {
    align-items: center;
  }

  .invoice-date-due,
  .invoice-status {
    text-align: center;
  }

  .invoice-toolbar,
  .invoice-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  .invoice-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .invoice-back-btn,
  .invoice-action-btn {
    width: 100%;
  }

  .invoice-actions {
    flex-wrap: wrap;
    width: 100%;
  }
}

/* Tables - Elegant Structure */
.invoice-container .table thead td {
  background-color: #f6f9fc;
  color: #8898aa;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.8px;
  border-bottom: 1px solid #e9ecef;
  padding: 15px;
}

.invoice-container .table tbody td {
  padding: 18px 15px;
  border-top: 1px solid #f1f3f5;
  color: #525f7f;
  vertical-align: middle;
}

/* Total Row - Pastel Highlight */
.invoice-container tr.total-row-container {
  background-color: #f7fafc;
  /* Very light subtle gray/blue for total row */
}

.invoice-container .total-row {
  font-size: 18px;
  font-weight: 800;
  color: #32325d;
  /* Dark elegant blue */
  border-top: 2px solid #5e72e4;
  /* Brand accent line */
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Card cleaning */
.invoice-container .card {
  border: none;
  box-shadow: none;
  background: transparent;
}

.invoice-container .card-header {
  background: transparent;
  border-bottom: 2px solid #e9ecef;
  /* Structure back */
  padding: 0 0 15px 0;
  margin-bottom: 20px;
}

.invoice-container .card-title strong {
  color: #32325d;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Logo */
.invoice-container img {
  max-height: 50px;
  /* Smaller logo */
  margin-bottom: 15px;
}

body.popupwindow {
  margin: 0;
  padding: 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f3f6fa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.popupwindow h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: #1f2f46;
}

body.popupwindow .popupcontainer {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 18px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e4ebf4;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  overflow: auto;
}

body.popupwindow .textcenter {
  text-align: center;
}
/* Harmonize Domain Renewals and Cart Pages */
.domain-checker-container, 
.home-search {
  background: #f8fafc !important; /* Neutral light background instead of yellow */
  border-bottom: 1px solid #e2e8f0;
  padding: 40px 0 !important;
}

.domain-checker-container h2,
.home-search h1,
.home-search h2 {
  color: #1e293b !important;
}

/* Redefine cart/domain primary and success buttons without global hard overrides */
.home-domain-search .btn-primary,
.domain-checker-container .btn-primary,
.home-search .btn-primary,
#btnCheckAvailability {
  background-color: #3b82f6;
  border-color: #3b82f6;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.home-domain-search .btn-primary:hover,
.domain-checker-container .btn-primary:hover,
.home-search .btn-primary:hover,
#btnCheckAvailability:hover {
  background-color: #2563eb;
  border-color: #2563eb;
  transform: translateY(-1px);
}

.btn-success {
  background-color: #10b981;
  border-color: #10b981;
}

.btn-success:hover {
  background-color: #059669;
  border-color: #059669;
}

.topbar .user-menu > .nav-link .user-menu__trigger {
  background-color: #14b8a6;
  border-color: #14b8a6;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.28);
}

.topbar .user-menu > .nav-link:hover .user-menu__trigger,
.topbar .user-menu.show > .nav-link .user-menu__trigger {
  background-color: #0f9f90;
  border-color: #0f9f90;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 159, 144, 0.34);
}

/* Modernize panels and cart cards without forcing every card globally */
.cart-body .panel-default > .panel-heading,
.cart-body .card-header,
.domain-checker-container .card-header,
.home-search .card-header {
  background-color: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
  font-weight: 600;
  padding: 12px 20px;
}

.login-page .login-card .card-header {
  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
  border-bottom: 0;
  color: #ffffff;
}

.login-page .login-card .card-header h4 {
  color: #ffffff;
}

.panel-title {
  color: #334155;
  font-size: 1.05rem;
}

.cart-body .panel,
.domain-checker-container .panel,
.home-search .panel {
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}

/* Input refinements */
#inputDomain, 
#inputCaptcha {
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 10px 15px !important;
}

/* Hide legacy background if present */
.domain-checker-container::before {
  display: none !important;
}
/* Premium Redesign for Domain Renewal and Order Summary */
.secondary-cart-sidebar .order-summary,
.order-summary {
    background: var(--he-card-bg, #ffffff);
    border: 1px solid var(--he-border, #e9eff6);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: var(--he-shadow-card, 0 10px 30px rgba(30, 41, 59, 0.04));
}

.order-summary h2,
.order-summary h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--he-fg-strong, #1e293b);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.product-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--he-fg-strong, #0f172a);
    display: block;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--he-border-soft, #3b82f6); /* Premium brand accent */
}

.product-group {
    font-size: 14px;
    color: var(--he-fg-muted, #64748b);
    display: block;
    margin-bottom: 18px;
    font-weight: 500;
}

.order-summary .clearfix {
    margin-bottom: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--he-border-soft, #f1f5f9);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-summary .clearfix:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.order-summary .pull-left, 
.order-summary .float-left {
    color: var(--he-fg-muted, #475569);
    font-size: 0.95rem;
    font-weight: 500;
}

.order-summary .pull-right, 
.order-summary .float-right {
    color: var(--he-fg-strong, #1e293b);
    font-weight: 700;
    font-size: 0.95rem;
}

.summary-totals {
    margin: 24px 0;
    padding: 18px 0;
    border-top: 1px solid var(--he-border-soft, #e2e8f0);
    border-bottom: 1px solid var(--he-border-soft, #e2e8f0);
}

.summary-totals .clearfix {
    border-bottom: none;
    margin-bottom: 10px;
    padding: 5px 0;
}

/* Total Section - Premium Soft Highlight */
.total-due-today {
    background: var(--he-bg-light, #f0f9ff); /* Soft sky blue tint */
    color: var(--he-fg-strong, #0c4a6e);
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    margin-top: 25px;
    border: 1px solid var(--he-border-soft, #bae6fd);
    box-shadow: none;
}

.total-due-today .amt {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--he-fg-strong, #0369a1);
    margin-bottom: 4px;
    line-height: 1.1;
}

.total-due-today span:last-child,
.total-due-today .lbl {
    font-size: 13px;
    color: var(--he-fg-muted, #0ea5e9);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Remove button highlight only in order summary, not globally */
#orderSummary .clearfix a {
    color: #ef4444;
    font-weight: 600;
    transition: all 0.2s ease;
}

#orderSummary .clearfix a:hover {
    color: #dc2626;
    text-decoration: underline;
}

/* Redefine main action button to be more premium */
#btnGoToCart {
    background: #3b82f6;
    border: none;
    border-radius: 12px;
    padding: 16px 32px;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease !important;
    margin-top: 10px;
}

#btnGoToCart:hover {
    background: #2563eb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.4) !important;
}

/* Preloader Persistence Control */
body.preloader-active .preloader {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Responsive Cart Summary Fix - Stacking on Narrow Viewports/Sidebar present */
@media (max-width: 1400px) {
    .order-summary .clearfix {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        padding: 12px 0 !important;
    }
    
    .order-summary .pull-right, 
    .order-summary .float-right {
        text-align: left !important;
        align-self: flex-start !important;
        width: 100% !important;
        padding-top: 2px !important;
        font-size: 1.1rem !important;
    }

    .order-summary {
        width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .total-due-today {
        padding: 20px 15px !important;
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .total-due-today > .amt {
        font-size: 24px !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
    
    .total-due-today > span:last-child,
    .total-due-today > .lbl {
        display: block !important;
        text-align: left !important;
    }
}

/* Sidebar and layout overrides for specific cart pages */
body.page-domainregister .cart-sidebar,
body.page-configureproduct .cart-sidebar,
body.page-configureproductdomain .cart-sidebar {
    display: none !important;
}
body.page-domainregister .cart-body,
body.page-configureproduct .cart-body,
body.page-configureproductdomain .cart-body {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

@media (max-width: 1400px) {
    body.page-domain-renewals .secondary-cart-body,
    body.page-domain-renewals .secondary-cart-sidebar,
    body.page-configureproduct .secondary-cart-body,
    body.page-configureproduct .secondary-cart-sidebar,
    body.page-configureproductdomain .secondary-cart-body,
    body.page-configureproductdomain .secondary-cart-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
    }
    body.page-domain-renewals .secondary-cart-sidebar,
    body.page-configureproduct .secondary-cart-sidebar,
    body.page-configureproductdomain .secondary-cart-sidebar {
        margin-top: 30px !important;
        padding-left: 0 !important;
    }
}

/* ====== CART GLOBAL LAYOUT REBUILD ====== */
/* 1. Neutralize all unpredictable outer wrappers */
body[class*="page-"] .container-fluid.store-shell,
body[class*="page-"] .store-primary-content {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    background: var(--he-bg, #f3f6fa);
}

/* 2. Style the main cart container as a premium card */
body[class*="page-"] #order-standard_cart {
    margin: 16px auto;
    padding: 24px;
    border: 1px solid var(--he-border, #e6edf5);
    border-radius: 10px;
    background: var(--he-card-bg, #ffffff);
    box-shadow: var(--he-shadow-card, 0 4px 20px rgba(0,0,0,0.03));
    max-width: 1350px;
}

/* 3. Strip structural rows of negative margins to prevent bleeding */
body[class*="page-"] #order-standard_cart .row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

/* 4. Fine-tune internal columnspacing (The true layout) */
/* Left overarching navigation */
body[class*="page-"] .cart-sidebar {
    padding-right: 24px;
    padding-left: 0;
}

/* Right overarching content zone */
body[class*="page-"] .cart-body {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* The split layout IN the right content zone (Configuration pages) */
body[class*="page-"] #order-standard_cart .secondary-cart-body {
    padding-right: 24px;
    padding-left: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

body[class*="page-"] #order-standard_cart .secondary-cart-sidebar {
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Responsive crunch */
@media (max-width: 1200px) {
    body[class*="page-"] #order-standard_cart {
        padding: 20px;
        margin: 15px;
    }
    
    body[class*="page-"] .cart-sidebar {
        padding-right: 0;
        margin-bottom: 25px;
    }

    body[class*="page-"] #order-standard_cart .secondary-cart-body {
        padding-right: 0;
    }
}
/* ====== END CART REBUILD ====== */

/* Add a background color to the global left sidebar */
.scroll-sidebar {
    background-color: var(--he-bg, #f8f9fc);
}
@media (max-width: 1400px) {
    body[class*="page-"] #order-standard_cart .secondary-cart-body {
        padding-right: 0 !important;
    }
}

/* Button styles for table management buttons (View/Manage) */
.table-container .btn-hero {
    color: var(--he-dashboard-action-color, #3f5169);
    border: 1px solid var(--he-dashboard-action-border, #dbe4ee);
    background: var(--he-dashboard-action-bg, #f7f9fc);
    border-radius: 6px;
    padding: 0 12px;
    min-height: 32px;
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(58, 54, 45, 0.05);
    margin: 2px 0;
}

.table-container .btn-hero:hover {
    background-color: var(--he-dashboard-action-hover-bg, #eef3f8);
    border-color: var(--he-dashboard-action-hover-border, #c8d4e2);
    color: var(--he-dashboard-action-hover-color, #24354b);
    transform: none;
    box-shadow: 0 1px 2px rgba(58, 54, 45, 0.05);
    text-decoration: none;
}

.services-list-table td strong {
    display: inline-block;
    margin-bottom: 4px;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.services-list-table .hidden,
.services-list-table .hidden-status {
    display: none !important;
}

.services-list-table__primary {
    display: inline-block;
    max-width: 100%;
}

.services-list-table__secondary {
    display: block;
    max-width: 100%;
}

.invoice-list-table .w-hidden,
.invoice-list-table .hidden-status,
.domain-list-table .w-hidden,
.domain-list-table .hidden-status,
.ticket-list-table .w-hidden,
.ticket-list-table .hidden-status,
#tableDomainsList .w-hidden,
#tableDomainsList .hidden-status,
#tableTicketsList .w-hidden,
#tableTicketsList .hidden-status {
    display: none;
}

.invoice-list-table__primary,
.domain-list-table__primary,
.ticket-list-table__primary {
    display: block;
    max-width: 100%;
}

.domain-list-table td strong,
#tableDomainsList td strong,
.ticket-list-table .ticket-subject,
.ticket-list-table .ticket-number,
#tableTicketsList .ticket-subject,
#tableTicketsList .ticket-number {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ticket-list-table__subject-link,
#tableTicketsList .ticket-list-table__subject-link {
    display: inline-block;
    max-width: 100%;
    color: inherit;
}

@media (max-width: 767px) {
    .services-list-table-container {
        overflow: visible;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .services-list-table {
        border: 0;
        display: contents;
        width: auto;
        max-width: none;
        box-sizing: border-box;
    }

    .services-list-table thead {
        display: none;
    }

    .services-list-table tbody,
    .services-list-table tr,
    .services-list-table td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .services-list-table tbody tr {
        position: relative;
        margin-bottom: 16px;
        padding: 18px 20px 16px;
        border: 1px solid #e4ebf4;
        border-bottom: 0;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 12px 28px rgba(20, 35, 90, 0.08);
        overflow: hidden;
    }

    .services-list-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .services-list-table tbody tr:hover > td,
    .services-list-table tbody tr:active > td {
        background-color: transparent !important;
    }

    .services-list-table tbody tr:hover,
    .services-list-table tbody tr:active {
        background-color: #f8fbff;
    }

    .services-list-table tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
        padding: 10px 10px 10px 0;
        border: 0;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .services-list-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 68px;
        max-width: 68px;
        font-size: 12px;
        line-height: 1.45;
        font-weight: 700;
        color: #5d7088;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .services-list-table tbody td > :not(.hidden):not(.hidden-status) {
        flex: 1 1 auto;
        min-width: 0;
    }

    .services-list-table__ssl-cell {
        position: absolute;
        top: 16px;
        right: 16px;
        width: auto !important;
        padding: 0 !important;
    }

    .services-list-table__ssl-cell::before {
        display: none;
    }

    .services-list-table tbody td:nth-child(2) {
        display: block;
        padding-right: 32px;
        padding-top: 0;
    }

    .services-list-table tbody td:nth-child(2)::before {
        display: block;
        max-width: none;
        margin-bottom: 8px;
    }

    .services-list-table tbody td:nth-child(2) small {
        display: block;
        margin-top: 6px;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .services-list-table tbody td:nth-child(2),
    .services-list-table tbody td:nth-child(2) strong,
    .services-list-table tbody td:nth-child(2) small {
        max-width: 100%;
        min-width: 0;
    }

    .services-list-table tbody td:nth-child(3),
    .services-list-table tbody td:nth-child(4),
    .services-list-table tbody td:nth-child(5) {
        align-items: center;
    }

    .services-list-table tbody td:nth-child(3) > :not(.hidden):not(.hidden-status),
    .services-list-table tbody td:nth-child(4) > :not(.hidden):not(.hidden-status),
    .services-list-table tbody td:nth-child(5) > :not(.hidden):not(.hidden-status) {
        display: block;
        width: 100%;
    }

    .services-list-table tbody td:nth-child(3) small,
    .services-list-table tbody td:nth-child(4) small,
    .services-list-table tbody td:nth-child(5) small {
        display: block;
        margin-top: 4px;
        line-height: 1.45;
    }

    .services-list-table tbody td:nth-child(3) .services-list-table__primary,
    .services-list-table tbody td:nth-child(4) .services-list-table__primary {
        white-space: nowrap;
    }

    .services-list-table tbody td:nth-child(3) .services-list-table__secondary {
        margin-top: 3px;
        white-space: nowrap;
    }

    .services-list-table tbody td:nth-child(3) .label,
    .services-list-table tbody td:nth-child(5) .label {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        margin-top: 1px;
    }

    .services-list-table tbody td:nth-child(5) .label {
        width: calc(100% - 10px);
        margin-right: 10px;
        justify-content: center;
        box-sizing: border-box;
    }

    .services-list-table__action-cell {
        display: block !important;
        padding-bottom: 0 !important;
    }

    .services-list-table__action-cell::before {
        display: none;
    }

    .services-list-table__action-cell .btn {
        width: calc(100% - 10px);
        min-height: 44px;
        margin-top: 4px;
        margin-right: 10px;
        box-sizing: border-box;
    }

    .invoice-list-table-container {
        overflow: visible;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .invoice-list-table {
        border: 0;
        display: contents;
        width: auto;
        max-width: none;
        box-sizing: border-box;
    }

    .invoice-list-table thead {
        display: none;
    }

    .invoice-list-table tbody,
    .invoice-list-table tr,
    .invoice-list-table td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .invoice-list-table tbody tr {
        position: relative;
        margin-bottom: 16px;
        padding: 18px 20px 16px;
        border: 1px solid #e4ebf4;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 12px 28px rgba(20, 35, 90, 0.08);
        overflow: hidden;
    }

    .invoice-list-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .invoice-list-table tbody tr:hover > td,
    .invoice-list-table tbody tr:active > td {
        background-color: transparent;
    }

    .invoice-list-table tbody tr:hover,
    .invoice-list-table tbody tr:active {
        background-color: #f8fbff;
    }

    .invoice-list-table tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
        padding: 10px 10px 10px 0;
        border: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .invoice-list-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 88px;
        max-width: 88px;
        font-size: 12px;
        line-height: 1.45;
        font-weight: 700;
        color: #5d7088;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .invoice-list-table tbody td > :not(.w-hidden):not(.hidden-status) {
        flex: 1 1 auto;
        min-width: 0;
    }

    .invoice-list-table tbody td:first-child {
        display: block;
        padding-top: 0;
    }

    .invoice-list-table tbody td:first-child::before {
        display: block;
        max-width: none;
        margin-bottom: 8px;
    }

    .invoice-list-table tbody td:first-child strong {
        display: block;
        color: #111827;
        font-size: 1.05rem;
        line-height: 1.35;
        word-break: break-word;
    }

    .invoice-list-table tbody td:nth-child(4) .invoice-list-table__primary {
        white-space: nowrap;
        font-weight: 700;
    }

    .invoice-list-table tbody td:nth-child(5) .label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 10px);
        min-height: 30px;
        margin-right: 10px;
        box-sizing: border-box;
    }

    .domain-list-table-container,
    .ticket-list-table-container {
        overflow: visible;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .domain-list-table,
    .ticket-list-table,
    #tableDomainsList,
    #tableTicketsList {
        border: 0;
        display: contents;
        width: auto;
        max-width: none;
        box-sizing: border-box;
    }

    .domain-list-table thead,
    .ticket-list-table thead,
    #tableDomainsList thead,
    #tableTicketsList thead {
        display: none;
    }

    .domain-list-table tbody,
    .domain-list-table tr,
    .domain-list-table td,
    .ticket-list-table tbody,
    .ticket-list-table tr,
    .ticket-list-table td,
    #tableDomainsList tbody,
    #tableDomainsList tr,
    #tableDomainsList td,
    #tableTicketsList tbody,
    #tableTicketsList tr,
    #tableTicketsList td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .domain-list-table tbody tr,
    .ticket-list-table tbody tr,
    #tableDomainsList tbody tr,
    #tableTicketsList tbody tr {
        position: relative;
        margin-bottom: 16px;
        padding: 18px 20px 16px;
        border: 1px solid #e4ebf4;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 12px 28px rgba(20, 35, 90, 0.08);
        overflow: hidden;
    }

    .domain-list-table tbody tr:last-child,
    .ticket-list-table tbody tr:last-child,
    #tableDomainsList tbody tr:last-child,
    #tableTicketsList tbody tr:last-child {
        margin-bottom: 0;
    }

    .domain-list-table tbody tr:hover > td,
    .domain-list-table tbody tr:active > td,
    .ticket-list-table tbody tr:hover > td,
    .ticket-list-table tbody tr:active > td,
    #tableDomainsList tbody tr:hover > td,
    #tableDomainsList tbody tr:active > td,
    #tableTicketsList tbody tr:hover > td,
    #tableTicketsList tbody tr:active > td {
        background-color: transparent;
    }

    .domain-list-table tbody tr:hover,
    .domain-list-table tbody tr:active,
    .ticket-list-table tbody tr:hover,
    .ticket-list-table tbody tr:active,
    #tableDomainsList tbody tr:hover,
    #tableDomainsList tbody tr:active,
    #tableTicketsList tbody tr:hover,
    #tableTicketsList tbody tr:active {
        background-color: #f8fbff;
    }

    .domain-list-table tbody td,
    .ticket-list-table tbody td,
    #tableDomainsList tbody td,
    #tableTicketsList tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
        padding: 10px 10px 10px 0;
        border: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .domain-list-table tbody td::before,
    .ticket-list-table tbody td::before,
    #tableDomainsList tbody td::before,
    #tableTicketsList tbody td::before {
        content: attr(data-label);
        flex: 0 0 82px;
        max-width: 82px;
        font-size: 12px;
        line-height: 1.45;
        font-weight: 700;
        color: #5d7088;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .domain-list-table tbody td > :not(.w-hidden):not(.hidden-status),
    .ticket-list-table tbody td > :not(.w-hidden):not(.hidden-status),
    #tableDomainsList tbody td > :not(.w-hidden):not(.hidden-status),
    #tableTicketsList tbody td > :not(.w-hidden):not(.hidden-status) {
        flex: 1 1 auto;
        min-width: 0;
    }

    .domain-list-table tbody td:first-child,
    .ticket-list-table tbody td:nth-child(2),
    #tableDomainsList tbody td:first-child,
    #tableTicketsList tbody td:nth-child(2) {
        display: block;
        padding-top: 0;
        padding-right: 30px;
    }

    .domain-list-table tbody td:first-child::before,
    .ticket-list-table tbody td:nth-child(2)::before,
    #tableDomainsList tbody td:first-child::before,
    #tableTicketsList tbody td:nth-child(2)::before {
        display: block;
        max-width: none;
        margin-bottom: 8px;
    }

    .domain-list-table tbody td:first-child strong,
    #tableDomainsList tbody td:first-child strong {
        display: block;
        color: #111827;
        font-size: 1.05rem;
        line-height: 1.35;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .ticket-list-table__subject-link,
    #tableTicketsList .ticket-list-table__subject-link {
        display: block;
        padding-left: 0;
        color: inherit;
    }

    .ticket-list-table .ticket-number,
    #tableTicketsList .ticket-number {
        display: block;
        margin-bottom: 5px;
        color: #64748b;
        font-size: 0.82rem;
        font-weight: 700;
    }

    .ticket-list-table .ticket-subject,
    #tableTicketsList .ticket-subject {
        display: block;
        color: #111827;
        font-size: 1.03rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .domain-list-table tbody td:nth-child(3) .label,
    .ticket-list-table tbody td:nth-child(3) .label,
    #tableDomainsList tbody td:nth-child(3) .label,
    #tableTicketsList tbody td:nth-child(3) .label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 10px);
        min-height: 30px;
        margin-right: 10px;
        box-sizing: border-box;
    }

    .domain-list-table tbody td:nth-child(4) i,
    #tableDomainsList tbody td:nth-child(4) i {
        flex: 0 0 auto;
        font-size: 18px;
        line-height: 1.2;
    }

    .domain-list-table__action-cell,
    #tableDomainsList tbody td:nth-child(5) {
        display: block;
        padding-bottom: 0;
    }

    .domain-list-table__action-cell::before,
    #tableDomainsList tbody td:nth-child(5)::before {
        display: none;
    }

    .domain-list-table__action-cell .btn,
    #tableDomainsList tbody td:nth-child(5) .btn {
        width: calc(100% - 10px);
        min-height: 44px;
        margin-top: 4px;
        margin-right: 10px;
        box-sizing: border-box;
    }
}

/* Ensure the status tabs match the modern segmented style */
.status-tabs {
    gap: 2px;
}

.public-homepage {
    position: relative;
    padding: 18px 6px 40px;
}

.public-homepage__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.9fr);
    gap: 22px;
    margin-bottom: 26px;
}

.public-homepage__hero-main,
.public-homepage__hero-panel,
.public-homepage__section,
.public-homepage__domain-panel {
    border: 1px solid #dbe4f0;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(62, 120, 209, 0.14), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 40px rgba(34, 59, 102, 0.08);
}

.public-homepage__hero-main {
    padding: 34px 36px;
    overflow: hidden;
}

.public-homepage__hero-panel {
    padding: 18px;
}

.public-homepage__eyebrow,
.public-homepage__section-label,
.public-homepage__hero-card-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(32, 84, 168, 0.08);
    color: #28508f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-homepage__title {
    margin: 18px 0 14px;
    font-size: 38px;
    line-height: 1.18;
    font-weight: 700;
    color: #183253;
}

.public-homepage__lead {
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.75;
    color: #59708d;
}

.public-homepage__actions {
    margin-bottom: 28px;
}

.public-homepage__hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.public-homepage__metric {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #e4ebf4;
}

.public-homepage__metric strong {
    display: block;
    margin-bottom: 4px;
    font-size: 24px;
    line-height: 1;
    color: #153154;
}

.public-homepage__metric span {
    font-size: 13px;
    color: #6a7f99;
}

.public-homepage__hero-card {
    height: 100%;
    padding: 22px 22px 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, #245ba9 0%, #1d4f95 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.public-homepage__hero-card-label {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
}

.public-homepage__hero-card-title {
    margin: 18px 0 20px;
    font-size: 28px;
    line-height: 1.18;
    font-weight: 700;
}

.public-homepage__shortcut-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.public-homepage__shortcut-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 16px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.94);
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.public-homepage__shortcut-link:hover {
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
}

.public-homepage__shortcut-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 16px;
    flex-shrink: 0;
}

.public-homepage__shortcut-link span {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.public-homepage__section {
    margin-bottom: 22px;
    padding: 26px 28px 30px;
}

.public-homepage__section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.public-homepage__section-title {
    margin: 10px 0 0;
    font-size: 28px;
    line-height: 1.2;
    color: #193350;
}

.public-homepage__section-action {
    flex-shrink: 0;
}

.public-homepage__product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.public-homepage__product-card,
.public-homepage__ops-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
    padding: 20px 22px;
    border-radius: 20px;
    border: 1px solid #dde6f1;
    background: #fff;
    color: #213655;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(31, 56, 95, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.public-homepage__product-card:hover,
.public-homepage__ops-card:hover {
    transform: translateY(-3px);
    border-color: #bfd0e6;
    box-shadow: 0 18px 30px rgba(31, 56, 95, 0.12);
    color: #213655;
    text-decoration: none;
}

.public-homepage__product-card--accent {
    background: linear-gradient(180deg, #fefefe 0%, #f3f8ff 100%);
}

.public-homepage__product-icon,
.public-homepage__ops-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(36, 91, 169, 0.09);
    color: #1f4f92;
    font-size: 18px;
}

.public-homepage__product-name {
    font-size: 18px;
    font-weight: 700;
    color: #17304c;
}

.public-homepage__product-desc,
.public-homepage__ops-card span {
    font-size: 14px;
    line-height: 1.7;
    color: #637892;
}

.public-homepage__product-link {
    margin-top: auto;
    font-size: 13px;
    font-weight: 700;
    color: #245ba9;
}

.public-homepage__ops-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.public-homepage__ops-card strong {
    font-size: 17px;
    line-height: 1.35;
    color: #193350;
}

.public-homepage__domain-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 24px;
    padding: 26px 28px;
    align-items: center;
}

.public-homepage__domain-copy p {
    margin: 14px 0 0;
    color: #617791;
    line-height: 1.75;
}

.public-homepage__domain-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.public-homepage__domain-input {
    min-width: 280px;
    min-height: 46px;
    border-radius: 12px;
    border-color: #d7e1ee;
    box-shadow: none;
}

.public-homepage__domain-input:focus {
    border-color: #7da5da;
    box-shadow: 0 0 0 0.18rem rgba(32, 84, 168, 0.12);
}

@media (max-width: 1199px) {
    .public-homepage__hero,
    .public-homepage__domain-panel {
        grid-template-columns: 1fr;
    }

    .public-homepage__product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-homepage__ops-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .public-homepage {
        padding: 12px 0 30px;
    }

    .public-homepage__hero-main,
    .public-homepage__hero-panel,
    .public-homepage__section,
    .public-homepage__domain-panel {
        padding-left: 18px;
        padding-right: 18px;
    }

    .public-homepage__title {
        font-size: 28px;
        max-width: none;
    }

    .public-homepage__hero-metrics,
    .public-homepage__product-grid,
    .public-homepage__ops-grid {
        grid-template-columns: 1fr;
    }

    .public-homepage__shortcut-grid {
        grid-template-columns: 1fr;
    }

    .public-homepage__section-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .public-homepage__domain-form {
        justify-content: flex-start;
    }

    .public-homepage__domain-input {
        min-width: 100%;
    }
}