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;
    padding : 0px;
    margin: 0px;
	background-color: #ffffff;
	/*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;*/
}
.topline{
	position: fixed; 
	top: 0px;
	/*padding-top: 10px;*/
	/*margin-top: 10px;*/
	width: 100%;
	/*background-color: #fff;*/
	margin-left:auto;
	margin-right:auto;
	background-image: url(/images/fond.jpg);
	z-index: 9;
}

.menu {
	/*position: fixed;*/
	width: 100%; 
	display:grid; 
	/*background-color: rgb(255, 255, 255);*/
	/*border-top-left-radius : 5px; 
	border-top-right-radius : 5px; */
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: 666;
	z-index: 9;
}
@media only screen and (max-width: 700px){
	.menu {
		display: none;
	}
}

.smallscreen{
	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 
    {
		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;
	}
	.mpsel{
		margin-top: 5px;
		margin-right: 10%;
		background-color: #ddd; /*  ffefc3*/
		border: thin solid #333; 
		border-radius : 5px;
		padding-left: 0px;
		padding-right: 0px;
		justify-content: start;
		align-items: start;
		text-align: left;
		/*right: 10%; */
		width: 70%;
	}

	.mpbox{
		width: 99.9%;
	}
    .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;
   }
 	.mpbox a{
		border-bottom: none; 
		padding-top: 1px;
		padding-bottom: 1px;
		padding-left: 20%;
		padding-right: 40%;
		line-height: 8px;
		font-size: larger;
		color: #333;
		/*width: 100%;*/
		text-align: left;
	}
 	.mpbox a:last-child{
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
		background-color: #fff;
	}

	.mpbat{
		color: #1a3883;
	}

    .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; 
    }
 
    #selection:checked + .main_pages,
    #toggle:checked + .main_pages {
        display: flex;
		transition: .5s ease-in-out;
    }
}
.hamburger{
	border: thin solid black; 
	border-radius: 3px; 
	padding: 0px; 
	margin: 0px; 
	background-color:#fff; 
	align-self: end; 
	height: 25px;
}
input[type="checkbox"].toggler { 
	display: none;
}
.bgblack{
	background-color: #fff;
} 
.bgblue{
	background-color: #c4d4fc;
} 

/*.menu > div {
	border-top: thin solid #fff; 
	border-left: thin solid #fff; 
	border-top-left-radius : 5px; 
	border-top-right-radius : 5px; 
	padding-top: 10px;
	padding-bottom: 10px;
}*/
/*.menu > div:last-child {
	border-right: thin solid #fff; 
}*/

/*.menu_en_cours {
	background-color: #fff; 
}*/
.menu_en_cours {
	background-color: #0636c2 ;/*#fff8ed, rgba(255, 248, 237, 0.85)*/
	/*border-top-left-radius : 5px; 
	border-top-right-radius : 5px; */
}
/*.menu_pas_en_cours {
	background-color: #eee; 
	border-bottom: thin solid #333; 
}*/
.menu_pas_en_cours {
	background-color: #849ce1;
	/*border-top-left-radius : 5px; 
	border-top-right-radius : 5px; */
}
.menu_pas_en_cours:hover {
	background-color: #a8b8e7;
}

.titrePage{
	background-color: #4a78e6; 
	color: #0636c2;
}

.container{
	margin-top: 40px;
	width: 100%;
	background-color: #fff;
	margin-left:auto;
	margin-right:auto;
	min-height: 600px;
	/*border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border : thin solid #4a78e6;*/
	border-top : none;
	/*padding: 20px;*/
	/*padding-top: 10px;*/
	/*margin-bottom: 20px;*/
}
@media only screen and (max-width: 700px){
	.container {
		width: 95%;
		margin-top: 30px;
	}
}
.title{
	display:flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
	text-align:center; 
	background-color: rgba(255, 235, 209, 0.65); 
	/*border-radius: 10px; */
	padding: 5px; 
	padding-top: 0px;
	margin: 20px; 
	width: 80%; 
	margin-left:auto; 
	margin-right:auto;
}
@media only screen and (max-width: 700px){
	.title {
		width: 95%;
	}
}


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;
}
.ancre div:target { /*pour laisser la hauteur du menu qd d�placement avec les ancres*/
    padding-top: 30px; 
    margin-top: 30px; 
}


.leftalign{
	text-align:left;
	display: flex;
	justify-content: start;
}

.smaller{ /*pe-fiche*/
	font-size: smaller;
}

.space10{ /*pe-fiche*/
	margin-top: 10px;
	margin-bottom: 10px;
}

.spbetween{
	justify-content: space-between;
}

.form{
	width: 95%;
	display: grid;
	grid-template-columns: repeat(4, auto); 
	border: thin solid #f90;
	border-radius: 5px;
	padding: 10px;
	gap: 8px;
}
.formBorder{
	background-color: #ccc; 
	border: medium solid #f60;
	border-radius: 5px;
	padding: 10px; 
	width: 95%;
}

.formLines{
	width: 100%;
	display: flex;
	flex-direction:column;
	border: thin solid #f90;
	border-radius: 5px;
	padding: 10px;
	gap: 8px;
}
.ligne{ /*pe-fiche*/
	/*width: 100%;*/
	display: flex;
	gap: 20px;
	align-items: center;
}

.ligneW{ /*pe-fiche*/
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
}

