body {
/*	background-image: url(Fonddegrade.jpg);*/
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: #111;
	/*background-color:#fff;*/
	margin-bottom: 0px;
	margin-top : 0px;
    scroll-behavior: smooth;
	scroll-margin-top: 80px;
    padding : 0px;
    margin: 0px;
	background-color: #faf7f2 ;
	/*background-image: url(/images/fond.jpg);
	background-repeat: repeat;
	background-position: center;
	background-size: cover;*/
	/*scroll-padding-top: calc(var(--header-height) + 30rem);	*/
    /*background-size: 100% 120px;*/
}

.menu {								/*IN R2*/
	position: fixed;
	top: 0; 
	width: 100%; 
	display:grid; 
	text-align: center;
	color: white;
	z-index: 9;
	height: 30px;
}
@media only screen and (max-width: 700px){
	.menu {
		display: none;
	}
}

.smallscreen{								/*IN R2*/
	display: none;
}

@media only screen and (max-width: 700px){
	.smallscreen {
		display: flex;
        height: 30px;
		background-color: white;
		justify-content: end;
		/*width: 100%;*/
		margin: 0px;
		padding: 0px;
		justify-content: end; 
		align-items: end;
	}
    .main_pages { 							/*IN R2*/
		display: none;
        flex-direction: column;
        background-color: #849ce1;
		color: black; 
		padding-left: 40px;
		padding-right: 40px;
		border-bottom: thin solid black; 
		border-left:thin solid black; 
		border-bottom-left-radius : 5px;
		position:absolute;
		right: 0;
		top: 30px;
		text-align:center;
		justify-self: end;
	}
    .main_pages a {
		font-size: smaller; 
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		/*line-height: 2em;*/
        /*width: 100%;*/
		text-align:center;
		border-bottom: thin solid black; 
		padding-left: 5px;
		padding-right: 5px;
   }
    .smallscreen label 
    {
        /*width: 100%;*/
        display: flex;
        margin: 0 auto;
		margin-right: 10px;
        font-size: 40px;
        color: black;
        cursor: pointer;
		text-align: start;
		align-self: end; 
    }
 
}
.hamburger{ 							/*IN R2*/
	border: thin solid black; 
	border-radius: 3px; 
	padding: 0px; 
	margin: 0px; 
	background-color:#fff; 
	align-self: end; 
	height: 25px;
}
input[type="checkbox"].toggler { 		/*IN R2*/
	display: none;
}

.menu_en_cours {					/*IN R2*/
	background-color: #6389b3;    /*#fff8ed, rgba(255, 248, 237, 0.85)*/
	/*z-index: 9;*/
}
.menu_pas_en_cours {				/*IN R2*/
	background-color: #1a3a5c;
	/*z-index: 9;*/
}
.menu_pas_en_cours:hover {			/*IN R2*/
	background-color: #476c94;
}

a.menu_en_cours ,
a.menu_pas_en_cours {				/*IN R2*/
	color: white; 
	text-decoration: none;
}

.leftmenu{
	background-color: #27496e;
	width: 12%;
	position: fixed;
	left: 0; 
	top: 0px;
	height: 100vh;
	padding-top: 40px;
	z-index: 0;
	display: flex; 
	flex-direction: column; 
}
.leftmenu div,
.leftmenu a{
	padding-left: 10px;
	height: 30px;
	display: flex; 
	align-items: center; 
}

.leftmenu div:hover,
.leftmenu a:hover{
	background-color: #476c94;
}

.lmtitle {
	background-color: #6389b3; 
	padding-top: 10px; 
	padding-bottom: 10px; 
	color: #ffffff; 
	vertical-align: center;
	padding-left: 10px;
}

div.lmline{
	align-self: stretch; 
	background-color:#6389b3; 
	height: 2px;
}
.titrePage{
	background-color: #4a78e6; 
	color: #0636c2;
}


.container{					/*IN R3*/
	margin-top: 40px;
	width: 100%;
	background-color: #faf7f2 ;
	min-height: 600px;
}
@media only screen and (max-width: 700px){
	.container {
		width: 100%;
		margin-top: 30px;
	}
}
.rightside {
	margin-left: 12%;
}


