/* Groupie brand layer (generated from style.css + overrides.css) */
/*================================================================================
Item Name: Ultimate SMS - Bulk SMS Application For Marketing
Author: Codeglen
Author URL: https://codecanyon.net/user/codeglen
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
form .required:after {
  color: #4f7bff;
  content: "*";
  font-size: 15px;
  position: relative;
  left: 3px;
}

/* Switches */
.form-switch-md .form-check-input {
  width: 4rem !important;
}

.form-switch-lg .form-check-input {
  width: 6rem !important;
}

.form-switch-xl .form-check-input {
  width: 8rem !important;
}

.feather-16 {
  width: 16px;
  height: 16px;
}

.feather-20 {
  width: 20px;
  height: 20px;
}

/* Groupie brand primary buttons (customer portal) */
body.customer-portal {
  --groupie-blue-1: #0b63ff;
  --groupie-blue-2: #18a0ff;
  --groupie-blue-glow: rgba(11, 99, 255, 0.35);
  --bs-primary: #0b63ff;
  --bs-primary-rgb: 11, 99, 255;
  --bs-purple: #0b63ff;
}
body.customer-portal .btn.btn-primary,
body.customer-portal .btn.btn-gradient-primary,
body.customer-portal .btn.btn-gradient,
body.customer-portal .btn-gradient,
body.customer-portal .themeButton {
  background-image: linear-gradient(90deg, var(--groupie-blue-1) 0%, var(--groupie-blue-2) 100%) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 22px -14px var(--groupie-blue-glow) !important;
}
body.customer-portal .btn.btn-primary:hover,
body.customer-portal .btn.btn-primary:focus,
body.customer-portal .btn.btn-gradient-primary:hover,
body.customer-portal .btn.btn-gradient-primary:focus,
body.customer-portal .btn.btn-gradient:hover,
body.customer-portal .btn.btn-gradient:focus,
body.customer-portal .btn-gradient:hover,
body.customer-portal .btn-gradient:focus,
body.customer-portal .themeButton:hover,
body.customer-portal .themeButton:focus {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
body.customer-portal .btn.btn-primary:active,
body.customer-portal .btn.btn-gradient-primary:active,
body.customer-portal .btn.btn-gradient:active,
body.customer-portal .btn-gradient:active,
body.customer-portal .themeButton:active {
  filter: brightness(0.98);
  transform: translateY(0);
}

/* Global primary color overrides (customer portal) */
body.customer-portal .text-primary,
body.customer-portal .link-primary,
body.customer-portal a.text-primary {
  color: var(--groupie-blue-1) !important;
}
body.customer-portal .bg-primary {
  background-color: var(--groupie-blue-1) !important;
  border-color: var(--groupie-blue-1) !important;
}
body.customer-portal .border-primary {
  border-color: var(--groupie-blue-1) !important;
}
body.customer-portal .badge-light-primary,
body.customer-portal .badge.bg-light-primary {
  background: rgba(11, 99, 255, 0.14) !important;
  color: var(--groupie-blue-1) !important;
  border-color: rgba(11, 99, 255, 0.25) !important;
}
body.customer-portal .form-check-input:checked {
  background-color: var(--groupie-blue-1) !important;
  border-color: var(--groupie-blue-1) !important;
}
body.customer-portal .pagination .page-item.active .page-link,
body.customer-portal .page-item.active .page-link {
  background-color: var(--groupie-blue-1) !important;
  border-color: var(--groupie-blue-1) !important;
}
body.customer-portal .nav-pills .nav-link.active,
body.customer-portal .nav-pills .show > .nav-link {
  background-color: var(--groupie-blue-1) !important;
}

/* Page load progress bar (pace) */
html[data-portal="customer"] body.customer-portal .pace .pace-progress,
html[data-portal="customer"] body.customer-portal .pace .pace-activity {
  background: linear-gradient(90deg, var(--groupie-blue-1) 0%, var(--groupie-blue-2) 100%) !important;
}

/* Outline primary (buttons/tabs) */
body.customer-portal .btn.btn-outline-primary,
body.customer-portal .btn-outline-primary,
body.customer-portal .btn.btn-outline-primary:hover,
body.customer-portal .btn.btn-outline-primary:focus,
body.customer-portal .btn.btn-outline-primary:active,
body.customer-portal .btn.btn-outline-primary.active,
body.customer-portal .btn.btn-outline-primary:not(:disabled):not(.disabled):active,
body.customer-portal .btn-outline-primary:hover,
body.customer-portal .btn-outline-primary:focus,
body.customer-portal .btn-outline-primary:active,
body.customer-portal .btn-outline-primary.active,
body.customer-portal .btn-outline-primary:not(:disabled):not(.disabled):active,
body.customer-portal .nav-pills .nav-link,
body.customer-portal .nav-tabs .nav-link {
  color: var(--groupie-blue-1) !important;
  border-color: var(--groupie-blue-1) !important;
}
body.customer-portal .btn.btn-outline-primary:hover,
body.customer-portal .btn.btn-outline-primary:focus,
body.customer-portal .btn.btn-outline-primary:active,
body.customer-portal .btn.btn-outline-primary.active,
body.customer-portal .btn-outline-primary:hover,
body.customer-portal .btn-outline-primary:focus,
body.customer-portal .btn-outline-primary:active,
body.customer-portal .btn-outline-primary.active,
body.customer-portal .nav-pills .nav-link.active,
body.customer-portal .nav-tabs .nav-link.active,
body.customer-portal .nav-pills .nav-link:hover,
body.customer-portal .nav-tabs .nav-link:hover {
  background: linear-gradient(90deg, var(--groupie-blue-1) 0%, var(--groupie-blue-2) 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px -14px var(--groupie-blue-glow) !important;
  border-color: transparent !important;
}

@keyframes groupieGlowPulse {
  0% {
    box-shadow: 0 4px 10px rgba(11, 99, 255, 0.18), 0 0 0 rgba(11, 99, 255, 0);
    filter: drop-shadow(0 2px 6px rgba(11, 99, 255, 0.12));
  }
  50% {
    box-shadow: 0 8px 18px rgba(11, 99, 255, 0.32), 0 0 12px rgba(24, 160, 255, 0.28);
    filter: drop-shadow(0 6px 10px rgba(11, 99, 255, 0.28));
  }
  100% {
    box-shadow: 0 4px 10px rgba(11, 99, 255, 0.18), 0 0 0 rgba(11, 99, 255, 0);
    filter: drop-shadow(0 2px 6px rgba(11, 99, 255, 0.12));
  }
}

body.customer-portal .btn.btn-primary:not(:disabled):not(.disabled),
body.customer-portal .btn.btn-gradient-primary:not(:disabled):not(.disabled),
body.customer-portal .btn.btn-gradient:not(:disabled):not(.disabled),
body.customer-portal .btn-gradient:not(:disabled):not(.disabled),
body.customer-portal .themeButton:not(:disabled):not(.disabled) {
  animation: groupieGlowPulse 2.6s ease-in-out infinite !important;
}

/* Groupie brand navigation active state (customer portal) */
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li.active > a,
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li.open > a,
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li > a:active,
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li > a:focus {
  position: relative;
  background: linear-gradient(90deg, var(--groupie-blue-1) 0%, var(--groupie-blue-2) 100%) !important;
  background-image: linear-gradient(90deg, var(--groupie-blue-1) 0%, var(--groupie-blue-2) 100%) !important;
  background-color: var(--groupie-blue-1) !important;
  box-shadow: 0 12px 26px rgba(11, 99, 255, 0.35), 0 0 18px rgba(24, 160, 255, 0.35) !important;
  filter: drop-shadow(0 8px 14px rgba(11, 99, 255, 0.35)) !important;
  color: #fff !important;
  z-index: 1;
  overflow: visible;
}
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li.active > a {
  animation: groupieGlowPulse 1.8s ease-in-out infinite !important;
}
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li.active > a::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(11, 99, 255, 0.55), rgba(24, 160, 255, 0.35));
  filter: blur(6px);
  opacity: 0.55;
  z-index: 0;
  animation: groupieGlowPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

/* Parent item (has sub-menu) active state: lighter gradient */
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li.has-sub.active > a,
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li.has-sub.active:not(.open) > a,
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li.has-sub.open > a,
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li.has-sub > a[aria-expanded="true"] {
  background: linear-gradient(90deg, rgba(11, 99, 255, 0.22) 0%, rgba(24, 160, 255, 0.32) 100%) !important;
  background-image: linear-gradient(90deg, rgba(11, 99, 255, 0.22) 0%, rgba(24, 160, 255, 0.32) 100%) !important;
  background-color: rgba(11, 99, 255, 0.2) !important;
  box-shadow: 0 6px 14px rgba(11, 99, 255, 0.18) !important;
  color: #e6f0ff !important;
  animation: none !important;
}
/* Ensure parent items never take the "full" active state */
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li.has-sub.active > a,
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li.has-sub.open > a,
html[data-portal="customer"] body.customer-portal .main-menu-content .navigation-main .nav-item.has-sub.active > a {
  animation: none !important;
}
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li.has-sub.active > a::before,
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li.has-sub.open > a::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(11, 99, 255, 0.18), rgba(24, 160, 255, 0.18));
  filter: blur(4px);
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li.active {
  overflow: visible;
}

