.barreMenuDiv:hover
{
	/* width:200px; */
	transition:0.5s;
	z-index:3;
}

.barreMenuDiv
{
	display:flex;
	position:absolute;
	top:10px;
	align-items:center;
	justify-content: left;
	border:0px solid black;
	padding:5px;
	padding-left:10px;
	background-color:var(--charte_violet);
	width:50px;
	height:50px;
	margin-right:5px;
	border-radius:10px;
	border:1px solid #ffffff;
	color:#ffffff;
	overflow:hidden;
	cursor:pointer;
	user-select:none;
}



.barreMenuText
{
	margin-left:8px;
	min-width:200px;
}

.btn {
  text-decoration: none;
  background-color: #005af0;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  outline: none;
  transition: 0.3s;
}

.btn:hover{
  text-decoration: none;
  background-color: #ffffff;
  color: #005af0;
  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;*/
/*}*/

//Ajout principal
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200&display=swap');

:root {
    --charte_gris: #adb5bd;
    --charte_gris_clair: #edf0f3;
    --charte_bleu: #4650dd;
    --charte_gris_dark: #6c757d;
    --charte_violet: #4649dd;
    --charte_violet-clair: #acb1f8;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #000;
}

body {
    background: #f8f9fa;
	
}



ion-icon {
    pointer-events: none !important;
}

.header i,
.header i a {
    font-size: 30px;
    color: var(--charte_violet);
}

input {
    border: 0px;
    /* border-bottom: 1px solid var(--charte_gris_dark); */
}

.input_red {
    border: 1px solid red !important;
    background-color: rgb(255, 189, 189);
}

.input_green {
    border: 1px solid green !important;
}

table {
    border-collapse: collapse;
    /* Les bordures du tableau seront collées (plus joli) */
    padding: 0px;
    margin: 0px;

}

td {    text-align: left;}
tr {background-color: white;}



.block_table td ion-icon {
    color: black;
    font-size: 16px;
}

.block_table td i:hover {
    color: red;
    /* transform: rotate(-90deg); */
    transition: 0.5s;
}

th {
    text-align: left;
}

table tr:nth-child(odd) {
    /* background-color: var(--charte_gris_clair); */
}


.tableResultRecherche {
    border: 2px solid var(--charte_violet);
}

.divResultRrecherche {
    position: absolute;
    top: 30px;
    left: 0px;
    right: -100px;
    z-index: 999;
    /* height:30px; */
    overflow: auto;
    max-height: 300px;
}

.selectDevisOption {
    border: 0px;
    font-weight: bold;
}

.selectDevisOption>option {
    font-weight: bold;
}

.devisEntenteInput {
    width: 100%;
    color: #ffffff;
    background-color: var(--charte_violet);
    font-weight: bold;
    border-radius: 5px 5px 0px 0px;
    padding-left: 5px;
}

.devisRechercheProduitInput {
    position: relative;
    width: 100%;
    background-color: var(--charte_gris_clair);
    border-bottom: 0px solid black;
    /* margin-top:10px; */
    margin-bottom: 10px;

}

.trListProduitSelected {
    background-color: var(--charte_gris);
}

.td_50>i {
    color: var(--charte_violet);

}

.trExcel input {
    border: 0px;
}

.trExcel>td {
    border-left: 1px solid black;
}

.trExcel {
    background-color: #ffffff !important;
}


.trRechercheProduit {
    cursor: pointer;
    background-color: #fff;
}

.trRechercheProduit:hover {
    background-color: var(--charte_gris_clair);
    color: var(--charte_violet);
}

.hover:hover{
    background-color: var(--charte_violet-clair);
    /* font-weight:bold; */
}

.ful_screan {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    color: red !important;
    display: none;
}

.main {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    width: 100%;
    min-width: 900px;
	/* height:calc(100vh - 150px); */
}

.header {
    display: flex;
    background: #ffffff;
    /* border: 1px solid black; */
    height: 50px;
    justify-content: space-between;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    align-items: center;
    align-content: center;
    width: 100%;
    z-index: 3;
}

.header div {
    /* border:1px solid black; */
}

.header ul {
    display: flex;
    list-style-type: none;
}

.header li {
    padding-left: 10px;
    color: var(--charte_bleu);
    display: flex;
    align-items: center;
    justify-items: center;
}



.header ion-icon {
    font-size: 30px;
    margin-left: 10px;
    margin-top: 5px;
    color: var(--charte_gris);
}

.menu_user {
    display: none;
}

.menu_user_on {
    /* display: flex; */
    position: absolute;
    top: 50px;
    right: 5px;
    border: 1px solid var(--charte_gris);
    width: 250px;
    background: #ffffff;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
	z-index:3;
}

.ligneMenuUser:hover {
    background-color: var(--charte_gris_clair);

}


.ligneMenuUser {
    display: flex;
}

.ligneMenuUser .bi {
    /* border:1px solid red; */
    padding-right: 5px;
    padding-left: 3px;
}

.menu_user_on:hover {
    background-color: var(--charte_gris_clair);

}


.menu_user_ico {
    display: flex;
    height: 50px;
    width: 50px;
    justify-content: center;
}

.menu_user_txt {
    display: flex;
    align-content: center;
    align-items: center;
    width: 200px;
    height: 50px;

}

li ion-icon {
    color: var(--charte_violet) !important;
}

.menu {
    width: 200px;
    padding-top: 30px;
    min-height: calc(100vh - 120px);
    background: white;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}




.menu_titre {
    color: var(--charte_gris);
    font-size: 18px;
    font-weight: bold;
    padding-left: 10px;
    padding-bottom: 20px;
}



.main_menu {
    position: relative;
    /* font-family: var(--bs-font-sans-serif); */
    font-size: 18px;
    /* border: 1px solid black; */
    display: flex;
    align-items: center;
    justify-items: center;
    height: 40px;
    padding-left: 38px;
    color: var(--charte_gris_dark);
}

.main_menu:hover,
.sous_menu a:hover {
    background: var(--charte_gris_clair);

}

.main_menu {
    user-select: none;
}

.main_menu a {
    font-family: var(--bs-font-sans-serif);
    font-size: 18px;
    color: var(--charte_gris_dark);
    font-weight: bold;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-items: center;
}

.main_menu ion-icon {
    position: absolute;
    left: 5px;
    top: 9px;
    font-size: 25px;
    color: var(--charte_gris_dark);

}

.main_menu>i {
	margin-left:-30px; margin-right:5px; font-size:25px;
	width:30px;
	
}

.main_menuseul {
    position: relative;
    /* font-family: var(--bs-font-sans-serif); */
    font-size: 18px;
    /* border: 1px solid black; */
    display: flex;
    align-items: center;
    justify-items: center;
    height: 40px;
    padding-left: 38px;
    color: var(--charte_gris_dark);
}

.main_menuseul:hover,
.sous_menu a:hover {
    background: var(--charte_gris_clair);

}

.main_menuseul {
    user-select: none;
}

.main_menuseul a {
    font-family: var(--bs-font-sans-serif);
    font-size: 18px;
    color: var(--charte_gris_dark);
    font-weight: bold;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-items: center;
}

.main_menuseul ion-icon {
    position: absolute;
    left: 5px;
    top: 9px;
    font-size: 25px;
    color: var(--charte_gris_dark);

}

.fleche_menu {
    position: absolute;
    right: 10px;
    transform: rotate(0deg);
    transition: 0.5s;
    font-weight: bold;

}

.fleche_anime {
    transform: rotate(-90deg);
    transition: 0.5s;
}


.active,
.active:hover {
    color: #ffffff;
    background: var(--charte_violet);
}

.active ion-icon,
.active ion-icon:hover {
    color: #ffffff;
}

.sous_menu {
    display: block;
    font-size: 15px;
    color: var(--charte_gris_dark);
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: var(--charte_gris_clair);

}

.sous_menu a:hover {
    font-style: italic;
    font-weight: bold;
    /* transition: 0.3s; */
}


.sactive {
    max-height: 500px;
    /* box-shadow:0 .2rem 0.2rem rgba(0,0,0,.15); */
    border-bottom: 1px solid var(--charte_gris);

    transition: max-height 0.5s ease-in;


}

.sous_menu a {
    font-size: 15px;
    color: var(--charte_gris_dark);
    padding-left: 20px;
    display: flex;
    width: calc(100% - 20px);
    height: 100%;
    align-items: center;
    justify-items: center;
}

.select_smenu {
    font-weight: bold;
    background-color: var(--charte_violet-clair);
}

.contenu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: calc(100% - 244px);
	/* border:1px solid red; */
	margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    min-height:calc(100vh - 180px) ! important;
	


}



