body {
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    display: flex;
    flex-direction: row;
    align-items: start;
    width: 100%;
    height: 100vh;
    margin: 0;
}

li{
    max-width: 855px;
}

#top_bar{
    background-color:#F1F1F1;
    display: flex;
    position: fixed;
    flex-direction: column;
    width: 260px;
    height: 100%;
    top: 0px;
    left: 0px;
}

#pagination{
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 15px;
}

.btn_round {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #e0e0e0; /* Gris clair */
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; 
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.3s;
}


.btn_round:disabled {
    background-color: #ff6600; 
    color: #ffffff;            
    cursor: not-allowed;
}

.btn_round:hover:not(:disabled) {
    background-color: #cccccc;
}

#logo{
    height: 45px;
    width: 197px;
    margin-top: 10px;
    margin-bottom : 10px;
}

.subody{
    margin-top: 20px;
    margin-left: 280px;
    width: fit-content;
}

#text_popup{
    overflow-y: scroll;
    overflow-x: hidden;
    text-align: justify;
    padding-bottom: 30px;
    font-size: 15px;
    height: 65%;
    white-space: pre-wrap;
}

.table_pagination{
    display: flex;
    flex-direction: row;
    justify-content: end;
    margin-right: 50px;
    align-items: center;
    margin-bottom: 10px;
}

#nb_lines{
    color: #444444;
    font-size: 13px;
    text-align: right;
    margin-left: 10px;
    margin-right: 10px;
}

.nav_btn{
    margin: 5px;
    background-color: #eee;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    text-align: center;
    user-select: none;
}

.nav_btn:hover{
    cursor: pointer;
    background-color: #ff6600;
    color: white;
}

#pic_sorry{
    height: 400px;
    width: 400px;
    border-radius: 300px;
    margin-left: 100px;
    margin-bottom: 40px;
    background-position-x: 50%;
    background-size: 600px 466px;
    background-image: url('src/waiting.png');
}

.sorry_txt{
    margin-left: 100px;
    font-size: 35px;
}

.sorry_name{
    margin-left: 100px;
    font-size: 40px;
    color:#FF6600;
    font-weight: bold;
}

#txt_popup{
    overflow-y: scroll;
    overflow-x: hidden;
    height: 90%;
}

.left_options{
    font-size: 16px;
    color: #777777;
    overflow-y: scroll;
}

.option_item{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 24px;
    flex: 1 1 0;      /* permet au flex-item de rétrécir */
    min-width: 0;     /* autorise la largeur à devenir plus petite que le contenu */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option_item_job{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    display: block;
    flex-direction: row;
    font-weight: bold;
    align-items: center;
    height: 24px;
    flex: 1 1 0;      /* permet au flex-item de rétrécir */
    min-width: 0;     /* autorise la largeur à devenir plus petite que le contenu */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option_item_job_sel{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 11px;
    display: block;
    flex-direction: row;
    font-weight: bold;
    align-items: center;
    background-color: #ffe7d7;
    border-left: #FF6600 4px solid;
    height: 24px;
    flex: 1 1 0;      /* permet au flex-item de rétrécir */
    min-width: 0;     /* autorise la largeur à devenir plus petite que le contenu */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option_item_sel{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 11px;
    background-color: #ffe7d7;
    border-left: #FF6600 4px solid;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 24px;
}

.sub_option_item{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 24px;
}

.option_cand{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 50px;
    font-size: 15px;
    display: block;
    flex-direction: row;
    align-items: center;
    height: 22px;
    flex: 1 1 0;      /* permet au flex-item de rétrécir */
    min-width: 0;     /* autorise la largeur à devenir plus petite que le contenu */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option_cand_sel{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 46px;
    font-size: 15px;
    display: block;
    flex-direction: row;
    background-color: #ffe7d7;
    border-left: #FF6600 4px solid;
    align-items: center;
    height: 22px;
    flex: 1 1 0;      /* permet au flex-item de rétrécir */
    min-width: 0;     /* autorise la largeur à devenir plus petite que le contenu */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option_cand:hover{
    background-color: #e2e2e2;
    cursor: pointer;
}

.sub_option_item_sel{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 26px;
    background-color: #ffe7d7;
    border-left: #FF6600 4px solid;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 24px;
}

.option_item:hover{
    background-color: #e2e2e2;
    cursor: pointer;
}

.option_item_job:hover{
    background-color: #e2e2e2;
    cursor: pointer;
}

.option_item_sel:hover{
    cursor: pointer;
}

.option_cand_sel:hover{
    cursor: pointer;
}

.sub_option_item:hover{
    background-color: #e2e2e2;
    cursor: pointer;
}

.sub_option_item_sel:hover{
    cursor: pointer;
}

#ico_home{
    height: 20px;
    width: 20px;
    margin-right: 7px;
    background-position-x: 0;
    background-image: url('src/home_24.png');
    background-size: 20px 20px;
}

#ico_rec{
    height: 20px;
    width: 20px;
    margin-right: 7px;
    background-position-x: 0;
    background-image: url('src/group_search_24.png');
    background-size: 20px 20px;
}

#ico_info{
    height: 20px;
    width: 20px;
    margin-right: 7px;
    background-position-x: 0;
    background-image: url('src/assignment_24.png');
    background-size: 20px 20px;
}

#ico_quest{
    height: 20px;
    width: 20px;
    margin-right: 7px;
    background-position-x: 0;
    background-image: url('src/quiz_24dp.png');
    background-size: 20px 20px;
}

#ico_cand{
    height: 20px;
    width: 20px;
    margin-right: 7px;
    background-position-x: 0;
    background-image: url('src/contacts_24.png');
    background-size: 20px 20px;
}

