@font-face {
  font-family: "ArbatDi";
  src: url("ArbatDi");
}

@font-face {
font-family:'digital-clock-font-mono';
    src: url('digital-7-mono.ttf');

}


html {
    height: 100%;
    
    }
        
body {
    height: 100%;
    background: #5FA3A1; /* Old browsers */
    /*background: -moz-radial-gradient(center, ellipse cover, #9acbca 0%, #5da2a0 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #9acbca 0%,#5da2a0  100%); */
    background: radial-gradient(ellipse at center, #a7e0e3 0%,#62c1dd 100%);
    overflow: hidden;
    
        }

/* Fenêtre voile, alerte déconnexion */

#voile_page {
    position: absolute;
    height: 200%;
    width: 200%;
    background-color: rgb(0,0,0,0.5);
    top: -50%;
    left: -50%;
    z-index: 500;
    display: block;
    transition: 0.5s;
    display: none;
}


#fenetre_alerte {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 200px;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#fenetre_alerte_haut {
    position: absolute;
    height: 50px;
    width: 100%;
    background-color: #ff6b6b;
    color: white;
    font-size: 26px;
    text-align: center;
    line-height: 50px;
}


#fenetre_alerte_msg {
    position: absolute;
    height: 70px;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 18px;
    color: grey;
    line-height: 30px;
}

#fenetre_alerte_decompte {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 50px;
    width: 50px;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
}

    
#titre {
    position: absolute;
    width: 400px;
    transform: translate(-50%, 0);
    left: 50%;
    top: 30px;
    font-size: 70px;
    font-family: "ArbatDi";
    color: #0d0d0d;
        }

#titre img {
    width: 100%;
    height: auto;
}


#login_valid_succes {

    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    height: 60px;
    width: 280px;
    text-align: center;
    font-size: 16px;
    top: 135px;
    
}

#login_cadenas_vert {
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 20px;
    height: 50px;
    width: 50px;
}

#login_cadenas_vert img {
    height: 100%;
    width: 100%;
}


        
#login_cadre_ext {
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 220px;
    height: 205px;
    width: 280px;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
    
    
  
    
    background-color: lightgrey;
    border-radius: 8px;
    
    background: -webkit-repeating-linear-gradient(bottom left, #d0d0d0,
    #e8e8e8, #f0f0f0, #e0e0e0); background: -o-repeating-linear-
    gradient(bottom left, #d0d0d0, #e8e8e8, #f0f0f0, #e0e0e0); background:
    -moz-repeating-linear-gradient(bottom left, #d0d0d0, #e8e8e8, #f0f0f0,
    #e0e0e0); background: repeating-linear-gradient(bottom left, #d0d0d0,
    #e8e8e8, #f0f0f0, #e0e0e0);
    
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
    overflow: hidden;
    
    transition: all 0.2s ease;
    
        }


#login_messages {
    position: absolute;
    width: 280px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 440px;
    text-align: center;
    color: #ca1c1c;
    /*background-color: #f6c5bc; */
    border-radius: 4px;
    font-weight: bold;
    /*text-shadow: 0px 1px 4px rgba(0,0,0,0.4);*/
    /*-webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
    */
    opacity: 1;
    padding: 0;
    box-sizing: border-box;
    transition: all 0.2s ease;
    overflow: hidden;
}

#login_credits {
    position: absolute;
    width: 500px;
    height: 30px;
    top: 540px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    color: grey;
    text-align: center;
    line-height: 30px;
    font-size: 10px;
    user-select: none;
}



/* Connexion */
       
#login_cadre_seconnecter_inputs {
    position: absolute;
    width: 85%;
   
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 20px;
    height: 100px;
    cursor: default;

}

#login_seconnecter_nomdusager_label {
    position: absolute;
    top: 6px;
    letter-spacing: -0.2px;
    color: #262626;
}

#login_seconnecter_nomdusager {
    position: absolute;
    width: 99%;
    top: 25px;
}

#login_seconnecter_motdepasse_label {
    position: absolute;
    top: 58px;
    letter-spacing: -0.2px;
    color: #262626;
}

#login_seconnecter_motdepasse {
    position: absolute;
    top: 77px;
    width: 99%;
}


#login_cadre_seconnecter_boutons {
    position: absolute;
    top: 140px;
    width: 85%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    height: 20px;
    
}

.bouton1 {
    position: absolute;
    height: 23px;
    width: 90px;
    color: white;
    background-color: #262626;
    text-align: center;
    border-radius: 10px;
    line-height: 23px;
    cursor: pointer;
    letter-spacing: -0.1px;
    font-size: 15px;
    
    background: #45484d;
    background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
    background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%);
    background: linear-gradient(to bottom, #45484d 0%,#000000 100%);
    
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);
    
    
    
}

.bouton1:hover {
    
    
        filter: brightness(125%);
        -webkit-filter: brightness(125%);
        -moz-filter: brightness(125%);
        -o-filter: brightness(125%);
        -ms-filter: brightness(125%);
}

.input1 {
    -webkit-box-shadow: 0px 1px 2px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 1px 2px -1px rgba(0,0,0,0.75);
    box-shadow: 0px 1px 2px -1px rgba(0,0,0,0.75);
    width: 99%;
}


#login_seconnecter_connexion {
    left: 8%;

}

#login_seconnecter_sinscrire {
    right: 8%;
}

#login_seconnecter_oubli {

    position: absolute;
    border: 1px black;
    top: 180px;
    height: 20px;
    width: 85%;
    text-align: center;
    cursor: pointer;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    font-weight: bold;
    font-size: 13.2px;
    color: #262626;
}

#login_seconnecter_oubli span:hover {
    color: #666666;     
}


/* Inscription */

#login_inscription_titre {
    position: absolute;
    text-align: center;
    font-size: 25px;
    top: 5px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;

}

#login_cadre_inscription_inputs {
    position: absolute;
    width: 85%;
   
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 40px;
    height: 260px;
}

#login_cadre_inscription_boutons {
    position: absolute;
    width: 85%;
    height: 20px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 325px;

}

#login_inscription_retour {
    position: absolute;
    height: 20px;
    width: 20px;
    cursor: pointer;
}

#login_inscription_retour img {
    height: 100%;
    width: 100%;

}

#login_inscription_retour img:hover {
        filter: brightness(200%);
        -webkit-filter: brightness(200%);
        -moz-filter: brightness(200%);
        -o-filter: brightness(200%);
        -ms-filter: brightness(200%);
}

#login_inscription_sinscrire {
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    opacity: 1;

}


#login_inscription_nomdusager_label {
    position: absolute;
    top: 0px;
    letter-spacing: -0.2px;
    color: #262626;
}

#login_inscription_nomdusager {
    position: absolute;
    width: 99%;
    top: 19px;
}

#login_inscription_prenom_label {
    position: absolute;
    top: 45px;
    letter-spacing: -0.2px;
    color: #262626;
}

#login_inscription_prenom {
    position: absolute;
    width: 99%;
    top: 64px;
}

#login_inscription_nomdefamille_label {
    position: absolute;
    top: 90px;
    letter-spacing: -0.2px;
    color: #262626;
}

#login_inscription_nomdefamille {
    position: absolute;
    width: 99%;
    top: 109px;
}

#login_inscription_courriel_label {
    position: absolute;
    top: 135px;
    letter-spacing: -0.2px;
    color: #262626;
}

#login_inscription_courriel {
    position: absolute;
    width: 99%;
    top: 154px;
}

#login_inscription_motdepasse_label {
    position: absolute;
    top: 180px;
    letter-spacing: -0.2px;
    color: #262626;
}

#login_inscription_motdepasse {
    position: absolute;
    width: 99%;
    top: 199px;
}

#login_inscription_confirmation_label {
    position: absolute;
    top: 225px;
    letter-spacing: -0.2px;
    color: #262626;
}

#login_inscription_confirmation {
    position: absolute;
    width: 99%;
    top: 244px;
}

#login_inscription_loading {
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    height: 23px;
    width: 23px;
    display: none;
}

#login_inscription_loading img {
    height: 100%;
    width: 100%;

}

#login_inscription_courriel_message {
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    width: 85%;
    height: 150px;
    top: 130px;
    text-align: center;

}

#login_inscription_enveloppe {
    position: absolute;
    top: 45px;
    height: 80px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    
}

#login_inscription_enveloppe img {
    
    height: 100%;
}


/* RECUPERATION */

#login_recuperation_titre {
    position: absolute;
    text-align: center;
    font-size: 25px;
    top: 5px;
    width: 100%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;

}

#login_cadre_recuperation_inputs {
    position: absolute;
    width: 85%;
   
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 40px;
    height: 260px;
}

#login_cadre_recuperation_boutons {
    position: absolute;
    width: 85%;
    height: 20px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 160px;

}


#login_recuperation_courriel_label {
    position: absolute;
    top: 45px;
    letter-spacing: -0.2px;
    color: #262626;
}

#login_recuperation_courriel {
    position: absolute;
    width: 99%;
    top: 64px;
}

#login_recuperation_courriel_message {
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    width: 85%;
    height: 100px;
    top: 105px;
    text-align: center;
    
}

#login_recuperation_enveloppe {
    position: absolute;
    top: 65px;
    height: 40px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    text-align: center;
    
}

#login_recuperation_enveloppe img {
    height: 100%;

}

/* TERMES CONDITIONS */

#termes_conditions_cadre {
    position: absolute;

    user-select: none;
    width: 80%;
    height: 80%; 
    background: -webkit-repeating-linear-gradient(bottom left, #cfcfcf, #e0e0e0, #dfdfdf, #e0e0e0);
    background: -o-repeating-linear-gradient(bottom left, #cfcfcf, #e0e0e0, #dfdfdf, #e0e0e0);
    background: -moz-repeating-linear-gradient(bottom left, #cfcfcf, #e0e0e0, #dfdfdf, #e0e0e0);
    background: repeating-linear-gradient(bottom left, #cfcfcf, #e0e0e0, #dfdfdf, #e0e0e0);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;   
    
  
    
    background-color: lightgrey;
    border-radius: 8px;
    
    background: -webkit-repeating-linear-gradient(bottom left, #d0d0d0,
    #e8e8e8, #f0f0f0, #e0e0e0); background: -o-repeating-linear-
    gradient(bottom left, #d0d0d0, #e8e8e8, #f0f0f0, #e0e0e0); background:
    -moz-repeating-linear-gradient(bottom left, #d0d0d0, #e8e8e8, #f0f0f0,
    #e0e0e0); background: repeating-linear-gradient(bottom left, #d0d0d0,
    #e8e8e8, #f0f0f0, #e0e0e0);
    
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
    overflow: hidden;

}

#termes_conditions_interieur {
    position: absolute;
    width: 90%;
    height: 70%;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 44%;
    background-color: #fafafa;
    border-bottom: 1px solid #f4f4f4;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #e8e8e8;
    border-top: 1px solid #cccccc;
    box-shadow: 0px 3px 5px #999999 inset;
    overflow-y: scroll;
    padding: 20px;
    box-sizing: border-box;
}

#termes_conditions_cadre_checkbox {
    position: absolute;
    transform: translate(-50%, 0);
    left: 50%;
    bottom: 13%;
    height: auto;
    width: auto;
    font-size: 18px;
}



#termes_conditions_bouton {
    position: absolute;
    transform: translate(-50%, 0);
    left: 50%;
    bottom: 5%;
    opacity: 0.5;
    cursor:auto;
    
}

#termes_conditions_interieur > ol > li {
    font-weight: bold;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 5px;
}

#termes_conditions_interieur > ol > li + ol > li {
    font-weight: normal;
    line-height: 1.5;
}
/* PAGE PRINCIPALE */

#principale_cadre {
    position: absolute;
    height: 644px;
    width: 1130px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 4%;
    box-sizing: border-box;
}


/* Barre navigation gauche */

#principale_navigation_cadre {
    position: absolute;
    height: 100%;
    width: 90px;
    left: 0px;
    box-sizing: border-box;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
   
    z-index: 10;
}

#principale_navigation_cadre_ombre {
    content: "";
    position: absolute;
    height: 100%;
    width: 86px;
    left: 2px;
    box-sizing: border-box;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
    box-shadow: -0px 1px 5px darkgrey;
    z-index: 5;

}

#principale_cadre_droite {
    position: absolute;
    height: 100%;
    width: 1020px;
    right: 0px;
    /*border: 1px solid black;*/
    bottom: 0px;
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: auto;

}

#principale_navigation_logo {
    position: absolute;
    width: 100%;
    height: 140px;;
    top: 0px;
    text-align: center;
    line-height: 0.85;
    font-family: "ArbatDi";
    font-size: 25px;
    color: #4d4d4d;
    padding-top: 15px;
    padding-bottom: 15px;
    box-sizing: border-box;
    /*background: radial-gradient(circle farthest-side at top, #e6e6e6, #babec4);*/
    background: radial-gradient(circle farthest-side at top, #fefefe, #d2d7dc);
    cursor: pointer;
    /*border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #acb1b9;
    border-left: 1px solid #c8cbd0;
    border-right: 1px solid #babec4; */
    
    border-top: 1px solid #fcfcfc;
    border-bottom: 1px solid #aeb3bb;
    border-left: 1px solid #dadde2;
    border-right: 1px solid #caced4;
    
    text-shadow: 0px 1px 1px #ffffff, 0px -1px 0px #999999;

}

#principale_navigation_logo img {
    width: 85%;
    height: auto;
}

#principale_navigation_message {
    position: absolute;
    height: 62px;
    width: 100%;
    bottom: 3px;
    text-align: center;
    box-sizing: border-box;
    font-size: 13px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   
    
}

#principale_navigation_message_int {
    position: absolute;
    height: 50px;
    width: 78px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    border-radius: 4px;
    box-sizing: border-box;
    background: radial-gradient(circle 110px at top, #e7e1d5, #7a7a70);
    box-shadow: 1px 2px 3px #737373 inset, -1px -1px 3px #737373 inset;
    border-bottom: 1px solid #f2f1f4;
    border-top: 1px solid #9196a1;
    border-left: 1px solid #9196a1;
    border-right: 1px solid #9196a1;
    overflow: hidden;
    
}

#principale_navigation_message_int div {
    position: absolute;
    height: auto;
    width: 100%;
    transform: translate(-50%, 0);
    left: 50%;
    line-height: 1.1;
    overflow: hidden;
    word-break: break-all;
    margin-top: 5%;
}


#principale_navigation_boutons {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 0px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    box-sizing: border-box;
    min-height: 504px;
    
}

.boutons_navigation_gauche {
    position: absolute;
    height: 84px;
    width: 100%;
    /*display: block;*/
    text-align: center;
    line-height: 0.8;
    white-space:nowrap;
    box-sizing: border-box;
    border-radius: 1px;
    
    border-top: 1px solid #fcfcfc;
    border-bottom: 1px solid #aeb3bb;
    border-left: 1px solid #dadde2;
    border-right: 1px solid #caced4;
    
    background: radial-gradient(circle farthest-side at top, #fefefe, #d2d7dc);
    cursor:pointer;
    
    text-shadow: 0px 1px 1px #ffffff, 0px -1px 0px #999999;
    
}

.boutons_navigation_prof_gauche {
    position: absolute;
    height: 72px;
    width: 100%;
    /*display: block;*/
    text-align: center;
    line-height: 0.8;
    white-space:nowrap;
    box-sizing: border-box;
    border-radius: 1px;
    
    border-top: 1px solid #fcfcfc;
    border-bottom: 1px solid #aeb3bb;
    border-left: 1px solid #dadde2;
    border-right: 1px solid #caced4;
    
    background: radial-gradient(circle farthest-side at top, #fefefe, #d2d7dc);
    cursor:pointer;
    text-shadow: 0px 1px 1px #ffffff, 0px -1px 0px #999999;
    
}

.boutons_navigation_prof_gauche:not(.cancel-hover):hover,
.boutons_navigation_gauche:not(.cancel-hover):hover {
    background: radial-gradient(circle 100px at 50% 40%, #e3e6e8, #babec4);
    transform: scale(1);
    z-index: 9;
  
    
} 

.boutons_navigation_prof_gauche:not(.cancel-hover):hover img,
.boutons_navigation_gauche:not(.cancel-hover):hover img {
    -webkit-filter: grayscale(90%) brightness(95%); 
    filter: grayscale(90%) brightness(95%);

}

.boutons_navigation_prof_gauche:not(.cancel-hover):hover span,
.boutons_navigation_gauche:not(.cancel-hover):hover span{ 
    color: #525860;
}


.boutons_navigation_gauche span,
.boutons_navigation_prof_gauche span {
    position: absolute;
    bottom: 10%;
    left: 50%;
    height: auto;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #3b3e45;
    line-height: 1;
}

.boutons_navigation_prof_gauche span {
    bottom: 8%;
    font-size: 11px;

}


#principale_navigation_profil .icone1 {
    position: absolute;
    border-radius: 50%;
    height: 42px;
    width: 42px;
    -webkit-transform: translate(-50%, -65%);
    -ms-transform: translate(-50%, -65%);
    transform: translate(-50%, -65%);
    left: 50%;
    top: 50%;
    border: 1px solid black;
    overflow:hidden;
}


#principale_navigation_prof_profil .icone1 {
    position: absolute;
    border-radius: 50%;
    height: 38px;
    width: 38px;
    -webkit-transform: translate(-50%, -65%);
    -ms-transform: translate(-50%, -65%);
    transform: translate(-50%, -65%);
    left: 50%;
    top: 50%;
    border: 1px solid black;
    overflow:hidden;
}



#principale_navigation_prof_profil .icone1 img,
#principale_navigation_profil .icone1 img {
    height: 100%;
    width: 100%;
    -webkit-filter: grayscale(90%) brightness(80%); 
    filter: grayscale(90%) brightness(80%);
}

#principale_navigation_mescours {
    position: absolute;
    top: 84px;
}


#principale_navigation_prof_mescours {
    position: absolute;
    top: 72px;
}


#principale_navigation_mescours .icone1 {
    position: absolute;
    height: 60px;
    width: 60px;
    -webkit-transform: translate(-50%, -65%);
    -ms-transform: translate(-50%, -65%);
    transform: translate(-50%, -65%);
    left: 50%;
    top: 50%;

}

#principale_navigation_prof_mescours .icone1 {
    position: absolute;
    height: 52px;
    width: 52px;
    -webkit-transform: translate(-50%, -65%);
    -ms-transform: translate(-50%, -65%);
    transform: translate(-50%, -65%);
    left: 50%;
    top: 50%;
}


#principale_navigation_prof_mescours_icone img,
#principale_navigation_mescours_icone img {
    width: 100%;
    height: 100%;
    -webkit-filter: grayscale(90%) brightness(80%); 
    filter: grayscale(90%) brightness(80%); 
}



#principale_navigation_prof_banque_exercices {
    position: absolute;
    top: 144px;
}

#principale_navigation_prof_banque_exercices .icone1 {
    position: absolute;
    height: 32px;
    width: 32px;
    -webkit-transform: translate(-50%, -85%);
    -ms-transform: translate(-50%, -85%);
    transform: translate(-50%, -85%);
    left: 50%;
    top: 50%;

}


#principale_navigation_notifications {
    position: absolute;
    top: 168px;
}




#principale_navigation_prof_notifications {
    position: absolute;
    top: 216px;
}

#principale_navigation_parametres {
    position: absolute;
    top: 252px;
}



#principale_navigation_prof_parametres {
    position: absolute;
    top: 288px;
}

#principale_navigation_prof_apropos {
    position: absolute;
    top: 360px;
}

#principale_navigation_apropos {
    position: absolute;
    top: 336px;
}



#principale_navigation_deconnexion {
    position: absolute;
    top: 420px;
}

#principale_navigation_prof_deconnexion {
    position: absolute;
    top: 432px;
}

#principale_navigation_deconnexion .icone1 {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    -webkit-transform: translate(-50%, -70%);
    -ms-transform: translate(-50%, -70%);
    transform: translate(-50%, -70%);
    left: 45%;

}

#principale_navigation_prof_deconnexion .icone1 {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    -webkit-transform: translate(-50%, -70%);
    -ms-transform: translate(-50%, -70%);
    transform: translate(-50%, -70%);
    left: 45%;

}












.boutons_navigation_gauche .icone1 {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 36px;
    -webkit-transform: translate(-50%, -70%);
    -ms-transform: translate(-50%, -70%);
    transform: translate(-50%, -70%);
    left: 50%;
}

.boutons_navigation_prof_gauche .icone1 {
    position: absolute;
    top: 17%;
    width: 32px;
    height: 32px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;

}

.icone1 img {
    width: 100%;
    height: 100%;
    -webkit-filter: grayscale(90%) brightness(80%); 
    filter: grayscale(90%) brightness(80%); 
}