.contenu{
	width: 100%;
	justify-self: stretch;
	margin-left: 0px;
	min-height: 500px;
	/*margin-bottom: 15px;*/
	display:flex; 
	flex-direction: column; 
}

@media only screen and (max-width: 700px){
	.contenu {
	justify-self: start;
	margin-left: 0px;
	}
}
/*.contenu div{
	width: 100%;
}*/

.inside{
	padding: 20px;
}

.title{
	height: 35px;
	background-color: #e8734a; 
	color: white; 
	font-weight: bold; 
	font-size : larger;
	padding-left: 20px; 
	display: flex; 
	align-items: center;

}

.page{
	/*width: 100%;
	margin-top: 0px;
	padding-top: 0px;
	display: flex;
	justify-content: space-evenly; 
	align-items: start;
	/*justify-self: stretch;*/ 
}


h2{
	text-align: center;
	/*padding: 10px;*/
	margin-top: 0px;
	vertical-align: middle; 
	/*border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;*/
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
}

a{
	color: #faf7f2;
	text-decoration: none;
}
a:hover{
	color: #f4e8d1;
}

/* -------------------------------------------------------------- grilles ----------------------------------------------------------------------*/

.grid4{
	display: grid;
	grid-template-columns: auto auto auto auto;
}

.grid10{
	display: grid;
	grid-template-columns: auto minmax(100px, 20%) auto auto auto auto auto auto auto auto;
	color: #111;
	font-size: .9em;
	/*background-color: #faf7f2;*/
}
.grid12{
	display: grid;
	grid-template-columns: auto minmax(100px, 20%) auto auto auto auto auto auto auto auto auto auto;
	color: #111;
	font-size: .9em;
	/*background-color: #faf7f2;*/
}

.grid12 > div,
.grid12 > a,
.grid10 > div,
.grid10 > a,
.grid4 > div,
.grid4 > a{
	display: flex; 
	align-items: center;
	padding-left: 10px; 
	padding-right: 10px;
	min-height: 30px;
}

.fcol5{
	grid-template-columns: 80px auto auto auto auto auto auto auto auto auto;
}

.grid_title{
	background-color: #e8734a;
	color : #faf7f2;
	height: 30px; 
	display: flex; 
	align-items: center;
}
.grid12 a,
.grid10 a{
	color: #e8734a ;

}
.grid12 a:hover,
.grid10 a:hover{
	color: #1a3a5c ;
}
.grid_title a,
a.grid_title{
	color : #faf7f2;
}

a.grid_title:hover{
	background-color: #f49370;
}

.triactif{
	background-color: #a2421f;
}

.smallNumber{
	font-size:smaller; 
	color: #ccc; 
	text-decoration: none; 
	font-weight: normal;
}

.grid_simple{
	border: thin solid #999;
}

.grid_simple > div{  /*IN presta/form_pr_base, */
	border: thin solid #ccc;
	padding: 5px;
	font-size: smaller;
	margin-top: 0px;
	background-color: #ffffff;
}

.grid_dark > div{  /*IN presta/form_pr_base, */
	border: thin solid #faf7f2;
	padding: 5px;
	font-size: smaller;
	margin-top: 0px;
}

/* -------------------------------------------------------------- connexion ----------------------------------------------------------------------*/

.connexionBox{								/*IN R4*/
	background-color: #1a3a5c; 
	border-radius:10px; 
	border: thin solid #5687bc; 
	margin-top: 30px; 
	width: 60%; 
	margin-left: auto; 
	margin-right: auto;
	color: #faf7f2;
	padding: 20px;
}
@media only screen and (max-width: 700px){
	.connexionBox {
		width: 90%;
	}
}

.connexGrid{                                /*IN R4*/
	display: grid; 
	grid-template-columns: auto auto; 
	width : 80%; 
	margin-left:auto; 
	margin-right: auto; 
	justify-content: space-evenly; 
	align-items: center;
	gap: 5px;
}

.connexGrid label{                                /*IN R4*/
	color: #ccc;
}

