/* for theme to load and it will make visible ahain using javascript */
/* body { 
  visibility: hidden;
 } */
#enquiryForm input:disabled {
  /*enquiry form disabled inputs*/
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: red; /* optional: normal text color instead of gray */
  font-weight: bold;
}
.nav-tabs {
  /* background-color: #e8f5e9;   light green shade */
  border-radius: 10px;
  padding: 5px;
  color: black !important;
}

.nav-tabs > li > a {
  color: black;
  background-color: #c8e6c9;
  border-radius: 5px 5px 0 0;
  margin-right: 2px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  background-color: #4caf50;
  color: white !important;
  border: none;
}

.nav-tabs > li > a:hover {
  background-color: #a5d6a7;
  color: black;
}

/* custom navbar css */
.page-sidebar,
.page-sidebar.collapsed,
.page-sidebar-inner,
.menu a,
#sidebarToggleBtn,
.menu .span {
  background-color: #2f3b52 !important;
  color: #ffffff !important;
}

/* Hover effect for menu list items */
.page-sidebar .menu li:hover,
.page-sidebar .menu li:hover > a,
.page-sidebar .menu li:hover > p,
.page-sidebar .menu li:hover {
  background-color: rgba(75, 75, 75, 0.155) !important;
  color: #ffffff !important;
}

.page-sidebar .menu li[data-active="true"]:hover,
.page-sidebar .menu li[data-active="true"]:hover > a,
.page-sidebar .menu li[data-active="true"]:hover > p {
  background-color: rgba(75, 75, 75, 0.155) !important;
  color: #ffffff !important;
}

.page-sidebar .menu li[data-active="true"] {
  border-left: 4px solid !important;
  filter: blur(0.5px) !important;
}

body .page-inner {
  margin-left: 55px !important;
}

/* Base sidebar styling */
.page-sidebar {
  /* position: relative !important; */
  position: fixed !important;
  top: 0% !important;
  bottom: 0% !important;
  left: 0% !important;
  width: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 10 !important;
  /* overflow-y: auto !important; */
  scrollbar-width: thin !important;
  scroll-behavior: smooth !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  border-right: 1px solid #56657b !important;
  border-bottom: 1px solid #56657b !important;
  transition: 0.1s ease-in-out !important;
  /* min-height: 200vh !important; */
}

.page-sidebar.collapsed {
  /* transition: 0.3s ease-in-out !important; */
  width: 63px !important;
  /* position: relative !important;top:0% !important; */
  position: fixed !important;
  top: 0% !important;
  bottom: 0% !important;
  left: 0% !important;
  /* overflow: visible !important; */
}

/* navbar scroller */
.page-sidebar-inner {
  overflow-y: auto !important;
}

body ::-webkit-scrollbar {
  width: 8px;
}

body ::-webkit-scrollbar-track {
  background: transparent;
}

body ::-webkit-scrollbar-thumb {
  background: whitesmoke;
}
body {
  scrollbar-width: thin !important;
}

/* Sidebar menu styling */
.menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  /* height:80vh !important; */
  overflow-y: auto !important;
}

.menu li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
  text-align: center !important;
  border-bottom: 0.3px solid rgba(255, 255, 255, 0.08) !important;
  background-color: transparent !important;
  transition: background-color 0.3s ease;
}

.menu a {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-decoration: none !important;
  width: 100% !important;
  text-align: center !important;
}

.menu .menu-icon {
  font-size: 35px !important;
  margin-left: 30px !important;
  text-align: left !important;
}

.menu .span {
  width: 30px !important;
  border: 0.5px solid transparent !important;
  text-align: left !important;
}

.menu li p {
  padding-left: 18px !important;
  display: inline-block !important;
  width: 100% !important;
  font-size: 14px !important;
  text-align: left !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.3s ease, width 0.3s ease, padding 0.3s ease;
}

/* Collapsed sidebar behavior */
.page-sidebar.collapsed .menu li p {
  opacity: 0 !important;
  margin-right: 15px !important;
  width: 0 !important;
  padding-left: 18px !important;
  overflow: hidden !important;
}

.page-sidebar.collapsed .menu li {
  justify-content: center !important;
}

