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

		/*							*/
		/*							*/
		/*		ACCOUNT 			*/
		/*							*/
		/*							*/

			section.component[data-component="account"] {}
			
			#act {
				position: absolute;
				top: 0;
				right: 65px;
				width: auto;
				min-width: 260px;
				height: 55px;
				text-align: right;
				pointer-events: none;
				background-color: yellow;
				background-color: transparent;
				transition: opacity .5s ease;
				opacity: 1;
			}
			html[data-lgc="1"] #act { z-index: 2200; }
			
			html:has(ul.available-languages > li:hover) #act { opacity: 0; transition-delay: 0; }
			html:not(:has(ul.available-languages > li:hover)) #act { opacity: 1; transition-delay: 0.5s; }
			
			#act .login-link,
			#act .account-toggle {
				display: inline-block;
				position: relative;
				text-decoration: none;
				width: auto;
				min-width: 150px;
				height: 55px;
				margin: 0;
				padding: 0;
				z-index: 10;
				text-align: right;
				background-color: wheat;
				background-color: rgba(255,255,255,0);
				pointer-events: all;
				z-index: 2200;
				appearance:none;
				-webkit-appearance:none;
				-moz-appearance:none;
				-o-appearance:none;
				-ms-appearance:none;
				border:none;
				cursor: pointer;
			}
			#act .login-link { margin-top:3px; }
			html[data-pag="login"] #act .login-link { display: none; }
			
			#act .account-toggle {}
			
			#act .login-link i {
				display: inline-block;
				position: relative;
				width: 35px;
				height: 35px;
				margin: 0;
				padding: 0;
				top: 5px;
				right: 0px;
			}
			#act .account-toggle i {
				display: block;
				position: absolute;
				width: 45px;
				height:45px;
				margin: 0px 0 0 8px;
				padding: 0;
				top: 10px;
				right: 0px;
				z-index: 10;
				text-align: right;
				background-color: rgba(255,255,255,0);
				border-top-left-radius:  3px;
				border-top-right-radius: 3px;
			}
			#act .login-link i .icon,
			#act .account-toggle i .icon {
				display: inline-block;
				position: relative;
				left: -50%;
				top: 5px;
				transform: translate(50%,0%);
				margin: 0px 0 0 0;
				text-align: center;
				background-repeat: no-repeat;
				background-position: center center;
				border-radius: 30px;
			}
			#act .login-link i .icon { 
				width:  30px;
				height: 30px;
				background-size: 28px 28px;
				background-image: url("../../images/assets/negative/login.svg"); 
			}
			#act .account-toggle i .icon {
				width:  24px;
				height: 24px;
				box-shadow: 0 0 0 1px var(--shade_medium);
				background-color: var(--shade_light);
				background-size: 20px 20px;
				background-image: url("../../images/assets/positive/user.svg");
			}
			html[data-lad="1"] #act .account-toggle i:before {
				content:"A";
				position: relative;
				display: block;
				float: right;
				left: -5px;
				z-index: 1;
				text-align: center;
				font-family: arial;
				font-weight: bold;
				font-size:      9px;
				line-height:   12px;
				width:         12px;
				height:        12px;
				border-radius: 12px;
				margin: 0 0   -12px 0;
				padding: 0;
				overflow: hidden;
				background-color: #666;
				color: white;
			}
			html[data-lad="1"][data-acc="1"] #act .account-toggle i:before { opacity: 0; }
			
			
			html[data-acc="1"] #act .account-toggle i {
				background-color: white;
			}
			#act .login-link em {
				display: inline-block;
				text-align: left;
				color: white;
				font-weight: 300;
			}
			#act .account-toggle em {
				position: absolute;
				text-align: right;
				width: 300px;
				margin: -10px 0 0 -345px;
				font-weight: 300;
				font-size: var(--paragraph_fontsize);
				line-height: var(--paragraph_leading);
				opacity: 0.5;
				transition: margin 0.25s ease;
			}
			
			html[data-acc="1"] #act .account-toggle em {
				margin-left: -355px;
			}
			
		
				               #act .pagecover { visibility: hidden; pointer-events: none; opacity: 0; transition:opacity .2s ease, visibility 0s ease .5s; }
				               #act .account-menu { display: grid; max-height: 0; visibility: hidden; pointer-events: none; transition:visibility 0s linear .05s, max-height 0.15s ease;  }
				               #act .account-menu .menu-groups { opacity: 1; transition:max-height .3s ease, opacity .3s ease; }
				               #act .account-toggle { background-color: transparent; }
				
			html[data-acc="0"] #act .account-menu  { grid-template-rows:0fr; max-height:0px; }

			html[data-acc="1"] #act .pagecover { visibility: visible; pointer-events: all; opacity: 1; transition:opacity .2s ease, visibility 0s linear 0s;  }
			html[data-acc="1"] #act .account-menu  {grid-template-rows: 1fr;max-height: 100vh;visibility: visible;pointer-events: all;transition:visibility 0s linear 0s, max-height 0.4s ease;}
			html[data-acc="1"] #act .account-menu .menu-group { opacity: 1; transition:all .3s ease;  }
			html[data-acc="1"] #act .account-toggle { z-index: 2300; }
			html[data-acc="1"] #act .account-toggle i .icon { background-color: white; box-shadow: none; }
















			/* main-groups */
			
			.menu-main-groups {
				display: flex;
				flex-wrap: wrap;
				background-color: white;
				padding: 10px 0 0 15px;
				box-shadow: 0 1px 10px 0 rgba(0,0,0,0.3);
				border-bottom-left-radius:  3px;
				border-bottom-right-radius: 3px;
			}
			:root {
				--min_menu_main_group_width: 80px;
				--min_menu_main_group_gap: 10px;
			}
			.menu-main-groups .menu-main-group {
				box-sizing: content-box;
				margin-right: var(--min_menu_main_group_gap);
			}
			.menu-main-groups .menu-main-group:last-child { margin-right: 0; }


			.account-menu[data-template="1"] {
				.menu-main-groups .menu-main-group[data-size="100"] {width: calc( 4    * var(--min_menu_main_group_width) - var(--min_menu_main_group_gap) );}
			}
			.account-menu[data-template="2"] {
				.menu-main-groups .menu-main-group[data-size="100"] { width: calc(10    * var(--min_menu_main_group_width) - var(--min_menu_main_group_gap) );}
				.menu-main-groups .menu-main-group[data-size="60"]  { width: calc( 6    * var(--min_menu_main_group_width) - var(--min_menu_main_group_gap) ); }
				.menu-main-groups .menu-main-group[data-size="50"]  { width: calc( 5    * var(--min_menu_main_group_width) - var(--min_menu_main_group_gap) ); }
				.menu-main-groups .menu-main-group[data-size="40"]  { width: calc( 4    * var(--min_menu_main_group_width) - var(--min_menu_main_group_gap) ); }
				.menu-main-groups .menu-main-group[data-size="33"]  { width: calc( 3.33 * var(--min_menu_main_group_width) - var(--min_menu_main_group_gap) ); }
			}
			
			
			/* menu-group-data */

			.menu-group .menu-group-data {
				margin: 0 0 15px 0;
				padding: 10px 0 0 0;
				border: 1px solid #CCC;
				border-radius: 3px;
			}
			
			
			/* menu-data > access */
			
				.menu-group-data .material-types {
					padding: 0 10px;
				}
				.menu-group-data .material-types li {
					padding: 0 10px 0 10px;
					margin-bottom: 10px;
				}
				.menu-group-data .material-types li { margin-bottom: 0; }
				.menu-group-data .material-types li .mt-name {
					display: inline-block;
					vertical-align: top;
					width: calc(100% - 100px);
				}
				.menu-group-data .material-types li .mt-access {
					display: inline-block;
					vertical-align: top;
					width: 90px;
					padding: 2px 5px;
					background-color: red;
					color: white;
					border-radius: 10px;
					font-size: 1rem;
					text-align: center;
				}
				
				
				
				
			/* menu-data > stats */
			
				.menu-group-data .material-types {
					display: block;
					padding: 0 10px;
					white-space: normal;
				}
				.menu-group-data .material-types .mt-title {
					margin-bottom: 5px;
				}
				.menu-group-data .material-types .mt-stats {
					border: 1px solid #99999955;
					border-bottom: none;
				}
				.menu-group-data .material-types .mt-stats > li {
					display: block;
					font-size: 1rem;
				}
				.menu-group-data .material-types .mt-stats > li:nth-child(2n+0) { background-color: #F5F5F5; }
				.menu-group-data .material-types .mt-stats > li:nth-child(2n+1) { background-color: #FAFAFA; }
				.menu-group-data .material-types .mt-stats > li span {
					display: inline-block;
					vertical-align: top;
					margin: 0;
					padding: 2px 5px;
					box-sizing: border-box;
					border-bottom: 1px solid #99999955;
				}
				.menu-group-data .material-types .mt-stats > li .mts-type  {
					width: calc(100% - 100px);
				}
				.menu-group-data .material-types .mt-stats > li .mts-used  {
					width: 50px;
					text-align: right;
				}
				.menu-group-data .material-types .mt-stats > li .mts-limit  {
					width: 50px;
					text-align: right;
				}











			#act .account-menu .menu-group-prefix {
				margin: 0;
				padding: 5px 0 5px 0;
				text-align: center;
				font-family: 'Quicksand';
				font-size:   var(--small_paragraph_fontsize);
				line-height: 1;
				font-weight: 700;
				color: var(--color_secondary);
				text-transform: uppercase;
				letter-spacing: 2px;
				margin-bottom: 5px;
			}

			#act .account-menu .account-details {
				background-color: yellow;
				background-color: transparent;
				padding-bottom: 15px;
			}
			#act .account-menu .account-details figure {
				display: block;
				position: relative;
				left: 50%;
				transform:translateX(-50%);
				width:         80px;
				height:        80px;
				border-radius: 80px;
				margin: 20px 0 10px 0;
				background-size: cover;
				background-repeat: no-repeat;
			}
			html[data-lad="1"] #act .account-menu .account-details figure:before {
				content:"A";
				position: relative;
				display: block;
				float: right;
				left: 3px;
				z-index: 1;
				text-align: center;
				font-family: arial;
				font-weight: bold;
				font-size:     15px;
				line-height:   25px;
				width:         25px;
				height:        25px;
				border-radius: 25px;
				margin: 0 0   -25px 0;
				padding: 0;
				overflow: hidden;
				background-color: #666;
				color: white;
				box-shadow: 0 0 0 2px white;
			}
			
			#act .account-menu .account-details figcaption {
				padding: 5px 0 5px 0;
				text-align: center;
				font-size: var(--big_paragraph_fontsize);
				line-height: var(--big_paragraph_leading);
			}
			#act .account-menu .account-details figcaption p {
				font-size: inherit;
				line-height: inherit;
				color: inherit;
			}
			#act .account-menu .account-details figcaption .name {
				padding-inline: 10px;
			}
			#act .account-menu .account-details figcaption .roles {}
			
			
			
			
			
			#act .pagecover {
				position: fixed;
				left: 0;
				top: 0;
				width: 100vw;
				height: 100vh;
				background-color: var(--cover_page_color);
				backdrop-filter:blur(1px);
				z-index: 2100;
			}
			#act .account-menu {
				position: absolute;
				right: -0px;
				top: 55px;
				padding: 0 0 0 0;
				text-align: left;
				z-index: 2200;
			}
			#act .account-menu .menu-groups {
				display: block;
				overflow: hidden;
				overflow: visible;
			}
			/*
			#act .account-menu .menu-groups .menu-group:nth-child(2):before,
			#act .account-menu .menu-groups .menu-group:nth-child(3):before {
				content:"";
				display: block;
				width: calc(100% - 40px);
				margin: 10px 0 5px 20px;
				padding-top: 10px;
				border-top: 1px solid gray;
			}
			*/
			#act .account-menu .menu-groups {
				height: inherit;
			}
			#act .account-menu .menu-groups > ul.mg-menu {
				margin: 0 0 15px 0;
				padding: 10px 0 0 0;
				border: 1px solid #CCC;
				border-radius: 3px;
			}
			#act .account-menu .menu-groups ul.mg-menu li {
				display: block;
				white-space: nowrap;
				white-space: normal;
				padding: 0;
			}
			
			#act .account-menu .menu-groups ul.mg-menu li:last-child {padding-bottom: 0px; margin-bottom: 10px;}
			
			#act .account-menu .menu-groups ul.mg-menu.account > li:first-child {padding-top: 0px;}
			#act .account-menu .menu-groups ul.mg-menu.account > li:last-child {padding-bottom: 0px; }
			
			#act .account-menu .menu-groups ul.mg-menu.admin > li:first-child {padding-top: 0px;}
			#act .account-menu .menu-groups ul.mg-menu.admin > li:last-child { padding-bottom: 0px; }
			
			#act .account-menu .menu-groups ul.mg-menu li {margin-bottom: -4px;}
			#act .account-menu .menu-groups ul.mg-menu li[data-allowed="0"] {
				cursor: not-allowed;
			}
			#act .account-menu .menu-groups ul.mg-menu li[data-allowed="0"] a {
				pointer-events: none;
				opacity: 0.5;
			}
			#act .account-menu .menu-groups ul.mg-menu li[data-allowed="0"]:before {
				content:"";
				display: block;
				position: relative;
				z-index: 1;
				float: right;
				width:  16px;
				height: 16px;
				margin:0 0 -16px 0;
				top: 12px;
				right:10px;
				background-image: url("../../images/assets/positive/locked.svg");
				background-size: contain;
				background-repeat: no-repeat;
			}
			#act .account-menu .menu-groups ul.mg-menu li[data-allowed="0"]:hover:before {
				background-image: url("../../images/assets/negative/locked.svg");
			}
			#act .account-menu ul.mg-menu li a {
				display: block;
				position: relative;
				box-sizing: border-box;
				width: 100%;
				padding: 5px 60px 5px 30px;
			}
			#act .account-menu .menu-groups ul.mg-menu li a i {
				display: inline-block;
				vertical-align: top;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 20px;
				height: 13px;
				margin: 4px 10px 0 0;
			}
			#act .account-menu .menu-groups ul.mg-menu li a em {
				display: inline-block;
				vertical-align: top;
				font-size: 1.1rem;
				line-height: 25px;
			}
			#act .account-menu .menu-groups ul.mg-menu li a i {
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center center;
				display: block;
				position: relative;
				width: 30px;
				height: 30px;
				margin: 0 0 -30px 0;
				left: -15px;
				top: -2px;
				opacity: 0.8;
			}
			#act .account-menu .menu-groups ul.mg-menu li a i:before {
				content:"";
				display: block;
				position: absolute;
				inset:0;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center center;
			}
			
			#act .account-menu .menu-groups ul.mg-menu li a em {
				display: block;
				margin: 0 0 0 20px;
			}
			#act .account-menu ul.mg-menu  li[data-label="age-groups"                  ] a i { background-image: url("../../images/assets/positive/age-group.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="banners"                     ] a i { background-image: url("../../images/assets/positive/ad.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="classes"                     ] a i { background-image: url("../../images/assets/positive/my-classes.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="contact-us"                  ] a i { background-image: url("../../images/assets/positive/contact-us.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="dashboard"                   ] a i { background-image: url("../../images/assets/positive/dashboard.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="families"                    ] a i { background-image: url("../../images/assets/positive/product-family.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="files"                       ] a i { background-image: url("../../images/assets/positive/files.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="general-terms-and-conditions"] a i { background-image: url("../../images/assets/positive/general-terms-and-conditions.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="groups"                      ] a i { background-image: url("../../images/assets/positive/product-group.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="help"                        ] a i { background-image: url("../../images/assets/positive/help.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="home"                        ] a i { background-image: url("../../images/assets/positive/home.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="impressum"                   ] a i { background-image: url("../../images/assets/positive/impressum.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="login"                       ] a i { background-image: url("../../images/assets/positive/login.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="logout"                      ] a i { background-image: url("../../images/assets/positive/logout.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="material-types"              ] a i { background-image: url("../../images/assets/positive/material-type.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="pages"                       ] a i { background-image: url("../../images/assets/positive/page.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="privacy-policy"              ] a i { background-image: url("../../images/assets/positive/privacy-policy.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="products"                    ] a i { background-image: url("../../images/assets/positive/products.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="product-types"               ] a i { background-image: url("../../images/assets/positive/grid.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="registration"                ] a i { background-image: url("../../images/assets/positive/registration.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="schools"                     ] a i { background-image: url("../../images/assets/positive/school.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="translations"                ] a i { background-image: url("../../images/assets/positive/registration.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="types"                       ] a i { background-image: url("../../images/assets/positive/products.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="uploads"                     ] a i { background-image: url("../../images/assets/positive/uploads.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="user"                        ] a i { background-image: url("../../images/assets/positive/user.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="users"                       ] a i { background-image: url("../../images/assets/positive/users.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="user-roles"                  ] a i { background-image: url("../../images/assets/positive/user-roles.svg"); }

			#act .account-menu ul.mg-menu  li[data-label="age-groups"                  ] a i:before { background-image: url("../../images/assets/negative/age-group.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="banners"                     ] a i:before { background-image: url("../../images/assets/negative/ad.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="classes"                     ] a i:before { background-image: url("../../images/assets/negative/my-classes.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="contact-us"                  ] a i:before { background-image: url("../../images/assets/negative/contact-us.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="dashboard"                   ] a i:before { background-image: url("../../images/assets/negative/dashboard.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="families"                    ] a i:before { background-image: url("../../images/assets/negative/product-family.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="files"                       ] a i:before { background-image: url("../../images/assets/negative/files.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="general-terms-and-conditions"] a i:before { background-image: url("../../images/assets/negative/general-terms-and-conditions.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="groups"                      ] a i:before { background-image: url("../../images/assets/negative/product-group.svg");}
			#act .account-menu ul.mg-menu  li[data-label="help"                        ] a i:before { background-image: url("../../images/assets/negative/help.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="home"                        ] a i:before { background-image: url("../../images/assets/negative/home.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="impressum"                   ] a i:before { background-image: url("../../images/assets/negative/impressum.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="login"                       ] a i:before { background-image: url("../../images/assets/negative/login.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="logout"                      ] a i:before { background-image: url("../../images/assets/negative/logout.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="material-types"              ] a i:before { background-image: url("../../images/assets/negative/material-type.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="pages"                       ] a i:before { background-image: url("../../images/assets/negative/page.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="privacy-policy"              ] a i:before { background-image: url("../../images/assets/negative/privacy-policy.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="products"                    ] a i:before { background-image: url("../../images/assets/negative/products.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="product-types"               ] a i:before { background-image: url("../../images/assets/negative/grid.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="registration"                ] a i:before { background-image: url("../../images/assets/negative/registration.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="uploads"                     ] a i:before { background-image: url("../../images/assets/negative/uploads.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="schools"                     ] a i:before { background-image: url("../../images/assets/negative/school.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="translations"                ] a i:before { background-image: url("../../images/assets/negative/registration.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="types"                       ] a i:before { background-image: url("../../images/assets/negative/products.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="user"                        ] a i:before { background-image: url("../../images/assets/negative/user.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="users"                       ] a i:before { background-image: url("../../images/assets/negative/users.svg"); }
			#act .account-menu ul.mg-menu  li[data-label="user-roles"                  ] a i:before { background-image: url("../../images/assets/negative/user-roles.svg"); }
			
			
			
			
			/* states */
			
			#act .account-menu ul li a i:before { opacity: 0; }
			#act .account-menu ul > li:hover a {
				background-color: var(--bar);
				background-color: var(--color_secondary);
				color: white;
			}
			#act .account-menu ul > li:hover a i {
				background-size: 0;
			}
			#act .account-menu ul > li:hover a i:before {
				opacity: 1;
			}
			
			/* settings */
			
			#act .account-menu .menu-group ul.admin {
				padding: 0 0 0 0;
			}
			#act .account-menu .menu-group ul.admin li.setting {
				font-size: 1rem;
				line-height: 1.2;
				padding: 0 10px 0 20px;
				min-height: 40px;
				display: block;
			}
			#act .account-menu .menu-group ul.admin li.setting label {
}
			#act .account-menu .menu-group ul.admin li.setting label input[type="checkbox"] {
				position: absolute;
				opacity: 0;
			}
			#act .account-menu .menu-group ul.admin li.setting i {
				display: block;
				position: relative;
				width:       20px;
				height:      20px;
				margin: 0 0 -22px 0;
				border: 1px solid black;
				background-image:url("../../images/assets/negative.small/checked.svg");
				background-repeat: no-repeat;
				background-size: 0;
				background-position: center center;
			}
			#act .account-menu .menu-group ul.admin li.setting input[type="checkbox"]:checked ~ i { 
				background-color: var(--color_secondary);
				border-color: var(--color_secondary);
				background-size: 12px;
			}
			#act .account-menu .menu-group ul.admin li.setting em {
				display: block;
				position: relative;
				margin: 0 0 5px 30px;
				white-space: normal;
			}
			#act .account-menu .menu-group ul.admin li.setting .note {
				display: block;
				position: relative;
				margin: 0 0 0 30px;
				white-space: normal;
				font-size: 0.85em;
				line-height:1.1em;
				color: var(--text_color_medium);
				margin-bottom: 15px;
				font-weight: 100;
			}





	/* 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) {}

	/*    L-    */ @media screen and (min-width:   0px) and (max-width:1039px) {
		.menu-main-groups {display: block;/* position: fixed; *//* left: 15px; *//* width: calc(100vw - 30px); */}
		.account-menu[data-template="1"] .menu-main-groups .menu-main-group[data-size="100"] { width: calc(100% - 15px); }

	}