/* FONT */

@font-face {
    font-family: 'Work Sans';
    src: url(../font/WorkSans-Regular.ttf);
}

@font-face {
    font-family: 'Work Sans Bold';
    src: url(../font/WorkSans-Bold.ttf);
}

@font-face {
    font-family: 'Work Sans Italic';
    src: url(../font/WorkSans-Italic.ttf);
}


.work-sans {
    font-family: 'Work Sans';
}

.work-sans-medium {
    font-family: 'Work Sans';
    font-weight: 500;
}

.work-sans-medium-italic {
    font-family: 'Work Sans';
    font-style: italic;
    font-weight: 500;
}

.work-sans-semi-bold {
    font-family: 'Work Sans';
    font-weight: 600;
}

.work-sans-bold {
    font-family: 'Work Sans Bold';
}


.work-sans-italic {
    font-family: 'Work Sans Italic';
}

/* ACCESSIBILITE */

.puced-list{
    margin: auto !important;
    padding: auto !important;
    clear: none !important;
}

.puced-list-li{
    list-style-type: disc !important;
}

#a42-ac-button {
    text-decoration: underline;
    text-transform: lowercase;
    font-family: 'Work Sans';
    font-weight: 500;
    font-size: 16px;
}

/* GENERAL */

body {
    font-family: 'Work Sans';
}

.nav-link.active {
    border-bottom: 4px solid #1F78D1 !important;
    background-color: #ffffff !important;
    border-radius: 0% !important;
    color: #1F78D1 !important;
}

.navbar-product-link {
    padding-bottom: 22px;
}

.b-radius-5 {
    border-radius: 5px;
}

.b-top-radius-5 {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.b-bottom-left-radius-5 {
    border-bottom-left-radius: 5px;
}

.b-bottom-right-radius-5 {
    border-bottom-right-radius: 5px;
}

.round {
    border-radius: 50%;
}

.list-style-none {
    list-style-type: none;
}

.mx-10-px {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.pt-40-px {
    padding-top: 40px;
}

.pb-8{
    padding-bottom: 80px !important;
}

.mb-10-px {
    margin-bottom: 10px;
}
.mb-15-px {
    margin-bottom: 15px;
}
.mb-20-px {
    margin-bottom: 20px;
}

.border-red {
    border: 1px solid #dc3545;
}

.margin-top-70 {
    margin-top: 70px;
}

.wp-50-mx{
    width: 49% !important;
}

/* Italic Placeholders */

::-webkit-input-placeholder {
    font-style: italic;
}

:-moz-placeholder {
    font-style: italic;
}

::-moz-placeholder {
    font-style: italic;
}

:-ms-input-placeholder {
    font-style: italic;
}

/* BACKGROUND COLOR */

.bg-error {
    background-color: #D53D30;
}

.bg-caution {
    background-color: #E86E02;
}

.bg-yellow {
    background-color: #FFD900;
}

.bg-approve {
    background-color: #109D57;
}

.bg-notice {
    background-color: #1F78D1;
}

.bg-graphite {
    background-color: #404040;
}

.bg-carbone {
    background-color: #545454;
}

.bg-smoke {
    background-color: #707070;
}

.bg-silver {
    background-color: #BFBFBF;
}

.bg-lighter {
    background-color: #F2F2F2
}

.bg-yellow-light {
    background-color: #ce5963;
}

.bg-blue-light {
    background-color: rgba(50, 112, 236, 0.1);
}

.bg-silver-light {
    background-color: rgba(68, 68, 68, 0.05);
}

.bg-super-light {
    background-color: rgba(0, 0, 0, 0.1);
}

/* TEXT COLOR */

.text-blue {
    color: #1F78D1;
}

.text-error {
    color: #dc3545;
}

.text-caution {
    color: #E86E02;
}

.text-yellow {
    color: #FFD900;
}

/* .text-cgi {
    color: #DA0719;
} */

.text-approve {
    color: #109D57;
}


.text-graphite {
    color: #404040;
}

.text-carbone {
    color: #545454;
}

.text-smoke {
    color: #595959;
    /*color maquette pas accessible
        color: #707070;
    */
}

.text-silver {
    color: #BFBFBF;
}

/* BORDER COLOR */

.border-error {
    border: 1px dashed #D53D30;
}

.border-caution {
    border: 1px dashed #E86E02;
}

.border-approve {
    border: 1px dashed #109D57;
}

.border-white {
    border: 1px solid #fff;
}

.text-dark {
    color: #0D0D0D !important;
}

/* TEXT SIZE */

.xs-text {
    font-size: 12px;
}

.sm-text {
    font-size: 14px;
}

.ns-text {
    font-size: 16px;
}

.m-text {
    font-size: 18px;
}

.l-text {
    font-size: 21px;
}

.xl-text {
    font-size: 30px;
}

/* DROPDOWN */

.dropdown-large {
    min-width: 14rem;
}

.dropdown-menu {
    border-radius: 0px;
}

.badge-filter{
    top: -3px !important;
    right: -12px !important;
}

.dropdown-item-hr{
    border-bottom: 1px solid #BFBFBF;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

/* BUTTON */

.icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

#a42-ac-button::before{
    content: url(../img/icons/eye-low-vision.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

#a42-ac-button{
    display: flex;
    align-items: center;
    margin-bottom: 0px;
}

.btn-approve {
    border: 2px solid #109D57;
    border-radius: 5px;
    background-color: #109D57;
    color: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    transition: 0.3s;
}

.btn-approve:hover {
    color: #ffffff;
    border: 2px solid #0c6e3d;
    border-radius: 5px;
    background-color: #0c6e3d;
}
.btn-notice-outline:hover>.fa-calendar-circle-minus {
    color: #ffffff;
    transition: 0.3s;
}

.btn-danger-light {
    background-color: #d53e3027;
    padding: 15px;
    text-decoration: none;
}

.btn-danger-light:hover {
    background-color: #dc3545!important;
    color:#ffffff!important;
    padding: 15px;
    text-decoration: none;
}


.btn-error {
    border: 2px solid #D53D30;
    border-radius: 5px;
    background-color: #D53D30;
    color: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    transition: 0.3s;
}

.btn-error:hover {
    border: 2px solid #942c22;
    background-color: #942c22;
    color: #ffffff;
}
.editEncart{
    padding:10px;
    border-radius: 15px;
    background-color: whitesmoke;
}
.editEncart:hover{
    padding:10px;
    border-radius: 15px;
    border: whitesmoke;
    background-color:#404040;
    color:#ffffff!important;
}

.w-60{
    width: 60%;
}

.w-40{
    width: 40%;
}

input:focus{
    border-color: #1F78D1 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(31, 120, 209, 1) !important;
}

.evitement{
    display: inline-block;
    color: #555;
    background: #fff;
    padding: .5em;
    position: absolute;
    left: -99999rem;
    z-index: 9999;
}

a.evitement:focus {
    top: 0;
    left: 0;
}



/* NAVBAR BASE */


#main-navbar {
    border-bottom: 1px solid #BFBFBF !important;
    position: fixed;
        z-index: 999 !important;
}


#navbar_base_img, #navbar_base_img_mobile {
    width: 79px;
    border: 1px solid #BFBFBF;
    border-radius: 5px;
}


#register-client_img {
    width: 104px;
    border: 1px solid #BFBFBF;
    border-radius: 5px;
}

