html, body {
   background-color: #f0f0f0;
   color: #37424a;
   font-family: "Open Sans",sans-serif;
   font-size: 16px;
   height: 100%;
   line-height: 24px;
   min-height: 270px;
}

body > div#application {
   min-height: 100%;
   position: relative;
}
#contenu, .contenu, #entete-app > div, #bas-page-app > div > div {
   margin: 0 auto;
   width: 940px;
}
#contenu {padding-bottom: 15px;}
#contenu > div {position: relative;}

/*** Base ***/
strong {font-weight: bold;}
i, em {font-style: italic;}

.hide { display: none; }

.texte-assistance {
   font-size: 0;
   position: absolute;
   text-indent: -9000px;
}

pre { white-space: pre-wrap; }

/*** Erreur ***/
.message-erreur {
   text-align: center;
   font-size: 18px;
   font-weight: 600;
   color: #999;
}
.erreur-element{
   min-height: 20px;
   color: #999;
}
.erreur-element > p {
   background-image: url('/Content/images/icones/i_attention-erreur.png');
   background-position: left center;
   background-repeat: no-repeat;
   background-size: 14px 14px;
   font-size: 13px;
   line-height: 15px;
   padding-left: 20px;
}


/*** Chargement un instant - loading ***/
.chargement {
   background: url(/Content/images/ajax-loader.gif) center center no-repeat;
   /* Source de l'image : www.chimply.com/Generator#bar,fadingSquares */
   background-size: 75px auto;
   height: 30px;
   text-align: center;
}
.chargement > span { display: none; }


/* == Mobile - Peu importe l'orientation */
@media only screen and (max-width:599px), only screen and (max-device-width : 480px) {
   .message-erreur {font-size: 15px;}

   .chargement {
      background-size: 60px auto;
      height: 20px;
   }

}




/*** Bienvenue ***/
.bienvenue {
   background-color: #fff;
   margin: 0 auto;
   max-width: 400px;
   min-width: 290px;
}
.bienvenue > p {
   font-weight: 600;
   text-align: center;
   font-size: 30px;
   line-height: 34px;
   margin: 20px 10px 40px;
}

/*** Entête application ***/
#entete-app {
   margin-top: 15px;
   position: relative;
   min-height: 24px;
}
#entete-app h1 {display: none;}
#entete-app .ecole {
   font-size: 1.2em;
   min-height: 24px;
   padding-bottom:5px;
}

#entete-app .notifications{
    margin-bottom: 30px;
    margin-top: 30px;
}
#entete-app .notifications.empty{
    margin-bottom: 0;
    margin-top: 0;
}
#entete-app .notifications li{
    border: 2px solid #37424a;
    border-radius: 8px;
    color: #000;
    padding: 8px 25px 8px 15px;
    position: relative;
}
#entete-app .notifications li+li{ margin-top: 10px;}
#entete-app .notifications li pre{ margin-left:32px;}
#entete-app .notifications li pre::before{
    background-image: url(/Content/images/icones/i_bulle-info_37424a.png);
    content: '';
    display: block;
    left:5px;
    height: 32px;
    position: absolute;
    top: 5px;
    width:32px;
}
#entete-app .notifications li button{
    font-size: 0;
    height: 34px;
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
}
#entete-app .notifications li button::before,
#entete-app .notifications li button::after {
    background-color: #000;
    content: '';
    display: block;
    height: 2px;
    position: absolute;
    top:15px;
    right: 10px;
    width: 15px;
}
#entete-app .notifications li button::after{transform: rotate(45deg);}
#entete-app .notifications li button::before{transform: rotate(-45deg);}
#entete-app .notifications li button:hover::before,
#entete-app .notifications li button:hover::after {
    height: 2px;
    right: 8px;
    top:15px;
    width: 19px;
}
/* Couleurs */
#entete-app .notifications li.critical{ border-color: #d52b1e;}
#entete-app .notifications li.critical pre::before { background-image: url(/Content/images/icones/i_avertissement_rouge.png);}
#entete-app .notifications li.warning{ border-color: #fdb813;}
#entete-app .notifications li.warning pre::before { background-image: url(/Content/images/icones/i_avertissement_jaune.png);}