/* Submenu active state (customer portal) */
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li ul .active > a,
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li ul .active > a:hover,
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li ul .active > a:focus,
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li ul .active > a:active,
html[data-portal="customer"] body.customer-portal .main-menu-content .navigation-main .menu-content .active > a,
html[data-portal="customer"] body.customer-portal .semi-dark-layout .main-menu-content .navigation-main .menu-content .active > a {
  position: relative;
  background: linear-gradient(90deg, var(--groupie-blue-1) 0%, var(--groupie-blue-2) 100%) !important;
  background-image: linear-gradient(90deg, var(--groupie-blue-1) 0%, var(--groupie-blue-2) 100%) !important;
  background-color: var(--groupie-blue-1) !important;
  box-shadow: 0 10px 22px rgba(11, 99, 255, 0.3), 0 0 16px rgba(24, 160, 255, 0.3) !important;
  filter: drop-shadow(0 6px 12px rgba(11, 99, 255, 0.3)) !important;
  color: #fff !important;
  z-index: 1;
  overflow: visible;
}
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li ul .active > a::before,
html[data-portal="customer"] body.customer-portal .main-menu-content .navigation-main .menu-content .active > a::before,
html[data-portal="customer"] body.customer-portal .semi-dark-layout .main-menu-content .navigation-main .menu-content .active > a::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(11, 99, 255, 0.5), rgba(24, 160, 255, 0.3));
  filter: blur(5px);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}