.ts-dropdown .active {
    font-size: 16px !important;
}

.my-account-logo-background {
    width: 60px;
    height: 60px;
    background-color: #ffffff;
    border-radius: 50%;
    border: 1px solid #8C8C8C;
    overflow: hidden !important;
}

.my-account-logo {
    font-size: 48px;
    margin-top: 10px;
}

#my_account_square:hover,
#my_account_square:active,
#my_account_square:focus {
    background-color: #F2F2F2;
}

#client-home-link:hover, #client-home-link-mobile:hover {
    color: #404040 !important;
}

/* NAVBAR PRODUCT */

#product-navbar {
    z-index: 99 !important;
    height: 65px;
        position: relative !important;
            -webkit-box-shadow: 5px 5px 5px #E6E3E3;
            -moz-box-shadow: 5px 5px 5px #E6E3E3;
            box-shadow: 5px 5px 5px #E6E3E3;
}

/* SPACER */

#spacer {
    margin-top: 103px;
}

/* PAGE D'INSCRIPTION */

.sw-btn-next {
    font-family: 'Work Sans';
    font-weight: 500;
    font-size: 16px;

}

#register-bottom-infos {
    position: absolute;
    bottom: 50px;
    width: 85%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/*#register-bottom-infos span {
    font-size: 0.7rem;
}

*/
.sw-toolbar-elm {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#registration_form_amenagment {
    display: flex;
}

#registration_form_amenagment_1 {
    margin-left: 10px;
    margin-right: 8px;
}



#register-function-field {
    width: 50%;
}

.sw-toolbar-elm {
    padding: 0 !important;
}

.sw-btn-prev {
    padding: 0 !important;
}

.sw-btn-prev:focus{
    border: 3px solid #000000;
}

/* PAGE DE CONNEXION */

#login-page {
    width: 100vw;
    height: 100vh;
}

#login-left-side {
    position: absolute;
    width: 50%;
    height: 100%;
    background-size: cover !important;
    box-shadow: inset 0px 0px 0 2000px rgba(0, 0, 0, 0.4);
}


#login-right-side {
    width: 50%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    left: 49.5%;
    /*box-shadow: inset 0px 0px 0 2000px rgba(0, 0, 0, 0.05);*/
}

#login-form-div,
#register-form-div {
    width: 100%;
    display: flex;
    justify-content: center;
}

#login-form {
    width: 31rem;
}

#login-register-link {
    position: absolute;
    top: 50px;
    right: 30px;
}

#login-link {
    position: absolute;
    top: 50px;
    right: 30px;
}

#inputPassword {
    border: none;
}

#login-password-div {
    border: 1px solid #BFBFBF;
    border-radius: 5px;
}

