@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap'); 
@font-face {
  font-family: "Raginy-regular";
  src: url("../fonts/Raginy-Regular.woff");
}
/* Base */
body,
html {
  margin: 0;
  background-color: #f1f0f5;
  padding: 0;
  overflow-x: hidden;
  height: 100%;
  min-height: 100vh;
  /* font-family: "Work Sans", sans-serif;
  font-weight: 400; */
}
.layout-wrapper {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  justify-content: space-between;
  background-color: #F1F0F5;
}
.action-buttons a,
.dropdown .btn,
.page-link {
  transition: all 0.2s ease;
}
/* .container-fluid,
.row {
  height: 100%;
} */
main {
  height: 100%;
  display: flex;
  flex-direction: column;
}
main.main-content {
  width: calc(100% - 250px);
}
.card-body {
  flex-wrap: wrap;
  row-gap: 0.5rem;
  border-radius: 22px;
}
.card-body > * {
  flex: 1 1 auto;
}
.card-body .pagination {
  justify-content: flex-end;
}
/* Sidebar */
/* .custom-offcanvas {
  display: none;
} */
.custom-sidebar.collapsed {
  width: 0;
  overflow: hidden;
}
.agency-sold {
  font-weight: 500;
}
/* #edit-profile-form .card-main-body-content .row {
  row-gap: 0px;
  column-gap: 40px;
} */
#edit-profile-form .card-main-body-content .col-md-10 {
  margin-top: 20px;
}
.noti-tb-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}
#db-card-noti td{
  font-family: 'Inter', sans-serif;
}
#db-card-noti td:nth-child(2) {
  min-width: 198px;
}
#db-card-noti td:nth-child(3) {
  word-wrap: break-word;
}
.db-card-noti-read {
  font-size: 12px !important;
  min-width: 115px;
  text-align: center;
}
.custom-sidebar {
  background-color: #5d5fef;
  display: flex;
  width: 260px;
  max-height: 100vh;
  min-height: 100vh;
  overflow-y: auto;
  position: sticky;
  top: 0;
  max-width: 100%;
  flex-direction: column;
  padding: 20px 10px;
  transition: transform 0.3s ease;
  background-image: url("../images/sidebar-bg.png");
  background-repeat: repeat;
  background-blend-mode: color-burn;
  background-size: cover;
}
.custom-sidebar nav {
  background: transparent;
}
.custom-sidebar.hidden {
  transform: translateX(-100%);
  position: absolute;
  z-index: 999;
}
.sub-menu-wrapper {
  position: relative;
  padding-left: 20px;
  margin-left: 10px;
}
.nav-item.active .collapse.sub-menu-wrapper {
  padding-top: 10px;
}
.nav .sub-menu {
  gap: 0px;
}
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: darkgrey;
    border-radius: 10px;
}
/* Login */
body.login-page {
  background-image: url("../images/login-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: "Inter-regular", sans-serif;
}
.login-logo {
  font-family: "Raginy-regular", sans-serif;
  font-size: 64px;
  color: white;
  vertical-align: middle;
}
.login {
  display: flex;
  align-items: center;
  justify-content: end;
  margin: auto;
  max-width: 1400px;
}
.login-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(136, 136, 136, 0.3) 100%);
  box-shadow: 5px 8px 15px 0px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(9.800000190734863px);
  border-radius: 20px;
  border: 1px solid #6a6a6a83;
  padding: 20px 25px;
  color: white;
  max-width: 500px;
  min-height: 560px;
  /* max-height: 90vh; */
}
.login-title {
  font-family: "Inter-semibold", sans-serif;
  font-size: 36px;
  margin-bottom: 3px;
}
.login-header p {
  font-family: "Inter-regular", sans-serif;
}
.login-label {
  font-family: "Inter-semibold", sans-serif;
}
.login-value {
  background-color: #f5f9ff;
  border: 1px solid #d1d1d1;
  padding: 10px;
}
.invalid-feedback {
  color: #ff0000;
}
input.login-value::placeholder {
  color:#8C8C8C;
  font-size: 13px;
}
#login-btn, #enable-mfa-btn ,#recovery-btn{
  background-color: #7065f0;
  border: 1px solid #7065f0;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
  padding: 10px 0;
}
#login-btn:hover, #enable-mfa-btn:hover, #recovery-btn:hover {
  background-color: #9e97ed;
  color: #fff;
  border-color: #857bf7;
}
#update-password-save-btn {
  background-color: #7065f0;
  border: 1px solid #7065f0;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
  padding: 10px 0;
}
#update-password-save-btn:hover {
  background-color: #9e97ed;
  color: #fff;
  border-color: #857bf7;
}
#remember {
  background-color: transparent;
}
/* Shared vertical line for dropdowns */
.sub-menu-wrapper::before {
  content: "";
  position: absolute;
  left: 14px;
  top: -14px;
  bottom: 10px;
  width: 2px;
  background-color: white;
}
/* Style for each submenu link */
.nav .sub-menu .nav-link {
  font-size: 13px;
  padding-left: 16px;
  position: relative;
  color: white;
  font-weight: 500;
  background-color: unset;
  border: none;
}
a:hover,
.dropdown-item:hover {
  text-decoration: none;
}
.alert-dismissible .btn-close {
  z-index: unset;
}
/* Dot before each submenu item */
.sub-menu .nav-link::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
}
nav {
  background-color: #5d5fef;
  padding-top: 20px;
  gap: 20px;
}
.logo {
  font-family: "Raginy-regular", sans-serif;
  font-size: 48px;
  color: white;
}
.nav-content {
  display: flex;
  flex-direction: column;
}
.nav {
  gap: 12px;
}
/* .nav .nav-item {
  list-style: none;
  border-radius: 10px;
  color: #fff;
}
.nav .nav-link {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
}
.nav .nav-item:hover .nav-link {
  background-color: #ffffff;
  color: #000000;
  font-weight: 500;
  border-left: 3px solid #000;
  border-radius: 10px;
}
.nav .nav-item.active .nav-link {
  background-color: #ffffff;
  color: #000000;
  font-weight: 500;
  border-left: 3px solid #000;
  border-radius: 10px;
}
/* .nav .nav-link.active span {
  display: flex;
  align-items: center;
  gap: 5px;
} */
.nav-link i {
  font-size: 20px;
}
/* .nav-item.active {
  background-color: #ffffff;
  color: #000000;
  font-weight: 500;
  border-left: 3px solid #000;
} */
/* .nav .nav-item.hover .sub-menu .nav-link {
  background-color: transparent;
  border: none;
}
.nav .nav-item.active .sub-menu-wrapper.show .sub-menu .nav-link{
  color: #6465a9;
} */
 /* Top-level nav items only */
.nav > .nav-item {
  list-style: none;
  border-radius: 10px;
  color: #fff;
  border: none;
}
.nav .nav-item1 {
    font-style: none;
    list-style: none;
    border-radius: 10px;
    color: #fff;
    border: none;
}
.nav.flex-column.sub-menu {
  padding-right: 0px;
}
.custom-sidebar ul.sub-menu a.nav-link {
  padding-right: 0;
}
.nav > .nav-item > .nav-link {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;
  transition: none;
    border-radius: 10px;
    background: transparent;
}
/* .nav > .nav-item:hover {
  background-color: #fff;
  border-left: 3px solid #000;
  border-radius: 10px;
} */
.nav > .nav-item.active:hover {
  background: none;
  border: none;
}
.nav > .nav-item > .nav-link:hover {
  background-color: #ffffff;
  color: #000000;
  font-weight: 500;
  border-left: 10px solid #ffe200;
  border-radius: 10px;
}
.nav > .nav-item.active > .nav-link {
  background-color: #ffffff;
  color: #000000;
  font-weight: 500;
  border-left: 10px solid #ffe200;
  border-radius: 10px;
}
/* Submenu links – reset to plain */
.sub-menu .nav-link {
  background-color: transparent !important;
  border: none !important;
  color: #fff; 
  font-weight: normal;
  padding-left: 40px;
  font-size: 13px !important;
}
.nav .sub-menu .nav-link:hover {
  color: #ffe200 !important;
}