/* menu salaries */
.contenu0 {
    display: flex;
    width: 100%;
    justify-content: left;
    align-items: left;
    align-content: space-between;
    margin-left: 20px;
    margin-top: 20px;
}

.contenu0 ion-icon {
    font-size: 30px;
    color: #ffffff;
    margin-left: 5px;
    background: var(--charte_violet);
    padding: 5px;
    border-radius: 10px 0px 0px 10px;


}



.contenu0>nav {
    display: flex;
}

.contenu0>nav>a {
    display: block;
    margin: 0px;
    padding: 0px;

}

.contenu0>nav>div {
    display: flex;
    align-items: center;
    /* border: 1px solid black; */
    width: 0px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--charte_gris);
    border-radius: 0px 10px 10px 0px;
    padding-left: 5px;
    padding-right: 5px;
    color: #ffffff;
    height: 40px;
}

.contenu0>nav>div {
    display: flex;
    align-items: center;
    /* border: 1px solid black; */
    width: 0px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--charte_gris);
    border-radius: 0px 10px 10px 0px;
    padding-left: 5px;
    padding-right: 5px;
    color: #ffffff;
    height: 40px;
}


.menu_active {
    width: 120px !important;
    color: #000 !important;
    transition: .5s;
}

.menu_desabled {
    width: 1px !important;
    color: rgb(255, 255, 255) !important;
    transition: .5s;
}

