/* FastlyPay premium dashboard layer - responsive, logo-safe and touch-friendly. */
:root {
  --fp-primary: #1769ff;
  --fp-primary-2: #0b4edb;
  --fp-ink: #15213a;
  --fp-muted: #667085;
  --fp-border: #e7ebf3;
  --fp-surface: #ffffff;
  --fp-page: #ffffff;
  --fp-soft: #f6f8fc;
  --fp-radius: 18px;
  --fp-shadow: 0 12px 36px rgba(16, 24, 40, .07);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: var(--fp-page) !important;
  color: var(--fp-ink);
}

/* Header */
.main-wrapper-1 .navbar-bg {
  height: 72px !important;
  background: var(--fp-surface) !important;
  border-bottom: 1px solid var(--fp-border);
  box-shadow: 0 2px 14px rgba(16, 24, 40, .04);
}
.navbar.main-navbar {
  height: 72px !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(231,235,243,.9);
}
.navbar .nav-link,
.navbar .nav-link.nav-link-user,
.navbar .nav-link.nav-link-lg .feather {
  color: #475467 !important;
}
.navbar .nav-link:hover { color: var(--fp-primary) !important; }
.navbar .dropdown-menu {
  border: 1px solid var(--fp-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(16,24,40,.12) !important;
}

/* Sidebar */
.main-sidebar {
  width: 250px !important;
  background: #fff !important;
  border-right: 1px solid var(--fp-border);
  box-shadow: 8px 0 28px rgba(16,24,40,.035) !important;
}
.main-sidebar .sidebar-brand {
  height: 82px !important;
  line-height: normal !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
}
.main-sidebar .sidebar-brand a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  letter-spacing: 0 !important;
}
.main-sidebar .sidebar-brand .header-logo {
  width: 164px !important;
  height: 56px !important;
  max-width: 100%;
  object-fit: contain !important;
  object-position: center;
  display: block;
}
.main-sidebar .sidebar-user {
  padding: 14px 14px 18px !important;
  border-bottom: 1px solid #f0f2f6;
}
.main-sidebar .sidebar-user .sidebar-user-picture img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(16,24,40,.10);
}
.main-sidebar .sidebar-user .sidebar-user-details .user-name {
  color: var(--fp-ink) !important;
  font-weight: 700 !important;
}
.main-sidebar .sidebar-user .sidebar-user-details .user-role {
  color: var(--fp-muted) !important;
}
.main-sidebar .sidebar-menu li.menu-header {
  color: #98a2b3 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}
.main-sidebar .sidebar-menu li a {
  margin: 3px 10px;
  border-radius: 12px;
  color: #475467 !important;
  font-weight: 600 !important;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.main-sidebar .sidebar-menu li a:hover {
  color: var(--fp-primary) !important;
  background: #f2f6ff !important;
  transform: translateX(2px);
}
.main-sidebar .sidebar-menu li.active > a {
  color: var(--fp-primary) !important;
  background: #eef4ff !important;
  box-shadow: inset 3px 0 0 var(--fp-primary);
}
.main-sidebar .sidebar-menu li a i,
.main-sidebar .sidebar-menu li a .feather { color: currentColor !important; }

/* Content / cards */
.main-content {
  padding-top: 98px !important;
  padding-bottom: 32px;
  min-height: 100vh;
}
.section .section-body { min-width: 0; }
.card {
  background: var(--fp-surface) !important;
  border: 1px solid var(--fp-border) !important;
  border-radius: var(--fp-radius) !important;
  box-shadow: var(--fp-shadow) !important;
}
.btn {
  min-height: 42px;
  border-radius: 11px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--fp-primary), var(--fp-primary-2)) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px rgba(23,105,255,.22) !important;
}
.btn-primary:hover, .btn-primary:focus {
  transform: translateY(-1px);
  box-shadow: 0 11px 22px rgba(23,105,255,.27) !important;
}
.form-control {
  min-height: 48px;
  border: 1px solid #dfe4ec !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--fp-ink) !important;
}
.form-control:focus {
  border-color: #8fb6ff !important;
  box-shadow: 0 0 0 4px rgba(23,105,255,.10) !important;
}

/* AJAX modal - one consistent shell on desktop and mobile */
#modal-ajax {
  padding-left: 0 !important;
}
#modal-ajax .modal-dialog {
  width: min(680px, calc(100vw - 32px));
  max-width: 680px;
  margin: 1rem auto;
}
#modal-ajax .modal-content {
  border: 1px solid var(--fp-border) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(16,24,40,.18) !important;
  overflow: hidden;
}
#modal-ajax .modal-header {
  min-height: 64px;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f2f6 !important;
  align-items: center;
}
#modal-ajax .modal-title {
  color: var(--fp-ink);
  font-size: 16px;
  font-weight: 800;
}
#modal-ajax .modal-header .btn-close {
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border-radius: 11px;
  opacity: .75;
  background-color: #f5f7fa;
  background-size: 12px;
}
#modal-ajax .modal-header .btn-close:hover { opacity: 1; background-color: #edf2f7; }
#modal-ajax .add-funds {
  margin: 0 !important;
  padding: 0 !important;
}
#modal-ajax .add-funds .container-fluid,
#modal-ajax .add-funds .row,
#modal-ajax .add-funds [class*='col-'] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#modal-ajax .add-funds-form-content { padding: 28px 30px 30px; }
#modal-ajax .fp-payment-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
}
#modal-ajax .fp-payment-logo {
  width: 190px !important;
  height: 92px !important;
  max-width: 72vw;
  object-fit: contain !important;
  object-position: center;
  display: block;
}
#modal-ajax .fp-payment-note {
  margin: 0 0 22px !important;
  color: var(--fp-muted) !important;
  font-size: 13px;
  line-height: 1.65;
  text-align: center;
}
#modal-ajax .fp-field-label {
  display: block;
  margin: 0 0 8px;
  color: var(--fp-ink);
  font-size: 13px;
  font-weight: 700;
}
#modal-ajax .fp-agree {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 20px !important;
  padding: 13px 14px;
  border: 1px solid #e6eaf0;
  border-radius: 13px;
  background: #f9fafb;
}
#modal-ajax .fp-agree .custom-control-input {
  position: static !important;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 2px 0 0 !important;
}
#modal-ajax .fp-agree .custom-control-label {
  padding: 0 !important;
  color: #475467;
  font-size: 12px;
  line-height: 1.65;
  font-weight: 600;
}
#modal-ajax .fp-agree .custom-control-label::before,
#modal-ajax .fp-agree .custom-control-label::after { display: none !important; }
#modal-ajax .fp-pay-actions { margin: 0 !important; }
#modal-ajax .fp-pay-button { min-width: 126px; }

/* Collapsed sidebar: use icon-only FastlyPay mark rather than squeezing the wordmark. */
.sidebar-mini .main-sidebar .sidebar-brand .header-logo {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
}
.sidebar-mini .main-sidebar .sidebar-user { padding-left: 6px !important; padding-right: 6px !important; }

/* Touch/mobile */
@media (max-width: 1024px) {
  .main-sidebar { width: 250px !important; }
  .main-content { padding-left: 18px !important; padding-right: 18px !important; }
  .navbar { left: 0 !important; }
}
@media (max-width: 767.98px) {
  .main-wrapper-1 .navbar-bg,
  .navbar.main-navbar { height: 64px !important; }
  .main-content { padding-top: 78px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .main-sidebar .sidebar-brand { height: 72px !important; }
  #modal-ajax .modal-dialog {
    width: calc(100vw - 24px);
    max-width: none;
    margin: .75rem auto;
  }
  #modal-ajax .modal-content { border-radius: 20px !important; max-height: calc(100dvh - 24px); }
  #modal-ajax .add-funds-form-content { padding: 20px 16px 22px; }
  #modal-ajax .fp-payment-logo-wrap { min-height: 86px; }
  #modal-ajax .fp-payment-logo { width: 170px !important; height: 76px !important; }
  #modal-ajax .modal-header { padding: 12px 14px; }
  #modal-ajax .modal-header .btn-close { width: 36px; height: 36px; }
  #modal-ajax .fp-pay-button { width: 100%; }
  .whatsapp-fab { width: 52px !important; height: 52px !important; right: 16px !important; bottom: 16px !important; border-radius: 16px !important; font-size: 23px !important; }
}
@media (max-width: 380px) {
  #modal-ajax .modal-dialog { width: calc(100vw - 16px); }
  #modal-ajax .add-funds-form-content { padding-left: 13px; padding-right: 13px; }
}