/* Submenu active */
.nav .sub-menu .nav-item.active .nav-link {
  color: #ffe200 !important;
}
/* Header */
/* Top Bar Container */
.top-bar {
  background-color: white;
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 16px 12px;
  gap: 15px;
  white-space: normal;
  position: sticky;
  top: 0;
  z-index: 999;
}
.top-bar-right {
  display: flex;
  gap: 10px;
  align-items: center;
}
/* Hamburger Button */
#toggleSidebarBtn {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
}
/* Notification Bell Button */
#notifToggle {
  padding: 12px 15px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#notifToggle .noti-number {
  position: absolute;
  left: 35px;
  top: 17px;
  margin: 0;
  padding: 0;
  width: 17px;
  height: 17px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-bar-right .badge {
  position: absolute;
  top: 10px;
  right: 11px;
  font-size: 10px;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 20px;
  background-color: #ff4444;
  color: white;
  font-weight: 600;
  min-width: 28px;
  text-align: center;
}
.top-badge{
  position: absolute;
  top: 15px;
  right: 11px;
  font-size: 10px;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 20px;
  background-color: #ff4444;
  color: white;
  font-weight: 600;
  min-width: 28px;
  text-align: center;
}
.login-page .font-medium.text-sm.text-green-600.mb-4 {
  color: #aaa3ff;
}
/* .mng-prof,
.logout-bel-nav {
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.profile-box .dropdown-menu .mng-prof:hover,
.profile-box .dropdown-menu .logout-bel-nav:hover {
  background-color: #eaeaff;
  color: #5d5fef;
} */
 .active .collapse:not(.show) {
    display: block;
}
.status-filter select option:hover {
  background-color: #eaeaff;
  color: #5d5fef;
}
.filter-buttons
    .agency-filter
    .select2-container--default
    .select2-selection--single
    .select2-selection__clear {
    height: 18px;
    line-height: 0;
    color: #dc3545;
}
.filter-buttons
    .state-filter
    .select2-container--default
    .select2-selection--single
    .select2-selection__clear {
    height: 18px;
    line-height: 0;
    color: #dc3545;
}
.filter-buttons
    .status_filter
    .select2-container--default
    .select2-selection--single
    .select2-selection__clear {
  height: 18px;
  line-height: 0;
  color: #dc3545;
}
.select2-container--default .select2-results__option--selectable {
  font-size: 13px;
}
.select2-results__option.select2-results__option--selectable.select2-results__option--highlighted {
  background-color: #eaeaff !important;
  color: #3e3e3e !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable:hover {
  background-color: #eaeaff !important;
  color: #5d5fef !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
  outline: none;
}
.dropdown .profile-box + .dropdown-menu.show {
  padding: 0;
} 
.dropdown .profile-box + .dropdown-menu .dropdown-item i {
  margin-right: 10px;
}
.dropdown .profile-box + .dropdown-menu .dropdown-item {
  padding: 10px;
}
.dropdown .profile-box + .dropdown-menu .dropdown-item:focus {
  background: none;
}
.dropdown .profile-box + .dropdown-menu .dropdown-item:hover {
  color: #5d5fef;
}
/* Profile Box */
.profile-box {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: #fff;
  gap: 10px;
}
.profile-box-content {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.profile-img-wrapper {
  /* width: 40px;
  height: 40px; */
  /* border-radius: 50%; */
  overflow: hidden;
  border: 1px solid #dddddc;
  border-radius: 50%;
}
.profile-img-wrapper img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.profile-info p {
  margin: 0;
  line-height: 1.2;
  font-size: 14px;
}
.profile-info p:first-child {
  font-size: 14px;
  color: #000000;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
}
.profile-info p:last-child {
  color: rgb(0, 0, 0);
  font-size: 12px;
  font-family: "Work Sans", sans-serif;
  text-transform: capitalize;
}
.status-filter select option {
  background-color: #fff;
  color: #3e3e3e;
}
.status-filter select option:hover {
  background-color: #eaeaff;
  color: #5d5fef !important;
}
.agency-dropdown .dropdown-toggle {
  padding: 2px 10px;
}
.dropdown-toggle {
  padding: 0;
  border: none;
  background: transparent;
  color: #333;
  font-size: 14px;
  display: flex;
  align-items: center;
  border: none;
}
.profile-box-dropdown-menu .dropdown-menu {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  visibility: hidden;
}

/* When Bootstrap adds .show */
.profile-box-dropdown-menu .dropdown-menu.show {
  max-height: 500px; /* larger than your menu’s height */
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.dropdown-profile-box .dropdown-menu-end {
  position: absolute;
  margin: 0;
  transform: translate3d(0px, 29.6px, 0px);
  inset: 30px 100px auto 96px;
}
.dropdown-profile-box {
  border: none;
}
.dropdown-profile-box .dropdown-menu ul li {
  font-size: 13px;
}
.dropdown-profile-box .btn.show,
.dropdown-profile-box .btn {
  border: none;
}
.dropdown-toggle::after {
  display: none;
}
/* Page Content */
.page-content {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}
input:focus {
  border-color: #5d5fef !important;
  box-shadow: unset !important;
}
/* Card */
.card {
  border-radius: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: none;
  width: 100%;
  overflow: clip;
  box-sizing: border-box;
}
.card-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  padding: 20px 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 22px;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}
.card-header p {
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: #5d5fef;
  margin: 0;
}
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.action-buttons a {
  background-color: #5d5fef;
  color: white;
  pointer-events: auto;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11);
  padding: 9px 15px;
}
.action-buttons a:hover,
.action-buttons a:focus,
.action-buttons a:active {
  background-color: #5d5fef;
  color: white;
  box-shadow: none;
  text-decoration: none;
  outline: none;
}
.action-buttons a:nth-child(1) {
  display: flex;
  align-items: center;
  padding-right: 15px;
  gap: 5px;
  border: 1px solid #5d5fef;
}
.action-buttons a:nth-child(1):hover {
  background-color: #fff;
  color: #5d5fef;
}
.action-buttons a:nth-child(1) i {
  margin: 5px 8px 5px 4px;
}
.action-buttons a:nth-child(2) {
  display: flex;
  align-items: center;
}
.card-body {
  padding: 20px 20px 0 20px;
  background-color: #fff;
  overflow-x: clip;
  width: 100%;
  box-sizing: border-box;
}
/* Filters */
.filters-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.filter-buttons .btn-drop {
  background-color: #fff;
  display: flex;
  gap: 25px;
  color: #5d5fef;
  border: 1px solid #94909DCC;
  border-radius: 5px;
  font-size: 13px;
  font-family: "Inter-regular", sans-serif;
  padding: 8px 16px;
  box-shadow: none;
}
.filter-buttons .btn-drop:hover {
  background-color: #5d5fef;
  color: #fff;
  outline: none;
  box-shadow: none;
}
.filter-buttons .dropdown-menu {
  font-size: 13px;
  font-family: "Inter", sans-serif;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  border: 1px solid #ddd;
}
.filter-buttons .dropdown-item {
  padding: 6px 16px;
  transition: background-color 0.2s ease;
}
.filter-buttons .dropdown-item:hover {
  background-color: #eaeaff;
  color: #5d5fef;
}
/*  */
.filter-buttons .select2-container .select2-selection--single {
  height: 34px;
  background-color: #fff;
  border: 1px solid #94909DCC;
  border-radius: 5px;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  padding: 8px;
  box-shadow: none;
}
.filter-buttons .select2-container--default .select2-selection--single .select2-selection__rendered,
.filter-buttons .select2-selection__placeholder {
  line-height: 18px;
  color: #7879F1 !important;
  padding-left: 3px;
  padding-right: 12px;
}
.filter-buttons .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 4px;
}
.filter-buttons .status-filter {
  position: relative;
}
.filter-buttons .status-filter select.form-control {
  font-size: 13px;
  height: 34px;
  color: #5d5fef;
  padding-right: 30px;
  border: 1px solid #94909DCC;
  border-radius: 5px;
}
.filter-buttons .status-filter select.form-control:focus {
  box-shadow: none;
}
.filter-buttons .status-filter::after {
 content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 4px 0 4px;
  border-style: solid;
  border-color: #888 transparent transparent transparent;
}
/*  */
/* Search Bar */
.search-bar {
  width: 400px;
  max-width: 100%;
  border-color: #b7b7b7;
}
.search-bar .btn {
  background-color: #5d5fef;
}
.search-bar input.form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: #5d5fef;
}
/* Table */
table {
  border-bottom: 1px solid rgb(220, 220, 220);
}
.custom-striped-table.agency-list-scroll {
  overflow: unset;
  max-width: 99%;
}
.custom-striped-table.agency-list-scroll #agencies-list-table_wrapper .table-responsive {
  max-height: unset;
  max-width: 100%;
}
/* .custom-striped-table.agency-list-scroll tbody td:first-child,
.custom-striped-table.agency-list-scroll tbody tr {
  border: none;
} */
table.dataTable thead>tr>th.sorting:before, table.dataTable thead>tr>th.sorting_asc:before {
  bottom: 52% !important;
}
 .custom-striped-table.agency-list-scroll th,
 .custom-striped-table #terminated-agencies-list-table th {
  padding: 16px 14px;
  font-size: 14px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
 }
 .custom-striped-table.agency-list-scroll td,
  .custom-striped-table #terminated-agencies-list-table td {
  padding: 8px 14px;
 }
 .custom-striped-table .table-width {
  width: 1200px;
 }
