/************************************ REGLAGES PRINCIPAUX DE L APPLI ***********************************************+*/
#wrapper {
    margin: 0 auto;
    max-width: 1280px;
    background-color: white;
}

p {
    font-family: Calibri, sans-serif;
}

.p_tab {
    font-weight: normal;
}

h1,
h2,
h3 {
    font-family: Poppins, sans-serif;
    font-weight: 500;
}

h4 {
    font-family: Poppins, sans serif;
    font-weight: 300;
    display: inline-block;
}

.Txtlogo,
.logoTxt {
    display: inline-block
}


.lien:hover {
    color: #E83B3B;
    font-weight: 500;
}

.mdpForgot {
    color: rgb(43, 43, 254);
    display: flex;
    justify-content: end;
}

a {
    text-decoration: none;
    color: inherit;
}

.a_search:hover {
    color: #E83B3B;

}

#txtPageA {
    display: flex;
}

.petitImg {
    width: 10em;
    margin-left: 1%;
}

.prezPageA {
    text-align: justify;
}

.bold_lien:hover {
    font-weight: 700;
}

.copiright {
    display: inline-block
}

.i_yel {

    color: #FECC36;
    display: inline-block;
}

.i_red {
    color: #E83B3B;
    display: inline-block;
}

.errorMessage {
    color: #E83B3B;
}

.successMessage {
    color: #018382;
}

/************************************************************* HEADER ***********************************************+*/
header {
    display: flex;
    align-items: center;
    justify-content: center;
}

#logo {
    width: 50%;
    height: auto;
}

header a {
    display: inline-block;
    text-decoration: none;
    color: #000;
}

/* ********************************************************** MAIN  *****************************************************/
#main {
    width: 90%;
    height: 70%;
    margin: 5%;
    padding: 1%;
    /* border: solid 0.09em #141735;
    border-radius: 0% 0.93em 0.93em 0%; */
}

.svgCo {
    width: 30px;

    cursor: pointer;
}

.svgCoDeco {
    width: 34px;
    margin-left: 2em;
    cursor: pointer;

}

.svgMain {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* ********************************************************* ACCUEIL / CONNEXION *******************************************/
.Login {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2%;
}

.log {
    background-color: #FECC36;
    border: solid 0.08em #FECC36;
    cursor: pointer;
    width: 20em;
    height: 4em;
    border-radius: 0% 0.93em 0.93em 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    color: #141735;
}

.log:hover {
    background-color: #ffffff;
    color: rgb(0, 0, 0);
}

#login {
    padding: 2%;
    display: flex;
    justify-content: space-around;
}

/* ************************************************************** NAVIGATION *****************************************************************/

.navli,
li.foot {
    font-family: Poppins, sans serif;
    font-weight: 400;
    color: inherit;
    color: white
}

li.foot:hover,
.navli:hover {
    color: #FECC36;
    font-weight: 500;
}

li {
    list-style: none;
    padding: 0;
    margin: 0;
    color: inherit;

}

#navigation {
    width: 100%;
    display: flex;

}

ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding-left: 0;
    background-color: #141735;
}

/* ************************************************************** MENU BURGER ***************************************************************/
.burgerSVG {
    width: 1.875em;
}

.menu-burger {
    display: none;
}

.icon_nav_responsive {
    display: none;
}

/*  */
/* ************************************************************ FORMULAIRE *********************************************************************/

.formAdd {
    display: flex;

    justify-content: space-evenly;
}

.addForm {
    margin: 2%;
}

.form-group {
    margin-bottom: 0.625em;
    width: 100%;
}

.form_group_message {
    width: 18.75em;
    text-align: right;
}

label {
    display: inline-block;
    width: 8em;

}

input {
    width: 100%;
    /* border-radius: ; */
}

#loginForm {

    margin: 2%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-left: #141735 0.02em solid;
    padding-left: 7%;
}

