.container-page-faq{
    max-width: 1170px;
    margin:40px auto;
}

.fond-faq{
    background: #5b86b8;
}

.liste-categorie-faq{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}

.btn-categorie-faq{
    padding:20px;
    color:white;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

.btn-categorie-faq.tous , .bordure-active-question-tous{
    color: #8b5bb8;
    border:2px solid #8b5bb8 !important;
    transition: all 0.3s ease-out;
}

.btn-categorie-faq.tous:hover, .categorie-principale-question.tous, .active-question-tous{
    background-color:#8b5bb8;
    color:white;
    transition: all 0.3s ease-out;
}

.btn-categorie-faq.graphique, .bordure-active-question-graphique{
    color: #5b86b8;
    border:2px solid #5b86b8 !important;
    transition: all 0.3s ease-out;
}

.btn-categorie-faq.graphique:hover, .categorie-principale-question.graphique, .active-question-graphique{
    background-color:#5b86b8;
    color:white;
    transition: all 0.3s ease-out;
}


.btn-categorie-faq.informatique, .bordure-active-question-informatique{
    color: #b85b5b;
    border:2px solid #b85b5b !important;
    transition: all 0.3s ease-out;    
}

.btn-categorie-faq.informatique:hover,  .categorie-principale-question.informatique, .active-question-informatique{
    background-color:#b85b5b;
    color:white;
    transition: all 0.3s ease-out;
}


.btn-categorie-faq.rh, .bordure-active-question-rh{
    color: #71b85b;
    border:2px solid #71b85b !important;
    transition: all 0.3s ease-out;    
}

.btn-categorie-faq.rh:hover, .categorie-principale-question.rh, .active-question-rh{
    background-color:#71b85b;
    color:white;
    transition: all 0.3s ease-out;
}

.btn-categorie-faq.metier-dagent, .bordure-active-question-metier-dagent{
    color: #5bb8ac;
    border:2px solid #5bb8ac !important;
    transition: all 0.3s ease-out;    
}

.btn-categorie-faq.metier-dagent:hover, .categorie-principale-question.metier-dagent, .active-question-metier-dagent{
    background-color:#5bb8ac;
    color:white;
    transition: all 0.3s ease-out;
}


.btn-categorie-faq.metier-super-agent, .bordure-active-question-metier-super-agent{
    color: #b8885b;
    border:2px solid #b8885b !important;
    transition: all 0.3s ease-out;    
}

.btn-categorie-faq.metier-super-agent:hover, .categorie-principale-question.metier-super-agent, .active-question-metier-super-agent{
    background-color:#b8885b;
    color:white;
    transition: all 0.3s ease-out;
}

.btn-categorie-faq.autre, .bordure-active-question-autre{
    color: #b85bac;
    border:2px solid #b85bac !important;
    transition: all 0.3s ease-out;    
}

.btn-categorie-faq.autre:hover, .categorie-principale-question.autre, .active-question-autre{
    background-color:#b85bac;
    color:white;
}

.nombre-resultats{
    text-align: center;
    text-transform: uppercase;
    color:white;
    padding:10px;
    max-width: 250px;
    margin:0 auto;
    background-color: #5B86B8;
    font-weight: bold;
    margin-bottom: 10px;
}

.categorie-principale-question{
    font-weight: bold;
    font-size:1rem;
    border-radius: 5px;
    text-align: center;
    padding:10px;
    margin-right:15px;
}

.container-question-reponse{
    display:flex;
    flex-wrap: wrap;
    /* border-bottom: 1px solid #73737349; */
    transition: all 0.3s ease-out;
}

.question-contenu{
    display:flex;
    align-items:center;
    width:100%;
    padding:10px;
    cursor: pointer;
}


.container-question-reponse:nth-child(odd){
    background-color: #fbfbfb;
}


.titre-question{
    font-size:0.95rem;
    max-width: 80%;
    text-transform: uppercase;
}

.reponse-contenu{
    width:100%;
    padding-left:10px;
    padding-right:10px;
    max-height:1px;
    transition: all 0.7s ease-out; 
    overflow:hidden;
}

.reponse-contenu p, .reponse-contenu div {
    
    margin:inherit;
    padding:inherit;
    padding-left:0px;
    padding-right:0px;
}

.reponse-contenu ul{
    padding-left:20px;
    padding-right:0px;
    list-style: initial;
}

.reponse-contenu ol{
    padding-left:20px;
    padding-right:0px;
    list-style: decimal;
}

.reponse-contenu table{
    width:100%;
}

.reponse-contenu table td{
    border:1px solid #737373;
    padding:5px;
}

.show-reponse{
    padding:20px;
    max-height:2500px;
    background-color: white;
}

.titre-formulaire-FAQ{
    margin:50px auto 0 auto;
    font-size: 1.1rem;
    color:#5b86b8;
    text-align: center;
    text-transform: uppercase;
    padding-top:10px;
    border-top:1px solid rgba(0, 0, 0, 0.11);
}


#ajoutFAQ{
    margin:20px auto 0 auto;
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
}

#ajoutFAQ label, #ajoutFAQ textarea, #ajoutFAQ .buddyboss-select{
    width:70%;
    margin-right: 0;
}

#ajoutFAQ label{
    font-weight: bold;
    font-size:0.8rem;
}

#ajoutFAQ textarea{
    margin-bottom:20px;
    resize: vertical; 
    min-height:50px;
}

#ajoutFAQ button#submitQuestion{
    margin-top:20px;
    background-color: #e26f38;
    color:white;
    border:none;
    border-radius: 5px;
    transition: all 0.3s ease-out;
    padding:15px;
    font-weight: bold;
}

#ajoutFAQ button#submitQuestion:hover{
    box-shadow: inset 0 0 1000px rgba(0, 0, 0, 0.15);
}


.message-statut-traitement{
    max-height: 1px;
    transition: all 0.3s ease-out;
    max-width: 70%;
    margin:10px auto;
    font-weight: bold;
    font-size:0.8rem;
    box-sizing: border-box;
}

.success, .error{
    padding:15px;
    border-radius: 5px;
    color:white;
    max-height: 250px;  
}

.success{
    background-color:#5b86b8;
}

.error{
    background-color:red;
}

#categorie{
    padding: 10px 5px;
    border:2px solid #5b86b8;
    color:#5b86b8;
    border-radius: 5px;
}

@media screen and (max-width:1199px){
    .btn-categorie-faq{
        padding:10px;
      margin:5px;
    }

    .liste-categorie-faq{
        justify-content: inherit;
    }
}