/* Sidebar toggle button */
#sidebarToggleBtn {
  text-align: center !important;
  border-top: 1px solid !important;
  cursor: pointer !important;
  font-size: 28px !important;
  user-select: none !important;
}

#sidebarToggleBtn:hover {
  background-color: #3a475d !important;
  /* Slate hover */
}

#main-wrapper {
  margin-left: 40px !important;
}

.no-s {
  margin-left: 100px !important;
}
.page-sidebar-inner {
  overflow-y: hidden !important;
}
.page-sidebar-inner:hover {
  overflow-y: auto !important;
}
@media only screen and (max-width: 600px) {
  #main-wrapper {
    margin-left: 40px !important;
  }
}
.nav-tabs {
  /* background-color: #e8f5e9;   light green shade */
  border-radius: 10px;
  padding: 5px;
  color: black !important;
}

.nav-tabs > li > a {
  color: black;
  background-color: #c8e6c9;
  border-radius: 5px 5px 0 0;
  margin-right: 2px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  background-color: #4caf50;
  color: white !important;
  border: none;
}

.nav-tabs > li > a:hover {
  background-color: #a5d6a7;
  color: black;
}

/* ========================================================================================= */
/* ========================================================================================= */
/* ========================================================================================= */
/*  dark theme */
body.dark {
  --dark-background-color: #1e2533;
  --dark-box-color: #2a3242;
  --dark-box2-color: #232b3a;
  --dark-inputbox-color: #2b3548;
  --dark-hover-color: #384458;
  --dark-text-color: #c7d8ff;
  --dark-secondary-text-color: #9aadcc;
  --dark-placeholder-color: #8391a8;
  --dark-border-color: #687e9d;
  --dark-highlight-color: #7faaff;
  --dark-accent-color: #5da0ff;
  --dark-success-color: #3bd18c;
  --dark-warning-color: #ffc85c;
  --dark-error-color: #ff6b6b;
  --dark-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --dark-backup-text-color: #0f1926;
  /* added */
  --dark-panel-background-color: rgba(63, 81, 110, 0.644);
}

/* Body background and base text color */
body.dark {
  background-color: var(--dark-background-color) !important;
  color: var(--dark-text-color) !important;
}
body.dark::selection {
  background-color: var(--dark-text-color) !important;
  color: var(--dark-backup-text-color) !important;
}

/* General text and labels */
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark label,
body.dark p,
body.dark span,
body.dark small,
body.dark .panel-title,
body.dark .modal-title {
  color: var(--dark-text-color) !important;
}

/* Inputs, selects, textareas */
body.dark input,
body.dark select,
body.dark textarea,
body.dark .form-control,
body.dark .form-group input#start-time,
body.dark .form-group input#end-time,
body.dark .input-group-addon {
  background-color: var(--dark-inputbox-color) !important;
  color: var(--dark-text-color) !important;
  border: 0.5px solid var(--dark-border-color) !important;
}
body.dark input:required,
body.dark textarea:required,
body.dark select:required,
body.dark .form-control:required,
body.dark
  select[required].select2-hidden-accessible
  + .select2-container--default
  .select2-selection--single,
body.dark
  select[required].select2-hidden-accessible
  + .select2-container--default
  .select2-selection--multiple {
  border-right: 3px solid yellow !important; /* Yellow right border */
}
input:required,
textarea:required,
select:required,
.form-control:required,
select[required].select2-hidden-accessible
  + .select2-container--default
  .select2-selection--single,
select[required].select2-hidden-accessible
  + .select2-container--default
  .select2-selection--multiple {
  border-right: 3px solid red !important; /* Yellow right border */
}

/* for radio button only */
body.dark input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid !important;
  border-radius: 50%;
  position: relative;
  vertical-align: middle;
  margin-right: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.dark input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  top: 1.5px;
  right: 1.5px;
  width: 7px;
  height: 7px;
  background-color: var(--dark-secondary-text-color);
  border-radius: 50%;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
  color: var(--dark-placeholder-color) !important;
}

/* Select2 */
body.dark .select2-container--default .select2-selection--single {
  background-color: var(--dark-inputbox-color) !important;
  border: 0.5px solid var(--dark-border-color) !important;
  color: var(--dark-text-color) !important;
}