.custom-striped-table.agency-list-scroll th,
.custom-striped-table.agency-list-scroll td,
#terminated-agencies-list-table th,
#terminated-agencies-list-table td
 {
  border-width: 0;
  border-right: 1px solid #C2C2C2;
}
#terminated-agencies-list-table {
  border-bottom: none;
}
/* .custom-striped-table.agency-list-scroll th:first-child {
  border-left: none
}  */
#agencies-list-table tbody tr td:nth-child(5),
.custom-striped-table #terminated-agencies-list-table tr td:nth-child(5) {
  text-align: center;
}
#agencies-list-table,
#terminated-agencies-list-table {
  border-right: none;
  border-bottom: none;
  width: 100% !important;
  /* min-width: 1200px; */
}
#agencies-list-table thead,
#terminated-agencies-list-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.custom-striped-table {
  overflow-x: auto;
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
/* .table-responsive::-webkit-scrollbar {
  display: none;
} */
.custom-striped-table .table {
  /* width: 100%; */
  margin-bottom: 0;
}
.custom-striped-table .table-responsive {
  border: 1px solid #C2C2C2;
}
.custom-striped-table .table-bordered tr {
  border: none;
}
.custom-striped-table .table-bordered tr td {
  border-right: 1px solid #C2C2C2;
}
.custom-striped-table .table-bordered th:first-child,
.custom-striped-table .table-bordered td:first-child {
  border-left: none;
  border-right: 1px solid #C2C2C2;
}
.custom-striped-table .table-bordered th:last-child,
.custom-striped-table .table-bordered td:last-child,
#terminated-agencies-list-table th:last-child,
#terminated-agencies-list-table td:last-child {
  border-right: none;
}
.custom-striped-table .table-bordered tbody tr:nth-child(even) td {
  background-color: #f9f9ff;
}
/* Dashboard */
.custom-striped-table-db .table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  table-layout: auto;
  min-width: 600px;
}
.custom-striped-table-db {
  padding: 10px;
}
.custom-striped-table-db tr {
  border: none;
  border-right: 1px solid #c2c2c2;
}
.custom-striped-table-db .table th {
  padding: 10px 11px;
  border-right: 1px solid #c2c2c2;
  font-size: 13px;
}
.custom-striped-table-db .table td {
  font-size: 13px;
  background-color: white;
  padding: 10px 12px;
  border-right: 2px solid #dfdfdf36;
  font-family: "Inter", sans-serif;
  font-weight: 500;
}
.custom-striped-table-db thead th:first-child {
  border-top-left-radius: 10px;
}
.custom-striped-table-db thead th:last-child {
  border-top-right-radius: 10px;
}
.custom-striped-table-db .table-bordered tbody tr:nth-child(even) td {
  background-color: #f9f9ff;
}
.card-body-db {
  padding: 10px;
  background-color: #ffffff;
  border-radius: 0 0 8px 8px;
}
.card-header-db {
  background-color: #ffffff;
  border-bottom: 1px solid #F3F3F3;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px 8px 0 0;
}
.card-db-title {
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
}
.action-icons {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
  justify-content: center;
}
.action-icons i:nth-child(1),
.action-icons i:nth-child(2) {
  color: #5d5fef;
}
.action-icons i:nth-child(3) {
  color: red;
}
.table thead th {
  background-color: #5d5fef;
  color: white;
  font-size: 15px;
  padding: 15px 0px 15px 20px;
  vertical-align: middle;
}
.status-button {
  vertical-align: middle;
  text-align: center;
  padding: 16px 14px 17px 14px !important;
}
.state-btn {
  padding: 3px 6px;
  font-size: 13px;
  border-radius: 5px;
  display: inline-block;
  width: 100px;
  text-align: center;
  white-space: nowrap;
  font-family: "Work Sans", sans-serif;
}
.badge-active {
  background-color: #e3f4e9;
  color: #5eb369;
  padding: 5px 15px;
}
.badge-pending {
  background-color: #fbf4c1;
  color: rgb(255, 185, 104);
  padding: 5px 12px;
}
.badge-inactive {
  background-color: #fde4ea;
  color: #ef5b16;
  padding: 5px 12px;
}
/* .nav-item .sub-menu-wrapper .sub-menu a.nav-link:hover {
  background-color: unset;
  color: #fff;
  border:none;
} */
.table td {
  font-size: 14px;
  font-family: "Work Sans", sans-serif;
  color: #030229;
  padding: 17px 20px;
  vertical-align: middle;
  font-weight: 400;
}
.dataTables_paginate.paging_simple_numbers {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dataTables_paginate a.paginate_button .pagination-fa {
  display: flex;
  font-size: 14px;
}
.dataTables_paginate.paging_simple_numbers span paginate_button.current {
  background-color: hsl(239, 82%, 65%) !important;
  color: #fff !important;
  padding: 1px 8px !important;
  border: none !important;
}
.dataTables_paginate.paging_simple_numbers .paginate_button {
  border-radius: 20px;
  width: 21px;
  height: 21px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  padding-top: 5px;
}
.dataTables_paginate.paging_simple_numbers .paginate_button.previous,
.dataTables_paginate.paging_simple_numbers .paginate_button.next {
  padding-top: 5px !important;
}
/* Pagination */
.custom-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.custom-pagination .pagination {
  display: flex;
  padding-right: 20px;
  align-items: center;
}
.custom-pagination > div {
  padding: 0 0 15px 30px;
  font-size: 13px;
}
.custom-pagination .page-link {
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  color: #000;
  background-color: transparent;
  font-weight: 500;
  font-size: 13px;
  transition: background-color 0.2s ease;
}
.custom-pagination .page-item.active .page-link {
  background-color: hsl(239, 82%, 65%);
  color: #fff;
  padding: 1px 8px;
}
.custom-pagination .page-item .page-link:hover {
  background-color: #ececff;
  color: #000;
  padding: 4px 10px;
}
.custom-pagination .page-item.disabled .page-link {
  background-color: transparent;
  color: #999;
  pointer-events: none;
}
.custom-pagination .page-item:last-child i {
  font-size: 16px;
}
.custom-pagination .page-item:last-child .page-link {
  padding-left: 0;
  margin-left: 0;
}
/* CSS Given by Gourav Starts Here */
/* Pagination */
.pagination-entries {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
/* .paging_simple_numbers i.next:hover {
  background-color: #eeeeee;
} */
/* .dataTables_wrapper .dataTables_paginate .paginate_button.previous {
  padding: 2px 8px;
  font-size: 12px;
} */
/* Password toggle functionality */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-toggle-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 14px;
  color: #3A3A3A;
  z-index: 100;
  transition: color 0.3s ease;
  user-select: none;
  pointer-events: auto;
  background: transparent;
}

.password-toggle-icon:hover {
  color: #5d5fef;
}

.password-toggle-icon i {
  font-size: 14px;
}

/* Adjust input padding to make room for the icon */
.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
  padding-right: 40px;
}

