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


:root {
    --c1: #027dfb;
    --c1Dark: #001ea1;
    --c1Light: #8bdeff;

    --c2: #00ff28;
    --c2Dark: #00790e;
    --c2Light: #b4ffbb;

    --c3: #ff0202;
    --c3Dark: #750000;
    --c3Light: #ffa1a1;

    --c4: #f75609;
    --c4Dark: #943200;
    --c4Light: #f8c73b;

    --cGris: #c9cacb;
    --cGrisDark: #656565;
    --cGrisLight: #f8f9fa;

    --cRedAlert: #ff0000;
    --cOrangeAlert: #ff8200;
    --cGreenAlert: #00ff00;


}

*{
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    /* font-weight:bold; */
    margin: 0;
    padding: 0;
}
body{
    background : var(--cGrisLight);
}

[data-title] {
    position: relative;
}

.tooltip{
	position:absolute;
	background-color: var(--kdBlueL)!important;
	border:1px solid var(--kdBlueD)!important;
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
    color: var(--kdBlueD) !important;
    padding: 5px;
    font-size: 14px;
    border-radius: 5px 5px 5px 5px !important;
    white-space: nowrap;
    z-index: 10;
	transition:0.3s;
}

.tooltip i:nth-child(1){
	color:var(--kdBlueD)!important ;
	position:absolute;
	top:-8px;
	left:-8px;
	background-color:white;
	border-radius:50%;
	font-size:16px! important;
}
.tooltip i:nth-child(2){
	color:var(--kdBlueD);
	font-size:12px! important;
	transform:rotate(180deg);
	position:absolute;
	left:calc(50% - 6px);
	bottom:-11px;
}
/*
[data-title]:hover::before {
    content: attr(data-title);
    position: absolute;

    background-color: var(--kdBlue);
    color: #fff;
    padding: 5px;
    font-size: 14px;
    border-radius: 5px 5px 5px 5px;
    white-space: nowrap;
    z-index: 10;
    top: -35px;
    left: -10px;
	
	transition:0.3s;
	
	/* flex:1; 
}
*/


table
{
    border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
    background : white;
}

a {
    text-decoration:none;
    color:black;
}

/* ----------------------------Main ------------------------ */
.main{
    display:flex;
    width:100svw;
    height:100svh;
    FLEX-WRAP:wrap;
    ALIGN-ITEMS:flex-start;
    ALIGN-CONTENT:flex-start;
}

.mainMenu{
    width:200px;
    height:100%;
    FLEX-WRAP:wrap;
    ALIGN-ITEMS:flex-start;
    ALIGN-CONTENT:flex-start;
    transition:0.3s;
}

.mainMenu .menuSeparateur{
	color: black; 
	/* height:30px; */
	transition:0.3s;
}

.mainContenu{
    /* width:calc(100% - 200px); */
    display: flex;
    height:100%;
    FLEX-WRAP:wrap;
    ALIGN-ITEMS:flex-start;
    ALIGN-CONTENT:flex-start;
    flex: 1;
    
    overflow:auto;
}
/* ----------------------------Header ------------------------ */
.header{
    display:flex;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:center;
	justify-content :right;
    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;
    padding-top:5px;
	/* border:1px solid red !important; */
}

.titreHeader{
    flex:1; 
    padding-left:20px; 
    font-size:20px;
    /* border: 1px solid red; */
    height:40px;
}
.headerUser{
    position:relative;
    display:flex;
    ALIGN-ITEMS:center;
    font-size:14px;
    height:50px;
    margin-top:-5px;
    width:auto;
    cursor:pointer;
	/* border:1px solid red; */
}

.headerUser>div>i{
    font-size:30px;
}
.headerUser>div:nth-child(2){white-space: nowrap; text-align:left;}
.headerUser>div{
    margin-right:5px;
}

.headerUserList{
    position:absolute;
    top:50px;
    left:-7px;
    width:100%;
    height:0px;
    overflow:hidden;

    display:flex;
    FLEX-WRAP:wrap;
    ALIGN-ITEMS:flex-start;
    ALIGN-CONTENT:flex-start;
    justify-content :left;

    
    border-radius:0px 0px 5px 5px;
    background-color:white;
    transition:0.3s;
	border:0px solid var(--kdGrey);
    opacity:0;
}

.headerUserListOpen{
    /* display:flex; */
    height:auto;
	border:1px solid var(--kdGrey);
    transition:0.5s;
    z-index:4;
    opacity:1;
}

.headerUserList>div{
    /* border:1px solid red; */

    display:flex;
    ALIGN-ITEMS:center;
    ALIGN-CONTENT:center;
    justify-content :left;
    width:100%;
    height:40px;
    /* background-color:white; */
    padding-left:3px;
    cursor:pointer;
}