#ico_add{
    height: 20px;
    width: 20px;
    margin-right: 7px;
    background-position-x: 0;
    background-image: url('src/group_add_24.png');
    background-size: 20px 20px;
}

#ico_cal{
    height: 20px;
    width: 20px;
    margin-right: 7px;
    background-position-x: 0;
    background-image: url('src/calendar_month_24.png');
    background-size: 20px 20px;
}

#ico_param{
    height: 20px;
    width: 20px;
    margin-right: 7px;
    background-position-x: 0;
    background-image: url('src/settings_24.png');
    background-size: 20px 20px;
}

.horange{
    color: #FF6600;
}

#ico_disconect{
    height: 20px;
    width: 20px;
    margin-right: 7px;
    background-position-x: 0;
    background-image: url('src/power__24.png');
    background-size: 20px 20px;
}

#body_connexion {
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 100vh;
    align-items: center;
    margin: 0;
}

#connect{
    margin-left: 30px;
    margin-right: 30px;
    text-align: center;
}

#connex_left{
    flex: 60%;
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: start;
    justify-content: start;
    user-select: none;
    background-image: url('src/back_ground.jpg') ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#top_pic{
    display: flex;
    flex: 60%;
    position:absolute ;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
}

#mdp_forgotten:hover{
    cursor: pointer;
}

#err_con{
    visibility: hidden;
    font-size: 12px;
}

#err_msg{
    visibility: hidden;
    font-size: 12px;
    width: 100%;
    text-align: center;
    color: #FF6600;
}

#login_shadow{
    display: none;
}

#connex_right{
    display: flex;
    flex-direction: column;
    flex: 40%;
    background-color: #FF6600;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: white;
    max-width: 500px;
    z-index: 11;
}

#connex_form{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#logo_connex{
    width: 450px;
    user-select: none;
    margin: 26px;
    z-index: 12;
}

#zone_logo{
    height: 100%;
    width: 100%;
    z-index: 15;
    color: white;
    font-size: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#txrt{
    width: 60%;
    text-align: center;
}



.saisie1{
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 15px;
    width: 60%;
    height: 35px;
    border-radius: 20px;
    margin: 10px;
    background-color: white;
    padding-left: 10px;
    border-style: none;
}

.bit_loader {
    border: 2px solid #ffffff; /* Light grey */
    border-top: 2px solid #FF6600; /* Blue */
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin-left: 3px;
    animation: spin 1s linear infinite;
    display: none;
  }

  .med_loader {
    border: 2px solid #ffffff; 
    border-top: 2px solid #FF6600; 
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-left: 3px;
    animation: spin 1s linear infinite;
    display: none;
  }

#no_result{
    display: none;
}

