@font-face {
	font-family: 'Inter';
	font-style:  normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/inter@3.12/Inter-Regular.woff2") format("woff2"),
	url("/fonts/inter@3.12/Inter-Regular.woff") format("woff");
}
@font-face {
	font-family: 'Inter';
	font-style:  normal;
	font-weight: 600;
	font-display: swap;
	src: url("/fonts/inter@3.12/Inter-SemiBold.woff2") format("woff2"),
	url("/fonts/inter@3.12/Inter-SemiBold.woff") format("woff");
}
@font-face {
	font-family: 'Inter';
	font-style:  normal;
	font-weight: 700;
	font-display: swap;
	src: url("/fonts/inter@3.12/Inter-Bold.woff2") format("woff2"),
	url("/fonts/inter@3.12/Inter-Bold.woff") format("woff");
}


/*html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
	html { font-family: 'Inter var', sans-serif;
		font-feature-settings: 'liga', 'ss01', 'tnum', 'case' 1;
	}
}*/

:root {
	--primary-color: #e91e63;
	--light-pink: hsl(340, 100%, 96%);
	--dark-color: hsl(336, 5%, 21%);
	--dark-color-text: hsl(340, 3%, 29%);
	--gray: hsl(340, 2%, 42%);
	--nearly-white: hsl(340, 4%, 99%);
	--medium-gray: hsl(340, 4%, 90%);
	--light-gray: hsl(340, 4%, 94%);
	--box-shadow:hsl(259deg 87% 15% / 30%);
	--white: #fff;
	--mauve:#40097b;
	--aqua: #19db9a;
	--pink: #40097b;

	--lightgreen-light: #f2fcf9;
	--lightgreen: #7ae7bf;
	--lightgreen_85: rgba(122,231,191,.85);

	--green-light: #f2faed;
	--green: #7bd148;
	--green_85: rgba(123,209,72,.85);

	--boldgreen-light: #eef7ed;
	--boldgreen: #51b749;
	--boldgreen_85: rgba(81,183,73,.85);

	--boldblue-light: #eef3fd;
	--boldblue:#5484ed;
	--boldblue_85:rgba(84,132,237,.85);

	--blue-light: #f6f8fe;
	--blue:#a4bdfc;
	--blue_85:rgba(164,189,252,.85);

	--turquoise-light: #edfbfb;
	--turquoise:#46d6db;
	--turquoise_85:rgba(70,214,219,.85);

	--yellow-light: #fefbef;
	--yellow:#fbd75b;
	--yellow_85:rgba(251,215,91,.85);

	--orange-light: #fefbef;
	--orange:#fbd75b;
	--orange_85:rgba(251,215,91,.85);

	--red-light: #fff3f2;
	--red:#ff887c;
	--red_85:rgba(255,136,124,.85);

	--boldred-light: #fbe9ea;
	--boldred:#dc2127;
	--boldred_85:rgba(220,33,39,.85);

	--purple-light: #fbf7ff;
	--purple:#dbadff;
	--purple_85:rgba(219,173,255,.85);

	--deeppurple_85:rgba(59, 19, 147,.85);

	--grey-light: #fcfcfc;
	--grey:#828080;
	--grey_85:rgba(225,225,225,.85);

	--error-color: hsl(7, 100%, 46%);
	--valid-color: #51b749;

	--input-color: hsl(216, 86%, 44%);
	--input-color-inactive: hsl(216, 6%, 85%);


	--text-font-size: 14px;
	--text-font-size-button: 15px;
	--text-line-height: 1.17;
	--text-letter-spacing: -.1px;
	--text-font-weight-normal: 400;
	--text-font-weight-medium: 600;
	--text-font-weight-bold: 700;

	--border-radius: 3px;

	--tip-border-color: #ffefad;
	--tip-background-color: #fffbea;
}

@media (prefers-color-scheme: light) {

	:root {
		--primary-color: #e91e63;
		--light-pink: hsl(340, 100%, 96%);
		--dark-color: hsl(336, 5%, 21%);
		--dark-color-text: hsl(340, 3%, 29%);
		--gray: hsl(340, 2%, 42%);
		--nearly-white: hsl(340, 4%, 99%);
		--medium-gray: hsl(340, 4%, 90%);
		--light-gray: hsl(340, 4%, 94%);
		--box-shadow: hsl(259deg 87% 15% / 30%);
		--white: #fff;
		--mauve:#40097b;
		--aqua: #19db9a;
		--pink: #40097b;

		--lightgreen-light: #f2fcf9;
		--lightgreen: #7ae7bf;
		--lightgreen_85: rgba(122,231,191,.85);

		--green-light: #f2faed;
		--green: #7bd148;
		--green_85: rgba(123,209,72,.85);

		--boldgreen-light: #eef7ed;
		--boldgreen: #51b749;
		--boldgreen_85: rgba(81,183,73,.85);

		--boldblue-light: #eef3fd;
		--boldblue:#5484ed;
		--boldblue_85:rgba(84,132,237,.85);

		--blue-light: #f6f8fe;
		--blue:#a4bdfc;
		--blue_85:rgba(164,189,252,.85);

		--turquoise-light: #edfbfb;
		--turquoise:#46d6db;
		--turquoise_85:rgba(70,214,219,.85);

		--yellow-light: #fefbef;
		--yellow:#fbd75b;
		--yellow_85:rgba(251,215,91,.85);

		--orange-light: #fff4e5;
		--orange: #ffb347; /* une teinte orange plus distincte */
		--orange_85: rgba(255, 179, 71, .85);


		--red-light: #fff3f2;
		--red:#ff887c;
		--red_85:rgba(255,136,124,.85);

		--boldred-light: #fbe9ea;
		--boldred:#dc2127;
		--boldred_85:rgba(220,33,39,.85);

		--purple-light: #fbf7ff;
		--purple:#dbadff;
		--purple_85:rgba(219,173,255,.85);

		--deeppurple_85:rgba(59, 19, 147,.85);

		--grey-light: #fcfcfc;
		--grey:#828080;
		--grey_85:rgba(225,225,225,.85);

		--error-color: hsl(7, 100%, 46%);
		--valid-color: #51b749;

		--input-color: hsl(216, 86%, 44%);
		--input-color-inactive: hsl(216, 6%, 85%);


		--text-font-size: 14px;
		--text-font-size-button: 15px;
		--text-line-height: 1.17;
		--text-letter-spacing: -.1px;
		--text-font-weight-normal: 400;
		--text-font-weight-medium: 600;
		--text-font-weight-bold: 700;

		--border-radius: 3px;

		--tip-border-color: #ffefad;
		--tip-background-color: #fffbea;
	}
}
/****		GENERAL STYLING		***/
html, html * {
	box-sizing: border-box;
}

html {
	font-family: 'Inter', sans-serif;
	height: 100%;
	font-weight: 400;
	letter-spacing: -.1px;
	color: var(--dark-color-text);
	background: var(--nearly-white);
}

body {
	min-height: 100%;
	margin-top: 0;
	overflow: auto;
	font-size: var(--text-font-size);
	line-height: var(--text-line-height);
	-webkit-font-smoothing: antialiased;
	color: var(--dark-color);
	background: var(--nearly-white);
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, a, span, blockquote, cite, p, ul, li, td, div {
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/*overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis; */

}

h1 {
	font-size: 32px;
	letter-spacing: -.4px;
}

h2 {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.2px;
}

h3 {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--gray);
}

p {
	font-size: var(--text-font-size);
	line-height: 18px;
}

p + p {
	margin-top: 8px;
}

.no_margin_left {
	padding-left: 0 !important;
}

.no_margin_right {
	padding-right: 0 !important;
}

.text_centered { text-align: center; }
.block_center { margin: auto; float: none; }

.font_size_small { font-size:11px; }
/*
::selection { background: #e91e63; color:#fff; }
::-moz-selection { background: #e91e63; color:#fff;  }

input::selection { background: var(--dark-color); color:#ffffff; }
input::-moz-selection { background: var(--dark-color); color:#ffffff;  }*/

.white { color:var(--white); }
.white_bg { background:var(--white); }

.mauve { color: var(--mauve); fill:  var(--mauve); } /* #3b1393 */
/*	.mauve_bg { background: #40097b }/* #3b1393 */

.dark { color: var(--dark-color-text); fill: var(--dark-color); }
.dark_bg { background: var(--dark-color); }

.grey { color: var(--gray); fill: var(--gray); }
.grey_bg { background: var(--gray); }

.aqua { color: var(--aqua); fill: var(--aqua); }
/*	.aqua_bg { background: #19db9a } */

.pink { color: var(--pink); fill: var(--pink); }
.pink_bg { background: var(--pink); }