/* PAGE D'ACCUEIL */

.fa-crown{
    font-size: 20px;
}

.card-img-top img {
    max-width: 19.5rem !important;
    /*min-height: 200px !important;*/
    max-height: 500px !important;
}

.card-img-top-mobile img {
    width: 100% !important;
    height: auto !important;
}

.card-img-top-hp {
    height: 40% !important;
}

#avisea-homepage-left-column {
    width: 60%;
}

#avisea-homepage-right-column {
    width: 40%;
}

.avisea-homepage-lock-icon {
    font-size: 3rem;
}

.avisea-homepage-stetoscop-icon, .avisea-homepage-hear-icon {
    font-size: 3rem;
}

#register-form-container {
    width: 35rem;
}

#stepForm ::placeholder {
    color: #707070;
    opacity: 1;
}


.my-account-logo-background-homepage {
    width: 100px;
    height: 100px;
    background-color: #ffffff;
    border-radius: 50%;
    border: 1px solid #8C8C8C;
    overflow: hidden !important;
    margin-top: -50px;
}



/* FLASH WORKSHOP CARD */

.card-footer {
    background: transparent;
    border: 0px;
}
.custom-controls :hover{
cursor :pointer;
}
.custom-controls .carousel-prev {
    padding-right: .7rem !important;
    padding-left: .8rem !important;
    padding-top: .8rem !important;
    padding-bottom: .7rem !important;
}

.custom-controls .carousel-next {
    padding-right: .8rem !important;
    padding-left: .9rem !important;
    padding-top: .8rem !important;
    padding-bottom: .7rem !important;
}


.flash-workshop-card-category {
    position: absolute;
    bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.flash-workshop-card-category-2 {
    position: absolute;
    bottom: 15px;
    margin-left: 10px;
    margin-right: 10px;
    left: -1px;
}

.timeslot-radio-btn {
    background: #ffffff;
    padding: 4px;
    border-radius: 3px;
    position: relative;
    width: fit-content;
    display: inline !important;
}

.timeslot-radio-btn input {


    cursor: pointer;
    border-radius: 5px;
    padding: 5px 10px;
    background: #ffffff;
    color: #404040;
    font-size: 15px;
    font-family: sans-serif;
    transition: all 0.1s;
    border: 1px solid #BFBFBF;
    margin-bottom: 20px;

}

.timeslot-radio-btn input:checked {
    background: #595959;
        border: 1px solid #595959;
    color: #ffffff;
}

.timeslot-radio-btn input::before {
    content: attr(data-label);
    text-align: center;
}

/* Le label fait office de « conteneur cliquable » */
.timeslot-radio-btn {
  display: inline-block;   /* Pour afficher plusieurs boutons à la suite */
  margin-bottom: 20px;     /* Espace sous chaque bouton */
  cursor: pointer;         /* On affiche la main au survol */
}

/* On cache le radio natif */
.timeslot-radio-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Le span agit comme l’apparence du bouton */
.timeslot-radio-btn span {
  display: inline-block;
  background: #ffffff;
  border: 1px solid #BFBFBF;
  border-radius: 5px;
  padding: 5px 10px;
  color: #404040;
  font-size: 15px;
  font-family: sans-serif;
  transition: all 0.1s;
}

/* Quand l’input est coché, on modifie le style du span */
.timeslot-radio-btn input[type="radio"]:checked + span {
  background: #595959;
  border-color: #595959;
  color: #ffffff;
}


/* version mobile */ 

/* Le label fait office de « conteneur cliquable » */
.timeslot-radio-btn-mobile {
    display: inline-block;   /* Pour afficher plusieurs boutons à la suite */
    margin-bottom: 20px;     /* Espace sous chaque bouton */
    cursor: pointer;         /* On affiche la main au survol */
  }
  
  /* On cache le radio natif */
  .timeslot-radio-btn-mobile input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  
  /* Le span agit comme l’apparence du bouton */
  .timeslot-radio-btn-mobile span {
    display: inline-block;
    background: #ffffff;
    border: 1px solid #BFBFBF;
    border-radius: 5px;
    padding: 5px 10px;
    color: #404040;
    font-size: 15px;
    font-family: sans-serif;
    transition: all 0.1s;
  }
  
  /* Quand l’input est coché, on modifie le style du span */
  .timeslot-radio-btn-mobile input[type="radio"]:checked + span {
    background: #595959;
    border-color: #595959;
    color: #ffffff;
  }

.add-to-agenda {
    width: 16rem;
    position: absolute;
    right: 0;
    bottom: 70px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.bg-client {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

.badge-triangle {
    width: 30px !important;
    height: 30px !important;
    border-style: solid;
    border-color: transparent;
    position: absolute;
    z-index: 0;
    right: 65px !important;
    top: 10px;
}

.badge-triangle-logo {
    width: 30px !important;
    height: 30px !important;
    border-style: solid;
    border-color: transparent;
    position: absolute;
    z-index: 0;
    right: 55px !important;
    bottom: 38px;
}

.badge-triangle-slider {
    width: 30px !important;
    height: 30px !important;
    border-style: solid;
    border-color: transparent;
    position: absolute;
    z-index: 0;
    right: 65px !important;
    bottom: 30px;
}

.badge-triangle-logo-slider {
    width: 30px !important;
    height: 30px !important;
    border-style: solid;
    border-color: transparent;
    position: absolute;
    z-index: 0;
    right: 55px !important;
    bottom: 38px;
}
/* Flash Timeslot Modal */
/* .timeslot-modal {
    border-top: 10px solid #ad1e2a;
} */

.modal-mark {
    color: #595959;
    font-size: 30px;
}
.modal-mark:hover {
    color: #9e9a9a;
}

button {
    border: none;
    background-color: transparent;
}

button:focus:not(:focus-visible) {
    outline: solid !important;
  }

.froalaLogoProfile img {
    width: 75px !important;
    border-radius: 5px !important;
}

/* FLASHLEARNING */

/* Timeslots checked input on high contrast */
.a42-ac-high-contrast > main > .container > .align-items-start > .modal > .modal-dialog > .modal-content > form > div > .timeslot-radio-btn > input:checked{
    background-color: #fff !important;
    color: #404040 !important;
}

.a42-ac-high-contrast > main > .container > #incoming_flashworkshops > .modal > .modal-dialog > .modal-content > form > div > .timeslot-radio-btn > input:checked{
    background-color: #fff !important;
    color: #404040 !important;
}

#error-toast{
    right: 0px;
    z-index: 1;
}

.see-more-link {
    cursor: pointer;
    font-size: 13px;
}

.see-more-link:hover {
    color: #000;
}


#search_flash_workshop_keyword {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-size: 16px;
    color: #707070;
    font-family: 'Work Sans';
    font-style: italic;
    font-weight: 500;
    width: 250px;
}