@media only screen and (max-width: 700px){
	.connexGrid {
		flex-direction: column;
	}
}

.connexionInput {								/*IN R4*/
	border: none; 
	background: none; 
	outline: none; 
	background-color: none;
}

.imgOeil{                                       /*IN R4*/
	width: 16px; 
	cursor: pointer;
}

.connexSubmit{									/*IN R4*/
	grid-column: 2; 
	padding-top: 10px; 
	cursor: pointer;
}
/* -------------------------------------------------------------- tableau de bord ----------------------------------------------------------------------*/
/*IN R5 */

.gridtb{
	display: grid;
	grid-template-columns: 18% 18% 18% 18%; 
	text-align:center;
	padding-bottom: 10px;
	align-items: center;
	justify-content: space-between; 
	width : 90%; 
	margin-top : 70px; 
	margin-left: 3%;
	margin-right: 3%;
	gap: 5px;
}
@media only screen and (max-width: 700px){
	.gridtb {
		grid-template-columns: repeat(1, auto); 
	}
}

.gridtb a{
	color: #e8734a;
}
.gridtb a:hover{
	color: #fe926a;
}

.tb{
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
	min-height: 110px; 
	min-width: 230px; 
	padding: 10px; 
	border-radius: 10px; 
	font-weight: bold; 
	/*gap: 20px;*/
	font-size:larger; 
	font-weight: bold;
}

@media only screen and (max-width: 700px){
	.tb {
		min-height: 80px; 
		min-width: 120px; 
	}
}

.tbn1{
	border: medium solid #2d537c; 
	background-color:#6389b3;
}


.tbn2{
	border: medium solid #fbe8c5; 
	background-color:#fdf5e5;
}

.tbn3{
	border: medium solid #c27356; 
	background-color:#f19979; 
}


.tbn4{
	border: medium solid #fbe8c5; 
	background-color:#faf7f2;
}

.tbn5{
	border: medium solid #8aa1b9; 
	background-color:#335374; 
}

.tbn6{
	border: medium solid #ecdbbc; 
	background-color:#f4e8d1;
}

.tbn7{
	border: medium solid #c2613e; 
	background-color:#f48861;
}

.tbn8{
	border: medium solid #fbe8c5; 
	background-color:#ffffff;
}

.tbn9{
	border: medium solid #536f8d; 
	background-color:#1a3a5c;
}

.tbn10{
	border: medium solid #e1d1b0; 
	background-color:#f1e3c7;
}

.tbn11{
	border: medium solid #d5582b; 
	background-color:#e8734a;
}

.imgTbord{
	height: 50px; 
	padding-top: 10px;
}

/* -------------------------------------------------------------- spécifiques ----------------------------------------------------------------------*/

.info{
	grid-column: 1 / span 8; 
	display: flex; 
	flex-direction: column; 
	border: thin solid #999; 
	background-color:#222; 
	padding: 10px; 
	margin-top: 30px; 
	border-radius: 5px; 
	gap: 10px; 
	margin-top: 30px; 
	color: #999; 
	font-size:smaller;
}

@media only screen and (max-width: 700px){
	.info {
		grid-column: 1 / span 4; 
	}
}

.error{                          /*IN R4*/
	background-color: #c33;
	border: thin solid #f60;
	border-radius : 5px;
	padding: 10px;
	font-weight: bold;
}
.success{
	background-color: #063;
	border: thin solid #096;
	border-radius : 5px;
	padding: 10px;
	font-weight: bold;
	display: flex;
}

.inactif{
	opacity: .6;
	font-size: smaller; 
	font-style: italic; 
	text-decoration: line-through;
}

/* -------------------------------------------------------------- fiches ----------------------------------------------------------------------*/

.pagination{
	background-color: #f4e8d1;
	font-size: smaller;
	color: #555;
	display: flex;
	gap: 2px; 
	padding: 7px;
	align-items: center; 
	height: 20px;
}

.pagination a{
	color: #e8734a;
	cursor: pointer;
	padding: 0px;
	margin: 0px;
	min-width: 20px;
	text-align: center;
}
.pagination a:hover{
	color: #f4e8d1;
	background-color: #f2a284; 
}