.vertical_center {
	position: relative;
	display: block !important;
	margin: auto;
}

/** BADGES **/
.style_green { background: var(--green-light); color: var(--green); }
.style_green_calendar { background:var(--green_85) !important; color: var(--white); }
.style_green a { color:  var(--green); }
a.style_green:hover { color: var(--green-light); background:  var(--green); }

.style_boldblue { background: var(--boldblue-light) ; color: var(--boldblue); }
.style_boldblue_calendar { background: var(--boldblue_85) !important; color: var(--white); }
.style_boldblue a { color: var(--boldblue) }
a.style_boldblue:hover { color:  var(--boldblue-light) ; background:  var(--boldblue); }

.style_blue { background: var(--blue-light); color: var(--blue); }
.style_blue_calendar { background: var(--blue_85) !important; color: var(--white); }
.style_blue a { color: var(--blue); }
a.style_blue:hover { color:  var(--blue-light); background:  var(--blue); }

.style_turquoise { background: var(--turquoise-light); color: var(--turquoise); }
.style_turquoise_calendar { background: var(--turquoise_85) !important; color: var(--white); }
.style_turquoise a { color: var(--turquoise); }
a.style_turquoise:hover { color: var(--turquoise-light); background: var(--turquoise); }

.style_lightgreen { background: var(--lightgreen-light); color: var(--lightgreen); }
.style_lightgreen_calendar { background: var(--lightgreen_85) !important; color: var(--white); }
.style_lightgreen a { color: var(--lightgreen); }
a.style_lightgreen:hover { color: var(--lightgreen-light); background: var(--lightgreen); }

.style_boldgreen { background: var(--boldgreen-light); color: var(--boldgreen); }
.style_boldgreen_calendar { background: var(--boldgreen_85) !important; color: var(--white); }
.style_boldgreen a { color: var(--boldgreen); }
a.style_boldgreen:hover { color: var(--boldgreen-light); background: var(--boldgreen); }

.style_yellow { background: var(--yellow-light); color: var(--yellow); }
.style_yellow_calendar { background: var(--yellow_85) !important; color: var(--white); }
.style_yellow a { color: var(--yellow); }
a.style_yellow:hover { color: var(--yellow-light); background: var(--yellow); }

.style_orange { background: var(--orange-light); color: var(--orange); } /* rgba(255,184,120,.1); */
.style_orange_calendar { background: var(--orange_85) !important; color: var(--white); }
.style_orange a { color: var(--orange); }
a.style_orange:hover { color: var(--orange-light); background: var(--orange); }

.style_red { background: var(--red-light); color: var(--red); } /* rgba(255,136,124,.1); */
.style_red_calendar { background: var(--red_85) !important; color: var(--white); }
.style_red a { color: var(--red); }
a.style_red:hover { color: var(--red-light); background: var(--red); }

.style_boldred { background: var(--boldred-light); color: var(--boldred); } /* rgba(220,33,39,.1); */
.style_boldred_calendar { background:  var(--boldred_85) !important; color: var(--white); }
.style_boldred a { color:  var(--boldred); }
a.style_boldred:hover { color: var(--boldred-light); background: var(--boldred); }

.style_purple { background: var(--purple-light); color: var(--purple); } /* rgba(219,173,255,.1); */
.style_purple_calendar { background: var(--purple_85) !important; color: var(--white); }
.style_purple a { color: var(--purple); }
a.style_purple:hover { color: var(--purple-light); background: var(--purple); }

.style_gray { background: var(--grey-light); color: var(--grey); } /* rgba(225,225,225,.1);  */
.style_gray_calendar { background: var(--grey_85) !important; color: var(--white); }
.style_gray a { color: var(--grey); }
a.style_gray:hover { color: var(--grey-light); background: var(--grey); }

@media (prefers-color-scheme: dark) {
	.badge.style_green { background: none; border: 1px solid var(--green); color: var(--green); }
	.badge.style_green a { color:  var(--green); }
	.a.badge.style_green:hover { color: var(--green-light); background: none; border: 1px solid var(--green); }

	.badge.style_boldblue { background: none; border: 1px solid var(--boldblue) ; color: var(--boldblue); }
	.badge.style_boldblue_calendar { background: none; border: 1px solid var(--boldblue_85) !important; color: var(--white); }
	.badge.style_boldblue a { color: var(--boldblue) }
	a.badge.style_boldblue:hover { color:  var(--boldblue-light) ; background: none; border: 1px solid var(--boldblue); }

	.badge.style_blue { background: none; border: 1px solid var(--blue); color: var(--blue); }
	.badge.style_blue_calendar { background: none; border: 1px solid var(--blue_85) !important; color: var(--white); }
	.badge.style_blue a { color: var(--blue); }
	a.badge.style_blue:hover { color:  var(--blue-light); background: none; border: 1px solid var(--blue); }

	.badge.style_turquoise { background: none; border: 1px solid var(--turquoise); color: var(--turquoise); }
	.badge.style_turquoise_calendar { background: none; border: 1px solid var(--turquoise_85) !important; color: var(--white); }
	.badge.style_turquoise a { color: var(--turquoise); }
	a.badge.style_turquoise:hover { color: var(--turquoise-light); background: none; border: 1px solid var(--turquoise); }

	.badge.style_lightgreen { background: none; border: 1px solid var(--lightgreen); color: var(--lightgreen); }
	.badge.style_lightgreen_calendar { background: none; border: 1px solid var(--lightgreen_85) !important; color: var(--white); }
	.badge.style_lightgreen a { color: var(--lightgreen); }
	a.badge.style_lightgreen:hover { color: var(--lightgreen-light); background: none; border: 1px solid var(--lightgreen); }

	.badge.style_boldgreen { background: none; border: 1px solid var(--boldgreen); color: var(--boldgreen); }
	.badge.style_boldgreen_calendar { background: none; border: 1px solid var(--boldgreen_85) !important; color: var(--white); }
	.badge.style_boldgreen a { color: var(--boldgreen); }
	a.badge.style_boldgreen:hover { color: var(--boldgreen-light); background: none; border: 1px solid var(--boldgreen); }

	.badge.style_yellow { background: none; border: 1px solid var(--yellow); color: var(--yellow); }
	.badge.style_yellow_calendar { background: none; border: 1px solid var(--yellow_85) !important; color: var(--white); }
	.badge.style_yellow a { color: var(--yellow); }
	a.badge.style_yellow:hover { color: var(--yellow-light); background: none; border: 1px solid var(--yellow); }

	.badge.style_orange { background: none; border: 1px solid var(--orange); color: var(--orange); } /* rgba(255,184,120,.1); */
	.badge.style_orange_calendar { background: none; border: 1px solid var(--orange_85) !important; color: var(--white); }
	.badge.style_orange a { color: var(--orange); }
	a.badge.style_orange:hover { color: var(--orange-light); background: none; border: 1px solid var(--orange); }

	.badge.style_red { background: none; border: 1px solid var(--red); color: var(--red); } /* rgba(255,136,124,.1); */
	.badge.style_red_calendar { background: none; border: 1px solid var(--red_85) !important; color: var(--white); }
	.badge.style_red a { color: var(--red); }
	a.badge.style_red:hover { color: var(--red-light); background: none; border: 1px solid var(--red); }

	.badge.style_boldred { background: none; border: 1px solid var(--boldred); color: var(--boldred); } /* rgba(220,33,39,.1); */
	.badge.style_boldred_calendar { background: none; border: 1px solid var(--boldred_85) !important; color: var(--white); }
	.badge.style_boldred a { color:  var(--boldred); }
	a.badge.style_boldred:hover { color: var(--boldred-light); background: none; border: 1px solid var(--boldred); }

	.badge.style_purple { background: none; border: 1px solid var(--purple); color: var(--purple); } /* rgba(219,173,255,.1); */
	.badge.style_purple_calendar { background: none; border: 1px solid var(--purple_85) !important; color: var(--white); }
	.badge.style_purple a { color: var(--purple); }
	a.badge.style_purple:hover { color: var(--purple-light); background: none; border: 1px solid var(--purple); }

	.badge.style_gray { background: none; border: 1px solid var(--grey); color: var(--grey); } /* rgba(225,225,225,.1);  */
	.badge.style_gray_calendar { background: none; border: 1px solid var(--grey_85) !important; color: var(--white); }
	.badge.style_gray a { color: var(--grey); }
	a.badge.style_gray:hover { color: var(--grey-light); background: none; border: 1px solid var(--grey); }

}

