* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: "Poppins", sans-serif; */
  }
  * {
    padding: 0;
    margin: 0;
  }
  
  :root {
    --primary-color: #4b739f;
    --sub-primary-color1: #e6e4f5;
    --sub-primary-color2: #46CFF9;
    /* // --primary-color-highlight: #ffce11; */
    /* //--primary-color-hover: #e9ba04; */
    --primary-color-bg: #e6e4f5;
    --primary-bg-color: #f9f9fB;
    --secondary-color: #fff;
    --secondary-color-bg: rgba(151, 76, 229, 1), rgba(70, 207, 249, 1);
    /* //--primary-border-radius: 0px 0px 54px 54px; */
    --sub-secondary-color: #CCD1D6;
    --sub-head-color: #120101;
    --head-theme: #460c10;
    --theme-sub-primary: #e6e9ec;
    --tertiary-color: #999fad;
    --green-color: #23a049;
    --primary-font: "Montserrat";
    --secondary-font: "OpenSans";
  
    --font-thin: 100;
    --font-light: 300;
    --font-regular: 400;
    --font-light-bold: 500;
    --font-mid-bold: 600;
    --font-size-default: 16px; 
    --font-size-xxsm: 10px; 
    --font-size-xsm: 12px;
    --font-size-sm: 14px;
    --font-size-md: 18px; 
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-1xl: 32px;
    --font-size-2xl: 36px;
    --font-size-3xl: 40px;
    --font-size-4xl: 64px;
    --font-size-3-5xl: 48px;
    --font-size-4-5xl: 54px;
    
  }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      margin: 0;
  }
  html,
  body {
    margin: 0;
    padding: 0;
    font-family: var(--primary-font), sans-serif !important;
    font-size: var(--font-size-sm);
    font-weight: var(--font-regular);
  }
  
  body,
  div,
  dl,
  dt,
  dd,
  ul,
  ol,
  li,
  pre,
  form,
  fieldset,
  input,
  select,
  textarea,
  blockquote,
  th,
  td,
  button,
  h6 {
    font-size: var(--font-size-sm) !important;
  }
  
  a {
    text-decoration: none !important;
  }
  
  /* // font colors */
  .primary-gradient{
    color: var(--secondary-color-bg) !important;
  }
  .sub-primary1 {
    color: var(--sub-primary-color1) !important;
  }
  .sub-primary2 {
      color: var(--sub-primary-color2) !important;
    }
  .sub-head-theme {
    color: var(--sub-head-color) !important;
  }
  
  .theme-secondary {
    color: var(--secondary-color) !important;
  }
  
  .theme-sub-sec {
    color: var(--sub-secondary-color) !important;
  }
  
  .theme-primary {
    color: var(--primary-color) !important;
  }
  
  .theme-sub {
    color: var(--sub-color) !important;
  }
  
  .head-theme {
    color: var(--head-theme) !important;
  }
  
  .theme-sub-primary {
    color: var(--theme-sub-primary) !important;
  }
  .teritory-theme {
    color: var(--tertiary-color) !important;
  }
  /* // Color Customization */
  
  .theme-highlight {
    color: var(--primary-color-highlight) !important;
  }
  
  .bg-light-primary {
    background-color: var(--primary-color-bg) !important;
  }
  
  .bg-dark-theme {
    background-color: var(--primary-bg-color) !important;
  }
  
  .bg-theme-primary {
    background-color: var(--section-background) !important;
  }
  
  .bg-secondary-color {
    background-color: var(--secondary-color-bg) !important;
  }
  
  /* // Font Customization */
  
  .fs-d {
    font-size: var(--font-size-default) !important; /* 16px;*/
  }
  
  .fs-xxsm {
    font-size: var(--font-size-xxsm) !important; /* 10px;*/
  }
  
  .fs-xsm {
    font-size: var(--font-size-xsm) !important; /* 12px;*/
  }
  
  .fs-sm {
    font-size: var(--font-size-sm) !important; /* 14px;*/
  }
  
  .fs-md {
    font-size: var(--font-size-md) !important; /* 18px;*/
  }
  
  .fs-lg {
    font-size: var(--font-size-lg) !important; /* 20px;*/
  }
  
  .fs-xl {
    font-size: var(--font-size-xl) !important; /* 24px;*/
  }
  
  .fs-1xl {
    font-size: var(--font-size-1xl) !important; /* 32px;*/
  }
  
  .fs-2xl {
    font-size: var(--font-size-2xl) !important; /* 36px;*/
  }
  
  .fs-3xl {
    font-size: var(--font-size-3xl) !important; /* 40px;*/
  }
  
  .fs-3-5xl {
    font-size: var(--font-size-3-5xl) !important; /* 46px;*/
  }
  .fs-4-5xl{
    font-size: var(--font-size-4-5xl) !important; /* 54px;*/
  }
  .fs-4xl {
    font-size: var(--font-size-4xl) !important; /* 64px;*/
  }
  
  .ff-primary {
    font-family: var(--primary-font), sans-serif !important;
  }
  
  .ff-secondary {
    font-family: var(--secondary-font), sans-serif !important;
  }
  
  .fw-rg{
    font-weight: var(--font-regular) !important;
  }
  .fw-lb {
    font-weight: var(--font-light-bold) !important;
  }
  
  .fw-mb {
    font-weight: var(--font-mid-bold) !important;
  }
  
  .fw-700 {
    font-weight: 700;
  }
  
  .lh-24 {
    line-height: 24px;
  }
  /* Define custom margin top classes */