/* menu salaries */
.contenu1 {
    width: 580px;
    text-align: center;
    transition: width 1.1s 0.1s ease;

}

.contenu1b {
    width: 800px;
    text-align: center;
    transition: width 1.1s 0.1s ease;


}


.contenu2 {
    display: flex;
    flex-wrap: wrap;
    /* border: 1px solid black; */

}

.contenu2 {
    width: calc(100% - 580px);
    transition: width 1.1s 0.1s ease;

}

.contenu2b {
    width: calc(100% - 800px);
    transition: width 1.1s 0.1s ease;

}




.titre1 {
    position: relative;
    width: calc(100% - 30px);
    /* font-weight: bold; */
    font-size: 2em;
    color: #343a40;
    padding-left: 45px;
}

.titre2 {
    position: relative;
    width: calc(100% - 30px);
    /* font-weight: bold; */
    font-size: 1em;
    color: #343a40;
    padding-left: 35px;
}


.block_100,
.block_50 {
    /* border:1px solid black; */
    box-shadow: 10px 0px 10px 5px rgba(213, 213, 213, 0.53);
    background: #ffffff;
    border-bottom: none;
    /* min-width: calc(46%); */
    min-height: 70px;
    border-radius: 10px;
    margin: 20px;
    padding-bottom: 20px;


}

.block_100 select {
    width: 120px;
}

.taille_bloc_400>.block_titre,
.taille_bloc_800>.block_titre,
.taille_bloc_1200>.block_titre {
    font-size: 1em;
}

.taille_bloc_400,
.taille_bloc_800,
.taille_bloc_1200 {
    /* border:1px solid black; */
    box-shadow: 10px 0px 10px 5px rgba(213, 213, 213, 0.53);
    background: #ffffff;
    border-bottom: none;
    min-height: 70px;
	height:auto;
    border-radius: 10px;
    margin: 20px;
    padding-bottom: 20px;

}