.fallback_calendar {background: var(--deeppurple_85) !important; color: #FFF !important; }

.stay_on_top {
	z-index: 99999;
}

.capitalize:first-letter {
	text-transform: uppercase;
}

.flex { display:flex; }
.flex_1 { flex:1; }
.flex_2 { flex:2; }
.flex_3 { flex:3; }
.flex_4 { flex:4; }
.flex_align_items_center { align-items: center; }


.bold { font-weight: var(--text-font-weight-bold); }
.medium { font-weight: var(--text-font-weight-medium); }
/***		/GENERAL STYLING		***/

/***		HEADER		***/

.header_bar {
	background: var(--nearly-white);
	border-bottom: 1px solid var(--medium-gray);
/*		box-shadow: 0 0 16px -4px var(--box-shadow); */
	width: 100%;
	min-height: 55px;
	z-index: 9999999;
	position: fixed;
	top: 0;
	font-size: 14px;
}

.header_bar .page_title {
	text-align: left;
	font-weight: bold;
	font-size: 20px;
	height:100%;
}



.app_logo {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><g fill="none" fill-rule="evenodd"><path fill="%23E91E63" d="M0 0h1000v1000H0z"/><path fill="%23F4F4F4" d="M750.4 680.3a164.2 164.2 0 0 0 57.5 50.2c2.4 1.2 4.9 2.4 8.6 2.4 6.1 0 13.5-3.7 15.9-9.8 4.9-8.6 1.2-19.6-8.6-24.5-22-11-40.4-28.1-52.6-50.2a120.3 120.3 0 0 1-13.5-71 19 19 0 0 0-15.9-20.8 19 19 0 0 0-20.8 15.9c-3.7 25.7 0 52.6 9.8 77.1A525.7 525.7 0 0 1 469 719.4a517.7 517.7 0 0 1-275.3-78.3 19.6 19.6 0 0 0-25.7 6.1 19.6 19.6 0 0 0 6.1 25.7A556.5 556.5 0 0 0 469 756.1a590.5 590.5 0 0 0 281.4-75.8z"/></g></svg>') no-repeat center transparent;
	background-size: contain;
	display: inline-block;
	text-indent: -999999px;
	height: 32px;
	width: 140px;
	margin-left: 7px;
}

.ppz_dropdown_options {
	display: none;
}

/***		/HEADER		***/


/***		CONTENT		***/

#body_content {
	padding: 10px;
	/*flex: 1 1 1px;*/
	width: 100%;
	overflow-y: auto;
	background: var(--nearly-white);
	/* box-shadow: 0 1px 3px 0 hsl(340 5% 21% / 0.3), 0 1px 2px 0 var(--box-shadow); */
/*	border-radius: 8px 8px 0 0;
	border: 1px solid var(--medium-gray);
	box-shadow: 0 1px 3px 0 var(--box-shadow); */
}

#body_content.modal_view {
	padding: 0;
	margin: auto;
	float: none;
}

.section_title {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.2px;
}

/***		/CONTENT		***/



/***		BOXES LAYOUT		***/

.box {
	background: var(--nearly-white);
	border-radius: 4px;
	box-shadow: 0 0px 12px -2px var(--box-shadow);
	margin-bottom: 15px;
	padding: 15px;
	position: relative;
}
@media (prefers-color-scheme: dark) {
	.box {
		border: 1px solid var(--medium-gray);
	}
}
.box.box-flat {
	border: 1px solid var(--medium-gray);
	box-shadow: 0 0;
}


.box.no-border {
	border-radius: 0;
	border: 0 none;
	box-shadow: 0 0;
}





.box .nothing_to_display {
	height: 80px;
    display: block;
    text-align: center;
    color: var(--gray);
}

/***		/BOXES LAYOUT		***/



/***		BOXES DROPDOWN		***/

.person_dp_down_ctn {
	top: 20px;
	right: 20px;
}

.person_dp_down_ctn .person_dp_down_btn {
	background: url(/img/icn_menu_horizontal.svg) center / 20px 20px no-repeat;
	width: 30px;
	height: 30px;
	border-radius: 90px;
}

.person_dp_down_ctn .person_dp_down_btn:hover {
	background-color: var(--nearly-white);
}

.box:hover .person_dp_down_ctn .person_dp_down_btn {
	display: block !important;
}

.person_dp_down_ctn .person_dp_menu_ctn {
	display: none;
}

.person_dp_down_ctn .person_dp_menu_ctn .person_dp_menu {
	background: var(--nearly-white);
	width: 200px;
	position: absolute;
	top: 50px;
	right: 10px;
	border-radius: 4px;
	box-shadow: 0 1px 6px -1px var(--box-shadow);
	border: 1px solid var(--medium-gray);
	z-index: 9;
}

.person_dp_down_ctn .person_dp_menu_ctn .person_dp_menu li {
	border-bottom: 1px solid var(--medium-gray);
}

.person_dp_down_ctn .person_dp_menu_ctn .person_dp_menu li:last-child {
	border-bottom: 0 none;
	border-radius: 0 0 4px 4px;
}

.person_dp_down_ctn .person_dp_menu_ctn .person_dp_menu a {
	color: var(--dark-color);
	padding: 15px;
	display: block;
	font-size: 14px;
}

.person_dp_down_ctn .person_dp_menu_ctn .person_dp_menu li:first-child a {
	border-radius: 4px 4px 0 0;
}

.person_dp_down_ctn .person_dp_menu_ctn .person_dp_menu li:last-child a {
	border-radius: 0 0 4px 4px;
}

.person_dp_down_ctn .person_dp_menu_ctn .person_dp_menu a:hover {
	color: var(--white);
	background: var(--aqua);
}

/* DP DOWN SUR DES TEXTES */
.person_dp_down_ctn.dp_down_text {
	display: inline-block;
	position: relative;
	top: initial;
    right: initial;
	cursor: pointer;
}

.person_dp_down_ctn.dp_down_text:after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 2px;
	cursor: pointer;
	border-radius: 50%;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-252.6 249 26.6 15.3"><path fill="%23555" d="M-237.4 262.3c0 .5-.2 1-.6 1.4-.8.8-2 .8-2.8 0l-11.3-11.3c-.8-.8-.8-2 0-2.8s2-.8 2.8 0l11.3 11.3c.4.3.6.8.6 1.4z"/><path fill="%23555" d="M-226.1 251c0 .5-.2 1-.6 1.4l-11.3 11.3c-.8.8-2 .8-2.8 0s-.8-2 0-2.8l11.3-11.3c.8-.8 2-.8 2.8 0 .4.4.6.9.6 1.4z"/></svg>') no-repeat center var(--medium-gray);
	background-size: 6px;
	position: relative;
	top: 1px;
	margin-right: 2px;
}

.person_dp_down_ctn.dp_down_text .person_dp_down_btn {
	background: url(/img/icn_down_dark.svg) right center / 8px no-repeat !important;
    width: initial;
    height: initial;
    top: initial;
    border-radius: initial;
    padding-right: 13px;
    right: initial;
    position: initial;
    display: block;
}

.person_dp_down_ctn.dp_down_text .person_dp_menu_ctn .person_dp_menu {
	top: 22px;
	right: 0;
}

.person_dp_down_ctn.dp_down_text .person_dp_menu_ctn .person_dp_menu a {
    text-align: left;
}

.person_dp_down_ctn.dp_down_text .person_dp_menu_ctn .person_dp_menu li {
    margin-right: 0;
    padding-right: 0;
    float: none;
    border-right: 0 none;
}


/* /DP DOWN SUR DES TEXTES */

/***		/BOXES DROPDOWN		***/



/***		BOXES CONTENT		***/

.person_item,
.person_pict {
	padding: 0;
}

.person_pict.big_img {
	width: 150px;
	height: 150px;
}

.person_pict_bg {
	display: block;
	margin: auto;
	max-width: 100%;
}

.aspectRatioPlaceholder .person_pict_bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.update_person_pict {
	position: absolute;
	right: -10px;
	bottom: -10px;
	width: 30px;
	height: 30px;
	z-index: 6;
	border-radius: 90px;
	background: var(--nearly-white);
	box-shadow: 0 1px 3px 0 var(--box-shadow);
	overflow: hidden;
}

.update_person_pict .icon-camera {
	width: 30px;
	height: 30px;
	display: block;
	background-size: 16px;
}
.update_person_pict .icon-camera.icon-pink {
	display: none;
}
.update_person_pict:hover .icon-camera.icon-pink {
	display: block;
	background-size: 16px;
}