.fa-magnifying-glass {
    border-top: 1px solid #CED4DA;
    border-bottom: 1px solid #CED4DA;
    border-left: 1px solid #CED4DA;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: .375rem;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    padding-top: 6px;
}

.reserved-timeslot-hour {
    font-size: 12px;
}

/* MY AGENDA */

.fa-ellipsis {
    font-size: 24px;
}

#user-session-title-1 {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#search_flash_workshop_agenda_keyword {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.removeevent{
    text-align: left!important;
    color: #545454 !important;
    font-family: 'Work Sans';
    font-weight: 500;
    background:#fff;
    padding: 10px 12px 7.5px 12px;
    border: 1px solid transparent;
    font-size: 15px;
    border-radius:3px;
    box-shadow: 0 0 0 0.5px rgba(50,50,93,.17), 0 2px 5px 0 rgba(50,50,93,.1), 0 1px 1.5px 0 rgba(0,0,0,.07), 0 1px 2px 0 rgba(0,0,0,.08), 0 0 0 0 transparent !important;
}
.removeevent:hover{
    background:#F2F2F2;
}
.addeventatc{
    z-index:0!important;
}
.addeventatc .addeventatc_icon {
    background: url(../img/icon-calendar-t1.svg) no-repeat !important;
}

#addeventatc1 {
    color: #545454 !important;
    font-family: 'Work Sans';
    font-weight: 500;

}

/* MY PROFILE */

/*.dropdown-toggle::after{
    margin-top: 25px !important;
}

*/

.progress-bar{
    background-color: #595959;
}

.fa-badge-check{
    font-size: 40px;
}

.user-section-inactive {
    background-color: white;
    padding: 0px 5px 0px 5px;
    border: 1px solid #707070;
    padding: 5px;
    color: #707070;
}


.avatar-div>.fa-duotone {
    font-size: 44px;
    --fa-secondary-opacity: 1;
}

.my-account-logo-profile {
    --fa-secondary-opacity: 1;
}

.my-account-logo {
    --fa-secondary-opacity: 1;
    font-size: 160px;
    margin-top: 40px;
}

.my-account-logo-background>i {
    font-size: 48px;
    margin-top: 10px;
    --fa-secondary-opacity: 1;
}

.my-account-logo-background-homepage>i {
    --fa-secondary-opacity: 1;
    font-size: 84px;
    margin-top: 15px;
}

.my-account-logo-background-profile {
    width: 200px;
    height: 200px;
    background-color: #ffffff;
    border-radius: 50%;
    border: 1px solid #8C8C8C;
    overflow: hidden;
}

.my-account-logo-profile {
    font-size: 160px;
    margin-top: 30px;
}

.my-profile-nav-item:hover,.user-section-active:hover{
    background-color: #8C8C8C;
    color:#ffffff;
}

.edit-profil-img-icon {
    top: 15px;
    right: 10px;
    color: #ffffff;
    background-color: #595959;
    border-radius: 50%;
    padding: 10px;
    transition: 0.3s;
}

.edit-profil-img-icon:hover {
    top: 15px;
    right: 10px;
    color: #ffffff;
    background-color: #9e9a9a;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    transition: 0.3s;
}