#result_zone{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loader {
    border: 3px solid #ffffff; /* Light grey */
    border-top: 3px solid #FF6600; /* Blue */
    border-radius: 50%;
    width: 17px;
    height: 17px;
    margin-left: 15px;
    animation: spin 1s linear infinite;
    display: none;
  }

  .loader2 {
    margin-top: 30px;
    border: 3px solid #FF6600; /* Light grey */
    border-top: 3px solid #ffffff; /* Blue */
    border-radius: 50%;
    width: 17px;
    height: 17px;
    margin-left: 5px;
    animation: spin 1s linear infinite;
    visibility: hidden;
  }

  .loader3 {
    border: 3px solid #FF6600; /* Light grey */
    border-top: 3px solid #ffffff; /* Blue */
    border-radius: 50%;
    width: 17px;
    height: 17px;
    margin-left: auto;
    margin-right: auto;
    animation: spin 1s linear infinite;
    display: none;
  }

  .loader02 {
    border: 3px solid rgba(0, 0, 0, 0); /* Light grey */
    border-top: 3px solid #ffffff; /* Blue */
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    animation: spin 1s linear infinite;
    visibility: hidden;
  }

  .loader5 {
    border: 3px solid #FF6600; /* Light grey */
    border-top: 3px solid #ffffff; /* Blue */
    border-radius: 50%;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    animation: spin 1s linear infinite;
    display: none;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  #btn_load{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

.btn_orange{
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    color: white;
    width: 60%;
    height: 40px;
    border-radius: 20px;
    margin: 10px;
    padding-left: 10px;
    background-color: #FF6600;
    margin-top: 20px;
    border-style: solid;
    border-width: 4px;
    border-color: white;
    user-select: none;
}

.btn_orange:hover{
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    color: white;
    width: 60%;
    height: 40px;
    border-radius: 20px;
    margin: 10px;
    padding-left: 10px;
    margin-top: 20px;
    background-color: #e15f08;
    border-style: solid;
    border-width: 4px;
    border-color: white;
}

.btn_orange2{
    display: flex;
    align-items: center;
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    color: white;
    width: 200px;
    height: 30px;
    border-radius: 20px;
    margin: 10px;
    padding-left: 10px;
    background-color: #FF6600;
    border-style: none;
    user-select: none;
}

.btn_orange2:hover{
    cursor: pointer;
    background-color: #e15f08;
}

.btn_orange3{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    color: white;
    min-width: 100px;
    height: 30px;
    border-radius: 20px;
    margin: 10px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #FF6600;
    border-style: none;
    user-select: none;
}

.btn_orange3:hover{
    cursor: pointer;
    background-color: #e15f08;
}

.btn_orange33{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    color: white;
    min-width: 100px;
    height: 25px;
    border-radius: 20px;
    margin-left: 20px;
    margin-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #FF6600;
    border-style: none;
    user-select: none;
}

.btn_orange33:hover{
    cursor: pointer;
    background-color: #e15f08;
}

.btn_oranges{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    color: white;
    min-width: 30px;
    height: 30px;
    border-radius: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #FF6600;
    border-style: none;
    user-select: none;
}

.btn_oranges:hover{
    cursor: pointer;
    background-color: #e15f08;
}

.btn_orange4{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    color: white;
    min-width: 100px;
    height: 30px;
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 15px;
    margin-right: 15px;
    margin-bottom: 20px;
    background-color: #FF6600;
    border-style: none;
    user-select: none;
}

.btn_orange4:hover{
    cursor: pointer;
    background-color: #e15f08;
}

.btn_grey{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    color: white;
    width: 100px;
    height: 30px;
    border-radius: 20px;
    margin: 10px;
    margin-right: 0px;
    padding-left: 10px;
    background-color: #BBBBBB;
    border-style: none;
    user-select: none;
}

.btn_grey:hover{
    cursor: pointer;
    background-color: #999999;
}

.btn_grey2{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 12px;
    color: white;
    width: 120px;
    height: 24px;
    padding-left: 5px;
    border-radius: 20px;
    background-color: #BBBBBB;
    border-style: none;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn_grey2:hover{
    cursor: pointer;
    background-color: #999999;
}

.btn_grey3{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    color: white;
    height: 24px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px;
    background-color: #BBBBBB;
    border-style: none;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn_grey3:hover{
    cursor: pointer;
    background-color: #999999;
}

.lab_par{
    margin-left: 5px;
}

.lab_check{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.td_ellipse{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chapeau{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.zone_alpha{
    width: 60%;
    border-style: solid;
    border-color: #EEEEEE;
    border-width: 1px;
    border-top: none;
    border-left: none;
    border-right: none;
    margin-bottom: 15px;
}

.zone_alpha2{
    width: 60%;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
}

.table_menu{
    display: flex;
    flex-direction: row;
}

.table_cherche{
    display: flex;
    flex-direction: row;
    margin-top: -20px;
    margin-left: 20px;
}

.ana_titre{
    font-size: 17px;
    font-weight: bold;
    color: #FF6600;
    margin-top: 20px;
}
.ana_stitre{
    font-size: 13px;
    font-style: italic;
    color: #AAAAAA;
}

.ana_txt{
    font-size: 16px;
    color: #333333;
}

.page_title{
    font-size: 30px;
    font-weight: bold;
    color: #FF6600;
    margin-bottom: 20px;
}

.subtitle{
    font-size: 20px;
    font-weight: bold;
    margin-left: 20px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;

}

#title_cand{
    margin-bottom: 5px;
}

#poste_eval{
    font-weight: lighter;
    margin-left: 6px;
}

#search_results{
    width: 450px;
    padding: 10px;
    display: none;
}
#search_results:hover{
    background-color: #f9f9f9;
}

.rec{
    margin-left: 10px;
}

.radio_bar{
    display: flex;
    flex-direction: row;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 25px;
}

input[class="btn_radio"]:not(:checked),
input[class="btn_radio"]:checked {
  position: absolute;
  left: -9999%;
}

input[class="btn_radio"]+label {
  display: flex;
  width: 125px;
  height: 22px;
  padding: 5px;
  margin: 5px;
  font-size: 13px;
  align-content: center;
  align-items: center;
  text-align: left;
  cursor: pointer;
  border-radius: 20px;
  color:#FFFF;
  background-color: #9999;
}

input[class="btn_radio"]:checked+label {
  border-radius: 20px;
  color: white;
  margin: 5px;
  background-color: #FF6600;
}

.saisie2{
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    width: 250px;
    height: 25px;
    border-color: #EEEEEE;
    border-radius: 20px;
    margin: 5px;
    background-color: white;
    padding-left: 10px;
    border-style: solid;
}

.saisie3{
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    width: 400px;
    min-height: 25px;
    border-color: #DDDDDD;
    border-radius: 4px;
    margin: 5px;
    background-color: white;
    padding-left: 10px;
    border-style: solid;
    border-width: 2px;
    margin-bottom: 10px;
}

.saisie3_{
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    width: 100px;
    min-height: 25px;
    border-color: #DDDDDD;
    border-radius: 4px;
    margin: 5px;
    background-color: white;
    padding-left: 10px;
    border-style: solid;
    border-width: 2px;
    margin-bottom: 10px;
}

.rsaisie{
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    width: 400px;
    min-height: 25px;
    border-color: #DDDDDD;
    border-radius: 4px;
    margin: 5px;
    background-color: #f9f9f9;
    padding-left: 10px;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 10px;
}

.qsaisie{
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    width: 400px;
    min-height: 25px;
    border-color: #DDDDDD;
    border-radius: 4px;
    margin: 5px;
    background-color: #f9f9f9;
    padding-left: 10px;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 10px;
}

.saisie4{
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    width: 250px;
    min-height: 25px;
    border-color: #DDDDDD;
    border-radius: 4px;
    background-color: white;
    padding-left: 2px;
    border-style: solid;
    border-width: 2px;
}

.saisie5{
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    width: 600px;
    min-height: 25px;
    border-color: #DDDDDD;
    border-radius: 4px;
    margin: 5px;
    background-color: white;
    padding-left: 10px;
    border-style: solid;
    border-width: 2px;
    margin-bottom: 10px;
}

.saisie_date{
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    min-height: 25px;
    border-color: #DDDDDD;
    border-radius: 4px;
    margin: 5px;
    background-color: white;
    padding-left: 10px;
    border-style: solid;
    border-width: 2px;
    margin-bottom: 10px;
    width: 150px;
}

.saisie6{
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    width: 110px;
    height: 25px;
    border-color: #EEEEEE;
    border-radius: 20px;
    margin: 5px;
    background-color: white;
    padding-left: 10px;
    border-style: solid;
}

.saisie6b{
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    width: 110px;
    height: 25px;
    border-color: #EEEEEE;
    border-radius: 20px;
    margin: 5px;
    background-color: #f9f9f9;
    padding-left: 10px;
    border-style: solid;
}

.lang_zone{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.saisie7{
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    width: 100%;
    min-height: 25px;
    border-color: #DDDDDD;
    border-radius: 4px;
    padding-left: 5px;
    background-color: white;
    border-style: solid;
    border-width: 2px;
}

.lab_rec{
    width: 200px;
    text-align: right;
    font-weight: bold;
    margin-left: 5px;
    display:flex;
    white-space: nowrap;
}

.lab_lang{
    text-align: right;
    font-weight: bold;
    margin-left: 5px;
    margin-right: 8px;
    display:flex;
    white-space: nowrap;
}

.avatar{
    display: flex;
    background-color: #766d79;
    font-size: 13px;
    color: white;
    height: 25px;
    width: 25px;
    aspect-ratio: 1;
    border-radius: 15px;
    font-weight: lighter;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
}

.tbl{
    font-size: 13px;
    margin-left: 25px;
    border-collapse: collapse;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: hidden;
}

th, tr{
    padding: 5px;
    break-inside: auto;
}

.thl{
    border-top-left-radius: 8px;
    border-left:6px solid #ff6600;
}

.thr{
    border-top-right-radius: 8px;
    break-inside: auto;
}

td{
    padding: 10px;
    vertical-align: middle;
}

.tblh{
    text-align: left;
    background-color: #E7E7E7;
    border: 1px solid #EEEEEE;
    border-left: none;
    border-top: none;
    border-right: none;
    break-inside: avoid;
}

.top_name{
    display: flex;
    flex-direction: row;
    font-weight: bold;
    margin-left: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    align-items: center;
}

.tblh2{
    text-align: left;
    background-color: #EEEEEE;
    border-left: none;
    border-top: none;
    border-right: none;
}

.tblr{
    border: 1px dotted #DDDDDD;
    border-left: none;
    border-top: none;
    border-right: none;
}

.tblr:hover{
    background-color: rgb(250, 250, 250);
}

.tblr2{
    border-left: none;
    border-top: none;
    border-right: none;
}

.tblr2:hover{
    background-color: rgb(245, 245, 245);
}

.tdc{
    text-align: center;
}

.td_ico{
    display: flex;
    flex-direction: row;
    margin: auto;
}

.tblico_view{
    height: 20px;
    width: 20px;
    margin-left: 10px;
    background-image: url('src/data_24g.png');
    background-size: 20px 20px;
}

.tblico_view:hover{
    background-image: url('src/data_24o.png');
    background-size: 20px 20px;
    cursor: pointer;
}

.tblico_modif{
    height: 20px;
    width: 20px;
    margin-left: 10px;
    background-image: url('src/edit_24g.png');
    background-size: 20px 20px;
}

.tblico_modif:hover{
    background-image: url('src/edit_24o.png');
    background-size: 20px 20px;
    cursor: pointer;
}

.tblico_send{
    height: 20px;
    width: 20px;
    margin-left: 10px;
    background-image: url('src/send_32.png');
    background-size: 20px 20px;
}

.tblico_send:hover{
    background-image: url('src/send_32o.png');
    background-size: 20px 20px;
    cursor: pointer;
}

.tblico_cv{
    height: 20px;
    width: 20px;
    margin-left: 10px;
    background-image: url('src/article_person_24.png');
    background-size: 20px 20px;
}

.tblico_cv:hover{
    background-image: url('src/article_person_24o.png');
    background-size: 20px 20px;
    cursor: pointer;
}

.tblico_ana{
    height: 20px;
    width: 20px;
    margin-left: 10px;
    background-image: url('src/full_stacked_bar_chart_24.png');
    background-size: 20px 20px;
}

.tblico_ana:hover{
    background-image: url('src/full_stacked_bar_chart_24o.png');
    background-size: 20px 20px;
    cursor: pointer;
}

.tblico_del{
    height: 20px;
    width: 20px;
    margin-left: 10px;
    background-image: url('src/delete_24g.png');
    background-size: 20px 20px;
}

.tblico_del:hover{
    background-image: url('src/delete_24o.png');
    background-size: 20px 20px;
    cursor: pointer;
}

.tblico_link{
    height: 20px;
    width: 20px;
    margin-left: 10px;
    background-image: url('src/link_24.png');
    background-size: 20px 20px;
}

.tblico_link:hover{
    background-image: url('src/link_24o.png');
    background-size: 20px 20px;
    cursor: pointer;
}

#search_cand_icon{
    height: 20px;
    width: 20px;
    background-image: url('src/search_24w.png');
    background-size: 20px 20px;
}


.tblico_up{
    height: 20px;
    width: 20px;
    margin-left: 10px;
    background-image: url('src/up24.png');
    background-size: 20px 20px;
}

.tblico_up:hover{
    background-image: url('src/up24o.png');
    background-size: 20px 20px;
    cursor: pointer;
}

.tblico_down{
    height: 20px;
    width: 20px;
    margin-left: 10px;
    background-image: url('src/down24.png');
    background-size: 20px 20px;
}

.tblico_down:hover{
    background-image: url('src/down24o.png');
    background-size: 20px 20px;
    cursor: pointer;
}

.tblico_chat{
    height: 20px;
    width: 20px;
    margin-left: 10px;
    background-image: url('src/voice_chat_24.png');
    background-size: 20px 20px;
}

.tblico_chat:hover{
    background-image: url('src/voice_chat24.png');
    background-size: 20px 20px;
    cursor: pointer;
}

.tblico_histo{
    height: 20px;
    width: 20px;
    margin-left: 10px;
    background-image: url('src/history_2_24.png');
    background-size: 20px 20px;
}

.tblico_histo:hover{
    background-image: url('src/history_2_24o.png');
    background-size: 20px 20px;
    cursor: pointer;
}

.tblico_close{
    height: 20px;
    width: 20px;
    margin-left: 10px;
    background-image: url('src/close_24.png');
    background-size: 20px 20px;
}

.tblico_close:hover{
    background-image: url('src/close_24o.png');
    background-size: 20px 20px;
    cursor: pointer;
}

.score-circle {
    display: flex; 
    justify-content: center;
    align-items: center;
    font-size: 10px;
    width: 21px;      
    height: 21px;   
    font-weight: bold;  
    border-radius: 50%; 
    color: white;
}

.score-circle:hover {
    cursor:pointer;
}

.tsort:hover{
    cursor:pointer;
}

.score-lower { 
    background-color: #E74C3C; 
}
.score-low { 
    background-color: #e7723c; 
}
.score-medium { 
    background-color: #fca105; 
}
.score-high { 
    background-color: #7fc443; 
}
.score-higher { 
    background-color: #09aa4c; 
}

/* 1. Conteneur (Base de positionnement) */
.tooltip-container {
    position: relative; /* ESSENTIEL pour positionner l'infobulle */
    display: inline-block;
    padding: 5px;
    cursor: default; /* Indique qu'il y a une interaction */
}

/* 2. Infobulle (Cachée par défaut) */
.tooltip-text {
    visibility: hidden; /* Cache l'élément */
    opacity: 0;       /* Rend l'élément transparent */
    
    /* Styles esthétiques */
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    
    /* Positionnement au-dessus */
    position: absolute;
    z-index: 10;
    bottom: 150%;
    left: 50%;
    margin-left: -60px; /* Centre la bulle */
    
    transition: opacity 0.3s; /* Transition douce */
}

/* 3. Affichage au survol (Sélecteur de base) */
.tooltip-container:hover .tooltip-text {
    visibility: visible; /* Rend l'infobulle visible */
    opacity: 1;          /* La rend opaque */
}

.ico_btn{
    height: 20px;
    width: 20px;
    margin-left: 5px;
    background-size: 20px 20px;
}

#rec_list th:nth-child(9),
#rec_list td:nth-child(9) {
    display: none; 
}


#ico_cours{
    background-image: url('src/schedule_24.png');
    margin-right: 7px;
}