body.dark .select2-selection__rendered {
  color: var(--dark-text-color) !important;
}

body.dark .select2-dropdown {
  background-color: var(--dark-box-color) !important;
  color: var(--dark-text-color) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark .select2-results__option--highlighted {
  background-color: var(--dark-panel-background-color) !important;
  color: var(--dark-accent-color) !important;
}
body.dark
  .select2-container--default
  .select2-results__option[aria-selected="true"] {
  background-color: var(--dark-highlight-color) !important;
  color: var(--dark-backup-text-color) !important;
}

/* Buttons */
body.dark .btn,
body.dark button,
body.dark .btn-default,
body.dark .btn-primary,
body.dark .btn-success,
body.dark .btn-danger,
body.dark .btn-info,
body.dark .buttons-html5 {
  background-color: var(--dark-accent-color) !important;
  color: var(--dark-backup-text-color) !important;
  border: 0.5px solid var(--dark-border-color) !important;
  box-shadow: var(--dark-box-shadow) !important;
  transition: all 0.2s ease-in-out;
}

body.dark .btn:hover,
body.dark button:hover,
body.dark .btn:active,
body.dark button:active,
body.dark .btn:focus,
body.dark button:focus {
  background-color: var(--dark-hover-color) !important;
  color: var(--dark-text-color) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  outline: none !important; /* removes default focus outline */
}
body.dark .nav-tabs li a {
  color: var(
    --dark-highlight-color
  ) !important; /* highlight text for inactive tabs */
  background: transparent !important;
  border: none !important;
  transition: background 0.3s ease, color 0.3s ease;
}
body.dark .nav-tabs li a:hover {
  background-color: var(--dark-hover-color) !important;
  color: var(--dark-text-color) !important;
  border-radius: 6px; /* optional: rounded corners */
}

/* 🔹 Active (selected tab) */
body.dark .nav-tabs li.active a,
body.dark .nav-tabs li a.active {
  background-color: var(--dark-highlight-color) !important;
  color: var(
    --dark-backup-text-color
  ) !important; /* contrast text inside active tab */
  border-radius: 6px;
  font-weight: 600;
}
/* Tables */
body.dark .table,
body.dark table,
body.dark .dataTable,
body.dark .table-responsive {
  background-color: var(--dark-box-color) !important;
  color: var(--dark-text-color) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark thead,
body.dark th {
  background-color: var(--dark-box2-color) !important;
  color: var(--dark-text-color) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark td {
  color: var(--dark-text-color) !important;
  border-color: var(--dark-border-color) !important;
}
body.dark td:not(.fc-day):not(.t_slot):not([data-date]) {
  background-color: var(--dark-box-color) !important;
}

body.dark .table-striped tbody tr:nth-child(odd),
body.dark .dataTable.stripe tbody tr:nth-child(odd) {
  background-color: #3b4656 !important;
}

body.dark .table-striped tbody tr:nth-child(even),
body.dark .dataTable.stripe tbody tr:nth-child(even) {
  background-color: var(--dark-box-color) !important;
}

body.dark .table-hover tbody tr:hover,
body.dark .dataTable tbody tr:hover {
  background-color: var(--dark-highlight-color) !important;
  color: var(--dark-backup-text-color) !important;
}

/* Pagination, filter, and info */
body.dark .dataTables_wrapper .dataTables_filter input,
body.dark .dataTables_wrapper .dataTables_length select {
  background-color: var(--dark-inputbox-color) !important;
  color: var(--dark-text-color) !important;
  border: 0.5px solid var(--dark-border-color) !important;
}

body.dark .dataTables_wrapper .dataTables_info,
body.dark .dataTables_wrapper label {
  color: var(--dark-text-color) !important;
}

body.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: var(--dark-box2-color) !important;
  color: var(--dark-text-color) !important;
  border: 0.5px solid var(--dark-border-color) !important;
}

body.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--dark-highlight-color) !important;
  color: var(--dark-backup-text-color) !important;
}

/* Chart.js canvas */
body.dark .chart-container,
body.dark canvas {
  background-color: var(--dark-box-color) !important;
}

