/* cadre droit en gris
$metiers_color_light: #f3e5f5;
$metiers_color_strong: #e1bee7;
$metiers_typo_light: #ab47bc;
$metiers_typo_strong: #9227b0;
*/
#separateur_passeport {
  display: block;
  position: relative;
  top: -24px;
  margin-bottom: -12px;
}

#rapport_echec {
  display: block;
  width: 100vw;
  min-height: 40vh;
  line-height: 72px;
  font-size: 24px;
  background: #d84315;
  margin-top: 30vh;
  padding-top: 78px;
  text-align: center;
  color: white;
  font-weight: bold;
  padding-bottom: 24px;
}

#rapport_echec ul {
  display: block;
  width: 60%;
  margin: auto;
  font-weight: normal;
  line-height: 24px;
  text-align: left;
}

#rapport_echec ul > li:last-child {
  padding-top: 36px;
  text-align: center;
  list-style-type: none;
}

#rapport_echec h4 {
  border: 1px dashed white;
  width: 450px;
  padding: 6px;
  margin: 0px auto;
  margin-bottom: 18px;
  display: block;
}

#rapport_echec a {
  border: 1px solid #2196f3;
  background: #42a5f5;
  color: #e3f2fd;
  height: 36px;
  line-height: 36px;
  padding: 3px 12px;
  width: 250px;
  font-variant-caps: small-caps;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 24px;
}

#rapport_echec a:hover {
  border: 1px solid #2196f3;
  background: #e3f2fd;
  color: #42a5f5;
}

pre {
  display: block;
  z-index: 20000;
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  width: 300px;
}

h7 {
  display: block;
  position: fixed;
  top: 30px;
  left: -50px;
  width: 180px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: center;
          transform-origin: center;
  background: red;
  color: white;
  font-variant: small-caps;
  z-index: 10000;
  text-align: center;
}

.message_attente {
  display: block;
  width: 600px;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  margin: auto;
  top: 250px;
  display: block;
  position: relative;
  text-align: center;
}

html {
  background: #f8fcff;
  width: 100%;
  color: #1565c0;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html .print_mainlogout {
  display: inline-block;
  position: fixed;
  width: 92px;
  height: 24px;
  top: 71px;
  right: 18px;
  vertical-align: top;
  text-align: center;
  color: #DB2222;
  cursor: pointer;
  background: top left url("../img/btn_logout_v3.png") no-repeat;
  font-size: 0px;
}

html .print_mainlogout:hover {
  background-position: top right;
}

html .print_impression {
  display: inline-block;
  position: fixed;
  width: 92px;
  height: 24px;
  top: 71px;
  right: 118px;
  vertical-align: top;
  text-align: center;
  color: #DB2222;
  cursor: pointer;
  background: top left url("../img/btn_print_v3.png") no-repeat;
  font-size: 0px;
}

html .print_impression:hover {
  background-position: top right;
}

html .tuto {
  position: relative;
  border: 1px dashed #1565c0;
  border-radius: 5px;
  overflow: hidden;
  display: inline-block;
  width: 360px;
  margin: auto;
  margin-right: 20px;
  padding: 12px;
  height: 190px;
  width: 800px;
  height: 400px;
}

html .tuto > div {
  display: inline-block;
  width: 380px;
  height: 300px;
  vertical-align: top;
  float: left;
  text-align: center;
}

html .tuto > div > h2 {
  display: block;
  margin-top: 0px;
  margin-bottom: 12px;
  text-align: center;
  width: 380px;
}

html .tuto > div > a {
  margin: auto;
}

html .tuto .cadre_gauche {
  margin-right: 20px;
  padding-left: 20px;
  width: 360px;
}

html .tutoFirstTime {
  height: 520px;
}

html .tutoFirstTime > iframe {
  margin: auto;
  position: relative;
}

html .entete_cadre {
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  color: #607d8b;
  margin: 0px;
  height: 48px;
  line-height: 48px;
  background: 12px 12px url("../img/ico_look_down.png") no-repeat, #cfd8dc;
}

html .cadre_accueil {
  background: #f8fcff;
  text-align: center;
  border-radius: 5px;
  overflow: hidden;
  width: calc(90vw);
  height: calc(90vh);
  margin: auto;
  display: block;
}

html .cadre_accueil > h1 {
  color: #1565c0;
  display: block;
  text-align: center;
  background: top left url("../img/logo_forum.jpg") no-repeat;
  line-height: 85px;
  font-size: 72px;
  margin: 24px 0px;
}

