@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: local('Material Icons'),
		 local('MaterialIcons-Regular'),
		 url(../font/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';
}

body {
	font-family: verdana;
	font-size: 12px;
	background-color: #2986DB;
}

body, div, p, a, span {
	padding: 0;
	margin: 0;
}

/* progress bar */
progress {
	background-color: #f3f3f3;
	height: 10px;
	width: 90px;
	border-radius: 9px;
	border: 1px solid rgb(211, 211, 211);
}
progress::-webkit-progress-bar {
	background-color: #f3f3f3;
	border-radius: 9px;
}
progress::-webkit-progress-value {
	background: #cdeb8e;
	background: -moz-linear-gradient(top,  #cdeb8e 0%, #a5c956 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
	background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
	background: -o-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
	background: -ms-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
	background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 );
	border-radius: 9px;
}
progress::-moz-progress-bar {
	background: #cdeb8e;
	background: -moz-linear-gradient(top,  #cdeb8e 0%, #a5c956 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
	background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
	background: -o-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
	background: -ms-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
	background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 );
	border-radius: 9px;
}


.flexcolumn {
	display: flex;
	flex-direction: column;
}
.flexrow {
	display: flex;
	flex-direction: row;
}
.flexcolumn {
	display: flex;
	flex-direction: column;
}
.leftmargin { margin-left: 8px; }
.halfleftmargin { margin-left: 4px; }
.topmargin { margin-top: 10px; }
.tinywidth { width:40px; }
.smallwidth { width:90px; }
.smallmediumwidth { width:140px; }
.mediumwidth { width:190px; }
.mediumlargewidth { width:290px; }
.largewidth { width:390px; }
.verylargewidth { width:790px; }
.fullwidth { width:100%; }
.centertext { text-align: center; }
.lefttext { text-align: left; }
.flexend { align-self: flex-end; }
.fleche{ font-size: 14px; }
.centerFlex{ align-items: stretch; }
.pointer{ cursor: pointer; }
.p5{ padding: 5px; }
.p10{ padding: 10px; }
.w25{ width: 25px; }
.ta-l { text-align: left; }
.ta-c { text-align: center; }
table { border-collapse: collapse; }
a{ text-decoration: none; }

.voyant {
	height: 10px;
	width: 60px;
	border-radius: 9px;
	border: 1px solid rgb(211, 211, 211);
	margin: auto;
}

