* {
    font-family: 'Roboto', sans-serif;
}
body{
    padding-left: 16px;
    padding-right: 16px;
}
.complete{
    text-decoration: line-through;
}
.message{
    animation: cache 3s forwards;    
    
}
@keyframes cache {
    0%{
        opacity: 1;
    }
    90%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }

}

.entete {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 64px;
    margin: 0px;
    padding: 0px;
    background-color: #dddddd;
    padding-left: 24px;
    display: flex;

}
.filler{
    flex-grow: 1;
}
.entete h1{
    font-size: 24px;
}
.entete a{
    text-decoration: none;
}

.menu_principal{
    margin-right: 24px;
}
.menu_principal ul
{
    
    margin-left: 0px;
    padding-left: 0px;
    display: flex;
    flex-direction: row;
}

.menu_principal ul li
{
    list-style-type: none;
    margin-right: 24px;
}

[data-vide]{
    cursor: not-allowed;
}
[data-vide="0"]{
    cursor: pointer;
}

.serie_ajouter article, .serie_modifier article, .course_ajouter article, .course_modifier article{
    margin-top: 8px;
}

.serie_ajouter label, .course_ajouter label, .serie_modifier label, .course_modifier label {
    width: 240px;
    display: inline-block;
}

.ZoneBouton{
    display: flex;
}
.ZoneBouton button{
    margin-right: 16px;
}

.spinner {
    position: fixed;
    z-index: 99999;
    top:0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    background-color: #cccccc;
    opacity: 0.2;
}

.spinner.hide {
    display: none;
}


/* Source : https://loading.io/css/ */

.spinner .lds-ellipsis {
    position: absolute;
    
    width: 80px;
    height: 80px;
    top: 50%;
    left:50%;
  }
  .spinner .lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #000;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .spinner .lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
  }
  .spinner .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .spinner .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .spinner .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(24px, 0);
    }
  }