/* @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');

/*
:root {
--BlocMargin: 100px;
--BlocPadding: 100px;
--TitleMargin: 10px;
--TitlePadding: 180px;
--ButtonHeight: 40px;
--ButtonWidth: 140px;
--ButtonLineHeight: 20px;
--ButtonFontSize: 16px;
--ButtonLetterSpacing: 1px;
}
*/

body {
    color: white;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    /* font-family: 'Jost', sans-serif; */
    background-color: black;
}

header {
    height: auto;
    z-index: 999;
    border-bottom: 1px solid #e2e8f0;
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    top: 0;
    margin: 0;
    padding: 0;
    background-color: #000;
}


/* ----------------------------------- */

footer p,
footer strong,
footer b,
footer {
    color: #b0b0b0;
}


/* ----------------------------------- */

main {
    padding-top: var(--BlocPadding);
    margin-top: 0;
    max-width: 100rem;
    margin: 0 auto;
}

.entete_sondage_description p,
.section_description,
.question_description,
.choix_description {
    white-space: pre-line;
}


/* ----------------------------------- */

.toast-container {
    z-index: 999;
    width: 100%;
}

.toast-body {
    margin: auto;
}


/* ----------------------------------- */

.entete_sondage_titre {
    margin-block: var(--margin-40);
    min-height: 100%;
    padding-block: var(--padding-5);
    background-color: var(--Color1);
    display: block;
}

.entete_sondage_titre h1 {
    text-align: center;
    padding: var(--padding-5);
    margin: var(--margin-5);
    font-size: var(--font-size-sondage-titre);
    font-family: 'Kaushan Script', cursive;
    /* font-family: 'Great Vibes', cursive; */
    letter-spacing: 1px;
    font-weight: normal;
}

.entete_sondage_description p {
    padding: var(--padding-5);
    margin: var(--margin-20);
    letter-spacing: 1px;
    font-weight: normal;
    font-size: var(--font-size-sondage-discription);
}

.entete_sondage hr {
    margin: var(--margin-20);
    border: 1px solid #8c8b8b;
    /* height: 2px;
background-image: -webkit-linear-gradient( left, var(--Color1), #8c8b8b, var(--Color1));
background-image: -moz-linear-gradient( left, var(--Color1), #8c8b8b, var(--Color1));
background-image: -ms-linear-gradient( left, var(--Color1), #8c8b8b, var(--Color1));
background-image: -o-linear-gradient( left, var(--Color1), #8c8b8b, var(--Color1)); */
}

.bouton_retour {
    background: blanchedalmond;
}

*/
/* -------------------------------------------------*/

.section_main {
    padding: var(--padding-50);
    width: 100%;
    min-width: 25rem;
}


/*  Bloc de Votant---------------------------------------- */

