.main-container-inner {
  color: #242105;
}

#main-container .main-box > div {
  background-color: #fff;
}

.w3-theme-l5 {
  color: #242105 ;
  background-color: #fefef8 ;
}

.w3-theme-l4 {
  color: #242105 ;
  background-color: #fcfae8 ;
}

.w3-theme-l3 {
  color: #242105 ;
  background-color: #f9f5d2 ;
}

.w3-theme-l2 {
  color: #242105 ;
  background-color: #f6f0bb ;
}

.w3-theme-l1 {
  color: #242105 ;
  background-color: #f3eba5 ;
}

.w3-theme-d1 {
  color: #242105 ;
  background-color: #ecdf6c ;
}

.w3-theme-d2 {
  color: #242105 ;
  background-color: #e8d84a ;
}

.w3-theme-d3 {
  color: #242105 ;
  background-color: #e3d029 ;
}

.w3-theme-d4 {
  color: #242105 ;
  background-color: #cbb91a ;
}

.w3-theme-d5 {
  color: #fcfae6 ;
  background-color: #a99b16 ;
}

.w3-theme-light {
  color: #242105 ;
  background-color: #fefef8 ;
}

.w3-theme-dark {
  color: #fcfae6 ;
  background-color: #a99b16 ;
}

.w3-theme-action {
  color: #fcfae6 ;
  background-color: #a99b16 ;
}

.w3-theme,
.close-nav,
.mobile-nav {
  color: #242105 ;
  background-color: #f0e68c ;
}

.w3-text-theme {
  color: #f0e68c ;
}

.w3-border-theme {
  border-color: #f0e68c ;
}

.w3-hover-theme:hover {
  color: #242105 ;
  background-color: #f0e68c ;
}

.w3-hover-text-theme:hover {
  color: #f0e68c ;
}

.w3-hover-border-theme:hover {
  border-color: #f0e68c ;
}

/* custom work */
.w3-active-pager {
  background-color: #fefef8 ;
}

.w3-hover-over:hover,
.w3-button:hover {
  background-color: #fcfae8 ;
  color: #a99b16 ;
}

.image64x64 {
  width: 64px !important;
  height: 48px !important;
}

/* Dark Mode Styles */
body.dark-mode .main-container-inner {
  color: #fcfae6; /* Light text for dark mode */
}

body.dark-mode #main-container .main-box > div {
  background-color: #2c2c2c; /* Darker background for containers */
}

body.dark-mode .view-content {
  color: #242105; /* Adjusting text color for readability in dark mode */
}

body.dark-mode .w3-table-all {
  color: #242105; /* Adjusting text color for readability in dark mode */
}

body.dark-mode .form-control {
  background-color: #333 !important;
  color: #fcfae6 !important;
  border-color: #555;
}
body.dark-mode input[type="number"] {
  background-color: #444;
  color: #fcfae6;
}

body.dark-mode .bg-light {
  background-color: #333 !important;
  color: #fcfae6 !important;
}

body.dark-mode label {
  color: #fcfae6;
}

body, .item-header, .form-control, .bg-light {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode .item-header {
  background-color: #2c2c2c !important;
  color: #fcfae6 !important;
}

body.dark-mode .bg-light {
  background-color: #2c2c2c !important;
  color: #fcfae6 !important;
}

body.dark-mode .row,
body.dark-mode .col-md-3,
body.dark-mode .col-md-2,
body.dark-mode .col-md-4 {
  background-color: #2c2c2c !important;
  color: #fcfae6 !important;
}

body.dark-mode .form-control {
  background-color: #333 !important;
  color: #fcfae6 !important;
  border-color: #555;
}

body.dark-mode .form-control:disabled {
  background-color: #2c2c2c !important;
  color: #fcfae6 !important;
}

body.dark-mode div {
  color: #fcfae6;
}


/* Select2 container */
body.dark-mode .select2-container--default .select2-selection--single {
  background-color: #333 !important;
  color: #fcfae6 !important;
  border: 1px solid #555 !important;
}

/* Placeholder text */
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #aaa !important;
}

/* Selected text */
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #fcfae6 !important;
}

/* Dropdown menu */
body.dark-mode .select2-container--default .select2-results > .select2-results__options {
  background-color: #2c2c2c !important;
  color: #fcfae6 !important;
}

