/*
http://pea.rs/forms/multi-left-labels

<form action="/">
<fieldset>
<label for="name">Name</label>
<input type="text" id="name" class="form-text" />
<p class="form-help">This is help text under the form field.</p>
</fieldset>

<fieldset>
<label for="email">Email</label>
<input type="email" id="email" class="form-text" />
</fieldset>

<fieldset>
<label for="gender">Gender</label>
<select id="gender">
<option>Male</option>
<option>Female</option>
<option>Cylon</option>
</select>
</fieldset>

<fieldset class="form-actions">
<input type="submit" value="Submit" />
</fieldset>
</form>		
*/

.login-off .login, .login-on #login {
    display:block;   
}

.login-on .login, .login-off #login {
    display:none;   
}
/*
.form {
    background-color: #f0f0f0;
    padding:10px;
    border-radius: 6px;
    margin-top:6px;
}
*/
form.form-small label {
    color:#000;
}
/*
form.form-small input, input.small-input {
    font-size:11px;
    padding: 3px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color:#222;
}
*/
form.form-small input, input.small-input {
    font-size: 11px;
    padding: 0px;
    border: 0;
    color: #222;
    border-bottom: 1px dotted #D1D1D1;
}


form.form-small fieldset input:focus, input.small-input:focus  {
    background: #fff;
}


.green {
    color:green;
}

.red {
    color:red;  
}

.cartouche {
    background-color:#EAEAEA;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    height:60px;
    margin-bottom:1em;
    line-height:60px;
    padding-left:20px;
    font-size:18px;
}

.cartouche-bouton {
    border-radius: 0 6px 6px 0;
    -moz-border-radius: 0 6px 6px 0;
    -webkit-border-radius: 0 6px 6px 0; 
    background-color:#d0d0d0;
    float:right;
    width:60px;
    height:60px;
    text-align:center;
    line-height:60px;
    font-size:20px;
    display:block;
}

.bouton-corriger {
    background-color: #ff8000;
}

.bouton-ok {
    background-color: #03c703;
    color:#fff;
}

.bouton-proposer {
    background-color: #03c703;
    color:#fff;
    animation: green-glowing 2000ms infinite;
}

