*{
		font-size: 16px;
}
@media screen and (min-width: 1920px){
	*{
		font-size: 18px;
	}
	form div{
	margin: 0 auto;
	margin-bottom: 32px;

	}
}
/*===== BOUTONS ======= */
a.primary, button.primary, input.primary{
	font-weight: 600;
	padding: 10px;
	border: 4px solid #130FF9;
	background-color: #130FF9 ;
	color: #FFF;
	cursor : pointer;

}

a.secondary, button.secondary{
	font-weight: 600;
	padding: 10px;
	border: 4px solid #130FF9;
	background-color: #A0FFB3 ;
	cursor : pointer;


}
a.tertiary, button.tertiary{
	font-weight: 600;
	padding: 10px;
	border: 4px solid #130FF9;
	background-color: #DBEAF7 ;
	cursor : pointer;

	
}
a.primary:hover, button.primary:hover, a.secondary:hover, button.secondary:hover, a.tertiary:hover, a.tertiary:hover, input[type=submit]:hover, .action-link:hover,.action-doc:hover, .action-edit:hover, .action-view:hover, .action-delete:hover, a.material-symbols-outlined:hover, .td-edit:hover, .td-edit:hover .action-edit, .td-doc:hover, .td-doc:hover .action-doc, .td-view:hover, .td-view:hover .action-view, .td-delete:hover, .td-delete:hover .action-delete,  .td-link:hover, .td-link:hover .action-link{
	background-color: #FFF ;
	color: #130FF9;
}

.bouton{
	padding: 0;
	max-height: 30px;
	display: table-cell;
	text-align: center;
}
.blocDroite{
	position: fixed;
  right: 1px;
  width: 27%;
}

/*===== TITRES  & textes======= */

h1{
	font-size: 48px;
	margin: 0;
}
h2{
	font-size: 36px;
	margin: 0;
}
h3{
	font-size: 24px ;
	margin: 0;
}
p, input{
	font-size: 18px;
	font-weight: 400;
	margin: 0;
}
label{
	display: inline-block;
	width: 100%;
	text-align: left;
}
label, th{
	font-size: 14px;
	font-style: italic;
	font-weight: 400;
	padding-bottom: 0;
	margin: 0;	
}

th{
	padding-left: 8px;
}
.overflow-text{
	white-space: nowrap;
  overflow-x: hidden;
	text-overflow: ellipsis;
	height: 60px;
}
/*==== LES INPUTS =====*/
.formulaire{
	background-color: #DBEAF7;
	padding: 20px;
	border: 3px solid #130FF9;
	height: fit-content;
}

.pre-form{
	background-color: #130FF9;
	padding: 5px 20px;
	border: 3px solid #130FF9;
	/*height: 50px;*/
	
}
.pre-form h2{
	white-space: nowrap;
  	overflow-x: hidden;
  	overflow-y: clip;
  	text-align: left;
	margin-top: 0;
	color: #FFF;
	margin-bottom: 0;
	/*line-height: 40px;*/
}
form div{
	margin: 0 auto;
	margin-bottom: 18px;

}
input, select,input[type=submit] {
	padding: 10px;
	border: 2px solid #130FF9;
	height: 50px;
	display: block;
	width: -webkit-fill-available;
	font-size: 18px;
	cursor : pointer;
	white-space : nowrap;
}
select, input[type=time], input[type=date]{
	background-color: #FFF;
}
input{
	height: 26px;
}

input[type=submit]{
	display: block;
}
input[type=color]{
	width: 80px;
	height: 60px;

}
input[type=checkbox]{
	display: inline-block;
	width: 25px;
}
.check-label{
	display: inline-block;
	width: fit-content;
	padding-right: 5px;
	vertical-align: super;
}
.check-forfait{
	display: inline-block;
	width: 75%;
	padding-right: 5px;
	/*vertical-align: super;*/
}
.demi-width{
	display: inline-block;
	width: 49%;
}

.story{
	width: 40%;
	display: inline-block;
	margin-right: 7.5%;
}
.echeance{
	width: 51%;
	display: inline-block;
}
.gauche{
	width: 49%;
	display: inline-block;
	text-align: left;
}
.droite{
	width: 49%;
	display: inline-block;
}
.formulaire input[type=submit]{
	margin-top: 32;
}