.column{ /*pe-fiche*/
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gap20{
	gap: 20px;
}

.cadre{ /*pe-fiche*/
	width: 95%;
	margin-bottom: 0px;
	margin-top: 0px;
}
.cadre_pt{ /*pe-fiche*/
	border-radius: 5px;
	padding: 10px;
}
.cadre_titre{ /*pe-fiche*/
	font-size: larger;
	font-weight: bold;
	padding-bottom: 10px;
	background-color: #fedeb6;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px; 
	padding-top: 5px;
	text-align:center;
}
.cadre_sous_titre{ /*pe-fiche*/
	color: #f60;
}
.pad10{
	padding: 10px;
}
.pad0{
	padding: 0px;
	margin: 0px;
}

.w100{
	width: 100%;
}
.w30{
	width: 30%;
}

.h100{
	height: 100%;
}

.space_small{ /*pe-fiche*/
	gap: 3px;
}

.left{
	justify-self: start;
}
.wrap{
	flex-wrap: wrap;
}

.alignSelfCenter{
	align-self: center;
}
.alignSelfEnd{
	align-self: end;
}
.alignItemsCenter{
	align-items: center;
}
.justifySelfStart{
	justify-self: start;
}
.justifySelfCenter{
	justify-self: center; 
}
.justifySelfEnd{
	justify-self: end; 
}

.gap3{
	gap: 3px;
}
.textAlignCenter{
	text-align: center;
}
.cursorDefault{
	cursor: default;
}

.col_projet{
	border: thin solid #333; 
	width: 15%;
	align-self: start;
	border-radius: 10px;
	margin-bottom: 15px;
	background-color: #333;
	display: flex;
	flex-direction : column; 
	text-align: center;
}
@media only screen and (max-width: 700px){
	.col_projet {
		visibility: hidden;
		width: 0%;
	}
}

.titre_col{
	border-top-left-radius: 10px; 
	border-top-right-radius: 10px; 
	background-color:#f27200; 
	color: #111; 
	font-size:larger; 
	font-weight: bold;
	border-color: #111; 
	text-align:center; padding: 20px;
}

.cell_col{
	outline: 1px solid #666; 
	padding: 5px; 
	text-align:center; 
	display:flex; 
	align-items: center; 
	padding-top: 10px; 
	padding-bottom: 10px;
}

.last_cell_col{
	outline: 1px solid #666; 
	padding: 5px; 
	text-align:center; 
	display:flex; 
	align-items: center; 
	padding-top: 10px; 
	padding-bottom: 10px; 
	background-color: #f27200;
}

.col_projet > div:last-child {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.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%;
}*/


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


.leftmenu{
	position: fixed;
	left: 1%;
	width: 10%;
	display: flex; 
	flex-direction: column;
	padding: 5px;
	text-align:center;
	color: #666;
	padding: 0;
	margin: 0;
	/*height: 280px;*/
}

.leftme2col{
	position: fixed;
	left: 1%;
	width: 11%;
	display: grid; 
	grid-template-columns: 80% 20% ; 
	gap: 0px;
	padding: 5px;
	text-align:center;
	color: #999;
	padding: 0;
	margin: 0;
	/*height: 280px;*/
}

@media only screen and (max-width: 700px){
	.leftmenu,
	.leftme2col{
		display: none; 
	}
}

.leftme2col > div,
.leftmenu > div{
	height: 35px;
	justify-content: center;
	align-items: center;
}

.leftme2col > a,
.leftmenu > a{
	height: 35px;
	justify-content: center;
	align-items: center;
}
.left_sousmenu,
.left_sousmenu_co{
	width: 10%;
	display: flex; 
	flex-direction: column;
	padding: 5px;
	border: medium solid #fedeb6;
	border-radius: 5px;
	text-align:center;
	color: #999;
	padding: 0;
	margin: 0;
	margin-top: 10px;
	background-color: #8b3800;
}
.left_sousmenu > a,
.left_sousmenu_co > a{
	display: flex; 
	min-height: 35px;
	justify-content: center;
	align-items: center;
}
.left_sousmenu_co{
	border: medium solid #9ca0fd;
	background-color: #2d34b4;
}
/*.left_sousmenu > div{
	height: 30px;
	justify-content: center;
	align-items: center;
}*/
/* -------------------------------------------------------------- connexion ----------------------------------------------------------------------*/

.connexionBox{
	background-color: #666; 
	border-radius:10px; 
	border: thin solid #999; 
	margin-top: 30px; 
	width: 60%; 
	margin-left: auto; 
	margin-right: auto;
}
@media only screen and (max-width: 700px){
	.connexionBox {
		width: 95%;
	}
}

.connexGrid{
	display: flex; 
	width : 80%; 
	margin-left:auto; 
	margin-right: auto; 
	justify-content: space-evenly; 
	align-items: center;
}
@media only screen and (max-width: 700px){
	.connexGrid {
		flex-direction: column;
	}
}

/* -------------------------------------------------------------- tableau de bord ----------------------------------------------------------------------*/

.gridtb{
	display: grid;
	grid-template-columns: repeat(8, auto); 
	text-align:center;
	padding-bottom: 10px;
	align-items: center;
	justify-content: space-evenly; 
	width : 95%; 
	margin-top : 40px; 
	margin-left: auto;
	margin-right: auto;
	gap: 5px;
}
@media only screen and (max-width: 700px){
	.gridtb {
		grid-template-columns: repeat(4, auto); 
	}
}

.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; 
	}
}

.tbnco{
	grid-column: 1 / span 2; 
	grid-row: 1;
	border: medium solid #560157; 
	background-color:#8c008e;
}

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

.tbnpe{
	grid-column: 3 / span 2; 
	grid-row: 1;
	border: medium solid #f90; 
	background-color:#FC9;
}

@media only screen and (max-width: 700px){
	.tbnpe {
		grid-column: 1 / span 2; 
		grid-row: 2;
	}
}
.tbnin{
	grid-column: 5 / span 2; 
	grid-row: 1;
	border: medium solid #8c008e; 
	background-color:#560157; 
}

@media only screen and (max-width: 700px){
	.tbnin {
		grid-column: 1 / span 2; 
		grid-row: 3;
	}
}

.tbnpm{
	grid-column: 7 / span 2; 
	grid-row: 1;
	border: medium solid #2d34b4; 
	background-color:#9ca0fd;
}

@media only screen and (max-width: 700px){
	.tbnpm {
		grid-column: 1 / span 2; 
		grid-row: 4;
	}
}
.tblico{
	grid-column: 1 / span 2; 
	grid-row: 2;
	border: medium solid #9ca0fd; 
	background-color:#2d34b4; 
}

@media only screen and (max-width: 700px){
	.tblico {
		grid-column: 3 / span 2; 
		grid-row: 1;
	}
}

.tbrepe{
	grid-column: 3 / span 2; 
	grid-row: 2;
	border: medium solid #f90; 
	background-color:#FFC;
}

@media only screen and (max-width: 700px){
	.tbrepe {
		grid-column: 3 / span 2; 
		grid-row: 2;
	}
}

