body {
    color:#888;
}

.conteneur_tous_les_controles {
    display:flex;
    justify-content: space-between;
    flex-direction:row;
    flex-wrap: wrap; /* permet de créer des nouvelles lignes si espace horizontal insuffisant */
}

#conteneur_boutons_editeurs {
    margin-left:20px;
}


.donnee {
    font-size:14px;
    font-family: arial;
    color:#268;

}

*:not(textarea), img {
    -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
    user-select: none;
    user-drag: none; 
    -moz-user-select: none;
    -webkit-user-drag: none;
} 

#canva_pointages {
    cursor:url(/i/rond_.png) 4 4, pointer;
}
#editeur_code {
    width:90%;
    height:250px;
}

.numero_canva {
    position:relative;
    top:0px;
    left:4px;
    pointer-events: none;
    color:#842;
    font-size:10px;
}
.aide {
    background-color: rgba(200,230,200,0.9);
    position:absolute;
    left:-360px;
    top:40px;
    width:400px;
    padding: 4px;
}

.conteneur_controles {
    margin: 4px;
    border:solid #888 1px;
    padding:4px;
    width:130px;
    background-color: rgba(200,220,240,0.2);
}
            
            
            

.progress-bar {
    width: 0%;
    height: 8px;
    background-color: #4A4;
    opacity:0;
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -moz-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-striped {
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -moz-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 20px 20px;
}
@keyframes progress-bar-stripes {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 40px 0;
    }
}


input:invalid {
  box-shadow:none; /* à cause de Firefox */
}




/* --------------- pour OLED -----------.*/
       .allume {
           fill:#ADE3E6;
       }
       .eteint {
           fill:#000;
       } 
       .remplir_allume {
        background-image: url("/arduino/i/remplir_allume.JPG");
        background-size: 16px;
        border-radius: 13px / 10px;
        padding:0;
        } 
       .remplir_eteint {
        background-image: url("/arduino/i/remplir_eteint.JPG");
        background-size: 16px;
        border-radius: 13px / 10px;
        padding:0;
        }    
       .inverser_allume_eteint {
        background-image: url("/arduino/i/inverser_allume_eteint.JPG");
        background-size: 32px 16px;
        border-radius: 13px / 10px;
        padding:0;
        width: 44px;
        }     
        
        option {
            font-size: 10px;
            display: block;
        }