/* Hide browser's native password reveal button (Edge, Chrome, Firefox, etc.) */
/* Edge/IE */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

/* Chrome/Safari/Edge Chromium */
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-strong-password-auto-fill-button {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

/* Firefox */
input[type="password"]::-moz-focus-inner {
  border: 0;
}

/* Additional hiding for password-input-wrapper specifically */
.password-input-wrapper input[type="password"]::-ms-reveal,
.password-input-wrapper input[type="password"]::-ms-clear,
.password-input-wrapper input[type="password"]::-webkit-credentials-auto-fill-button,
.password-input-wrapper input[type="password"]::-webkit-strong-password-auto-fill-button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  right: -9999px !important;
}

/* Ensure password inputs don't show browser's native reveal button */
.password-input-wrapper input[type="password"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Login page password toggle */
.login-page .login-card .mb-2 {
  position: relative;
}
.dataTables_wrapper .dataTables_paginate span .paginate_button {
  padding: 2px 0px 2px 8px;
  font-size: 13px;
}
.dataTables_wrapper .dataTables_paginate span .paginate_button:hover {
  background: hsl(239, 82%, 65%) !important;
  color: #fff !important;
  padding: 1px 7px !important;
  border: none !important;
  text-align: center;
}
.dataTables_wrapper .dataTables_paginate span .paginate_button.current {
  background-color: hsl(239, 82%, 65%) !important;
  color: #fff !important;
  padding: 1px 7px !important;
  border: none !important;
  text-align: center;
}
.dataTables_wrapper .dataTables_paginate {
  margin-top: 12px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.next,
.previous:hover {
  background: unset !important;
  border: unset !important;
}
.dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button {
  padding: 2px 8px;
  border-radius: 5px;
}
#agent_div p.help-block.text-danger.ss-error-message {
  font-size: 13px;
  margin: 6px 0;
}
#agencies-list-table_paginate {
  padding-bottom: 15px;
}
/* Form Required Fields */
span.asterisk {
  color: red;
}
.add_agency_form{
  padding-top: 10px !important;
}

.img-input {
  position: absolute;
  top: 73%;
  right: 0px;
}

.ch-input {
  position: absolute;
  top: 0px;
  height: 27px;
  opacity: 0;
}

.select2-container{
  width: 100% !important;
}
/* CSS Given by Gourav Ends Here */

/* Dashboard Top Cards */
.top-cards {
  display: flex;
  justify-content: space-between;
  padding: 20px 10px;
}
.stat-card {
  display: flex;
  gap: 20px;
  padding: 20px 20px 20px 30px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  align-items: center;
  min-width: 320px;
  min-height: 110px;
}
.top-cards .col-md-4:nth-of-type(1) .stat-card .card-img-wrapper i {
  color: #5d5fef;
}
.top-cards .col-md-4:nth-of-type(2) .stat-card .card-img-wrapper i {
  color: #68c27c;
}
.top-cards .col-md-4:nth-of-type(4) .stat-card .card-img-wrapper i {
  color: #cb2128;
}
.top-cards .col-md-4:nth-of-type(5) .stat-card .card-img-wrapper i {
  color: #4276b2;
  font-size: 30px;
}
.top-cards .col-md-4:nth-of-type(6) .stat-card .card-img-wrapper i {
  color: #003365;
}
.forgot-text {
  color: #fff;
}
.forgot-text:hover {
  color: #5d5fef;
}
.card-img-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 40px;
  background-color: #e7eefd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-img-wrapper img {
  height: auto;
  width: 26px;
}
.card-img-wrapper i {
  font-size: 24px;
}
.stat-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-number {
  font-weight: 600;
  font-size: 20px;
  color: #3d3d3d;
  font-family: "Work Sans", sans-serif;
}
.stat-label {
  font-size: 14px;
  color: #333;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
}
/* Dashboard row 2 Cards */
.card.widget-card .db-table-1 .table th {
  background-color: white;
  color: black;
  padding: 10px 0 0 0px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
}
.card.widget-card .db-table-1 .table td {
  background-color: white;
  color: black;
  padding: 11px 0 0 0;
  font-family: "Inter", sans-serif;
  font-weight: 500;
}
.card.widget-card .card-header-1 {
  border-bottom: 1px solid rgb(200, 200, 200);
  padding: 10px 0 10px 20px;
  margin: 0;
}
.state-btn-1 {
  padding: 3px 6px;
  font-size: 13px;
  border-radius: 5px;
  display: inline-block;
  width: 80px;
  text-align: center;
  white-space: nowrap;
  font-family: "Work Sans", sans-serif;
}
.nav-icon-wrapper {
  width: 22px;
  height: 22px;
}
.nav-icon-wrapper img {
  width: 100%;
  height: auto;
}
#db-card {
  border-radius: 8px;
  height: auto;
  padding-left: 10px;
  max-height: 336px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 0px !important;
}
#db-card .card-header-db {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: white;
}
#db-card-noti {
  border-radius: 8px;
  height: auto;
  padding-left: 10px;
  max-height: 336px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 0px !important;
}
#db-card-noti .card-header-db {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: white;
}
#db-card-noti td {
  font-size: 13px;
}
#db-card-noti tbody tr:nth-child(even) td,
#db-card tbody tr:nth-child(even) td {
  background-color: #f9f9ff;
}
#db-card-noti .db-card-noti-read a,
#db-card .db-card-noti-read a {
  color: #7065F0;
}
.db-card-noti-img img {
  width: 40px;
}
#db-card .table-responsive {
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  max-height: none;
  border: none;
  border-radius: 0;
  flex: 1;
  min-height: 0;
}
#db-card-noti .table-responsive {
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  max-height: none;
  border: none;
  border-radius: 0;
  flex: 1;
  min-height: 0;
}
.dataTables_info {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  margin-bottom: 10px;
}
.custom-striped-table table thead .custom-table-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-right: 10px;
  justify-content: space-between;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
}