.person_name {
	font-size: 18px;
/*		padding-top: 10px; */
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.person_pict img {
	width: 75px;
	height: 75px;
	background-size: cover;
	background-position: center;
	border-radius: 6px;
}

.person_pict.big_img img {
	box-shadow: 0 0 18px -13px;
	background-color: var(--light-gray);
}

.person_phone, .person_mail{
/*	margin-top: 7px; */
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.person_groups {
	font-size: 13px;
}

.person_groups .person_group {
	border-radius: 14px;
	padding: 4px 9px;
	font-weight: 700;
	font-size: 12px;
	margin-right: 5px;
	margin-bottom: 4px;
	display: inline-block;
}

/***		/BOXES CONTENT		***/



sup {
font-size: 75%;
line-height: 0;
position: relative;
top: -0.5em;
vertical-align: baseline;
}



/***		MediumLightbox		***/

.scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}

.img {
display: block;
margin: auto;
max-width: 100%;
}


.aspectRatioPlaceholder .img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



.zoom-effect img {
cursor: pointer;
cursor: -webkit-zoom-in;
}

.zoom-effect .zoomImg,
.zoom-effect .zoomImg-wrap {
position: relative;
z-index: 900;
transition: all 300ms;
}

.zoom-effect .zoomImg-wrap--absolute {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


.zoom-effect .zoomImg {
cursor: pointer;
cursor: -webkit-zoom-out;
}


.zoom-effect .zoomOverlay.show{
opacity: .8;
}

.zoom-effect .zoomOverlay {
z-index: 800;
background: var(--nearly-white);
position: absolute;
transition: opacity 300ms;
opacity: 0;
cursor: pointer;
cursor: -webkit-zoom-out;
}

/***		/MediumLightbox		***/



/***		SORTING		***/
.sort {
cursor: pointer;
}
.sort:hover {
background-color: var(--light-gray);
}
.sort:hover:after {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" alt="order ascendant" viewBox="0 0 12 7.9"><path d="M7 7.8H.5c-.3 0-.5-.3-.5-.5 0-.3.2-.5.5-.5H7c.3 0 .5.2.5.5 0 .2-.2.5-.5.5zM5.6 4.5H.5C.2 4.5 0 4.3 0 4s.2-.5.5-.5h5.1c.3 0 .5.2.5.5s-.2.5-.5.5zM4.3 1.2H.5C.2 1.2 0 1 0 .7S.2.2.5.2h3.8c.3 0 .5.2.5.5s-.3.5-.5.5zm7.5 1.2c-.2.2-.5.2-.7 0l-.6-.6v5.4c0 .3-.2.5-.5.5s-.5-.2-.5-.5V1.8l-.5.6c-.2.2-.5.2-.7 0a.5.5 0 0 1 0-.7L9.7.3l.4-.1.4.1 1.4 1.4c.1.2.1.5-.1.7z" fill="%2369696e"/></svg>') no-repeat center !important;
background-size: contain;
top: 1.5px;
right: -8px;
visibility: visible;
}
.sort:after {
display: inline-block;
width: 13px;
height: 12px;
content: "";
position: relative;
}
.sort.asc:after {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" alt="order ascendent" viewBox="0 0 12 7.9"><path d="M7 7.8H.5c-.3 0-.5-.3-.5-.5 0-.3.2-.5.5-.5H7c.3 0 .5.2.5.5 0 .2-.2.5-.5.5zM5.6 4.5H.5C.2 4.5 0 4.3 0 4s.2-.5.5-.5h5.1c.3 0 .5.2.5.5s-.2.5-.5.5zM4.3 1.2H.5C.2 1.2 0 1 0 .7S.2.2.5.2h3.8c.3 0 .5.2.5.5s-.3.5-.5.5zm7.5 1.2c-.2.2-.5.2-.7 0l-.6-.6v5.4c0 .3-.2.5-.5.5s-.5-.2-.5-.5V1.8l-.5.6c-.2.2-.5.2-.7 0a.5.5 0 0 1 0-.7L9.7.3l.4-.1.4.1 1.4 1.4c.1.2.1.5-.1.7z" fill="%2369696e"/></svg>') no-repeat center !important;
background-size: contain;
top: 1.5px;
right: -8px;
visibility: visible;
}
.sort.desc:after {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" alt="order descendent" viewBox="0 0 12 7.9"><path d="M7 0H.5C.2 0 0 .2 0 .5s.2.5.5.5H7c.3 0 .5-.2.5-.5S7.3 0 7 0zM5.6 3.3H.5c-.3 0-.5.2-.5.5s.2.5.5.5h5.1c.3 0 .5-.2.5-.5s-.2-.5-.5-.5zM4.3 6.5H.5c-.3 0-.5.3-.5.5s.2.5.5.5h3.8c.3 0 .5-.2.5-.5s-.2-.5-.5-.5zm7.5-1.2a.5.5 0 0 0-.7 0l-.6.6V.5c0-.3-.2-.5-.5-.5s-.4.2-.4.5v5.4L9 5.3c-.2-.2-.5-.2-.7 0s-.2.5 0 .7l1.4 1.4c.1.2.2.2.3.2l.4-.1 1.4-1.4c.2-.2.2-.6 0-.8z" fill="%2369696e"/></svg>') no-repeat center !important;
background-size: contain;
top: 1.5px;
right: -8px;
visibility: visible;
}

.sort.asc,
.sort.desc {
border-bottom: 2px solid var(--primary-color);
/*background: var(--medium-gray);*/
}

/***		/SORTING		***/


/***		LOADING SPINNER		***/

.is_loading .loading-spinner {
display: inline-block;
}

.loading-spinner {
height: 14px;
width: 14px;
animation: rotate 0.6s infinite linear;
border: 3px solid var(--primary-color);
border-right-color: transparent;
border-radius: 50%;
display: none;
}

.loading-spinner.spinner-small {
width: 6px;
height: 6px;
border-width: 2px;
margin: 0 4px;
}

@keyframes rotate {
0%    { transform: rotate(0deg); }
100%  { transform: rotate(360deg); }
}

/***		/LOADING SPINNER		***/



/***		BADGES		***/

.badge {
	vertical-align: middle;
	border-radius: 12px;
	padding: 1px 4px;
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	align-self: start;
	white-space: nowrap;
	line-height: 15px;
	margin: 2px 0;
	max-width: 200px;
	text-overflow: ellipsis;
	overflow: hidden;
}

.badge + .badge {
	margin-left: 6px;
}


/***		/BADGES		***/

.person_avatar_small {
	width: 75px;
	height: 75px;
	background-size: cover;
	background-position: center;
	border-radius: 3px;
	background-color: var(--light-gray);
	margin: 6px;
	margin-left: 0;
}


.question_mark {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 67"><path fill="%2319db9a" d="M33.5 67C52.002 67 67 52.002 67 33.5 67 14.998 52.002 0 33.5 0 14.998 0 0 14.998 0 33.5 0 52.002 14.998 67 33.5 67zm4.3-16.4c0 1.1-1 2.1-2.1 2.1h-5.3c-1.1 0-2.1-1-2.1-2.1v-3.5c0-1.1 1-2.1 2.1-2.1h5.3c1.1 0 2.1 1 2.1 2.1v3.5zM45 32a14.5 14.5 0 0 1-4.9 4.3 7.1 7.1 0 0 0-2.3 2.3c-.3.6-.5 1.3-.5 2.2 0 .6-.6 1.1-1.4 1.1h-6c-.8 0-1.4-.6-1.4-1.4.1-1.6.5-3 1.3-3.9.9-1.1 2.4-2.5 4.6-4.2a10 10 0 0 0 2.7-2.7c.6-1 1-2.3 1-3.7 0-1.4-.4-2.5-1.1-3.4-.8-.9-1.9-1.3-3.3-1.3-1.1 0-2.2.4-2.9 1-.5.4-.8 1-1 1.8a2 2 0 0 1-1.9 1.4l-5.6-.1c-.6 0-1.3-.6-1.1-1.3a10 10 0 0 1 3.4-6.9c2.3-1.8 5.5-2.7 9.3-2.7 4.1 0 7.4 1 9.6 3 2.2 2 3.6 4.8 3.6 8.4-.2 2.3-.8 4.3-2.1 6.1z"/></svg>') no-repeat center left transparent;
width: 13px;
height: 13px;
cursor: pointer;
display: inline-block;
position: relative;
margin-left: 4px;
top: 2px;
}

strong {
font-weight: 700;
}

.disabled {
opacity: .35;
cursor: default;
pointer-events: none;
}

#subbar {
background: var(--nearly-white);
height: 112px;
	padding-top:56px;
border-bottom: 1px solid #ede9f5;

box-shadow: 0 0 11px -4px var(--box-shadow);
position: fixed;
z-index: 999999;
width: 100%;
top: 0;
left: 0;
}
#subbar .tab_ctn {
	text-align: center;
}
#subbar .tab_ctn .tab_inline {
	display: inline-block;
	height: inherit;
	line-height: 54px;
	margin: 0 20px;
}
#subbar .tab_ctn .tab_inline.current_tab,
#subbar .tab_ctn .tab_inline:hover,
#subbar .tab_ctn .tab_inline:active {
	color: #e91e63;
}

