@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');

:root {
  --pgs-primary: #4d4d4d;
  --pgs-primary-light: #959595;
  --pgs-secondary: #1b5377;
  --pgs-secondary-light: #0a5988;
  --pgs-border: #e7e7e7;
  --pgs-black: #000000;
  --pgs-app-bg: #f6f8fb;
  --pgs-surface: #ffffff;
  --pgs-surface-2: #fbfcfe;
  --pgs-text: var(--pgs-primary);
  --pgs-text-muted: #5f6b7a;
  --pgs-font-weight-base: 500;
  --pgs-font-weight-heading: 600;
  --pgs-font-weight-button: 600;
  --pgs-form-font-size: 1.02rem;
  --pgs-form-label-size: 1rem;
  --pgs-form-font-weight: 600;
  --pgs-form-placeholder-weight: 500;
  --pgs-radius-sm: 8px;
  --pgs-radius-md: 12px;
  --pgs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --pgs-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --pgs-ring: 0 0 0 0.2rem rgba(27, 83, 119, 0.18);
}

html,
body {
  font-family:
    'Dosis', 'Roboto', ui-sans-serif, system-ui, sans-serif !important;
  color: var(--pgs-primary) !important;
  background: var(--pgs-app-bg) !important;
  font-weight: var(--pgs-font-weight-base) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--pgs-font-weight-heading);
}

button,
.btn,
.zen-btn {
  font-weight: var(--pgs-font-weight-button) !important;
}

#client-select,
.client-select {
  font-weight: 600 !important;
}

#client-select option {
  font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
label,
small,
a,
button,
input,
select,
textarea,
.nav-link,
.dropdown-item,
.card-title,
.table,
.modal-title {
  font-family:
    'Dosis', 'Roboto', ui-sans-serif, system-ui, sans-serif !important;
}

.material-icons {
  font-family: 'Material Icons' !important;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
}

.fa,
.fas,
.far,
.fal {
  font-family: 'Font Awesome 5 Free' !important;
}

.fab {
  font-family: 'Font Awesome 5 Brands' !important;
}

.pgs-feedback-lotname {
  color: var(--pgs-secondary) !important;
}

code,
pre {
  font-family:
    SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace !important;
}

.main-navbar .navbar-nav .nav-link,
.main-navbar .nav-link {
  color: var(--pgs-primary) !important;
}

.main-navbar .navbar {
  align-items: center !important;
}

.main-navbar .navbar > * {
  align-items: center;
}

.main-navbar .navbar-nav .nav-link:hover,
.main-navbar .nav-link:hover,
.main-navbar .navbar-nav .nav-link:focus,
.main-navbar .nav-link:focus {
  color: var(--pgs-secondary) !important;
}

.zen-btn.primary-btn,
.btn-primary,
button.btn-primary,
.btn.btn-primary {
  background-color: var(--pgs-secondary) !important;
  border-color: var(--pgs-secondary) !important;
  color: #fff !important;
  font-size: 1.03rem !important;
}

.zen-btn.light-btn,
.zen-btn.light,
.zen-btn.secondary,
.btn-secondary,
button.btn-secondary,
.btn.btn-secondary {
  font-size: 1.03rem !important;
}

.daterangepicker .drp-buttons .btn,
.daterangepicker .drp-buttons .cancelBtn,
.daterangepicker .drp-buttons .applyBtn {
  font-size: 1.03rem !important;
}

.zen-btn.primary-btn:hover,
.btn-primary:hover,
.zen-btn.primary-btn:focus,
.btn-primary:focus,
.zen-btn.primary-btn:active,
.btn-primary:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
  background-color: var(--pgs-secondary-light) !important;
  border-color: var(--pgs-secondary-light) !important;
  color: #fff !important;
}

.btn.btn-primary *,
.zen-btn.primary-btn * {
  color: #fff !important;
}

.btn.btn-danger,
button.btn-danger,
.zen-btn.danger-btn {
  color: #fff !important;
  font-size: 1.03rem !important;
}

.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger:active,
button.btn-danger:hover,
button.btn-danger:focus,
button.btn-danger:active,
.zen-btn.danger-btn:hover,
.zen-btn.danger-btn:focus,
.zen-btn.danger-btn:active {
  color: #fff !important;
}

.btn.btn-danger *,
.zen-btn.danger-btn * {
  color: #fff !important;
}

.swal2-actions.pgs-swal-actions-right {
  justify-content: flex-end !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 0.75rem !important;
  gap: 0.5rem !important;
}

