html, body { min-height: 100%; }
body { background: linear-gradient(#383c44, #181c24); background-attachment: fixed; margin: 0; font-family: 'Montserrat', sans-serif; color: #ccd; padding:2em; margin-top:3em; }
.wrapper { max-width: 1000px; margin:0 auto; padding:0 3em; }

h1 { margin:2em 0; color:white; }
h2 { margin-top:3em;  }
a { color:red; transition:0.3s; cursor:pointer; text-decoration: none; }
a:not(.bouton):hover { text-decoration:underline; }
img { max-width: 100%; }
hr { border:none; height:1px; width: 50%; margin:5em auto; background-color: #2b71bb; }
.center { text-align:center; }
.capitalize { text-transform:capitalize; }

.status { font-size:1.5em; color:orangered; font-weight: bold;}
.menu { background:#222; padding:1em; position:absolute; top:0; right:0; left:0;  text-align:right; box-shadow: 0 0 2px rgba(0,0,0,.5); font-size:0.9em;  }
.menu .bouton { margin:0 1em; }
.menu .bouton.on { background:black; }
.loginlink { position:absolute; top:10px; right:20px; font-size:0.8em; text-transform: uppercase;}

.connexion { text-align:center; }
.small.q { max-width: 550px; margin:1em auto; text-align:center;}

.days { display:flex; flex-wrap: wrap; }
.days label { display:inline-block; border-bottom:1px solid rgb(102, 102, 107); width: 95%; padding:0.15em 0.5em; position:relative; border-radius:5px; }
.days .header { text-align:center; font-weight: bold; text-transform: uppercase; letter-spacing: 0.25em;  }
.days .day h3 { margin-top:0; text-transform: uppercase; font-size:1em; }

.days .day { width: 17%; padding: 1% 1%; margin:0.5%; border-radius:5px; background:#383c44; position:relative; }
.days .day a.liste { position:absolute; top:10px; right:10px; font-size:0.7em; }
.days .day:hover { background:#484c54; transition:0.5s; }
.days .day .places { opacity:0; font-size:0.75em; position:absolute; right:10px; top:8px; }
.days .day .titre { opacity:0.3; }
.days .day .titre:hover { opacity:1; }
.days .day input:checked ~ .places { opacity:1; font-weight: bold; }
.days .day input:checked ~ .titre { opacity:1;}

.liste-inscriptions h1 { text-transform: capitalize;  }
.liste-inscriptions .columns { position:absolute; right:30px; top:150px; }

table { font-size:0.85em; width: 100%; }
table thead td { text-transform: uppercase;font-weight: bold; border-bottom: 1px solid #777; }
table td { padding:0.25em 1em; border-bottom:1px dashed #383c44; }
table td .modif { font-size:0.8em; }
table tr:hover { background:#282c34;}
table.sortable thead td { cursor:pointer; }

.bouton { background:red; color:white; border-radius: 5px; padding:1em 2em; font-weight: bold; display:inline-block; cursor:pointer; text-decoration:none; border:none; transition:0.5s; }
.bouton i { margin-right:0.75em; }
.bouton:hover { background: black; }
.bouton.small { font-size:0.75em; }

.colonnebouton { width: 20px; }
.colonnebouton .bouton { background:none; padding: .5em; font-size:1em; }
.colonnebouton .bouton i { margin:0; transition:0.5s; }
.colonnebouton .bouton:hover i { color:Red; }

input { font-family: 'Montserrat', sans-serif; }
input[type=text], input[type=password], select { display:inline-block; padding: 0.5em 1em; background:none; border:none; border-bottom:1px solid #777; color:white; font-size:1.15em; margin-top:1em; box-sizing: border-box; width:100%; }
input[type=checkbox] { cursor:pointer; }
select { cursor:pointer; border:1px solid #777; border-radius:5px; }
select option { background:#383c44; font-size:1em; text-transform: capitalize; }
input[type=text].warning { border-color:red; }
.q.warning { border:3px solid red; }
label { cursor:pointer; display:block; }

.fa-laptop { font-size:0.85em; margin-left:0.5em; opacity:0.5;}

textarea:focus, input:focus{ outline: none; border-bottom-color: azure;  }
input[type=radio] { margin-top:1em; }

.q { box-shadow:0 0 5px rgba(0,0,0,.2); border-radius:5px; background:#383c44; padding: 2em; margin:1em; text-align:left; color:white; }
.q:hover, .q:focus { background: #484c54; }

.sousquestion { display:none; font-size: 0.9em;padding: 2em;margin: 1em;border-radius: 5px;border-left: 3px solid white; }

.publique { background-image: linear-gradient(#eaeef5, #7fa8ff); color:#333; }
.publique h1 { color:#333; }
.publique a { color: #084486; }
.publique .bouton { background:#084486; color:white; }
.publique .bouton:hover { background:black; }
.publique.accueil { text-align: center; }
.publique.accueil .bandeau { background:#7fa8ff; padding:1em 4em 4em 4em; color:white; margin:5em 0 0 0; display:inline-block; border-radius:5px; }
.publique.accueil .large { font-size:1.25em; }

@media only screen and ( max-width:1500px ) {
    .days .header, .days .day.empty { display:none; }
    .days .day { width: 30%; }
}
  
@media only screen and ( max-width:1000px ) {
    .days .day { width: 100%; }
}

@media only screen and ( max-width:800px ) {
    body { padding:2em 1em; }
    .wrapper { padding: 0; }   
}