#edit-my-profile-link {
    cursor: pointer;
    padding: 10px;
    transition: 0.3s;
}

#edit-my-profile-link:hover {
    background-color: #BFBFBF;
    border-radius: 50px;
    color: #404040;
    transition: 0.3s;
}

#my-personal-info,
#my-success {
    width: 60%;
}

.avatar-div {
    border: 1px solid #BFBFBF;
    border-radius: 5px;
    text-align: center;
    width: 65px;
    height: 65px;
}

.avatar-div:hover {
    border: 3px solid #545454;
}


#actual-avatar-bg>i {
    font-size: 160px;
    margin-top: 40px;
}

#avatars-container {
    width: 70%;
    display: grid;
    grid-template-columns: repeat(auto-fill, 70px);
    justify-content: space-between;
    /* Espacement vertical (margin-bottom) */
    grid-gap: 15px;
}

#first-name-group,
#last-name-group {
    width: 49%;
}

.password-field {
    width: 14rem;
}

#edit_password_currentpassword,
#edit_password_plainPassword_password,
#edit_password_plainPassword_confirm {
    border: 0px;
}

.reset-password-div {
    border: 1px solid #BFBFBF;
    border-radius: 5px;
}


/* SUCCESS */

#badge-section-div-overflow {
    overflow: scroll;
}

.badge-element {
    width: 10rem;
    text-align: center;
    margin-bottom: 20px;
    padding-top: 20px;
    border: 1px solid #ffffff;
    transition: 0.3s;
}

#actual-badge-div {
    width: 40%;
    position: relative;
}

#badge-blue-bg {
    height: 40%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#actual-badge-img {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#actual-badge-text {
    padding-top: 70px;
}

#actual-badge-points {
    width: 12rem;
}

.badge-element:hover {
    background-color: #BFBFBF;
    border: 1px solid #545454;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#badges-section {
    display: grid;
    /* 1 */
    grid-template-columns: repeat(auto-fill, 150px);
    /* 2 */
    justify-content: space-between;
    /* 4 */
    height: 350px;
    overflow-x: none !important;
}

/* CONTACT */

#success-toast{
    right: 10px;
    z-index: 1;  
}

.img-group {
    border: 1px solid #404040;
    border-radius: 5px;
}

#contact_image {
    display: none;
}
.fileLink{
    cursor: pointer;
}

.fileLink:hover{
font-weight: 900;
}

#success-toast{
    color:#109D57!important;
    font-family: 'Work Sans'!important;
    font-weight: 500!important;
    font-size:16px!important;
}

.form-text, #contact_message_help {
    font-family: 'Work Sans'!important;
    font-weight: 500!important;
    font-size:14px!important;
    color: #545454;
}

/* DEFI INCLUSION */

.defi-inclusion-content-img{
    width: 45%;
}

.defi-inclusion-content{
    width: 50%;
}

/* DEFI INCLUSION SLIDE */

#flashWorkshopBackOfficeSearchForm{
    display: flex;
    align-items: center;
    justify-content: center;
    
}

#defi_question_trueOrFalse, #edit_defi_question_trueOrFalse{
    width: 9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#progress-bar-background {
    background-color: #ffffff;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.true-false-question{
    border: 1px solid #BFBFBF;
}

ul {
    padding: 0;
    margin: 0;
    clear: both;
}

li {
    list-style-type: none;
    list-style-position: outside;
}

.quizz-checkbox input[type="checkbox"]:not(:checked),
.quizz-checkbox input[type="checkbox"]:checked {
    position: absolute;
    left: -9999%;
}

.multiple-no-validation input[type="checkbox"]:hover+label {
    cursor: pointer;
    color: white;
    background-color: #545454 !important;
    transition: all 0.1s;
}

.quizz-checkbox input[type="checkbox"]:checked+label {
    color: white;
    background-color: #545454 !important;
}

.radio-bg-approve {
    background: rgba(16, 157, 87, 0.3) !important;
    border: 2px solid rgb(16, 157, 87) !important;
}

.radio-bg-approve:hover, .radio-bg-error:hover, .radio-bg-caution:hover{
    color: #000000 !important;
}

.radio-bg-error, .radio-bg-error:hover{
    background: rgba(213, 61, 48, 0.3) !important;
    border: 2px solid rgb(213, 61, 48) !important;
    color: #000000 !important;
}

.radio-bg-caution {
    background: rgba(232, 110, 2, 0.3) !important;
    border: 2px solid rgb(232, 110, 2) !important;
    color: #000000 !important;
}

.radio-bg-neutral:hover {
    background: rgba(255, 255, 255, 1) !important;
    color: #000000 !important;
    cursor: default !important;
}

#sqc-good-answer {
    background-color: rgba(16, 157, 87, 0.2);
}

#sqc-nok-answer {
    background-color: rgba(232, 110, 2, 0.2);
}

#sqc-bad-answer {
    background-color: rgba(213, 61, 48, 0.2);
}

#question-content {
    margin-bottom: 30px;
}