.swal2-popup {
  border: 1px solid var(--pgs-border) !important;
  border-radius: var(--pgs-radius-md) !important;
  color: var(--pgs-text) !important;
}

.swal2-title,
.swal2-html-container {
  color: var(--pgs-text) !important;
}

.swal2-actions .swal2-styled {
  margin: 0 !important;
}

.swal2-confirm:not(.btn-danger) {
  background-color: var(--pgs-secondary) !important;
  border-color: var(--pgs-secondary) !important;
  color: #fff !important;
}

.swal2-confirm:not(.btn-danger):hover,
.swal2-confirm:not(.btn-danger):focus,
.swal2-confirm:not(.btn-danger):active {
  background-color: var(--pgs-secondary-light) !important;
  border-color: var(--pgs-secondary-light) !important;
  color: #fff !important;
}

.swal2-cancel {
  background-color: #fff !important;
  border: 1px solid var(--pgs-border) !important;
  color: var(--pgs-text) !important;
}

.swal2-cancel:hover,
.swal2-cancel:focus,
.swal2-cancel:active {
  background-color: var(--pgs-surface-2) !important;
  border-color: var(--pgs-border) !important;
  color: var(--pgs-text) !important;
}

.pgs-mobility-hub-label {
  display: block;
  text-align: center;
  margin-top: -0.25rem;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--pgs-secondary);
  font-family: Arial !important;
}

.card,
.modal-content,
.table td,
.table th,
.dropdown-menu,
.main-sidebar,
.navbar,
.input-group-text {
  border-color: var(--pgs-border) !important;
}

.card,
.card-small,
.modal-content,
.dropdown-menu {
  border-radius: var(--pgs-radius-md) !important;
  box-shadow: var(--pgs-shadow-sm);
}

.modal-header,
.modal-footer {
  background-color: var(--pgs-surface) !important;
}

.modal-header {
  border-bottom-color: var(--pgs-border) !important;
}

.modal-footer {
  border-top-color: var(--pgs-border) !important;
  justify-content: flex-end !important;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.modal-header .modal-title,
.modal-header .modal-title *,
.modal-header [id*='Header'],
.modal-header [id*='header'],
.modal-header #modal-header {
  color: var(--pgs-text) !important;
}

.modal-header .btn-close,
.modal-header .close,
.modal-header .close-modal-btn {
  opacity: 0.75;
}

.modal-header .btn-close:hover,
.modal-header .close:hover,
.modal-header .close-modal-btn:hover {
  opacity: 1;
}

.modal-header .close-modal-btn {
  border: 1px solid var(--pgs-border);
  background: var(--pgs-surface);
  color: var(--pgs-text-muted);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 700;
}

.modal .btn-outline-primary {
  color: var(--pgs-secondary) !important;
  border-color: var(--pgs-secondary) !important;
}

.modal .btn-outline-primary:hover,
.modal .btn-outline-primary:focus,
.modal .btn-outline-primary:active {
  background-color: var(--pgs-secondary) !important;
  border-color: var(--pgs-secondary) !important;
  color: #fff !important;
}

.card:not([class*='bg-']),
.card-small:not([class*='bg-']),
.modal-content,
.dropdown-menu {
  background-color: var(--pgs-surface) !important;
}

.card-header {
  border-bottom-color: var(--pgs-border) !important;
}

.card-header:not([class*='bg-']) {
  background-color: var(--pgs-surface) !important;
}

.main-content,
.main-content-container {
  background: transparent !important;
}

.form-control:not(.btn):not(button),
input,
select,
textarea {
  border-color: var(--pgs-border) !important;
  color: var(--pgs-primary) !important;
  background-color: var(--pgs-surface) !important;
  border-radius: var(--pgs-radius-sm) !important;
  font-weight: var(--pgs-form-font-weight) !important;
}

.form-label,
.form-group label,
.input-field label,
.create-input-field label,
.service-name-container label,
.payment-flows-container label {
  font-size: var(--pgs-form-label-size) !important;
  font-weight: 600 !important;
  color: var(--pgs-text-muted) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  font-weight: var(--pgs-form-placeholder-weight);
}

.modal .form-label,
.modal .form-group label,
.modal label {
  font-weight: 600 !important;
  color: var(--pgs-text-muted) !important;
}

.form-control:not(.btn):not(button),
input[type='text'],
input[type='email'],
input[type='number'],
input[type='search'],
input[type='password'],
input[type='datetime-local'],
input[type='date'],
input[type='time'],
select,
textarea {
  font-size: var(--pgs-form-font-size) !important;
}

.modal .form-control,
.modal input,
.modal select,
.modal textarea {
  font-weight: 600 !important;
}