html .cadre_accueil > h1 > span {
  display: block;
  line-height: 24px;
  font-size: 24px;
  margin-top: 18px;
}

html .cadre_accueil > h1 > span:nth-child(4) {
  font-weight: normal;
  font-style: italic;
  color: #1976d2;
}

html .cadre_accueil > form {
  position: relative;
  border: 1px dashed #1565c0;
  border-radius: 5px;
  overflow: hidden;
  display: inline-block;
  width: 360px;
  margin: auto;
  padding: 12px;
  height: 190px;
}

html .cadre_accueil > form > h2 {
  display: block;
  margin-top: 0px;
  margin-bottom: 12px;
  text-align: center;
}

html .cadre_accueil > form > label {
  display: inline-block;
  width: 140px;
  text-align: right;
}

html .cadre_accueil > form > input {
  display: inline-block;
  width: 200px;
}

html .cadre_accueil > form > .btn_submit {
  display: block;
  position: relative;
  margin-top: 18px;
  margin: auto;
  border: 3px solid #1565c0;
  background: white;
  color: #1565c0;
  border-radius: 5px;
  cursor: pointer;
}

html .cadre_accueil > form > .btn_submit:hover {
  background: #1565c0;
  color: white;
  font-weight: bold;
}

html .cadre_accueil > ul {
  display: block;
  list-style-type: none;
  padding: 0px;
  margin-top: 6px;
  text-align: center;
}

html .cadre_accueil > ul > li {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 18px;
  border-radius: 5px;
  overflow: hidden;
}

html .cadre_accueil > ul > li > a {
  display: block;
  width: 100%;
  height: 100%;
  background: green;
  font-size: 0px;
}

html .cadre_accueil > ul > li .link_oratoire {
  background: center center url("../img/logo_oratoire.jpg") no-repeat;
}

html .cadre_accueil > ul > li .link_apel {
  background: center center url("../img/logo_apel.jpg") no-repeat;
}

html #fenetre_mainSave {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
  margin: 0px;
  opacity: 0.95;
  background: white;
  z-index: 500;
  overflow: scroll;
}

html #fenetre_mainSave > #rapport {
  display: block;
  width: 100vw;
  height: 30vh;
  line-height: 72px;
  font-size: 24px;
  background: #8bc34a;
  margin-top: 30vh;
  padding-top: 78px;
  text-align: center;
  color: #f1f8e9;
  font-weight: bold;
}

html #fenetre_mainSave > #rapport > a {
  border: 1px solid #2196f3;
  background: #42a5f5;
  color: #e3f2fd;
  height: 36px;
  line-height: 36px;
  padding: 3px 12px;
  cursor: pointer;
}

html #fenetre_mainSave > #rapport > a:hover {
  border: 1px solid #2196f3;
  background: #e3f2fd;
  color: #42a5f5;
}

html #fenetre_mainSave > #rapport_voleur {
  display: block;
  width: 100vw;
  height: 30vh;
  line-height: 72px;
  font-size: 24px;
  background: #d84315;
  margin-top: 30vh;
  padding-top: 78px;
  text-align: center;
  color: white;
  font-weight: bold;
  padding-bottom: 24px;
}

html #fenetre_mainSave > #rapport_voleur > a {
  border: 1px solid #2196f3;
  background: #42a5f5;
  color: #e3f2fd;
  height: 36px;
  line-height: 36px;
  padding: 3px 12px;
  width: 250px;
  cursor: pointer;
}

html #fenetre_mainSave > #rapport_voleur > a:hover {
  border: 1px solid #2196f3;
  background: #e3f2fd;
  color: #42a5f5;
}

html .alerte_nearlyfull {
  color: #ff9900;
  font-weight: bold;
}

html .alerte_full {
  color: #DB2222;
  font-weight: bold;
}

html .retour_inscriptions {
  display: block;
  margin: auto;
  width: 350px;
  height: 24px;
  line-height: 24px;
  border: 2px solid #b4c7e5;
  text-align: center;
  cursor: pointer;
}

html .retour_inscriptions:hover {
  color: white;
  background: #b4c7e5;
}

html .logout {
  display: block;
  border: 2px solid #DB2222;
  height: 24px;
  line-height: 24px;
  width: 150px;
  margin: 30px;
  text-align: center;
  color: #DB2222;
  cursor: pointer;
}

