/*!
 * 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%;
  }
}