.taille_bloc_400 {
    width: 450px;
}

.taille_bloc_800 {
    width: 800px;
}

.taille_bloc_1200 {
    width: 1200px;
}





.block_50 {

    width: 750px;

}

.block_max_500 {

    max-width: 480px;
    min-width: 300px;


}


.block_table td a {
    display: block;
    width: 100%;
    height: 100%;
}

.td_up_java {
    width: 100%;
    border: 1px solid var(--charte_violet);
    color: #000000;
    font-weight: bold;
    font-size: 1.5;
}



.block_titre {
    position: relative;
    display: flex;
    font-size: 1.4em;
    /* border: 1px solid black; */
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    align-items: center;
    justify-items: center;
    border-bottom: 1px solid var(--charte_gris);
    color: var(--charte_violet);
    font-weight: bold;
    justify-content: space-between;
    padding-left: 50px;

}

.block_titre a {
    color: var(--charte_violet);

}

.block_titre ion-icon {
    position: absolute;
    font-size: 30px;
    top: 10px;
    left: 10px;
    cursor: pointer;
}

.iTitle {
    position: absolute;
    font-size: 30px !important;
    top: 1px;
    left: 1px;
    cursor: pointer;

}

.iIcone {
    font-size: 30px !important;
    cursor: pointer;
    color: var(--charte_violet);

}

.retour {
    position: absolute;
    font-size: 30px !important;
    cursor: pointer;
    margin-right: 30px;
    left: -10px;
    color: var(--charte_bleu);

}

.retour:hover {
    top: -2px;
    font-size: 35px !important;
    transition: 0.2s;
    /* background-color:var(--charte_bleu); */
    /* color:white; */


}



.iOption {
    font-size: 30px !important;
    Color: var(--charte_violet);
    cursor: pointer;
}

.i_title_absolut {
    position: absolute;
    font-size: 30px;
    top: 0px;
    left: 0px;
    cursor: pointer;
}

.ion-icon-right_titre {
    position: absolute;
    font-size: 30px;
    top: 0px;
    right: 60px;
    cursor: pointer;
}

.block_titre div,
.block_titre span,
.block_titre i,
.block_titre a {
    /* border: 1px solid black; */

    font-size: 1.2em;
}

.block_titre i {
    margin-left: 10px;
}

.block_titre i:hover {
    font-size: 1.3em;
    cursor: pointer;
}

.block_titre button,
.label_file,
.textFile button,
.block_table button {
    /* border: 1px solid black; */
    padding: 8px;
    /* padding-left:5px; */
    /* padding-right:5px; */
    background-color: var(--charte_violet);
    color: #ffffff;
    border: 0px;
    border-radius: 5px;
    min-width: 80px;
    font-weight: bold;
    content: "Selected file: ";

}

progress[value] {


    width: 250px;
    height: 20px;
    background: var(--charte_gris_clair);

}

.label_file {
    margin-top: 10px;
    margin-bottom: 30px;
}

#file_input {
    display: none;
}

.block_titre button:hover,
.block_table button:hover {
    color: var(--charte_violet);
    background: #ffffff;
    border: 1px solid var(--charte_violet);
    transition: 0.3s;

}

.block_titre input {
    width: 200px;
}




.block_table,
.block_info {

    min-height: 100px;
    /* max-height: 800px; */
    padding: 20px;
    padding-top: 30px;
    /* overflow:auto; */

}

.block_info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 450px;
}

.block_info div {
    width: 150px;
    text-align: center;
}

.block_info span {
    font-weight: bold;
    color: var(--charte_bleu);
}

.block_table tr:hover {
    /* font-weight: bold; */

}



.block_table table {
    width: 100%;
}

.block_table th {
    border-bottom: 1px solid black;
    background: #ffffff;
}


.td_50,
.td_50r,
.td_50l {
    border-bottom: 1px solid var(--charte_gris);
    width: 50px;
}