/* Dashboard summary cards: clean white premium surface instead of legacy color blocks. */
.main-content .card.l-bg-style1,
.main-content .card.l-bg-style2,
.main-content .card.l-bg-style3,
.main-content .card.l-bg-style4 {
  background: #fff !important;
  color: var(--fp-ink) !important;
  overflow: hidden;
  position: relative;
}
.main-content .card.l-bg-style1::before,
.main-content .card.l-bg-style2::before,
.main-content .card.l-bg-style3::before,
.main-content .card.l-bg-style4::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--fp-primary), #5ca9ff);
}
.main-content .card-statistic-3 { min-height: 164px; }
.main-content .card-statistic-3 .card-content .card-title,
.main-content .card-statistic-3 .card-content > span { color: var(--fp-ink) !important; }
.main-content .card-statistic-3 .card-content > span { font-weight: 800; letter-spacing: -.03em; }
.main-content .card-statistic-3 .card-content p { color: var(--fp-muted) !important; }
.main-content .card-statistic-3 .card-icon {
  color: var(--fp-primary) !important;
  background: #eef4ff !important;
  border-radius: 15px !important;
}
.main-content .progress { background: #edf1f7 !important; border-radius: 99px; overflow: hidden; }
.main-content .progress .progress-bar { border-radius: 99px; background: linear-gradient(90deg, var(--fp-primary), #5ca9ff) !important; }
.main-content .gradient-bottom { background: #fff !important; }
.main-content .gradient-bottom .card-header { border-bottom: 1px solid var(--fp-border); }
.main-content .gradient-bottom .card-header h4 { color: var(--fp-ink); font-weight: 800; }
.main-content .gradient-bottom .card-header .btn-danger {
  color: #475467 !important;
  background: #f5f7fa !important;
  border-color: #e4e7ec !important;
  box-shadow: none !important;
}
.main-content .gradient-bottom .card-header .btn-danger:hover { color: var(--fp-primary) !important; background: #eef4ff !important; }
.main-content .gradient-bottom .card-footer { border-top: 1px solid var(--fp-border); background: #fff; }

@media (max-width: 575.98px) {
  .main-content .card-statistic-3 { min-height: 142px; }
  .main-content .card-statistic-3 .card-icon { width: 48px; height: 48px; line-height: 48px; }
  .main-content .gradient-bottom .card-body { height: 300px !important; }
}

.modal-title-logo{width:30px;height:30px;object-fit:contain;border-radius:50%;flex:0 0 30px;}

/* FastlyPay responsive hardening v2 */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }
.main-wrapper, #app, .main-wrapper-1, .main-content, .section, .section-body { max-width: 100%; min-width: 0; }
.main-content { overflow-x: hidden; }

/* Admin and user layouts share the same responsive system. */
.main-sidebar { box-sizing: border-box !important; }
.main-sidebar #sidebar-wrapper { width: 100% !important; max-width: 100% !important; overflow-x: hidden; }
.main-sidebar .sidebar-menu { width: 100% !important; max-width: 100% !important; }
.main-sidebar .sidebar-menu li,
.main-sidebar .sidebar-menu li a { max-width: 100%; box-sizing: border-box; }

/* Never let a mobile/desktop sidebar create horizontal page overflow. */
@media (max-width: 1024px) {
  .main-content { width: 100% !important; max-width: 100% !important; }
  .main-sidebar { width: min(250px, 82vw) !important; max-width: 82vw !important; }
  body.sidebar-gone .main-sidebar { left: calc(-1 * min(250px, 82vw)) !important; }
  .navbar { max-width: 100vw !important; }
}

/* AJAX modal: force a sane, device-independent form grid. This prevents
   Bootstrap/legacy grid conflicts from pushing fields outside the modal. */
#modal-ajax { box-sizing: border-box !important; padding: 0 !important; }
#modal-ajax .modal-dialog,
#modal-ajax .modal-content,
#modal-ajax .modal-body,
#modal-ajax form { box-sizing: border-box !important; min-width: 0 !important; }
#modal-ajax .modal-dialog {
  width: min(680px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
}
#modal-ajax .modal-content { width: 100% !important; max-width: 100% !important; }
#modal-ajax .modal-body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
#modal-ajax .modal-body > .row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
#modal-ajax .modal-body > .row > [class*="col-"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#modal-ajax .modal-body .form-group { width: 100% !important; max-width: 100% !important; }
#modal-ajax .modal-body .form-control,
#modal-ajax .modal-body select,
#modal-ajax .modal-body textarea,
#modal-ajax .modal-body .input-group { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
#modal-ajax .modal-footer { width: 100% !important; max-width: 100% !important; display: flex; flex-wrap: wrap; gap: 8px; }
#modal-ajax .modal-footer .btn { margin: 0 !important; }

@media (min-width: 768px) {
  #modal-ajax .modal-body > .row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 18px !important; }
  #modal-ajax .modal-body > .row > .col-md-12,
  #modal-ajax .modal-body > .row > .col-sm-12,
  #modal-ajax .modal-body > .row > .col-xs-12 { grid-column: 1 / -1 !important; }
}

@media (max-width: 575.98px) {
  #modal-ajax .modal-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; margin: .5rem auto !important; }
  #modal-ajax .modal-content { border-radius: 16px !important; max-height: calc(100dvh - 16px) !important; }
  #modal-ajax .modal-body { padding: 16px !important; }
  #modal-ajax .modal-header { padding: 12px 14px !important; }
  #modal-ajax .modal-title { min-width: 0; overflow-wrap: anywhere; }
  #modal-ajax .modal-title-logo { flex: 0 0 28px; width: 28px; height: 28px; }
  #modal-ajax .modal-footer { padding: 12px 14px !important; }
  #modal-ajax .modal-footer .btn { flex: 1 1 120px; min-width: 0; }
}

/* Tables: preserve the table's minimum width inside a horizontal scroller,
   never let the table itself enlarge the page. */
.table-responsive { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.table-responsive > table { max-width: none; }
@media (max-width: 575.98px) {
  .table-responsive > table { min-width: 720px; }
  .card-body { min-width: 0 !important; }
  .card-header { flex-wrap: wrap; gap: 10px; }
  .card-header .card-title { min-width: 0; }
}

/* Forms and controls must never exceed their parent on any viewport. */
.form-control, .custom-select, select, textarea, input, .input-group { max-width: 100%; }

/* Shared header/logo behavior for both admin and user. */
.main-sidebar .sidebar-brand .header-logo { width: 164px !important; height: 56px !important; max-width: 100% !important; object-fit: contain !important; object-position: center !important; display: block !important; }

/* Prevent long email/name/title strings from forcing layout width. */
.title, .sub, .user-name, .user-role, .modal-title, td, th, label { overflow-wrap: anywhere; word-break: break-word; }


/* ================================================================
   FastlyPay Sidebar Scroll Fix v3
   Native scrolling is used for the sidebar. The legacy NiceScroll
   plugin can capture touch/pointer events on mobile and leave the
   drawer apparently frozen after opening it.
   ================================================================ */
.main-sidebar {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain;
  touch-action: pan-y !important;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.main-sidebar #sidebar-wrapper {
  min-height: 100%;
  height: auto !important;
  overflow: visible !important;
  touch-action: pan-y !important;
}

.main-sidebar .sidebar-menu {
  padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  touch-action: pan-y !important;
}

.main-sidebar .sidebar-menu a,
.main-sidebar .sidebar-menu li {
  touch-action: pan-y !important;
}

/* On phones/tablets the drawer itself must remain the only scrollable
   surface while it is open; the page behind it is intentionally locked. */
@media (max-width: 1024px) {
  body.sidebar-show .main-sidebar {
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    touch-action: pan-y !important;
  }
}

/* Desktop sidebar is also independently scrollable if the menu becomes
   taller than the viewport. */
@media (min-width: 1025px) {
  .main-sidebar {
    overflow-y: auto !important;
  }
}

/* ================================================================
   FastlyPay Premium UI/UX hardening v4
   Goals:
   - one reliable page scroll on every viewport
   - native/touch-friendly sidebar scrolling
   - no content clipping caused by legacy overflow rules
   - robust responsive cards, forms, tables and modals
   - desktop density without sacrificing mobile readability
   ================================================================ */
:root {
  --fp-content-max: 1440px;
  --fp-page-pad: 28px;
  --fp-touch: 44px;
  --fp-control-height: 48px;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  overflow-x: clip !important;
  overflow-y: auto;
  -webkit-tap-highlight-color: transparent;
}

#app,
.main-wrapper,
.main-wrapper-1 {
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  overflow: visible !important;
}

/* The legacy theme sets .main-content{overflow:hidden}; that can clip
   tall cards/forms and make an otherwise scrollable page feel frozen. */
.main-content {
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: calc(100dvh - 72px) !important;
  padding-top: 98px !important;
  padding-right: var(--fp-page-pad) !important;
  padding-bottom: calc(36px + env(safe-area-inset-bottom)) !important;
}

.main-content > .section,
.main-content .section-body {
  width: 100%;
  max-width: var(--fp-content-max);
  min-width: 0;
}

.main-content .section-body {
  margin-inline: auto;
}

.main-content .section-body > .row {
  min-width: 0;
}

.main-content .card,
.main-content .nav-align-top,
.main-content .tab-content,
.main-content .tab-pane {
  min-width: 0;
  max-width: 100%;
}

/* Better default spacing for legacy rows and card stacks. */
.main-content .row > [class*="col-"] {
  min-width: 0;
}

.card {
  overflow: hidden;
}

.card-header,
.card-body,
.card-footer {
  min-width: 0;
}

.card-header {
  gap: 12px;
}

.card-title,
.card-header h4,
.card-header h5,
.card-body h1,
.card-body h2,
.card-body h3,
.card-body h4,
.card-body h5,
.card-body h6 {
  overflow-wrap: anywhere;
}

/* Reliable controls: large enough for fingers, compact enough for desktop. */
.btn,
button,
.btn-link,
.nav-link,
.dropdown-item {
  -webkit-user-select: none;
  user-select: none;
}

.btn,
button.btn {
  min-height: var(--fp-touch);
}

.form-control,
.form-select,
select.form-control,
textarea.form-control,
.input-group-text {
  min-height: var(--fp-control-height);
}

.input-group {
  min-width: 0;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > select,
.input-group > textarea,
.input-group > .btn,
.input-group > .input-group-text {
  min-width: 0;
}

label {
  max-width: 100%;
}

/* Select2 / legacy enhanced selects must fit their parent. */
.select2-container,
.select2-container--default {
  max-width: 100% !important;
}
.select2-container .select2-selection--single {
  min-height: var(--fp-control-height) !important;
  height: var(--fp-control-height) !important;
  border-radius: 12px !important;
  border-color: #dfe4ec !important;
  display: flex !important;
  align-items: center !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 1.3 !important;
  padding-left: 14px !important;
  padding-right: 36px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select2-container .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 8px !important;
}
.select2-dropdown {
  max-width: calc(100vw - 20px);
  z-index: 1065 !important;
  border-color: var(--fp-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.select2-results__options {
  max-height: min(46vh, 320px) !important;
}

/* Dropdowns and notification panels must never escape a small screen. */
.navbar .dropdown-menu,
.dropdown-menu {
  max-width: calc(100vw - 20px);
}
.navbar .dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item {
  white-space: normal;
  overflow-wrap: anywhere;
}
.dropdown-list {
  max-width: calc(100vw - 20px) !important;
}

/* Native sidebar scroll: no hidden intermediate wrapper. */
.main-sidebar {
  width: 250px !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
  touch-action: pan-y !important;
  z-index: 892 !important;
}

.main-sidebar #sidebar-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100%;
  height: auto !important;
  overflow: visible !important;
  touch-action: pan-y !important;
}

.main-sidebar .sidebar-menu {
  width: 100% !important;
  max-width: 100% !important;
  padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  touch-action: pan-y !important;
}

.main-sidebar .sidebar-menu li,
.main-sidebar .sidebar-menu li a {
  max-width: 100%;
  box-sizing: border-box;
  touch-action: pan-y !important;
}

.main-sidebar .sidebar-menu li a {
  min-height: 48px;
  margin: 3px 10px;
  width: calc(100% - 20px);
  padding-left: 14px;
  padding-right: 14px;
}

.main-sidebar .sidebar-menu li a span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.main-sidebar .sidebar-menu li .menu-toggle:before,
.main-sidebar .sidebar-menu li .menu-toggle:after {
  right: 14px;
}

.main-sidebar .sidebar-menu li ul.dropdown-menu li a {
  min-height: 42px;
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 42px;
  white-space: normal;
  line-height: 1.35;
}

/* Stable mobile drawer positions. */
@media (max-width: 1024px) {
  body.sidebar-show {
    overflow: hidden !important;
    touch-action: none;
  }

  body.sidebar-show:before {
    z-index: 890 !important;
    cursor: pointer;
  }

  body.sidebar-show .main-sidebar {
    left: 0 !important;
  }

  body.sidebar-gone .main-sidebar {
    left: -82vw !important;
  }

  .navbar.main-navbar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 889 !important;
  }

  .main-content {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 88px !important;
  }
}

@media (max-width: 767.98px) {
  .main-wrapper-1 .navbar-bg,
  .navbar.main-navbar {
    height: 64px !important;
  }

  .navbar .nav-link {
    min-width: var(--fp-touch);
    min-height: var(--fp-touch);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px !important;
  }

  .navbar .nav-link.nav-link-user {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .navbar .nav-link.nav-link-user img {
    width: 34px !important;
    height: 34px !important;
  }

  .navbar .dropdown-menu {
    margin-top: 6px !important;
  }

  .main-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 78px !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  }

  .main-content .section-body > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .main-content .section-body > .row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
  }

  .main-content .section-body > .row > [class*="col-"]:first-child {
    padding-left: 6px;
  }

  .main-content .section-body > .row > [class*="col-"]:last-child {
    padding-right: 6px;
  }

  .card {
    border-radius: 15px !important;
  }

  .card-body {
    padding: 16px !important;
  }

  .card-header {
    padding: 14px 16px !important;
    align-items: flex-start;
  }

  .card-footer {
    padding: 12px 16px !important;
  }

  .card-header .card-header-action,
  .card-header .card-header-form {
    width: 100%;
    margin-left: 0 !important;
  }

  .card-header .btn,
  .card-header .form-control,
  .card-header .input-group {
    max-width: 100%;
  }

  .btn {
    white-space: normal;
    line-height: 1.25;
  }

  /* Do not let action groups push the page width. */
  .form-actions,
  .card-header-action,
  .card-header-form,
  .btn-group,
  .input-group {
    flex-wrap: wrap;
    min-width: 0;
  }

  .table-responsive {
    border-radius: 12px;
    scrollbar-width: thin;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }

  .table-responsive > table {
    min-width: 640px !important;
  }

  .dataTables_wrapper,
  .dataTables_scroll,
  .dataTables_scrollHead,
  .dataTables_scrollBody {
    max-width: 100% !important;
  }

  .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

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

  .nav-tabs .nav-item {
    flex: 0 0 auto;
  }

  /* AJAX modal becomes a compact full-height sheet with one scroll owner. */
  #modal-ajax .modal-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
    min-height: calc(100dvh - 16px);
    display: flex;
    align-items: center;
  }

  #modal-ajax > #main-modal-content,
  #modal-ajax > #main-modal-content > .modal-dialog {
    min-width: 0;
  }

  #modal-ajax > #main-modal-content > .modal-dialog > .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 18px !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
  }

  #modal-ajax .modal-header {
    min-height: 60px;
    padding: 10px 12px !important;
    flex: 0 0 auto;
  }

  #modal-ajax .modal-header .btn-close {
    flex: 0 0 38px;
  }

  #modal-ajax .modal-title {
    min-width: 0;
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  #modal-ajax .modal-content > .modal-body,
  #modal-ajax .modal-content > .fp-modal-scroll,
  #modal-ajax .modal-content > section:not(.modal-header),
  #modal-ajax .modal-content > form:not(.modal-header) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  #modal-ajax .modal-footer {
    flex: 0 0 auto;
  }

  #modal-ajax .modal-body {
    padding: 16px !important;
  }

  #modal-ajax .add-funds-form-content {
    padding: 18px 14px 20px !important;
  }

  #modal-ajax .fp-payment-logo-wrap {
    min-height: 76px;
    margin-bottom: 8px;
  }

  #modal-ajax .fp-payment-logo {
    width: 160px !important;
    height: 68px !important;
    max-width: 68vw;
  }

  #modal-ajax .fp-agree {
    padding: 11px 12px;
  }

  #modal-ajax .fp-agree .custom-control-label {
    font-size: 11px;
    line-height: 1.55;
  }

  #modal-ajax .fp-pay-button {
    width: 100%;
    min-height: 46px;
  }

  .whatsapp-fab {
    width: 50px !important;
    height: 50px !important;
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 380px) {
  .main-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .main-content .section-body > .row > [class*="col-"] {
    padding-left: 4px;
    padding-right: 4px;
  }

  .card-body {
    padding: 14px !important;
  }

  .navbar .nav-link {
    min-width: 40px;
    padding: 6px !important;
  }

  #modal-ajax .modal-dialog {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    margin: 5px auto !important;
  }

  #modal-ajax > #main-modal-content > .modal-dialog > .modal-content {
    max-height: calc(100dvh - 10px) !important;
    border-radius: 15px !important;
  }

  #modal-ajax .add-funds-form-content {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }
}