/* -------------------------------------------------------------- fiches ----------------------------------------------------------------------*/
.fiche{
	display: flex; 
	/*justify-content: stretch; */
	gap: 20px;
	margin-top: 60px;
	margin-left: 20px; 
	margin-right: 20px;
	min-height: 60vh;
}

.fi_left{
	width: 18%;
	background-color: #1a3a5c;
	color: white;
	border-radius: 15px;
	min-height: 60vh;
	min-width: 10vw;
	display: grid; 
	grid-template-columns: 1fr; 
	align-items: start;
	gap: 10px;
	font-size: 0.7em;
	max-height: 80vh;
}

.fi_left div{
	padding: 10px;
	padding-left: 10%;
	padding-right: 10%;
}
.fi_left div:first-child{
	height: 100px;
}

.fi_box{
	background-color: #ffffff;
	border-radius: 15px;
	min-height: 60vh;
	width: 95%;
	border: thin solid #ccc;
	padding: 10px;
	font-size: 0.85em;
	margin-left: auto;
	margin-right: auto; 
}

.fi_box_grid{
	display: grid; 
	grid-template-columns: 20% 20% 20% 20% 1fr; 
	gap: 5px;
	align-items: start;

}

.fi_box > div{
}

.menuFiche{
	display: flex; 
	gap: 10px; 
	justify-self: center; 
	justify-content: center;
	width: 95%;
}
.menuFiche > a{
	background-color: white; 
	border-radius: 5px;
	border: thin solid #ccc;
	padding: 10px; 
	padding-top: 3px;
	padding-bottom: 3px;
	color: #1a3a5c;
}
.menuFiche > a:hover{
	background-color: #476c94; 
	color: #ffffff;
}

.lightBorder{                       /*IN R4*/
	border: thin solid #ddd;
	background-color: #ffffff;
	border-radius: 5px;
	padding: 7px;
	min-height: 20px;
	display: flex;
	align-items: center;
}

.fi_submit,
a.fi_submit,
input[type="submit"].fi_submit { 		/*IN R4*/
	background-color: #e8734a ;
	border: thin solid #c95b33; 
	border-radius: 5px; 
	padding: 10px; 
	min-width: 50%; 
	color: white; 
	text-align: center; 
	box-shadow: 1px 1px 1px 1px rgba(84, 84, 84, 0.4);
}
.fi_submit:hover,
a.fi_submit:hover,
button.fi_submit,
input[type="submit"].fi_submit:hover { 
	background-color: #1a3a5c;
	border: thin solid #0d2239; 
}

button.blue_submit { 
	background-color: #6389b3 ;
	border: thin solid #1a3a5c; 
	border-radius: 5px; 
	padding: 10px; 
	min-width: 50%; 
	color: white; 
	text-align: center; 
	box-shadow: 1px 1px 1px 1px rgba(84, 84, 84, 0.4);
}
button.corail_submit { 
	background-color: #e8734a ;
	border: thin solid #c95b33; 
	border-radius: 5px; 
	padding: 10px; 
	min-width: 50%; 
	color: white; 
	text-align: center; 
	box-shadow: 1px 1px 1px 1px rgba(84, 84, 84, 0.4);
}

button.blue_submit:hover { 
	background-color: #1a3a5c;
	border: thin solid #0d2239; 
}

input[type="submit"].hoverSand:hover {		/*IN R4*/
	background-color: #f4e8d1;
	color: #1a3a5c;
}

.form{
	background-color: #f4e8d1;
	border: medium solid #e8734a;
}

.fieldset{									/*IN R4*/
	line-height: 2; 
	border-radius: 5px
}
.bluebox{
	background-color: rgb(119, 156, 195, .3); 
	display: flex; 
	border: thin solid #1a3a5c; 
	border-radius: 10px; 
	padding: 10px; 
	align-items: center; 
	gap: 20px; 6389b3
}
.corailbox{
	background-color: rgb(232, 115, 74, .3); 
	display: flex; 
	border: thin solid #e8734a; 
	border-radius: 10px; 
	padding: 10px; 
	align-items: center; 
	gap: 20px;
}
.lightbluebox{
	background-color: rgb(124, 172, 227, .3); 
	display: flex; 
	border: thin solid #7cace3; 
	border-radius: 10px; 
	padding: 10px; 
	align-items: center; 
	gap: 20px; 
	color: #1a3a5c;
}

