@charset "UTF-8";
/* CSS Document */

	/* VARS */
	
	:root {
		--bar: #4e4e4e;
		--color_primary: #171212;
		--color_secondary: #ec4040;
		--color_secondary_darker: #AF1111;
		--color_input:#446298;
		--color_border: #D3D3D3;
		--color_border_darker: #A6A6A5;
		--shade_light: #f0f2f5;
		--shade_medium: #DCE3ED;
		--area_light: #fafafa;
		--cover_page_color:rgba(100,100,100,0.60);
		--cover_page_color: rgba(200,200,200,0.80);
		--text_color: #5c5c5c;
		--text_color_medium: #989898;
		--protected:#ec4040;
		--demo:#333333;
		--header_height:55px;
		--footer_height:55px;
		--form_element_height:40px;
		--language_switcher_item:42px;
		--chapter_fontsize:          4.00rem;
		--chapter_leading:          1.2;
		--title_fontsize:            3.00rem;
		--title_leading:            1.2;
		--subtitle_fontsize:         2.10rem;
		--subtitle_leading:         1.2;
		--big_paragraph_fontsize:    1.50rem;
		--big_paragraph_leading:    1.3;
		--paragraph_fontsize:        1.15rem;
		--paragraph_leading:        1.4;
		--smaller_paragraph_fontsize: 1.05rem;
		--smaller_paragraph_leading: 1.23;
		--small_paragraph_fontsize:  0.95rem;
		--small_paragraph_leading:   1.3;
		--smallest_paragraph_fontsize:  0.85rem;
		--smallest_paragraph_leading:   1.2;
		--banner_title:              Quicksand;
		--banner_title_weight:       600;
		--banner_title_fontsize:    1.8rem;
		--banner_title_leading:   1.2;
		--banner_subtitle:           Quicksand;
		--banner_subtitle_weight:    400;
		--banner_subtitle_fontsize: 1.4rem;
		--banner_subtitle_leading:1.2;
		--button_fontsize: 1.25rem;
		--button_inline_padding: 20px;
		--filter_height: 50px;
		--table_row_height: 50px;
	}

html,body{
	margin: 0;
	padding: 0;
	/* height: 100%; */
	font-family:PublicSans;
	font-weight: 300;
	font-size: 13px;
	line-height: 17px;
}
html {
	overflow-y: auto;
	overflow-y: overlay;
}
* {
	box-sizing: border-box;
}
p, li {
	font-size:   var(--paragraph_fontsize);
	line-height: var(--paragraph_leading);
	user-select: none;
	white-space: normal;
	margin: 0; padding: 0;
}
ul,ol {list-style: none;margin: 0;padding: 0;margin-block:0;margin-inline:0;white-space: nowrap;font-size: 0;line-height: 0;}
ul li,ol li { display: inline-block; vertical-align: top; list-style: none; margin: 0; padding: 0; white-space: normal; }
a { color: inherit; text-decoration:none; user-select: none; }
i, em { font-style: normal; }
figure {background-position: top center;background-repeat: no-repeat;background-size: contain;background-attachment: scroll;margin: 0;padding: 0;}
h1,h2,h3,h4,h5,h6 {font-family:PublicSans;font-weight:700;font-size: 1.5rem;line-height: 1.2;margin: 0 0 5px 0;padding: 0;user-select: none;margin-block-start:0;margin-block-end: 0;margin-inline-start: 0;margin-inline-end: 0;}
h1 { font-weight:700 }
h2 { font-weight:400 }
h3 {}
h4 {}
h5 {}
h6 {}
p { font-weight: 300; color: var(--color_primary);}
p b, p strong { font-weight: 600; }
p > a, em > a { color: inherit; display: inline-block; position: relative; }
p > a:before, em > a:before { content:""; display: block; position: absolute; bottom:-2px; height: 2px; left:0px; width: 100%; background-color: var(--color_border); transition:all .5s ease; }
p > a:hover:before, em > a:hover:before { opacity: 1; background-color: var(--color_secondary); left: -5px; width: calc(100% + 10px); }

code { position: relative; z-index: 999999; text-shadow:0 0 1px white;}

table span.cell { user-select:none; cursor:default; }

/* formatting texts */