/* When a modal is open, prevent the underlying page from moving. */
body.modal-open {
  padding-right: 0 !important;
}

/* Accessibility / motion preferences. */
:focus-visible {
  outline: 3px solid rgba(23, 105, 255, .24) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}



/* FastlyPay Premium UI/UX v5 — dashboard + support finishing layer */
.fp-dashboard-section { position: relative; }
.fp-dashboard-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 0 6px 20px;
  padding: 26px 28px;
  border: 1px solid rgba(23,105,255,.10);
  border-radius: 22px;
  background:
    radial-gradient(circle at 84% 10%, rgba(79,70,229,.12), transparent 26%),
    linear-gradient(135deg, #ffffff 0%, #f6f9ff 100%);
  box-shadow: 0 16px 46px rgba(15,23,42,.065);
  overflow: hidden;
}
.fp-dashboard-welcome-copy { min-width: 0; }
.fp-dashboard-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #4f46e5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.fp-dashboard-welcome h2 {
  margin: 7px 0 6px;
  color: var(--fp-ink);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.18;
  letter-spacing: -.035em;
  font-weight: 800;
}
.fp-dashboard-welcome p {
  margin: 0;
  max-width: 680px;
  color: var(--fp-muted);
  font-size: 13px;
  line-height: 1.7;
}
.fp-dashboard-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 9px; }
.fp-dashboard-actions .btn { white-space: nowrap; }
.fp-secondary-action { border: 1px solid #e2e8f0 !important; background: #fff !important; color: #475467 !important; box-shadow: none !important; }
.fp-secondary-action:hover { color: var(--fp-primary) !important; background: #f8faff !important; border-color: #dbe6ff !important; }

.fp-stat-grid { align-items: stretch; }
.fp-stat-grid > [class*="col-"] { display: flex; }
.fp-stat-card { width: 100%; height: 100%; }
.fp-stat-card .card-statistic-3 { min-height: 176px; }
.fp-stat-card .card-content > span { font-size: clamp(25px, 2.8vw, 34px); }
.fp-stat-card .card-title { font-size: 12px; letter-spacing: .01em; color: #667085 !important; }
.fp-stat-card .card-icon-large { right: 18px !important; top: 18px !important; opacity: .96; }
.fp-stat-card .progress { margin-top: 18px !important; }
.fp-stat-card .text-sm { font-size: 11px !important; line-height: 1.5; }

.fp-transactions-card .card-header {
  padding-top: 19px;
  padding-bottom: 17px;
}
.fp-transactions-card .card-body { background: linear-gradient(180deg, #fff 0%, #fbfcff 100%); }
.fp-transactions-card .list-unstyled-border .media { border-bottom-color: #eef2f6 !important; }

/* Support section moved out of the profile icon row and into the empty lower sidebar area. */
.main-sidebar .fp-sidebar-support { margin-top: 8px; }
.main-sidebar .fp-sidebar-support .fp-support-link {
  position: relative;
  min-height: 62px !important;
  padding: 8px 14px !important;
  background: linear-gradient(135deg, #f7faff 0%, #ffffff 100%);
  border: 1px solid #e4ecff;
}
.main-sidebar .fp-sidebar-support .fp-support-link:hover {
  transform: none;
  background: #f3f7ff !important;
  border-color: #d9e5ff;
}
.main-sidebar .fp-support-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  border-radius: 10px;
  background: #eaf1ff;
  color: var(--fp-primary);
}
.main-sidebar .fp-support-icon .feather { width: 17px; height: 17px; }
.main-sidebar .fp-support-copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.main-sidebar .fp-support-copy strong { font-size: 12px; font-weight: 800; line-height: 1.2; color: var(--fp-ink); }
.main-sidebar .fp-support-copy small { font-size: 9px; color: #98a2b3; line-height: 1.3; }
.main-sidebar .fp-support-arrow { margin-left: auto !important; flex: 0 0 auto; width: 16px; height: 16px; color: #98a2b3; }

/* Support page */
.fp-support-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid #e4e9f1;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f7f9ff 100%);
  box-shadow: 0 14px 36px rgba(15,23,42,.055);
}
.fp-support-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: #eaf1ff;
  color: var(--fp-primary);
  font-size: 21px;
}
.fp-support-hero-copy { min-width: 0; flex: 1 1 auto; }
.fp-support-hero-copy .page-title { margin: 4px 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.025em; color: var(--fp-ink); }
.fp-support-hero-copy p { margin: 0; color: var(--fp-muted); font-size: 12px; line-height: 1.6; }
.fp-support-hero-action { flex: 0 0 auto; white-space: nowrap; }

.ticket-lists .item {
  position: relative;
  padding: 8px 4px;
  border-bottom: 1px solid #eef2f6;
}
.ticket-lists .item:last-child { border-bottom: 0; }
.ticket-lists .item .content { min-width: 0; }
.ticket-lists .item .subject { font-size: 12px; font-weight: 700; color: #344054; line-height: 1.5; }
.ticket-lists .item .time { color: #98a2b3; margin-top: 3px; }
.ticket-lists .item .action .btn { min-height: 30px; border-radius: 9px !important; padding: 3px 8px; }

@media (max-width: 991.98px) {
  .fp-dashboard-welcome { align-items: flex-start; flex-direction: column; }
  .fp-dashboard-actions { width: 100%; }
}

@media (max-width: 767.98px) {
  .fp-dashboard-welcome { margin: 0 2px 16px; padding: 20px 18px; border-radius: 18px; }
  .fp-dashboard-welcome h2 { font-size: 22px; }
  .fp-dashboard-welcome p { font-size: 12px; }
  .fp-dashboard-actions .btn { flex: 1 1 0; }
  .fp-stat-grid > [class*="col-"] { padding-left: 5px !important; padding-right: 5px !important; }
  .fp-stat-card .card-statistic-3 { min-height: 148px; }
  .fp-stat-card .card-icon-large { right: 13px !important; top: 13px !important; }
  .fp-support-hero { align-items: flex-start; flex-wrap: wrap; padding: 18px; }
  .fp-support-hero-copy { flex-basis: calc(100% - 66px); }
  .fp-support-hero-action { width: 100%; }
  .fp-support-hero-copy .page-title { font-size: 19px; }
  .main-sidebar .fp-sidebar-support .fp-support-link { min-height: 58px !important; }
}

/* Collapsed sidebar support action: keep the lifesaver icon visible while labels collapse. */
.sidebar-mini .main-sidebar .sidebar-menu li.fp-sidebar-support > a.fp-support-link {
  justify-content: center !important;
  padding: 0 !important;
  min-height: 46px !important;
  width: calc(100% - 20px) !important;
}
.sidebar-mini .main-sidebar .sidebar-menu li.fp-sidebar-support .fp-support-icon {
  display: inline-flex !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
}
.sidebar-mini .main-sidebar .sidebar-menu li.fp-sidebar-support .fp-support-copy,
.sidebar-mini .main-sidebar .sidebar-menu li.fp-sidebar-support .fp-support-arrow {
  display: none !important;
}

.fp-support-hero + .row .o-auto {
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  .fp-support-hero + .row .col-md-7 { width: 100%; }
  .fp-support-hero + .row .card-header { align-items: center; }
  .fp-support-hero + .row .ticket-lists .item { padding-block: 9px; }
}

/* FastlyPay Staff/Table Action Menu Fix v6
   Bootstrap dropdowns inside .table-responsive can be clipped by the
   horizontal scroll container and by the card's overflow boundary.
   While a row action menu is open, temporarily release those overflow
   boundaries so every action remains reachable on phones and desktop. */
.main-content .fp-table-action {
  position: relative;
  z-index: 1080;
}
.main-content .fp-table-action .dropdown-menu {
  min-width: 190px;
  max-width: min(240px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid var(--fp-border, #e7ebf3) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 18px 45px rgba(16,24,40,.16) !important;
  z-index: 1090;
}
.main-content .fp-table-action .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 10px;
  white-space: nowrap;
  font-weight: 600;
}
.main-content .fp-table-action .dropdown-menu .dropdown-item:hover,
.main-content .fp-table-action .dropdown-menu .dropdown-item:focus {
  background: #f2f6ff;
  color: var(--fp-primary, #1769ff);
}
.main-content .fp-table-action .dropdown-menu .dropdown-icon {
  width: 18px;
  margin-right: 0 !important;
  flex: 0 0 18px;
  text-align: center;
}
/* These two classes are toggled by admin.js before Bootstrap/Popper
   calculates the dropdown position, so menus are never clipped. */
.main-content .fp-table-menu-open,
.main-content .fp-table-menu-open > .card-body,
.main-content .fp-table-menu-open .table-responsive,
.main-content .table-responsive.fp-table-menu-open {
  overflow: visible !important;
}
.main-content .fp-table-menu-open {
  z-index: 20;
}
@media (max-width: 767.98px) {
  .main-content .fp-table-action .dropdown-menu {
    min-width: 184px;
    max-width: calc(100vw - 22px);
  }
  .main-content .fp-table-action .dropdown-menu .dropdown-item {
    min-height: 44px;
    padding: 10px 11px;
    font-size: 14px;
  }
}



/* ================================================================
   FastlyPay Premium Sidebar + Navigation v7
   - reliable submenu taps on touch devices
   - explicit mobile close affordance
   - no body touch-lock that interferes with drawer interaction
   ================================================================ */
.main-sidebar {
  z-index: 1050 !important;
  isolation: isolate;
}
.main-sidebar .sidebar-brand {
  position: relative;
}
.fp-sidebar-close {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #e8edf5;
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  color: #475467;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(16,24,40,.08);
  z-index: 4;
  cursor: pointer;
}
.fp-sidebar-close .feather { width: 19px; height: 19px; }
.fp-sidebar-close:hover { color: var(--fp-primary); border-color: #cfe0ff; background: #f7faff; }
.main-sidebar .sidebar-menu li > a.has-dropdown { cursor: pointer; }
.main-sidebar .sidebar-menu li > a.has-dropdown .feather { pointer-events: none; }
.main-sidebar .sidebar-menu li > a.has-dropdown > span { pointer-events: none; }

.main-sidebar .fp-support-link {
  min-height: 62px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.main-sidebar .fp-support-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #edf5ff, #f7f9ff) !important;
  border: 1px solid #dbe7ff !important;
  color: var(--fp-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 38px !important;
  margin-right: 11px !important;
}
.main-sidebar .fp-support-icon .feather, .main-sidebar .fp-support-icon .fa { width: 19px !important; height: 19px !important; margin-right: 0 !important; display:inline-flex !important; align-items:center; justify-content:center; fill: none !important; stroke-width: 2 !important; font-size: 17px !important; }
.main-sidebar .fp-support-copy strong { font-size: 13px !important; }
.main-sidebar .fp-support-copy small { font-size: 10px !important; }

@media (max-width: 1024px) {
  body.sidebar-show {
    overflow: hidden !important;
    touch-action: auto !important;
  }
  body.sidebar-show::before {
    z-index: 1040 !important;
    pointer-events: auto !important;
  }
  body.sidebar-show .main-sidebar { z-index: 1050 !important; }
  .fp-sidebar-close { display: inline-flex; }
  .main-sidebar .sidebar-brand { padding-right: 56px !important; }
}

@media (min-width: 1025px) {
  .main-sidebar .sidebar-menu li > a.has-dropdown:hover { background: #f7faff !important; }
}

/* Smooth, premium authentication surface. */
.fp-auth-page {
  min-height: 100dvh;
  padding: 34px 16px 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(23,105,255,.12), transparent 28%),
    radial-gradient(circle at 88% 88%, rgba(124,58,237,.10), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 55%, #f7f9fd 100%);
}
.fp-auth-page::before,
.fp-auth-page::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(4px);
}
.fp-auth-page::before { width: 280px; height: 280px; left: -110px; top: -120px; background: rgba(23,105,255,.08); }
.fp-auth-page::after { width: 320px; height: 320px; right: -140px; bottom: -150px; background: rgba(124,58,237,.08); }
.fp-auth-shell { width: min(100%, 980px); position: relative; z-index: 1; }
.fp-auth-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 24px; align-items: stretch; }
.fp-auth-intro {
  border: 1px solid rgba(23,105,255,.12); border-radius: 26px; padding: 36px;
  background: linear-gradient(155deg, rgba(255,255,255,.92), rgba(247,250,255,.92));
  box-shadow: 0 24px 70px rgba(16,24,40,.08); display:flex; flex-direction:column; justify-content:center;
}
.fp-auth-brand { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.fp-auth-brand img { width:auto; height:54px; max-width:190px; object-fit:contain; }
.fp-auth-kicker { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.11em; color:#4162b8; margin-bottom:12px; }
.fp-auth-kicker::before { content:""; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,#1769ff,#7c3aed); box-shadow:0 0 0 5px rgba(23,105,255,.08); }
.fp-auth-intro h1 { margin:0 0 12px; font-size:clamp(30px,4vw,46px); line-height:1.05; letter-spacing:-.05em; font-weight:800; color:#13213d; }
.fp-auth-intro p { margin:0; color:#667085; line-height:1.8; font-size:14px; }
.fp-auth-points { margin-top:24px; display:grid; gap:10px; }
.fp-auth-point { display:flex; align-items:center; gap:10px; color:#475467; font-size:12px; font-weight:700; }
.fp-auth-point b { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; background:#eef4ff; color:#1769ff; font-size:12px; }
.fp-auth-card {
  border: 1px solid #e5eaf2; border-radius:26px; background:rgba(255,255,255,.96);
  box-shadow:0 28px 80px rgba(16,24,40,.12); overflow:hidden;
}
.fp-auth-card-head { padding:28px 30px 12px; }
.fp-auth-card-head h2 { margin:0 0 7px; font-size:26px; letter-spacing:-.035em; font-weight:800; color:#15213a; }
.fp-auth-card-head p { margin:0; color:#98a2b3; font-size:12px; line-height:1.6; }
.fp-auth-card-body { padding:18px 30px 28px; }
.fp-auth-card .form-group { margin-bottom:18px; }
.fp-auth-card label { margin-bottom:8px; font-size:12px; font-weight:800; color:#344054; }
.fp-auth-card .form-control { height:50px; min-height:50px; border-radius:13px !important; border-color:#dfe5ee !important; }
.fp-auth-card .form-control:hover { border-color:#cbd5e1 !important; }
.fp-auth-card .form-control:focus { border-color:#8fb6ff !important; box-shadow:0 0 0 4px rgba(23,105,255,.10) !important; }
.fp-auth-card .btn-primary { min-height:52px; border-radius:13px !important; font-size:13px; }
.fp-auth-card .btn-outline-primary { width:100%; min-height:50px; margin-top:8px; border-radius:13px !important; }
.fp-auth-card .custom-control-label { font-size:11px; color:#667085; font-weight:600; }
.fp-auth-card .text-small { font-size:11px; font-weight:700; }
.fp-auth-footer { padding:0 30px 28px; text-align:center; color:#98a2b3; font-size:12px; }
.fp-auth-footer a { color:#1769ff; font-weight:800; }
.fp-auth-divider { display:flex; align-items:center; gap:10px; margin:14px 0 6px; color:#98a2b3; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.fp-auth-divider::before,.fp-auth-divider::after { content:""; height:1px; background:#edf0f5; flex:1; }

@media (max-width: 860px) {
  .fp-auth-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline:auto; }
  .fp-auth-intro { display:none; }
}
@media (max-width: 575.98px) {
  .fp-auth-page { padding:20px 10px 28px; }
  .fp-auth-card { border-radius:20px; }
  .fp-auth-card-head { padding:23px 20px 9px; }
  .fp-auth-card-body { padding:13px 20px 22px; }
  .fp-auth-footer { padding:0 20px 22px; }
  .fp-auth-card-head h2 { font-size:23px; }
  .fp-auth-brand { justify-content:center; margin-bottom:18px; }
  .fp-auth-brand img { height:48px; }
}

/* ================================================================
   Public landing polish v7
   ================================================================ */
#hero { background:
  radial-gradient(circle at 10% 15%, rgba(79,70,229,.12), transparent 25%),
  radial-gradient(circle at 88% 16%, rgba(23,105,255,.13), transparent 27%),
  linear-gradient(180deg,#ffffff 0%,#f7fbff 100%) !important; }
#hero::after { opacity:.75; }
#hero .hero-img { position:relative; }
#hero .hero-img::before {
  content:""; position:absolute; width:78%; height:78%; border-radius:40px;
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(234,241,255,.7));
  border:1px solid rgba(23,105,255,.10); box-shadow:0 30px 80px rgba(23,105,255,.10);
  z-index:-1; transform:rotate(-4deg);
}
.values .box,.features .feature-box,.services .service-box,.count-box,.pricing .box {
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pricing .box { border:1px solid rgba(15,23,42,.08) !important; border-radius:24px !important; background:linear-gradient(180deg,#fff,#fbfcff) !important; box-shadow:0 18px 55px rgba(15,23,42,.06) !important; transition:transform .22s ease,box-shadow .22s ease; }
.pricing .box:hover { transform:translateY(-6px); box-shadow:0 26px 68px rgba(15,23,42,.10) !important; }
.pricing .box .btn-buy { border-radius:12px !important; background:linear-gradient(135deg,#1769ff,#4f46e5) !important; box-shadow:0 12px 25px rgba(79,70,229,.18); }
#footer.footer { border-top:1px solid #edf1f6; }
@media (max-width: 575.98px) {
  #hero .hero-img::before { width:90%; height:76%; border-radius:26px; }
  #hero .hero-img img { max-width:92%; }
  .section-header { padding-bottom:28px; }
}
@media (max-width: 575.98px) {
  .fp-auth-page { align-items: flex-start; }
  .fp-auth-card-body > form > .row { margin-left:0; margin-right:0; }
  .fp-auth-card-body > form > .row > [class*="col-"] { width:100%; padding-left:0; padding-right:0; }
}


/* FastlyPay Premium navigation v9 — every primary menu action gets the same
   polished touch target language as Support, without changing navigation URLs. */
.main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a:not(.has-dropdown),
.main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a.has-dropdown {
  min-height: 52px !important;
  padding: 7px 12px !important;
  gap: 10px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.78);
}
.main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a:not(.has-dropdown):hover,
.main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a.has-dropdown:hover {
  border-color: #e4ecff !important;
  background: linear-gradient(135deg,#f5f8ff,#ffffff) !important;
  box-shadow: 0 8px 20px rgba(23,105,255,.055);
  transform: translateX(2px);
}
.main-sidebar .sidebar-menu > li.active > a:not(.has-dropdown),
.main-sidebar .sidebar-menu > li.active > a.has-dropdown,
.main-sidebar .sidebar-menu > li.open > a.has-dropdown {
  border-color: #dbe7ff !important;
  background: linear-gradient(135deg,#eef4ff,#f8faff) !important;
  box-shadow: inset 3px 0 0 var(--fp-primary), 0 8px 22px rgba(23,105,255,.06);
}
.main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a > i,
.main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a > .feather {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px !important;
  height: 34px !important;
  margin-right: 0 !important;
  border: 1px solid #e4ebf7;
  border-radius: 10px;
  background: linear-gradient(135deg,#f7f9fd,#edf3ff);
  color: #667085 !important;
  stroke-width: 1.9;
}
.main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a:hover > i,
.main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a:hover > .feather,
.main-sidebar .sidebar-menu > li.active > a > i,
.main-sidebar .sidebar-menu > li.active > a > .feather,
.main-sidebar .sidebar-menu > li.open > a.has-dropdown > i,
.main-sidebar .sidebar-menu > li.open > a.has-dropdown > .feather {
  border-color: #cfe0ff;
  background: #eaf2ff;
  color: var(--fp-primary) !important;
}
.main-sidebar .sidebar-menu > li > a > span { line-height: 1.2; }
.main-sidebar .sidebar-menu > li > a.has-dropdown:after {
  color: #98a2b3 !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu {
  margin: 0 10px 6px !important;
  padding: 6px !important;
  border: 1px solid #e8edf5 !important;
  border-radius: 14px !important;
  background: #fbfcff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 26px rgba(16,24,40,.055) !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu li a {
  min-height: 40px !important;
  margin: 2px 0 !important;
  border-radius: 10px !important;
  padding: 8px 12px 8px 42px !important;
  color: #667085 !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu li a:hover,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu li.active a {
  color: var(--fp-primary) !important;
  background: #eef4ff !important;
}

/* Dashboard Support action uses the same recognizable headphone mark as the sidebar. */
.fp-dashboard-actions .fp-secondary-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  min-width: 150px;
  border: 1px solid #dce5f2 !important;
  background: linear-gradient(135deg,#ffffff,#f8faff) !important;
  color: #344054 !important;
  box-shadow: 0 8px 22px rgba(16,24,40,.045) !important;
}
.fp-dashboard-actions .fp-secondary-action:hover {
  border-color: #cfe0ff !important;
  color: var(--fp-primary) !important;
  background: #f5f8ff !important;
  box-shadow: 0 12px 28px rgba(23,105,255,.10) !important;
}
.fp-dashboard-support-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: #eaf2ff;
  border: 1px solid #d7e5ff;
  color: var(--fp-primary);
}
.fp-dashboard-support-icon .feather, .fp-dashboard-support-icon .fa { width: 17px; height: 17px; display:inline-flex; align-items:center; justify-content:center; stroke-width:2; font-size:16px; }

/* Authentication inputs — clean icon lane, no placeholder/icon collision. */
.fp-auth-simple .fp-auth-input-wrap .form-control {
  padding-left: 50px !important;
  padding-right: 15px !important;
  text-indent: 0 !important;
}
.fp-auth-simple .fp-auth-input-icon {
  left: 15px !important;
  top: 50% !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #7b8799 !important;
  line-height: 0;
}
.fp-auth-simple .fp-auth-input-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fp-auth-simple .fp-auth-input-wrap:focus-within .fp-auth-input-icon { color: #1769ff !important; }
.fp-auth-simple .fp-auth-input-wrap:focus-within .fp-auth-input-icon svg { stroke-width: 2; }

@media (max-width: 575.98px) {
  .main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a:not(.has-dropdown),
  .main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a.has-dropdown {
    min-height: 50px !important;
    margin-top: 4px;
    margin-bottom: 4px;
  }
  .main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a > i,
  .main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a > .feather {
    flex-basis: 32px;
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px;
  }
  .fp-dashboard-actions .fp-secondary-action { min-width: 0; }
}

/* ================================================================
   FastlyPay Premium Navigation + Action Menu v10
   ================================================================ */
.main-sidebar .sidebar-menu > li > a.fp-nav-link {
  position: relative;
  display: flex !important;
  align-items: center !important;
  width: calc(100% - 20px) !important;
  min-height: 54px !important;
  margin: 5px 10px !important;
  padding: 7px 11px !important;
  border: 1px solid rgba(225,232,244,.95) !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg,#ffffff 0%,#fbfcff 100%) !important;
  box-shadow: 0 6px 18px rgba(16,24,40,.025) !important;
  color: #475467 !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link:hover,
.main-sidebar .sidebar-menu > li.active > a.fp-nav-link,
.main-sidebar .sidebar-menu > li.open > a.fp-nav-link,
.main-sidebar .sidebar-menu > li > a.fp-nav-link:focus-visible {
  border-color: #cfe0ff !important;
  background: linear-gradient(135deg,#f4f8ff 0%,#ffffff 100%) !important;
  box-shadow: 0 10px 24px rgba(23,105,255,.07), inset 3px 0 0 var(--fp-primary) !important;
  color: var(--fp-primary) !important;
  transform: translateX(1px);
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link > i,
.main-sidebar .sidebar-menu > li > a.fp-nav-link > .feather {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  margin-right: 11px !important;
  border: 1px solid #dfe7f3 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg,#f5f8fd 0%,#edf3ff 100%) !important;
  color: #657185 !important;
  stroke-width: 1.85;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link:hover > i,
.main-sidebar .sidebar-menu > li > a.fp-nav-link:hover > .feather,
.main-sidebar .sidebar-menu > li.active > a.fp-nav-link > i,
.main-sidebar .sidebar-menu > li.active > a.fp-nav-link > .feather,
.main-sidebar .sidebar-menu > li.open > a.fp-nav-link > i,
.main-sidebar .sidebar-menu > li.open > a.fp-nav-link > .feather {
  border-color: #cfe0ff !important;
  background: linear-gradient(135deg,#eaf2ff 0%,#f3f7ff 100%) !important;
  color: var(--fp-primary) !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link > span {
  min-width: 0;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link.has-dropdown:after {
  margin-left: auto !important;
  width: 8px !important;
  height: 8px !important;
  border-width: 0 1.5px 1.5px 0 !important;
  border-color: #9aa5b5 !important;
  right: 14px !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link.has-dropdown.toggled:after,
.main-sidebar .sidebar-menu > li.open > a.fp-nav-link.has-dropdown:after {
  border-color: var(--fp-primary) !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link.has-dropdown + ul.dropdown-menu {
  margin: 0 20px 8px !important;
}

/* Support stays the visual anchor of the navigation system. */
.main-sidebar .sidebar-menu > li.fp-sidebar-support > a.fp-support-link {
  width: calc(100% - 20px) !important;
  margin: 7px 10px 5px !important;
  min-height: 64px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg,#f7faff 0%,#ffffff 100%) !important;
  box-shadow: 0 8px 22px rgba(23,105,255,.045) !important;
}
.main-sidebar .sidebar-menu > li.fp-sidebar-support > a.fp-support-link:hover,
.main-sidebar .sidebar-menu > li.fp-sidebar-support.active > a.fp-support-link {
  border-color: #cfe0ff !important;
  background: linear-gradient(135deg,#eef5ff 0%,#ffffff 100%) !important;
  box-shadow: 0 12px 28px rgba(23,105,255,.08) !important;
}
.main-sidebar .sidebar-menu > li.fp-sidebar-support .fp-support-icon {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 12px !important;
}
.main-sidebar .sidebar-menu > li.fp-sidebar-support .fp-support-copy strong { font-size: 13px !important; }
.main-sidebar .sidebar-menu > li.fp-sidebar-support .fp-support-copy small { font-size: 10px !important; }

/* Body-level portal used by Admin Staff/Users row actions. */
.fp-action-menu-floating {
  position: fixed !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 7px !important;
  margin: 0 !important;
  border: 1px solid #e3eaf3 !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 24px 60px rgba(16,24,40,.18), 0 4px 12px rgba(16,24,40,.06) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.fp-action-menu-floating .dropdown-item.fp-action-item,
.fp-action-menu-floating .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 45px !important;
  margin: 2px 0 !important;
  padding: 9px 11px !important;
  border-radius: 11px !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #344054 !important;
  text-decoration: none !important;
  background: transparent !important;
  cursor: pointer;
}
.fp-action-menu-floating .dropdown-item:hover,
.fp-action-menu-floating .dropdown-item:focus-visible {
  background: #f2f6ff !important;
  color: var(--fp-primary) !important;
  outline: none !important;
}
.fp-action-menu-floating .dropdown-item.text-danger:hover,
.fp-action-menu-floating .dropdown-item.text-danger:focus-visible {
  background: #fff2f2 !important;
  color: #dc3545 !important;
}
.fp-action-menu-floating .dropdown-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  margin: 0 !important;
  border-radius: 9px !important;
  background: #f1f5fb !important;
  color: #667085 !important;
  font-size: 12px !important;
}
.fp-action-menu-floating .dropdown-item:hover .dropdown-icon,
.fp-action-menu-floating .dropdown-item:focus-visible .dropdown-icon {
  background: #e7f0ff !important;
  color: var(--fp-primary) !important;
}
.fp-action-menu-floating .dropdown-item.text-danger .dropdown-icon {
  color: #dc3545 !important;
  background: #fff0f0 !important;
}
.fp-action-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 1px solid #dfe6f0 !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg,#ffffff,#f6f8fc) !important;
  color: #657185 !important;
  box-shadow: 0 5px 16px rgba(16,24,40,.045) !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fp-action-trigger:hover,
.fp-action-trigger:focus-visible,
.fp-action-open .fp-action-trigger {
  border-color: #cfe0ff !important;
  background: #eef5ff !important;
  color: var(--fp-primary) !important;
  outline: none !important;
  box-shadow: 0 8px 20px rgba(23,105,255,.09) !important;
}
.fp-action-trigger i { pointer-events: none; font-size: 14px; }

@media (max-width: 575.98px) {
  .main-sidebar .sidebar-menu > li > a.fp-nav-link {
    min-height: 56px !important;
    margin: 5px 8px !important;
    width: calc(100% - 16px) !important;
    padding: 7px 10px !important;
    border-radius: 15px !important;
  }
  .main-sidebar .sidebar-menu > li > a.fp-nav-link > i,
  .main-sidebar .sidebar-menu > li > a.fp-nav-link > .feather {
    width: 39px !important;
    height: 39px !important;
    flex-basis: 39px !important;
    margin-right: 10px !important;
  }
  .main-sidebar .sidebar-menu > li > a.fp-nav-link > span { font-size: 13px; }
  .main-sidebar .sidebar-menu > li.fp-sidebar-support > a.fp-support-link {
    width: calc(100% - 16px) !important;
    margin: 7px 8px 5px !important;
  }
  .fp-action-menu-floating {
    border-radius: 15px !important;
    padding: 7px !important;
  }
  .fp-action-menu-floating .dropdown-item.fp-action-item,
  .fp-action-menu-floating .dropdown-item {
    min-height: 48px !important;
    font-size: 14px !important;
    padding: 10px 11px !important;
  }
  .fp-action-trigger {
    width: 40px !important;
    height: 40px !important;
  }
}


/* ================================================================
   FastlyPay Premium Navigation v11
   Make every primary navigation item feel like the Support Tickets card:
   consistent rounded surface, icon tile, tactile states and clean affordance.
   ================================================================ */
.main-sidebar .sidebar-menu > li:not(.menu-header) > a.fp-nav-link {
  position: relative !important;
  width: calc(100% - 20px) !important;
  min-height: 58px !important;
  margin: 6px 10px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  border: 1px solid #e5ebf4 !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg,#ffffff 0%,#fbfcff 100%) !important;
  box-shadow: 0 7px 20px rgba(16,24,40,.025) !important;
  color: #475467 !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.main-sidebar .sidebar-menu > li:not(.menu-header) > a.fp-nav-link::after {
  content: '' !important;
  flex: 0 0 auto !important;
  width: 8px !important;
  height: 8px !important;
  margin-left: auto !important;
  border: solid #98a2b3 !important;
  border-width: 0 1.5px 1.5px 0 !important;
  transform: rotate(-45deg) !important;
  opacity: .9;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link.has-dropdown::after {
  width: 8px !important;
  height: 8px !important;
  border-width: 0 1.6px 1.6px 0 !important;
  transform: rotate(45deg) !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link.has-dropdown.toggled::after,
.main-sidebar .sidebar-menu > li.open > a.fp-nav-link.has-dropdown::after {
  transform: rotate(225deg) !important;
  border-color: var(--fp-primary) !important;
}
.main-sidebar .sidebar-menu > li:not(.menu-header) > a.fp-nav-link:hover,
.main-sidebar .sidebar-menu > li.active > a.fp-nav-link,
.main-sidebar .sidebar-menu > li.open > a.fp-nav-link,
.main-sidebar .sidebar-menu > li > a.fp-nav-link:focus-visible {
  transform: translateY(-1px) !important;
  border-color: #cfe0ff !important;
  background: linear-gradient(135deg,#f2f7ff 0%,#ffffff 100%) !important;
  box-shadow: 0 12px 26px rgba(23,105,255,.08), inset 3px 0 0 var(--fp-primary) !important;
  color: var(--fp-primary) !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link > i,
.main-sidebar .sidebar-menu > li > a.fp-nav-link > .feather {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  flex: 0 0 40px !important;
  margin: 0 12px 0 0 !important;
  border: 1px solid #dfe7f3 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg,#f4f7fc 0%,#edf3ff 100%) !important;
  color: #657185 !important;
  box-shadow: 0 4px 10px rgba(16,24,40,.03) !important;
  stroke-width: 1.9 !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link:hover > i,
.main-sidebar .sidebar-menu > li > a.fp-nav-link:hover > .feather,
.main-sidebar .sidebar-menu > li.active > a.fp-nav-link > i,
.main-sidebar .sidebar-menu > li.active > a.fp-nav-link > .feather,
.main-sidebar .sidebar-menu > li.open > a.fp-nav-link > i,
.main-sidebar .sidebar-menu > li.open > a.fp-nav-link > .feather {
  border-color: #cfe0ff !important;
  background: linear-gradient(135deg,#e9f2ff 0%,#f3f7ff 100%) !important;
  color: var(--fp-primary) !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link > span {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
  letter-spacing: -.01em !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link.has-dropdown {
  padding-right: 12px !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link.has-dropdown + ul.dropdown-menu {
  margin: 2px 20px 9px !important;
  padding: 7px !important;
  border: 1px solid #e7edf5 !important;
  border-radius: 14px !important;
  background: #fcfdff !important;
  box-shadow: 0 12px 28px rgba(16,24,40,.055) !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu li a {
  min-height: 42px !important;
  margin: 2px 0 !important;
  border-radius: 11px !important;
  padding: 9px 12px 9px 15px !important;
  color: #667085 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: transparent !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu li a:hover,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu li.active a {
  color: var(--fp-primary) !important;
  background: #eef4ff !important;
}
.main-sidebar .sidebar-menu > li.fp-sidebar-support > a.fp-support-link {
  width: calc(100% - 20px) !important;
  min-height: 66px !important;
  margin: 7px 10px 6px !important;
  padding: 8px 12px !important;
  border-radius: 16px !important;
  border: 1px solid #e2e9f3 !important;
  background: linear-gradient(135deg,#f8fbff 0%,#ffffff 100%) !important;
  box-shadow: 0 8px 22px rgba(23,105,255,.055) !important;
}
.main-sidebar .sidebar-menu > li.fp-sidebar-support > a.fp-support-link:hover,
.main-sidebar .sidebar-menu > li.fp-sidebar-support.active > a.fp-support-link {
  border-color: #cfe0ff !important;
  background: linear-gradient(135deg,#eef5ff 0%,#ffffff 100%) !important;
  box-shadow: 0 12px 28px rgba(23,105,255,.09) !important;
}
.main-sidebar .sidebar-menu > li.fp-sidebar-support .fp-support-icon {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  margin-right: 12px !important;
  border-radius: 12px !important;
}
.main-sidebar .sidebar-menu > li.fp-sidebar-support .fp-support-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.main-sidebar .sidebar-menu > li.fp-sidebar-support .fp-support-copy strong { font-size: 13px !important; }
.main-sidebar .sidebar-menu > li.fp-sidebar-support .fp-support-copy small { font-size: 10px !important; }
.main-sidebar .sidebar-menu > li.fp-sidebar-support .fp-support-arrow { margin-left: 8px !important; flex: 0 0 auto; }

/* Premium Staff/User row action menu — reliable and visually consistent. */
.fp-action-menu-floating {
  min-width: 226px !important;
  width: 246px !important;
  padding: 8px !important;
  border: 1px solid #e0e8f3 !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,.985) !important;
  box-shadow: 0 28px 70px rgba(16,24,40,.20), 0 8px 22px rgba(16,24,40,.06) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.fp-action-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 2px 8px 6px;
  color: #667085;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fp-action-menu-head i { font-size: 13px; color: #98a2b3; }
.fp-action-menu-floating .dropdown-item.fp-action-item,
.fp-action-menu-floating .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 2px 0 !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
  color: #344054 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}
.fp-action-menu-floating .dropdown-item:hover,
.fp-action-menu-floating .dropdown-item:focus-visible {
  outline: none !important;
  background: #f0f5ff !important;
  color: var(--fp-primary) !important;
}
.fp-action-menu-floating .dropdown-item.text-danger:hover,
.fp-action-menu-floating .dropdown-item.text-danger:focus-visible {
  background: #fff1f1 !important;
  color: #dc3545 !important;
}
.fp-action-menu-floating .dropdown-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  border: 1px solid #e0e8f3 !important;
  background: linear-gradient(135deg,#f6f8fc,#edf3ff) !important;
  color: #667085 !important;
  font-size: 12px !important;
}
.fp-action-menu-floating .dropdown-item:hover .dropdown-icon,
.fp-action-menu-floating .dropdown-item:focus-visible .dropdown-icon {
  border-color: #cfe0ff !important;
  background: #e8f1ff !important;
  color: var(--fp-primary) !important;
}
.fp-action-menu-floating .dropdown-item.text-danger .dropdown-icon {
  border-color: #ffd8d8 !important;
  background: #fff0f0 !important;
  color: #dc3545 !important;
}
.fp-action-item-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 575.98px) {
  .main-sidebar .sidebar-menu > li:not(.menu-header) > a.fp-nav-link,
  .main-sidebar .sidebar-menu > li.fp-sidebar-support > a.fp-support-link {
    width: calc(100% - 16px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    border-radius: 15px !important;
  }
  .main-sidebar .sidebar-menu > li:not(.menu-header) > a.fp-nav-link { min-height: 56px !important; }
  .main-sidebar .sidebar-menu > li > a.fp-nav-link > i,
  .main-sidebar .sidebar-menu > li > a.fp-nav-link > .feather,
  .main-sidebar .sidebar-menu > li.fp-sidebar-support .fp-support-icon {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 11px !important;
  }
  .fp-action-menu-floating { width: min(246px, calc(100vw - 20px)) !important; min-width: min(206px, calc(100vw - 20px)) !important; }
}

/* ================================================================
   FastlyPay Premium Navigation v12
   A single final layer for consistent, high-quality primary and
   secondary navigation. Every primary item visually belongs to the
   same component family as Support Tickets.
   ================================================================ */
.main-sidebar .sidebar-menu > li:not(.menu-header) > a.fp-nav-link,
.main-sidebar .sidebar-menu > li.fp-sidebar-support > a.fp-support-link {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  width: calc(100% - 18px) !important;
  margin: 5px 9px !important;
  min-height: 58px !important;
  padding: 8px 10px !important;
  border: 1px solid #e2e9f3 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
  box-shadow: 0 5px 16px rgba(20, 36, 64, .035) !important;
  color: #435064 !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.main-sidebar .sidebar-menu > li:not(.menu-header) > a.fp-nav-link:hover,
.main-sidebar .sidebar-menu > li:not(.menu-header) > a.fp-nav-link:focus-visible,
.main-sidebar .sidebar-menu > li.active > a.fp-nav-link,
.main-sidebar .sidebar-menu > li.open > a.fp-nav-link {
  color: #1769ff !important;
  border-color: #cfe0ff !important;
  background: linear-gradient(180deg, #f4f8ff 0%, #edf4ff 100%) !important;
  box-shadow: 0 10px 24px rgba(23,105,255,.08), inset 3px 0 0 #1769ff !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link > i,
.main-sidebar .sidebar-menu > li > a.fp-nav-link > .feather {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  margin: 0 11px 0 0 !important;
  border: 1px solid #dce5f1 !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #f7f9fd 0%, #edf3ff 100%) !important;
  color: #68768a !important;
  box-shadow: 0 3px 10px rgba(20,36,64,.04) !important;
  stroke-width: 1.9 !important;
}
.main-sidebar .sidebar-menu > li:not(.menu-header) > a.fp-nav-link:hover > i,
.main-sidebar .sidebar-menu > li.active > a.fp-nav-link > i,
.main-sidebar .sidebar-menu > li.open > a.fp-nav-link > i {
  color: #1769ff !important;
  border-color: #cfe0ff !important;
  background: linear-gradient(145deg, #eaf2ff 0%, #f4f8ff 100%) !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link > span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
  letter-spacing: -.012em !important;
  overflow-wrap: anywhere !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link:not(.has-dropdown)::after {
  content: '' !important;
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  margin-left: 9px !important;
  border: solid #a5afbd !important;
  border-width: 0 1.6px 1.6px 0 !important;
  transform: rotate(-45deg) !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link.has-dropdown::after {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  margin-left: 9px !important;
  border: solid #a5afbd !important;
  border-width: 0 1.6px 1.6px 0 !important;
  transform: rotate(45deg) !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link.has-dropdown.toggled::after,
.main-sidebar .sidebar-menu > li.open > a.fp-nav-link.has-dropdown::after {
  transform: rotate(225deg) !important;
  border-color: #1769ff !important;
}

/* Secondary navigation: a compact premium panel, readable on phones. */
.main-sidebar .sidebar-menu > li > a.has-dropdown + ul.dropdown-menu,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu {
  position: relative !important;
  margin: 0 14px 8px !important;
  padding: 7px !important;
  width: calc(100% - 28px) !important;
  box-sizing: border-box !important;
  border: 1px solid #e6ebf3 !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #fafcff 0%, #f7f9fc 100%) !important;
  box-shadow: 0 8px 22px rgba(20,36,64,.045) !important;
  overflow: hidden !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li {
  margin: 0 !important;
  padding: 0 !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 2px 0 !important;
  padding: 6px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #626f82 !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link > i,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link > .feather {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  margin: 0 9px 0 0 !important;
  border: 1px solid #e0e7f1 !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #7a8798 !important;
  stroke-width: 1.85 !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link > span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link::after {
  content: '' !important;
  flex: 0 0 6px !important;
  width: 6px !important;
  height: 6px !important;
  margin-left: 8px !important;
  border: solid #b0b8c4 !important;
  border-width: 0 1.2px 1.2px 0 !important;
  transform: rotate(-45deg) !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link:hover,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li.active > a.fp-subnav-link,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link:focus-visible {
  color: #1769ff !important;
  border-color: #d6e4ff !important;
  background: linear-gradient(180deg, #f3f7ff 0%, #edf4ff 100%) !important;
  transform: translateX(1px) !important;
  outline: none !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link:hover > i,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li.active > a.fp-subnav-link > i,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link:focus-visible > i {
  color: #1769ff !important;
  border-color: #d0e0ff !important;
  background: #ffffff !important;
}

/* Support remains the visual reference component. */
.main-sidebar .sidebar-menu > li.fp-sidebar-support > a.fp-support-link {
  min-height: 66px !important;
  margin-top: 8px !important;
  margin-bottom: 6px !important;
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%) !important;
  border-color: #dfe8f3 !important;
}
.main-sidebar .sidebar-menu > li.fp-sidebar-support > a.fp-support-link:hover,
.main-sidebar .sidebar-menu > li.fp-sidebar-support.active > a.fp-support-link {
  background: linear-gradient(180deg, #f1f6ff 0%, #ffffff 100%) !important;
  border-color: #cfe0ff !important;
  box-shadow: 0 12px 28px rgba(23,105,255,.095) !important;
}
.main-sidebar .sidebar-menu > li.fp-sidebar-support .fp-support-icon {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  margin-right: 12px !important;
  border-radius: 12px !important;
}

@media (max-width: 575.98px) {
  .main-sidebar .sidebar-menu > li:not(.menu-header) > a.fp-nav-link,
  .main-sidebar .sidebar-menu > li.fp-sidebar-support > a.fp-support-link {
    width: calc(100% - 16px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    min-height: 58px !important;
    border-radius: 15px !important;
  }
  .main-sidebar .sidebar-menu > li > a.fp-nav-link > i,
  .main-sidebar .sidebar-menu > li > a.fp-nav-link > .feather {
    flex-basis: 39px !important;
    width: 39px !important;
    min-width: 39px !important;
    height: 39px !important;
    margin-right: 10px !important;
    border-radius: 11px !important;
  }
  .main-sidebar .sidebar-menu > li > a.fp-nav-link > span {
    font-size: 13.5px !important;
  }
  .main-sidebar .sidebar-menu > li > ul.dropdown-menu {
    margin-left: 10px !important;
    margin-right: 10px !important;
    width: calc(100% - 20px) !important;
    border-radius: 14px !important;
    padding: 6px !important;
  }
  .main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link {
    min-height: 46px !important;
    font-size: 12.5px !important;
    border-radius: 11px !important;
  }
  .main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link > i,
  .main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link > .feather {
    flex-basis: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
  }
}


/* ================================================================
   FastlyPay Premium Navigation v13 — final menu system polish
   - Every primary menu item uses the same premium card language as
     Support Tickets.
   - Dropdown parents keep the existing click/toggle behavior.
   - Submenu items are readable, aligned, touch-friendly and never
     collapse into tiny/fragmented text.
   ================================================================ */
.main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a.fp-nav-link {
  box-sizing: border-box !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: calc(100% - 18px) !important;
  min-height: 62px !important;
  margin: 6px 9px !important;
  padding: 9px 12px !important;
  border: 1px solid #e0e8f2 !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg,#ffffff 0%,#fbfdff 55%,#f8fbff 100%) !important;
  box-shadow: 0 7px 20px rgba(20,36,64,.045), inset 0 1px 0 rgba(255,255,255,.95) !important;
  color: #435064 !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
}
.main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a.fp-nav-link:hover,
.main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a.fp-nav-link:focus-visible,
.main-sidebar .sidebar-menu > li.active:not(.fp-sidebar-support) > a.fp-nav-link,
.main-sidebar .sidebar-menu > li.open:not(.fp-sidebar-support) > a.fp-nav-link {
  color: #1769ff !important;
  border-color: #c8dcff !important;
  background: linear-gradient(145deg,#f2f7ff 0%,#ebf3ff 100%) !important;
  box-shadow: 0 12px 28px rgba(23,105,255,.09), inset 3px 0 0 #1769ff, inset 0 1px 0 rgba(255,255,255,.95) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link > i,
.main-sidebar .sidebar-menu > li > a.fp-nav-link > .feather {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  margin: 0 12px 0 0 !important;
  border: 1px solid #d9e3ef !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg,#f8faff 0%,#edf3fb 100%) !important;
  color: #68768a !important;
  box-shadow: 0 4px 11px rgba(20,36,64,.05) !important;
  stroke-width: 1.9 !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link:hover > i,
.main-sidebar .sidebar-menu > li > a.fp-nav-link:hover > .feather,
.main-sidebar .sidebar-menu > li.active > a.fp-nav-link > i,
.main-sidebar .sidebar-menu > li.active > a.fp-nav-link > .feather,
.main-sidebar .sidebar-menu > li.open > a.fp-nav-link > i,
.main-sidebar .sidebar-menu > li.open > a.fp-nav-link > .feather {
  color: #1769ff !important;
  border-color: #c8dcff !important;
  background: linear-gradient(145deg,#e8f1ff 0%,#f4f8ff 100%) !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link > span {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
  letter-spacing: -.012em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Single-level links get the same right-side affordance as Support Tickets. */
.main-sidebar .sidebar-menu > li > a.fp-nav-link:not(.has-dropdown)::after {
  content: '' !important;
  flex: 0 0 7px !important;
  width: 7px !important;
  height: 7px !important;
  margin-left: 10px !important;
  border: solid #9ca8b7 !important;
  border-width: 0 1.7px 1.7px 0 !important;
  transform: rotate(-45deg) !important;
}
/* Dropdown parents use a chevron instead of the legacy text-like +/- marker. */
.main-sidebar .sidebar-menu > li > a.fp-nav-link.has-dropdown::after {
  content: '' !important;
  flex: 0 0 8px !important;
  width: 8px !important;
  height: 8px !important;
  margin-left: 10px !important;
  border: solid #9ca8b7 !important;
  border-width: 0 1.7px 1.7px 0 !important;
  transform: rotate(45deg) !important;
  transition: transform .18s ease, border-color .18s ease !important;
}
.main-sidebar .sidebar-menu > li > a.fp-nav-link.has-dropdown.toggled::after,
.main-sidebar .sidebar-menu > li.open > a.fp-nav-link.has-dropdown::after {
  border-color: #1769ff !important;
  transform: rotate(225deg) !important;
}

/* Secondary menu: larger, cleaner text and icon tiles. */
.main-sidebar .sidebar-menu > li > a.fp-nav-link + ul.dropdown-menu,
.main-sidebar .sidebar-menu > li > a.has-dropdown + ul.dropdown-menu {
  position: relative !important;
  box-sizing: border-box !important;
  width: calc(100% - 28px) !important;
  margin: 0 14px 9px !important;
  padding: 8px !important;
  border: 1px solid #e1e8f1 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg,#fbfdff 0%,#f6f9fd 100%) !important;
  box-shadow: 0 9px 24px rgba(20,36,64,.055), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a {
  box-sizing: border-box !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 3px 0 !important;
  padding: 7px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #56647a !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link > i,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link > .feather {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  margin: 0 10px 0 0 !important;
  border: 1px solid #dce5ef !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg,#ffffff,#f0f4fa) !important;
  color: #78869a !important;
  stroke-width: 1.8 !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link > span {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link::after {
  content: '' !important;
  flex: 0 0 6px !important;
  width: 6px !important;
  height: 6px !important;
  margin-left: 8px !important;
  border: solid #adb7c4 !important;
  border-width: 0 1.3px 1.3px 0 !important;
  transform: rotate(-45deg) !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link:hover,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li.active > a.fp-subnav-link,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link:focus-visible {
  color: #1769ff !important;
  border-color: #d2e2ff !important;
  background: linear-gradient(145deg,#eff5ff,#eaf2ff) !important;
  box-shadow: 0 6px 14px rgba(23,105,255,.055) !important;
  transform: translateX(1px) !important;
  outline: none !important;
}
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link:hover > i,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li.active > a.fp-subnav-link > i,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link:focus-visible > i,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link:hover > .feather,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li.active > a.fp-subnav-link > .feather,
.main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link:focus-visible > .feather {
  color: #1769ff !important;
  border-color: #cfe0ff !important;
  background: #ffffff !important;
}

@media (max-width: 575.98px) {
  .main-sidebar .sidebar-menu > li:not(.menu-header):not(.fp-sidebar-support) > a.fp-nav-link {
    width: calc(100% - 16px) !important;
    margin: 5px 8px !important;
    min-height: 60px !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
  }
  .main-sidebar .sidebar-menu > li > a.fp-nav-link > i,
  .main-sidebar .sidebar-menu > li > a.fp-nav-link > .feather {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    margin-right: 10px !important;
    border-radius: 12px !important;
  }
  .main-sidebar .sidebar-menu > li > a.fp-nav-link > span { font-size: 14px !important; }
  .main-sidebar .sidebar-menu > li > a.fp-nav-link + ul.dropdown-menu,
  .main-sidebar .sidebar-menu > li > a.has-dropdown + ul.dropdown-menu {
    width: calc(100% - 22px) !important;
    margin: 0 11px 9px !important;
    padding: 8px !important;
    border-radius: 15px !important;
  }
  .main-sidebar .sidebar-menu > li > ul.dropdown-menu > li > a.fp-subnav-link {
    min-height: 48px !important;
    font-size: 13px !important;
  }
}