.td_100,
.td_100r,
.td_100l {
    border-bottom: 1px solid var(--charte_gris);
    width: 100px;
}

.td_150,
.td_150r,
.td_150l {
    border-bottom: 1px solid var(--charte_gris);
    width: 150px;
}

.td_200,
.td_200r,
.td_200l {
    border-bottom: 1px solid var(--charte_gris);
    width: 200px;
}

.td_250,
.td_250r,
.td_250l {
    border-bottom: 1px solid var(--charte_gris);
    width: 250px;
}

.td_300,
.td_300r,
.td_300l {
    border-bottom: 1px solid var(--charte_gris);
    width: 300px;
}

.td_350,
.td_350r,
.td_350l {
    border-bottom: 1px solid var(--charte_gris);
    width: 350px;
}

.td_libre,
.td_librer,
.td_librel {
    border-bottom: 1px solid var(--charte_gris);
}

.td_50r,
.td_100r,
.td_150r,
.td_200r,
.td_250r,
.td_300r,
.td_350r,
.td_librer {
    text-align: right;
}

.td_50l,
.td_100l,
.td_150l,
.td_200l,
.td_250l,
.td_300l,
.td_350l,
.td_librel {
    text-align: left;
}

.td_50,
.td_100,
.td_150,
.td_200,
.td_250,
.td_300,
.td_350,
.td_libre {
    text-align: center;
}



.td_150 {
    border-bottom: 1px solid var(--charte_gris);
    width: 150px;
    text-align: center;
}

.td_libre {
    border-bottom: 1px solid var(--charte_gris);
    text-align: center;
}

.td_form_titre {
    background: #ffffff;
    padding-top: 10px;
    width: 200px;
    vertical-align: top;
}

.td_form_input {
    background: #ffffff;
}

.td_form_input input,
.textFile input {
    border: 0px;
    border-bottom: 1px solid var(--charte_gris_dark);
    width: 100%;
}

.td_form_input textarea {
    width: 100%;
    height: 200px;
    padding: 3px;
}



.footer {
    height: 40px;
    width: 100%;
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
}

.footer {
    width: 100%;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    z-index: 3;
    background-color: resd;
}


.fonduSave_moove {
    animation: fonduSave 1s;
}

.fonduSave_moove2 {
    animation: fonduSave2 1s;
}

@keyframes fonduSave {
    0% {
        background-color: #fff;
    }

    50% {
        background-color: orange;
    }

    100% {
        background-color: #fff;
    }

}

@keyframes fonduSave2 {
    0% {
        background-color: #fff;
    }

    50% {
        background-color: orange;
    }

    100% {
        background-color: #fff;
    }

}

.engrenage_moove {
    animation: engrenage 1s;
}

.engrenage_moove2 {
    animation: engrenage2 1s;
}

@keyframes engrenage {
    0% {
        transform: rotate(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }

}

@keyframes fermeture {
    0% {
        height: 100%;
    }

    50% {
        height: 250%;
    }

    100% {
        height: 0%;
    }

}

@keyframes engrenage2 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }


}

.save_moove {
    animation: moove 1s;
}

.save_moove2 {
    animation: moove2 1s;
}

@keyframes moove {
    0% {
        transform: rotate(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }

}

@keyframes moove2 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }


}

.botton_options {
    width: 120px;
    height: 40px;
    margin: 5px;
    border: none;
    background-color: var(--charte_violet);
    border-radius: 5px;
    font-weight: bold;
    color: #ffffff;
}

.botton_options:hover {
    background-color: #ffffff;
    color: var(--charte_violet);
    border: 1px solid var(--charte_violet);
}

.del_scren {
    display: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;

    align-items: center;
    /* border: 1px solid black; */
    height: 0px;
    overflow: hidden;
    background: #ffffff;
    /* padding-left:5px; */
    /* padding-right:5px; */
    transition: 0.1s;
}