.orange{
	background: rgb(255,119,0);
	background: -moz-linear-gradient(0deg, rgba(255,119,0,1) 40%, rgba(255,194,163,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(255,119,0,1) 40%, rgba(255,194,163,1) 100%);
	background: linear-gradient(0deg, rgba(255,119,0,1) 40%, rgba(255,194,163,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7700",endColorstr="#ffc2a3",GradientType=1);
}

.red{
	background: rgb(203,0,0);
	background: -moz-linear-gradient(0deg, rgba(203,0,0,1) 40%, rgba(255,163,163,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(203,0,0,1) 40%, rgba(255,163,163,1) 100%);
	background: linear-gradient(0deg, rgba(203,0,0,1) 40%, rgba(255,163,163,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cb0000",endColorstr="#ffa3a3",GradientType=1);	
}

.green{
	background: rgb(122,190,0);
	background: -moz-linear-gradient(0deg, rgba(122,190,0,1) 40%, rgba(234,255,163,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(122,190,0,1) 40%, rgba(234,255,163,1) 100%);
	background: linear-gradient(0deg, rgba(122,190,0,1) 40%, rgba(234,255,163,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7abe00",endColorstr="#eaffa3",GradientType=1);
}

.grey{
	background: rgb(208,208,208);
	background: -moz-linear-gradient(0deg, rgba(208,208,208,1) 40%, rgba(252,252,252,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(208,208,208,1) 40%, rgba(252,252,252,1) 100%);
	background: linear-gradient(0deg, rgba(208,208,208,1) 40%, rgba(252,252,252,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d0d0d0",endColorstr="#fcfcfc",GradientType=1);
}

/* boite de chargement */
.wait{
	display: none;
	width:50%;
	left: 20%;
	top: 33%;
	text-align: center;
	position: absolute;
	color:#beb;
	animation: glowtext .8s linear infinite alternate;
	padding: 60px;
	z-index: 1000;
	background: #2b2b2b;
	border-radius: 6px;
}
  
@keyframes glowtext {
	0% {
		color:#393;
	}	
	50% {
		color:#6f6;
	}	
	100% {
		color:#393;
	}
}
  
.wait:before{  
	content:"";
	display: block;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:2px;
	
	background-color: #0B0B0B;
	animation: glow .4s linear infinite alternate;
}
  
@keyframes glow {
	0% {
	border-color: #393;
	box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;}	
	100% {
	border-color: #6f6;
	box-shadow: 0 0 15px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;}
}

.wait:after{  
	content:"";
	display: block;
	position:absolute;
	bottom:0;
	left:0;
	width:10%;
	height:3px;
	background-color:#6f6;

	animation:progress linear .8s infinite /* alternate */ ;
}

@keyframes progress {
	0%  {left:0   ;width:0   ;right:100%}
	50% {left:0   ;width:100%;right:0   }
	100%{left:100%;width:0   ;right:0   }
}
/* Fin boite de chargement */


/***********************************************************/
/*                     MENU ONGLETS                        */
/***********************************************************/
.menu_onglets_menu{
	display: flex;
}

.menu_onglets_menu div{
	flex-grow: 1;
}

.sep{
	max-width: 10px;
	border-bottom: 1px solid #CCD0D3;
}

.onglets{
	background: #CCD0D3;
	padding: 10px;
	color: #332F2C;
	font-weight: bold;
	border-radius: 3px 3px 0px 0px;
	max-width: 120px;
	text-align: center;
}


/***********************************************************/
/*                      SCROLLBAR                          */
/***********************************************************/
::-webkit-scrollbar {
    width: 20px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #8fadc9;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
}


/***********************************************************/
/*                 BOITES PRINCIPALES                      */
/***********************************************************/
/* Menu de gauche */
#menu{
	height: calc(100vh - 30px);
	width: 15%;
	min-width: 250px;
}

.barre_verticale{
	height: calc(100vh - 30px);
    clip-path: inset(0px -15px 0px 0px);
	width: 1px;
	margin-left: 5px;
	box-shadow: 1px 2px 2px rgba(0,0,0,0.5);
}

/* contenu principal */
#app{
	display: flex;
	height: calc(100vh - 30px);
	min-width: 1000px;
}

#contenu{
	width: 85%;
}

/* Menu Top */
#menu-top{
	height: 30px;
	background: #2986DB;
	font-size: 14pt;
	color: #E5F1FB;
	-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.59);
    -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.59);
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.59) 5px;
	display: flex;
	justify-content: space-between;
	position: sticky;
	top: 0px;
	z-index: 50000;
}

#menu-top a{
	color: #E5F1FB;
}

#menu-top .nom_utilisateur{
	line-height: 30px;
}

#menu-top ul{
	padding: 10px;
	margin: 0;
	background: #CCD0D3;
	position: absolute;
	top: 32px;
	left: 5px;
	border-radius: 3px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.ul-fade-in{
	animation: fadein 0.5s;
    -moz-animation: fadein 0.5s; /* Firefox */
    -webkit-animation: fadein 0.5s; /* Safari et Chrome */
    -o-animation: fadein 0.5s; /* Opera */
}

.ul-fade-out {
	animation: fadeOut ease 0.5s;
	-webkit-animation: fadeOut ease 0.5s;
	-moz-animation: fadeOut ease 0.5s;
	-o-animation: fadeOut ease 0.5s;
}

#menu-top ul li{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#menu-top ul li a{
	font-size: 11pt;
	color: #332F2C;
}

#menu-top ul li a:hover{
	color: #2986DB;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* sur Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* sur Safari et Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* sur Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
	opacity:0;
	}
}

@-moz-keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

@-webkit-keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

@-o-keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

@-ms-keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}


/***********************************************************/
/*                        LOGIN                            */
/***********************************************************/
.container-login{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 75vh;
}

.box-header{
	background: #38393E;
	margin: 0;
	padding: 0;
	height: 34px;
	display: flex;
}

.box-header img{
	margin-top: -15px;
	margin-left: -15px;
	width: 73px;
	position: absolute;
}