.greybox{
	background-color: rgb(0, 0, 0, .2); 
	display: flex; 
	border: thin solid #666; 
	border-radius: 10px; 
	padding: 10px; 
	align-items: center; 
	gap: 20px; 
	color: #e8734a;
}

a.emptybox{
	opacity: .6;
	color: #999;
	font-weight: 100; 
}

.sandbox{
	background-color: #f4e8d1;
	border: thin solid #926510; 
	border-radius: 10px; 
	padding: 8px; 
}
a.fm_actif{
	background-color: #1a3a5c; 
	color: #ffffff;
}
a.fmf_actif{
	background-color: #e8734a; 
	border: thin solid #c95b33; 
	color: #ffffff;
}

.comment{							/*IN R4*/
	font-size:smaller; 
	color: #999; 
	font-style:italic; 
	padding-top: 50px;
}

.boxDoc{
	width: 100px; 
	height: 70px;
	background-size: contain; 
	background-repeat: no-repeat; 
	background-position: bottom; 
	border-radius: 5px; 
	padding: 5px;
	display: grid;
	grid-template-columns: 30% 1fr 20%; 
	justify-content: space-between;
	border: thin solid #1a3a5c; 
	background-color: #1a3a5c; 
	color: #faf7f2;
}
.boxDoc img,
.boxDoc a{
	width: 100%; 
	align-self: end;
}

.columnBox{
	display: flex; 
	flex-direction: 
	column; gap: 5px;
}

.boxPhoto{
	width: 100px; 
	height: 100px;
	border: thin solid #e8734a; 
	background-color: #e8734a; 
	color: #faf7f2;
	display: grid; 
	flex-direction: column;
	justify-content: space-between; 
	grid-template-columns: 1fr auto;
	background-size: cover; 
	background-repeat: no-repeat; 
	background-position: center; 
	border-radius: 5px; 
	/*padding: 5px;*/
}

.boxPhoto > a:first-child{
	justify-self: stretch; 
	height: 80px;
}

/* ----- modal  ------------------------- -----------------  ------------------------- */
/* The Modal (background) */
.modalMail, 
.modalSK, 
.ModalLiPart,
.modalFormHeures,
.modalFormUpdate,		/*IN presta/form_modal_ctc*/
.modalFormCours { /*utilis�: */
  display: none; /* Hidden by default */
  grid-template-columns: 1fr 100px 1fr;
  grid-template-rows: 1fr 100px 1fr;
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  padding-top: 0px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
  justify-items: end;
  align-items: center;
}
.modalFormCours {
  grid-template-columns: 1fr  ;
  grid-template-rows: 1fr ;
  justify-content: end;
  align-items: end;
 
  align-self: end;
  padding-right: 30px;
}
/* Modal Content (Image) */
.modalContainer { /*utilis�: C4*/
  /*position: relative;*/
  /*top: 300px;
  left: 70%;*/
  background-color: #fff;
  border:thin solid #e8734a;
  color: #666;
  border-radius:5px;
  /*animation-name: fadeGallery;
  animation-duration: 0.6s;*/
  cursor: default;
  z-index: 5;
}
/* Modal Content (Image) */
.modalContainerC { /*utilis�: C4*/
  /*position: relative;
  bottom: 70px;
  right: 30px;*/
  background-color: #fff;
  border:thin solid #e8734a;
  border-radius:5px;
  max-width: 100%;
  color: #333;
  /*box-shadow: -4px -4px 5px 7px rgba(84, 84, 84, 0.4);*/
  /*align-self: end;
  justify-self: end;*/
  /*animation-name: fadeGallery;
  animation-duration: 0.6s;*/
  /*justify-content: end;
  align-items: end;
  text-align: right;*/
  cursor: default;
}