.del_scren_on {
    display: flex;
    position: absolute;
    /* align-items: center; */
    justify-content: center;
    overflow: auto;
    /* max-height:70vh; */
    transition: 0.5s;
    z-index: 300;
    background-color: rgba(131, 131, 131, .7);
	/* padding-top:0px; */

}

.textFile {
    display: flex;
    width: 100%;

}

.textFile div {
    width: 49%;
}

.textDel {
    text-align: center;
}

.textDel h1 {
    font-size: 1.3em;

}

.textDel button,
.block_100 button {
    border: 1px solid #ffffff;
    padding: 8px;
    /* padding-left:5px; */
    /* padding-right:5px; */
    background-color: var(--charte_violet);
    color: #ffffff;
    border-radius: 5px;
    min-width: 80px;
    font-weight: bold;

}

.textDel button:hover,
.block_100 button:hover {
    color: var(--charte_violet);
    background: #ffffff;
    border: 1px solid var(--charte_violet);
    transition: 0.3s;

}

/* page login */
.containt_login {
    display: flex;
    width: 100vw;
    height: 100vh;

}

.login1 {

    width: 30vw;
    min-width: 500px;
    height: 100vh;
    background-color: #ffffff;
    align-items: center;

}

.login1>div:nth-child(1) {
    width: 100%;
    font-size: 50px;
    margin-top: 100px;
    margin-bottom: 100px;
    text-align: center;
    color: var(--charte_gris_dark);
    text-shadow: 2px 0px 2px rgba(70, 73, 221, 0.5);
}

.log_error {
    display: block;
    width: 100;
    color: red;
    text-align: center;
    font-size: 30px;
}


.login2 {
    display: flex;
    width: 70vw;
    background: rgb(229, 229, 229);
    background: linear-gradient(180deg, rgba(229, 229, 229, 1) 0%, rgba(229, 229, 229, 1) 0%, rgba(229, 229, 229, 1) 51%, rgba(255, 255, 255, 1) 53%, rgba(255, 255, 255, 1) 100%);

    overflow: hidden;
    align-items: center;
    justify-content: center;

}



.login2 img {
    width: 80%;
}

/* page login */

.toggle1 {
    font-size: 1.4em;
    color: var(--charte_violet);
}

.tdOptions1,
.tdOptions2 {
    text-align: center;
    width: 100px;
    background-color: #ffffff;
}

.addContact {
    /* display:none; */
}

.toolbarDevis {
    /* border:1px solid black; */
    width: 100%;
    display: flex;
    padding-left: 30px;
    position: sticky;
    top: 20px;
    /* background:white; */
    z-index: 10;
}

.toolbarDevis>div>i:hover {
    color: white;
}

.toolbarDevis>div>i {
    font-size: 2.2em !important;
}

.toolbarDevis>div:hover {
    color: white !important;
    background-color: var(--charte_violet);
    transition: 1s;
}

.toolbarDevis>div {
    /* background-color:red;	 */
    text-align: center;
    margin-right: 10px;
    padding: 5px;
    border: 2px solid var(--charte_violet);
    border-radius: 5px;
    width: 100px;
    font-size: 0.8em;
    background-color: #ffffff;
    /* font-weight: bold; */
}

#dropfile {
    display: flex;
    position: relative;
    border-radius: 5px;
    align-items: center;
    justify-content: left;
    border: 3px dashed var(--charte_violet);
    padding-left: 3px;
    height: 60px;
    margin-top: 20px;
}

.divAddFichierEmail {
    cursor: pointer;
    width: 320px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 5px;
    margin-bottom: 3px;
    box-sizing: border-box;
    padding-left: 5px;

}

.divAddFichierEmail:hover {
    background-color: var(--charte_violet);
    font-weight: bold;
    color: #ffffff;
    transition: 0.5s;
    padding-left: 15px;
    border-radius: 5px;
}

#PJ {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    height: 50px;
    overflow: auto;
}

