.maintenance_list_container{
    background-color: white;
    width: 100%;
  text-align: center;
  border-collapse: collapse;
}

.maintenance_list_container th{
    border-bottom: 2px solid #3e6883 !important;
    font-weight: 400;
    font-size: 15px;
    vertical-align: middle;
    text-transform: uppercase;
    padding: 20px 30px 15px 30px;
}

 .maintenance_list_container tbody tr td {
    padding: 10px;
}

.maintenance_list_container td {
    border-bottom: 1px solid #dee2e6 !important;
    font-weight: 400;
    font-size: 15px;
    vertical-align: middle;
}

.maintenance_list_container tbody tr td p {
    margin: 0;
    padding: 0;
}

.status-non-demarre{
    background-color: rgba(255, 150, 150, 0.3); /* Rouge plus clair avec une faible opacité */
    color: #FF9696; /* Une nuance de rouge plus clair pour le texte avec un contraste similaire */
}

.commentaire-client .full-content {
    display: none;
}

.commentaire-client span.read-more {
    cursor: pointer;
    color: #0073e5;
    text-decoration: underline;
}

.maintenance_list_container.none, .empty_maintenance.none {
    display:none;
}

.commentaire-client {
    width: 40%;
    text-align: left;
}

.read-more {
    text-decoration: underline;
    color: #ade796;
    cursor: pointer;
}

.container_onglets{
    display: none;
}


/* Styles de base */
.hide_desktop {
    display: none;
}

.hide_mobile {
    display: block;
}

.accordion_item {
    display: none; /* Masqué par défaut pour éviter l'affichage sur les écrans de bureau */
}

.accordion_header {
    background-color: white;
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ddd;
    margin-top: 10px; /* Ajouté pour séparer visuellement les éléments */
}

.accordion_content {
    display: none; /* Contenu masqué par défaut */
    padding: 10px;
    border: 1px solid #ddd;
    border-top: none;
    background-color: white;
}

/* Styles pour les appareils mobiles */
@media screen and (max-width: 767px) {

    .container_onglets{
        display: block;
    }
    
    .accordion_header.appli_open + .accordion_content {
        display: block !important;
    }

    .accordion_header {
        position: relative;
    }

    .accordion_header::after {
        content: '';
        display: inline-block;
        height: 20px;
        width: 15px;
        background-image: url('/wp-content/uploads/2023/09/arrow-blue.svg');
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 10px;
        transition: transform 0.3s ease-in-out;
        position: absolute;
        right: 5px;
        top: 15px;
    }

    .accordion_header::after {
        transition: transform 0.3s ease-in-out;
    }
    
    .accordion_header.appli_open::after {
        transform: rotate(90deg);
    }      

    .comment-content .full-content {
        display: none;
    }
    
    .comment-content span.read-more {
        cursor: pointer;
        color: #0073e5;
        text-decoration: underline;
    }
    
    .comment-content {
        width: 40%;
    }

    .flex-container {
        display: flex;
        align-items: center; /* Centre les éléments verticalement */
        justify-content: space-between; /* Espacement entre les éléments */
        padding: 5px 0; /* Ajustez le padding selon vos besoins */
        gap: 25px;
    }
    
    .hide_desktop {
        display: block;
    }

    .hide_mobile {
        display: none;
    }

    .accordion_item {
        display: none;
    }

    .maintenance_list_container/*,
    .header_subitem.header_subitem_maintenances.style_header_subitem.onglets_header_subitem.ticket*/ {
        display: none !important;
    }

    .container_onglets .accordion_item {
        display: block;
    }


    .accordion_item p {
        margin: 5px;
    }
}

/* Ajustements supplémentaires pour les très petits écrans */
@media screen and (max-width: 492px) {
    .maintenance_list_container th,
    .maintenance_list_container td {
        padding: 10px 5px; /* Réduction de l'espacement pour économiser de l'espace */
        font-size: 12px; /* Taille de police ajustée pour une meilleure lisibilité */
    }

    .ticket-status-maintenances {
        font-size: 10px; /* Réduction pour s'adapter aux petits écrans */
        padding: 2px 5px; /* Ajustement du padding */
    }
}