@font-face {font-family: "cmathscript";src: url('fonts/cmathscr.ttf');}
@font-face {font-family: "timesi";src: url('fonts/timesi.ttf');}

* {
    vertical-align: middle;
}
b {
vertical-align:top;
}
html {-moz-user-select: -moz-none;}
/*STRUCTURE DES DIFFERENTES CASES*/
body {
    font-family: comic sans ms;
}
math mrow {
    font-family: comic sans ms;
}
input {
    font-family: comic sans ms;
}
#bandeau {
    /*top:0%;
    left:0;*/
    display:inline-block;
    vertical-align: top;
    /*width:98%;*/
    /*height:4%;*/
    /*position:absolute;*/
    margin:4px;
    padding: 5px 10px 5px 10px;
    /*border: 2px solid #7fb75d;*/
    box-shadow: 4px 4px 2px #748aa3;
    border-radius: 7px;
    background-color: #7fb75d;
}
#espace {
    display:inline-block;
    min-width:50px;
}
#pied {
    top:98%;
    left:0;
    width:98%;
    height:4%;
    position:absolute;
    margin:4px;
    padding: 5px;
    border: 1px solid #cccc33;
    border-radius: 7px;
    opacity:1;
    transition-property: opacity, left;
    transition-duration: 1s;
}
#centre {
    /*display: flex;
    flex-flow: row;
    min-height: 500px;*/
    /*top:6%;
    left:0;
    width:99%;
    height:88%;
    margin:4px;*/
    top:9%;
    position:absolute;
    height:88%;
    width: 98%;
    display: block;
    opacity:1;
    transition-property: opacity;
    transition-duration: 1s;
}
#marge_gauche {
    /*order: 1;
    display: flex;
    flex-flow: column;
    flex: 0 1 20%;*/
    /*top:0;
    left:0;
    width:18%;
    height:95%;
    position:absolute;
    margin:4px;*/
    display: inline-block;
    vertical-align: top;
    min-width:5%;

}
#menu {
    /*flex: 0 1 60%;
    order: 2;*/
    margin: 4px;
    padding: 5px;
    border: 1px solid #cccc33;
    border-radius: 7px;
}
#chapitres {
    /*flex: 0 1 50%;
    order: 2;*/
    /*top:0%;
    left:0%;
    width:100%;
    height:55%;
    position:absolute;*/
    display: inline-block;
    position: relative;
    z-index: 1000;
    vertical-align: top;
    /*height: 25px;*/
    width: auto;
    min-width: 120px;
    margin: 4px;
    margin-left:180px;
    padding: 5px;
    border: 2px solid #72a695;
    box-shadow: 2px 2px 2px #AFDA95;
    border-radius: 7px;
    background-color: #72a695;
    overflow-y:hidden;
    transition-property: opacity;
    transition-duration: 1s;
}
#niveaux {
    /*flex: 0 1 50%;
    order: 2;*/
    top:0%;
    left:0%;
    width:100%;
    height:25%;
    position:absolute;
    margin: 4px;
    padding: 5px;
    border: 2px solid #7fb75d;
    box-shadow: 2px 2px 2px #AFDA95;
    border-radius: 7px;
    background-color: #478c75;
    overflow-y:hidden;
}
#liste_chapitres {
    /*flex: 0 1 50%;
    order: 2;*/
    top:28%;
    left:0%;
    width:100%;
    height:76%;
    position:absolute;
    margin: 4px;
    padding: 5px;
    border: 2px solid #7fb75d;
    box-shadow: 2px 2px 2px #AFDA95;
    border-radius: 7px;
    background-color: #72a695;
    overflow-y:hidden;
}
#liste_classes {
    /*flex: 0 1 50%;
    order: 2;*/
    top:0;
    left:0;
    width:100%;
    height:55%;
    position:absolute;
    margin: 4px;
    padding: 5px;
    border: 2px solid #72a695;
    box-shadow: 2px 2px 2px #AFDA95;
    border-radius: 7px;
    background-color: #478c75;
    overflow-y:scroll;
}
#competences {
    /*flex: 0 1 50%;
    order: 2;*/
    /*top:0%;
    left:0%;
    width:100%;
    height:55%;
    position:absolute;*/
    display: inline-block;
    position: relative;
    z-index: 1000;
    vertical-align: top;
    /*height: 25px;*/
    width: auto;
    min-width: 200px;
    margin: 4px;
    margin-left:110px;
    padding: 5px;
    border: 2px solid #72a695;
    box-shadow: 2px 2px 2px #AFDA95;
    border-radius: 7px;
    background-color: #72a695;
    overflow-y:hidden;
    transition-property: opacity;
    transition-duration: 1s;
}
#calendrier {
    /*flex: 0 1 50%;
    order: 3;*/
    top:58%;
    left:0;
    width:100%;
    height:45%;
    position: absolute;
    margin: 4px;
    padding: 5px;
    border: 2px solid #7fb75d;
    box-shadow: 2px 2px 2px #AFDA95;
    border-radius: 7px;
    background-color: #478c75;
}
#import {
    /*flex: 0 1 50%;
    order: 3;*/
    top:58%;
    left:0;
    width:100%;
    height:47%;
    position: absolute;
    margin: 4px;
    padding: 5px;
    border: 2px solid #7fb75d;
    box-shadow: 2px 2px 2px #AFDA95;
    border-radius: 7px;
    background-color: #478c75;
}
#deroulement {
    /*flex: 0 1 55%;
    order: 4;*/
    /*top:0%;
    left:20%;
    width:55%;
    height:100%;
    position: absolute;
    margin: 8px;
    padding: 5px;*/
    display: inline-block;
    vertical-align: top;
    min-width: 60%;
    min-height: 99%;
    margin:4px;
    padding: 5px 10px 5px 10px;
    /*border: 2px solid #7fb75d;*/
    box-shadow: 4px 4px 2px #748aa3;
    border-radius: 7px;
    background-color: #7fb75d;
}
#navigation {
    margin: 4px;
    padding: 5px;
    border: 2px solid #7fb75d;
    box-shadow: 2px 2px 2px #AFDA95;
    border-radius: 7px;
    background-color: #72a695;
}
#contenu {
    position:absolute;
    height:86%;
    width: 58%;
    overflow-y: auto;
    margin:4px;
    padding: 5px 10px 5px 10px;
    /*border: 2px solid #7fb75d;*/
    box-shadow: 4px 4px 2px #748aa3;
    border-radius: 7px;
    background-color: white;
}
#creation {   
    top:0;
    left:0;
    width:100%;
    height:15%;
    position: absolute;
    padding: 5px;
}
#creation2 {   
    top:20%;
    left:0;
    width:100%;
    height:78%;
    position: absolute;
    padding: 5px;
    overflow-y: scroll;
}