#submit-answer-btn-div {
    margin-top: 30px;
    width: 24rem;
}

.face-quizz {
    font-size: 80px;
}

.w-1000 {
    width: 1000%;
}

.mb-70 {
    margin-bottom: 70px !important;
}

li.multiple-no-validation {
    list-style-type: none !important;
}
li.multiple-validation::marker {
    list-style-type: none!important;
}

.pic_defi_question > p {
    margin-bottom:0rem!important;
}

/* RESULTAT QUIZZ DEFI INCLUSION */

#prizes{
    overflow-wrap: break-word;
}

#quizz-result-score-border {
    width: fit-content;
    border-radius: 50%;
    padding: 5px;
    position: relative;
    z-index: 99999 !important;
}

#quizz-result-score-border-ranking {
    width: fit-content;
    border-radius: 50%;
    padding: 5px;
    position: relative;
    z-index: 99999 !important;
    left: 5%;
}

#quizz-result-score {
    padding: 40px;
    width: fit-content;
    text-align: center;
    border-radius: 50%;
    position: relative;
    z-index: 99999 !important;
}

#quizz-result-score-ranking {
    padding: 20px;
    width: fit-content;
    text-align: center;
    border-radius: 50%;
    position: relative;
    z-index: 99999 !important;
}

#quizz-result-average-score {
    padding: 20px;
    width: fit-content;
    text-align: center;
    border-radius: 50%;
}

#quizz-result-average-score-ranking {
    padding: 15px;
    width: fit-content;
    text-align: center;
    border-radius: 50%;
    left: 50%;
}

#congratulation-text {
    margin-left: 9rem;
}

.table-responsive {
    max-height: 530px !important;
}

/* BACK OFFICE */

#back-btn {
    position: absolute;
    left: 5%;
    margin-top: 1rem;
}
.timeslot-waitlist-option{
    font-family: 'Work Sans'!important;
    color : #404040;
}

.timeslot-collapse {
    max-width: 1500px;
}

#timeslot-collapse a:nth-child(2n+1) {
    color: #404040 !important;
}

/* AJOUT EDIT FW */

#flash_workshop_onlineOrOnSite,
#edit_flash_workshop_onlineOrOnSite {
    display: flex;
}

#flash_workshop_onlineOrOnSite>.form-check,
#edit_flash_workshop_onlineOrOnSite>.form-check {
    margin-left: 30px;
}

/* INDEX CLIENTS */

.align-vertically-cell {
    padding-top: 30px !important;
}

/* OUTILS DIAG */
#defi_tab>li>a {
    color: #404040 !important;
}

#defi_tab>li>a.active {
    border-bottom: 4px solid #404040 !important;
    background-color: #ffffff !important;
    border-radius: 0% !important;

}

.icon_audio{
    margin-left: -12px!important;
    padding-right: 8px!important;
    padding-left: 25px!important;
    padding-bottom: 10px!important;
    padding-top: 10px!important;
}
.radio_diag:hover{
    color:#ffffff!important;
}

.begin-test-link{
    position: absolute !important;
    border-right: none !important;
    right: 0px !important;
}

.begin-test-link-mobile{
    position: relative !important;
    border-right: none !important;
}

.begin-test-link>a{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.avisea-diag-stetoscop-icon, .avisea-diag-hear-icon{
    font-size: 4rem;
}

/* AUDITION TEST AGE */

#content-audition{
    display: none;
}

#content-autodiag{
    display: none;
}

/* AUDITION TEST BEGINNING */

#start-stop-audio-btn{
    position: absolute;
    top: 42%;
    left: 42%;
    font-size: 4rem;
    cursor: pointer;
}

#start-stop-audio-btn-description{
    position: absolute;
    top: 42%;
    left: 44%;
    font-size: 4rem;
    cursor: pointer;
}

#continu-to-question-btn{
    position: absolute;
    left: 41.5%;
    bottom: -10%;
}

/* AUDITION TEST QUESTION DESCRIPTION */

#audition-carousel-step{
    margin-top: 100px;
}

#audition-carousel-step-sound{
    margin-top: 100px;
}

#question-description{
    /* margin-top: 250px; valeur trop grand pour les petites résolutions */
    margin-top: 150px;
}

.audition-test-question-circle{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    font-family: 'Work Sans Bold';
    color: #ffffff;
}

.audition-test-question-circle-check{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background-color: #ffffff;
    color: #404040;
}


.active-circle-audition-test{
    background-color: #ffffff;
    color: #404040;
}

#sound{
    display: none;
    position: absolute;
    left: 35%;
    margin-top: 120px;
}

#questions-count-dot{
    left: 33.5%;
    padding-top: 40px;
}

.fa-check{
    font-size: 1.25rem;
}

/* AUTODIAG QUIZZ RESULT */

#diag-quizz-result{
    padding-top: 6rem;
    padding-bottom: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

.avisea-diag-result-stetoscop-icon{
    font-size: 4rem;
    opacity: 0.5;
    z-index: 0;
    position: absolute;
    left: 41%;
    top: 19%;
    transform: rotate(45deg);
}

