body {
        color: #c0c0c0;
        text-align: left;
        background-color: #204341;
      }

      .btn-primary {
        background-color: #466c6a;
        color: #c0c0c0;
        border-color: #466c6a;
      }

      .btn-primary.dark {
        background-color: #204341;
        color: #c0c0c0;
        border-color: #204341;
      }

      .btn-primary:hover {
        color: #fff;
        background-color: #3a7d7a;
        border-color: #3a7d7a;
      }

      .btn-ligh {
        background-color: #3a7d7a;
      }

      .leaflet-marker-icon {
        color:black;
      }
      /* Add margins to specific elements, e.g., the card container */
      .card {
        margin: 10%;
        /* Adjust the percentage as needed */
        font-family: 'Roboto', sans-serif;
        background-color: #466c6a;
      }

      .mt-3 {
        font-family: 'Roboto', sans-serif;
      }

      /* Style form fields and labels */
      .form-field {
        margin-bottom: 10px;
        /* Add spacing between form fields */
        display: flex;
        align-items: center;
      }

      .form-custom-label {
        flex: 0.25;
        /* Allow labels to take up available space */
        font-weight: bold;
        /* Adjust label font weight as needed */
        margin-right: 10px;
        /* Add spacing between label and input field */
        font-family: 'Roboto', sans-serif;
      }

      /* Apply consistent font and padding to form fields */
      input[type="text"],
      input[type="email"],
      input[type="password"],
      select,
      textarea {
        flex: 2;
        /* Allow input fields to take up available space */
        font-family: 'Roboto', sans-serif;
        /* Replace with your desired font */
        padding: 5px;
        /* Adjust padding as needed */
      }

      /* Style the submit button */
      button[type="submit"] {
        margin-top: 10px;
        /* Add spacing above the submit button */
        background-color: #3a7d7a;
        /* Example button background color */
        color: #c0c0c0;
        /* Example button text color */
        border: none;
        padding: 10px 20px;
        /* Adjust padding as needed */
      }

      /* Override the body margin for the specific container using !important */
      .with_margin {
        margin-top: 3% !important;
        margin-left: 10% !important;
        margin-right: 10% !important;
        font-family: 'Roboto', sans-serif;
      }

      .with_small_margin {
        margin-top: 3% !important;
        margin-left: 5% !important;
        margin-right: 5% !important;
        font-family: 'Roboto', sans-serif;
      }

      /* Add margins to the body element as a percentage of the viewport width */
      body {
        margin: 0%;
        /* Adjust the percentage as needed */
      }

      .login-button {
        top: 10px;
        /* Adjust the top position as needed */
        left: 10px;
        /* Adjust the left position as needed */
        z-index: 99;
        border: 1px solid #ccc;
        padding: 9px;
        /* Set a higher z-index to make it appear in front of the image */
        background-color: white;
        /* Set the background color to white */
      }

      .rbutton-container {
        display: inline-block;
      }

      .rbutton-container button {
        margin-right: 10px;
        /* Adjust this value to control the space between buttons */
      }

      /* Hide the rectangle control */
      .leaflet-draw-draw-rectangle {
        display: none !important;
      }

      /* Hide the polygon control */
      .leaflet-draw-draw-polyline {
        display: none !important;
      }

      /* Hide the polyline control */
      .leaflet-draw-draw-polygon {
        display: none !important;
      }

      /* Hide the polyline control */
      .leaflet-draw-draw-circlemarker {
        display: none !important;
      }

      .language-selector {
        position: absolute;
        top: 1%;
        /* Adjust the top distance as needed */
        right: 1%;
        /* Adjust the right distance as needed */
        z-index: 1;
        /* Adjust the z-index as needed to ensure it's on top of other elements */
        background-color: rgba(0, 0, 0, 0);
        /* Optional background color */
        padding: 0;
        /* Optional padding */
        border: 0px solid rgba(0, 0, 0, 0);
        /* Optional border */
        border-radius: 0px;
        /* Optional border radius for rounded corners */
        box-shadow: 0 0 0px rgba(0, 0, 0, 0);
        /* Optional box shadow for a subtle effect */

      }

      .language-selector select.select_language_picker {
        width: 20px !important;
        background-color: rgba(0, 0, 0, 0);
      }

      .button-container {
        position: absolute;
        display: flex;
        top: 10px;
      }

      .message-container {
        position: absolute;
        display: flex;
        width: 100%;
        top: 10px;
      }

      .button-container a {
        /* Distribute available space evenly among buttons */
        text-align: center;
        /* Center button text horizontally (optional) */
        margin: 0 5px;
        /* Adjust horizontal spacing between buttons */
      }

      .center-message {
        margin: auto;
        width: 50%;
        /* Optional: Adjust other styles as needed */
      }


      table.blueTable {
        border: 1px solid #1C6EA4;
        background-color: #EEEEEE;
        width: 100%;
        text-align: left;
        border-collapse: collapse;
      }

      table.blueTable td,
      table.blueTable th {
        border: 1px solid #AAAAAA;
        padding: 3px 2px;
      }

      table.blueTable tbody td {
        font-size: 13px;
      }

      table.blueTable tr:nth-child(even) {
        background: #D0E4F5;
      }

      table.blueTable thead {
        background: #1C6EA4;
        background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        border-bottom: 2px solid #444444;
      }

      table.blueTable thead th {
        font-size: 15px;
        font-weight: bold;
        color: #FFFFFF;
        border-left: 2px solid #D0E4F5;
      }

      table.blueTable thead th:first-child {
        border-left: none;
      }

      table.blueTable tfoot {
        font-size: 14px;
        font-weight: bold;
        color: #FFFFFF;
        background: #D0E4F5;
        background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
        background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
        background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
        border-top: 2px solid #444444;
      }

      table.blueTable tfoot td {
        font-size: 14px;
      }

      table.blueTable tfoot .links {
        text-align: right;
      }

      table.blueTable tfoot .links a {
        display: inline-block;
        background: #1C6EA4;
        color: #FFFFFF;
        padding: 2px 8px;
        border-radius: 5px;
      }

      div.table_and_map {
        display: flex;
      }


      /* styles for the menu */

      .navbar {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        background-color: white;
        /* Arrière-plan du menu */
        padding: 10px;
        /* Espacement autour du menu */
        z-index: 1;
        /* Pour afficher le menu au-dessus du reste de la page */
        min-width: 20%
      }

      .navbar.active {
        display: block;
      }

      .menu-icon {
        /* Border around the icon container */
        border-radius: 4px;
        /* Rounded corners for the box */
        display: inline-block;
        /* Make the container inline-block to fit the content */
        padding: 5px;
        /* Padding inside the box */
        cursor: pointer;
      }


      .menu-item {
        margin-bottom: 10px;
        /* Espace entre les éléments du menu */
      }

      .close-icon {
        cursor: pointer;
        float: right;
        /* Pour placer l'icône de fermeture à droite */
        font-size: 20px;
        /* Ajustez la taille de la police selon vos préférences */
        margin-right: 10px;
        /* Espacement de l'icône de fermeture par rapport au bord droit */
      }

      .menu-icon {
        position: absolute;
        top: 1%;
        margin-left: 1%;
        color: black;
        background-color: rgba(255, 255, 255, 0.7);
        /* White with 70% opacity */
        cursor: pointer;
        float: left;
        /* Pour placer l'icône de fermeture à droite */
        font-size: 20px;
        /* Ajustez la taille de la police selon vos préférences */
        margin-left: 10px;
        /* Espacement de l'icône de fermeture par rapport au bord droit */
      }

      .navbar .menu-item a {
        color: rgb(56, 56, 56);
      }