#ico_tous{
    background-image: url('src/apps_24.png');
    margin-right: 7px;
}

#ico_draft{
    background-image: url('src/edit_square_24.png');
    margin-right: 7px;
}

#ico_plan{
    background-image: url('src/event_24.png');
    margin-right: 7px;
}


#ico_fin{
    background-image: url('src/check_circle_24.png');
    margin-right: 7px;
}

#ico_send{
    background-image: url('src/ssend_24.png');
    margin-right: 7px;
}

#ico_tag{
    background-image: url('src/tag_blanc.png');
    margin-right: 7px;
}

.masked{
    display: none;
}

.info_zone{
    display: flex;
    flex-direction: row;
    margin-left: 30px;
    margin-bottom: 15px;
}

#info_box{
    color: #FF6600;
    font-size: 14px;
    display: none;
}

.progress_bar{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 13px;
    margin-left: 20px;
    margin-bottom: 30px;
}

.bar_step{
    width: 200px;
}

.oranje{
    margin-left: 7px;
    color: #FF6600;
}

.tag_ico{
    width: 18px;
    height: 18px;
}

.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
  }
  .modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 20px;
    width: 300px;
    border-radius: 8px;
  }
  .close { float: right; cursor: pointer; font-size: 24px; }
  
  .bar-container {
    margin-bottom: 15px;
    background-color: #dddddd;
    border-radius: 10px;
    height: 10px;
    position: relative;
  }
  .bar-fill {
    height: 100%;
    border-radius: 10px;
    text-align: right;
    padding-right: 5px;
    color: white;
    font-size: 12px;
    line-height: 20px;
    transition: width 0.5s ease-in-out;
  }

  .label-text { 
    font-size: 13px; 
    color: #777777;
    margin-bottom: 5px; 
    display: block; 
}