/* SweetAlert2 */
body.dark .swal2-popup {
  background-color: var(--dark-box-color) !important;
  color: var(--dark-text-color) !important;
  border: 0.5px solid var(--dark-border-color) !important;
}

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

body.dark .swal2-confirm {
  background-color: var(--dark-success-color) !important;
  color: var(--dark-box2-color) !important;
  border: 0.5px solid var(--dark-border-color) !important;
}
body.dark .swal2-cancel {
  background-color: var(--dark-error-color) !important;
  color: var(--dark-text-color) !important;
  border: 0.5px solid var(--dark-border-color) !important;
}

/* Layout panels */
body.dark .page-inner,
body.dark .page-content,
body.dark .page-footer,
body.dark .panel-heading1 {
  background-color: var(--dark-background-color) !important;
  color: var(--dark-text-color) !important;
}

body.dark .panel,
body.dark .modal-content,
body.dark .modal-header,
body.dark .settings-panel,
body.dark .panel-body:not(.ignore-panel),
body.dark .tab-content,
body.dark .card {
  background-color: var(--dark-box-color) !important;
  color: var(--dark-text-color) !important;
  /* border: 0.5px solid var(--dark-border-color) !important; */
}

/* body.dark .dashboardPanels {
  background-color: var(--dark-panel-background-color) !important;
} */
/* body.dark .dashboardCharts{
  background-color: var(--dark-panel-charts-color) !important;
  color: var(--dark-inputbox-color) !important;
} */

body.dark .panel-heading,
body.dark .modal-header {
  background-color: var(--dark-box2-color) !important;
  color: var(--dark-text-color) !important;
}

/* Dropdown */
body.dark .dropdown-menu,
body.dark .dropdown-list {
  background-color: var(--dark-box2-color) !important;
  color: var(--dark-text-color) !important;
  border: 0.5px solid var(--dark-border-color) !important;
}

body.dark .dropdown-item {
  color: var(--dark-text-color) !important;
}

body.dark .dropdown-item:hover {
  background-color: var(--dark-highlight-color) !important;
  color: var(--dark-backup-text-color) !important;
}

/* Icons */
body.dark i,
body.dark .fa,
body.dark .glyphicon,
body.dark .material-icons,
body.dark .icon,
body.dark .bi,
body.dark .feather,
body.dark .iconify,
body.dark .svg-inline--fa {
  color: var(--dark-text-color) !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
  transition: color 0.2s ease, filter 0.2s ease;
}

body.dark .icon:hover,
body.dark i:hover,
body.dark .btn i:hover,
body.dark a i:hover {
  color: var(--dark-accent-color) !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

/* Scrollbars */
body.dark ::-webkit-scrollbar {
  width: 8px;
}

body.dark ::-webkit-scrollbar-track {
  background: var(--dark-box2-color);
}

body.dark ::-webkit-scrollbar-thumb {
  background: var(--dark-hover-color);
}
body {
  scrollbar-width: thin !important;
}

/* to Avoid adding styles for top navbar */
body.dark .navbar-inner * {
  color: var(--dark-inputbox-color) !important;
  background: none !important;
  border: none !important;
  filter: none !important;
}
body.dark .navbar-inner .dropdown .dropdown-list li *:not(i) {
  color: var(--dark-inputbox-color) !important;
  background: rgba(245, 245, 245, 0.81) !important;
  border: none !important;
  filter: none !important;
}
body.dark .navbar-inner .dropdown .dropdown-list li :hover {
  background: rgba(137, 137, 137, 0.212) !important;
  color: rgba(248, 248, 255, 0.847) !important;
}

/* Dark Navbar */
body.dark .page-sidebar,
body.dark .page-sidebar.collapsed,
body.dark .page-sidebar-inner,
body.dark .menu a,
body.dark #sidebarToggleBtn,
body.dark .menu .span {
  background-color: var(--dark-box-color) !important;
  color: var(--dark-text-color) !important;
}
body.dark #sidebarToggleBtn {
  /* border-top:1px solid !important; */
  transition: 0.1s !important;
}
body.dark #sidebarToggleBtn:hover {
  background-color: var(--dark-secondary-text-color) !important;
  color: var(--dark-backup-text-color) !important;
}