.bouton_nav_select {
    position: absolute;
    background: radial-gradient(circle 80px at bottom, #dbdbdb, #b0bab9);
    box-sizing: content-box;
    transform: scale(1);
    z-index: 10;
    width: 84px;
    height: 78px;
    /*-webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;*/
    margin-top: 2px;
    /*border-bottom: 1px solid #acb1b9;
    border-top: 1px solid #acb1b9;*/
    left: 2px;
    border-bottom: 1px solid #bfbfbf;
    border-top: 1px solid #848484;
    border-right: 1px solid #9a9a9a;
    border-left: 1px solid #9a9a9a;
    /*border-right: 1px solid #acb1b9;
    border-left: 1px solid #c3c8ca;  */
}


.bouton_nav_select span {
    bottom: 8%;

}

.bouton_nav_prof_select span {
    bottom: 7%;
}

.bouton_nav_prof_select {
    position: absolute;
    background: radial-gradient(circle 80px at bottom, #dbdbdb, #b0bab9);
    box-sizing: content-box;
    transform: scale(1);
    z-index: 10;
    width: 84px;
    height: 66px;
    /*-webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;*/
    margin-top: 2px;
    /*border-bottom: 1px solid #acb1b9;
    border-top: 1px solid #acb1b9;*/
    left: 2px;
    border-bottom: 1px solid #bfbfbf;
    border-top: 1px solid #848484;
    border-right: 1px solid #9a9a9a;
    border-left: 1px solid #9a9a9a;
    /*border-right: 1px solid #acb1b9;
    border-left: 1px solid #c3c8ca;  */
}

/* bordure dessus et en dessous du bouton*/
.bouton_nav_select:after {
    content: "";
    position: absolute;
    width: 85px;
    height: 80px;
    top: -3px;
    left: -3px;
    box-sizing: content-box;
     /*border-top: 2px solid red;
        border-bottom: 2px solid red; */
    border-top: 2px solid #909195;
    border-bottom: 2px solid #f3f3f3;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;

}

.bouton_nav_prof_select:after {
    content: "";
    position: absolute;
    width: 85px;
    height: 68px;
    top: -3px;
    left: -3px;
    box-sizing: content-box;
     /*border-top: 2px solid red;
        border-bottom: 2px solid red; */
    border-top: 2px solid #909195;
    border-bottom: 2px solid #f3f3f3;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
   
}

.bouton_nav_prof_select span,
.bouton_nav_select span {
    color: #3b3f45;

}

.bouton_nav_prof_select img,
.bouton_nav_select img {
    -webkit-filter: grayscale(0%) brightness(105%) contrast(110%) !important;
    filter: grayscale(0%) brightness(105%) contrast(110%) !important;

}


/* BARRE NAVIGATION PROFESSEUR */





/* FIN BARRE NAV PROF*/

/* MES COURS */

#mescours_ajouter_cours {
    display:block;
    position: relative;
    margin-left:auto;
    right:30px;
    height:75px;
    width:100px;
    cursor:pointer;
}

#mescours_ajouter_cours img {
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left:50%;
    width: 60px;
    height: 60px;
}

#mescours_ajouter_cours_texte {
    position: absolute;
    bottom: 0px;
    right: 0px;
    height: 20px;
    font-size: 16px;
    width: auto;
    color: white;

}

#mescours_cadre_liste {
    position: relative;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin-left:50%;
    width: 960px;
    min-height: 10px;
    opacity: 1;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}



#mescours_titre {
    position: relative;
    margin-left: 0px;
    height: 35px;
    font-size: 30px;
    width: auto;
    padding-left: 10px;
    color: #f9f9f9;
    text-shadow: 0px 1px 1px #999999;
    font-weight: bold;
}

#mescours_cadre_liste_defilante {
    position: relative;
    margin-left: 0px;
    width: 960px;
    min-height: 100px;
    border-top: none;
    overflow-x:hidden;
    overflow-y: auto;
    max-height:599px;
}


.mescours_liste_element {
    position: relative;
    width: 920px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    height: 70px;
    margin-top: 10px;
    margin-bottom: 3px;
    background: linear-gradient(178deg,#eb7b29,#c65301);
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 15px;
    color: #f9f9f9;
    font-weight: bold;
    border-radius: 5px;
    text-shadow: 0px 1px 1px #999999;
    opacity: 1;
    cursor: pointer;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;   
    box-shadow: 0px 2px 2px darkgrey;

}

.mescours_liste_element_active {
    background: linear-gradient(178deg,#ff9b49,#e67321);

}




.mescours_liste_element:hover .mescours_liste_element_participants_cadre {
    opacity: 1;


}


.mescours_liste_element_nom {
    position: absolute;
    top: 10px;
    left: 20px;
    height: 20px;
    width: auto;


}

.mescours_liste_element_sigle {
    position: absolute;
    top: 35px;
    left: 20px;
    height: 20px;
    width: auto;


}


.mescours_liste_element_session_annee {
    position: absolute;
    top: 10px;
    left: 450px;
    height: 20px;
    width: auto;

}


.mescours_liste_element_universite {
    position: absolute;
    top: 35px;
    left: 450px;
    height: 20px;
    width: auto;


}

.mescours_liste_element_participants_cadre {
    position: absolute;
    left: 785px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    width: 80px;
    height: 60px;
    text-align: center;
    opacity: 0;
    

}

.mescours_liste_element_participants { 
    position: absolute;
    height: 50px;
    width: 40px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    
    
}


.mescours_liste_element_participants img {
    margin-top: 5px;
    width: 100%;
    height: auto;

}


.mescours_liste_element_participants_titre {
    position: absolute;
    height: 11px;
    width: auto;
    bottom: 5px;
    left: 0px;
    font-size: 13px;
    text-align: center;
    
    
}


    /* Mes cours 2 : liste exercices*/


.mescours_liste_element_exercices_contenant {
    position: relative;
    height: auto;
    width: 900px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    background-color: #333333;
    color: white;
    padding: 0px;
    box-sizing: border-box;
    max-height: 0;
    overflow: hidden;
    transition: all 0.2s ease-out;
    opacity:0;
}

.mescours_liste_exercices_entete {
    position: relative;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    width: 840px;
    height: 70px;
    line-height: 0.85;

}



/* importer exercice*/

.mescours_importer_exercice_contenant {
    position: absolute;
    width: 175px;
    left: 0px;
    top: 10px;
    bottom: 20px;
    height: 40px;
}


.mescours_importer_exercice_texte {
    position: absolute;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    right:0px;
    top:45%;
    font-size: 15px;
    cursor: pointer;
    width: auto;
    text-align:center;
    line-height: 0.85;

}

.mescours_importer_exercice {
    position: absolute;
    left: 0;
    position: absolute ;
    width: 45px;
    height: 40px;
    cursor: pointer;
}



.mescours_importer_exercice img {
    position: absolute;
    width: 100%;
    height: 100%;
    

}






/* Labels entête PROF contenant exercices */


.mescours_liste_exercices_entete_nombre_etapes {
    position: absolute;
    left: 260px;
    bottom: -2px;
    text-align:center;
    font-size: 13px;

}

.mescours_liste_exercices_entete_criteres {
    position: absolute;
    left: 370px;
    bottom: -2px;
    text-align:center;
    font-size: 13px;

}

.mescours_liste_exercices_entete_etape1 {
    position: absolute;
    left: 490px;
    bottom: -2px;
    text-align:center;
    font-size: 13px;

}

.mescours_liste_exercices_entete_etape2 {
    position: absolute;
    left: 545px;
    bottom: -2px;
    text-align:center;
    font-size: 13px;

}

.mescours_liste_exercices_entete_etape3 {    
    position: absolute;
    left: 605px;
    bottom: -2px;
    text-align:center;
    font-size: 13px;


}




/* MES COURS EXERCICE ÉTUDIANT */

.mescours_exercice_element {
    position: relative;
    height: 60px;
    width: 840px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    background: #33cc33;
    background: linear-gradient(#d4f47a, #86be4d);
    margin-bottom: 10px;
    margin-top: 10px;
    transition: background .3s;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
    cursor: pointer;
}



/* MES COURS EXERCICE PROF */

.mescours_exercice_element_prof {
    position: relative;
    height: 100px;
    width: 840px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    background: #33cc33;
    background: linear-gradient(#d4f47a, #86be4d);
    margin-bottom: 10px;
    margin-top: 10px;
    transition: background .3s;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
    cursor: default;
}



.mescours_exercice_element:hover,
.mescours_exercice_element_prof:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
        transition: all 0s;
}



.mescours_exercice_element_supprimer {
    position: absolute;
    right: 25px;
    height: 35px;
    width: 35px;
    opacity:0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    cursor: pointer;

}

.mescours_exercice_element_prof:hover .mescours_exercice_element_supprimer {
    opacity:1;
}

.mescours_exercice_element_supprimer img {
    width: 100%;
    height: 100%;
}

.mescours_exercice_element_titre {
    position: absolute;
    width: auto;
    width: 250px;
    max-width: 250px;
    height: auto;
    max-height: 50px;
    overflow: hidden;
    left: 20px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    font-size: 20px;
    line-height: auto;

}





.mescours_exercice_element_inactif [class*='mescours_exercice_element_essai'] {
    background-color: #8c8c8c;
}

.mescours_exercice_element_inactif [class$='titre'] {
    background-color: transparent;
}

.mescours_exercice_element_progression {
    position: absolute;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    height: 20px;
    width: 160px;
    border: 1px solid gray;
    left: 300px;
}

.element_progression_int {
    position: absolute;
    background-color: #e6e6e6;
    height: 100%;
    width: 5%;
    color: #737373;
    text-align: right;
    font-size: 12px;
    line-height: 100%;
    padding-top: 1px;
    box-sizing: border-box;
    text-align: right;
    transition: all 0.5s;
}



.mescours_exercice_element_essai1 {
    position: absolute;
    height: 35px;
    width: 80px;
    border: 1px solid gray;
    left: 500px;
    top: 17px;
    color: #262626;
    font-size: 10px;
    text-align:center;
    padding-top: 5px;
    box-sizing: border-box;
    background-color: #9ebf49;
    box-shadow: 0px 1px 4px #737373 inset;

}

.mescours_exercice_element_essai2 {
    position: absolute;
    height: 35px;
    width: 80px;
    border: 1px solid gray;
    left: 595px;
    top: 17px;
    color: #262626;
    font-size: 10px;
    text-align:center;
    padding-top: 5px;
    box-sizing: border-box;
    background-color: #9ebf49;
    box-shadow: 0px 1px 4px #737373 inset;

}

.mescours_exercice_element_essai3 {
    position: absolute;
    height: 35px;
    width: 80px;
    border: 1px solid gray;
    left: 690px;
    top: 17px;
    color: #262626;
    font-size: 10px;
    text-align:center;
    padding-top: 5px;
    box-sizing: border-box;
    background-color: #9ebf49;
    box-shadow: 0px 1px 4px #737373 inset;

}

.mescours_exercice_element_essai1_titre {
    position: absolute;
    height: 10px;
    width: 80px;
    left: 500px;
    top: 6px;
    text-align: center;
    font-size: 10px;
    color: black;
    line-height: 10px;
    box-sizing: border-box;
}

.mescours_exercice_element_essai2_titre {
    position: absolute;
    height: 10px;
    width: 80px;
    left: 595px;
    top: 6px;
    text-align: center;
    font-size: 10px;
    color: black;
    line-height: 10px;
    box-sizing: border-box;
}

.mescours_exercice_element_essai3_titre {
    position: absolute;
    height: 10px;
    width: 80px;
    left: 690px;
    top: 6px;
    text-align: center;
    font-size: 10px;
    color: black;
    line-height: 10px;
    box-sizing: border-box;
}






/* SWITCH*/

.mescours_exercices_switch {
    position: absolute;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    left: 715px;
    width: 32px;
    height: 16px;
}

.mescours_exercices_switch input {
    display:none;

}


.mescours_exercices_switch_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .3s;
    transition: .3s;
    background-color: darkred;
    border-radius: 30px;
}


.mescours_exercices_switch_slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 0px;
    bottom: 0px;
    -webkit-transition: .3s;
    transition: .3s;
    background-color: lightgray;
    border-radius: 50%;

}

.mescours_exercices_switch input:checked + .mescours_exercices_switch_slider {

background-color: green;

}

.mescours_exercices_switch input:checked + .mescours_exercices_switch_slider:before {
    -webkit-transform: translateX(16px);
    transform: translateX(16px);
}



/* */



.mescours_exercice_element_prof.mescours_exercice_element_inactif,
.mescours_exercice_element.mescours_exercice_element_inactif {
   /* -webkit-filter: grayscale(100%) brightness(80%);
    filter: grayscale(100%) brightness(80%); */

    background: linear-gradient(#b6b6b6, #898989);
}



.mescours_etudiant_aucun_exercice {
    position: relative;
    height: 40px;
    width: 840px;
    padding-left: 20px;
    padding-top: 10px;



}

.mescours_exercice_prof_nb_etapes_cadre {
    position: absolute;
    height: 20px;
    width: 40px;
    left: 285px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;



}

.mescours_exercice_prof_nb_etapes_cadre select {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top:50%;

}


/* TABLEAU CRITÈRES ÉTAPES */
.mes_cours_exercice_prof_criteres_etapes_cadre {
    position: absolute;
    height: 85px;
    width: 300px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    border: 1px solid black;
    left: 370px;
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: 13px;
    cursor: default;
    color: black;

}


.mes_cours_exercice_prof_criteres_etapes_cadre table {
    border-collapse:collapse;
}

.mes_cours_exercice_prof_criteres_etapes_cadre tr:nth-child(odd) {
    background-color: #C5E0B4;

}

.mes_cours_exercice_prof_criteres_etapes_cadre tr:nth-child(even) {
    background-color: #A9D18E;
}


.mescours_exercice_element_inactif .mes_cours_exercice_prof_criteres_etapes_cadre tr:nth-child(odd) {
    background-color: #D9D9D9;

}

.mescours_exercice_element_inactif .mes_cours_exercice_prof_criteres_etapes_cadre tr:nth-child(even) {
    background-color: #BFBFBF;

}




.mes_cours_exercice_prof_criteres_etapes_cadre tr:hover {
    background-color: green;
    color: white;
}

.mescours_exercice_element_inactif .mes_cours_exercice_prof_criteres_etapes_cadre tr:hover {
    background-color: #737373;
    color: white;
}

.mes_cours_exercice_prof_criteres_etapes_cadre tr td:nth-of-type(1) {
    width: 110px;
}

.mes_cours_exercice_prof_criteres_etapes_cadre tr td:nth-of-type(2) {
    width:60px;
}

.mes_cours_exercice_prof_criteres_etapes_cadre tr td:nth-of-type(3) {
    width: 60px;
}

.mes_cours_exercice_prof_criteres_etapes_cadre tr td:nth-of-type(4) {
    width: 60px;
}

.mes_cours_exercice_prof_criteres_etapes_cadre tr td input {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin-left:50%;
}

.mes_cours_exercice_prof_criteres_etapes_cadre_titre  {
    font-weight: bold;
}


/* BANQUE D'EXERCICES */

#banque_titre {
    position: absolute;
    left: 10px;
    top:0px;
    height: 40px;
    font-size: 30px;
    width: auto;
    padding-left: 10px;
    color: #f9f9f9;
    text-shadow: 0px 1px 1px #999999;
    font-weight: bold;

}

#banque_tableau_cadre {
    position: absolute;
    height: auto;
    max-height: 494px;
    border: 1px solid black;
    width: 575px;
    left: 20px;
    top: 80px;
    overflow-y:auto;
    box-sizing: border-box;
    user-select: none;
}

#banque_tableau_entete_cadre {
    position: absolute;
    background-color: darkgrey;
    width:575px;
    height: 25px;
    left: 20px;
    top:55px;
    border: 1px solid black;
    box-sizing: border-box;
    user-select: none;
}

.banque_tableau_entete {
    position: absolute;
    top: 0px;
    width: auto;
    height: 20px;
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    padding-top:2px;
    padding-bottom: 3px;
    cursor:pointer;
}

.banque_tableau_entete:hover {
    color: #8c8c8c;

}



#banque_tableau_entete_nom {
    left: 5px;
}

#banque_tableau_entete_niveau {
    left: 242px;
}

#banque_tableau_entete_createur {
    left: 337px;
}

#banque_tableau_entete_modification {
    right: 58px;
    padding-left:10px;

}


#banque_tableau_cadre table {
    table-layout: fixed;
    font-size: 14px;


}

#banque_tableau {
    border-spacing: 1px;
    
}

#banque_tableau_cadre table tr:nth-child(even) {
background-color: #cccccc;

}

#banque_tableau_cadre table tr:nth-child(odd) {
background-color:#e6e6e6;

}

#banque_tableau_cadre table tr:hover {
    background-color:#999999;
    color:#f2f2f2;
}

#banque_tableau_cadre table td {
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: default;
}

#banque_tableau_cadre tr td:nth-child(1) {
    width: 235px;
    max-width:235px;
    overflow: hidden;
    white-space: nowrap;
    padding-left:5px;
}

#banque_tableau_cadre tr td:nth-child(2) {
    width: 50px;
    max-width:50px;
    text-align: center;
}


#banque_tableau_cadre tr td:nth-child(3) {
    width: 150px;
    max-width:150px;
    overflow:hidden;
    text-align:center;
    white-space: nowrap;
}

#banque_tableau_cadre tr td:nth-child(4) {
    width: 90px;
    max-width:90px;
    overflow:hidden;
    text-align:center;
    border-spacing: 0px;
    padding:0px;
}

#banque_tableau_cadre tr td:nth-child(5) {
    width: 40px;
    max-width:40px;
    overflow:hidden;
    text-align:center;
    white-space: nowrap;
    padding:0;
}

.banque_exercice_modifier {
    width: 20px;
    height: 20px;
    text-align: center;
    margin-left: 10px;
    opacity: 0;
    cursor: pointer;

}
.banque_exercice_modifier img {
    width: 100%;
    height: 100%;
}

#banque_tableau_cadre tr:hover .banque_exercice_modifier {
    opacity: 1;
}


.banque_selected_exercice {
    background-color: #404040 !important;
    color: white !important;
}

.banque_selected_exercice .banque_exercice_modifier img {
    filter: invert(90%);
}


/* creer_exercice*/

.banque_creer_exercice_contenant {
    position: absolute;
    width: 160px;
    left: 20px;
    bottom: 15px;
    height: 40px;
}


.banque_creer_exercice_texte {
    position: absolute;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    right:0px;
    top:50%;
    font-size: 16px;
    cursor: pointer;
    width: auto;
    text-align:center;
    line-height: 0.85;

}

.banque_creer_exercice {
    position: absolute;
    left: 0px;
    top: -2px;
    position: absolute ;
    width: 44px;
    height: 44px;
    cursor: pointer;
}



.banque_creer_exercice img {
    position: absolute;
    width: 100%;
    height: 100%;
    

}




#banque_fleche_ajouter_cadre {
    position: absolute;
    top: 95px;
    left: 615px;
    width: 45px;
    height: 50px;
   cursor: pointer;

}

#banque_fleche_ajouter_cadre div:nth-child(1) {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 45px;
    height: 32px;
}

#banque_fleche_ajouter_cadre div:nth-child(2) {
    position: absolute;
    top: 32px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    width: auto;
    height: auto;
    text-align: center;
}


#banque_fleche_ajouter_cadre div:nth-child(1) img {

    width: 100%;
    height: 100%;
}


#banque_cours_titre {
    position: absolute;
    top: 30px;
    width: 340px;
    height: 25px;
    right: 0px;
    font-weight:bold;
    font-size: 18px;
    color: white;
    text-shadow: 0px 1px 1px #999999;

}

#banque_cours_cadre {
    position: absolute;
    height: auto;
    max-height: 460px;
    width: 340px;
    right: 0px;
    top:55px;
   

}

#banque_cours_select_cadre {
    position: absolute;
    height:35px;
    width:100%;
    background-color: darkgrey;
    border: 1px solid black;
    display:inline-block;
    box-sizing: border-box;

}


#banque_cours_select_cadre select {
    position: absolute;
    width: 335px;
    font-size:12px;
    top:50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


#banque_cours_select_cadre select option {
    height: 25px;
    border: 1px solid blue;

}

#banque_cours_liste_exercices {
    position: absolute;
    height: auto;
    height: 469px;
    width: 100%;
    top:40px;
    left: 0px;
    overflow-y: auto;
    padding-top:10px;
    display:inline-block;

}

.banque_cours_exercice_element {
    position: relative;
    margin-top:5px;
    margin-left:15px;
    width: 310px;
    height: 40px;
    background: linear-gradient(#d4f47a, #86be4d);
    user-select: none;

}

.banque_cours_exercice_titre {
    position: absolute;
    height: auto;
    max-height:35px;
    width: 200px;
    left: 5px;
    top:50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    overflow: hidden;
    
}

.banque_cours_exercice_actif {
    
}

.banque_cours_exercice_inactif {
    background: linear-gradient(#b6b6b6, #898989);
}

/*.banque_cours_exercice_element .banque_switch_cadre {
    
} */

.banque_cours_exercice_element .banque_exercice_supprimer {
    position: absolute;
    width: 25px;
    height: 25px;
    top:50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    right:10px;
    cursor:pointer;
}

.banque_exercice_supprimer img {
    width:100%;
    height:100%;
}

.banque_cours_exercice_element label {
    position: absolute;
    width: 28px;
    height: 14px;
    top:50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    right:60px;    
    
}

.banque_cours_exercice_element label input {
    display: none;
}

.banque_cours_exercice_element label .banque_switch_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .3s;
    transition: .3s;
    background-color: darkred;
    border-radius: 28px;
}

    /* petit rond blanc */
.banque_cours_exercice_element label .banque_switch_slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 0px;
    bottom: 0px;
    -webkit-transition: .3s;
    transition: .3s;
    background-color: lightgray;
    border-radius: 50%;
}