html .logout:hover {
  color: white;
  background: #DB2222;
}

html > body {
  margin: 0px;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

html > body .form_contact {
  width: 100%;
  max-width: 900px;
  color: #0070c0;
  margin: auto;
  padding: 12px 0px;
}

html > body .form_contact label {
  display: inline-block;
  width: 200px;
  margin-right: 24px;
  margin-bottom: 12px;
}

html > body .form_contact input {
  display: inline-block;
  width: 400px;
  margin-bottom: 12px;
}

html > body .form_contact textarea {
  min-height: 350px;
  width: 90%;
}

html > body .form_contact #submit_contact {
  font-weight: bold;
  border: 1px solid #1565c0;
  background-color: #b4c7e5;
  width: 90%;
  height: 48px;
  line-height: 48px;
  margin-bottom: 72px;
  cursor: pointer;
}

html > body .form_contact #submit_contact:hover {
  border: 1px solid #7bc342;
  background-color: #dcedc8;
  color: #7bc342;
}

html > body .zap_video {
  text-align: right;
  display: none;
  width: 768px;
  color: #0070c0;
  font-weight: bold;
  text-decoration: none;
  width: 97%;
  padding-right: 3%;
  min-width: 400px;
  height: 40px;
  line-height: 40px;
  background: #0070c0;
  color: white;
  border: 1px solid #0070c0;
  position: relative;
  top: -490px;
}

html > body .zap_video:hover {
  color: #0070c0;
  border: 1px solid #0070c0;
  background: white;
}

html > body .mleg {
  display: block;
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 900px;
  text-align: justify;
}

html > body .legal {
  display: block;
  width: 100%;
  max-width: 900px;
  height: 36px;
  line-height: 36px;
  margin: auto;
  color: #0070c0;
  text-decoration: none;
  text-align: right;
  border-top: 2px solid #0070c0;
  position: relative;
  margin-top: 72px;
  position: fixed;
  bottom: 0px;
  right: 18px;
  background: rgba(255, 255, 255, 0.8);
}

html > body .legal:hover {
  color: #7bc342;
}

html > body .titre_video {
  width: 768px;
  display: block;
  margin: 12px 0px;
  text-align: center;
}

html > body .link_tutopdf {
  text-align: center;
  width: 334px;
  height: 189px;
  color: #0070c0;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #1565c0;
  color: #1565c0;
  line-height: 48px;
  font-size: 24px;
  font-weight: bold;
  font-variant-caps: small-caps;
  cursor: pointer;
  float: left;
  margin: 12px;
  background: center center url("../img/ill_tutopdf.png") no-repeat, #6692da;
}

html > body .link_tutopdf:hover {
  color: #7bc342;
  background-color: #dcedc8;
  border-color: #7bc342;
}

html > body .cadre_tuto_video {
  width: 334px;
  height: 189px;
  float: left;
}

html > body #header {
  background: #b4c7e5;
  color: white;
  display: block;
  position: fixed;
  height: 72px;
  width: calc(100vw);
  line-height: 66px;
  font-size: 36px;
  text-shadow: black 0.1em 0.1em 0.2em;
  padding: 0px;
  z-index: 400;
}

html > body #header > h1 {
  font-size: 36px;
  display: inline-block;
  margin-top: 0px;
  padding: 3px 12px;
  height: 66px;
  text-transform: uppercase;
}

html > body #header > h2 {
  position: fixed;
  right: 350px;
  font-size: 24px;
  margin-top: 0px;
  padding: 3px 12px;
  border-radius: 15px;
  height: 42px;
  line-height: 42px;
  top: 12px;
  padding-left: 60px;
  background: 6px center url("../img/ico_compte.png") no-repeat, #6692da;
}

html > body #header > a {
  font-size: 36px;
  display: inline-block;
  margin-top: 0px;
}

html > body #header .link_oratoire_mini {
  background: center center url("../img/logo_oratoire_mini.jpg") no-repeat;
  font-size: 0px;
  display: inline-block;
  height: 54px;
  width: 54px;
  border-radius: 54px;
  top: -6px;
  position: relative;
  margin-left: 0px;
  -webkit-box-shadow: 3px 2px 1px rgba(71, 129, 255, 0.2);
          box-shadow: 3px 2px 1px rgba(71, 129, 255, 0.2);
}