/* For Calendar Highlighted Dates */
body.dark .fc-daygrid-day.fc-state-highlight,
body.dark .fc-day.fc-state-highlight,
body.dark td[data-date].fc-state-highlight {
  background-color: var(--dark-placeholder-color) !important;
  color: var(--dark-inputbox-color) !important;
}

body.dark .dataTables_wrapper {
  overflow: auto !important;
}
body.dark .swal2-loader {
  border: 4px solid var(--dark-border-color); /* background ring */
  border-top: 4px solid var(--dark-placeholder-color); /* your dark accent */
}

/* =====================================================================================================
====================================================================================================
========================================================================================= */

/* Green theme  */
/* --------------------------------------------
   🌱 GREEN THEME VARIABLES (body.green)
-------------------------------------------- */
body.green {
  --green-background-color: #10241a;
  /* Deep forest green */
  --green-box-color: #1a2f23;
  /* Darker card/panel bg */
  --green-box2-color: #1e3728;
  /* Slightly elevated nested bg */
  --green-inputbox-color: #1c2e24;
  /* Input field background */
  --green-hover-color: #295c41;
  /* Hover effect highlight */
  --green-text-color: #c9f5dd;
  /* Primary text (bright mint) */
  --green-secondary-text-color: #8cbfa2;
  /* Subtext */
  --green-placeholder-color: #6e9c85;
  /* Placeholder */
  --green-border-color: #3c5446;
  /* Border shades */
  --green-highlight-color: #39bf84;
  /* Selection & active row */
  --green-accent-color: #32a26e;
  /* Buttons, links, accents */
  --green-success-color: #2bd47d;
  /* Success indicators */
  --green-warning-color: #e5b567;
  /* Warning tone */
  --green-error-color: #e96d6d;
  /* Error tone */
  --green-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  --green-backup-text-color: #0b1c14;
  --green-panel-background-color: #335243;
}

/* Base background and text */
body.green {
  background-color: var(--green-background-color) !important;
  color: var(--green-text-color) !important;
}
body.green::selection {
  background-color: var(--green-text-color) !important;
  color: var(--green-backup-text-color) !important;
}

/* General text and labels */
body.green h1,
body.green h2,
body.green h3,
body.green h4,
body.green h5,
body.green h6,
body.green label,
body.green p,
body.green span,
body.green small,
body.green .panel-title,
body.green .modal-title {
  color: var(--green-text-color) !important;
}

/* Inputs, selects, textareas */
body.green input,
body.green select,
body.green textarea,
body.green .form-control,
body.green .form-group input#start-time,
body.green .form-group input#end-time,
body.green .input-group-addon {
  background-color: var(--green-inputbox-color) !important;
  color: var(--green-text-color) !important;
  border: 0.5px solid var(--green-border-color) !important;
}
body.green input:required,
body.green select:required,
body.green textarea:required,
body.green .form-control:required,
body.green
  select[required].select2-hidden-accessible
  + .select2-container--default
  .select2-selection--single,
body.green
  select[required].select2-hidden-accessible
  + .select2-container--default
  .select2-selection--multiple {
  border-right: 3px solid yellow !important; /* Yellow right border */
}
/* for radio button only */
body.green input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid !important;
  border-radius: 50%;
  position: relative;
  vertical-align: middle;
  margin-right: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.green input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  top: 1.5px;
  right: 1.5px;
  width: 7px;
  height: 7px;
  background-color: var(--green-secondary-text-color);
  border-radius: 50%;
}

body.green input::placeholder,
body.green textarea::placeholder {
  color: var(--green-placeholder-color) !important;
}

/* Select2 */
body.green .select2-container--default .select2-selection--single {
  background-color: var(--green-inputbox-color) !important;
  border: 0.5px solid var(--green-border-color) !important;
  color: var(--green-text-color) !important;
}

body.green .select2-selection__rendered {
  color: var(--green-text-color) !important;
}

body.green .select2-dropdown {
  background-color: var(--green-box-color) !important;
  color: var(--green-text-color) !important;
  border-color: var(--green-border-color) !important;
}

