/* css pour la navbar top */

/* back-up Couleurs 
rgb(65,100,230)  : bleu Proges ou #4164e6 / #0b5ed7 / #0d6efd
rgb(41, 91, 125) : bleu foncé Proges ou rgb(44, 97, 134)
rgb(30,41,78) : bleu très foncé accueil #1e294e
rgb(242,100,48)  : orange ou #F26430
*/

/* Couleurs 
rgb(242,246,255) : gris clair / f2f6ff ou eaeff2 / rgb(224,229,233) / rgb(241,243,251)
rgb(24,143,143)  : bleu vert Texdécor ou #188F8F
rgb(0,0,0) : noir TexDécor ou rgb(0,0,0) #000000
rgb(135,100,184)  : violet TexDécor #8764B8 
rgb(255,255,255) : blanc 
*/


@media (max-width: 800px) {

	/* AFFICHAGE MOBILE */
	
	.path-page{
		color: #8a8a8a;
		font-size: 10px;
		text-align: left;
		margin-bottom: 55px;
	}
}

@media (max-width: 991px) {
	
	#navtop-desktop {
		display:none;
	}
	
	#navbar-bottom-mobile {
		background-color: rgb(65,100,230);
		padding:0px;
		height: 50px;
	}
	
	#grid-navbar-bottom {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: 1fr;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		width: 100%;
		text-align: center;
		align-items: center;
	}

	#button-nav-phone {
		margin-right: 10px;
	}
	
	#sidebarMenu {
		display:none;
	}
	
	.sidebar {
	position: fixed;
	top: 50px;
	bottom: 0;
	left: 0;
	box-shadow: 0px 0px 2px 0px rgb(65,100,230), 1px 0px 7px 2px rgb(65,100,230);
	width: 100%;
	z-index: 600;
	}

	#navbar-left {
		height: 100%; 
		overflow: auto; 
		scrollbar-width: none;
		padding-bottom: 130px;
	}
		
	#l-deco {
		position: absolute;
		bottom: 50px; 
		left: 0px; 
		right: 0px; 
		cursor:pointer;
	}
}

@media (min-width: 992px) {
	
	#navbar-bottom-mobile {
		display:none;
	}
	
	#button-nav-phone {
		display:none;
	}
	
	.sidebar {
		position: fixed;
		top: 50px;
		bottom: 0;
		left: 0;
		box-shadow: 0px 0px 2px 0px rgb(65,100,230), 1px 0px 7px 2px rgb(65,100,230);
		width: 291px;
		z-index: 600;
	}

	#navbar-left {
		height: 100%; 
		overflow: auto; 
		scrollbar-width: none;
		padding-bottom: 80px;
	}
	
	#l-deco {
		position: absolute;
		bottom: 0px; 
		left: 0px; 
		right: 0px; 
		cursor:pointer;
	}
}

.img-profil-index {
	cursor: pointer;
	border: 2px solid white;
	width: 35px;
	height: 35px;
	position: relative;
	top: -2px;
}

#navbar-index {
	padding:0px;
	background-color: rgb(65,100,230);
	height: 50px;
}

#nav-desk {
	margin: auto;
	transform: translateX(15px);
	position: relative;
	top: 1px;
}

.rech-nav-desk {
	width:50vw;
	border-radius: 30px; 
	height: 31px;
	position: relative;
	top: -4px;
	margin-top: 6px;
	font-size: 16px
}

#notif-index, #notif-index:hover, #notif-index:focus, #param-index, #param-index:hover, #param-index:focus {
	box-shadow:none;
	border-color:transparent;
	background-color: transparent;
	text-decoration: none;
	padding: 0px;
}

.icon-nav-desk {
	font-size:10px;
}

#bienvenue-navbar {
	font-size:16px;
	font-weight:600;
	padding-left:5px;
	padding-right:5px;
	color:white;
	text-decoration:none;
	position: relative;
	top: 13px;
}

.champ-navbar {
	border-right: solid 1px white; 
	height: 50px;
}

#res-top {
	display : none;
	position:fixed;
	background-color:white;
	border: 3px solid rgb(44, 97, 134);
	box-shadow:0 0 0 .25rem rgb(44, 97, 134);
	border-radius: 15px;
	padding: 15px;
	margin-top: 10px;
	width:90%;
}

#res-menu, #res-collab{
	border: 3px solid rgb(224,229,233);
	border-radius: 15px;
	padding: 15px;
	margin-top: 15px;
	margin-bottom: 15px;
	max-height: 200px;
	overflow-y: scroll;
	scrollbar-color: rgb(65,100,230) transparent;
	scrollbar-width: thin;
}

#res-menu::-webkit-scrollbar, #res-collab::-webkit-scrollbar {
    width: 8px;
}

#res-menu::-webkit-scrollbar-thumb, #res-collab::-webkit-scrollbar-thumb {
    background: rgb(65,100,230);
}

.un-lien-menu, .un-lien-menu:hover, .un-lien-menu:visited, .un-lien-menu:link, .un-lien-menu:active
{
	color: black;
    text-decoration: none;
}

#rech-index {
	border-color:rgb(65,100,230);
	box-shadow:0 0 0 .25rem rgb(65,100,230);
	padding-right: 50px;
}

