@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  --primary-color: #0a96f9;
}

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #000;
  text-align: left;
  /* background: #b0c4df url(../images/blue_background.png); */
  background: #f3f4f9;
  background-repeat: no-repeat;
}

.dashboard-box-container {
  min-height: 245px;
}

.dashboard-title-box {
  padding: 5px 10px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
}

.scroll_div,
.table-wraper {
  border: 1px solid #dedfe0;
}

.table th {
  padding: 5px;
}

.table td {
  padding: 1px;
}

.table td,
.table th {
  /* text-align: center; */
  vertical-align: middle;
  border: 1px solid #a8c9e6;
  border-bottom: 1px solid #dedfe0;
}

.dataTable .table th {
  border-bottom: 1px solid #dedfe0;
  z-index: 1;
}

.dataTable .table td,
.table td {
  border: 1px solid #dedfe0;
}

.dataTable .table th {
  text-wrap: nowrap;
  background-color: #ecf5fd !important;
  height: 40px;
}

.table thead th {
  border-bottom: 1px solid #e9ecef;
}

.dataTable td {
  /* text-align: center; */
}

.table th {
  font-weight: 500;
  background: #ecf5fd;
  border-top: 0px solid #e9ecef !important;
  vertical-align: middle !important;
  line-height: 16px;
  border-bottom: 1px solid #a8c9e6 !important;
  text-wrap: nowrap;
  /* text-align: center; */
  padding: 5px;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: transparent;
}

.t-min-width {
  min-width: 200px;
}

table .btn-sm {
  padding: 1px 4px;
}

/* Hide scrollbar by default */
.scroll_div {
  overflow: hidden;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
  overflow: auto;
  scrollbar-width: thin;
}

/* Hide scrollbar in Chrome, Safari, Edge */
.scroll_div::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Show scrollbar on hover */
/* .scroll_div:hover {
  overflow: auto;
  scrollbar-width: thin;
} */

/* Show scrollbar in Chrome, Safari, Edge */
.scroll_div:hover::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scroll_div:hover::-webkit-scrollbar-thumb {
  background: #b3b3b3;
  border-radius: 10px;
}

.scroll_div:hover::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.card-body {
  padding: 10px;
}

.card:not(.accordion .card, .auth-body-bg .card) {
  margin-bottom: 0;
  border-radius: 0;
  border: 1px solid #d0d5dd;
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
  padding-right: 15px;
  padding-left: 15px;
}

.dashboard-search-icon {
  padding: 0 10px;
}

#area-chart,
#line-chart,
#bar-chart,
#stacked,
#pie-chart {
  min-height: 150px;
}

.footer {
  background: #ffffff;
  position: relative;
  padding: 5px;
  height: 30px;
}

.radius-0 {
  border-radius: 0;
}

#example23_filter,
#leads_filter {
  float: right;
  margin: 0px 5px 0 0;
}

.dataTables_paginate {
  float: right;
  margin-top: 10px;
}

.dataTables_info {
  float: left;
  margin-top: 10px;
}

.fixed-table-container {
  padding-bottom: 0 !important;
}

.buttons-copy,
.buttons-csv,
.buttons-excel,
.buttons-pdf,
.buttons-print,
.buttons-collection {
  padding: 5px 15px;
  border-radius: 4px;
  background: var(--primary-color);
  color: #ffffff;
  margin-right: 3px;
  border: none;
  height: 30px;
}

.buttons-copy:hover,
.buttons-csv:hover,
.buttons-excel:hover,
.buttons-pdf:hover,
.buttons-print:hover,
.buttons-collection:hover,
.buttons-copy:focus,
.buttons-csv:focus,
.buttons-excel:focus,
.buttons-pdf:focus,
.buttons-print:focus,
.buttons-collection:focus {
  padding: 5px 15px;
  border-radius: 4px;
  background: #009efb;
  color: #ffffff;
  margin-right: 3px;
  border: none;
  height: 30px;
}

.login-box {
  padding: 60px;
}

.filter_wrap {
  width: 360px;
  padding: 20px;
}

.filter_wrap_2 {
  width: 850px;
  padding: 20px;
}