#choixdev {
    top:0;
    left:20%;
    width:55%;
    height:100%;
    position: absolute;
    margin: 4px;
    padding: 5px;
    border: 2px solid #7fb75d;
    box-shadow: 2px 2px 2px #AFDA95;
    border-radius: 7px;
    background-color: white;
}
#choixaide {
    top:0;
    left:20%;
    width:55%;
    height:100%;
    position: absolute;
    margin: 4px;
    padding: 5px;
    border: 2px solid #7fb75d;
    box-shadow: 2px 2px 2px #AFDA95;
    border-radius: 7px;
    background-color: white;
}
#droite {
    /*order: 5;
    display: flex;
    flex-flow: column;
    flex: 0 1 25%;*/
    /*top:0;
    left:78%;
    width:20%;
    height:100%;
    margin: 4px;
    padding: 5px;
    position: absolute;*/
    display: inline-block;
    vertical-align: top;
    margin-left:2%;
    min-width: 26%;
    min-height: 99%;
    transition-property: opacity, left;
    transition-duration: 1s;
}
#droite2 {
    /*order: 5;
    display: flex;
    flex-flow: column;
    flex: 0 1 25%;*/
    top:0;
    left:78%;
    width:20%;
    height:100%;
    margin: 4px;
    padding: 5px;
    position: absolute;
}
#reponse {
    /*flex: 0 1 30%;
    order: 6;*/
    /*top:0;
    left:0;
    width:100%;
    height:65%;
    position: absolute;
    margin: 4px;
    padding: 5px;*/
    display: inline-block;
    vertical-align: top;
    width: 26%;
    height: 60%;
    position:absolute;
    margin:4px;
    padding: 5px 10px 5px 10px;
    overflow-y:scroll;
    /*border: 2px solid #7fb75d;*/
    box-shadow: 4px 4px 2px #748aa3;
    border-radius: 7px;
    background-color: #7fb75d;
}
#ressources {
    /*flex: 0 1 30%;
    order: 6;*/
    margin: 4px;
    padding: 5px;
}