.mt-3 {
  margin-top: 1rem; /* Adjust as needed */
}

.mt-2 {
  margin-top: 0.5rem; /* Adjust as needed */
}

/* Define custom padding top classes */
.pt-2 {
  padding-top: 0.5rem; /* Adjust as needed */
}

.pt-1 {
  padding-top: 0.25rem; /* Adjust as needed */
}

/* Define custom margin left classes */
.ml-3 {
  margin-left: 1rem; /* Adjust as needed */
}

.ml-2 {
  margin-left: 0.5rem; /* Adjust as needed */
}

/* Define custom padding left classes */
.pl-2 {
  padding-left: 0.5rem; /* Adjust as needed */
}

.pl-1 {
  padding-left: 0.25rem; /* Adjust as needed */
}

/* Define custom margin right classes */
.mr-3 {
  margin-right: 1rem; /* Adjust as needed */
}

.mr-2 {
  margin-right: 0.5rem; /* Adjust as needed */
}

/* Define custom padding right classes */
.pr-2 {
  padding-right: 0.5rem; /* Adjust as needed */
}
.w-60{
  width:60%;
}
.w-50{
  width:50%;
}
.w-90{
  width:90%;
}
.pr-1 {
  padding-right: 0.25rem; /* Adjust as needed */
}

/* Define custom margin x (left and right) classes */
.mx-3 {
  margin-left: 1rem; /* Adjust as needed */
  margin-right: 1rem; /* Adjust as needed */
}

.mx-2 {
  margin-left: 0.5rem; /* Adjust as needed */
  margin-right: 0.5rem; /* Adjust as needed */
}

/* Define custom padding x (left and right) classes */
.px-2 {
  padding-left: 0.5rem; /* Adjust as needed */
  padding-right: 0.5rem; /* Adjust as needed */
}

.px-1 {
  padding-left: 0.25rem; /* Adjust as needed */
  padding-right: 0.25rem; /* Adjust as needed */
}

/* Define custom margin y (top and bottom) classes */
.my-3 {
  margin-top: 1rem; /* Adjust as needed */
  margin-bottom: 1rem; /* Adjust as needed */
}

.my-2 {
  margin-top: 0.5rem; /* Adjust as needed */
  margin-bottom: 0.5rem; /* Adjust as needed */
}

/* Define custom padding y (top and bottom) classes */
.py-2 {
  padding-top: 0.5rem; /* Adjust as needed */
  padding-bottom: 0.5rem; /* Adjust as needed */
}

.py-1 {
  padding-top: 0.25rem; /* Adjust as needed */
  padding-bottom: 0.25rem; /* Adjust as needed */
}
/* Define custom margin bottom classes */
.mb-3 {
  margin-bottom: 1rem; /* Adjust as needed */
}