.table {
  color: #000;
}

.card-subtitle {
  margin: 10px 0 10px 0;
  background: #e9ecef;
  font-size: 14px;
  padding: 10px 5px;
}

label {
  color: #000;
}

.add_lead {
  padding: 10px 15px;
  flex: 0 0 100%;
  overflow: auto;
}

.create-lead-wrapper {
  height: calc(100vh - 237px);
  overflow-x: hidden;
  overflow-y: auto;
}

.create-lead-wrapper .card-subtitle {
  font-size: 15px;
  font-weight: 600;
  color: #194d74;
  padding-inline: 10px;
  background: #edf7fd;
}

.accordion .btn {
  background: #e9ecef;
  font-size: 14px;
  padding: 10px 5px;
  color: #000;
  font-weight: 500;
}

.btn.focus,
.btn:focus {
  box-shadow: none;
  outline: none;
}

.filter-btn {
  width: 32px;
  min-width: auto !important;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* gap-1.5 */
  border: 1px solid #a9a8a8;
  border-radius: 3px;
  background: #fff;
  color: #111827;
  /* Replace with your actual fontBlack color */
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-btn {
  padding: 6px 15px;
}

.accordion .card-header {
  padding: 0;
}

.multiselect-container {
  padding: 10px !important;
  width: 100%;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow: auto;
}

.multiselect {
  border: 1px solid #ccc !important;
  text-align: left;
}

.multiselect-container {
  /* width: 300px; */
  width: auto;
}

.multiselect-container li a label {
  padding-left: 20px;
  display: flex;
  align-items: center;
}

.multiselect-container li a input {
  position: absolute;
  left: 10px;
}

.filter_wrap {
  z-index: 2;
  max-width: 400px;
}

.table {
  margin-bottom: 0;
}

.btn_submit {
  float: right;
}

.datepicker {
  z-index: 9999 !important;
  border: 1px solid #b2b2b2fa;
}

.calendar-icon {
  position: absolute;
  right: 5px;
  top: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e2f5ff;
  text-align: center;
  line-height: 30px;
  font-size: 16px;
  pointer-events: none;
}

.review_dr {
  width: 96%;
  max-width: 96%;
}

.table-bordered td,
.table-bordered th {
  border: 1px solid #dbdee0;
}

/*
table {
    border-collapse: initial;
}
*/
.dropdown-menu1 {
  display: none;
}

.dropdown-menu1 {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: #495057;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #cccccc;
  border-radius: 0;
}

.dropdown-menu1 {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;

  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: #495057;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #d0d5dd;
  border-radius: 0;
}

.media .rounded-circle {
  border-radius: 0 !important;
}

.bredcrum-title,
.breadcrumb-title {
  width: 100%;
  min-height: 41px;
  /* display: flex;
  align-items: center; */
}

.bredcrum-title > img,
.breadcrumb-title > img {
  display: none !important;
}

.bredcrum-title .text-muted,
.breadcrumb-title .text-muted {
  display: none;
}

.bredcrum-title h4 {
  font-size: 14px;
  margin: 5px 0;
  font-weight: 600;
  text-transform: uppercase;
}

#visit_lac_filter,
.dataTables_filter {
  float: right;
}

.dataTables_filter .form-control {
  border-radius: 0.5rem;
  padding: 0.375rem 1rem 0.375rem 2.5rem;
  font-size: 0.875rem;
  color: var(--default-text-color);
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  -moz-user-select: none;
  user-select: none;
  min-width: 16rem;
  text-align: start;
  background-color: rgb(244, 246, 250);
  border-color: #eff2ff;
  height: unset;
}

.dataTables_filter .search-box {
  position: relative;
  display: inline-block;
}

.dataTables_filter .search-box::before {
  content: "\f002";
  /* Font Awesome Search */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #98a2b3;
  pointer-events: none;
  font-size: 14px;
}

#page-topbar {
  position: relative;
  border-bottom: 1px solid #f3f6f9;
  box-shadow: none;
}

.topnav {
  position: relative;
  margin-top: 0;
  background-color: #f5f5f5;
}