.headerUserList>div:hover{
    background-color:var(--cGrisLight);
    /* font-weight:bold; */
}
/* ----------------------------Fin Header------------------------ */

/* ----------------------------Menu------------------------ */
.menu{
	border:1px solid white;
    /* border-right:1px solid silver; */
    height:100%;
    width:100%;
    background : white;
	box-shadow: 10px 0px 10px 5px rgb(213 213 213 / 53%);
	
}

.menuSeparateur{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
    margin:5px;
	border-bottom:2px solid var(--kdBlueD);
	color: black;
	width:calc(100% - 10px);
	color: transparent;
	/* height:0px; */
}



.mainMenuClose:hover .menuSeparateur{
	color: black; 
	/* height:30px; */
	transition:0.3s;
	}


.menuButton{
    display:flex;
    width:calc(100% - margin);
    border:1px solid var(--kdBlue);
    border-radius:5px;
    padding:5px;
    ALIGN-ITEMS:center;
    margin:5px;
    margin-top:5px;
    cursor:pointer;
    transition:0.8s;
}

.menuButton:hover{
    border:1px solid var(--kdBlue);
    background-color:var(--c1Light);
    transition:0.3s;
}
.menuButton>nav{
    padding-left:10px;
    display:block;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    width:150px;
}
.menuButton>i{
    color: var(--kdBlue);
    font-size:25px;
    padding-right:5px;
    width:25px;
}

.titreMenu{
    padding-left: 75px;
    position:relative;
    display:flex;
    width:200px;
    padding-bottom:10px;
    padding-top:10px;
    ALIGN-ITEMS:center;
    ALIGN-CONTENT:center;
    JUSTIFY-CONTENT:center;

}

.titreMenu>i{
    /* border:1px solid red; */
    position:absolute;
    left:20px;
    top:10px;
    margin-right:10px;
    font-size:25px;
    cursor:pointer;
}
#menuAction{
    color:var(--kdBlue);
    position:absolute;
    left:15px;
    bottom:10px;
    z-index:3;
    font-size:25px;
    cursor:pointer;
    transform:rotate(45deg);

}

.menu:hover #menuAction {
    animation: punaise 2s linear infinite;
}

.mainMenuClose{
    width:50px;
    height:100%;
    FLEX-WRAP:wrap;
    ALIGN-ITEMS:flex-start;
    ALIGN-CONTENT:flex-start;
    transition:0.3s;
}

.mainMenuClose:hover{width:200px;}



@keyframes punaise {
    0% {
        /* transform:rotate(45deg); */
        bottom:10px;
    }
    50% {
        transform:rotate(360deg);
        bottom:10px;

    }

    60% {
        bottom:0px;
    }

    70% {
        /* transform:rotate(360deg); */
        bottom:14px;
    }

    80% {
        /* transform:rotate(360deg); */
        bottom:10px;
        transform:rotate(360deg);
    }
    100% {
        transform:rotate(405deg);
    }
}

/* ----------------------------Fin Menu------------------------ */

/* ----------------------------Contenu------------------------ */
.contenu{
    display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :center;
    flex:1;
    height:calc(100svh - 102px);
    /* min-width:800px; */
    overflow:auto;
	padding:5px;
    /* border: 1px solid red; */
}
/* ----------------------------Fin Contenu------------------------ */

/* ----------------------------Footer------------------------ */
.footer{
    display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :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);
}
/* ----------------------------Fin Footer------------------------ */

/* ----------------------------PopUP------------------------ */
.popup
{
    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;
}

.popup_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);

}
/* ----------------------------Fin PopUp------------------------ */
/* .w20,.w20>a{width:20px !important;}
.w30,.w30>a{width:30px !important;}
.w40,.w40>a{width:40px !important;}
.w50,.w50>a{width:50px !important;}
.w100,.w100>a{width:100px !important;}
.w150,.w150>a{width:150px !important;}
.w200,.w200>a{width:200px !important;}
.w250,.w250>a{width:250px !important;}
.w300,.w300>a{width:300px !important;}
.w350,.w350>a{width:350px !important;} */
/* .ww{min-width:50px !important;} */

/* .w20>div{width:20px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w30>div{width:30px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w40>div{width:40px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w50>div{width:50px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w100>div{width:100px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w150>div{width:150px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w200>div{width:200px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w250>div{width:250px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w300>div{width:300px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.w350>div{width:350px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.ww{min-width:50px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; } */

.flex{display:flex;}
.none{display:none;}
.center{text-align:center;}
.center>a{justify-content:center;}
.left{text-align:left;}
.left>a{justify-content:left;}
.right{text-align:right;}
.right>a{display:block; justify-content:right;}