html > body #header .link_apel_mini {
  background: center center url("../img/logo_apel_mini.jpg") no-repeat;
  font-size: 0px;
  display: inline-block;
  height: 54px;
  width: 54px;
  border-radius: 54px;
  top: -6px;
  position: relative;
  margin-left: 0px;
  -webkit-box-shadow: 3px 2px 1px rgba(71, 129, 255, 0.2);
          box-shadow: 3px 2px 1px rgba(71, 129, 255, 0.2);
}

html > body #header .valider_choix {
  display: inline-block;
  position: fixed;
  width: 92px;
  height: 24px;
  top: 97px;
  right: 486px;
  vertical-align: top;
  background: left top url("../img/btn_valider_v3.png") no-repeat;
  font-size: 0px;
  cursor: pointer;
  z-index: 1;
}

html > body #header .valider_choix:hover {
  background-position: top right;
}

html > body #header .mainlogout {
  display: inline-block;
  position: fixed;
  width: 92px;
  height: 24px;
  top: 21px;
  right: 18px;
  vertical-align: top;
  text-align: center;
  color: #DB2222;
  cursor: pointer;
  background: top left url("../img/btn_logout_v3.png") no-repeat;
  font-size: 0px;
}

html > body #header .mainlogout:hover {
  background-position: top right;
}

html > body #header .tutoriel_pdf {
  display: inline-block;
  position: fixed;
  width: 92px;
  height: 24px;
  top: 21px;
  right: 218px;
  vertical-align: top;
  text-align: center;
  color: #DB2222;
  cursor: pointer;
  background: top left url("../img/btn_tuto_v3.png") no-repeat;
  font-size: 0px;
}

html > body #header .tutoriel_pdf:hover {
  background-position: top right;
}

html > body #header .contact_admin {
  display: inline-block;
  position: fixed;
  width: 92px;
  height: 24px;
  top: 21px;
  right: 118px;
  vertical-align: top;
  text-align: center;
  color: #DB2222;
  cursor: pointer;
  background: top left url("../img/btn_help_v3.png") no-repeat;
  font-size: 0px;
}

html > body #header .contact_admin:hover {
  background-position: top right;
}

html > body #header #save_loader {
  display: none;
}

html > body #liste_ateliers {
  background: #f9fafa;
  width: 347px;
  margin: 0px;
  list-style-type: none;
  float: right;
  padding: 0px;
  padding-right: 3px;
  color: #78909c;
}

html > body #liste_ateliers .alpha {
  display: none;
}

html > body #liste_ateliers li:nth-child(1 of li.alpha) {
  margin-top: 110px;
  position: relative;
}

html > body #liste_ateliers > li:first-child {
  z-index: 100;
}

html > body #liste_ateliers > li:first-child h2 {
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  color: #607d8b;
  margin: 0px;
  height: 48px;
  line-height: 48px;
  background: 12px 12px url("../img/ico_look_down.png") no-repeat, #cfd8dc;
  position: fixed;
  width: 350px;
  top: 72px;
  right: 0px;
  font-size: 14px;
  height: 100px;
}

html > body #liste_ateliers > li:last-child {
  margin-bottom: 48px;
}

html > body #liste_ateliers .par_domaines:nth-last-child(1) {
  background: red;
  border: 2px solid green;
  margin-bottom: 48px;
}

html > body #liste_ateliers > li:nth-child(2) {
  display: block;
  width: 346px;
  height: 62px;
  right: 0px;
  top: 105px;
  position: relative;
}

html > body #liste_ateliers > li:nth-child(2) > label {
  display: inline-block;
  top: 148px;
  width: 100px;
  height: 42px;
  line-height: 18px;
  text-align: center;
  border-radius: 5px;
  background: white;
  color: #607d8b;
  text-transform: lowercase;
  position: absolute;
  border: 3px solid #607d8b;
  font-style: italic;
  z-index: 110;
}

html > body #liste_ateliers > li:nth-child(2) > label:nth-child(2) {
  top: 112px;
  right: 220px;
  position: fixed;
}

html > body #liste_ateliers > li:nth-child(2) > label:last-child {
  top: 112px;
  right: 16px;
  position: fixed;
}

html > body #liste_ateliers > li:nth-child(2) > label:hover {
  background: #607d8b;
  color: white;
}

html > body #liste_ateliers > li:nth-child(2) > input {
  display: none;
}