.topnav .navbar-nav .nav-item {
  display: inline-flex;
  align-items: center;
}

.topnav .navbar-nav .nav-link {
  padding-top: 5px;
  padding-right: 0;
  padding-bottom: 4px;
  padding-left: 0;
  font-size: 13px;
  font-weight: 500;
  margin-right: 15px;
  color: #000;
  border-bottom: 2px solid transparent;
  position: relative;
  transition: all 0.3s ease;
}

.topnav .navbar-nav .nav-link i {
  vertical-align: middle;
}

.topnav .navbar-expand-lg .navbar-nav .dropdown-menu {
  max-height: calc(100vh - 100px);
  overflow: auto;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 6px 0 #4b4b4b29;
  z-index: 5;
}

.topnav .dropdown-item {
  padding: 5px 0.6rem;
  min-width: 100px;
  font-size: 13px;
  border-bottom: 1px solid #ccc;
}

.topnav .navbar-nav .dropdown-item {
  color: #000;
}

.topnav .navbar-nav .dropdown-item.active,
.topnav .navbar-nav .dropdown-item:hover,
.topnav .navbar-nav .dropdown.active > a,
.topnav .navbar-nav .nav-link:focus,
.topnav .navbar-nav .nav-link:hover {
  color: var(--primary-color);
}

.topnav .dropdown-menu-left {
  padding: 0;
}

body[data-layout="horizontal"] .page-content {
  margin-top: 0;
  padding: 7px 4px;
  min-height: calc(100vh - 118px);
}

.page-content > .container-fluid {
  padding: 0;
}

#preloader {
  display: none;
}

#productType .col-md-12 {
  padding: 0;
}

.btn-default {
  background-color: #efefef;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.text-primary {
  color: var(--primary-color) !important;
}

a {
  color: var(--primary-color);
}

.page-link {
  padding: 0.4rem 0.65rem;
}

.page-item.active .page-link,
.page-item.disabled .pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.table_centered th,
.table_centered tr td {
  text-align: center;
}

.alert {
  display: flex;
  gap: 1rem;
  align-items: center;
  position: fixed;
  max-width: 500px;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  border-left: 5px solid;
  color: #000 !important;
  font-size: 13px;
  padding: 20px;
  padding-right: 50px;
  box-shadow: 0 0 15px rgb(0 0 0 / 19%);
  z-index: 999;
}

.alert .close {
  position: absolute;
  top: 10px;
  right: 5px;
  font-size: 24px;
}