.custom-striped-table table thead .custom-table-heading.no-sort {
  justify-content: center;
  padding-right: 20px;
}
.custom-striped-table table thead .custom-table-heading.no-sort i,
.custom-striped-table table thead .custom-table-heading.no-sort i {
  display: none;
}
.custom-agency-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 11px !important;
  /* margin: 11px 20px 11px 20px; */
  /* border: 1px solid #c2c2c2; */
  min-width: 400px;
}
.custom-agency-table thead th {
  position: sticky;
  background-color: #5d5fef;
  color: #fff;
  border: none;
  font-weight: 500;
  padding: 12px;
  top: 0px;
  font-family: 'Inter';
  z-index: 5;
}
#db-card .custom-agency-table thead th {
  top: 0;
}
.custom-agency-table tbody {
  overflow-y: auto;
}
.custom-agency-table thead th:first-child {
  border-top-left-radius: 10px;
}
.custom-agency-table thead th:last-child {
  border-top-right-radius: 10px;
}
.custom-agency-table tbody td {
  background-color: #fff;
  font-size: 14px;
  padding: 12px;
  color: #5d5fef;
  font-family: 'Inter';
}
.custom-agency-table tbody .custom-agency-name {
  color: black;
}
.custom-agency-table tbody tr:nth-child(even) td {
  background-color: #f9f9ff;
}
.agency-sold {
  font-family: "Inter-medium", sans-serif;
  color: #5d5fef;
}
#db-recent .card-db-view-more a {
  color: #5d5fef;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px; 
}
#db-recent .custom-striped-table table {
  width: 100%;
}
/* View Members */
.card-main {
  background-color: white;
  border-radius: 15px;
}
.card-main-header {
  padding: 16px 30px 14px 30px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  color: #5d5fef;
}
.card-main-title {
  font-size: 22px;
}
.card-main-head-btn {
  display: inline-block;
  padding: 6px 14px;
  background-color: white;
  border: 1px solid #5d5fef;
  color: #5d5fef;
  border-radius: 5px;
  font-size: 14px;
  font-family: "Work Sans", sans-serif;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11);
}
.card-main-head-btn i {
  margin-left: 6px;
}
.card-main-head-btn-1 {
  display: flex;
  gap: 5px;
  align-items: center;
  background-color: #5d5fef;
  color: white;
  border-radius: 5px;
  padding: 8px 16px;
  font-size: 14px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11);
}
.card-main-body {
  padding: 20px 30px 20px 30px;
  font-family: "Work Sans", sans-serif;
}
.card-main-body-nav {
  display: flex;
  align-items: center;
  gap: 15px;
  background-color: #f5f4ff;
  border: 1.5px solid #cdcafc;
  border-radius: 5px;
  font-family: "Inter-semibold", sans-serif;
  font-size: 14px;
}
.card-main-body-nav p {
  margin: 0;
}
.card-main-body-nav p:nth-child(1) {
  padding-left: 20px;
}
.card-main-body-nav p.active {
  background-color: #5d5fef;
  padding: 9px 20px 9px 20px;
  color: white;
  margin: 0;
  border-radius: 5px 0 0 5px;
}
.info-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.info-row {
  display: flex;
  background-color: #f5f4ff;
  min-height: 40px;
  overflow: hidden;
}
.info-label {
  background-color: #e8e6ff;
  color: black;
  padding: 10px 15px;
  margin: 0;
  font-size: 14px;
  min-width: 40%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 5px 0 0 5px;
}
.info-value {
  color: #5d5fef;
  opacity: 0.8;
  padding: 10px 15px;
  margin: 0;
  font-size: 13px;
  width: 100%;
  display: flex;
  align-items: center;
}
.info-edit-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0 10px 0px;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
}
.info-edit-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.ex-input {
  background-color: #f1f0f5;
}
.notif-top-bar.show,
.notif-top-bar {
  border: none;
}
.info-edit-label{
  font-size: 14px;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  color: #000000;
  margin-bottom: 5px;
}
.info-edit-row p.help-block.text-danger.ss-error-message,
.info-edit-row-1 p.help-block.text-danger.ss-error-message {
  margin-top: 4px;
  font-size: 13px;
  margin-bottom: 0px;
}
.VIN-info.has-error {
  display: unset;
}
.info-edit-row input.form-control,
.info-edit-row select.form-control {
  font-size: 13px;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  border: 1px solid #bebdc2b4;
  border-radius: 5px;
  padding: 10px 12px;
  box-shadow: none;
  transition: border 0.3s ease;
  color: #363636;
  background-color: #ffffff;
}
.info-edit-row input.form-control:focus,
.info-edit-row-1 .info-edit-value-1:focus {
  outline: none;
  box-shadow: none;
  border: 1px solid #5d5fef;
  background-color: #fff;
}
.info-edit-row-1 .info-edit-value-1:value
input::placeholder {
  color: #999999;
  font-size: 13px;
  opacity: 1;
}
.profile-img-edit-icon img {
  max-width: 26px;
}
.db-cont-row {
  max-width: unset;
}
.card-body-end {
  display: flex;
  justify-content: end;
  padding-top: 15px;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  gap: 8px;
}
.card-body-end-1 {
  display: flex;
  justify-content: end;
  padding-top: 3px;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  gap: 8px;
  padding-top: 20px;
}
.card-body-end-btn-1,
.card-body-end-btn-2 {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11);
}
.card-body-end-btn-1 {
  padding: 5px 15px;
  border-radius: 5px;
  border: 1px solid #767676;
  font-size: 15px;
  color: #333;
  background-color: white;
}
.card-body-end-btn-1:hover {
  background-color: #333;
  color: #fff;
  text-decoration: none;
}
.card-body-end-btn-2 {
  padding: 5px 15px;
  border-radius: 5px;
  background-color: #5d5fef;
  border: 1px solid #5d5fef;
  font-size: 15px;
  color: white;
}
/* Member-Vehicle-Info */
.card-main-body-nav-vehicle {
  display: flex;
  align-items: center;
  gap: 15px;
  background-color: #f5f4ff;
  border: 1.5px solid #cdcafc;
  border-radius: 5px;
  font-family: "Inter-semibold", sans-serif;
  font-size: 14px;
}
.card-main-body-nav-vehicle p:first-child {
  margin: 0;
  padding: 9px 20px 9px 20px;
}
.above-table {
  display: flex;
  justify-content: end;
  padding-top: 15px;
}
.above-table .search-bar {
  max-width: 400px;
  width: 100%;
  margin-bottom: 15px;
  border-color: B7B7B7;
}
.action-icons-1 {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
.action-icons-1 i:nth-child(1),
.action-icons-1 i:nth-child(2) {
  color: #5d5fef;
}
.action-icons-1 i:nth-child(3) {
  color: red;
}
.info-edit-value-1 {
  flex: 1;
  background-color: #ffffff;
  border: 1px solid #ccc;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 13px;
  width: 100%;
  margin: 0;
  color: #363636;
}
#VIN {
  display: flex;
  gap: 12px;
}
.VIN-info {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}
#VIN .form-control {
  border-radius: 5px;
}
.VIN-btn {
  background-color: #5d5fef;
  color: white;
  font-size: 13px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  height: 100%;
}
.add_agency_form .info-edit-row {
  margin-bottom: 10px;
}