/***		ANIMATIONS		***/

.animate,
.animate:before,
.animate:after {
overflow: initial;
transition-duration: 150ms;
transition-property: background-color, border-color, box-shadow, color, fill, -webkit-transform, transform, opacity, width, stroke, flex, max-width;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/***		/ANIMATIONS		***/


.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}






/***    EVALUATIONS  ***/

.evaluation_event_ctn {
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
grid-column-gap: 12px;
grid-row-gap: 12px;
}

.evaluation_event_ctn .evaluation_event {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
background: #fff;
border: 1px solid #d5cadf;
border-radius: 4px;
height: 180px;
flex-direction: column;
display: flex;
box-sizing: border-box;
box-shadow: var(--box-shadow) 0 0 0, var(--purple_85) 0 2px 5px -3px;
transition-duration: 150ms;
transition-property: border-color, box-shadow, -webkit-transform, transform;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
overflow: hidden;
cursor: pointer;
}

.evaluation_event_ctn .evaluation_event .evaluation_summary {
overflow: hidden;
padding: 0;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
position: relative;
}

.evaluation_event_ctn .evaluation_event .evaluation_summary .color_bar {
display: flex;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
flex-direction: column-reverse;
}

.evaluation_event_ctn .evaluation_event .evaluation_summary .evaluation_average {
display: flex;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
align-items: center;
align-self: center;
font-weight: 700;
font-size: 24px;
}

.evaluation_event_ctn .evaluation_event .evaluation_summary .evaluation_average .evaluation_average_value_max {
font-size: 15px;
margin-left: 4px;
}

.evaluation_event_ctn .evaluation_event .evaluation_summary .evaluation_lines {
position: absolute;
width: 100%;
height: 100%;
background:var(--nearly-white);
padding: 10px;
color: var(--dark-color);
box-sizing: border-box;
overflow: scroll;
opacity: 0;
}

.evaluation_event_ctn .evaluation_event:hover .evaluation_summary .evaluation_lines {
opacity: 1;
}

.evaluation_event_ctn .evaluation_event .evaluation_summary .evaluation_line {
padding-bottom: 6px;
margin-bottom: 6px;
border-bottom: 1px solid var(--medium-gray);
font-size: 13px;
line-height: 16px;
display: flex;
}

.evaluation_event_ctn .evaluation_event .evaluation_summary .evaluation_line:last-child {
margin-bottom: 0;
border-bottom: 0 none;
}


.evaluation_event_ctn .evaluation_event .evaluation_summary .evaluation_line .competency_subject_name {
flex-grow: 1;
}

.evaluation_event_ctn .evaluation_event .evaluation_summary .color_bar .bar_boldgreen,
.evaluation_event_ctn .evaluation_event .evaluation_summary .color_bar .bar_style_boldgreen {
background: var(--boldgreen);
}
.evaluation_event_ctn .evaluation_event .evaluation_summary .color_bar .bar_yellow,
.evaluation_event_ctn .evaluation_event .evaluation_summary .color_bar .bar_style_yellow {
background: var(--yellow);
}
.evaluation_event_ctn .evaluation_event .evaluation_summary .color_bar .bar_orange,
.evaluation_event_ctn .evaluation_event .evaluation_summary .color_bar .bar_style_orange {
background: var(--orange);
}
.evaluation_event_ctn .evaluation_event .evaluation_summary .color_bar .bar_boldred,
.evaluation_event_ctn .evaluation_event .evaluation_summary .color_bar .bar_style_boldred {
background: var(--red);
}