#rech-index:focus{
	border-color:rgb(65,100,230);
	box-shadow:0 0 0 .25rem rgb(44, 97, 134);
}

.img-loupe-index {
	position: relative;
	left: -50px;
	top: 4px;
}

#aff-notif-index, #aff-param-index{
	background-color: rgb(241,243,251);
	border-radius: 15px;
	width: 300px;
	top: 42px;
}

.titre-menu {
	color:rgb(65,100,230);
	font-size: 23px;
	font-weight:700;
	margin-left:25px;
	margin-top:5px;
}

.bloc-notif {
	margin-left: 15px;
	margin-top: 15px;
}

.date-notif {
	font-weight: 300;
	position: relative;
	top: -10px;
}

/* css pour la navbar left */

.accordion-body {
	background-color: rgb(65,100,230);
}

.accordion-body {
  padding: 0rem;
}

.link-nav-left:hover, .link-nav-left:focus, .link-nav-left:active {
	cursor:pointer;
	background-color: transparent;
	color: #fff;
}

.link-nav-right {
	cursor:pointer;
	background-color: transparent;
	color:rgb(65,100,230);
}

.link-nav-right:hover, .link-nav-right:focus, .link-nav-right:active {
	cursor:pointer;
	background-color: rgb(65,100,230);
	color: white;
}

.link-nav-left:hover > span {
	font-weight: bold;
	text-decoration:underline;
}

.icon-nav-left {
	font-size:23px;
}

.link-nav-left {
	font-size: 14px;
	color: rgb(255, 255, 255);
	background-color: #4164e6;
	border: none;
}

.link {
	color: rgb(65,100,230) ;
}

.link:hover {
	color: rgb(242,100,48) ;
}


#navbar-left::-webkit-scrollbar {
	width: 0px;
}

.btn-deco {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid rgb(65,100,230);
	border-radius: 0px ! important;
}

#icon-deco {
}

#text-deco {
	margin-left: 42px;
	font-size:16px;
	color: rgb(65,100,230);
	vertical-align: middle;
}

#cont-dropdown-paramcong .link-nav-left {
	font-size:12px;
}



.accordion-button:focus {
	box-shadow:none;
}

.accordion-item:first-of-type, .accordion-item:last-of-type {
	border-radius:0px;
}

.accordion-item:first-of-type .accordion-button, .accordion-item:last-of-type .accordion-button {
	border-radius:0px;
}

.accordion-item {
	background-color: #fff;
	border:none;
}

.accordion-button::after {
	background-image: url("../images/CloseWhiteArrowIndex.svg");
	height: 12px;
}

.accordion-button:not(.collapsed)::after {
	background-image: url("../images/OpenWhiteArrowIndex.svg") ! important;
	transform: none;
	height: 12px;
	background-color: rgb(65,100,230);
	color: rgb(255, 255, 255);
}

.accordion-button.collapsed {
	border-bottom: 1px solid rgb(65,100,230);
}

.accordion-button:not(.collapsed) {
	background-color: rgb(65,100,230);
	color: rgb(255, 255, 255);
	border-bottom: 1px solid #fff;
}

.accordion-button {
	background-color: #fff;
	font-size: 21px;
	color: rgb(65,100,230);
}

.accordion-button:hover {
	background-color: rgb(65,100,230);
	color: rgb(255, 255, 255);
}

.accordion-button:hover:after {
	background-image: url("../images/CloseWhiteArrowIndex.svg");
	height: 12px;
}

#grid-raccourcis {
	display: grid;
	grid-template-columns:100%;
	grid-template-rows: auto;
	padding: 0px;
	 grid-template-areas:
	"head"
    "main"
    "ft";
}

#grid-raccourcis-head {
	grid-area: head;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	border-bottom: 1px solid rgb(65,100,230);
	width: 100%;
	padding: 6px 0px;
}

#titre-raccourcis {
	color: rgb(65,100,230);
	font-size: 22px;
	font-weight: 900;
}

#grid-raccourcis-main {
	grid-area: main;
	grid-template-columns:50% 50%;
	display: grid;
}

#grid-raccourcis-ft {
	grid-area: ft;
	padding: 6px 0px;
}

#config-racc {
	color:rgb(65,100,230);
	font-size: 15px;
}

.on-link-page {
	font-weight: bold;
	text-decoration: underline;
}

#cont-dropdown-paramcong {
	display:none;
	margin-top:15px
}

#icon-dropdown-paramcong {
	font-size:17px;
	margin-left:-1px;
}

#raccourcis {
	width:230px;
	max-width:230px;
	border: 1px solid rgb(65,100,230);
	margin-top: 60px;
	border-radius: 15px;
	margin-left: auto;
	margin-right: auto;
}

.t-rac-icon {
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	left: 50%;
}

.rac {
	background-color: white;
	color: rgb(242,100,48); 
	margin: auto;
	border-radius: 9px;
	font-weight: 600;
	width: 90px;
	height: 90px;
	position: relative;
	font-size:37px;
}

.rac:hover {
	background-color: rgb(242,100,48);
    text-decoration: none;	
	color:white;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}