.info-edit-column-1 {
  display: flex;
  flex-direction: column;
  gap: 17px;
  margin-top: 20px;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
}
.info-edit-label-1 {
  font-size: 14px;
  color: #000;
  margin: 0;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  margin-bottom: 5px;
}
.info-edit-row-1 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.info-edit-value-1 {
  flex: 1;
  background-color: #ffffff;
  border: 1px solid #ccc;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 13px;
  font-family: unset;
  width: 100%;
}
/* Reports */
.card-main-body-1 {
  padding: 18px;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  border: 1.5px solid #6700cf;
  border-radius: 5px;
  margin: 20px 30px 15px 30px;
}
.custom-pills {
  display: flex;
  gap: 10px;
  padding-left: 30px;
  padding-top: 24px;
  font-size: 16px;
}
.custom-pills .nav-link {
    position: relative !important;
  border-radius: 6px;
  padding: 6px 14px;
  color: black;
  background-color: transparent;
  transition: all 0.2s ease;
  font-family: "Inter-medium", sans-serif;
}
.custom-pills .nav-link.active {
  background-color: #5d5fef;
  color: white;
  border: none;
  font-family: "Inter-regular", sans-serif;
}
.custom-pills .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 6px solid #5d5fef;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #5d5fef;
}
.action-icons-1 {
  display: flex;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
}
/* Application main */
.card-app {
  border: 1px solid #cdcafc;
  border-radius: 13px;
  background-color: #f5f4ff4d;
  margin-top: 15px;
}
.card-app-header {
  background-color: #f5f4ff;
  padding: 10px 10px 10px 15px;
  border-radius: 13px 13px 0 0;
}
.info-edit-column-2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 21px 10px 0px 10px;
}
.card-main-body-content-1 {
  padding: 0px 15px 30px 15px;
}
.above-table-1 {
  display: flex;
  justify-content: end;
  padding: 15px 0;
}
.card-main-body-nav-app {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #f5f4ff;
  border: 1.5px solid #cdcafc;
  border-radius: 5px;
  font-family: "Inter-semibold", sans-serif;
  font-size: 14px;
  padding-left: 20px;
}
.card-main-body-nav-app p {
  margin: 0;
}
.card-main-body-nav-app p:nth-child(2) {
  background-color: #5d5fef;
  padding: 9px 20px 9px 20px;
  color: white;
  margin: 0;
  border-radius: 5px 0 0 5px;
}
.member-type-toggle {
  margin-top: 10px;
  gap: 10px;
}
.radio-pill {
  display: flex;
  align-items: center;
  padding: 5px 20px;
  margin-top: 10px;
  border-radius: 8px;
  border: 2px solid #ccc;
  text-decoration: none;
  color: #000;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  gap: 10px;
  transition: all 0.2s ease;
}
.radio-pill .custom-radio {
  width: 13px;
  height: 13px;
  max-width: 13px;
  max-height: 13px;
  border: 2px solid #000;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.radio-pill.active {
  border-color: #5d5fef;
  color: #000000;
}
.radio-pill.active .custom-radio::after {
  content: "";
  width: 7px;
  height: 7px;
  background-color: #000000;
  border-radius: 50%;
  position: absolute;
  top: 1.5px;
  left: 1.5px;
}
input[type="checkbox"] {
  cursor: pointer;
}
/* Dropdown styling to match input fields */
.custom-dropdown {
  color: #999999;
  border: none;
  border-radius: 8px;
  background-color: #f1f0f5;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid #bebdc2b4;
}
.custom-dropdown-add {
  color: #999999;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid #bebdc2b4;
}
/* On focus */
.custom-dropdown:focus {
  outline: none;
  border: 0.5px solid #e0e0f8;
  background-color: #fff;
}
.info-heading {
  background-color: #f5f4ff;
  border: 1px solid #dad6ff;
  border-radius: 6px;
  padding: 6px 16px;
  font-family: "Inter-medium", sans-serif;
  text-align: center;
}
.info-heading-dark {
  background-color: #e6e3ff;
  border: 1px solid #dad6ff;
  border-radius: 6px;
  padding: 6px 16px;
  font-family: "Inter-medium", sans-serif;
  text-align: center;
}
.vehicle-card {
  background-color: #f5f4ff;
  border: 1px solid rgba(225, 220, 255, 0.46);
  border-radius: 12px;
  display: flex;
  padding: 10px;
  margin-bottom: 16px;
  align-items: center; 
  overflow: auto;
  scrollbar-width: none;
}
.vehicle-image {
  background-color: #dad6ff;
  border-radius: 10px;
  padding: 10px;
    width: 125px;
  object-fit: contain;
    flex-shrink: 0;
    margin-right: 20px;
}
.vehicle-image img {
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto;
}
.vehicle-name {
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
  text-align: center;
  color: #333;
}
.vehicle-details .info-row {
  font-size: 15px;
  margin-bottom: 4px;
  font-family: "Inter", sans-serif;
}
.vehicle-details {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.vehicle-details p {
  margin: 0;
    line-height: 1.4;
}
.action-reinstate {
  display: flex;
  gap: 7px;
  justify-content: center;
  color: #5d5fef;
  align-items: center;
}
.reinstate-btn {
  display: flex;
  padding: 5px 10px;
  align-items: center;
  gap: 3px;
  border-radius: 50px;
  border: 1px solid #5d5fef;
  background: #fff;
  color: #5d5fef ;
  text-decoration: none;
}
.reinstate-btn:hover {
  background-color: #5d5fef;
  color: #fff;
  text-decoration: none;
}
.comm-radio {
  display: flex;
  gap: 10px;
}
.file-upload-wrapper {
  border: 2px dashed #3b82f6;
  /* blue border */
  border-radius: 5px;
  padding: 60px 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease-in-out;
}
.file-upload-wrapper:hover {
  background-color: #f9f9f9;
}
.file-upload-wrapper i {
  font-size: 2rem;
  color: #555;
  margin-bottom: 10px;
}
.file-upload-wrapper .text {
  font-weight: 500;
  color: #333;
}
.file-upload-wrapper input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.billing-table th:last-child,
.billing-table td:last-child {
  min-width: 250px;
  /* Control "Remarks" column width */
}
.perm-table table td {
  border: none;
  padding: 5px 6px 5px 10px;
}
.perm-table table {
  border: none;
}
.perm-table table thead th {
  background: none;
  padding: 10px 10px;
  color: black;
  border: none;
  font-weight: 400;
}
.profile-page-img-wrapper {
  position: relative;
  width: 135px;
  height: 135px;
  border: 1px solid #dddddc;
  border-radius: 50%;
}
.profile-page-img-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.profile-page-img {
  width: 135px;
  height: 135px;
  object-fit: cover;
}
/* .profile-page-img-wrapper::before {
  content: "\f303";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: white;
  margin-left: 5px;
  background-color: #5d5fef;
  padding: 5px 7px;
  border-radius: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 9px;
} */
.agency-dropdown {
  border: 1px solid #bebdc2b2;
  background: white;
  width: max-content;
  border-radius: 20px;
}
.agency-dropdown button {
  gap: 6px;
}
.agency-action-dropdown {
  padding: 0px;
  border-radius: 8px;
  border: 1px solid #ddd;
  overflow: hidden;
  min-width: auto; 
}
.agency-action-dropdown.show a {
  color: #000;
  font-size: 13px;
}
.agency-action-dropdown.show li:hover a {
  color: #5d5fef;
  text-decoration: none;
}
.agency-dropdown .arrow i::before {
  padding-top: 6px;
}

/* Fix double arrow issue */
#applications-table .agency-dropdown .dropdown-toggle {
  position: relative;
}

#applications-table .agency-dropdown .dropdown-toggle::after {
  display: none !important;
}