html > body #liste_ateliers > li:nth-child(2) > input:checked + label {
  background: #607d8b;
  border: 3px solid #607d8b;
  color: #f9fafa;
  font-weight: bold;
  font-style: normal;
}

html > body #liste_ateliers > li:nth-child(3) {
  margin-top: 110px;
  position: relative;
}

html > body #liste_ateliers > li {
  font-size: 12px;
  position: relative;
  background: #f9fafa;
  /*
                >input:checked + label > a:last-child{
                    //display:none;
                    
                    
                }
*/
}

html > body #liste_ateliers > li .mention_full {
  color: #DB2222;
  font-weight: bold;
}

html > body #liste_ateliers > li .mention_nearlyfull {
  color: #ff9900;
  font-weight: bold;
}

html > body #liste_ateliers > li > input {
  display: none;
}

html > body #liste_ateliers > li > label {
  cursor: pointer;
  padding-left: 3px;
  padding-top: 3px;
  width: 100%;
  display: block;
  height: 24px;
  line-height: 24px;
  text-transform: uppercase;
  overflow: hidden;
  font-weight: bold;
}

html > body #liste_ateliers > li > label:hover {
  background: #1565c0;
  color: white;
}

html > body #liste_ateliers > li .select_allDom {
  font-size: 0px;
  display: block;
  height: 18px;
  width: 18px;
  margin-top: 1px;
  margin-right: 3px;
  float: right;
  background: top left url("../img/bigoeil_ateliers.png") no-repeat;
}

html > body #liste_ateliers > li .select_allDom:hover {
  background-position: top right;
}

html > body #liste_ateliers > li > ul {
  display: none;
  list-style-type: none;
  padding: 0px;
}

html > body #liste_ateliers > li > ul > li {
  background: 6px top url("../img/fleche_ateliers.png") no-repeat;
  padding-left: 30px;
}

html > body #liste_ateliers > li > ul > li > input {
  display: none;
}

html > body #liste_ateliers > li > ul > li > label {
  height: 18px;
  line-height: 18px;
  width: 100%;
  display: block;
  cursor: pointer;
}

html > body #liste_ateliers > li > ul > li > label:hover {
  font-weight: bold;
}

html > body #liste_ateliers > li > ul > li > input:checked + label {
  background: right 6px top url("../img/oeil_atelier.png") no-repeat;
  color: #42a5f5;
}

html > body #liste_ateliers > li > ul > li > input:checked + label.inscrit {
  color: #8bc34a;
}

html > body #liste_ateliers > li > input:checked + label + ul {
  display: block;
}

html > body #liste_ateliers .inactif_full {
  display: none;
}

html > body #liste_ateliers .inactif_full > label {
  cursor: pointer;
  color: #cfd8dc;
}

html > body #liste_ateliers .inactif_full > label:hover {
  font-weight: normal;
}

html > body #liste_ateliers .inactif_full > input:checked + label {
  background: none;
  text-shadow: none;
  color: #cfd8dc;
}

html > body #creneaux {
  display: inline-block;
  width: calc(100vw - 414px);
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  margin-left: 6px;
  top: 72px;
  position: fixed;
  margin-top: 12px;
  padding-left: 12px;
}

html > body #creneaux > li:first-child > h2 {
  background: #f1f8e9;
  color: #7bc342;
  font-size: 14px;
  height: 52px;
  text-align: center;
}

html > body #creneaux > li:first-child > a {
  display: block;
  width: 92px;
  height: 24px;
  background: left top url("../img/btn_clean_v3.png") no-repeat;
  border: 5px solid #f1f8e9;
  position: absolute;
  top: 8px;
  left: calc(100vw - 506px);
  font-size: 0px;
  cursor: pointer;
}

html > body #creneaux > li:first-child > a:hover {
  background-position: top right;
}

html > body #creneaux > li:nth-child(4) {
  padding: 0px;
}

html > body #creneaux > li:nth-child(4) > h2 {
  padding: 0px;
  background: #e3f2fd;
  color: #2196f3;
  font-size: 14px;
  position: fixed;
  top: 282px;
  width: calc(100vw - 414px);
  height: 48px;
  z-index: 300;
  height: 52px;
}

html > body #creneaux > li:nth-child(4) > ul {
  position: relative;
  top: 78px;
}