/*** Pied de page ***/
#appPiedPage {
   color: #37424a;
   padding-bottom: 130px;
}
#appPiedPage a {
   text-decoration: none;
   color: #37424a;
   font-size: 0.9em;
   display: inline-block;
   padding-bottom: 15px;
}

#appPiedPage a:hover {
   text-decoration: underline;
}

#appPiedPage > div {
   background-color: #dedede;
   bottom: 90px;
   left: 0;
   padding-bottom: 40px;
   position: absolute;
   width: 100%;
}
@media only screen and (max-width: 499px), only screen and (max-device-width : 480px) and (orientation : portrait) {
   #appPiedPage > div {
      padding-bottom: 20px;
   }
   #appPiedPage {
      padding-bottom: 115px;
   }
}
#appPiedPage .blockInfo {
   height: 0;
   overflow-y: hidden;
   visibility: hidden;
}
#appPiedPage .blockInfo.actif {
   background-color: #f0f0f0;
   border-radius: 8px;
   height: auto;
   margin: 5px 0;
   padding: 5px;
   visibility: visible;
}
#appPiedPage .blockInfo.actif, #appPiedPage .blockInfo.actif a {
   color: #37424a;
}

#appPiedPage .info-ecole > p {
   font-weight: 600;
   margin: 10px 5px 0 5px;
}
#appPiedPage .info-ecole .option {
   line-height: 30px;
   padding-left: 5px;
   vertical-align: top;
}

#appPiedPage .info-ecole .hide {
   display: none;
}

/*** Titre de la page + Sections ***/
.page-title {
   background-color: #787f84;
}
.page-title h2 {
   color: #fff;
   font-size: 1.5em;
   padding: 10px;
}
.page-content section {
   background-color: #fff;
   padding: 12px;
   position: relative;
}

.titre-widget {
   padding-bottom: 15px;
}

/* Pour que les éléments en float soient englobés*/
.page-content section:before,
.page-content section:after {
   display: table;
   content: " ";
}

.page-content section:after { clear: both; }



/*** Avertissement ***/
.avertissement {
   border: 2px solid #fdb813;
   border-radius: 8px;
   color: #000;
   padding: 8px 16px;
   position: relative;
   margin-bottom: 16px;
}

.avertissement .avertissement__message {
   margin-left: 32px;
}

.avertissement .avertissement__message::before {
   background-image: url(/Content/images/icones/i_avertissement_jaune.png);
   content: '';
   display: block;
   left: 5px;
   height: 32px;
   position: absolute;
   top: 5px;
   width: 32px;
}

.avertissement .avertissement__actions {
   text-align: right;
   margin-top: 16px;
}

.avertissement .avertissement__actions > a.avertissement__action {
   color: #0073cf;
   text-decoration: none
}

.avertissement .avertissement__actions > a.avertissement__action:hover {
   color: #47a8f9;
   cursor: pointer;
   text-decoration: underline;
}


/*** Liste ***/
.liste > li { margin-bottom: 5px; }

.liste h3.titre-section {
   color: #fff;
   background-color: #787f84;
   display: block;
   font-size: 18px;
   font-weight: 500;
   height: 50px;
   line-height: 50px;
   margin-bottom: 5px;
   padding-left: 10px;
}

.liste ul.elements > li {
   position: relative;
   margin-bottom:5px;
}