#stitre_scores{
    font-size: 0.9rem; 
    color: #4f4f4f; 
    line-height: 1.4; 
    margin-bottom: 25px; 
    border-left: 5px solid #ff6600; 
    padding-left: 10px;
}

#avis_titre{
    color: black;
}

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

#corpo{
    display: flex;
    flex-direction: column;
    font-size: 14px;
    margin-bottom: 35px;
    align-items: center;
    flex-grow: 1;
    color: #777777;
}

#corpo > *:last-child {
    margin-top: auto;
}

#corp_img{
    flex-shrink: 0;
    width: 120px;
    height: auto;
    margin-bottom: 10px;
}

.text_step_orange{
    font-weight: bold;
    color: #FF6600;
    text-align: center;
    border: #FF6600 solid 2px;
    border-left: none;
    border-right: none;
    border-top: none;
    padding-bottom: 7px;
    height: 20px;
}

.text_step_grey{
    color: #BBBBBB;
    text-align: center;
    border: #BBBBBB solid 2px;
    border-left: none;
    border-right: none;
    border-top: none;
    padding-bottom: 7px;
    height: 20px;
}

.vide_step{
    height: 20px;
}

.round_step{
    display: flex;
    width: 20px;
    height: 20px;
    justify-content: center;
    text-align: center;
    background-color: #FF6600;
    color: #FF6600;
    margin-top: 3px;
    border-radius: 10px;
}