body.green .select2-results__option--highlighted {
  background-color: var(--green-panel-background-color) !important;
  color: var(--green-accent-color) !important;
}
body.green
  .select2-container--default
  .select2-results__option[aria-selected="true"] {
  background-color: var(--green-highlight-color) !important;
  color: var(--green-backup-text-color) !important;
}

/* Buttons */
/* Green Theme Buttons */
body.green .btn,
body.green button,
body.green .btn-default,
body.green .btn-primary,
body.green .btn-success,
body.green .btn-danger,
body.green .btn-info,
body.green .buttons-html5 {
  background-color: var(--green-accent-color) !important;
  color: var(--green-backup-text-color) !important;
  border: 0.5px solid var(--green-border-color) !important;
  box-shadow: var(--green-box-shadow) !important;
  transition: all 0.2s ease-in-out;
}

body.green .btn:hover,
body.green button:hover,
body.green .btn:active,
body.green button:active,
body.green .btn:focus,
body.green button:focus {
  background-color: var(--green-hover-color) !important;
  color: var(--green-text-color) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  outline: none !important; /* removes default focus outline */
}
body.green .nav-tabs li a {
  color: var(
    --green-highlight-color
  ) !important; /* highlight text for inactive tabs */
  background: transparent !important;
  border: none !important;
  transition: background 0.3s ease, color 0.3s ease;
}
body.green .nav-tabs li a:hover {
  background-color: var(--green-hover-color) !important;
  color: var(--green-text-color) !important;
  border-radius: 6px; /* optional: rounded corners */
}

/* 🔹 Active (selected tab) */
body.green .nav-tabs li.active a,
body.green .nav-tabs li a.active {
  background-color: var(--green-highlight-color) !important;
  color: var(
    --green-backup-text-color
  ) !important; /* contrast text inside active tab */
  border-radius: 6px;
  font-weight: 600;
}

/* Tables */
body.green .table,
body.green table,
body.green .dataTable,
body.green .table-responsive {
  background-color: var(--green-box-color) !important;
  color: var(--green-text-color) !important;
  border-color: var(--green-border-color) !important;
}

body.green thead,
body.green th {
  background-color: var(--green-box2-color) !important;
  color: var(--green-text-color) !important;
  border-color: var(--green-border-color) !important;
}

body.green td {
  color: var(--green-text-color) !important;
  border-color: var(--green-border-color) !important;
}
body.green td:not(.fc-day):not(.t_slot):not([data-date]) {
  background-color: var(--green-box-color) !important;
}

body.green .table-striped tbody tr:nth-child(odd),
body.green .dataTable.stripe tbody tr:nth-child(odd) {
  background-color: #cde8d9 !important;
}

body.green .table-striped tbody tr:nth-child(even),
body.green .dataTable.stripe tbody tr:nth-child(even) {
  background-color: var(--green-box-color) !important;
}

body.green .table-hover tbody tr:hover,
body.green .dataTable tbody tr:hover {
  background-color: var(--green-highlight-color) !important;
  color: var(--green-backup-text-color) !important;
}

/* Pagination, filter, and info */
body.green .dataTables_wrapper .dataTables_filter input,
body.green .dataTables_wrapper .dataTables_length select {
  background-color: var(--green-inputbox-color) !important;
  color: var(--green-text-color) !important;
  border: 0.5px solid var(--green-border-color) !important;
}

body.green .dataTables_wrapper .dataTables_info,
body.green .dataTables_wrapper label {
  color: var(--green-text-color) !important;
}

body.green .dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: var(--green-box2-color) !important;
  color: var(--green-text-color) !important;
  border: 0.5px solid var(--green-border-color) !important;
}

body.green .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.green .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--green-highlight-color) !important;
  color: var(--green-backup-text-color) !important;
}

/* Chart.js canvas */
body.green .chart-container,
body.green canvas {
  background-color: var(--green-box-color) !important;
}

/* SweetAlert2 */
body.green .swal2-popup {
  background-color: var(--green-box-color) !important;
  color: var(--green-text-color) !important;
  border: 0.5px solid var(--green-border-color) !important;
}

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

body.green .swal2-confirm {
  background-color: var(--green-success-color) !important;
  color: var(--green-box2-color) !important;
  border: 0.5px solid var(--green-border-color) !important;
}
body.green .swal2-cancel {
  background-color: var(--green-error-color) !important;
  color: var(--green-text-color) !important;
  border: 0.5px solid var(--green-border-color) !important;
}

