/*  input::-webkit-input-placeholder, button {
               font-family: 'roboto', sans-serif;
               -webkit-transition: all 0.3s ease-in-out;
               transition: all 0.3s ease-in-out;
              }

               h1 {
                height: 100px;
                width: 100%;
                font-size: 18px;
                background: #18aa8d;
                color: white;
                line-height: 150%;
                border-radius: 3px 3px 0 0;
                box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
              }

               form{
                box-sizing: border-box;
                margin: 150px auto 0;
                box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
                padding-bottom: 40px;
                border-radius: 3px;
              }

               form h1 {
                box-sizing: border-box;
                padding: 20px;
              }

               input {
                margin: 40px 25px;
                width: 200px;
                display: block;
                border: none;
                padding: 10px 0;
                border-bottom: solid 1px #1abc9c;
                -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
                transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
                background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
                background-position: -200px 0;
                background-size: 200px 100%;
                background-repeat: no-repeat;
                color: #0e6252;
              }
               input:focus,  input:valid {
               box-shadow: none;
               outline: none;
               background-position: 0 0;
              }
               input:focus::-webkit-input-placeholder,  input:valid::-webkit-input-placeholder {
               color: #1abc9c;
               font-size: 11px;
               -webkit-transform: translateY(-20px);
               transform: translateY(-20px);
               visibility: visible !important;
              }
               label{
                color: #ddd;
               font-size: 11px
              }

               button {
                border: none;
                background: #1abc9c;
                cursor: pointer;
                border-radius: 3px;
                padding: 6px;
                width: 200px;
                color: white;
                margin-left: 25px;
                box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
              }

              button:hover {
                -webkit-transform: translateY(-3px);
                -ms-transform: translateY(-3px);
                transform: translateY(-3px);
                box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
}*/
.custom-file-input {
    display: inline-block;
    position: relative;
    color: #533e00;
  }
  .custom-file-input input {
    visibility: hidden;
    width: 190px;
  }
  .custom-file-input:before {
    content: 'Choisissez un fichier Excel';
    display: block;
    background: -webkit-linear-gradient( -180deg, #ffdc73, #febf01);
    background: -o-linear-gradient( -180deg, #ffdc73, #febf01);
    background: -moz-linear-gradient( -180deg, #ffdc73, #febf01);
    background: linear-gradient( -180deg, #ffdc73, #febf01);
    border: 3px solid ##dca602;
    border-radius: 5px;
    padding: 5px 0px;
    outline: none;
    white-space: nowrap;
    cursor: pointer;
   /* text-shadow: 1px 1px rgba(255,255,255,0.7);*/
    font-weight: bold;
    text-align: center;
    font-size: 10pt;
    position: absolute;
    left: 0;
    right: 0;
  }
  .custom-file-input:hover:before {
    border-color: #febf01;
  }
    .custom-file-input:active:before {
    background: #febf01;
  }
  .file-blue:before {
    content: 'Choisissez une Image';
    background: -webkit-linear-gradient( -180deg, #99dff5, #02b0e6);
    background: -o-linear-gradient( -180deg, #99dff5, #02b0e6);
    background: -moz-linear-gradient( -180deg, #99dff5, #02b0e6);
    background: linear-gradient( -180deg, #99dff5, #02b0e6);
    border-color: #57cff4;
    color: #FFF;
    text-shadow: 1px 1px rgba(000,000,000,0.5);
  }
  .file-blue:hover:before {
    border-color: #02b0e6;
  }
  .file-blue:active:before {
    background: #02b0e6;
  }
  #uploadFile{
    height: 30px;
    padding-left: 10px;
    
  }
  #imageContent{
    width: 350px; height: 100px;
  }
  #imageContent img{
    border:3px solid #000;
    border-radius: 10%;
    width:130px; height:80px;
  }
#ImagePrevisuelDiv, #ImageActuelleDiv{
    display: inline-block;
    vertical-align: top;
    width: 150px;
    margin-left:5px;
  }
#inputFileDiv{
  padding-left: 10px;
}
#imageCosaaBia td{
  float: left !important;
}
.clear{
  clear: both !important;
}
.importButton{

}
.niveau6{
  background: #020285;
}
.niveau7{
  background: green;
  color:#ffffff !important;
  border-radius: 2px;
  padding-left:5px;
  padding-right:5px;
}
.niveau8{
  background: #000fff;
  color:#ffffff !important;
  border-radius: 2px;
  padding-left:5px;
  padding-right:5px;
}
.niveau9{
  background: #560231;
  color:#ffffff !important;
  border-radius: 2px;
  padding-left:5px;
  padding-right:5px;
}
.niveau10{
  background: #003695;
  color:#ffffff !important;
  border-radius: 2px;
  padding-left:5px;
  padding-right:5px;
}
.videogular-container {
    width: 100%;
    height: 320px;
    margin: auto;
    overflow: hidden;
}
.btn-regle{
  background-color: #8e44ad;
  color:#fff;
}
.btn-validation{
  background-color: #27ae60;
  color:#fff !important;
}
.btn-neutre{
  background-color:#ecf0f1;
  color:#000;
}
.btn-non{
  background-color:#c0392b;
  color:#fff;
}
@media (min-width: 1200px) {
    .videogular-container {
        width: 1400px;
        height: 700.125px;
    }
   .videogular-container-Allvideos {
        width: 300px;
        height: 200.125px;
    }

    .videogular-container.audio {
        width: 1170px;
        height: 50px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .videogular-container {
        width: 940px;
        height: 528.75px;
    }

    .videogular-container.audio {
        width: 940px;
        height: 50px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .videogular-container {
        width: 728px;
        height: 409.5px;
    }

    .videogular-container.audio {
        width: 728px;
        height: 50px;
    }
}

/* Custom button */
videogular my-stop-button {
    display: table-cell;
    width: 50px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
}

videogular my-stop-button a,
videogular my-stop-button a:hover,
videogular my-stop-button a:visited {
    color: white;
    text-decoration: none;
}

videogular div.my-button {
    display: table-cell;
    width: 50px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
}

videogular div.my-button a,
videogular div.my-button a:hover,
videogular div.my-button a:visited {
    color: white;
    text-decoration: none;
}
.deconnexionButton{
  font-size: 1.5em !important;

}
.deconnexionButton:hover {

}
.chargementClass{
  width:650px;
  padding: 2px;
  text-align: center;
  /*background:rgb(0,204,255);*/
  /*color:white;*/
  border-radius: 20px;
  position: absolute;
  z-index: 200;
  display: non;
  top:50px;
  right: 300px;
}
.change-progress-up{
  background:rgb(0,204,255);
   transition: all 1s;
  -webkit-transition: all 5s ease-in-out;
}
.font-weight-success-pale{
  background-color:#F0FFF0 !important;
}
.font-weight-danger-pale{
background-color:#FFFAFA !important;
}
.font-weight-warning-pale{
  background-color:#FFFFF0 !important;
}
.font-weight-info-pale{
  background-color:#F0F8FF !important;

}
.header-section a{
  color:#7D3C98;
  
}
.content-header{
  background-color: #FBFCFC;
}

.font-weight-pale{
  background-color:#FBFCFC !important;

}
.navbar a{
  color: #fff !important;
}
.navbar a:hover{
  background-color: #87CEFA !important;
  color: #fff !important;
}
.modal-header{
  background:#9F81F7;color:#fff
}
.sidebar-nav-menu i {
  color:#fff;

}
.btn-action{
  cursor:pointer;
}
.btn-action span{
  
}