.banque_cours_exercice_element input:checked + .banque_switch_slider {
background-color: green;
}

.banque_cours_exercice_element input:checked + .banque_switch_slider:before {
    -webkit-transform: translateX(16px);
    transform: translateX(16px);
}






/* COURS PROF = PARTICIPANTS */

#cours_sitemap {
    position: absolute;
    height: 20px;
    top: 0px;
    left: 0px;
    font-size: 14px;
    display: inline-block;
    box-sizing: border-box;
    color: #444444;
    
}




#cours_prof_titre {
    position: absolute;
    height: 30px;
    min-width: 100px;
    left: 20px;
    top: 20px;
    font-size: 20px;
    display:none;
}


/* cours prof PROFIL*/
#cours_prof_infos_cours_cadre {
    position: absolute;
    height: 60px;
    width: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.1);
    box-sizing: border-box;


    
}
/*
#cours_prof_infos_cours_cadre div {
    border: 1px solid blue;
} */

#cours_prof_infos_cours_cadre label {
    font-size: 18px;
    color: #333333;
    text-shadow: 0px 1px 1px #666666;
    font-weight: bold;
    background-color:transparent;
    user-select: none;
    line-height:18px;
}

#cours_prof_infos_cours_cadre input {
    position: absolute;
    font-size: 18px;
    color: #e9e9e9;
    text-shadow: 0px 1px 1px #999999;
    font-weight: bold;
    background-color:transparent;
    width: 310px;
    right: 0px;
    height: 18px;
    border: none;
    box-sizing: border-box;
    top: 1px;

}

#cours_prof_infos_cours_nom input {
    width: 370px;
}

#cours_prof_infos_cours_cadre input:focus {
    filter: brightness(120%);

}

#cours_prof_infos_cours_cadre input:focus + div {
    opacity: 0 !important;

}

#cours_prof_infos_cours_cadre input:hover {
    background-color: rgba(255, 255, 255, .1);;
}

.cours_prof_edit_field_button:hover,
#cours_prof_infos_cours_cadre input:hover + div {
    opacity:1;
}



.cours_prof_edit_field_button {
    position: absolute;
    width: 16px;
    height: 16px;
    right: 0px;
    top:50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    opacity:0;
    z-index: 10;
    pointer-events: none;
}




.cours_prof_edit_field_button img {
    width: 100%;
    height: 100%;
}

#cours_prof_infos_cours_nom {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 500px;
}



#cours_prof_infos_cours_sigle {
    position: absolute;
    left: 5px;
    bottom: 5px;
    font-size: 18px;
    width: 165px;
}

#cours_prof_infos_cours_sigle input {
    width: 115px;
}


#cours_prof_infos_cours_session {
    position: absolute;
    left: 180px;
    bottom: 5px;
    width: 160px;
}

#cours_prof_infos_cours_session select {
    position: absolute;
    left: 70px;
}

#cours_prof_infos_cours_annee {
    position: absolute;
    left: 370px;
    bottom: 5px;
    width: 135px;

}

#cours_prof_infos_cours_annee input {
    position: absolute;
    width: 70px;

}

#cours_prof_infos_cours_universite {
    position: absolute;
    right: 65px;
    top: 5px;
    width: 430px;
}

#cours_prof_infos_cours_departement {
    position: absolute;
    right: 65px;
    bottom: 5px;
    width: 430px;
}


#cours_prof_supprimer_cours {
    position: absolute;
    right: 17px;
    top: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    opacity: 0.25;
}

#cours_prof_supprimer_cours:hover {
    opacity: 0.5;
}

#cours_prof_supprimer_cours:active {
    transform: scale(1.1);
}

#cours_prof_supprimer_cours img {
    width: 100%;
    height: 100%;
}

/**/

#cours_prof_profil_avatar_cadre {
    position: absolute;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 1px solid black;
    overflow: hidden;
    top: 5px;
    left: 5px;
}

#cours_prof_profil_avatar_img {
    position: absolute;
    width: auto;
    height: 100%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;

}

#cours_prof_profil_nom {
    position: absolute;
    height: 25px;
    width: 420px;
    left: 75px;
    top: 5px;
    font-size: 22px;
    overflow:hidden;

}

#cours_prof_icone_statut {
    position: absolute;
    height: 25px;
    width: 25px;
    left: 75px;
    bottom: 10px;
    box-sizing: border-box;
}


#cours_prof_statut {
    position: absolute;
    height: 25px;
    width: 25px;
    left: 100px;
    bottom: 10px;
    padding-left: 5px;
    line-height: 30px;
    font-size: 14px;
    color: #4d4d4d;
}

#cours_prof_icone_statut img {
    position: absolute;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}


/* liste exercices*/
#cours_prof_liste_exercices_cadre {
    position: absolute;
    height: 520px;
    width: 510px;
    bottom: 0px;
    right: 0px;
    /*opacity: 0.1; */
    overflow: hidden;
    box-sizing: border-box;
}

#cours_prof_liste_exercices_titre {
    position: absolute;
    width: 100%;
    top: 0px;
    height: 70px;
    left: 0px;
    background-color: #bbc3c2;
    border: 1px solid black;
    box-sizing: border-box;


}


#cours_prof_participants_profil_cadre_loading {
    position: absolute;
    height: 30px;
    width: 30px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    display: none;

}

.invisible_content *:not(#cours_prof_participants_profil_cadre_loading) {
    visibility: hidden;
}

#cours_prof_participants_profil_cadre_loading img {
    height: 100%;
    width: 100%;
}

#cours_prof_liste_exercices_liste {
    position: absolute;
    width: 100%;
    height: 450px;
    bottom: 0px;
    left: 0px;
    overflow-x:hidden;
    overflow-y:auto;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid black;
    box-sizing: border-box;
}


/* scrollbar */
/* width */
::-webkit-scrollbar {
  width: 8px;
  border-radius: 50%;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


#cours_prof_liste_exercices_loading {
    position: absolute;
    width: 60px;
    height: 60px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 80px;
    display: none;
    z-index: 15;
}

#cours_prof_liste_exercices_loading img {
    height: 100%;
    width: 100%;
}


#cours_prof_modifier_ajouter_supprimer {
    position: absolute;
    height: 40px;
    width: 500px;
    border: 1px solid black;
    top: 530px;
    left: 20px;
    text-align: center;
    background-color: #dadddf;
    cursor: pointer;
    line-height: 40px;

}


#cours_prof_participants_cadre_defilement {
    position: absolute;
    width: 100%;
    height:40px;
    top: 60px;
    left: 0px;
    display: inline-block;
    box-sizing: border-box;
    user-select: none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#cours_prof_participants_bouton_defilement_gauche,
#cours_prof_participants_bouton_defilement_droite {
    position: absolute;
    height: 80%;
    top: 10%;
    display: inline-block;
    white-space: nowrap;
    width: auto;
    box-sizing: border-box;

}



#cours_prof_participants_bouton_defilement_gauche {
    display:none;
    left: 0;
}

#cours_prof_participants_bouton_defilement_droite {
    right: 0;
}


#cours_prof_participants_bouton_defilement_gauche:hover,
#cours_prof_participants_bouton_defilement_droite:hover {
    cursor: pointer;
}

#cours_prof_participants_bouton_defilement_gauche div,
#cours_prof_participants_bouton_defilement_droite div {
    position: relative;
    height: 100%;
    width: auto;
    vertical-align: middle;
    display: inline;
    box-sizing: border-box;
    font-size: 18px;
}

#cours_prof_participants_bouton_defilement_gauche img,
#cours_prof_participants_bouton_defilement_droite img {
    position: relative;
    height: 100%;
    width:auto;
    display: inline;
    box-sizing: border-box;
    vertical-align: middle;
}

#cours_prof_participants_bouton_defilement_gauche img {
        transform: scaleX(-1);
}


/*
#cours_prof_participants_bouton_defilement_droite div {
    position: relative;
    height: 100%;
    width: auto;
    vertical-align: middle;
    display: inline;
    opacity: 0.5;
    background-color:blue;
    box-sizing: border-box;

}


#cours_prof_participants_bouton_defilement_droite img {
    position: relative;
    height: 100%;
    width:auto;
    display: inline;
    border: 1px solid blue;
    box-sizing: border-box;
    vertical-align: middle;
}
*/

/* Englobe tout ce qui est sous l'info du cours */

#cours_prof_participants_cadre_section_participants {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 545px;
    box-sizing: border-box;
    transition: all 0.3s;
}


#cours_prof_participants_cadre {
    position: absolute;
    width: 490px;
    height: 274px;
    top: 25px;
    left: 5px;
    
}

#cours_prof_participants_titre { 
    position: absolute;
    width: 490px;
    height: 20px;
    top: 0px;
    left: 5px;
    color: #f9f9f9;
    text-shadow: 0px 1px 1px #999999;
    font-size: 20px;
    font-weight: bold;

}

#cours_prof_participants_loading {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 30px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    z-index: 5;
    display: none;
}

#cours_prof_participants_loading img {
    height: 100%;
    width: 100%;

}

#cours_prof_participants_liste { 
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}


#cours_prof_participants_form {
    position: absolute;
    width: auto;
    /*overflow-x:scroll; */
    box-sizing: border-box;

}

#cours_prof_participants_form_select {
position: absolute;
    width: 490px;
    height: 294px;
    font-family:"Courier New", Courier, monospace;
        font-size: 12px;
        overflow-x: auto;
    box-sizing: border-box;
}

#cours_prof_participants_form_enlever {
    position: absolute;
    bottom: -47px;
    height: 25px;
    width: 70px;
    background-color: lightcoral;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%; 
    font-size: 16px;
}

/* Ajouter participant*/

#cours_prof_ajouter_participant_cadre {
    position: absolute;
    width: 490px;
    height: 175px;
    bottom: 0px;
    left: 5px;
    
}

#cours_prof_ajouter_participant_titre {
    position: absolute;
    width: 490px;
    height: 20px;
    top: 350px;
    left: 5px;
    color: #f9f9f9;
    text-shadow: 0px 1px 1px #999999;
    font-size: 20px;
    font-weight: bold;
}

#cours_prof_ajouter_participant_recherche_cadre {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 30px;
    box-sizing: border-box;
}

/*#cours_prof_ajouter_participant_recherche_titre {
    position: absolute;
    width: 100px;
    height: 10px;
    font-size: 13px;
    left: 8px;
    top: 4px;
    line-height: 10px;
    box-sizing: border-box;
    color: #737373;
} */

#cours_prof_ajouter_participant_recherche_input {
    position: absolute;
    left: 8px;
    top: 3px;

}



#cours_prof_ajouter_participant_recherche_bouton {
    position: absolute;
    top: 3px;
    height: 25px;
    width: 70px;
    left: 210px;
    font-size: 16px;
    background-color: lightgreen;

}

#cours_prof_ajouter_participant_recherche_resultats {
    position: absolute;
    width: 490px;
    height: 95px;
    top: 30px;
}


#cours_prof_ajouter_participant_loading {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 10px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    z-index: 5;
    display: none;
}

#cours_prof_ajouter_participant_loading img {
    width: 100%;
    height: 100%;

}

#cours_prof_participants_ajouter_select {
    position: absolute;
    width: 490px;
    height: 100%;
    font-family:"Courier New", Courier, monospace;
    font-size: 12px;
    overflow-x: auto;
    top: 2px;

}


#cours_prof_lien_inscription_titre {
    position: absolute;
    width: 490px;
    height: 20px;
    bottom: 25px;
    color: #f9f9f9;
    text-shadow: 0px 1px 1px #999999;
    font-size: 20px;
    font-weight: bold;
}

#cours_prof_lien_inscription_cadre {
    position: absolute;
    width: 490px;
    height: 20px;
    bottom: 2px;
    box-sizing: border-box;
    border: none;
}

#cours_prof_lien_inscription_cadre input {
    position: absolute;
    width: 400px;
    height: 20px;
    box-sizing: border-box;
    background-color: #d9d9d9;
    border: none;
}

#cours_prof_lien_inscription_cadre button {
    position: absolute;
    height: 20px;
    width: 70px;
    right: 0px;
}



/* Élément de la liste d'exercices*/
.cours_prof_liste_exercices_liste_element {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #76ae3d;
    height: 80px;
    width: 95%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    background: #33cc33;
    background: linear-gradient(#d4f47a, #86be4d);
   /* background: linear-gradient(180deg,#33cc33,#29a329); */
    cursor: pointer;
    overflow: hidden;
}

.cours_prof_liste_exercices_liste_element:active {
    filter: brightness(120%);
}


.cours_prof_liste_exercices_liste_element_titre_ex {
    position: absolute;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    height: auto;
    max-height: 55px;
    overflow: hidden;
    width: 210px;
    line-height: 1.3;
    font-size: 20px;
    left: 10px;
}


.cours_prof_liste_exercice_element_essai1 {
    position: absolute;
    height: 35px;
    width: 70px;
    top: 15px;
    border: 1px solid black;
    left: 225px;
    background-color: #9ebf49;
    box-shadow: 0px 1px 4px #737373 inset;
    font-size: 11px;
    text-align: center;
    padding-top: 5px;
    box-sizing: border-box;

}

.cours_prof_liste_exercice_element_essai2 {
    position: absolute;
    height: 35px;
    width: 70px;
    top: 15px;
    border: 1px solid black;
    left: 300px;
    background-color: #9ebf49;
    box-shadow: 0px 1px 4px #737373 inset;
    font-size: 11px;
    text-align: center;
    padding-top: 5px;
    box-sizing: border-box;

}

.cours_prof_liste_exercice_element_essai3 {
    position: absolute;
    height: 35px;
    width: 70px;
    top: 15px;
    border: 1px solid black;
    left: 375px;
    background-color: #9ebf49;
    box-shadow: 0px 1px 4px #737373 inset;
    font-size: 11px;
    text-align: center;
    padding-top: 5px;
    box-sizing: border-box;
}

.cours_prof_liste_exercice_element_essai1_titre {
    position: absolute;
    height: 10px;
    width: 70px;
    top: 5px;
    
    left: 225px;
    text-align: center;
    font-size: 10px;
    line-height: 10px;
}

.cours_prof_liste_exercice_element_essai2_titre {
    position: absolute;
    height: 10px;
    width: 70px;
    top: 5px;
    
    left: 300px;
    text-align: center;
    font-size: 10px;
    line-height: 10px;


}

.cours_prof_liste_exercice_element_essai3_titre {
    position: absolute;
    height: 10px;
    width: 70px;
    top: 5px;
    
    left: 375px;
    text-align: center;
    font-size: 10px;
    line-height: 10px;

}

.cours_prof_liste_exercices_element_progression {
    position: absolute;
    height: 15px;
    width: 220px;
    top: 55px;
    border: 1px solid black;
    left: 225px;
    background-color: #9ebf49;
    overflow: hidden;
    box-sizing: border-box;
}
/*
.cours_prof_liste_exercices_liste_element_poursuivre {
    position: absolute;
    height: 20px;
    width: 20px;
    border: 1px solid black;
    top: 55px;
    left: 430px;
    display:none;

} */

.cours_prof_liste_exercices_liste_element_id_ex {
    position: absolute;
    height: 10px;
    width: 50px;
    left: 5px;
    top: 5px;
    border: 1px solid gray;
    font-size: 8px;
    display: none;
}


.cours_prof_reinitialiser_enregistrement {
    position: absolute;
    height: 25px;
    width: 5.18%;
    right: 1.2%;
    top: 20px;
    box-sizing: border-box;
    display:none;
    z-index: 20;
}

.cours_prof_reinitialiser_enregistrement img {
    position: absolute;
    height: 100%;
    width: 100%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}


.cours_prof_liste_exercices_liste_element:hover  .cours_prof_reinitialiser_enregistrement{
    display:block;
    opacity: 0.8;
}

.cours_prof_reinitialiser_enregistrement:hover {
    opacity: 1;
}


/* Participants collecte de données */

#cours_prof_participants_cadre_section_collecte {
    position: absolute;
    bottom: 0px;
    left: 100%;
    width: 100%;
    height: 545px;
    box-sizing: border-box;
    transition: all 0.3s;
    user-select: none;
}


#cours_prof_participants_collecte_titre {
    position: absolute;
    width: 490px;
    height: 20px;
    top: 0px;
    color: #f9f9f9;
    text-shadow: 0px 1px 1px #999999;
    font-size: 20px;
    font-weight: bold;
}

#cours_prof_participants_cadre_exercice_essais {
    position: absolute;
    width: 100%;
    height: 40px;
    top: 30px;
    line-height: 40px;
}

#cours_prof_collecte_titre_exercice {
    position: relative;
    height: 20px;
    width: auto;
    display: inline;
    vertical-align: middle;
    font-size: 16px;
}



#cours_prof_collecte_select_exercice_cadre {
    position: relative;
    width: auto;
    height: auto;
    vertical-align: middle;
    display: inline;

}

#cours_prof_collecte_select_exercice_cadre select {
    min-width: 250px;
    height: auto;
    font-size: 16px;
}

#cours_prof_collecte_titre_essais {
    position: relative;
    height: 20px;
    width: auto;
    display: inline;
    vertical-align: middle;
    font-size: 16px;
    margin-left: 25px;
}

#cours_prof_collecte_select_essais_cadre {
    position: relative;
    width: 250px;
    height: auto;
    vertical-align: middle;
    display: inline;
}

#cours_prof_collecte_select_essais_cadre select {
    font-size: 16px;
}


    /* Table titres */
#cours_prof_participants_tableau_titres {
    position: absolute;
    height: 60px;
    top: 75px;
    width: 100%;
    border: 1px solid transparent;    
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: overlay;
}

#cours_prof_participants_tableau_titres table {
    position: absolute;
    box-sizing: border-box;
    table-layout: auto;
    width: 100%;
    border: 2px solid transparent;
    border-collapse:collapse;
}

#cours_prof_participants_tableau_titres tr td {
    box-sizing: border-box;
    border: 1px solid transparent;
    text-align: center; 
    vertical-align: middle;
    font-size: 18px;
}

#cours_prof_participants_tableau_titres tr:nth-child(2) td:nth-child(1) {
    text-align: right;
}

#cours_prof_participants_tableau_titres tr:nth-child(2) td:nth-child(1) {
    width: 35%;
}

#cours_prof_participants_tableau_titres tr:nth-child(2) td:nth-child(2),
#cours_prof_participants_tableau_titres tr:nth-child(2) td:nth-child(3),
#cours_prof_participants_tableau_titres tr:nth-child(2) td:nth-child(4),
#cours_prof_participants_tableau_titres tr:nth-child(2) td:nth-child(6),
#cours_prof_participants_tableau_titres tr:nth-child(2) td:nth-child(7),
#cours_prof_participants_tableau_titres tr:nth-child(2) td:nth-child(8) {
    width: 9%;

}

#cours_prof_participants_tableau_titres tr td:nth-child(5) {
    width: 5%;
}


/* Tableau parametres collecte */

#cours_prof_participants_tableau_collecte_cadre {
    position: absolute;
    width: 98%;
    height: 420px;
    bottom: 0;
    border: 1px solid black;
    box-sizing: border-box;
    overflow-y: overlay;
    overflow-x: hidden;
}




#cours_prof_participants_tableau_collecte_cadre table {
    position: absolute;
    box-sizing: border-box;
    table-layout: auto;
    width: 100%;
    border: 2px solid #F0F4F9;
    border-collapse:collapse;
}

#cours_prof_participants_tableau_collecte_cadre tr:nth-child(odd) {
    background-color: #D2DEEF;
}

#cours_prof_participants_tableau_collecte_cadre tr:nth-child(even) {
    background-color: #EAEFF7;
}

#cours_prof_participants_tableau_collecte_cadre tr td {
    border: 1px solid #F0F4F9;
    box-sizing: border-box;


}

#cours_prof_participants_tableau_collecte_cadre tr td:not(:first-child) { 
    text-align: center; 
    vertical-align: middle;
}

#cours_prof_participants_tableau_collecte_cadre tr:hover {
    filter:brightness(0.8);
}



#cours_prof_participants_tableau_collecte_cadre tr:nth-child(1) td:nth-child(1) {
    width: 35%;
}

#cours_prof_participants_tableau_collecte_cadre tr:nth-child(1) td:nth-child(2),
#cours_prof_participants_tableau_collecte_cadre tr:nth-child(1) td:nth-child(3),
#cours_prof_participants_tableau_collecte_cadre tr:nth-child(1) td:nth-child(4),
#cours_prof_participants_tableau_collecte_cadre tr:nth-child(1) td:nth-child(6),
#cours_prof_participants_tableau_collecte_cadre tr:nth-child(1) td:nth-child(7),
#cours_prof_participants_tableau_collecte_cadre tr:nth-child(1) td:nth-child(8) {
    width: 9%;
}