#applications-table .agency-dropdown .arrow {
  margin-left: 4px;
}
.agency-action-dropdown.show {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1050;
}
.agency-action-dropdown li {
  /* padding: 4px 10px; */
  cursor: pointer;
  font-size: 13px;
}
.agency-action-dropdown.show li a,
.agency-dropdown.show li a {
    padding: 6px 12px;
    display: block;
}
.agency-action-dropdown li:nth-child(odd) {
  background-color: #fff;
}
.agency-action-dropdown li:nth-child(even) {
  background-color: #f8f8ff;
}
.agency-action-dropdown li:hover {
  background-color: #eaeaff;
  color: #5d5fef;
}
.action-btn {
  background-color: transparent;
  border: none;
  font-weight: 500;
}
.info-icon-wrapper {
  border-radius: 100px;
  border: 1px solid #5d5fef;
  background: #5d5fef;
  color: #fff;
  display: flex;
  align-items: center;
  width: 22px;
  height: 22px;
  justify-content: center;
  cursor: pointer;
}
.info-icon-wrapper:hover {
  background-color: #fff;
  color: #5d5fef;
}
.info-icon-wrapper i {
  font-size: 12px;
}
.info-column-1 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 20px 0 20px;
  background-color: white;
  border: 2px solid #cdcafc;
  border-radius: 10px;
  margin-top: 10px;
}
#agencies-list-table_info { 
  font-family: "Work Sans", sans-serif;
  color: #030229;
  font-size: 13px;
  margin-top: 12px;
  padding-bottom: 15px;
  font-weight: 400;
  text-align: left;
}
#agent_div .info-edit-row {
  margin-bottom: 0px;
}
#agent_div .col-md-6 .input-group {
  border: 1px solid #d1d0d4;
  border-radius: 5px;
}
#agent_div .col-md-6 .input-group .agency-bottom-inpt,
#agent_div .col-md-6 .input-group span.input-group-text.edit-trash {
  border: none;
  margin-left: 0;
  border-radius: 5px;
}
#terminate_agency_modal_form .pickerdate {
  position: relative;
}
#terminate_agency_modal_form .pickerdate i.icon-date {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.datepicker.datepicker-dropdown.dropdown-menu {
  left: unset !important;
  right: 21%;
}
.modal-footer .btn.btn-secondary {
  background-color: #fff;
  color: #333;
  border: 1px solid #333;
}
.modal-footer .btn.btn-secondary:hover {
  background-color: #333;
  color: #fff;
}
.modal-footer .btn.btn-primary {
  background-color: #5d5fef;
  color: #fff;
  border: 1px solid #5d5fef;
}
.modal-footer .btn.btn-primary:hover {
  background-color: #fff;
  color: #5d5fef;
}
#terminated-agencies-list-table_info {
  padding-bottom: 0;
  font-family: "Work Sans", sans-serif;
  color: #030229;
  font-size: 13px;
  margin-top: 10px;
}
.app-nav-bar {
  background-color: #f5f4ff;
  border: 1px solid #cdcafc;
  border-radius: 5px;
}
.app-nav-bar .nav-pills {
  margin: 0;
  display: flex;
  gap: 5px;
}
.app-nav-bar .nav-link {
  border: none;
  color: black;
  text-align: center;
  background-color: transparent;
  width: 100%;
  padding: 8px 16px;
  white-space: nowrap;
  text-decoration: none;
}
.app-nav-bar .nav-link.active {
  background-color: #5d5fef;
  border: none;
  color: white;
  border-radius: 0px;
  text-decoration: none;
}
.app-nav-bar .nav-item {
  flex-shrink: 0;
}
#app-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#app-info p {
  margin: 0;
  padding-left: 200px;
}
.vehicle-count {
  width: 25px;
  height: 25px;
  background-color: #5d5fef;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  font-size: 13px;
}
.view-buss-details {
  padding-top: 15px;
  color: #5d5fef;
  font-family: "Inter", sans-serif;
  font-weight: 500;
}
.view-head {
  margin-bottom: 12px;
  border-bottom: 1px solid #d1d1d1;
}
.custom-switch:checked {
  background-color: #68c27c;
  border-color: #68c27c;
}
.custom-switch-label {
  color: black;
  font-family: "Work Sans", sans-serif;
}
.agent-names {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  background-color: #f5f4ff;
  border: 1px solid #cdcafc;
  padding: 5px 15px;
  border-radius: 5px;
  align-items: center;
}
.agent-names .btn-1 {
  display: inline-block;
  background-color: #5d5fef;
  color: white;
  padding: 5px 14px;
  font-size: 14px;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11);
  border: 1px solid #5d5fef;
}
.agent-names .btn-1:hover {
  background-color: #fff;
  color: #5d5fef;
}
.card-body-end-btn-2:hover,
.action-buttons:hover {
  background-color: #fff;
  border-color: #5d5fef;
  color: #5d5fef;
}
.edit-trash {
  border-right: 1px solid auto;
  background-color: white;
}
.modal-head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 16px; /* 1rem */
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px;
}
.modal-head #terminated-agency-name {
  line-height: 1.5;
  margin-bottom: 0;
  font-size: 16px;
}
.modal-body-content {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
    color: #212529;
}
.modal-body-content p {
  margin-bottom: 10px;
}
.modal-foot {
  display: flex;
  justify-content: end;
  padding: 17px;
}
.modal-foot .btn-closed {
  color: #fff;
  border: 1px solid #5d5fef;
  background-color: #5d5fef;
  border-radius: 5px;
  font-size: 16px;
  padding: 6px 12px;
}
.modal-foot .btn-closed:hover {
  color: #5d5fef;
  background-color: #fff;
}
#agencies-list-table_wrapper .table-responsive {
  overflow: auto;
}
#agencies-list-table_wrapper  .table-responsive.few-agencies {
  min-height: 260px;
}
#agencies-list-table_wrapper  .table-responsive.few-agencies tr td {
  border-bottom: 1px solid #c2c2c2;
}
#agencies-list-table_wrapper  .table-responsive.few-agencies .agency-action-dropdown.show {
  transform: translate3d(-23px, 31px, 0px) !important;
}
.agency-bottom-inpt {
  border-right: none;
  padding: 8px 14px;
}
.action-pay {
  display: flex;
  align-items: center;
  padding: 5px 3px;
  justify-content: center;
  gap: 5px;
  border: 1px solid #5d5fef;
  border-radius: 5px;
  color: #5d5fef;
}
.most-selling-db-card {
  padding: 0;
}
.most-selling-db-card table {
  border: none;
  margin-bottom: 0;
}
#terminated-agencies-list-table_wrapper .table-responsive {
  max-height: 430px;
}
.coming-soon-wrapper {
  display: flex;
  justify-content: center;
}
.notif-panel {
  width: 380px;
  overflow: hidden;
  border-radius: 10px;
  transform: translateY(70px);
}
.notif-header {
  display: flex;
  color: white;
  justify-content: space-between;
  align-items: center;
  background-color: #5d5fef;
}
.notif-body {
  max-height: 300px;
  overflow-y: auto;
}
.notif-body img {
  max-width: 32px;
  max-height: 32px;
}
.notif-read {
  font-size: 12px;
}
.card-body-db .custom-striped-table {
  /* max-height: 441px; */
  border: 1px solid #c2c2c2;
}
.card-body-db thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.custom-striped-table.billing-table {
  max-width: 1110px;
  max-height: 440px;
}
.custom-striped-table.billing-table table {
  width: max-content;
}
.custom-striped-table.billing-table table thead {
  position: sticky;
  top: 0;
}
.custom-striped-table.billing-table table thead th {
  padding-right: 15px;
}
@media (min-width:993px) and (max-width:1024px) {
.custom-offcanvas {
  display: none;
}
  #db-card .custom-agency-table {
    min-width: 320px;
  }
  #db-recent .card-body-db .custom-striped-table {
    max-width: 710px;
    overflow: scroll;
  }
  #edit-profile-form .card-main-body-content {
    flex-wrap: nowrap;
    gap: 40px;
  }
  .stat-card {
  min-width: auto;
  padding: 10px;
  min-height: unset;
  gap: 10px;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}