.round_step_ok{
    display: flex;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #FF6600;
    color: white;
    margin-top: 3px;
    border-radius: 10px;
}

.susubody{
    margin-left: 25px;
    width: fit-content;
}

.accbody{
    width: 100%;
    height: 100%;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#zone_search{
    margin-top: 20px;
    margin-bottom: 60px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#search_menu{
    display: flex;
    flex-direction: row;
}

#search_bar{
    position: relative; 
}

#search_bar input{
    padding-left: 35px; 
}

#search_bar img {
    position: absolute;
    left: 15px; /* Distance à gauche de l'image */
    top: 50%; /* Centrer verticalement */
    transform: translateY(-50%); /* Ajuster pour un centrage parfait */
    width: 20px; /* Taille de l'icône */
    height: 20px;
}

#logo_search{
    width: 300px;
    height: auto;
}

#search_input{
    width: 350px;
    height: 30px;
}

#search_buttons{
    display: flex;
    flex-direction: row;
}

#search_cand{
    width: 30px;
}

#zone_actions{
    width: 80%;
    max-width: 900px;
    margin-top: 20px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}


#init_rec{
    flex: 18%;
    display: flex;
    flex-direction: row;
    height: 50px;
    border-radius: 12px;
    padding: 15px;
    font-size: 18px;
    color: white;
    align-items: center;
    justify-content: center;
    background-color: #FF6600;
    margin-right: 5px;
    margin-left: 5px;
}

#init_rec:hover{
    cursor: pointer;
    background-color: #eb6309;
}

#recent_rec{
    flex: 33%;
    display: flex;
    flex-direction: column;
}

#zrecent_rec{
    display: flex;
    flex-direction: row;
    height: 50px;
    border-radius: 12px 12px 0 0;
    padding: 15px;
    font-size: 18px;
    color: black;
    align-items: center;
    justify-content: center;
    background-color: #F2F2F2;
    border-top-left-radius: 8px;
    border-left:6px solid #ff6600;
    margin-right: 5px;
    margin-left: 5px;
}

#recent_eval{
    flex: 33%;
    display: flex;
    flex-direction: column;
}

#zrecent_eval{
    display: flex;
    flex-direction: row;
    height: 50px;
    border-radius: 12px 12px 0 0;
    padding: 15px;
    font-size: 18px;
    color: black;
    align-items: center;
    justify-content: center;
    background-color: #FBE3D6;
    margin-right: 5px;
    margin-left: 5px;
    border-top-left-radius: 8px;
    border-left:6px solid #ff6600;
}

.line_rec{
    margin-left: 5px;
    margin-right: 5px;
    border-bottom: 1px solid #DDDDDD;
    padding: 10px;
}

.line_rec_title{
    font-weight: bold;
    margin-bottom: 5px;
}

.search_title{
    font-weight: bold;
    margin-bottom: 5px;
}

.search_poste{
color: #777777;
}

#audio_player{
    height: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: none;
}

.line_rec_date{
    color: #AAAAAA;
}

#icadd{
    margin-right: 10px;
}

#recent_rec{
    flex: 33%;
}

#recent_eval{
    flex: 33%;
}

.validation{
    margin-top: 10px;
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.quest_body{
    margin-left: 25px;
}

#body_questionnaire{
    display: flex;
    flex-direction: column;
}

.question_label{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #FF6600;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.question_zone{
    display: flex;
    flex-direction: row;
    margin-bottom: 40px;
}