/* Layout panels */
body.green .page-inner,
body.green .page-content,
body.green .page-footer,
body.green .panel-heading1 {
  background-color: var(--green-background-color) !important;
  color: var(--green-text-color) !important;
}

body.green .panel,
body.green .modal-content,
body.green .modal-header,
body.green .settings-panel,
body.green .panel-body:not(.ignore-panel),
body.green .tab-content,
body.green .card {
  background-color: var(--green-box-color) !important;
  color: var(--green-text-color) !important;
  /* border: 0.5px solid var(--green-border-color) !important; */
}
body.green .dashboardPanels {
  background-color: var(--green-panel-background-color) !important;
}

body.green .panel-heading,
body.green .modal-header {
  background-color: var(--green-box2-color) !important;
  color: var(--green-text-color) !important;
}

/* Dropdown */
body.green .dropdown-menu {
  background-color: var(--green-box2-color) !important;
  color: var(--green-text-color) !important;
  border: 0.5px solid var(--green-border-color) !important;
}

body.green .dropdown-item {
  color: var(--green-text-color) !important;
}

body.green .dropdown-item:hover {
  background-color: var(--green-highlight-color) !important;
  color: var(--green-backup-text-color) !important;
}

/* Icons */
body.green i,
body.green .fa,
body.green .glyphicon,
body.green .material-icons,
body.green .icon,
body.green .bi,
body.green .feather,
body.green .iconify,
body.green .svg-inline--fa {
  color: var(--green-text-color) !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
  transition: color 0.2s ease, filter 0.2s ease;
}

body.green .icon:hover,
body.green i:hover,
body.green .btn i:hover,
body.green a i:hover {
  color: var(--green-accent-color) !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

/* Scrollbars */
body.green ::-webkit-scrollbar {
  width: 8px;
}

body.green ::-webkit-scrollbar-track {
  background: var(--green-box2-color);
}

body.green ::-webkit-scrollbar-thumb {
  background: var(--green-hover-color);
}

/* to Avoid adding styles for top navbar */
body.green .navbar-inner * {
  color: var(--green-inputbox-color) !important;
  background: none !important;
  border: none !important;
  filter: none !important;
}
body.green .navbar-inner .dropdown .dropdown-list li *:not(i) {
  color: var(--green-inputbox-color) !important;
  background: rgba(245, 245, 245, 0.81) !important;
  border: none !important;
  filter: none !important;
}
body.green .navbar-inner .dropdown .dropdown-list li :hover {
  background: rgba(137, 137, 137, 0.212) !important;
  color: rgba(248, 248, 255, 0.847) !important;
}

/* Green Navbar */
body.green .page-sidebar,
body.green .page-sidebar.collapsed,
body.green .page-sidebar-inner,
body.green .menu a,
body.green #sidebarToggleBtn,
body.green .menu .span {
  background-color: var(--green-box-color) !important;
  color: var(--green-text-color) !important;
}
body.green #sidebarToggleBtn {
  /* border-top:1px solid !important; */
  transition: 0.1s !important;
}
body.green #sidebarToggleBtn:hover {
  background-color: var(--green-secondary-text-color) !important;
  color: var(--green-backup-text-color) !important;
}

/*  For Calendar Highlighted Dates */
body.green .fc-daygrid-day.fc-state-highlight,
/* body.green .fc-day.fc-state-highlight, */
body.green td[data-date].fc-state-highlight {
  background-color: var(--green-placeholder-color) !important;
  color: var(--green-inputbox-color) !important;
}
/* body.green .fc-day.fc-state-highlight, */
/* body.green td[data-date].highlighted-day,
body.green td[data-date].fc-day.highlighted-day {
  background-color: var(--green-highlight-color) !important;
  color: var(--green-inputbox-color) !important;
} */

body.green .dataTables_wrapper {
  overflow: auto !important;
}
body.green .swal2-loader {
  border: 4px solid var(--green-border-color); /* background ring */
  border-top: 4px solid var(--green-placeholder-color); /* your dark accent */
}

/* =============================Sidebar=============================================================== */