.nameFilesOff{
    display:none;
    width: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    transition: 0.3s;
}
.nameFilesOn{
    width: 100%;
    display:flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    transition: 0.3s;
    margin-bottom: 15px;
}

.drop_box {
  position: relative;
  width:calc(100%);
  height: 100%;
  margin: 10px 10px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 3px dotted var(--vertDarkCharte);
  border-radius: 5px;
}

.drop_box h4 {
  font-size: 16px;
  font-weight: 400;
  color: var(--charte_violet);
}

.drop_box p {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--charte_violet);

}

.btn, .btn2  {
  text-decoration: none;
  background-color: var(--vertDarkCharte);
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  outline: none;
  transition: 0.3s;
  border-radius:10px;
}
.btn2{
    position:absolute;
    top :10px;
    right:10px;
  transition: 0.3s;

}
.btn:hover, .btn2:hover{
  text-decoration: none;
  background-color: #ffffff;
  color: var(--vertDarkCharte);
  padding: 10px 20px;
  border: none;
  outline: 1px solid #010101;
}
.form input {
  margin: 10px 0;
  width: 100%;
  background-color: #e2e2e2;
  border: none;
  outline: none;
  padding: 12px 20px;
  border-radius: 4px;
}




.contentSousMenu{
    width:75%;
    /* border:1px solid black; */
    display:flex;
    align-items: flex-start;
    /* align-content: flex-start; */
    /* JUSTIFY-CONTENT:flex-start; */

}
.contentSousMenu2{
    margin-top:-50px;
    width:25%;
    /* border:1px solid black; */
    align-items: flex-start;
    /* align-content: flex-start; */
    /* JUSTIFY-CONTENT:flex-start; */

}
.etapesSession{
    color : var(--marronCharte);
    font-size:20px;
	/* margin:5px; */
	/* margin-left:20px; */
}
.etapesSession > i{
    font-size:25px;
}

.toolbar > div > i{
    font-size:30px;
    color : var(--marronCharte);
    transition : 0.5s;
}

.toolbar > div > i:hover{
    font-size:30px;
    color : white;
    transition : 0.5s;
}

.toolbar{
        margin-left:-5px;
        margin-top:5px;
        text-align:center;
        display: flex;
        padding-left: 20px;
        position: sticky;
        top: 20px;
        z-index: 10;
        height:75px;
        /* border:1px solid red; */
}
.header{
    color: var(--marronCharte);
	background : white;
}
.mainMenu{
	/* border:1px solid orange; */
	width:200px;
	height:100%;
	/* display:none; */
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
}

.mainContenu{
	/* border:1px solid red; */
	width:calc(100% - 200px);
	height:100%;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	
}

.footer{
	text-align:center;
	width: 100%;
	height:50px;
	box-shadow: 10px 0px 10px 5px rgb(213 213 213 / 53%);
	border-top-left-radius : 10px;
	border-top-right-radius : 10px;
	background : white;
	border:1px solid var(--charteGris2);

}

.header{
	display:flex;
	height:50px;
	text-align:center;
	width: calc(100%);
	box-shadow: 10px 0px 10px 5px rgb(213 213 213 / 53%);
	border-bottom-left-radius : 10px;
	border-bottom-right-radius : 10px;
	/* border:1px solid red; */
	padding-top:5px;
}

.contenu{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-CONTENT:flex-start;
	ALIGN-CONTENT:flex-start;
	
	
	width: calc(100%);
	height:calc(100% - 102px);
	min-width:800px;
	/* box-shadow: 10px 0px 10px 5px rgba(213,213,213,0.53); */
	/* border-bottom-left-radius : 10px; */
	/* border-bottom-right-radius : 10px; */
	/* border:1px solid red; */
	/* background-color:red; */
	overflow:auto;

}

/* Style tableau LG*/
.td-status span {
    margin-bottom: 2px;;
    position: relative;
    border-radius: 30px;
    padding: 2px 10px 2px 25px; 
	height:5px;
}
.td-status span:after {
      position: absolute;
      top: 9px;
      left: 10px;
      width: 10px;
      height: 10px;
      content: '';
      border-radius: 50%; }
.td-status .active {
    background: #cff6dd;
    color: #1fa750; }
.td-status .active:after {
      background: #23bd5a; }
.td-status .waiting {
    background: #fdf5dd;
    color: #ffbf00; }
.td-status .waiting:after {
      background: #f2be1d; 
}
.td-status .danger {
    background: #fddddd;
    color: #ff0000; 
}
.td-status .danger:after {
      background: #DC143C; 
}

.boxActions{
    position:absolute;
    bottom:0;
    margin-top:20px;
	/* border:1px solid silver; */
	box-shadow:10px 0px 10px 5px rgb(213 213 213 / 53%);
	border-radius:10px;
	width:calc(100% - 150px);
    height:100px;
	margin-right:20px;
}
.boxDocuments{
    margin-top:20px;
	/* border:1px solid silver; */
	box-shadow:10px 0px 10px 5px rgb(213 213 213 / 53%);
	border-radius:10px;
	width:calc(100% - 150px);
    height:100px;
	margin-right:20px;
}
/* Ajout LG 01/11 pour formulaire */

.form {
background-color: white;
border-radius: 20px;
box-sizing: border-box;
padding: 20px;
width: 100%;
}

.title {
color: #005c9f;
font-family: sans-serif;
font-size: 36px;
font-weight: 600;
margin-top: 30px;
}

.input-container {
height: 50px;
position: relative;
width: 100%;
}

.ic1 {
margin-top: 40px;
}

.ic2 {
margin-top: 30px;
}

.input {
background-color: white;
border: 1px solid  var(--charte_violet);
border-radius: 12px;
box-sizing: border-box;
color: black;
font-size: 18px;
height: 100%;
outline: 0;
padding: 4px 20px 0;
width: 100%;
}
.programmeButton{
	display:flex;
	FLEX-WRAP:wrap;
	width:calc(100% - margin);
    border:1px solid var(--marronCharte);
	border-radius:5px;
	padding:5px;
	ALIGN-ITEMS:center;
	/* ALIGN-CONTENT:flex-start; */
	margin:5px;
    margin-top:10px;
	cursor:pointer;
	
	
	transition:0.8s;
	/* border:1px solid blue; */
	}
	
.programmeButton:hover{
	border:1px solid var(--marronCharte);
	background-color:var(--vertPastelCharte);
	transition:0.3s;
}


.programmeButton>i{
    color: var(--marronCharte);
	font-size:25px;
	padding-right:5px;
	width:25px;
	}

.programmeButton>nav{
    padding-left:10px;
	display:block;
	overflow:hidden;
	white-space:nowrap;
	/* border:1px solid red; */
	
}
.drop
{
	border:3px dotted red;
	background-color:var(--charteGris);
}