/* Dropdown item hover */
body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #444 !important;
  color: #b5a642 !important;
}

/* Selected option in dropdown */
body.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #444 !important;
  color: #fcfae6 !important;
}

body.dark-mode .table,
body.dark-mode .table th,
body.dark-mode .table td {
    color: #fcfae6; /* or another light color for readability */
    background-color: #2c2c2c; /* optional: match the dark mode background */
}

/* Adjusting the .w3-theme-* classes for dark mode */
body.dark-mode .w3-theme-l5,
body.dark-mode .w3-theme-l4,
body.dark-mode .w3-theme-l3,
body.dark-mode .w3-theme-l2,
body.dark-mode .w3-theme-l1 {
  color: #fcfae6; /* Light text color */
  background-color: #333; /* Darker shades for backgrounds */
}

body.dark-mode .w3-theme-d1,
body.dark-mode .w3-theme-d2,
body.dark-mode .w3-theme-d3,
body.dark-mode .w3-theme-d4,
body.dark-mode .w3-theme-d5 {
  color: #fcfae6; /* Keeping text light for visibility */
  background-color: #555; /* Slightly lighter dark shades for differentiation */
}

body.dark-mode .w3-theme-light,
body.dark-mode .w3-theme,
body.dark-mode .close-nav,
body.dark-mode .mobile-nav {
  color: #fcfae6;
  background-color: #444; /* Mid-dark background for lighter dark themes */
}

/* Contrast adjustments for dark mode */
body.dark-mode .w3-theme-dark,
body.dark-mode .w3-theme-action {
  color: #fcfae6;
  background-color: #333; /* Even darker for these specific classes */
}

/* Text and border color adjustments in dark mode */
body.dark-mode .w3-text-theme {
  color: #b5a642; /* Golden text for contrast */
}

body.dark-mode .w3-border-theme {
  border-color: #b5a642; /* Golden borders */
}

/* Hover effects in dark mode */
body.dark-mode .w3-hover-theme:hover {
  color: #fcfae6;
  background-color: #575757; /* Dark hover background */
}

body.dark-mode .w3-hover-text-theme:hover {
  color: #b5a642; /* Golden hover text */
}

body.dark-mode .w3-hover-border-theme:hover {
  border-color: #b5a642; /* Golden hover borders */
}

/* Custom work adjustments */
body.dark-mode .w3-active-pager {
  background-color: #414141; /* Dark mode active pager background */
}

body.dark-mode .w3-hover-over:hover,
body.dark-mode .w3-button:hover {
  background-color: #505050; /* Darker elements on hover */
  color: #fcfae6; /* Light text on hover */
}

/* Buttons in dark mode */
body.dark-mode .btn,
body.dark-mode .w3-button {
  background-color: #333; /* Dark button background */
  color: #fcfae6; /* Light text for buttons */
  border: 1px solid #444; /* Darker border */
}

body.dark-mode .btn:hover,
body.dark-mode .w3-button:hover {
  background-color: #444; /* Slightly darker on hover */
  color: #b5a642; /* Golden text on hover */
}

/* Table text and background adjustments */
body.dark-mode .w3-table {
  background-color: #2c2c2c; /* Dark background for table */
  color: #fcfae6; /* Light text for dark mode tables */
  border-color: #444; /* Darker border color */
}

body.dark-mode .w3-table th,
body.dark-mode .w3-table td {
  color: #fcfae6; /* Ensuring all table text is light */
}

body.dark-mode .w3-table-all {
  background-color: #2c2c2c;
  color: #fcfae6;
  border: 1px solid #444;
}

/* Primary buttons in dark mode */
body.dark-mode .btn-primary {
  background-color: #444; /* Darker background */
  color: #fcfae6; /* Light text */
  border-color: #555; /* Darker border */
}

body.dark-mode .btn-primary:hover {
  background-color: #555; /* Slightly lighter on hover */
  color: #b5a642; /* Golden text on hover */
}

/* Links in dark mode */
body.dark-mode a {
  color: #b5a642; /* Golden link color */
}

body.dark-mode a:hover {
  color: #fcfae6; /* Lighter color on hover */
}

body.dark-mode .main-container-inner {
  color: #fcfae6; /* Lighter text for dark mode */
  background-color: #2c2c2c; /* Darker background for containers */
}

/* Striped tables in dark mode */
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: #3a3a3a; /* Darker background for odd rows */
}

