html {
    height: 100%;
  }

body {
    height: 100%;
    width: 100%;
    margin: 0;
    background: white;/* #e6e5e5; /
    /*#eef2f6*/
  }

.header {
    /*padding: 5px;*/
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background: #384357;
    width: 100%;
    min-width: 0;

  }

  .split_g_left {
    height: 100%;
    width: 30%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    padding-top: 20px;
  }

  .split_g_right {
    height: 100%;
    width: 70%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    padding-top: 20px;
  }

  .split_left {
    left: 0;
    background-color: #1b4f5c;
  }

  .split_right {
    right: 0;
    /* background-color: rgb(250, 245, 245); */
  }

  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
  }


  .flex_forumlaire_client {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: normal;
    align-items: stretch;
    align-content: stretch;
    /* height: 100%; */

  }



.height_100pourcent {
  height: 100%;
}

.police_h1 {
    color: #dce5ec;
    font-size: 20px;
    font-weight : bold;
    text-decoration :none;
    font-family: Arial, Helvetica, sans-serif;
  }

.souligne {
    text-decoration: underline;
  }

.souligne_pas {
    text-decoration: none;
  }

.barre_texte {
  text-decoration-line: line-through;
}

  a.lien:link { color: #332155; text-decoration: underline;}
  a.lien:visited { color:#332155; text-decoration: underline; }
  a.lien:active { color: #332155;text-decoration: underline;}
  a.lien:hover { color: #332155; text-decoration: underline; }

.police_menu {
  color: #fdf9f9;
  font-size: 16px;
  font-weight : bold;
  text-decoration :none;
  font-family: Arial, Helvetica, sans-serif;
}

.headerContenu {
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: middle;
  }

.page {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    /*width: calc( 100vw - 260px); */
  }

.sideBare {
    width: 250px;
    background: #262e3b;
    flex: none;
    line-height: 30px;
    overflow: auto;
    min-height: calc(100vh - 35px);
    max-height: calc(100vh - 35px);

  }

div.sideBare[data-isOuvert="false"]  {
    /*margin-left: -250px;*/
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    min-height: 0;
    /*display: none;*/
}

.line_height_liste {
  line-height: 30px;
}

div.page[data-isOuvert="false"]  {
  flex-direction: column;
}

span.texte_menu_side_barre[data-isOuvert="false"]  {
  display: none;
}

div.liste_menu2[data-isOuvert="false"]  {
  display: none;
}

div.liste_footer_nav[data-isOuvert="false"]  {
  display: none;
}

.footer_nav {
    position: relative;
    bottom: 0;
  }

.footer_fin {
    width: 100%;
    height: auto;
  }

.liste_footer_nav {
    margin: 10px;
    float: left;
  }

img.div_vignette_img {
  vertical-align: middle;
  height:22px;
}

img.liste_menu {
  vertical-align: middle;
}

.identifiant {
  margin: 5px;
  padding: 3px;

}

.scroll_haut {
  height: 20px;
}


.liste_bouton_mois {
  margin: 5px;
  padding: 3px;
  border: 1px solid #364053;
  border-radius: 4px;
  background: white;
  color: #364053;
}

.liste_bouton_mois:hover {
  background: #1a61ac;
  cursor: pointer;
  color: #fdf9f9;
  border: 1px solid #f1f3f5;
}


div.liste_bouton_mois[data-isactif="true"] {
  background: #364053;
  color: #f2f2f2;
}

.liste_menu1 {
  margin: 5px;
  padding: 3px;
  border: 1px solid #364053;
  border-radius: 4px;
  background: #414a5c;
}

.liste_menu2 {
  margin-left: 20px;
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 3px;
  border: 1px solid #364053;
  border-radius: 4px;
  background: #364053;

}

.bouton_fonce {
  cursor:pointer;
  border-radius: 4px;
  /* margin: 10px; */
  margin: 7px;
  padding: 5px;
  border: 1px solid #424d62;
  background: white;
  color: #424d62;
  /* height: 23px; */
  line-height: 23px;
  text-wrap: nowrap;
}

.bouton_fonce:hover{
  cursor:pointer;
  border-radius: 4px;
  /* margin: 10px; */
  margin: 7px;
  padding: 5px;
  border: 1px solid #424d62;
  background: #424d62;
  color: #FFFFFF;
  /* height: 23px; */
  line-height: 23px;
  display: block;
}

.liste_menu1:hover, .liste_menu2:hover, .header_content_bouton:hover  {
  /* background: #1a61ac; */
  background: #153547;
  cursor: pointer;
  color: #fdf9f9;
  border: 1px solid #f1f3f5;
}


div.liste_menu1[data-isactif="true"], div.liste_menu2[data-isactif="true"]  {
  background: #0d6efd;
  color: #f2f2f2;
}

.background_blanc {
  background: #ffffff;
}

.liste_option {
  /* max-height: 400px; */
  overflow-y: auto;
}

.flex_contenur_groupe_ligne_nowrap {
  display: flex;
  flex-flow: row nowrap;
  padding: 0;
  margin: 1px;
  list-style: none;
  align-items: center;
}

.flex_contenur_groupe_ligne_nowrap_large {
  display: flex;
  flex-flow: row nowrap;
  padding: 0;
  margin: 0;
  list-style: none;
  /* align-items: center; */
}

.flex_groupe_data {
  /* background: white; */
  padding: 3px;
  /* width: 100px; */
  /* height: 150px; */
  margin: 2px;
  margin-left:5px;
  line-height: 23px;
  color: blue;
  font-weight: bold;
  font-size: 18px;

}

.flex_contenur_ligne_wrap {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex_contenur_liste_ligne_wrap {
  display: flex;
  flex-flow: column wrap;
  padding: 0;
  margin: 1px;
  list-style: none;
}

.groupe_data_align_gauche_court {
  text-align: right;
  width: 90px;
}

.groupe_data_align_gauche {
  text-align: right;
  width: 130px;
}
.groupe_data_align_centre {
  text-align: center;
  width: 180px;
}

.groupe_data_align_centre_option {
  text-align: center;
  width: 213px;
}

.groupe_data_align_centre_large2 {
  text-align: center;
  width: 180px;
}

.groupe_data_align_centre2 {
  text-align: left;
  width: 40px;
}

.groupe_data_align_centre_large {
  /* text-align: center;  */
  width: 750px;
}
.groupe_data_align_centre_medium {
  text-align: center;
  width: 300px;
}
.groupe_data_align_droite {
  text-align: left;
  /* width: 80px; */
  max-width: 300px;
}

.formulaire_colonne_gauche {
  /*float: left;*/
  display: block;
  /*flex-grow: 0.33;*/
  width: 33%;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: center;
  color: #182b59;
  margin-right: 5px;
  margin-top: 4px;
  font-size: 20px;
  font-weight: bold;
  text-align: right;
  line-height: 30px;
  /*margin :5px;*/
  min-width: 250px;
  max-width: 350px;
  /*border-bottom: solid #1b76a3 1px;*/

}

.formulaire_colonne_droite {
  /*float: left;*/
  display: block;
  /*flex-grow: 0.33;*/
  width: 60%;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: stretch;
  color: #182b59;
  margin-left: 5px;
  margin-top: 4px;
  font-size: 20px;
  text-align: left;
  line-height: 30px;
  min-width: 250px;
  max-width: 900px;
  background: #eaeef5;
  border-radius: 4px;
  border-bottom: #c6dafd 1px solid;
}

.formulaire_ligne {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: stretch;

}

.calendrier_ligne {
    flex-wrap: wrap;
  }

@media screen and (min-width: 701px) {

    .class_double_format {
      font-size: 18px;
    }
  }

@media screen and (max-width: 700px) {

  .class_double_format {
    font-size: 13px;
  }

  .formulaire_colonne_droite, .formulaire_colonne_gauche {
    width: 100%;
    text-align : left;
    flex-grow: 1;
    }

  .formulaire_ligne {
    flex-wrap: wrap-reverse;

  }
  .flex_contenur_groupe_ligne_nowrap_large {
    /* flex-direction: column; */
    flex-wrap: nowrap;
  }
  .groupe_data_align_centre_large {
    width: 350px;
  }

  .texte_confirmation_prereserve, .texte_confirmation_modal, .texte_liste_modal, .contenu_page_modal, .contenu_formulaire_page_modal, .contenu_formulaire_modal, .texte_calendrier_modal {
    /* background-color: #cad4da; */
    max-height: 80%;
    overflow: scroll;
    margin-bottom:0px !important;
    padding: 20px;
  }

  .flex_conteneur_date_picker_modal {
    display: flex;
    flex-flow: column ;
    padding: 0;
    margin: 1px;
    list-style: none;
    align-content: flex-start;
  }

  .flex_conteneur_date_picker_selection {
    display: flex;
    flex-flow: row ;
  }

  .flex_forumlaire_client {
    flex-direction: column;

  }

  .header_content {
    flex-wrap: nowrap;
    justify-content: left;
    align-items: stretch;
    overflow-x: auto;
  }

}

@media screen and (max-width: 800px) {

  .split_left {
    display: none;
  }

  .split_g_right {
    width: 100%;
  }
}

/* pour menu en bas sur smartphone */
@media screen and (max-width: 450px) {

  div.page[data-isOuvert="false"] {
    /* flex-direction: column; // pour mettre menu en bas sur smartphone */
  }

  div.sideBare[data-isOuvert="false"]  {
    position: sticky;
    bottom: 0px;
    z-index: 100;
    }

  td.cellule_plus_moins_mois{
    max-width: 80px;
    min-width: 80px;
  }

  .table-scroll .colonne3 {
  position:relative;
  }

  .table-scroll .colonne3 {
  position: relative;
  }
   .table-scroll thead .colonne2{
  position: relative;
  }

  .table-scroll thead .colonne3{
  position: relative;
  }
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
  text-align : right;

}

.col-33 {
  float: left;
  width: 33%;
  margin-top: 6px;
  text-align : right;

}

.col-77 {
  float: left;
  width: 77%;
  margin-top: 6px;
  text-align : right;

}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;

}

.col-100 {
  float: left;
  width: 100%;
  margin-top: 6px;

}

.col-45 {
  float: left;
  width: 45%;
  margin-top: 6px;

}

.grande_vignette {
  /* box-shadow: -1px 4px 4px -1px #838282; */
  max-width: 500px;
  margin: auto;
  text-align: center;
  font-family: arial;
  /* min-width: 300px; */
  /* margin: 1%; */
  padding: 2px;
  flex-grow: 1;
  flex-shrink: 1;
  /* border: #e0dfdf 1px solid; */
  padding-top: 7px;
}

.div_vignette {
  color: #032d50;
  margin-top: 5px;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  vertical-align: middle ;
  line-height: 30px;
  margin :3px;
  background: #cad4da;
  flex-grow: 1;
  flex-shrink: 1;
  /* border: #e9edf1 2px solid; */
  /*border-bottom: solid #1b76a3 1px;*/

}

.div_vignette_gauche {
  color: #194060;
  /* background: #e9edf1; */
  margin-top: 5px;
  font-size: 16px;
  font-weight: bold;
  text-align: right;
  vertical-align: middle ;
  line-height: 30px;
  margin :3px;
  width: 140px;
  border-radius: 6px;
  /* background: #eaeef5; */
  /* border: #b4c8ec 2px solid; */

  /*border-bottom: solid #1b76a3 1px;*/
  box-shadow: -1px 3px 3px -1px #aaa8a8;
}

.div_vignette_gauche_gras {

  font-size: 26px;
  font-weight: bold;
  /*border-bottom: solid #1b76a3 1px;*/

}

.gradient-border {
  --borderWidth: 10px;
  position: relative;
  border-radius: var(--borderWidth);
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient s ease alternate infinite;
  background-size: 300% 300%;
}


@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


.contenu {
    /*background: white;*/
    margin: 10px;
    width: calc(100%-10px);
    flex-grow: 1;
    overflow-x: auto;
    height: calc(100vh - 80px);
  }

.header_content_no_flex {
    /* background: #f9fafa; */
    background: white;
    justify-content: left;
    /* width: calc(100% - 5px); */
    border-radius: 4px;
    margin: 0px;
    padding: 0px;
    height: auto;
    /*box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);*/
  }

  .header_content_no_flex_ss_ombre {
    background: #f9fafa;
    justify-content: left;
    /* width: calc(100% - 5px); */
    border-radius: 4px;
    margin: 0px;
    padding: 0px;
    height: auto;
  }

.header_content {
  /* background: #f9fafa; */
  background: white;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  /* width: calc(100% - 5px); */
  border-radius: 4px;
  margin: 0px;
  padding: 0px;
  height: auto;
  /*box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);*/
  overflow-x: auto;
}

@media screen and (min-width: 701px) {

.header_content {
  flex-wrap: wrap;
  justify-content: left;
  align-items: stretch;
}

}

.border_selec {

  /*border-bottom: 2px solid #6d4aad;*/
  /* box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075), 0px 0px 8px rgba(38,46,59, 0.6); */

  /* box-shadow: rgba(162, 189, 216, 0.25) 0px 20px 15px -15px; */
}

.header_chapitre {
  background: #154c79;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  width: 100%;
  border-radius: 4px;
  margin: 0px;
  padding: 0px;
  height: auto;
  /*box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);*/
}

.float_left {
  float: left;

}

.float_right {
  float: right;

}

.margin_top_4px {
  margin-top: 4px;

}

.header_content_bouton_small {
  float: left;
  display: block;
  border-radius: 4px;
  margin-top: 4px;
  margin-left: 3px;
  padding: 2px;
  border: 1px solid #154c79 ;
  background: white;
  color: #154c79;
  font-size: 16px;
}

div.header_content_bouton_small[data-isactif="true"]  {
  background: #154c79;
  color: #f2f2f2;
}

.header_content_bouton_small:hover  {
  background: #154c79;
  cursor: pointer;
  color: #fdf9f9;
  border: 1px solid #d3d5d8;
}

.header_content_bouton_small_vert {
  flex-grow: 1;
  display: block;
  border-radius: 4px;
  margin-top: 4px;
  margin-left: 3px;
  padding: 2px;
  border: 1px solid #056d02 ;
  font-size: 16px;
  color: #056d02;
  background: #eefbf5;
}

div.header_content_bouton_small_vert[data-isactif="true"]  {
  color: white;
  background: #056d02;
}

.header_content_bouton_small_vert:hover  {
  color: white;
  background: #056d02;
  cursor: pointer;
  border: 1px solid #d3d5d8;
}

.header_content_bouton_small_rouge {
  flex-grow: 1;
  display: block;
  border-radius: 4px;
  margin-top: 4px;
  margin-left: 3px;
  padding: 2px;
  border: 1px solid #b5640d ;
  background: white;
  color: #b5640d;
  font-size: 16px;
}

div.header_content_bouton_small_rouge[data-isactif="true"]  {
  background: #b5640d;
  color: #f2f2f2;
}

.header_content_bouton_small_rouge:hover  {
  background: #b5640d;
  cursor: pointer;
  color: #fdf9f9;
  border: 1px solid #d3d5d8;
}


.header_content_bouton_small_vert_todo {
	flex-grow: 1;
	/* display: block; */
	border-radius: 4px;
	margin-top: 9px;
	margin-bottom: 4px;
	margin-left: 3px;
	padding: 5px;
	border-right: 5px solid #056d02;
	font-size: 16px;
	background: white;
	color: #056d02;
	padding-right: 5px;
  font-weight : bold;
}

div.header_content_bouton_small_vert_todo[data-isactif="true"]  {
  background: #056d02;
  color: #f2f2f2;
}

.header_content_bouton_small_vert_todo:hover  {
  background: #056d02;
  color: #f2f2f2;
  cursor: pointer;
  border: 1px solid #d3d5d8;
}

.header_content_bouton_small_rouge_todo {
	flex-grow: 1;
	/* display: block; */
	border-radius: 4px;
	margin-top: 9px;
	margin-bottom: 4px;
	margin-left: 3px;
	padding: 5px;
	border-right: 5px solid #b5640d;
	background: white;
	color: #b5640d;
	font-size: 16px;
  padding-right: 5px;
  font-weight : bold;
}

div.header_content_bouton_small_rouge_todo[data-isactif="true"]  {
  background: #b5640d;
  color: #f2f2f2;
}

.header_content_bouton_small_rouge_todo:hover  {
  background: #b54b0d;
  cursor: pointer;
  color: #fdf9f9;
  border: 1px solid #d3d5d8;
}


.liste_bouton_ligne {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: normal;
  align-content: normal;
}

.header_content_bouton {
  /*float: left;*/
  border-radius: 4px;
  margin: 7px;
  padding: 7px;
  /* border: 1px solid #0d6efd; */
  border: 1px solid #153547;
  background: #f1f2fc;
  /* color: #0d6efd; */
  color: #153547;
  text-wrap: nowrap;
  line-height: 20px;
}

.compteur {
  /* background: white; */
  color: #020a18;
}

.compteur[data-isactif="true"]  {
  background: #071424;
  color: #faf6f0;
  border: 1px solid rgb(248, 246, 244);
}

.header_content_bouton2 {
  /*float: left;*/
  border-radius: 4px;
  margin: 7px;
  padding: 7px;
  border: 1px solid #424d62;
  background: white;
  color: #424d62;
  text-wrap: nowrap;
}

.bouton_widget {
  /*float: left;*/
  border-radius: 5px;
  margin: 4px;
  padding: 7px;
  border: 0px solid #424d62;
  background: #d8dee1;
  color: #044762;
}

div.header_content_bouton2[data-isactif="true"]  {
  background: #c5ccdd;
  color: #051837;
}

 .header_content_bouton2:hover  {
  background: #424d62;
  cursor: pointer;
  color: #fdf9f9;
  border: 1px solid #f1f3f5;
}

.liste_menu1:hover, .liste_menu2:hover, .header_content_bouton:hover  {
  background: #2a5874;
  cursor: pointer;
  color: #fdf9f9;
  border: 1px solid #f1f3f5;
}

div.header_content_bouton[data-isactif="true"]  {
  /* background: #0d6efd; */
  background: #153547;
  color: #f2f2f2;
}



/* .menu_formulaire_client:hover  {
  background: #077567;
  cursor: pointer;
  color: #fdf9f9;
  border: 1px solid #f1f3f5;
} */

a.header_content_bouton[data-isactif="true"]  {
  color: #0d6efd;
  text-decoration :none;
}

.formulaire {
  padding: 5px;
  display: flex;
  flex-direction : row;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
  /* background: #fbfcfd; */
  background: white;
  border-radius: 4px;
  /*box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);*/
  overflow: auto;
}

.formulaire[data-isInVisible="true"]  {
  display:none;
}

div[data-isInVisible="true"]  {
  display:none;
}

.calendrier {
  padding: 10px;
  display: flex;
  flex-direction : row;
  /* flex-wrap: wrap; */
  justify-content: left;
  align-items: top;
  background: white;
  /* background: #fbfcfd; */
  border-radius: 4px;
  /*box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);*/
  padding-bottom: 190px;
  min-width: 250px;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 600px;
  /*width: calc( 100vw - 300px );*/
}

.calendrier_public{
  padding: 10px;
  display: flex;
  flex-direction : row;
  /*flex-wrap: wrap;*/
  justify-content: left;
  align-items: top;
  background: #fbfcfd;
  border-radius: 4px;
  padding-bottom: 10px;
  min-width: 250px;
  overflow-x: auto;
  overflow-y: auto;
  /*width: calc( 100vw - 300px );*/
}

.padding_bottom_calendrier {
  padding-bottom: 190px;
}

div.calendrier[data-isOuvert="false"]  {
  /*width: calc( 100vw - 50px );*/
  /*display: none;*/
}

.calendrier_multiple {
  display: flex;
  flex-direction : row;
  flex-wrap: nowrap;
  flex-shrink: 1;
  flex-grow: 1;
  justify-content: left;
  min-width: 100px;
  /*box-sizing: content-box;/*
  /*width: calc( 100vw - 900px );*/
  padding-bottom: 190px;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /*max-width: calc( 100vw - 510px);*/
}

div.calendrier_multiple[data-isOuvert="false"]  {
  /*max-width: calc( 100vw - 360px);*/
}

th.colonne_basique, td.colonne_basique {
  font-family: Arial;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  color: #2b2d30;
  background-color: #ffffff;
  /* width : 20%; */
  height : 40px;
  text-align : center ;
}

td.colonne_principale, th.colonne_principale
{
   font-family: Arial;
   font-size: 14px;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   color: #FFFCF4;
   /* background-color: #58647a; */
   /* background-color: #335569; */
   background-color: #153547;
   min-width : 100px;
   height : 25px;
   text-align : center ;
   word-break: break-word;
   border: #3E4B57 1px solid;
}

td.colonne_principale_id
{
   font-family: Arial;
   font-size: 14px;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   color: #FFFCF4;
   background-color: #3E4B57;
   height : 25px;
   text-align : center ;
   border: #000000 1px;
}

td.colonne_principale_r, th.colonne_principale_r
{
   font-family: Arial;
   font-size: 14px;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   color: #21282f;
   background-color: #edeef0;
   /* width : 20%; */
   height : 25px;
   text-align : center ;
   border: #000000 1px solid;
}

td.colonne_propriete_r, th.colonne_propriete_r
{
   font-family: Arial;
   font-size: 16px;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   color: #3E4B57;
   background-color: #e9edf1;
   /* width : 25%; */
   max-height: 70px;
   height : 70px;
   text-align : center ;
}

td.colonne_propriete_r2, th.colonne_propriete_r2
{
   font-family: Arial;
   font-size: 16px;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   color: #032d50;
   background-color: #cad4da;
   max-height: 70px;
   height : 70px;
   text-align : center ;
}

.tableau_mois {
  padding-right: 5px;
  padding-top : 5px
}

.police_infobulle {

  color: #161412;
  font-size: 10px;
  font-weight : normal;
  text-decoration :none;
  font-family: Arial, Helvetica, sans-serif;
  line-height: initial;
  text-align: left;
}

span.texte_infobulle_accordeon
{
  display:none;
  color: #161412;
  font-size: 14px;
  font-weight : normal;
  text-decoration :none;
  font-family: Arial, Helvetica, sans-serif;
  line-height: initial;
  text-align: left;
  background-color: #60f3a7cc;
  padding: 5px;
}

.invisible {
  display:none;
}


span.hidden {
  display:none;
  color: #161412;
  font-size: 12px;
  font-weight : normal;
  text-decoration :none;
  font-family: Arial, Helvetica, sans-serif;
  line-height: initial;
  text-align: left;
  padding: 5px;
}

span.texte_infobulle_accordeon:target{display:block;}

span.hidden:target{display:block;}

.champs {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  vertical-align: middle;
  text-align: left;
  line-height: 35px;
}

.police_titre {
  /*color: #182b59;*/
  /* color: #154c79; */
  /* color: #032d50; */
  color: #044762;
  font-size: 20px;
  font-weight : bold;
  text-decoration :none;
  font-family: Arial, Helvetica, sans-serif;
}

.police_chapitre {
  /*color: #182b59;*/
  color: #f9fafa;
  font-size: 20px;
  font-weight : bold;
  text-decoration :none;
  font-family: Arial, Helvetica, sans-serif;
}

.police_champs {
  color: #182b59;
  font-size: 16px;
  font-weight : bold;
  text-decoration :none;
  font-family: Arial, Helvetica, sans-serif;
}

.police_champs_form {
  color: #202b44;
  font-size: 20px;
  font-weight : normal;
  text-decoration :none;
  font-family: Arial, Helvetica, sans-serif;
}

.police_base {

  color: #182b59;
  font-size: 16px;
  text-align: left;
  font-weight : normal;
  text-decoration :none;
  font-family: Arial, Helvetica, sans-serif;

}

.info_paypal {
  float: left;
  width: 100%;
  margin-top: 6px;
  border: 0px solid;
  opacity: 0.9;
  visibility: visible;
  background-color: #FFA0A0;
  color: red;
  border: 1px solid #ff;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
}

.couleur_champs {
  /* color: #202b44; */
  color: #044762;
}
.row:after {
    margin: 5px;
    content: "";
    display: table;
    clear: both;
  }

.aff_block {
  display: inline-block;
}

.aff_ruby {
  display: ruby;
}

.aff_box {
  display: -moz-box;
}

.flex_nowrap{
  flex-wrap: nowrap;
}

.class_overflow_auto{
  overflow: auto;
}
.class_overflow_x_visible{
  overflow-x: visible;
}
.class_overflow_x_auto{
  overflow-x: auto;
}
.class_overflow_y_auto{
  overflow-y: auto;
}

.class_width_25 {
  width: 25px;
}
.class_width_50 {
  width: 50px;
}
.class_width_75 {
  width: 75px;
}
.class_width_100 {
  width: 100px;
}
.class_width_125 {
  width: 125px;
}
.class_width_150 {
  width: 150px;
}
.class_width_200 {
  width: 200px;
}
.class_width_250 {
  width: 250px;
}
.class_width_300 {
  width: 300px;
}
.class_width_100pourcent {
  width: 100%;
}
.class_width_90pourcent {
  width: 90%;
}
.class_width_95pourcent {
  width: 95%;
}
.class_width_50pourcent {
  width: 50%;
}
.class_width_25pourcent {
  width: 25%;
}
.class_width_33pourcent {
  width: 33%;
}
.class_width75pourcent {
  width: 75%;
}

.class_width_max_250 {
  max-width: 250px;
}

.class_width_max_300 {
  max-width: 300px;
}

.class_height_20 {
  height: 20px;
}
.class_height_25 {
  height: 25px;
}
.class_height_30 {
  height: 30px;
}
.class_height_35 {
  height: 35px;
}
.class_height_40 {
  height: 40px;
}
.class_height_50 {
  height: 50px;
}
.class_height_250 {
  height: 250px;
}

.class_height1250 {
  height: 150px;
}

.class_height100 {
  height: 100px;
}

.class_height_500 {
  height: 500px;
}

.class_height_800 {
  height: 800px;
}

.class_max_height_600 {
  max-height: 600px;
}

.class_max_height_300 {
  max-height: 300px;
}

.class_max_height_infini {
  max-height: 99999px;
}

.class_min_height_150 {
  min-height: 150px;
}

.class_max_width_300 {
  max-width: 300px;
}

.class_line_height_20 {
  line-height: 20px;
}
.class_line_height_30 {
  line-height: 30px;
}
.class_line_height_40 {
  line-height: 40px;
}
.class_line_height_50 {
  line-height: 50px;
}
.class_vertical_align_haut {
  vertical-align: top ;
}
.class_vertical_align_milieu {
  vertical-align: middle ;
}
.class_vertical_align_flex_top {
  align-items:stretch ;
}
.class_horizontal_align_gauche {
  text-align: left;
}
.class_horizontal_align_milieu {
  text-align: center;
}
.class_horizontal_align_droite {
  text-align: right;
}
.class_border_0 {
  border: none;
}

.class_font_12 {
  font-size: 12px;
}

.class_font_14 {
  font-size: 14px;
}
.class_font_16 {
  font-size: 16px;
}
.class_font_20 {
  font-size: 20px;
}
.class_pointeur {
  cursor: pointer;
}

.class_margin_right {
  padding-right: 50px;
}

.margin_0 {
  margin :0;
}

.margin_5px {
  margin :5px;
}

.margin_10px {
  margin :10px;
}

.paddin_5px {
  padding :5px;
}

.paddin_10px {
  padding :10px;
}

.couleur_bordure_clic_colonne
{
   border: 2px inset;
   border-radius: 50% 20% / 10% 40%;
   border-collapse: collapse; border-color: #ff3582;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.decoupe_mot
{
  overflow-wrap: break-word;
}

.decoupe_mot2
{
  overflow-wrap: anywhere;
}

.apercu_commentaire
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 400px;
}

.limite_phrase {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.border_left {
  border-left: 5px solid rgb(245, 214, 41);
  border-radius: 4px;
  padding-left: 5px;
}

.border_left2 {
  border-left: 5px solid rgba(85, 103, 241, 0.856);
  border-radius: 4px;
  padding-left: 5px;
}

.border_left3 {
  border-left: 5px solid #424d62;
  border-radius: 4px;
  padding-left: 5px;
}

.border_left4 {
  border-left: 7px solid #154c79;
  border-radius: 4px;
  padding-left: 5px;
}

.border_left5 {
  border-left: 5px solid #496b74;
  border-radius: 4px;
  padding-left: 5px;
}

.border_left6 {
  border-left: 5px solid #9c6A80;
  border-radius: 4px;
  padding-left: 5px;
}

.border_left7 {
  border-left: 5px solid #04AA6D;
  border-radius: 4px;
  padding-left: 5px;
}

.border_left8 {
  border-left: 5px solid #FF8812;
  border-radius: 4px;
  padding-left: 5px;
}

.border_left9 {
  border-left: 5px solid #65919c;
  border-radius: 4px;
  padding-left: 5px;
}

.border_left10 {
  border-left: 5px solid #336699;
  border-radius: 4px;
  padding-left: 5px;
}

.border_left14 {
  border-left: 5px solid #0f917f;
  border-radius: 4px;
  padding-left: 5px;
}

.border_left13 {
  border-left: 5px solid #07b39b;
  border-radius: 4px;
  /* padding-left: 5px; */
}

.border_bottom {
  border-bottom: 5px solid rgb(245, 214, 41);
  border-radius: 4px;
  padding-bottom: 5px;
}

.border_bottom2 {
  border-bottom: 5px solid rgba(85, 103, 241, 0.856);
  border-radius: 4px;
  padding-bottom: 5px;
}

.border_bottom3 {
  border-bottom: 5px solid #424d62;
  border-radius: 4px;
  padding-bottom: 5px;
}

.border_bottom4 {
  border-bottom: 5px solid #154c79;
  border-radius: 4px;
  padding-bottom: 5px;
}

a.lien_noir:link {
  color: #000000;
}

a.lien_noir:visited {
  color: #000000;
}

a.lien_noir:focus {
  color: #000000;
}

a.lien_noir:hover {
  border-bottom: 1px solid;
  background: #163e62;
  color: #fafcfa;
  cursor: pointer;
}

a.lien_noir:active {
  color: #000000;
}

.message_info_haut {
 position: absolute;
 top : 35px;
 right : 20px;
}

.message_info_bas {
  position: absolute;
  bottom : 10px;
  right : 20px;
 }

 h2 {

 color: white;
}

.cercle {
  background-color:#65919c;
  color: white;
  border-radius:30%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  width: 40px;
  height: 40px;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}

.warning_couleur {
  background-color: #f87b14;
  color: white;
}

.warning {
  background-color: #f87b14;
  color: white;
  padding: 5px 5px;
  border: none;
  border-radius: 4px;
  /*cursor: pointer;*/
  float: left;
  width:100%;
  font-size: 16px;
  font-weight : normal;
  text-decoration :none;
  border :1px solid #f87b14;
}

.warning_leger {
  background-color: #e79f63;
  color: white;
  padding: 5px 5px;
  border: none;
  border-radius: 4px;
  /*cursor: pointer;*/
  float: left;
  flex-grow: 1;
  flex-shrink: 1;
  font-size: 16px;
  font-weight : normal;
  text-decoration :none;
}

.warning_notification {
  background-color: #e48c44;
  color: white;
  padding: 5px 5px;
  border: none;
  border-radius: 4px;
  /*cursor: pointer;*/
  float: left;
  /* width:100%; */
  font-size: 16px;
  font-weight : normal;
  text-decoration :none;
  border-left: 5px solid #6d380c;
  overflow-x: scroll;
}

.note_notification {
  background-color: #154c79;
  color: white;
  padding: 5px 5px;
  border: none;
  border-radius: 4px;
  /*cursor: pointer;*/
  float: left;
  /* width:100%; */
  font-size: 16px;
  font-weight : normal;
  text-decoration :none;
  overflow-x: scroll;
}

.warning_tarif_cal {
  /* background-color: #AFC8AD; */
  background-color: #c5ccdd;
}

.formulaire_modal {
  display: none;
  position: fixed;
  z-index: 1000;
  /* padding-top:2%; */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(94, 122, 134, 0.7);
}

.contenu_formulaire_modal {
  /* background-color: #cad4da; */
  background-color: #eceaea;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  /* max-width: 12000px; */
  border-radius: 10px;
  max-height: 90%;
  overflow-y: auto;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.page_formulaire_fermer {
  color: #ced9e2;
  background-color: #335569;
  /* float: right; */
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  flex-grow: 1;
  margin-right: 10px;
}

.page_formulaire_fermer:hover,
.page_formulaire_fermer:focus {
  color: #FFFFFF;
  background-color: #153547;
  text-decoration: none;
  cursor: pointer;
}

.page_modal {
  display: none;
  position: fixed;
  z-index: 1000;
  /* padding-top:2%; */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(143, 151, 70, 0.7);
}

.contenu_page_modal {
  /* background-color: #cad4da; */
  background-color: white;
  /* background-color: #eceaea; */
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  /* max-width: 12000px; */
  border-radius: 10px;
  max-height: 90%;
  overflow-y: auto;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.page_modal_fermer {
  color: #ced9e2;
  background-color: #153547;
  /* float: right; */
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  flex-grow: 1;
  /* margin-right: 10px; */
}

.page_modal_fermer:hover,
.page_modal_fermer:focus {
  color: #FFFFFF;
  background-color: #335569;
  text-decoration: none;
  cursor: pointer;
}


.confirmation_prereserve {
  display: none;
  position: fixed;
  z-index: 1000;
  /* padding-top:2%; */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(119, 138, 192, 0.7);
}

.texte_confirmation_prereserve {
  /* background-color: #cad4da; */
  background-color: white;
  /* background-color: #eceaea; */
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 800px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.prereserve_fermer {
  color: #313030;
  /* float: right; */
  text-align: right;
  font-size: 28px;
  font-weight: bold;
  flex-grow: 1;
  margin-right: 10px;
}

.prereserve_fermer:hover,
.prereserve_fermer:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.flex_conteneur_date_picker_modal {
  display: flex;
  /* flex-flow: row nowrap; */
  padding: 0;
  margin: 1px;
  list-style: none;
  align-content: flex-start;
}

.flex_conteneur_date_picker_selection {
  display: flex;
  flex-flow: column nowrap;
  padding: 0;
  margin: 1px;
  list-style: none;
  align-items: center;
}

.flex_2_boutons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
}

.calendrier_modal {
  display: none;
  position: fixed;
  z-index: 1000;
  /* padding-top:2%;  */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(75, 117, 97, 0.7);
}

.texte_calendrier_modal {
  /* background-color: #cad4da; */
  background-color: white;
  /* background-color: #eceaea; */
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  max-width: 1000px;
  border-radius: 10px;
  overflow: auto;
  max-height: 90%;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.liste_modal {
  display: none;
  position: fixed;
  z-index: 2000;
  /* padding-top:2%;  */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(105, 82, 39, 0.7);
}

.texte_liste_modal {
  /* background-color: #cad4da; */
  background-color: white;
  /* background-color: #eceaea; */
  margin: auto ;
  padding: 15px;
  border: 1px solid #888;
  width: 90%;
  max-width: 1000px;
  border-radius: 10px;
  overflow: auto;
  height: 90%;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.modal_liste_choix {
  /* background-color: #cad4da; */
  max-height: calc(90vh - 60px);
  overflow: auto;
}

.confirmation_modal {
  display: none;
  position: fixed;
  z-index: 1000;
  /* padding-top:2%;  */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(145, 54, 12, 0.7);
}

.texte_confirmation_modal {
  /* background-color: #cad4da; */
  background-color: white;
  /* background-color: #eaeceb; */
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 800px;
  border-radius: 10px;
  overflow: scroll;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.modal_fermer {
  color: #313030;
  float: right;
  text-align: right;
  font-size: 28px;
  font-weight: bold;
  flex-grow: 1;
  margin-right: 10px;
}

.modal_fermer:hover,
.modal_fermer:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

span.vide {
  position: relative;
  display: inline-flex;
  align-items: center;
}
span.vide span {
  position: absolute;
  display: block;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background-color: #ccc;
  font: 18px monospace;
  text-align: center;
  line-height: 1em;
  cursor: pointer;
}
span.vide input {
  padding-right: 18px;
  box-sizing: border-box;
}

.bordure_noir {
  border : 2px solid #5d6c8a;
  border-collapse: collapse;
}

input.gras {
  color: #5d6c8a;
  background-color: #f2f2f2;
  padding: 3px;
  border : 4px solid #5d6c8a;
  border-radius: 4px;
  font-weight : bold;
  text-decoration :none;
  text-align: center;
}

.div_erreur {
  border: 4px solid rgb(235, 7, 7);
  border-radius: 4px;
  animation-duration: .8s;
  animation-name: clignoter;
  animation-iteration-count: infinite;
  transition: none;
}

@keyframes clignoter {
 0%   { border: 4px solid rgb(235, 7, 7);}
 40%   {border: 4px solid rgb(22, 21, 21); }
 100% { border: 4px solid rgb(250, 246, 246); }
}

input[type=checkbox] {
  border: 2px solid rgb(43, 59, 201);
  border-radius: 4px;
}

input {
  width: 100%;
  padding: 1px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  vertical-align: middle ;
  height: 100%;
  text-align: left;
  border-bottom: solid #61676b 2px;
  box-shadow: inset 0px 1px 5px rgba(48, 47, 47, 0.2);
  font-size: 18px;
  }

input.color {
    width: calc(100% - 158px);
    padding: 1px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    vertical-align: middle ;
    height: 100%;
    text-align: left;
    border-bottom: solid #61676b 2px;
    box-shadow: inset 0px 1px 5px rgba(48, 47, 47, 0.2);
    }

input:focus {
    border-color: #66AFE9;
    /*/*box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);*/
    outline: 0;
    border-bottom: solid #3478c6 3px;
    background: #ebf0fd;
 }

 input:read-only,  textarea:read-only {
  border-color: #66AFE9;
  /*/*box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);*/
  outline: 0;
  border-bottom: solid #a3a5a7 2px;
  background: #dfe0e2;
}

input::placeholder {
  vertical-align: middle ;
  text-align: left;
  color: #7c7c7e;
  font-family: arial;
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
  }

input.placholder_gras::placeholder {
    vertical-align: middle ;
    text-align: left;
    color: #1f1d1d;
    background-color: #bac4db;
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    }

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px ;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
  width:100%;
  font-family: arial;
  font-size: 20px;
  text-align: center;
}

input[type=submit].rechercher {
  background-color: #147a55;
  color: white;
  /* padding: 3px 3px ; */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* width:120px; */
  font-family: arial;
  font-size: 20px;
  margin-left: -7px;
  margin-top: -1px;
  border: 2px solid #147a55;
}

input.rechercher {
  /* padding: 5px; */
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  vertical-align: middle ;
  /* height: 40px; */
  border-bottom: solid #1b76a3 2px;
  background-color: #ebf2ee;;
  }

 input.rechercher:focus {
    border-color: #66AFE9;
    /*/*box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);*/
    outline: 0;
    border-bottom: solid #3478c6 3px;
    background: #bed8cb;
 }

input[type=number] {
  text-align: center;
  }

input[type=submit].modifier {
  background-color: #154c79;
  color: white;
  padding: 12px 20px ;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
  width:100%;
  font-family: arial;
  font-size: 20px;
}

input[type=submit].submit_transparent {
  /* background-color: #154c79; */
  background-color: transparent;
  color: #154c79;
  padding: 12px 20px ;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
  width:100%;
  font-family: arial;
  font-size: 20px;
}

input[type=button] {

  /* background: white;
  color: #0d6efd;
  border: 1px  solid #0d6efd;
  padding: 1px;
  margin-left: -2px;
  margin-right: -2px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  vertical-align: middle ;
  height: 100%;
  text-align: left;
  border-bottom: solid #61676b 2px;
  box-shadow: inset 0px 1px 5px rgba(48, 47, 47, 0.2);
  font-size: 18px; */
}

input.bouton {
  width:20%;
  background: white;
  /* color: #0d6efd; */
  color: #424d62;
  border: 1px  solid #424d62;
  /* border: 1px  solid #0d6efd; */
  padding: 1px;
  margin-left: -2px;
  margin-right: -2px;
  border-radius: 4px;
  resize: vertical;
  vertical-align: middle ;
  height: 100%;
  text-align: center;
  border-bottom: solid #61676b 2px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  font-size: 18px;
  text-align: center;
}

input.verrou {
  background: rgb(90, 90, 90);
  color: #918f8f;
}

input.bouton_texte {
  background: white;
  /* color: #0d6efd;
  border: 1px  solid #0d6efd; */
  color: #424d62;
  border: 1px  solid #424d62;
  padding: 1px;
  margin-left: -2px;
  margin-right: -2px;
  border-radius: 4px;
  resize: vertical;
  vertical-align: middle ;
  height: 100%;
  text-align: center;
  border-bottom: solid #61676b 2px;
  border-bottom: solid #61676b 2px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  font-size: 18px;
  text-align: center;
}

input.bouton:hover, input.bouton_texte:hover {
  background: #1a61ac;
  color: white;
}

input.effacer {
  background-color: #f80707;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
  width:100%;
  font-size: 20px;
  font-weight : bold;
  text-decoration :none;
}

input.ressource {
  color: black;
  background-color: #ffffff;
  padding: 3px;
  border: none;
  border-radius: 4px;
  font-weight : bold;
  text-decoration :none;
}

input.date_select {
  color: black;
  background-color: #f2f2f2;
  padding: 3px;
  border: none;
  border-radius: 4px;
  font-weight : bold;
  text-decoration :none;
}

textarea {
  width: 100%;
  padding: 3px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  vertical-align: middle ;
  height: 100%;
  text-align: left;
  color: rgb(32, 32, 32);
  font-weight : normal;
  font-size: 14px;
  }

.textarea_html {
    resize: vertical;
    vertical-align: middle ;
    text-align: left;
    color: rgb(32, 32, 32);
    font-weight : normal;
    font-size: 18px;
    }

textarea:focus {
    border-color: #66AFE9;
    /*box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);*/
    outline: 0;
 }

 input.checkbox_warning[type="checkbox"]:checked + label {
  border: 2px solid #f30b0b;
  background: #f87b14;
  color: white;
  padding: 5px;
}

input.checkbox_note[type="checkbox"]:checked + label {
  border: 2px solid #69679c;
  background: #69679c;
  color: white;
  padding: 5px;
}

input.checkbox_bouton[type="radio"] {
  opacity:0;
  position: absolute;
  width: 0%;
  height: 0%;
}

input.checkbox_bouton[type="radio"] + label span {
  cursor:pointer;
  border-radius: 4px;
  margin: 10px;
  padding: 5px;
  /* border: 1px solid #0d6efd; */
  border: 1px solid #153547;
  background: white;
  /* color: #0d6efd; */
  color: #153547;
  height: 25px;
  line-height: 25px;
  display: block;
}

input.checkbox_bouton[type="radio"]:checked + label span {
   /* background-color: #0d6efd; */
   background-color: #153547;
   color: white;
}

input.checkbox_bouton[type="checkbox"] {
  opacity:0;
  position: absolute;
  width: 0%;
  height: 0%;
}

input.checkbox_bouton[type="checkbox"] + label span {
  cursor:pointer;
  border-radius: 4px;
  margin: 10px;
  padding: 5px;
  border: 1px solid #0d6efd;
  background: white;
  color: #0d6efd;
  height: 25px;
  line-height: 25px;
  display: block;
  width: 85%; /* pour laisser de la place au scroll*/
}

input.checkbox_bouton[type="checkbox"]:checked + label span {
   background-color: #0d6efd;
   color: white;
}


input.checkbox_bouton3[type="radio"] {
  opacity:0;
  position: absolute;
  width: 0%;
  height: 0%;
}

input.checkbox_bouton3[type="radio"] + label span {
  cursor:pointer;
  border-radius: 4px;
  margin: 10px;
  padding: 5px;
  border: 1px solid #424d62;
  background: white;
  color: #424d62;
  height: 25px;
  line-height: 25px;
  display: block;
}

.barre_chargement {
  background: #60f3a7cc;
  height: 3px;
  transition: width 20s;
  width: 0%;
  border-bottom: 2px #303030 solid;
}

.ligne_flexbox{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: normal;

}

.ligne_flexbox_colonne{
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;

}

@keyframes progress {
  0% { --percentage: 0; }
  100% { --percentage: var(--value); }
}

@property --percentage {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

[role="progressbar"] {
  --percentage: var(--value);
  --primary: #369;
  --secondary: #e4e0e0;
  --size: 100px;
  animation: progress 2s 0.5s forwards;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

[role="progressbar"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
  mask: radial-gradient(white 55%, transparent 0);
  mask-mode: alpha;
  -webkit-mask: radial-gradient(#0000 55%, #000 0);
  -webkit-mask-mode: alpha;
}

[role="progressbar"]::after {
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) / 5);
  color: var(--primary);
}

.notification_overlay {
  display: none;
  position: fixed;
  z-index: 400;
  /* padding-top:2%; */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* background-color: rgba(94, 122, 134, 0.55);   */
  background-color: rgba(158, 177, 187, 0.65);
}

.notification_general_nombre {
  position: absolute;
  top: 3px;
  right: 20px;
  width: 20px;
  height: 20px;
  background: red;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.notification_general_nombre_todo {
  padding: 4px 8px;
  border-radius: 50%;
  /* background: red; */
  color: white;
}

span.notification_general_nombre_todo[data-isOuvert="false"]  {
  display: none;
}

.logo_todo {
  position: relative;
  display: inline-block;
}

.notification_icone_notif_active {
  background: #061633;
}

.notification_general_haut {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: normal;
  align-items: center;
  align-content: normal;
  font-style: normal;
  z-index: 2000;
  display: block;
  position: fixed;
  /* top: 40px;  */
  bottom: 20px;
  right: 20px;
  width: 500px;
  max-width : 80%;
  max-height : 70%;
  overflow-y : auto;
  padding: 5px;
  color: #FFFFFF;
  /* background: #414a5c; */
  /* background: linear-gradient(to right, #c33764, #1d2671); */
  /* background: linear-gradient(to right, #5d4157, #a8caba); */
  background: #061633;
  opacity: 0.95;
  border: 1px #000000 solid;
  border-radius: 10px;
  /* -moz-border-radius: 3px;
  -webkit-border-radius: 2px;
  border-radius: 3px;
  -moz-box-shadow: 0px 0px 8px #414a5c;
  -webkit-box-shadow: 0px 0px 8px #414a5c;  */
  /* box-shadow: 0px 0px 8px #414a5c; */
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
  /* #303030 */

  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@keyframes animatetop {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

.notification_general_bas {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: normal;
  align-items: normal;
  align-content: center;
  font-style: normal;
  z-index: 2000;
  display: block;
  position: fixed;
  bottom : 0px;
  left: 20px;
  /* width: 300px;  */
  width : 90%;
  max-width : 400px ;
  max-height : 70%;
  overflow-y : auto;
  padding: 5px;
  color: #FFFFFF;
/* background: #414a5c; */
  /* background: linear-gradient(to right, #c33764, #1d2671); */
  /* background: linear-gradient(to right, #5d4157, #a8caba); */
  background: #061633;
  opacity: 0.95;
  border: 1px #000000 solid;
  border-radius: 10px;
  /* -moz-border-radius: 3px;
  -webkit-border-radius: 2px;
  border-radius: 3px;
  -moz-box-shadow: 0px 0px 8px #414a5c;
  -webkit-box-shadow: 0px 0px 8px #414a5c;  */
  /* box-shadow: 0px 0px 8px #414a5c; */
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
  /* #303030 */
}

.notification_groupe_message{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  align-content: normal;
  padding: 2px;
}

.notification_groupe_image{
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.notification_barre_chargement {
  background: #60f3a7cc;
  height: 3px;
  transition: width 10s;
  width: 0%;
  border-bottom: 2px #303030 solid;
}

.notification_valide {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  color: #000000;
  background: #DBF5A3;
  border-left: 5px solid #98AA71;
  border-radius: 4px;
  padding: 2px;
}

.notification_erreur {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  color: #FFFFFF;
  background: #be3434;
  border-left: 5px solid #C77971;
  border-bottom: 1px solid #C77971;
  border-radius: 4px;
  padding: 2px;
  box-shadow: inset 0px 1px 5px rgba(48, 47, 47, 0.2);
}

.notification_warning {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  color: #FFFFFF;
  background: #d48645;
  border-left: 5px solid #F9E6BF;
  border-bottom: 1px solid #F9E6BF;
  border-radius: 4px;
  padding: 2px;
  box-shadow: inset 0px 1px 5px rgba(48, 47, 47, 0.2);
}

.notification_note {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  color: #000000;
  background: #F2F1EB;
  border-left: 5px solid #b8ac68;
  border-bottom: 1px solid #2e2e2c;
  border-radius: 4px;
  padding: 2px;
  box-shadow: inset 0px 1px 5px rgba(48, 47, 47, 0.2);
}

.client_non_present {
  color: #792424;;
  /* background: #ddae88;  */
  background: #d8c0c0;
  box-shadow: inset 0px 1px 10px rgba(253, 250, 250, 0.2);
  border-radius: 6px;
  padding: 7px;
  border: 1px solid #792424;
  text-align: center;
}

.client_present {
  color: #194060;
  /* background: #82d3aa;  */
  background: #c8e2d1;
  box-shadow: inset 0px 1px 10px rgba(12, 9, 9, 0.2);
  border-radius: 6px;
  padding: 7px;
  border: 1px solid #792424;
  text-align: center;
}

.titre_bloc_note {
  color: #072946;
  /* background: #82d3aa;  */
  /* background: #F5F6F7;  */
  background: #ffffff;
  border-radius: 4px;
  text-align: left;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;
  /* border-bottom: #131111 1px solid; */
}

.etiquette {
  /*float: left;*/
  border-radius: 4px;
  padding: 7px;
  border: 1px solid #0d6efd;
  background: white;
  color: #0d6efd;
  text-align: center;
}


.selection_date {

  box-shadow: inset 5px 5px 34px 10px rgba(3, 13, 32, 0.2);

}

td.cellule_infobulle_info_detail
{
   font-family: Arial;
   font-size: 13px;
   font-weight: normal;
   font-style: normal;
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
   border-radius: 0px;
   border-top:#cad4da 1px solid;
   text-decoration: none;
   color: #032d50;
   background-color: #cad4da;
   height : 15px;
   text-align : left ;
   text-align : left ;
   text-shadow: 0px 0px 0px ;
   -moz-text-shadow: 0px 0px 0px ;
   -webkit-text-shadow: 0px 0px 0px ;
   border-bottom: 1px solid #496b74;
}

td.cellule_infobulle_info_ca
{
   font-family: Arial;
   font-size: 13px;
   font-weight: normal;
   font-style: normal;
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
   border-radius: 0px;
   border-top:#444444 1px solid;
   text-decoration: none;
   color: #F0F0F0;
   background-color: #05536d;
   height : 15px;
   text-align : left ;
   text-align : left ;
   text-shadow: 0px 0px 0px ;
   -moz-text-shadow: 0px 0px 0px ;
   -webkit-text-shadow: 0px 0px 0px ;
}

.verrou_liste {
  pointer-events: none;
  /* cursor: pointer;  */
}

.verrou_lien {
  pointer-events: none;
}
.verrou_div::after {
  /* position: relative; */
  content: '\1F512';
  position : relative;
  z-index : 5;
  right : 0px;
}

input.checkbox_bouton3[type="radio"]:checked + label span {
   background-color: #424d62;
   color: white;
}

input.checkbox_bouton3[type="checkbox"] {
  opacity:0;
  position: absolute;
  width: 0%;
  height: 0%;
}

input.checkbox_bouton3[type="checkbox"] + label span {
  cursor:pointer;
  border-radius: 4px;
  margin: 10px;
  padding: 5px;
  border: 1px solid #424d62;
  background: white;
  color: #424d62;
  height: 25px;
  line-height: 25px;
  display: block;
  width: 85%; /* pour laisser de la place au scroll*/
}

input.checkbox_bouton3[type="checkbox"]:checked + label span {
   background-color: #424d62;
   color: white;
}



input.checkbox_bouton_warning[type="radio"]:checked + label span {
  background-color: #ec730f;
  color: #f30b0b;
}

input.checkbox_bouton_warning[type="checkbox"] {
 opacity:0;
 position: absolute;
 width: 0%;
 height: 0%;
}

input.checkbox_bouton_warning[type="checkbox"] + label span {
 cursor:pointer;
 border-radius: 4px;
 margin: 10px;
 padding: 5px;
 border: 1px solid #424d62;
 background: white;
 color: #424d62;
 height: 25px;
 line-height: 25px;
 display: block;
 width: 85%; /* pour laisser de la place au scroll*/
}

input.checkbox_bouton_warning[type="checkbox"]:checked + label span {
  background-color: #ec730f;
 border: 1px solid #99601e;
 color: white;
}

input.checkbox_bouton_warning[type="checkbox"]:checked + label span:before {

 border: 1px solid #424d62;
 color: black;
 content: ' \26A0  ';
 border : 0;
}


input.checkbox_bouton_warning_inverse[type="radio"]:checked + label span {
  background-color: #424d62;
  color: #424d62;
}

input.checkbox_bouton_warning_inverse[type="checkbox"] {
 opacity:0;
 position: absolute;
 width: 0%;
 height: 0%;
}

input.checkbox_bouton_warning_inverse[type="checkbox"] + label span {
 cursor:pointer;
 border-radius: 4px;
 margin: 10px;
 padding: 5px;
 border: 1px solid #ec730f;
 background: white;
 color: #ec0f0f;
 height: 25px;
 line-height: 25px;
 display: block;
 width: 85%; /* pour laisser de la place au scroll*/
}

input.checkbox_bouton_warning_inverse[type="checkbox"]:checked + label span {
  background-color: #424d62;
 border: 1px solid #424d62;
 color: white;
}

input.checkbox_bouton_warning_inverse[type="checkbox"]:not(:checked)+ label span:before {

 border: 1px solid #424d62;
 color: rgb(245, 21, 21);
 content: '\26A0';
 border : 0;
 text-decoration: underline;
}

input.checkbox_bouton_warning_inverse[type="checkbox"]:not(:checked)+ label span:after {

  border: 1px solid #424d62;
  color: rgb(245, 21, 21);
  content: ' inactif';
  border : 0;
  text-decoration: underline;
 }

 .class_texte_align_gauche {
  text-align : left ;
 }

 .class_texte_align_droite {
  text-align : right ;
 }

 .class_texte_align_centre {
  text-align : center ;
 }

input.checkbox_bouton2[type="radio"] + label span {
  cursor:pointer;
  border-radius: 4px;
  margin: 2px;
  padding: 1px;
  border: 1px solid #0d6efd;
  background: white;
  color: #0d6efd;
  height: 25px;
  line-height: 25px;

}

input.checkbox_bouton2[type="checkbox"] {
  opacity:0;
  position: absolute;
  width: 0%;
  height: 0%;
}

input.checkbox_bouton2[type="checkbox"] + label span {
  cursor:pointer;
  border-radius: 4px;
  /* margin: 10px; */
  margin: 7px;
  padding: 5px;
  border: 1px solid #424d62;
  background: white;
  color: #424d62;
  /* height: 23px; */
  line-height: 23px;
  display: block;
  width: 90%; /* pour laisser de la place au scroll*/

}

input.checkbox_bouton2[type="checkbox"]:hover + label span {
  cursor:pointer;
  border-radius: 4px;
  /* margin: 10px; */
  margin: 7px;
  padding: 5px;
  border: 1px solid #424d62;
  background: #424d62;
  color: #FFFFFF;
  /* height: 23px; */
  line-height: 23px;
  display: block;
  width: 90%; /* pour laisser de la place au scroll*/
}

input.checkbox_bouton2[type="checkbox"]:checked + label span {
   background-color: #424d62;
   color: white;
}
/* combobox select */

select {
  /* -webkit-appearance: none; */
  /* -moz-appearance: none; */
  /* -ms-appearance: none; */
  /* appearance: none; */
  outline: 0;
  box-shadow: none;
  border: 0px solid #6c7074;
  background-image: none;
  flex: 1;
  padding: 0 .5em;
  cursor: pointer;
  border-bottom: solid #1b76a3 2px;
  height: 30px;
}
/* modification flèche IE */
select::-ms-expand {
  display: none;
}

.select {
  position: relative;
  display: flex;
  line-height: 30px;
  overflow: hidden;
  border-radius: .25em;
  height: 30px;
}

/* flèche */
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1em;
  background: #343a41;
  cursor: pointer;
  pointer-events: none;
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
  color: #fcfaf8;
}
/* Transition */
.select:hover::after {
  color: #0d6efd;
}

.gg-copy {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs,1));
  width: 14px;
  height: 18px;
  border: 2px solid;
  cursor: pointer;
  z-index: 1;
  /*margin-left: -5px;
  margin-top: -4px*/
  }

  .gg-copy::after,
  .gg-copy::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
  }

  .gg-copy::before {
  background:
  linear-gradient( to left,
  currentColor 5px, transparent 0)
  no-repeat right top/5px 2px,
  linear-gradient( to left,
  currentColor 5px, transparent 0)
  no-repeat left bottom/ 2px 5px;
  box-shadow: inset -4px -4px 0 -2px;
  bottom: -6px;
  right: -6px;
  width: 14px;
  height: 18px;
  z-index: 1;
  }

  .gg-copy::after {
  width: 6px;
  height: 2px;
  background: currentColor;
  left: 2px;
  top: 2px;
  box-shadow: 0 4px 0,0 8px 0;
  z-index: 1;
  }

/* === switch === */
.switch {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 34px;
  text-align: center;
  text-shadow: -2px -2px 1px #09680f;


}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .2s;
  transition: .2s;
  border: rgb(160, 164, 163)cc 1px solid;
}

.slider:before {
  position: absolute;
  content: "";
  height: 28px;
  width: 48px;
  left: 2px;
  bottom: 2px;
  background-color: #750707;
  color: #f3c8c8;
  -webkit-transition: .2s;
  transition: .2s;
  content: 'Non';
  object-position: 50% 50%;
}

input:checked + .slider {
  background-color: #60f3a7cc;

}

input:focus + .slider {
  box-shadow: 0 0 1px #151c18cc;
}

input:checked + .slider:before {
  -webkit-transform: translateX(45px);
  -ms-transform: translateX(45px);
  transform: translateX(45px);
  background-color: #389063cc;
  content: 'Oui';
  color: #ffffff;
}

/* Rounded sliders */
.slider.round {
  border-radius: 8px;
  border: 1px solid #dddada;
}

.slider.round:before {
  border-radius: 8px;
  border: 1px solid #135333;
}

/* tableau responsive */


.tableau_responsive {
  border: 1px solid #ffffff;
  border-collapse: collapse;
  margin: 3px;
  padding: 1px;
  width: 99.5%;
  /* table-layout: fixed; */ /*sinon pb affichage table dans table*/
}

.tableau_responsive caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

.tableau_responsive tr {
  /* background-color: #e9edf1; */
  background-color: #e8ebee;
  border: 1px solid #ddd;
  color: #3E4B57;
  padding: 1px;
  font-family: Arial;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  border: 1px solid #ffffff;
}

.tableau_responsive .sous_entete {
  background-color: #adc3d0;
  border: 1px solid #ddd;
  /* color: #416169; */
  color: #fbfeff;
  padding: 1px;
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
  text-decoration: none;
  border: 1px solid #ffffff;
}

.tableau_responsive .sous_entete2 {
  background-color: white;
  border: 1px solid #ddd;
  color: #416169;
  padding: 1px;
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
  text-decoration: none;
  border: 1px solid #ffffff;
}

.tableau_responsive .sous_entete_fonce {
  background-color: #416071;
  border: 1px solid #ddd;
  color: #FFFCF4;;
  padding: 1px;
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
  text-decoration: none;
  border: 1px solid #ffffff;
}

.tableau_responsive .sous_entete_speration {
  background-color: #f9fafa;
  border: 1px solid #ddd;
  /* color: #416169; */
  color: #fbfeff;
  padding: 1px;
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
  text-decoration: none;
  border: 1px solid #ffffff;
  line-height: 2px;;
}

.tableau_responsive .responsive_blanc {
  background-color: white;
  border: 1px solid #ddd;
  color: #416169;
  padding: 1px;
  font-family: Arial;
  font-size: 6px;
  font-weight: bold;
  font-style: normal;
  text-decoration: none;
  border: 1px solid #ffffff;
}

.tableau_responsive .border ,
.tableau_responsive .border {
  background-color: #1b4f5c;
  color: white;

}

.tableau_responsive th,
.tableau_responsive td{
  padding: 5px;
  text-align: left;
  overflow-wrap: break-word;
  border: 1px solid #ffffff;

}

.tableau_responsive th {
  padding: 5px;
  text-align: center;
}

.tableau_responsive thead tr {
  background-color: #cad4da;;
  font-family: Arial;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  color: #032d50;
  font-size: 16px;
  border: 1px solid #ddd;
}

.tableau_responsive tr[data-visible="false"] {
  display: none;
}

.tableau_responsive td .tableau_detail_gauche  {
  border-bottom: 2px solid #cad4da;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  text-align: right;
}
.tableau_responsive td .tableau_detail_droite  {
  border-bottom: 2px solid #cad4da;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  text-align: left;
}

@media screen and (max-width: 900px) {
  .tableau_responsive {
    border: 0;
  }

  .tableau_responsive caption {
    font-size: 1.3em;
  }

  .tableau_responsive thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    background-color: #3E4B57;
    display: none;
  }

  .tableau_responsive tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: 5px;
  }

  .tableau_responsive td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-family: Arial;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    text-align: left;
  }

  .tableau_responsive td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    /*text-transform: uppercase;*/
  }

  .tableau_responsive td:last-child {
    border-bottom: 0;
  }


}

@media print  {
  .tableau_responsive th,
.tableau_responsive td {
  padding: 5px;
  text-align: center;
  overflow-wrap: break-word;
  border: 1px solid #1a1818;

}

.sideBare {
  display: none;
}

}

.connexion {
  width : 300px;
  margin: auto;
  top: 20%;
  left : 40%;
  position: absolute;
}

.body_connexion {
  height: 100%;
  width: 100%;
  margin: 0;
  background:  #e6e5e5; /*dde5f4*/
  padding-top: 50px;
  /*#eef2f6*/
}

.bordure_tx {
  border-radius: 8px;
}

.form_connexion {
  padding: 20px;
  border-radius: 8px;
  margin: auto;
  width: 100%;
  /* height: 350px; */
  background: #fbfcfd;
  border-radius: 4px;
  /* /*box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);*/ */

  /*width : 250px;
  margin: auto;
  left: 25%;
  top : 25%;
  position: absolute;*/
}

.form_connexion_div {
  margin: 0px;
  padding: 0px;
  background: #fdfeff;
  /*#eef2f6*/
  border-radius: 8px;
  font-family: Arial;
  font-weight: bold;
  font-style: normal;
  text-decoration: none;
  color: #154c79;;
  font-size: 20px;
  /* border: 1px solid #e6e4e4; */
  /* width: calc(100% - 0px); */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  align-content: flex-start;
}

input[type=submit].connexion_bp {
  background-color: #3e4684;
  color: white;
  padding: 12px 20px ;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
  width:100%;
  font-family: arial;
  font-size: 20px;
  text-align: center;
}

/* ==== editeur html  === */

:root {
  --tbw-cell-vertical-padding: 4px;
  --tbw-cell-horizontal-padding: 8px;
  --tbw-cell-line-height: 1.5em;
}

.table_editeur table {
  margin-bottom: var(--tbw-cell-line-height);
}

.table_editeur th,
.table_editeur td {
  height: calc(var(--tbw-cell-vertical-padding) * 2 + var(--tbw-cell-line-height));
  min-width: calc(var(--tbw-cell-horizontal-padding) * 2);
  padding: var(--tbw-cell-vertical-padding) var(--tbw-cell-horizontal-padding);
  border: 1px solid #e7eaec;
}

.trumbowyg-box.trumbowyg-fullscreen,
.trumbowyg-box.trumbowyg-fullscreen .trumbowyg-editor,
.trumbowyg-box.trumbowyg-fullscreen .trumbowyg-textarea {
    height: 100%;
}

/* ==== tableau scroll  === */

.table-scroll-div {
  background: #fbfcfd;
  justify-content: left;
  width: calc(100% - 20px);
  border-radius: 4px;
  margin: 0px;
  padding: 10px;
  height: auto;
  /*box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);*/
}

.table-scroll-div_public {
  background: #fbfcfd;
  justify-content: left;
  width: calc(100% - 20px);
  border-radius: 4px;
  margin: 0px;
  padding: 10px;
  height: auto;

}

.table-scroll {
  position: relative;
  width: 100%;
  z-index: 1;
  margin: 0px;
  overflow: auto;
  /* max-height: 750px; */
  max-height: calc(100vh - 320px);;
  padding: 0px;
  background: #fbfcfd;

}

@media screen and (max-height: 500px) {
  /*pour mobile en mode horizontal sinon  l'affichage du tableau est très petit*/
   .table-scroll {
      min-height: 800px;

    }
  }


.table-scroll table {

  min-width: 250px;
  /*margin: auto;*/
  border-collapse: separate;
  border-spacing: 2px;
  width : 100%;
}
.table-wrap {
  position: relative;
}

.table-scroll thead th {

  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
}

.table-scroll thead .rangee2 {

  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  z-index: 2;
}
/* safari and ios need the tfoot itself to be position:sticky also */
.table-scroll tfoot,
.table-scroll tfoot th,
.table-scroll tfoot td {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index:4;
}

.table-scroll th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
}

@media screen and (min-width: 451px) {
  .table-scroll .colonne2 {
    position: -webkit-sticky;
    position: sticky;
    left: 20px;
    z-index: 2;
  }

  .table-scroll .colonne3 {
    position: -webkit-sticky;
    position: sticky;
    left: 100px;
    z-index: 2;
  }

  .table-scroll thead .colonne2{
    position: -webkit-sticky;
    position: sticky;
    left: 20px;
    z-index: 5;
  }

  .table-scroll thead .colonne3{
    position: -webkit-sticky;
    position: sticky;
    left: 120px;
    z-index: 5;
  }

}

.table-scroll thead th:first-child,
.table-scroll tfoot th:first-child {
  z-index: 5;
}

pre {
  background: #dfe0e2;
  padding: 1rem;
  overflow-x: auto;
}
code {
  font-family: monospace;
   max-height: 300px;      /* hauteur max */
    overflow-y: auto;       /* scroll vertical */
    overflow-x: auto;       /* scroll horizontal si besoin */
    display: block;  
    font: optional;
  
}

/*

=============================
checkbox pour todo

=============================

*/

.checkbox-wrapper-10 .tgl {
  display: none;
}
.checkbox-wrapper-10 .tgl,
.checkbox-wrapper-10 .tgl:after,
.checkbox-wrapper-10 .tgl:before,
.checkbox-wrapper-10 .tgl *,
.checkbox-wrapper-10 .tgl *:after,
.checkbox-wrapper-10 .tgl *:before,
.checkbox-wrapper-10 .tgl + .tgl-btn {
  box-sizing: border-box;
}
.checkbox-wrapper-10 .tgl::-moz-selection,
.checkbox-wrapper-10 .tgl:after::-moz-selection,
.checkbox-wrapper-10 .tgl:before::-moz-selection,
.checkbox-wrapper-10 .tgl *::-moz-selection,
.checkbox-wrapper-10 .tgl *:after::-moz-selection,
.checkbox-wrapper-10 .tgl *:before::-moz-selection,
.checkbox-wrapper-10 .tgl + .tgl-btn::-moz-selection,
.checkbox-wrapper-10 .tgl::selection,
.checkbox-wrapper-10 .tgl:after::selection,
.checkbox-wrapper-10 .tgl:before::selection,
.checkbox-wrapper-10 .tgl *::selection,
.checkbox-wrapper-10 .tgl *:after::selection,
.checkbox-wrapper-10 .tgl *:before::selection,
.checkbox-wrapper-10 .tgl + .tgl-btn::selection {
  background: none;
}
.checkbox-wrapper-10 .tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.checkbox-wrapper-10 .tgl + .tgl-btn:after,
.checkbox-wrapper-10 .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.checkbox-wrapper-10 .tgl + .tgl-btn:after {
  left: 0;
}
.checkbox-wrapper-10 .tgl + .tgl-btn:before {
  display: none;
}
.checkbox-wrapper-10 .tgl:checked + .tgl-btn:after {
  left: 50%;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn {
  padding: 2px;
  transition: all 0.2s ease;
  font-family: sans-serif;
  perspective: 100px;
}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after,
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
  display: inline-block;
  transition: all 0.4s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 4px;
}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after {
  content: attr(data-tg-on);
  background: #02C66F;
  transform: rotateY(-180deg);
}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
  background: #FF3A19;
  content: attr(data-tg-off);
}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:active:before {
  transform: rotateY(-20deg);
}
.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:before {
  transform: rotateY(180deg);
}
.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:after {
  transform: rotateY(0);
  left: 0;
  background: #7FC6A6;
}
.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:active:after {
  transform: rotateY(20deg);
}