@keyframes green-glowing {
    0% { background-color: #03c703;  }
    50% { background-color: #018d01;  }
    100% { background-color: #03c703;  }
}

.bouton-attente {
    background-color: #03c703;
}

.cartouche-bouton.bouton-corriger:hover {
    background-color:#b55b00;
}

a.cartouche-bouton:hover .fa {
    color:#fff;
}

.java_ok .upload-input, .java_ok .change-button {
    display:none;   
}

.java_ok .upload-button {
    display:inline;   
}

a.button {
    text-decoration: none;   
}

.change-button {
    animation: glowing 2000ms infinite;
}

@keyframes glowing {
    0% { background-color: #f8f8f8;  }
    50% { background-color: #d6d6d6;  }
    100% { background-color: #f8f8f8;  }
}

#valider_check {
    font-family: 'robotobold',sans-serif;  
}


.select_statut {
    font-family: 'robotobold',sans-serif;  
    padding:4px 8px;
    color:#333;
}

.doc-form, .statut-form {
    display: flex;
    justify-content: flex-end;
}

.form-bloc {
    padding-left:10px;   
}

.file-list {
    /*display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    */
    margin:10px 0;
}

.file-list li {
    margin-bottom:10px;
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid #DDD;
    background: #F5F5F5 none repeat scroll 0% 0%;
    margin-bottom:0.5em;
    border-radius: 4px;
    box-sizing: border-box;
    position: relative;
}

.file-icone {
    font-size:20px;
    text-align:center;
    padding-right:0.5em;
}

.file-delete {
    position:absolute;
    top:8px;
    right:10px;
    font-size:20px;
    background-color:red;
    color:#fff;
    width:22px;
    height:22px;
    display:block;
    line-height:20px;
    text-align: center;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.java_ok .absent .upload-submit, .java_ok .absent .delete-button, .selectionne .delete-button, .selectionne .select_statut, .java_ok .present .upload-submit, .java_ok .present .upload-button, .absent .select_statut  {
    display:none;
}

.java_ok .selectionne .upload-submit {
    display:inline;
}
nav[role="navigation"] {
    font-family: 'robotobold';
}

nav[role="navigation"] li {
    float: left;
    margin: 0 1%;
    font-size: 16px;
    width:31.33333%
}
nav[role="navigation"] li a {
    display:block;
    text-decoration: none;
    color: #5A5A5A;
    background: none repeat scroll 0% 0% rgb(234, 234, 234);
    border-radius: 4px 4px 0px 0px;
    -moz-border-radius: 4px 4px 0px 0px;
    -webkit-border-radius: 4px 4px 0px 0px;
    height: 40px;
    line-height: 40px;
    padding-left:20px;
}

nav[role="navigation"] li a span {
    width:40px;
    height:40px;
    float:right;
    color:#fff;
    border-radius: 0 4px 0px 0px;
    -moz-border-radius: 0 4px 0px 0px;
    -webkit-border-radius: 0 4px 0px 0px;
    text-align:center;
}

nav[role="navigation"] li a span.ok {
    background-color:green;   
}

nav[role="navigation"] li a span.control {
    background-color:orange;   
}

nav[role="navigation"] li a span.problem {
    background-color:red;   
}

nav[role="navigation"] li a:hover, nav[role="navigation"] li a:focus {
    background: none repeat scroll 0% 0% rgb(240, 240, 240);
    color: #333;
}
nav[role="navigation"] li a:active {
    background: #888;
}
nav[role="navigation"] li a.active {
    color: #fff;
    background: none repeat scroll 0% 0% #4B4B4B;
}

nav[role="navigation"] li a .smallone {
    color:green; 
    padding-left:6px;
}
/* form left label */
form.leftlabel fieldset input.form-text.erreur,
form.leftlabel fieldset textarea.erreur, form.leftlabel fieldset select.erreur  {
    border:1px solid red;   
}

form.leftlabel .radio ul.erreur label {
    color:red;
}

form.leftlabel h2 {
    margin-bottom:0.3em;   
}

form.leftlabel fieldset.separateur {
    padding-top:2em;   
}

form.leftlabel fieldset {
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
    font-size: 14px;
    border-bottom: 1px solid #eee;
}
form.leftlabel fieldset.form-actions {
    margin: 0 0 0 20%;
    padding: 0;
    border: none;
}
form.leftlabel fieldset.check {
    padding-left: 25%;	
}
form.leftlabel fieldset label {
    float: left;
    width: 22%;
    margin: 4px 2% 5px 0;
    font-weight: bold;
}
form.leftlabel fieldset.check label {
    display: inline;
    float: none;
    width: auto;
    font-weight: normal;
}
form.leftlabel fieldset.radio ul li label {
    display: inline;
    float: none;
    width: auto;
    font-weight: normal;
}
form.leftlabel fieldset input.form-text,
form.leftlabel fieldset textarea {
    display: block;
    width: 60%;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
form.leftlabel fieldset input.form-text:focus {
    border: 1px solid #ccc;
    background: #fff;
}
form.leftlabel fieldset textarea {
    height: 150px;
}
form.leftlabel fieldset select {
    min-width: 25%;
    margin: 0;
}

form.leftlabel fieldset.date select {
    max-width: 5em;
    margin: 0px;
    min-width: 10%;
}
form.leftlabel fieldset.radio ul {
    margin: 5px 0 0 24%;
}
form.leftlabel fieldset.radio ul li {
    margin: 0 0 5px 0;
}
form.leftlabel fieldset.radio ul li:last-child {
    margin: 0;
}
form.leftlabel fieldset p.form-help, p.form-help {
    margin: 5px 0 0 24%;
    font-size: 12px;
    color: #999;
}
form.leftlabel input[type="submit"], .button, input.generic-input  {
    margin: 0;
    padding: 5px 10px;
    font-size: 14px;	
    font-family: 'robotobold',sans-serif;
    border: 1px solid #ccc;
    background: #eee;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    letter-spacing:0.05em;
    color:#333;
}
form.leftlabel input[type="submit"]:hover,
form.leftlabel input[type="submit"]:focus {
    border: 1px solid #bbb;
    background: #e5e5e5;
}
form.leftlabel input[type="submit"]:active {
    border: 1px solid #ccc;
    background: #eee;
}	

/* form toplabel */
form.toplabel fieldset {
    margin: 0 0 20px 0;
    font-size: 14px;
}
form.toplabel fieldset.form-actions {
    margin: 0;
}
form.toplabel fieldset label {
    display: block;
    margin: 0 0 5px 0;
    font-weight: bold;
}
form.toplabel fieldset.check label {
    display: inline;
    font-weight: normal;
}
form.toplabel fieldset.radio ul li label {
    display: inline;
    font-weight: normal;
}
form.toplabel fieldset input.form-text,
form.toplabel fieldset textarea {
    display: block;
    width: 100%;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ddd;
    background: #f6f6f6;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-sizing: border-box;

}
form.toplabel fieldset input.form-text:focus {
    border: 1px solid #ccc;
    background: #fff;
}
form.toplabel fieldset textarea {
    height: 150px;
}
form.toplabel fieldset select {
    min-width: 25%;
    margin: 0;
}
form.toplabel fieldset.radio ul {
    margin-top: 5px;
}
form.toplabel fieldset.radio ul li {
    margin: 0 0 5px 0;
}
form.toplabel fieldset.radio ul li:last-child {
    margin: 0;
}
form.toplabel fieldset p.form-help {
    margin: 5px 0 0 0;
    font-size: 12px;
    color: #999;
}
form.toplabel input[type="submit"] {
    margin: 0;
    padding: 5px 10px;
    font-size: 12px;	
    border: 1px solid #ccc;
    background: #777;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color:#fff;
}
form.toplabel input[type="submit"]:hover,
form.toplabel input[type="submit"]:focus {
    border: 1px solid #bbb;
    background: #444;
}
form.toplabel input[type="submit"]:active {
    border: 1px solid #ccc;
    background: #eee;
}	

@media screen and (max-width: 600px) {
    form fieldset label {
        display: block;
        float: none;
        width: auto;
        margin: 0 0 5px 0;
    }
    form fieldset.form-actions,
    form fieldset.check,
    form fieldset.radio ul,
    form fieldset p.form-help {
        margin-left: 0;
        padding-left: 0;
    }
    form fieldset input.form-text,
    form fieldset textarea {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
}				