body.dark-mode .table-striped tbody tr:nth-of-type(even) {
  background-color: #2c2c2c; /* Slightly lighter background for even rows */
}

body.dark-mode .table-striped tbody tr:hover {
  background-color: #505050; /* Highlight color for row on hover */
}

/* W3.CSS striped table adjustments for dark mode */
body.dark-mode .w3-table-all tr:nth-child(odd) {
  background-color: #3a3a3a; /* Darker background for odd rows */
}

body.dark-mode .w3-table-all tr:nth-child(even) {
  background-color: #2c2c2c; /* Lighter background for even rows */
}

body.dark-mode .w3-table-all tr:hover {
  background-color: #505050; /* Highlighted row on hover */
}
/* Dark mode for the modal */
body.dark-mode .modal-content {
  background-color: #333; /* Dark background for modal */
  color: #fcfae6; /* Light text color */
}

body.dark-mode .modal-header, 
body.dark-mode .modal-footer {
  background-color: #444; /* Slightly darker background for header/footer */
  border-color: #555; /* Darker borders */
}

body.dark-mode .modal-title {
  color: #fcfae6; /* Light title color */
}

body.dark-mode .modal-body {
  background-color: #333; /* Same dark background for modal body */
  color: #fcfae6; /* Light text in body */
}

/* Dark mode for form inputs inside modal */
body.dark-mode .modal-body input[type="number"] {
  background-color: #444; /* Dark background for input */
  color: #fcfae6; /* Light text */
  border: 1px solid #555; /* Darker border */
}

body.dark-mode .modal-body input[type="number"]::placeholder {
  color: #aaa; /* Light placeholder text */
}

body.dark-mode .btn-primary {
  background-color: #444; /* Darker background for primary button */
  color: #fcfae6; /* Light text */
  border: 1px solid #555; /* Darker border */
}

body.dark-mode .btn-primary:hover {
  background-color: #555; /* Slightly lighter on hover */
  color: #b5a642; /* Golden text on hover */
}

body.dark-mode .btn-secondary {
  background-color: #555; /* Secondary button background */
  color: #fcfae6;
  border: 1px solid #666; /* Darker border */
}

body.dark-mode .btn-secondary:hover {
  background-color: #666; /* Slightly lighter on hover */
}

body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: #333 !important;
    color: #fcfae6 !important;
    border: 1px solid #555;
}
body.dark-mode input[readonly],
body.dark-mode textarea[readonly],
body.dark-mode input:disabled,
body.dark-mode select:disabled {
    background-color: #2c2c2c !important;
    color: #aaa !important;
    border: 1px solid #444;
}

body.dark-mode .btn,
body.dark-mode button {
    background-color: #444;
    color: #fcfae6;
    border: 1px solid #555;
}

body.dark-mode .btn:hover,
body.dark-mode button:hover {
    background-color: #555;
    color: #b5a642;
}
body.dark-mode .form-control-plaintext,
body.dark-mode .form-control[readonly] {
    background-color: #2c2c2c;
    color: #ccc;
}
body.dark-mode .form-control {
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05);
}

body.dark-mode .form-control-plaintext {
    color: #ccc;
    background-color: transparent;
}


/* button animation  */
@keyframes btnBorderAnimation {
  0% {
    width: 0;
    height: 0;
    border-bottom-color: #f0e68c;
  }

  99.9999% {
    width: 100%;
    height: 100%;
    border-bottom-color: #f0e68c;
  }

  100% {
    width: 0;
    height: 0;
    border-bottom-color: transparent;
  }

}

/* Border animation  */
@keyframes borderLeftColors {
  0% {
    width: 0;
    height: 0;
    border-top-color: #f0e68c;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  50% {
    width: 100%;
    height: 0;
    border-top-color: #f0e68c;
    border-right-color: #f0e68c;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  99.9999% {
    width: 100%;
    height: 100%;
    border-top-color: #f0e68c;
    border-right-color: #f0e68c;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  100% {
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

}

@keyframes borderRightColors {
  0% {
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #f0e68c;
    border-left-color: transparent;
  }

  50% {
    width: 100%;
    height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #f0e68c;
    border-left-color: #f0e68c;
  }

  99.9999% {
    width: 100%;
    height: 100%;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #f0e68c;
    border-left-color: #f0e68c;
  }

  100% {
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

}