.btn-jeux {
    border: none;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    /* Rend les boutons ronds */
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    outline: none;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    color: #141735;
}

#difficulty-btn-moyen {

    border: solid 0.5em #FECC36;
    background-color: #ffffff;

}

#difficulty-btn-moyen:hover {
    background-color: #FECC36;
}

#difficulty-btn-facile {
    border: solid 0.5em #018382;
    background-color: #ffffff;
}

#difficulty-btn-facile:hover {
    background-color: #018382;
    color: #ffffff;
}

#difficulty-btn-difficile {
    border: solid 0.5em #e8783b;
    background-color: #ffffff;
}

#difficulty-btn-difficile:hover {
    background-color: #e8783b;
    color: #000;
}

#difficulty-btn-tresDifficile {
    border: solid 0.5em #E83B3B;
    background-color: #ffffff;
}

#difficulty-btn-tresDifficile:hover {
    background-color: #E83B3B;
    color: #ffffff;
}

.difficulty-circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
}

.facile {
    background-color: #018382;
}

.moyen {
    background-color: #FECC36;
}

.difficile {
    background-color: #e8783b;
}

.tres-difficile {
    background-color: #E83B3B;
}

.btn-envoyer {

    background-color: #018382;
    border: solid 0.02em #018382;
    cursor: pointer;
    width: 100%;
    height: 4em;
    border-radius: 0% 0.93em 0.93em 0%;
    display: flex;
    /* margin-left: 8%; */
    align-items: center;
    justify-content: center;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    color: #ffffff;
}

.btn-envoyer:hover {
    background-color: #ffffff;
    color: #018382;
}

.btn-envoyer-index {
    float: right;
    background-color: #FECC36;
    border: solid 0.02em #141735;
    cursor: pointer;

    height: 2em;
    border-radius: 0% 0.93em 0.93em 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2%;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    color: #141735;
}

.btn-jouer-index {
    /* float: right; */
    background-color: #FECC36;
    border: solid 0.02em #FECC36;
    cursor: pointer;
    width: 100%;
    height: 4em;
    border-radius: 0% 0.93em 0.93em 0%;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: Poppins, sans-serif;
    font-weight: 500;
    color: #000
}

.btn-jouer-index:hover {
    background-color: #ffffff;
    border: solid 0.02em #FECC36;
    color: #000;
}

/* .txt-lancer:hover {
    color: #018382;
    font-family: Poppins, sans-serif;
    font-weight: 500;
} */

.btn-envoyer-reset {
    background-color: #ffffff;
    border: solid 0.02em #141735;
    cursor: pointer;
    width: 10em;
    height: 2em;
    border-radius: 0% 0.93em 0.93em 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2%;
}

.btn-envoyer-reset:hover {
    background-color: #FECC36;
}

.btn-envoyer-index:hover {
    background-color: #E83B3B;
    color: white;
}

/* .btn-jouer-index {
    background-color: #018382;
} */

.txt-lancer {
    color: #ffffff;
}

.btn-pagination {

    cursor: pointer;
    width: 4em;
    height: 2em;
    border-radius: 0% 0.93em 0.93em 0%;
    display: flex;
    align-items: center;
    justify-content: center;

}



.lien-envoyer-index:hover {
    color: #ffffff;
}

#searchFormQues,
#searchFormCat {
    margin: 2%;
}

.formQuiizz {
    display: flex;
    justify-content: space-around;
}