html > body #creneaux > li .hasard {
  position: absolute;
  width: 50px;
  height: 50px;
  right: 80px;
  margin-top: 12px;
  float: right;
  background: left top url("../img/btn_idees_v3.png") no-repeat;
  border: 1px solid #1565c0;
  border-radius: 5px;
  font-size: 0px;
  cursor: pointer;
  z-index: 1;
}

html > body #creneaux > li .hasard:hover {
  background-position: top right;
}

html > body #creneaux > #horaires {
  display: inline-block;
  width: calc(100vw - 414px);
  max-width: 1015px;
  position: relative;
  vertical-align: top;
  color: #8bc34a;
  margin-top: 12px;
}

html > body #creneaux > #horaires > ul {
  padding: 0px;
  list-style-type: none;
  width: 100%;
}

html > body #creneaux > #horaires > ul > li {
  display: inline-block;
  width: 115px;
  height: 18px;
  text-align: right;
  border-left: 1px solid #8bc34a;
  padding: 3px;
  /*
                        >.ghost{
                            display:none;
                            position:relative;
                            width:100%;
                            height:50%;
                            top:calc(50% + 12px);
                            top:0px;

                            left:0px;
                            background:green;
                            opacity:1;
                            font-style:italic;
                            margin-top:0px;
                            line-height:18px;
                            background:$selection_color_strong;
                            color:$selection_typo_strong;
                            padding-top:6px;
                            animation-duration: 0.4s;
                            animation-name: slidein;
                            
                        }
                        */
}

html > body #creneaux > #horaires > ul > li:last-child {
  border-right: 1px solid #8bc34a;
  margin-right: none;
}

html > body #creneaux > #horaires > ul > li > span {
  display: inline-block;
  line-height: 12px;
  height: 12px;
  width: 100%;
  text-align: center;
}

html > body #creneaux > #creneaux_fixes {
  display: inline-block;
  width: calc(100vw - 414px);
  position: relative;
  vertical-align: top;
}

html > body #creneaux > #creneaux_fixes > ul {
  display: inline-block;
  padding: 0px;
  list-style-type: none;
  padding-top: 8px;
  width: 100%;
  position: relative;
}

html > body #creneaux > #creneaux_fixes > ul > li {
  display: inline-block;
  position: relative;
  width: 114px;
  height: 76px;
  text-align: right;
  background: white;
  border: 1px solid #8bc34a;
  color: #8bc34a;
  border-radius: 5px;
  margin-top: 2px;
  margin-bottom: 2px;
  vertical-align: top;
  text-align: center;
  font-size: 12px;
  padding: 3px;
  overflow: hidden;
  /*
                        >.ghost{
                            display:none;
                            position:absolute;
                            width:100%;
                            height:50%;
                            top:calc(50% + 12px);
                            left:0px;
                            background:white;
                            opacity:1;
                            font-style:italic;
                            margin-top:0px;
                            line-height:18px;
                            background:$selection_color_strong;
                            color:$selection_typo_strong;
                            padding-top:6px;
                            animation-duration: 0.4s;
                            animation-name: slidein;
                            &::after {
                                content: " ";
                                display:block;
                                width:500px;
                                height:10px;
                                transform: rotate(-5deg); 
                                transform-origin:center;
                                top:-20px;
                                left:-20px;
                                position:absolute;
                                background:$selection_color_strong;
                              }
                        }
                        */
}

html > body #creneaux > #creneaux_fixes > ul > li:last-child {
  margin-right: none;
}

html > body #creneaux > #creneaux_fixes > ul > li > span {
  margin-top: 0px;
  display: block;
  position: relative;
}

@-webkit-keyframes slidein {
  from {
    top: 100%;
  }
  to {
    top: calc(50% + 12px);
  }
}

@keyframes slidein {
  from {
    top: 100%;
  }
  to {
    top: calc(50% + 12px);
  }
}

html > body #creneaux > #creneaux_fixes > ul > li > .cancel_job {
  display: none;
  width: 18px;
  height: 18px;
  position: relative;
  top: -2px;
  left: 97px;
  background: left top url("../img/cancel_job.png") no-repeat, white;
  font-size: 0px;
  cursor: pointer;
  border-radius: 18px;
}

html > body #creneaux > #creneaux_fixes > ul > li > .cancel_job:hover {
  background-position: top right;
  background-color: #DB2222;
}