#cours_prof_participants_tableau_collecte_cadre tr td:nth-child(5) {
    width: 5%;
}


#cours_prof_participants_tableau_collecte_cadre td input[type=text] {
    width: 90%;
}

#cours_prof_participants_tableau_collecte_cadre ::-webkit-input-placeholder {
   font-style: italic;
   opacity: 0.5;
}
#cours_prof_participants_tableau_collecte_cadre :-moz-placeholder {
   font-style: italic;  
   opacity: 0.5;
}
#cours_prof_participants_tableau_collecte_cadre ::-moz-placeholder {
   font-style: italic; 
   opacity: 0.5; 
}
#cours_prof_participants_tableau_collecte_cadre :-ms-input-placeholder {  
   font-style: italic; 
   opacity: 0.5;
}



/* Participants statistiques */
/* GRID */



.cours_prof_participants_cadre_section_loading {
    position: absolute;
    height: 100px;
    width: 100px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.cours_prof_participants_cadre_section_loading img {
    height: 100%;
    width: 100%;
}



#cours_prof_participants_cadre_section_statistiques {
    position: absolute;
    bottom: 0px;
    left: 200%;
    width: 100%;
    height: 545px;
    box-sizing: border-box;
    transition: all 0.3s;
    overflow-y: auto;
    display: grid;
    grid-template-rows: 25px 200px 540px 500px 520px 500px;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}


.background_statistiques_cadre {
    background-color: #d9d9d9;
    background-image: linear-gradient(315deg, #e9e9e9 0%, #f1f1f1 20%, #e8e8e8 50%, #f3f3f3 74%);
    border-radius: 4px;
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.5);
    opacity: 1;
}

#cours_prof_participants_statistiques_titre {
    position: absolute;
    width: 100%;
    height: 100%;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    color: #f9f9f9;
    text-shadow: 0px 1px 1px #999999;
    font-size: 20px;
    font-weight: bold;
}


#cours_prof_participants_statistiques_choix_exercice_cadre {
    position: absolute;
    width: 100%;
    height: 100%;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}

#cours_prof_participants_statistiques_titre_exercice {
    position: absolute;
    height: 20px;
    width: auto;
    display: inline;
    vertical-align: middle;
    font-size: 16px;
    font-family: Helvetica;
    left: 26px;
    top: 15px;
    font-weight: bold;
}

#cours_prof_participants_statistiques_choix_exercice_cadre select {
    position: absolute;
    width: 320px;
    height: auto;
    font-size: 16px;
    left: 26px;
    top: 40px;
    box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.2);
}


#cours_prof_participants_statistiques_choix_plus {
    visibility:hidden;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 44px;
    left: 366px;
}

#cours_prof_participants_statistiques_choix_plus img {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

#cours_prof_participants_statistiques_autres_cours_cadre {
    position: absolute;
    left: 26px;
    top: 75px;
    height: 0px;
    width: 440px;
    border-top: 1px solid #aaaaaa;
    border-left: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
    border-bottom: 1px solid #d0d0d0;
    transition: height 0.2s;
    visibility: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    background: radial-gradient(ellipse at center, #ebebeb 0%,#ededed 47%,#e3e3e3 100%);
    -webkit-box-shadow: inset 0px 1px 4px rgba(178,178,178,0.8), inset 0px -1px 4px rgba(255,255,255,0.8); 
    box-shadow: inset 0px 1px 4px rgba(178,178,178,0.8), inset 0px -1px 4px rgba(255,255,255,0.8);;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 2px;
    color: #222222;
    font-family: Helvetica;
    font-size: 14px;
}


#cours_prof_participants_statistiques_autres_cours_cadre table  {
    position: absolute;
    left: 0;
    top: 25px;
    display: inline-block;
    width: 100%;
}

#cours_prof_participants_statistiques_autres_cours_cadre table tr td:nth-child(1){
    /*width: 5%;*/
}

#cours_prof_participants_statistiques_autres_cours_cadre table tr td:nth-child(2){
    /*width: 95%;*/
}



#cours_prof_participants_statistiques_calcul_auto_cadre button {
    position: absolute;
    bottom: 20px;
    height: 25px;
    width: 200px;
    padding: 10px;
    border: none;
    font: 18px;
    color: inherit;
    background-color: transparent;
    cursor: pointer;
    background-color: #547aa5;
    border-radius: 15px;
    color: #eeeeee;
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.5);
    transform: translate(-50%, 0);
    left: 50%;
    line-height: 5px;
    font-weight: bold;
}

#cours_prof_participants_statistiques_calcul_auto_cadre button:active {
    box-shadow: none;
    filter: brightness(110%);
}


#cours_prof_participants_statistiques_divcalcultexte,
#cours_prof_participants_statistiques_divcalcultexte_individuel {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 0;
    width: 0;
    visibility: hidden;
    overflow: hidden;
}



/*#cours_prof_participants_statistiques_groupes_cadre {
    position: absolute;
    width: 100%;
    height: 100%;
    grid-row: 2 / 3;
    grid-column: 3 / 4;
    font-family: Helvetica;
}*/

#cours_prof_participants_statistiques_titre_correction {
    position: absolute;
    left: 26px;
    top: 100px;
    width: 195px;
    height: 20px;
    line-height: 20px;
    font-weight: bold;
}

#cours_prof_participants_statistiques_titre_tem {
    position: absolute;
    left: 26px;
    top: 130px;
    width: auto;
    height: 20px;
    line-height: 20px;
    font-size: 13px;
}


#cours_prof_participants_statistiques_nb_participants_tem {
    position: absolute;
    height: 20px;
    top: 130px;
    left: 176px;
    line-height: 20px;
    font-size: 13px;
}

#cours_prof_participants_statistiques_titre_exp {
    position: absolute;
    top: 160px;
    left: 26px;
    width: auto;
    height: 20px;
    line-height: 20px;
    font-size: 13px;
}


#cours_prof_participants_statistiques_nb_participants_exp {
    position: absolute;
    height: 20px;
    top: 160px;
    left: 176px;
    line-height: 20px;
    font-size: 13px;
}


#cours_prof_participants_statistiques_calcul_auto_cadre {
    position: absolute;
    width: 100%;
    height: 100%;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    font-family: Helvetica;
}


#cours_prof_participants_statistiques_titre_methode_calcul {
    position: absolute;
    height: 20px;
    width: 200px;
    top: 15px;
    left: 26px;
    line-height: 20px;
    font-size: 16px;
    font-weight: bold;
}

#cours_prof_participants_statistiques_switch_cadre {
    position: absolute;
    height: 20px;
    width: 220px;
    top: 47px;
    left: 30px;
    user-select: none;
}

#cours_prof_participants_statistiques_switch_titre1 {
    position: absolute;
    left: 0;
    width: 100px;
    bottom: 0;
    font-size: 13px;
}

#cours_prof_participants_statistiques_switch_titre2 {
    position: absolute;
    left: 155px;
    width: 80px;
    bottom: 0;
    font-size: 13px;
}

#cours_prof_participants_statistiques_switch {
    position: absolute;
    left: 105px;
    bottom: 0;
    width: 32px;
    height: 16px;
}

#cours_prof_participants_statistiques_switch input {
    display:none;
}

#cours_prof_participants_statistiques_switch_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: .3s;
    background-color: darkcyan;
    border-radius: 30px;
    box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5);
}

#cours_prof_participants_statistiques_switch_slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 0px;
    bottom: 0px;
    transition: .3s;
    background-color: #eeeeee;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
    background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
    border-radius: 50%;
    box-shadow: 0px 2px 4px #aaa, inset 0px 2px 3px #fff;

}

#cours_prof_participants_statistiques_switch input:checked + #cours_prof_participants_statistiques_switch_slider {
    background-color: #0066cc;

}

#cours_prof_participants_statistiques_switch input:checked + #cours_prof_participants_statistiques_switch_slider:before {
    transform: translateX(16px);
}

#cours_prof_participants_statistiques_val_erreur_titre {
    position: absolute;
    height: 20px;
    width: 200px;
    top: 80px;
    left: 26px;
    font-weight: bold;
}


#cours_prof_participants_statistiques_val_erreur_cadre {
    position: absolute;
    height: auto;
    width: 130px;
    top: 105px;
    left: 30px;
}


#cours_prof_participants_statistiques_val_erreur_cadre select {
    box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.2);
}





/* Tableau notes statistiques */


#cours_prof_participants_statistiques_tableau_notes_cadre {
    position: absolute;
    width: 100%;
    height: 100%;
    grid-row: 3 / 4;
    grid-column: 1 / 3;
}

#cours_prof_participants_statistiques_tableau_notes_titre, 
#cours_prof_participants_statistiques_tableau_frequences_erreurs_titre {
    position: absolute;
    width: 100%;
    height: 30px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    top: 6%;
    font-family: Helvetica;
}

#cours_prof_participants_statistiques_tableau_notes, 
#cours_prof_participants_statistiques_tableau_frequences_erreurs {
    position: absolute;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -45%);
    top: 50%;
    left: 50%;
    border: 1px solid #F2F2F2;
    font-family: Helvetica;
    font-weight: bold;
    border-collapse: collapse;
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.5);
}

#cours_prof_participants_statistiques_tableau_notes thead td,
#cours_prof_participants_statistiques_tableau_frequences_erreurs thead td {
    color: #ffffff;
    background: #3d5976;
    font-size: 16px;
    border: 1px solid #F2F2F2;
}

#cours_prof_participants_statistiques_tableau_notes tr,
#cours_prof_participants_statistiques_tableau_frequences_erreurs tr {
    height: 20px;
}

#cours_prof_participants_statistiques_tableau_notes td,
#cours_prof_participants_statistiques_tableau_frequences_erreurs td {
    padding: 5px;
    font-size:14px;
}

#cours_prof_participants_statistiques_tableau_notes td:not(:first-child),
#cours_prof_participants_statistiques_tableau_frequences_erreurs td:not(:first-child) {
    text-align: center;
    width: 78.1px;
}


#cours_prof_participants_statistiques_tableau_notes tbody tr:nth-child(even),
#cours_prof_participants_statistiques_tableau_frequences_erreurs tbody tr:nth-child(even) {
    background-color: #E6E4E4;
}

#cours_prof_participants_statistiques_tableau_notes tbody tr:nth-child(odd),
#cours_prof_participants_statistiques_tableau_frequences_erreurs tbody tr:nth-child(odd) {
    background-color: #f8f8f8;
}

#cours_prof_participants_statistiques_tableau_notes tbody tr:hover,
#cours_prof_participants_statistiques_tableau_frequences_erreurs tbody tr:hover {
    background-color: #008080;
    color: #ffffff;
}

#cours_prof_participants_statistiques_tableau_notes tbody td:not(:first-child),
#cours_prof_participants_statistiques_tableau_frequences_erreurs tbody td:not(:first-child) {
    font-weight: normal;
}   

/* GRAPHIQUE notes statistiques */

#cours_prof_participants_statistiques_graphique_notes_cadre {
    position: absolute;
    width: 100%;
    height: 100%;
    grid-row: 4 / 5;
    grid-column: 1 / 3;
}

#cours_prof_participants_statistiques_graphique_notes_cadre svg,
#cours_prof_participants_statistiques_graphique_frequences_erreurs_cadre svg {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    box-sizing: border-box;
}

/* Tableau fréquences statistiques */

#cours_prof_participants_statistiques_tableau_frequences_erreurs_cadre {
    position: absolute;
    width: 100%;
    height: 100%;
    grid-row: 5 / 6;
    grid-column: 1 / 3;
}

/* GRAPHIQUE frequences statistiques */

#cours_prof_participants_statistiques_graphique_frequences_erreurs_cadre {
    position: absolute;
    width: 100%;
    height: 100%;
    grid-row: 6 / 7;
    grid-column: 1 / 3;
    margin-bottom: 10px;
}

#cours_prof_participants_statistiques_graphique_frequences_erreurs_titre {
    position: absolute;
    width: 100%;
    height: 30px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    top: 8%;
    font-family: Helvetica;
}

#cours_prof_participants_statistiques_graphique_frequences_erreurs_tem_titre {
    position: absolute;
    font-size: 16px;
    height: 20px;
    width: auto;
    left: 29%;
    font-weight: bold;
    top: 20%;
}

#cours_prof_participants_statistiques_graphique_frequences_erreurs_exp_titre {
    position: absolute;
    font-size: 16px;
    height: 20px;
    width: auto;
    left: 61%;
    font-weight: bold;
    top: 20%;
}



#cours_prof_participants_statistiques_graphique_frequences_erreurs_groupe_tem {
    position: absolute;
    width: auto;
    height: 80%;
    left: 14%;
    bottom: 5%;
}


#cours_prof_participants_statistiques_graphique_frequences_erreurs_groupe_exp {
    position: absolute;
    width: auto;
    height: 80%;
    left: 55%;
    bottom: 5%;
}


/* COURS ÉTUDIANT */


/* Ajouter, supprimer */
#ajouter_enlever_ex_cours {
    position: absolute;
    width: 450px;
    height: 300px;
    border: 1px solid gray;
    left: 20px;
    top: 100px;
}

#ajouter_enlever_ex_cours_titre {
    position: absolute;
    width: 450px;
    height: 20px;
    border: 1px solid gray;
    background-color: #bbc3c2;
    border-bottom: 1px solid black;
    box-sizing: border-box;
}

#ajouter_enlever_ex_cours_form {
    position: absolute;
    width: auto;

}


#ajouter_enlever_ex_cours_form_select {
    position: absolute;
    width: 450px;
    height: 279px;
    font-family:"Courier New", Courier, monospace;
    font-size: 14px;
    overflow-x: auto;
    top: 1px;
    


}


#ajouter_enlever_ex_tous {
    position: absolute;
    width: 450px;
    height: 300px;
    border: 1px solid gray;
    left: 550px;
    top: 100px;
}

#ajouter_enlever_ex_tous_titre {
    position: absolute;
    width: 450px;
    height: 20px;
    border: 1px solid gray;
    background-color: #bbc3c2;
    border-bottom: 1px solid black;
    box-sizing: border-box;
    
}

#ajouter_enlever_ex_tous_form {
    position: absolute;
    width: auto;
    
}

#ajouter_enlever_ex_tous_form_select {
    position: absolute;
    width: 450px;
    height: 279px;
    font-family:"Courier New", Courier, monospace;
    font-size: 14px;
    overflow-x: auto;
    top: 1px;

}

#ajouter_enlever_modifier_boutons_cadre {
    position: absolute;
    border: 1px solid gray;
    height: 30px;
    width: 450px;
    top: 410px;
    left: 20px;
    box-sizing: border-box;

}

#enlever_icone {
    position: absolute;
    height: 22px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%; 
    left: 5px;
    width: 83px;
    box-sizing: border-box;
    display: inline;
    line-height: 10px;
    vertical-align: top;
    cursor: pointer;
}

#enlever_icone img {
    width: auto;
    height: 100%;
}


#enlever_icone div {
     top: 2px;
    position: absolute;
    width: auto;
    display: inline;
    right: 0px;
    font-size: 18px;
    height: 90%;
    line-height: 18px;
}


#ajouter_creer_boutons_cadre {
    position: absolute;
    border: 1px solid gray;
    height: 30px;
    width: 450px;
    top: 410px;
    left: 550px;


}


#creer_exercice_bouton {
    position: absolute;
    left: 5px;
    width: 150px;
    height: 22px;
     -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%; 
    cursor: pointer;
}


#creer_exercice_contenant_img {
    position: absolute;
    width: 22px;
        height: 22px;
}

#creer_exercice_bouton img {
    width: 100%;
    height: 100%

}


#creer_exercice_texte {
position: absolute;
    width: 120px;
    height: 22px;
    font-size: 18px;
   right: 0px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%; 
}




#ajouter_fleche_cadre {
    position: absolute;
    height: 30px;
    width: 50px;
    top: 140px;
    left: 485px;
    cursor: pointer;

}

#ajouter_fleche_cadre img {
    width: 100%;
    height: 100%;

}


#ajouter_modifier_exercice_bouton {
    position: absolute;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%; 
    width: 150px;
    left: 250px;
    height: 22px;
    cursor: pointer;

}


#modifier_exercice_contenant_img {
    position: absolute;
    height: 22px;
    width: 22px;
    left: 0px;
    
}


#modifier_exercice_contenant_img img {
    width: 100%;
    height: 100%;

}

#modifier_exercice_texte {
    position: absolute;
    width: 120px;
    height: 22px;
    font-size: 18px;
    right: 0px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%; 

}

#ajouter_enlever_cours_exercices_loading {
    position: absolute;
    width: 60px;
    height: 60px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 30px;
    display: none;
    z-index: 15;
}

#ajouter_enlever_cours_exercices_loading img {
    height: 100%;
    width: 100%;
}

#liste_tous_exercices_loading {
    position: absolute;
    width: 60px;
    height: 60px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 30px;
    display: none;
    z-index: 15;
}

#liste_tous_exercices_loading img {
    height: 100%;
    width: 100%;
}

/* Source texte */

#creer_exercice_cadre_source {
    position: absolute;
    transform: translate(-50%, 0);
    left: 50%;
    bottom: 40px;
    height: 50px;
    width: 880px;
    user-select: none;
}


#creer_exercice_source {
    position: absolute;
    left: 2px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    width: 110px;
    height: 22px;
}

#creer_exercice_source_textarea {
    position: absolute;
    height:22px;
    left: 50%;
    width: 650px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    background-color: azure;
    font-size: 18px;
    overflow-y: auto;
    overflow-x: hidden;
    resize:none;
}


/* Créer exercice */

#creer_exercice_titre_mode {
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 90px;
    height: 30px;
    width: auto;
    font-size: 25px;
}



#creer_exercice_enregistrer_cadre {
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    width: 300px;
    height: 20px;
    bottom: 10px;

}

#creer_exercice_bouton_enregistrer {
    position: absolute;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    left: 0;
    background-color: #3270d3;
    color: #f3f3f3;

}


#creer_exercice_enregistrer_confirmation {
    position: absolute;
    left: 90px;
    height: 20px;
    width: 20px;
    opacity:0;
    

}

#creer_exercice_enregistrer_confirmation img {
    width: 100%;
    height: 100%;

}

#creer_exercice_enregistrer_erreur {
    position: absolute;
    left: 90px;
    height: 20px;
    width: 20px;
    opacity:0;
    

}

#creer_exercice_enregistrer_erreur img {
    width: 100%;
    height: 100%;

}


#creer_exercice_bouton_supprimer {
    position: absolute;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    right: 0;
    background-color: #b2170c;
    color: #f3f3f3;
}

#creer_exercice_messages {
    position: absolute;
    display: none;
    width: 300px;
    height: 25px;
    bottom: 0px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    color: black;
    border-radius: 5px;
}

#creer_exercice_message_contenant {
    position: absolute;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
   
    top: 50%;
    height: 15px;
    width: auto;
}

#creer_exercice_messages_icone {
    position: absolute;
    height: 15px;
    width: 15px;
    left: 0px;
    box-sizing: border-box;
    
}

#creer_exercice_messages_icone img {
    position: absolute;
    width: 100%;
    height: 100%;

}


#creer_exercice_messages_texte {
    position: absolute;
    height: 15px;
    width: auto;
    left: 20px;
    box-sizing: border-box;
    line-height: 15px;
    white-space:nowrap;

}


/*
#creer_exercice_cadre_texte_contenant {
    position: absolute;
    height: 410px;
    width: 880px;
    top: 120px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;


} */


#creer_exercice_cadre_criteres {
    position: absolute;
    top: 170px;
    width: 880px;
    height: 360px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    transition: all 0.3s ease;
    border: 1px solid blue;


}



/* On colle les erreurs sur cette div*/
#creer_exercice_contenant_texte_erreurs {
    
    position: absolute;
    top: 167px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    position: absolute;
    width: 880px;
    height: 384px; /* 370px*/
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    border: 2px solid black;
    background-color: #f3f3f3;
    transition: all 0.3s ease;
}




/* La div qui contient le TEXTE */
#creer_exercice_cadre_texte {
    position: absolute;
    display: inline;
    width: 880px;
    min-height: 410px;
    height: auto;
    top: 2px;
    left: 0px;
    white-space: pre-wrap;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 40px;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: 28px;
    cursor: text;
    
    line-height: 2.2;
    overflow-wrap: normal;
    /* marche pas*/
    word-break: keep-all;
    -webkit-word-break: keep-all;
    white-space: pre-wrap;
    line-break: strict;
    background-color: #fcfcfc;
    text-align: justify;
    /*text-shadow: 0px 2px 1px #333333; */
    transition: background 1s ease;
}

#creer_exercice_cadre_texte span {
    display: inline;

}

#creer_exercice_modeles_cadre {
    position: absolute;
    top: 170px;
    width: 880px;
    height: 360px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 200%;
    transition: all 0.3s ease;

}


.creer_exercice_modele_lien input {
    position: absolute;
    top: 20px;
    left: 0px;
    height: 17px;
    width: 100%;

}

#creer_exercice_modeles_cadre button {
    position: absolute;
    bottom: 2px;
    left: 0px;
    font-size: 11px;

}


