@media (prefers-color-scheme: dark) {
  :root {
    --color-black-dark: #1c1c1e;
    --color-white: #ffffff;
    --color-white-lighter: #fefefe;
    --color-black-light: #343a40;
    --color-grey: #6c757d;
    --color-theme: #edb059;
    --color-theme2: #ff9900;
    --color-theme3: #ce7a20;
    --color-antiquewhite: antiquewhite;
    --color-link-hover: #5fa9ee;
  }

  /* En fonction de préférence utilisateur dans navigateur ou système */
  #header,
  #sub_header #menu,
  #navbar,
  #content,
  #content .content,
  body,
  #footer,
  html {
    background-color: var(--color-black-dark) !important;
    color: var(--color-white-lighter) !important;
  }

  #content .content h1,
  #content .content label {
    color: var(--color-white-lighter) !important;
  }

  a.linkjobfile,
  a.linkconsolidation,
  a.linkcommande,
  a.linktranshipment,
  a.linkcontainer,
  a.linkURL,
  a.linkPDF,
  a.linkInvoice,
  a.linkFile {
    color: #5fa9ee !important;
  }

  .panel {
    border-color: var(--color-black-light) !important;
  }

  .panel-heading {
    background-color: var(--color-black-light) !important;
    border-color: var(--color-black-light) !important;
  }

  .panel-body {
    background-color: var(--color-black-dark);
  }

  #menu a {
    color: #ffffff !important;
  }
  a.page-link {
    color: #ffffff !important;
  }
  #header img {
    filter: grayscale(20%);
  }
  li a {
    color: white !important;
  }

  .nav-side-menu ul .active,
  .nav-side-menu li .active {
    color: black !important;
    background-color: var(--color-black-light) !important;
  }
  a#closebtn {
    color: white !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h5.step-text,
  h2 b,
  h2.body-title {
    color: var(--color-white) !important;
  }

  /* Bootstrap elements */
  div.dropdown-menu {
    background-color: var(--color-black-light);
    border-color: var(--color-grey);
  }

  /* Dark mode color scheme for DataTables */
  .dataTables_wrapper,
  .dataTable {
    background-color: var(--color-black-dark);
    color: var(--color-white);
  }

  /* Table header */
  .dataTables_wrapper thead,
  .dataTable thead {
    background-color: var(--color-black-light);
  }

  /* Table header cells */
  .dataTables_wrapper th,
  .dataTable th {
    background-color: var(--color-black-light);
    border-color: var(--color-grey);
  }

  /* Table cells */
  .dataTables_wrapper td,
  .dataTable td {
    /* FGE 2025-01-19 passage en transparent pour permettre d'avoir des lignes de couleur différente, par exemple type intervenant 
       CCT 2025-01-22 remise en commentaire car cela affiche les case du tableau sous firefox en blanche
    background-color: transparent !important;  */

    background-color: var(--color-black-dark) !important;
    border-color: var(--color-grey) !important;
    color: var(--color-white) !important;
  }

  /* Selected row */
  .dataTables_wrapper .selected,
  .dataTable .selected {
    background-color: var(--color-black-dark) !important;
    color: #212529 !important;
  }

  /* Pagination */
  .dataTables_paginate .pagination .page-item.active .page-link {
    background-color: var(--color-black-dark);
    border-color: var(--color-white);
  }

  .dataTables_paginate .pagination .page-item .page-link {
    color: var(--color-white);
    background-color: var(--color-black-light);
    border-color: var(--color-white);
  }

  .dataTables_paginate .pagination .page-item .page-link:hover {
    color: var(--color-white);
    background-color: var(--color-black-dark);
    border-color: var(--color-white);
  }

  .dataTables_wrapper th.sorting_desc,
  .dataTables_wrapper th.sorting_asc,
  .dataTable th.sorting_desc,
  .dataTable th.sorting_asc {
    background-color: var(--color-black-dark) !important;
  }

  table.dataTable thead th,
  table.dataTable thead td {
    border-bottom: 1px solid var(--color-white);
  }

  label {
    color: var(--color-white-lighter);
  }

  #content input:not([type="button"]):not([type="submit"]),
  #content select,
  .datatable input:not([type="button"]):not([type="submit"]),
  .datatable select,
  .fw-container input:not([type="button"]):not([type="submit"]),
  .fw-container textarea,
  .fw-container select,
  .form-control,
  .datepicker th {
    background-color: var(
      --color-black-light
    ) !important; /* Change to a darker background color if needed */
    color: var(
      --color-white-lighter
    ) !important; /* Change to a lighter text color that contrasts well with the background */
    border-color: var(
      --color-grey
    ) !important; /* Optional: If you want to change the border color */
    border: hidden; /* FGE 5/8*/
    /* height: 28px; JBS 30/08 Désactivation car effet de bord sur détails dossier et settings utilisateur */
  }

  .filter-group input,
  .filter-group select {
    height: 28px; /* JBS 30/08 */
  }

  .form-control:read-only {
    background-color: var(
      --color-black-light
    ) !important; /* Change to a darker background color if needed */
  }

  .datepicker tbody td:hover {
    color: var(--color-black-dark);
  }

  /* Styling for placeholder text in input elements (optional) */
  input:not([type="button"]):not([type="submit"])::placeholder,
  textarea::placeholder {
    color: #a0a0a0 !important; /* Change the placeholder text color to a lighter shade */
  }

  .icon_wrap:hover,
  .icon_wrap span:hover,
  .profile.active .icon_wrap span {
    color: var(--color-theme) !important;
  }

  .navbar .profile .profile_dd {
    background-color: var(--color-black-light) !important;
  }

  .card.main-section {
    background-color: var(--color-black-dark) !important;
    color: var(--color-white-lighter);
  }

  .chatbox {
    background-color: var(--color-black-light) !important;
    border-color: var(--color-grey) !important;
  }

  .body-container h2 {
    color: var(--color-white) !important;
  }

  #container-card {
    background-color: var(--color-black-light) !important;
  }

  .notification_dd {
    color: var(--color-white-lighter) !important;
    background-color: var(--color-black-light) !important;
  }

  .notifications .notification_dd a {
    color: var(--color-white) !important;
  }

  .notification_dd li .notify_data .title {
    color: var(--color-white) !important;
  }

  .notifications .notification_dd li.mark_all {
    background-color: var(--color-black-light) !important;
  }

  .boutonMarkReadNotif,
  .whiteButton,
  .whiteButton i,
  .boutonMarkReadChat,
  #add-document,
  #add-document i,
  #view-detailtc,
  #get-eventtc {
    color: var(--color-white-lighter) !important;
    border-color: var(--color-white-lighter) !important;
  }

  .card,
  .card-content {
    background-color: var(--color-black-dark) !important;
  }

  .card {
    border-color: var(--color-black-light);
  }

  .card-footer {
    background-color: var(--color-black-light) !important;
    border-top: 1px solid var(--color-antiquewhite);
    color: var(--color-white-lighter) !important;
  }

  .list-group-item,
  .list-group-item div {
    background-color: var(--color-black-dark) !important;
    color: var(--color-white-lighter) !important;
  }

  div.list-group-item.active,
  .list-group-item.active div {
    background-color: var(--color-black-light) !important;
  }

  .dataTables_info {
    color: var(--color-white-lighter) !important;
  }

  #documents-part th,
  #event-part th,
  #intervenants-part th {
    background-color: var(--color-black-light) !important;
    color: var(--color-white) !important;
  }

  #documents-part td,
  #event-part td,
  #intervenants-part td {
    background-color: var(--color-black-dark) !important;
    color: var(--color-white-lighter) !important;
  }

  #documents-part a,
  #intervenants-part a {
    color: #5fa9ee !important;
    font-weight: 100 !important;
  }

  .card2:hover {
    color: var(--color-black-light) !important;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    background-color: var(--color-black-dark) !important;
  }

  .modal-content ul,
  .modal-content li {
    background-color: var(--color-black-light) !important;
  }

  .gantt-wrapper .gantt-container .gantt-header .gantt-header-months {
    background-color: var(--color-black-dark) !important;
  }

  .gantt-event-desc {
    color: var(--color-white) !important;
  }

  .gantt-grid-col {
    border-right: unset !important;
    background-color: var(--color-black-light);
  }

  .gantt-grid-col-weekend {
    border-right: unset !important;
    background-color: rgb(0 0 0 / 67%);
  }

  table.dataTable thead .sorting {
    background-blend-mode: color-burn;
  }

  table.dataTable thead .sorting_desc {
    background-blend-mode: luminosity;
  }

  table.dataTable thead .sorting_asc {
    background-blend-mode: luminosity;
  }

  .sidenav a:hover {
    color: var(--color-theme3) !important;
  }

  .table th {
    background-color: var(--color-black-light) !important;
  }

  #css-action i {
    border: 1px solid rgb(52 58 64) !important;
  }

  .activePicto {
    background-color: rgb(52 58 64) !important;
  }

  .pictoView {
    color: rgb(255 255 255) !important;
  }

  .col_total {
    color: white !important;
  }
  .bg-white {
    background-color: var(--color-black-dark) !important;
  }
  .bg-light {
    background-color: var(--color-black-light) !important;
  }
  select {
    background-color: var(--color-black-dark);
  }
  input {
    background-color: var(--color-black-dark);
  }

  a.dt-button.dropdown-item.buttons-columnVisibility {
    padding-left: 12px;
  }
  a.dt-button.dropdown-item.buttons-columnVisibility.active {
    padding-left: 0px;
  }
  a.dt-button.dropdown-item.buttons-columnVisibility.active :before {
    content: "✓ ";
  }
  a.dt-button.dropdown-item.button-page-length {
    padding-left: 12px;
  }
  a.dt-button.dropdown-item.button-page-length.active {
    padding-left: 0px;
  }
  a.dt-button.dropdown-item.button-page-length.active :before {
    content: "✓ ";
  }

  div.dt-button-collection button.dt-button:active:not(.disabled),
  div.dt-button-collection button.dt-button.active:not(.disabled),
  div.dt-button-collection div.dt-button:active:not(.disabled),
  div.dt-button-collection div.dt-button.active:not(.disabled),
  div.dt-button-collection a.dt-button:active:not(.disabled),
  div.dt-button-collection a.dt-button.active:not(.disabled) {
    background-color: var(--color-black-light);
  }

  div.dt-button-collection button.dt-button,
  div.dt-button-collection div.dt-button,
  div.dt-button-collection a.dt-button {
    background-color: var(--color-black-light);
    color: var(--color-white);
    border: unset;
    margin: 2px;
    height: 24px;
  }

  div.dtsr-confirmation,
  div.dtsr-creation {
    background-color: var(--color-black-dark) !important;
  }

  button.dt-button:hover:not(.disabled),
  div.dt-button:hover:not(.disabled),
  a.dt-button:hover:not(.disabled),
  div.dt-buttons div.dropdown-menu div.dt-button-split button:last-child:hover {
    background-color: var(--color-link-hover) !important;
  }

  div.dt-buttons div.dropdown-menu div.dt-button-split button:last-child {
    color: var(--color-white) !important;
  }

  button.dt-button,
  div.dt-button,
  a.dt-button {
    line-height: 1em;
  }
  .profile_dd ul li {
    border-bottom: unset !important;
  }
  .profile {
    border: unset !important;
  }

  .profile_dd ul li :hover {
    background-color: var(--color-black-dark) !important;
  }
  .card2 {
    color: var(--color-black-light) !important;
  }
  .html p {
    color: var(--color-white);
  }
  .html a {
    color: #5fa9ee;
  }

  #event-part td.done {
    color: #5fa9ee !important;
  }

  a {
    color: #5fa9ee;
  }
  a:focus,
  a:hover {
    color: #d3e1ed;
    text-decoration: underline;
  }
  .toggle i {
    color: var(--color-white) !important;
  }
  #menu .menuitem,
  .panel-body .menuitem {
    color: var(--color-white) !important;
  }

  .panel-body .menuitem:hover {
    color: var(--color-link-hover) !important;
  }
  label.active {
    background-color: var(--color-black-light);
  }
  div.dt-buttons div.dropdown-menu div.dt-button-split button:last-child {
    color: #fff !important;
  }

  .myOrganisation.organisationAGENCE-AGENCE .first,
  .myOrganisation.organisationAGENCE-AGENCE .readBy {
    background-color: #17181a !important;
  }

  #content .radioButtonIcons input[type="radio"]:checked + label[for="air"] {
    color: #00a65a !important;
  }

  #content .radioButtonIcons input[type="radio"]:checked + label[for="mer"] {
    color: #0064a6 !important;
  }

  #content .radioButtonIcons input[type="radio"]:checked + label[for="route"] {
    color: #c92800 !important;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgb(146, 146, 146);
  }

  ::-webkit-scrollbar-track {
    background: rgb(65, 64, 64);
  }

  /* JBS 2024-01-03 Correction filtres mobiles darkmode */
  @media (max-width: 767px) {
    #filter-group {
      background-color: var(--color-black-dark) !important;
      border: 1px groove var(--color-black-light);
    }

    #filter-group-close,
    #search-button {
      background-color: var(--color-black-light) !important;
    }
  }
  tr.intervenant-type {
    background-color: darkgray !important;
  }

  .brand-nav {
    border-bottom: 1px solid var(--color-black-dark) !important;
    background-color: var(--color-black-dark) !important;
  }
}
  #logo-portail{
    /* width: 150px;
    padding: 0 0 200px 0; */
    content: url("/web/css/id-logistics/img/logotracing-darkmode.png") !important;
    /* background-size: cover; */
  }