.quiizzForm {
    width: 22.40em;
    margin: 2%;
    padding: 3%;
    border: solid 0.02em #141735;
    border-radius: 0% 0.93em 0.93em 0%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.indication {
    font-style: italic;
    color: #818181;
    font-weight: lighter;
}

.indication_mdp {
    font-style: italic;
    color: #5c5c5c;
    font-size: 12px;
}

.form-group-random {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mdpIndex {
    font-size: 0.625em;
}

#mdpOublie {


    margin: 2%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 7%;
    width: 80%;

}

/* ************************************************************** LES TABLEAUX * ***************************************************************/

td {
    margin: 1%;
    text-align: center;
}

input.textQuestion {
    width: 20em;
}

textarea {
    width: 20em;
    height: 7.5em;
}

tr.impair {
    background-color: rgba(1, 131, 130, .1);

}

tr.pair {
    background-color: #ffffff;

}

.svgClickable {
    width: 1.25em;
    display: block;
    margin: auto;
    cursor: pointer
}

.svgClickable:hover {
    width: 1.50em;
}

.svgClickableDelete {
    width: 1.25em;
    display: block;
    margin: auto;
    cursor: pointer;
    color: #E83B3B;
    margin-left: 2em;
}

path.iconeColor {
    fill: #141735;
}

path.iconeColorDelete {
    fill: #E83B3B;
}

path:hover {
    fill: #FECC36;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: #141735 0.02em solid;
    border-top: #141735 0.02em solid;
    /* margin-top: 3%; */
}

.logQuestion {
    width: 7.5em;
}

.categoryIndex {
    text-align: center;
}

.tabQuestion {
    text-align: center;
    cursor: pointer;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
}

/****************************************************************** LES BOUTONS **************************************************************************/
.btn-style {
    margin: 0.5%;
    width: 10.625em;
}

.btn-envoyer-reponse {
    background-color: #141735;
    border: solid 0.02em #141735;
    cursor: pointer;
    width: 20em;
    height: 4em;
    border-radius: 0% 0.93em 0.93em 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3%;
    color: #ffffff;
    font-family: Poppins, sans-serif;
    font-weight: 500;
}

#accept-cookies,
#refuse-cookies {

    background-color: #ffffff;
    border: solid 0.02em #141735;
    cursor: pointer;
    width: 8em;
    height: 2em;
    border-radius: 0% 0.93em 0.93em 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3%;

}

#accept-cookies:hover,
#refuse-cookies:hover {
    background-color: #FECC36;
}


.btn-envoyer-reponse:hover {
    background-color: #FECC36;
    color: #000;
}



.catSelect {
    background-color: #ffffff;
    border: solid 0.02em #141735;
    border-radius: 0% 0.93em 0.93em 0%;
    /* width: 50%;
    height: 50px; */
}


/* ************************************************************** HOME PAGE USER * ***************************************************************/

#homePage {
    display: flex;
    justify-content: space-around;

}

.home {
    border-radius: 2em;
    box-shadow: 0em 0.5em 0.5em 0em rgba(143, 143, 143, 0.2);
    padding: 2em;
    margin: 2%;
    padding-left: 2%;
    padding-right: 2%;
    display: flex;
    flex-direction: column;
    width: 18.75em;
    justify-content: space-between;

}

.homeQuiizz {
    border-radius: 2em;
    box-shadow: 0em 0.5em 0.5em 0em rgba(143, 143, 143, 0.2);
    padding: 2em;
    margin: 2%;
    padding-left: 2%;
    padding-right: 2%;
    display: flex;
    flex-direction: column;
    width: 23em;
    justify-content: space-between;

}

.QuiizzLab {
    width: 10em;
    margin-bottom: 7%;
}


.homeContent {
    display: flex;
    flex-direction: column;

}

.content {
    border-top: #e0dede solid 0.02em;
    background-color: #ffffff;
}

.titleHome {
    text-align: center;
}

.textContent {
    word-spacing: 0.1em;
    line-height: 1.5em;
}

/* ********************************************************QUIIZZZ *********************************************************************/
.question {
    height: 15em;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 1.25em;
    border-top: #141735 0.01em solid;
    padding-top: 5%;

}

#checkboxButton {

    background-color: #ffffff;
    border: solid 0.02em #141735;
    cursor: pointer;
    width: 9em;
    height: 2em;
    border-radius: 0% 0.93em 0.93em 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5%;
}