#creer_exercice_modele1_cadre {
    position: absolute;
    height: 110px;
    width: 196px;
    background-color: lightgrey;
    top: 5px;
    left: 30px;
    line-height:25px;
    text-align: center;

}
#creer_exercice_modele1_lien {
    position: absolute;
    height: 65px;
    width: 604px;
    top: 35px;
    left: 246px;
}

#creer_exercice_modele2_cadre {
    position: absolute;
    height: 110px;
    width: 196px;
    background-color: lightgrey;
    top: 125px;
    left: 30px;
    line-height:25px;
    text-align: center;
}
#creer_exercice_modele2_lien {
    position: absolute;
    height: 65px;
    width: 604px;
    top: 155px;
    left: 246px;

}

#creer_exercice_modele3_cadre {
    position: absolute;
    height: 110px;
    width: 196px;
    background-color: lightgrey;
    top: 245px;
    left: 30px;
    line-height:25px;
    text-align: center;
    z-index: 100;
    
}

#creer_exercice_modele3_lien {
    position: absolute;
    height: 65px;
    width: 604px;
    top: 275px;
    left: 246px;

}


#creer_exercice_cadre_nav {
    position: absolute;
    width: 600px;
    height: 60px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 5px;
    /*border: 1px solid black;*/


}

#creer_exercice_nav_criteres {
    position: absolute;
    left: 0%;
    height: 60px;
    width: 60px;
    cursor: pointer;
    text-align: center;
}


#creer_exercice_nav_edition {
    position: absolute;
    left:0%;
    height: 60px;
    width: 60px;
    cursor: pointer;
    text-align: center;
}

#creer_exercice_nav_marquage {
    position: absolute;
    -webkit-transform: translate(50%, 0);
    -ms-transform: translate(50%, 0);
    transform: translate(50%, 0);
    right: 50%;
    height: 60px;
    width: 60px;
    cursor: pointer;
    text-align: center;
    filter:brightness(60%);
}

#creer_exercice_nav_modeles {
    position: absolute;
    right: 0%;
    height: 45px;
    width: 60px;
    cursor: pointer;
    text-align: center;
    text-align: center;
    font-size: 14px;
    filter:brightness(60%);
}

#creer_exercice_nav_audio {
    width: 50%;
    height: 50%;
    
}

#creer_exercice_nav_youtube {
    width: 50%;
    height: 50%;
}


#creer_exercice_nav_fleche1 {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 27.1%;
    height: 29px;
    width: 50px;
}

#creer_exercice_nav_fleche_blanche1 {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 30px;
    width: 0%;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
}


#creer_exercice_nav_fleche2 {
    position: absolute;
    right: 27.1%;
    top: 50%;
    -webkit-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    height: 29px;
    width: 50px;
}

#creer_exercice_nav_fleche_blanche2 {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 30px;
    width: 0%;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
}


#creer_exercice_nav_fleche3 {
    position: absolute;
    right: 19.2%;
    top: 50%;
    -webkit-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    height: 29px;
    width: 50px;
}

#creer_exercice_nav_fleche_blanche3 {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 30px;
    width: 0%;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
}



/*
#creer_exercice_tige_fleche {
    position: absolute;
    width: 526px;
    height: 8px;
    left: 0px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    background-color: #333333;
}

#creer_exercice_pointe_fleche {
    position: absolute;
    width: 0; 
    height: 0;
    right: 0px;
    top: 4px;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 25px solid #333333;
}

*/

#creer_exercice_nav_criteres img {
    width: 100%;
    height: 100%;

}

#creer_exercice_nav_edition img {
    width: 100%;
    height: 100%;
    /*filter: brightness(60%);*/
}

#creer_exercice_nav_marquage img {
    width: 100%;
    height: 100%;
    /*filter: brightness(60%);*/
}



#creer_exercice_nav_fleche {
    position: absolute;
    
}

.creer_exercice_mode_on {
    /*filter: brightness(100%) !important;*/
    transition: 0.1s ease;
}

/*
#creer_exercice_cadre_controles_texte {
    position: absolute;
    width: 880px;
    height: 50px;
    
    border: 1px solid black;
    box-sizing: border-box;
    background-color: #999999;
}
*/



#creer_exercice_cadre_annuler_refaire {
    position: absolute;
    top: 120px;
    left: 80px;
    height: 50px;
    width: 60px;
}

.creer_exercice_annuler_refaire_bouton {
    position: absolute;
    height: 22px;
    width: 22px;
    background-color: lightgrey;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    border-top: 1px solid #f2f2f2;
    border-left:  1px solid #f2f2f2;
    border-bottom:  1px solid #b3b3b3;
    border-right:  1px solid #b3b3b3;
    cursor: auto;

}

.creer_exercice_annuler_refaire_bouton svg {
    position: relative;
    float:none;
    margin:auto;
    top: 3px;
    left: 3px;
    height: 16px;
    width: 16px; 
}

#creer_exercice_annuler {
    left: 0px;

}


.fleche_noire_annuler_refaire {
    cursor: pointer;
}

.fleche_noire_annuler_refaire svg path {
    fill: black;
}

#creer_exercice_refaire {
    right: 0px;
}

#creer_exercice_refaire svg {
    transform: scaleX(-1);
}

#creer_exercice_cadre_nom {
    position: absolute;
    left: 170px;
    top: 120px;
    height: 50px;
    width: 540px;
    user-select: none;
}


#creer_exercice_nom_titre {
    position: absolute;
    left: 2px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    width: 130px;
    height: 22px;
}

#creer_exercice_nom_input {
    position: absolute;
    height: 22px;
    left: 125px;
    width: 400px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    background-color: azure;
    font-size: 18px;
}


#creer_exercice_cadre_niveau {
    position: absolute;
    top: 120px;
    right: 80px;
    height: 50px;
    width: 100px;
}


#creer_exercice_niveau_titre {
    position: absolute;
    left: 2px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    width: 130px;
    height: 22px;
    user-select: none;
}

#creer_exercice_cadre_niveau select {
    position: absolute;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    right: 0px;
}



.creer_exercice_bouton_on {
    /*background-color: #4d4d4d !important; */
    filter: brightness(90%) !important;
    transform: scale(1.1,1.1);
    transition: 0.1s ease;
}


#creer_exercice_cadre_texte h3 {
        text-align: center;
        font-weight: bold !important;
        word-wrap: break-word;
        overflow-x: hidden;
        padding-top: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    
  
}





#creer_exercice_fenetre_options {

    position: absolute;
    left: 845px;
    top: 0px;
    height: 222px;
    width: 170px;
    border: 1px solid black;
    line-height: 20px;
    background-color: lightgrey;
    cursor: default;
    display: inline;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    box-shadow: 0px 2px 4px black;
    border-radius: 2px;
    font-size: 14px;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */

}


#creer_exercice_fenetre_options div:hover {
    background-color: grey !important;
             color: white;
}


#creer_exercice_fenetre_supprimer {
    position: absolute;
    padding: 2px;
    left: 640px;
    top: 220px;
    width: 120px;
    height: 20px;
    border: 2px solid black;
    line-height: 20px;
    background-color: lightgrey;
    cursor: default;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
    overflow: hidden;
    
}

#creer_exercice_fenetre_supprimer:hover {
    background-color: grey !important;
     color: white;
}

#creer_exercice_fenetre_titre, #correction_prof_fenetre_incomprehensible {
    position: absolute;
    padding: 2px;
    left: 640px;
    top: 220px;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    height: 20px;
    border: 2px solid black;
    line-height: 20px;
    background-color: lightgrey;
    cursor: default;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
    overflow: hidden;
     z-index: 30;
    
}

#creer_exercice_fenetre_titre:hover, #correction_prof_fenetre_incomprehensible:hover {
    background-color: grey !important;
     color: white;
     z-index: 30;
}

.en_avant {
    opacity: 1 !important;
    z-index: 20;

}

svg path {
pointer-events: visibleStroke;
}

svg polygon {
pointer-events: visibleFill;
}


/* modèles creer_exercice */

.soundcloud_boutons_cadre {
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 8%;
    height: 30px;
    width: 85px;

}

#creer_exercice_modeles_cadre .soundcloud_boutons_cadre {
    top:25%;

}

.soundcloud_play_bouton_cadre img {
    width: 100%;
    height: 100%;

}

.soundcloud_play_bouton_cadre {
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 0px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    box-shadow: 0px 2px 2px darkgrey;
}

.soundcloud_rewind_bouton_cadre {
    position: absolute;
    height: 20px;
    width: 20px;
    left: 0;
    top: 5px;
    border-radius: 50%;
    box-shadow: 0px 2px 2px darkgrey;
    
}


.soundcloud_rewind_bouton_cadre img {
    width: 100%;
    height: 100%;
    transform: scaleX(-1);

}

.soundcloud_forward_bouton_cadre {
    position: absolute;
    height: 20px;
    width: 20px;
    right: 0;
    top: 5px;
    border-radius: 50%;
    box-shadow: 0px 2px 2px darkgrey;
    
}

.soundcloud_forward_bouton_cadre img {
    width: 100%;
    height: 100%;

}


.soundcloud_slider_cadre {
    position: absolute;
    top: 55%;
    width: 95%;
    box-sizing: border-box;
    height: 20px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 80%;
}


input[type=range].soundcloud_slider {
    position: absolute;
    left: -2px;
    top: 3px;
    box-sizing: border-box;
    /*removes default webkit styles*/

    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid transparent;
    background: transparent;
    /*required for proper track sizing in FF*/
    width: 100%;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: #d9d9d9;
    box-shadow: inset 2px 2px 2px #808080;
    border: none;
    border-radius: 3px;
    border-top:1px solid #808080;
    border-bottom: 1px solid #f2f2f2;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #f2f2f2;
    background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
    box-shadow: 0px 1px 2px #595959;
    margin-top: -7px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
    
    box-shadow: inset 2px 2px 2px #808080;
    border: none;
    border-radius: 3px;
    border-top:1px solid #808080;
    border-bottom: 1px solid #f2f2f2;
    
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    background: #d9d9d9;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #f2f2f2;
    background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
    box-shadow: 0px 1px 2px #595959;
}






/* EXERCICE ÉTUDIANT */

#barre_progression_cadre {
position: absolute;
    height: 30px;
    width: 1016px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 0px;
}


#barre_progression_blanche {
    position: absolute;
  
    left: 0px;
    top:0px;
    width: 1016px;
    height: 28px;

}

#barre_progression_noire {
    position: absolute;
    left: 0px;
    top:0px;
    width: 26px;
    height: 28px;
    transition: all 1s ease;
    overflow: hidden;
    box-sizing: content-box;
    -webkit-backface-visibility: hidden;
    
}




#cadre_controles {
    position: absolute;
    height: 609px;
    width: 1020px;
    bottom: 0px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    pointer-events: none;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */

}

#bouton_reculer_page {
    position: absolute;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    left: -40px;
    border: 1px solid black;
    border-radius: 50%;
    height: 80px;
    width: 70px;
    background-color: rgba(128, 128, 128, 0.7);
    z-index: 20;
    pointer-events: auto;
    cursor: pointer;
    
    
}

#bouton_reculer_page:hover {
    filter: brightness(110%);

}

#bouton_avancer_page:hover {
    filter: brightness(110%);

}

#bouton_reculer_page img {
    position: absolute;
    transform: scaleX(-1);
    width: 70%;
    height: 50%;
    -webkit-transform: translate(0, -50%) scaleX(-1);
    -ms-transform: translate(0, -50%) scaleX(-1);
    transform: translate(0, -50%) scaleX(-1);
    top: 50%;
    right: -7px;
    opacity: 1 !important;
    
}

#bouton_avancer_page {
    position: absolute;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    right: -40px;
    border: 1px solid black;
    border-radius: 50%;
    height: 80px;
    width: 70px;
    background-color: rgba(128, 128, 128, 0.7);
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;

}

#bouton_avancer_page img {
    position: absolute;
    width: 70%;
    height: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    left: -7px;
    opacity: 1 !important;
}


.page_loading {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    height: 80px;
    width:80px;
}

.page_loading img {
    position: absolute;
    width: 100%;
    height: 100%;


}

/* CSS version générique des contenus de chaque page pour exerciceEtudiant */