.modal input::placeholder,
.modal textarea::placeholder {
  font-weight: var(--pgs-form-placeholder-weight);
}

.form-control:not(.btn):not(button):focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--pgs-secondary) !important;
  box-shadow: 0 0 0 0.2rem rgba(27, 83, 119, 0.15) !important;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role='button']:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none !important;
  box-shadow: var(--pgs-ring) !important;
}

a {
  color: var(--pgs-secondary);
}

a:hover {
  color: var(--pgs-secondary-light);
}

.table {
  color: var(--pgs-text) !important;
  background: transparent !important;
}

.table thead th {
  background: var(--pgs-surface-2) !important;
  border-bottom-color: var(--pgs-border) !important;
  font-weight: 600;
}

.table tbody tr:hover {
  background: rgba(27, 83, 119, 0.04) !important;
}

.table td,
.table th {
  padding: 0.75rem 0.85rem;
  vertical-align: middle;
}

.dropdown-menu .dropdown-item {
  font-weight: var(--pgs-font-weight-base) !important;
}

.dropdown-menu p.dropdown-item {
  margin: 0;
}

.dataTables_filter label {
  font-weight: 600 !important;
  color: var(--pgs-text-muted) !important;
}

.dataTables_filter input[type='search'] {
  font-weight: var(--pgs-font-weight-base) !important;
}

.dataTables_length label {
  font-weight: 600 !important;
  color: var(--pgs-text-muted) !important;
}

.dataTables_length select {
  font-weight: 600 !important;
}

.dataTables_length select option {
  font-weight: 600;
}

.main-sidebar .nav .nav-item.active,
.main-sidebar .nav .nav-item.activeBar,
.main-sidebar .nav .nav-item .nav-link.active,
.main-sidebar .nav .nav-item .nav-link.activeBar,
.main-sidebar .nav .nav-item:hover,
.main-sidebar .nav .nav-item .nav-link:hover {
  box-shadow: inset 0.1875rem 0 0 var(--pgs-secondary) !important;
  border-left-color: var(--pgs-secondary) !important;
  background-color: #fbfbfb !important;
  color: var(--pgs-secondary) !important;
}

.main-sidebar .nav .nav-item.active i,
.main-sidebar .nav .nav-item.activeBar i,
.main-sidebar .nav .nav-item .nav-link.active i,
.main-sidebar .nav .nav-item .nav-link.activeBar i,
.main-sidebar .nav .nav-item:hover i,
.main-sidebar .nav .nav-item .nav-link:hover i {
  color: var(--pgs-secondary) !important;
}

.main-sidebar .nav .nav-item.active span,
.main-sidebar .nav .nav-item.activeBar span,
.main-sidebar .nav .nav-item .nav-link.active span,
.main-sidebar .nav .nav-item .nav-link.activeBar span,
.main-sidebar .nav .nav-item:hover span,
.main-sidebar .nav .nav-item .nav-link:hover span {
  color: var(--pgs-secondary) !important;
}

.main-sidebar .nav .nav-item,
.main-sidebar .nav .nav-item .nav-link {
  border-left: 0.1875rem solid transparent !important;
}

.main-sidebar .nav .nav-item {
  box-shadow: none !important;
}

.main-sidebar .nav-wrapper .nav .nav-item > .nav-link,
.main-sidebar .nav-wrapper .nav .nav-item > .dropdown-toggle,
.main-sidebar .nav-wrapper .nav .submenu .nav-item > .nav-link {
  color: var(--pgs-primary) !important;
  border-left: 0.1875rem solid transparent !important;
  box-shadow: none !important;
}

.main-sidebar .nav-wrapper .nav .nav-item > .nav-link span,
.main-sidebar .nav-wrapper .nav .nav-item > .dropdown-toggle span,
.main-sidebar .nav-wrapper .nav .submenu .nav-item > .nav-link span {
  color: var(--pgs-primary) !important;
}

.main-sidebar .nav-wrapper .nav .nav-item > .nav-link .material-icons,
.main-sidebar .nav-wrapper .nav .nav-item > .dropdown-toggle .material-icons,
.main-sidebar .nav-wrapper .nav .submenu .nav-item > .nav-link .material-icons {
  color: var(--pgs-primary) !important;
}

.main-sidebar .nav-wrapper .nav .nav-item > .nav-link::before,
.main-sidebar .nav-wrapper .nav .nav-item > .dropdown-toggle::before,
.main-sidebar .nav-wrapper .nav .submenu .nav-item > .nav-link::before {
  background-color: transparent !important;
}