html > body #creneaux > #creneaux_possibles {
  display: block;
  width: calc(100vw - 392px);
  position: relative;
  padding-top: 0px;
  height: calc(100vh - 430px);
  overflow-y: scroll;
  border-radius: 5px;
  margin-top: 72px;
  padding-bottom: 36px;
}

html > body #creneaux > #creneaux_possibles > a#clean_creneaux_possibles {
  display: block;
  width: 92px;
  height: 24px;
  background: right top url("../img/btn_clean_v3.png") no-repeat, white;
  position: absolute;
  top: 290px;
  left: calc(100vw - 500px);
  font-size: 0px;
  border: 5px solid #e3f2fd;
  z-index: 450;
  position: fixed;
  cursor: pointer;
}

html > body #creneaux > #creneaux_possibles > a#clean_creneaux_possibles:hover {
  background-position: top left;
}

html > body #creneaux > #creneaux_possibles > a#suggestions {
  display: block;
  width: 92px;
  height: 24px;
  background: right top url("../img/btn_idees_v3.png") no-repeat, white;
  position: absolute;
  top: 290px;
  left: calc(100vw - 600px);
  font-size: 0px;
  border: 5px solid #e3f2fd;
  z-index: 450;
  position: fixed;
  cursor: pointer;
}

html > body #creneaux > #creneaux_possibles > a#suggestions:hover {
  background-position: top left;
}

html > body #creneaux > #creneaux_possibles > ul {
  padding: 0px;
  list-style-type: none;
  overflow: hidden;
  margin: 0px;
  display: inline-block;
  width: 121px;
  margin-right: 2px;
  vertical-align: top;
  padding-right: 3px;
  top: 0px;
}

html > body #creneaux > #creneaux_possibles > ul > li {
  display: none;
  width: calc(100% - 0px);
  height: 48px;
  overflow: hidden;
  text-align: right;
  background: white;
  border: 1px solid #42a5f5;
  color: #42a5f5;
  border-radius: 5px;
  margin: 0px;
  text-align: center;
  margin-top: 2px;
  padding-top: 0px;
}

html > body #creneaux > #creneaux_possibles > ul > li > h2 {
  font-weight: normal;
  font-size: 12px;
  margin: 0px;
}

html > body #creneaux > #creneaux_possibles > ul > li > input {
  display: none;
}

html > body #creneaux > #creneaux_possibles > ul > li > input + label {
  background: center bottom 6px url("../img/coche_vierge.png") no-repeat;
  font-size: 0px;
  display: block;
  width: 24px;
  height: 24px;
  cursor: pointer;
  border-radius: 12px;
  margin-top: 12px;
  right: 12px;
  position: relative;
  left: 99px;
  top: -30px;
}

html > body #creneaux > #creneaux_possibles > ul > li > input:checked + label {
  background: center bottom 6px url("../img/coche_check.png") no-repeat;
}

html > body #creneaux > #creneaux_possibles > ul > li span:first-child {
  display: block;
  height: 36px;
  line-height: 12px;
  text-align: center;
  padding-top: 6px;
}

html > body #creneaux > #creneaux_possibles > ul > li span:last-child {
  display: block;
  font-size: 12px;
  display: block;
  height: 14px;
  line-height: 14px;
  width: calc(100% - 18px);
  padding-right: 22px;
  position: relative;
  top: -12px;
  border-radius: 3px;
  border: 1px solid transparent;
  margin: auto;
  margin-bottom: -12px;
}

html > body #creneaux > #creneaux_possibles > ul > li .alerte {
  color: #ff9900;
  border: 1px solid #ff9900;
  font-weight: bold;
}

html > body #creneaux > #creneaux_possibles > ul > li.passif {
  opacity: 0.5;
  color: #78909c;
  border-color: #78909c;
}

html > body #creneaux > #creneaux_possibles > ul > li.passif > label {
  display: none;
}

html > body #creneaux > #creneaux_possibles > ul > li.selected {
  color: #8bc34a;
  border-color: #8bc34a;
}

html > body #creneaux > #creneaux_possibles > ul > li.selected > label {
  background: center bottom 6px url("../img/coche_check.png") no-repeat;
}

html > body #creneaux > #creneaux_possibles #creneau_G {
  margin-right: none;
}

.print {
  position: fixed;
  top: 18px;
  right: 72px;
  width: 42px;
  height: 42px;
  line-height: 24px;
  text-align: center;
  color: #DB2222;
  border-radius: 42px;
  vertical-align: top;
  cursor: pointer;
  background: top right url("../img/btn_print.png") no-repeat, white;
  font-size: 0px;
}