.modalSK {
  display: none;
  grid-template-columns: 1fr  ;
  grid-template-rows: 1fr ;
  padding-right: 30px;
}

.apmodform{
	cursor: grabbing;
	color: #fff;
}
.apmodformC{
	cursor: crosshair;
	color: #0061ff;
}
.apmodformSK{
	cursor: crosshair;
	color: #333;
}

.apmodform:hover{
	color: #f90;
}
.apmodformC:hover{
	cursor: crosshair;
	color: #f60;
}
.apmodformSK:hover{
	cursor: crosshair;
	color: #ffdfca;
}

/* The Close Button */
.Close,
.CloseC { /*utilis�: C4*/
  /*color: #ffffff;*/
  font-size: 1.4em;
  font-weight: bold;
  transition: 0.3s;
  justify-self: center;
  align-self:start;
	color: #e8734a;
}
.Close:hover,
.CloseC:hover {
	color: #666;
  text-decoration: none;
  cursor: pointer;
}
@media only screen and (max-width: 700px){
  .Close {
	  font-size: 3em;
  }
} 

.modalClose{
	grid-column: 5; 
	justify-self: end; 
	text-align: right;
	font-size: 2em; 
	margin-top: 0px; 
	padding-right: 10px; 
	color: white;
}

.CloseCal{
	grid-column: 1 / span 4; 
	justify-self: end; 
	display: flex;
	text-align: center; 
	align-items: center; 
	justify-content: center; 
	width: 25px; 
	height: 25px; 
	margin: 0px; 
	font-size: 2em; 
	color: white; 
	background-color: #e8734a;
}
.CloseCal:hover {
	background-color: #999;
	color: #333;
  text-decoration: none;
  cursor: pointer;
}

.closePosition{
	grid-column: 5; 
	justify-self: end; 
	text-align: right; 
	font-size: 2em; 
	margin-top: 0px; 
	padding-right: 10px;
}

/*------ animations  --------------------------------------------------------------------- */
/*IN R4, R5*/

