body { padding: 0; margin: 0; background-color: #d7d7d7; font-family: Quicksand, sans-serif; }
.page-header { position: fixed; background-color: white; margin: 0; left:0; top: 0; width: 100%;  }
.page-header .logged-in-user { float: right; margin: 10px; display: none;}
.page-header .selection { float: right; margin: 10px;}
.page-header .sel-count { color: rgb(51, 122, 183) !important; border: none; background: none !important; cursor: pointer;  }
.page-header .sel-count:hover { text-decoration: underline; color:rgb(241, 101, 73); }
.page-header .logo {width:64px; vertical-align: middle; margin: 5px; float: left;} 
.page-header button { padding: 10px; text-align: center; display: inline-block; color: white; 
                      font-weight: bold; background-color: rgb(51, 122, 183); border: none;
                      margin: 0; border-radius: 3px; cursor: pointer; }
.page-header button:hover { background-color: rgb(241, 101, 73); }
.page-header .ieps-name { display: inline-block; margin: 10px 0 0 0; }
.page-header .ieps-name+br+span { display: inline-block; font-size: 12px;}
.page-header .ieps-name+br+span > a { text-decoration: none; color: black;}
.page-header .ieps-name+br+span > a:hover { text-decoration: underline;}


.container { text-align: center; justify-content: center !important; margin: 100px auto; }

.params { background-color: white; padding:20px; width:600px; text-align: left; margin: 0 auto;}
.params select { display: block; width: 100%; padding: 5px; margin-top: 10px;}

.calendrier { width:600px; font-family: Quicksand, sans-serif; background-color: white; margin: 0 auto; padding:20px; }
.calendrier .vue-mois > table { width: 100%; }
.calendrier .vue-mois .mois-select { text-align: center; font-size: 14px; font-weight: bold; margin-bottom: 5px;}
.calendrier .vue-mois .mois-select span { padding: 10px; margin: 0 2px; }
.calendrier .vue-mois .mois-select span.mois { display: block }
.calendrier .vue-mois .mois-select span.prev { float: left; cursor: pointer; display: inline-block; cursor: pointer; }
.calendrier .vue-mois .mois-select span.next { float:right; cursor: pointer; display: inline-block; cursor: pointer; }
.calendrier .vue-mois .mois-select span.prev:hover,
.calendrier .vue-mois .mois-select span.next:hover { color: whitesmoke; }
.calendrier .vue-mois thead tr:first-child,                                                                                
.calendrier .vue-mois thead tr:first-child+tr { display: none; }                                                                                 
.calendrier .vue-mois .jours-sem th { background-color: rgb(51, 122, 183); color:white; padding: 2px 5px; }
.calendrier .vue-mois td { position:relative; width: calc(100% / 7); text-align: center; vertical-align: middle; padding: 1px; color: #ddd; background-color: whitesmoke; line-height: 40px; }
.calendrier .vue-mois td.autre-mois { color: transparent; background-color: transparent; }
.calendrier .vue-mois td.has-plage, 
.calendrier .vue-mois td.has-rdv  { background-color: rgb(190,213,240); color: #333; font-weight: bold; cursor:pointer; }
.calendrier .vue-jour { display: none; }
.coord .back { text-align: center; font-size: 14px; font-weight: bold; padding: 10px; cursor: pointer; margin-bottom: 5px; color: rgb(51, 122, 183)}
.calendrier .vue-jour .back { text-align: center; font-size: 14px; font-weight: bold; padding: 10px; cursor: pointer; margin-bottom: 5px; color: rgb(51, 122, 183)}
.coord .back:hover,
.calendrier .vue-jour .back:hover { color: rgb(241, 101, 73); }
.calendrier .vue-jour .plage > td { text-align: left; vertical-align: top; font-size: 12px; }

.calendrier .vue-jour thead tr { display: table-row-group;}
.calendrier .vue-jour tbody { text-align: left;}
.calendrier .vue-jour tr { display: inline-block;}
.calendrier .vue-jour td:first-child { display: inline-block; }
.calendrier .vue-jour span.heure { display: inline-block; padding: 10px 20px; margin: 2px; background-color: rgb(190,213,240); border-radius: 4px; cursor: pointer; font-weight: bold; }
.calendrier .vue-jour td+td { display: none;}
.calendrier .vue-jour .add-part { display: none; }

.coord, .confirmation { width:600px; font-family: Quicksand, sans-serif; background-color: white; margin: 0 auto; padding:20px;  }
.coord { display: none; }
.coord > strong { text-align: left; display: block; }
.coord input { padding: 5px; width: 250px; border-radius: 3px;}
.coord textarea { padding: 5px; width: 520px; height:60px; border-radius: 3px;}

#confirm { padding: 20px 0; text-align: center; display: block; color: white; font-weight: bold; background-color: rgb(241, 101, 73); border: none; width: 100%; margin: 20px 0; border-radius: 3px; cursor: pointer; }
#confirm:hover { background-color: rgb(190,213,240);}

.confirmation >div { text-align: left;}

.error { display:none; background-color: darkred; text-align: center; color: white; font-weight: bold; padding: 10px; margin: 10px 0 20px;}