.question_right{
    margin-left: 30px;
    margin-top: 60px;
    width: 450px;
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.question_zone{
    display: none;
}

.old_quest{
    display: none;
}

.old_suggest{
    display: none;
}

.ai_title{
    font-weight: bold;
    margin-bottom: 3px;
}

.ai_txt{
    font-weight: lighter;
    font-size: 13px;
    margin-left: 3px;
    color: #555555;
}

.ai_txt2{
    font-weight: lighter;
    font-size: 13px;
    margin-left: 3px;
    color: #555555;
}
.qcontent{
    display: flex;
    flex-direction: row;
}

.suggestion{
    margin-bottom: 25px;
    background-color: #EFEFEF;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    display: none;
}

.skills{
    margin-bottom: 2px;
    display: none;
}

#copy_paste{
    display: none;
}

.btn_accept{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 12px;
    margin-top: 3px;
    color: white;
    min-width: 75px;
    height: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px;
    margin-left: auto;
    background-color: #FF6600;
    border-style: none;
    user-select: none;
}


.btn_accept:hover{
    cursor: pointer;
    background-color: #e66611;
}

.btn_accept2{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 12px;
    margin-top: -10px;
    color: white;
    width: 75px;
    height: 20px;
    border-radius: 20px;
    margin-left: auto;
    background-color: #FF6600;
    border-style: none;
    user-select: none;
}

.btn_accept2:hover{
    cursor: pointer;
    background-color: #e66611;
}

.btn_ignore{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Sen", sans-serif;
    font-optical-sizing: auto;
    font-size: 12px;
    margin-top: 3px;
    color: white;
    width: 75px;
    height: 20px;
    border-radius: 20px;
    margin-left: auto;
    background-color: #999999;
    border-style: none;
    user-select: none;
}

.btn_ignore:hover{
    cursor: pointer;
}

.num_q{
    font-weight: bold;
    color: #FF6600;
    margin-bottom: 7px;
    margin-top: 15px;
}

.elts_q{
    color: #FF6600;
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 15px;
}

.qelements{
    color: #555555;
    font-size: 14px;
}

.qcompetences{
    color: #555555;
    font-size: 14px;
}

#quest_content{
    overflow-y: scroll;
    height: 80%;
    display: none;
}

.q_zone{
    display: none;
}

#histo_table{
    border-collapse: collapse;
    color: #AAAAAA;
    text-align: left;
}

.histo_event{
    padding-left: 25px;
    color:#AAAAAA;
}

.dato{
    color:#FF6600;
}

.histo_evento{
    padding-left: 25px;
    color:#000000;
}

.histo_boule{
    border-right: 2px solid #AAAAAA;
    color:#AAAAAA;
}

.boule{
    font-size: 35px;
    margin-right: -25px;
}

.histo_boulo{
    border-right: 2px solid #FF6600;
    color:#FF6600;
}

.boulo{
    font-size: 35px;
    margin-right: -25px;
}

.contact_info{
    margin-left: 25px;
    margin-bottom: 5px;
    color: #999999;
}

#titre_btn{
    display: flex;
    flex-direction: row;
    height: 50px;
    align-items: top;
}

#znbtn{
    display: flex;
    flex-direction: row;
    margin-left: auto;
    width: 160px;
    justify-content: end;
    align-items: end;
}

.btn_bar{
    display: flex;
    flex-direction: row;
}

.head_cand{
    text-align: start;
    margin-bottom: 0;
}

.bullet_list{
    list-style-type: circle;
    font-size: 14px;
}

.tj{
    text-align: justify;
    text-justify: inter-word;
    padding: 10px;
    font-size: 13px;
}

.tblanc{
    margin-left: 10px;
}

#quest_recap{
    margin-bottom: 20px;
}

.rond{
    height: 11px;
    width: 11px;
    background-color:#CCCCCC;
    border-radius: 6px;
    margin: 2px;
}

.rondo{
    height: 11px;
    width: 11px;
    background-color:#FF6600;
    border-radius: 6px;
    margin: 2px;
}

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

.ron{
    height: 15px;
    width: 15px;
    background-color:#ba5304;
    border-radius: 8px;
    margin: 5px;
}

.rono{
    height: 15px;
    width: 15px;
    background-color:#ffffff;
    border-radius: 8px;
    margin: 5px;
}

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

.mask{
    visibility: collapse;
}

.lab_uploaded{
    display: none;
    font-size : 13px;
    color : #999999;
}

#bar_comp{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 40px;
    font-weight: bold;
    font-size: 15px;
}

#par_comp{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 40px;
    font-weight: bolder;
    font-size: 15px;
}

.zone_comp{
    width: 225px;
    margin-left: 20px;
    margin-right: 20px;
}

.zonecomp{
    width: 225px;
    margin-left: 20px;
    margin-right: 20px;
    background-color: #ff6600;
    border-radius: 15px;
}

.bar_back{
    width: 100%;
    height: 15px;
    border-radius: 8px;
    background-color: #eeeeee;
}

.bar_title{
    margin-bottom: 7px;
    font-size: 14px;
}

.par_title{
    margin: 15px 0 5px 15px; 
    font-size: 16px;
    color: white;
}

.par_level{
    font-size: 14px;
    color: white;
    font-weight: normal;
    margin-top: 5px;
    text-align: center;
    margin-bottom: 15px;
}

