body {
            font-family: 'Cairo', 'sans-serif' !important;
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .container-page {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        /* Navbar */
        .navbar {
            background-color: #343a40; /*  couleur light #f8f9fa
            color: white;
           
        }
        .navbar-toggler {
    border-color: white; /* Change la couleur de la bordure du bouton */
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important; /* Change la couleur des traits en blanc */
        }

        .navbar a {
            color: white !important;
            display: flex;
            align-items: center;
             margin-right: 5px; /* Alternative à gap */
            font-size: 12px !important;
        }


        .dropdown-divider-vertical {
            width: 1px;
            height: 24px;
            background-color: #6c757d; /* Gris clair pour le divider */
            margin: auto 8px;
            display: inline-block;
        }


 /* Transformation en divider horizontal en responsive */
                    @media (max-width: 991px) {
                        .dropdown-divider-vertical {
                            width: 100%;
                            height: 1px;
                            margin: 8px 0;
                        }
                    }

       .dropdown-item.sortie {
            color: red !important;
        }

        .dropdown-item.sortie:hover {
            background-color: #f8d7da !important;
            color: red !important;
        }


       .dropdown-item.changeMDP {
            color: blue !important;
        }

        .dropdown-item.changeMDP:hover {
            background-color: #f8d7da !important;
            color: blue !important;
        }

        /* Sidebar */
        .sidebar {
            width: 250px;
            background-color: #105BA6;
            color: white;
            padding: 15px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            height: 100%;
            padding-top: 70px; /* Ajustez cette valeur selon la hauteur de la navbar */
        }

        .sidebar a {
            color: white;
            text-decoration: none;
            padding: 10px;
            border-radius: 5px;
            text-align: right;
            display: flex;
            align-items: center;
              margin-right: 5px; /* Alternative à gap */
        }

        .sidebar a:hover {
            background-color: ghostwhite;
            color: gray;
        }

        .divider {
            border-top: 1px solid white;
            margin: 10px 0;
        }
        .main .divider {
            border-top: 2px solid darkgray;
            margin: 20px ;
            

        }

        .content-wrapper {
            flex: 1;
            display: flex;
            flex-direction: row;
            height: calc(100vh - 50px);
        }
        .loader 
        {

        position : fixed;
        z-index: 9999;
        background : url('../img/loaderrr.gif') 50% 50% no-repeat;
        top : 0px;
        left : 0px;
        height :100%;
        width : 100%;
        cursor : wait;
        background-color: rgba(220,220,220, 0.6);
        margin-top: 58px;
        }
                .loader p
        {
            text-align: center;
          margin-top: 19%;
            width: 100%;
            font-size: 15px;
        }
        .main {
            flex: 1;
            padding: 20px;
            background-color: #f8f9fa;
            padding-top: 70px; /* Ajustez cette valeur selon la hauteur de la navbar */
        }

        footer {
            background-color: #343a40;
            color: white;
            text-align: center;
            padding: 10px 0;
            margin-top: auto;
        }
        footer p
                {
                        font-size: 11px;
                }

                    @media (max-width: 800px) {
                        .sidebar {
                                        width: 100%;
                                        display: flex;
                                        flex-direction: column;
                                        height: auto;
                                    }

                         .content-wrapper {
                                        flex-direction: column;
                                    }

                          .sidebar a {
                                        text-align: center;
                                        padding: 10px;
                                    }
                           .main {
                                    flex: 1;
                                    padding: 20px;
                                    background-color: #f8f9fa;
                                    display: flex;
                                    flex-direction: column;
                                    margin-right: 20px; /* Espacement entre les éléments */
                                }

                           .main .divider {
                            border-top: 2px solid #6c757d;
                            margin: 20px ;
                        }

                            .main .title {
                            text-align: center;
                            font-size: 2rem; /* Texte plus grand */
                            color: #007bff;
                            font-weight: bold;
                        }

                            .main .search-form-inline {
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                            margin-right: 10px;
                        }

                            .main .search-form-inline input {
                            flex: 1;
                            min-width: 200px;
                        }

                            .main .result-form {
                            background-color: #fff;
                            padding: 15px;
                            border: 1px solid #ddd;
                            border-radius: 8px;
                            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                        }

                            .main .result-form button {
                            width: 100%; /* Prend toute la largeur en responsive */
                        }

                            .main .table-container {
                            overflow-x: auto;
                            background-color: #fff;
                            border: 1px solid #ddd;
                            border-radius: 8px;
                            padding: 10px;
                        }

                            .main .table-container table th,
                            .main .table-container table td {
                            vertical-align: middle;
                                font-size: 1em;
                        }

                            @media (min-width: 768px) {
                            .main .search-form-inline {
                                flex-wrap: nowrap;
                            }

                            .main .result-form button {
                                width: auto; /* Ajuste la largeur en non-responsive */
                            }
                        }
                         .table-container {
                                    background-color: #fff;
                                    padding: 20px;
                                    border-radius: 8px;
                                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                                }

                                .dataTables_wrapper .dataTables_paginate .paginate_button {
                                    font-size: 0.9rem;
                                }
           
                }

 .required::after {
            content: "*"; /* Ajoute une étoile */
            color: red;   /* Couleur rouge */
            margin-left: 5px; /* Espace entre le texte et l'étoile */
}
th {
            cursor: pointer; /* Affiche une icône de main */
            background-color: #f8f9fa; /* Couleur de fond */
            transition: background-color 0.3s ease; /* Animation fluide */
        }

 body.swal2-shown {
    overflow: visible !important; /* Empêche la suppression du défilement */
    padding-right: 0 !important; /* Supprime le padding ajouté par SweetAlert2 */
  }

  .swal2-popup {
    max-height: 90vh; /* Limite la hauteur du modal pour éviter de perturber la mise en page */
    overflow-y: auto; /* Ajoute un défilement si le contenu dépasse */
  }

.green-bg {
    background-color: lightgreen !important;
}