#aide {
    /*flex: 0 1 70%;
    order: 7;*/
    top:68%;
    left:0;
    width:100%;
    height:31%;
    position: absolute;
    margin: 4px;
    padding: 5px;
    border: 2px solid #7fb75d;
    box-shadow: 2px 2px 2px #AFDA95;
    border-radius: 7px;
    background-color: #478c75;
}

/*BOUTON AIDE*/

#text_aide {
    background-color: #55FFAA;
    margin: 4px;
    padding: 5px;
    border: 1px solid #cccc33;
    border-radius: 7px;
    display: none;
}
#bouton_aide:hover #text_aide {
    display: block;
}

/*MENU CHAPITRES*/

#chapitres li:hover ul {
    display: block;
}
#chapitres li ul {
    display: none;
}

/*MENU COMPETENCES*/

#competences li:hover ul {
    display: block;
}
#competences li ul {
    display: none;
}

img {
    /*width: 75%;*/
}

/* BOUTONS NAVIGATION */

.bout_nav {
    display: inline-block;
    width: 5%;
    height: 10%;
    background-color: #a85684;
    margin: 2px;
    text-align: center;
    border-radius: 7px;
}
.bout_nav input {
    background-color: inherit;
    text-align: center;
    border: none;
    padding:2px;
    font-size: 14px;
    border-radius: 10px;
    width:100%;
    height:100%;
}
.bout_nav input:hover{
    cursor: pointer;
    color:white;
}
.bout_nav:hover {
    background-color: #681042;
    
    cursor: pointer;
}

/* CONTENU */

#contenu div:first-child {
    /*  display: block;*/
}
#contenu div {
    /* display: none;*/
}

/* BARRES DE REUSSITE */
.barre_reussite {
    display:block;
    background-color: #a85684;
    height: 5px;
}

/* QCM */
.qcm {
    width: 100%;
    text-align: center;
}
.qcmdiv {
    display: inline-block;
    padding-right: 8px;
    padding-left:8px;
    border-radius: 7px;
    background-color: lightgrey;
    border: 2px outset grey;
    cursor: pointer;
}
.qcmdiv:hover {
    background-color: grey;
}

/* IMAGES DE CONTENU */
#contenu img {
   /* width: 46%;*/
    margin: auto;
    display: block;
}

/* IMAGES DE CONTENU CREATION*/
#creation2 img {
    /*width: 46%;*/
    margin: auto;
    display: block;
}

/* FRACTIONS */
.fractions {
    font-family:Times New Roman;
    font-size:22px;
}

/* VIGNETTES */
.vignettes {
    display: block;
    height:25px;
    overflow: hidden;
}
.vignettes:hover {
    height:auto;
}

/* CALENDRIER */
#hautcalendrier {
    text-align: center;
    width:100%;
    border-bottom:1px solid grey;
    cursor: default;
}
#hautcalendrier td {
    width:auto;
}
#milieucalendrier {
    text-align: center;
    width:100%;
    border-top:1px solid grey;
    border-bottom:1px solid grey;
    cursor: default;
}
#bascalendrier {
    text-align: center;
    width:100%;
    border-top:1px solid grey;
    cursor: default;
}
#bascalendrier input {
    width:100%;
    text-align: center;
}
#bascalendrier td:hover {
    background-color: #7Fb75d;
    border-radius: 5px;
}

/* BOUTON DECONNEXION */
#deconnexion {

}
#decon {
    background-color: #AFDA95;
    border: 3px solid #72a695;
    border-radius: 8px;
}
#decon:hover {
    background-color:#72a695;
    cursor: pointer;
}

/* CASES DES REPONSES */
.case_rep{
    height:30px;
    border: 1px dashed #AFDA95;
    border-radius: 5px;
    margin:2px;
    padding-left:8px;
    width:75%;
}