.bar_front{
    height: 15px;
    border-radius: 8px;
    background-color: #ff6600;
}

#disquestions{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.disk_zone{
    margin: 20px ;
    text-align: center;
    font-weight: bold;
}

.superdisk{
    display: block;
    margin-top: 10px;
}

.fondisk{
    height: 100px;
    width: 100px;
    background-color: #eeeeee;
    border-radius: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topdisk{
    height: 80px;
    width: 80px;
    background-color: #ff6600;
    border-radius: 40px;
}

.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  .check {
    position: absolute;
    top: -4px;
    left: 8px;
    height: 20px;
    width: 20px;
    border-radius: 3px;
    background-color: #eee;
  }

  /* On mouse-over, add a grey background color */
.container:hover input ~ .check {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .container input:checked ~ .check {
    background-color: #FF6600;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .check:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .container input:checked ~ .check:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .container .check:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .title_check{
    background-image: url('src/checklist32.png');
    background-size: 25px 25px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    border-top-left-radius: 8px;
    border-left:6px solid #ff6600;
  }

#send_mail{
    margin-left: 30px;
    display:none;
}

#evale{
    color: #FF6600;
}

#eval{
    color: #FF6600;
}

#zone_graph{
    display: flex;
    flex-direction: row;
    margin-bottom: 50px;
}

.title_graph{
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

#graph_gauche{
    max-width: 400px;
    height: 400px;
    margin: 10px;
    margin-right: 10px;
}

#graph_droite{
    max-width: 500px;
    height: 400px;
    margin: 10px;
}



.sstitle{
    font-weight: bold;
    font-size: 17px;
    margin-bottom: 7px;
    margin-top: 25px;
    color: #FF6600;
}

.ssstitle{
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 7px;
    margin-top: 15px;
    color: #000000;
}

.long_text{
    max-width: 900px;
    text-align: justify;
}

.long_text_conclu{
    max-width: 900px;
    text-align: justify;
    border-radius: 12px;
    padding: 10px;
    border-left:6px solid #ff6600;
    background-color: #ff660028;
}

.statut_none{
    font-size: 12px;
    border-radius: 15px;
    border: 1px solid #777777ac;
    background-color: #eeeeee;
    color: #777777ac;
    padding: 1px;
    text-align: center;
}

.statut_wait{
    font-size: 12px;
    border-radius: 15px;
    border: 1px solid #6103038c;
    background-color: #61030312;
    color: #6103038c;
    padding: 1px;
    text-align: center;
}

.statut_plan{
    font-size: 12px;
    border-radius: 15px;
    border: 1px solid #ffaa00ac;
    background-color: #ffaa0028;
    color: #ffaa00ac;
    padding: 1px;
    text-align: center;
}

.statut_done{
    font-size: 12px;
    border-radius: 15px;
    border: 1px solid #2da462ac;
    background-color: #0dce6728;
    color: #2da462ac;
    padding: 1px;
    text-align: center;
}

#eval_quest, #eval_comp, #eval_comp2, #eval_comp3{
    margin-left: 0;
}

.spacer{
    height: 100px;
}

.popup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place even when scrolling */
    z-index: 1; /* On top of other elements */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
  }
  
  .popup-content {
    background-color: white;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
    padding: 20px;
    box-shadow: 13px 10px 10px 8px #888888;
    width: 30%;
    height: 100%;
    position: relative;
  }
  
  .close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }
  
  .close-button:hover {
    color: black;
  }
  
  .show {
    display: block;
  }

/*Calendrier*/

.ctable {
    width: 80%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-left: 280px;
  }

  .cth, .ctd {
    border: 1px solid #ccc;
    padding: 10px;
    height: 50px;
    text-align: center;
  }

  .cth {
    background-color: #f2f2f2;
    font-weight: bold;
  }

  .ctbody .ctr:nth-child(even) {
    background-color: #fafafa;
  }

  .ctbody .cth {
    background-color: #e9e9e9;
  }

  @page {
    /* Choisis A4 portrait (ou letter) et des marges */
    size: A4 portrait;           /* ou: letter, A4 landscape, etc. */
    margin: 12mm;                /* marges physiques de la page */
  }

  @media print {
    
    /* Ne garder QUE la zone imprimable et un éventuel header/footer fixes */
    body { margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .subody { margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Cacher ce qui n’est pas à imprimer */
    .no-print, .app-header, .app-footer, #top_bar { display: none !important; }

    /* La zone imprimable : s’adapte à la page */
    .print-area {
      border: 0 !important;      /* pas de bordure à l’impression */
      padding: 0;                 /* on laisse @page gérer les marges */
    }

    /* Éléments utiles pour éviter des découpes moches */


    /* Les images ne débordent pas */
    img { max-width: 100%; height: auto; }

    /* Afficher l’URL après les liens si tu veux (optionnel) */
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }

    /* En-tête / pied répétés à chaque page (Chrome/Edge) */
    .print-header, .print-footer {
      position: fixed; left: 0; right: 0; color:#555;
    }
    .print-header { top: 0; }
    .print-footer { bottom: 0; }
    /* Réserver de la place pour header/footer si tu les utilises */
    .with-running-header { padding-top: 18mm; }
    .with-running-footer { padding-bottom: 15mm; }
  }