#db-card-noti td:nth-child(3) {
  min-width: 220px;
}
  .profile-page-img-wrapper,
  .profile-page-img {
    width: 115px;
    height: 115px;
  }
}
@media (max-width:992px) {
  .btn-collapse-hamb{
    background: transparent;
    position: absolute;
    z-index: 2;
    right: 0px;
    top: 20px;
    border: none;
}
  .custom-sidebar {
    min-height: 100vh;
  }
}
@media (min-width:769px) and (max-width: 992px) {
  .top-bar {
    gap: 10px;
  }
  .card-body {
    padding-top: 0px;
  }
  #db-card .custom-agency-table {
    min-width: 340px;
  }
  .stat-card {
    min-width: unset;
  }
  #db-recent .custom-striped-table {
    overflow: auto;
  }
  #terminated-agencies-list-table_wrapper .table-responsive {
    max-height: 510px;
  }
  .offcanvas .custom-sidebar {
    width: 100%;
    min-height: 100vh;
    padding: 20px 10px;
  }
  .top-bar-right {
    padding-right: 5px;
  }
  .top-bar .notification {
    justify-content: space-between;
  }
  .profile-box {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    gap: 5px;
  }
  .profile-box-content {
    width: 100%;
    justify-content: space-between;
    gap: 5px;
  }
  .profile-info {
    display: none;
  }
  .profile-info p:first-child {
    font-size: 13px;
  }
  .profile-info p:last-child {
    font-size: 11px;
  }
  .dropdown-profile-box .dropdown-menu-end {
    position: absolute;
    margin: 0;
    transform: translate3d(0px, 29.6px, 0px);
    inset: 31px 7px auto auto;
    border-radius: 10px;
  }
  .dropdown-profile-box {
    border: none;
  }
  .notif-body div {
    display: flex;
    padding: 10px 0px;
    align-items: center;
  }
  .notif-body img {
    max-width: 32px;
    max-height: 32px;
  }
  #toggleSidebarBtn {
    display: block;
  }
  .card {
    padding: 0;
  }
  .action-buttons a:nth-child(1) {
    display: flex;
    align-items: center;
    padding-right: 12px;
    gap: 5px;
  }
  .action-buttons a {
    background-color: #5d5fef;
    color: white;
    pointer-events: auto;
    font-family: "Inter", sans-serif;
    font-size: 13px;
  }
  .nav .nav-link.active span {
    font-size: 15px;
    display: flex;
    align-items: center;
  }
  #mobileSidebar.offcanvas-start {
    width: 250px;
    max-width: 250px;
    border: none;
  }
  .custom-offcanvas .offcanvas.offcanvas-start {
    width: 250px;
  }
  .offcanvas .btn-collapse-hamb {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0.5rem;
    margin-right: 0.75rem;
    margin-top: 0.5rem;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1055;
  }
  .top-bar-left .mobile-logo {
    font-family: "Raginy-regular", sans-serif;
    font-size: 40px;
  }
  .custom-striped-table-db .table td,
  .custom-striped-table-db .table th {
    padding: 8px;
    word-break: break-word;
  }
  .card-header-db,
  .card-body-db {
    padding: 8px 12px;
  }
  .card-db-title {
    font-size: 14px;
  }
  main.main-content {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .app-nav-bar .nav-pills{
    flex-wrap: nowrap;
    gap: 15px;
  }
  #db-card-noti td:nth-child(3) {
    min-width: 150px;
  }
  main.main-content {
    width: 100%;
  }
  .btn-collapse-hamb i {
    font-size: 30px;
  }
  .nav > .nav-item > .nav-link {
    font-size: 18px;
  }
  .stat-card {
    min-width: auto;
    padding: 10px;
    min-height: unset;
    gap: 10px;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    height: 100%;
  }
  .card-img-wrapper {
    width: 40px;
    height: 40px;
  }
  .card-img-wrapper i {
    font-size: 18px;
  }
  .card-img-wrapper img {
    width: 20px;
    height: 20px;
  }
  .profile-page-img-wrapper,
  .profile-page-img {
    width: 95px;
    height: 95px;
  }
  .custom-sidebar {
    width: 100%;
  }
  #edit-profile-form .card-main-body-content .row {
    justify-content: space-between;
  }
  .profile-img-wrapper img {
    width: 35px;
    height: 35px;
  }
  .app-nav-bar .nav-link {
    padding: 8px 12px;
    font-size: 13px;
  }
  .forgot-text,
  .remember-text {
    font-size: 14px;
  }
  .member-type-toggle {
    flex-wrap: wrap;
    gap: 0;
  }
  .member-type-toggle .radio-pill {
    width: 100%;
    justify-content: center;
  }
  .info-label {
    min-width: 92px;
    max-width: 92px;
  }
  #db-card .custom-agency-table {
    min-width: 340px;
  }
  /* #db-card .most-selling-db-card {
    max-height: 208px;
  } */
  .card-body-db .custom-striped-table{
    overflow: scroll;
  }
  #db-recent .card-body-db {
    max-width: 732px;
  }
  /* #db-recent .card-body-db {
    max-width: 392px;
  } */
  .profile-box-content {
    justify-content: space-between;
    width: 100%;
  }
  .app-card-body {
    padding: 20px;
  }
  .db-cont-row #db-card {
    min-height: 270px;
  }
  .app-card-body .info-column-1 {
    padding: 20px 15px 0 15px;
  }
  .app-card-body .vehicle-details {
    font-size: 13px;
    justify-content: center;
  }
  .top-bar .hamb-mob {
    margin-right: auto;
  }
  .report-card .card-main-header{
    padding: 16px 20px;
  }
  .report-card .card-main-body-1{
    margin: 20px 15px 15px 15px;
    padding: 14px 12px;
  }
  .report-card table thead th {
    min-width: 120px;
  }
}

.view-label {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.view-value {
    background-color: #f8f7ff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #e0e0e0;
}
.custom-tabs {
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f7ff;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.custom-tabs .nav-link {
    border: none;
    color: #6c757d !important;
    border-radius: 0.5rem;
}

.custom-tabs .nav-link.active {
    background-color: #7b68ee;
    color: white !important;
}

.custom-tabs .nav-link:hover {
    background-color: #7b68ee !important;
    color: white !important;
}

/* Form Switch (Status Toggle) */
.form-switch.form-switch-lg .form-check-input {
    height: 28px;
    width: 56px;
}

/* Filter Clear Buttons */
.filter-wrapper {
    position: relative;
    display: inline-block;
}

.btn-clear-filter {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #dc3545;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    z-index: 10;
    display: none;
}

.btn-clear-filter:hover {
    color: #a71e2a;
    background-color: rgba(220, 53, 69, 0.1);
    border-radius: 3px;
}

.filter-wrapper select {
    padding-right: 30px !important;
}

/* Application Status Badges */
.badge-status-new {
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    display: inline-block;
    width: 100px;
    text-align: center;
    white-space: nowrap;
    font-family: "Work Sans", sans-serif;
}

.badge-status-completed {
    background-color: #e8f5e8;
    color: #2e7d32;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    display: inline-block;
    width: 100px;
    text-align: center;
    white-space: nowrap;
    font-family: "Work Sans", sans-serif;
}

.badge-status-bound {
    background-color: #fff3e0;
    color: #f57c00;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    display: inline-block;
    width: 100px;
    text-align: center;
    white-space: nowrap;
    font-family: "Work Sans", sans-serif;
}

.badge-status-pending_cancellation {
    background-color: #fce4ec;
    color: #c2185b;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    display: inline-block;
    min-width: 100px;
    text-align: center;
    white-space: nowrap;
    font-family: "Work Sans", sans-serif;
}

.badge-status-cancelled {
    background-color: #ffebee;
    color: #d32f2f;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    display: inline-block;
    width: 100px;
    text-align: center;
    white-space: nowrap;
    font-family: "Work Sans", sans-serif;
}

.badge-status-expired {
    background-color: #f3e5f5;
    color: #7b1fa2;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    display: inline-block;
    width: 100px;
    text-align: center;
    white-space: nowrap;
    font-family: "Work Sans", sans-serif;
}

.badge-status-overdue {
    background-color: #ffebee;
    color: #d32f2f;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    display: inline-block;
    width: 100px;
    text-align: center;
    white-space: nowrap;
    font-family: "Work Sans", sans-serif;
}
.readonly-field {
    background-color: #e9ecef;
    opacity: 1;
    cursor: not-allowed;
}
.invalid-feedback {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: left;
    font-size: 0.8rem;
}
.is-invalid {
    border-color: #dc3545 !important;
}

/* Fix pagination styling */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 15px;
    text-align: center;
}

.dataTables_wrapper .dataTables_info {
    margin-top: 15px;
    font-size: 14px;
    color: #666;
}

/* Custom Bootstrap Tooltip Styling for Unverified Vehicles */
.tooltip {
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 1080;
}

.tooltip-inner {
    background-color: #dc3545;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    max-width: 250px;
    text-align: center;
    line-height: 1.4;
    font-weight: 500;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #dc3545;
    border-width: 0.4rem 0.4rem 0;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: #dc3545;
    border-width: 0 0.4rem 0.4rem;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: #dc3545;
    border-width: 0.4rem 0 0.4rem 0.4rem;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: #dc3545;
    border-width: 0.4rem 0.4rem 0.4rem 0;
}

/* Smooth fade animation */
.tooltip.fade {
    transition: opacity 0.15s linear;
}

.tooltip.show {
    opacity: 1;
}

/* Notification View Page Styles */
.notification-message-box {
  border: 1px solid #e0e0e0;
  border-left: 4px solid #007bff;
  padding: 1rem 1rem 1rem 1.25rem;
  border-radius: 4px;
  margin-top: 0.5rem;
  min-height: 100px;
  display: flex;
  align-items: center;
  background-color: #f5f4ff;
  text-align: -webkit-center;
  font-weight: 600;
  font-size: large;
  align-self: center;
  align-items: center;
  margin-bottom: 20px;
}
.logo{
    width: 80%;
    margin: auto;
    display: block;

}

#deleted-member-modal .uk-modal-body {
  width: 850px;
}

.uk-modal-footer  .uk-button-primary{
  background-color: #5d5fef;
  border-color: #5d5fef;
}
.uk-modal-footer  .uk-button-primary:hover{
  background-color: #fff;
  color: #5d5fef;
  border-color: #5d5fef;
}
.uk-modal-footer  .uk-button:hover{
  border-color: #5d5fef;
}
.password-toggle-icon {
            position: absolute;
            right: 1px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            z-index: 2;
            border-left: 1px solid #d1d1d1;
            padding: 10px 12px;
        }
.password-input-wrapper .form-control.is-invalid {
    background-position: 92%;
}
.card{
  margin: 20px 0px ;
}