html[data-portal="customer"] body.customer-portal .main-menu-content .navigation-main .menu-content .active,
html[data-portal="customer"] body.customer-portal .main-menu.menu-dark .navigation > li ul .active {
  overflow: visible;
}

/* Keep customer buttons rectangular (override pill buttons only) */
body.customer-portal .btn.rounded-pill {
  border-radius: 0.357rem !important;
}
body.customer-portal .btn,
body.customer-portal .btn.btn-round,
body.customer-portal .btn.btn-rounded,
body.customer-portal .btn.btn-pill,
body.customer-portal .btn-rounded,
body.customer-portal .btn-pill,
body.customer-portal .rounded-pill {
  border-radius: 0.357rem !important;
}

.feather-24 {
  width: 24px;
  height: 24px;
}

.feather-32 {
  width: 32px;
  height: 32px;
}

/* Purple purge (customer portal) */
body.customer-portal .btn-link {
  background-image: linear-gradient(90deg, var(--groupie-blue-1) 0%, var(--groupie-blue-2) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
body.customer-portal .text-primary,
body.customer-portal .text-purple,
body.customer-portal .link-primary,
body.customer-portal a.text-primary,
body.customer-portal a.link-primary {
  background-image: linear-gradient(90deg, var(--groupie-blue-1) 0%, var(--groupie-blue-2) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
body.customer-portal .border-primary,
body.customer-portal .border-purple,
body.customer-portal .btn-outline-primary,
body.customer-portal .btn-outline-primary:focus,
body.customer-portal .btn-outline-primary:hover {
  border-color: var(--groupie-blue-1) !important;
  color: var(--groupie-blue-1) !important;
}
body.customer-portal .bg-primary,
body.customer-portal .badge.bg-primary,
body.customer-portal .nav-pills .nav-link.active,
body.customer-portal .nav-tabs .nav-link.active,
body.customer-portal .pagination .page-item.active .page-link {
  background-color: var(--groupie-blue-1) !important;
  background-image: linear-gradient(90deg, var(--groupie-blue-1) 0%, var(--groupie-blue-2) 100%) !important;
}
body.customer-portal .bg-gradient-primary,
body.customer-portal .btn-gradient-primary {
  background-image: linear-gradient(90deg, var(--groupie-blue-1) 0%, var(--groupie-blue-2) 100%) !important;
  background-color: var(--groupie-blue-1) !important;
}
body.customer-portal .btn-outline-primary {
  border-color: var(--groupie-blue-1) !important;
  color: var(--groupie-blue-1) !important;
}
body.customer-portal .btn-outline-primary:hover,
body.customer-portal .btn-outline-primary:focus,
body.customer-portal .btn-outline-primary:active {
  background-image: linear-gradient(90deg, var(--groupie-blue-1) 0%, var(--groupie-blue-2) 100%) !important;
  background-color: var(--groupie-blue-1) !important;
  color: #fff !important;
}

/* Primary borders/icons switch to blue (no purple) */
body.customer-portal .border-primary,
body.customer-portal .border-purple,
body.customer-portal .btn-outline-primary,
body.customer-portal .page-item.active .page-link,
body.customer-portal .form-check-input:checked,
body.customer-portal .form-switch .form-check-input:checked {
  border-color: var(--groupie-blue-1) !important;
}
body.customer-portal .btn-primary,
body.customer-portal .btn-gradient,
body.customer-portal .btn-gradient-primary,
body.customer-portal .bg-primary,
body.customer-portal .badge.bg-primary {
  background-image: linear-gradient(90deg, var(--groupie-blue-1) 0%, var(--groupie-blue-2) 100%) !important;
  background-color: var(--groupie-blue-1) !important;
}
.dark-layout .form-control[type=file]::file-selector-button {
  background-color: #283046;
}
/* Customer theme toggle (Mode) - scoped styling */
body.customer-portal .nav-item-theme-toggle .theme-toggle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(79, 123, 255, 0.12);
  color: #4f7bff;
  margin: 0 auto;
}
body.customer-portal .nav-item-theme-toggle .theme-label {
  font-size: 0.64rem;
  color: #64748b;
}
body.customer-portal .nav-item-theme-toggle .theme-toggle-stack {
  align-items: center;
  text-align: center;
}
body.customer-portal .nav-item-theme-toggle .theme-toggle-stack > .d-flex {
  justify-content: center;
  gap: 0.75rem;
}
body.customer-portal .nav-item-theme-toggle .theme-label-light,
body.customer-portal .nav-item-theme-toggle .theme-label-dark {
  min-width: 56px;
  text-align: center;
  font-weight: 600;
}
body.customer-portal .nav-item-theme-toggle .form-check {
  margin: 0;
}
body.customer-portal .nav-item-theme-toggle .theme-toggle-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
}
body.customer-portal .nav-item-theme-toggle .theme-toggle-switch .form-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
body.customer-portal .nav-item-theme-toggle .theme-label.theme-label-light,
body.customer-portal .nav-item-theme-toggle .theme-label.theme-label-dark {
  font-weight: 600;
}
body.customer-portal .nav-item-theme-toggle .form-check-input {
  width: 1.9rem;
  height: 1rem;
}
html[data-theme="studio"] body.customer-portal .nav-item-theme-toggle .theme-toggle-badge {
  background: rgba(106, 167, 255, 0.2);
  color: #8db1ff;
}
html[data-theme="studio"] body.customer-portal .nav-item-theme-toggle .theme-label {
  color: #b0b8c6;
}

/* Center credit number in navbar badge */
body.customer-portal .header-navbar .balance-top-up .show-balance {
  text-align: center;
  align-items: center;
}
body.customer-portal .header-navbar .balance-top-up .show-balance-unit {
  display: block;
  width: 100%;
  text-align: center;
}
body.customer-portal .header-navbar .balance-top-up .show-balance-box {
  align-items: center;
}
body.customer-portal .header-navbar .balance-top-up {
  gap: 18px;
}
body.customer-portal .header-navbar .balance-top-up .nav-link {
  padding-left: 14px;
}
html[data-theme="standard"] body.customer-portal .header-navbar .balance-top-up .show-balance-unit {
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #0b63ff;
  background: rgba(11, 99, 255, 0.1);
  color: #0b63ff;
}
html[data-theme="standard"] body.customer-portal .header-navbar .balance-top-up .show-balance-text {
  color: #0b63ff !important;
  font-weight: 700;
}

/* Message tag pills (shortcodes) */
body.customer-portal .message-token {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(11, 99, 255, 0.12);
  border: 1px solid rgba(11, 99, 255, 0.3);
  color: #0b63ff;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}
html[data-theme="studio"] body.customer-portal .message-token {
  background: rgba(11, 99, 255, 0.2);
  border-color: rgba(24, 160, 255, 0.55);
  color: #e6f0ff;
}

@keyframes groupieStudioMenuGlow {
  0% {
    box-shadow: 0 8px 18px rgba(47, 107, 255, 0.2), 0 0 0 rgba(47, 107, 255, 0);
  }
  50% {
    box-shadow: 0 12px 28px rgba(47, 107, 255, 0.36), 0 0 18px rgba(79, 123, 255, 0.32);
  }
  100% {
    box-shadow: 0 8px 18px rgba(47, 107, 255, 0.2), 0 0 0 rgba(47, 107, 255, 0);
  }
}

html[data-theme="studio"] body.customer-portal .main-menu,
html[data-theme="studio"] body.customer-portal .main-menu .main-menu-content,
html[data-theme="studio"] body.customer-portal .main-menu .main-menu-content .navigation-main {
  background: #0f1624 !important;
}

html[data-theme="studio"] body.customer-portal .main-menu .navigation > li > a,
html[data-theme="studio"] body.customer-portal .main-menu .navigation > li .menu-content > li > a {
  color: #d7e2f2 !important;
}

html[data-theme="studio"] body.customer-portal .main-menu .navigation > li > a:hover,
html[data-theme="studio"] body.customer-portal .main-menu .navigation > li .menu-content > li > a:hover {
  background: rgba(79, 123, 255, 0.16) !important;
  color: #ffffff !important;
}

html[data-theme="studio"] body.customer-portal .main-menu .navigation > li.active > a,
html[data-theme="studio"] body.customer-portal .main-menu .navigation > li.open > a,
html[data-theme="studio"] body.customer-portal .main-menu .navigation .menu-content .active > a {
  background: linear-gradient(135deg, #2f6bff 0%, #4f7bff 100%) !important;
  color: #ffffff !important;
  animation: groupieStudioMenuGlow 1.9s ease-in-out infinite !important;
}

html[data-theme="studio"] body.customer-portal .main-menu .navigation > li.active > a i,
html[data-theme="studio"] body.customer-portal .main-menu .navigation > li.active > a svg,
html[data-theme="studio"] body.customer-portal .main-menu .navigation > li.open > a i,
html[data-theme="studio"] body.customer-portal .main-menu .navigation > li.open > a svg,
html[data-theme="studio"] body.customer-portal .main-menu .navigation .menu-content .active > a i,
html[data-theme="studio"] body.customer-portal .main-menu .navigation .menu-content .active > a svg {
  color: #ffffff !important;
}

html[data-theme="studio"] body.customer-portal .header-navbar .balance-top-up .show-balance-text,
html[data-theme="studio"] body.customer-portal .header-navbar .balance-top-up .show-balance-unit {
  color: #ffffff !important;
}