.reduction{ 
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

.reduction:hover{
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}




/*------ draged box  --------------------------------------------------------------------- */

.draggableBox {
  position: absolute;
  width: 80px; height: 60px;
  padding-top: 10px;
  text-align: center;
  font-size: 40px;
  background-color: #222;
  color: #CCC;
  cursor: move;
}
.draggableBoxCal {
  position: absolute;
  top: 20%;
  left: 22%;
  background-color: #e8734a;
  border: thin solid #fff;
  color: #fff;
  z-index: 30;
  border-radius: 5px;
  /*width: 100%; 
  height: 60px;*/
  padding: 10px;
  /*text-align: center;
  font-size: 40px;
  background-color: #222;
  color: #CCC;*/
  cursor: move;
  user-select: none; /* L'utilisateur ne pourra plus sélectionner le texte de l'élément qui possède cette propriété CSS */
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  box-shadow: 4px 4px 5px 7px rgba(84, 84, 84, 0.4);

}
/*------ raccourcis  --------------------------------------------------------------------- */

.ligne{
	display: flex;
}

.moduloColor{
	background-color: #f4e8d1;
}
.moduloColorBlue{
	background-color: rgb(119, 156, 195,.1);
}

.cellCenter{
	display: flex; 
	justify-content: center; 
}

.cellRight{
	display: flex; 
	justify-content: end; 
	padding-right: 40px;
}

.cellBg{
	padding: 4px; 
	border-radius: 5px; 
	height: 20px; 
	width: 20px; 
	display: flex; 
	align-items: center; 
	justify-content: center;
}


.bigtxt{
	font-size: 1.4em;
	font-weight: bold;
}

.smaller{
	font-size: smaller;
}

.shadow{
	box-shadow: 1px 1px 1px 1px rgba(84, 84, 84, 0.4);
}

.opacity5{
	opacity: .5;
}

.annule{
	opacity: .5;
	font-style:italic; 
	font-size: smaller;
}

.newButPos{
	justify-self: end; 
	padding: 10px;
	padding-top: 2px; 
	padding-bottom: 2px; 
	justify-content: center; 
	gap: 5px; 
}

.grid_border{
	/*border: thin solid black;*/
}

.grid_border > div{
	border: thin solid black;
	padding: 5px; 
}
a.darka,
a.lightbluea:hover,
.darka{					/*IN R5*/
	color: #1a3a5c ;
}
a.darka:hover,
a.lightbluea,
.darka:hover{
	color: #6389b3;
}

.padLeft10{
	padding-left: 10px;
}

.pad10{
	padding: 10px;
}
.pad3{
	padding: 3px;
}

.padTB10{					/*IN R2*/
	padding-top: 10px; 
	padding-bottom: 10px;
}
.padRL10{					/*IN R2*/
	padding-right: 10px; 
	padding-left: 10px;
}
.margRL10{					/*IN R2*/
	margin-right: 10px; 
	margin-left: 10px;
}

label,
.label,
.label a{
	font-size: smaller; 
	font-style: italic; 
	color: #999;
}
.label:hover a{
	color: #e8734a;
}

.label_strong{
	font-style: normal;
	color: #555;
	font-size: .9em;
}
.corail,
.corail:hover,
.corailhover:hover{
	color: #e8734a;
}

.darkblue{
	color: #1a3a5c;
}
.mediumblue{
	color: #458bd6;
}
.lightblue{
	color: #92b0d2;
}
.mediumblue:hover{
	color: #e8734a;
}

.bgcorail{
	background-color: #e8734a;
	color: #ffffff;
}

.sand{
	color: #f4e8d1;
}
.bgsand{
	background-color: #f4e8d1;
}

.bgblanc{
	background-color: #ffffff;
}
.bgblue{
	background-color: #1a3a5c;
}
.bglightblue{
	background-color: #6389b3;
}

.bgverylightblue{
	background-color: #9fb9d7; 
}
.bgciel{
	background-color: rgb(227, 237, 250); 
}
.bggreen{
	background-color: #448b41; 
}
.bggray{
	background-color: #666; 
}


.bordercorail{
		border: thin solid #e8734a; 
}
.borderdarksand{
		border: thin solid #e5b355; 
}

.cursorgrab{
	cursor: grabbing;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button.noNumber,
input::-webkit-inner-spin-button.noNumber {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number].noNumber {
  -moz-appearance: textfield;
}

.form_tarif{
	display: grid; 
	grid-template-columns: 18% auto auto auto auto auto; 
	margin-right:10px; 
	align-items: center; 
	max-width: 84vw; 
	gap: 5px;
	justify-content: start; 
}

.form_tarif > div{
	width: 15%;
	white-space: nowrap;
}


.form_tarif input[type=number]{
	width: 90%;
	/*background-color: #efefef; */
	color: #333333;
	text-align: right; 
}

/*select>option {
    background-color: #b8e1ba;
	color: blue; 
}*/

.flalcenter {
	display: flex; 
	align-items: center;
}

.overhidden {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display:inline-block;
	/*display:block;
	display:flow-root;*/
}

.labelSpace{
	min-height: 10px;
	padding-left: 5px;
	padding-top: 10px;
}

.labelSpaceB{
	min-height: 10px;
	padding-left: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
}
.padL5{
	padding-left: 5px;
}

.plusBtn{
	margin: 5px 20px; 
	padding: 2px 10px; 
	display: flex; 
	gap: 5px; 
	align-items: center; 
	justify-content: start; 
	background-color: white; 
	border-radius: 5px; 
	border: thin solid #eee; 
	box-shadow: 1px 1px 4px 1px rgba(84, 84, 84, 0.1); 
	cursor: pointer;
}

.txtRight{
	text-align: right;
}

#placeh select{
  color:#777;
  background-color: white;
  border: none; 
  border-radius: 2px;
  padding: 2.5px 3px;
}
#placeh option:not(first-child) {
  color: #000;
}


/*
* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete {
  /*the container must be positioned relative:*/
/*  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
/*  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
/*  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
/*  background-color: DodgerBlue !important;
  color: #ffffff;
}
*/