#body {
  padding-top:1rem;
  max-width:1030px;
  margin:auto;
}

header {
  margin:0 2rem 3rem 2rem;
  position:relative;
  z-index:60;
}
header img {
  margin-bottom:1rem
}

.bonjour {
  margin-bottom:1.5rem;
}

.block {
  padding:2rem 2rem 2rem 2rem;
  margin-bottom:2rem;
}

.block > *:last-child {
  margin-bottom:0;
}

h2 {
  margin-bottom:1.5rem;
}

.block.login {
  max-width: 30rem;
  margin:0 auto 3rem auto;
}

.block.login a.btn {width:100%;}
.block.login a.underline {display:block;}

/*************************** SPINNER ****************************/
spinner {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:50;
  background:rgba(255,255,255,0.7);
}

spinner svg {
  width:10rem;
  height:10rem;
  margin-left:calc(50vw - 5rem);
  margin-top:calc(50vh - 5rem);
}

/*************************** HOME ****************************/
form.code input[type=submit] {
  margin-left:0.5rem;
}

form.code input[type=text]{
  width:calc(100% - 4rem);
  max-width: 28rem;
}

a.more {display:inline-block;}

/************************** TABLE ***********************/

.line {
  border-top-width:1px;
  border-top-style: solid;
  height:3.2rem;
}
.line.exited .col-code {text-decoration:line-through}
.col-code {
  width:50%;
}

.col-day, .col-date, .col-group {
  text-align:center;
}

.col-day {
  width:5rem;
  -ms-flex-negative:0;
  flex-shrink:0;
}

.col-group {
  width:10rem;
  -ms-flex-negative:0;
  flex-shrink:0;
}
.col-group a {
  padding:0.6rem;
  border-style: solid;
  border-width: 2px; 
}

.col-date {
  width:12rem;
  -ms-flex-negative:0;
  flex-shrink:0;
}

.col-update {
  width:5rem;
  -ms-flex-negative:0;
  flex-shrink:0;
  text-align:right;
  padding-right:1rem;
}

/**************************** FORM *********************************/

a.back {
  display:inline-block;
  margin-bottom:1rem;
}

.loading > form {opacity:0.5;}

form {transition: opacity 0.2s;}

user h2, patient h2, event h2 {text-align:center;}

h2 + form {margin-top:3rem;}

.field {
  margin:0 auto 2rem auto;
  max-width:40rem;
}

.field label {margin-bottom:0.5rem;}

.field input, .field .btn, .field select, .field textarea, .field label + div  {
  width:100%;
  margin-right:0;
}
input[type=checkbox] {
  width:2rem;
}
.block.bg-dark p {
  text-align:center;
  margin-bottom:1rem;
}
.block.bg-dark .btn {
  margin-top:1rem;
  margin-bottom:0;
}


.declarations > a {
  margin-top:1rem;
  display:block;
}

@media screen and (max-width:550px) {
  .col-date {
    display:none;
  }
}
@media screen and (max-width:940px) {
  .col-day {
    display:none;
  }
  .bonjour {margin-left:2rem;}
}

@media screen and (min-width:768px), screen and (min-width:550px) and (orientation: landscape) {
  .block:not(.login) .field label {
    text-align:right;
    width:10rem;
  }
  .block:not(.login) .field input:not([type=checkbox]), .block:not(.login) .field .btn, .block:not(.login) .field select, .field label + div, .field textarea  {
    width:calc(100% - 12rem);
    min-width: 10rem;
  }
  
}

@media screen and (min-width:940px){
  .block:not(.login) .field {
    position:relative;
    left:-6.5rem;
  }
  header {
    margin-left:0;
    margin-right:0;
  }
}