/*===== POP IN ======*/
.overlay{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;

	top: 0;
	left: 0;
	overflow-y: hidden;
	opacity: 0.6;
	background-color: #081838;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.popIn{
	display: none;
	position: fixed;
	top: 0%;
	left: 25%;
	z-index: 9;
	width: 50%;
	margin: 0 auto;
}
.cancel{
	width: 15%;
	/*display: block;*/
	margin: 0 auto;
}

 hr{
  width: 20px; /* Adjust width as needed */
  transform: rotate(90deg); /* Rotate the HR element 90 degrees */
  border-color: #130FF9; /* Set border color (default is black) */
} 
.popIn h2{
	text-align: center;
}

table{
	border-collapse: collapse;
	table-layout: fixed;
	width:fit-content;
	margin: 0 auto;
}
tr{
	max-height: 30px;
}
td{
	border: 2px solid #130FF9;
	background-color: #FFF;
	font-size: 18px;
	padding: 0 8px;
	height: 48px;
	vertical-align: middle;
	text-align: left;
}
.center{
	padding: 0;
	text-align:center;
}
.pop td{
	font-size: 18px;
	
}

.td-link, .action-link, .action-link .material-symbols-outlined{
	background-color: #130FF9;
	color: #FFF;
	cursor : pointer;
	text-align: center;
	padding: 0;

}
.action-doc, .td-doc{
	background-color: #E5C8FC;
	cursor : pointer;
	text-align: center;
	padding: 0;
}

.action-edit, .td-edit{
	background-color: #F2F2F2;
	cursor : pointer;
	font-size: 22px;
	text-align: center;
	padding: 0;
}
.action-view, .td-view{
	background-color: #FFF6A0;
	cursor : pointer;
	text-align: center;
	padding: 0;
}
.action-delete, .td-delete{
	background-color: #FEADAD;
	cursor : pointer;
	text-align: center;
	text-align: center;
	padding: 0;
}
.action-edit, .action-link, .action-view, .action-delete, .action-doc, .action-link .material-symbols-outlined{
		border: none!important;
}

.statut{
	cursor : pointer;
	border: none;
}
.scroll{
	scroll-behavior: smooth;
}

/*====================================================================
======================================================================*/
#popUp_newRecurring{
	width: 70%;
	left: 15%;

}
@media screen and (min-width: 1920px){
	.blocDroite{
  	width: 26%;
	}
	.popIn{
		width: 40%;
		left:30%;
		top:1%;
	}
	#popUp_newRecurring{
	width: 50%;
	left: 30%;
}

}

@media screen and (device-width: 412px){
	.pre-form{
		/*height: unset;*/
		padding: 5px 20px;
		line-height: normal;
	}
	.pre-form h2{
		line-height: normal;
		margin-top: -10px;
	}
	.popIn, .blocDroite {
		width: 100%;
		left:0%;
		top:unset;
		top: 0%;
	}
	.cancel{
		width: 30%;
		display: block;
	}
	.menu{
	  	width: 100%;
	  	height: 100vh;
	  	left: 0%;
	  	background-color: #130FF9;
	  	align-items: start ;
	}
	.formulaire{
		padding: 10px;
		margin-bottom: 32px;
	}
	.buttonBlocDroite{
		position: fixed;
  		bottom: 5px;
  		width: 60%;
  		left: 20%;
  	}
  	.sousBoutonfix{
  		position: fixed;
  		bottom: 0px;
  		width: 100%;
  		height: 80px;
  		background-color: #FFF;

  	}
  	a.primary, button.primary, input.primary, a.secondary, button.secondary, a.tertiary, button.tertiary{
  		line-height: 36px;
    text-align: center;
  	}
  	.story, .echeance{
  		width: 100%;
  		margin: unset;

  	}

}

 fieldset{
 	border: none;
 	padding: 0;
 }  

/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #FFF;
  border: 2px solid #130FF9;
  border-radius: 0%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #DBEAF7;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #130FF9;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 3px;
  left: 8px;
  /*width: 8px;
  height: 8px;*/
  color: #FFF;
  /*border-radius: 0%;
  background: white;*/
  content: "x";
}


#popLeft, #popRight, #popTiers{
	width: 100%;
	margin-bottom: 0;
}