.evaluation_event_ctn .evaluation_event .evaluation_event_name {
border-top: 1px solid var(--medium-gray);
background: var(--nearly-white);
border-radius: 0 0 4px 4px;
padding: 12px 10px;
font-size: 13px;
transition-duration: 150ms;
transition-property: border-color, background-color, box-shadow, color, -webkit-transform, transform, opacity;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.evaluation_event_ctn .evaluation_event .evaluation_summary .evaluation_line .evaluation_method_value_max {
font-size: 9px;
margin-left: 2px;
}



/* * * * * * TINY EVALUATIONS * * * * * */

.evaluation_event_ctn.tiny_summary {
grid-template-columns: repeat(auto-fill,minmax(35px, 1fr));
grid-column-gap: 6px;
grid-row-gap: 6px;
}

.evaluation_event_ctn.tiny_summary .evaluation_event {
height: 34px;
border-radius: 3px;
}

.evaluation_event_ctn.tiny_summary .evaluation_event .evaluation_event_name {
display: none;
}

.evaluation_event_ctn.tiny_summary .evaluation_event .evaluation_summary {
flex-grow: unset;
flex-shrink: unset;
flex-basis: unset;
height: 100%;
}

.evaluation_event_ctn.tiny_summary .evaluation_event .evaluation_summary .evaluation_average {
font-size: 12px !important;
line-height: 11px;
text-align: center;
letter-spacing: -0.2px;
}

.evaluation_event_ctn.tiny_summary .evaluation_event .evaluation_summary .evaluation_average .evaluation_average_value_max {
font-size: 7px !important;
margin-left: 0 !important;
display: block;
}

.evaluation_event_ctn.tiny_summary .evaluation_event .evaluation_summary .evaluation_lines {
display: none;
}

/***    /EVALUATIONS  ***/



.fixed-area-headerbar-right {
position: fixed;
top: 9px;
z-index: 99999999;
right: 10px;
}


/***    TIPS      ***/

.tip {
border: 1px solid var(--tip-border-color);
background: var(--tip-background-color);
display: flex;
padding: 8px;
align-items: center;
box-shadow: 0 0 0;
}

.tip .tip_icn {
fill: var(--yellow);
width: 24px;
height: 24px;
margin-right: 8px;
}

.tip .tip_text {
color: var(--dark-color);
}
.tip .tip_text a {
font-weight: 700;
color: #5a5016;
text-decoration: underline;
}

/***    /TIPS      ***/
.window_ctn {
	/*display: flex;
	flex-direction: row;
	align-items: stretch;
	flex-grow: 1;*/
	min-height: calc(100% - 0px);
}


	.navigation_secondary_level .box_menu {
position: relative;
}
.navigation_secondary_level .box_menu + .box_menu {
margin-top: 8px; /*32px;*/
}

.navigation_secondary_level .box_name + .box_link {
/*margin-top: 8px;*/
}
.navigation_secondary_level .box_link + .box_link {
/*	margin-top: 5px; /* 1px */
}

/*.navigation_secondary_level*/ li.box_name {
text-transform: uppercase;
color: var(--dark-color);
padding: 18px 12px 6px;
font-weight: 600;
font-size: 12px;
}
/*.navigation_secondary_level*/ li.box_link > a {
line-height: 18px;
padding: 6px 12px; /*4px 8px;*/
color: var(--dark-color-text);
display: block;
background: transparent;
/*	border-radius: 3px;*/
}

/*.navigation_secondary_level*/ li.box_link.has_grid > a {
display: grid;
grid-template-columns: 14px 6px 1fr 6px auto;
grid-template-areas: "icon . label . counter";
}

/*.navigation_secondary_level*/ li.box_link.has_grid_text_counter > a {
display: grid;
grid-template-columns: 1fr 6px auto;
grid-template-areas: "label . counter";
}

/*.navigation_secondary_level*/ li.box_link.has_grid > a .link_icon {
grid-area: icon;
}
/*.navigation_secondary_level*/ li.box_link.has_grid > a .link_label,
	                                /*.navigation_secondary_level*/ li.box_link.has_grid_text_counter > a .link_label {
grid-area: label;
}
/*.navigation_secondary_level*/ li.box_link.has_grid > a .counter,
	                                /*.navigation_secondary_level*/ li.box_link.has_grid_text_counter > a .counter {
opacity: 0;
grid-area: counter;
position: relative;
color: var(--gray);
}
.navigation_secondary_level li.box_link.has_grid > a.active .counter,
.navigation_secondary_level li.box_link.has_grid_text_counter > a.active .counter {
color: var(--white);
}
.navigation_secondary_level li.box_link.has_grid a:hover .counter,
.navigation_secondary_level li.box_link.has_grid a:active .counter,
.navigation_secondary_level li.box_link.has_grid > a.active .counter,
.navigation_secondary_level li.box_link.has_grid_text_counter a:hover .counter,
.navigation_secondary_level li.box_link.has_grid_text_counter a:active .counter,
.navigation_secondary_level li.box_link.has_grid_text_counter > a.active .counter {
opacity: 1;
}

/*
.navigation_secondary_level li.box_link.has_popup_link .popup_link_container .popup_link {
display: none;
width: 8px;
height: 16px;
position: absolute;
right: -2px;
top: 1px;
opacity: .6;
}
.navigation_secondary_level li.box_link.has_popup_link a:hover .popup_link_container .popup_link {
display: block;
}
.navigation_secondary_level li.box_link.has_popup_link a:hover .popup_link_container :not(.popup_link) {
visibility: hidden;
}*/
.navigation_secondary_level li.box_link > a .treeview_arrow_unfold {
fill: var(--dark-color);
stroke: var(--dark-color);
}
.navigation_secondary_level li.box_link > a label {
margin:0 !important;
}


.navigation_secondary_level li.box_link > a:hover {
background: var(--light-gray);
}
.navigation_secondary_level li.box_link > a:active,
.navigation_secondary_level li.box_link > a.active {
color: var(--white);
background-color: var(--dark-color);
}
.navigation_secondary_level li.box_link > a:active .treeview_arrow_unfold,
.navigation_secondary_level li.box_link > a.active .treeview_arrow_unfold {
fill:var(--white);
stroke:var(--white);
}



/* TODO DELETE IF NOT IN USE */
.navigation_secondary_level li.box_link.has_more:before {
background: linear-gradient(hsla(340, 20%, 98%, 0), hsl(340, 20%, 98%));
content: "";
display: none;
height: 40px;
position: absolute;
width: 100%;
bottom: 32px;
pointer-events: none;
opacity: 1;
}

.navigation_secondary_level .show_hidden_items li.box_link.has_more:before {
opacity: 0;
}

@keyframes animation_slidedown_show_menus {
0% {
	opacity: 0;
	transform: scale3d(1,0,1);
	transform-origin: left top;
}

100% {
	opacity: 1;
	transform: scale3d(1,1,1);
}
}

.navigation_secondary_level .show_hidden_items .box_link.hide_link {
visibility: visible;
display: list-item;
animation: animation_slidedown_show_menus .2s 1 forwards;
animation-delay: 60ms
}


.navigation_secondary_level .box_link.hide_link {
visibility: hidden;
opacity: 0;
display: none;
}

.box_menu .inline_button_action {
background-size: 14px;
display: inline-block;
text-indent: -9999999px;
float: right;
width: 16px;
height: 16px;
border-radius: 90%;
position: relative;
top: -1px;
opacity: .6;
}

.box_menu .inline_button_action:hover,
.box_menu .inline_button_action:active {
opacity: 1;
}



/***    SECONDARY NAVIGATION    ***/
.navigation_secondary_level {
	flex-basis: 150px;
	/*	padding: 14px 12px; */
/*	background: #fff; */
	border-right: 1px solid var(--medium-gray);
	overflow-y: auto;
	/*margin-left: 50px;*/
}

.navigation_secondary_level .box_menu {
	position: relative;
}
.navigation_secondary_level .box_menu + .box_menu {
	margin-top: 8px; /*32px;*/
}

.navigation_secondary_level .box_name + .box_link {
	/*margin-top: 8px;*/
}
.navigation_secondary_level .box_link + .box_link {
	/*	margin-top: 5px; /* 1px */
}

/*.navigation_secondary_level*/ li.box_name {
									text-transform: uppercase;
									color: var(--dark-color);
									padding: 18px 12px 6px;
									font-weight: 600;
									font-size: 12px;
								}
/*.navigation_secondary_level*/ li.box_link > a {
									line-height: 18px;
									padding: 6px 12px; /*4px 8px;*/
									color: var(--dark-color-text);
									display: block;
									background: transparent;
									/*	border-radius: 3px;*/
								}

/*.navigation_secondary_level*/ li.box_link.has_grid > a {
									display: grid;
									grid-template-columns: 14px 6px 1fr 6px auto;
									grid-template-areas: "icon . label . counter";
								}

/*.navigation_secondary_level*/ li.box_link.has_grid_text_counter > a {
									display: grid;
									grid-template-columns: 1fr 6px auto;
									grid-template-areas: "label . counter";
								}

/*.navigation_secondary_level*/ li.box_link.has_grid > a .link_icon {
									grid-area: icon;
								}
/*.navigation_secondary_level*/ li.box_link.has_grid > a .link_label,
									/*.navigation_secondary_level*/ li.box_link.has_grid_text_counter > a .link_label {
									grid-area: label;
								}
/*.navigation_secondary_level*/ li.box_link.has_grid > a .counter,
									/*.navigation_secondary_level*/ li.box_link.has_grid_text_counter > a .counter {
									opacity: 0;
									grid-area: counter;
									position: relative;
									color: var(--gray);
								}
.navigation_secondary_level li.box_link.has_grid > a.active .counter,
.navigation_secondary_level li.box_link.has_grid_text_counter > a.active .counter {
	color: var(--white);
}
.navigation_secondary_level li.box_link.has_grid a:hover .counter,
.navigation_secondary_level li.box_link.has_grid a:active .counter,
.navigation_secondary_level li.box_link.has_grid > a.active .counter,
.navigation_secondary_level li.box_link.has_grid_text_counter a:hover .counter,
.navigation_secondary_level li.box_link.has_grid_text_counter a:active .counter,
.navigation_secondary_level li.box_link.has_grid_text_counter > a.active .counter {
	opacity: 1;
}

/*
.navigation_secondary_level li.box_link.has_popup_link .popup_link_container .popup_link {
display: none;
width: 8px;
height: 16px;
position: absolute;
right: -2px;
top: 1px;
opacity: .6;
}
.navigation_secondary_level li.box_link.has_popup_link a:hover .popup_link_container .popup_link {
display: block;
}
.navigation_secondary_level li.box_link.has_popup_link a:hover .popup_link_container :not(.popup_link) {
visibility: hidden;
}*/
.navigation_secondary_level li.box_link > a .treeview_arrow_unfold {
	fill: var(--dark-color);
	stroke: var(--dark-color);
}
.navigation_secondary_level li.box_link > a label {
	margin:0 !important;
}


.navigation_secondary_level li.box_link > a:hover {
	background: var(--light-gray);
}
.navigation_secondary_level li.box_link > a:active,
.navigation_secondary_level li.box_link > a.active {
	color: var(--white);
	background-color: var(--dark-color);
}
.navigation_secondary_level li.box_link > a:active .treeview_arrow_unfold,
.navigation_secondary_level li.box_link > a.active .treeview_arrow_unfold {
	fill:var(--white);
	stroke:var(--white);
}



/* TODO DELETE IF NOT IN USE */
.navigation_secondary_level li.box_link.has_more:before {
	background: linear-gradient(hsla(340, 20%, 98%, 0), hsl(340, 20%, 98%));
	content: "";
	display: none;
	height: 40px;
	position: absolute;
	width: 100%;
	bottom: 32px;
	pointer-events: none;
	opacity: 1;
}

.navigation_secondary_level .show_hidden_items li.box_link.has_more:before {
	opacity: 0;
}

@keyframes animation_slidedown_show_menus {
	0% {
		opacity: 0;
		transform: scale3d(1,0,1);
		transform-origin: left top;
	}

	100% {
		opacity: 1;
		transform: scale3d(1,1,1);
	}
}

.navigation_secondary_level .show_hidden_items .box_link.hide_link {
	visibility: visible;
	display: list-item;
	animation: animation_slidedown_show_menus .2s 1 forwards;
	animation-delay: 60ms
}


.navigation_secondary_level .box_link.hide_link {
	visibility: hidden;
	opacity: 0;
	display: none;
}

.box_menu .inline_button_action {
	background-size: 14px;
	display: inline-block;
	text-indent: -9999999px;
	float: right;
	width: 16px;
	height: 16px;
	border-radius: 90%;
	position: relative;
	top: -1px;
	opacity: .6;
}

.box_menu .inline_button_action:hover,
.box_menu .inline_button_action:active {
	opacity: 1;
}


/***    /SECONDARY NAVIGATION   ***/


/***    ATTENTION PULSE   ***/
.ui-attention-pulse {
	background: var(--primary-color);
	border-radius: 50%;
	box-shadow: 0 0 0 0 var(--primary-color);
	height: 14px;
	width: 14px;
	transform: scale(1);
	animation: pulse-animate 2s infinite;
	display: inline-block;
}

@keyframes pulse-animate {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 hsla(340, 82%, 52%, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px hsla(340, 82%, 52%, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 hsla(340, 82%, 52%, 0);
	}
}
/***    /ATTENTION PULSE   ***/




.floating_action_bar {
	position: absolute;
	right: 18px;
	bottom: 18px;
	min-width: 52px;
	min-height: 52px;
}

.floating_action_bar .cta_add_item {
	position: absolute;
	right: 0;
	bottom: 0;
}

.floating_action_bar .cta_add_item .cta_item_icon {
	height: 52px;
	width: 52px;
	margin: auto;
	display: block;
	background-color: var(--primary-color);
	padding: 8px;
	background-size: 26px 26px !important;
	border-radius: 90px;
	box-shadow: var(--box-shadow) 0 0 1px, var(--box-shadow) 0 4px 10px;
	cursor: pointer;
}
.floating_action_bar .cta_add_item a.cta_item_icon:hover {
	background-color: var(--primary-color);
}

.floating_action_bar .secondary_actions {
	grid-template-rows: 42px;
	grid-gap: 12px;
	margin-bottom: 12px;
}
.floating_action_bar .secondary_actions .floating_action_button .action_button {
	display: block;
	height: 42px;
	width: 42px;
	margin: auto;
	background-color: var(--dark-color);
	padding: 8px;
	background-size: 20px 20px !important;
	border-radius: 90px;
	box-shadow: var(--box-shadow) 0 0 1px, var(--box-shadow) 0 3px 10px;
}

.floating_action_bar .secondary_actions {
	display: none;
	opacity: 0;
	pointer-events: none;
	/*		transform: scale(.9);*/
}
.floating_action_bar:hover .secondary_actions {
	display: grid;
	pointer-events: all;
	/*		transform: scale(1); */
	animation: animation_slideup_show_secondary_actions .2s 1 forwards;
	animation-delay: 60ms;
}

.floating_action_bar .cta_item_icon.has_poppover {
	cursor: default;
}
.floating_action_bar:hover .cta_item_icon.has_poppover {
	transform: rotate(45deg);
	background-color: var(--dark-color);
}

.floating_action_bar .action_poppover_ctn {
	display: none;
	opacity: 0;
	pointer-events: none;

}
.floating_action_bar:hover .action_poppover_ctn {
	display: block;
	pointer-events: all;
	/* transform: scale(1); */
	animation: animation_slideup_show_secondary_actions .2s 1 forwards;
	animation-delay: 60ms;
}


.floating_action_bar .action_poppover_ctn .ppz_dropdown_ctn {
	z-index: 99999;
	position: relative;
	/* will-change: transform; */
	/* bottom: 90px; */
	right: 0;
	margin-bottom: 60px;
}

@keyframes animation_slideup_show_secondary_actions {
	0% {
		opacity: 0;
		transform: translateY(8px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}







.grid_container {
	padding: 0;
	display: grid;
	/*grid-template-columns: repeat(auto-fill,minmax(250px, 1fr)); SETUP at component level */
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}
@media (prefers-color-scheme: dark) {
	.grid_container .grid_item {
		border: 1px solid var(--medium-gray);
	}
}
.grid_container .grid_item {
	border-top: 2px solid var(--primary-color);
	flex: 1;
	position: relative;
	background: var(--nearly-white);
	/*border: 1px solid #d5cadf;*/
	border-radius: 6px;
	height: 180px;
	flex-direction: column;
	display: flex;
	box-sizing: border-box;
	box-shadow: 0 1px 3px 0 var(--box-shadow), 0 1px 2px 0var(--box-shadow);
	overflow: hidden;
	padding: 12px 14px;
}

.grid_container .grid_item:not(.create_new):hover {
	box-shadow: 0 4px 6px -1px var(--box-shadow), 0 2px 4px -1px var(--box-shadow);
	transform: translateY(-2px);
}

.grid_container .grid_item .poppover_menu {
	z-index: 2;
}

.grid_container .grid_item .poppover_menu > .icon-more-horizontal,
.ppz_table .tr .td > .icon-more-horizontal {
	display: block;
	opacity: 100;
	width: 40px;
	height: 40px;
	border-radius: 90px;
	background-size: 18px;
	background-color: transparent;
	outline: none;
	border: 0 none;
	margin: 0 auto;
}

.grid_container .grid_item:hover .poppover_menu > .icon-more-horizontal,
.grid_container .grid_item .poppover_menu > .icon-more-horizontal:focus,
.ppz_table .tr:hover .td > .icon-more-horizontal,
.ppz_table .tr .td > .icon-more-horizontal:focus
{
	opacity: 1;
}

.grid_container .grid_item .poppover_menu > .icon-more-horizontal:hover,
.grid_container .grid_item .poppover_menu > .icon-more-horizontal:focus,
.ppz_table .tr .td > .icon-more-horizontal:hover,
.ppz_table .tr .td > .icon-more-horizontal:focus {
	background-color: var(--dark-color);
}

.grid_container .grid_item a.hidden_link {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}

.grid_container .grid_item.create_new {
	background-color: hsl(340, 82%, 82%);
	box-shadow: 0 0 0;
}

.grid_container .grid_item.create_new:hover {
	background-color: var(--primary-color);
}

.grid_container .grid_item.create_new .plus_container {
	align-items: center;
	justify-content: center;
}

.grid_container .grid_item.create_new svg {
	width: 24px;
}





.box_header {
	border-bottom: 1px solid #ede9f5;
	/*margin: -20px -20px 20px;*/
	padding: 10px;
}





/****   ICONS  http://iconer.app    ****/


.icon-home { background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>');
			mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>'); }

.icon-sun {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4 4l2 2M18 18l2 2M1 12h2M21 12h2M4 20l2-2M18 6l2-2"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4 4l2 2M18 18l2 2M1 12h2M21 12h2M4 20l2-2M18 6l2-2"/></svg>'); }
.icon-sun.icon-pink, .icon-sun.icon-selected { background: var(--primary-color)}

.icon-todo {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M14 21a2 2 0 01-4 0"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M14 21a2 2 0 01-4 0"/></svg>'); }


.icon-personal-space {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h0M15 9h0"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h0M15 9h0"/></svg>'); }

.icon-reports {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20V10M12 20V4M6 20v-6"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20V10M12 20V4M6 20v-6"/></svg>'); }

.icon-users {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>'); }
.icon-users.icon-pink,
.icon-users.icon-selected {
	background: var(--primary-color) }
.icon-users.icon-white { background: var(--white) }

.icon-calendar {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>'); }
.icon-calendar.icon-pink,
.icon-calendar.icon-selected {
	background: var(--primary-color) }
.icon-calendar.icon-white { background: var(--white) }

.icon-book {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>'); }
.icon-book.icon-pink,
.icon-book.icon-selected {
	background: var(--primary-color) }
.icon-book.icon-white { background: var(--white) }

.icon-fillform {
	background: var(--dark-color);

	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-3"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-3"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>'); }
.icon-fillform.icon-pink,
.icon-fillform.icon-selected {
	background: var(--primary-color) }
.icon-fillform.icon-white { background: var(--white) }

.icon-call {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.9 65.3"><path d="M51.9 19.7c.1 1.8 1 35.1-6.7 44.8a2 2 0 0 1-1.6.8c-.5 0-.9-.2-1.3-.5-.9-.7-1-2-.3-3 5.7-7.1 6.1-32.7 5.8-42.1V17c0-1.2-1-2.2-2.2-2.2-1.2 0-2.2 1-2.2 2.2v14.9a2 2 0 0 1-2.1 2.1 2 2 0 0 1-2.1-2.1V9.4c0-1.2-1-2.2-2.2-2.2s-2.2 1-2.2 2.2V30a2 2 0 0 1-2.1 2.1 2 2 0 0 1-2.1-2.1V6.6c0-1.2-1-2.2-2.2-2.2s-2.2 1-2.2 2.2v26.9a2 2 0 0 1-2.1 2.1 2 2 0 0 1-2.1-2.1V9.4c0-1.2-1-2.2-2.2-2.2-1.2 0-2.2 1-2.2 2.2V44a2 2 0 0 1-1.6 2c-.9.2-1.9-.2-2.4-1L7.4 34.1A2 2 0 0 0 6.1 33c-.5-.1-1 0-1.4.2-.7.4-.7 2-.2 3.7.3.7 6.1 17 12.5 23.3.8.8.8 2.1 0 3a2 2 0 0 1-1.5.6c-.5 0-1.1-.2-1.5-.6C6.8 56.1.9 39 .6 38.3c-1.2-3.7-.4-7 1.9-8.6a6 6 0 0 1 4.7-.8c1.6.4 3 1.5 3.9 3.1l2.3 4V9.2a6.4 6.4 0 0 1 9.3-5.7c1-2.1 3.1-3.5 5.6-3.5S33 1.4 34 3.5a6.4 6.4 0 0 1 9.3 5.7v1.5a6.4 6.4 0 0 1 8.6 6v3zM29.8 64h.2a2 2 0 0 0 2.1-1.9c1.1-11.9-7.3-20.2-7.6-20.5-.8-.8-2.2-.8-3 0-.8.8-.8 2.2 0 3 .1.1 7.3 7.4 6.4 17.3-.1 1 .7 2 1.9 2.1z" fill="%232A2A2A"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.9 65.3"><path d="M51.9 19.7c.1 1.8 1 35.1-6.7 44.8a2 2 0 0 1-1.6.8c-.5 0-.9-.2-1.3-.5-.9-.7-1-2-.3-3 5.7-7.1 6.1-32.7 5.8-42.1V17c0-1.2-1-2.2-2.2-2.2-1.2 0-2.2 1-2.2 2.2v14.9a2 2 0 0 1-2.1 2.1 2 2 0 0 1-2.1-2.1V9.4c0-1.2-1-2.2-2.2-2.2s-2.2 1-2.2 2.2V30a2 2 0 0 1-2.1 2.1 2 2 0 0 1-2.1-2.1V6.6c0-1.2-1-2.2-2.2-2.2s-2.2 1-2.2 2.2v26.9a2 2 0 0 1-2.1 2.1 2 2 0 0 1-2.1-2.1V9.4c0-1.2-1-2.2-2.2-2.2-1.2 0-2.2 1-2.2 2.2V44a2 2 0 0 1-1.6 2c-.9.2-1.9-.2-2.4-1L7.4 34.1A2 2 0 0 0 6.1 33c-.5-.1-1 0-1.4.2-.7.4-.7 2-.2 3.7.3.7 6.1 17 12.5 23.3.8.8.8 2.1 0 3a2 2 0 0 1-1.5.6c-.5 0-1.1-.2-1.5-.6C6.8 56.1.9 39 .6 38.3c-1.2-3.7-.4-7 1.9-8.6a6 6 0 0 1 4.7-.8c1.6.4 3 1.5 3.9 3.1l2.3 4V9.2a6.4 6.4 0 0 1 9.3-5.7c1-2.1 3.1-3.5 5.6-3.5S33 1.4 34 3.5a6.4 6.4 0 0 1 9.3 5.7v1.5a6.4 6.4 0 0 1 8.6 6v3zM29.8 64h.2a2 2 0 0 0 2.1-1.9c1.1-11.9-7.3-20.2-7.6-20.5-.8-.8-2.2-.8-3 0-.8.8-.8 2.2 0 3 .1.1 7.3 7.4 6.4 17.3-.1 1 .7 2 1.9 2.1z" fill="%232A2A2A"/></svg>'); }
.icon-call.icon-pink,
.icon-call.icon-selected {
	background: var(--primary-color) }
.icon-call.icon-white { background: var(--white) }


.icon-file {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>'); }
.icon-file.icon-pink,
.icon-file.icon-selected {
	background: var(--primary-color) }
.icon-file.icon-white { background: var(--white) }

.icon-settings {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>'); }
.icon-setting.icon-pink,
.icon-setting.icon-selected {
	background: var(--primary-color) }
.icon-setting.icon-white { background: var(--white) }

.icon-helpdesk {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke="%232a2a2a" stroke-width="2"><path d="M19 13a2 2 0 01-2 2H5l-4 4V3a2 2 0 012-2h14a2 2 0 012 2v10z"/><path d="M8 6a2 2 0 014 .7c0 1.3-2 2-2 2m0 2.6h0"/></g></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke="%232a2a2a" stroke-width="2"><path d="M19 13a2 2 0 01-2 2H5l-4 4V3a2 2 0 012-2h14a2 2 0 012 2v10z"/><path d="M8 6a2 2 0 014 .7c0 1.3-2 2-2 2m0 2.6h0"/></g></svg>') }
.icon-helpdesk.icon-pink,
.icon-helpdesk.icon-selected {
	background: var(--primary-color) }
.icon-helpdesk.icon-white { background: var(--white) }

.icon-secure {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>') }

.icon-schooling {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>') }

.icon-phone {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 17v3a2 2 0 0 1-2 2 20 20 0 0 1-9-3 20 20 0 0 1-6-6 20 20 0 0 1-3-9 2 2 0 0 1 2-2h3a2 2 0 0 1 2 2 13 13 0 0 0 1 3 2 2 0 0 1-1 2l-1 1a16 16 0 0 0 6 6l1-1a2 2 0 0 1 2-1 13 13 0 0 0 3 1 2 2 0 0 1 2 2z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 17v3a2 2 0 0 1-2 2 20 20 0 0 1-9-3 20 20 0 0 1-6-6 20 20 0 0 1-3-9 2 2 0 0 1 2-2h3a2 2 0 0 1 2 2 13 13 0 0 0 1 3 2 2 0 0 1-1 2l-1 1a16 16 0 0 0 6 6l1-1a2 2 0 0 1 2-1 13 13 0 0 0 3 1 2 2 0 0 1 2 2z"/></svg>') }

.icon-email {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"/></svg>') }
.icon-email.icon-pink,
.icon-email.icon-selected {
	background: var(--primary-color) }
.icon-email.icon-white { background: var(--white) }

.icon-person {
	background: var(--dark-color);

	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>') }
.icon-person.icon-pink,
.icon-person.icon-selected {
	background: var(--primary-color) }
.icon-person.icon-white { background: var(--white) }

.icon-clock {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>') }

.icon-location {
	background: var(--dark-color);

	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>') }

.icon-microphone {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v4M8 23h8"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v4M8 23h8"/></svg>') }

.icon-more-vertical {
	background: var(--dark-color);

	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="9 2 6 20" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="9 2 6 20" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>') }
.icon-more-horizontal {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>') }

.icon-plus {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>') }

.icon-drag-handle {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 38.1 66.2" xml:space="preserve"><path fill="%232a2a2a" d="M16-44c0 5-3 8-8 8s-8-3-8-8c0-4 4-8 8-8s8 4 8 8zM16-19c0 5-3 8-8 8s-8-3-8-8c0-4 4-8 8-8s8 4 8 8zM16 6c0 5-3 8-8 8s-8-3-8-8c0-4 4-8 8-8s8 4 8 8z" transform="translate(0 52)"/><g><path fill="%232a2a2a" d="M38-44c0 5-3 8-8 8s-8-3-8-8c0-4 3-8 8-8s8 4 8 8zM38-19c0 5-3 8-8 8s-8-3-8-8c0-4 3-8 8-8s8 4 8 8zM38 6c0 5-3 8-8 8s-8-3-8-8c0-4 4-8 8-8s8 4 8 8z" transform="translate(0 52)"/></g></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 38.1 66.2" xml:space="preserve"><path fill="%232a2a2a" d="M16-44c0 5-3 8-8 8s-8-3-8-8c0-4 4-8 8-8s8 4 8 8zM16-19c0 5-3 8-8 8s-8-3-8-8c0-4 4-8 8-8s8 4 8 8zM16 6c0 5-3 8-8 8s-8-3-8-8c0-4 4-8 8-8s8 4 8 8z" transform="translate(0 52)"/><g><path fill="%232a2a2a" d="M38-44c0 5-3 8-8 8s-8-3-8-8c0-4 3-8 8-8s8 4 8 8zM38-19c0 5-3 8-8 8s-8-3-8-8c0-4 3-8 8-8s8 4 8 8zM38 6c0 5-3 8-8 8s-8-3-8-8c0-4 4-8 8-8s8 4 8 8z" transform="translate(0 52)"/></g></svg>') }

.icon-edit {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.8 2.8 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.8 2.8 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>') }
.icon-edit.icon-pink,
.icon-edit.icon-selected {
	background: var(--primary-color) }
.icon-edit.icon-white { background: var(--white) }

.icon-search {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4-4"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4-4"/></svg>') }
.icon-search.icon-pink,
.icon-search.icon-selected {
	background: var(--primary-color) }
.icon-search.icon-white { background: var(--white) }


.icon-pedagogical-item {
	background: var(--dark-color);

	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 00-1-1.7l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.7l7 4a2 2 0 002 0l7-4a2 2 0 001-1.7z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 00-1-1.7l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.7l7 4a2 2 0 002 0l7-4a2 2 0 001-1.7z"/></svg>') }
.icon-pedagogical-item.icon-pink,
.icon-pedagogical-item.icon-selected {
	background: var(--primary-color) }
.icon-pedagogical-item.icon-white { background: var(--white) }


.icon-addons {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><path d="M12 8v8M8 12h8"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><path d="M12 8v8M8 12h8"/></svg>');}

.icon-download {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>') }

.icon-camera {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%232a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></svg>') }

.icon-arrow-full {
	background: var(--dark-color);
	mask-position: center;-webkit-mask-position: center;
	mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;

	mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 10 12" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l8 5-8 5z" fill-rule="%232a2a2a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>') }

/****   /ICONS   ****/