ode-csslib 1.0.0-dev-produit.202209220950

package/scss/specifics/competences/components/_competences.scss

@@ -0,0 +1,3761 @@
+/*!
+ * Copyright (c) Région Hauts-de-France, Département de la Seine-et-Marne, CGI, 2016.
+ *     This file is part of OPEN ENT NG. OPEN ENT NG is a versatile ENT Project based on the JVM and ENT Core Project.
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU Affero General Public License as
+ *   published by the Free Software Foundation (version 3 of the License).
+ *   For the sake of explanation, any module that communicate over native
+ *   Web protocols, such as HTTP, with OPEN ENT NG is outside the scope of this
+ *   license and could be license under its own terms. This is merely considered
+ *   normal use of OPEN ENT NG, and does not fall under the heading of "covered work".
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ */
+
+/* Color Variables */
+$eval-lighter-grey: #f4f3f3;
+
+body.evaluations {
+  .select:not(button) {
+    select{
+      margin: 0;
+    }
+  }
+  .forceTop:before {
+    content: none !important;
+  }
+  .twentyFontSize {
+    font-size: 20px !important;
+  }
+  .bottomInfo{
+    padding-bottom: 25px;
+  }
+  .allIgnored{
+    transform: rotate(-90deg);
+    position: relative;
+    display: inline-block;
+  }
+  i.allIgnored.users:before {
+    color: $red;
+  }
+  i.ignored.users:before{
+    color: green !important;
+  }
+
+  .whiteSpaceNormalBox {
+    white-space: normal !important;
+    text-overflow: unset;
+    overflow: unset;
+    height: auto !important;
+  }
+
+  .changedAverage {
+    color: $red;
+  }
+  .overFlowAuto {
+    overflow: auto;
+  }
+  .periodeWidgetAccueil {
+    min-height: 47px;
+  }
+  .all.selected {
+    background: grey !important;
+  }
+
+  .height-fit-content{
+    height: fit-content;
+  }
+
+  .all {
+    background: $orange;
+  }
+  .selectable-list li:hover {
+    background: $white;
+    color: $orange;
+    border-bottom-color: grey;
+  }
+  .selectable-list li.selected:hover {
+    background: $orange !important;
+    color: $white !important;
+    border-bottom-color: grey;
+  }
+  nav.vertical.floating.hash-magnet {
+    padding-top: 0px;
+    width: 100%;
+  }
+  nav.vertical.floating .content {
+    border: none;
+  }
+  c-skills-color-page c-skills-bubble > span.rounded {
+    border: none;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.4);
+  }
+  c-skill-note-devoir > .rounded {
+    width: 20px !important;
+    height: 20px !important;
+  }
+  .tuto-saisie {
+    margin-top: 0px;
+    margin-right: 5px;
+    margin-left: 5px;
+    margin-bottom: 10px;
+  }
+  .FloatRight{
+    float: right;
+  }
+  .tuto-legend{
+    display: inline;
+    list-style-type: none;
+    padding-left: 0px;
+  }
+  .tuto-legend > li {
+    display: inline;
+    padding: 5px;
+  }
+  -webkit-font-smoothing:antialiased !important;
+  /* tooltip sur l'écran de saisie des notes */
+  .skills-color-page > li > span.tooltip-overlay {
+    width: 22px !important;
+    height: 34px !important;
+    z-index: 100 !important;
+  }
+  .alignVertical > span.lettreNiv {
+    vertical-align: middle !important;
+  }
+
+  /* Classes pour le choix du mode couleur de compétence */
+  #volet {
+    width: 250px;
+    padding: 10px;
+    background: rgb(75, 175, 213); color: #fff;
+  }
+
+  #volet a.ouvrir,
+  #volet a.fermer {
+    padding: 6px;
+    background: rgb(255, 133, 0);
+    color: #fff;
+    text-decoration: none;
+  }
+
+  #volet {
+    position: absolute;
+    right: -270px;  /* test fixed + scroll, on retire la position top */
+    -webkit-transition: all .5s ease-in;
+    -moz-transition: all .5s ease-in;
+    transition: all .5s ease-in;
+    -webkit-text-fill-color: #fff;
+  }
+  #volet a.ouvrir,
+  #volet a.fermer {
+    position: absolute;
+    left: -44px;
+    top: 0px;
+    height : 30px;
+    width: 30px;
+    -webkit-transform: rotate(270deg);
+    -moz-transform: rotate(270deg);
+    -o-transform: rotate(270deg);
+    -ms-transform: rotate(270deg);
+    -moz-radius:  50% 50% 0 0;
+    border-radius: 50% 50% 0 0;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.26)
+  }
+  .close a.fermer {
+    display: none;
+  }
+  .opened #volet {
+    right: 10px;
+  }
+
+  /* code pour la fermeture */
+
+  .opened a.fermer {
+    display: block;
+  }
+  .opened a.ouvrir {
+    display: none;
+  }
+  .closed #volet {
+    right: -270px;
+  }
+
+  /* test fixed + scroll */
+  #volet_clos {
+    position: fixed;
+    top: 170px; right: 0;
+    z-index: 4;
+  }
+
+
+  span.rounded.textColorPage {
+    position: absolute;
+    z-index: 10;
+    top: 0px;
+    text-align: center;
+    font-size: 70%;
+    left: 11px;
+
+    > span.lettreNiv.ng-binding {
+      bottom: 0px;
+      top: 0px;
+    }
+  }
+  .lettreNiv {
+    position: relative;
+    font-size: 10.5px;
+    vertical-align: top;
+    bottom: 1px;
+    font-family: Helvetica Neue;
+  }
+  &.evaluations {
+    .datepicker{
+      z-index: 120000 !important;
+    }
+  }
+  canvas.chart.chart-bar {
+    cursor: pointer;
+  }
+  @media screen and (max-width:  $small-mobile){
+    .input-moyenne {
+      float:none;
+      font-weight: bold;
+      display: inline-block;
+      text-align : center !important;
+    }
+  }
+  .evalLibre{
+    height: 800px;
+  }
+  select.padding-select-accueil {
+    padding-right: 30px !important;
+  }
+
+  @media screen and (max-device-width:$fat-mobile) {
+    .responsive-table table thead {
+      display: none !important;
+    }
+    input[type=text], input[type=password], input[type=search], input[type=tel], input[type=email] {
+      text-align: center !important;
+    }
+
+    .suiviDesAcquis{
+      .selectable-list li{
+        float: none;
+        display: inline;
+      }
+    }
+  }
+
+  .maitrise-bfc {
+    font-weight: normal;
+    font-style: italic;
+    float: left;
+    padding-left: 5px;
+  }
+
+  .domaine-maitrise{
+    padding-top: 5px;
+  }
+
+  .legende-bfc-left {
+    width: 20%!important;
+  }
+
+  .legende-bfc-right {
+    width: 65%;
+    .conversion-libelle{
+      font-weight: 400;
+      max-width: 100%;
+      width: 100%
+    }
+  }
+
+  i.withoutPointer::before {
+    cursor: unset !important;
+  }
+
+  //    Suivi élève : Vue Liste    //
+
+  table thead tr, ul.list-view thead tr {
+    color: $white !important;
+  }
+
+  //    Vue cycle : change couleur du libellé de la vue liste    //
+
+  .enseignantCycle {
+    width: 0%;
+  }
+
+  .disabled{
+    opacity: 0.45;
+  }
+
+  @media screen and (min-device-width:$tablette ) {
+    .enLargedLightBox div.content {
+      width: 80% !important;
+    }
+    .menuLeft {
+      position: fixed !important;
+      width: 16% !important;
+      top: 140px;
+      left: 0;
+      padding: 0 0 0 35px;
+      background: $lightest-grey;
+      z-index: 1;
+      height: 100%;
+    }
+    .custom-mobile-releve{
+      display: none;
+    }
+    .list-devoirs table tbody tr {
+      height: 35px;
+      color: $cyan;
+    }
+    .testAlignLeft {
+      text-align: left !important;
+    }
+  }
+
+  .pannel-in-cell {
+    margin: 10px;
+    padding: 15px;
+    background: #fff;
+    @include box-shadow(rgba(0,0,0,0.26) 0 1px 3px);
+  }
+
+
+  th{
+    &.colDevoir {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      text-align: center !important;
+    }
+  }
+
+  @media screen and (max-device-width: 1350px ) {
+    input.input-list {
+      max-width: 49% !important;
+    }
+    input.input-list.error {
+      max-width: 41% !important;
+    }
+  }
+
+  @media screen and (min-device-width: $tablette ) {
+
+    .overflowXScroll {
+      overflow-x: scroll !important;
+    }
+
+    .marginTopZero {
+      margin-top: 0px;
+    }
+
+    .nav-releve {
+      margin-top: -50px;
+    }
+    .toogleDevoir{
+      align-content: right !important;
+      display: inline-block;
+      float: right;
+      margin-right: -5px;
+      margin-top:  10px;
+    }
+    .toogleIcon{
+      transform: rotate(90deg);
+      position: relative;
+    }
+    .toogleIcon:before{
+      color: $white !important;
+    }
+    .tableReleves {
+      overflow-x: auto;
+      overflow-y: hidden;
+      margin-left: 5px;
+      margin-top: 5px;
+      .responsive-table {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        border:none;
+        border-bottom: 1px solid #ccc
+      }
+      .tableReleveStats {
+        box-shadow: 0 0 0px 0 grey !important;
+      }
+    }
+
+    .tableReleveEleve {
+      box-shadow: 0 0 1px 0 grey;
+      tbody {
+        tr {
+          &:nth-child(2n) {
+            background-color: rgba(0, 0, 0, 0.05);
+          }
+          &:hover {
+            background-color: rgba(0, 0, 0, 0.15);
+          }
+          td {
+            border-left: solid 1px #e0d8d8;
+          }
+          .col1ReleveEleve {
+            line-height: 1px;
+            color: black !important;
+            ul {
+              -webkit-margin-after: 0px !important;
+            }
+          }
+        }
+      }
+    }
+
+    .tableReleve {
+      tr{
+        display: flex !important;
+        td {
+          border-left: solid 1px #e0d8d8;
+        }
+        td.colMoyenne {
+          border-right: solid 1px #e0d8d8;
+        }
+      }
+      th.devoir-with-comp {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .colDevoir {
+        width: 100px !important;
+      }
+      .colMoyenne {
+        text-align: center !important;
+      }
+      .input-note {
+        text-align: center;
+        margin: 0 auto !important;
+        width: 5em;
+      }
+
+      tbody {
+        display: block;
+        tr {
+          height: 25px;
+        }
+      }
+
+      thead {
+        th{
+          height: 15px;
+        }
+      }
+    }
+
+    input.input-list {
+      margin: 0 auto !important;
+      float: left;
+      max-height: 25px;
+      text-align: left;
+      display: block;
+      padding: 0;
+      margin: 0 auto;
+      max-width: 64%;
+    }
+    i.input-list {
+      padding-left: 5px;
+      float: right;
+      padding-right: 5px;
+      background: #cfd2cf;
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+      margin-top: 0px;
+      max-height: 25px;
+      max-width: 30%;
+      height: 25px;
+    }
+    ul.input-list{
+      padding-top: 0px;
+      padding-left: 0px;
+      margin-top: 1px;
+      margin-bottom: 1px;
+    }
+    li.input-list{
+      list-style-type: none;
+      background: #0499e2;
+      color: white;
+      padding: 2px 9px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .col1 {
+      width: 200px !important;
+
+    }.colMoyenne {
+       width: 100px !important;
+       text-align: center !important;
+     }
+  }
+  .moyenneClasse {
+    color: $primary-dark;
+    font-weight: bold;
+  }
+  .minClasse {
+    color: $red;
+    font-weight: bold;
+  }
+  .maxClasse {
+    color: $green;
+    font-weight: bold;
+  }
+  .display-check{
+    height: 24px;
+    text-align: center;
+  }
+  .statClasse {
+    box-shadow: 0 0 1px 0 grey;
+    tbody{
+      tr{
+        &:nth-child(2n){
+          background-color: rgba(0, 0, 0,0.05);
+        }
+        &:hover{
+          background-color: rgba(0, 0, 0,0.15);
+        }
+      }
+    }
+  }
+
+  .checkbox-domaine{
+    background-color: #4bafd5;
+    margin-left: 6px !important;
+  }
+
+  .tableReleve {
+    box-shadow: 0 0 1px 0 grey;
+    tbody{
+      tr{
+        &:nth-child(2n){
+          background-color: rgba(0, 0, 0,0.05);
+        }
+        &:hover{
+          background-color: rgba(0, 0, 0,0.15);
+        }
+      }
+    }
+    thead{
+      a{
+        color: $white;
+      }
+    }
+  }
+  .ligneReleve{
+    &.visible{
+      &:nth-child(2n){
+        background-color: rgba(0,0,0,0.05);
+      }
+    }
+  }
+  .tableRelevePadding{
+    > tbody{
+      > tr{
+        > td{
+          padding: 0px 10px !important;
+          input[type="text"]{
+            width: 5em;
+            text-align: center;
+          }
+        }
+      }
+    }
+    .widthMax{
+      width: 66% !important;
+      input[type="text"]{
+        width: 100% !important;
+      }
+    }
+  }
+
+  @media screen and (max-device-width:$small-mobile) {
+    .tableRelevePadding tbody tr td {
+      padding: 10px !important;
+    }
+  }
+
+  @media screen and (max-device-width:$fat-mobile) {
+    .tableRelevePadding tbody tr td {
+      padding: 10px !important;
+    }
+  }
+
+  .download-link{
+    margin-bottom: 20px;
+  }
+
+  .input-note{
+    text-align: right;
+    display: block;
+    padding: 0;
+    margin: 0 auto;
+  }
+  input[type=text]{
+    &.input-note, &.input-appreciation{
+      border-bottom: 1px solid rgb(75, 175, 213) !important;
+      margin-bottom: 0 !important;
+      padding: 0;
+      &:focus {
+        border-bottom: 2px solid $orange !important;
+      }
+    }
+  }
+
+  .addMargin {
+    margin-left: 6px;
+  }
+
+  .textarea-appreciation {
+    margin-top: 5px;
+    background: transparent;
+    padding: 0px;
+    border: none;
+    width: 100%;
+    height: 18px;
+    resize: none;
+    overflow: hidden;
+  }
+
+  .textarea-appreciation:focus {
+    position: relative;
+    z-index: 1;
+    height: 10.5vh;
+    background: #ffffff;
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.35);
+  }
+
+  .colMoyenne.size {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  @media screen and (max-device-width:$small-mobile) {
+    .colMoyenne.size {
+      display: block;
+    }
+  }
+
+  @media screen and (max-device-width:$fat-mobile) {
+    .colMoyenne.size {
+      display: block;
+    }
+  }
+
+  input.input-list.error {
+    max-height: 22px;
+    max-width: 58%;
+  }
+
+  input[type=text]{
+    &.input-list{
+      border-bottom: 1px solid rgb(75, 175, 213) !important;
+      margin-bottom: 0 !important;
+      padding: 0;
+      float: none;
+      &:focus {
+        border-bottom: 2px solid $orange !important;
+      }
+    }
+  }
+
+  .input-moyenne{
+    font-weight: bold;
+    width: 60%;
+    display: block;
+    margin: 0 auto;
+  }
+  .menuLeftStyle {
+    padding: 8px;
+    border-radius: 5px;
+    margin: 5px 5px 10px 5px;
+  }
+  .headerStyle {
+    padding: 8px;
+    margin-bottom: 30px;
+    background: $white;
+    border-radius: 5px;
+  }
+  .paddingHeight {
+    padding: 8px;
+  }
+  .expandable{
+    &:nth-child(2n){
+      background-color: rgba(0,0,0,0.05);
+    }
+    &.opened{
+      .plus-input{
+        @include fonticon;
+        &::after{
+          content: "\e85e";
+        }
+      }
+    }
+    &.cell{
+      &:hover{
+        background-color: rgba(0,0,0,0.05);
+      }
+    }
+  }
+  .devoir-header{
+    &::after{
+      content: none !important;
+      clear: none !important;
+    }
+    .cell{
+      border-left: solid 1px rgba(0, 0, 0, 0.3);
+      border-bottom: solid 1px rgba(0, 0, 0, 0.2);
+      color: rgba(0,0,0,0.6);
+      overflow: hidden;
+      &:first-child{
+        border-left: none;
+      }
+    }
+  }
+
+  .header-grade-disable {
+    color: rgba(0, 0, 0, 0.2);
+  }
+
+  .grade-disable {
+    cursor: not-allowed;
+    background: rgba(0, 0, 0, 0.2);
+
+    > input {
+      cursor: not-allowed;
+      border:0px !important;
+      margin:0px !important;
+      background: none !important;
+      height:1em;
+    }
+  }
+  .row{
+    input:not(input[type="button"]){
+      height: 20px !important;
+      margin-bottom: 2px !important;
+    }
+    .devoirs-header{
+      display: block;
+      background-color: $white;
+      height: 90px !important;
+      padding: 12px 5px;
+      box-sizing: border-box;
+      vertical-align: middle;
+      @include transition(all 200ms ease);
+      border-bottom: solid 1px $light-grey;
+
+      &.card {
+        background-color: $white;
+      }
+
+      .visiApprec {
+        text-indent: 0;
+        width: 30px;
+        margin: 0 10px;
+        text-align: center;
+        position: relative;
+
+        &.alone > i {
+          font-size: 30px !important;
+        }
+
+        span {
+          display: block;
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+        }
+
+        i {
+          width: 100%;
+          font-size: 20px;
+
+          &.eye-open {
+            color: $cyan;
+          }
+        }
+      }
+    }
+
+    .appreciation-classe{
+      padding-top: 5px;
+    }
+
+    .padding-table-elements{
+      padding: 10px 20px;
+    }
+
+    .elements-header{
+      display: block;
+      background-color: $white;
+      margin-top: 1%;
+      height: 45px !important;
+      padding: 12px 5px;
+      box-sizing: border-box;
+      vertical-align: middle;
+      @include transition(all 200ms ease);
+      border-bottom: solid 1px $light-grey;
+
+      &.card {
+        background-color: $white;
+      }
+    }
+  }
+  .indent-five{
+    text-indent: 5px;
+  }
+  .indent-fifteen{
+    text-indent: 15px;
+  }
+  .coche-case{
+    padding:5px 0 0 10px;
+    box-sizing:border-box;
+  }
+  .expandable-liste{
+    .expandable{
+      border-bottom: solid 1px rgba(0,0,0,0.2);
+      @include transition(all 100ms ease-out);
+      height: 35px;
+      overflow: hidden;
+      padding: 5px;
+      box-sizing: border-box;
+
+      &.opened{
+        height: auto;
+        z-index: 1;
+        transform: scale(1.005);
+        .row{
+          &:first-child{
+            border-bottom: solid 1px rgba(0,0,0,0.2);
+          }
+          &:nth-child(2){
+            color: $text-light;
+            text-indent: 40px;
+          }
+        }
+      }
+      &:first-child{
+        //margin-top:15px;
+      }
+    }
+
+    &.notes-devoir-liste{
+      .expandable{
+        height: auto;
+      }
+    }
+    .expandable-content{
+      padding: 0 4px 0 4px;
+      font-size: 14px;
+      > label{
+        margin-top: 2px;
+        display: block;
+      }
+    }
+    .expandable-name{
+      padding: 2px 10px 0px 6px;
+      font-size: 13px;
+    }
+  }
+
+  .expandable-appreciation {
+    border-bottom: solid 1px rgba(0,0,0,0.2);
+    transition: all 100ms ease-out;
+    height: 30px;
+    overflow: hidden;
+    padding: 2px;
+    box-sizing: border-box;
+  }
+
+  @media screen and (max-width: $tablette) {
+    .expandable-liste{
+      .expandable-content{
+        padding: 0;
+      }
+    }
+
+    body .two-mobile {
+      padding-left: 8px;
+    }
+
+    .headerStyle {
+      margin-bottom: 0;
+    }
+
+    .nav-devoirs button {
+      position: inherit !important;
+      bottom: 12px !important;
+      right: 0 !important;
+      margin: 0 !important;
+    }
+
+    button.microbox {
+      float: none;
+      width: 100%;
+    }
+
+    .microbox-content {
+      margin: 5px auto;
+      padding: 5px;
+
+      .criterion {
+        padding: 5px;
+        margin:0;
+
+        &.card {
+          box-shadow: none;
+        }
+      }
+    }
+
+    input[type=text], input[type=password], input[type=search], input[type=tel], input[type=email] {
+      margin-bottom: 2px;
+    }
+
+    button.microbox-close {
+      float: none;
+      width: 100%;
+    }
+
+    .microbox-content .microbox-material {
+      padding-bottom: 5px;
+    }
+  }
+
+  .openedEleve {
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.35);
+    padding: 10px;
+    z-index: 1;
+    transform: scaleY(1.005);
+    background: white;
+  }
+
+  .devoir .row:nth-child(3){
+    color: $text-light;
+    text-indent: 40px;
+  }
+  .col1ReleveEleve {
+    width: 300px;
+    vertical-align: top;
+    border-right: 1px solid $medium-grey;
+  }
+  .colMoyenneReleveEleve {
+    width: 100px;
+    border-left: 1px solid $medium-grey;
+  }
+  .noteDevoir {
+    padding: 5px;
+    background-color: $cyan;
+    margin: 5px;
+    border-radius: 5px;
+    color: $white;
+    position: relative;
+    width: auto;
+    min-height: 50px;
+    min-width: 70px;
+    white-space: nowrap;
+  }
+  .gradetooltip{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    left: 0;
+    top: 0;
+  }
+
+  .tooltip{
+    .content{
+      >	p{
+        margin: 0;
+        padding: 0;
+      }
+    }
+  }
+  .noteMoyenne {
+    color: $primary-dark;
+  }
+  .alignCenterVertically {
+    display: flex;
+    justify-content: center; /* align horizontal */
+    align-items: center; /* align vertical */
+  }
+  .notesDevoir {
+    display: inline-flex;
+    height: 100%;
+  }
+  .moyenneGenerale {
+    padding: 5px;
+  }
+  .nomEnseignant {
+    text-transform: capitalize;
+    font-style: italic;
+    font-weight: lighter;
+  }
+  .alignMatiere {
+    padding-top: 3px;
+    display: block;
+    font-weight: 500;
+  }
+  .ligneReleve {
+    height: 4.5em;
+  }
+  .center {
+    text-align: center !important;
+  }
+  .buttonHeader{
+    .button{
+      margin-left: 15px !important;
+      margin-bottom: 15px !important;
+      &:first-child{
+        margin-left: 0px !important;
+      }
+    }
+  }
+  .shadow{
+    @include box-shadow(0px 0px 5px 0px rgba(0,0,0,0.35));
+  }
+  .criteres{
+    &.opened{
+      height: 205px;
+    }
+    &.openedProgramme{
+      height: auto;
+      .plus-input::after {
+        content: "\e841";
+      }
+    }
+    &.openedAppreciation{
+      height: 300px;
+      .plus-input::after {
+        content: "\e841";
+      }
+    }
+    &.openedAvis {
+      height: auto;
+      .plus-input::after {
+        content: "\e841";
+      }
+    }
+  }
+
+  .appreciationTextarea{
+    height: 220px;
+  }
+
+  .criteres, .statistiques-devoir, .detail-devoir, .student-info, .devoir-info, .notes-help {
+    position: relative;
+    .plus-input{
+      right: 5px;
+      position: absolute;
+      top: 11px;
+      z-index: 11;
+      @include fonticon;
+      &::after{
+        content: "\e87b";
+        font-size: 15px;
+        color: $grey;
+        font-weight: 300;
+        opacity: 0.8;
+        cursor: pointer;
+        border: none;
+        background-color: inherit;
+        font-size: 10px;
+      }
+      &:hover::after{
+        color: $cyan;
+      }
+    }
+
+    &.opened {
+      .plus-input::after{
+        content: "\e841";
+      }
+    }
+  }
+  .criteres, .statistiques-devoir, .detail-devoir, .devoir-info {
+    height: 25px;
+    overflow: hidden;
+    @include transition(all 100ms ease-out);
+  }
+  .fiche{
+    margin-top: 10px;
+    border-radius: 5px;
+    font-size: 14px !important;
+    background-color: $white;
+    position: relative;
+    &.student-info, &.devoir-info, &.notes-help, &.diffsize{
+      height: 40px;
+      overflow: hidden;
+      @include transition(all 100ms ease-out);
+      &.opened{
+        min-height: 100px;
+        height: auto;
+      }
+    }
+    &.student-info{
+      h2{
+        color: $grey;
+        line-height: 37px;
+      }
+    }
+    &.diffpadding {
+      padding: 0;
+    }
+    ul{
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+    }
+    > div{
+      padding: 0 10px 5px 10px;
+    }
+    .head{
+      padding: 3px;
+      text-align: left;
+      margin: 0;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      color: #fff;
+      text-indent: 7px;
+      color: $cyan;
+      width: 80%;
+    }
+  }
+  .datepicker{
+    z-index:10002 !important;
+    table {
+      line-height: 24px !important;
+    }
+  }
+  h1, h2, h3, h4, h5{
+    > span{
+      font-style: italic;
+    }
+  }
+
+  .card-projet {
+    margin: 5px;
+  }
+
+  //      --- LEFT SIDE (parents-enfants) ---   //
+
+  //    -- Choix critère (cycle) --   //
+
+  .inputContainer {
+    display: flex;
+    i{
+      margin-left : 10px
+    }
+  }
+
+  .inputSection1{
+    width: 50%;
+    border-right: 1px solid lightgrey;
+  }
+
+  .inputSection2{
+    width: 50%;
+  }
+
+  #inputMargin {
+    margin: 14px;
+  }
+
+  .header-opt{
+    font-style: italic;
+    font-weight: bold !important;
+  }
+  .controls-fixed{
+    background-color:rgba(0, 0, 0, 0.1);
+    bottom:0;
+    left:0;
+    padding:10px 15px;
+    position:fixed;
+    top:auto;
+    width:100%;
+  }
+  .imgEleve{
+    width: 100%;
+    height: auto;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    img{
+      width: 40%;
+    }
+  }
+  .close-input{
+    right: 18px;
+    position: absolute;
+    top: 5px;
+    @include fonticon;
+    &::after{
+      content: '\e866';
+      font-size: 15px;
+      color: $grey;
+      font-weight: 300;
+      opacity: 0.8;
+      cursor: pointer;
+      border: none;
+      background-color: inherit;
+    }
+    &:hover::after{
+      color: $cyan;
+    }
+  }
+  .header-fixed{
+    position: fixed;
+    top: 64px;
+    width: 100%;
+    background: $lightest-grey;
+    height: 95px;
+    padding: 0;
+    line-height: 88px;
+    z-index: 2;
+    text-indent: 4px;
+    margin-left: 15px;
+  }
+  .absolute-button-header-releve{
+    position: absolute !important;
+    right: 1%;
+    top: 34px;
+  }
+  .header-outter-fixed{
+    padding: 74px 0 0 0;
+    position: relative;
+    display: block;
+  }
+  .detail-devoir{
+    &.opened{
+      min-height: 100px;
+      height: auto;
+    }
+  }
+  .statistiques-devoir{
+    &.opened{
+      height: auto !important;
+      max-height: 152px;
+    }
+  }
+  .children-list{
+    text-align: center;
+    .dominos{
+      margin-bottom: 0px !important;
+      text-align: center;
+      .item{
+        float: none !important;
+        display: inline-block;
+        cursor: pointer;
+      }
+    }
+  }
+  .lightbox-parent{
+    section{
+      &.ligtbox{
+        > div{
+          &.content{
+            width: 400px;
+          }
+        }
+      }
+    }
+  }
+  .print-i {
+    font-size: 1.5em;
+    padding: 6px 8px;
+    display: inline-block;
+    position: relative;
+    margin: 5px 0;
+    >i.download:before{
+      margin-right: 9px !important;
+      font-size: 20px !important;
+    }
+  }
+  .button-download{
+    margin-left: 20px;
+    top: 0px;
+    position: relative;
+    float: right;
+  }
+  .ul-competences{
+    list-style-type: none;
+    li{
+      padding: 5px;
+    }
+  }
+  .ul-domaines{
+    margin-top: 20px;
+  }
+  /**
+      DIRECTIVE COLOR COMPETENCE
+  **/
+  .green{background-color: $green !important;}
+  .yellow{background-color: $yellow !important;}
+  .orange{background-color: $orange !important;}
+  .red{background-color: $red !important;}
+  .grey{background-color: $grey !important;}
+
+  .competence-color{
+    display: inline-block;
+    padding: 15px 0px 10px 35px;
+    position: relative;
+    overflow: hidden;
+    min-width: 165px;
+    width: auto;
+    max-width: 1000px;
+    white-space: nowrap;
+    text-indent: 0;
+    border: solid 1px rgba(0, 0, 0, 0);
+    @include transition(all 200ms ease);
+    background-color: transparent !important;
+    float: left;
+    &:hover{
+      border: solid 1px rgba(0, 0, 0, 0.3);
+    }
+    &.opened{
+      > .skills-text-overflow{
+        &::before{
+          content: "\f0d7";
+        }
+      }
+    }
+    > .skills-text-overflow{
+      @include fonticon;
+      &::before{
+        content: "\e823";
+        /*left: 0px;*/
+        /*position: absolute;*/
+        @include transition(all 200ms ease);
+        position: absolute;
+        left: 10px;
+        top: 15px;
+      }
+    }
+  }
+  .competence-color-header{
+    display: inline-block;
+    padding: 10px 50px 10px 0px;
+    position: relative;
+    overflow: hidden;
+    width: auto;
+    max-width: 320px;
+    white-space: nowrap;
+    text-indent: 0;
+    border: solid 1px rgba(0, 0, 0, 0);
+    @include transition(all 200ms ease);
+    background-color: transparent !important;
+    float: none;
+    &:after{
+      top: 17px;
+      right: 65px;
+    }
+  }
+  .competence-color, .competence-color-header{
+    &:after{
+      content : "";
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      display: inline-block;
+      position: absolute;;
+      background-color: #000;
+      right: 20px;
+      top: 19px;
+      cursor: pointer;
+      @include transition(all 200ms ease);
+    }
+    > span{
+      &.competence-vignette{
+        padding: 0 50px 0 0;
+        position: relative;
+        cursor: pointer;
+        border: solid 1px transparent;
+        border-radius: 2px;
+        @include transition(all 200ms ease);
+        width: 100%;
+        display: inline-block;
+        overflow: hidden;
+        z-index: 2;
+      }
+    }
+    &.grey{
+      &:after{
+        background-color: $grey !important;
+      }
+    }
+    &.green{
+      &:after{
+        background-color: $green !important;
+      }
+    }
+    &.yellow{
+      &:after{
+        background-color: $yellow !important;
+      }
+    }
+    &.orange{
+      &:after{
+        background-color: $orange !important;
+      }
+    }
+    &.red{
+      &:after{
+        background-color: $red !important;
+      }
+    }
+  }
+  .competence-text-overflow{
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .competence-eye{
+    display: inline-block;
+    position: absolute;
+    top: 20px;
+    left: 5px;
+    cursor: zoom-in;
+    &:hover{
+      height: 100%;
+      ~ .competence-text-overflow{
+        > .competence-nom{
+          white-space: normal;
+        }
+      }
+    }
+  }
+  .rounded-color-vignette{
+    top: 9px;
+    right: -10px;
+  }
+  .rounded{
+    width: 23px;
+    height: 23px;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    text-align: center;
+    text-indent: 0px;
+    @include transition(all 200ms ease);
+
+    &:focus {
+      transform: scale(1.4);
+      -webkit-transform: scale(1.4);
+      -moz-transform: scale(1.4);
+      outline: none;
+    }
+  }
+  .competence-color-popup-close{
+    position: absolute;
+    left: 3px;
+    top: 0;
+    text-align: center;
+    cursor: pointer;
+  }
+  .tooltip-overlay{
+    position: absolute;
+    width: 43px;
+    height: 34px;
+    top: 0px;
+    left: 0px;
+    z-index: 10;
+  }
+  .competence-color-popup{
+    position: absolute;
+    left: 0;
+    top: 400px;
+    border-radius: 2px;
+    background-color: $white;
+    overflow: hidden;
+    width: 100%;
+    z-index: 2;
+    @include transition(all 200ms ease);
+    &.opened{
+      top: 0;
+    }
+    h4{
+      margin: 0;
+      padding: 10px;
+    }
+    > h4 {
+      &:first-child{
+        border-bottom: solid 1px rgba(0,0,0,0.3);
+      }
+      &:last-child{
+        border-top: solid 1px rgba(0,0,0,0.3);
+      }
+    }
+  }
+  .color-list{
+    min-width: 200px;
+    max-width: 300px;
+    text-indent: 0;
+    text-align: center;
+    ul{
+      width: 90%;
+      padding: 15px 0;
+      margin: 0 0 0 5%;
+      height: 30px;
+      li{
+        display: inline-block;
+        list-style-type: none;
+        width: 23%;
+        text-align: center;
+        height: 30px;
+        cursor: pointer;
+        position: relative;
+        .rounded{
+          >.rounded{
+            position: absolute;
+            left: 0;
+            top: 0;
+            opacity: 0;
+            width: 23px;
+            height: 23px;
+          }
+        }
+        &:hover{
+          .rounded{
+            > .rounded{
+              opacity: 0.25;
+              transform: scale(1.4);
+            }
+          }
+        }
+      }
+    }
+  }
+  .skills-h4{
+    margin: 0;
+  }
+  .competence-nom{
+    width: 95%;
+    display: block;
+    overflow: hidden;
+  }
+
+  /***
+                      DIRECTIVE SKILLS LIST
+  ***/
+  .skills-list{
+    width: 90%;
+    margin-left: 5%;
+    list-style-type: none;
+    padding: 0;
+    ul{
+      list-style-type: none;
+      padding: 0;
+    }
+    li{
+      position: relative;
+    }
+  }
+
+  .skills-list-aideSaisie {
+    list-style-type: none;
+    overflow-y: scroll;
+    height: 260px;
+    ul{
+      list-style-type: none;
+      overflow-y: hidden;
+    }
+    li{
+      position: relative;
+    }
+  }
+
+  @media screen and (min-width: $tablette){
+    .skills-list{
+      ul{
+        &:nth-child(2) {
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+
+  .skills-header{
+    cursor: pointer;
+    @include transition(all 200ms ease);
+    &.skill-50{
+      height: 50px;
+      overflow: hidden;
+    }
+    &.skill-30{
+      height: 30px;
+      overflow: hidden;
+    }
+    &.skill-40{
+      height: 40px;
+      overflow: hidden;
+    }
+    &.skill-45{
+      height: 45px;
+      overflow: hidden;
+    }
+    &.opened{
+      height: auto;
+      overflow: visible;
+      @include transition(all 200ms ease);
+      > .skills-text-overflow{
+        i.skills-open-icon::before {
+          content: "\e841";
+        }
+      }
+    }
+    > span{
+      padding: 10px 35px 10px 50px;
+      border-bottom: solid 1px #e0e0e0;
+      display: block;
+      cursor: pointer;
+      &.skills-teach{
+        padding: 10px 35px 10px 20px;
+
+        > span{
+          margin-bottom: 5px;
+        }
+      }
+    }
+    > .skills-text-overflow{
+      i.skills-open-icon {
+        @include fonticon;
+        &::before{
+          content: "\e823";
+          left: 0;
+          position: absolute;
+          @include transition(all 200ms ease);
+          font-size: 10px;
+        }
+      }
+    }
+  }
+
+  .skills-text-overflow{
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    display: inline-block;
+    @include transition(all 200ms ease);
+  }
+
+  .skills-list-connaissance{
+    margin: 10px 5px 0 45px;
+    cursor: pointer;
+    padding: 0 0 0 15px;
+  }
+
+  .skills-list-proposition{
+    margin: 10px 5px 0 5px;
+    cursor: pointer;
+    padding: 0 0 0 5px;
+  }
+
+  .skills-list-proposition:hover {
+    color: #FF8500;
+  }
+
+  .skills-checkbox{
+    left: 30px;
+    position: absolute;
+    top: 9px;
+  }
+
+  .skills-headers-checkbox{
+    left: 20px;
+  }
+
+  .skill-connaissance-eye{
+    height: 100%;
+    display: inline-block;
+    position: absolute;
+    top: 13px;
+    right: 0px;
+    color: $grey;
+    cursor: zoom-in;
+    @include transition(all 200ms ease);;
+    &:before {
+      padding: 6px;
+    }
+    &:hover{
+      color: rgba(0,0,0,1);
+      ~ .skills-text-overflow{
+        white-space: normal;
+      }
+    }
+  }
+
+  .skills-label{
+    height: 100%;
+    width: 100%;
+    display: inline-block;
+    position: relative;
+  }
+  /**
+          DIRECTIVE SKILLS COLOR PAGE
+  **/
+  .skills-color-page{
+    list-style-type: none;
+    //float: right;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    //right: 44% !important;
+    //top: 68px !important;
+    //margin-top: 5px !important;
+    z-index: 10;
+    li{
+      display: inline-block;
+      height: 34px;
+      width: 43px;
+      position: relative;
+      > .rounded, > .rounded > .rounded{
+        position: absolute;
+        left: 0;
+        top:0;
+        border: none;
+        box-shadow: 0 1px 1px rgba(0,0,0,0.4);
+      }
+    }
+
+    .tooltip-overlay {
+      position: relative;
+      width: 43px !important;
+      height: 34px !important;
+      z-index: 10;
+      display: block;
+    }
+  }
+  .grey-skill-page {
+    background-color: $grey!important;
+  }
+
+  .skills-color-column {
+    list-style-type: none;
+    padding: 0 0 0 9px !important;
+    margin: 0;
+    li{
+      display: inline-block;
+
+      label.checkbox {
+        text-indent: 0;
+        display: block;
+        height: 20px;
+        width: 30px;
+      }
+    }
+  }
+
+  .compselected {
+    transform: scale(1.3);
+    box-shadow: 1px 2px 3px grey;
+  }
+  .skills-eleve-list{
+    list-style-type: none;
+    padding: 0;
+    margin: 3px;
+    height: 20px;
+    li {
+      display: inline-block;
+      height: 20px;
+    }
+  }
+  .devoir-icons-view{
+    text-align: center;
+    .devoir-icons-element{
+      display: inline-block;
+      float: none;
+      transition: all 0.2s ease-in-out;
+      min-height: 190px;
+      height: auto;
+      margin: 10px;
+      border-radius: 7px;
+      min-width: 280px;
+      max-width: 280px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 1px 2px rgba(0,0,0,0.24);
+      &:hover{
+        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+      }
+      .devoir-icons-container {
+        background: $white none repeat scroll 0 0 ;
+        border : 1px solid transparent;
+        box-sizing: border-box;
+        display: block;
+        transition: all 0.2s ease-in-out;
+        float: none;
+        min-height: 190px;
+        height: auto;
+        margin-left: auto;
+        margin-right: auto;
+        border-radius: 7px;
+        text-align: left;
+        padding: 24px 8px;
+        position: relative;
+        overflow: hidden;
+      }
+    }
+  }
+  .devoir-icons-name{
+    font-weight: 300;
+    font-size: 20px;
+  }
+  .devoir-icons-description{
+    padding-top: 16px;
+    padding-bottom: 16px;
+    min-height: 23px;
+    font-style: italic;
+  }
+  .devoir-icons-checkbox{
+    top: 15px;
+    position: absolute;
+    right: 10px;
+    z-index: 2;
+    > footer{
+      font-weight: 500;
+      > .devoir-icons-coef{
+        float: right;
+      }
+    }
+    > header, > footer{
+      display: block;
+      width: 100%;
+      min-height: 20px;
+      padding: 5px 0;
+      > .devoir-icons-date, > .devoir-icons-class{
+        float: left;
+      }
+    }
+  }
+  .releve-coef {
+    display: block;
+  }
+  .nav-devoirs{
+    //position: fixed !important;
+    width: 96% !important;
+    //height: 146px;
+    background-color: $lightest-grey;
+    z-index: 3;
+    //margin-bottom: 25px;
+    top:0;
+    button {
+      position: absolute;
+      bottom: 21px;
+      right: 90px;
+      margin: 0;
+    }
+  }
+  .button-devoir{
+    margin-left: 0;
+  }
+  .text-overflow{
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .devoir-percent{
+    background-color: $cyan;
+    height: 3px;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .header-releve{
+    nav{
+      margin-right: 50px;
+      .button{
+        margin-left: 10px;
+      }
+    }
+  }
+  .releve-header-content{
+    width: 95%;
+    padding-left: 0;
+    margin-left: 0;
+    left: 0;
+  }
+  .nav-buttons{
+    width: 100%;
+    > button{
+      width: 100%;
+      top: 20px;
+    }
+  }
+  .header-notes{
+    > h2{
+      text-align: left;
+      margin: 0;
+      display: block;
+      width: 100% !important;
+    }
+  }
+  .headerReleve {
+    width: 100% !important;
+    text-align: left;
+    display: inline-block;
+    margin-left: 15px;
+    margin-top: 30px;
+    > h1{
+      font-size: 25px;
+    }
+  }
+  .switch-view-buttons{
+    position: absolute !important;
+    bottom: 20px;
+    right: 1%;
+  }
+
+  .fix-icon-size {
+    font-size: 24px;
+  }
+
+  //.list-devoirs{
+  //    margin-top: 60px;
+  //}
+  .notes-help{
+    .legend {
+      .rounded {
+        position: absolute;
+        left: -15px;
+      }
+      > ul{
+        list-style-type: none;
+        margin: 0;
+        > li{
+          position: relative;
+          text-indent: 15px;
+          margin: 15px;
+          > .rounded{
+            position: absolute;
+            left: -15px;
+            text-align: center!important;
+            text-indent: 0px !important;
+            &::before{
+              /*content: counter(step-counter)".";*/
+              content : " ";
+              font-weight: 400;
+              color: #444;
+              opacity: 0.8;
+              position: absolute;
+              left: 0;
+              font-size: 17px;
+            }
+          }
+        }
+      }
+    }
+
+    > .eleven{
+      margin-left: 4%;
+      > h4{
+        border-bottom: solid 1px rgba(0,0,0,0.15);
+        font-weight: 400;
+        text-indent: 15px;
+      }
+    }
+  }
+
+  @media screen and (min-width: $tablette) {
+    .addRemplacement {
+      .addRemplacementTable {
+        padding: 15px 40px;
+
+        .addRemplacementTable__libelle {
+          text-align: right;
+          text-align-last: right;
+          padding-right: 10px;
+          padding-top: 10px;
+
+        }
+      }
+
+      .listRemplacementsTable {
+        margin:auto;
+      }
+    }
+  }
+
+  @media screen and (min-width: $tablette) {
+    .addDevoir {
+      .skills-list {
+        margin: 0 0 0 5% !important;
+        width: 95% !important;
+      }
+
+      .selectable-list {
+        margin-top: 3%;
+      }
+
+      .fixed-top-right {
+        position: fixed;
+        right: 15px;
+        top: 135px;
+        max-height: 80%;
+        overflow: auto;
+      }
+
+      .margin-left {
+        margin: 10px 0;
+      }
+    }
+
+
+    .addDevoirTable{
+      padding: 15px 40px;
+
+      .addDevoirTable__libelle {
+        text-align: right;
+        text-align-last: right;
+        padding-right: 10px;
+        padding-top: 10px;
+      }
+
+    }
+
+  }
+
+  .button-add-devoir{
+    margin-left: 10px !important;
+    height: auto !important;
+  }
+  .button-evaluation-devoir{
+    flex:auto;
+    padding: 8px 0px 10px !important;
+    z-index: 11 !important;
+  }
+  .div-buttons-evaluation-devoir{
+    display: flex;
+    width: 18%;
+    right: -20px;
+    position: absolute;
+    top: -22px;
+  }
+
+  .columns-popup-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .columns-popup {
+    position: absolute;
+    right: 10%;
+    top: 82%;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: white;
+    min-width: 160px;
+    border-radius: 5px;
+
+    height: 0px;
+    -webkit-transition: height 0.15s linear;
+    -moz-transition: height 0.15s linear;
+    -ms-transition: height 0.15s linear;
+    -o-transition: height 0.15s linear;
+    transition: height 0.15s linear;
+  }
+
+  .columns-popup.open {
+    padding: 10px;
+    border: 1px $primary solid;
+
+    height: 130px;
+    -webkit-transition: height 0.15s linear;
+    -moz-transition: height 0.15s linear;
+    -ms-transition: height 0.15s linear;
+    -o-transition: height 0.15s linear;
+    transition: height 0.15s linear;
+  }
+
+  .columns-popup-button {
+    background-color: $primary;
+    color: white;
+    font-size: 12px;
+    padding: 2px 10px;
+    margin: 10px;
+    border-radius: 10%;
+  }
+
+  .columns-popup-items{
+    margin: 10px;
+  }
+
+  .checkbox-grid{
+    display: grid;
+  }
+  .nbr-Cartouche{
+    margin-left: 3%;
+    text-align: center;
+    padding: 3px;
+  }
+  .option-eleve{
+    padding-top: 3px;
+    > span{
+      margin-top: auto;
+      margin-left: 2%;
+      position: absolute;
+      margin-bottom: auto;
+    }
+  }
+  .additional-options{
+    border-left: 2px solid;
+    margin-left: 4%;
+    margin-top: 3%;
+    padding: 1.5%;
+    animation-duration: 1s;
+    background-image: linear-gradient(to right, #f2f2f2, #fff);
+    >div{
+      margin:6px;
+    }
+    //animation-name: slidein;
+  }
+
+  @keyframes slidein {
+    from {
+      font-size: 0%;
+    }
+
+    to {
+      font-size: 100%;
+    }
+  }
+  .solid-bottom{
+    border-bottom: solid 2px black;
+  }
+
+  .button-edit-devoir-not-fixed {
+    margin-top: -18px !important;
+    flex:auto;
+    padding: 8px 0px 10px !important;
+  }
+
+  .button-fixed-top-right {
+    position: fixed !important;
+    right: 1.5%;
+    top: 90px;
+  }
+
+  .devoir-recapitulatif {
+    i18n.bold {
+      width: 50% !important;
+      display: inline-block;
+    }
+  }
+  .devoir-recapitulatif i18n.bold {
+    width: 50% !important;
+    display: inline-block;
+  }
+
+  .devoir-skills-list{
+    padding: 0;
+    list-style-type: none;
+
+    .skills-list-connaissance {
+      margin: 10px 5px 0 -10px !important;
+    }
+  }
+  //Relevé périodique lightbox par élève Acquis scolaire, suivi élève, historique
+  .acquis_scolaire{
+    span{
+      font-size: 14px;
+    }
+    .moyenne_pos{
+      margin-left: 20px;
+    }
+  }
+
+  //Relevé périodique
+  .releve_periodique {
+    .column-center {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  .criterion {
+    background: $white;
+    padding: 8px;
+    border-radius: 5px;
+    margin: 5px;
+
+    select {
+      width: 100%;
+      border: solid 1px;
+      border-radius: 2px;
+      cursor: pointer;
+      background: transparent;
+    }
+
+    .header {
+      h2 {
+        color : $grey;
+        margin-top: 0;
+      }
+    }
+  }
+
+  .criterion-fixed{
+    position: fixed !important;
+    top: 144px !important;
+  }
+  .fixed-container{
+    left: 17.66% !important;
+  }
+  .devoir-with-comp {
+    border-bottom: solid 4px $orange !important;
+    z-index: 1;
+  }
+  .resume-competence {
+    color: $orange;
+    padding: 0 10px;
+  }
+
+  i.show-chart{
+    @include fonticon;
+    font-size: 24px;
+    opacity: 0.2;
+
+    &::after{
+      content:"\e810";
+    }
+
+    &.selected{
+      opacity: 0.6;
+    }
+  }
+
+  i.show-cards{
+    @include fonticon;
+    opacity: 0.2;
+
+    &::after{
+      content:"\e837";
+    }
+
+    &.selected{
+      opacity: 0.6;
+    }
+  }
+
+  i.show-suivi-eleve{
+    @include fonticon;
+    font-size: 24px;
+    opacity: 0.2;
+
+    &::after{
+      content:"\e824";
+    }
+
+    &.selected{
+      opacity: 0.6;
+    }
+  }
+
+  i.show-bilan-eleve{
+    @include fonticon;
+    font-size: 24px;
+    opacity: 0.2;
+
+    &::after{
+      content:"\e8b8";
+    }
+
+    &.selected{
+      opacity: 0.6;
+    }
+  }
+
+  i.show-bilan-fin-cycle{
+    @include fonticon;
+    font-size: 24px;
+    opacity: 0.2;
+
+    &::after{
+      content:"\e8b3";
+    }
+
+    &.selected{
+      opacity: 0.6;
+    }
+  }
+
+  i.icon-back{
+    @include fonticon;
+
+    &::after{
+      content:"\e84c";
+    }
+
+    margin-right: 15px;
+  }
+
+  i.icon-chat {
+    @include fonticon;
+
+    &::after {
+      content : "\e817";
+    }
+  }
+
+  i.refresh {
+    @include fonticon;
+
+    &::after {
+      content : "\e874";
+    }
+  }
+
+  .appreciation {
+    color: $orange;
+  }
+
+  .add-appreciation {
+    color: $shadow;
+    cursor: pointer;
+    @include transition(all 200ms ease);
+
+    &:hover {
+      color: $grey;
+    }
+
+    float: right;
+    margin-right: 10px;
+  }
+
+  .display-block {
+    display: block;
+  }
+
+  .display-none {
+    display: none;
+  }
+
+  .show-appreciation {
+    height:2em;
+  }
+
+  .hide-appreciation {
+    height: 0;
+  }
+
+  .recap-liste-competence-container {
+    position: fixed;
+    right: 1%;
+    top: 170px;
+    height: 77%;
+    overflow: auto;
+  }
+
+  .recap-liste-competence {
+    padding: 15px;
+    .competence {
+      @include transition(all 200ms ease);
+      list-style-type: none;
+      padding: 5px;
+      margin: 0;
+      border-bottom: solid 1px $light-grey;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &.highlighted {
+        background-color: $cyan;
+        color: $white;
+        font-weight: bold;
+      }
+    }
+  }
+  .clear-none{
+    clear: none !important;
+  }
+
+  .content-suivi-eleve {
+    margin: 0 auto;
+    padding: 0 15px;
+    box-sizing: border-box;
+    overflow : hidden;
+
+    .suivi-eleve-ctl {
+      background-color: $white;
+      min-height: 100px;
+      border-bottom: solid 1px $primary-dark;
+    }
+
+    .bilan-eleve-ctl {
+      background-color: $white;
+      min-height: 30px;
+      padding-top: 10px;
+      border-bottom: solid 1px $primary-dark;
+    }
+
+    .suivi-eleve-slider {
+      width: 200%;
+    }
+
+    i.show-chart{
+      margin-right: 15px;
+    }
+
+    i.show-suivi-eleve{
+      margin-right: 15px;
+    }
+
+    i.show-bilan-eleve{
+      margin-right: 15px;
+    }
+
+    i.show-bilan-fin-cycle{
+      margin-right: 15px;
+    }
+
+    i.icon-back{
+      font-size: 24px;
+    }
+
+    i.reset {
+      @include fonticon;
+
+      &::before {
+        content : '\e8be';
+      }
+    }
+
+    .suivi-eleve, .detail-competence {
+      float: left;
+    }
+
+    .classe-view {
+      .border-green{
+        border: solid 3px $green;
+      }
+      .border-yellow{
+        border: solid 3px $yellow;
+      }
+      .border-orange{
+        border: solid 3px $orange;
+      }
+      .border-red{
+        border: solid 3px $red;
+      }
+      .border-grey{
+        border: solid 3px $grey;
+      }
+
+      .dominos {
+        .item {
+          .domino {
+            transition: all 0.2s ease-in-out;
+
+            &:hover {
+              box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+            }
+            .bottom {
+              padding: 0px 10px 85% 10px;
+              background: none !important;
+            }
+            .user-deleted {
+              background-color: #ccc !important;
+            }
+          }
+        }
+      }
+    }
+
+    .suivi-eleve {
+      margin-right: 15px;
+      @include transition(all 200ms ease-out);
+
+      &.slide {
+        margin-right: 0;
+        margin-left: -100%;
+      }
+
+      .competence-line {
+        white-space: nowrap;
+      }
+
+      .align-top {
+        vertical-align: top;
+      }
+
+      .competence {
+        white-space: inherit;
+      }
+
+      .suivi-eleve-item {
+        height: 30px;
+      }
+      .content-bilan-eleve {
+        .moyenne {
+          text-align: right;
+        }
+
+        .padding-left {
+          padding-left: 3em;
+        }
+      }
+
+      .content-bilan-fin-cycle {
+        .domaine-display {
+          padding: 2px 0 !important;
+          font-weight: bold;
+          button{
+            padding: 0px 4px !important;
+            font-size: 11px !important;
+            text-transform: none !important;
+            margin-bottom: 0px !important;
+          }
+        }
+
+        .domaine-display-marginTop {
+          margin-top: 20px !important;
+        }
+
+        .domaine-line{
+
+          &::after{
+            content: ' ';
+            display: block;
+            clear: both;
+          }
+        }
+      }
+    }
+
+    .detail-competence {
+
+      .addDevoirTable__libelle {
+        padding-right: 2px;
+      }
+
+      h2 {
+        margin: 0 auto;
+      }
+
+      .detail {
+        width: 100%;
+        overflow: auto;
+        &.table-view, &.graph-view {
+          table {
+            margin: 50px auto;
+          }
+          .formative-legend {
+            margin: 20px auto;
+            text-align: right;
+          }
+        }
+
+        &.graph-view {
+          table {
+
+            tr {
+              border-top: solid 1px transparent;
+
+              &:hover {
+                background: none;
+              }
+
+              &:last-child {
+                border-top: solid 1px $grey;
+              }
+
+              td {
+                &:nth-child(1) {
+                  border-right: solid 1px $grey;
+                }
+              }
+            }
+          }
+
+          .reversed {
+            transform: rotate(-45deg);
+            display: block;
+            margin-top: 20px;
+          }
+        }
+      }
+    }
+  }
+
+  .selectable-filter-list {
+    li {
+      list-style-type: none;
+      display: inline-block;
+      margin: 0 10px;
+      vertical-align: top;
+
+      .rounded{
+        opacity: 0.45;
+        &.selected {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+
+  .indent-eight{
+    padding-top:8px;
+  }
+
+  .graphe-widget{
+    height:240px !important;
+
+  }
+  .RechercheAcceuil{
+    margin-left: 60px !important;
+  }
+
+  ////    Display NumberCycle
+
+  .cycleTitle {
+    text-align: center;
+    font-style: normal !important;
+    color: orange;
+    font-size: 1.8em;
+    margin: auto;
+    width: 100%;
+  }
+
+  .RechercheSuiviEleve{
+    margin-left: 8.3% !important;
+    width: 83.5%;
+
+  }
+  .detail{
+
+    .info{
+      margin-left: 8.5%!important;
+    }
+
+  }
+  .headerAccueil{
+    margin-left: 4%;
+  }
+  .marginNiveau{
+    margin-left : 50%;
+    margin-right : 25%;
+  }
+  .openedSectionDom{
+    height: 0 !important;
+    overflow: hidden!important;
+
+  }
+
+  .chevron {
+    &::before {
+      @include fonticon;
+      margin-right: 1%;
+      content: "\e841";
+      font-size: 10px;
+      float: left;
+    }
+    &.openedElem {
+      &::before {
+        @include fonticon;
+        margin-right: 1%;
+        content: "\e823";
+        font-size: 10px;
+        float: left;
+      }
+    }
+  }
+
+  .rounded{
+    &.filterSpan{
+      opacity: 0.45;
+      &.selectedFilterGrey {
+        opacity: 1;
+      }
+    }
+  }
+
+
+  .chartSuiviEleve{
+    //width : 90% !important;
+    //height: 90% !important;
+    margin: 2%;
+  }
+
+  .switchToView{
+    margin-left: 6%;
+    color: #4bafd5;
+  }
+
+  .buttonEvalPopupDelete{
+    margin-bottom: 25px;
+    margin-left: 10px;
+    float: right;
+  }
+
+  .buttonEvalPopupConfirm{
+    margin-bottom: 25px;
+    margin-right: 10px;
+    float: right;
+    background-color: silver;
+  }
+
+  .lightBoxEval{
+    width: 100%;
+  }
+
+  .paddingTwenty{
+    padding: 20px;
+  }
+
+  .conversion-legend.bfc {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      height: 50px;
+
+      div{
+        vertical-align: top;
+        height: 100%;
+        position: relative;
+
+        &:nth-child(1) {
+          width: 50px;
+          text-align: right;
+        }
+
+        .maxval{
+          position: absolute;
+          top: -10px;
+          right: 10px;
+        }
+
+        .last-minval {
+          position: absolute;
+          right: 10px;
+          bottom: -5px;
+        }
+
+        .libelle {
+          height: 50px;
+          display: block;
+          line-height: 50px;
+          text-indent: 10px;
+        }
+      }
+    }
+
+    .legend-line{
+      position: relative;
+
+      .tick {
+        width: 13px;
+        height: 1px;
+        display: block;
+        position: absolute;
+        left: -5px;
+        z-index: 10;
+        background-color: $black;
+
+        &.first-tick{
+          top: 0;
+        }
+      }
+
+      &::before{
+        content: ' ';
+        width: 3px;
+        height: 100%;
+        display: block;
+      }
+
+      &.green{
+        &:before{
+          background-color: $green;
+        }
+      }
+      &.orange{
+        &:before{
+          background-color: $orange;
+        }
+      }
+      &.yellow{
+        &:before{
+          background-color: $yellow;
+        }
+      }
+      &.red{
+        &:before{
+          background-color: $red;
+        }
+      }
+    }
+  }
+
+  //Enseignement de complément et bfc barème brevet
+
+  .bareme-brevet{
+    font-size: 1.2em;
+    font-weight: bold;
+    line-height: 2.3em;
+    margin-right: 0.5em;
+  }
+
+  .objectifs-enscpl {
+    option[value="2"] {
+      visibility: hidden;
+    }
+  }
+
+  label.select-evaluation {
+    margin: 0!important;
+  }
+
+  i.cross-annotation{
+    padding-left: 5px;
+    line-height: 34px;
+  }
+  span.competence-eval.rounded.ng-scope {
+    vertical-align: middle;
+  }
+
+  .filter-domaine {
+    margin: 0 0 0 5% !important;
+    width: 95% !important;
+    .drop-down-block,.drop-down-block .drop-down-label {
+      margin-bottom: 0px;
+    }
+    .checkbox-domaine {
+      background-color: $medium-grey !important;
+      margin-right: 4px !important;
+    }
+    label.chip.checkbox-domaine.selected {
+      background-color: $orange !important;
+    }
+  }
+  nav.vertical.floating .content {
+    display: initial !important;
+  }
+
+  //EXPORT LSU
+  .lsu {
+
+    .filtre {
+      position: relative;
+      height: 25px;
+      overflow: hidden;
+      background: $white;
+      padding: 8px;
+      border-radius: 5px;
+      box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
+      margin: 5px;
+      @include transition(all 100ms ease-out);
+      .plus-input {
+        right: 5px;
+        position: absolute;
+        top: 11px;
+        @include fonticon;
+        &::after {
+          content: "\e823";
+          font-size: 15px;
+          color: $grey;
+          //font-weight: 300;
+          opacity: 0.8;
+          cursor: pointer;
+          border: none;
+          background-color: inherit;
+          font-size: 10px;
+        }
+      }
+      > h4 {
+        margin-bottom: 4px;
+        margin-top: 4px;
+        line-height: 20px;
+
+      }
+
+      .selectable-list li {
+        font-size: 12px;
+        padding: 2px;
+      }
+      .selectable-list li:hover {
+        background: $white;
+        color: $orange;
+        border-bottom-color: grey;
+      }
+    }
+    .filtre-classe {
+      &.opened {
+        height: 270px;
+        .plus-input::after {
+          content: "\e841";
+        }
+      }
+      .selectable-list {
+        max-height: 195px;
+        overflow-y: scroll;
+        margin: 0;
+      }
+    }
+    .filtre-responsable {
+      &.opened {
+        height: 175px;
+        .plus-input::after {
+          content: "\e841";
+        }
+      }
+      .selectable-list {
+        max-height: 100px;
+        overflow-y: auto;
+        margin: 0;
+      }
+    }
+  }
+
+  /**
+   $PARENT-EVALUATION
+ **/
+  .round-avatar {
+    height: 120px;
+    width: 100px;
+    margin: 0 10px;
+    text-align: center !important;
+    opacity: 0.8 !important;
+
+      img {
+        height: 100px;
+        width: 100px;
+        object-fit: cover;
+        border-radius: 50% !important;
+        border: 1px solid $medium-grey !important;
+      }
+
+      span {
+        color: $grey !important;
+        font-weight: bold !important;
+        text-align: center !important;
+      }
+  }
+
+  .big-round-avatar {
+    height: 240px !important;
+    width: 200px !important;
+
+      img {
+        height: 200px !important;
+        width: 200px !important;
+      }
+  }
+
+  .alignTablewithOtherWidget {
+    margin-top: 65px;
+  }
+
+  .eval_parent {
+    .help {
+      color: $cyan;
+    }
+    .bilan-suivi-eleve {
+      margin-top: 5px !important;
+    }
+    .textBotom {
+      vertical-align: text-bottom;
+    }
+    .lettreNiv {
+      vertical-align: baseline !important;
+    }
+    .hrForDisplayDevoir {
+      border-bottom: solid 1px #5f5f5f;
+      width: 98%;
+    }
+    .rounded {
+      vertical-align: text-bottom !important;
+    }
+    .content-box-accueil--table--content >.row {
+      padding: 12px 0 !important;
+    }
+    @media screen and (max-device-width: $tablette) {
+      #crumbs {
+        display: none;
+      }
+      .box-accueil {
+        margin: 0 !important;
+      }
+    }
+    .shadowOne {
+      box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.35)!important;
+    }
+    .shadowTwo {
+      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.35)!important;
+    }
+    .content-box-accueil--table--content {
+      overflow-y: hidden !important;
+    }
+    .devoir-icons-container {
+      height: 285px !important;
+    }
+    i.previous {
+      display: inline-block !important;
+      float: left !important;
+    }
+    i.next {
+      display: inline-block !important;
+      float: right !important;
+    }
+    .DevoirField {
+      border: solid 1px #5f5f5f;;
+      padding-left: 5px;
+    }
+    .content-box-accueil--table--content>.row {
+      height: 40px;
+    }
+    .floatRight {
+      float: right;
+    }
+    .floatLeft {
+      float: left !important;
+    }
+    .responsive-table {
+      table {
+        tbody {
+          tr:nth-child(even){
+            background: rgba(0,0,0,0.05);
+          }
+          tr:nth-child(odd){
+            background: $white;
+          }
+        }
+      }
+    }
+
+    .background-grey{
+      background: rgba(0,0,0,0.05) !important;
+    }
+    .background-white{
+      background: $white !important;
+    }
+    .height80{
+      line-height: 80px;
+    }
+    .list-devoirs {
+      .testAlignLeft {
+        @media screen and (min-device-width:$fat-mobile) {
+          text-align: left !important;
+        }
+      }
+      transition: all 100ms ease-out;
+      .shadow-first{
+        box-shadow:(0px 0px 0px 0px rgba(0,0,0,0.35));
+      }
+      table {
+        border-collapse : collapse;
+        tbody tr:hover {
+          color: $orange;
+        }
+        tbody tr:nth-child(even){
+          background: $white !important;
+          border-bottom: 1px solid #ccc !important;
+          border-top: 0px !important;
+        }
+        tr:nth-child(odd){
+          border: 0 !important;
+          td {
+            border: 0 !important;
+            padding: 0px !important;
+            div {
+              margin: 5px 0 0;
+              border-left: 0px solid #fff;
+              padding: 5px;
+              border-right: 0px solid #fff;
+              @media screen and (min-width: $tablette) {
+                border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+              };
+              padding: 5px;
+            }
+            .firstElem {
+              margin-left: 5px !important;
+            }
+            .lastElem{
+              margin-right: 5px !important;
+              margin-bottom: 1px !important;
+            }
+          }
+        }
+      }
+      .opened {
+        transform: scale(1.005);
+        & td div {
+          margin: 0px !important;
+          border-bottom: 0px !important;
+        }
+      }
+
+    }
+    .opened.lastElem.shadow {
+      margin-top: 5px !important;
+    }
+    @media screen and (max-width: $tablette) {
+      .notesDevoir {
+        display: block !important;
+        width: 100% !important;
+      }
+    }
+    @media screen and (min-width: $tablette) {
+      table {
+        border-collapse : separate;
+      }
+    }
+    .responsive-table table tbody tr td {
+      padding: 5px;
+      font-size: 14px;
+    }
+
+    .display-children {
+      height: 150px;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: left;
+      overflow-x: auto;
+      box-sizing: border-box;
+
+      & > div {
+        flex: 0 0 auto;
+        opacity: 0.5 !important;
+        transform: scale(0.85);
+        @include transition(all 0.4s ease);
+
+        &:hover {
+          opacity: 0.8 !important;
+          transform: scale(0.9);
+        }
+
+        &.selected {
+          opacity: 1 !important;
+          transform: scale(1);
+        }
+      }
+
+
+      @media screen and (max-width: 800px), screen and (max-height: 800px) {
+        height: 110px;
+        overflow: hidden;
+
+        .round-avatar {
+          height: 80px;
+          width: 60px;
+
+          img {
+            width: 60px;
+            height: 60px;
+          }
+        }
+      }
+    }
+    nav.vertical ul li a, .app-menu ul li a {
+      padding-right: 0px !important;
+    }
+
+    .round-avatar {
+      top: 10px;
+      right: 10px;
+    }
+
+    .content {
+      min-height: 0;
+    }
+  }
+
+  .criterion.card.bilan-eleve {
+    margin-top: 0px !important;
+  }
+
+  .bilan-suivi-eleve{
+    margin-left: 20px !important;
+    margin-right: 20px !important;
+    padding-bottom: 20px !important;
+    border-radius: 5px !important;
+  }
+
+  .titre-libelle{
+    color: #4bafd5;
+    font-size: 18px;
+  }
+
+  .notes-help-bilan-eleve {
+    margin-top: 20px !important;
+  }
+
+  .warning-bilan-eleve {
+    padding-top: 20px;
+  }
+  .export-competences {
+    font-size: 12px;
+  }
+
+  .elements-programme-rappels {
+    font-size: 14px;
+  }
+
+  .label-checkbox {
+    height: 25px !important;
+  }
+
+  .selectable-list li.positionnementcalculee {
+    background: $cyan;
+    color: #FFFFFF;
+  }
+
+
+  .width-td-0 {
+    width: 0% !important;
+    text-align: center !important;
+  }
+  .width-td-10 {
+    width: 10% !important;
+    text-align: center !important;
+  }
+
+  .width-td-20 {
+    width: 20% !important;
+    text-align: center !important;
+  }
+
+  .width-td-50 {
+    width: 50% !important;
+    text-align: center !important;
+  }
+
+  .responsive-table.width-td-10 table td {
+    width: 10% !important;
+  }
+
+  .titleCenter {
+    text-align: center !important;
+  }
+
+  .text-align-left {
+    text-align: left !important;
+  }
+
+  @media screen and (max-device-width:$small-mobile) {
+    .responsive-table table td {
+      width: auto !important;
+    }
+  }
+  @media screen and (max-device-width:$fat-mobile) {
+    .responsive-table table td {
+      width: auto !important;
+    }
+  }
+
+  .deletedStudent {
+    color: #E61758 !important;
+  }
+
+  //  POP-UP Relevé Periodique - Acquis Scolaire
+  .itemFlex {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // Retire le padding de la barre de recherche lors de la recherche d'élève
+  .autocomplete div {
+    padding: 0px !important;
+  }
+
+
+  //  Bilan périodique
+
+  //  Left side
+
+  .select-avis-padding {
+    padding: 10px 0;
+  }
+
+  //  Onglet projet
+
+  .font-size-13 {
+    font-size: 13px !important;
+  }
+
+  .display-flex-space-between {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .historic {
+    line-height: 52px;
+    margin: 10px;
+    color: $cyan;
+    font-weight: bold;
+  }
+
+  //suivi des acquis
+
+  .suiviDesAcquis{
+    th{
+      padding: 5px 11px !important;
+    }
+    .matiere{
+      font-weight: bold;
+    }
+    span~ul{
+      font-size: 12px;
+      margin-top: 0px;
+      margin-bottom: 0px;
+      list-style-type: none;
+      padding-left: 0px;
+      li{
+        padding-bottom: 0px;
+      }
+    }
+    textarea{
+      height: 75px;
+      resize: none;
+      margin-top: 0px;
+      margin-bottom: 0px;
+      overflow-y: auto;
+      text-align: justify;
+      padding: 7px;
+    }
+    .element{
+      text-align: justify;
+      height: 75px;
+      padding-right: 5px;
+      overflow-y: auto;
+    }
+    tfoot td{
+      padding: 10px 0px;
+    }
+    .selectable-list{
+      margin: 0px;
+    }
+  }
+
+  .margin-zero {
+    margin: 0;
+  }
+
+
+  .loaderGraph {
+    border: 6px solid #f3f3f3; /* Light grey */
+    border-top: 6px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    animation: spin 2s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .loaderCenter {
+    margin: 0 45%;
+  }
+
+  .grey-color{
+    color: grey;
+  }
+
+  .margin-top-releve-parentEleve {
+    margin-top:8px;
+  }
+
+  .padding-right-downloadButton-SuiviEleve{
+    padding-right: 7px !important;
+  }
+
+  .choice-export-suivi-eleve{
+    top:38px !important; bottom: auto!important;
+  }
+
+  .loaderPage{
+    margin: 20% 50%;
+  }
+  .tabs{
+    header {
+      cursor: pointer;
+    }
+    .tabs-selected::after {
+      transform: scaleX(1);
+    }
+    .tabs-selected{
+      color: #4bafd5;
+    }
+  }
+  .buttons-suiviEleve{
+    position: absolute;
+    right: 0;
+  }
+  .buttons-suiviEleve-detail{
+    position: absolute;
+    width: 97%;
+  }
+  .releveNotes-suiviEleve{
+    overflow: overlay;
+  }
+  .releveNotes-noBorder{
+    border: none !important;
+  }
+  .encartBlanc-suiviEleve{
+    margin-left: 20px;
+  }
+  .margin-text-underTabs{
+    margin-bottom: 20px;
+  }
+  .iframeReportClass{
+    display: inline;
+  }
+  .half-width{
+    width: 50%;
+  }
+  .followingClass{
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+  .marginUnderTabs{
+    margin-bottom: 20px;
+    padding-top: 15px;
+  }
+  .choseDownloadFormat{
+    display: flex;
+    justify-content: space-around;
+  }
+  .light-font-header{
+    font-weight: 100!important;
+    font-size: 0.9em;
+  }
+  .margin-loader{
+    margin-bottom: 10px;
+  }
+  .duplication-title{
+    color: $red;
+  }
+  .button-margin{
+    margin: 16px;
+  }
+
+  @media screen and (min-device-width:1300px) {
+    .backgroundExportImage{
+      background-image: url(/competences/public/img/export_image.svg);
+      background-repeat: no-repeat;
+      background-origin: content-box;
+      background-position: 95% 15%;
+      background-size: 40%;
+    }
+  }
+
+  .archives-margin{
+    margin:2.5%;
+  }
+
+  .archives-frame{
+    background-color:$eval-lighter-grey;
+    border: dotted grey;
+    margin-top: 2%;
+    margin-bottom: 1%;
+  }
+
+  .archives-list-margin{
+    margin-bottom:1%;
+  }
+
+  .lightbox-creation-competences {
+    .element{
+      font-weight: bold;
+      margin: 4% 0 0 0;
+    }
+
+    .element-no-bold{
+      margin: 4% 0 0 0;
+    }
+
+    .input-no-bold{
+      margin: 3.1% 0 0 0;
+    }
+
+    .margin-bottom-5p{
+      margin: 0 0 5% 0;
+    }
+
+    .margin-sous-competences {
+      margin: 1em 0 0 5% !important;
+    }
+
+    .margin-left-10p {
+      margin: 0 0 0 10% !important;
+    }
+  }
+
+}
+
+
+//   Sniplet module vie-scolaire
+
+.evaluations-sniplet {
+
+  //  Bilan périodique - POP UP création EPI / AP / Parcours
+
+
+  .marginLeft {
+    margin-left: 15px;
+  }
+
+  .custom-h4 {
+    font-size: 15.5px;
+    font-weight: normal !important;
+    color: #000;
+  }
+
+  .marginTopZero {
+    margin-top: 0;
+  }
+
+  .marginBottomZero {
+    margin-bottom: 0;
+  }
+
+  .marginTop {
+    margin-top: 15px;
+  }
+
+  .disabled {
+    select {
+      background-color: lightgrey !important;
+    }
+    &:after {
+      background: grey;
+    }
+  }
+
+  .skills-header {
+    cursor: pointer;
+    @include transition(all 200ms ease);
+    &.skill-45 {
+      height: 45px;
+      overflow: hidden;
+      list-style-type: none;
+      color: #555;
+    }
+    &.opened {
+      height: auto;
+      overflow: visible;
+      @include transition(all 200ms ease);
+      > .skills-text-overflow{
+        i.skills-open-icon::before {
+          content: "\e841";
+        }
+      }
+    }
+    > span {
+      padding: 15px 5px;
+      border-bottom: solid 1px #e0e0e0;
+      display: block;
+      cursor: pointer;
+      &.skills-teach {
+        padding: 12px 35px 12px 20px;
+        > span {
+          margin-bottom: 5px;
+        }
+      }
+    }
+    > .skills-text-overflow{
+      i.skills-open-icon {
+        @include fonticon;
+        &::before{
+          content: "\e823";
+          left: 0;
+          position: absolute;
+          @include transition(all 200ms ease);
+          font-size: 10px;
+        }
+      }
+    }
+  }
+
+  .skills-list-aideSaisie {
+    padding-left: 10px;
+    margin: 0;
+    list-style-type: none;
+    ul{
+      list-style-type: none;
+    }
+  }
+
+  ul.skills-list {
+    list-style-type: none;
+  }
+
+  .skills-list-proposition {
+    margin: 10px 5px 0 5px;
+    cursor: pointer;
+    padding: 0 0 0 5px;
+  }
+
+  .skills-list-proposition:hover {
+    color: #FF8500;
+  }
+
+  .all.selected {
+    background: grey !important;
+  }
+
+  .skills-list {
+    padding-left: 15px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    min-height: 95px;
+    max-height: 230px;
+  }
+
+  .skills-list-proposition:hover dots-menu {
+    opacity: 1;
+  }
+  .skills-list-proposition dots-menu {
+    opacity: 0;
+  }
+
+  .border-white-before.checkbox {
+    > input[type="checkbox"]:checked + span::before {
+      border-color: #fff;
+    }
+  }
+
+  .skills-header >.skills-text-overflow i.skills-open-icon::before {
+    margin: 10px 0 0 5px!important;
+  }
+
+  .champsRequis {
+    font-size: 13px;
+  }
+
+  .littleButton {
+    padding: 0px 4px !important;
+    font-size: 11px !important;
+    text-transform: none !important;
+    margin-bottom: 0px !important;
+    display: inline-block !important;
+    float: none !important;
+  }
+
+  .input-libelle {
+    width: 55%;
+  }
+
+  .input-code {
+    width: 30%;
+    margin-right: 15px;
+  }
+
+  &.paramServices {
+
+    .selectable-list {
+      width: 80%;
+      height: 100%;
+      margin: auto;
+    }
+
+    .delete {
+      @include fonticon;
+      font-size: 15px;
+      color: $red;
+      font-weight: 300;
+      opacity: 0.8;
+      border: none;
+      background-color: inherit;
+      &::after {
+        content: '\e866';
+      }
+    }
+
+    .lightboxCreate, .lightboxUpdate {
+      margin: 20px;
+    }
+
+    .lightboxCreate > .row:last-child > * {
+      display: inline-block;
+    }
+
+    .lightboxUpdate > .row > * {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .filterButton {
+
+      & > * {
+        margin : 0 10px 15px;
+      }
+
+      & > input {
+        font-size: 1em;
+        font-style: italic;
+      }
+    }
+  }
+
+  .cursor-auto {
+    cursor:auto;
+  }
+
+  .domain-header {
+    position:relative;
+    left:10px;
+    top:10px;
+  }
+
+  .margin-top-10 {
+    margin-top:10px;
+  }
+
+  .margin-left-10 {
+    margin-left:10px;
+  }
+
+  .margin-15 {
+    margin: 15px;
+  }
+}
+
+i.eye-open-orange.eye-grey-color::before {
+  color: grey !important;
+}
+
+i.eye-open-orange.eye-white-color::before {
+  color: white !important;
+}
+
+.marginTop10 {
+  margin-top: 10%;
+}
+// Lightbox Relevé Périodique
+lightbox#delete-periodic div.content {
+  width: 600px;
+}
+.lightbox-releve-period {
+  .margin-button {
+    margin-top: 2%;
+    margin-right: 5%;
+  }
+}
+
+
+
+