.avisea-diag-result-hear-icon{
    font-size: 4rem;
    opacity: 0.5;
    z-index: 0;
    position: absolute;
    left: 42%;
    top: 13%;
    transform: rotate(10deg);
}


/* Media Queries */


/* Résolution de 1920*1080 zoomé à 150% = PC PORTABLE FRANCK */
@media (min-width: 1265px) {

    #quizz-result-average-score{
        left: 41%;
    }
}

@media (min-width: 1350px) {}

@media (min-width: 1420px) {
    #quizz-result-average-score{
        left: 42%;
    }
}

/* Résolution de 1920*1080 zoomé à 125% */
@media (min-width: 1515px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1580px) {}

@media (min-width: 1880px) {
    #quizz-result-average-score{
        left: 44%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */

@media(min-width: 1920px){
    #quizz-result-average-score{
        left: 44%;
    }
    
    .background-audition{
        height: calc(100vh - 168px) !important;
        background: url('/img/background/audition-background.svg') !important;
        background-position: right 50% bottom 35%!important;
        background-size: cover !important;
        /*box-shadow: inset 0px 0px 0 2000px rgba(0, 0, 0, 0.4) !important;*/
    }
}

@media(max-width: 1920px) {


#logo-ween{
    margin-top:3rem;
    }
#logo-client{
    margin-bottom: 3rem;
    }
#register-form-container{
    width: 35rem;
    }
}

@media(max-width: 1600px) {

.ns-text {
        font-size: 15px !important;
    }

.m-text {
    font-size: 17px !important;
}

#register-client_img {
    width: 104px !important;
}
#logo-client{
    margin-bottom: 1.8rem!important;
    margin-top:2rem;
    }
#register-form-container{
    width: 35rem;
}
#login-register-link{
    top: 20px;
    }
#register-bottom-infos{
    width: 95%;
}
#logo-ween{
    margin-top:1.5rem;
    margin-bottom:3rem;
    margin-right:3rem;
    margin-left:3rem;
    }
}
@media (max-width: 1440px) and (max-height: 900px) {
    .background-audition{
        height: calc(100vh - 68px) !important;
        background: url('/img/background/audition-background.svg') !important;
        background-position: right 50% bottom 35%!important;
        background-size: cover !important;
    }
}
@media(max-width: 1366px) {

    #login-register-link {
        top: 10px;
    }

    #register-client_img {
        width: 90px !important;
    }

    #logo-client {
        margin-bottom: 0.8rem !important;
        margin-top: 6rem;
    }

    .xl-text {
        font-size: 26px;
    }

    .l-text {
        font-size: 20px;
    }
}

@media(max-width: 1280px) {

}

@media (max-width: 1200px) {
    #quizz-result-average-score{
        left: 41%;
    }
}
@media(min-width: 996px) {

    .autodiag_bg {
        background: url('/img/background/autodiag-background.svg'); 
        min-height: 100vh;
    }

    .audition_bg {
        background: url('/img/background/audition-background.svg');
        background-position: right 50% bottom 17%;
        min-height: 81.9vh; 
        background-color:#3270EC0D;
    }

    .background-audition{
        height: calc(100vh - 18px) !important;
        }

    #continu-to-question-btn{
        position: absolute;
        left: 41.5%;
        bottom: -10%;
    }

    #audition-carousel-step-sound{
        margin-top: 100px;
    }

    #sound{
        display: none;
        position: absolute;
        left: 35%;
        margin-top: 120px;
    }
    
    #start-stop-audio-btn{
        position: absolute;
        top: 42%;
        left: 42%;
        font-size: 4rem;
        cursor: pointer;
    }
    .avisea-diag-result-stetoscop-icon{
        font-size: 4rem;
        opacity: 0.5;
        z-index: 0;
        position: absolute;
        left: 41%;
        top: 5%;
        transform: rotate(45deg);
    }

    .text_left_md{
        text-align: left!important;
    }

    .shadow_md{
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;

    }

    .text_result{
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }
    
    .height_question{
        min-height: 81.8vh!important;
    }

    #full-bottom-quizz-result-part{
        display: flex;
    }

    #quizz-result-invite{
        width: 50%;
    }

    #quizz-result-ranking{
        width: 50%;
    }
}
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    .audition-test-question-circle{
        padding-top: 0px;
        padding-bottom: 1px;
        padding-left: 9px;
        padding-right: 9px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        font-family: 'Work Sans Bold';
    }
    
    .audition-test-question-circle-check{
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 50%;
        background-color: #ffffff;
        color: #404040!important;
    }

    #continu-to-question-btn{
        position: absolute;
        left: 41.5%;
        bottom: -3%;
    }

    #audition-carousel-step-sound{
        margin-top: 50px;
    }

    #sound{
        display: none;
        position: relative;
        left: 0%;
        margin-top: 120px;
    }

    #start-stop-audio-btn{
        position: absolute;
        left: 44%;
        font-size: 3rem;
        cursor: pointer;
    }
    .height_question{
        min-height: 110vh!important;
    }
}
@media screen and (min-width: 810px) and (max-width: 810px) and (min-height: 1080px) and (max-height: 1080px) {
    /* Styles spécifiques pour la résolution 810px x 1080px */
    #start-stop-audio-btn{
        top: 38.3% !important;
        left: 46.5% !important;
        font-size: 3.5rem;
    }
}