.tbliab{
	grid-column: 5 / span 2; 
	grid-row: 2;
	border: medium solid #9F3; 
	background-color:#090;
}

@media only screen and (max-width: 700px){
	.tbliab {
		grid-column: 3 / span 2; 
		grid-row: 3;
	}
}

.tblifa{
	grid-column: 7 / span 2; 
	grid-row: 2;
	border: medium solid #000; 
	background-color:#c33;
}

@media only screen and (max-width: 700px){
	.tblifa {
		grid-column: 3 / span 2; 
		grid-row: 4;
	}
}

.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; 
	}
}

/* -------------------------------------------------------------- calendrier       ----------------------------------------------------------------------*/
.leftside{
	margin-top: 35px;
	width: 6%;
	float: left; 
	display: flex; 
	flex-direction: column;

}
.rightside{
	width: 90%;
	margin-left: 15%;
	float:right;
	display: flex; 
	flex-direction: column;
	gap: 10px;
}

@media only screen and (max-width: 700px){
	.rightside {
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		float: none;
	}
}

.fixedCal{
	position: fixed;
	margin-top: 0px;
	height: 50px;
	width: 100%;
	background-color: #fff;
	/*border-bottom: thin solid #4a78e6;*/
	z-index: 1;
}

.selectionCal{
	position: fixed; 
	top: 70px; 
	left: 1%; 
	display: grid; 
	grid-template-columns: 80% 1fr 8px; 
	font-size: small;  
	width: 8%; 
	align-items: center; 
	z-index: 200
}

@media only screen and (max-width: 700px){
	.selectionCal {
		display: none;
	}
}

.titreCal{
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	margin-top: 0px; 
	padding-top: 0px; 
	margin-left: 14%;
	height: 30px;
	background-color: white;
}
@media only screen and (max-width: 700px){
	.titreCal {
		margin-left: 0%;
		flex-direction: column;
		height: auto;
		width: 100%;
	}
}

.styleMonth{
	margin-left: 10%; 
	width: 30%; 
	align-items: center; 
	font-size: large; 
	font-weight: bold;
}
@media only screen and (max-width: 700px){
	.styleMonth {
		width: 100%; 
		text-align: center;
		padding-top: 7px;
	}
}

@media only screen and (max-width: 700px){
	.choix_vue_visibility {
		display: none; 
	}
}

.styleChoixVue{
	border: thin solid #666; 
	border-radius: 15px; 
	display: flex; 
	font-size: 0.8em; 
	
}
@media only screen and (max-width: 700px){
	.styleChoixVue {
		font-size: 1em; 
	}
}

@media only screen and (max-width: 700px){
	.stylePrevNext{
		font-size: x-large;
	}
}
.styleCalToday{
	text-align: center;
}

@media only screen and (max-width: 700px){
	.styleCalToday {
		padding-top: 4px; 
	}
}

.mainCal{
	display: grid; 
	grid-template-columns: 11% 20px 1fr; 
	width: 100%;
}

@media only screen and (max-width: 700px){
	.mainCal {
		grid-template-columns: 0% 20px 1fr; 
	}
}

.rightsideCal,
.rightsideCal3 {
	margin-top: 20px;
	width: 100%;
	float:right;
}

.elem_mois{
	/*display: flex; 
	flex-wrap: wrap; */
	/*display: grid;
	grid-template-columns: auto auto auto; 
	grid-template-rows: 1.5em 1.5em; */
	justify-content: space-between; 
	align-items: center; 
	width: 100%; 
	border-radius: 5px; 
	font-size: smaller; 
	font-weight: normal;
}

.highlight{
	border: medium solid #333;
}

.normal{
	border: none;
}

.centerplace{
}

.box-item{
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
}

.grid{
	display: grid;
	grid-template-columns: repeat(7, auto); 
	border-radius: 5px;
	text-align:center;
	padding-bottom: 10px;
	align-items: center;
}
.grid4{
	display: grid;
	grid-template-columns: repeat(4, auto); 
	text-align:center;
	align-items: center;
}
.grid8{
	display: grid;
	grid-template-columns: repeat(8, auto); 
	border-radius: 5px;
	text-align:center;
	padding-bottom: 10px;
	align-items: center;
}
.grid10{
	display: grid;
	grid-template-columns: repeat(10, auto); 
	border-radius: 5px;
	text-align:center;
	padding-bottom: 10px;
	align-items: center;
}
.grid6L{
	display: grid;
	grid-template-columns: repeat(6, auto); 
	border-radius: 5px;
	text-align:center;
	padding-bottom: 10px;
	align-items: center;
}
.grid15{
	display: grid;
	grid-template-columns: repeat(15, auto); 
	border-radius: 5px;
	text-align:center;
	padding-bottom: 10px;
	align-items: center;
	justify-content: space-evenly; 
	width : 100%; 
	margin-top : 50px; 
	padding: 10px; 
	gap: 20px;
}

@media only screen and (max-width: 700px){
	.grid15 {
		grid-template-columns: repeat(6, auto); 
	}
}