.catQuiizz {
    background-color: #ffffff;
    border: solid 0.02em #141735;
    border-radius: 0% 0.93em 0.93em 0%;
    height: 3em;
    width: 100%;
    margin-bottom: 7%;
    /* margin-left: 2%; */

}


#checkboxButton:hover {
    background-color: #FECC36;
}



#checkboxButton.checked {
    background-color: #FECC36;
    font-weight: bold;
    color: #141735;

}



.answer {
    display: none;
    font-weight: bold;
}

#scoreQuestion {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#scoreQuestion.done {
    display: none;
}

/* **************************************************************** DIVERS ******************************************************************************* */
#searchResultsContainerQuestion,
#searchResultsContainer {
    border: solid rgba(254, 204, 54, 0.1) 0.01em;
    border-radius: 1.2em;
    background-color: rgba(254, 204, 54, 0.1);


}

.searchResult {
    padding-left: 2%;
}

/* ***************************************************************   FOOTER ****************************************************************************** */

footer {
    text-align: center;
}

#menuFooter {
    text-align: left;

}

#listFooter {
    border-bottom: #141735 solid 0.02em;
    border-top: #141735 solid 0.02em;
    list-style-type: none;
}

.foot {
    color: white;
    font-weight: 300;
}

/* ************************************************** COOKIES *********************************************************************************/
.cookie-popup {

    padding: 2%;
    border: solid 0.1em #E83B3B;

    width: 18.75em;
    box-shadow: 0 0 0.625em rgba(0, 0, 0, 0.1);
    z-index: 9999;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #eae9e9;

}

.cookiesImg {
    width: 6.25em;
    margin-left: 6.25em;

}

#Btn_place_cookie {
    display: flex;
    justify-content: space-around;
}

.questElement {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.add_element {
    height: 1.25em;
}

.tabs {
    display: none;
}

/* **************************************************      MEDIAS QUERY ET RESPONSIVE     *************************************************** */
@media screen and (max-width: 768px) {

    #homePage {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .home {
        width: 90%;
    }

    ul#listFooter {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    ul#navNav {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 0;
        background-color: #141735;
        align-items: center;
    }

    #navWithBurger {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .menu-burger {
        display: block;
        cursor: pointer;

        float: right;

        margin-top: 1.25em;
        margin-right: 1.25em;

    }


    .icon_nav_responsive {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-left: 1.25em;
        height: 4.875em;
    }

    .icon_nav {
        margin-right: 6.25em;

    }

    .icon_nav_responsive svg {
        width: 2em;
        height: 2em;
        /* margin-right: 10px; */
    }


    .formQuiizz {
        display: flex;
        flex-direction: column;
    }

    .quiizzForm {
        width: 90%;
    }

    #scoreQuestion {
        display: flex;
        flex-wrap: wrap;
        width: 100%
    }

    #difficulty-btn {
        width: 90%;
        margin: 1%;
    }

    #envoyer {
        margin: 2%;
    }

    .btn-jeux {
        margin: 8%;
    }


    .formAdd {
        display: block;

    }

    .addForm,
    #loginForm {
        width: 100%;
    }

    #loginForm {
        border-top: #141735 0.02em solid;
        padding-left: 0;
        border-left: 0;
        display: none;
    }

    .tabs {
        display: flex;
        justify-content: space-around;
        background-color: #f1f1f1;
    }

    .tabs .tab-btn.active {
        background-color: #141735;
        color: #ffffff;
    }

    #txtPageA {
        flex-direction: column;
    }

    .no_responsive {
        display: none;
    }

    .homeQuiizz {
        border-radius: 2em;
        box-shadow: 0em 0.5em 0.5em 0em rgba(143, 143, 143, 0.2);
        padding: 2em;
        margin: 2%;
        padding-left: 2%;
        padding-right: 2%;
        display: flex;
        flex-direction: column;
        width: 20em;
        justify-content: space-between;

    }
}