.mb-2 {
  margin-bottom: 0.5rem; /* Adjust as needed */
}

.mb-1 {
  margin-bottom: 0.25rem; /* Adjust as needed */
}

/* Define custom padding bottom classes */
.pb-3 {
  padding-bottom: 1rem; /* Adjust as needed */
}

.pb-2 {
  padding-bottom: 0.5rem; /* Adjust as needed */
}

.pb-1 {
  padding-bottom: 0.25rem; /* Adjust as needed */
}

  /* // Button Customization */
  .d-flex{
    display: flex;
  }
  .align-center{
    align-items: center;
  }
  .justify-between{
    justify-content: space-between;
  }
  /* Base button styling */
.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  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;
}

/* Primary button */
.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
.btn-primary:hover {
  color: #fff;
  background-color: #0056b3;
  border-color: #004085;
}

/* Secondary button */
.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
.btn-secondary:hover {
  color: #fff;
  background-color: #545b62;
  border-color: #4e555b;
}

/* Success button */
.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}
.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}

/* Danger button */
.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
.btn-danger:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
}

/* Warning button */
.btn-warning {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}
.btn-warning:hover {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
}

/* Info button */
.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}

/* Light button */
.btn-light {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
.btn-light:hover {
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}

/* Dark button */
.btn-dark {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}
.btn-dark:hover {
  color: #fff;
  background-color: #23272b;
  border-color: #1d2124;
}

/* Outline styles for buttons */
.btn-outline-primary {
  color: #007bff;
  border-color: #007bff;
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}
.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-success {
  color: #28a745;
  border-color: #28a745;
}
.btn-outline-success:hover {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}
.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}
.btn-outline-warning:hover {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-info {
  color: #17a2b8;
  border-color: #17a2b8;
}
.btn-outline-info:hover {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}
.btn-outline-light:hover {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-dark {
  color: #343a40;
  border-color: #343a40;
}
.btn-outline-dark:hover {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}
/* sidebar */
#admin-panel {
  display: flex;
}

.sidebar {
  width: 50px;
  background: linear-gradient(to right, #136a8a, #267871);
  color: #fff;
  height: 100vh;
  transition: width 0.3s;
  overflow: hidden;
  position: fixed;
  z-index: 1000;
}

.sidebar:hover {
  width: 250px;
}

.logo-details {
  display: flex;
  align-items: center;
  /* padding: 15px; */
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-links li {
  width: 100%;

}

.nav-links .icon-link {
  display: flex;
  align-items: center;
}

.nav-links .icon-link a {
  text-decoration: none;
  color: #fff;
  display: flex;
  align-items: center;
}

.nav-links .icon-link a .link_name {
  margin-left: 10px;
}

.nav-links .sub-menu {
  display: none;
  list-style: none;
  padding-left: 20px;
}

.nav-links .sub-menu .submenu-link {
  /* padding: 10px 20px; */
  text-decoration: none;
  color: #fff;
  display: block;
}

.sidebar:hover .sub-menu {
  display: block;
}

.content {
  margin-left: 60px;
  padding: 20px;
  width: calc(100% - 60px);
  transition: margin-left 0.3s, width 0.3s;
}

.sidebar:hover ~ .content {
  margin-left: 240px;
  width: calc(100% - 240px);
}
.sidebar .nav-links li i {
  height: 50px;
  min-width: 40px;
  text-align: center;
  line-height: 50px;
  color: #e6e4f5;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.sidebar .nav-links li.showMenu i.arrow {
  transform: rotate(-180deg);
}
.sidebar .logo-details .logo_name {
  font-size: 22px;
  color: #e6e4f5;
  font-weight: 600;
  transition: 0.3s ease;
  transition-delay: 0.1s;
  margin-left: 30px;
}
.sidebar .nav-links {
  height: 100%;
  padding: 30px 0 150px 0;
  overflow: auto;
}
.sidebar .nav-links::-webkit-scrollbar {
  display: none;
}
.sidebar .nav-links li {
  position: relative;
  list-style: none;
  transition: all 0.4s ease;
}
.sidebar .nav-links li:hover {
  background: linear-gradient(to right, #136a8a, #267871);
}
.sidebar .sub-menu li:hover {
  background: none;
  color: #e6e4f5;
}
.sidebar .nav-links li .icon-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar .logo-details {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
}
.sidebar .logo-details i {
  font-size: 30px;
  color: #e6e4f5;
  height: 50px;
  min-width: 42px;
  text-align: center;
  line-height: 50px;
}
.sidebar .logo-details .logo_name {
  font-size: 22px;
  color: #e6e4f5;
  font-weight: 600;
  transition: 0.3s ease;
  transition-delay: 0.1s;
  margin-left: 30px;
}
.sidebar .nav-links li a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.sidebar .nav-links li a .link_name {
  font-size: 17px;
  font-weight: 400;
  color: #e6e4f5;
  transition: all 0.4s ease;
}
.sidebar .nav-links li .icon-link a .dashboard {
  font-size: 17px;
  font-weight: 400;
  color: #e6e4f5;
  transition: all 0.4s ease;
  margin-left: 10px;
}
.sidebar .nav-links li .sub-menu {
  padding: 6px 6px 14px 50px;
  margin-top: 0px;
  background: linear-gradient(to right, #136a8a, #267871);
  display: none;
}
.sidebar .nav-links li .sub-menu #reportsSubMenu {
  padding: 6px 6px 14px 25px;
}
.sidebar .nav-links li.showMenu .sub-menu {
  display: block;
}
.sidebar .nav-links li .sub-menu a {
  color: #e6e4f5;
  font-size: 15px;
  padding: 15px 0;
  white-space: nowrap;
  opacity: 0.6;
  transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a:hover {
  opacity: 1;
}
.sidebar .nav-links li .sub-menu .link_name {
  display: none;
}
.sidebar .nav-links li .sub-menu.blank {
  opacity: 1;
  pointer-events: auto;
  padding: 3px 20px 6px 16px;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank {
  top: 50%;
  transform: translateY(-50%);
}
/* water can */
.water-cans {
  font-family: Arial, sans-serif;
}
.water-cans h3 {
  color: #4b739f;
  font-size: 20px !important;
}
table {
  width: 100%;
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid #ddd;
}
.table thead tr{
  background: linear-gradient(to right, #136a8a, #267871);
  color: #fff;
}
.table tbody tr td{
  font-weight: 400 !important;
}
th, td {
  padding: 8px;
  text-align: left;
}
tr:nth-child(even) {
  background-color: #e8e8e8;
}
/* modal */
.table-container {
  position: relative;
  overflow-x: auto;
  margin: 10px;
}
.add-button {
  position: absolute;
  top: 10px;
  right: 10px;
}
/* Modal styles */
/* Modal styles */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black with opacity */
  overflow-y: auto;

}
.modal-content {
  background-color: #fefefe;
  margin: 5% 25% auto; /* 10% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 70%; /* Could be more or less, depending on screen size */
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3); /* Shadow effect */
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
}
.modal-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}
.modal-title {
  font-size: 24px;
  margin: 0;
}
.modal-body {
  padding: 10px 0;
}
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}
.form-group label {
  font-weight: bold;
  line-height: 30px;
}
.form-control {
  width: 90%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.form-control:focus, .form-control:focus-visible {
  border-color: #4b739f;
  box-shadow: 0 0 5px #4b739f; /* Adjust the values as needed */
  outline: none; /* Optional: Removes the default outline */
}
.btn-primary {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  padding: 7px 20px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
}
.btn-primary:hover {
  background-color: var(--primary-color);
}
.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.5);
}
/* row */
/* Custom styles for row (similar to Bootstrap .row) */
.row {
  display: flex;
  flex-wrap: wrap;
  /* margin-right: -15px;  */
  /* Adjust for row margin */
  /* margin-left: -15px;  */
  /* Adjust for row margin */
}

/* Custom styles for columns (similar to Bootstrap .col-*) */
.col {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px; /* Adjust for column padding */
  padding-left: 15px; /* Adjust for column padding */
}

/* Example column sizes similar to Bootstrap */
.col-6 {
  flex: 0 0 50%; /* 50% width for col-6 */
  max-width: 50%;
}
.col-4 {
  flex: 0 0 33.333%; /* 33.333% width for col-4 */
  max-width: 33.333%;
}
.col-3{
  flex: 0 0 25%; /* 25% width for col-3 */
  max-width: 25%;
}

/* Media query for responsiveness (adjust as needed) */
@media (max-width: 768px) {
  .col {
    flex: 0 0 100%; /* Full width on smaller screens */
    max-width: 100%;
  }
}
.text-center{
  text-align: center;
}
.add{
  padding: 6px 20px !important;
}
.date-selector{
  padding-top: 1rem;
}
.sub-menu.active {
  display: block;
}

/* Example styles for hiding submenus by default */
.sub-menu {
  display: none;
}
.showMenu .sub-menu {
  display: block;
}
/* login page */
/* #login-page{
  width: 55%;
  margin-left: auto;
  margin-right: auto;
} */

.login-container {
  display: flex;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
  flex-wrap: wrap;
  /* margin-top: 8rem; */
}

.left-side {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

.login-img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
}

.right-side {
  flex: 1.5;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login{
  margin-top: 8rem;
}
.overflow-x-auto{
  overflow-x: auto;
}
.delivery {
  display: flex;
  justify-content: space-evenly;
  margin: 100px 0;
  flex-wrap: wrap;
  gap: 15px;
}

.delivery .btn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2em;
  padding: 50px;
  transition: background-color 0.3s ease;
}
.delivery .retrieve .btn {
  padding: 50px 42px !important;
}
.delivery .btn i {
  font-size: 1.5em;
}

.delivery .btn-primary:hover {
  background-color: #0056b3;
}
.flex-warp{
  flex-wrap: wrap;
}
@media (max-width: 767.98px) {
  .col-6 {
    flex: 0 0 100%; /* Full width on smaller screens */
    max-width: 100%;
  }
  .col-4 {
    flex: 0 0 100%; /* Full width on smaller screens */
    max-width: 100%;
  }
}
/* login */
.vid-container{
  position:relative;
  height:100vh;
  overflow:hidden;
}
.bgvid{
  position:absolute;
  left:0;
  top:0;
  width:100vw;
}
.inner-container{
  width:400px;
  height:400px;
  position:absolute;
  top:calc(50vh - 200px);
  left:calc(50vw - 200px);
  overflow:hidden;
}
.bgvid.inner{
  top:calc(-50vh + 200px);
  left:calc(-50vw + 200px);
  filter: url("data:image/svg+xml;utf9,<svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='10'%20/></filter></svg>#blur");
  -webkit-filter:blur(10px);
  -ms-filter: blur(10px);
  -o-filter: blur(10px);
  filter:blur(10px);
}
.box{
  position:absolute;
  height:100%;
  width:100%;
  font-family:Helvetica;
  color:#fff;
  background:rgba(0,0,0,0.13);
  padding:30px 0px;
}
.box h1{
  text-align:center;
  margin:30px 0;
  font-size:30px;
}
.box input{
  display:block;
  width:300px;
  margin:20px auto;
  padding:15px;
  background:rgba(0,0,0,0.2);
  color:#fff;
  border:0;
}
.box input:focus,.box input:active,.box button:focus,.box button:active{
  outline:none;
}
.box button{
  background: #29334d;
  border:0;
  color:#fff;
  padding:10px;
  font-size:20px;
  width:200px;
  margin:20px auto;
  display:block;
  cursor:pointer;
}
.box button:active{
  background: var(--primary-color);
}
.box p{
  font-size:14px;
  text-align:center;
}
.box p span{
  cursor:pointer;
  color:#666;
}
#login-form .form-group label{
  margin-left: 35px;
}
#login-form .form-group input::placeholder {
  color: #cfc7c7 !important;
}
@media (max-width: 1098.98px) {
  .bgvid{
    width:unset;
  }
}
/* dashboard */
.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.button-container .btn {
  font-size: 16px;
  padding: 12px 20px;
  margin: 10px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s;
}