.PJDivs {
    position: relative;
    border: 1px solid var(--charte_gris_dark);
    border-radius: 4px;
    padding: 1px;
    margin-right: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 150px;
    padding-right: 20px;
    cursor: pointer;
    height: 24px;
}

.closePJ {
    position: absolute;
    top: 4px;
    right: 2px;
    color: white;
    font-weight: bold;
    background-color: red;
    border-radius: 4px;
    height: 15px;
    width: 15px;
    font-size: 10px;
    text-align: center;
}

.help:hover {
    opacity: 1;
    transition: 1s;
}

.help {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 400;
    width: 40px;
    height: 40px;
    border: 1px solid var(--charte_violet);
    border-radius: 50%;
    background-color: var(--charte_violet);
    opacity: 0.3;
}

.help i {
    position: absolute;
    color: white;
    top: 0px;
    left: 3px;
    font-size: 30px;

}




.bold {
    font-weight: bold;
}

.w20 {
    width: 20px !important;
}

.w30 {
    width: 30px !important;
}

.w40 {
    width: 40px !important;
}

.w50 {
    width: 50px !important;
}

.w100 {
    width: 100px !important;
}

.w150 {
    width: 150px !important;
}

.w200 {
    width: 200px !important;
}

.w250 {
    width: 250px !important;
}

.w300 {
    width: 300px !important;
}

.w350 {
    width: 350px !important;
}

.ww {
    min-width: 50px !important;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}



.recherche_client{
    border: 1px solid var(--charte_gris);
    width: 100%;
    /* height: 30px; */
    position: absolute;
    left: 0px;
    top: 28px;
    background-color: white;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    border-radius: 0px 0px 5px 5px;
    border-top: 0px;

}

.div_contrat > i{
    padding :8px;
    color : white;
    font-size : 30px !important;
    position: absolute;
    top: -7px;
    left: -10px;
}

.div_contrat{
    position: relative;
    border-radius: 7px;
    background-color:  blue;
    font-size : 18px !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width : 50px;
    height: 40px;
    line-height: 40px;
    margin-right: 5px;
    padding-left: 50px;
    transition: 1s;
}

.div_contrat:hover{
    border-radius: 7px;
    background-color: blue;
    color : white;
    padding-right:  10px;
    width: auto;
    transition:  1s;
}

#block_liste_salaries tr:hover{
	font-style : italic;
	
}

.taille_bloc_400>.block_titre,.taille_bloc_ww>.block_titre, .taille_bloc_800>.block_titre, .taille_bloc_1200>.block_titre{
    font-size: 1em;
    
    }
    
    .taille_bloc_400, .taille_bloc_ww, .taille_bloc_800, .taille_bloc_1200{
        /* border:1px solid black; */
        box-shadow:10px 0px 10px 5px rgba(213,213,213,0.53);
        background: #ffffff;
        border-bottom: none;
        min-height: 200px;
        border-radius: 10px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        user-select:none;
    /*	resize: both;*/
      /* overflow: auto; */
        
    }
    
    .taille_bloc_ww{width:100%;}
    .taille_bloc_400{width:450px;}
    .taille_bloc_800{width:800px;}
    .taille_bloc_1200{width:1200px;}
    
    
    .block_titre{
        position: relative;
        display: flex;
        font-size: 1.4em;
        /* border: 1px solid black; */
        height: 50px;
        padding-left: 20px;
        padding-right: 20px;
        align-items: center;
        justify-items: center;
        border-bottom: 1px solid var(--charte_gris);
        color:var(--charte_violet);
        font-weight: bold;
        justify-content: space-between;
        padding-left: 60px;
    }
    
    .block_titre > i{
    }
    
    .block_titre a
    {
            color:var(--charte_violet);
    
    }
    
    .block_titre>i:nth-child(1){
        /* color:red; */
        position:absolute;
        bottom:12px;
        left:0px;
        font-size:2em !important;
    }
	.iAction:hover{
		font-size: 1.3em; 
		cursor: pointer;
	}


.onglePostItContent{
    height:calc(100% - 100px)!important;
}