@media (min-width: 768px) {
    .height_question{
        min-height: 75vh!important;
    }
}
@media (min-width: 769px) {
    .height_question{
        min-height: 81.8vh!important;
    }
}
@media only screen and (max-width: 422px) and (max-height: 957px) {
    #start-stop-audio-btn{
        top: 51% !important;
    } 
}
@media only screen and (max-width: 428px) and (max-height: 927px) {
    #start-stop-audio-btn{
        top: 52.5% !important;
    } 
}

@media only screen and (width: 414px) and (height: 896px) and (orientation: portrait) {
    /* Styles pour le mode portrait */
    #start-stop-audio-btn{
        top: 54.5% !important;
    } 
}

@media only screen and (max-width: 412px) and (max-height: 915px) {
    #start-stop-audio-btn{
        top: 55.5% !important;
    }

    .background-audition{
        height: 90vh!important;
        background-position: right 50% bottom 35%!important;
        background-size: cover !important;
        }
    }

@media only screen and (width: 412px) and (height: 883px) {
    /* Vos styles spécifiques pour cette résolution ici */
    #start-stop-audio-btn{
        top: 57.5% !important;
    }
}

@media (max-width: 411px) and (max-height: 731px) {
    /* Styles pour les écrans de 411px de large et 731px de haut */
    #start-stop-audio-btn {
        top: 70% !important;
      }

    .background-audition{
    height: 110vh!important;
    background-position: right 50% bottom 35%!important;
    background-size: cover !important;
    }
}

@media only screen and (max-width: 393px) and (max-height: 851px) {
    #start-stop-audio-btn {
        top: 59.8% !important
      }
}

@media only screen and (max-width: 390px) and (max-height: 844px) {
    /* Styles spécifiques pour la résolution 390px x 844px */
    #start-stop-audio-btn {
        top: 60.4% !important;
    }
}
@media only screen and (max-width: 384px) and (max-height: 854px) {
    #start-stop-audio-btn{
        top: 59.7%!important;
    }
}
@media only screen and (max-width: 375px) and (max-height: 667px) {
    #start-stop-audio-btn {
        top: 79% !important
    }
}

@media only screen and (min-width: 375px) and (max-width: 375px) and (min-height: 812px) and (max-height: 812px) {
    /* Vos styles CSS pour les écrans de 375px x 812px ici */
    #start-stop-audio-btn{
        top: 65% !important;
    }  
}
@media only screen and (max-width: 360px) and (max-height: 800px) {
    /* Styles spécifiques pour une résolution de 300px x 800px */
    #start-stop-audio-btn{
        top: 66% !important;
        left:43%!important;
    }
    #static-pulse{
        margin-top: 0px!important;
        left:43%!important;
    }
    .test_beginning{
        margin-top: -100px!important;
    }
    .background-audition{
        height: calc(100vh - 18px) !important;
        background-position: right 50% bottom 35%!important;
        background-size: cover !important;
        }
}

@media (max-width: 362px) and (max-height: 760px) {
    /* Ton code CSS pour cette résolution spécifique */
    #start-stop-audio-btn{
        top: 72% !important;
        left:43%!important;
    }
    #static-pulse{
        margin-top: 20px!important;
    }
    .test_beginning {
        margin-top: -75px !important;
      }


}

@media only screen and (min-width: 360px) and (max-width: 360px) and (min-height: 640px) and (max-height: 640px) {
    /* Styles spécifiques pour 360px x 640px */
    .background-audition{
        height: 115vh!important;
    }
    #start-stop-audio-btn{
        top: 82.5% !important;
    }
    #static-pulse{
        margin-top: 0px!important;
    }
    

}

@media (max-width: 420px) {

    .avisea-diag-result-stetoscop-icon{
        font-size: 3rem;
        opacity: 0.5;
        z-index: 0;
        position: absolute;
        left: 41%;
        top: 8%;
        transform: rotate(45deg);
    }

    .height_question{
        min-height: 110vh!important;
    }
    #quizz-result-average-score{
        left: 52%;
        top: 26%;
    }
}

/* Radio button vote */
label {
    width: 100%;
}
.card-input-element + .card {
    color: #000000;
    background-color: #ffffff;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.card-input-element+.card:hover {
    cursor: pointer;
    background-color: #545454;
    color: #ffffff;
    -webkit-transition: border .3s;
    -o-transition: border .3s;
    transition: border .3s;
}
.card-input-element:checked+.card {
    background-color: #545454;
    color: #ffffff;
    -webkit-transition: border .3s;
    -o-transition: border .3s;
    transition: border .3s;
}

.force-hover:hover{
    background-color: #ffffff !important;
    color: #000000 !important;
}