.liste ul.elements > li.nouveau,
.liste ul.elements div.nouveau { border-left: 5px solid #787f84; }

.liste ul.elements .titre-element {
   background-color: #f0f0f0;
   font-weight: 600;
   font-size: 16px;
   padding: 10px;
}

.liste ul.elements .titre-element h4 {
   background-color: #f0f0f0;
   font-weight: 600;
   font-size: 16px;
   padding-left: 10px;
   float:left;
}

.liste ul.elements > li .titre-element {
   color: #787f84;
   height: 32px;
   vertical-align: middle;
}

.liste ul.elements > li .titre-element > img {
   float: left;
}

.liste ul.elements > li a .titre-element {
   text-decoration: underline;
   margin-bottom: 0;
}


.liste ul.elements dl.contenu-element { margin-left: 42px; }

.liste ul.elements dl.contenu-element > dt {
   color: #787f84;
   font-weight: normal;
   min-width: 75px;
   vertical-align: text-top;
}

.liste ul.elements dl.contenu-element > dd {
   font-weight: 600;
   margin-left: 10px;
}

.liste ul.elements dl.contenu-element > dd.texte {
   padding-right: 20px;
   white-space: pre-line;
}

.liste ul.elements li span.libelle {
   color: #787f84;
   font-weight: normal;
   min-width: 75px;
   vertical-align: text-top;
}

.liste ul.elements li span.valeur {
   font-weight: 600;
   margin-left: 10px;
}


ul.liste ul.elements > li > a,
ul.liste ul.elements > li > button {
   display: block;
   padding-bottom: 10px;
   text-decoration: none;
   -moz-transition: background-color 0.2s ease-in;
   -o-transition: background-color 0.2s ease-in;
   -webkit-transition: background-color 0.2s ease-in;
   transition: background-color 0.2s ease-in;
}

ul.liste ul.elements > li > a:hover,
ul.liste ul.elements > li > button:hover {
   background-color: #f0f0f0;
   -moz-transition: background-color 0.2s ease-in;
   -o-transition: background-color 0.2s ease-in;
   -webkit-transition: background-color 0.2s ease-in;
   transition: background-color 0.2s ease-in;
}


/*** Ressources externes (liens et documents) ***/
button.ress-lien,
.ress-lien a,
.ress-document a {
      color:#0073cf;
      font-weight: 600;
      text-decoration: none;
   }

.ress-lien a:visited,
.ress-document a:visited {
   color: #7f329a;
}

button.ress-lien:hover,
.ress-lien a:hover, .ress-lien a:active,
.ress-document a:hover, .ress-document a:active {
      color:#47a8f9;
      text-decoration: underline;
   }

.ress-lien a:before,
.ress-document a:before {
      content: "»\00a0";
}

.ress-document.ress-telechargement a:before, .ress-telechargement a:before {
   content: "\00a0\00a0\00a0";
   background-image: url('/Content/images/telechargement.svg');
   width: 12px;
   height: 12px;
   background-size: 12px 12px;
   background-repeat: no-repeat;
   background-position: center;
}
.ress-document.ress-telechargement a:visited, .ress-telechargement a:before {
   color: #0073cf;
}

.ress-document > p {
   margin-left: 14px;
}

.ress-document .info-document {
   color: #787f84;
   font-size: 11px;
   font-weight: 600;
   line-height: 12px;
}

button.ress-lien:disabled{
   cursor: default;
   text-decoration: none;
   color: #A9A9A9;
}

.ress-document .erreur-document {
   background-image: url('/Content/images/icones/i_attention-erreur.png');
   background-position: left center;
   background-repeat: no-repeat;
   background-size: 14px 14px;
   font-size: 13px;
   padding-left: 20px;
   line-height: normal;
}

@media(min-width:500px) {
   ul.liste ul.elements dl.contenu-element > dt,
   ul.liste ul.elements dl.contenu-element > dd { float: left; }
   ul.liste ul.elements dl.contenu-element > dt { clear: left; }
}

@media(max-width:499px) {
   ul.liste ul.elements dl.contenu-element      { margin-left: 15px; }
   ul.liste ul.elements dl.contenu-element > dt { margin-top: 10px; }
   ul.liste ul.elements dl.contenu-element > dd { margin-left: 0; }
}

/* Couleur */
.corpo ul.liste ul.elements > li.nouveau { border-left-color: #0073cf; }
/* ------- */






/*** Tableau ***/
table.tableau {
   table-layout: fixed;
   width: 100%;
}

table.tableau tr:nth-child(even) { background-color: #f0f0f0; }
table.tableau td, table.tableau th {
   padding: 4px 4px 4px 4px;
   text-align: left;
}

table.tableau td:nth-child(1), table.tableau th:nth-child(1) { width: 30%; }
table.tableau td:nth-child(2), table.tableau th:nth-child(2) { width: 30%; }
table.tableau td:nth-child(3), table.tableau th:nth-child(3) { width: 13%; }
table.tableau td:nth-child(4), table.tableau th:nth-child(4) { width: 12%; }
table.tableau td:nth-child(5), table.tableau th:nth-child(5) { width: 15%; }

table.tableau td:nth-child(3),
table.tableau td:nth-child(4),
table.tableau td:nth-child(5) { text-align: center; }

@media(max-width:939px) {
   table.tableau th { display: none; }

   table.tableau td:nth-child(1),
   table.tableau td:nth-child(2),
   table.tableau td:nth-child(3),
   table.tableau td:nth-child(4),
   table.tableau td:nth-child(5) { width: auto; }

   table.tableau td:nth-child(3),
   table.tableau td:nth-child(4),
   table.tableau td:nth-child(5) { text-align: left; }

   table.tableau td {
      display: block;
      border-bottom: none;
   }

   table.tableau td:not(:nth-child(1)):before {
      content: attr(data-th)":";
      display: inline-block;
      margin-right: 3px;
   }

   table.tableau td:nth-child(1) { font-weight: 700; }
}

/*** Bulletins ***/
#bulletins .liste ul.elements > li {
   margin-top: 10px;
   padding: 10px;
}

.horaire-imprimable > a,
.horaire-imprimable > p {
   font-size: 12px;
   line-height: 12px;
}

/* == Voir plus/moins */
.voir-plus-moins {
   background-color: transparent;
   border: none;
   font-size: 14px;
   font-weight: 600;
   text-align: right;
   width: inherit;
}


.voir-plus-moins::after {
   background-image: url('/Content/images/icones/i_chevron_down.png');
   background-size: 14px 14px;
   background-repeat: no-repeat;
   content: '';
   display: inline-block;
   height: 14px;
   margin-left: 5px;
   -moz-transition: 1s transform ease .1s;
   -o-transition: 1s transform ease .1s;
   -webkit-transition: 1s transform ease .1s;
   transition: 1s transform ease .1s;
   width: 14px;
   margin-bottom: -2px;
}

.voir-plus-moins:not(.voir-plus)::after {
      -webkit-transform: rotate( 180deg );
      transform: rotate( 180deg );
}

.voir-plus-moins.voir-plus > span:nth-child(2) {display: none;}
.voir-plus-moins:not(.voir-plus) > span:nth-child(1) {display: none;}

.voir-plus-moins:hover { text-decoration: underline; }

/* == Bouton fermer (pour fenêtre modale et autres) */
.bouton-fermer {
   background-color: #fff;
   border: 2px solid #37424a;
   border-radius: 50%;
   box-shadow: 2px -1px 2px rgba(0, 0, 0, 0.5);
   height: 30px;
   outline: 0;
   position: absolute;
   right: 0;
   top: 0;
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   width: 30px;
}

.bouton-fermer::before,
.bouton-fermer::after {
   content: '';
   position: absolute;
}

.bouton-fermer::before {
   border-left: 2px solid #37424a;
   height: 18px;
   left: 12px;
   top: 4px;
}

.bouton-fermer::after {
   border-top: 2px solid #37424a;
   left: 4px;
   top: 12px;
   width: 18px;
}

.bouton-fermer:active,
.bouton-fermer:active::before,
.bouton-fermer:active::after,
.bouton-fermer:hover,
.bouton-fermer:hover::before,
.bouton-fermer:hover::after {
   border-color: #787f84;
   color: #787f84;
}

.bouton-fermer:active {
   box-shadow: none;
}

.bouton-fermer > span {
   /* Assistance */
   font-size: 0;
   position: absolute;
   text-indent: -9000px;
}


/* == Message masquable */
.msg-masquable {
   background-color: #fff;
   background-repeat: no-repeat;
   background-position: 7px 10px;
   border: 2px solid #787f84;
   border-radius: 6px;
   color: #787f84;
   font-size: 16px;
   margin: 12px 0 20px 0;
   min-height: 30px;
   max-height: 250px;
   overflow: hidden;
   padding: 10px 30px 5px 10px;
   position: relative;
   -moz-transition: all .2s ease;
   -o-transition: all .2s ease;
   -webkit-transition: all .2s ease;
   transition: all .2s ease;
}

.msg-masquable.reduit {
   min-height: 0;
   max-height: 0;
   border-bottom-width: 0;
   border-top-width: 0;
   padding-bottom: 0;
   padding-top: 0;
   margin-bottom: 0;
   margin-top: 0;
}

.msg-masquable .bouton-fermer {
   border: none;
   box-shadow: none;
   right: -1px;
   top: -1px;
}

.msg-masquable.info {
   background-image: url(/Content/images/icones/i_bulle-info_0073cf.svg);
   background-size: 30px;
   border-color: #0073cf;
   padding-left: 50px;
}


/* == Message masquable - Tablette - Portrait */
@media only screen and (min-width: 600px) and (max-width: 940px),only screen and (max-device-width : 1024px) and (orientation : portrait) {
   .msg-masquable {
      font-size: 15px;
   }

   .msg-masquable.info {
      background-size: 30px;
      padding-left: 50px;
   }
}


/* == Message masquable - Mobile - Peu importe l'orientation */
@media only screen and (max-width:599px), only screen and (max-device-width : 480px) {
   .msg-masquable {
      font-size: 14px;
   }

   .msg-masquable.info {
      background-size: 25px;
      padding-left: 40px;
   }

   .msg-masquable.info:not(.reduit) {
      margin: 12px 0 20px;
   }
}

/* Couleur */
.corpo .voir-plus-moins { color: #0073cf; }
.corpo .voir-plus-moins::after { background-image: url('/Content/images/icones/i_chevron_down_corpo.png'); }
/* end Couleur */


/*** Directive résultat ***/
.resultat[data-reussite="false"] > .note {
   color: #d52b1e;
}

.resultat[data-reussite="true"] > .note {
   color: #0073cf;
}

/*** End Directive résultat***/

/* Couleur fonctionnalités*/
.devoirs-lecons                                    { background-color: #0099ff; }
.devoirs-lecons:hover                              { background-color: #66c2ff; }
.devoirs-lecons .devoirs-lecons-footer             { background-color: #0073bf; }
.devoirs-lecons:hover .devoirs-lecons-footer       { background-color: #0099ff; }

.finances                                          { background-color: #34b233; }
.finances:hover                                    { background-color: #71cd65; }
.finances .finances-footer                         { background-color: #278626; }
.finances:hover .finances-footer                   { background-color: #34b233; }

.memos                                             { background-color: #7f329a; }
.memos:hover                                       { background-color: #a44dc4; }
.memos .memos-footer                               { background-color: #5f2674; }
.memos:hover .memos-footer                         { background-color: #7f329a; }

/*.resultats                                         { background-color: #0073cf; }
.resultats:hover                                   { background-color: #47a8f9; }
.resultats .resultats-footer                       { background-color: #00569b; }
.resultats:hover .resultats-footer                 { background-color: #0073cf; }*/

.absences                                          { background-color: #ff6319; }
.absences:hover                                    { background-color: #ff8600; }
.absences .absences-footer                         { background-color: #bf4a13; }
.absences:hover .absences-footer                   { background-color: #ff6319; }

.alertes                                           { background-color: #d52b1e; }
.alertes:hover                                     { background-color: #fc4e31; }
.alertes .alertes-footer                           { background-color: #a02017; }
.alertes:hover .alertes-footer                     { background-color: #d52b1e; }

.messages                                          { background-color: #37424a; }
.messages:hover                                    { background-color: #5f686e; }
.messages .messages-footer                         { background-color: #293238; }
.messages:hover .messages-footer                   { background-color: #37424a; }

/*** Tag Maquette ***/
.tag-maquette{
  position: absolute;
  right: 0;
  top: 0;
}

.tag-maquette .ruban{
  height: 75px;
  overflow: hidden;
  position: absolute;
  right: -5px;
  text-align: right;
  top: -5px;
  width: 75px;
  z-index: 5;
}

.tag-maquette .ruban .titre {
   background: linear-gradient(#D52B1E 0, #a02017 100%);
   box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
   color: #FFF;
   display: block;
   font-size: 10px;
   font-weight: bold;
   line-height: 20px;
   position: absolute;
   right: -21px;
   text-transform: uppercase;
   text-align: center;
   top: 19px;
   width: 100px;
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}

.tag-maquette .ruban .titre::before {
  border-bottom: 3px solid transparent;
  border-left: 3px solid #a02017;
  border-right: 3px solid transparent;
  border-top: 3px solid #a02017;
  content: "";
  left: 0;
  position: absolute;
  top: 100%;
  z-index: -1;
}

.tag-maquette .ruban .titre::after {
  border-bottom: 3px solid transparent;
  border-left: 3px solid transparent;
  border-right: 3px solid #a02017;
  border-top: 3px solid #a02017;
  content: "";
  position: absolute;
  right: 0;
  top: 100%;
  z-index: -1;
}

.tag-maquette .details {
   background-color: #a5a5a5;
   box-shadow: -2px 4px 10px -5px rgba(0, 0, 0, 1);
   height: 50px;
   margin-top: 5px;
   max-width: 0;
   overflow: hidden;
   position:relative;
   z-index:4;
   -moz-transition: .5s max-width .2s ease-out;
   -o-transition: .5s max-width .2s ease-out;
   -webkit-transition: .5s max-width .2s ease-out;
   transition: .5s max-width .2s ease-out;
}

.tag-maquette:hover .details {
   max-width: 2000px;
   -moz-transition: 1s max-width .1s ease-in;
   -o-transition: 1s max-width .1s ease-in;
   -webkit-transition: 1s max-width .1s ease-in;
   transition: 1s max-width .1s ease-in;
}

.tag-maquette .details p{
   color: #fff;
   font-size: 12px;
   font-weight: 600;
   height: 100%;
   line-height: 15px;
   padding: 2px 50px 5px 5px;
   width: 225px;
}

/* Ripple effect */
[mp-ripple-effect], [mp-ripple-effect=""],[data-mp-ripple-effect], [data-mp-ripple-effect=""]{
   overflow: hidden;
   position:relative;
}

.ripple {
   background: #fff;
   position: absolute;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   -moz-animation: ripple-animation 2s;
   -o-animation: ripple-animation 2s;
   -webkit-animation: ripple-animation 2s;
   animation: ripple-animation 2s;
}

@-moz-keyframes ripple-animation {
    from {
      -moz-transform:  scale(1);
      -ms-transform:  scale(1);
      -o-transform:  scale(1);
      -webkit-transform:  scale(1);
      transform: scale(1);
      opacity: 0.4;
    }
    to {
      -moz-transform:  scale(20);
      -ms-transform:  scale(20);
      -o-transform:  scale(20);
      -webkit-transform:  scale(20);
      transform: scale(20);
      opacity: 0;
    }
}

@-webkit-keyframes ripple-animation {
    from {
      -moz-transform:  scale(1);
      -ms-transform:  scale(1);
      -o-transform:  scale(1);
      -webkit-transform:  scale(1);
      transform: scale(1);
      opacity: 0.4;
    }
    to {
      -moz-transform:  scale(20);
      -ms-transform:  scale(20);
      -o-transform:  scale(20);
      -webkit-transform:  scale(20);
      transform: scale(20);
      opacity: 0;
    }
}

@keyframes ripple-animation {
    from {
      -moz-transform:  scale(1);
      -ms-transform:  scale(1);
      -o-transform:  scale(1);
      -webkit-transform:  scale(1);
      transform: scale(1);
      opacity: 0.4;
    }
    to {
      -moz-transform:  scale(20);
      -ms-transform:  scale(20);
      -o-transform:  scale(20);
      -webkit-transform:  scale(20);
      transform: scale(20);
      opacity: 0;
    }
}

/* Autre */
span.clear-both {
   display: block;
   clear: both;
}

.extra::before {
   background-color: #f0f0f0;
   content: "\00a0";
   display: block;
   height: 15px;
   left: 20px;
   position: absolute;
   top: -8px;
   -moz-transform: rotate( -45deg );
   -ms-transform: rotate( -45deg );
   -o-transform: rotate( -45deg );
   -webkit-transform: rotate( -45deg );
   transform: rotate( -45deg );
   width: 15px;
}


/* Cacher le lien vers la maquette résultats*/
.lien-maquette-resultats {
   display: none !important;
}