.exercice_etudiant_cadre {

    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 200%;
    pointer-events: auto;
    box-sizing: border-box;
    border: 1px solid black;
    background: -webkit-repeating-linear-gradient(bottom left, #d0d0d0, #e8e8e8, #f0f0f0, #e0e0e0);
    background: -o-repeating-linear-gradient(bottom left, #d0d0d0, #e8e8e8, #f0f0f0, #e0e0e0);
    background: -moz-repeating-linear-gradient(bottom left, #d0d0d0, #e8e8e8, #f0f0f0, #e0e0e0);
    background: repeating-linear-gradient(bottom left, #d0d0d0, #e8e8e8, #f0f0f0, #e0e0e0);

}



.exercice_etudiant_instructions_titre {
    position: absolute;
    top: 10px;
    height: 20px;
    width: 400px;
    left: 55px;
    color: black;
    height: 30px;
    font-size: 23px;
   
}


.exercice_etudiant_instructions_texte {
    position: absolute;
    width: 910px;
    height: 499px;
    border: 1px solid black;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background-color: #fcfcfc;
    text-align: justify;
    font-size: 20px;
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}



.exercice_etudiant_cadre_activite_intro {
    position: relative;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 480px;
    height: 270px;
    border: 1px solid black;
    background-color: black;
    z-index:10;

}

.exercice_etudiant_cadre_activite_intro iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.exercice_etudiant_lecture_titre {
    position: absolute;
    left: 55px;
    top: 10px;
    width: auto;
    height: 30px;
    font-size: 23px;
    

}

.exercice_etudiant_texte_cadre {
    position: absolute;
    left: 55px;
    top: 50px;
    border: 1px solid black;
    height: 439px;
    width: 808px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
    transition: height 0.3s;
    box-sizing: content-box;
}

.exercice_etudiant_texte_interieur {
    position: absolute;
    height: auto;
    min-height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    display: none;
    white-space: pre-wrap;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 40px;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: 28px;
    cursor: text;
    
    line-height: 2.2;
    overflow-wrap: normal;
    /* marche pas*/
    word-break: keep-all;
    -webkit-word-break: keep-all;
    white-space: pre-wrap;
    line-break: strict;
    background-color: white;
    text-align: justify;

}

h3 {
        text-align: center;
        font-weight: bold !important;
        word-wrap: break-word;
        overflow-x: hidden;
        padding-top: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    
}

.exercice_etudiant_youtube_cadre {
    position: absolute;
    left: 460px;
    top: 245px;
    width: 810px;
    height: 0px;
    width: 0px;
    transition: all 0.3s ease;
    border: 1px solid black;
    background-color: black;
    opacity:0;
    z-index:100;
}

.exercice_etudiant_youtube_cadre iframe {
   
}

.exercice_etudiant_soundcloud_cadre {
    position: absolute;
    left: 55px;
    bottom: 120px;
    width: 808px;
    height: 0px;
    transition: all 0.3s ease;
    overflow: hidden;
    /*border: 1px solid black;*/
    box-sizing: content-box;
    opacity: 0.2;
    background-color: lightgrey;
}



.exercice_etudiant_cadre_modeles {
    position: absolute;
    right: 55px;
    top: 55px;
    width: 70px;
    height: auto;

}



.exercice_etudiant_cadre_modeles div img {
    position: absolute;
    width:  50%;
    height: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius:50%;
    transition: all 0.1s ease;

}

.exercice_etudiant_cadre_modele_1,
.exercice_etudiant_cadre_modele_2,
.exercice_etudiant_cadre_modele_3 {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    background-color: white;
    line-height: 70px;
    text-align:center;
    font-weight: bold;
    cursor:pointer;
    box-shadow: 0px 3px 3px darkgrey;
    filter:brightness(95%);
    box-sizing: border-box;
}


.exercice_etudiant_cadre_modele_1:hover,
.exercice_etudiant_cadre_modele_2:hover,
.exercice_etudiant_cadre_modele_3:hover {
    filter:brightness(110%);
    box-shadow: 0px 4px 4px darkgrey;
}

.exercice_etudiant_cadre_modeles div:not( :hover ){
    filter:brightness(95%); 
}

.exercice_etudiant_cadre_modele_1:hover img,
.exercice_etudiant_cadre_modele_2:hover img,
.exercice_etudiant_cadre_modele_3:hover img {
    width:  70%;
    height: 70%;
}

.exercice_etudiant_cadre_modeles div:not( :hover ) img{
    width: 50%;
    height: 50%;  
}


.exercice_etudiant_cadre_modeles div[class$='label'] {
    position: relative;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin-top: 5px;
    left: 50%;
    height: 20px;
    width: 80px;
    text-align: center;
    margin-bottom: 40px;
}

.modele_ouvert {
    border: 3px solid black;
    filter:brightness(105%) !important;
}


.modele_ouvert img {
    width:  80% !important;
    height: 80% !important;
    filter:brightness(105%);

}


/* Lecture etudiant: source */

/* Source texte */

.exercice_etudiant_cadre_source {
    position: absolute;
    left: 55px;
    top: 494px;
    height: 0px; /* Normalement: 40px */
    width: 810px;
    user-select: none;
    overflow: hidden;
    transition: height,top 0.3s;
}


.exercice_etudiant_source {
    position: absolute;
    left: 2px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    width: 55px;
    height: 22px;
    font-size: 14px;
    line-height: 21px;
    font-weight: bold;
}

.exercice_etudiant_textarea {
    position: absolute;
    height:20px;
    font-size: 13px;
    width: 750px;
    transform: translate(0, -50%);
    top: 50%;
    left: 60px;
    overflow-y: auto;
    overflow-x: hidden;
    resize:none;
    box-sizing: border-box;
    background-color: transparent;
    border: 0px solid transparent;
}



.etudiant_cadre_enregistreur {
    position:absolute;
    left: 55px;
    width: 910px;
    height: 105px;
    top: 494px;
    box-sizing: border-box;
}

.exercice_etudiant_cadre_onde {
    position: absolute;
    background-color: darkgrey;
    top: 0px;
    left: 0px;
    height: 50px;
    width: 810px;
    border: 1px solid black;
    box-sizing: border-box;
    overflow: hidden;
}


.exercice_etudiant_canvas {
    position: absolute;
    width: 100%;
    height: 50px;
    right: 0px;
}


.exercice_etudiant_onde_curseur {
    position: absolute;
    height: 100%;
    width: 3px;
    background-color: red;
    left: 0px;
    z-index: 10;
    pointer-events: none;
}

.exercice_etudiant_cadre_controles_audio {
    position: absolute;
    top: 55px;
    height: 47px;
    left: 0px;
    width: 812px;
    overflow-x: hidden;
    box-sizing: border-box;
    overflow:hidden;
}

.exercice_etudiant_cadran {
    position: absolute;
    right: 2px;
    height: 25px;
    line-height: 25px;
    width: 165px;
    border: 1px solid black;
     /*-webkit-transform: translate(-0, -50%);
    -ms-transform: translate(-0, -50%);
    transform: translate(-0, -50%); */
    top: 2px;
    background-color: lightgrey;
    color: black;
    font-family: 'digital-clock-font-mono';
    text-shadow: 1px 3px 2px #50594e;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    overflow: hidden;
    box-sizing: border-box;
}

.exercice_etudiant_messages {
    position: absolute;
    width: 165px;
    height: 12px;
    font-size: 11px;
    bottom: 0px;
    right: 0px;

}

.bouton_audio {
    position: absolute;
     -webkit-transform: translate(-0, -50%);
    -ms-transform: translate(-0, -50%);
    transform: translate(-0, -50%);
    top: 50%;
     height: 30px;
    width: 30px;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    background-color: white;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
    box-shadow: 0px 2px 2px darkgray;
    
}

.bouton_audio:active {
   background: lightgrey;
    box-shadow: none;

}

.recording {


}

.playing {


}


.bouton_audio img {
    position: absolute;
    width: 95%;
    height: 95%;
    
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius:50%;
    
    box-shadow: 0px 2px 2px gray;
    overflow: hidden;

}

.exercice_etudiant_audio_record {
    position: absolute;
    left: 35%;
}

.exercice_etudiant_audio_stop {
    left: 40%;
}

.exercice_etudiant_audio_rewind {
    left: 50%;
    -webkit-transform: translate(-0, -50%) scaleX(-1);
    -ms-transform: translate(-0, -50%) scaleX(-1);
    transform: translate(-0, -50%) scaleX(-1);
   
}


.exercice_etudiant_audio_play {
    left: 55%;
}


.exercice_etudiant_audio_forward {
    left: 60%;
   
}


.exercice_etudiant_publier {
    position: absolute;
    top: 25px;
    height: 55px;
    width: 55px;
    border: 1px solid black;
    right: 8px;
    border-radius: 50%;
    color: white;
    background-color: black;
    text-align:center;
    line-height: 55px;
    cursor: pointer;

}

.exercice_etudiant_publier_attente{
    left: 0px;
    top: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
    display:none;
}

.exercice_etudiant_publier_succes {
    position: absolute;
    width: 70%;
    height: 80%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top:50%;
    left:50%;
    display:none;

}

.exercice_etudiant_difficultes_titre {
    position: absolute;
    left: 55px;
    top: 10px;
    width: auto;
    height: 30px;
    font-size: 30px;


}

.exercice_etudiant_difficultes_texte_cadre {
    position: absolute;
    left: 55px;
    top: 50px;
    border: 1px solid black;
    height: 465px;
    width: 710px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
    box-sizing: border-box;
}

.exercice_etudiant_difficultes_texte_interieur {
    position: absolute;
    height: auto;
    min-height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    display: none;
    white-space: pre-wrap;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 40px;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: 28px;
    cursor: text;
    line-height: 2.2;
    overflow-wrap: normal;
    /* marche pas*/
    word-break: keep-all;
    -webkit-word-break: keep-all;
    white-space: pre-wrap;
    line-break: strict;
    background-color: #fcfcfc;
    /*background-image: url("paper-background.jpg");*/
    text-align: justify;
}

/* légende */


.exercice_etudiant_difficultes_legende {
    position: absolute;
    width: 190px;
    height: 465px;
    border: 1px solid black;
    right: 55px;
    top: 50px;
    font-size: 20px;
    background-color: #fcfcfc;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    
}

.exercice_etudiant_difficultes_legende_interieur {
    position: absolute;
    width: 100%;
    height: 430px;
    bottom: 0px;
}

.exercice_etudiant_difficultes_legende_interieur svg {
    position: absolute;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
}


.exercice_etudiant_difficultes_legende_erreur_cadre {
    position: relative;
    height: 30px;
    width: 180px;
    margin-top: 5px;
    margin-left: 5px;
}

.exercice_etudiant_difficultes_legende_label {
    position: absolute;
    height: 16px;
    width: auto;
    left: 30px;
    font-size: 16px;
    line-height: 16px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
}


.exercice_etudiant_difficultes_legende_interieur .exercice_etudiant_difficultes_legende_erreur_intd {
    position: absolute;
    -webkit-transform: translate(0, -50%) scaleY(-1) !important;
    -ms-transform: translate(0, -50%) scaleY(-1) !important;
    transform: translate(0, -50%) scaleY(-1) !important;
    top: 50%;

}

.exercice_etudiant_difficultes_legende_erreur_acce {
    position: absolute;
    height: 16px;
    width: 22px;
    position: absolute;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    border-bottom: 2px solid black;
    font-size: 15px;
    text-align: center;
    text-shadow: -0.6px 0px 0.00px, 0.6px 0px 0.00px, 0px -0.4px 0.00px, 0px 0.4px 0.00px;
}



.exercice_etudiant_difficultes_legende_erreur_souligne {
    position: absolute;
    height: 16px;
    width: 22px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}

.exercice_etudiant_difficultes_legende_erreur_lemu {
    position: absolute;
    color:saddlebrown;
    height: 16px;
    width: 16px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    font-size: 22px;
    line-height:12px;
    font-weight: bold;
    text-align: center;
}


/**/


/* fin légende*/
/* BILAN ERREURS */


.exercice_etudiant_bilan_erreurs_titre_cadre {
    position: absolute;
    top: 10px;
    height: 20px;
    width: auto;
    left: 60px;
    color: black;
    font-size: 23px;
    line-height: 30px;
}

.exercice_etudiant_bilan_erreurs_texte_cadre, 
.exercice_etudiant_bilan_erreurs_essai_courant_texte_cadre {
     position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 75px;
    border: 1px solid black;
    height: 414px;
    width: 900px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
    cursor:default;

}



.exercice_etudiant_bilan_erreurs_texte_interieur,
.exercice_etudiant_bilan_erreurs_essai_courant_texte_interieur {
    position: absolute;
    height: auto;
    min-height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    display: none;
    white-space: pre-wrap;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 40px;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: 28px;
    cursor: text;
    line-height: 2.2;
    overflow-wrap: normal;
    /* marche pas*/
    word-break: keep-all;
    -webkit-word-break: keep-all;
    white-space: pre-wrap;
    line-break: strict;
    background-color: #fcfcfc;
    text-align: justify;
    
}


.exercice_etudiant_bilan_erreurs_texte_cadre,
.exercice_etudiant_bilan_erreurs_texte_interieur {
    z-index: -50;
}

.exercice_etudiant_bilan_erreurs_onglet1 {
    position: absolute;
    height: 25px;
    width: 100px;
    left: 80px;
    top: 51px;
    border: 1px solid black;
    box-sizing: border-box;
    text-align: center;
    line-height: 25px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor:pointer;
    background-color: #e0e0e0;


}

.exercice_etudiant_bilan_erreurs_onglet2 {
    position: absolute;
    height: 25px;
    width: 100px;
    left: 179px;
    top: 51px;
    border: 1px solid black;
    box-sizing: border-box;
    text-align: center;
    line-height: 25px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor:pointer;
    background-color: #e0e0e0;

}

.exercice_etudiant_bilan_erreurs_onglet1.selectionne,
.exercice_etudiant_bilan_erreurs_onglet2.selectionne {
    background-color: white;
    border-bottom: white !important;
    z-index: 51;
}


.exercice_etudiant_bilan_erreurs_player_cadre {
    position: absolute;
    height: 85px;
    width: 900px;
    top: 494px;
    left: 60px;


}

/* Etudiant player*/

.etudiant_player_cadre_onde {
    position: absolute;
    background-color: darkgrey;
    top: 0px;
    left: 0px;
    height: 50px;
    border: 1px solid black;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;

}

.etudiant_player_canvas {
    position: absolute;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
}

.etudiant_player_onde_curseur {
    position: absolute;
    height: 100%;
    width: 3px;
    background-color: red;
    left: 0px;
    z-index: 10;
    pointer-events: none;

}

.etudiant_player_cadre_controles_audio {
    position: absolute;
    top: 50px;
    height: 35px;
    left: 0px;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;

}

.etudiant_player_audio_rewind {
    left: 43%;
    -webkit-transform: translate(-0, -50%) scaleX(-1);
    -ms-transform: translate(-0, -50%) scaleX(-1);
    transform: translate(-0, -50%) scaleX(-1);
   
}


.etudiant_player_audio_play_pause {
     left: 50%;

}

.etudiant_player_audio_forward {
    left: 57%;

}

.etudiant_player_cadran {
    position: absolute;
    right: 0px;
    height: 25px;
    line-height: 25px;
    width: 165px;
    border: 1px solid black;
     /*-webkit-transform: translate(-0, -50%);
    -ms-transform: translate(-0, -50%);
    transform: translate(-0, -50%); */
    top: 4px;
    background-color: lightgrey;
    color: black;
    font-family: 'digital-clock-font-mono';
    text-shadow: 1px 3px 2px #50594e;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    overflow: hidden;

}

 /* Bilan eval etudiant */

 .exercice_etudiant_bilan_suite_titre_cadre {
    position: absolute;
    top: 15px;
    height: 20px;
    width: 400px;
    left: 100px;
    color: black;
    font-size: 23px;
    line-height: 30px;

}


.exercice_etudiant_bilan_total_erreurs_cadre{
    position: absolute;
    left: 105px;
    top: 60px;
    height: auto;
    width: auto;
    user-select: none;
    box-sizing: border-box;

}


.exercice_etudiant_bilan_total_erreurs_cadre table {
    position: absolute;
    width: auto;
    font-size: 12px;
    border: 1px solid black;
}


.exercice_etudiant_bilan_total_erreurs_cadre th {
    padding: 2px;
    background-color: black;
    color: white;
    font-weight: bold;
    height: 15px;
}

.exercice_etudiant_bilan_total_erreurs_cadre th {
    min-width: 80px;
}

.exercice_etudiant_bilan_total_erreurs_cadre th:nth-child(1) {
    min-width: 100px;

}

.exercice_etudiant_bilan_total_erreurs_cadre tr:nth-child(even) {
    background-color: #dddddd;
    height: 15px;
    
}

.exercice_etudiant_bilan_total_erreurs_cadre tr:nth-child(odd) {
    background-color: #cccccc;
    height: 15px;
}

.exercice_etudiant_bilan_eval_cadre_ext_graphique {
    position: absolute;
    height: 254px;
    width: 365px;
    top: 300px;
    left: 105px;
   



}


.exercice_etudiant_bilan_eval_grille_cadre {

    position: absolute;
    right: 150px;
    top: 60px;
    width: 350px;
    height: 499px;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    box-sizing: border-box;
    user-select: none;
    pointer-events: none;

}


.exercice_etudiant_bilan_eval_grille_cadre table {
    position: absolute;
    top: 58px;
    width: 100%;
    height: 230px;
    font-size: 11px;
}

.exercice_etudiant_bilan_eval_grille_cadre tr:nth-child(odd) {
    background-color: #dddddd;

}

.exercice_etudiant_bilan_eval_grille_cadre tr:nth-child(even) {
    background-color: #eeeeee;

}

.exercice_etudiant_bilan_eval_grille_cadre table tr td:first-child {
    height: auto;
    width: 158px;
    line-height: 1.3;
}


    /* RADIO BuTTOn Lui-même */
.exercice_etudiant_bilan_eval_grille_cadre table tr td input:nth-child(odd) {
    position: relative;
    height: 15px;
    width: 15px;
    margin: 1px;
    top: 2px;
}

.exercice_etudiant_bilan_eval_grille_cadre table tr td input:nth-child(even) {
    position: relative;
    height: 13px;
    width: 13px;
    margin: 2px;
    top: 1px;
}

.exercice_etudiant_bilan_eval_grille_cadre table tr td input[type='radio']:checked:after {
       /* width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #000000;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white; */
}

.exercice_etudiant_bilan_eval_grille_cadre textarea {
 position: absolute;
 border: 1px solid black;
 top: 345px;
 width: 98.5%;
 height: 94px;
 -webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
left: 50%;
overflow-y: scroll;
resize:none; 
pointer-events: auto;

}



 /* - CORRECTION PROF - - - - - - - - - - - -*/

#correction_prof_infos_cours_etudiant_cadre {
    position: absolute;
    height: 60px;
    width: 1020px;
    top: 30px;
    /*border: 1px solid black;*/
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.1);
    user-select: none;
}



#correction_prof_avatar {
    position: absolute;
    height: 50px;
    width: 50px;
    top: 5px;
    left: 10px;
    border: 1px solid black;
    border-radius: 50%;
    box-sizing: border-box;
    overflow: hidden;

}

#correction_prof_avatar img {
    position: absolute;
    width: auto;
    height: 100%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    border-radius: 50%;

}

#correction_prof_nom {
    position: absolute;
    width: 300px;
    height: 25px;
    top: 5px;
    left: 70px;
    line-height: 25px;
    font-size: 18px;
    overflow:hidden;
    
}


#correction_prof_icone_statut {
    position: absolute;
    height: 25px;
    width: 25px;
    left: 70px;
    bottom: 7px;
    box-sizing: border-box;
}

#correction_prof_icone_statut img {
    position: absolute;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}


#correction_prof_statut {
    position: absolute;
    height: 25px;
    width: 25px;
    left: 95px;
    bottom: 5px;
    padding-left: 5px;
    line-height: 25px;
    color: black;
}






#correction_prof_sigle_cours_nom {
    position: absolute;
    width: 290px;
    height: 25px;
    bottom: 5px;
    left: 380px;
    line-height: 20px;
    overflow:hidden;
    
    
}

#correction_prof_nom_exercice {
    position: absolute;
    width: 290px;
    height: 25px;
    top: 5px;
    left: 380px;
    line-height: 25px;
    overflow:hidden;
}

#correction_prof_nom_universite {
    position: absolute;
    width: 220px;
    height: 25px;
    top: 5px;
    left: 710px;
    line-height: 25px;
    overflow:hidden;
    
    
}

#correction_prof_session {
    position: absolute;
    width: 220px;
    height: 25px;
    bottom: 5px;
    left: 710px;
    line-height: 20px;
}


#correction_prof_bouton_participants {
    position: absolute;
    height: 50px;
    width: 55px;
    right: 45px;
    top: 5px;
    cursor: pointer;
    filter: grayscale(100%);
    user-select: none;

}

#correction_prof_bouton_participants:hover {
    filter: grayscale(0%);
}

#correction_prof_bouton_participants img {
    position: absolute;
    top: 0px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    height: 40px;
    width: 40px;


}

#correction_prof_bouton_participants_label {
    position: absolute;
    height: 10px;
    width: 100%;
    text-align: center;
    bottom: 0px;
    font-size: 12px;
    line-height: 100%;
    

}

#correction_prof_bouton_participants:hover
#correction_prof_bouton_participants_label {
    color: #e6e6e6;
}

#correction_prof_bouton_participant_suivant {
    position: absolute;
    height: 25px;
    width: 25px;
    right: 10px;
    top: 50%;
    transform: translate(0,-50%);
    cursor: pointer;
    border-radius: 50%;
    transform-origin: center;
    /*transition: 0.5s;*/
}

#correction_prof_bouton_participant_suivant svg {
    height: 100%;
    width: 100%;
}


#correction_prof_bouton_participant_precedent {
    position: absolute;
    height: 25px;
    width: 25px;
    right: 110px;
    top: 50%;
    transform: translate(0,-50%) scaleX(-1);
    transform-origin: center;
    cursor: pointer;
}

#correction_prof_bouton_participant_precedent svg {
    height: 100%;
    width: 100%;
}

#correction_prof_bouton_participant_suivant:hover {
    transform: translate(0,-50%) scale(1.1);

}

#correction_prof_bouton_participant_precedent:hover {
    transform: translate(0,-50%) scale(-1.1);
}

#correction_prof_bouton_participant_suivant:hover path,
#correction_prof_bouton_participant_precedent:hover path {
    /*transition: 0.5s;*/
    fill: #e6e6e6;
}





#correction_prof_cadre_controles {
    position: absolute;
    height: 549px;
    width: 1020px;
    bottom: 0px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    pointer-events: none;
   
}