.main-sidebar .nav-wrapper .nav .nav-item.active,
.main-sidebar .nav-wrapper .nav .nav-item.activeBar,
.main-sidebar .nav-wrapper .nav .nav-item > .nav-link.active,
.main-sidebar .nav-wrapper .nav .nav-item > .nav-link.activeBar,
.main-sidebar .nav-wrapper .nav .submenu .nav-item > .nav-link.activeBar,
.main-sidebar .nav-wrapper .nav .submenu .nav-item > .nav-link.active {
  box-shadow: var(--pgs-shadow-sm) !important;
  border-left-color: var(--pgs-secondary) !important;
  background-color: var(--pgs-secondary) !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
}

.main-sidebar .nav-wrapper .nav .nav-item.active i,
.main-sidebar .nav-wrapper .nav .nav-item.activeBar i,
.main-sidebar .nav-wrapper .nav .nav-item > .nav-link.active i,
.main-sidebar .nav-wrapper .nav .nav-item > .nav-link.activeBar i,
.main-sidebar .nav-wrapper .nav .submenu .nav-item > .nav-link.activeBar i,
.main-sidebar .nav-wrapper .nav .submenu .nav-item > .nav-link.active i {
  color: #ffffff !important;
}

.main-sidebar .nav-wrapper .nav .nav-item.active span,
.main-sidebar .nav-wrapper .nav .nav-item.activeBar span,
.main-sidebar .nav-wrapper .nav .nav-item > .nav-link.active span,
.main-sidebar .nav-wrapper .nav .nav-item > .nav-link.activeBar span,
.main-sidebar .nav-wrapper .nav .submenu .nav-item > .nav-link.activeBar span,
.main-sidebar .nav-wrapper .nav .submenu .nav-item > .nav-link.active span {
  color: #ffffff !important;
}

.main-sidebar .nav-wrapper .nav .nav-item > .nav-link:hover,
.main-sidebar .nav-wrapper .nav .nav-item > .dropdown-toggle:hover,
.main-sidebar .nav-wrapper .nav .nav-item > .nav-link:focus-visible,
.main-sidebar .nav-wrapper .nav .nav-item > .dropdown-toggle:focus-visible,
.main-sidebar .nav-wrapper .nav .nav-item.active > .nav-link,
.main-sidebar .nav-wrapper .nav .nav-item > .nav-link.activeBar,
.main-sidebar .nav-wrapper .nav .nav-item.activeBar > .nav-link,
.main-sidebar
  .nav-wrapper
  .nav
  .nav-item.has-submenu.is-open
  > .dropdown-toggle,
.main-sidebar .nav-wrapper .nav .nav-item.has-submenu.open > .dropdown-toggle,
.main-sidebar .nav-wrapper .nav .nav-item.has-submenu.show > .dropdown-toggle {
  color: var(--pgs-secondary) !important;
  border-left-color: var(--pgs-secondary) !important;
  box-shadow: inset 0.1875rem 0 0 var(--pgs-secondary) !important;
}

.main-sidebar .nav-wrapper .nav .nav-item > .nav-link:hover span,
.main-sidebar .nav-wrapper .nav .nav-item > .dropdown-toggle:hover span,
.main-sidebar .nav-wrapper .nav .nav-item > .nav-link:focus-visible span,
.main-sidebar .nav-wrapper .nav .nav-item > .dropdown-toggle:focus-visible span,
.main-sidebar .nav-wrapper .nav .nav-item.active > .nav-link span,
.main-sidebar .nav-wrapper .nav .nav-item > .nav-link.activeBar span,
.main-sidebar .nav-wrapper .nav .nav-item.activeBar > .nav-link span,
.main-sidebar
  .nav-wrapper
  .nav
  .nav-item.has-submenu.is-open
  > .dropdown-toggle
  span,
.main-sidebar
  .nav-wrapper
  .nav
  .nav-item.has-submenu.open
  > .dropdown-toggle
  span,
.main-sidebar
  .nav-wrapper
  .nav
  .nav-item.has-submenu.show
  > .dropdown-toggle
  span {
  color: var(--pgs-secondary) !important;
}

.main-sidebar .nav-wrapper .nav .nav-item > .nav-link:hover .material-icons,
.main-sidebar
  .nav-wrapper
  .nav
  .nav-item
  > .dropdown-toggle:hover
  .material-icons,
.main-sidebar
  .nav-wrapper
  .nav
  .nav-item
  > .nav-link:focus-visible
  .material-icons,
.main-sidebar
  .nav-wrapper
  .nav
  .nav-item
  > .dropdown-toggle:focus-visible
  .material-icons,