/* BARRES DE SUIVI */
.barre_suivi {
    display: inline-block;
    height: 3px;
    width: 100%;
    font-size: 12px;
    border: 1px solid black;
    text-align:center;
}

/* BOUTONS OUVERTURE FERMETURE DE SEANCE */
.ouvferm {
    width: 40%;
    border-radius:5px;
}

/* BOUTON DES CLASSES DANS SUIVI */
.suiviclasse {
    /*width: 50%;*/
    display: inline-block;
}

/* BOUTONS DES DATES */
.listedate {
    background-color: none;
    background: none;
    border:none;
    font-family: "Times New Roman";
    font-size:16px;

}
.listedate:hover {
    cursor: pointer;
}

/* BOUTON DE BASCULE VERS L'AIDE */
#bout_aide {
    top:47%;
    left:95.5%;
    height:24px;
    width:90px;
    position: absolute;
    display: block;
    background-color: #a85684;
    border-radius: 7px;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    -moz-transform: rotate(270deg);
    transition-property: all;
    transition-duration: 1s;
}

/* AFFICHAGE DE L'AIDE*/
#menu_aide {
    top:8%;
    left:100%;
    width:0%;
    height:88%;
    margin:8px;
    position: absolute;
    display: block;
    opacity: 0;
    overflow-y:scroll;
    /*box-shadow: 2px 2px 2px #AFDA95;
    border-radius: 7px;
    background-color: #72a695;*/
    transition-property: opacity, left, width;
    transition-duration: 1s;
}
#affichage_aide {
    top:8%;
    left:100%;
    width:0%;
    min-height:86%;
    margin:8px;
    position: absolute;
    display: block;
    opacity: 0;
    box-shadow: 4px 4px 2px #748aa3;
    border-radius: 7px;
    background-color: #7fb75d;
    transition-property: opacity, left, width;
    transition-duration: 1s;
}
#imaide {
    width: 100%;
}

/* BOUTONS DE NAVIGATION PROF CREA,SUIVI,DEV,SEANCES */
#bout_prof_decon{
    top:0;
    left:35%;
    margin:4px;
    padding: 2px;
    position: absolute;
}

/* VIGNETTES DES AIDES */
.vignette_aide {
    /* width:auto;*/
}

/* TABLEAU DES AIDES */
#tabl_aide td {
    border:1px solid black;
    width: 33%;
}

/* PAGE D'AUTHENTIFICATION ELEVE */
#authentification {
    position:absolute;
    top:30%;
    left:50%;
    width:35%;
    margin-top:-10%;
    margin-left:-17%;
    text-align: center;
    border: 2px solid #7fb75d;
    box-shadow: 2px 2px 2px #748aa3;
    border-radius: 7px;
    background-color: #72a695;
    font-family: comic sans ms;
    font-size:18px;
}
#authvalid {
    font-family: comic sans ms;
    font-size: 14px;
    border:2px solid #7fb75d;
    border-radius: 4px;
    box-shadow: 2px 2px 2px #748aa3;
    background-color: #135353;
}

/* PAGE D'AUTHENTIFICATION PROF */
#authprof {
    position:absolute;
    top:50%;
    left:50%;
    width:35%;
    height:37%;
    margin-top:-10%;
    margin-left:-17%;
    text-align: center;
    border: 2px solid #ef93a4;
    box-shadow: 2px 2px 2px #ef93a4;
    border-radius: 7px;
    background-color: #c85f71;
    font-family: comic sans ms;
    font-size:18px;
}
#authvalid2 {
    font-family: comic sans ms;
    font-size: 14px;
    border:2px solid #ef93a4;
    border-radius: 4px;
    box-shadow: 2px 2px 2px #ef93a4;
    background-color: #771728;
}

/* MENU DEROULANT DATES DES SEANCES */
#menu_deroulant,#menu_deroulant ul {
    position: relative;
    padding:0;
    margin:0;
    list-style: none;
}
#menu_deroulant {
    text-align: center;
}
#menu_deroulant li {
    display: inline-block;
}
#menu_deroulant ul li {
    display: inherit;
    padding-bottom: 2px;
    padding-top: 2px;
}
#menu_deroulant a {
    text-decoration: none;
    display: block;
    color: #000;
}
#menu_deroulant ul {
    left:-999em;
    text-align: left;
    z-index: 1000;
}
#menu_deroulant li:hover ul {
    left:auto;
    
}