.box-header div{
	width: 100%;
	color: white;
	margin-top: 7px;
	font-weight: bold;
	text-align: center;
}

.box-form{
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	background: #F6F6F6;
}

.box-login{
	border: 3px solid #38393E;
	width: 400px;
	background: #FFFFFF;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 30px 5px;
}

.container-login input[type=password], .container-login input[type=text], .container-login select, .container-login textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: vertical;
	margin-bottom: 10px;
}

.container-login input[type=submit], .container-login input[type=reset] {
	background-color: #3C3C3B;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.container-login input[type=button] {
	background-color: #3C3C3B;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

#error-login{
	padding: 15px;
	background: #38393E;
	color: white;
	text-align: center;
	width: 380px;
	position: absolute;
	top: 150px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	border-radius: 5px;
	font-size: 12pt;
}

.quitter-erreur-login{
	cursor: pointer;
	position: absolute;
	top: 6px;
	right: 6px;
}


/***********************************************************/
/*                    ADMINISTRATION                       */
/***********************************************************/
#administration{
	padding: 0px 15px 0px 15px;
}

#administration form{
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

#client_ajout_div, #categories_ajout_div, #utilisateur_ajout_div, #projets_ajout_div{
	border-radius: 3px;
	border: 1px solid #332F2C;
	padding: 10px;
}

#clients, #categories, #projets{
	display: none;
}

.fenetre{
	min-height: 86vh;
	border: 1px solid #CCD0D3;
	border-top: 0px;
	width: 100%;
	border-radius: 0px 3px 3px 3px;
	background: #EFEFEF;
}

#onglet_utilisateurs{
	border-top: 2px solid #332F2C;
}



.tr_liste_utilisateurs{
	border: 1px solid #38393E;
	border-left: 0px;
}

.td_liste_utilisateurs{
	border-left: 1px solid #38393E;
}

#utilisateur_div, #client_div, #categorie_div, #projet_div{
	border-radius: 3px;
	border: 1px solid #332F2C;
	padding: 10px;
	margin-top: 20px;
	height: 60vh;
	overflow: auto;
}


/***********************************************************/
/*                    MENU PRICIPAL                        */
/***********************************************************/
#menu_principal input[type=text], #menu_principal input[type=number]{
	width: 90%;
	padding: 3px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

#menu_principal select{
	width: 94%;
	padding: 3px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

#menu_principal button{
	width: 100%;
}

#onglet_taches{
	border-top: 2px solid #332F2C;
}

#taches{
	padding-top: 20px;
}

#menu_principal button, #bt_action button{
	box-shadow: 0px 7px 6px -7px #2985db;
	background: linear-gradient(to bottom, #2f8ee0 5%, #085496 100%);
	background-color: #2f8ee0;
	border-radius: 4px;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-family: Arial;
	padding: 12px 20px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #3d768a;
	border: 0px;
	font-size: 12pt;
}
#menu_principal button:hover, #bt_action button:hover {
	background:linear-gradient(to bottom, #085496 5%, #2f8ee0 100%);
	background-color:#085496;
}
#menu_principal button:active, #bt_action button:active {
	position:relative;
	top:1px;
}


/***********************************************************/
/*                     TACHES / AFD                        */
/***********************************************************/
#liste_taches{
	border-radius: 4px;
	border: 1px solid #332F2C;
	margin-top: 30px;
	height: 90vh;
	width: 98%;
	overflow: auto;
	margin-left: auto;
	margin-right: auto;
	background: #f7f7f7;
}

#liste_taches a{
	color: white;
}

#liste_taches th {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 2;
}

#liste_taches th[scope=row] {
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	z-index: 1;
}

#liste_taches th:not([scope=row]) {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 2;
}




.table tr:nth-child(odd){
	background-color: white;
}

.table tr:hover {
	background-color: #dfdfdf;
}

.table tr{
	padding: 20px;
	font-size: 10pt;
	background: #F2F2F2;
	cursor: pointer;
}

.table th{
	font-size: 10pt;
	font-weight: normal;
	background: #666666;
	padding: 7px 15px;
	color: white;
}

.table td{
	padding: 6px 4px;
	color: #333333;
}