.simple-pre-formatted {
	white-space: pre-line;
}
		

	
	
	/*							*/
	/*							*/
	/* 			SHARED 			*/
	/*							*/
	/*							*/

		.container {
			display: flex;
			flex-direction: column;
			min-height: 100%;
			background-color: rgba(239,239,145,1.00);
			background-color: transparent;
		}
		.mirror {
			background-color: salmon;
			background-color: transparent;
		}
		.mirror.inner {
			width: 576px;
		}
		.mirror.outer {
		/* transform: translateX(-50%); */
		/* left: 50%; */
		/* position: relative; */
		/* min-height: 100%; */
		}
		
		html[data-lgn="1"] .public  { display:none; }
		html[data-lgn="0"] .private { display:none; }
		
		.contents {
			white-space: normal;
			width: inherit;
		}
		
		.space {
			display: block;
			width: 100%;
			clear: both;
		}
		.space[data-size="tiny"  ] { height: 10px; }
		.space[data-size="small" ] { height: 15px; }
		.space[data-size="medium"] { height: 30px; }
		.space[data-size="big"   ] { height: 45px; }
		.space[data-size="large" ] { height: 60px; }
		



	/* STRUCTURE */

		.header-placeholder,
		.footer-placeholder {
			width: 100%;
			height: 54px;
		}
		.block-indented {}
		.block-indented[data-side="both"] { padding-inline:80px; }
		.gap {}
		.gap[data-size="tiny"  ] { padding-top: 10px; }
		.gap[data-size="small" ] { padding-top: 20px; }
		.gap[data-size="medium"] { padding-top: 40px; }
		.gap[data-size="big"   ] { padding-top: 60px; }
		
		.mirror.inner h1 { margin-bottom: 10px; }
		.mirror.inner h2 { margin-bottom:  5px; }
		
		
		
		
		/* Progress */
		
		.progress {
			position: fixed;
			z-index: 10000;
			width: 100vw;
			height: 100vh;
		}
		.progress .pagecover {
			position: fixed;
			width: 100vw;
			height: 100vh;
			visibility: visible;
			pointer-events: all;
			opacity: 1;
			transition: opacity .2s ease, visibility 0s linear 0s;
			pointer-events: none;
		}
		html[data-prg="1"] .progress .pagecover {
			background-color: var(--cover_page_color);
			backdrop-filter: blur(3px);
		}
		html[data-prg="1"] .progress .pagecover {
			pointer-events: none;
		}
		html[data-prg="1"] * { pointer-events: none; }
		html[data-prg="2"] * { pointer-events: none; }
		
		
		.progress i {
			display: block;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50px,-50px);
			width: 100px;
			height: 100px;
			background-image: url("../../images/progress/negative/spinner-1.svg");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: contain;
			border-radius: 100px;
		}
		@keyframes rotate {
			0% { transform: rotate(0deg); }
		  100% { transform: rotate(360deg); }
		}
		.progress em {}
		
		/* states */

		html               .progress {display: none;}
		html[data-prg="1"] .progress { display: block!important; }
		html[data-prg="2"] .progress {/* display: block!important; */}
		html[data-prg="1"] { cursor: default; }
		html[data-prg="1"] .progress i { animation: rotate 1s infinite linear; animation-timing-function: steps(12, start); }
		
			
		
		
		
		
	/*							*/
	/*							*/
	/* 			COLUMNS 		*/
	/*							*/
	/*							*/
	
	
		.columns {
			display: flex;
			width: 100%;
		}
		.columns .column {
			flex-direction: row;
			gap:0;
		}
		.columns .column[data-label="left"] > .mirror.inner {
			position: -webkit-sticky;
			position: sticky;
			/* margin-top: -100px; */
			top: 75px;
		}
		.columns .column .mirror.inner {
			margin-inline: 20px;
			margin-block: 20px;
		}
		
		.columns .column:nth-child(1) {}
		.columns .column:nth-child(2) {}
		.columns .column:nth-child(3) {}
		
		.columns[data-template="1/1"] {
			.column:nth-child(1),
			.column:nth-child(2) { width: 50%;}
		}
		.columns[data-template="1/2"] {
			.column:nth-child(1) { width: 33.333%;}
			.column:nth-child(2) { width: 66.667%;}
		}
		.columns[data-template="1/3"] {
			.column:nth-child(1) { width: 25%;}
			.column:nth-child(2) { width: 75%;}
		}
		.columns[data-template="1/4"] {
			.column:nth-child(1) { width: 20%;}
			.column:nth-child(2) { width: 80%;}
			
			.column:nth-child(1) {background-color:white;}
			.column:nth-child(2) { background-color:var(--area_light); }
		}
		
		.column[data-label="content"] {
			min-height: calc(100vh - 110px);
			/* position: relative; */
		}
		.column[data-label="content"]:before {
			content: "";
			position: fixed;
			z-index: -1;
			width: 100vw;
			height: 120vh;
			background-color:inherit;
			top: -20vh;
		}


	/*							*/
	/*							*/
	/* 			HEADER 			*/
	/*							*/
	/*							*/

		header {
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			left:0;
			top:0;
			right:0;
			height: var(--header_height);
			opacity: 0.95;
			backdrop-filter: blur(3px);
		}
		header .mirror {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
		}
		header .mirror .component[data-component="header-info-bar"]{
			width: 100%;
			width: auto;
		}
		#tbr h1 {
			font-family: Quicksand;
			font-weight: 400;
			font-size: 1.35rem;
			/* font-size:var(--chapter_fontsize); */
			/* line-height:var(--chapter_leading); */
			/* font-size:var(--title_fontsize); */
			/* line-height:var(--title_leading); */
			/* font-size:var(--subtitle_fontsize); */
			/* line-height:var(--subtitle_leading); */
			font-size:var(--big_paragraph_fontsize);
			line-height:var(--big_paragraph_leading);
		}
		
		
		/* states */
		
		html[data-lgn="0"] header { background-color:var(--bar); }
		html[data-lgn="1"] header {background-color:white;box-shadow: 0 1px 8px 0 rgba(0,0,0,0.15);}
		
		
	/*							*/
	/*							*/
	/* 		FIXED MENU 			*/
	/*							*/
	/*							*/
	
		header .blocks .fixed-menu ul {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			align-content: stretch;
			color: white;
			column-gap:15px;
			color: white;
		}
		header .blocks .fixed-menu ul li {
			display: inline-flex;
		}
		header .blocks .fixed-menu ul li span ~ a {
			margin-left: 0.25em;
		}
	
	
	/*								*/
	/*								*/
	/* 		MAIN MENU 				*/
	/* 		LANGUAGE CHOOSER ADMIN 	*/
	/*								*/
	/*		not logged 				*/
	/*								*/
	/*								*/
	
		header .blocks .main-menu {
			position: fixed;
			left: 0px;
			top:  0px;
			width:  55px;
			height: 55px;
		}
		header .blocks .main-menu-backdrop {
			position: fixed;
			inset:0;
			background-color: var(--cover_page_color);
			display: block;
			height: 0;
			opacity: 0;
			z-index: 100;
			overflow: hidden;
		}
		html[data-mnu="1"] header .blocks .main-menu-backdrop {
			display: block;
			height: 100vh;
			opacity: 1;
			backdrop-filter:blur(1px);
			transition: opacity .2s ease, visibility 0s linear 0s;
		}
		
		header .blocks .main-menu a.toggle {
			display: block;
			position: absolute;
			z-index: 102;
			inset:0;
			background-color: var(--bar);
			transition: background-color 0.3s ease;
		}
		header .blocks .main-menu a.toggle:hover {
			background-color: var(--color_secondary);
		}
		header .blocks .main-menu a.toggle i {
			display: block;
			width: 100%;
			height: 100%;
			background-image: url("../../images/assets/negative/menu.svg");
			background-size: 35px 35px;
			background-repeat: no-repeat;
			background-position: center center;
		}
		header .blocks .main-menu > .placeholder {
			display: block;
			z-index: 101;
			position: absolute;
			padding: 55px  50px  50px 0;
			margin: -55px -50px -50px 0;
			background-color: chartreuse;
			background-color: transparent;
			top: 55px;
			display: none;
			flex-direction: row;
		}
		
		header .blocks .main-menu > .placeholder > .menu-group {
			display: flex;
		}
		
		html[data-mnu="1"] header .blocks .main-menu > .placeholder {
			display: block;
			display: flex;
		}
		header .blocks .main-menu > .placeholder > .menu-group ul {
			position: relative;
			z-index: 1;
			color: black;
			color: white;
			padding: 15px;
			/* border-bottom-right-radius: 3px; */
		}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group ul { color: black; }
		                   header .blocks .main-menu > .placeholder .menu-group:nth-child(1) { background-color: var(--bar); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder .menu-group:nth-child(1) { background-color: white; box-shadow: 0 1px 10px 0 rgba(0,0,0,0.3); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;  }
		                   header .blocks .main-menu > .placeholder .menu-group:nth-child(2) {background-color: var(--color_primary);box-shadow: 0 1px 0 1px var(--text_color);}
		                   header .blocks .main-menu > .placeholder .menu-group:nth-child(3) {background-color: var(--color_primary);box-shadow: 0 1px 0 1px var(--text_color);}
		                   header .blocks .main-menu > .placeholder .menu-group:nth-child(4) {background-color: var(--color_primary);box-shadow: 0 1px 0 1px var(--text_color);}
		                   header .blocks .main-menu > .placeholder .menu-group:nth-child(5) { background-color: var(--color_primary); }
		
		header .blocks .main-menu > .placeholder > .menu-group > ul li {
			display: block;
			white-space: nowrap;
		}
		header .blocks .main-menu > .placeholder > .menu-group > ul li a {
			display: block;
			padding: 5px 15px;
			border-radius: 3px;
		}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li a {
			padding: 10px 25px;
		}
		header .blocks .main-menu > .placeholder > .menu-group > ul li a:hover {
			background-color: var(--color_secondary);
		}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group ul li a:hover { color: white; }
		
		header .blocks .main-menu > .placeholder > .menu-group > ul li a i {
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
			display: block;
			position: relative;
			width:       25px;
			height:      25px;
			margin: 0 0 -25px 0;
			left: -5px;
			top: -2px;
		}
		header .blocks .main-menu > .placeholder > .menu-group > ul li a em {
			display: block;
			margin: 0 0 0 26px;
		}
		header .blocks .main-menu > .placeholder > .menu-group > ul li a span {
			display: block;
			font-weight: 200;
			margin: 0 0 0 26px;
			font-size: 0.7em;
			opacity: 0.75;
			white-space: normal;
			line-height: 1.2;
		}
		header .blocks .main-menu > .placeholder > .menu-group > ul li a span { display:none; }
		header .blocks .main-menu > .placeholder > .menu-group > ul li a span:not(:empty) { min-width: 200px; }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="home"                        ] a i { background-image: url("../../images/assets/negative/home.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="login"                       ] a i { background-image: url("../../images/assets/negative/login.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="logout"                      ] a i { background-image: url("../../images/assets/negative/logout.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="dashboard"                   ] a i { background-image: url("../../images/assets/negative/dashboard.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="registration"                ] a i { background-image: url("../../images/assets/negative/registration.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="contact-us"                  ] a i { background-image: url("../../images/assets/negative/contact-us.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="impressum"                   ] a i { background-image: url("../../images/assets/negative/impressum.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="privacy-policy"              ] a i { background-image: url("../../images/assets/negative/privacy-policy.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="general-terms-and-conditions"] a i { background-image: url("../../images/assets/negative/general-terms-and-conditions.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="age-groups"                  ] a i { background-image: url("../../images/assets/positive/age-group.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="banners"                     ] a i { background-image: url("../../images/assets/positive/ad.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="classes"                     ] a i { background-image: url("../../images/assets/positive/my-classes.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="contact-us"                  ] a i { background-image: url("../../images/assets/positive/contact-us.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="dashboard"                   ] a i { background-image: url("../../images/assets/positive/dashboard.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="families"                    ] a i { background-image: url("../../images/assets/positive/product-family.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="files"                       ] a i { background-image: url("../../images/assets/positive/files.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="general-terms-and-conditions"] a i { background-image: url("../../images/assets/positive/general-terms-and-conditions.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="groups"                      ] a i { background-image: url("../../images/assets/positive/product-group.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="help"                        ] a i { background-image: url("../../images/assets/positive/help.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="home"                        ] a i { background-image: url("../../images/assets/positive/home.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="impressum"                   ] a i { background-image: url("../../images/assets/positive/impressum.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="login"                       ] a i { background-image: url("../../images/assets/positive/login.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="logout"                      ] a i { background-image: url("../../images/assets/positive/logout.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="material-types"              ] a i { background-image: url("../../images/assets/positive/material-type.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="pages"                       ] a i { background-image: url("../../images/assets/positive/page.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="email-templates"             ] a i { background-image: url("../../images/assets/positive/email-template.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="access-and-restrictions"     ] a i { background-image: url("../../images/assets/positive/codes.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="bundle-codes"                ] a i { background-image: url("../../images/assets/positive/bundle-codes.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="privacy-policy"              ] a i { background-image: url("../../images/assets/positive/privacy-policy.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="products"                    ] a i { background-image: url("../../images/assets/positive/products.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="product-types"               ] a i { background-image: url("../../images/assets/positive/grid.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="file-types"                  ] a i { background-image: url("../../images/assets/positive/file.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="registration"                ] a i { background-image: url("../../images/assets/positive/registration.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="schools"                     ] a i { background-image: url("../../images/assets/positive/school.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="translations"                ] a i { background-image: url("../../images/assets/positive/registration.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="types"                       ] a i { background-image: url("../../images/assets/positive/products.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="uploads"                     ] a i { background-image: url("../../images/assets/positive/uploads.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user"                        ] a i { background-image: url("../../images/assets/positive/user.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="users"                       ] a i { background-image: url("../../images/assets/positive/users.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-has-codes"              ] a i { background-image: url("../../images/assets/positive/user-has-codes.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-roles"                  ] a i { background-image: url("../../images/assets/positive/user-roles.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-dashboard"             ] a i { background-image: url("../../images/assets/positive/menu4.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-settings"              ] a i { background-image: url("../../images/assets/positive/grid.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-pages"                 ] a i { background-image: url("../../images/assets/positive/page.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-schools"               ] a i { background-image: url("../../images/assets/positive/school.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-fields"                ] a i { background-image: url("../../images/assets/positive/school.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-joins"                 ] a i { background-image: url("../../images/assets/positive/school.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-editor_section"        ] a i { background-image: url("../../images/assets/positive/files.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-editor_group"          ] a i { background-image: url("../../images/assets/positive/school.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-editor_fields"         ] a i { background-image: url("../../images/assets/positive/school.svg"); }

		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="home"                        ] a i { background-image: url("../../images/assets/negative/home.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="login"                       ] a i { background-image: url("../../images/assets/negative/login.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="logout"                      ] a i { background-image: url("../../images/assets/negative/logout.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="dashboard"                   ] a i { background-image: url("../../images/assets/negative/dashboard.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="registration"                ] a i { background-image: url("../../images/assets/negative/registration.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="contact-us"                  ] a i { background-image: url("../../images/assets/negative/contact-us.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="impressum"                   ] a i { background-image: url("../../images/assets/negative/impressum.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="privacy-policy"              ] a i { background-image: url("../../images/assets/negative/privacy-policy.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="general-terms-and-conditions"] a i { background-image: url("../../images/assets/negative/general-terms-and-conditions.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="age-groups"                  ] a i { background-image: url("../../images/assets/negative/age-group.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="banners"                     ] a i { background-image: url("../../images/assets/negative/ad.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="classes"                     ] a i { background-image: url("../../images/assets/negative/my-classes.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="contact-us"                  ] a i { background-image: url("../../images/assets/negative/contact-us.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="dashboard"                   ] a i { background-image: url("../../images/assets/negative/dashboard.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="families"                    ] a i { background-image: url("../../images/assets/negative/product-family.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="files"                       ] a i { background-image: url("../../images/assets/negative/files.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="general-terms-and-conditions"] a i { background-image: url("../../images/assets/negative/general-terms-and-conditions.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="groups"                      ] a i { background-image: url("../../images/assets/negative/product-group.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="help"                        ] a i { background-image: url("../../images/assets/negative/help.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="home"                        ] a i { background-image: url("../../images/assets/negative/home.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="impressum"                   ] a i { background-image: url("../../images/assets/negative/impressum.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="login"                       ] a i { background-image: url("../../images/assets/negative/login.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="logout"                      ] a i { background-image: url("../../images/assets/negative/logout.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="material-types"              ] a i { background-image: url("../../images/assets/negative/material-type.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="pages"                       ] a i { background-image: url("../../images/assets/negative/page.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="email-templates"             ] a i { background-image: url("../../images/assets/negative/email-template.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="access-and-restrictions"     ] a i { background-image: url("../../images/assets/negative/codes.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="bundle-codes"                ] a i { background-image: url("../../images/assets/negative/bundle-codes.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="privacy-policy"              ] a i { background-image: url("../../images/assets/negative/privacy-policy.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="products"                    ] a i { background-image: url("../../images/assets/negative/products.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="product-types"               ] a i { background-image: url("../../images/assets/negative/grid.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="file-types"                  ] a i { background-image: url("../../images/assets/negative/file.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="registration"                ] a i { background-image: url("../../images/assets/negative/registration.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="schools"                     ] a i { background-image: url("../../images/assets/negative/school.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="translations"                ] a i { background-image: url("../../images/assets/negative/registration.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="types"                       ] a i { background-image: url("../../images/assets/negative/products.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="uploads"                     ] a i { background-image: url("../../images/assets/negative/uploads.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user"                        ] a i { background-image: url("../../images/assets/negative/user.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="users"                       ] a i { background-image: url("../../images/assets/negative/users.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-has-codes"              ] a i { background-image: url("../../images/assets/negative/user-has-codes.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-roles"                  ] a i { background-image: url("../../images/assets/negative/user-roles.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-dashboard"             ] a i { background-image: url("../../images/assets/negative/menu4.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-settings"              ] a i { background-image: url("../../images/assets/negative/grid.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-pages"                 ] a i { background-image: url("../../images/assets/negative/page.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-schools"               ] a i { background-image: url("../../images/assets/negative/school.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-fields"                ] a i { background-image: url("../../images/assets/negative/school.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-joins"                 ] a i { background-image: url("../../images/assets/negative/school.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-editor_section"        ] a i { background-image: url("../../images/assets/negative/files.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-editor_group"          ] a i { background-image: url("../../images/assets/negative/school.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-editor_fields"         ] a i { background-image: url("../../images/assets/negative/school.svg"); }

		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="products"                    ] a i { background-image: url("../../images/assets/negative/products.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="classes"                     ] a i { background-image: url("../../images/assets/negative/classes.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="types"                       ] a i { background-image: url("../../images/assets/negative/products.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="help"                        ] a i { background-image: url("../../images/assets/negative/help.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="uploads"                     ] a i { background-image: url("../../images/assets/negative/uploads.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="users"                       ] a i { background-image: url("../../images/assets/negative/users.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-roles"                  ] a i { background-image: url("../../images/assets/negative/user-roles.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-roles"                  ] a i { background-image: url("../../images/assets/negative/user-roles.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="age-groups"                  ] a i { background-image: url("../../images/assets/negative/age-group.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="levels"                      ] a i { background-image: url("../../images/assets/negative/menu3.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="banners"                     ] a i { background-image: url("../../images/assets/negative/ad.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="my-classes"                  ] a i { background-image: url("../../images/assets/negative/my-classes.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="contact-us"                  ] a i { background-image: url("../../images/assets/negative/contact-us.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="curriculum"                  ] a i { background-image: url("../../images/assets/negative/curriculum.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="dashboard"                   ] a i { background-image: url("../../images/assets/negative/dashboard.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="families"                    ] a i { background-image: url("../../images/assets/negative/product-family.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="files"                       ] a i { background-image: url("../../images/assets/negative/files.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="general-terms-and-conditions"] a i { background-image: url("../../images/assets/negative/general-terms-and-conditions.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="product-groups"              ] a i { background-image: url("../../images/assets/negative/product-group.svg");}
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="groups"                      ] a i { background-image: url("../../images/assets/negative/product-group.svg");}
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="help"                        ] a i { background-image: url("../../images/assets/negative/help.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="home"                        ] a i { background-image: url("../../images/assets/negative/home.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="impressum"                   ] a i { background-image: url("../../images/assets/negative/impressum.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="login"                       ] a i { background-image: url("../../images/assets/negative/login.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="logout"                      ] a i { background-image: url("../../images/assets/negative/logout.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="material-types"              ] a i { background-image: url("../../images/assets/negative/material-type.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="material-bank"               ] a i { background-image: url("../../images/assets/negative/material-bank.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="menus"                       ] a i { background-image: url("../../images/assets/negative/menu4.svg");}
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="pages"                       ] a i { background-image: url("../../images/assets/negative/page.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="email-templates"             ] a i { background-image: url("../../images/assets/negative/email-template.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="access-and-restrictions"     ] a i { background-image: url("../../images/assets/negative/codes.svg");}
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="bundle-codes"                ] a i { background-image: url("../../images/assets/negative/bundle-codes.svg");}
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="privacy-policy"              ] a i { background-image: url("../../images/assets/negative/privacy-policy.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="books"                       ] a i { background-image: url("../../images/assets/negative/products.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="products"                    ] a i { background-image: url("../../images/assets/negative/products.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="product-types"               ] a i { background-image: url("../../images/assets/negative/grid.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="product-families"            ] a i { background-image: url("../../images/assets/negative/product-family.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="file-types"                  ] a i { background-image: url("../../images/assets/negative/files.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="registration"                ] a i { background-image: url("../../images/assets/negative/registration.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="uploads"                     ] a i { background-image: url("../../images/assets/negative/uploads.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="schools"                     ] a i { background-image: url("../../images/assets/negative/school.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="countries"                   ] a i { background-image: url("../../images/assets/negative/material-bank.svg");}
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="countries_groups"            ] a i { background-image: url("../../images/assets/negative/grid.svg");}
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="languages"                   ] a i { background-image: url("../../images/assets/negative/translations.svg");}
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="translations"                ] a i { background-image: url("../../images/assets/negative/translations.svg");}
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="types"                       ] a i { background-image: url("../../images/assets/negative/products.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user"                        ] a i { background-image: url("../../images/assets/negative/user.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="users"                       ] a i { background-image: url("../../images/assets/negative/users.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-has-codes"              ] a i { background-image: url("../../images/assets/negative/user-has-codes.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-roles"                  ] a i { background-image: url("../../images/assets/negative/user-roles.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-dashboard"             ] a i { background-image: url("../../images/assets/negative/menu4.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-settings"              ] a i { background-image: url("../../images/assets/negative/grid.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-pages"                 ] a i { background-image: url("../../images/assets/negative/page.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-schools"               ] a i { background-image: url("../../images/assets/negative/school.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-fields"                ] a i { background-image: url("../../images/assets/negative/grid.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-joins"                 ] a i { background-image: url("../../images/assets/negative/link.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-editor_section"        ] a i { background-image: url("../../images/assets/negative/files.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-editor_group"          ] a i { background-image: url("../../images/assets/negative/group.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-editor_fields"         ] a i { background-image: url("../../images/assets/negative/dashboard.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="import-settings"             ] a i { background-image: url("../../images/assets/negative/import.svg"); }
		header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="export-settings"             ] a i { background-image: url("../../images/assets/negative/export.svg"); }
		
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="products"                    ] a i { background-image: url("../../images/assets/positive/products.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="classes"                     ] a i { background-image: url("../../images/assets/positive/my-classes.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="types"                       ] a i { background-image: url("../../images/assets/positive/products.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="help"                        ] a i { background-image: url("../../images/assets/positive/help.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="uploads"                     ] a i { background-image: url("../../images/assets/positive/uploads.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="users"                       ] a i { background-image: url("../../images/assets/positive/users.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-roles"                  ] a i { background-image: url("../../images/assets/positive/user-roles.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-roles"                  ] a i { background-image: url("../../images/assets/positive/user-roles.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="age-groups"                  ] a i { background-image: url("../../images/assets/positive/age-group.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="levels"                      ] a i { background-image: url("../../images/assets/positive/menu3.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="banners"                     ] a i { background-image: url("../../images/assets/positive/ad.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="classes"                     ] a i { background-image: url("../../images/assets/positive/my-classes.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="contact-us"                  ] a i { background-image: url("../../images/assets/positive/contact-us.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="curriculum"                  ] a i { background-image: url("../../images/assets/positive/curriculum.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="dashboard"                   ] a i { background-image: url("../../images/assets/positive/dashboard.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="families"                    ] a i { background-image: url("../../images/assets/positive/product-family.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="files"                       ] a i { background-image: url("../../images/assets/positive/files.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="general-terms-and-conditions"] a i { background-image: url("../../images/assets/positive/general-terms-and-conditions.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="product-groups"              ] a i { background-image: url("../../images/assets/positive/product-group.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="groups"                      ] a i { background-image: url("../../images/assets/positive/product-group.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="help"                        ] a i { background-image: url("../../images/assets/positive/help.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="home"                        ] a i { background-image: url("../../images/assets/positive/home.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="impressum"                   ] a i { background-image: url("../../images/assets/positive/impressum.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="login"                       ] a i { background-image: url("../../images/assets/positive/login.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="logout"                      ] a i { background-image: url("../../images/assets/positive/logout.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="material-types"              ] a i { background-image: url("../../images/assets/positive/material-type.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="material-bank"               ] a i { background-image: url("../../images/assets/positive/material-bank.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="menus"                       ] a i { background-image: url("../../images/assets/positive/menu4.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="pages"                       ] a i { background-image: url("../../images/assets/positive/page.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="email-templates"             ] a i { background-image: url("../../images/assets/positive/email-template.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="access-and-restrictions"     ] a i { background-image: url("../../images/assets/positive/codes.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="bundle-codes"                ] a i { background-image: url("../../images/assets/positive/codes.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="privacy-policy"              ] a i { background-image: url("../../images/assets/positive/privacy-policy.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="books"                       ] a i { background-image: url("../../images/assets/positive/products.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="products"                    ] a i { background-image: url("../../images/assets/positive/products.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="product-types"               ] a i { background-image: url("../../images/assets/positive/grid.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="product-families"            ] a i { background-image: url("../../images/assets/positive/product-family.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="file-types"                  ] a i { background-image: url("../../images/assets/positive/files.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="registration"                ] a i { background-image: url("../../images/assets/positive/registration.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="uploads"                     ] a i { background-image: url("../../images/assets/positive/uploads.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="schools"                     ] a i { background-image: url("../../images/assets/positive/school.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="countries"                   ] a i { background-image: url("../../images/assets/positive/material-bank.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="countries_groups"            ] a i { background-image: url("../../images/assets/positive/grid.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="languages"                   ] a i { background-image: url("../../images/assets/positive/translations.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="translations"                ] a i { background-image: url("../../images/assets/positive/translations.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="types"                       ] a i { background-image: url("../../images/assets/positive/products.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user"                        ] a i { background-image: url("../../images/assets/positive/user.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="users"                       ] a i { background-image: url("../../images/assets/positive/users.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-has-codes"              ] a i { background-image: url("../../images/assets/positive/user-has-codes.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-roles"                  ] a i { background-image: url("../../images/assets/positive/user-roles.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-dashboard"             ] a i { background-image: url("../../images/assets/positive/menu4.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-settings"              ] a i { background-image: url("../../images/assets/positive/grid.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-pages"                 ] a i { background-image: url("../../images/assets/positive/page.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-schools"               ] a i { background-image: url("../../images/assets/positive/school.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-fields"                ] a i { background-image: url("../../images/assets/positive/grid.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-joins"                 ] a i { background-image: url("../../images/assets/positive/link.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-editor_section"        ] a i { background-image: url("../../images/assets/positive/files.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-editor_group"          ] a i { background-image: url("../../images/assets/positive/group.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-editor_fields"         ] a i { background-image: url("../../images/assets/positive/dashboard.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="import-settings"             ] a i { background-image: url("../../images/assets/positive/import.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="export-settings"             ] a i { background-image: url("../../images/assets/positive/export.svg"); }

		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="products"                    ] a:hover i { background-image: url("../../images/assets/negative/products.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="classes"                     ] a:hover i { background-image: url("../../images/assets/negative/my-classes.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="types"                       ] a:hover i { background-image: url("../../images/assets/negative/products.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="help"                        ] a:hover i { background-image: url("../../images/assets/negative/help.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="uploads"                     ] a:hover i { background-image: url("../../images/assets/negative/uploads.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="users"                       ] a:hover i { background-image: url("../../images/assets/negative/users.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-roles"                  ] a:hover i { background-image: url("../../images/assets/negative/user-roles.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-roles"                  ] a:hover i { background-image: url("../../images/assets/negative/user-roles.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="age-groups"                  ] a:hover i { background-image: url("../../images/assets/negative/age-group.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="levels"                      ] a:hover i { background-image: url("../../images/assets/negative/menu3.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="banners"                     ] a:hover i { background-image: url("../../images/assets/negative/ad.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="classes"                     ] a:hover i { background-image: url("../../images/assets/negative/my-classes.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="contact-us"                  ] a:hover i { background-image: url("../../images/assets/negative/contact-us.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="curriculum"                  ] a:hover i { background-image: url("../../images/assets/negative/curriculum.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="dashboard"                   ] a:hover i { background-image: url("../../images/assets/negative/dashboard.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="families"                    ] a:hover i { background-image: url("../../images/assets/negative/product-family.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="files"                       ] a:hover i { background-image: url("../../images/assets/negative/files.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="general-terms-and-conditions"] a:hover i { background-image: url("../../images/assets/negative/general-terms-and-conditions.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="product-groups"              ] a:hover i { background-image: url("../../images/assets/negative/product-group.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="groups"                      ] a:hover i { background-image: url("../../images/assets/negative/product-group.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="help"                        ] a:hover i { background-image: url("../../images/assets/negative/help.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="home"                        ] a:hover i { background-image: url("../../images/assets/negative/home.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="impressum"                   ] a:hover i { background-image: url("../../images/assets/negative/impressum.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="login"                       ] a:hover i { background-image: url("../../images/assets/negative/login.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="logout"                      ] a:hover i { background-image: url("../../images/assets/negative/logout.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="material-types"              ] a:hover i { background-image: url("../../images/assets/negative/material-type.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="material-bank"               ] a:hover i { background-image: url("../../images/assets/negative/material-bank.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="menus"                       ] a:hover i { background-image: url("../../images/assets/negative/menu4.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="pages"                       ] a:hover i { background-image: url("../../images/assets/negative/page.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="email-templates"             ] a:hover i { background-image: url("../../images/assets/negative/email-template.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="access-and-restrictions"     ] a:hover i { background-image: url("../../images/assets/negative/codes.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="bundle-codes"                ] a:hover i { background-image: url("../../images/assets/negative/codes.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="privacy-policy"              ] a:hover i { background-image: url("../../images/assets/negative/privacy-policy.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="books"                       ] a:hover i { background-image: url("../../images/assets/negative/products.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="products"                    ] a:hover i { background-image: url("../../images/assets/negative/products.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="product-types"               ] a:hover i { background-image: url("../../images/assets/negative/grid.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="product-families"            ] a:hover i { background-image: url("../../images/assets/negative/product-family.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="file-types"                  ] a:hover i { background-image: url("../../images/assets/negative/files.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="registration"                ] a:hover i { background-image: url("../../images/assets/negative/registration.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="uploads"                     ] a:hover i { background-image: url("../../images/assets/negative/uploads.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="schools"                     ] a:hover i { background-image: url("../../images/assets/negative/school.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="countries"                   ] a:hover i { background-image: url("../../images/assets/negative/material-bank.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="countries_groups"            ] a:hover i { background-image: url("../../images/assets/negative/grid.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="languages"                   ] a:hover i { background-image: url("../../images/assets/negative/translations.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="translations"                ] a:hover i { background-image: url("../../images/assets/negative/translations.svg");}
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="types"                       ] a:hover i { background-image: url("../../images/assets/negative/products.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user"                        ] a:hover i { background-image: url("../../images/assets/negative/user.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="users"                       ] a:hover i { background-image: url("../../images/assets/negative/users.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-has-codes"              ] a:hover i { background-image: url("../../images/assets/negative/user-has-codes.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="user-roles"                  ] a:hover i { background-image: url("../../images/assets/negative/user-roles.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-dashboard"             ] a:hover i { background-image: url("../../images/assets/negative/menu4.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-settings"              ] a:hover i { background-image: url("../../images/assets/negative/grid.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-pages"                 ] a:hover i { background-image: url("../../images/assets/negative/page.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-schools"               ] a:hover i { background-image: url("../../images/assets/negative/school.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-fields"                ] a:hover i { background-image: url("../../images/assets/negative/grid.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-joins"                 ] a:hover i { background-image: url("../../images/assets/negative/link.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-editor_section"        ] a:hover i { background-image: url("../../images/assets/negative/files.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-editor_group"          ] a:hover i { background-image: url("../../images/assets/negative/group.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="admin-editor_fields"         ] a:hover i { background-image: url("../../images/assets/negative/dashboard.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="import-settings"             ] a:hover i { background-image: url("../../images/assets/negative/import.svg"); }
		html[data-adm="0"] header .blocks .main-menu > .placeholder > .menu-group > ul li[data-label="export-settings"             ] a:hover i { background-image: url("../../images/assets/negative/export.svg"); }

		
		
		/* states */
		
			html[data-lgn="1"] header .blocks .main-menu a.toggle { background-color: white; }
			html[data-lgn="1"] header .blocks .main-menu a.toggle i {background-image: url("../../images/assets/color/menu.svg");}

			                   header .blocks .main-menu > .placeholder { display:none; }
			html[data-lgn="1"][data-mnu="1"]               header .blocks .main-menu a.toggle i { background-color: var(--bar); }
			html[data-lgn="1"][data-adm="0"][data-mnu="1"] header .blocks .main-menu a.toggle i { background-color: white; }
			html[data-mnu="1"]               header .blocks .main-menu a.toggle i { background-image: url("../../images/assets/negative/clear.svg"); }
			html[data-mnu="1"][data-adm="0"] header .blocks .main-menu a.toggle i { background-image: url("../../images/assets/positive/clear.svg"); }
			html[data-mnu="1"] header .blocks .main-menu > .placeholder {
				display: block;
				display: flex;
			}


		/*							*/
		/*		Admin languages		*/
		/*							*/

		header .blocks .main-languages {
			position: fixed;
			left: 310px;
			top:  13px;
			width:  auto;
			height: 55px;
		}
		header .blocks .main-languages > select {
			appearance: base-select
			border:none;
			outline: none;
			all: unset;
			border:none;
			border: 1px solid gray;
			width: 140px;
			padding: 4px 8px 6px 20px;
			border-radius: 5px;
			font-size: 1rem;
			color: var(--text_color);
			overflow: hidden;
			text-overflow: ellipsis;
		}
		header .blocks .main-languages > select {
			&,&::picker(select) {
		    	appearance: base-select;
		    	outline: none;
		   }
			&::picker(select) {
				position: relative;
				top: -29px;
				border: 1px solid gray;
				box-shadow: 0 8px 10px 0 rgba(0,0,0,0.27);
				border-radius: 5px;
			}
			& option:hover {
				background-color: var(--color_secondary);
				color: white;
			}
		}
		header .blocks .main-languages > select {
			opacity: 0.5;
			filter:grayscale(1) brightness(1);
			pointer-events: none;
		}
		
		header .blocks .main-languages > select option {
			display: flex;
			text-align: left;
			padding: 5px 15px 5px 15px;
			font-size: 1.15rem;
			line-height: 1.2;
			color: inherit;
		}
		header .blocks .main-languages > select optgroup:first-child {
			position: relative;
			padding-top: 10px;
			padding-bottom: 15px;
			margin-bottom: 10px;
			border-bottom: 1px solid gray;
		}
		header .blocks .main-languages > select optgroup:last-child {
			padding-bottom: 10px;
		}
		header .blocks .main-languages > select option i {
			display: inline-block;
			vertical-align: top;
			width:  25px;
			height: 15px;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
		}
		header .blocks .main-languages > select option:hover i {
			box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
		}
		header .blocks .main-languages > select option em {
			display: inline-block;
			vertical-align: top;
			font-size: 1.15rem;
			line-height: 1.2;
			padding: 3px 15px 3px 5px;
			color:inherit;
		}


		/*							*/
		/*		Admin countries		*/
		/*							*/

		header .blocks .main-countries {
			position: fixed;
			left: 70px;
			top:  13px;
			width:  auto;
			height: 55px;
		}
		header .blocks .main-countries > select {
			appearance: base-select
			border:none;
			outline: none;
			all: unset;
			border:none;
			border: 1px solid gray;
			width: 200px;
			padding: 4px 8px 6px 20px;
			border-radius: 5px;
			font-size: 1rem;
			color: var(--text_color);
			overflow: hidden;
			text-overflow: ellipsis;
		}
		header .blocks .main-countries > select {
			&,&::picker(select) {
		    	appearance: base-select;    
  			}
			&::picker(select) {
				position: relative;
				top: -29px;
				border: 1px solid gray;
				box-shadow: 0 8px 10px 0 rgba(0,0,0,0.27);
				border-radius: 5px;
			}
			& option:hover {
				background-color: var(--color_secondary);
				color: white;
			}
		}
		header .blocks .main-countries > select option {
			display: flex;
			text-align: left;
			padding: 5px 15px 5px 15px;
			font-size: 1.15rem;
			line-height: 1.2;
			color: inherit;
			outline: none;
		}
		header .blocks .main-countries > select optgroup:first-child {
			position: relative;
			padding-top: 10px;
			padding-bottom: 15px;
			margin-bottom: 10px;
			border-bottom: 1px solid gray;
		}
		header .blocks .main-countries > select optgroup:first-child i {
			background-image: url("../../images/assets/color/material-bank.svg");
			box-shadow:none!important;
			width: 20px;
			height: 20px;
		}
		header .blocks .main-countries > select optgroup:first-child em {
			margin-left:0px;
		}		
		header .blocks .main-countries > select optgroup:last-child {
			padding-bottom: 10px;
		}
		header .blocks .main-countries > select optgroup:last-child i[data-lang=""] {
			visibility: hidden;
		}
		header .blocks .main-countries > select option i {
			display: inline-block;
			vertical-align: top;
			width:  25px;
			height: 15px;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
		}
		header .blocks .main-countries > select option:hover i {
			box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
		}
		header .blocks .main-countries > select option em {
			display: inline-block;
			vertical-align: top;
			font-size: 1.15rem;
			line-height: 1.2;
			padding: 3px 15px 3px 5px;
			color:inherit;
		}


	/*							*/
	/*							*/
	/* 		MAIN MENU 			*/
	/*							*/
	/*		logged 				*/
	/*							*/
	/*							*/
		
		#mmn {
}
		#mmn .toggle {display: none;}

		#mmn > .logo {
			width: 100%;
			height: 44px;
			margin-bottom: 40px;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: bottom center;
			background-image: url("../../images/logos.svg");
			overflow: hidden;
			text-indent: -1000em;
		}
		#mmn > ul {
			font-size: 1.0rem;
			line-height: 1.2;
		}
		#mmn > ul li {
			display: block;
			position: relative;
			white-space: nowrap;
			margin-bottom: -6px;
		}
		#mmn > ul li a {
			display: block;
			padding: 10px 10px;
			transition:color 0.3s ease;
			overflow: hidden;
			text-overflow: clip;
		}
		#mmn > ul li.XXXcurrent a {
			background-color: var(--color_secondary);
			color: var(--color_primary);
			border-radius: 2px;
		}
		#mmn > ul li:hover a { color: var(--color_secondary); }
		#mmn > ul li.XXXcurrent:hover a { color: var(--color_primary); }

		#mmn > ul li a i {
			display: inline-block;
			position: relative;
			vertical-align: middle;
			width:  24px;
			height: 24px;
			background-size: contain;
			margin-right: 10px;
		}
		#mmn > ul li a i:before,
		#mmn > ul li a i:after {
			content:"";
			display: block;
			position: absolute;
			inset:0;
			background-size: contain;
			transition: opacity 0.3s ease;
		}
		#mmn > ul li a em {
			display: inline-block;
			position: relative;
			vertical-align: middle;
		}
		#mmn > ul li.current a em { color: white; }

		#mmn > ul li[data-label="dashboard"    ] i:before { background-image: url("../../images/assets/positive/dashboard.svg"); }
		#mmn > ul li[data-label="my-classes"   ] i:before { background-image: url("../../images/assets/positive/my-classes.svg"); }
		#mmn > ul li[data-label="products"     ] i:before { background-image: url("../../images/assets/positive/products.svg"); }
		#mmn > ul li[data-label="material-bank"] i:before { background-image: url("../../images/assets/positive/material-bank.svg"); }
		#mmn > ul li[data-label="curriculum"   ] i:before { background-image: url("../../images/assets/positive/curriculum.svg"); }
		#mmn > ul li[data-label="help"         ] i:before { background-image: url("../../images/assets/positive/help.svg"); }
		#mmn > ul li[data-label="admin"        ] i:before { background-image: url("../../images/assets/positive/edit.svg"); }
		#mnn > ul li[data-label="products"     ] i:before { background-image: url("../../images/assets/positive/products.svg"); }
		#mnn > ul li[data-label="types"        ] i:before { background-image: url("../../images/assets/positive/products.svg"); }
		#mnn > ul li[data-label="products"     ] i:before { background-image: url("../../images/assets/positive/products.svg"); }
		#mnn > ul li[data-label="classes"      ] i:before { background-image: url("../../images/assets/positive/my-classes.svg"); }
		#mnn > ul li[data-label="uploads"      ] i:before { background-image: url("../../images/assets/positive/uploads.svg"); }
		#mnn > ul li[data-label="users"        ] i:before { background-image: url("../../images/assets/positive/users.svg"); }
		#mnn > ul li[data-label="user-roles"   ] i:before { background-image: url("../../images/assets/positive/user-roles.svg"); }

		#mmn > ul li[data-label="dashboard"    ] i:after { background-image: url("../../images/assets/color/dashboard.svg"); }
		#mmn > ul li[data-label="my-classes"   ] i:after { background-image: url("../../images/assets/color/my-classes.svg"); }
		#mmn > ul li[data-label="products"     ] i:after { background-image: url("../../images/assets/color/products.svg"); }
		#mmn > ul li[data-label="material-bank"] i:after { background-image: url("../../images/assets/color/material-bank.svg"); }
		#mmn > ul li[data-label="curriculum"   ] i:after { background-image: url("../../images/assets/color/curriculum.svg"); }
		#mmn > ul li[data-label="help"         ] i:after { background-image: url("../../images/assets/color/help.svg"); }
		#mmn > ul li[data-label="admin"        ] i:after { background-image: url("../../images/assets/color/edit.svg"); }
		#mnn > ul li[data-label="products"     ] i:after { background-image: url("../../images/assets/color/products.svg"); }
		#mnn > ul li[data-label="types"        ] i:after { background-image: url("../../images/assets/color/products.svg"); }
		#mnn > ul li[data-label="products"     ] i:after { background-image: url("../../images/assets/color/products.svg"); }
		#mnn > ul li[data-label="classes"      ] i:after { background-image: url("../../images/assets/color/my-classes.svg"); }
		#mnn > ul li[data-label="uploads"      ] i:after { background-image: url("../../images/assets/color/uploads.svg"); }
		#mnn > ul li[data-label="users"        ] i:after { background-image: url("../../images/assets/color/users.svg"); }
		#mnn > ul li[data-label="user-roles"   ] i:after { background-image: url("../../images/assets/color/user-roles.svg"); }

		#mmn > ul li:hover a i:before { opacity:0; }  
		#mmn > ul li       a i:after  { opacity:0; } 
		#mmn > ul li:hover a i:after  { opacity:1; } 

		html[data-pag="dashboard"]      #mmn > ul li[data-label="dashboard"]           i { background-image: url("../../images/assets/negative/dashboard.svg"); }
		html[data-pag="my-classes"]     #mmn > ul li[data-label="my-classes"]          i { background-image: url("../../images/assets/negative/my-classes.svg"); }
		html[data-pag="my-class"]       #mmn > ul li[data-label="my-classes"]          i { background-image: url("../../images/assets/negative/my-classes.svg"); }
		html[data-pag="products"]       #mmn > ul li[data-label="products"]            i { background-image: url("../../images/assets/negative/products.svg"); }
		html[data-pag="product"]        #mmn > ul li[data-label="products"]            i { background-image: url("../../images/assets/negative/products.svg"); }
		html[data-pag="product-demo"]        #mmn > ul li[data-label="products"]            i { background-image: url("../../images/assets/negative/products.svg"); }
		html[data-pag="product-family"] #mmn > ul li[data-label="products"]            i { background-image: url("../../images/assets/negative/products.svg"); }
		html[data-pag="material-bank"]  #mmn > ul li[data-label="material-bank"]       i { background-image: url("../../images/assets/negative/material-bank.svg"); }
		html[data-pag="curriculum"]     #mmn > ul li[data-label="curriculum"]          i { background-image: url("../../images/assets/negative/curriculum.svg"); }
		html[data-pag="help"]           #mmn > ul li[data-label="help"]                i { background-image: url("../../images/assets/negative/help.svg"); }
		html[data-pag="admin"]          #mmn > ul li[data-label="admin"]               i { background-image: url("../../images/assets/negative/edit.svg"); }

		html[data-pag="dashboard"]      #mmn > ul li[data-label="dashboard"]           a,
		html[data-pag="my-classes"]     #mmn > ul li[data-label="my-classes"]          a,
		html[data-pag="my-class"]       #mmn > ul li[data-label="my-classes"]          a,
		html[data-pag="products"]       #mmn > ul li[data-label="products"]            a,
		html[data-pag="product"]        #mmn > ul li[data-label="products"]            a,
		html[data-pag="product-demo"]   #mmn > ul li[data-label="products"]            a,
		html[data-pag="product-family"] #mmn > ul li[data-label="products"]            a,
		html[data-pag="material-bank"]  #mmn > ul li[data-label="material-bank"]       a,
		html[data-pag="curriculum"]     #mmn > ul li[data-label="curriculum"]          a,
		html[data-pag="help"]           #mmn > ul li[data-label="help"]                a,
		html[data-pag="admin"]          #mmn > ul li[data-label="admin"]               a {background-color: var(--color_secondary);color: white;border-radius: 3px;}

		html[data-pag="dashboard"]      #mmn > ul li[data-label="dashboard"]:hover     a,
		html[data-pag="my-classes"]     #mmn > ul li[data-label="my-classes"]:hover    a,
		html[data-pag="my-class"]       #mmn > ul li[data-label="my-classes"]:hover    a,
		html[data-pag="products"]       #mmn > ul li[data-label="products"]:hover      a,
		html[data-pag="product-demo"]        #mmn > ul li[data-label="products"]:hover      a,
		html[data-pag="product-family"] #mmn > ul li[data-label="products"]:hover      a,
		html[data-pag="material-bank"]  #mmn > ul li[data-label="material-bank"]:hover a,
		html[data-pag="curriculum"]     #mmn > ul li[data-label="curriculum"]:hover    a,
		html[data-pag="help"]           #mmn > ul li[data-label="help"]:hover          a,
		html[data-pag="admin"]          #mmn > ul li[data-label="admin"]:hover         a { color:white; }

		html[data-pag="dashboard"]      #mmn > ul li[data-label="dashboard"]           i:before,
		html[data-pag="my-classes"]     #mmn > ul li[data-label="my-classes"]          i:before,
		html[data-pag="my-class"]       #mmn > ul li[data-label="my-classes"]          i:before,
		html[data-pag="products"]       #mmn > ul li[data-label="products"]            i:before,
		html[data-pag="product"]        #mmn > ul li[data-label="products"]            i:before,
		html[data-pag="product-demo"]        #mmn > ul li[data-label="products"]            i:before,
		html[data-pag="product-family"] #mmn > ul li[data-label="products"]            i:before,
		html[data-pag="material-bank"]  #mmn > ul li[data-label="material-bank"]       i:before,
		html[data-pag="curriculum"]     #mmn > ul li[data-label="curriculum"]          i:before,
		html[data-pag="help"]           #mmn > ul li[data-label="help"]                i:before,
		html[data-pag="admin"]          #mmn > ul li[data-label="admin"]               i:before { opacity:0; }
		
		html[data-pag="dashboard"]      #mmn > ul li[data-label="dashboard"]           i:after,
		html[data-pag="my-classes"]     #mmn > ul li[data-label="my-classes"]          i:after,
		html[data-pag="my-class"]       #mmn > ul li[data-label="my-classes"]          i:after,
		html[data-pag="products"]       #mmn > ul li[data-label="products"]            i:after,
		html[data-pag="product"]        #mmn > ul li[data-label="products"]            i:after,
		html[data-pag="product-demo"]        #mmn > ul li[data-label="products"]            i:after,
		html[data-pag="product-family"] #mmn > ul li[data-label="products"]            i:after,
		html[data-pag="material-bank"]  #mmn > ul li[data-label="material-bank"]       i:after,
		html[data-pag="curriculum"]     #mmn > ul li[data-label="curriculum"]          i:after,
		html[data-pag="help"]           #mmn > ul li[data-label="help"]                i:after, 
		html[data-pag="admin"]          #mmn > ul li[data-label="admin"]               i:after { opacity:0; }
		
		html[data-pag="dashboard"]      #mmn > ul li[data-label="dashboard"]:hover     i:before,
		html[data-pag="my-classes"]     #mmn > ul li[data-label="my-classes"]:hover    i:before,
		html[data-pag="my-class"]       #mmn > ul li[data-label="my-classes"]:hover    i:before,
		html[data-pag="products"]       #mmn > ul li[data-label="products"]:hover      i:before,
		html[data-pag="product"]        #mmn > ul li[data-label="products"]:hover      i:before,
		html[data-pag="product-demo"]        #mmn > ul li[data-label="products"]:hover      i:before,
		html[data-pag="product-family"] #mmn > ul li[data-label="products"]:hover      i:before,
		html[data-pag="material-bank"]  #mmn > ul li[data-label="material-bank"]:hover i:before,
		html[data-pag="curriculum"]     #mmn > ul li[data-label="curriculum"]:hover    i:before,
		html[data-pag="help"]           #mmn > ul li[data-label="help"]:hover          i:before,
		html[data-pag="admin"]          #mmn > ul li[data-label="admin"]:hover         i:before { opacity:0; }

		html[data-pag="dashboard"]      #mmn > ul li[data-label="dashboard"]:hover     i:after,
		html[data-pag="my-classes"]     #mmn > ul li[data-label="my-classes"]:hover    i:after,
		html[data-pag="my-class"]       #mmn > ul li[data-label="my-classes"]:hover    i:after,
		html[data-pag="products"]       #mmn > ul li[data-label="products"]:hover      i:after,
		html[data-pag="product"]        #mmn > ul li[data-label="products"]:hover      i:after,
		html[data-pag="product-demo"]        #mmn > ul li[data-label="products"]:hover      i:after,
		html[data-pag="product-family"] #mmn > ul li[data-label="products"]:hover      i:after,
		html[data-pag="material-bank"]  #mmn > ul li[data-label="material-bank"]:hover i:after,
		html[data-pag="curriculum"]     #mmn > ul li[data-label="curriculum"]:hover    i:after,
		html[data-pag="help"]           #mmn > ul li[data-label="help"]:hover          i:after,
		html[data-pag="admin"]          #mmn > ul li[data-label="admin"]:hover         i:after { opacity:0; }


			
			
	/*							*/
	/*							*/
	/* 		TOP BANNER 			*/
	/*							*/
	/*		when logged in		*/
	/*							*/
	/*							*/
			
		#tba {
			position: relative;
			width: 100%;
			aspect-ratio:1/1;
			margin-top: 30px;
			border-radius: 3px;
			overflow: hidden;
		}
		#tba a {
			position: absolute;
			inset:0;
		}
		#tba figure {
			position: absolute;
			inset:0;
			background-image: url("../../images/creative/girl-with-products.webp");
		}
		#tba figure:after {
			content:"";
			display: block;
			position: absolute;
			inset:0;
			background-color: rgba(0,0,0,0.25);
			background: linear-gradient(0deg, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0) 100%);
		}
		#tba .logo {
			position: absolute;
			top: 10px;
			left: 10px;
			width: 35%;
			aspect-ratio:3/1;
			background-color: white;
			z-index: 1;
		}
		#tba .logo:before {
			content:"";
			display: block;
			position: absolute;
			inset:5px;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
			background-image: url("../../images/logos.svg");
		}
		#tba figcaption {
			position: absolute;
			left: 15px;
			bottom:15px;
			right: 15%;
			color: white;
			font-size: 1.2rem;
			line-height: 1.2;
			white-space: normal;
			text-wrap:balance;
		}

		/*							*/
		/*							*/
		/*		Recently opened 	*/
		/*							*/
		/*							*/

			.block[data-label="recently-opened-products"] {}
			#rob {
				position: relative;
				width: 100%;
				clear: both;
				margin-top: 30px;
			}
			#rob {
				h2 {
					display: block;
					width: 100%;
					font-family: Quicksand;
					font-size: var(--paragraph_fontsize);
					line-height:var(--paragraph_leading);
					font-weight: 600;
					margin-bottom: 15px;
				}
				ul {

				}
				ul li {
					display: block;
					position: relative;
					height:64px;
					padding: 2px 0 0 2px;
					margin-bottom: 10px;
				}
				ul li a {
					position: absolute;
					inset:-5px;
					box-shadow: inset 0 0 0 1px #AAA;
					opacity: 0;
					z-index: 1;
				}
				ul li:hover a {
					background-color: var(--color_secondary);
					background-color: #EEE;
					opacity: 0.5;
				}
				
				ul li figure {
					display: block;
					position: relative;
					width: 60px;
					height: 60px;
					margin: 0 0 -60px 0;
					pointer-events: none;
					z-index: 2;
				}
				ul li figcaption {
					display: block;
					position: relative;
					margin: 0 0 0 75px;
					top: calc(50% - 5px);
					transform:translateY(-50%);
					pointer-events: none;
					z-index: 2;
				}
				XXXXul li:hover figcaption {
					color: var(--color_secondary);
				}
				ul li figcaption {
					h3 {
						font-size:   var(--smaller_paragraph_fontsize);
						line-height: var(--smaller_paragraph_leading);
						font-weight: 500;
					}
					h4 {
						font-size:   var(--small_paragraph_fontsize);
						line-height: var(--small_paragraph_leading);
						font-weight: 300;
						opacity: 0.5;
					}
				}

			}



	/*							*/
	/*							*/
	/* 			UPDATE 			*/
	/*							*/
	/*							*/
	
		#inb {
			width: 100vw;
			margin-left: -12px;
		}
		.update-content {
			width: 100vw;
			text-align: center;
			/* margin-bottom: 20px; */
		}
		.update-content .background {
			background-color: var(--shade_light);
		}
		.update-content .update-text {}
		#inb a.jump-button { 
			text-decoration: none;
			padding: 0;
			&:before {
				display: none;
			}
		}
		#inb a.jump-button em { 
			display: inline-block;
			float: left;
			padding: 15px 0;
		}
		#inb a.jump-button i {
			display: inline-block;
			width:  18px;
			height: 18px;
			margin: 17px 0 0 10px;
			background-image: url("../../images/assets/color/arrow-2-right.svg");
			background-size: contain;
			background-repeat: no-repeat;
		}
		#inb a.hide-button {
			display: block;
			float: right;
			margin: 15px 10px 0 0;
			width:  25px;
			height: 25px;
			opacity: 0.5;
		}
		#inb a.hide-button i {
			display: block;
			width:  18px;
			height: 18px;
			background-image: url("../../images/assets/positive/clear.svg");
			background-size: contain;
			background-repeat: no-repeat;
		}


	/*							*/
	/*							*/
	/* 			MAIN 			*/
	/*							*/
	/*							*/
	
		main {
			min-height: calc(100% - var(--header_height) - var(--footer_height));
			min-height: 0;
			background-color: white;
			margin: 0;
			padding: 0;
			white-space: nowrap;
			/* position: relative; */
			/* left: 50%; */
			/* transform: translateX(-50%); */
			outline: none;
		}
		html[data-lgn="1"] main {
			padding-bottom: 55px;
			margin-bottom: calc(-1 * var(--header_height) + 5px);
		}
		
		main .panes {
			font-size:0;
			line-height: 0;
			text-align: left;
		}
		main .panes .pane {
			min-height: auto;
		}

		.container {
			width: 100%;
			min-height: 100%;
			display: flex;
			align-items: center;
			text-align: left;
			/* display: block; */
			/* justify-content: center; */
			/* left: 50%; */
			/* position: relative; */
			/* transform: translateX(-50%); */
			outline: none;
		}
		main .container .mirror {
			/* min-height: 100%; */
			min-height: 300px;
			background-color: rgba(166,210,210,1.00);
			background-color: transparent;
		}
		.container .mirror form {
			font-size: 1rem;
			line-height: 1rem;
			font-size: 0;
			line-height: 0;
		}
		
		figure.logo {
			background-image: url("../../images/assets/color/logos-1.svg");
			background-size: contain;
			width: 100%;
			height: 70px;
			margin: 50px auto;
			position: relative;
		}
		figure.logo a {
			display: block;
			position: absolute;
			inset:0;
		}
		
		
		

		
		/* figures and figcaption inside */

			figure {
				width: 100%;
				position:relative;
				background-color:white;
				
				> figcaption {
					position: absolute;
					font-size: var(--paragraph_fontsize);
					line-height:var(--paragraph_leading);
				}
				> figcaption > h1 {
				}
				> figcaption > h2 {
				}
			}
			
		/* figures and paragraphs inside panes */
		
			main .panes figcaption,
			main .panes p {
				font-size: var(--paragraph_fontsize);
				line-height:var(--paragraph_leading);
			}
			
			
			
			
		
		form {
			.form-element {
				.fl {
					margin-top: 5px;
					margin-top: 0;
				}
				.ff {
				
				}
			}
			.form-group[data-label="buttons"] {
				a.button {

					i {}
					em {}
				}
			}
			.form-elements[data-label="confirmations"] {}
			.form-elements[data-label="confirmations"] .form-element[data-label=""] > em:before { content:""; }
			
			

		}
		
		.form-element .fs {
			display: block;
			position: relative;
			margin: 0 0 15px 0;
			border: 1px solid var(--color_border);
			background-color: rgba(239,239,228,1.00);
			background-color: #F5F5F5;
			padding: 15px;
			border-radius: 3px;
			color: #999;
		}
		.form-element .fs:after, .form-element .fs:before {
			bottom: 100%;
			left: 50%;
			left: 20px;
			border: solid transparent;
			content: "";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
		}
		.form-element .fs:after {
			border-color: rgba(255, 255, 255, 0);
			border-bottom-color: #F5F5F5;
			border-width: 10px;
			margin-left: -10px;
		}
		.form-element .fs:before {
			border-color: rgba(0,0,0, 0);
			border-bottom-color: var(--color_border);
			border-width: 11px;
			margin-left: -11px;
		}		
		.form-element .fs .tip-title {
			font-size: 1.0rem;
			font-weight: 600;
			color: inherit;
			margin: 0 0 5px 0;
		}
		.form-element .fs .tip-title > i {
			display: block;
			position: relative;
			background-size: contain;
			background-image: url("../../images/admin/progress-bar-circle-24-failed.png");
			width: 15px;
			height: 15px;
			margin: 0 0 -15px 0;
			left: -3px;
			top: 1px;
		}
		.form-element .fs .tip-title > em {
			display: block;
			position: relative;
			margin: 0 0 0 18px;
		}
		.form-element .fs ul.tip-items {
			font-size: 1.0rem;
			font-weight: 400;
			color: inherit;
		}
		.form-element .fs ul.tip-items > li {
			display: block;
			list-style: none;		
			font-size: inherit;
		}
		.form-element .fs ul.tip-items > li > i {
			display: block;
			position: relative;
			width:  10px;
			height: 15px;
			margin: 0 0 -15px 0;
			font-size: 1.0rem;
			line-height: 15px;
			overflow: hidden;
			color: var(--color_secondary);
		}
		.form-element .fs ul.tip-items > li > i:before {
			content:"•";
		}
		.form-element .fs ul.tip-items > li > em {
			display: block;
			position: relative;
			margin: 0 0 0 18px;
		}
		
		
	
	
	
	
	
	
	
	
	
	
	
	
	/*							*/
	/*							*/
	/* 			FORM 			*/
	/*							*/
	/*							*/
	
		/* form groups */
			
			.form-group[data-label="schools"      ] { }
			.form-group[data-label="confirmations"] { }
			
		/* form elements */
			
			
			.form-element {
				.fw { display: none; }
				.fl {
					font-weight: 500;
					font-size: 0.8em;
					opacity: 0.6;
				}
				& label { cursor: default; }
				&[data-mandatory="1"] .fl em:after { display: inline-block; content:"*"; margin-left: 0.25em; }
				&[data-type="text1row"] .ff,
				&[data-type="text3rows"] .ff,
				&[data-type="text5rows"] .ff,
				&[data-type="text7rows"] .ff {
					display: block;
					width: 100%;
					border: 1px solid var(--color_border);
					background-color: white;
					min-height: var(--form_element_height);
					margin-block:3px 10px;
					overflow: hidden;
				}
				.ff input[type="text"],
				.ff input[type="email"],
				.ff input[type="tel"],
				.ff input[type="password"],
				.ff textarea {
					background-color: transparent;
					background-color: beige;
					background-color: transparent;
					border: none;
					outline: none;
					width: 100%;
					font-family: PublicSans;
					font-weight: 300;
					font-size: var(--paragraph_fontsize);
					line-height: 1.2;
					padding: 10px 10px 10px 10px;
					color: var(--color_secondary);
				}
				&[data-type="text3rows"] .ff textarea { height: calc(3 * var(--form_element_height)); }
				&[data-type="text5rows"] .ff textarea { height: calc(5 * var(--form_element_height)); }
				&[data-type="text7rows"] .ff textarea { height: calc(7 * var(--form_element_height)); }
				
				&[data-type="checkbox"] {
					margin-top: 10px;
					cursor: default;
				}
				.ff label {
				}
				.ff input[type="checkbox"] {
					position: absolute;
					opacity: 0;
					z-index: 1;
					cursor: default;
				
					~ i {
						position: relative;
						display: block;
						pointer-events: none;
						width:  18px;
						height: 18px;
						margin: 0 0 -18px 0;
						border: 1px solid var(--color_border);
						background-image: url("../../images/assets/negative/checked.svg");
						background-size: 0;
						background-color: white;
						transition: all .5s ease;
					}
					&:checked ~ i {
						border: 1px solid var(--color_secondary);
						background-color: var(--color_secondary);
						background-size: contain;
					}
					~ em {
						position: relative;
						display: block;
						margin: 0 0 0 30px;
						~ em > a {
							pointer-events: all;
						}
					}
				}
				&[data-type="checkbox"][data-mandatory="1"] ~ em:after { content:"*"; }
				&[data-label="gtc"],
				&[data-label="prv"]{ font-weight: 600; }
				
			}
			
			.form-element .ff .field-toggle {
				display: block;
				position: relative;
				float: right;
				width: 20px;
				height: 20px;
				margin: 0 0 -20px 0;
				top: 9px;
				right:5px;
				opacity: 0.5;
				cursor: pointer;
			}
			.form-element .ff .field-toggle:hover {
				opacity: 1;
			}
			.form-element .ff .field-toggle i {
				pointer-events: none;
				display: block;
				position: absolute;
				inset:0;
				background-repeat: no-repeat;
				background-size: contain;
			}
			.form-element .ff .field-toggle i:before { content: ""; }
			.form-element .ff:has(input[type="password"]) .field-toggle i { background-image: url("../../images/icon/ui/positive/password-state-hidden.svg"); }
			.form-element .ff:has(input[type="text"]    ) .field-toggle i { background-image: url("../../images/icon/ui/positive/password-state-visible.svg"); }
			
			.form-element .ff .strength-result {
				display: block;
				position: relative;
				float: right;
				width: 200px;
				height: 20px;
				margin: 0 0 -20px 0;
				top: 11px;
				right:35px;
				text-align: right;
				pointer-events: none;
				outline: 1px solid orange;
				outline: none;
				font-size: 0.9rem;
				white-space: nowrap;
				overflow: hidden;
				text-overflow:ellipsis;
			}
			.form-element .ff .strength-result > em { display: none; }
			.form-element .ff .strength-result .lvl1 {}
			.form-element .ff .strength-result .lvl2 {}
			.form-element .ff .strength-result .lvl3 {}
			.form-element .ff .strength-result .lvl4 {}
			.form-element .ff .strength-result .lvl5 {}
			.form-element .ff .strength-result .lvl6 {}

			.form-group {
			}
			.form-group[data-size="100"] { width: 100%; }
			
			/* password strength meter */
			
			.form-element .ps {
				position: relative;
				float: right;
				width: 300px;
				height: 20px;
				margin: 0 0 -20px 0;
				transform:translate(0,-100%);
				text-align: right;
				outline: 1px solid red;
				outline: none;
				white-space: nowrap;
				top: 2px;
			}
			.form-element .ps .lbl {
				position: relative;
				width: 200px;
				height: 30px;
				margin: 0 0 -30px 0;
				text-align: right;
				outline: 1px solid red;
				outline: none;
				font-size: 0.9rem;
				line-height: 1.2;
				top: -2px;
				margin-right: 3px;
			}
			.form-element .ps .max {
				display: inline-block;
				position: relative;
				width: 80px;
				height: 10px;
				border-radius: 15px;
				background-color: #EEE;
				box-shadow: inset 0 2px 5px 0 rgba(0,0,0,0.25);
				overflow: hidden;
			}
			.form-element .ps .max .cur {
				display: block;
				position: absolute;
				left:0; top:0;
				vertical-align: top;
				width: 100%;
				height: 100%;
				max-width: 0;
				transition: max-width 0.6s ease, background-color 0.6s ease;
			}
			.form-element .ps[data-strength="1"] .cur { background-color:red; }
			.form-element .ps[data-strength="2"] .cur { background-color:orange; }
			.form-element .ps[data-strength="3"] .cur { background-color:orange; }
			.form-element .ps[data-strength="4"] .cur { background-color:cornflowerblue; }
			.form-element .ps[data-strength="5"] .cur { background-color:royalblue; }
			.form-element .ps[data-strength="6"] .cur { background-color:olivedrab; }
			.form-element .ps[data-strength="7"] .cur { background-color:yellowgreen; }

			.form-element .ps[data-strength="1"] .cur { max-width:calc(100% / 7 * 1); }
			.form-element .ps[data-strength="2"] .cur { max-width:calc(100% / 7 * 2); }
			.form-element .ps[data-strength="3"] .cur { max-width:calc(100% / 7 * 3); }
			.form-element .ps[data-strength="4"] .cur { max-width:calc(100% / 7 * 4); }
			.form-element .ps[data-strength="5"] .cur { max-width:calc(100% / 7 * 5); }
			.form-element .ps[data-strength="6"] .cur { max-width:calc(100% / 7 * 6); }
			.form-element .ps[data-strength="7"] .cur { max-width:calc(100% / 7 * 7); }

			.form-element[data-label="password"]:has(.ps[data-strength="1"]) .lvl1 { display:block; color:red; }
			.form-element[data-label="password"]:has(.ps[data-strength="2"]) .lvl2 { display:block; color:orange; }
			.form-element[data-label="password"]:has(.ps[data-strength="3"]) .lvl3 { display:block; color:orange; }
			.form-element[data-label="password"]:has(.ps[data-strength="4"]) .lvl4 { display:block; color:cornflowerblue; }
			.form-element[data-label="password"]:has(.ps[data-strength="5"]) .lvl5 { display:block; color:royalblue; }
			.form-element[data-label="password"]:has(.ps[data-strength="6"]) .lvl6 { display:block; color:olivedrab; }
			.form-element[data-label="password"]:has(.ps[data-strength="7"]) .lvl7 { display:block; color:yellowgreen; }

	
	
	
	/*							*/
	/*							*/
	/*	CUSTOM FORM ELEMENTS	*/
	/*							*/
	/*							*/
	
	
	
		/*								*/
		/*	Phone country pre selector 	*/
		/*								*/
		
		
		.form-element[data-label="phone"] {
		
			.phone-prefix {
				display: inline-block;
				position: absolute;
				overflow: hidden;
				box-sizing: border-box;
				width: 90px;
				height: 27px;
				padding: 2px 5px 0 5px;
				margin: 5px 0 0 5px;
				background-color: #eee;
				border: 1px solid #999;
				border-radius: 5px;
			}
			.phone-prefix select {
				background-color: white;
				border: none;
				all: unset;
				appearance: base-select;
				background-size: 24px 14px;
				background-repeat: no-repeat;
				background-position: 1px 3px;
				padding: 0 0 0 30px;
				white-space: nowrap;
			}
			.phone-prefix select::picker-icon {
				content:"▼";
    			display: block!important;
    			margin-inline-start: auto;
				font-size: 8px;
				line-height: 20px;
				margin-left: 5px;
				color: #999;
			}
			.phone-prefix select::picker(select) {
				appearance: base-select;
				position: relative;
				background-color: #EEE;
				padding: 5px 5px;
				border: 1px solid rgba(128,128,128,0.56);
				box-shadow: 0 8px 15px 0 rgba(0,0,0,0.27), inset 60px 0 0 0 #DDD;
				border-radius: 5px;
			}
			.phone-prefix select::picker(select) {
				appearance: base-select;    
			}
			.phone-prefix select option:hover {
				background-color: var(--color_secondary);
				color: white;
			}
			.phone-prefix select option {
				display: block;
				text-align: left;
				text-align: right;
				margin: 5px;
				padding: 5px 10px 5px 60px;
				font-size: 1rem;
				line-height: 1.2;
				color: inherit;
				outline: none;
				border-radius:3px;
				background-size: 24px 14px;
				background-repeat: no-repeat;
				background-position: 10px center;
			}
			.phone-prefix select option {
				display: block;
				text-align: left;
				text-align: right;
				margin: 5px;
				padding: 5px 10px 5px 60px;
				font-size: 1rem;
				line-height: 1.2;
				color: inherit;
				outline: none;
				border-radius:3px;
				background-size: 24px 14px;
				background-repeat: no-repeat;
				background-position: 10px center;
			}
			.phone-prefix select option::checkmark {
				content:"✓";
				float: left;
				position: relative;
				left: -5px;
				color: var(--color_secondary);
			}
			.phone-prefix select option .option:before {
				float: left;
				width: 230px;
				text-align: left;
			}
			.phone-prefix select:has(option[value="cz"]:checked) { background-image:url(https://flagcdn.com/cz.svg); }
			.phone-prefix select:has(option[value="de"]:checked) { background-image:url(https://flagcdn.com/de.svg); }
			.phone-prefix select:has(option[value="es"]:checked) { background-image:url(https://flagcdn.com/es.svg); }
			.phone-prefix select:has(option[value="hu"]:checked) { background-image:url(https://flagcdn.com/hu.svg); }
			.phone-prefix select:has(option[value="pl"]:checked) { background-image:url(https://flagcdn.com/pl.svg); }
			.phone-prefix select:has(option[value="pt"]:checked) { background-image:url(https://flagcdn.com/pt.svg); }
			.phone-prefix select:has(option[value="ro"]:checked) { background-image:url(https://flagcdn.com/ro.svg); }
			.phone-prefix select:has(option[value="sk"]:checked) { background-image:url(https://flagcdn.com/sk.svg); }
			.phone-prefix select:has(option[value="si"]:checked) { background-image:url(https://flagcdn.com/si.svg); }
			.phone-prefix select:has(option[value="uk"]:checked) { background-image:url(https://flagcdn.com/gb.svg); }
			
			.phone-prefix select option[value="cz"] { background-image:url(https://flagcdn.com/cz.svg); }
			.phone-prefix select option[value="de"] { background-image:url(https://flagcdn.com/de.svg); }
			.phone-prefix select option[value="es"] { background-image:url(https://flagcdn.com/es.svg); }
			.phone-prefix select option[value="hu"] { background-image:url(https://flagcdn.com/hu.svg); }
			.phone-prefix select option[value="pl"] { background-image:url(https://flagcdn.com/pl.svg); }
			.phone-prefix select option[value="pt"] { background-image:url(https://flagcdn.com/pt.svg); }
			.phone-prefix select option[value="ro"] { background-image:url(https://flagcdn.com/ro.svg); }
			.phone-prefix select option[value="sk"] { background-image:url(https://flagcdn.com/sk.svg); }
			.phone-prefix select option[value="si"] { background-image:url(https://flagcdn.com/si.svg); }
			.phone-prefix select option[value="uk"] { background-image:url(https://flagcdn.com/gb.svg); }
			
			.phone-prefix select option[value="cz"] .option:before { content:"Czech Republic (Česká republika)" }
			.phone-prefix select option[value="de"] .option:before { content:"Germany (Deutschland)" }
			.phone-prefix select option[value="es"] .option:before { content:"Spain (España)" }
			.phone-prefix select option[value="hu"] .option:before { content:"Hungary (Magyarország)" }
			.phone-prefix select option[value="pl"] .option:before { content:"Poland (Polska)" }
			.phone-prefix select option[value="pt"] .option:before { content:"Portugal" }
			.phone-prefix select option[value="ro"] .option:before { content:"Romania (România)" }
			.phone-prefix select option[value="sk"] .option:before { content:"Slovakia (Slovensko)" }
			.phone-prefix select option[value="si"] .option:before { content:"Slovenia (Slovenija)" }
			.phone-prefix select option[value="uk"] .option:before { content:"United Kingdom" }
		}
		.form-element[data-label="phone"] .ff {
		}
		form[name="registration"] .form-element[data-label="phone"] .ff input[type="tel"],
		form[name="my-profile"] .form-element[data-label="phone"] .ff input[type="tel"]{
			padding-left: 105px;
		}
    
		
	
		.form-group[data-label="schools"] {
		
			.form-elements {
				
			}
			.form-elements .form-element {
			
			}
			
			/* states */
			
			& .form-element { display: none; }
			&[data-used="1"] .form-element:nth-child(-n+1) { display: inline; }
			&[data-used="2"] .form-element:nth-child(-n+2) { display: inline; }
			&[data-used="3"] .form-element:nth-child(-n+3) { display: inline; }
			&[data-used="4"] .form-element:nth-child(-n+4) { display: inline; }
			&[data-used="5"] .form-element:nth-child(-n+5) { display: inline; }
			&[data-used="6"] .form-element:nth-child(-n+6) { display: inline; }
			&[data-used="7"] .form-element:nth-child(-n+7) { display: inline; }
			&[data-used="8"] .form-element:nth-child(-n+8) { display: inline; }
			&[data-used="9"] .form-element:nth-child(-n+9) { display: inline; }
			&[data-used="10"] .form-element:nth-child(-n+10) { display: inline; }
			
			& .form-element[data-label="school"] a.remove-school {
				display: block;
				position: relative;
				z-index: 1;
				float: right;
				width: 30px;
				height: 40px;
				margin: 0 0 -40px 0;
				transform:translate(0,-100%);
				background-image: url("../../images/assets/color/clear.svg");
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 20px 20px;
			}
			& .form-element[data-label="school"] a.remove-school { display: none; }
			&[data-used="1"]  .form-element:nth-child(1)   a.remove-school { display: none; }
			&[data-used="2"]  .form-element:nth-child(2)   a.remove-school { display: inline; }
			&[data-used="3"]  .form-element:nth-child(3)   a.remove-school { display: inline; }
			&[data-used="4"]  .form-element:nth-child(4)   a.remove-school { display: inline; }
			&[data-used="5"]  .form-element:nth-child(5)   a.remove-school { display: inline; }
			&[data-used="6"]  .form-element:nth-child(6)   a.remove-school { display: inline; }
			&[data-used="7"]  .form-element:nth-child(7)   a.remove-school { display: inline; }
			&[data-used="8"]  .form-element:nth-child(8)   a.remove-school { display: inline; }
			&[data-used="9"]  .form-element:nth-child(9)   a.remove-school { display: inline; }
			&[data-used="10"] .form-element:nth-child(10)  a.remove-school { display: inline; }

		}
		form[name="registration"]:has(.form-group[data-label="schools"][data-used="10"]) .button[data-label="add-school"] { display: none; }
		
		.form-element[data-label="school"] .fl:after {
			float: right;
			display: inline-block;
			position: relative;
			color: #AAA;
			content:"";
			font-size: 0.7em;
			font-size: 1em;
			line-height: 30px;
			height: 30px;
			top: -6px;
			margin-bottom: -30px;
			pointer-events: none;
		}
		.form-group[data-label="schools"] {
			&[data-used="1"]  .form-element[data-label="school"] .fl:after { content:"1/10"; }
			&[data-used="2"]  .form-element[data-label="school"] .fl:after { content:"2/10"; }
			&[data-used="3"]  .form-element[data-label="school"] .fl:after { content:"3/10"; }
			&[data-used="4"]  .form-element[data-label="school"] .fl:after { content:"4/10"; }
			&[data-used="5"]  .form-element[data-label="school"] .fl:after { content:"5/10"; }
			&[data-used="6"]  .form-element[data-label="school"] .fl:after { content:"6/10"; }
			&[data-used="7"]  .form-element[data-label="school"] .fl:after { content:"7/10"; }
			&[data-used="8"]  .form-element[data-label="school"] .fl:after { content:"8/10"; }
			&[data-used="9"]  .form-element[data-label="school"] .fl:after { content:"9/10"; }
			&[data-used="10"] .form-element[data-label="school"] .fl:after { content:"10/10"; }
		}
		
		.form-element[data-label="school"] .ff input:nth-child(1) {
			padding-bottom: 0px;
		}
		.form-element[data-label="school"] .ff input:nth-child(2) {
			font-size: 0.95rem;
		}
		
		
		
		
		
		
		
		
		
		
		
	/*							*/
	/*							*/
	/* 		CONDITIONAL			*/
	/*		CONTENTS			*/
	/*							*/
		
		html[data-pag="registration"], html[data-pag="demo"] {
		
			.conditional-contents .conditional-content {
				display: none;
			}
			.conditional-contents[data-template="form"      ] .conditional-content[data-label="form"      ],
			.conditional-contents[data-template="succeeded" ] .conditional-content[data-label="succeeded" ],
			.conditional-contents[data-template="failed"    ] .conditional-content[data-label="failed"    ],
			.conditional-contents[data-template="progress"  ] .conditional-content[data-label="progress"  ] {
				display: block;
			}
			.conditional-content  {
				width: 100%;
				background-color: rgba(222,222,209,1.00);
				background-color: transparent;
			}
			
			.conditional-content[data-label="succeeded" ],
			.conditional-content[data-label="failed" ] {
				padding: 25px;
				border: 1px solid gray;
				border-radius: 3px;
			}
			.conditional-content[data-label="succeeded" ] { border-color:lightseagreen; }
			.conditional-content[data-label="failed"    ] { border-color:orangered; }
			
			.conditional-content .notice {
				display: inline-block;
				position: relative;
				font-size: 1.5rem;
				line-height: 35px;
				height: 35px;
				margin-bottom: 15px;
			}
			.conditional-content .notice i {
				display: block;
				position: relative;
				width:           35px;
				height:          35px;
				margin:     0 0 -35px 0;
				border-radius:   35px;
				background-size: 30px;
				background-repeat: no-repeat;
				background-position: center;
			}
			.conditional-content .notice em {
				display: block;
				position: relative;
				margin: 0 0 0 45px;
				height: inherit;
				line-height: inherit;
			}
			.conditional-content[data-label="form"      ] {}
			.conditional-content[data-label="succeeded" ] { height: auto; text-align:center; }
			.conditional-content[data-label="failed"    ] { height: auto; text-align:center; }
			.conditional-content[data-label="progress"  ] { height: 150px; text-align:center; }
			.conditional-content[data-label="form"      ] i {}
			.conditional-content[data-label="succeeded" ] i { background-color: lightseagreen; background-image:url("../../images/assets/negative/checked.svg");  }
			.conditional-content[data-label="failed"    ] i { background-color: orangered;     background-image:url("../../images/assets/negative/clear.svg"); }
			.conditional-content[data-label="progress"  ] i { background-image:url("../../images/progress/positive/spinner-1.svg"); animation: progress 1s steps(12) infinite; }
			
		}
		
		@keyframes progress {
			0% { transform:rotate(0deg); }
			100% { transform:rotate(360deg); }
		}




	/*							*/
	/*							*/
	/* 		VALIDATION			*/
	/*		AND WARNINGS		*/
	/*							*/
	/*							*/
	
		.form-element input:-webkit-autofill {
			background-color: transparent !important;
			box-shadow: 0 0 0px 1000px white inset !important;
			-webkit-box-shadow: 0 0 0px 1000px white inset !important;
			color: var(--color_secondary);
		}

		.form-element .fw {
			display: block;
			position: relative;
			width: 100%;
			height:      135px;
			margin: 0 0 -135px 0;
			padding: 0;
			opacity: 0;
			top:10px;
			transition: top 0.5s ease 0s, opacity 0.5s ease 0s;
			z-index: 1;
			pointer-events: none;
			overflow: hidden;
			overflow: visible;
			outline: 1px solid green;
			outline: none;
			pointer-events: none;
		}
		.form-element[data-type="text1row"] .fw {
			transform: translate(20px, calc(-100% + 25px));
		}
		.form-element[data-type="checkbox"] .fw {
			transform: translate(20px, calc(-100% + 0px));
		}
		.form-element .fw em {	
			position: absolute;
			bottom: 10px;
			right:10px;
			margin: 0;
			padding: 5px 20px 10px 20px;
			max-width: 300px;
			text-align: center;
			background-color: var(--color_secondary);
			color: white;
			font-size: 1.1rem;
			line-height: 1.2;
			text-wrap:balance;
			border-radius: 3px;
			box-shadow: 0 5px 5px 0 rgb(0 0 0 / 20%);
		}
		.form-element[data-type="text7rows"] .fw em {	
			top: -18px;
			bottom:auto;
		}
		.form-element .fw em:after {
			top: 100%;
			left: 50%;
			border: solid transparent;
			content: "";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-color: rgba(0,0,0,0);
			border-top-color:var(--color_secondary);
			border-width: 10px;
			margin-left: -10px;
		}
		.form-element[data-mandatory="1"] .fw {

		}
		.form-element[data-mandatory="1"][data-invalid="1"] .fw {
			opacity: 1;
			top: 0;
			transition: top 0.5s ease 0.3s, opacity 0.5s ease 0.3s;
		}
		.form-element:has(input.field:focus) .fw {
			opacity: 0;
			top: 10px;
		}

	
	
	
	
	/*							*/
	/*							*/
	/* 		CONDITIONAL			*/
	/*							*/
	/*							*/
	
		.conditional-contents {
			position: relative;
			z-index: 1;
		}
		.XXXconditional-contents {
			.conditional-content {
				display: none;
			}
			&[data-view="0"] .conditional-content[data-label="no-content"] { display: block; }
			&[data-view="1"] .conditional-content[data-label="has-content"] { display: block; }
		}
	
	
	
	
	/*							*/
	/*							*/
	/* 			BUTTONS			*/
	/*							*/
	/*							*/
	
		/* SHARED */
		
			.buttons .button-gap {
				display: inline-block;
				width: 8px;
				height: 1em;
			}


		/* IN FORMS */
		
			form .button {
				display: inline-block;
				position: relative;
				vertical-align: top;
				font-family: PublicSans;
				font-weight: 300;
				font-size: var(--button_fontsize);
				line-height: 1.2;
				padding: 5px 15px;
				text-align: center;
				height: var(--form_element_height);
				transition: box-shadow 0.3s ease;
				border-radius: 2px;
				cursor: pointer;
				border: none;
				appearance:none;
			}
			form .button em {
				display: inline-block;
				position: relative;
				top: 50%;
				transform:translateY(-50%);
			}
			form button.button em {
				top: 0;
				transform:none;
			}
			
			form a.button {
			
			}
			form button.button {
				block-size:var(--form_element_height);
				height: var(--form_element_height);
				inline-size:auto;
				padding-block:0;
				margin-block:0;
				vertical-align: top;
			}
			
			form .button[data-type="1"]       {box-shadow:0 0 0 0 var(--shade_medium);background-color: var(--shade_medium);color: var(--color_primary);}
			form .button[data-type="1"]:hover { box-shadow:0 0 0 2px var(--shade_medium); }
			form .button[data-type="2"]       { box-shadow:0 0 0 0 var(--color_secondary); background-color:var(--color_secondary); color: white; }
			form .button[data-type="2"]:hover { box-shadow:0 0 0 2px var(--color_secondary); }

			form .buttons[data-template="1"] {
				.button {
					display: block;
					width: 100%;
				}
			}
			/* single button at the center */

				form .buttons[data-template="2"] {
					text-align: center;
					.button[data-type="2"] { padding-inline:var(--button_inline_padding); }
				}

			/* multiple buttons left and right side */

				form .buttons[data-template="3"] { text-align: left; }
				form .buttons[data-template="4"] { text-align: right; }

				form .buttons[data-template="3"],
				form .buttons[data-template="4"] {	
					.button[data-type="2"] { padding-inline:var(--form_element_height); }
					.button[data-type="3"]:before { content:""; display: block; position: absolute; bottom:5px; height: 2px; left:0px; width: 100%; background-color: var(--color_border); transition:all .5s ease; }
					.button[data-type="3"]:hover:before { opacity: 1; background-color: var(--color_secondary); left: -5px; width: calc(100% + 10px); }

				}
				form .buttons[data-template="3"] {
					.button[data-type="3"] { float: right; }
				}
				form .buttons[data-template="4"] {
					.button[data-type="3"] { float: left; }
				}
			
		/* IN FIGURE CAPTIONS */

			figcaption .button {
				display: inline-block;
				position: relative;
				vertical-align: top;
				font-size: var(--button_fontsize);
				padding: 5px 15px;
				text-align: center;
				height: var(--form_element_height);
				transition: box-shadow 0.3s ease;
				border-radius: 2px;
				i {
					display: inline-block;
					position: relative;
					top: 50%;
					transform:translateY(-50%);
					background-image: url("../../images/assets/negative/arrow-2-right.svg");
					background-repeat: no-repeat;
					background-size: contain;
					width:  17px;
					height: 17px;
					float: right;
					margin: 0 0 0 8px;
					background-color: yellowgreen;
					background-color: transparent;
				}
				em {
					display: inline-block;
					position: relative;
					top: 50%;
					transform:translateY(-50%);
				}
			}
			figcaption .button[data-type="2"]       { box-shadow:0 0 0 0 var(--color_secondary); background-color:var(--color_secondary); color: white; }
			figcaption .button[data-type="2"]:hover { box-shadow:0 0 0 2px var(--color_secondary); }
			
		/* IN TITLES */
		
			html[data-pag="my-classes"] .conditional-content .buttons,
			html[data-pag="products"]      .conditional-content .buttons {
				float:right;
				transform: translateY(calc(-100% - 10px));
			}
			html[data-pag="my-classes"] .conditional-content .buttons a.button,
			html[data-pag="products"]      .conditional-content .buttons a.button {
				
			}
		
		/*							*/
		/*			HACKS 			*/
		/*							*/

			input:-webkit-autofill,
			textarea:-webkit-autofill,
			select:-webkit-autofill {
				-webkit-text-fill-color: inherit !important;
				transition: background-color 5000s ease-in-out 0s;
			}
	
			


	/*							*/
	/*							*/
	/*		HERO				*/
	/*							*/
	/*							*/
	
		.block[data-label="hero"] {
			aspect-ratio:8/3;
			position: relative;
			overflow: hidden;
			border-radius: 5px;
		}
		.block[data-label="hero"] .dim {
			position: absolute;
			inset:0;
			background-color: rgba(0,0,0,0.30);
		}
		.block[data-label="hero"] figure {
			position: absolute;
			inset:0;
			background-size: cover;
			background-position: center center;
		}
		.block[data-label="hero"] figcaption {
			position: absolute;
			left:   30px;
			bottom: 30px;
			color: white;
			font-family: Quicksand;
		}
		.block[data-label="hero"] figcaption h1 {
			font-family: inherit;
			font-size: 2.75rem;
			line-height:1.2;
		}
		.block[data-label="hero"] figcaption h2 {
			font-family: inherit;
			font-size: 1.75rem;
			line-height:1.2;
		}
		.block[data-label="hero"] .buttons {
			margin-top: 25px;
		}
	
	/*							*/
	/*							*/
	/*		BANNERS				*/
	/*							*/
	/*							*/
	
		.bottom-banner {
			margin-top: 30px;
			border-radius: 3px;
			overflow: hidden;
		}
		.bottom-banner figure {
			position: relative;
			background-color: orange;
			aspect-ratio:9/1;
			background-image:url("../../images/banner/1.webp");
			background-size: cover;
		}
		.bottom-banner figure {
			& .dim {
				position: absolute;
				inset:0;
				z-index: 0;
				background-color: rgba(0,0,0,0.65);
			}
			& .picto {
				background-color: gray;
				position: absolute;
				width:  auto;
				height: 60%;
				aspect-ratio:1/1;
				left: 18px;
				top: 50%;
				transform: translateY(-50%);
				aspect-ratio:1/1;
				background-image:url("../../images/icon/class/1.webp");
				background-size: cover;
				background-repeat: no-repeat;
				z-index: 1;
			}
			& a {
				display: block;
				position: absolute;
				inset:0;
				z-index: 1;
			}
			& .logo {
				position: absolute;
				right: 15px;
				top: 15px;
				height: 60%;
				aspect-ratio:3.8/1;
				background-color: white;
			}
			& .logo:before {
				position: absolute;
				content:"";
				display: block;
				inset:9px;
				background-image: url("../../images/logos.svg");
				background-size: contain;
				background-position: center center;
				background-repeat: no-repeat;
			}
			& figcaption {
				position: absolute;
				left: 95px;
				width: calc(70% - 95px);
				top: 50%;
				transform: translateY(-50%);
				color: white;
				white-space: normal;
				text-wrap:balance;
			}
			
		}
	

	/* CONDITIONAL BUTTONS */
	
		html[data-pag="dashboard" ] .button[data-behavior="my-classes"]    { display: none!important; }
		html[data-pag="dashboard" ] .button[data-behavior="products"     ] { display: none!important; }

		html[data-pag="my-classes"] .button[data-behavior="dashboard" ]    { display: none!important; }
		html[data-pag="my-classes"] .button[data-behavior="dashboard" ]    { display: none!important; }

		html[data-pag="products"     ] .button[data-behavior="dashboard" ] { display: none!important; }
		html[data-pag="products"     ] .button[data-behavior="dashboard" ] { display: none!important; }

	
	

	/* TABLE */


		/* label descriptions below table or grid content */
	
				ul.access-labels {
					list-style: none;
					margin: 15px 0 15px 0;
					padding: 0;
					color: #666;
					white-space: normal;
				}
				ul.access-labels > li {
					display: inline-block;
					vertical-align: top;
					height: 20px;
					margin: 0 15px 10px 0;
					white-space: nowrap;
				}
				ul.access-labels > li i {
					display: block;
					position: relative;
					width:       20px;
					height:      20px;
					margin: 0 0 -20px 0;
					background-color: #EEE;
					background-size: 16px;
					background-repeat: no-repeat;
					background-position: center;
					border-radius: 1px;
				}
				ul.access-labels > li em {
					display: block;
					position: relative;
					top: 50%;
					transform:translateY(-50%);
					margin: 0 0 0 25px;
					font-style: normal;
					font-size: 0.9rem;
					line-height: 1.2;
				}

				ul.access-labels > li[data-type="download"      ] i { background-image: url("../../images/assets/negative.small/download_1.svg"); }
				ul.access-labels > li[data-type="online"        ] i { background-image: url("../../images/assets/negative.small/arrow-2-right.svg");  }

				ul.access-labels > li[data-access="full-allowed"] i { background-color:var(--color_secondary); }
				ul.access-labels > li[data-access="demo-allowed"] i { background-color:#333333 }
				ul.access-labels > li[data-access="not-allowed" ] i { background-color:#B6B6B6; }
				
				/* label descriptions is hidden, when no content */
				
				.block[data-count="0"] ul.access-labels { display: none; }

	
	
	
	
	
	
	
	/* POPUP */
	
	
	
	
	/* DIALOG */
	




	
	/* FOOTER */
	
		footer {
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			left:0;bottom:0;right:0;
			height: var(--footer_height);
			background-color:var(--bar);
			.mirror {
				/* display: flex; */
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content:flex-start;
				align-items: center;
				
				
				
				.component[data-component="footer-info-bar"]{
					width: auto;
					width: 100%;
					.blocks ul {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						column-gap:15px;
						color: white;
						
						
						
						
						
						
						li {
							/* display: inline-flex; */
							
							
							
							& a {
								white-space:nowrap;
							}
							& span ~ a {
								margin-left: 0.25em;
							}
						}
						li[pos="right"] {
							margin-left: auto;
						}
					}
				}
			}
		}
		html[data-lgn="1"] footer {
			width: 100%;
			position: relative;
			left: 50%;
			transform: translateX(-50%);
		}
		html[data-lgn="1"] .footer-placeholder {
			height: 0; 
		}


	
	/* COPIES and TRANSLATIONS */
	
	
	/*							*/
	/*							*/
	/* 			PAGES 			*/
	/*							*/
	/*							*/
	
		html                              main .container .mirror.inner {width: 100%;/* background-color: rgba(229,227,225,1.00); */}
		html                              main .container .columns .column .mirror.inner { width: auto; }
		
		
		/* My classes */
		/* My products */

		html[data-pag="dashboard"]  .block[data-label="my-classes"],
		html[data-pag="dashboard"]  .block[data-label="products"],
		html[data-pag="dashboard"]  .block[data-label="other-products"],
		html[data-pag="my-classes"] .block[data-label="my-classes"],
		html[data-pag="products"]   .block[data-label="products"],
		html[data-pag="products"]   .block[data-label="other-products"]
		html[data-pag="help"]       .block[data-label="browse-by-topic"],
		html[data-pag="help"]       .block[data-label="frequently-asked-questions"],
		html[data-pag="help"]       .block[data-label="my-classes"],
		html[data-pag="help"]       .block[data-label="products"]{
			margin-top: 10px;
		}

		html[data-pag="dashboard"]  .block[data-label="my-classes"] h2,
		html[data-pag="my-classes"] .block[data-label="my-classes"] h2,
		
		html[data-pag="dashboard"]  .block[data-label="products"]                   h2,
		html[data-pag="dashboard"]  .block[data-label="other-products"]             h2,
		html[data-pag="products"]   .block[data-label="products"]                   h2,
		html[data-pag="products"]   .block[data-label="other-products"]             h2,
		html[data-pag="help"]       .block[data-label="browse-by-topic"]            h2,
		html[data-pag="help"]       .block[data-label="frequently-asked-questions"] h2,
		html[data-pag="help"]       .block[data-label="my-classes"]                 h2,
		html[data-pag="help"]       .block[data-label="products"]                   h2 {
		font-family: Quicksand;
		font-weight: 700;
		margin-bottom: 10px;
		font-size: 1.7rem;
		pointer-events: none;
		}
		
		
		.block[data-template="1"] .conditional-content[data-label="no-content"] {}
		.block[data-template="1"] .conditional-content[data-label="has-content"] {}
		
		.block[data-template="1"] .conditional-content[data-label="no-content"] {
			text-align: center;
			text-wrap: balance;
		}
		.block[data-template="1"] .conditional-content[data-label="no-content"] {			
			.buttons {
				position: relative;
				height: 30px;
				margin-top: 25px;
				margin-bottom: 25px;
			}
			figure.picto {
				display: inline-block;
				background-color: var(--shade_light);
				background-repeat: no-repeat;
				background-position: center center; 
				background-size: 70% 70%;
				width:  128px;
				height: 128px;
				border-radius: 50%;
			}
			XXXXfigcaption {
				text-wrap: balance;
				padding-inline: 20%;
				margin-block:15px 30px;
			}
		}
		.block[data-template="1"] .conditional-content[data-label="has-content"] {
			.buttons {
				position: relative;
				height: var(--form_element_height);
				margin: 0 0 calc(-1 * var(--form_element_height)) 0;
				text-align: right;
				transform: translateY(calc(-100% - 0px));
			}
		}
		.block[data-label="my-classes"]     figure.picto { background-image: url("../../images/creative/my-classes.webp"); }
		.block[data-label="products"]       figure.picto { background-image: url("../../images/creative/books.webp"); }
		.block[data-label="other-products"] figure.picto {  }
		
		/* shared */
		
		.block[data-template="1"] .conditional-content .buttons a.button {
			padding: 0px 15px 4px 15px;
			border: 1px solid var(--color_secondary);
			border-bottom-width: 2px;
			border-right-width: 2px;
			font-size: 1rem;
			line-height: 1.2;
			background-color: white;
			color: var(--color_secondary);
			box-shadow:0 0 0 0px var(--color_secondary);
			transition: box-shadow 0.3s ease;
			border-radius: 3px;
			height: var(--form_element_height);
			display: inline-block;
			vertical-align: top;
		}
		.block[data-template="1"] .conditional-content .buttons a.button:hover {
			box-shadow:0 0 0 1px var(--color_secondary);
		}
		.block[data-template="1"] .conditional-content .buttons a.button i {
			display: inline-block;
			vertical-align: top;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
			width: 20px;
			height: var(--form_element_height);
			margin: 0 5px 0 0;
			top: calc(50% + 2px);
			transform: translateY(-50%);
			position: relative;
		}
		.block[data-template="1"] .conditional-content .buttons a.button[data-label="add"   ] i { background-image: url("../../images/assets/color/plus.svg"); }
		.block[data-template="1"] .conditional-content .buttons a.button[data-label="edit"  ] i {background-image: url("../../images/assets/color/edit.svg");vertical-align: top;}
		.block[data-template="1"] .conditional-content .buttons a.button[data-label="remove"] i { background-image: url("../../images/assets/color/trash.svg"); }
		
		.block[data-template="1"] .conditional-content .buttons a.button em {
			display: inline-block;
			vertical-align: middle;
			/* height: var(--form_element_height); */
			/* line-height: var(--form_element_height); */
			top: 50%;
			position: relative;
			transform: translateY(-50%);
		}
			
		.buttons {
			pointer-events: none;
			/* text-align: right; */
		}
		.buttons .button {
			pointer-events: all;
		}


	/*							*/
	/*							*/
	/* 		PRODUCTS 			*/
	/*							*/
	/*							*/
	
		ul.products {
			display: block;
			list-style: none;
			margin: 0 0 -21px 0;
			padding: 21px 0 0 0;
			font-size: 0;
			line-height: 0;
			width: calc(100% + 20px);
			white-space: normal;
		}
		.products .product {
			display: inline-block;
			position: relative;
			box-sizing: border-box;
			list-style: none;
			background-color: white;
			border: 1px solid var(--color_border);
			border-bottom-width: 2px;
			border-right-width: 2px;
			vertical-align: top;
			height: 128px;
			margin: 0 20px 20px 0;
			overflow: hidden;
			border-radius: 3px;
		}
		.products .product .inset {
			position: absolute;
			inset: 0;
			padding: 15px;
		}
		html[data-pag="dashboard"] .block[data-label="other-products"] .products .product .inset,
		html[data-pag="products"] .block[data-label="other-products"] .products .product .inset {
			padding: 0 0 0 15px;
			top:50%;
			transform:translateY(-50%);
		}
		html[data-pag="dashboard"] .block[data-label="other-products"] .products .product .inset figure,
		html[data-pag="products"] .block[data-label="other-products"] .products .product .inset figure {
			transform: translate(5px,-10px);
		}
		
		.products .product label {
			/* this is the click area of the checkbox/radio */
			position: absolute;
			inset:0;
			padding: 15px;
		}
		.products .product label input[type="checkbox"],
		.products .product label input[type="radio"] {
			position: absolute;
			opacity: 0;
		}
		
		.products .product {
			transition: border 0.3s ease;
		}
		.products .product:has(input[type="radio"]:checked),
		.products .product:hover {
			border-color:var(--color_secondary);
		}
		.Xproducts .product:has(input[type="radio"]:checked),
		.Xproducts .product:hover {
			opacity: 1!important;
			filter: none!important;
		}
		.Xproducts:has(.product input[type="radio"]:checked) .product:has(input[type="radio"]:not(:checked)){
			opacity: .3;
			filter: grayscale(1);
		}
		
		.products figure {
			position: relative;
			width: 85px;
			height: 105px;
			margin-bottom: -105px;
			left: -10px;
			top: -7px;
			background-color: #EEE;
			background-color: transparent;
			background-repeat: no-repeat;
			background-size: 100%;
			border:3px solid #EEE;
			border:none;
			box-shadow: inset 0 0 0 1px var(--color_border);
			box-shadow: none;
			/*overflow: hidden;*/
			background-position: center;
		}
		html[data-pag="products"]      .block[data-label="products"]       .products figure,
		html[data-pag="dashboard"]     .block[data-label="products"]       .products figure,
		html[data-pag="dashboard"]     .block[data-label="other-products"] .products figure,
		html[data-pag="material-bank"] .block[data-label="material-bank"]  .products figure,
		html[data-pag="products"]      .block[data-label="other-products"] .products figure {
			background-size: contain;
		}

		html[data-pag="dashboard"]     .block[data-label="products"] .products .product,
		html[data-pag="products"]      .block[data-label="products"] .products .product,
		html[data-pag="products"]      .block[data-label="other-products"] .products .product {
			height: 118px;
		}

		html[data-pag="dashboard"]     .block[data-label="other-products"] .products figure,
		html[data-pag="products"]      .block[data-label="other-products"] .products figure {
			width: 85px;
			height: 85px;
			margin-bottom: -85px;
			box-shadow: 0 3px 10px 0 #00000044;
		}
		
		.products .product[data-has_icon=""] figure {
			background-color: var(--color_secondary);
			color: white;
			text-align: center;
		}
		.products .product[data-has_icon=""] figure .alternate-icon {
			position: relative;
			top: 50%;
			transform:translateY(-50%);
			font-size: var(--fontsize_chapter);
			font-size: var(--chapter_fontsize);
			font-size: var(--title_fontsize);
			font-size: var(--title_fontsize);
			font-size: var(--subtitle_fontsize);
		}
		
		/* state */
		
		.products .product                   .alternate-icon { display: none; }
		.products .product[data-has_icon=""] .alternate-icon { display: block; }
		.products .product[data-downloaded="1"] { pointer-events:none; }
		
		.products figcaption {
			margin: 0 30px 0 80px;
			padding: 0 0 0 0;
			top: 0px;
			position: relative;
		}
		html[data-pag="dashboard"]     .block[data-label="other-products"] .products figcaption,
		html[data-pag="products"]      .block[data-label="other-products"] .products figcaption {
			margin: 0 0 0 90px;
		}
		
		.products figcaption h3 {
			font-weight: 600;
			font-size: var(--smaller_paragraph_fontsize);
			line-height: var(--smaller_paragraph_leading);
			margin-bottom: 3px;
			line-clamp: 3;
			padding-right: 5px;
		}
		.products figcaption h4 {
			font-weight: 400;
			font-size: var(--smaller_paragraph_fontsize);
			line-height: var(--smaller_paragraph_leading);
			margin-bottom: 3px;
			line-clamp: 2;
			padding-right: 5px;
		}
		
		.products figcaption p {
			font-size: var(--smallest_paragraph_fontsize);
			line-height: var(--small_paragraph_leading);
			/* height: 50px; */
			/* overflow: hidden; */
			opacity: 0.6;
		}
		html[data-pag="material-bank"] .products .product figcaption p {font-size: var(--small_paragraph_fontsize);line-height: var(--small_paragraph_leading);color: var(--text_color_medium);}
		html[data-pag="my-classes"]    .products .product figcaption p { font-size: var(--small_paragraph_fontsize); line-height: var(--small_paragraph_leading); color: var(--color_primary);}
		
		.products .product[data-online="1"] figcaption p:before { content:"Online"; text-transform: uppercase; };
		
		
		.labels {
			position: absolute;
			z-index: 1;
		}
		.labels .label {
			position: absolute;
			margin: -5px 0 0 -5px;
			padding: 3px 15px 4px 15px;
			color: white;
			font-weight: 400;
			font-size: 0.85rem;
			line-height: 1.2;
			transform:rotate(-3deg);
		}
		li.product[data-label="new"] .labels  .label em {}
		li.product[data-label="downloaded"] .labels  .label em {}
		
		
		li.product[data-new="1"]        .labels .label { background-color: var(--color_secondary); }
		li.product[data-downloaded="1"] .labels .label { background-color: var(--text_color_medium); }
		
				
		li.product[data-new=""       ] .labels .label[data-label="new"]        { display: none; }
		li.product[data-downloaded=""] .labels .label[data-label="downloaded"] { display: none; }
		
		li.product .buttons {
			position: absolute;
			right: 15px;
			top:   15px;
		}
		li.product .buttons .button {
			display: inline-block;
			width:  32px;
			height: 32px;
			margin: 0 0 0 10px;
			padding: 2px 0 0 0px;
			background-color: var(--color_secondary);
			text-align: center;
			border: none;
			appearance: none;
			-webkit-appearance: none;
		}
		li.product[data-downloaded="1"] .buttons .button { background-color: var(--text_color_medium); }
		li.product .buttons .button i {
			display: block;
			width:  24px;
			height: 24px;
			background-image: url("../../images/assets/negative/download.svg");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
		}
		
		/* exceltions on pages */

		html[data-pag="dashboard"]      .products .product { width: calc(33.33% - 20px);}
		html[data-pag="material-bank"]  .products .product {width: calc(33.33% - 20px);height: 118px;}
		html[data-pag="curriculum"]     .products .product { width: calc(33.33% - 20px);height: 108px;}
		XXXhtml[data-pag="my-classes"]  .products .product { width: calc(33.33% - 20px);}
		html[data-pag="my-class"]       .products .product { width: calc(33.33% - 20px);}
		html[data-pag="products"]       .products .product { width: calc(33.33% - 20px);}
		html[data-pag="product-family"] .products .product { width: calc(33.33% - 20px);}
		html[data-pag="product"]        .products .product { width: calc(33.33% - 20px);}
		html[data-pag="product-demo"]   .products .product { width: calc(50.00% - 20px);}
		html[data-pag="products"] .block[data-label="other-products"] .products .product { width: calc(33.333% - 20px);}
		
		.block[data-label="other-products"] .products .product {height: 108px;}
		.block[data-label="other-products"] .products .product figure { width: 85px; height: 85px; margin-bottom: -85px; box-shadow: 0 0 0 1px rgba(123,123,123,0.5);	}
		.block[data-label="other-products"] .products .product figcaption {
	top: -15px;
}
		
		.block[data-label="my-class"      ] .products .product {height: 108px;} 
		.block[data-label="my-class"      ] .products .product figure {width: 65px;height: 85px; margin-bottom: -85px; box-shadow: 0 0 0 1px rgba(123,123,123,0.5);}
		.block[data-label="my-class"      ] .products .product figcaption {margin-left:75px; }
		
		.block[data-label="other-products-demo"] .products .product {height: 108px;} 
		.block[data-label="other-products-demo"] .products .product figure {width: 65px;height: 85px; margin-bottom: -85px; box-shadow: 0 0 0 1px rgba(123,123,123,0.5);}
		.block[data-label="other-products-demo"] .products .product figcaption {margin-left:75px; }

		html[data-pag="my-class"] .products[data-cover="large"] .product {
			XXXheight: 95px;
		}
		html[data-pag="my-class"] .products[data-cover="large"] figure {
			width: auto;
			height: 60px;
			margin-bottom: -60px;
			aspect-ratio:0.7125 / 1;
		}
		html[data-pag="my-class"] .products[data-cover="large"] figcaption {margin-left: 47px;}
		
																
													
	/*							*/
	/*							*/
	/* 		FILES 				*/
	/*							*/
	/*							*/
		
		ul.controls {
			list-style: none;
			display: block;
			margin:0 0 25px 0;
			padding: 0;
		}
		ul.controls li {
			display: inline-block;
			vertical-align: top;
			list-style: none;
			margin: 0; padding: 0;
		}
		.controls {
		
			.filters {
				position: relative;
				margin: 0; padding: 0;
				font-size: 0; line-height: 0;
			}
			.filters .filter,
			.filters .filter-gap {
				display: inline-block;
				position: relative;
				vertical-align: top;
				height: var(--filter_height);
			}
			.filters .filter input[type="text"],
			.filters .filter select {
				display: block;
				position: relative;
				box-sizing: border-box;
				width: auto;
				height: var(--filter_height);
				margin: 0 0 calc(var(--filter_height) * -1) 0;
				position: relative;
				border:1px solid white;
				outline: none;
				background-color: var(--shade_light);
				cursor: default;
			}
			/* select form element to choose from multiple layouts */
			
			.filters .filter select[name="view_type"] {
				width: 50px;
				overflow: hidden;
				text-indent: -1000em;
			}
			.filters .filter select[name="view_type"] ~ i {
				display: block;
				position: relative;
				width: 20px;
				height: 20px;
				margin: 0 0 -20px 0;
				left: 15px;
				top:  15px;
				background-size: 30px;
				background-position: center center;
				background-repeat: no-repeat;
				opacity: 0.75;
				pointer-events: none;
			}
			.filters .filter:has(select[name="view_type"] option[value="list"]:checked) i { background-image: url("../../images/assets/positive/menu.svg"); }
			.filters .filter:has(select[name="view_type"] option[value="grid"]:checked) i { background-image: url("../../images/assets/positive/grid.svg"); }
			
			/* radio button form element to choose from multiple layouts */

			.filters .filter[data-label="view"] {
				width:  auto;
				height: var(--filter_height);
				outline: 1px solid red;
				outline: none;
			}
			.filters .filter[data-label="view"] label {
				cursor: pointer;
				width:var(--filter_height);
				height: var(--filter_height);
				background-color:  var(--shade_light);
			}
			.filters .filter input[type="radio"][name="view_type"] {
				position: absolute;
				opacity: 0;
				z-index: 3;
				cursor: pointer;
			}
			.filters .filter input[type="radio"][name="view_type"] ~ i {
				display: block;
				position: relative;
				z-index: 1;
				width:       30px;
				height:      30px;
				margin: 0 0 -30px 0;
				left: 10px;
				top:  10px;
				background-size: 33px;
				background-position: center center;
				background-repeat: no-repeat;
				opacity: 0.75;
				pointer-events: none;
			}
			.filters .filter input[type="radio"][name="view_type"] ~ i:before {
				content:"";
				display: block;
				position: absolute;
				inset:0;
				background-size: inherit;
				background-position: inherit;
				background-repeat: inherit;
				opacity: 0;
				pointer-events: none;
			}
			
			.filters .filter label[data-label="list"] i        { background-image: url("../../images/assets/positive/grid.svg"); }
			.filters .filter label[data-label="grid"] i        { background-image: url("../../images/assets/positive/menu.svg"); }
			.filters .filter label[data-label="list"] i:before { background-image: url("../../images/assets/color/grid.svg"); }
			.filters .filter label[data-label="grid"] i:before { background-image: url("../../images/assets/color/menu.svg"); }
			.filters .filter label[data-label="list"]:hover i:before { opacity:1; }
			.filters .filter label[data-label="grid"]:hover i:before { opacity:1; }
			.filters .filter[data-label="view"]                                               label                    { display:none; }
			.filters .filter:has(input[type="radio"][name="view_type"][value="list"]:checked) label[data-label="grid"] { display:block; }
			.filters .filter:has(input[type="radio"][name="view_type"][value="grid"]:checked) label[data-label="list"] { display:block; }


 			
			.filters .filter input[type="text"] ~ .filter-placeholder {
				display: block;
				position: relative;
				width: inherit;
				height: var(--filter_height);
				font-size: 1.1rem;
				line-height: var(--filter_height);
				pointer-events: none;
				width: calc(100% + 25px);
			}
			.filters .filter input[type="text"] ~ .filter-placeholder i {
				display: inline-block;
				position: relative;
				vertical-align: top;
				height: var(--filter_height);
				aspect-ratio:1/1;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 40% 40%;
			}
			.filters .filter input[type="text"] ~ .filter-placeholder em {
				transition: opacity 0.3s ease;
			}
			
			.filters .filter[data-label="product"]        { }
			.filters .filter[data-label="tag"]            { }
			.filters .filter[data-label="tags"]           { }
			.filters .filter[data-label="age_group"]      { width: auto; }
			.filters .filter[data-label="level"]          { width: auto; }
			.filters .filter[data-label="skill"]          { width: auto; }
			.filters .filter[data-label="material"]       { width: 200px; }
			.filters .filter[data-label="product_group"]  { width: 200px; }
			.filters .filter[data-label="product_family"] { width: 200px; }
			.filters .filter[data-label="view"]           {}
			
			.filters .filter-gap { width: 10px; }
			.filters .filter[data-label="text"]           input[type="text"] {min-width: 250px;}
			.filters .filter[data-label="product"]        input[type="text"] { min-width: 100px; cursor:context-menu; }
			.filters .filter[data-label="tag"]            input[type="text"] { min-width: 100px; cursor:context-menu; }
			.filters .filter[data-label="tags"]           input[type="text"] { min-width: 100px; cursor:context-menu; }
			.filters .filter[data-label="age_group"]      input[type="text"] { width: auto; cursor:context-menu; width: 200px; }
			.filters .filter[data-label="level"]          input[type="text"] { width: auto; cursor:context-menu; }
			.filters .filter[data-label="skill"]          input[type="text"] { width: auto; cursor:context-menu; }
			.filters .filter[data-label="material"]       input[type="text"] {width: auto;cursor:context-menu;width: calc(100% + 0px);}
			.filters .filter[data-label="product_group"]  input[type="text"] {width: auto;cursor:context-menu;width: calc(100% + 0px); }
			.filters .filter[data-label="product_family"] input[type="text"] {width: auto;cursor:context-menu;width: calc(100% + 0px); }
			.filters .filter[data-label="view"]            select {cursor: context-menu;appearance: none;}

			.filters .filter[data-label="product"]        input[type="text"]:hover,
			.filters .filter[data-label="tag"]            input[type="text"]:hover,
			.filters .filter[data-label="tags"]           input[type="text"]:hover,
			.filters .filter[data-label="age_group"]      input[type="text"]:hover,
			.filters .filter[data-label="level"]          input[type="text"]:hover,
			.filters .filter[data-label="skill"]          input[type="text"]:hover,
			.filters .filter[data-label="material"]       input[type="text"]:hover,
			.filters .filter[data-label="product_group"]  input[type="text"]:hover,
			.filters .filter[data-label="product_family"]  input[type="text"]:hover {
				/*
				background-color: var(--shade_medium); 
				background-color: white;
				*/
			}

			.filters[data-expanded="tags"           ] .filter[data-label="tags"           ] input,
			.filters[data-expanded="tag"            ] .filter[data-label="tag"            ] input,
			.filters[data-expanded="product"        ] .filter[data-label="product"        ] input,
			.filters[data-expanded="age_group"      ] .filter[data-label="age_group"      ] input,
			.filters[data-expanded="level"          ] .filter[data-label="level"          ] input,
			.filters[data-expanded="skill"          ] .filter[data-label="skill"          ] input,
			.filters[data-expanded="material"       ] .filter[data-label="material"       ] input,
			.filters[data-expanded="product_group"  ] .filter[data-label="product_group"  ] input,
			.filters[data-expanded="product_family" ] .filter[data-label="product_family" ] input{
				background-color: white;
				border:1px solid var(--color_border);
				border-bottom-color: white;
			}
			.filters .filter[data-expanded="0"] {
				z-index: 10000;
			}
			.filters .filter[data-label="text"] .empty-search-text {
				appearance:none;
				display: block;
				position: relative;
				float: right;
				width:         16px;
				height:        16px;
				border-radius: 16px;
				margin:   0 0 -16px 0;
				padding: 0;
				top: 50%;
				transform:translate(-50%,-50%);
				background-color: rgba(0,0,0,0.10);
				background-image: url("../../images/assets/negative/clear.svg");
				background-repeat: no-repeat;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 90%;
				border:none;
				cursor: pointer;
				transition: opacity 0.3s ease, background-color 0.3s eae;
			}
			.filters .filter[data-label="text"] .empty-search-text:hover { background-color: rgba(0,0,0,0.20); }
			.filters .filter[data-label="text"][data-filled="0"] .empty-search-text { opacity: 0; pointer-events: none; }
			.filters .filter[data-label="text"][data-filled="1"] .empty-search-text { opacity: 1; pointer-events: all; }
			
			.filters .filter-buttons {
				display: inline-block;
				position: relative;
			}
			.filters .filter-buttons a.filter-button {
				display: inline-block;
				margin: 2px 0 0 0;
				padding: 0 15px 0 15px;
				border-bottom-width: 2px;
				border-right-width: 2px;
				font-size: 1rem;
				line-height: calc(var(--filter_height) - 3px);
				height: calc(var(--filter_height) - 3px);
				background-color: var(--color_secondary);
				color: white;
				box-shadow: 0 0 0 0px var(--color_secondary);
				transition: box-shadow 0.3s ease;
				border-radius: 3px;
			}
			.filters .filter-buttons a.filter-button:hover {
				box-shadow: 0 0 0 1px var(--color_secondary);
			}
			

			.filters .filter[data-label="product"]        input[type="text"]:hover ~ .filter-placeholder i,
			.filters .filter[data-label="tags"]           input[type="text"]:hover ~ .filter-placeholder i,
			.filters .filter[data-label="tag"]            input[type="text"]:hover ~ .filter-placeholder i,
			.filters .filter[data-label="age_group"]      input[type="text"]:hover ~ .filter-placeholder i,
			.filters .filter[data-label="level"]          input[type="text"]:hover ~ .filter-placeholder i,
			.filters .filter[data-label="skill"]          input[type="text"]:hover ~ .filter-placeholder i,
			.filters .filter[data-label="material"]       input[type="text"]:hover ~ .filter-placeholder i,
			.filters .filter[data-label="product_family"] input[type="text"]:hover ~ .filter-placeholder i,
			.filters .filter[data-label="product_group"]  input[type="text"]:hover ~ .filter-placeholder i {background-image: url("../../images/assets/color/arrow-1-down.svg"); opacity: 1; }

			.filters .filter[data-label="text"]           .filter-placeholder i { background-image: url("../../images/assets/positive/search.svg"); }
			.filters .filter[data-label="product"]        .filter-placeholder i,
			.filters .filter[data-label="tags"]           .filter-placeholder i,
			.filters .filter[data-label="tag"]            .filter-placeholder i,
			.filters .filter[data-label="age_group"]      .filter-placeholder i,
			.filters .filter[data-label="level"]          .filter-placeholder i,
			.filters .filter[data-label="skill"]          .filter-placeholder i,
			.filters .filter[data-label="material"]       .filter-placeholder i,
			.filters .filter[data-label="product_family"] .filter-placeholder i,
			.filters .filter[data-label="product_group"]  .filter-placeholder i { background-image: url("../../images/assets/positive/arrow-1-down.svg"); opacity: 0.5; }

			.filters .filter input[name="search"] {
				font-size: 1.1rem;
				padding-left:45px;
				cursor: text;
			}
			.filters .filter input[name="search"]:focus {/* background-color: white; *//* box-shadow: 0 0 0 1px var(--color_border); */}			
			.filters .filter .filter-placeholder em { opacity: 0.3; }
			.filters .filter:has(input[name="search"]:focus) .filter-placeholder em { opacity: 0.3; }
			.filters .filter[data-filled="1"] input[name="search"] ~ .filter-placeholder em { opacity: 0; }

			.items {
				display: inline-block;
				text-align: right;
				font-size: 1.25rem;
				line-height: var(--filter_height);
				height:  var(--filter_height);
				color: var(--text_color);
			}
			.filters { width:calc(100% - 110px); }
			.items   { width:            110px; }
			
			.items .buttons {}
			.items .buttons a.button {}
		}
		
		.block {
			span[data-amount="single"]   { display: none; }
			span[data-amount="multiple"] { display:inline-block; }
		}
		.block[data-count="1"] {
			span[data-amount="single"]   { display: inline-block; }
			span[data-amount="multiple"] { display:none; }
		}
		.filters .filter-options {
			position: absolute;
			background-color: white;
			max-height: 80vh;
			padding: 10px 10px 15px 10px;
			border: 1px solid var(--color_border);
			box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15);
			overflow: hidden;
			overflow-y: overlay;
		}
		.filters .filter-options ul {
			list-style: none;
			display: block;
			margin: 0 0 0 0; 
			padding: 0;
		}
		.filters .filter-options li {
			list-style: none;
			display: block;
			white-space: nowrap;
			margin: 0 0 -5px 0; 
			padding: 10px 20px;
			border-radius: 2px;
		}
		.filters .filter-options li em {color:#999;}
		
		/* DISABLE, which is not allowed */
		
		.filters .filter-options li[data-allowed="0"] {
		}
		.filters .filter-options li[data-allowed="0"] .amount {/* opacity: 0; */}
		
		/* HIGHLIGHT materials, that i own */

		.filters .filter-options li[data-access="0"] em {
		}
		.filters .filter-options li[data-access="1"] em {
			color: black;
		}
		.filters .filter-options li[data-access="2"] em {
			color: black;
		}
		.filters .filter-options li[data-access="2"] span.amount:before {
			display: inline-block;
			vertical-align: top;
			background-color: #CCC;
			background-color: transparent;
			border: 1px solid var(--color_secondary);
			color: var(--color_secondary);
			font-size: 0.7em;
			font-size: 1;
			line-height: 1.1;
			padding: 3px 5px;
			margin: 0 10px 0 -10px;
			border-radius: 10px;
			content:"DEMÓ";
			position: relative;
			top: 8px;
			pointer-events: none;
			float: left;
		}
		
		/* HIDE ITEMS, THAT HAS ZERO VALUE */
		
		.filters .filter-options li[data-empty="1"] {
			display: none;
		}
		
		.filters .filter-options li:hover {
			background-color: var(--shade_light);
			box-shadow: inset 0 0 0 1px #DDD;
		}
		.filters .filter-options li label {
			display: inline-block;
			white-space: nowrap;
			width: 100%;
		}
		.filters .filter-options li label input[type="checkbox"] {
			position: absolute;
			opacity: 0;
			z-index: 1;
		}
		.filters .filter-options li label input[type="checkbox"] ~ i {
			display: inline-block;
			vertical-align: top;
			position: relative;
			z-index: 2;
			opacity: 1;
			width:  16px;
			height: 16px;
			margin: 0;
			top: 2px;
			border: 1px solid var(--color_border);
			background-color: var(--shade_light);
			background-image: url("../../images/assets/negative.small/checked.svg");
			background-size: 0 0;
			background-repeat: no-repeat;
			background-position: center center;
		}
		.filters .filter-options li:hover label input[type="checkbox"] ~ i {
			border-color: #999;
		}
		.filters .filter-options li label input[type="checkbox"]:checked ~ i {
			background-size: contain;
			background-color: var(--color_secondary);
			border-color: var(--color_secondary);
		}
		.filters .filter-options li label input[type="checkbox"] ~ em {
			display: inline-block;
			vertical-align: top;
			width: auto;
			min-width: 100px;
			max-width: 350px;
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 0 65px 0 10px;
			padding: 0 0 0 0;
		}
		.filters .filter-options li label span.amount {
			display: block;
			float: right;
			position: relative;
			vertical-align: top;
			width: 45px;
			height: 30px;
			margin: 0 0 -30px 0;
			top: -5px;
			font-size: 0.8em;
			line-height: 30px;
			color:#999;
			text-align: right;
			/* display: none; */
		}

		.filters                              .filter-options { display: none; }
		.filters[data-expanded="age_group"]   .filter-options[data-label="age_group"],
		.filters[data-expanded="level"]       .filter-options[data-label="level"],
		.filters[data-expanded="skill"]       .filter-options[data-label="skill"],
		.filters[data-expanded="product"]     .filter-options[data-label="product"],
		.filters[data-expanded="tag"]         .filter-options[data-label="tag"],
		.filters[data-expanded="tags"]        .filter-options[data-label="tags"],
		.filters[data-expanded="material"]    .filter-options[data-label="material"],
		.filters[data-expanded="material"]    .filter-options[data-label="material"],
		.filters[data-expanded="product_group"]  .filter-options[data-label="product_group"],
		.filters[data-expanded="product_family"]  .filter-options[data-label="product_family"]{
			display: block;
			z-index: -1;
			top: 49px;
		}

		.filters[data-expanded="age_group"]  .filter[data-label="age_group"],
		.filters[data-expanded="level"]      .filter[data-label="level"],
		.filters[data-expanded="skill"]      .filter[data-label="skill"],
		.filters[data-expanded="product"]    .filter[data-label="product"],
		.filters[data-expanded="tag"]        .filter[data-label="tag"],
		.filters[data-expanded="tags"]       .filter[data-label="tags"],
		.filters[data-expanded="material"]   .filter[data-label="material"],
		.filters[data-expanded="material"]   .filter[data-label="material"],
		.filters[data-expanded="product_group"] .filter[data-label="product_group"],
		.filters[data-expanded="product_family"] .filter[data-label="product_family"] {
			z-index: 20100;
			display: inline-block;
		}
		/* moving all head tab to the topmost layer to allow direct click */
		.filters[data-expanded="age_group"]  .filter,
		.filters[data-expanded="level"]      .filter,
		.filters[data-expanded="skill"]      .filter,
		.filters[data-expanded="product"]    .filter,
		.filters[data-expanded="material"]   .filter,
		.filters[data-expanded="tag"]        .filter,
		.filters[data-expanded="tags"]       .filter,
		.filters[data-expanded="material"]   .filter,
		.filters[data-expanded="material"]   .filter,
		.filters[data-expanded="product_group"] .filter,
		.filters[data-expanded="product_family"] .filter {
			z-index: 20100;
		}
		.filters[data-expanded="age_group"]  .filter-options-backdrop,
		.filters[data-expanded="level"]      .filter-options-backdrop,
		.filters[data-expanded="skill"]      .filter-options-backdrop,
		.filters[data-expanded="product"]    .filter-options-backdrop,
		.filters[data-expanded="tag"]        .filter-options-backdrop,
		.filters[data-expanded="tags"]       .filter-options-backdrop,
		.filters[data-expanded="material"]   .filter-options-backdrop,
		.filters[data-expanded="material"]   .filter-options-backdrop,
		.filters[data-expanded="product_group"] .filter-options-backdrop 
		.filters[data-expanded="product_family"] .filter-options-backdrop {
			display: block;
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background-color: var(--cover_page_color);
			background-color: rgba(255,255,255,0.7);
			background-color: transparent;
			XXXbackdrop-filter:blur(3px);
			z-index: 2000;
		}

		
		
		
		
		
		
		
		
		
		
		

		
		
		
		
		
		
		
		
		
		
		
		
		

	/*							*/
	/*							*/
	/* 		NAVIGATOR 			*/
	/*							*/
	/*							*/
	
		/* rows per page */

			.navigator {
				position: relative;
				margin: 15px 0 15px 0;
			}
			.navigator .rows-per-page {
				display: inline-block;
				float: right;
				position: relative;
			}
			.navigator .rows-per-page {

				.actual {
					position: relative;
					margin-top: -5px;
					width: 250px;
					width: auto;
					text-align: right;
					vertical-align: top;
				}
				.actual label:after {
					content:"termék/oldal";
					content:"";
				}
				.actual i {
					position: relative;
					z-index: 99;
					width:  16px;
					height: 16px;
					float: left;
					/* margin-bottom: -16px; */
					left: 25px;
					top: 10px;
					pointer-events: none;
					background-image: url("../../images/assets/positive/arrow-1-down.svg");
					background-size: contain;
					background-repeat: no-repeat;
				}
				.actual i:before {
					content:"\eba2"; 
					content:"";
				}
				.actual input {
					display: inline-block;
					position: relative;
					border: 1px solid #CCC;
					border-radius: 0;
					width: 70px;
					height: 36px;
					padding: 9px 5px 5px 20px;
					font-weight: 500;
					text-align: center;
					cursor: context-menu;
					outline: none;
				}
				.actual input:focus {
					z-index: 999;
				}
				.actual .suffix {
					display: inline-block;
					vertical-align: middle;
					position: relative;
					width: 100px;
					width: auto;
					height: 16px;
					text-align: left;
					text-indent: 5px;
					margin-top: -8px;
					white-space: nowrap;
					font-size: var(--smaller_paragraph_fontsize);
					line-height:1;
				}
			}

			/*	chooser popup */

				.navigator .selector {
					position: relative;
				}
				.navigator .rows-per-page ul.items {
					display: block;
					position: absolute;
					width: 200px;
					height: auto;
					margin: -45px 0 0 -55px;
					padding: 15px 5px 7px 15px;
					font-size: 0; 
					line-height: 0;
					transform:translate(0%,-100%);
					border-radius: 8px;
					background-color: #FFFFFF;
					border:1px solid #333333;
					box-shadow: 0 0px 15px 0 rgba(29,58,80,0.50);
					user-select: none;
				}
				.navigator .rows-per-page ul.items:after, .navigator .rows-per-page ul.items:before {
					top: 100%; left: 50%;
					border: solid transparent;
					content: " ";
					height: 0;
					width: 0;
					position: absolute;
					pointer-events: none;
				}
				.navigator .rows-per-page ul.items:after {
					border-color: rgba(255, 255, 255, 0);
					border-top-color: #FFFFFF;
					border-width: 10px;
					margin-left: -10px;
				}
				.navigator .rows-per-page ul.items:before {
					border-color: rgba(255, 255, 255, 0);
					border-top-color: #333333;
					border-width: 11px;
					margin-left: -11px;
				}
				.navigator .rows-per-page ul.items li.item {
					list-style: none;
					display: inline-block;
					text-align: center;
					font-weight: bold;
					font-size: 13px;
					line-height: 32px;
					width:       36px;
					height:      36px;
					border: 1px solid #0064FE;
					border-radius: 3px;
					margin: 0 8px 8px 0;
					padding: 0;
				}
				html:not([class]) body .navigator .rows-per-page ul.items > li.item::before {
					content:"";
				}
				.navigator .rows-per-page ul.items li.item:hover {	
					box-shadow: 0 0 0 2px #0064FE;
				}
				.navigator .page-cover {
					display: block;
					position: fixed;
					left: 0; top:-100px;
					width: 100%; height: calc(100% + 100px);
					background-color: rgba(204,224,255,0.0);
					background-color: rgba(42,51,64,0.3);
					background-color: rgba(42,51,64,0.0);
				}
				.navigator                           .selector { display: none; }
				.navigator[data-chooser_visible="1"] .selector { display: block; }

				.navigator                           .page-cover { display: none; }
				.navigator[data-chooser_visible="1"] .page-cover { display: block; }

		/* pages chooser */

			.navigator .pages {
				position: relative;
				display: inline-block;
				font-size: 0;
				line-height: 0;
				margin: 0; padding: 0;
				box-sizing: content-box;
			}
			.navigator .pages .prefix {
				margin-right: 10px;
				display: inline-block;
				vertical-align: top;
				position: relative;
				width: auto;
				height: 30px;
				margin-bottom: -30px;
				font-size: 13px;
				line-height: 36px;
				text-align: left;
				text-indent: 5px;
				text-indent: 0;
				white-space: nowrap;
			}
			.navigator .pages .navi-button,
			.navigator .pages .page-button {
				text-decoration: none;
				color: inherit;
				display: inline-block;
				vertical-align: top;
				width: 30px;
				height: 30px;
				margin: 0 5px 0 0;
				padding: 0;
				border-radius: 0;
				background-color: white;
				border: 1px solid #CCC;
				pointer-events:all;
				user-select: none;
				cursor: pointer;
			}
			.navigator .pages .page-gap {
				display: inline-block;
				width: auto;
				margin: 0 2px 0 0px;
				text-align: center;
				font-size: 13px;
				line-height: 30px;
				letter-spacing: 2px;
			}
			.navigator .pages .page-buttons {
				display: inline-block;
			}
			.navigator .pages .navi-button i,
			.navigator .pages .page-button em {
				display: block;
				width: inherit;
				margin: 0;
				padding: 0;
				height: 30px;
				font-size: 13px;
				line-height: 30px;
				font-style: normal;
				text-align: center;
			}
			.navigator .pages .page-button em {
				line-height: 30px; 
				font-style: normal;
				color: inherit;
			}
			.navigator .pages .page-button em:before { line-height: inherit; }
			.navigator .pages .page-button {
				color: black;
			}
			.navigator .pages .page-button[data-current="1"] {
				pointer-events: none;
				background-color: var(--color_secondary);
				color: white;
			}
			.navigator .pages .disabled {
				pointer-events: none;
				opacity: 0.25;
			}
			.navigator .pages .navi-button i {
				display: block;
				background-repeat: no-repeat;
				background-position: center center; 
				background-size: 15px 15px;
				width:  30px;
				height: 30px;
			}
			.navigator .pages .navi-button[data-label="first"] i { background-image:url("../../images/assets/positive/arrow-1-first.svg"); }
			.navigator .pages .navi-button[data-label="prev" ] i { background-image:url("../../images/assets/positive/arrow-1-left.svg"); }
			.navigator .pages .navi-button[data-label="next" ] i { background-image:url("../../images/assets/positive/arrow-1-right.svg"); }
			.navigator .pages .navi-button[data-label="last" ] i { background-image:url("../../images/assets/positive/arrow-1-last.svg"); }

			.navigator .pages[data-visible="0"] { display: none; }

			/* states */

			[data-page_has_navigator="0"] .navigator { display: none; }

		
	/*							*/
	/*							*/
	/* 		NOTICES 			*/
	/*							*/
	/*							*/
	
		.block[data-label="materials"] .no-results {
			text-align: left;
			padding: 25px 10px;
			height: 25px;
			border-bottom: 1px solid var(--color_border);
			background-color: white;
			box-shadow: 0 2px 10px 0 rgba(134,134,134,0.15);
			border-radius: 3px;
		}
		.block[data-label="materials"] .no-results figure.picto {
			display: block;
			position: relative;
			top: 50%;
			transform: translateY(-50%);
			background-color: transparent;
			background-image: url("../../images/assets/positive/search.svg");
			background-image: url("../../images/assets/positive/info.svg");
			background-size: contain;
			background-repeat: no-repeat;
			width:       25px;
			height:      25px;
			margin: 0 0 -25px 0;
		}
		.block[data-label="materials"] .no-results figcaption {
			display: block;
			position: relative;
			top: 50%;
			transform: translateY(-50%);
			text-align: left;
			font-size: 1.1rem;
			line-height: 1.2;
			margin: 0 0 0 35px;
			color: var(--color_secondary);
			color: var(--color_primary);
		}
		
	/*							*/
	/*							*/
	/* 	 	NOTIFICATION		*/
	/*							*/
	/*							*/
	
		#notifications {
			position: fixed;
			right: 0;
			bottom: 0;
			width: 400px;
			height: 100vh;
			outline: 1px dashed green;
			outline: none;
			pointer-events: none;
			z-index: 95000;
		}
		#notifications .n-items {
			position: absolute;
			bottom: 10px;
			right:  10px;
			width: calc(100% - 20px);
		}
		#notifications .n-items .n-item {
			display: block;
			position: relative;
			opacity: 1;
			left: 0;
			width: 100%;
			max-height: 1000px;
			overflow: hidden;
			transition: opacity 0.5s ease 0s, left 0s ease, max-height 0.5s ease 0s;
			pointer-events: all;
			user-select: none;
		}
		#notifications .n-items .n-item[data-hidden="1"] {
			opacity: 0;
			max-height: 0;
			left: 400px;
			transition: opacity 0.5s ease 0.5s, left 0.5s ease, max-height 0.25s ease 0.25s;
		}
		#notifications .n-items .n-item .n-content {
			position: relative;
			z-index: 1;
			margin: 10px 10px 10px 10px;
			padding: 25px 20px 25px 60px;
			border-radius: 5px;
			background-color: white;
			box-shadow: 0 3px 10px 0 rgba(0,0,0,0.23);
		}
		#notifications .n-items .n-item .n-content .n-title {
			font-family: Quicksand;
			font-weight: 600;
			font-size:var(--big_paragraph_fontsize);
			line-height:var(--big_paragraph_leading);
			color: var(--color_secondary);
			margin-bottom: 5px;
		}
		#notifications .n-items .n-item .n-content .n-copy {
			font-family: PublicSans;
			font-weight: 300;
			ont-size: var(--paragraph_fontsize);
			line-height: var(--paragraph_leading);
			user-select: none;			
			color: var(--color_primary);
		}
		#notifications .n-items .n-item .n-picto {
			float: left;
			display: block;
			position: relative;
			z-index: 20;
			width:       45px;
			height:      45px;
			margin: 0 0 -45px 0;
			left: 20px;
			top: 25px;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
		}
		#notifications .n-items .n-item[data-type="1"] .n-picto { background-image: url("../../images/assets/color/ad.svg"); }
		#notifications .n-items .n-item[data-type="2"] .n-picto { background-image: url("../../images/assets/color/info.svg"); }
		#notifications .n-items .n-item[data-type="3"] .n-picto { background-image: url("../../images/assets/color/locked.svg"); }
		#notifications .n-items .n-item[data-type="4"] .n-picto { background-image: url("../../images/assets/color/checked.svg"); }
		
		#notifications .n-items .n-item .n-close-button {
			float: right;
			display: block;
			position: relative;
			z-index: 20;
			width:       20px;
			height:      20px;
			margin: 0 0 -20px 0;
			top:  15px;
			left: -15px;
			background-color: black;
			background-image: url("../../images/assets/negative.small/clear.svg");
			background-size: 15px;
			background-position: center;
			border-radius: 15px;
			pointer-events: all;
			cursor: pointer;
			opacity: 0;
		}
		#notifications .n-items .n-item:hover .n-close-button {
			opacity: 1;
		}
	
	
	
	/*							*/
	/*							*/
	/* 			DIALOG 			*/
	/*							*/
	/*							*/
	
		.dialog {
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
		}
		.dialog .backdrop {
			position: absolute;
			width: 100vw;
			height: 100vh;
			background-color: var(--cover_page_color);
			backdrop-filter:blur(1px);
			cursor: default;
		}
		.dialog .popup {
			position: absolute;
			left: 50%;
			top: 50%;
			transform:translate(-50%,-50%);
			background-color: white;
			padding: 30px;
			border: 1px solid var(--color_border);
			box-shadow: 0 15px 25px 0 rgba(0,0,0,0.25);
			border-radius: 6px;
			max-width: 600px;
			max-height: 90vh;
			overflow-y: auto;
		}
		
		/* Dialog copies*/
		
			.dialog .popup h2 {
				font-weight:700;
				margin-bottom: 10px;
			}
			.dialog .popup p {}
			.dialog .popup ul > li p { white-space: nowrap; }
			.dialog .popup ul > li p .count  { display:inline-block; }
			.dialog .popup ul > li p .suffix { display:inline-block; }
			.dialog .popup .buttons {
				display: block;
				margin: 15px 0 0 0;
				text-align: center;
			}
		
		/* Dialog form */
		
			.dialog .popup form {
				margin: 15px 0 0 0;
			}
			.dialog input[type="text"] {
				position: relative;
				width: 100%;
				height: var(--filter_height);
				margin:0;
				padding-inline:15px;
				position: relative;
				border: none;
				outline: none;
				background-color: var(--shade_light);
				cursor: default;
			}
			.dialog input[type="text"][name="class_name"] {
				font-size: var(--subtitle_fontsize);
			}
			.dialog input[type="text"][name="class_name"]::placeholder { font-size: 1.15rem; }
			.dialog input[type="text"][name="code"] {
				font-size: var(--subtitle_fontsize);
				letter-spacing: 1px;
				font-family: monospace;
				text-align: left;
			}
			.dialog[data-state="processing"] form,
			.dialog[data-state="processing"] form .buttons .button,
			.dialog[data-state="validated"] form,
			.dialog[data-state="validated"] form .buttons .button {
				pointer-events:none;
			}
			.dialog input[type="text"][name="code"] {
				background-repeat: no-repeat;
				background-size: 16px;
				background-position: calc(100% - 10px) 50%;
			}
			.dialog[data-state="validated"] input[type="text"][name="code"] {
				background-image: url("../../images/admin/progress-bar-circle-24-done.png");
			}
			.dialog[data-state="processing"] input[type="text"][name="code"] {
				background-image:url("../../images/admin/ajax-loader-16x16.gif");
			}
			.dialog[data-state="error"] input[type="text"][name="code"] {
				background-image:url("../../images/admin/progress-bar-circle-24-failed.png");
			}
			
		
		/* Dialog products */
		
			/*
			.dialog .popup ul.products {
				margin-top: 15px;
			}
			.dialog .popup ul.products li.product {
				margin: 0 10px 10px 0;
				height: 72px;
			}
			.dialog .popup ul.products li.product a {
				padding: 10px;
			}
			.dialog .popup ul.products li.product figure {
				width:          50px;
				height:         50px;
				margin-bottom: -50px;
				background-size: contain;
			}
			.dialog .popup ul.products li.product figcaption {
				margin: 2px 0 0 62px;
				padding: 0;
			}
			.dialog .popup ul.products li.product[data-has_icon=""] figure {
				background-color: var(--color_secondary);
				color: white;
				text-align: center;
			}
			.dialog .popup ul.products li.product[data-has_icon=""] figure .alternate-icon {
				position: relative;
				top: 50%;
				transform:translateY(-50%);
				font-size: var(--big_paragraph_fontsize);
			}
			html[data-pag="products"] {
				.dialog .popup ul.products { width: calc(100% + 9px); }
				.dialog .popup ul.products li.product { width: calc(50% - 10px); }
				.dialog .popup ul.products li.product[data-selected="1"] a {
					background: linear-gradient(rgba(208,11,0,0.32),rgba(208,11,0,1.00));
					background: none;
					background-color:var(--color_secondary);
					background-color: rgba(208,176,161,1.00);
					background-color: transparent;
					box-shadow: inset 0 0 50px 0 #DED6D6;
				}
				.dialog .popup ul.products li.product[data-selected="1"] a * { color: XXXwhite; }
				.dialog .popup ul.products li.product a figure { background-color:transparent; border:none; }
				.dialog .popup ul.products li.product[data-has_icon=""] a figure { background-color:var(--color_secondary); }
				.dialog .popup ul.products li.product:before {
					position: relative;
					content:"";
					display: block;
					width:       16px;
					height:      16px;
					margin: 0 0 -16px 0;
					border: 1px solid var(--color_border);
					background-color: var(--shade_light);
					top: 5px;
					right: 5px;
					z-index: 1;
					float: right;
					border-radius: 0px;
					background-image: url("../../images/assets/negative.small/checked.svg");
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center center;
					pointer-events: none;
				}
				.dialog .popup ul.products li.product[data-selected="1"]:before {
					background-color: var(--color_secondary);
				}
			}
			html[data-pag="my-classes"] {
				.dialog .popup { max-width: 400px; }
				.dialog .popup ul.products {
					width: calc(100% + 0px);
					background-color: var(--shade_light);
					padding: 15px 0 0 15px;
					border-radius: 5px;
				}
				.dialog .popup ul.products li.product { width: 72px; margin: 0 8px 8px 0; border:none; background-color: transparent; transition:filter 0.3s ease; }
				.dialog .popup ul.products li.product a { padding:0; transition: background-color 0.3s ease; border-radius: 52px; }
				.dialog .popup ul.products li.product a * { pointer-event:none; }
				.dialog .popup ul.products li.product[data-selected="1"] { transform:scale(1.15,1.15); }
				.dialog .popup ul.products li.product[data-selected="1"] a {box-shadow: inset 0 0 0 1px var(--color_secondary);background-color: white;}
				.dialog .popup ul.products:has(li.product[data-selected="1"]) li.product:not([data-selected="1"]) { opacity: 0.5; filter:saturate(0); }
				.dialog .popup ul.products li.product:hover { filter:saturate(1)!important; opacity: 1!important;  }
				.dialog .popup ul.products li.product:hover a { background-color: white; }
				.dialog .popup ul.products li.product a figure { margin: 0; position: absolute; width: auto; height: auto; inset: 12px; background-color: transparent; box-shadow: none; background-position: center center; border:none; }
			}
			*/

		
		/* Dialog buttons */
		
			.dialog .popup .buttons .button {
			}

		/* Dialog checkboxes */
		
			.dialog .popup label input[type="checkbox"] { position: absolute; opacity: 0; }
			.dialog .popup label input[type="checkbox"] ~ i {
				display: inline-block;
				vertical-align: top;
				z-index: 2;
				opacity: 1;
				position: relative;
				width: 16px;
				height: 16px;
				top: 2px;
				margin-right: 10px;
				border: 1px solid var(--color_border);
				background-color: var(--shade_light);
				background-image: url(../../images/assets/negative.small/checked.svg);
				background-size: 0 0;
				background-repeat: no-repeat;
				background-position: center center;
			}
			.dialog .popup label input[type="checkbox"]:checked ~ i {
				background-size: contain;
				background-color: var(--color_secondary);
				border-color: var(--color_secondary);				
			}
			.dialog .popup label input[type="checkbox"] ~ em {
				display: inline-block;
				vertical-align: top;
				color:        var(--color_primary);
				font-size:    var(--paragraph_fontsize);
				line-height:  var(--paragraph_leading);
			}

		/* Dialog styles */
		
			html[data-pag="products"] .dialog .popup {
				max-width: 500px;
			}
		
		/* Dialog states */
		
			html               .dialog {display: none;}
			XXXXhtml[data-dlg="1"] .dialog { display: block; }
	
	
	
	
	
	/*							*/
	/*							*/
	/* 	FILTERS AND TABLES 		*/
	/*							*/
	/*							*/

		/* Table */
		
		
		
		
		
		/* Types */
		
		
			div.types-wrapper {
				margin: 0 0 20px 0; 
				padding: 0 0 0 0;
				background-color: white;
				box-shadow: 0 2px 10px 0 rgba(134,134,134,0.15);
			}
			ul.types {
				width: calc(100% - 0px);
				position: relative;
				list-style: none;
				margin: 0 
				padding: 0;
				background-color: white;
				box-shadow: 0 2px 10px 0 rgba(134,134,134,0.15);
				outline: 1px solid orange;
				outline: none;
				overflow: hidden;
			}
			
			/* HIDDEN, IF ALL ELEMENTS IS EMPTY */
			
			ul.types[data-all_empty="1"] {
				display: none;
			}
			ul.types:before {
				content:"";
				display:block;
				position: absolute;
				inset:0;
				border-bottom: 1px solid var(--color_border);
			}
			ul.types li {
				display: inline-block;
				vertical-align: top;
				position: relative;
				padding: 0 15px 2px 15px;
				margin: 0 -3px 0 0;
				list-style: none;
				font-weight: 400;
				color: var(--text_color_medium);
			}
			ul.types li[data-overflowing="1"],
			ul.types li[data-overflowing="2"],
			ul.types li[data-overflowing="3"],
			ul.types li[data-overflowing="4"],
			ul.types li[data-overflowing="5"],
			ul.types li[data-overflowing="6"],
			ul.types li[data-overflowing="7"] {
				box-sizing:border-box; 
				float: right;
				background-color: white;
				height: 53px;
				width: 250px;
				margin:0 -53px 0 0;
				white-space: nowrap;
				text-overflow: ellipsis;
				position: relative;
				box-shadow: 0 2px 10px 0 rgba(134,134,134,0.15);
				border-bottom: 1px solid rgba(152,152,152,0.46);
				z-index: 9999;
			}
			ul.types li[data-overflowing="1"] { transform:translate(calc(0 * 197px - 53px), calc(0 * 100% + 0px)); z-index:1001; }
			ul.types li[data-overflowing="2"] { transform:translate(calc(1 * 197px - 53px), calc(1 * 100% + 0px)); z-index:1002; }
			ul.types li[data-overflowing="3"] { transform:translate(calc(2 * 197px - 53px), calc(2 * 100% + 0px)); z-index:1003; }
			ul.types li[data-overflowing="4"] { transform:translate(calc(3 * 197px - 53px), calc(3 * 100% + 0px)); z-index:1004; }
			ul.types li[data-overflowing="5"] { transform:translate(calc(4 * 197px - 53px), calc(4 * 100% + 0px)); z-index:1005; }
			ul.types li[data-overflowing="6"] { transform:translate(calc(5 * 197px - 53px), calc(5 * 100% + 0px)); z-index:1006; }
			ul.types li[data-overflowing="7"] { transform:translate(calc(6 * 197px - 53px), calc(6 * 100% + 0px)); z-index:1007; }
			
			
			a.hidden-filters-toggle-button {
				position: relative;
				display: block;
				float: right;
				width:  30px;
				height: 15px;
				margin: 20px 10px 0 0;
				background-color: rgba(215,215,215,1.00);
				color: #333;
				border-radius: 8px;
				z-index: 1;
				text-align: center;
				
				display:none;
			}
			a.hidden-filters-toggle-button i {
				font-size:   15px;
				line-height: 15px;
			}
			a.hidden-filters-toggle-button i:before { content:"\EC16"; }
			
			/* HIDE ITEMS, THAT HAS ZERO VALUE */

			ul.types li[data-empty="1"] {
				display: none;
			}
			ul.types li label {
				display: block;
				height: var(--table_row_height);
				cursor:pointer;
			}
			ul.types li label input {
				position: absolute;
				opacity: 0.25;
				opacity: 0;
			}
			ul.types li:has(input:checked) {
				font-weight: 700; 
				padding: 0 15px 0 15px;
				border-bottom: 3px solid var(--color_secondary);
				color: var(--color_primary);
				z-index: 1100;
			}
			ul.types li label .tag {
				display: inline-block;
				position: relative;
				float: right;
				top: 50%;
				transform:translateY(-50%);
				background-color: var(--color_secondary);
				color: white;
				border-radius: 15px;
				font-size: 10px;
				line-height: 1;
				padding: 1px 5px 2px 5px;
				margin: 1px 0 0 5px;
				text-transform: uppercase;
			}
			ul.types li label .tag:empty { display: none; }
			ul.types li label em {
				display: inline-block;
				position: relative;
				top: 50%;
				transform:translateY(-50%);
			}
		
		
		
		
		/* Filters */
		
			.filter-options[data-label="material"] li:first-child {
				font-weight: 600;
				margin-bottom: 11px;
			}
			.filter-options[data-label="material"] li:first-child:after {
				content:"";
				display: block;
				position: relative;
				border-bottom: 1px solid var(--color_border);
				margin-bottom: -1px;
				top: 15px;
			}
		
		.sortable-table {
			border: 1px solid var(--color_border);
			box-sizing: border-box;
			width: 100%;
			border-collapse: collapse;
			margin: 0;
			padding: 0;
			background-color: white;
			font-weight: 300;
			font-size: var(--paragraph_fontsize);
			line-height: var(--paragraph_leading);
			border-radius: 8px;
			/* overflow: hidden; */
		}
		.sortable-table {
			tr th .cell { background-size: 0; }
			&[data-sorted="tags"] tr th.t-tag .cell,
			&[data-sorted="title"] tr th.t-ttl .cell,
			&[data-sorted="size"] tr th.t-siz .cell {
				background-repeat: no-repeat;
				background-position: center left;
				background-size: 12px 12px;
				padding-left: 15px;
				color: var(--color_secondary);
			}
			&[data-direction="ASC"]  tr th .cell { background-image: url("../../images/assets/color/arrow-1-down.svg"); }
			&[data-direction="DESC"] tr th .cell { background-image: url("../../images/assets/color/arrow-1-up.svg"); }

			&[data-sorted="tags"] tr td.t-tag ,
			&[data-sorted="title"] tr td.t-ttl ,
			&[data-sorted="size"] tr td.t-siz {
				background-color: rgba(224,224,224,0.26);
				border-left:1px solid #C9C9C9;
				border-right: 1px solid #C9C9C9;
			}

		}
		.sortable-table thead {
			position: sticky;
			top: 55px;
			height: calc(var(--table_row_height) + 0px);
			text-align: left;
			background-color: var(--shade_light);
			box-shadow: 0 3px 5px 0 rgba(74,74,74,0.1);
			z-index: 100;
			border-bottom: 1px solid var(--color_border);
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
		}
		.sortable-table thead:after {
			border-bottom: 1px solid black;
		}
		.sortable-table thead {
			tr {
				/* border-bottom: 1px solid black; */
				height: var(--table_row_height);
			}
			tr th {
				font-weight: 500;
				/* border-bottom: 1px solid gray; */
			}
			tr th .cell {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			tr th.t-cbx {
				text-align: center;
				width: 15px;
				padding-inline: 0px;
				}
			tr th.t-tag {}
			tr th.t-ttl {}
			tr th.t-ttl span.filetype { float: right; margin-right: 20px; }
			
			tr th.t-siz { text-align: right;
				padding-right: 10px;
			}
			tr th.t-act { text-align: center;
				padding-right: 10px;
			}
		}
				
		.sortable-table tbody {
			text-align: left;
			cursor:default;
			
			tr {
				border-bottom:1px solid var(--color_border);
				height: var(--table_row_height);
			}
			
			tr td {
				font-weight: 300;
				color: var(--text_color);
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
			}
			tr:has(input[type="checkbox"]:checked) {
				background-color: rgba(250,242,203,1.00);
				background: linear-gradient(rgba(250,242,203,0.70),rgba(250,242,203,1.00));
			}
			tr td .cell {
				white-space: nowrap;
				/* overflow: hidden; */
				text-overflow: ellipsis;
				top:12px;
				transform: translateY(-50%);
				position: relative;
				display: block;
				height: 30px;
			}
			tr td .cell a,
			tr td .cell button {
				display: block;
				width: 100%;
				border:none;
				padding: 0;
				padding-block:0;
				padding-inline:0;
				margin: 0;
				background: none;
				background-color: transparent;
				cursor:pointer;
				appearance:none;
				-webkit-appearance:none;
			}
	
			tr td.t-cbx {text-align: center;padding-inline: 0px;}
			tr td.t-tag { padding-left:10px; }
			tr td.t-ttl { padding-left:10px; }
			tr td.t-siz { text-align: right;  padding-right: 10px; }
			tr td.t-act {text-align: center;padding-right: 10px;}
			
			tr[data-online="1"] td.t-siz .cell:before { content:"Online" };

			tr td.t-act .stats {
				position: relative;
				width: 100px;
				height: 40px;
				margin: 0 0 -40px 0;
				text-align: center;
				right: -10px;
			}
			tr td.t-ttl h3 {
				font-weight: 600;
				font-size: var(--smaller_paragraph_fontsize);
				line-height: var(--smaller_paragraph_leading);
				margin-bottom: 0;
				line-clamp: 2;
				padding-right: 30px;
			}
			tr td.t-ttl h4 {
				font-weight: 400;
				font-size: var(--smallest_paragraph_fontsize);
				line-height: var(--smallest_paragraph_leading);
				margin-bottom: 3px;
				line-clamp: 2;
				padding-right: 30px;
			}
			
			tr[data-access="3"] td.t-act .stats i:before { }
			tr[data-access="2"] td.t-act .stats i:before { }
			tr[data-access="1"] td.t-act .stats i:before { }
			
			tr td.t-act .stats em {
				display: inline-block;
				font-size: 0.7em;
				max-width: 80px;
				white-space: normal;
				text-align: center;
			}
			tr td.t-act .buttons {
				text-align: right;
			}			
			tr td.t-ttl .filename  {
				margin: 0 0 0 0;
				position: absolute;
				display: none;
			}
			tr td.t-ttl .title {
				display: block;
				position: relative;
				height: 35px;
				margin: 0 0 -35px 0;
				left: 25px;
			}
			tr td.t-ttl .extension { float: right;opacity: 0.5;font-size: 0.8em;margin-right: 10px;text-align: center;}

			tr td.t-ttl .icon {
				display: block;
				vertical-align: top;
				position: relative;
				width: 30px;
				height: 30px;
				margin: 0 0 -30px 0;
				background-size: contain;
				background-repeat: no-repeat;
				top: 0;
				left: -15px;
			}
			
			tr[data-ext="html"] .icon { background-image: url("../../images/icon/extension/positive/html.svg"); }
			tr[data-ext="zip" ] .icon { background-image: url("../../images/icon/extension/positive/zip.svg"); }
			tr[data-ext="pdf" ] .icon { background-image: url("../../images/icon/extension/positive/pdf.svg"); }
			tr[data-ext="wmv" ] .icon { background-image: url("../../images/icon/extension/positive/wmv.svg"); }
			tr[data-ext="mp4" ] .icon { background-image: url("../../images/icon/extension/positive/mp4.svg"); }
			tr[data-ext="doc" ] .icon { background-image: url("../../images/icon/extension/positive/docx.svg"); }
			tr[data-ext="docx"] .icon { background-image: url("../../images/icon/extension/positive/docx.svg"); }
			tr[data-ext="xls" ] .icon { background-image: url("../../images/icon/extension/positive/xlsx.svg"); }
			tr[data-ext="xlsx"] .icon { background-image: url("../../images/icon/extension/positive/xlsx.svg"); }

			tr[data-ext="html"] .icon { background-image: url("../../images/icon/extension/color/html.svg"); }
			tr[data-ext="zip" ] .icon { background-image: url("../../images/icon/extension/color/zip.svg"); }
			tr[data-ext="pdf" ] .icon { background-image: url("../../images/icon/extension/color/pdf.svg"); }
			tr[data-ext="wmv" ] .icon { background-image: url("../../images/icon/extension/color/wmv.svg"); }
			tr[data-ext="mp4" ] .icon { background-image: url("../../images/icon/extension/color/mp4.svg"); }
			tr[data-ext="docx"] .icon { background-image: url("../../images/icon/extension/color/docx.svg"); }
			tr[data-ext="doc" ] .icon { background-image: url("../../images/icon/extension/color/docx.svg"); }
			tr[data-ext="xlsx"] .icon { background-image: url("../../images/icon/extension/color/xlsx.svg"); }
			tr[data-ext="xls" ] .icon { background-image: url("../../images/icon/extension/color/xlsx.svg"); }

			
			tr td.t-tag .cell {
				white-space: normal;
				line-height: 1;
			}
			tr td.t-tag .cell .tags .tag {
				display: inline-block;
				background-color:#FFF;
				border:1px solid #CCC;
				font-size: 0.75em;
				line-height: 1.2;
				margin: 0 5px 0 0;
				padding: 1px 10px;
				border-radius: 15px;
			}
			tr td.t-tag .cell .tags .tag:empty { display: none; }
			tr td.t-tag .cell:not(:has(.tag:not(:empty))) .tags:before {
				content:"–"; 
				content:""; 
			}
			tr td.t-tag .cell .tags .sep {
				display: block;
				overflow: hidden;
				text-indent: -1000em;
				font-size: 0;
				display: none;
			}
			
			
			
			
			
			/*
			tr td.t-act[data-label="download"] .cell a:hover i,
			tr td.t-act[data-label="download"] .cell button:hover i { background-image: url("../../images/assets/color/download.svg"); }
			
			tr td.t-act[data-label="online"]   .cell a:hover i,
			tr td.t-act[data-label="online"]   .cell button:hover i { background-image: url("../../images/assets/color/arrow-2-right.svg"); }
			*/
		}
		
		html[data-adm="1"] .sortable-table tbody tr[data-access="3"] td.t-act .stats em:before { color:red; content:"Tükör" }
		html[data-adm="1"] .sortable-table tbody tr[data-access="2"] td.t-act .stats em:before { color:blue; content:"Védett" }
		html[data-adm="1"] .sortable-table tbody tr[data-access="1"] td.t-act .stats em:before { color:green; content:"Teljes hozzáférés" }
		html[data-adm="1"] .sortable-table tbody tr[data-access="0"] td.t-act .stats em:before { color:#555555; content:"Nincs hozzáférés" }
		
		
		/* exception */
		
		html[data-pag="curriculum"] .sortable-table tbody tr td.t-act .stats { right: 10px; }

		
		
		/* BUTTONS */
		
		ul.products li.product .buttons .button,
		tr .buttons .button {
			display: inline-block;
			padding: 15px;
			white-space: nowrap;
			box-shadow: 0 0 0 0 var(--color_secondary);
			background-color: var(--color_secondary);
			/* box-shadow: 0 0 0 0 blue; */
			/* background-color: blue; */
			color: white;
			font-size:var(--button_fontsize);
			transition:box-shadow 0.3s ease;
			border-radius: 2px;
		}
		ul.products li.product .buttons .button:hover,
		tr .button:hover { box-shadow: 0 0 0 2px var(--color_secondary); 	}


		ul.products li.product[data-access="protected"] .buttons .button,
		tr[data-access="protected"] .buttons .button {
			box-shadow: 0 0 0 0 var(--protected);
			background-color: var(--protected);
		}
		ul.products li.product[data-access="demo"] .buttons .button,
		tr[data-access="demo"] .buttons .button {
			/* box-shadow: 0 0 0 0 var(--demo); */
			/* background-color: var(--demo); */
		}
		ul.products li.product[data-access="protected"] .buttons .button:hover,
		tr[data-access="protected"] .button:hover { box-shadow: 0 0 0 2px var(--protected); 	}
		ul.products li.product[data-access="demo"] .buttons .button:hover,
		tr[data-access="demo"] .button:hover {/* box-shadow: 0 0 0 2px var(--demo); */}


		ul.products li.product .buttons .button[data-label="next"],
		tr .buttons .button[data-label="next"] {
			display: inline-block;
		}
		ul.products li.product .buttons .button[data-label="edit"],
		tr .buttons .button[data-label="edit"] {
			display: inline-block;
			pointer-events: all!important;
		}
		td.t-act[data-label="online"] .button[data-label="edit"] i,
		td.t-act[data-label="download"] .button[data-label="edit"] i {
			background-image: url("../../images/assets/negative/edit.svg");
		}


		ul.products li.product .buttons .button > i,
		tr .button i {
			display: inline-block;
			position: relative;
			width:  25px;
			height: 25px;
			background-position: center;
			background-size: contain;
			left: 50%;
			top: 50%;
			transform:translate(-50%,-50%);
			pointer-events: none;
		}
		
		/* ICONS */
		
		ul.products li.product .button,
		tr .button {
			display: inline-block;
			background-size: contain;
			background-repeat: no-repeat;
			width:  26px;
			height: 26px;
			border-radius: 2px;
			background-color: var(--color_secondary);
			box-shadow: 0 0 0 1px var(--color_secondary);
			transition: box-shadow 0.3s ease;
		}
		tr .button {
			display: inline-block;
			background-size: contain;
			background-repeat: no-repeat;
			width:  26px;
			height: 26px;
			border-radius: 2px;
			background-color: var(--color_secondary);
			box-shadow: 0 0 0 1px var(--color_secondary);
			transition: box-shadow 0.3s ease;
			padding: 5px;
		}
		
		ul.products li.product[data-ext="pdf" ] .button i,
		ul.products li.product[data-ext="docx"] .button i,
		ul.products li.product[data-ext="xlsx"] .button i,
		ul.products li.product[data-ext="mp3" ] .button i,
		ul.products li.product[data-ext="mp4" ] .button i,
		ul.products li.product[data-ext="wmv" ] .button i,
		ul.products li.product[data-ext="zip" ] .button i { background-image: url("../../images/assets/negative/download.svg"); }
		ul.products li.product[data-ext="html"] .button i { background-image: url("../../images/assets/negative/arrow-2-right.svg"); }
		ul.products li.product                  .button:hover { box-shadow: 0 0 0 3px var(--color_secondary); }
		
		tr[data-ext="pdf" ]                     .button i,
		tr[data-ext="docx"]                     .button i,
		tr[data-ext="xlsx"]                     .button i,
		tr[data-ext="mp3" ]                     .button i,
		tr[data-ext="mp4" ]                     .button i,
		tr[data-ext="wmv" ]                     .button i,
		tr[data-ext="zip" ]                     .button i { background-image: url("../../images/assets/negative/download.svg"); }
		tr[data-ext="html"]                     .button i { background-image: url("../../images/assets/negative/arrow-2-right.svg"); }
		tr                                      .button:hover { box-shadow: 0 0 0 3px var(--color_secondary); }

		
		/* MATERIAL NOT AVALIABLE */
		
		
		tr[data-available="pdf0" ],
		tr[data-available="xlsx0"],
		tr[data-available="docx0"],
		tr[data-available="mp30" ],
		tr[data-available="mp40" ],
		tr[data-available="wmv0" ],
		tr[data-available="zip0" ],
		tr[data-available="html0"],
		ul.products li.product[data-available="pdf0" ],
		ul.products li.product[data-available="xlsx0"],
		ul.products li.product[data-available="docx0"],
		ul.products li.product[data-available="mp30" ],
		ul.products li.product[data-available="mp40" ],
		ul.products li.product[data-available="wmv0" ],
		ul.products li.product[data-available="zip0" ],
		ul.products li.product[data-available="html0"] {
		
			opacity: 0.5;
			filter:grayscale(1);
			pointer-events: none;
		}
		tr[data-available="pdf0" ] .button,
		tr[data-available="xlsx0"] .button,
		tr[data-available="docx0"] .button,
		tr[data-available="mp30" ] .button,
		tr[data-available="mp40" ] .button,
		tr[data-available="wmv0" ] .button,
		tr[data-available="zip0" ] .button,
		tr[data-available="html0"] .button,
		ul.products li.product[data-available="pdf0" ] .button,
		ul.products li.product[data-available="xlsx0"] .button,
		ul.products li.product[data-available="docx0"] .button,
		ul.products li.product[data-available="mp30" ] .button,
		ul.products li.product[data-available="mp40" ] .button,
		ul.products li.product[data-available="wmv0" ] .button,
		ul.products li.product[data-available="zip0" ] .button,
		ul.products li.product[data-available="html0"] .button {
			pointer-events: none;
		}
		
		tr[data-available="pdf0" ] .t-siz .cell .value:before,
		tr[data-available="xlsx0"] .t-siz .cell .value:before,
		tr[data-available="docx0"] .t-siz .cell .value:before,
		tr[data-available="mp30" ] .t-siz .cell .value:before,
		tr[data-available="mp40" ] .t-siz .cell .value:before,
		tr[data-available="wmv0" ] .t-siz .cell .value:before,
		tr[data-available="zip0" ] .t-siz .cell .value:before,
		tr[data-available="html0"] .t-siz .cell .value:before { content:"N.A."; content:""; }
		
		tr[data-available="pdf0" ] .t-siz .cell .suffix,
		tr[data-available="xlsx0"] .t-siz .cell .suffix,
		tr[data-available="docx0"] .t-siz .cell .suffix,
		tr[data-available="mp30" ] .t-siz .cell .suffix,
		tr[data-available="mp40" ] .t-siz .cell .suffix,
		tr[data-available="wmv0" ] .t-siz .cell .suffix,
		tr[data-available="zip0" ] .t-siz .cell .suffix,
		tr[data-available="html0"] .t-siz .cell .suffix { display: none; }
		
		

		/* icons on filetype button */
		
		ul.products li.product[data-online="0"] .buttons .button:first-child, tr[data-online="0"] .buttons .button:first-child {}
		ul.products li.product[data-online="1"] .buttons .button:last-child,  tr[data-online="1"] .buttons .button:last-child {}
		
		ul.products li.product[data-online="0"] .buttons .button:first-child, tr[data-online="0"] .buttons .button:first-child i { background-image: url("../../images/assets/negative/download.svg"); }
		ul.products li.product[data-online="1"] .buttons .button:last-child,  tr[data-online="1"] .buttons .button:last-child  i { background-image: url("../../images/assets/negative/arrow-2-right.svg"); }

		/* appearance of filetype button (online / download) */
		
		ul.products li.product[data-online="0"] .buttons .button:first-child, tr[data-online="0"] .buttons .button:first-child { display: none; }
		ul.products li.product[data-online="1"] .buttons .button:last-child,  tr[data-online="1"] .buttons .button:last-child  { display: none; }
		ul.products li.product[data-access="0"] .buttons .button, tr[data-access="0"] .buttons .button {
			opacity: 0.5;
			filter:grayscale(1);
			pointer-events: none;
		}

		
		
		

		.sortable-table tr a {}
		
		.sortable-table {
			label {
				text-align: center;
				cursor: default;
			}
			label input[type="checkbox"] {
				position: absolute;
				opacity: 0;
				z-index: 1;
			}
			label input[type="checkbox"] ~ i {
				display: inline-block;
				z-index: 2;
				opacity: 1;
				position: relative;
				width:  16px;
				height: 16px;
				border: 1px solid var(--color_border);
				background-color: var(--shade_light);
				background-image: url("../../images/assets/negative.small/checked.svg");
				background-size: 0 0;
				background-repeat: no-repeat;
				background-position: center center;
				top: 2px;
			}
			label input[type="checkbox"]:checked ~ i {
				background-size: contain;
				background-color: var(--color_secondary);
				border-color: var(--color_secondary);
			}
			label input[type="checkbox"] ~ em {
				display: none;
			}
		}
		
		/* States */
	
		.block[data-label="materials"]{
			&[
			data-selected="0"] .buttons,
			&[data-selected="1"] .buttons {}
			&:not([
			data-selected="0"]) .items .counter { display: none; }
			&[
			data-selected="1"] .items .counter { display:block; }
			
			.buttons {
			float: right;
			}
		;
			list-style: kannada;
		}
		
		
		
		/* Admin buttons */
		
			.popup-buttons-wrapper,
			.buttons-wrapper {
				display: block;
				padding: 0 10px 0 10px;
				z-index: 2;
			}
			.popup-buttons-wrapper {
			
			}
			.buttons-wrapper {
				position: fixed;
				right:0;
				bottom: 5px;
				transform:translate(-250px,0);
			}
			.popup-buttons-wrapper .admin-buttons,
			.buttons-wrapper       .admin-buttons {
				display: inline-block;
				position: relative;
				user-select: none;
			}
			.popup-buttons-wrapper .gap,
			.buttons-wrapper       .gap {
				display: inline-block;
				width: 8px;
				height: 100%;
			}
			.popup-buttons-wrapper .admin-buttons .admin-button label,
			.buttons-wrapper       .admin-buttons .admin-button label {
				display: inline-block;
				margin: 2px 0 0 0;
				padding: 0 15px 0 15px;
				border-bottom-width: 2px;
				border-right-width: 2px;
				font-size: 1rem;
				line-height: calc(var(--filter_height) - 3px);
				height: calc(var(--filter_height) - 3px);
				background-color: var(--color_secondary);
				background-color: var(--shade_medium);
				color: white;
				color: var(--color_primary);
				box-shadow: 0 0 0 0px var(--color_secondary);
				box-shadow: 0 0 0 0px var(--shade_medium);
				transition: box-shadow 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
				border-radius: 3px;
				position: relative;
				cursor: pointer;
				/* position: absolute; */
				/* inset: 0; */
				cursor: pointer;
				opacity: 0.5;
			}
			.popup-buttons-wrapper .admin-buttons .admin-button label input,
			.buttons-wrapper       .admin-buttons .admin-button label input {
				position: absolute;
				opacity: 0;
				cursor: pointer;
			}
			
			.popup-buttons-wrapper .admin-buttons .admin-button:hover label,
			.buttons-wrapper       .admin-buttons .admin-button:hover label,
			.popup-buttons-wrapper .admin-buttons .admin-button:has(input:hover) label,
			.buttons-wrapper       .admin-buttons .admin-button:has(input:hover) label {
				box-shadow: 0 0 0 1px var(--color_secondary);
				background-color: var(--shade_medium);
				box-shadow: 0 0 0 1px var(--shade_medium);
				opacity: 1;
			}
			
			.admin-button i {
				display: inline-block;
				vertical-align: middle;
				position: relative;
				width:  25px;
				height: 25px;
				background-size: contain;
				background-repeat: no-repeat;
				top: -2px;
				left: -5px;
				display: none;
				pointer-events: none;
			}
			.admin-button em {
				pointer-events: none;
			}
			
			.admin-button[data-label="new"         ] i { display:inline-block; background-image: url("../../images/assets/negative.small/edit.svg"); }
			.admin-button[data-label="upload"      ] i { display:inline-block; background-image: url("../../images/assets/negative.small/uploads.svg"); }
			.admin-button[data-label="duplicate"   ] i { display:inline-block; background-image: url("../../images/assets/negative.small/plus.svg"); }
			.admin-button[data-label="delete"      ] i { display:inline-block; background-image: url("../../images/assets/negative.small/clear.svg"); }
			.admin-button[data-label="bulk-import" ] i { display:inline-block; background-image: url("../../images/assets/negative.small/arrow-2-up.svg"); }
			.admin-button[data-label="bulk-export" ] i { display:inline-block; background-image: url("../../images/assets/negative.small/arrow-2-down.svg"); }
			

			.admin-button[data-label="new"         ] i { display:inline-block; background-image: url("../../images/assets/positive/edit.svg"); }
			.admin-button[data-label="upload"      ] i { display:inline-block; background-image: url("../../images/assets/positive/uploads.svg"); }
			.admin-button[data-label="duplicate"   ] i { display:inline-block; background-image: url("../../images/assets/positive/plus.svg"); }
			.admin-button[data-label="delete"      ] i { display:inline-block; background-image: url("../../images/assets/positive/clear.svg"); }
			.admin-button[data-label="bulk-import" ] i { display:inline-block; background-image: url("../../images/assets/positive/arrow-2-up.svg"); }
			.admin-button[data-label="bulk-export" ] i { display:inline-block; background-image: url("../../images/assets/positive/arrow-2-down.svg"); }
			.admin-button[data-label="bulk-import-start" ] i {display:inline-block;background-image: url("../../images/assets/positive/arrow-1-right.svg");}

			/*								*/
			/* states						*/
			/*								*/
			
			html                      .admin-button[data-label="delete"   ] { display: none; }
			html                      .admin-button[data-label="duplicate"] { display: none; }
			html[data-sel="1"]        .admin-button[data-label="delete"   ] { display: inline-block; }
			html[data-sel="1"]        .admin-button[data-label="duplicate"] { display: inline-block; }
			html[data-sel="multiple"] .admin-button[data-label="delete"   ] { display: inline-block; }
			




		/*					*/
		/*	FORM PROGRESS 	*/
		/*					*/

		form .form-group.buttons .button i {}
		form[data-action="saving-in-progress"] { pointer-events: none; }
		form[data-action="saving-in-progress"] .button { pointer-events: none; }
		form[data-action="saving-in-progress"] .form-group.buttons .button[data-label="update"] i,
		form[data-action="saving-succeeded"] .form-group.buttons .button[data-label="update"] i,
		form[data-action="saving-failed"] .form-group.buttons .button[data-label="update"] i {
			display: inline-block;
			vertical-align: middle;
			width:  25px;
			height: 25px;
			margin: -4px 10px -8px -5px;
			background-size: contain;
		}
		form[data-action="saving-in-progress"] .form-group.buttons .button[data-label="update"] i {
			background-image:url("../../images/progress/negative/spinner-2.svg");
			animation: rotate 1s steps(16) infinite;
		}
		form[data-action="saving-succeeded"] .form-group.buttons .button[data-label="update"] i {
			background-image:url("../../images/admin/progress-bar-circle-24-done.png");
		}
		form[data-action="saving-failed"] .form-group.buttons .button[data-label="update"] i {
			background-image:url("../../images/admin/progress-bar-circle-24-failed.png");
		}



		
	/*							*/
	/*       UNCATAGORIZED  	*/
	/*							*/
	
		td.t-act[data-label="download"] .button i {
			background-image: url("../../images/assets/negative/download.svg");
		}
		td.t-act[data-label="online"] .button i {
			background-image: url("../../images/assets/negative/arrow-2-right.svg");
		}
		
		
		
		
		
	/*							*/
	/*							*/
	/* 			ACCESS 			*/
	/*							*/
	/*							*/
	
		html[data-lgn="0"][data-pag="dashboard"    ] main,
		html[data-lgn="0"][data-pag="products"     ] main,
		html[data-lgn="0"][data-pag="material-bank"] main,
		html[data-lgn="0"][data-pag="curriculum"   ] main,
		html[data-lgn="0"][data-pag="help"         ] main,
		html[data-lgn="0"][data-pag="my-class"     ] main {
			pointer-events:none!important;
			filter: grayscale(1) blur(5px);
			/* background-image: url("../../images/admin/input-readonly-pattern.gif"); */
			/* background-repeat: repeat; */
			/* background-size: 32px; */
		}
		html[data-lgn="0"][data-pag="dashboard"]     header,
		html[data-lgn="0"][data-pag="products"]      header,
		html[data-lgn="0"][data-pag="material-bank"] header,
		html[data-lgn="0"][data-pag="curriculum"]    header,
		html[data-lgn="0"][data-pag="help"]          header,
		html[data-lgn="0"][data-pag="my-class"]      header {
			pointer-events: all;
			filter:none;
		}
		

	
	/*							*/
	/*							*/
	/* 		Z-INDEXES 			*/
	/*							*/
	/*							*/
	
		header {
			z-index: 10010;
			z-index: 21000;
		}
		footer {
			z-index: 1000;
		}
		.languages {
			z-index: 2000;
		}
		.control {
			z-index: 1;
		}
		.dialog {
			z-index: 20000;
		}
		.filters .filter-options {
			z-index: 3000;
		}
		.progress {
			z-index: 90000;
		}
		
		
		
	/*							*/
	/*		APPEARANCE			*/
	/*							*/
	
		html[data-uds="0"] #inb { display: none; }
		
		/* BUTTON EXTRA STYLES */
		
			.buttons .button[data-label="remove"] {}
			.block[data-template="1"] .conditional-content .buttons a.button[data-label="remove"] em { display: none; }
			.block[data-template="1"] .conditional-content .buttons a.button[data-label="remove"] {background-color:var(--color_secondary);color: white;padding: 6px 5px 7px 5px;margin-left: 5px;height: var(--form_element_height);display: inline-block;}
			.block[data-template="1"] .conditional-content .buttons a.button[data-label="remove"] i {background-image: url("../../images/assets/negative/trash.svg");background-size: contain;width: 26px;height: 26px;margin: 0 0 0 0;}
		
		
		
		
	/*							*/
	/*			HACKS			*/
	/*							*/
	
    /* WebKit Browsers */
		::-webkit-scrollbar {
			width: 10px;
			height:10px;
		}
		::-webkit-scrollbar-thumb {
			width: 10px;
			background-color: #CCC;
			border: 3px solid #FFFFFF;
			/* box-shadow: inset 0 0 0 3px #eeeeee; */
			border-radius: 10px;
		}
		::-webkit-scrollbar-track {
			width: 10px;
			background-color: #FFFFFF;
			/* border-radius: 10px; */
		}
		::-webkit-scrollbar-thumb:hover {
			background-color:var(--color_secondary);
			box-shadow:inset 0 0 0 3px var(--color_secondary);
		}
		html {
			width: calc(100vw + 10px);
			overflow:hidden;
			overflow-y:overlay;
			overflow-y:auto;
		}
		body {
		}

    /* Firefox */
		scrollbar-width: thin;
		scrollbar-color: #888 #f1f1f1;

    /* Edge and IE */
		::-ms-scrollbar {
		  width: 10px;
		}
		::-ms-scrollbar-thumb {
		  background-color: #888;
		}
		::-ms-scrollbar-track {
		  background-color: #f1f1f1;
		}
		
	/* Helper to load new page contents	seamlessly */
	
	#hidden {
		display: none;
	}
	
	/*
	code {
		display: block;
		padding: 10px;
		font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
		font-size: 0.8rem;
		line-height: 1;
		color: #BF0000;
		background-color: yellow;
		box-shadow: 0 1px 10px 0 rgba(0,0,0,0.25);
		border-radius: 5px;
		white-space: normal;
		position: absolute;
		transform:translate(0%,0%);
		pointer-events: none;
		position: fixed;
		left: 10px; bottom: 65px;
		z-index: 999999;
	}
	code { opacity: 0; }
	div:hover > code,
	span:hover > code,
	em:hover > code,
	h1:hover > code,
	h2:hover > code,
	h3:hover > code,
	h4:hover > code,
	figcaption:hover > code,
	a:hover code,
	label:hover code,
	li:hover > code,
	p:hover > code { opacity: 1; }	
	*/
	
	code {
		display: inline-block;
		margin: 10px 0;
		padding: 10px;
		font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
		font-size: 0.8rem;
		line-height: 1;
		color: #BF0000;
		background-color: rgba(255,229,169,1.00);
	}
		
	html[data-loc="development"] code {/* display: none; */}
	html[data-loc="testing"] code { /*display: none;*/ }
	html[data-loc="site"]    code { /*display: none;*/ }
		
		
	Xheader { opacity: 0.5; }
	
	p.error {
		color: red;
		font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	}




/* DEVELOPMENT FUNCTIONS */

.dev-edit {
	display: inline-block;
	position: relative;
	padding: 5px;
	background-color: yellow;
	height: 30px;
	margin-bottom: -40px;
	left: -25px;
	top: -25px;
}




.product-info .product_group_type,
.products .product_group_type {
	display: block;
	position: absolute;
	inset:0;
	overflow: hidden;
	pointer-events: none;
	outline: 1px solid orange;
	outline: none;
}
.product-info .product_group_type em,
.products .product_group_type em {
	display: block;
	position: absolute;
	width: 150%;
	text-align: center;
	background-color: var(--color_secondary);
	color: white;
	font-weight: bold;
	transform-origin: 82% 30%;
	transform:translate(-50%,-50%) rotate(-45deg);
	box-shadow: 0 0 0 3px white, 0 0 15px 0 rgba(0,0,0,0.6);
}
html[data-pag="dashboard"] .products .product_group_type em,
html[data-pag="products"]  .products .product_group_type em,
html[data-pag="product-family"] .products .product_group_type em {
	right: -100%;
	bottom: 20%;
	height: 30px;
	font-size: 1.0rem;
	line-height: 30px;
}
html[data-pag="my-class"] .products .product_group_type em {
	right: -100%;
	bottom: 20%;
	height: 30px;
	font-size: 1.0rem;
	line-height: 30px;
}
html[data-pag="product-demo"] .product-info .product_group_type em,
html[data-pag="product-demo"] .products .product_group_type em,
html[data-pag="product"] .product-info .product_group_type em,
html[data-pag="product"] .products .product_group_type em {
	right: -110%;
	bottom: 15%;
	height: 45px;
	font-size: 1.5rem;
	line-height: 45px;
}
/* states */

	/* private */
	.product-info[data-type="1"],
	.products .product[data-type="1"] .product_group_type {
		visibility: hidden;
	}
	/* demo */
	.product-info[data-type="2"],
	.products .product[data-type="2"] .product_group_type {
		visibility: visible;
	}
	
	
	
	
	
	
	/* hide elements when user is not an admin */
	
	html[data-adm="0"] .tooltipster-base { display: none; }
	html[data-adm="0"] .products .product .icon i,
	html[data-adm="0"] .sortable-table tbody tr .icon i { display: none; }







	/* mark items, that have file attached */

	.products .product[data-exists="1"] .icon i,
	.products .product[data-exists="0"] .icon i,
	.sortable-table tbody tr[data-exists="1"] .icon i,
	.sortable-table tbody tr[data-exists="0"] .icon i {
		display: block;
		position: relative;
		float: right;
		width:       25px;
		height:       7px;
		margin: 0 0  -7px 0;
		border-radius: 5px;
		left: -3px;
		top: 29px;
		display: none;
	}
	.products .product[data-exists="1"] .icon i,
	XXX.sortable-table tbody tr[data-exists="1"] .icon i {
		background-color: rgba(77,209,28,1.00);
	}
	XXX.products .product[data-exists="0"] .icon i,
	XXX.sortable-table tbody tr[data-exists="0"] .icon i {
		background-color: rgba(231,86,14,1.00);
	}
	html[data-adm="0"] .products .product .icon i { display: none; }
	html[data-adm="1"] .products .product .icon i { display: block; display: none; }




	/* mark items, that has missing translation */
	
	span.missing-translation {
		display: inline-block;
		position: relative;
		vertical-align: text-bottom;
		top: -3px;
		margin-left: 3px;
		font-size:     11px;
		line-height:   12px;
		border-radius: 12px;
		width:         12px;
		height:        12px;
		background-color: red;	
		color: white;
		text-align: center;
	}
	html               span.missing-translation { display: none; }
	html[data-adm="1"] span.missing-translation { display: inline-block; }
	
	span.missing-translation:before { content:"?";}




	.filename[title] {
		white-space: nowrap;
		width: 300px;
		
	}
	
	
	
	/* reference to the title in description */
	
	.title-reference {
		font-weight: 600; 
	}
	
	
	
	
	
	html[data-adm="1"] li.product figcaption h3 span.missing:before,
	html[data-adm="1"] td.t-ttl figcaption h3 span.missing:before { content:"missing title translation"; color:red; }	
	
	html[data-adm="1"] li.product figcaption h4 span.missing:before,
	html[data-adm="1"] td.t-ttl figcaption h4 span.missing:before { content:"missing subtitle translation"; color:red; }





	/* RESPONSIVES */


	/* Debug */
	
	XXhtml[data-loc="site"] body:before,
	html[data-loc="testing"] body:before,
	html[data-loc="development"] body:before {
		display: block;
		position: fixed;
		right: 0;
		bottom: 25px;
		width: auto;
		background-color: #FFFFFFAA;
		box-shadow: 0 0 15px 0 #00000055;
		z-index: 9999999;
		font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
		font-size: 12px;
		line-height: 14px;
		color: black;
		padding: 10px 15px 10px 15px;
		border-left: 20px solid black;
	}

	/* Main grid */
	
	/* XXXXL   */ @media screen and (min-width:1600px)                        { body:before { content:" XXXXL  1600-9999px- "; border-left-color:#F8FF20; } }
	/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599px) { body:before { content:" XXXL   1440-1599px ";  border-left-color:#00FF1B; } }
	/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439px) { body:before { content:" XXL    1240-1439px ";  border-left-color:#0085AA; } }
	/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239px) { body:before { content:" XL     1040-1139px ";  border-left-color:#02CEB5; } }
	/*     L   */ @media screen and (min-width: 960px) and (max-width:1039px) { body:before { content:" L       960-1039px ";  border-left-color:#0ED773; } }
	/*     M   */ @media screen and (min-width: 860px) and (max-width: 959px) { body:before { content:" M       860- 959px ";  border-left-color:#44D70E; } }
	/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859px) { body:before { content:" MS      700- 859px ";  border-left-color:#A0D70E; } }
	/*     S   */ @media screen and (min-width: 580px) and (max-width: 699px) { body:before { content:" S       580- 699px ";  border-left-color:#D7CC0E; } }
	/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579px) { body:before { content:" XS      520- 579px ";  border-left-color:#D7A60E; } }
	/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519px) { body:before { content:" XXS     440- 519px ";  border-left-color:#BDD70E; } }
	/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439px) { body:before { content:" XXXS    330- 439px ";  border-left-color:#B1570B; } }
	/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329px) { body:before { content:" XXXXS     0- 329px ";  border-left-color:#B10B6D; } }
	
	/* Subgrid */
	
	/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439px) { body:before { content:" XXL    1240-1439px (XXL4 1400-1439px) "; border-left-color:#2CD0FF; } }
	/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399px) { body:before { content:" XXL    1240-1439px (XXL3 1340-1399px) "; border-left-color:#A34FFF; } }
	/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339px) { body:before { content:" XXL    1240-1439px (XXL2 1300-1339px) "; border-left-color:#FF1594; } }
	/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299px) { body:before { content:" XXL    1240-1439px (XXL1 1240-1299px) "; border-left-color:#00E47C; } }
	/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239px) { body:before { content:" XL     1040-1239px (XL4  1200-1239px) "; border-left-color:#19FDE1; } }
	/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199px) { body:before { content:" XL     1040-1239px (XL3  1140-1199px) "; border-left-color:#0BB8FF; } }
	/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139px) { body:before { content:" XL     1040-1239px (XL2  1100-1139px) "; border-left-color:#006CFF; } }
	/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099px) { body:before { content:" XL     1040-1239px (XL1  1040-1099px) "; border-left-color:#3500FF; } }
	/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959px) { body:before { content:" M       860- 959px (M2    900- 959px) "; border-left-color:#0EC2D7; } }
	/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899px) { body:before { content:" M       860- 959px (M1    860- 899px) "; border-left-color:#0ED7A5; } }
	/*     S2  */ @media screen and (min-width: 640px) and (max-width: 699px) { body:before { content:" S       640- 699px (S2    640- 699px) "; border-left-color:#C6BD17; } }
	/*     S1  */ @media screen and (min-width: 580px) and (max-width: 639px) { body:before { content:" S       580- 639px (S1    580- 639px) "; border-left-color:#BEB517; } }
	/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439px) { body:before { content:" XXXS    330- 439px (XXXS2 400- 439px) "; border-left-color:#E77616; } }
	/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399px) { body:before { content:" XXXS    330- 439px (XXXS1 330- 399px) "; border-left-color:#F2C512; } }
	
	html[data-loc="site"] body:before { content:"";important; }


	/* Main grid */

	/* XXXXL   */ @media screen and (min-width:1600px)                        {}
	/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599px) {}
	/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439px) {}
	/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239px) {}
	/*     L   */ @media screen and (min-width: 960px) and (max-width:1039px) {}
	/*     M   */ @media screen and (min-width: 860px) and (max-width: 959px) {}
	/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859px) {}
	/*     S   */ @media screen and (min-width: 580px) and (max-width: 699px) {}
	/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579px) {}
	/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519px) {}
	/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439px) {}
	/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329px) {}

	/* Subgrid */

	/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439px) {}
	/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399px) {}
	/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339px) {}
	/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299px) {}
	/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239px) {}
	/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199px) {}
	/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139px) {}
	/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099px) {}
	/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959px) {}
	/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899px) {}
	/*     S2  */ @media screen and (min-width: 640px) and (max-width: 699px) {}
	/*     S1  */ @media screen and (min-width: 580px) and (max-width: 639px) {}
	/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439px) {}
	/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399px) {}
	
	/* Grouped grid */
	
	/*    -XL   */ @media screen and (min-width:   0px) and (max-width:1239px) {}
	
	
	header .mirror {}
	@media screen and (min-width:1440px)                        { header .mirror.outer { width: 1200px; }}
	@media screen and (min-width:1240px) and (max-width:1439px) { header .mirror.outer { width: 1100px; }}
	@media screen and (min-width:1040px) and (max-width:1239px) { header .mirror.outer { width: 1000px; }}
	@media screen and (min-width: 960px) and (max-width:1039px) { header .mirror.outer { width:  900px; }}
	@media screen and (min-width: 860px) and (max-width: 959px) { header .mirror.outer { width:  800px; width: calc(100% - 10px); }}
	@media screen and (min-width: 700px) and (max-width: 859px) { header .mirror.outer { width:  680px; width: calc(100% - 10px); }}
	@media screen and (min-width: 580px) and (max-width: 699px) { header .mirror.outer { width:  560px; width: calc(100% - 10px); }}
	@media screen and (min-width: 310px) and (max-width: 579px) { header .mirror.outer { width:  310px; width: calc(100% - 10px); }}

	main .mirror {}
	@media screen and (min-width:1440px)                        { main .mirror.outer { width: 1300px; }}
	@media screen and (min-width:1240px) and (max-width:1439px) { main .mirror.outer {width: 1100px;}}
	@media screen and (min-width:1040px) and (max-width:1239px) { main .mirror.outer { width: 1000px;}}
	@media screen and (min-width: 960px) and (max-width:1039px) { main .mirror.outer { width:  900px; }}
	@media screen and (min-width: 860px) and (max-width: 959px) { main .mirror.outer { width:  800px; width: calc(100% - 10px); }}
	@media screen and (min-width: 700px) and (max-width: 859px) { main .mirror.outer { width:  680px; width: calc(100% - 10px); }}
	@media screen and (min-width: 580px) and (max-width: 699px) { main .mirror.outer { width:  560px; width: calc(100% - 10px); }}
	@media screen and (min-width: 310px) and (max-width: 579px) { main .mirror.outer { width:  310px; width: calc(100% - 10px); }}

	footer .mirror {}
	@media screen and (min-width:1440px)                        { footer .mirror.outer {width: 1200px;}}
	@media screen and (min-width:1240px) and (max-width:1439px) { footer .mirror.outer { width: 1100px; }}
	@media screen and (min-width:1040px) and (max-width:1239px) { footer .mirror.outer {width: 1000px;}}
	@media screen and (min-width: 960px) and (max-width:1039px) { footer .mirror.outer { width:  900px; }}
	@media screen and (min-width: 860px) and (max-width: 959px) { footer .mirror.outer { width:  800px; width: calc(100% - 10px); }}
	@media screen and (min-width: 700px) and (max-width: 859px) { footer .mirror.outer { width:  680px; width: calc(100% - 10px); }}
	@media screen and (min-width: 580px) and (max-width: 699px) { footer .mirror.outer { width:  560px; width: calc(100% - 10px); }}
	@media screen and (min-width: 310px) and (max-width: 579px) { footer .mirror.outer { width:  310px; width: calc(100% - 10px); }}
	
	
	/*   -XXL   */ @media screen and (min-width:   0px) and (max-width:1439px) {
		html[data-lgn="1"] footer {display: none;}
	}
	/*   S-XXL   */ @media screen and (min-width: 580px) and (max-width:1439px) {
		html[data-pag="dashboard"] .products .product,
		html[data-pag="products"] .products .product,
		html[data-pag="products"] .block[data-label="other-products"] .products .product { width: calc(50% - 20px); }
	}
	/*    -S   */ @media screen and (min-width:   0px) and (max-width: 699px) {
		html[data-pag="dashboard"] .products .product,
		html[data-pag="products"] .products .product,
		html[data-pag="products"] .block[data-label="other-products"] .products .product { width: calc(100% - 20px); }
	}
	/*    L-    */ @media screen and (min-width: 1040px) and (max-width:9999px) {
		html[data-adm="0"] header .blocks .main-menu { display: none; }
	}
	/*    -L-    */ @media screen and (min-width:   0px) and (max-width:1039px) {
		html[data-pag="dashboard"] .products .product { width: calc(100% - 20px); }
		#act .account-toggle em { display: none; }
		#notifications { width: 100vw; }
		#notifications .n-items .n-item .n-close-button { opacity: 1; }
		.bottom-banner { display: none; }
		#tba { display: none; }
		#inb { display: none; }
		.block[data-label="hero"] { aspect-ratio:1/1; }
		main .columns .column[data-label="left"] { display: none; }
		html[data-adm="1"] .sortable-table tbody tr[data-access="3"] td.t-act .stats em:before,
		html[data-adm="1"] .sortable-table tbody tr[data-access="2"] td.t-act .stats em:before,
		html[data-adm="1"] .sortable-table tbody tr[data-access="1"] td.t-act .stats em:before,
		html[data-adm="1"] .sortable-table tbody tr[data-access="0"] td.t-act .stats em:before { content:""; }
		.column[data-label="content"]:before { display: none;}
		html[data-lgn="1"] main {width: calc(100% - 0px);}
		.columns[data-template="1/4"] .column:nth-child(2) { width: 100%; }		
		.columns .column .mirror.inner { margin-top:0; padding-top: 25px; }
		html[data-acc="1"] #act .account-menu {left: 20px;width: calc(100vw - 40px);position: fixed;}
		html[data-pag="material-bank"] .products .product { width: calc(50% - 20px); }
		html[data-pag="curriculum"] .products .product { width: calc(50% - 20px); }
		html[data-adm="0"] footer { display: none; }
	}
	/*    -M   */ @media screen and (min-width:   0px) and (max-width: 959px) {
		header .blocks .main-menu > .placeholder > .menu-group:nth-child(2),
		header .blocks .main-menu > .placeholder > .menu-group:nth-child(3),
		header .blocks .main-menu > .placeholder > .menu-group:nth-child(4) { display: none; }
		header .blocks .main-menu > .placeholder > .menu-group:nth-child(2) > ul,
		header .blocks .main-menu > .placeholder > .menu-group:nth-child(3) > ul,
		header .blocks .main-menu > .placeholder > .menu-group:nth-child(4) > ul { margin:0 -15px 0 0; padding: 15px 0 15px 0; }
		header .blocks .main-menu > .placeholder > .menu-group:nth-child(2) > ul li,
		header .blocks .main-menu > .placeholder > .menu-group:nth-child(3) > ul li,
		header .blocks .main-menu > .placeholder > .menu-group:nth-child(4) > ul li { margin:0 0 0 0; padding: 1px 0 1px 0; }
		header .blocks .main-menu > .placeholder > .menu-group:nth-child(2) > ul li a em,
		header .blocks .main-menu > .placeholder > .menu-group:nth-child(3) > ul li a em,
		header .blocks .main-menu > .placeholder > .menu-group:nth-child(4) > ul li a em { font-size: 1rem; transform-origin: left center; transform:scaleX(.85); }
		html[data-pag="material-bank"] .products .product { width: calc(100% - 20px); }
		html[data-pag="curriculum"] .products .product { width: calc(100% - 20px); }
		header .blocks .main-menu a.toggle i { background-size: 45px 45px; }
		html[data-mnu="1"] header .blocks .main-menu a.toggle i { background-size: 30px 30px; }
		#tbr h1 { position:absolute; left: 60px; top: 15px; font-size: 1.35rem; font-weight: 600; }
		footer ul { padding-inline:30px; text-align: center; align-items: center; }
		footer ul li { max-width: 10em; font-size: 0.9rem; line-height: 1.2; }
		#tbr .fixed-menu { display: none; }
		#notifications .n-items { left: 0; right: 0; }
		header .blocks .main-menu a.toggle:hover { background-color: transparent; }
		html[data-mnu="1"][data-adm="0"] header .blocks .main-menu a.toggle { background-color:white; }
		html[data-mnu="1"][data-adm="0"] header .blocks .main-menu a.toggle i { background-image:url("../../images/assets/positive/clear.svg"); }
		
		.filters .filter[data-label="view"] label { pointer-events: none; }
		.filters .filter label[data-label="grid"] { display:block; }
		.filters .filter label[data-label="list"] { display:none; }
		.filters .filter label i { background-image: url("../../images/assets/positive/grid.svg")!important; }
		
	}	
	/*    -XL   */ @media screen and (min-width:   0px) and (max-width:1239px) {
		#tbr .main-languages { display: none; }
		#tbr .main-countries { display: none; }
	}

	/* DISABLING SOME ELEMENTS */

	.block[data-label="hero"] .buttons { display: none; }
	
	
	
	
	/* desktop */	@media screen and (min-width:960px){
	}
	/* tablet */	@media screen and (min-width:700px) and (max-width:959px){
		.columns { display: block; }
		.columns .column { display: block; width: 100%!important;  }
	}
	/* mobile */	@media screen and (min-width:550px) and (max-width:699px){
		.columns { display: block; }
		.columns .column { display: block; width: 100%!important;  }
	}
	/* narrow mobile */	@media screen and (max-width:549px){
		.columns { display: block; }
		.columns .column { display: block; width: 100%!important;  }
	}

	/*
	*/