.block-option {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.bloc_votant {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 1rem;
    width: 100%;
    min-width: 25rem;
}

.option {
    background-color: var(--Color0);
    padding: 2rem;
    margin: 1rem;
    border-radius: var(--RadiusBtn);
    /* padding-top: var(--padding-10); */
    display: block;
    /* justify-content: center; */
    /* flex-direction: column; */
}

.option1 {
    background-color: var(--Color7);
}

.option1 hr {
    border: 0;
    margin: var(--margin-10);
    height: var(--height-2);
    background-image: -webkit-linear-gradient(left, var(--Color7), #8c8b8b, var(--Color7));
}

.option2 {
    background-color: var(--Color8);
}

.option2 hr {
    border: 0;
    margin: var(--margin-10);
    height: var(--height-2);
    background-image: -webkit-linear-gradient(left, var(--Color8), #8c8b8b, var(--Color8));
}


/* optionZ -> option */

.option button {
    color: white;
    align-self: flex-end;
    padding: 0.375rem 0.75rem;
    background-color: var(--Color4);
    /* margin-top: var(--margin-15); */
    width: fit-content;
    border-radius: var(--RadiusBtn);
}

.option button:hover {
    background-color: var(--Color5);
}

.option .bouton_supprimer{background: var(--Color12);}
.option .bouton_supprimer:hover {background-color: var(--Color121);}

.option .anonym {
    margin-bottom: 1rem;
}

/* nom-numéro votant*/
.option h5 {
    font-size: 1em;
    letter-spacing: 2px;
    text-align: center;
    padding: 0;
    margin: 0;
    font-weight: normal;
}

.option p {
    font-size: 0.5rem;
    text-align: left;
    font-weight: normal;
}

.option span {
    margin: var(--margin-15);
    display: flex;
    justify-content: center;
}

.option input {
    border: none;
    outline: none;
    border-radius: var(--RadiusInput);
    box-sizing: border-box;
    /* padding: 1em; */
    margin-bottom: 1em;
    width: auto;
}

.option .form-floating>label{
    color: black
}


/*  ---------------------------------------- */

.section_vote {
    /* inclure bien section_main -> marge négative sur le titre?*/
    margin-inline: var(--margin-sondage-sondage-corps);
    padding-block: var(--padding-sondage-sondage-corps);
    width: var(--width-sondage-sondage-corps);
    border: solid 1px black;
}


/* -------------------------------------------------------- */

.col_resultat {
    padding: 1px 10px;
}


/* -------------------------------------------------------- */

.nav_onglet ul.tabs {
    border: solid 0px;
}

.nav_onglet ul.tabs li {
    list-style: none;
    display: inline;
}

.nav_onglet ul.tabs li a,
.nav_onglet ul.tabs li button {
    background-color: var(--Color7);
    color: var(--Color14);
    margin-inline: var(--margin-1);
    padding: var(--padding-15);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-decoration: none;
    font-size: var(--font-size-12);
    letter-spacing: 1px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid rgb(0, 0, 0);
}

.nav_onglet ul.tabs li a:hover,
.nav_onglet ul.tabs li button:hover {
    background-color: var(--Color14);
    color: var(--Color7);
    border-color: var(--Color15);
}

.nav_onglet ul.tabs li a.active_tab,
.nav_onglet ul.tabs li button.active_tab {
    background-color: var(--Color14);
    color: var(--Color7);
    border: 1px solid rgb(0, 0, 0);
    border-bottom: 1px solid rgb(0, 0, 0);
}


/* Contenu question------------------*/
/*
.question_action {
margin-block: var(--margin-10);
display: flex;
flex-direction: row;
justify-content: space-between;
}

.bouton_actualiser:hover,
.bouton_voter:hover,
.collapsed_result_btn:hover,
.bouton_mes_votes:hover,
.bouton_detail:hover {
color: white;
background-color: var(--Color1);
}

.icone_reduire {
text-decoration: none;
font-size: 1rem;
color: white;
}

.bouton_reduire:after {
padding-left: var(--padding-5);
font-family: 'Font Awesome 5 Free';
content: '\f0dc';
font-weight: 900;
float: right;
margin-right: var(--margin-10);
}

.bouton_reduire,
.bouton_actualiser,
.bouton_voter,
.collapsed_result_btn,
.bouton_mes_votes,
.bouton_detail,
.bouton_supprimer{
margin: var(--margin-3);
display: inline-block;
font-weight: 400;
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
color: white;
border-radius: var(--RadiusBtn);
}

.bouton_actualiser,
.bouton_voter,
.bouton_mes_votes,
.bouton_detail {
background-color: var(--Color8);
}

.collapsed_result_btn {
background-color: var(--Color4);
}

.bouton_reduire {
background-color: var(--Color4);
}

.bouton_reduire:hover {
color: white;
background-color: var(--Color5);
}

.bouton_supprimer{
background: var(--Color12);
}
.bouton_supprimer:hover {
background-color: var(--Color121);
}


.collapsed_result_btn:after {
padding-left: var(--padding-5);
font-family: 'Font Awesome 5 Free';
content: '\f13a';
font-weight: 900;
float: right;
margin-right: var(--margin-10);
}

.vote_result_btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}


/*------------------*/

.table_liste_choix .table_condorcet :nth-child(odd) {
    background: transparent;
}


/*------------------*/

.tabBtn {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.bttn {
    width: max-content;
    background: var(--Color4);
    height: var(--ButtonHeight);
    line-height: var(--ButtonLineHeight);
    font-size: var(--ButtonFontSize);
    letter-spacing: var(--ButtonLetterSpacing);
    padding: 10px 20px;
    margin-block: var(--margin-30);
    text-align: center;
    color: #fff;
    border-radius: 25px;
}

.inactive {
    width: max-content;
    background: var(--Color4);
    height: var(--ButtonHeight);
    line-height: var(--ButtonLineHeight);
    font-size: var(--ButtonFontSize);
    letter-spacing: var(--ButtonLetterSpacing);
    background: grey;
    padding: 10px 20px;
    margin-block: var(--margin-30);
    text-align: center;
    color: #fff;
    border-radius: 25px;
}

.inactive:hover {
    text-decoration: none;
    color: #fff;
    background: grey;
}

.btnValid {
    width: max-content;
    background: var(--Color4);
    height: var(--ButtonHeight);
    line-height: var(--ButtonLineHeight);
    font-size: var(--ButtonFontSize);
    letter-spacing: var(--ButtonLetterSpacing);
    padding: 10px 20px;
    margin-block: var(--margin-30);
    text-align: center;
    color: #fff;
    border-radius: var(--RadiusBtn);
    background: var(--Color12);
}

.btnValid:hover {
    text-decoration: none;
    color: #fff;
    background: var(--Color13);
}

.btnRefresh {
    width: max-content;
    background: var(--Color4);
    height: var(--ButtonHeight);
    line-height: var(--ButtonLineHeight);
    font-size: var(--ButtonFontSize);
    letter-spacing: var(--ButtonLetterSpacing);
    padding: 10px 20px;
    margin-block: var(--margin-30);
    text-align: center;
    color: #fff;
    border-radius: var(--RadiusBtn);
    background: var(--Color8);
}

.btnRefresh:hover {
    text-decoration: none;
    color: #fff;
    background: var(--Color7);
}

.bttn:hover {
    text-decoration: none;
    color: #fff;
    background: var(--Color1);
}


/* -----------------------------*/


/* ------------------------------------------- */

.content,
.section_content {
    padding: var(--padding-10);
    border: 1px solid var(--Color7);
    translate: 1px;
}


/* ------------------------------------------- */

.full_section_titre {
    margin-top: var(--margin-30);
    margin-bottom: var(--margin-20);
}

.empty_ribbon {
    margin-block: var(--margin-5);
    height: var(--height-5);
    background-color: var(--Color7);
}


/* ---------------------------------*/

.section_action {
    /* display: flex;
flex-direction: row;
justify-content: flex-end; */
    /* align-self: flex-end; */
    margin-left: var(--margin-10);
    margin-top: var(--margin-10);
}

.fa-sort {
    font-size: var(--font-size-25);
}

.fa-sort:hover {
    color: #dd5f24;
}


/* ---------------------------------*/

.section_titre {
    text-align: center;
    background-color: var(--Color7);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.section_titre h3 {
    /* align-self: center; */
    padding: var(--padding-5);
    margin: 0;
    font-weight: normal;
    font-family: 'Kaushan Script', cursive;
    /* font-family: 'Great Vibes', cursive; */
    font-size: var(--font-size-section-titre);
    letter-spacing: 5px;
}

.section_description {
    font-size: var(--font-size-section-discription);
    margin: var(--margin-20);
    font-style: italic;
}

#content_2,
#content_3 {
    display: none;
}

.question,
.question_titre {
    
    background-color: var(--Color7);
    margin: var(--margin-50) 0;
    padding: 1em 
}

.question_titre h4 {
    text-align: center;
    font-weight: normal;
    font-family: 'Kaushan Script', cursive;
    /* font-family: 'Great Vibes', cursive; */
    padding-block: var(--padding-10);
    font-size: var(--font-size-question-titre);
    letter-spacing: 5px;
}

.question_description{
    margin: var(--margin-20);
    font-style: italic;
    font-size: var(--font-size-question-discription);
}

/* -----------------------------------*/

.info_question {
    /* padding-block: 20px;
    padding-inline: 20px; */
    width: fit-content;
    padding: 0.2rem;
    margin: 0.2rem;
    font-size: var(--font-size-question-info_question);
    border-radius: 2rem;
    border: solid 0.6rem var(--Color12);
    
}

.info_Avote_oui {
    width: fit-content;
    padding: 0.2rem 0.2rem;
    margin: 0.2rem;
    font-size: 1.6rem;
    border-radius: 2rem;
    border: solid 0.3rem var(--Color5);
    color: var(--Color5);
}

.info_Avote_non {
    width: fit-content;
    padding: 0.2rem 1rem;
    margin: 0.2rem;
    font-size: 1.4rem;
    border-radius: 2rem;
    border: solid 0.3rem var(--Color12);
    color: var(--Color12);
}


.form-floating {
    margin-block: var(--margin-10);
    color: black
}

/* ----------------------------------*/

.modeVoteTitle {
    font-size: var(--font-size-question-modeVoteTitle);
}

.table_lexique {
    margin-top: var(--margin-5);
}

.table_lexique th {
    padding: 1em 1em;
    margin: 10px 20px;
}

.indicateur_mode_vote {
    padding-block: var(--padding-30);
}


/* ----------------------------------------------------*/

.mode_de_vote {
    padding-inline: var(--padding-20);
    padding-top: var(--padding-20);
    text-decoration: none;
    font-size: var(--font-size-question-mode_de_vote);
    color: var(--Color14);
    /* white*/
}

.mode_de_vote i {
    margin-right: var(--margin-20);
}

.mode_de_vote:hover {
    color: var(--Color14);
}


/* ----------------------------------------------------*/

.collapsed_btn {
    background-color: transparent;
    cursor: pointer;
    padding: var(--padding-5);
    padding-inline: var(--padding-20);
    margin-top: var(--margin-20);
    width: max-content;
    text-align: left;
    outline: none;
    font-size: var(--font-size-question-bouton-collapsed_btn);
    transition: 0.5s;
    color: var(--Color14);
    border: 1px solid transparent;
    border-radius: 10px;
}

.collapsed_btn:after {
    padding-left: var(--padding-5);
    font-family: 'Font Awesome 5 Free';
    content: '\f13a';
    font-weight: 900;
    float: right;
    margin-right: var(--margin-10);
}

.collapsed_btn:hover {
    background-color: transparent;
}

.updateIcon:after {
    font-family: 'Font Awesome 5 Free';
    content: '\f139';
    font-weight: 900;
    float: right;
    margin-right: var(--margin-10);
    color: var(--Color14);
}


/*

.cQuoiLePrincipe button:hover , .cQuoiLePrincipe .collapsed_i{
/* active class will be use in javascript *
background-color: var(--Color5);
color:grey;
}

.cQuoiLePrincipe button {
/* active class will be use in javascript *
background-color: var(--Color7);
cursor: pointer;
padding: var(--padding-5);
margin-left: var(--margin-25);
margin-top: var(--margin-20);
width: max-content;
border: solid 1px #000;
text-align: left;
outline: none;
font-size: var(--font-size-14);
transition: 0.5s;
color : white;
}

.cQuoiLePrincipe a{
color:white;
}

/* Adding font awesome icones in CSS code */


/*
.cQuoiLePrincipe button:after {
padding-left: var(--padding-5);
font-family: 'Font Awesome 5 Free';
content: '\f13a';
font-weight: 900;
float: right;
margin-right: var(--margin-10);
}

.cQuoiLePrincipe button:after , .cQuoiLePrincipe .collapsed_i:after{
font-family: 'Font Awesome 5 Free';
content: '\f139';
font-weight: 900;
float: right;
margin-right: var(--margin-10);
color: var(--Color14);
}


/** ------------------------------------------- */


/* Display none transition effect  */

.section_corps {
    transition: all 0.5s linear;
    display: block;
}

.question_corps {
    transition: all 0.5s linear;
    display: block;
}

.collapsed_btn_table {
    transition: all 0.5s linear;
    display: block;
}

.question_corps_resultat {
    transition: all 0.5s linear;
    display: block;
}

.visuallyhidden {
    opacity: 0;
}

.hidden {
    display: none;
}


/** ------------------------------------------- */

.question_corps_table {
    display: flex;
    justify-content: center;
    margin-block: var(--margin-10);
}

.question_corps_table_content {
    margin-top: var(--margin-10);
    width: fit-content;
    border-top: 25px;
    overflow: hidden;
    align-self: center;
    border: solid 2px var(--Color7);
    border-radius: 25px;
    padding: var(--padding-15);
}


/** ------------------------------------------- */

.fa-chevron-circle-right {
    padding-left: var(--padding-10);
}

.fa-chevron-circle-left {
    padding-right: var(--padding-10);
}

.fa-check-circle {
    padding-left: var(--padding-10);
}

.fa-solid,
.fa-circle-info,
.fas,
.fa,
.bi {
    margin-inline: 0.2em;
place-self: center;}


/** ------------------------------------------- */

.bouton_detail {
    margin-bottom: var(--margin-20);
}


/** ------------------------------------------- */

/** ------------------------------------------- */

.data_votants {
    margin: 20px 10px;
    color: var(--Color14);
    text-decoration: none;
    font-size: 1rem;
    align-self: flex-start;
}

.btn_results {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
}

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

.question_corps_resultat .question_corps_resultat_content {
    display: flex;
    flex-direction: column;
}

.block_diagramme {
    margin-top: var(--margin-20);
    align-self: center;
}

/* ------------------------------------------------- */

/* ------------------------------------------------- */


/*L'OPACITÉ DE LA VIGNETTE CHANGE LORS DU HOVER*/

img:hover {
    opacity: 0.8;
    transition: opacity 0.9s;
}


/*LE STYLE DU TEXTE CLICK TO ZOOM*/

.click {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    z-index: 10;
    color: white;
    background-color: var(--Color7);
    font-size: 1em;
    font-family: 'Lucida Console', Courier, monospace;
    opacity: 0;
    /*opacity 0 car le texte ne doit pas être affiché avant le hover*/
}

.box:hover .click {
    opacity: 1;
    z-index: 3;
    /*le texte passe à opacity 1 et devient visible*/
    transition: opacity 0.9s;
}


/*flexbox*/

.conteneur-flexbox {
    /* max-width: fit-content; */
    margin-block: var(--margin-40);
    padding: 0px 0;
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.box {
    position: relative;
    /* width: 300px;
height: 300px; */
    border: 1px solid #838383;
    align-self: center;
    background-color: var(--Color141);
}


/*LIGHTBOX*/

body:after {
    content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/265602/close.png) url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/265602/loading.gif);
    display: none;
}

body.lb-disable-scrolling {
    overflow: hidden;
}

.lightboxOverlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: black;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.8;
    display: none;
}

.lightbox {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 10000;
    text-align: center;
    line-height: 0;
    font-weight: normal;
}

.lightbox .lb-image {
    display: block;
    height: auto;
    max-width: inherit;
    max-height: none;
    border-radius: 3px;
    /* Image border */
    border: 4px solid white;
}

.lightbox a img {
    border: none;
    object-fit: cover;
}

.lb-outerContainer {
    position: relative;
    *zoom: 1;
    width: var(--width-250);
    height: var(--height-250);
    margin: 0 auto;
    border-radius: 4px;
    /* Background color behind image.
This is visible during transitions. */
    background-color: white;
}

.lb-outerContainer:after {
    content: '';
    display: table;
    clear: both;
}

.lb-number {
    visibility: hidden;
}

.lb-loader {
    position: absolute;
    top: 43%;
    left: 0;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
}

.lb-cancel {
    display: block;
    width: var(--width-32);
    height: var(--height-32);
    margin: 0 auto;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/265602/loading.gif) no-repeat;
}


/* .lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
} */

.lb-container>.nav {
    left: 0;
}

.lb-nav a {
    outline: none;
    background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-dataContainer {
    margin: 0 auto;
    padding-top: var(--padding-5);
    *zoom: 1;
    width: 100%;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
    content: '';
    display: table;
    clear: both;
}

.lb-data {
    padding: 0 4px;
    color: white;
    font-family: 'work_sans', sans-serif;
}

.lb-data {
    width: 85%;
    float: left;
    text-align: left;
    line-height: 1.1em;
    font-family: 'work_sans', sans-serif;
}

.lb-data {
    font-family: 'work_sans', sans-serif;
    font-size: var(--font-size-13);
    font-weight: bold;
    line-height: 1em;
}

.lb-data {
    color: #4ae;
}

.lb-data {
    display: block;
    clear: left;
    padding-bottom: 1em;
    font-size: var(--font-size-12);
    color: #999999;
}

.lb-data .lb-close {
    display: block;
    float: right;
    width: var(--width-30);
    height: var(--height-30);
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/265602/close.png) top right no-repeat;
    text-align: right;
    outline: none;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
    cursor: pointer;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}


/* *******************************************  */

.black_overlay {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: fixed;
    top: 25%;
    left: 25%;
    width: 50%;
    height: min-content;
    background-color: white;
    z-index: 1002;
    overflow: auto;
}

.white_content img {
    width: 100%;
    object-fit: cover;
}

.closeImg {
    padding-inline: var(--padding-20);
    display: flex;
    justify-content: flex-end;
}

.closeImg a {
    font-weight: bold;
    margin-top: var(--margin-10);
    color: black;
    text-decoration: none;
    padding-inline: var(--padding-15);
    padding-block: var(--padding-5);
    width: max-content;
    background-color: rgba(255, 0, 0, 1);
    border-radius: 25px;
}


/** ------------------------------------------- */

.table_liste_to_check {
    margin: auto;
    width: fit-content;
    /* border-collapse: separate; */
    border-top: 25px;
    overflow: hidden;
    align-self: center;
    border: solid 2px var(--Color7);
    border-radius: 25px;
    padding: var(--padding-15);
}


/** ------------------------------------------- */

.table_liste_choix {
    margin: auto;
    width: fit-content;
    /* border-collapse: separate; */
    border-top: 25px;
    overflow: hidden;
    align-self: center;
    border: solid 2px var(--Color7);
    border-radius: 25px;
    padding: var(--padding-15);
}

.table_liste_choix thead tr {
    background: var(--Color7);
}

.table_liste_choix thead th {
    padding: 0.7em;
    font-size: var(--font-size-table_liste_choix_th);
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
}

.table_liste_choix tbody tr:nth-child(even) {
    background: var(--Color17);
}

.table_liste_choix tbody tr:nth-child(odd) {
    background: var(--Color16);
}


.table_liste_choix tbody th{    text-align: center;}
.table_liste_choix tbody td{    text-align: left;}

.table_liste_choix_container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bouton_voter_container {
    align-self: flex-end;
    margin: 20px 15px;
}

.table_liste_choix tbody td {
    padding: var(--padding-table_liste_choix);
}

.choix_nom{
    font-size: 1em;
    font-weight: bold;
}
.choix_description{
    font-size: 1em;
    font-style: italic;
    font-weight: normal;
}


/** ------------------------------------------- */

.checkbox_responses {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 10px;
    font-size: var(--font-size-16);
    letter-spacing: 3px;
}

.checkbox_single_response {
    margin-left: var(--margin-10);
}

.col_note {
    margin-left: var(--margin-10);
    color: var(--Color14);
}

.col_note a {
    color: var(--Color15);
}

.col_note select {
    color: var(--Color7);
    padding: 0.4em;
    font-weight: bold;
}

.col_note input {
    color: var(--Color7);
}


/* .col_note.decorated option:checked {
box-shadow: 0 0 10px 100px #61d190 inset;
} */

.optionMention:hover {
    background-color: yellow;
}


/** ------------------------------------------- */

.class_photo {
    border: solid;
    border: 1px solid #ffffff;
    max-height: calc(20vw + 5rem);
    max-width: calc(20vw + 5rem);
    margin-bottom: var(--margin-10);
}


/* ----------------------------------- */

input[type='number'] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.col_note {
    background-color: var(--Color14);
    border-radius: 25px;
    border: 0;
    display: inline-flex;
    align-items: center;
}

.col_note,
.col_note * {
    box-sizing: border-box;
}

.col_note button {
    outline: none;
    -webkit-appearance: none;
    background-color: var(--Color7);
    border: none;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    cursor: pointer;
    margin: 0;
    position: relative;
    box-shadow: 0px 0px 1px var(--Color14);
    border: 1px solid var(--Color14);
    border-radius: 50%;
}

.col_note button:before,
.col_note button:after {
    display: inline-block;
    position: absolute;
    content: '';
    width: 1em;
    height: var(--height-2);
    background-color: var(--Color14);
    transform: translate(-50%, -50%);
}

.col_note button.plus:after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.col_note input[type='number'] {
    font-family: sans-serif;
    width: 1.5em;
    padding: 0rem;
    margin: 0em;
    border: none;
    border-width: 0 2px;
    font-size: 2em;
    height: 1em;
    font-weight: bold;
    text-align: center;
    color: var(--Color7);
}

.col_resultat {
    background-color: var(--Color14);
    border-radius: 25px;
    border: 0;
    /* display: inline-flex; */
    color: black;
    margin: 0.5rem;
    padding: 0.5rem;
}

.input-group-prepend {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* border: solid 2px var(--Color7);
border-radius: 25px; */
    margin: var(--margin-5);
}

.table_liste_choix .input-group-prepend .table_profil {
    /* background-color: var(--Color8); */
    border-radius: 10px;
    margin-bottom: var(--margin-10);
    width: fit-content;
    border: solid 2px var(--Color7);
    /* border-radius: 25px; */
    padding: var(--padding-15);
    overflow: hidden;
    border-radius: 25px;
}


/* .table_liste_choix .input-group-prepend .table_profil thead tr {
background: var(--Color7);
} */

.table_liste_choix .table_profil thead tr {
    background: var(--Color7);
}

.table_profil tbody .col_note {
    /* background-color: transparent; */
}
.table_liste_choix .table_profil{
    font-size: 23px;
}

.table_liste_choix .table_profil th{
    padding: 0;
    margin: 0;
    font-size: 0.8em;
    font-weight: normal;
    text-align: left;
}

.table_liste_choix .table_profil td{
    padding: 0;
    margin: 0;
    font-size: 0.6em;
    text-align: center;
}


/* -----------------------------------*/

.resetValue {
    border-radius: 2em;
    margin-inline: var(--margin-20) 0;
    border: 0;
    padding: 0.3em 0.7em;
    background-color: var(--Color12);
    color: var(--Color14);
    text-decoration: none;
    font-size: 1em;
}

.resetValue:hover {
    border: 1px solid var(--Color14);
    color: var(--Color14);
}


/* -----------------------------------*/

.baremeNote {
    margin-inline: var(--margin-10);
    color: var(--Color14);
    font-size: var(--font-size-20);
    letter-spacing: 3px;
    text-decoration: none;
    vertical-align: -webkit-baseline-middle;

    font-size:0.9em;
    padding:0;
    margin: 0em;
    margin-left:0.3em;
}

.baremeNote:hover {
    color: var(--Color14);
}

.diagramme_img {
    width: 100%;
    max-width: 50rem;
}



/*
.footer-site-info {
font-size: var(--font-size-22);
}

footer a,
footer p {
font-size: var(--font-size-22);
} */


/* -----------------------------------*/

@media (max-width: 767px) {
    .invisible_md {
        display: none;
    }

    .baremeNote{
		font-size:0.8em;
        margin: 0em;
        margin-left:0.3em;
            
	}

    .table_liste_choix  .table_profil {
        font-size: 16px;
    }
    
}

@media (min-width: 768px) {
    .visible_md {
        display: none;
    }

    .col_note input[type='number'] {
        font-size: 1.5em;
    }
    
}