/* contenant cadre pour chaque page prof*/
.correction_prof_cadre {
   position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    box-sizing: border-box;
    border: 1px solid black;
    pointer-events: auto;
    background: -webkit-repeating-linear-gradient(bottom left, #d0d0d0, #e8e8e8, #f0f0f0, #e0e0e0);
    background: -o-repeating-linear-gradient(bottom left, #d0d0d0, #e8e8e8, #f0f0f0, #e0e0e0);
    background: -moz-repeating-linear-gradient(bottom left, #d0d0d0, #e8e8e8, #f0f0f0, #e0e0e0);
    background: repeating-linear-gradient(bottom left, #d0d0d0, #e8e8e8, #f0f0f0, #e0e0e0);  
}



.correction_prof_lecture_titre {
    position: absolute;
    left: 55px;
    height: 20px;
    top: 7px;
    position: absolute;
    height: 20px;
    width: 300px;
    left: 55px;
    color: black;
    font-size: 23px;
    line-height: 30px;
    
}

.correction_prof_lecture_cadre_texte { /* contenant de la div contenant le texte, parent des dessins */
    position: absolute;
    left: 55px;
    top: 40px;
    border: 1px solid black;
    height: 404px;
    width: 710px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
    cursor: default;
}


.correction_prof_texte_interieur { /* contient le texte (et spans) */
    position: absolute;
    height: auto;
    min-height: 100%;
    width: 710px;
    left: 0px;
    top: 0px;
    display: none;
    white-space: pre-wrap;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 40px;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: 28px;
    cursor:default;
    
    line-height: 2.2;
    overflow-wrap: normal;
    /* marche pas*/
    word-break: keep-all;
    -webkit-word-break: keep-all;
    white-space: pre-wrap;
    line-break: strict;
    background-color: white;
    text-align: justify;

}


/* espace de correction */
.correction span {
    color: black;
    text-shadow: none;
}

svg path {
    pointer-events: visibleStroke;
    }

    svg polygon {
    pointer-events: visibleFill;
    }


    /* COULEURS LETTRES, ERREURS COMMISES */
    /* pour les erreurs suivies du numéro de ID*/
    .creation span[class^='liob'] {color: green;}
    .creation span[class^='liin'] {color: red;}
    .creation span[class^='ench'] {color: #ff66ff;}
    .creation span[class^='intm'] {}
    .creation span[class^='intd'] {}
    .creation span[class^='acce'] {text-shadow: -0.7px 0px 0.00px, 0.7px 0px 0.00px, 0px -0.5px 0.00px, 0px 0.5px 0.00px;}
    .creation span[class^='voyo'] {color: #00cccc;}
    .creation span[class^='voyn'] {color: #0033cc;}
    .creation span[class^='cons'] {color: saddlebrown;}
    .creation span[class^='lemu'] {color: saddlebrown;}
    .creation span[class^='svoy'] {color: rgb(134, 0, 179);}

    
   
    /* pour les erreurs suivies du numéro de ID*/
    .view span[class^='liob'] {color: green;}
    .view span[class^='liin'] {color: red;}
    .view span[class^='ench'] {color: #ff66ff;}
    .view span[class^='intm'] {}
    .view span[class^='intd'] {}
    .view span[class^='acce'] {text-shadow: -0.7px 0px 0.00px, 0.7px 0px 0.00px, 0px -0.5px 0.00px, 0px 0.5px 0.00px;}
    .view span[class^='voyo'] {color: #00cccc;}
    .view span[class^='voyn'] {color: #0033cc;}
    .view span[class^='cons'] {color: saddlebrown;}
    .view span[class^='lemu'] {color: saddlebrown;}
    .view span[class^='svoy'] {color: rgb(134, 0, 179);}
    
/* div au-dessus du span lettre muette */
.lettre_muette {
    color: saddlebrown;
    text-align: center;
     -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
    z-index:10;
    text-shadow: 2px 0 0 #ffffff, -2px 0 0 #ffffff, 0 2px 0 #ffffff, 0 -2px 0 #ffffff, 1px 1px #ffffff, -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff;
}

/* pour les spans: */
    span[class*='liob_commise'] {color: green;}
    span[class*='liin_commise'] {color: red;}
    span[class*='ench_commise'] {color: #ff66ff ;}
    span[class*='acce_commise'] {}
    span[class*='intm_commise'] {}
    span[class*='intd_commise']{text-shadow: -0.7px 0px 0.00px, 0.7px 0px 0.00px, 0px -0.5px 0.00px, 0px 0.5px 0.00px;}
    span[class*='voyo_commise'] {color: #00cccc ;}
    span[class*='voyn_commise'] {color: #0033cc ;}
    span[class*='svoy_commise'] {color: rgb(134, 0, 179);}
    span[class*='cons_commise'] {color: saddlebrown;}
    span[class*='lemu_commise'] {color: saddlebrown;}
  
/* Quand on HOVER sur les spans */
    span[class*='liob_hover'] {color: green !important;}
    span[class*='liin_hover']{color: red  !important;}
    span[class*='ench_hover'] {color: #ff66ff  !important;}
    span[class*='intm_hover'] {}
    span[class*='intd_hover'] {}
    span[class*='acce_hover'] {text-shadow: -0.7px 0px 0.00px, 0.7px 0px 0.00px, 0px -0.5px 0.00px, 0px 0.5px 0.00px !important;}
    span[class*='voyo_hover'] {color: #00cccc  !important;}
    span[class*='voyn_hover'] {color: #0033cc  !important;}
    span[class*='svoy_hover'] {color: rgb(134, 0, 179) !important;}
    span[class*='cons_hover'] {color: saddlebrown !important;}
    span[class*='lemu_hover'] {color: saddlebrown !important;}

span[class$='commise1'] {
    text-shadow: none;
}
span[class$='commise2'] {
    text-shadow: 2px 0 0 yellow, -2px 0 0 yellow, 0 2px 0 yellow, 0 -2px 0 yellow, 1px 1px yellow, -1px -1px 0 yellow, 1px -1px 0 yellow, -1px 1px 0 yellow !important;
}
span[class$='commise3'] {
    text-shadow: 2px 0 0 orange, -2px 0 0 orange, 0 2px 0 orange, 0 -2px 0 orange, 1px 1px orange, -1px -1px 0 orange, 1px -1px 0 orange, -1px 1px 0 orange !important;
}

/* met l'ombre autour des spans ...hover1,2,3   et .correction ...commise1,2,3*/

span[class$='hover1'],
.correction span[class$='commise1'] {
    text-shadow: 0px 1px 3px #333333;
}
span[class$='hover2'],
.correction span[class$='commise2'] {
    text-shadow: 2px 0 0 yellow, -2px 0 0 yellow, 0 2px 0 yellow, 0 -2px 0 yellow, 1px 1px yellow, -1px -1px 0 yellow, 1px -1px 0 yellow, -1px 1px 0 yellow, 0px 2px 4px #333333 !important;
}
span[class$='hover3'],
.correction span[class$='commise3'] {
    text-shadow: 2px 0 0 orange, -2px 0 0 orange, 0 2px 0 orange, 0 -2px 0 orange, 1px 1px orange, -1px -1px 0 orange, 1px -1px 0 orange, -1px 1px 0 orange, 0px 2px 4px #333333 !important;
}
/*
.hover {z-index: 20 !important;}

.cliquee {z-index: 19 !important;}


*/

/* Erreur d'incompréhensibilité */

span[class^='inco'].inco_visible {
  border-bottom: 10px solid transparent;
  box-sizing: content-box;
  background: url(icones/wave-loop.png) bottom repeat-x;
  background-size: 14px;
  background-position: 0 130%;
  z-index: -20;
}

span[class^='inco'].inco_visible:hover {
  /*filter: brightness(0.3); */
  z-index: 20;
}

/*span[class^='inco'].inco_hover1 {
  filter: brightness(0.3);
  z-index: 20;
} */


/* Erreur de rythme fluidité*/

span[class^='ryth'].ryth_visible {
  border-bottom: 10px solid transparent;
  box-sizing: content-box;
  background: url(icones/rhythm-loop.png) bottom repeat-x;
  background-size: 14px;
  background-position: 0 130%;
  z-index: -19;

}

span[class^='ryth'].ryth_visible:hover {
  filter: brightness(0.3);
  z-index: 21;
}

/*span[class^='ryth'].ryth_hover1 {
  filter: brightness(0.3);
  z-index: 21;
}*/


/*pour toutes les DIV des erreurs commises 1,2,3 fois*/
div[class$='commise1'], 
div[class$='commise2'], 
div[class$='commise3'] {
    opacity: 1 !important;
    z-index:19;
}

/*pour toutes les DIV des erreurs commises 1,2,3 fois*/
div[class$='hover1'], 
div[class$='hover2'], 
div[class$='hover3'] {
    opacity: 1 !important;
    z-index:20 !important;
}


/* LIAISONS, ENCHAINEMENTS (x1)*/
    /* path de fond commise1, div0/div1, PAS d'ombre*/
    .liaison_div0_commise1>svg>path:first-child,
    .liaison_div1_commise1>svg>path:first-child {
        stroke: white;
    }
    /* ligne pointillée couleur hover1 et .correction, div0/div1 OMBRE */
    .liaison_div0_hover1>svg>path:last-child,
    .liaison_div1_hover1>svg>path:last-child,
    .correction .liaison_div0_commise1>svg>path:last-child,
    .correction .liaison_div1_commise1>svg>path:last-child {
        filter:url(#ombre_svg);
    }
    /* cercle, commise1, hover1 et .correction commise1*/
    .liaison_div2_commise1 circle {
        stroke: transparent;
    }
    .liaison_div2_hover1 circle,
    .correction .liaison_div2_commise1 {
        stroke: transparent;
        filter:url(#ombre_svg);
    }

/* LIAISONS, ENCHAINEMENTS (x2)*/
    /* path de fond commise2, div0/div1, PAS d'ombre*/
    .liaison_div0_commise2>svg>path:first-child,
    .liaison_div1_commise2>svg>path:first-child,
    .liaison_div0_hover2>svg>path:first-child,
    .liaison_div1_hover2>svg>path:first-child {
        stroke: yellow;
    }
    .liaison_div0_hover2>svg>path:first-child,
    .liaison_div1_hover2>svg>path:first-child {
        filter:url(#ombre_svg);
    }

    /* ligne pointillée couleur hover2 et .correction, div0/div1 OMBRE */
    .correction .liaison_div0_commise2>svg>path:first-child,
    .correction .liaison_div1_commise2>svg>path:first-child {
        filter:url(#ombre_svg);
    }
    /* cercle, commise2, hover2 et .correction commise2*/
    .liaison_div2_commise2 circle {
        stroke: yellow;
        stroke-width: 2;
    }
    .liaison_div2_hover2 circle,
    .correction .liaison_div2_commise2 circle {
        stroke: yellow;
        stroke-width: 2;
        filter:url(#ombre_svg);
    }

/* LIAISONS, ENCHAINEMENTS (x3)*/
    /* path de fond commise3, div0/div1, PAS d'ombre*/
    .liaison_div0_commise3>svg>path:first-child,
    .liaison_div1_commise3>svg>path:first-child,
    .liaison_div0_hover3>svg>path:first-child,
    .liaison_div1_hover3>svg>path:first-child {
        stroke: orange;
    }
    .liaison_div0_hover3>svg>path:first-child,
    .liaison_div1_hover3>svg>path:first-child {
        filter:url(#ombre_svg);
    }

    /* ligne pointillée couleur hover3 et .correction, div0/div1 OMBRE */
    .correction .liaison_div0_commise3>svg>path:first-child,
    .correction .liaison_div1_commise3>svg>path:first-child {
        filter:url(#ombre_svg);
    }
    /* cercle, commise3, hover3 et .correction commise3*/
    .liaison_div2_commise3 circle {
        stroke: orange !important;
        stroke-width: 2;
    }
    .liaison_div2_hover3 circle,
    .correction .liaison_div2_commise3 circle {
        stroke: orange !important;
        stroke-width: 2;
        filter:url(#ombre_svg);
    }
  

/* INTONATIONS MONT/DESC (x1) */
    /* Montante/Descendante */
    .intm_div0_commise1>svg>g:first-child>path,
    .intd_div0_commise1>svg>g:first-child>path {
        stroke:white;
    }
    .intm_div0_commise1>svg>g:first-child>polygon,
    .intd_div0_commise1>svg>g:first-child>polygon {
        fill: white;
    }
    /* Ombre Montante */
    .correction .intm_div0_commise1>svg>g:last-child,
    .intm_div0_hover1>svg>g:last-child {
        filter:url(#ombre_svg);
    }
    /* Ombre Descendante */
    .correction .intd_div0_commise1>svg>g:last-child,
    .intd_div0_hover1>svg>g:last-child {
        filter:url(#ombre_svg_inverse);
    }

/* INTONATIONS MONT/DESC (x2) */
    /* Montante/Descendante */
    .intm_div0_commise2>svg>g:first-child>path,
    .intd_div0_commise2>svg>g:first-child>path,
    .intm_div0_hover2>svg>g:first-child>path,
    .intd_div0_hover2>svg>g:first-child>path {
        stroke:yellow !important;
    }
    .intm_div0_commise2>svg>g:first-child>polygon,
    .intd_div0_commise2>svg>g:first-child>polygon,
    .intm_div0_hover2>svg>g:first-child>polygon,
    .intd_div0_hover2>svg>g:first-child>polygon {
        fill:yellow !important;
        
    }
    /* Ombre Montante */
    .correction .intm_div0_commise2>svg>g:first-child,
    .intm_div0_hover2>svg>g:first-child {
        filter:url(#ombre_svg);
    }
    /* Ombre Descendante */
    .correction .intd_div0_commise2>svg>g:first-child,
    .intd_div0_hover2>svg>g:first-child {
        filter:url(#ombre_svg_inverse);
    }

/* INTONATIONS MONT/DESC (x3) */
    /* Montante/Descendante */
    .intm_div0_commise3>svg>g:first-child>path,
    .intd_div0_commise3>svg>g:first-child>path,
    .intm_div0_hover3>svg>g:first-child>path,
    .intd_div0_hover3>svg>g:first-child>path {
        stroke: orange !important;
    }

    .intm_div0_commise3>svg>g:first-child>polygon,
    .intd_div0_commise3>svg>g:first-child>polygon,
    .intm_div0_hover3>svg>g:first-child>polygon,
    .intd_div0_hover3>svg>g:first-child>polygon{
        fill: orange !important;
    }

    .correction .intm_div0_commise3>svg>g:first-child,
    .intm_div0_hover3>svg>g:first-child {
        filter:url(#ombre_svg);
    }

    /* Ombre Descendante */
    .correction .intd_div0_commise3>svg>g:first-child,
    .intd_div0_hover3>svg>g:first-child {
        filter:url(#ombre_svg_inverse);
    }


/* SOULIGNÉ (x1) */
    /* PAS d'ombre div0, div1*/
    .souligne_div0_commise1,
    .souligne_div1_commise1 {
        
    }
    /* OMBRE */
    .correction .souligne_div0_commise1,
    .correction .souligne_div1_commise1,
    .souligne_div0_hover1,
    .souligne_div1_hover1 {
        filter:url(#ombre_svg);
    }
    
/* SOULIGNÉ (x2) */
    /* contour jaune div0, div1*/
    .souligne_div0_commise2,
    .souligne_div1_commise2,
    .souligne_div0_hover2,
    .souligne_div1_hover2 {
        border: 1px solid yellow;
        border-left: 2px solid yellow;
        border-right: 2px solid yellow;
    }
    /* ombre */
    .correction .souligne_div0_commise2,
    .correction .souligne_div1_commise2,
    .souligne_div0_hover2,
    .souligne_div1_hover2 {
        filter:url(#ombre_svg);
    }

/* SOULIGNÉ (x3) */
    /* contour orange div0, div1*/
    .souligne_div0_commise3,
    .souligne_div1_commise3,
    .souligne_div0_hover3,
    .souligne_div1_hover3 {
        border: 1px solid orange;
        border-left: 2px solid orange;
        border-right: 2px solid orange;
    }
    /* ombre */
    .correction .souligne_div0_commise3,
    .correction .souligne_div1_commise3,
    .souligne_div0_hover3,
    .souligne_div1_hover3 {
        filter:url(#ombre_svg);
    }
    

/* LETTRE MUETTE (x1) */
    .lemu_div0_commise1 {
        text-shadow: 2px 0 0 #ffffff, -2px 0 0 #ffffff, 0 2px 0 #ffffff, 0 -2px 0 #ffffff, 1px 1px #ffffff, -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff;
    }
    .correction .lemu_div0_commise1,
    .lemu_div0_hover1 {
        text-shadow: 0px 2px 4px #333333, 2px 0 0 #ffffff, -2px 0 0 #ffffff, 0 2px 0 #ffffff, 0 -2px 0 #ffffff, 1px 1px #ffffff, -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff;
    }
    .correction .lemu_div0_commise1 line,
    .lemu_div0_hover1 line {
        filter:url(#ombre_svg);
    }

/* LETTRE MUETTE (x2) */
    .lemu_div0_commise2 {
        text-shadow: 2px 0 0 yellow, -2px 0 0 yellow, 0 2px 0 yellow, 0 -2px 0 yellow, 1px 1px yellow, -1px -1px 0 yellow, 1px -1px 0 yellow, -1px 1px 0 yellow !important;
    }
    .correction .lemu_div0_commise2,
    .lemu_div0_hover2 {
        text-shadow: 2px 0 0 yellow, -2px 0 0 yellow, 0 2px 0 yellow, 0 -2px 0 yellow, 1px 1px yellow, -1px -1px 0 yellow, 1px -1px 0 yellow, -1px 1px 0 yellow, 0px 2px 4px #333333  !important;
        
    }
    .correction .lemu_div0_commise2 line,
    .lemu_div0_hover2 line {
        filter:url(#ombre_svg);
    }

/* LETTRE MUETTE (x3) */
    .lemu_div0_commise3 {
        text-shadow: 2px 0 0 orange, -2px 0 0 orange, 0 2px 0 orange, 0 -2px 0 orange, 1px 1px orange, -1px -1px 0 orange, 1px -1px 0 orange, -1px 1px 0 orange !important;
    }
    .correction .lemu_div0_commise3,
    .lemu_div0_hover3 {
        text-shadow: 2px 0 0 orange, -2px 0 0 orange, 0 2px 0 orange, 0 -2px 0 orange, 1px 1px orange, -1px -1px 0 orange, 1px -1px 0 orange, -1px 1px 0 orange, 0px 2px 4px #333333  !important;
    }
    .correction .lemu_div0_commise3 line,
    .lemu_div0_hover3 line {
        filter:url(#ombre_svg);
    }



/* Commentaire audio bulle */

.bulle_commentaire_audio {
    z-index: 100;
    user-select: none;
}

.bulle_commentaire_audio svg {
    cursor: pointer;
}

.bulle_commentaire_audio_icone:hover {
    transform: scale(1.1);
    transform-origin: center;

}

.bulle_interieur_titre {
    position: absolute;
    width: 75%;
    font-size: 11px;
    text-align: left;
    padding: 5px;
    top: 0px;
    height: 20px;
    max-height: 40px;
    max-width: 124px;
    overflow: hidden;
}

.bulle_interieur_compteur {
    position: absolute;
    width:100px;
    height: auto;
    transform: translate(-50%, 0);
    left: 50%;
    top: 35px;
    font-size: 16px;
    text-align: center;
    /*font-family: 'digital-clock-font-mono';
    color: white;
    background-color: black; */

}



.bulle_interieur_controles_cadre {
    position: absolute;
    transform: translate(-50%, 0);
    left: 50%;
    top: 65px;
    height: 30px;
    box-sizing: border-box;
}

.bulle_interieur_record_cadre, 
.bulle_interieur_play_cadre {
    display: inline-block;
    position: absolute;
    height: 30px;
    width: 30px;
    box-sizing: border-box;
    border-radius: 50%;
    box-shadow: 0px 2px 2px darkgray;
}

.red_halo_shadow {
    box-shadow: 1px 1px 4px rgba(255,0,0,0.2), -1px -1px 4px rgba(255,0,0,0.2), -1px 1px 4px rgba(255,0,0,0.2), 1px -1px 4px rgba(255,0,0,0.2);
}

.bulle_interieur_record_cadre {
    background-color: rgba(255,0,0,0.1);
}

.bulle_interieur_play_cadre {
    background-color: rgba(0,255,0,0.2);
}

.bulle_interieur_record_cadre img, 
.bulle_interieur_play_cadre img,
.bulle_interieur_supprimer_audio img,
.bulle_interieur_fermer img {
    position: absolute;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.bulle_interieur_fermer {
    position: absolute;
    height: 15px;
    width: 15px;
    top: 3px;
    right: 5px;
    cursor: pointer;
    
}

.bulle_interieur_fermer:hover {
    background-color: rgba(0,0,0,0.1);
}

.bulle_interieur_supprimer_audio {
    position: absolute;
    height: 15px;
    width: 15px;
    top: 37px;
    right: 5px;
    opacity: 0.5;
    display: none;
    cursor: pointer;
}

.texte_selectionne_commentaire_audio {
    background-color: lightgrey;
}


.correction_prof_lecture_liste_erreurs {
    position: absolute;
    right: 55px;
    top: 40px;
    border: 1px solid black;
    height: 404px;
    width: 180px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: white;
    font-size: 13px;
    box-sizing: border-box;

}


/* Source texte */

.correction_prof_cadre_source {
    position: absolute;
    left: 55px;
    top: 454px;
    height: 0px; /* Normalement: 30px */
    width: 712px;
    user-select: none;
    overflow: hidden;
}


.correction_prof_source {
    position: absolute;
    left: 2px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    width: 55px;
    height: 22px;
    font-size: 14px;
    line-height: 21px;
    font-weight: bold;
}

.correction_prof_textarea {
    position: absolute;
    height:20px;
    font-size: 13px;
    width: 652px;
    transform: translate(0, -50%);
    top: 50%;
    left: 60px;
    overflow-y: auto;
    overflow-x: hidden;
    resize:none;
    box-sizing: border-box;
    background-color: transparent;
    border: 0px solid transparent;
}


/* Prof player */

.correction_prof_cadre_player {
    position:absolute;
    left: 55px;
    width: 710px;
    height: 90px;
    top: 454px;
    box-sizing: border-box;
}


.correction_prof_cadre_onde {
    position: absolute;
    background-color: darkgrey;
    top: 0px;
    left: 0px;
    height: 50px;
    width: 710px;
    border: 1px solid black;
    box-sizing: content-box;
    overflow: hidden;

}

.correction_prof_canvas {
    position: absolute;
    width: 100%;
    height: 50px;
    box-sizing: border-box;

}

.correction_prof_onde_curseur {
    position: absolute;
    height: 100%;
    width: 3px;
    background-color: red;
    left: 0px;
    z-index: 10;
    pointer-events: none;
}

.correction_prof_cadre_controles_audio {
    position: absolute;
    top: 55px;
    height: 35px;
    left: 0px;
    width: 712px;
    overflow-x: hidden;
    box-sizing: border-box;
}

.correction_prof_message_enregistrement {
    position: absolute;
    height: 20px;
    left: 0px;
    bottom: 10px;
    width: 300px;
    
    
}

.correction_prof_cadran {
    position: absolute;
    right: 0px;
    height: 25px;
    line-height: 25px;
    width: 165px;
    border: 1px solid black;
     /*-webkit-transform: translate(-0, -50%);
    -ms-transform: translate(-0, -50%);
    transform: translate(-0, -50%); */
    top: 2px;
    background-color: lightgrey;
    color: black;
    font-family: 'digital-clock-font-mono';
    text-shadow: 1px 3px 2px #50594e;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    overflow: hidden;
}

/*
#correction_prof_messages {
    position: absolute;
    width: 165px;
    height: 12px;
    font-size: 11px;
    bottom: 0px;
    right: 0px;

} */

.correction_prof_audio_rewind {
    left: 45%;
    -webkit-transform: translate(-0, -50%) scaleX(-1);
    -ms-transform: translate(-0, -50%) scaleX(-1);
    transform: translate(-0, -50%) scaleX(-1);
   
}


.correction_prof_audio_play_pause {
    left: 50%;
}


.correction_prof_audio_forward {
    left: 55%;
   
}



.correction_prof_lecture_enregistrer_erreurs {
    position: absolute;
    height: 35px;
    width: 110px;
    background-color: black;
    color: white;
    bottom: 43px;
    right: 85px;
    border-radius: 5px;
    text-align: center;
    padding: 5px;
    cursor: pointer;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
    font-weight: bold;
    box-shadow: 0px 2px 2px darkgray;
    box-shadow: border-box;
    display:none;
}

.correction_prof_lecture_enregistrer_erreurs:active {
    color: lightgray;
    box-shadow: none;
}


.correction_prof_lecture_enregistrer_messages {
    position: absolute;
    bottom: 15px;
    height: 20px;
    width: 20px;
    right: 135px;
    display: none;
}

.correction_prof_lecture_enregistrer_messages img {
    width: 100%;
    height: 100%;
}


.correction_prof_bilan_erreurs_titre_cadre {
    position: absolute;
    top: 10px;
    height: 20px;
    width: 500px;
    left: 90px;
    color: black;
    font-size: 23px;
    line-height: 30px;
}

.correction_prof_bilan_erreurs_texte_cadre {
     position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    top: 50px;
    border: 1px solid black;
    height: 459px;
    width: 840px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
    cursor:default;

}

.correction_prof_bilan_erreurs_texte_interieur {
    position: absolute;
    height: auto;
    min-height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    display: none;
    white-space: pre-wrap;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 40px;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: 28px;
    cursor: text;
    line-height: 2.2;
    overflow-wrap: normal;
    /* marche pas*/
    word-break: keep-all;
    -webkit-word-break: keep-all;
    white-space: pre-wrap;
    line-break: strict;
    background-color: #fcfcfc;
    text-align: justify;
    

}



#correction_prof_fenetre_inco_rythme {
    position: absolute;
    padding: 2px;
    left: 640px;
    top: 220px;
    width: 150px;
    padding-left: 0px;
    padding-right: 0px;
    height: 60px;
    border: 2px solid black;
    line-height: 20px;
    background-color: lightgrey;
    cursor: default;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    -webkit-user-select: none;
    overflow: hidden;
     z-index: 30;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
}

#correction_prof_fenetre_inco_rythme div {
    width:100%;
}

#correction_prof_fenetre_inco_rythme div:hover {
    background-color: grey !important;
     color: white;
     z-index: 30;
}


#correction_prof_fenetre_context_menu {
    position: absolute;
    padding: 2px;
    left: 640px;
    top: 220px;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    height: 20px;
    border: 2px solid black;
    line-height: 20px;
    background-color: lightgrey;
    cursor: default;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    -webkit-user-select: none;
    overflow: hidden;
     z-index: 30;
     box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
    
}

#correction_prof_fenetre_context_menu:hover {
    background-color: grey !important;
     color: white;
     z-index: 30;
}






/* BILAN EVAL */

.correction_prof_bilan_suite_titre_cadre {
    position: absolute;
    top: 10px;
    height: 20px;
    width: 400px;
    left: 65px;
    color: black;
    font-size: 23px;
    line-height: 30px;

}




.correction_prof_bilan_total_erreurs_cadre {
    position: absolute;
    left: 65px;
    top: 50px;
    height: auto;
    width: auto;
    user-select: none;
    box-sizing: border-box;
}

.correction_prof_bilan_total_erreurs_cadre table {
    position: absolute;
    width: auto;
    font-size: 12px;
    border: 1px solid black;
}


.correction_prof_bilan_total_erreurs_cadre th {
    padding: 2px;
    background-color: black;
    color: white;
    font-weight: bold;
    height: 15px;
}

.correction_prof_bilan_total_erreurs_cadre th {
    min-width: 80px;
}

.correction_prof_bilan_total_erreurs_cadre th:nth-child(1) {
    min-width: 100px;

}

.correction_prof_bilan_total_erreurs_cadre tr:nth-child(even) {
    background-color: #dddddd;
    height: 15px;
    
}

.correction_prof_bilan_total_erreurs_cadre tr:nth-child(odd) {
    background-color: #cccccc;
    height: 15px;
}

.correction_prof_bilan_total_erreurs_bordure_incomprehensible td {
    /*border-top: 1px solid darkgrey; */
}

    /* grille correction*/


.correction_prof_bilan_eval_grille_cadre {
    position: absolute;
    right: 210px;
    top: 50px;
    width: 350px;
    height: 469px;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    box-sizing: border-box;
    user-select: none;

}


.correction_prof_bilan_grille_titre_legende {
    position: absolute;
    height: 40px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    top: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;

}


.correction_prof_bilan_grille_cadre_numeros {
    position: absolute;
    top: 42px;
    right: 0px;
    width: 180px;
    height: 12px;
    overflow: visible;
    white-space: nowrap;
}

.grille_numero {
    position: relative;
    display:inline;
    font-size: 15px;
    top: -2px;
    margin-left: 6px;
    margin-right: 21.7px;
    font-weight: bold;
    text-align: center;

}

.correction_prof_bilan_eval_grille_cadre table {
    position: absolute;
    top: 58px;
    width: 100%;
    height: 230px;
    font-size: 11px;
}

.correction_prof_bilan_eval_grille_cadre tr:nth-child(odd) {
    background-color: #dddddd;

}

.correction_prof_bilan_eval_grille_cadre tr:nth-child(even) {
    background-color: #eeeeee;

}

.correction_prof_bilan_eval_grille_cadre table tr td:first-child {
    height: auto;
    width: 158px;
    line-height: 1.3;
}


    /* RADIO BuTTOn Lui-même */
.correction_prof_bilan_eval_grille_cadre table tr td input:nth-child(odd) {
    position: relative;
    height: 15px;
    width: 15px;
    margin: 1px;
    top: 2px;
}

.correction_prof_bilan_eval_grille_cadre table tr td input:nth-child(even) {
    position: relative;
    height: 13px;
    width: 13px;
    margin: 2px;
    top: 1px;
}

.correction_prof_bilan_eval_grille_cadre textarea {
 position: absolute;
 border: 1px solid black;
 top: 350px;
 width: 98.5%;
 height: 74px;
 -webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
left: 50%;
overflow-y: scroll;
resize:none;
}


.correction_prof_bilan_eval_grille_afficher_notes {
    position: absolute;
    bottom: 1px;
    height: 12px;
    width: 100%;
    box-sizing: border-box;
    line-height: 12px;
    font-size: 12px;
    padding-left: 10px;
}

.correction_prof_bilan_eval_grille_note_label {
    position: absolute;
    
    bottom: 5px;
    left: 1px;
    height: 30px;
    width: 157px;
    text-align: left;
    font-size: 25px;
    line-height: 25px;
    box-sizing: border-box;
}

.correction_prof_bilan_eval_grille_note_label span {
    padding: 5px;
}

.correction_prof_bilan_eval_grille_note {
    position: absolute;
    bottom: 5px;
    right: 1px;
    height: 30px;
    width: 187px;
    text-align: right;
    font-size: 25px;
    line-height: 25px;
    box-sizing: border-box;
}

.correction_prof_bilan_eval_grille_note span {
    padding: 5px;
}

/* Système de notation */
.correction_prof_bilan_eval_methode_cadre {
    position: absolute;
    border: 1px solid black;
    top: 50px;
    right: 65px;
    width: 117px;
    height: 150px;
    box-sizing: border-box;
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    user-select: none;
    

}

.correction_prof_bilan_eval_methode_titre {
    position: absolute;
    text-align: center;
    height: 39px;
    width: 100%;
    border-bottom: 1px solid black;
    top: 0px;
    box-sizing: border-box;
    font-weight: bold;
}

.correction_prof_bilan_eval_methode_form {
    position: absolute;
    top: 40px;

}

.correction_prof_bilan_eval_methode_form > input:nth-child(1) {
   position: absolute;
   top: 10px;
}

.correction_prof_bilan_eval_methode_form > input:nth-child(2) {
   position: absolute;
   top: 40px;
}

.correction_prof_bilan_eval_methode_form > input:nth-child(3) {
   position: absolute;
   top: 100px;
}

.correction_prof_bilan_eval_methode_form_etiquette_proportionnel {
    position: absolute;
    top: 13px;
    left: 23px;
    font-size: 13px;
    line-height: 13px;
    height: 13px;
}

.correction_prof_bilan_eval_methode_form_etiquette_proportionnel_loading {
    position: absolute;
    top: 12px;
    left: 98px;
    height: 13px;
    width:13px;
    box-sizing: border-box;
    display:none;
}

.correction_prof_bilan_eval_methode_form_etiquette_proportionnel_loading img {
    position: absolute;
    width:100%;
    height:100%;
}

.correction_prof_bilan_eval_methode_form_etiquette_degressif {
    position: absolute;
    top: 43px;
    left: 23px;
    font-size: 13px;
    line-height: 13px;
    height: 13px;
}

.correction_prof_bilan_eval_methode_form_etiquette_degressif div {
    position: absolute;
    top: 20px;
    left: 0px;
    height: 15px;
    width: 87px;
    font-size: 11px;
}

.correction_prof_bilan_eval_methode_form_etiquette_manuel {
    position: absolute;
    top: 103px;
    left: 23px;
    font-size: 13px;
    line-height: 13px;
    height: 13px;
}

.correction_prof_bilan_eval_methode_select {
    position: absolute;
    top: 35px;
    left: 0px;
    height: 15px;
    width: 87px;
    font-size: 11px;
}

.correction_prof_bilan_eval_methode_select option {
    font-size: 12px;
}


.correction_prof_bilan_eval_calcul_inco_rythme_texte_cadre {
    position: absolute;
    border: 1px solid black;
    top: 200px;
    right: 65px;
    width: 1px;
    height: 1px;
    box-sizing: border-box;
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    user-select: none;
    overflow: hidden;
    display:none;

}

.correction_prof_bilan_eval_publier {

    position: absolute;
    height: 30px;
    right: 78.5px;
    width: 90px;
    bottom: 30px;
    border-radius: 5px;
    background-color: black;
    text-align: center;
    font-size: 20px;
    color: white;
    cursor: pointer;
    line-height: 30px;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px darkgray;
    box-shadow: border-box;

}

.correction_prof_bilan_eval_publier:active {
    box-shadow: none;
     color: lightgray;
}

.correction_prof_bilan_eval_confirmation {
    position: absolute;
    bottom: 7px;
    height: 20px;
    width: 20px;
    right: 90px;
    display:none;
}

.correction_prof_bilan_eval_confirmation img {
    width: 100%;
    height: 100%;
}





.correction_prof_bilan_eval_cadre_ext_graphique {
    position: absolute;
    height: 224px;
    width: 365px;
    bottom: 30px;
    left: 70px;
   

}



.correction_prof_bilan_eval_cadre_graphique {
    position: relative;

    width: 365px;
    height: auto;
    left: 0px;
    

}

.correction_prof_bilan_eval_titre_graphique {
    position: relative;
    top: 0px;
    height: 20px;
    width: 200px;
    left: 0px;
    font-size:19px;
    font-weight: bold;

}

.correction_prof_bilan_eval_cadre_graphique_legende {
    position: relative;
    margin-top: 10px;
    height: 45px;
    width: 365px;
    top: 0px;
    left: 0px;

}

.correction_prof_bilan_eval_graphique_legende_commises1fois {
    position: absolute;
    bottom: 20px;
    left: 40px;
    height: 10px;
    width: 10px;
    border: 1px solid black;
    background-color: darkgrey;
}
.correction_prof_bilan_eval_graphique_legende_commises1fois_label {
    position: absolute;
    height: 20px;
    width: 90px;
    font-size: 10px;
    bottom: 10px;
    left: 55px;
    line-height: 1;

}

.correction_prof_bilan_eval_graphique_legende_commises2fois {
    position: absolute;
    bottom: 20px;
    left: 140px;
    height: 10px;
    width: 10px;
    border: 1px solid black;
    background-color: #d9d9d9;
}
.correction_prof_bilan_eval_graphique_legende_commises2fois_label {
    position: absolute;
    height: 10px;
    width: 90px;
    font-size: 10px;
    bottom: 20px;
    left: 155px;
    line-height: 1;
}

.correction_prof_bilan_eval_graphique_legende_commises3fois {
    position: absolute;
    bottom: 20px;
    left: 240px;
    height: 10px;
    width: 10px;
    border: 1px solid black;
    background-color: #fdfdfd;
}
.correction_prof_bilan_eval_graphique_legende_commises3fois_label {
    position: absolute;
    height: 10px;
    width: 90px;
    font-size: 10px;
    bottom: 20px;
    left: 255px;
    line-height: 1;

}


.correction_prof_bilan_eval_graphique_legende_note_inco_rythme {
    position: absolute;
    left: 40px;
    bottom: 0px;
    font-size: 10px;
}


.correction_prof_bilan_eval_graphique_bloc_essai {
    position: relative;
    width: 100%;
    height: 50px;  
}

.correction_prof_bilan_eval_graphique_bloc_essai_label {
    position: absolute;
    width: 50px;
    height: 18px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
}

.correction_prof_bilan_eval_graphique_bloc_essai_cadre_barres {
    position: absolute;
    width: 300px;
    height: auto;
    right: 10px;
    border-left: 2px solid black;

    padding-top: 5px;
    padding-bottom: 5px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
}

.correction_prof_bilan_eval_graphique_bloc_essai_cadre_barres_desactive {
    position: absolute;
    width: 300px;
    height: auto;
    right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
}

.correction_prof_bilan_eval_graphique_bloc_essai_barre1 {
    position: relative;
    height: 10px;
    width: 0px;
    border: 1px solid black;
    background-color: darkgrey;
    margin-bottom: 1px;

}

.correction_prof_bilan_eval_graphique_bloc_essai_barre2 {
    position: relative;
    height: 10px;
    width: 0px;
    border: 1px solid black;
    background-color: #d9d9d9;
    margin-bottom: 1px;
}

.correction_prof_bilan_eval_graphique_bloc_essai_barre3 {
    position: relative;
    height: 10px;
    width: 0px;
    border: 1px solid black;
    background-color: #fdfdfd;
}

div [class^="correction_prof_bilan_eval_graphique_bloc_essai_barre"] div {
    position: absolute;
    width: auto;
    height: 10px;
    font-size: 10px;
    left: calc(100% + 5px);
    line-height: 10px;
    text-align: left;
}

.correction_prof_bilan_eval_grille_cadre tr.correction_prof_bilan_eval_input_unchecked {
    color: red;
}




.correction_prof_bilan_eval_bouton_questionnaire {
    position: absolute;
    bottom: 48px;
    right: 55px;
    height: 50px;
    width: 42px;
    box-sizing: border-box;
}

.correction_prof_bilan_eval_bouton_questionnaire img {
    position: absolute;
    height: 100%;
    width: auto;
    left: 0;
    top: 0;
    filter:url(#ombre_svg);
    opacity: 0.8;
    cursor:pointer;
}


.bounce {
    animation-name: bounce;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

@keyframes bounce {
   0%, 25%, 50%, 100% {
    transform: translateY(0);
  }
  12%, 37% {
    transform: translateY(-5px);
  } 
}

.correction_prof_bilan_eval_questionnaire_cadre {
    position: absolute;
    height: 0;
    width: 0;
    background-color:white;
    right: 76px;
    bottom: 73px;
    transition: all .3s;
}


.correction_prof_bilan_eval_questionnaire_cadre.quest_ouvert {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color:white;
    right: 0;
    bottom: 0;
}

.correction_prof_bilan_eval_questionnaire_x {
    position: absolute;
    height: 20px;
    width: 20px;
    right: 20px;
    top: 20px;
    cursor:pointer;
}

.correction_prof_bilan_eval_questionnaire_x:hover {
    background-color: lightgrey;
}

.correction_prof_bilan_eval_questionnaire_x img {
    height: 100%;
    width: 100%;
}


.correction_prof_bilan_eval_questionnaire_interieur {
    position: absolute;
    border: 1px solid black;
    width: 910px;
    height: 496px;
    overflow-y: hidden;
    overflow-x: hidden;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}


.correction_prof_bilan_eval_questionnaire_interieur iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
/* Créer nouveau cours */


#nouveau_cours_titre { /* Titre de la page*/
    position: relative;
    width: 620px;
    left: 0px;
    height: 35px;
    font-size: 30px;
    padding-left: 10px;
    color: #f9f9f9;
    text-shadow: 0px 1px 1px #999999;
    font-weight: bold;
    margin: auto;
    float: none;

}

#nouveau_cours_cadre {
    position: relative;
    height: 290px;
    width: 620px;
    left: 0px;
    top: 50px;
    background-color: rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin: auto;
    float: none;
    border-radius: 10px;

}


#nouveau_cours_cadre label {
    font-size: 18px;
    color: #333333;
    text-shadow: 0px 1px 1px #666666;
    font-weight: bold;
    background-color:transparent;
    user-select: none;
    line-height:18px;
}

#nouveau_cours_cadre input {
    position: absolute;
    font-size: 16px;
    color: #e9e9e9;
    text-shadow: 0px 1px 1px #999999;
    background-color:transparent;
    width: 370px;
    right: 0px;
    height: 18px;
    border: 1px solid grey;
    box-sizing: border-box;
    top: 1px;

}

#nouveau_cours_cadre input:focus {
    filter: brightness(120%);

}



#nouveau_cours_cadre input:hover {
    background-color: rgba(255, 255, 255, .1);
}



#nouveau_cours_nom {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 580px;
}

#nouveau_cours_nom input {
    width: 455px;
}

#nouveau_cours_sigle {
    position: absolute;
    left: 20px;
    top: 65px;
    font-size: 18px;
    width: 165px;
}

#nouveau_cours_sigle input {
    width: 115px;
}


#nouveau_cours_session {
    position: absolute;
    left: 230px;
    top: 65px;
    width: 160px;
}

#nouveau_cours_session select {
    position: absolute;
    left: 70px;
}

#nouveau_cours_annee {
    position: absolute;
    right: 20px;
    top: 65px;
    width: 160px;

}

#nouveau_cours_annee input {
    position: absolute;
    width: 95px;

}

#nouveau_cours_universite {
    position: absolute;
    left: 20px;
    top: 110px;
    width: 580px;
}

#nouveau_cours_universite input { 
    width: 485px;
}

#nouveau_cours_departement {
    position: absolute;
    left: 20px;
    top: 155px;
    width: 580px;
}


#nouveau_cours_departement input {
    width: 463px;
}


#nouveau_cours_recherche {
    position: absolute;
    bottom: 50px;
    left: 15px;
    height: 20px;
    width:100%;
}

#nouveau_cours_masquer_noms {
    position: absolute;
    bottom: 20px;
    left: 15px;
    height: 20px;
    width: 100%;
}


#nouveau_cours_recherche input, #nouveau_cours_masquer_noms input {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 18px;
    width: 18px;
}

#nouveau_cours_recherche label, #nouveau_cours_masquer_noms label {
    position: absolute;
    left: 30px;
    top: 0px;
    line-height: 12px;
}



#nouveau_cours_bouton_creer {
    position: relative;
    background: linear-gradient(178deg,#eb7b29,#c65301);
    font-family: Tahoma, Geneva, sans-serif; 
    color: #f9f9f9;
    font-weight: bold;
    border-radius: 5px;
    text-shadow: 0px 1px 1px #999999;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 16px;
    cursor: pointer;
    float: none;
    margin: auto;
    border: none;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;   
    box-shadow: 0px 2px 2px darkgrey;
    top: 70px;
}




#nouveau_cours_bouton_creer:active {
    background: linear-gradient(178deg,#c65301,#eb7b29);
    box-shadow: 0px 2px 2px darkgrey;
}

#nouveau_cours_creer_confirmation {
    position: relative;
    left: 575px;
    top: 40px;
    width: 20px;
    height: 20px;
    display: none;


}

#nouveau_cours_creer_confirmation img {
    height: 100%;
    width: 100%;
}

#nouveau_cours_creer_message {
    position: relative;
    top: 90px;
    float: none;
    margin: auto;
    width: 300px;
    height: 25px;
    font-size: 18px;
    text-align: center;
    color: darkred;

}


#nouveau_cours_precision_cours_recherche {
    position: relative;
    display: inline-block;
    margin:auto;
    width: 100%;
    text-align: center;
}

.nouveau_cours_input_invalide {
    border: 1px solid red !important;
}


/* Switch correcteur*/
.nouveau_cours_correcteur_switch_cadre {
    position: absolute;
    height: 25px;
    width: 140px;
    bottom: 10px;
    right: 30px;
    user-select: none;
}

.nouveau_cours_correcteur_switch_titre {
    position: absolute;
    /*transform: translate(-50%, 0); */
    left: 0;
    width: 100px;
    bottom: 0;

}


.nouveau_cours_correcteur_switch {
    position: absolute;
    /*transform: translate(-50%, 0); */
    right: 0;
    bottom: 0;
    width: 32px;
    height: 16px;
}

.nouveau_cours_correcteur_switch input {
    display:none;

}


.nouveau_cours_correcteur_switch_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .3s;
    transition: .3s;
    background-color: darkred;
    border-radius: 30px;
}


.nouveau_cours_correcteur_switch_slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 0px;
    bottom: 0px;
    -webkit-transition: .3s;
    transition: .3s;
    background-color: lightgray;
    border-radius: 50%;

}

.nouveau_cours_correcteur_switch input:checked + .nouveau_cours_correcteur_switch_slider {

    background-color: green;

}

.nouveau_cours_correcteur_switch input:checked + .nouveau_cours_correcteur_switch_slider:before {
    -webkit-transform: translateX(16px);
    transform: translateX(16px);
}
/* */



/* Notifications */


#notifications_titre_page {
    position: relative;
    margin-left: 0px;
    height: 35px;
    font-size: 30px;
    width: auto;
    padding-left: 10px;
    color: #f9f9f9;
    text-shadow: 0px 1px 1px #999999;
    font-weight: bold;
}


#notifications_cadre_liste {
    position: relative;
    top: 15px;
    transform: translate(-50%, 0);
    margin-left:50%;
    width: 960px;
    height: 594px;
    opacity: 1;
    user-select: none; 
    box-sizing: border-box;
    overflow-x:hidden;
    overflow-y:auto;
}

.notifications_cadre_notification {
    position: relative;
    height: 60px;
    width: 720px;
    background-color: rgb(255,255,255, 0.5);
    float: none;
    margin: auto;
    border-radius: 10px;
    margin-top: 20px;
    padding: 10px;
    padding-top: 20px;
    cursor:pointer;
    overflow: hidden;    
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);

}

.notifications_cadre_notification:hover {
    background-color: rgb(255,255,255, 0.6);
}

.notifications_icone_correction, .notifications_icone_enregistrement {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    left: 20px;
    border-radius: 50%;
    border: 1px solid black;
    background-color:#36454f;
}

.notifications_icone_correction img,
.notifications_icone_enregistrement img {
    position: absolute;
    height: 85%;
    width:85%;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.notifications_message {
    position: absolute;
    top: 50%;
    left: 100px;
    transform: translateY(-50%);
    min-height: 35px;
    overflow: hidden;
    width: 500px;
    margin: auto;
    float: none;
    text-align: left;
}

.notifications_x {
    position: absolute;
    height: 15px;
    width: 15px;
    right: 10px;
    top:10px;
    cursor:pointer;
}

.notifications_x img {
    height: 100%;
    width:100%;
}

.notifications_timestamp {
    position: absolute;
    font-size: 13px;
    color: grey;
    height: 15px;
    line-height: 15px;
    width: auto;
    right: 10px;
    font-family: Arial, Helvetica, sans-serif;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
}


.principale_navigation_notifications_compteur {
    position: absolute;
    background-color: red;
    height: 15px;
    min-width: 12px;
    width: auto;
    text-align: center;
    color: white;
    padding: 2px;
    box-sizing: border-box;
    font-size: 11px;
    vertical-align: middle;
    line-height: 12px;
    border-radius: 2px;
    font-family: Arial, Helvetica, sans-serif;
    left: 46px;
    top: 18px;   
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
    display: none;
}

/* Paramètres */


#parametres_titre_page {
    position: relative;
    margin-left: 0px;
    height: 35px;
    font-size: 30px;
    width: auto;
    padding-left: 10px;
    color: #f9f9f9;
    text-shadow: 0px 1px 1px #999999;
    font-weight: bold;
}



#parametres_cadre_options_notifications {
    position: absolute;
    top: 60px;
    left: 20px;
    width: 980px;
    height: auto;
    border: 1.2px solid #666666;
    border-radius: 10px;
    box-sizing: border-box;
    clip-path: polygon(0% 0%, 0% 100%, 30px 100%, 30px 0%, 170px 0, 170px 5px, 30px 5px, 30px 100%, 100% 100%, 100% 0%);
    padding: 34px;
    box-sizing: border-box;
    color: #666666;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 14px;
}

#parametres_cadre_options_notifications_titre {
    position: absolute;
    height: 20px;
    width: 140px;
    left: 50px;
    top: 46px;
    text-align: center;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: grey;
    font-size: 17px;
    letter-spacing: 1.5px;
    color: #666666;

}

#parametres_notification_courriel_etudiant_titre {
    color: #444444;
}

#parametres_notification_courriel_prof_titre {
    color: #444444;
}


/* */