.button-container .btn i {
  margin-right: 8px;
}

.button-container .count {
  font-size: 14px;
  margin-left: 5px;
}

@media (max-width: 768px) {
  .button-container .btn {
      font-size: 14px;
      padding: 10px 16px;
      margin: 8px;
  }
}


footer {
  background: linear-gradient(60deg, #29323c 0%, #485563 100%);
  text-align: right;
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
  color:white;
  
}

header {
  background: linear-gradient(60deg, #29323c 0%, #485563 100%);
  text-align: center;
  padding: 15px;
  position: fixed;
  top: 0;
  width: 100%;
  color:white;
  font-weight: bolder;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: large;
}
.pagedots {
  margin: 0 5px;
  color: #888;
  cursor: default;
}
.button-1 {
  background: linear-gradient(45deg, #3f2b96 0%, #a8c0ff 100%);
  border: none;
  border-radius: 25px;
  padding: 15px 30px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.button-1:hover {
  background: linear-gradient(45deg, #a8c0ff 0%, #3f2b96 100%);
}

.button-2 {
  background: linear-gradient(90deg, #5f72bd 0%, #9b23ea 100%);
  border: none;
  border-radius: 25px;
  padding: 15px 30px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.button-2:hover {
  background: linear-gradient(90deg, #9b23ea 0%, #5f72bd 100%);
}

.button-3 {
  background: linear-gradient(60deg, #29323c 0%, #485563 100%);
  border: none;
  border-radius: 25px;
  padding: 15px 30px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.button-3:hover {
  background: linear-gradient(60deg, #485563 0%, #29323c 100%);
}

.button-4 {
  background: linear-gradient(45deg, #2c3e50 0%, #3498db 100%);
  border: none;
  border-radius: 25px;
  padding: 15px 30px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.button-4:hover {
  background: linear-gradient(45deg, #3498db 0%, #2c3e50 100%);
}

.button-5 {
  background: linear-gradient(45deg, #1e3c72 0%, #2a5298 100%);
  border: none;
  border-radius: 25px;
  padding: 15px 30px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.button-5:hover {
  background: linear-gradient(45deg, #2a5298 0%, #1e3c72 100%);
}
.button-6 {
  background: linear-gradient(45deg, #ff6e7f 0%, #bfe9ff 100%);
  border: none;
  border-radius: 25px;
  padding: 15px 30px;
  color: rgb(0, 0, 0);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.button-6:hover {
  background: linear-gradient(45deg, #bfe9ff 0%, #ff6e7f 100%);
}

.button-7 {
  background: linear-gradient(90deg, #ff6034 0%, #ee0a24 100%);
  border: none;
  border-radius: 25px;
  padding: 15px 30px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.button-7:hover {
  background: linear-gradient(90deg, #ee0a24 0%, #ff6034 100%);
}

.button-9 {
  background: linear-gradient(45deg, #82ffa1 0%, #a4ebf3 100%);
  border: none;
  border-radius: 25px;
  padding: 15px 30px;
  color: black;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.button-9:hover {
  background: linear-gradient(45deg, #a4ebf3 0%, #82ffa1 100%);
}

.button-8 {
  background: linear-gradient(90deg, #4caf50 0%, #2c3e50 100%);
  border: none;
  border-radius: 25px;
  padding: 15px 30px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.button-8:hover {
  background: linear-gradient(90deg, #2c3e50 0%, #4caf50 100%);
}

#searchInput{
  width:40%;
  margin-bottom: 5px;
}
@media (max-width:658px) {
  #searchInput{
  width: 100%;
}
}

.select2-container--default .select2-selection--multiple {
  height: auto;
}

.suggestion-box {
  border: 1px solid #ccc;
  background-color: #fff;
  max-height: 150px;
  overflow-y: auto;
  display: none;
  position: absolute;
  z-index: 1000;
  margin-top: 60px;
  width: 50%; /* Adjust width based on the input field */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.suggestion-box div {
  padding: 8px;
  cursor: pointer;
}

.suggestion-box div:hover {
  background-color: #f0f0f0;
}
/* Spinner Loader Styles */
/* Spinner Loader Styles */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

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