.alert h3 {
  margin: 0;
  font-weight: 600;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.alert h3 i {
  font-size: 20px;
}

.alert .text-primary,
.alert .text-success,
.alert .text-warning,
.alert .text-success,
.alert .text-danger {
  color: #000 !important;
}

.alert.alert-primary {
  border-color: #6ab9ff;
  background-image: linear-gradient(to bottom, #e4f2ff, #f9fbfd);
}

.alert .text-primary i {
  color: #6ab9ff !important;
}

.alert.alert-success {
  border-color: #52cb98;
  background-image: linear-gradient(to bottom, #ccffea, #f9fbfd);
}

.alert .text-success i {
  color: #52cb98 !important;
}

.alert.alert-warning {
  border-color: #f9bc0b;
  background-image: linear-gradient(to bottom, #fff5ec, #f9fbfd);
}

.alert .text-warning i {
  color: #f9bc0b !important;
}

.alert.alert-danger {
  border-color: #ff2c2c;
  background-image: linear-gradient(to bottom, #ffecec, #f9fbfd);
}

.alert .text-danger i {
  color: #ff2c2c !important;
}

.modal-body {
  max-height: calc(100vh - 180px);
  overflow: auto;
}

.modal-footer {
  padding: 0 10px;
}

.modal-body .modal-footer {
  padding-left: 0;
  padding-right: 0;
}

.bootstrap-select .dropdown-menu {
  max-height: 300px !important;
}

.bootstrap-select .dropdown-menu .inner {
  max-height: 246px !important;
}

.btn1 {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.47rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  -webkit-transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    -webkit-box-shadow 0.15s ease-in-out;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    -webkit-box-shadow 0.15s ease-in-out;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    -webkit-box-shadow 0.15s ease-in-out;
}

.dataTables_processing {
  height: 25px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  padding: 1px;
  position: absolute;
  z-index: 1000;
  width: 99%;
  top: 50%;
}

div.dt-button-collection {
  left: 0px !important;
}

.accordion .card-header h5 {
  float: left;
}

.accordion .card-header {
  background: #e9ecef;
  margin: 3px !important;
}

.accordion.accordion-new > .card {
  border-radius: 0;
  padding-top: 0 !important;
}

.accordion.accordion-new .card-header {
  margin: 0 !important;
}

.accordion.accordion-new .card-header h5 {
  float: left;
  width: 100%;
}

.accordion.accordion-new .card-header .btn {
  background: #e9ecef;
  font-size: 14px !important;
  padding: 10px 5px;
  color: #000;
  font-weight: 500;
  line-height: 1.2;
}

.accordion-new .card-header h5 button::before {
  content: "\f106";
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 600;
  position: absolute;
  top: 10px;
  right: 25px;
  -webkit-transition: -webkit-transform 0.25s;
  transition: -webkit-transform 0.25s;
  transition: transform 0.25s;
  transition:
    transform 0.25s,
    -webkit-transform 0.25s;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  color: var(--primary-color);
}

.accordion-new .card-header h5 button.collapsed::before {
  content: "\f107";
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.accordion-new .add-customer-details,
.accordion-new .btn-primary {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  width: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.accordion-new .btn-danger {
  color: #fff;
  background-color: #f1556c;
  border-color: #f1556c;
  padding: 5px 7px;
  width: auto;
  display: inline-block;
}

.dropdown-menu {
  border: 1px solid #9e9e9e;
  border-radius: 0;
}

.btn-group,
.btn-group-vertical {
  margin-bottom: 5px;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  cursor: not-allowed;
  text-decoration: line-through;
  color: #7d7c7c;
}

.dt-button {
  border-bottom: 1px solid #ccc;
}

.dt-button-collection .dropdown-menu {
  padding: 0;
}

.m-b-14 {
  margin-bottom: 14px !important;
}

.modal-title {
  font-size: 15px;
}

.dt-buttons {
  margin-top: 5px;
}

.input-daterange .form-control {
  padding: 0.47rem 5px;
}

.checkbox input[type="checkbox"] {
  float: left;
  height: 20px;
  margin-right: 7px;
}

.error {
  clear: both;
  float: left;
  margin: 2px 0;
  position: relative;
}

.show-pass {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  text-align: center;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  cursor: pointer;
  z-index: 9;
}

.admin_kra input {
  text-align: center;
  z-index: 0;
  position: relative;
  height: 32px;
}

.pagination {
  margin-bottom: 0;
}

.form-group {
  margin-bottom: 11px;
}

.glyphicon-remove-circle:before {
  content: "X";
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
}

.learning-centre-content .card-subtitle {
  padding: 12px 15px;
  background: var(--primary-color);
  text-align: center;
}

.learning-centre-content .card-subtitle a {
  color: #fff;
}

@media (min-width: 1200px) {
  .learning_centre_module_outer .col-xl-3 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

.leads-data-table tbody tr td:nth-child(2) {
  white-space: nowrap;
}

.leads-data-table th:not(:first-child) {
  /*min-width: 130px;
    white-space: nowrap;*/
}

.leads-data-table tbody tr td:nth-child(2) span {
  display: inline-block;
}

.leads-data-table .dr-copy-btn {
  padding: 0px 5px;
  margin-left: 10px;
  font-size: 12px;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.btn .caret {
  margin-left: 0;
  position: absolute;
  right: 10px;
  top: 15px;
}

.success-align {
  width: 100%;
  justify-content: space-between;
}

.select-filter-recored {
  background-color: #f9f9f9;
  padding-top: 5px;
}

.select-filter-recored {
  background-color: #f9f9f9;
  padding: 50px 15px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  font-size: 17px;
  letter-spacing: 1.1px;
  font-weight: 500;
  border-radius: 10px;
}

@media (max-width: 1400px) {
  .topnav {
    padding-left: 0;
  }

  .topnav .navbar-nav .nav-link {
    padding-left: 1px;
    padding-right: 1px;
  }

  .topnav .navbar-nav .nav-link i {
    font-size: 12px;
  }
}

#myModalMap .modal-dialog {
  max-width: 1200px;
  height: 600px;
}

#myModalMap .modal-body {
  height: 600px;
}

.sweet-alert h2 {
  font-size: 20px !important;
  margin: 0 !important;
}

/* #filter-container form.form-material .form-group .btn {
    margin-top: 1.7rem;
}  */
.alert.alert-success {
  text-align: center;
}

.btn {
  font-size: 0.7925rem !important;
}

.product_details table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

.product_details th,
td {
  padding: 8px;
  text-align: left;
}

.loader-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99999;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
  animation: fadeInLoader 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInLoader {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }

  to {
    opacity: 1;
    backdrop-filter: blur(6px);
  }
}

.loader-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 40px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  animation: cardScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cardScaleIn {
  from {
    transform: scale(0.9) translateY(10px);
    opacity: 0;
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.loader {
  width: 65px;
  height: 65px;
  display: inline-block;
  position: relative;
}

/* Outer Ring - Multi-color sweep gradient */
.loader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 20%,
    rgba(47, 144, 193, 0.1) 40%,
    #2f90c1 70%,
    #1b274d 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  animation: spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  filter: drop-shadow(0 0 4px rgba(47, 144, 193, 0.4));
}

/* Inner Ring - reverse spinning light blue arc */
.loader::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #44a2d2;
  border-left-color: #44a2d2;
  animation: spin-reverse 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.drop-area {
  border-radius: 10px;
  padding: 0px;
  background: rgba(134, 201, 208, 0.1);
  border: 1px dashed var(--primary-color);
  overflow: hidden;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.drop-area .file_drag_area {
  width: 100%;
}

.drop-area .dropzone {
  padding: 10px;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

.drop-area .dropzone.active {
  justify-content: flex-start;
}

.drop-area .dropzone.active .drop-text {
  display: none;
}

.drop-area .dropzone .drop-text {
  font-size: 18px;
  text-align: center;
  margin-top: 15px;
  color: var(--primary-color);
  text-transform: capitalize;
}

.drop-area .add-file-outer {
  position: absolute;
  left: 15px;
  bottom: 10px;
}

.drop-area .add-file-btn {
  border: 1px solid var(--primary-color);
  border-radius: 7px;
  color: #1b274d;
  font-size: 12px;
  padding: 5px 20px;
  gap: 6px;
  display: flex;
  font-weight: 700;
  justify-content: center;
  margin-bottom: 0;
  cursor: pointer;
  text-transform: uppercase;
}

.thumbs {
  display: flex;
  justify-content: flex-start;
  gap: 15px;
  row-gap: 0;
  margin-bottom: 30px;
  padding: 0 10px;
  flex-wrap: wrap;
}

.thumbs .thumb-items .item-inner {
  width: 50px;
  height: 50px;
  border: 1px solid #ddd;
  position: relative;
  border-radius: 4px;
  margin-bottom: 15px;
}

.thumbs .thumb-items .item-inner .remove-item {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background-color: #ea3d3d;
  color: #fff;
  position: absolute;
  right: -10px;
  top: -10px;
  border-radius: 50%;
  cursor: pointer;
}

.thumbs .thumb-items .file-name {
  font-size: 12px;
  text-align: center;
  font-weight: 500;
}

.thumbs .thumb-items .file-name img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

@media (max-width: 991.98px) {
  .login-left {
    height: auto !important;
    min-height: 400px;
  }

  .topnav .navbar-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .topnav .navbar-expand-lg .navbar-nav .dropdown-menu {
    background: transparent;
    box-shadow: 0 0 0;
  }
}

@media (max-width: 1024px) {
  .filter_wrap_2.filter_wrap_2 {
    width: 660px;
  }
}

@media (max-width: 767px) {
  .topnav .topnav-menu .navbar-collapse {
    padding: 10px;
  }

  .topnav .dropdown .dropdown-menu {
    padding-left: 5px;
  }

  .topnav .dropdown-item {
    border: 0;
  }

  .dt-buttons .btn {
    padding: 8px 5px;
  }

  .login-box {
    padding: 20px;
  }

  .login-left {
    height: auto !important;
    min-height: 200px;
  }

  .auth-body-bg {
    height: calc(100vh - 200px);
  }

  .navbar-brand-box {
    padding: 0 1rem;
    padding-right: 0;
  }

  body[data-layout="horizontal"] .page-content {
    min-height: calc(100vh - 90px);
  }

  .buttons-copy,
  .buttons-csv,
  .buttons-excel,
  .buttons-pdf,
  .buttons-print,
  .buttons-collection {
    padding: 5px 8px;
  }

  .buttons-copy:hover,
  .buttons-csv:hover,
  .buttons-excel:hover,
  .buttons-pdf:hover,
  .buttons-print:hover,
  .buttons-collection:hover,
  .buttons-copy:focus,
  .buttons-csv:focus,
  .buttons-excel:focus,
  .buttons-pdf:focus,
  .buttons-print:focus,
  .buttons-collection:focus {
    padding: 5px 8px;
  }

  #example23_filter,
  #leads_filter {
    margin: 0;
    width: 100%;
  }

  #example23_filter label,
  #leads_filter label {
    width: 100%;
  }

  #example23_filter input,
  #leads_filter input {
    height: 38px;
  }

  .scroll_div .table th {
    text-wrap: nowrap;
    top: 0 !important;
    position: sticky !important;
  }

  .filter_wrap_2 {
    width: 400px;
    max-height: 500px;
    overflow: auto;
  }

  .simplebar-content {
    padding: 0 !important;
  }

  .modal-header {
    margin: 0 20px;
  }

  .modal-header .close {
    right: 15px;
  }

  .modal-header .modal-title {
    font-size: 20px;
  }

  .modal-body {
    padding: 16px 20px;
  }

  .login-left {
    height: auto !important;
    min-height: 200px;
  }

  .filter_wrap_2 {
    width: 400px;
    max-height: 500px;
    overflow: auto;
  }

  .simplebar-content {
    padding: 0 !important;
  }

  .modal-header {
    margin: 0 20px;
  }

  .modal-header .close {
    right: 15px;
  }

  .modal-header .modal-title {
    font-size: 20px;
  }

  .modal-body {
    padding: 16px 20px;
  }

  .login-left {
    height: auto !important;
    min-height: 200px;
  }

  .create-lead-wrapper {
    height: calc(100vh - 211px);
  }
}

@media (max-width: 500px) {
  .global-search {
    display: none !important;
  }

  .page-header-user > span {
    display: inline-block;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  .filter_wrap_2,
  .filter_wrap_2.filter_wrap_2 {
    width: 320px;
  }

  .dataTables_paginate {
    width: 100%;
  }

  .pagination .page-link,
  .page-item.disabled .page-link {
    width: auto;
    height: 30px;
  }

  .page-link {
    padding: 0.3rem 0.45rem;
  }

  .multiselect-container {
    min-width: 200px;
  }
}

/* ==========================================================================
   Forecast Stage-Wise Reports (New & Renewal) Styles
   ========================================================================== */

/* Shared Styles */
.forecast-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.report-table-wrapper {
  overflow-x: auto;
}

.probability-badge {
  display: inline-block;
  background: #e8f4fc;
  color: #2980b9;
  border-radius: 12px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #d4ebf8;
}

#report-empty {
  display: none;
  padding: 30px;
  text-align: center;
  color: #888;
}

/* Slide-out Sidebar Drawer for Filters (Renewal) */
.filter-drawer {
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 15px rgba(0, 0, 0, 0.1);
  z-index: 1050;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
}

.filter-drawer.open {
  right: 0;
}

.filter-drawer-header {
  padding: 15px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
}

.filter-drawer-header h5 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}

.filter-drawer-body {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.filter-drawer-footer {
  padding: 15px 20px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.filter-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  z-index: 1040;
  display: none;
}

td a i {
  font-size: 14px !important;
}