.print:hover {
  background-color: #7bc342;
  background-position: top left;
}

#cadre_recap_planning {
  display: block;
  width: 100%;
  max-width: 770px;
  margin: auto;
}

#cadre_recap_planning > h1 {
  font-size: 18px;
  line-height: 18px;
  height: 27px;
  padding-top: 9px;
  color: #0070c0;
  display: block;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-variant: italic;
}

#cadre_recap_planning > #header_logos {
  display: block;
  width: 100%;
  list-style-type: none;
  padding: 0px;
  text-align: center;
}

#cadre_recap_planning > #header_logos > li {
  display: inline-block;
  height: 56px;
  width: 56px;
  vertical-align: top;
  margin: 6px 12px;
  border-radius: 3px;
  overflow: hidden;
}

#cadre_recap_planning > #header_logos > li > a {
  display: block;
  font-size: 0px;
  height: 100%;
  width: 100%;
}

#cadre_recap_planning > #header_logos > li .link_oratoire {
  background: center center url("../img/logo_oratoire_mini.jpg") no-repeat;
}

#cadre_recap_planning > #header_logos > li .link_apel {
  background: center center url("../img/logo_apel_mini.jpg") no-repeat;
}

#cadre_recap_planning > #header_logos > li .logo_forum {
  display: block;
  background: center center url("../img/logo_forum_mini.jpg") no-repeat;
  font-size: 0px;
  height: 100%;
  width: 100%;
}

#cadre_recap_planning > #header_logos > li:nth-child(2) {
  width: 160px;
}

#cadre_recap_planning > #cadre_titre {
  background-color: #e7e6e6;
  padding-top: 6px;
  padding-bottom: 12px;
}

#cadre_recap_planning > #cadre_titre > h2 {
  display: block;
  width: 100%;
  color: #c00000;
  text-align: center;
  font-size: 28px;
  margin: 12px auto;
}

#cadre_recap_planning > #cadre_titre > h3 {
  display: block;
  width: 100%;
  color: #0070c0;
  text-align: center;
  font-size: 26px;
  margin: 6px auto;
}

#cadre_recap_planning > #cadre_titre > h3 > b {
  text-transform: uppercase;
}

#cadre_recap_planning > #cadre_titre > span {
  display: block;
  width: 100%;
  color: black;
  text-align: center;
  font-size: 24px;
}

#cadre_recap_planning > #cadre_titre > span > b {
  color: #0070c0;
}

#cadre_recap_planning > p {
  color: black;
  display: block;
  width: 100%;
  text-align: justify;
}

#cadre_recap_planning #planning_liste {
  color: black;
  border: 1px solid black;
  padding: 0px;
  margin-bottom: 48px;
  position: relative;
}

#cadre_recap_planning #planning_liste > li {
  display: block;
  width: 100%;
  border-bottom: 1px solid black;
}

#cadre_recap_planning #planning_liste > li:first-child {
  color: black;
  font-weight: bold;
}

#cadre_recap_planning #planning_liste > li:first-child > ul > li {
  color: black;
}

#cadre_recap_planning #planning_liste > li:last-child {
  border-bottom: none;
}

#cadre_recap_planning #planning_liste > li > ul {
  display: block;
  height: 48px;
  width: 100%;
  padding: 0px;
  list-style-type: none;
}

#cadre_recap_planning #planning_liste > li > ul > li {
  float: left;
  margin: 0px;
  border-bottom: 1px solid black;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
}

#cadre_recap_planning #planning_liste > li > ul > li:first-child {
  width: 90px;
  color: #c00000;
  font-weight: bold;
  text-align: center;
}

#cadre_recap_planning #planning_liste > li > ul > li:nth-child(2) {
  width: 320px;
}

#cadre_recap_planning #planning_liste > li > ul > li:nth-child(3) {
  width: 280px;
}

#cadre_recap_planning #planning_liste > li > ul > li:nth-child(4) {
  width: 70px;
  text-align: center;
}

#cadre_recap_planning .signature {
  display: block;
  width: 100%;
  text-align: right;
  padding-right: 48px;
  margin-bottom: 60px;
  font-weight: bold;
  font-style: italic;
}

#cadre_recap_planning #planning_consignes {
  color: black;
}
/*# sourceMappingURL=styles.css.map */