/* MENU DEROULANT DES COMPETENCES */
#menu_compet,#menu_compet ul {
    position: relative;
    padding:0;
    margin:0;
    list-style: none;
}
#menu_compet {
    text-align: center;
}
#menu_compet li {
    display: inline-block;
}
#menu_compet ul li {
    display: inherit;
    padding-bottom: 2px;
    padding-top: 2px;
}
#menu_compet a {
    text-decoration: none;
    display: block;
    color: #000;
}
#menu_compet ul {
    left:-999em;
    text-align: left;
    z-index: 1000;
}
#menu_compet li:hover ul {
    left:auto;
    transition: all .5s;
}

/* MENU DEROULANT FICHES AIDES */
#menu_vertical {
    padding:0;
    margin:0;
    list-style:none;
    text-align: center;
    width: 99%;
}
#menu_vertical ul {
    padding:0;
    margin:0;
    list-style:none;
    text-align: center;
}
#menu_vertical li { 
    background-image: linear-gradient(180deg,#72a695,#acccc1);
    border-radius: 6px;
    margin-bottom:2px;
    cursor: pointer;
}
#menu_vertical li li {
    max-height:0;
    overflow: hidden;
    transition: all .5s;
    border-radius:0;
    background: #72a695;
    box-shadow: none;
    border:none;
    margin:0
}
#menu_vertical a {
    display:block;
    text-decoration: none;
    padding: 8px 0;
}
#menu_vertical ul li a, #menu_vertical li:hover li a {
    font-size:1em
}
#menu_vertical li:hover {
    background: #AFDA95;
}
#menu_vertical li li:hover {
    background: #AFDA95;
}
#menu_vertical ul li:last-child {
    border-radius: 0 0 6px 6px;
    border:none;
}
#menu_vertical li:hover li {
    max-height: 15em;
}

/* CLAVIER VIRTUEL */
#pave td {
    cursor:pointer;
    width: 6%;
    text-align: center;
    border-radius: 7px;
    font-family: comic sans ms;
    font-size: 16px;
    border: 2px outset grey;
}
#pave td:hover {
    background-color: dimgrey;

}
#pave td:active {
    background-color: black;
    color:white;
}
#fleche {
    display: inline;
    vertical-align: middle;
    position: absolute;
    border-radius: 7px;
    top:30%;
    overflow: hidden;
    padding-left: 3px;
    background-color: grey;
    font-size: 50px;
    opacity: 0.3;
    transition-property: left,width;
    transition-duration: 0.5s;
}
#touches{
    display: inline-block;
    vertical-align: top;
    position: absolute;
    height: 100%;
    margin-left: 4%;
    width: 0%;
    overflow: hidden;
    background-color: grey;
    transition-property: left,width;
    transition-duration: 0.5s;
}
#pave {
    display: inline-block;
    position: absolute;
    top:60%;
    height: 35%;
    left:98%;
    width:1.7%;
    box-shadow: 2px 2px 2px #AFDA95;
    border-radius: 7px;
    background-color: grey;
    transition-property: left,width;
    transition-duration: 0.5s;
    opacity: 0.9;
}
#monpave {
    padding-left: 5px;
    margin-top: 5%;
    height:72%;
    width:100%;
}
/* CHAT */
#chat {
    display: inline-block;
    vertical-align: bottom;
    width: 26%;
    /*height: 25%;*/
    top:70%;
    position:absolute;
    margin:4px;
    padding: 5px 10px 5px 10px;
    box-shadow: 4px 4px 2px #748aa3;
    border-radius: 7px;
    background-color: #7fb75d;
}
#chat_text {
width:100%;
height:60%;
}
#chat_p{
color:white;
font-size:14px;
}
u{
text-decoration:underline;
}

#profenligne {
    width:60%;
}

#profenligne:hover {
cursor: pointer;
    
}

#bacligne {
display:none;}

.svg {
    display: block;
    margin: auto;
}
sup {
vertical-align:text-top;
    font-size: 8px;
}
.normal {
    font-size: 16px;
}
.exposant {
    font-size: 8px;
}