.grid > div,
.grid8 > div,
.grid10 > div,
.grid6L > div{
	min-height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.Hmin30{
	min-height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.grid_title{
	padding: 5px;
}
.grid_title:first-child {
	border-top-left-radius : 5px; 
}
.grid_title:last-child {
	border-top-right-radius : 5px; 
}

.gridcot{
	display: grid;
	align-items: center;
	width: 100%;
	grid-template-columns: 10% 19% 19% 19% 19% 15% ; 
	gap: 10px;
}
.grid7{
	grid-template-columns: 10% 19% 19% 19% 18% 5% 5%; 
}
.grid3{
	display: grid;
	grid-template-columns: auto auto auto; 
	align-items: center;
	width: 100%;
	gap: 10px;
}
.grid6{
	display: grid;
	grid-template-columns: auto auto auto auto auto auto; 
	align-items: center;
	width: 100%;
	gap: 10px;
}
.grid4{
	display: grid;
	grid-template-columns: auto auto auto auto; 
	width: 100%;
}

.grid4 > div {
	padding: 10px;
}

.box1{
	grid-row: 1; 
	grid-column: 1;
}

.grid_calendrier{
	display: grid;
	grid-template-columns: 15.6% 15.6% 15.6% 15.6% 15.6% 12% 1fr; 
	grid-template-rows: auto ;	
	/*align-items: center;*/
	/*justify-content: center; */
	/*width: 100%;/*
	/*gap: 10px;*/
	/*border: thin solid #666;*/
	/*border-radius: 10px;*/
	height: calc(100vh - 100px);
	width: 100%;
}
.grid_calendrier > div{
	/*min-height: 30px;*/
	display: flex;
	align-items: start;
	justify-content: center;
	border-top: thin solid #666;
	border-left: thin solid #666;
	padding: 5px;
}
.grid_calendrier > div:first-child{
	/*border-top-left-radius: 10px;
	background-color: #ccc;
	align-items: center;*/
}

.grid_calendrier > div:nth-child(7){
	/*border-top-right-radius: 10px;
	background-color: #ccc;
	align-items: center;*/
}

.grid_calendrier > div:last-child{
	border-bottom: thin solid #666;
	/*border-bottom-right-radius: 10px;*/
}
.grid_calendrier > div:nth-last-child(7){
	border-bottom: thin solid #666;
	/*border-bottom-left-radius: 10px;*/
}

.grid_calendrier > div:nth-last-child(6),
.grid_calendrier > div:nth-last-child(5),
.grid_calendrier > div:nth-last-child(4),
.grid_calendrier > div:nth-last-child(3),
.grid_calendrier > div:nth-last-child(2){
	border-bottom: thin solid #666;
	/*background-color: #ccc;
	align-items: center;*/
}
.otherMonth{
	/*color: #666;*/
	opacity: 0.3;
}

.grid_calendrier2{
	display: grid;
	grid-template-columns: 3% 14.2% 14.2% 14.2% 14.2% 14.2% 14.2% 1fr; 
	grid-template-rows: 2.5em auto ;	
	/*align-items: center;*/
	/*justify-content: center; */
	/*width: 100%;/*
	/*gap: 10px;*/
	/*border: thin solid  #ccc;*/
	/*border-radius: 10px;*/
	/*height: calc(100vh - 90px);*/
	color: #333;
	height: 54em;
}
a.grid_calendrier2 {
	color: white;
}
.grid_calendrier2 > div{
	/*min-height: 30px;*/
	display: flex;
	/*flex-direction: column;*/
	/*align-items: center;*/
	/*justify-content: center;*/
	border-right: thin solid  #333;
	/*padding: 5px;*/
	/*height: calc(100vh - 100px);*/
	height: 53em;
}
.grid_calendrier2 > div:first-child{
	/*border-top-left-radius: 10px;*/
	/*background-color: #ccc;*/
	/*align-items: center;*/
	/*align-self: stretch; */
	/*justify-self: stretch;*/
}
.grid_calendrier2 > div:first-child{
	/*border-top-left-radius: 10px;*/
	/*background-color: #ccc;*/
}

.grid_calendrier2 > div:nth-child(7){
	/*border-top-right-radius: 10px;*/
	/*background-color: #ccc;*/
	/*align-items: center;*/
}

.grid_calendrier2 > div:last-child{
	/*border-bottom-right-radius: 10px;*/
}
.grid_calendrier2 > div:nth-last-child(7){
	/*border-bottom-left-radius: 10px;*/
}

.grid_calendrier2 > div:nth-child(6),
.grid_calendrier2 >  div:nth-child(5),
.grid_calendrier2 >  div:nth-child(4),
.grid_calendrier2 > div:nth-child(3),
.grid_calendrier2 > div:nth-child(2){
	/*background-color: #ccc;*/
	/*align-items: center;*/
}

.colonneCal{
	display: flex; 
	flex-direction: column; 
	justify-content: start; 
	align-items: center;
	width: 100%;
	/*background-color: blue;*/
}

.titreJourCal,
.titreJourCalSem{
	width: 100%; 
	text-align: center; 
	padding-top: 5px; 
	/*padding-bottom: 5px; */
	height: 15px; 
	background-color: #ccc; 
	border-top: thin solid #333;
	border-left: thin solid #333;
	border-bottom: thin solid #333;
	justify-content: stretch; 
}
.titreJourCalSem{
	height: 20px; 
}


.titreJourCal:first-child{
	/*border-left: thin solid #333;*/

}
.grille_contain{
	display: flex; 
	justify-content: center;
	width: 100%;
	/*background-color: blue;*/
}
.grille_contain > div: :first-child{
	width: 80%;
}

.grille,
.grilleH{
	display: grid; 
	grid-template-columns: 100%; 
	grid-template-rows: repeat(24, 65px);
	justify-content: stretch; 
	text-align: center; 
	
	font-size: 0.9em;
	/*background-color: blue;*/
}

.grille > div{
	border-top: thin solid #ccc; 
	justify-self: stretch;
	justify-content: stretch;
}

.grilleH{
	font-size: 0.5em;
}

.boxHeure{
	display: flex; 
	gap: 2px; 
	width: 100%; 
	justify-content: stretch;
	/*background-color: blue;*/
}

.objCal{ 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: space-between; 
	align-items: center; 
	width: 100%; 
	border-radius: 5px; 
	font-size: smaller; 
	font-weight: normal;
}

.objCalEmpty{ 
	display: block; 
	flex-wrap: wrap; 
	justify-content: space-between; 
	align-items: center; 
	width: 100%; 
	border-radius: 5px; 
	font-size: smaller; 
	font-weight: normal;
}

.boxMonth{
	display: flex; 
	flex-direction: column; 
	justify-content: space-between; 
	align-items: center; 
}

.boxMonthDay{
	display: flex; 
	flex-direction: column; 
	gap: 2px; 
	justify-content: center; 
	align-items: center; 
	height: 90%; 
	width: 100%;
}
.boxDay{
	display: flex; 
	flex-direction: column; 
	gap: 5px; 
	justify-content: center; 
	align-items: center; 
	width: 100%;
}
.box_cal{
	width: 30%;
}
@media only screen and (max-width: 700px){
	.box_cal {
		width: 90%;
	}
}

.ligneMonthElem{
	width: 100%; 
	display: flex; 
	flex-wrap: nowrap;
}
.todayBox{
	background-color: rgba(138, 162, 243, 0.502);
}
.todayNumber{
	background-color: rgba(58, 25, 165, 1); 
	border-radius: 15px; 
	padding: 2px; 
	color: #162966;
}

.todayNumber:hover{
	color: #fff;
}

.boxWeek{
	align-self: center; 
	display: block; 
	width: 100%; 
	height: 100%; 
	cursor: crosshair;
}
.boxDayElem,
.boxWeekElem{
	display: grid; 
	grid-template-columns: auto auto auto; 
	grid-template-rows: 90% 10% ;
	cursor:move;
	margin-right: 10px; 
	border-radius: 3px; 
	font-size: smaller; 
	font-weight: normal;
}
.boxDayElem{
	border: thin solid black;
}
.drophover{
	background-color: #ccc;
}

.grid_calendrier3{
	display: grid;
	/*grid-template-columns: minmax(13%, 18%)  minmax(13%, 18%)  minmax(13%, 18%)  minmax(13%, 18%)  minmax(13%, 18%) 12% 10%; */
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 12% 10%; 
	/*grid-template-rows: 2.5em repeat(24, 3em) ;	*/
	grid-auto-rows: 65px;
	align-items: start;
	justify-content: center; 
	/*width: 100%;/*
	/*gap: 10px;*/
	/*border: thin solid  #ccc;*/
	/*border-radius: 10px;*/
	/*height: calc(100vh - 90px);*/
	color: #333;
	/*height: 800px;*/
}

.grid_cal_jour{
	display: grid;
	/*grid-template-columns: minmax(13%, 18%)  minmax(13%, 18%)  minmax(13%, 18%)  minmax(13%, 18%)  minmax(13%, 18%) 12% 10%; */
	grid-template-columns: 1fr; 
	margin-right: 10%;
	/*grid-template-rows: 2.5em repeat(24, 3em) ;	*/
	/*grid-auto-rows: 65px;*/
	align-items: start;
	justify-content: center; 
	/*width: 100%;/*
	/*gap: 10px;*/
	/*border: thin solid  #ccc;*/
	/*border-radius: 10px;*/
	/*height: calc(100vh - 90px);*/
	color: #333;

}
.grid_cal_jour > div {
	/*min-height: 30px;*/
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	/*border-top: thin solid #666;
	border-left: thin solid #666;*/
	padding: 5px;
}

a.grid_calendrier3 {
	color: white;
}
.grid_calendrier3 > div{
	/*min-height: 30px;*/
	display: flex;
	/*flex-direction: column;*/
	/*align-items: center;*/
	/*justify-content: center;*/
	/*padding: 5px;*/
	/*height: calc(100vh - 100px);*/
	/*height: 53em;*/
	/*background-color: #ccc;*/
}
.grid_calendrier3 > div:first-child{
	/*border-top-left-radius: 10px;*/
	/*background-color: #ccc;*/
	/*align-items: center;*/
	/*align-self: stretch; */
	/*justify-self: stretch;*/
}
.grid_calendrier3 > div:first-child{
	/*border-top-left-radius: 10px;*/
	/*background-color: #ccc;*/
}

.grid_calendrier3 > div:nth-child(7){
	/*border-top-right-radius: 10px;*/
	/*background-color: #ccc;*/
	/*align-items: center;*/
}

.grid_calendrier3 > div:last-child{
	/*border-bottom-right-radius: 10px;*/
}
.grid_calendrier3 > div:nth-last-child(7){
	/*border-bottom-left-radius: 10px;*/
}

.grid_calendrier3 > div:nth-child(6),
.grid_calendrier3 >  div:nth-child(5),
.grid_calendrier3 >  div:nth-child(4),
.grid_calendrier3 > div:nth-child(3),
.grid_calendrier3 > div:nth-child(2){
	/*background-color: #ccc;*/
	/*align-items: center;*/
}

.styleCelCal{
	border-top: thin solid #ccc;
	border-left: thin solid  #333;
	height: 100%;
	/*background-color: rgba(0, 0, 255, 0.5);*/
}

.calInb{
	background-color: white; 
	color: black; 
	border-radius: 20px; 
	padding-left: 3px; 
	padding-right: 3px; 
	padding-top: 0; 
	margin-top: 0; 
	font-size: smaller;
}
.calPnb{
	background-color: black; 
	color: #b8c7f7; 
	border-radius: 20px; 
	padding-left: 3px; 
	padding-right: 3px; 
	padding-top: 0; 
	margin-top: 0; 
	font-size: smaller;
}

.minmax{
	grid-column: 1 / span 3; 
	display: grid;
	grid-template-columns: auto auto; 
	justify-self: center; 
	margin-bottom: 15px; 
	border: thin solid black;
}
@media only screen and (max-width: 700px){
	.minmax {
		margin-bottom: 0px; 
		margin-top: 5px;
		margin-left: 5px;
		align-self: end;
	}
}

.minmax_active{
	background-color: #349425;
	padding: 5px;
	/*border: medium solid black;*/
}
.minmax_active:hover{
	background-color: #a0da97;
	/*border: medium solid black;*/
}
.minmax_not_active{
	background-color: #fff;
	/*border: medium solid black;*/
	padding: 5px;
}
.minmax_not_active:hover{
	background-color: #000;
	/*border: medium solid black;*/
}

.bg_vert{
	background-color: #2cb553ff; 
	color: #000;
}

.bg_333{
	background-color: #333; 
	color: #ddd; 
}

.calImgBoat{
	width: 10px; 
	border-radius: 2px;
}

.calSelSkip{
	background-color: #ffc966; 
	padding-left: 2px; 
	padding-right: 2px; 
	border-radius: 2px; 
	color: #000;
	border: none; 
	width: 100%;
}

.calSkipWeek{
	padding-left: 0px; 
	padding-right: 0px; 
	writing-mode: sideways-lr; 
	text-align: center; 
	padding-top: 5px; 
	padding-bottom: 5px;
}

.calDenom{
	justify-self: stretch; 
	text-align: center; 
	width: 70%; 
	text-wrap: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis;
}
.calDenomWeek{
	word-break: break-all; 
	writing-mode: sideways-lr; 
	text-orientation: upright; 
	padding-top: 3px; 
	text-align: center;
}
.calHeure{
	justify-self: start; 
	font-size: smaller; 
	color: #fff; 
}
.calHeureWeek{
	font-size: 0.7em; 
	justify-self: end; 
	display: flex; 
	align-items: end; 
	width: 100%; 
	grid-column: 1 / span 2;
	color: #fff; 
}
.calDureeBox{
	font-size: 0.5em; 
	color: white; 
	display: grid; 
	justify-content: center;
}
.calNumNom{
	font-size: xx-small; 
	background-color: #7dd673ff; 
	color: #6e481bff; 
	padding: 1px; 
	border-radius: 2px; 
	cursor: grabbing;
}
.calIdBox{
	justify-self: end; 
	align-self: end;
}
.calId{
	font-size: xx-small; 
	border: thin solid #ddd;
	border-radius: 2px;
	padding: 1px; 
	/*width: 1em;*/
}

.calBatSelect{
	width: 100%; 
	display: flex; 
	flex-wrap: nowrap; 
	align-items: center; 
	gap: 3px;
}
.calSelectNatel{  /* IN calendrier   */
	display: none;
}
@media only screen and (max-width: 700px){
	.calSelectNatel {
		display: block;
	}
}

label {
	color: #777;
	font-style: italic;
	font-size: smaller;
}
.label_gris {
	color: #777;
	font-style: italic;
	font-size: smaller;
}
.radio{
	color: #000;
	font-style: normal;
	font-size: normal;

}
.cogrid {
	background-color:#6269ff;
}

.cell{
	/*padding-top: 5px; 
	padding-bottom: 5px;*/
	vertical-align: middle;
}

.cocell{
	padding: opx;
	margin: 0px;
	width: 100%;
	height: 100%;
	vertical-align:middle;
}

.categories{
	display: flex; 
	width: 100%; 
	gap: 10px; 
	text-align:center; 
	font-size: smaller; 
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.catcubeD{
	width: 10.5%; 
	display: grid;
}
@media only screen and (max-width: 700px){
	.catcubeD{
		width: 18%; 
	}
}
.catcubeC{
	width: 9%; 
	display: grid;
}
@media only screen and (max-width: 700px){
	.catcubeC{
		width: 15%; 
	}
}

.acces{
	background-image: url(images/IconeCompte2.png);
    /*width: 20px;*/ /* Specify the width */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
	background-size: 30px;
	background-repeat:no-repeat; 
	background-position:center;
}
.acces:hover{
	background-image: url(images/IconeCompteO90.png);
}

.img_en_cours{
	background-image: url(images/IconeCompteO60.png);
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
	background-size: 30px;
	background-repeat:no-repeat; 
	background-position:center;
}
.img_en_cours:hover{
	background-image: url(images/IconeCompteO90.png);
}
/*.contenu{
	border : thin solid #333; 
	border-radius-bottom: 5px; 
	border-top : none; 
	border-bottom-right-radius : 5px; 
	border-bottom-left-radius : 5px; 
	min-height: 500px;
	margin-bottom: 15px;
	width: 80%;
	opacity: 93%;
}*/

.roundbottom {
	border-bottom-right-radius : 5px; 
	border-bottom-left-radius : 5px; 
}

.texte{
	padding: 20px; 
}

.sectionClair {
	background-color: rgba(255, 248, 237, 0.85);/*#fff8ed*/
	
}

.sectionBrun{
	padding: 20px; 
	/*background-color: rgba(75, 43, 1, 0.95);*/
	background-color: rgba(142, 81, 1, 0.85);
	margin: 0px;
	padding: 0px;
	padding-top: 20px;
	padding-bottom: 20px;
	color:  #333;
}

a {
	text-decoration: none;
	color: #f90;
	font-weight: bold;
}
a:hover {
	text-decoration: none;
	color: #666;
}
a:active {
	text-decoration: none;
}

.menu a,
.last_cell_col a,
.titre_col a,
a.whitea {
	color:  #fff;
}
a.whitea:hover {
	color: #c33;
}
a.reda {
	color: #c33;
}
a.reda:hover {    /*utilisé sur co_fiche*/
	color: #f60;
}

.menu a:hover {
	color: #4a78e6;
}

a.menu_en_cours  {
	color: #fff;
}
a.menu_pas_en_cours  {
	color: #0636c2;
}
a.menu_pas_en_cours:hover  {
	color: #4a78e6;
}

.menu > div {
	padding-top: 10px;
	padding-bottom: 10px;
}

a.vueCal{
	color: #000;
	padding-left: 5px; 
	padding-right: 5px; 
}
a.vueCal:hover{
	color: #fff;
	background-color: #000;
	border-radius: 15px;
}
a.vueCalActive{
	color: #fff;
	background-color: #666;
	border-radius: 15px;
}

.last_cell_col a:hover,
.titre_col a:hover {
	color: #4b2b01;
}

a.underl {
	text-decoration:underline;
}

.leftme2col a,
.leftmenu a{
	color: #666;
	display: flex;
	justify-content: center;
}


.leftme2col a:hover,
.leftmenu a:hover{
	color: #0636c2;
	background-color: #a8b8e7;
}
.lm_actif{
	background-color: #0636c2;
}
a.lm_actif{
	color: #fff;
}
.lm_actif:hover{
	background-color: #4a78e6;
}
a.lm_actif:hover,
a.lmc_actif:hover {
	color: #666;
}
.lmc_actif{
	background-color: #9ca0fd;
}
.lmc_actif:hover{
	background-color: #2d34b4;
}

.lsm_actif{
	background-color: #fedeb6;
}
.lsm_actif:hover{
	background-color: #f60; 
}
.left_sousmenu a:hover {
	background-color: #fec074;
}

.lsmco_actif{
	background-color: #9ca0fd;
}
.lsmco_actif:hover{
	background-color: #696dd1;
}
.left_sousmenu_co a:hover{
	background-color: #696dd1;
}
a.lsmco_actif{
	color: #666;
}

a.export:hover{
	background-color: #777;
}
a.export{
	background-color: #444;
}
img {
	border-radius: 5px; 
	width: 100%;
}

.afaire {
	color: #1e013f;
	border: thin solid #F3F;
	background-color: #FCF;
	font-style: italic; 
	font-size: smaller;
	padding: 5px;
	width:auto;
}
.error{
	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;
	diplay: flex;
}

.gridcell {
	outline: 1px solid 333; 
	padding: 5px;
}

.gridincell {
	display: grid;
	align-items: center;
}

.titlegrid {
	background-color: rgba(255, 236, 209, 0.25);
	/*background-color:#ffdcae;*/
	text-align: center;
	padding: 10px;
	color: #fff;
}



.soOk{
	padding: 7px;
	border: thin solid #84fabf;
	background-color: #0C6;
	border-radius: 10px;
}
.soNot{
	padding: 7px;
	border: thin solid #f60;
	background-color: red;
	border-radius: 10px;
}



.boite1{
	border: thick solid #ffdcae; 
	border-radius: 10px; 
	background-color: #f27200; 
	color: #666; 
	font-family:'Comic Sans MS', cursive; 
	padding: 15px; 
	margin-top : 20px; 
	margin-right: 30px; 
	margin-left: 15px;
}
.zoneCategories {
	display: flex; 
	width: 85%; 
	flex-wrap: wrap; 
	gap: 20px; 
	justify-content: center; 
	text-align:center; 
	margin-left:auto; 
	margin-right:auto;
	padding-top: 20px;
	padding-bottom: 20px;
}
@media only screen and (max-width: 700px){
	.zoneCategories {
		width: 100%; 
		padding: 0px; 
		margin: 0px;
	}
}

.mettreRelation{
	display:flex; 
	justify-content: space-evenly; 
	align-items: center; 
	margin: 20px; 
	text-align:center; 
	width: 75%; 
	margin-left:auto; 
	margin-right:auto
}
@media only screen and (max-width: 700px){
	.mettreRelation {
		width: 100%; 
	}
}

.box3 {
	border-radius: 10px; 
	background-color: #f27200; 
	color: #666; 
	font-family:'Comic Sans MS', cursive; 
	padding: 5px; 
	width: 50%; 
	border: 20px solid transparent; 
	padding: 20px; 
	border-image: url(images/ampoule-border.png) 25 repeat; 
	border-image-repeat: repeat;
}
@media only screen and (max-width: 700px){
	.box3 {
	padding: 5px; 
	border-image: none; 
	border-image-repeat: none;
	border: 10px solid transparent; 
	width: 100%; 
	}
}
.box4 {
	color: #000; 
	background-color: #ffdcae; 
	border-radius: 10px; 
	font-family:'Comic Sans MS', cursive; 
	padding: 5px; 
	width: 50%; 
	border: 20px solid transparent; 
	padding: 15px; 
	border-image: url(images/roue-border.png) 25 repeat; 
	border-image-repeat: repeat; 
}
@media only screen and (max-width: 700px){
	.box4 {
	padding: 5px; 
	border-image: none; 
	border: 10px solid transparent; 
	width: 100%; 
	}
}

.acteur{
	display: grid; 
	width: 100%; 
	grid-template-columns: repeat(6, 1fr); 
	justify-content: center; 
	text-align:center;
}
@media only screen and (max-width: 700px){
	.acteur {
		grid-template-columns: repeat(3, 1fr); 
		gap: 10px; 
	}
}

.principe{
	display: grid; 
	width: 80%; 
	grid-template-columns: repeat(5, 1fr); 
	justify-content: center; 
	text-align:center; 
	margin-left:auto; 
	margin-right:auto; 
	gap: 10px;
}
@media only screen and (max-width: 700px){
	.principe {
		grid-template-columns: repeat(3, 1fr); 
	}
}
.princCarre {
	display: flex; 
	flex-direction: column;
	gap: 10px;
}

.princTitle {
	background-color: #ffecd1; 
	border: thin solid #ffdcae; 
	font-weight: bold; 
	font-size: larger; 
	border-radius: 10px; 
	padding: 10px; 
	align-self: center; 
	color: #4b2b01;
}

.princIcone {
	width:50px; 
	background-color: #ffecd1; 
	border-radius: 10px; 
	padding: 5px;
}

.listeProjets {
	display: flex; 
	gap: 20px; 
	justify-content: space-evenly; 
	flex-wrap: wrap;
}

.carreProjet {
	display: flex; 
	flex-direction: column; 
	width: 30%; 
	border: solid 1px 666; 
	border-radius: 10px;
}

@media only screen and (max-width: 700px){
	.carreProjet {
		width: 90%; 
	}
}


.confirmer{
	background-image: url(images/case-a-cocher-o2.png);
    width: 20px; /* Specify the width */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
	background-size: contain;
	background-repeat:no-repeat; 
	background-position:center;
}
.confirmer:hover{
	background-image: url(images/case-a-cocher-w.png);
}

.contacter{
	background-image: url(images/mailOrange.png);
    width: 20px; /* Specify the width */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
	background-size: contain;
	background-repeat:no-repeat; 
	background-position:center;
}
.contacter:hover{
	background-image: url(images/mailBlanc.png);
}
.modifier{
	background-image: url(images/modifier.png);
    width: 20px; /* Specify the width */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
	background-size: contain;
	background-repeat:no-repeat; 
	background-position:center;
}
.modifier:hover{
	background-image: url(images/modifier2.png);
}
.supprimer{
	background-image: url(images/delete.png);
    width: 20px; /* Specify the width */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
	background-size: contain;
	background-repeat:no-repeat; 
	background-position:center;
}
.supprimer:hover{
	background-image: url(images/delete2.png);
}

.label-file{
	cursor: pointer;
    color: #f60;
    font-weight: bold;		
}
.label-file:hover{
    color: #f90;
}

input[type=file] {
  /*color: #222245;
  padding: 8px 12px;
  background-color: #fff;
  border: 1px solid #222245;
  word-break:break-all;
  white-space: wrap; 
  word-wrap: break-word;
  max-width: 200px;*/
}


input:placeholder-shown{
	font-style:italic; 
	color: #666;
}

input[type="checkbox"] {
	/*display:none;*/
}

.open label {
  color: #f90;
  text-align:center;
  justify-self: center;
}
.open label:hover {
  color: #f60;
}
.open label:active {
  color: #f60;
}

.open label::before {
  content: '\27BA'; /* closed folder */
}

input:checked + .open label {
  content: '\1F5C1'; /* open folder */
  display: none;
}

.tobeopen {
  display: none;
}

input:checked ~ .tobeopen {
  display: block;
}
input:checked + .open label {
  font-weight: bold;
  color: #f90;
  font-size: larger;
}

.information{
	background-color: #999;
	color: #000;
	border: thin solid #333;
	border-radius: 5px;
	font-size: smaller;
}

[inert], [inert] * {
  opacity: 0.7;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

.footer{
  background-color: #4b2b01; 
  background-image:url(images/ideaB.png);
  width: 100%;
  color: 666; 
  margin: 0px;
  padding: 0px;
  display: flex; 
  justify-content: space-evenly; 
  align-items: center; 
  word-break:break-all;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}
@media only screen and (max-width: 700px){
	.footer{
		flex-direction: column;
		gap: 10px;
		justify-content: center;
	}
}
/* ----- modal  ------------------------- -----------------  ------------------------- */
/* The Modal (background) */
.ModalLiPart,
.modalFormHeures,
.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 #f90;
  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 #f90;
  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;
}
.apmodform{
	cursor: grabbing;
	color: #fff;
}
.apmodformC{
	cursor: crosshair;
	color: #f90;
}

.apmodform:hover{
	color: #f90;
}
.apmodformC:hover{
	cursor: crosshair;
	color: #666;
}

/* 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: #ff9900;
}
.Close:hover,
.CloseC:hover {
	color: #666;
  text-decoration: none;
  cursor: pointer;
}
@media only screen and (max-width: 700px){
  .Close {
	  font-size: 3em;
  }
} 

.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: #f90;
}
.CloseCal:hover {
	background-color: #999;
	color: #333;
  text-decoration: none;
  cursor: pointer;
}


.modalContainerC label {
	color: #999;
	font-size: smaller;
}

.form-required {border: 2px solid red;}

.forfaitPresta,
.forfaitSalaire,
.forfaitClient{
	display: none;
}

.box_list_part{
	width: 40%; 
	margin-top: 100px; 
	background-color: white;
	z-index: 100;
}
@media only screen and (max-width: 700px){
	.box_list_part {
		position: relative;
		width: 100%; 
		left: 40px ;
	}
}

.liste_part{
	display: grid; 
	grid-template-columns: auto auto auto auto auto;
	line-height: 1.7em;
	font-size: larger;
	padding: 5px;
}

/*------ animations  --------------------------------------------------------------------- */

.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.3);
	-moz-transform: scale(1.3);
	-o-transform: scale(1.3);
	transform: scale(1.3);
}



/*----------------- positionnint anchor --------------------- */
@supports (anchor-name: --a) {
  /* ici les styles avec anchor-positioning */
}
.element {
  anchor-name: --element_tochange;
}

.element_positionne {
  position: absolute; /* ou fixed */
  position-anchor: --element_tochange;
  top: anchor(bottom); 
}


/*------ 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: 40%;
  background-color: #f90;
  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);

}


.redbg{
	background-color:#cc3333;
}
.viobg{
	background-color:#2d34b4;
}
.bgme{
	background-color:#f90;
}
.brme{
	border: thin solid #f90;
	border-radius: 5px;
}
.come{
	color: #f90;
}

.brco{
	border: thin solid #9ca0fd;
	border-radius: 5px;
}
.bgco{
	background-color:#9ca0fd;
}

.coco{
	color: #2d34b4;
}
.coco2{
	color: #0e16a4;
}

.cogrey{
	color: #aaa;
}
.fondViolet{
	background-color:#8c008e;
	border-radius: 5px;
	border: thin solid #e07be1;
}

.bgactif{
	background-color: #fedeb6;
}

.triactif{
	background-color: #f60;
}

.triNotactif{
	background-color: none;
}
 
.triactifco{
	background-color: #2d34b4;
}
.triactifev{
	background-color: #2d34b4;
}


.sk_cal select,
.sk_cal option {
  -webkit-appearance: none;
  appearance: none;
}

.sk_cal option{
	color: blue;

}

.tableau_title{
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	display: grid; 	
	grid-template-columns: repeat(7, auto); 
	border-bottom: 1px solid #666; 
	border-right: 1px solid #666; 
}
.tableau{
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	display: grid; 	
	grid-template-columns: repeat(7, auto); 
	border-bottom: 1px solid #666; 
	border-right: 1px solid #666; 
}

.tableau_title > div,
.tableau > div {
	border-top: 1px solid #666; 
	border-left: 1px solid #666; 
	padding: 5px;
	
}

.fact_grid{
	display: grid; 
	grid-template-columns: repeat(11, auto); 
	border-bottom: thin solid #000; 
	border-right: 1px solid #000; 
}
.sal_grid_pt > div,
.sal_grid_cours > div,
.fact_grid > div {
	border-top: 1px solid #000; 
	border-left: 1px solid #000; 
	padding: 5px;
	
}

.fact_grid_cours{
	display: grid; 
	grid-template-columns: repeat(10, auto) minmax(100px, 40%); 
	text-align: center;
}
.fact_grid_cours > div {
	padding: 5px;
	
}

.sal_grid_pt,
.sal_grid_cours{     /* IN pe_fi_salaires */
	display: grid; 
	grid-template-columns: repeat(13, auto); 
	border-bottom: thin solid #000; 
	border-right: 1px solid #000; 
	min-width: 90%; 
	max-width: 95%; 
	margin-left: auto; 
	margin-right: auto; 
	margin-top: 10px;
}
.sal_grid_pt{
		grid-template-columns: repeat(5, auto); 
}

.pmt_grid{
	display: grid; 
	grid-template-columns: repeat(9, auto);
	border-bottom: 1px solid #000; 
}

.pmt_grid > div {
	border-top: 1px solid #000; 
	padding: 5px;
	
}

input[type="checkbox"].ckboxhidden  {
	display:none;
}