.main-sidebar .nav-wrapper .nav .nav-item.active > .nav-link .material-icons,
.main-sidebar .nav-wrapper .nav .nav-item > .nav-link.activeBar .material-icons,
.main-sidebar .nav-wrapper .nav .nav-item.activeBar > .nav-link .material-icons,
.main-sidebar
  .nav-wrapper
  .nav
  .nav-item.has-submenu.is-open
  > .dropdown-toggle
  .material-icons,
.main-sidebar
  .nav-wrapper
  .nav
  .nav-item.has-submenu.open
  > .dropdown-toggle
  .material-icons,
.main-sidebar
  .nav-wrapper
  .nav
  .nav-item.has-submenu.show
  > .dropdown-toggle
  .material-icons {
  color: var(--pgs-secondary) !important;
}

.main-sidebar .nav-wrapper .nav .nav-item > .nav-link:hover::before,
.main-sidebar .nav-wrapper .nav .nav-item > .dropdown-toggle:hover::before,
.main-sidebar .nav-wrapper .nav .nav-item > .nav-link:focus-visible::before,
.main-sidebar
  .nav-wrapper
  .nav
  .nav-item
  > .dropdown-toggle:focus-visible::before,
.main-sidebar .nav-wrapper .nav .nav-item.active > .nav-link::before,
.main-sidebar .nav-wrapper .nav .nav-item > .nav-link.activeBar::before,
.main-sidebar .nav-wrapper .nav .nav-item.activeBar > .nav-link::before,
.main-sidebar
  .nav-wrapper
  .nav
  .nav-item.has-submenu.is-open
  > .dropdown-toggle::before,
.main-sidebar
  .nav-wrapper
  .nav
  .nav-item.has-submenu.open
  > .dropdown-toggle::before,
.main-sidebar
  .nav-wrapper
  .nav
  .nav-item.has-submenu.show
  > .dropdown-toggle::before {
  background-color: var(--pgs-secondary) !important;
}

.main-sidebar .nav-wrapper .nav .nav-item.active > .nav-link,
.main-sidebar .nav-wrapper .nav .nav-item.activeBar > .nav-link {
  background-color: var(--pgs-secondary) !important;
  color: #ffffff !important;
  box-shadow: var(--pgs-shadow-sm) !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
}

.main-sidebar .nav-wrapper .nav .nav-item.active > .nav-link span,
.main-sidebar .nav-wrapper .nav .nav-item.activeBar > .nav-link span,
.main-sidebar .nav-wrapper .nav .nav-item.active > .nav-link .material-icons,
.main-sidebar
  .nav-wrapper
  .nav
  .nav-item.activeBar
  > .nav-link
  .material-icons {
  color: #ffffff !important;
}

.main-sidebar .nav-wrapper .nav .nav-item > .nav-link.active:focus-visible {
  box-shadow: var(--pgs-shadow-sm), var(--pgs-ring) !important;
}

.dash-card {
  background: #ffffff !important;
  border: 1px solid var(--pgs-border) !important;
  border-radius: var(--pgs-radius-md) !important;
  box-shadow: var(--pgs-shadow-md) !important;
}

.dash-stats-row {
  align-items: stretch;
}

.dash-stats-row > [class*='col-'] {
  display: flex;
}

.dash-stats-row > [class*='col-'] > .dash-card {
  flex: 1 1 auto;
  width: 100%;
}

.dash-card .card-header h6,
.dash-card .stats-small__label,
#usage-title,
#events-title,
#active-users-title,
#finances-title {
  color: var(--pgs-secondary) !important;
}

.dash-card .card-header {
  border-bottom-color: var(--pgs-border) !important;
}

.apexcharts-tooltip.apexcharts-theme-light {
  background: #ffffff !important;
  border: 1px solid #d9dee8 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12) !important;
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  background: #ffffff !important;
  border-bottom: 1px solid #eef2f7 !important;
  color: #1b5377 !important;
}

.apexcharts-tooltip-series-group {
  color: #4d4d4d !important;
}

.apexcharts-legend-text {
  color: #5a6169 !important;
}

.main-sidebar .nav-wrapper .nav .nav-item > .dropdown-toggle span {
  font-family:
    'Dosis', 'Roboto', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
}

.main-sidebar .nav-wrapper .nav .submenu .nav-item > .nav-link span {
  font-family:
    'Dosis', 'Roboto', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
}

.main-sidebar .nav-wrapper .nav .submenu .nav-item > .nav-link .material-icons,
.main-sidebar .nav-wrapper .nav .nav-item > .dropdown-toggle .material-icons {
  color: #1b5377 !important;
}