@font-face {
	font-family: 'Montserrat-regular';
	src: url(../../fonts/Montserrat/Montserrat-Regular.ttf) format("truetype");
	src: url(../../fonts/Montserrat/Montserrat-Regular.woff) format("woff");
	src: url(../../fonts/Montserrat/Montserrat-Regular.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat-medium';
	src: url(../../fonts/Montserrat/Montserrat-Medium.ttf);
	src: url(../../fonts/Montserrat/Montserrat-Medium.woff);
	src: url(../../fonts/Montserrat/Montserrat-Medium.woff2);
	font-weight: 500;
	font-style: normal sans-serif;
}

@font-face {
	font-family: 'Montserrat-semibold';
	src: url(../../fonts/Montserrat/Montserrat-SemiBold.ttf);
	src: url(../../fonts/Montserrat/Montserrat-SemiBold.woff);
	src: url(../../fonts/Montserrat/Montserrat-SemiBold.woff2);
	font-weight: 600;
	font-style: normal sans-serif;
}

@font-face {
	font-family: 'Montserrat-bold';
	src: url(../../fonts/Montserrat/Montserrat-Bold.ttf);
	src: url(../../fonts/Montserrat/Montserrat-Bold.woff);
	src: url(../../fonts/Montserrat/Montserrat-Bold.woff2);
	font-weight: 700;
	font-style: normal sans-serif;
}



:root {
	--logo-height: 35px;
	--space: 1.25rem;
	--icon-size: 1.5rem;
	--nav-width: calc(var(--space) + var(--icon-size) + var(--space));
	--nav-add-width-deployed-xxl: 8rem;
	--nav-add-width-deployed: 6rem;
	--header-bg-color: #F7F6FB;
	--header-text-color: #27262B;
	--nav-text-color-light: #97969B;
	--nav-text-color: #27262B;
	--bg-color: #D5CFE559;
	--body-font: Montserrat-Regular;
	--normal-font-size: 1rem;
	--z-fixed: 100;
}

*,
::before,
::after {
	box-sizing: border-box
}

a {
	text-decoration: none
}

body {
	font-family: var(--body-font);
	font-size: var(--normal-font-size);
	transition: .5s;
	background-color: var(--bg-color);
}

.header_toggle {
	color: #97969B;
	font-size: var(--icon-size);
	cursor: pointer;
	align-items: center;
	padding: 0 0 0.5rem var(--space);
}

.navbar-logo {
	display: block;
	height: var(--logo-height);
	margin-left: var(--space);
	margin-top: 1em;
}
.navbar-logo .mini{
	width: var(--icon-size);
}
.navbar-logo .gros{
	width: calc(100% - var(--space));
}

.navbar-backoffice {
	height: calc(100% - var(--logo-height) - 1.5rem);
	display: block;
	overflow: auto;
	-ms-overflow-style: none;  /* masquer la scrollbar : Internet Explorer 10+ */
	scrollbar-width: none;  /* masquer la scrollbar : Firefox */
}
.navbar-backoffice::-webkit-scrollbar { 
	display: none;  /* masquer la scrollbar : Safari and Chrome */
}

.l-navbar {
	position: fixed;
	left: 0;
	top: 0;
	transition: .5s;
	z-index: var(--z-fixed);
	background-color: #FFFFFF;
}

.nav_logo,
.nav_link {
	display: grid;
	grid-template-columns: max-content max-content;
	align-items: center;
}

.nav_logo {
	padding: 0 0 0 1.5rem;
}

.nav_link {
	font-size: var(--normal-font-size);
	position: relative;
	color: var(--nav-text-color-light);
	margin-bottom: 0.6rem;
	transition: .3s;
	padding: 0 0 .5rem var(--space);
	text-overflow: ellipsis;
}

.nav_link:hover {
	color: var(--nav-text-color);
}

.nav_link.active {
	font-size: calc(var(--normal-font-size) + 0.1rem);
	font-family: Montserrat-bold !important;
	color: #000000 !important;
}

.nav_icon {
	font-size: var(--icon-size);
	width: var(--icon-size);
	margin-right: var(--space);
}
.nav_icon.active {
	font-size: calc(var(--icon-size) + 0.1rem);
}

.username {
	position: relative;
	margin-bottom: 0;
	transition: .3s;
}

.navbar-backoffice .active {
	color: var(--nav-text-color);
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}

.h-divider{
	margin-top:1rem;
	margin-bottom:1rem;
	height:1px;
	width:100%;
	border-top:1px solid #F3492F; 
}

/* responsive stuff */

body {
	padding-left: var(--nav-width);
}

.body-pd {
	padding-left: calc(var(--nav-width) + var(--nav-add-width-deployed-xxl));
}

.l-navbar {
	left: 0;
	width: var(--nav-width);
	height: 100%;
}

.nav-show {
	width: calc(var(--nav-width) + var(--nav-add-width-deployed-xxl));
}

.visible {
	display: block;
}
.hidden{
	display: none;
}


.rainbow-bg{
	animation: rainbow-bg 15s linear;
	animation-iteration-count: infinite;
}
.rainbow-color a{
	animation: rainbow-color 15s linear;
	animation-iteration-count: infinite;
}

@keyframes rainbow-bg{
	100%,0%	{ background-color: #4158D050; }
	33%		{ background-color: #C850C050; }
	66%		{ background-color: #FFCC7050; }
}
@keyframes rainbow-color{
	100%,0%	{ color: #171f4799; }
	33%		{ color: #4e204b99; }
	66%		{ color: #4b3c2199; }
}

#debugMenu {
	padding-left: var(--space);
	width: 100%;
}
.debugMenuItem{
	margin-right: 0.5rem;
	font-size: 0.6rem;
	float: left;
}
.debugMenuItem label{
	display:block;
	/*padding-left: 0.3rem;*/
}
.debugMenuItem input{
	width:15px;
	margin-left: 0.2rem;
}
#debugMenu:after{
	content:"";
	display:block;
	clear: both;
}

@media screen and (max-height: 700px) {
	.nav_link{
		margin-bottom: 0;
	}
}

@media screen and (max-width: 1399px) {
	body {
		/*padding-left: 0.2rem*/
	}
	.body-pd {
		padding-left: calc(var(--nav-width) + var(--nav-add-width-deployed));
	}

	.l-navbar {
		width: var(--nav-width);
		height: 100%;
	}
	.nav-show {
		width: calc(var(--nav-width) + var(--nav-add-width-deployed));
	}

	.header {
		height: calc(var(--header-height) - 1rem);
		padding-right: 1rem;
	}
	.header-hide {
		display: none;
	}

	.nav_link {
		font-size: calc(var(--normal-font-size) - 0.2rem);
		padding-left: 0.6rem;
	}
	.link_reduit {
		padding-left: var(--space);
	}

	.nav_link.active {
		font-size: calc(var(--normal-font-size) - 0.1rem);
	}

	.nav_icon {
		margin-right: 0.5rem;
	}

}