:root{
	/* sizes */
	--headerHeight: 85px;
	--header2Height: 75px;
	--header3Height: 65px;
	--footerHeight: 43px;

	/* colors */


	--rawBg1: 24, 26, 31;
	--rawBg2: 29, 32, 40;
	--rawBg3: 35, 38, 48;
	--rawBg4: 38, 42, 53;
	--rawBg5: 50, 54, 67;
	--rawBg6: 57, 60, 72;

	--bg1: rgba(var(--rawBg1), 1);
	--bg2: rgba(var(--rawBg2), 1);
	--bg3: rgba(var(--rawBg3), 1);
	--bg4: rgba(var(--rawBg4), 1);
	--bg5: rgba(var(--rawBg5), 1);
	--bg6: rgba(var(--rawBg6), 1);
	--foreground: #FFFFFF;

	--curBg: var(--bg1);

	/* NOTE - Colors were moved */
	--menu00:#FCCE5B;
	--menu0:#64C1EB;
	--menu1:#5389E6;
	--menu2:#72b499;
	--menu3:#e94560;

	--dangerColor:#E94560;
	--successColor:#72B499;
	--infoColor:#5389E6;
	--warningColor: #F5CE6E;
	--disabledColor: #61646E;

	--accentColor: var(--menu0);
	--accentForeground: #FFFFFF;

	--popoverColor: #F9F9F9;
	--popoverForeground: #181A20;
	--popoverContrast:  #EAEAEA;

/*
light-mode
	--bg1: #F4F4F4;
	--bg2: #FFFFFF;
	--bg3: #FFFFFF;
	--bg4: #FFFFFF;
	--bg5: #F4F4F4;
	--foreground: #000000;
*/

}


body.onMenu0{
	--accentColor: var(--menu0);
}

body.onMenu1{
	--accentColor: var(--menu1);
}

body.onMenu2{
	--accentColor: var(--menu2);
}

body.onMenu3{
	--accentColor: var(--menu3);
}

body.onMenu4{
	--accentColor: var(--menu4);
}

body ::-moz-selection {
	background: var(--accentColor);
}

body ::selection {
	background: var(--accentColor);
}

body, html{
	background:var(--bg3);
	margin:0;
	padding:0;
	color:#333333;
}

	body::before,
	body::after{
		pointer-events: none;
		display: block;
		content:"";
		position: fixed;
		top:50%;
		left:0;
		width:100%;
		height:22px;
		background: #000000;
		transform: translateY(-50%);

		opacity: 0;
		z-index: 9999999;
	}

	body::before{
		box-shadow:0 0 0 2px #FFFFFF, 0 0 1000px 1000px rgba(0,0,0,0.5);
	}

	body::after{
		height:20px;
		background: #FFFFFF;
		width:95%;
		transform:scaleX(0) translateY(-50%);
		transform-origin: 0 0;
	}


body.ajaxLoad{
	/*pointer-events: none;*/
	cursor: progress;
}

	body.ajaxLoad *{
		pointer-events: none;
	}

	body.ajaxLoad::before,
	body.ajaxLoad::after{
		opacity: 1;
		transition: opacity .5s 2s;
	}

	body.ajaxLoad::before{
		
	}

	body.ajaxLoad::after{
		transform:scaleX(1) translateY(-50%);
		transition: transform 60s cubic-bezier(0.3, 0, 0, 1), opacity .5s 2s;
	}

a{
	text-decoration: none;
	color:inherit;
}

a:hover{
	color:var(--accentColor);
}

hr{
	display: block;
	width: 100%;
	height: 1px;
	background: var(--bg6);
	border: 0;
	margin: 15px 0;
	padding: 0;
}

button,
.button,
#app>aside>nav>div>ul>li.action>a{
	display: block;
	background: transparent;
	-webkit-appearance:none;

	font-family: 'GreycliffCF', sans-serif;
	color: var(--accentColor);
	border: 1px solid var(--accentColor);
	padding: 8px;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 5px;

	cursor: pointer;
}

button:hover,
.button:hover,
#app>aside>nav>div>ul>li.action>a:hover{
	background: var(--accentColor);
	color: var(--accentForeground);
}

label.btn{
	margin: 0;
	padding: 0;
	--color: var(--accentColor);
}

	label.btn input{
		display: none;
	}

	label.btn input+span{
		position: static;
		display: block;
		border:1px solid var(--color);
		color: var(--color);
		padding: 8px;
		text-align: center;
		text-transform: uppercase;
		font-size: 10px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		border-radius: 5px;
	}
	label.btn input:checked+span{
		background: var(--color);
		color: var(--bg1);
	}


button.smaller,
.button.smaller{
	padding: 4px;
	line-height: 1em;
	display: inline;
}

button.smaller.inv,
.button.smaller.inv{
	background: var(--accentColor);
	color: var(--accentForeground);	
}

button.smaller.inv:hover,
.button.smaller.inv:hover{
	color: var(--accentColor);
	background: transparent;
	border: 1px solid var(--accentColor);
	text-decoration: none;
}


button.danger,
.button.danger{
	color: var(--dangerColor);
	border: 1px solid var(--dangerColor);
}

button.danger:hover,
.button.danger:hover{
	background: var(--dangerColor);
	color: var(--bg1);
}

button.danger.inv,
.button.danger.inv{
	background: var(--dangerColor);
	color: var(--bg1);	
}

button.danger.inv:hover,
.button.danger.inv:hover{
	color: var(--dangerColor);
	background: transparent;
	border: 1px solid var(--dangerColor);
	text-decoration: none;
}


button.success,
.button.success{
	color: var(--successColor);
	border: 1px solid var(--successColor);
}

button.success:hover,
.button.success:hover{
	background: var(--successColor);
	color: var(--bg1);
}

button.success.inv,
.button.success.inv{
	background: var(--successColor);
	color: var(--bg1);	
}

button.success.inv:hover,
.button.success.inv:hover{
	color: var(--successColor);
	background: transparent;
	border: 1px solid var(--successColor);
	text-decoration: none;
}


#app>aside>nav>div>ul>li.action>a{
	color: var(--foreground);
	border: 1px solid var(--foreground);
}

#app>aside>nav>div>ul>li.action>a:hover{
	color: var(--accentColor);
	border: 1px solid var(--accentColor);
	background: transparent;
}












input,
.input,
select,
textarea,
.ql-editor{
	font-size: 14px;
	font-family: GreycliffCF, sans-serif;
}

.ql-editor p{
	/*margin-bottom: 1em;*/
	min-height: 1em;
}

.ql-editor p+p{
	margin-top: 1em;
}






/* todo - also style focused popover */
input:focus,
select:focus,
textarea:focus,
.popoverLauncher.focus,
.ql-container.focus{
	outline: 0;
	box-shadow: inset 0 0 0 2px var(--accentColor);
}

input:focus+span>span.lang,
select:focus+span>span.lang,
textarea:focus+span>span.lang,
.popoverLauncher.focus+span>span.lang,
.ql-container.focus+textarea+span>span.lang{
	background: var(--accentColor);
	color: var(--accentForeground);
}






/**	
	App UI
**/


#app{
	background:var(--bg3);
	/*font-family: arial, sans-serif;*/
	font-family: 'GreycliffCF', sans-serif;
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
	color: var(--foreground);
}

	#loginform{
		width:100%;
		height:100%;
		width:100vw;
		height:100vh;
		display: block;
		text-align: center;
	}

		#loginform::before{
			display: inline-block;
			content:"";
			width:1px;
			height:100%;
			vertical-align: middle;
		}

		#loginform>form{
			display: inline-block;
			vertical-align: middle;
			width:300px;
			height:auto;
			background:var(--bg1);
			border-radius:5px;
			padding: 5px;
		}

			#loginform>form input{

			}

			#loginform>form button{
				width: 100%;
				/*width: calc(100% - 10px);*/
				height: 35px;
				margin-top: 20px;

				background: var(--bg2);
				color: var(--foreground);
			}

#contextMenu{
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	transform: translateX(-100%);
	width: 200px;
	background: var(--bg1);
	color: var(--foreground);
	z-index: 90;

	/*font-family: arial, sans-serif;*/
	font-family: 'GreycliffCF', sans-serif;

	font-size: 14px;
	padding: 5px;
	border-radius: 8px;

	max-height: 350px;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: auto;

	box-shadow: 0 0 0 1px var(--bg6);
}

	#contextMenu::after{
		position: absolute;
		width: 10px;
		height: 10px;
		right: 0;
		background: var(--bg6);
		border-radius: 100%;
	}

#contextMenu.dirDown{
	border-top-right-radius: 0;
}
	#contextMenu.dirDown::after{
		content: "";
		top: 0;
		transform: translate(50%, -50%);
	}

#contextMenu.dirUp{
	border-bottom-right-radius: 0;
	transform: translate(-100%, -100%);
}
	#contextMenu.dirUp::after{
		content: "";
		bottom: 0;
		transform: translate(50%, 50%);
	}


	#contextMenu>li{
		padding-top: 5px;
	}
	#contextMenu>li:first-child{
		padding-top: 0;
	}

	#contextMenu>li.title{
		text-transform: uppercase;
		font-weight: normal;
		font-size:12px;
		background: var(--bg1);
		padding: 10px 10px 2px 10px;
	}

		#contextMenu>li>a{
			display: block;
			cursor: pointer;
			padding: 8px 10px;
			background: var(--bg3);
			color: var(--foreground);
			border-radius: 5px;
		}
		#contextMenu>li>a:hover{
			background: var(--accentColor);
			color: var(--accentForeground);
		}

#contextMenu+#app,
#contextMenu+#app *{
	pointer-events: none;
}

#app.ready{
	opacity: 1;
	transition: opacity .5s;
	pointer-events: auto;
}

	#app>aside{
		position: absolute;
		top:0;
		left:0;
		width:267px;
		height:100%;
		background:var(--bg1);
		border-right:1px solid var(--bg3);
	}

		#app>aside>header{
			height: var(--headerHeight); 
			width:100%;
			border-bottom:1px solid var(--bg6);
		}

			#app>aside>header>h1{
				margin:0;
				padding:0 70px 0 20px;
				line-height: var(--headerHeight);
/*				background:var(--successColor);*/
			}

			#app>aside>header>div#user{
				position: absolute;
				top:25px;
				right:15px;
				z-index: 10;
			}

				#app>aside>header>div#user>div{
					position: relative;
					width:30px;
					height: 30px;
					background:var(--bg3);
					border-radius: 100%;
					overflow: hidden;
				}

					#app>aside>header>div#user>div::before,
					#app>aside>header>div#user>div::after{
						content:"";
						display: block;
						position: absolute;
						background:var(--foreground);
						border-radius: 100%;
					}
					#app>aside>header>div#user>div::before{
						width:12px;
						height:12px;
						left:9px;
						top:5px;
					}
					#app>aside>header>div#user>div::after{
						width:20px;
						height:20px;
						top:20px;
						left:5px;
					}

				#app>aside>header>div#user>ul{
					display: block;
					list-style: none;
					margin:0;
					padding:0;
					position: absolute;
					top:35px;
					right:0;
					box-shadow: 0 0 20px rgba(0,0,0,0.5);

					background:var(--bg3);

					opacity: 0;
					transition: opacity .3s .2s;
					pointer-events: none;
				}

					#app>aside>header>div#user>ul::before,
					#app>aside>header>div#user>ul::after{
						content:"";
						display: block;
						position: absolute;
					}
					#app>aside>header>div#user>ul::before{
						width:50px;
						height:50px;
						right:0;
						top:-50px;
						pointer-events: none;
					}
					#app>aside>header>div#user>ul::after{
						top:-5px;
						right:5px;
						width:20px;
						height:20px;
						background: var(--bg3);
						transform: scaleY(0) rotate(45deg);
						border-radius: 8px;
						border-top-left-radius: 0;
						border-bottom-right-radius: 100%;
						transition: transform .2s .1s;
					}

					#app>aside>header>div#user>ul>li{
						display: block;
						white-space: nowrap;
						background:var(--bg3);
						border-top:1px solid black;

						height:0;
						opacity: 0;
						transition: height .5s, opacity .3s .2s;
						overflow: hidden;
					}
					#app>aside>header>div#user>ul>li:first-child{
						border-top:0;
						border-top-left-radius: 5px;
						border-top-right-radius: 5px;
					}
					#app>aside>header>div#user>ul>li:last-child{
						border-bottom-left-radius: 5px;
						border-bottom-right-radius: 5px;
					}
					#app>aside>header>div#user>ul>li:hover{
						color:var(--accentColor);
					}

						#app>aside>header>div#user>ul>li>*{
							padding:0 20px;
							color:inherit;
							text-decoration: none;
							line-height: 45px;
							display: block;
						}

			#app>aside>header>div#user:hover{

			}

				#app>aside>header>div#user:hover>div{
					box-shadow: 0 0 0 2px var(--accentColor);
					cursor: pointer;
				}

				#app>aside>header>div#user:hover>ul{
					opacity: 1;
					transition: opacity .1s;
					pointer-events: auto;
				}

					#app>aside>header>div#user:hover>ul::before{
						pointer-events: auto;
					}

					#app>aside>header>div#user:hover>ul::after{
						transform: scaleY(1) rotate(45deg);
						transition: transform .3s;
					}

					#app>aside>header>div#user:hover>ul>li{
						height:45px;
						opacity: 1;
						transition: height .3s, opacity .1s;
					}

			#app>aside>header>nav{
				height:var(--header2Height);
				border-bottom:1px solid var(--bg6);
				text-align: center;
			}

				#app>aside>header>nav>ul{
					display: block;
					list-style: none;
					margin:0;
					padding:0;
				}

					#app>aside>header>nav>ul>li{
						position: relative;
						display: inline-block;
						width:39px;
						height:var(--header2Height);
						color:var(--bg3);
					}

						#app>aside>header>nav>ul>li>a{
							display: block;
							width:100%;
							height:100%;
							color: var(--bg6);
						}

							#app>aside>header>nav>ul>li>a:hover{
								color: inherit;
							}


							#app>aside>header>nav>ul>li>a::before{
								content:"";
								display: block;
								position: absolute;
								top:24px;
								left:4px;
								width:30px;
								height:30px;
								text-align: center;
								line-height: 30px;
								font-size: 15px;
								border:1px solid var(--bg6);
								border-color: inherit;
								border-radius: 100%;
							}

							#app>aside>header>nav>ul>li>a>span{
								display: block;
								position: absolute;
								left:-50px;
								bottom:0px;
								line-height: 19px;
								width:140px;
								text-align: center;
								font-size: 10px;
								opacity: 0;
								pointer-events: none;
							}

							#app>aside>header>nav>ul>li>a:hover>span{
								opacity: 1;
								color:#FFF;
							}

					#app>aside>header>nav>ul>li.active,
					#app>aside>header>nav>ul>li:hover{
						color:var(--accentColor);
					}

					/*#app>aside>header>nav>ul>li:nth-child(1).active,*/
					#app>aside>header>nav>ul>li:nth-child(1):hover{
						color: var(--menu0);
					}

					/*#app>aside>header>nav>ul>li:nth-child(2).active,*/
					#app>aside>header>nav>ul>li:nth-child(2):hover{
						color: var(--menu1);
					}

					/*#app>aside>header>nav>ul>li:nth-child(3).active,*/
					#app>aside>header>nav>ul>li:nth-child(3):hover{
						color: var(--menu2);
					}

					/*#app>aside>header>nav>ul>li:nth-child(4).active,*/
					#app>aside>header>nav>ul>li:nth-child(4):hover{
						color: var(--menu3);
					}

					/*#app>aside>header>nav>ul>li:nth-child(5).active,*/
					#app>aside>header>nav>ul>li:nth-child(5):hover{
						color: var(--menu4);
					}

					#app>aside>header>nav>ul>li.active>a::before{
						color:var(--accentColor);
					}


		#app>aside>nav{
			position: absolute;
			bottom:0;
			left:0;
			top:calc(var(--headerHeight) + 1px); /*156px;*/
			width:100%;
			background: inherit;
			padding:0 10px 10px 10px;
			box-sizing: border-box;
			overflow: auto;
		}
		#app>aside:first-child>nav{
			top:calc(var(--header2Height) + var(--headerHeight) + 2px);
		}

			#app>aside>nav>div{
				background: inherit;
/*				position: absolute;
				bottom:0;
				left:0;
				top:0;
				overflow: auto;
				padding:0 10px;
				width:100%;
				width:calc(100% - 20px);
				background: inherit;*/
			}

				#app>aside>nav>div>h2{
					position: relative;
					font-weight: normal;
					margin: 0;
					padding: 25px 0;
					text-transform: uppercase;
					font-weight: normal;
					font-size:12px;

					position: sticky;
					top:-1px;/*0;*/
					z-index: 2;
					background: inherit;
				}

					#app>aside>nav>div>h2::after{
						display: block;
						content:"▾";
						position: absolute;
						top:50%;
						right:0;
						transform: translateY(-50%);
					}

				#app>aside>nav>div>h2:hover{
					cursor: pointer;
				}

					#app>aside>nav>div>h2:hover::after{
						color: var(--accentColor);
					}

				#app>aside>nav ul{
					list-style: none;
					margin:0;
					padding:0;
					background: inherit;
				}

					#app>aside>nav>div>ul li{
						position: relative;
					}

					#app>aside>nav>div>ul li.state_disabled{
						opacity: .5;
					}

					#app>aside>nav>div>ul li.level1{
						padding-left:15px;
					}
					#app>aside>nav>div>ul li.level2{
						padding-left:30px;
					}
					#app>aside>nav>div>ul li.level3{
						padding-left:45px;
					}
					#app>aside>nav>div>ul li.level4{
						padding-left:60px;
					}
					#app>aside>nav>div>ul li.level5{
						padding-left:75px;
					}

					#app>aside>nav>div>ul>li+li{
						margin-top: 5px;
					}

/*					#app>aside>nav>div>ul li.home>a::before{
						content: "🏠 ";
					}

					#app>aside>nav>div>ul li.req_locked>a::after{
						content: " 🔒";
					}

					#app>aside>nav>div>ul li.req_timed>a::after{
						content: " 🕚";
					}

					#app>aside>nav>div>ul li.req_other>a::after{
						content: " 🌀";
					}

					#app>aside>nav>div>ul li.req_timedButOk>a::after{
						content: " ⏰";
					}*/


						#app>aside>nav>div>ul>li::before{
							display: block;
							position: absolute;
							top: 50%;
							right: 0;
							transform: translateY(-50%);
							padding: 5px;
							background: inherit;
							z-index: 1;
						}

						#app>aside>nav>div>ul>li a{
							position: relative;
							display: block;
							background: var(--bg3);
							padding:8px 10px;
							border-radius: 5px;
							font-size: 13px;
							line-height: 1.4em;
						}

							#app>aside>nav>div>ul>li a::before{
								display: inline-block;
								padding-right: .5em;
							}

						#app>aside>nav>div>ul>li a.settings{
							position: absolute;
							top: 0;
							right: 0;
							width: 34px;
							height: 34px;
							background: red;
							overflow: hidden;
							margin: 0;
							padding: 0;
							background: var(--bg3);
							background: rgba(var(--rawBg3), .5);
							font-size: 0;
							color: transparent;
							display: none;
							border-top-left-radius: 0;
							border-bottom-left-radius: 0;
						}
						#app>aside>nav>div>ul li:hover:not(:has(ul:hover))>a.settings,
						#app>aside>nav>div>ul li>a.active+a.settings{
							display: block;
						}

							#app>aside>nav>div>ul>li a.settings::before{
								content:"\e93f";

								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								text-align: center;
								margin: 0;
								padding: 0;

								text-indent: 0;
								color:#FFFFFF;
								font-family: 'icomoon' !important;
								font-size:20px;
								line-height: 1em;
							}
							#app>aside>nav>div>ul>li a.settings:hover::before{
								color: var(--accentColor);
							}

						#app>aside>nav>div>ul>li a.active{
							background: var(--accentColor);
							color: var(--accentForeground);
						}

						#app>aside>nav>div>ul>li.folder a,
						#app>aside>nav>div>ul>li.product a{
							padding-left:35px;
						}

						#app>aside>nav>div>ul>li.folder a::before,
						#app>aside>nav>div>ul>li.folder a::after{
							content:"";
							display: block;
							background:white;
							border-radius: 2px;
							position: absolute;
							top:50%;
							left:10px;
							width:15px;
							height:10px;
							transform:translateY(-3px);
						}
						#app>aside>nav>div>ul>li.folder a::before{
							width:8px;
							height:10px;
							transform:translateY(-5px);
							background:#DDD;
						}

						#app>aside>nav>div>ul>li.product a::before,
						#app>aside>nav>div>ul>li.product a::after{
							content:"";
							display: block;
							border:1px solid #DDD;
							border-radius: 2px;
							position: absolute;
							top:50%;
							left:10px;
							width:10px;
							height:15px;
							transform:translateY(-50%) rotate(45deg);
						}
						#app>aside>nav>div>ul>li.product a::after{
							width:7px;
							height:7px;
							transform:translate(6px, -9px) rotate(90deg);
							border-right-color:transparent;
							border-bottom-color:transparent;
							background: var(--bg3);
						}

						#app>aside>nav>div>ul>li>ul{
							margin-left:20px;
						}

							#app>aside>nav>div>ul>li>ul>li{
								margin-top:3px;
							}

								#app>aside>nav>div>ul>li>ul>li::before{
									display: block;
									position: absolute;
									top: 50%;
									right: 0;
									transform: translateY(-50%);
									padding: 5px;
									background: inherit;
									z-index: 1;
								}

								#app>aside>nav>div>ul>li>ul>li>a{
									border-bottom-left-radius: 15px;
									font-size: 12px;
								}



					#app>aside>nav>div>ul>li.action{
						position: sticky;
						z-index: 2;
						bottom: -10px;
						padding:0 10px;
						margin:0 -10px -10px -10px;
						background: inherit;
						/*border-top: 1px solid var(--bg6);*/
						/*border-bottom: 1px solid var(--bg6);*/

						margin-top: 4px;

						height: var(--footerHeight);
						line-height: var(--footerHeight);
					}
						#app>aside>nav>div>ul>li.action::before{
							content: "";
							display: inline-block;
							height: 100%;
						}

						#app>aside>nav>div>ul>li.action>a{
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							left: 10px;
							right: 10px;
						}

				#app>aside>nav>div+div{
					margin-top:25px;
					border-top:1px solid var(--bg6);
				}

				/*
				#app>aside>nav>div>h2.closed+ul+h2{
					margin-top: 0;
				}
				*/

				#app>aside>nav>div>h2.closed{
					margin-bottom: -25px; /* hide  */
					opacity: .4;
				}

					#app>aside>nav>div>h2.closed::after{
						transform: translateY(-50%) rotate(180deg);
					}

				#app>aside>nav>div>h2.closed+ul{
					display: none;
				}

				#app>aside>nav>div>ul.widget{
					margin:-5px -10px;
					padding:5px;
				}

					#app>aside>nav>div>ul.widget>li{
						position: relative;
						display: block;
						background:var(--bg3);
						border-radius:5px;
						height:100px;
						padding:10px;
						box-sizing: border-box;
						margin:10px 5px;
					}

						#app>aside>nav>div>ul.widget>li>a{
							display: block;
							padding:10px;
							position: absolute;
							top:0;
							left:0;
							width:100%;
							height:100%;
							display: block;
							box-sizing: border-box;
						}

						#app>aside>nav>div>ul.widget span.nb{
							font-weight: bold;
							font-size: 1.5em;
						}

					#app>aside>nav>div>ul.widget>li.simple{
						width:calc(50% - 10px);
						float:left;
					}

					#app>aside>nav>div>ul.widget>li.double{
						clear:both;
					}

					#app>aside>nav>div>ul.widget>li.list{
						clear:both;
						height: auto;
					}

						#app>aside>nav>div>ul.widget>li.list>a{
							position: relative;
							height:auto;
							margin:-10px;
						}


			#app>aside>nav>footer{
				height: var(--footerHeight); 
				position: absolute;
				bottom:0;
				left:0;
				width:100%;
				text-align: center;
				line-height: var(--footerHeight);
				border-top:1px solid var(--bg3);
			}

				#app>aside>nav>footer>*{
					display: block;
				}

/*	#app>aside+aside{
		left:268px;
		background:black;
	}

		#app>aside+aside>div{
			top:61px;
		}

		#app>aside+aside>footer{
			border-color:var(--bg1);
		}*/

	#app>main{
		position: absolute;
		top:0;
		left:268px;
		/*right:0;*/
		width: calc(100vw - 268px);
		bottom:0;

		/*transition: width .5s;*/
		overflow-x: hidden;

		background: var(--bg2);
		color: var(--foreground);

		--curBg: var(--bg2);
	}

	#app>main+main{
		left:536px;
		width: calc(100vw - (268px * 2));
		background: var(--bg3);
		--curBg: var(--bg3);
	}

	#app>main+main+main{
		left:804px;
		width: calc(100vw - (268px * 3));
		background: var(--bg4);
		--curBg: var(--bg4);
	}

	#app>main.empty{
		text-align: center;
	}

		#app>main.empty::before{
			content:"";
			display: inline-block;
			height:100%;
			vertical-align: middle;
		}


/*	#app>aside+aside+main{
		left:536px;
	}

	#app>aside+aside+aside+main{
		left:804px;
	}*/

		#app>main>header{
			height: var(--headerHeight);
			padding:0 0px 0 20px;
			border-bottom: 1px solid var(--bg6);
			background:inherit;
		}

			#app>main>header::before{
				content:"";
				display: inline-block;
				height: 100%;
				width: 1px;
				margin-right: -1px;
				vertical-align: middle;
			}

			#app>main>header>h1{
				display: inline-block;
				vertical-align: middle;
				margin:0;
				padding:0;
				max-width: 500px;
				font-size: 17px;
				font-weight: normal;
			}

				#app>main>header>h1>span{
					display: block;
					font-size: 9px;
				}

			#app>main>header>ul.tabs{
				display: inline-flex;
				list-style: none;
				margin: 0;
				padding: 0;
			}

				#app>main>header>ul.tabs>li{
					border:1px solid var(--bg6);
					padding: 10px;
					border-radius: 5px;
					margin-left: 10px;
				}

			#app>main>header>div.popupClose{
				position: absolute;
				top: 0;
				right: 0;
				width: 45px;
				height: var(--headerHeight);
				cursor: pointer;
			}

			#app>main.subnav>header>div.popupClose{
				display: none;
			}

			#app>main.subnav:last-child>header>div.popupClose{
				display: block;
			}

			#app>aside:first-child+main.subnav:last-child>header>div.popupClose,
			#app>aside:first-child+main.subnav:has(+ div.popup)>header>div.popupClose{
				display: none;
			}

			#app>aside:first-child+main.subnav:last-child>header>nav,
			#app>aside:first-child+main.subnav:has(+ div.popup)>header>nav{
				margin-right:0;
			}

				#app>main>header>div.popupClose::before{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 15px;
				}

				#app>main>header>div.popupClose>span{
					display: block;
					position: absolute;
					left: -30px;
					bottom: 5px;
					line-height: 19px;
					width: 100%;
					width: calc(100% + 60px);
					text-align: center;
					font-size: 10px;
					opacity: 0;
					pointer-events: none;
				}

			#app>main>header>div.popupClose:hover{
				color: var(--accentColor);
			}

				#app>main>header>div.popupClose:hover::before{

				}

				#app>main>header>div.popupClose:hover>span{
					opacity: 1;
				}

			#app>main>header>nav{
				display: block;
				float: right;
				text-align: right;
				width: auto;
				height: 100%;

				/* Temporary */
				margin-right: 45px;
			}

				#app>main>header>nav>ul{
					list-style: none;
					margin:0;
					padding:0;
					display: block;
					border-left: 1px solid var(--bg6);

					padding: 0 15px;

					height: var(--headerHeight);
					display: inline-block;
					vertical-align: middle;

					text-transform: uppercase;
					font-size: 10px;
				}
				#app>main>header>nav>ul:first-child{
					border-left: 0;
				}

					#app>main>header>nav>ul>li{
						display: inline-block;
					}

						#app>main>header>nav>ul>li>a{
							display: block;
							padding: 0 15px;
							color: var(--disabledColor);
						}
						#app>main>header>nav>ul>li>a:hover{
							color:var(--accentColor);
						}

							#app>main>header>nav>ul>li>a::before{
								content: "";
								display: inline-block;
								height: var(--headerHeight);
								vertical-align: middle;
							}

							#app>main>header>nav>ul>li>a>span{
								display: inline-block;
								vertical-align: middle;
								padding: 
							}

					#app>main>header>nav>ul>li.active{

					}

						#app>main>header>nav>ul>li.active>a{
							color: var(--foreground);
						}

					#app>main>header>nav>ul>li[class^="icon-"], 
					#app>main>header>nav>ul>li[class*=" icon-"] {
						position: relative;
						cursor: pointer;
						padding: 0 15px;
					}

						#app>main>header>nav>ul>li[class^="icon-"]::before, 
						#app>main>header>nav>ul>li[class*=" icon-"]::before {
							text-align: center;
							line-height: var(--headerHeight);
							color: var(--disabledColor);
						}

					#app>main>header>nav>ul>li.bigger[class^="icon-"], 
					#app>main>header>nav>ul>li.bigger[class*=" icon-"] {
						padding: 0 10px;
					}

						#app>main>header>nav>ul>li.bigger[class^="icon-"]::before, 
						#app>main>header>nav>ul>li.bigger[class*=" icon-"]::before {
							font-size: 20px;
						}

						#app>main>header>nav>ul>li[class^="icon-"].active::before, 
						#app>main>header>nav>ul>li[class*=" icon-"].active::before {
							color: var(--foreground);
						}


						#app>main>header>nav>ul>li[class^="icon-"]:hover::before, 
						#app>main>header>nav>ul>li[class*=" icon-"]:hover::before {
							color:var(--accentColor);
						}


						#app>main>header>nav>ul>li[class^="icon-"]>a, 
						#app>main>header>nav>ul>li[class*=" icon-"]>a {
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							padding: 0;
						}

							#app>main>header>nav>ul>li[class^="icon-"]>a>span, 
							#app>main>header>nav>ul>li[class*=" icon-"]>a>span {
								display: none;
							}


				#app>main>header>nav>ul.outlinks{

				}

					#app>main>header>nav>ul.outlinks>li{
						position: relative;
						width: 45px;
						height: var(--headerHeight);
						padding: 0;
					}

						#app>main>header>nav>ul.outlinks>li::before{
							content: "";
							display: block;
							position: absolute;
							top: 50%;
							left: 50%;
							width: 30px;
							height: 30px;
							line-height: 30px;
							font-size: 15px;
							text-align: center;
							border: 1px solid var(--disabledColor);
							color: var(--disabledColor);
							border-radius: 100%;
							transform:translate(-50%, -50%);
						}
						#app>main>header>nav>ul.outlinks>li.icon-external_link::before{
							font-size: 12px;
						}

						#app>main>header>nav>ul.outlinks>li>a{
							position: absolute;
							top:0;
							right: 0;
							width:100%;
							height:100%;
							color: inherit;
							margin: 0;
							padding: 0;
						}

							#app>main>header>nav>ul.outlinks>li>a>span{
								display: block;
								position: absolute;
								left: -30px;
								bottom: 5px;
								line-height: 19px;
								width: 100%;
								width: calc(100% + 60px);
								text-align: center;
								font-size: 10px;
								opacity: 0;
								pointer-events: none;
							}

						#app>main>header>nav>ul.outlinks>li:hover::before{
							border-color: var(--accentColor);
							color: var(--accentColor);
						}
						#app>main>header>nav>ul.outlinks>li:hover span{
							opacity: 1;
						}

		#app>main>.container{
			position: absolute;
			top:calc(var(--headerHeight) + 1px);
			left:0;
			right:0;
			bottom: calc(var(--footerHeight) + 1px);
			padding:20px;
			background: inherit;
			overflow: auto;
		}

		#app>main>.container:has(> div.pager){
			
		}

			#app>main>.container:has(> div.pager) div.tableContainer{
				margin-bottom: 20px;
			}

				#app>main>.container:has(> div.pager) div.tableContainer ul.buttons{
					bottom: 20px;
				}

			#app>main>.container>div.pager{
				position: sticky;
				bottom: -20px;

				height: 40px;
				line-height: 40px;
				text-align: center;
				background: inherit;
			}

				#app>main>.container>div.pager>*{
					opacity: .5;
				}

				#app>main>.container>div.pager .prev{
					position: absolute;
					left: 0;
				}
					#app>main>.container>div.pager .prev::before{
						content: "<";
						display: inline-block;
						padding-right: .5em;
					}

				#app>main>.container>div.pager .next{
					position: absolute;
					right: 0;
				}
					#app>main>.container>div.pager .next::after{
						content: ">";
						display: inline-block;
						padding-left: .5em;
					}
/*

				main.subnav .container .pager a,
				main.subnav .container .pager span{
					padding: 10px 5px;
					display: inline-block;
				}
				main.subnav .container .pager a.prev{
					float: left;
				}
				main.subnav .container .pager a.prev::before{
					content: "<";
					position: relative;
					padding: 0 5px 0 0
				}
				main.subnav .container .pager a.next{
					float: right;
				}
				main.subnav .container .pager a.next::after{
					content: ">";
					position: relative;
					padding: 0  0 0 5px
				}
				main.subnav .container .pager span{
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
				}
*/




		#app>main>.container.noFooter{
			bottom: 0;
		}

			#app>main>.container>ul.modules{
				display: block;
				list-style: none;
				margin:0;
				padding:0;

				/*background: var(--bg1);*/
				text-align: center;

				position: absolute;
				top:0;
				left:0;
				width:100%;
				height:var(--header2Height);
				border-bottom: 1px solid var(--bg6);

				white-space: nowrap;
				overflow: auto;
			}

				#app>main>.container>ul.modules::before,
				#app>main>.container>ul.modules::after{
					display: inline-block;
					content: "";
					vertical-align: middle;
					height: 100%;
				}

				#app>main>.container>ul.modules>li{
					vertical-align: middle;
					position: relative;
					display: inline-block;
					min-width:var(--header3Height);
					height:var(--header3Height);
					cursor: move;
					padding: 0 10px;
					box-sizing: border-box;
					background: var(--bg5);
					border-radius: 5px;
					text-align: center;
					margin: 0 5px;
				}

					#app>main>.container>ul.modules>li::before{
						content: "";
						display: block;
						/*position: absolute;*/
						/*top: 21px;*/
						/*left: 50%;*/
						/*transform: translate(-50%);*/
						width: 100%;
						height: 30px;
						text-align: center;
						line-height: 30px;
						font-size: 18px;
						/*border: 1px solid var(--bg6);*/
						/*border-color: inherit;*/
						/*border-radius: 100%;*/
						color: var(--accentColor);
						padding-top: 10px;
					}

/*					#app>main>.container>ul.modules>li::after{
						content:"";
						display: block;
						position: absolute;
						top:20px;
						left:13px;
						width:30px;
						height:30px;
						border:2px solid var(--bg3);
						border-color: inherit;
						border-radius: 100%;
					}*/

					#app>main>.container>ul.modules>li>span{
						display: block;
						/*position: absolute;*/
						bottom:0px;
						line-height: 19px;
						text-align: center;
						font-size: 10px;
						pointer-events: none;

						font-size: 10px;
						font-weight: 800;
						text-transform: uppercase;

					}

				#app>main>.container>ul.modules>li:hover{
					color:var(--accentColor);
					box-shadow: inset 0 0 1px 1px var(--accentColor);
				}


			#app>main>.container>form{
				position: absolute;
				top:0;
				left:0;
				right:0;
				bottom:0;
/*				margin: 0 auto;
				width:90%;
				max-width: 800px;*/
			}
			#app>main>.container>.modules+form{
				top:var(--header2Height);
			}

	.approbationBox{
		position: fixed;
		bottom: 50px;
		bottom: calc(var(--footerHeight) + 10px);
		left: 278px;

		border: 1px solid var(--bg6);
		background: var(--bg1);
		padding: 10px;
/*		border-radius: 5px;*/

		z-index: 3;

		transition: transform .4s;
	}
	#app>main+main .approbationBox{
		left: 546px;
	}
	#app>main+main+main .approbationBox{
		left: 814px;
	}

		.approbationBox>h1{
			font-size: inherit;
			margin: 0;
			padding: 0;
		}

			.approbationBox>h1::before{
				content: "";
				background: var(--bg6);
				border-radius: 100%;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, -50%) scale(.8);
				width: 20px;
				height: 20px;

				content: "\e90b";
				font-weight: normal;
				font-family: 'icomoon' !important;
				font-size: 10px;

				display: flex;
				align-items: center;
				justify-content: center;
			}

		.approbationBox>h1:hover{
			cursor: pointer;
		}

			.approbationBox>h1:hover::before{
				background: #FFFFFF;
				color: #000000;
				transform: translate(-50%, -50%) scale(1);
			}

	.approbationBox.hidden{
		transform: translateY(100%);
	}

		.approbationBox.hidden>h1::before{
			transform: translate(-50%, -50%) rotateX(180deg) scale(.8)
		}

		.approbationBox.hidden>h1:hover::before{
			transform: translate(-50%, -50%) rotateX(180deg) scale(1)
		}

		.approbationBox>ul{
			display: flex;
			justify-content: space-between;
			list-style: none;
			margin: 0;
			padding: 0;
			gap: 10px;

			margin-top: 10px;
		}

			.approbationBox>ul>li{
				
			}

				.approbationBox>ul>li>a{
					display: block;
					border:1px solid currentColor;
					border-radius: 5px;
					padding: 8px;
					text-transform: uppercase;
					font-size: 10px;
					box-sizing: border-box;
				}

	#contentEditor{
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

		#contentEditorData{
			display: none;
		}

		#contentEditorContainer{
			position: absolute;
			top: 0;
			left:0;
			right:0;
			bottom:0;
			/*background:var(--bg3);*/
			overflow: auto;
			counter-reset: numberedHrCounter;

			padding-bottom: 100px;
		}

			#contentEditorContainer>hr.foldLine{
				height: 0;
				border-bottom: 1px dashed red;
			}

		#contentEditorContainer.over::before{
			display: block;
			content:" "; /*"+";*/
			border: 1px dashed var(--foreground);
			width: 80%;
			max-width: 1300px;
			height: 20px;
			border-radius: 5px;
			box-sizing: border-box;
			margin: 25px auto;
		}

		.modules+#contentEditorContainer{
			top:var(--header2Height);
			top:calc(var(--header2Height) + 1px);
		}

		#contentEditorContainer{

		}
			/* struct */
			#contentEditorContainer>section{
				background: var(--bg1);
				border-radius: 5px;
				width: 90%;
				max-width: 1200px;
				margin: 10px auto;
			}
			#contentEditorContainer>section:first-child{
				margin-top: 20px;
			}

				#contentEditorContainer>section>header{
					display: flex;
/*					justify-content: space-between;*/
/*					background: fuchsia;*/
					height: 20px;
					padding: 10px;
					padding-bottom: 0;

					justify-content: end;

					position: relative;
					z-index: 2;
				}

					#contentEditorContainer>section>header>ul{
						display: flex;
						margin: 0;
						padding: 0;
						list-style: none;
						justify-content: end;
						gap: 5px;
						width: auto;
						flex: 0 0 auto;

						padding-left: 30px;
					}

						#contentEditorContainer>section>header>ul>li{
							display: block;
							width: 20px;
							height: 20px;
							background-color: #FFFFFF;
							border-radius: 100%;
							border:1px solid white;
							box-sizing: border-box;
							cursor: pointer;
							opacity: .25;
							scale:.8;

							transition: transform .3;
						}
						#contentEditorContainer>section>header>ul>li:hover{
							opacity: 1;
						}
						#contentEditorContainer>section>header>ul:hover>li{
							scale:.8;
						}
						#contentEditorContainer>section>header>ul:hover>li:hover{
							scale:.9;
						}
						#contentEditorContainer>section>header>ul>li.active{
							scale:1;
							box-shadow: 0 0 0 1px var(--bg1), 0 0 0 3px var(--accentColor);
							opacity: 1;
						}

							#contentEditorContainer>section>header>ul>li::before{
								content: "";
								position: absolute;
								bottom: 100%;
								left: 50%;
								width: 15px;
								height: 15px;
								background: #000;
								border-bottom-left-radius: 5px;
								transform-origin: 0 100%;
								transform: rotate(-45deg);
								display: none;
							}
							#contentEditorContainer>section>header>ul>li::after{
								content: "?";
								min-width: 50px;
								text-align: center;

								position: absolute;
								bottom: 100%;
								left: 50%;
								background: black;
								padding: 5px;
								border-radius: 5px;
								white-space: nowrap;
								font-size: 12px;
								transform: translate(-50%, -10px);
								display: none;
							}

							#contentEditorContainer>section>header>ul>li:hover::before,
							#contentEditorContainer>section>header>ul>li:hover::after{
								display: block;
							}



				#contentEditorContainer>section>div{
					display: flex;
					flex-direction: column;
				}

					#contentEditorContainer>section>div>section.resize{
						cursor: move;
						cursor: col-resize;
						cursor: ew-resize;
					}

					/* group */
					#contentEditorContainer>section>div>section{
/*						border-top: 2px solid var(--bg6);*/
						padding: 10px;
						position: relative;

						background:var(--bg1);
						border-radius: 5px;

						--col1:50%;
					}
					#contentEditorContainer>section>div>section:first-child{
						border-top: 0;
					}

					#contentEditorContainer>section>div>section.left_min{
						margin-left: 100px;
					}
					#contentEditorContainer>section>div>section.left_less{
						margin-left: 50px;
					}
					#contentEditorContainer>section>div>section.left_default{

					}
					#contentEditorContainer>section>div>section.left_more{
						margin-left: -50px;
					}
					#contentEditorContainer>section>div>section.left_max{
						margin-left: -100px;
					}

					#contentEditorContainer>section>div>section.right_min{
						margin-right: 100px;
					}
					#contentEditorContainer>section>div>section.right_less{
						margin-right: 50px;
					}
					#contentEditorContainer>section>div>section.right_default{

					}
					#contentEditorContainer>section>div>section.right_more{
						margin-right: -50px;
					}
					#contentEditorContainer>section>div>section.right_max{
						margin-right: -100px;
					}

					#contentEditorContainer>section>div>section.col_10_90{
						--col1:15%;
					}
					#contentEditorContainer>section>div>section.col_25_75{
						--col1:35%;
					}
					#contentEditorContainer>section>div>section.col_default{

					}
					#contentEditorContainer>section>div>section.col_75_25{
						--col1:65%;
					}
					#contentEditorContainer>section>div>section.col_90_10{
						--col1:85%;
					}

						#contentEditorContainer>section>div>section::before,
						#contentEditorContainer>section>div>section::after{
							--color:#FFFFFF;

							display: block;
							content: "";
							position: absolute;
							bottom: 10px;
							top:10px;
							width:1px;
							background:linear-gradient(to bottom, var(--color) 50%, transparent 50%);
							background-size: 100% 10px;
							background-repeat: repeat;

							opacity: 0;
						}
						#contentEditorContainer>section>div>section::before{
							left:0;
						}
						#contentEditorContainer>section>div>section::after{
							right: 0;
						}

						#contentEditorContainer>section>div>section:hover::before,
						#contentEditorContainer>section>div>section:hover::after,
						#contentEditorContainer>section>div>section.resize::before,
						#contentEditorContainer>section>div>section.resize::after{
							opacity: .15;
						}
						#contentEditorContainer>section>div>section.left::before{
							--color:var(--accentColor);
							opacity: 1;
						}
						#contentEditorContainer>section>div>section.right::after{
							--color:var(--accentColor);
							opacity: 1;
						}

						#contentEditorContainer>section>div>section>div{
							display: flex;
							gap: 10px;
						}

							/* zone / column */
							#contentEditorContainer>section>div>section>div>section{
								background: var(--bg3);
								border-radius: 5px;
								flex: 1 1 50%;

								position: relative;

								overflow: hidden;
							}
							#contentEditorContainer>section>div>section>div>section:first-child{
								flex: 1 1 var(--col1);
							}

							#contentEditorContainer>section>div>section>div>section+section{

							}

								#contentEditorContainer>section>div>section>div>section+section::before{
									--color:#FFFFFF;

									content: "";
									display: block;
									position: absolute;
									top: 0;
									left: -10px;
									width: 10px;
									height: 100%;

									background:linear-gradient(to bottom, var(--color) 50%, transparent 50%);
									background-size: 1px 10px;
									background-position: 50% 0;
									background-repeat: repeat-y;

									opacity: 0;
								}
								#contentEditorContainer>section>div>section:hover>div>section+section::before,
								#contentEditorContainer>section>div>section.resize>div>section+section::before{
									opacity: .15;
								}
								#contentEditorContainer>section>div>section.half>div>section+section::before{
									--color:var(--accentColor);
									opacity: 1;
								}

								#contentEditorContainer>section>div>section>div>section>div{
									padding: 10px;
									display: flex;
									flex-direction: column;
									gap: 10px;
								}

									/* module */
									#contentEditorContainer>section>div>section>div>section>div>div{
										background: var(--bg5);
										border-radius: 5px;
										padding: 10px;
									}




										#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list{

										}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list>ul{
												display: flex;
												margin: 0;
												padding: 0;
												list-style: none;
												gap: 10px;
											}

												#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list>ul>li{
													flex: 1 1 auto;
													min-width: 150px;
												}

													#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list>ul>li div.fieldtype_listimage{
														background: rgba(255,255,255,.1);
														height: 100px;
														width: 100%;
														display: flex;
														align-items: center;
														justify-content: center;
														border-radius: 5px;
														overflow: hidden;
														margin-bottom: 10px;
													}

														#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list>ul>li img{
															max-height: 100px;
														}

														#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list>ul>li div.fieldtype_listimage>span{
															display: none;
														}


													#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list>ul>li div.fieldname_title{
														font-weight: bold;
													}

													#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list>ul>li div.fieldname_linkLabel{
														padding: 5px;
														border-radius: 5px;
														border: 1px solid var(--accentColor);
													}


										#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list.type_accordion{
											max-height: 200px;
											overflow: hidden;
										}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list.type_accordion>ul{
												flex-direction: column;
												gap: 2em;
											}


										#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list.type_cloud{

										}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list.type_cloud>ul{
												gap: 10px;
												flex-wrap: wrap;
											}

												#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list.type_cloud>ul>li{
													display: flex;
													gap: 5px;
													align-items: center;
												}

													#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list.type_cloud>ul>li .fieldname_subtitle{
														display: none;
													}

													#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list.type_cloud>ul>li .fieldname_image{

													}

														#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list.type_cloud>ul>li .fieldname_image img{
															max-height: 1.5em;
														}

														#contentEditorContainer>section>div>section>div>section>div>div>div.mod_list.type_cloud>ul>li .fieldname_image span{
															display: none;
														}




										#contentEditorContainer>section>div>section>div>section>div>div>div.mod_slider{

										}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_slider>ul{
												display: flex;
												margin: 0;
												padding: 0;
												list-style: none;
												gap: 10px;
												flex-wrap: wrap;
												max-height: 150px;
												overflow: hidden;
											}

												#contentEditorContainer>section>div>section>div>section>div>div>div.mod_slider>ul>li{
													width: 40%;
													display: flex;
													flex-direction: column;
													gap: 5px;
													padding: 5px 5px 5px 160px;
													position: relative;
													box-sizing: border-box;
													border:1px solid currentColor;
													border-radius: 5px;
												}

													#contentEditorContainer>section>div>section>div>section>div>div>div.mod_slider>ul>li .fieldname_image{
														position: absolute;
														top: 5px;
														left: 5px;
														width: 150px;
														width: calc(20% - 5px);
														height: auto;
													}

														#contentEditorContainer>section>div>section>div>section>div>div>div.mod_slider>ul>li .fieldname_image img{
															width: 100%;
															height: auto;
														}

														#contentEditorContainer>section>div>section>div>section>div>div>div.mod_slider>ul>li .fieldname_image span{
															display: none;
														}

													#contentEditorContainer>section>div>section>div>section>div>div>div.mod_slider>ul>li .fieldname_title{
														font-weight: bold;
													}
													#contentEditorContainer>section>div>section>div>section>div>div>div.mod_slider>ul>li .fieldname_subtitle{

													}
													#contentEditorContainer>section>div>section>div>section>div>div>div.mod_slider>ul>li .fieldname_text{
														font-size: 12px;
													}




										/** hr **/
										#contentEditorContainer>section>div>section>div>section>div>div>div.mod_hr{
											color: transparent;
											position: relative;
											height: 20px;
										}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_hr::after{
												content: "";
												/*background: var(--accentColor);*/
												background: linear-gradient(to bottom, transparent 45%, var(--accentColor) 45%, var(--accentColor) 55%, transparent 55%);
												position: absolute;
												top: 50%;
												left: 100px;
												right: 100px;
												height: 20px;
												line-height: 20px;
												transform: translateY(-50%);
												padding: 0;
											}
											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_hr.type_short::after{
												left: 45%;
												right: 45%;
											}
											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_hr.type_large::after{
												left: 10px;
												right: 10px;
											}

										#contentEditorContainer>section>div>section>div>section>div>div>div.mod_hr.type_numbered{
											counter-increment: numberedHrCounter;
										}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_hr.type_numbered::after{
												content:counter(numberedHrCounter);
												text-align: center;
												color: var(--accentColor);
												left: 10px;
												right: 10px;
												text-shadow: 	1px 0 1px var(--bg5), 
																-1px 0 1px var(--bg5),
																2px 0 1px var(--bg5), 
																-2px 0 1px var(--bg5),
																3px 0 1px var(--bg5), 
																-3px 0 1px var(--bg5),
																4px 0 1px var(--bg5), 
																-4px 0 1px var(--bg5),
																5px 0 1px var(--bg5), 
																-5px 0 1px var(--bg5),
																6px 0 1px var(--bg5), 
																-6px 0 1px var(--bg5),
																7px 0 1px var(--bg5), 
																-7px 0 1px var(--bg5),
																8px 0 1px var(--bg5), 
																-8px 0 1px var(--bg5),
																9px 0 1px var(--bg5), 
																-9px 0 1px var(--bg5),
																10px 0 1px var(--bg5), 
																-10px 0 1px var(--bg5),
																1px 0 0 var(--bg5), 
																-1px 0 0 var(--bg5),
																2px 0 0 var(--bg5), 
																-2px 0 0 var(--bg5),
																3px 0 0 var(--bg5), 
																-3px 0 0 var(--bg5),
																4px 0 0 var(--bg5), 
																-4px 0 0 var(--bg5),
																5px 0 0 var(--bg5), 
																-5px 0 0 var(--bg5),
																6px 0 0 var(--bg5), 
																-6px 0 0 var(--bg5),
																7px 0 0 var(--bg5), 
																-7px 0 0 var(--bg5),
																8px 0 0 var(--bg5), 
																-8px 0 0 var(--bg5),
																9px 0 0 var(--bg5), 
																-9px 0 0 var(--bg5),
																10px 0 0 var(--bg5), 
																-10px 0 0 var(--bg5);
											}

										#contentEditorContainer>section>div>section>div>section>div>div>div.mod_hr.type_spaceSmall{
											height: 10px;
											overflow: hidden;
										}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_hr.type_spaceSmall::after{
												border: 1px dashed var(--foreground);
												opacity: .5;
												background: transparent;
												height: 10px;
												line-height: 10px;
											}

										#contentEditorContainer>section>div>section>div>section>div>div>div.mod_hr.type_spaceMedium{
											height: 30px;
										}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_hr.type_spaceMedium::after{
												border: 1px dashed var(--foreground);
												opacity: .5;
												background: transparent;
												height: 30px;
												line-height: 30px;
											}

										#contentEditorContainer>section>div>section>div>section>div>div>div.mod_hr.type_spaceLarge{
											height: 50px;
										}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_hr.type_spaceLarge::after{
												border: 1px dashed var(--foreground);
												opacity: .5;
												background: transparent;
												height: 50px;
												line-height: 50px;
											}




										/** image **/
										#contentEditorContainer>section>div>section>div>section>div>div>div.mod_image{
											position: relative;
											white-space: nowrap;
										}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_image ul.list{
												margin: 0;
												padding: 0;
												list-style:	none;

												display: flex;
												gap: 10px;
												justify-content: center;
											}

												#contentEditorContainer>section>div>section>div>section>div>div>div.mod_image ul.list>li{
													display: inline-block;
													width: auto;

													background: var(--bg4);
													padding: 10px;
													border-radius: 5px;
												}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_image .fieldtype_listimage{

											}

												#contentEditorContainer>section>div>section>div>section>div>div>div.mod_image .fieldtype_listimage img{
													max-width: 200px;
													display: block;
												}
												#contentEditorContainer>section>div>section>div>section>div>div>div.mod_image .fieldtype_listimage span{
													display: none;
												}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_image .fieldtype_listi18ntext{
												width: 100%;
												overflow: hidden;
												text-overflow: ellipsis;
												white-space: nowrap;
												text-align: center;
												padding-left: 5px;
											}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_image .fieldtype_pager{
												position: absolute;
												bottom: 12px;
												right: 15px;
												z-index: 3;
											}

										#contentEditorContainer>section>div>section>div>section>div>div>div.mod_image.type_mosaic{
											max-height: 140px;
											overflow: hidden;
										}

												#contentEditorContainer>section>div>section>div>section>div>div>div.mod_image.type_mosaic ul.list{
													columns: 3;
												}

													#contentEditorContainer>section>div>section>div>section>div>div>div.mod_image.type_mosaic ul.list>li{
														display: block;
														page-break-inside: avoid;
														break-inside: avoid;
													}



										#contentEditorContainer>section>div>section>div>section>div>div>div.mod_countdown{
											text-align: center;
										}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_countdown>.fieldname_prefix{
												margin-bottom: .5em;
											}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_countdown>.fieldname_suffix{
												margin-top: .5em;
											}

										#contentEditorContainer>section>div>section>div>section>div>div>div.mod_countdown.type_bignb{
											
										}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_countdown.type_bignb .fieldname_val{
												font-size: 2em;
												font-weight: bold;
											}


										#contentEditorContainer>section>div>section>div>section>div>div>div.mod_countdown.type_bar{
											
										}

											#contentEditorContainer>section>div>section>div>section>div>div>div.mod_countdown.type_bar .fieldname_val{
												width: 100%;
												height: 30px;
												text-align: center;
												line-height: 35px;
												background: linear-gradient(to right, rgba(255,255,255,.3) 50%, rgba(255,255,255,.1) 50%);
												border-radius: 5px;
											}





/* context menu */
#contentEditorContainer>section.contextMenuHere{
	box-shadow: 0 0 0 3px var(--bg1), 0 0 0 6px var(--dangerColor)
}

	#contentEditorContainer>section.contextMenuHere>div>section.contextMenuHere{
		box-shadow: inset 0 0 0 3px var(--menu00);
	}

		#contentEditorContainer>section.contextMenuHere>div>section.contextMenuHere>div>section.contextMenuHere{
			box-shadow: inset 0 0 0 3px var(--successColor);
		}

			#contentEditorContainer>section.contextMenuHere>div>section.contextMenuHere>div>section.contextMenuHere>div>div.contextMenuHere{
				box-shadow: inset 0 0 0 3px var(--accentColor);
			}

/*
// over fx 
#contentEditorContainer .over{
	box-shadow: 0 0 0 1px var(--accentColor);
}
#contentEditorContainer .over.left{
	box-shadow: 0 0 0 1px var(--accentColor), -1px 0 0 1px var(--accentColor);
	box-shadow: 0 0 0 1px var(--accentColor);
}
#contentEditorContainer .over.right{
	box-shadow: 0 0 0 1px var(--accentColor), 1px 0 0 1px var(--accentColor);
	box-shadow: 0 0 0 1px var(--accentColor);
}
#contentEditorContainer .over.bottom{
	box-shadow: 0 0 0 1px var(--accentColor), 0 1px 0 1px var(--accentColor);
	box-shadow: 0 0 0 1px var(--accentColor);
}
#contentEditorContainer .over.top{
	box-shadow: 0 0 0 1px var(--accentColor), 0 -1px 0 1px var(--accentColor);
	box-shadow: 0 0 0 1px var(--accentColor);
}
*/

/*
 over section 
#contentEditorContainer>section.over.top{
	padding-top: 0;
	margin-top: 50px;
}
#contentEditorContainer>section.over.bottom{
	padding-bottom: 0;
	margin-bottom: 50px;
}


 over module 
#contentEditorContainer>section>div>section>div>section>div>div.over.top:not(:first-child){
	padding-top: 10px;
	margin-top: 40px;
}
#contentEditorContainer>section>div>section>div>section>div:has(div.over.top:first-child){
	padding-top: 50px;
}
#contentEditorContainer>section>div>section>div>section>div>div.over.top:first-child{
	padding-top: 10px;
}
#contentEditorContainer>section>div>section>div>section>div>div.over.bottom:not(:last-child){
	padding-bottom: 10px;
	margin-bottom: 40px;
}
#contentEditorContainer>section>div>section>div>section>div:has(div.over.bottom:last-child){
	padding-bottom: 50px;
}
#contentEditorContainer>section>div>section>div>section>div>div.over.bottom:last-child{
	padding-bottom: 10px;
}
*/



			/* structure */
			#contentEditorContainer>bcksection{
				background:var(--bg1);
				/*border:var(--bg6);*/
				border-radius: 5px;
				padding:20px;
				position: relative;
				box-sizing: border-box;

				width: 80%;
				margin: 25px auto;
				max-width: 1300px;
			}
			#contentEditorContainer>bcksection.b4fold{
				background-image: linear-gradient(red,red), linear-gradient(red,red);
				background-size: 12px 8px, 1px 15px;
				background-repeat: no-repeat;
				background-position: 5px 5px, 17px 5px;
			}
			#contentEditorContainer>bcksection.contextMenuHere{
				box-shadow: inset 0 0 0 3px var(--dangerColor);
			}

			#contentEditorContainer>bcksection.withRequisites{
				background-image: linear-gradient(-45deg, var(--bg2) 10%, transparent 10%, transparent 40%, var(--bg2) 40%, var(--bg2) 60%, transparent 60%, transparent 90%, var(--bg2) 90%);
				background-size: 20px 20px, 30px 30px;
				/*background-attachment: fixed;*/
			}

				#contentEditorContainer>bcksection::before{
					content: "";
					position: absolute;
					top: 0;
					right: 35px;
					line-height: 30px;
					opacity: .4;
					font-size: 9px;
					text-transform: uppercase;
					z-index: 1;
					pointer-events: none;
					color: var(--foreground);
					font-weight: normal;
				}

				#contentEditorContainer>bcksection[data-disposition]:not([data-disposition='default'])::before{
					content: attr(data-disposition);
				}

				#contentEditorContainer>bcksection[data-size]:not([data-size='default'])::before{
					content: attr(data-size);
				}

				#contentEditorContainer>bcksection[data-size][data-disposition]:not([data-size='default']):not([data-disposition='default'])::before{
					content: attr(data-size) " / " attr(data-disposition);
				}


			#contentEditorContainer>bcksection+section{
				margin-top:20px;
			}

				#contentEditorContainer>bcksection>header{
					/*border-bottom:1px solid var(--bg6);*/
					/*margin:-25px -25px 25px -25px;*/
					/*padding:0 80px 0 20px;*/
					/*position: relative;*/
					/*height:40px;*/

					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					/*margin: 0;*/
					/*padding: 0;*/

					height: 35px;
					line-height: 35px;
					width: 100%;
				}

					#contentEditorContainer>bcksection>header>h2{
						margin: 0;
						padding: 0;
					}

					#contentEditorContainer>bcksection>header>ul{
						display: block;
						list-style: none;
						margin:0;
						padding:0;
						position: absolute;
						top:0;
						right:0;
					}

						#contentEditorContainer>bcksection>header>ul>li{
							position: relative;
							display: block;
							width:35px;
							cursor: pointer;
							text-align: center;
							font-weight: bold;
							
							opacity: .25;
						}
							#contentEditorContainer>bcksection>header>ul>li::before{
								content: "?";
								display: block;
							}
							#contentEditorContainer>bcksection>header>ul>li>span{
								display: none;
							}
						#contentEditorContainer>bcksection>header>ul>li:hover{
							opacity: 1;
						}

				#contentEditorContainer>bcksection>div{
					clear: both;
					/*counter-reset: zoneCounter;*/
				}
				#contentEditorContainer>bcksection.nbGroup0>div,
				#contentEditorContainer>bcksection.nbGroup1>div{
					margin: -10px;
				}

					/* group */
					#contentEditorContainer>bcksection>div>section{
						margin:10px;
						position: relative;
					}

					#contentEditorContainer>bcksection.nbGroup2>div>section{
						width:50%;
						width:calc(50% - 22px);
						float:left;
					}
					#contentEditorContainer>bcksection.nbGroup3>div>section{
						width:33.33%;
						width:calc(33.33% - 22px);
						float:left;
					}

						#contentEditorContainer>bcksection>div>section>div{
							background:var(--bg3);
							border-radius: 5px;
							min-height: 50px;
							position: relative;
							padding-top: 10px;
						}
						#contentEditorContainer>bcksection.nbGroup0>div>section>div,
						#contentEditorContainer>bcksection.nbGroup1>div>section>div{
							background:var(--bg1);
						}
						#contentEditorContainer>bcksection.contextMenuHere>div>section.contextMenuHere>div{
							box-shadow: inset 0 0 0 3px var(--successColor);
						}

/*							#contentEditorContainer>bcksection>div>section>div::before{
								counter-increment: zoneCounter;
								content: "Zone " counter(zoneCounter) ": ";
								display: block;
								padding:10px;
								line-height: 15px;
								font-weight: bold;
							} */

							#contentEditorContainer>bcksection>div>section>div>div{
								position: relative;
								padding:0 10px 10px 10px;
								/*margin:0 10px 10px 10px;*/
								cursor: pointer;
							}

							#contentEditorContainer>bcksection.contextMenuHere>div>section.contextMenuHere>div>div.contextMenuHere>div{
								box-shadow: inset 0 0 0 3px var(--accentColor);
							}

								#contentEditorContainer>bcksection>div>section>div>div>div{
									position: relative;

									background:var(--bg5);
									/*border:1px solid var(--bg6);*/
									border-radius: 5px;
									/*min-height: 50px;*/
									min-height: 1em;

									pointer-events: none;
									padding: 12px 15px;

									overflow-x: hidden;
								}

									#contentEditorContainer>bcksection>div>section>div>div>div::before{
										position: absolute;
										top: 1px;
										right: 1px;
										opacity: .4;
										font-size: 8px;
										text-transform: uppercase;
										/*padding: .5em;*/
										padding: 1px 3px 0 0;
										z-index: 1;
										pointer-events: none;
										color: var(--foreground);
										font-weight: normal;

										background: inherit;
										border-radius: 5px;

										opacity: 0;
									}

									#contentEditorContainer>bcksection>div>section>div>div:hover>div::before{
										opacity: .5;
									}

									#contentEditorContainer>bcksection>div>section>div>div>div[data-module]::before{
										content: attr(data-module);
									}

									#contentEditorContainer>bcksection>div>section>div>div>div[data-module][data-type]:not([data-type='default']):not([data-type=''])::before{
										/*content: attr(data-module) " / " attr(data-type);*/
										content: attr(data-type);

									}


								#contentEditorContainer>bcksection>div>section>div>div:hover>div{
									box-shadow: inset 0 0 1px 1px var(--foreground);
								}


									#contentEditorContainer>bcksection>div>section>div>div>div>div{
										position: relative;
									}

									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_text,
									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_i18ntext,
									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listtext,
									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listi18ntext{
										/*padding: 12px 15px;*/
									}

									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_image,
									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_i18nimage,
									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listimage,
									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listi18nimage{
										/*background: fuchsia;*/
										/*width: 100%;*/
										/*height: 200px;*/
									}

										#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_image img,
										#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_i18nimage img,
										#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listimage img,
										#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listi18nimage img{
											display: block;
											height: 150px;
											width: 100%;
											margin: 0 auto;

											object-fit: contain;
										}

										#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_image span,
										#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_i18nimage span,
										#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listimage span,
										#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listi18nimage span{
											display: none;
										}


									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_quill,
									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_i18nquill,
									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listquill,
									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listi18nquill{

									}

										#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_quill .ql-editor,
										#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_i18nquill .ql-editor,
										#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listquill .ql-editor,
										#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listi18nquill .ql-editor{
											padding: 0;
										}


									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listtext,
									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listi18ntext,
									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listimage,
									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listi18nimage,
									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listquill,
									#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_listi18nquill{
										/*padding-bottom: 30px;*/
									}

										#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_pager>.pager{
											/*position: absolute;*/
											display: block;
											/*bottom: 0;*/
											/*left: 0;*/
											width: 100%;
											line-height: 30px;
											text-align: center;
											letter-spacing: .5em;
											opacity: .5;
										}
											#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_pager>.pager::before{
												content: "●●●●●+";
											}
											#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_pager>.pager.nb0::before{
												display: none;
											}
											#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_pager>.pager.nb1::before{
												/*content: "●";*/
												display: none;
											}
											#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_pager>.pager.nb2::before{
												content: "●●";
											}
											#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_pager>.pager.nb3::before{
												content: "●●●";
											}
											#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_pager>.pager.nb4::before{
												content: "●●●●";
											}
											#contentEditorContainer>bcksection>div>section>div>div>div div.fieldtype_pager>.pager.nb5::before{
												content: "●●●●●";
											}

									#contentEditorContainer>bcksection>div>section>div>div>div ul.list{
										list-style: none;
										display: block;
										/*margin: 0 -15px;*/
										padding: 0;
										white-space: nowrap;
									}

									#contentEditorContainer>bcksection>div>section>div>div>div ul.list:first-child{
										/*margin-top: -12px;*/
									}
									#contentEditorContainer>bcksection>div>section>div>div>div ul.list:last-child{
										/*margin-bottom: -12px;*/
									}

										#contentEditorContainer>bcksection>div>section>div>div>div ul.list>li{
											position: relative;
											display: inline-block;
											vertical-align: bottom;
											width: 22.5%;
											width: calc(22.5% - 30px);
											box-shadow: inset 0 0 1px 1px var(--bg3);
											border-radius: 3px;
											margin: 6px 7.5px;
											padding: 6px 7.5px;
										}

									#contentEditorContainer>bcksection>div>section>div>div>div ul.list.qtt0{

									}
										#contentEditorContainer>bcksection>div>section>div>div>div ul.list.qtt0::before{
											content: "—";
											display: block;
											position: absolute;
											top: 50%;
											left: 50%;
											transform: translate(-50%, -50%);
										}

									#contentEditorContainer>bcksection>div>section>div>div>div ul.list.qtt1{

									}
										#contentEditorContainer>bcksection>div>section>div>div>div ul.list.qtt1>li{
											width: 100%;
											width: calc(100% - 30px);
											/*box-shadow: none;*/
										}

									#contentEditorContainer>bcksection>div>section>div>div>div ul.list.qtt2{

									}
										#contentEditorContainer>bcksection>div>section>div>div>div ul.list.qtt2>li{
											width: 50%;
											width: calc(50% - 30px);
										}

									#contentEditorContainer>bcksection>div>section>div>div>div ul.list.qtt3{

									}
										#contentEditorContainer>bcksection>div>section>div>div>div ul.list.qtt3>li{
											width: 33.33%;
											width: calc(33.33% - 30px);
										}


									#contentEditorContainer>bcksection>div>section>div>div>div ul.list.qtt4{

									}
										#contentEditorContainer>bcksection>div>section>div>div>div ul.list.qtt4>li{
											width: 25%;
											width: calc(25% - 30px);
										}



								#contentEditorContainer>bcksection>div>section>div>div>div div.fieldname_linkLabel{
									display: inline-block;
									margin-top: 1em;
									padding: .5em;
									color: var(--bg3);
									background: var(--foreground);
									border-radius: 5px;
								}


								/** list **/
								#contentEditorContainer>bcksection>div>section>div>div>div.mod_list{

								}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_list::before{
										content: "list";
									}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_list ul.list{
										/*white-space: nowrap;*/
									}

										#contentEditorContainer>bcksection>div>section>div>div>div.mod_list ul.list>li{
											position: relative;
											vertical-align: top;
											/*max-height: 120px;*/
											overflow: hidden;
										}

											#contentEditorContainer>bcksection>div>section>div>div>div.mod_list .fieldname_image{

											}

												#contentEditorContainer>bcksection>div>section>div>div>div.mod_list .fieldname_image img{
													width: 100%;
													height: 50px;

													object-fit: scale-down;
												}


											#contentEditorContainer>bcksection>div>section>div>div>div.mod_list .fieldname_title{
												font-size: 16px;
												text-transform: uppercase;
											}

											#contentEditorContainer>bcksection>div>section>div>div>div.mod_list .fieldname_text{
												position: relative;
												font-size: 11px;
												max-height: 4em;
												line-height: 1em;
											}

												#contentEditorContainer>bcksection>div>section>div>div>div.mod_list .fieldname_text .ql-editor{
													line-height: 1em;
												}

/*													#contentEditorContainer>bcksection>div>section>div>div>div.mod_list .fieldname_text::after{
													content: "";
													position: absolute;
													bottom: 0;
													left: 3px;
													right: 3px;
													height: 5px;
													background-image: linear-gradient(to bottom, rgba(var(--rawBg5), 0), var(--bg5));
												}*/

											#contentEditorContainer>bcksection>div>section>div>div>div.mod_list .fieldname_title+.fieldname_text{
												margin-top: .5em;
												opacity: .7;
											}

											#contentEditorContainer>bcksection>div>section>div>div>div.mod_list .fieldname_linkLabel{
												display: inline-block;
												font-size: 11px;
											}

/*											#contentEditorContainer>bcksection>div>section>div>div>div.mod_list ul.list>li::after{
												content: "";
												position: absolute;
												bottom: 0;
												left: 3px;
												right: 3px;
												height: 5px;
												border-bottom: 1px solid var(--bg3);
												background-image: linear-gradient(to bottom, rgba(var(--rawBg5), 0), var(--bg5));
											}*/



								/** medias **/
								div.embedPreviewZone iframe{
									width: 100%;
									border:none;
								}

								div.embedPreviewZone.s_100px iframe{
									height: 100px;
								}
								div.embedPreviewZone.s_250px iframe{
									height: 250px;
								}
								div.embedPreviewZone.s_500px iframe{
									height: 500px;
								}
								div.embedPreviewZone.s_100vh iframe{
									height: 600px;
								}
								div.embedPreviewZone.s_169 iframe{
									width: 320px;
									height: 180px;
								}
								div.embedPreviewZone.s_43 iframe{
									width: 280px;
									height: 210px;
								}
								div.embedPreviewZone.s_square iframe{
									width: 250px;
									height: 250px;
								}
								div.embedPreviewZone.s_vertical iframe{
									width: 180px;
									height: 320px;
								}

								#contentEditorContainer>bcksection>div>section>div>div>div.mod_medias{

								}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_medias>div{
										display: none;
									}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_medias::after{
										content:"</>";
										font-weight: bold;
										font-size: 20px;
										display: flex;
										justify-content: center;
										align-items: center;
										width: 200px;
										height: 200px;
										margin: 0 auto;
										background: rgba(255,255,255,.2);
										border-radius: 5px;
										color: var(--accentColor);
									}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_medias.type_video::after{
										content: "\e917";
										font-weight: normal;
										font-family: 'icomoon' !important;
										font-size: 30px;
										width: 250px;
										height: 140px;
									}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_medias.type_audio::after{
										content: "\e910";
										font-family: 'icomoon' !important;
										font-weight: normal;
										font-size: 30px;
										width: 100%;
										height: 110px;
									}


								/** form **/
								#contentEditorContainer>bcksection>div>section>div>div>div.mod_form{

								}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_form::before{
										content: "form";
									}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_form ul.list{
										background: inherit;

										margin: 0;
									}

										#contentEditorContainer>bcksection>div>section>div>div>div.mod_form ul.list>li{
											background: inherit;

											display: inline-block;
											width: 50%;
											min-width: 300px;
											/*max-width: 500px;*/
											margin: 0 0 1em 0;
											padding: 0;
										}

											#contentEditorContainer>bcksection>div>section>div>div>div.mod_form ul.list>li div.fieldname_label{
												text-transform: uppercase;
												font-size: 10px;
												opacity: .8;
												margin-bottom: 5px;
											}

											#contentEditorContainer>bcksection>div>section>div>div>div.mod_form ul.list>li div.fieldname_placeholder{
												background: inherit;

												position: relative;
												/*background: var(--bg1);*/
												border: 1px solid var(--foreground);
												color: var(--foreground);
												line-height: 25px;
												border-radius: 5px;
												padding: 0 5px;
											}

												#contentEditorContainer>bcksection>div>section>div>div>div.mod_form ul.list>li div.fieldname_placeholder::before{
													display: block;
													content: "";
													position: absolute;
													top: 0;
													left: 0;
													right: 0;
													bottom: 0;
													background: inherit;
													opacity: .6;
													border-radius: 5px;
												}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_form div.fieldname_submitLabel{
										width: 50%;
										min-width: 300px;
										/*max-width: 500px;*/
										/*margin: 0 auto;*/

										text-transform: uppercase;
										line-height: 25px;
										border-radius: 5px;
										font-weight: bold;

										text-align: center;

										background: var(--accentColor);
										color: var(--accentForeground);
									}

								/** text **/	
								#contentEditorContainer>bcksection>div>section>div>div>div.mod_text{

								}
									#contentEditorContainer>bcksection>div>section>div>div>div.mod_text::before{
										content: "text";
									}

								#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_bigtext{

								}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_bigtext .ql-editor{
										font-size: 1.4em;
									}


								#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_title{
									font-weight: bold;
								}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_title .ql-editor{
										font-size: 16px;
										color: var(--accentColor);
									}

								#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_subtitle{
									font-weight: bold;
								}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_subtitle .ql-editor{
										font-size: 14px;
										color: var(--accentColor);
									}

								#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_citation{
									text-align: center;
								}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_citation .ql-editor{
										/*position: relative;*/
										font-style: italic;
										padding: 0 2em;
										text-align: center;
										overflow: hidden;
										position: relative;

										width: auto;
										display: inline-block;
										max-width: 100%;
									}

									
										#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_citation .ql-editor::before,
										#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_citation .ql-editor::after{
											font-size: 4em;
											/*line-height: 1.5em;*/
											line-height: 0;
											opacity: .3;
											display: block;
											/*text-align: left;*/
											content: "«";
											/*margin: -.5em 0 -.7em -.4em;*/

											position: absolute;
										}

										#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_citation .ql-editor::before{
											top: 0;
											left: 0;
										}


										#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_citation .ql-editor::after{
											/*content: "»";*/
											/*text-align: right;*/
											/*margin: -.7em -.4em -.5em 0;*/

											transform: rotate(180deg);
											top: auto;
											left: auto;
											bottom: 0;
											right: 0;
										}
									#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_citation .fieldtype_i18ntext.fieldname_author{
										font-size: 12px;
										margin-top: 1em;	
									}

										#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_citation .fieldtype_i18ntext.fieldname_author::before{
											opacity: .3;
											content: "— ";
										}

								#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_indented{

								}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_indented .ql-editor{
										padding-left: 20px;
										/*margin-left: 20px;*/
										border-left: 2px solid var(--accentColor);
									}

								#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_framed{

								}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_framed .ql-editor{
										padding: 10px;
										/*margin-left: 20px;*/
										border: 1px solid var(--accentColor);
										border-radius: 5px;
									}

								#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_exergue{

								}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_text.type_exergue .ql-editor{
										font-size: 1.5em;
										font-style: italic;
										text-align: center;
										color: var(--accentColor);
									}

								.placeholderbox{
									height: 100px;
									width: 100%;
									display: flex;
									align-items: center;
									justify-content: center;
								}

									.placeholderbox>div{

									}

								/** slider **/
								#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider{
									/*padding-right: 50%;*/
								}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider::before{
										content: "slider";
									}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider{
										/*max-width: 95%;*/
										box-sizing: border-box;
									}

										#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider ul.list{
											height: 160px;
											position: relative;
										}

											#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider ul.list::before{
												content: "Aucun contenu";
												position: absolute;
												top: 50%;
												left: 50%;
												transform: translate(-50%, -50%);
											}

											#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider ul.list>li{
												/*position: relative;*/
												isolation: isolate;
												height: 148px; /* + 6*2 padding vertical = 160 */
												width: 50%;
												position: absolute;
												top: 0;
												left: 25%;
												opacity: 0;

												display: flex;
												flex-direction: column;
												justify-content: center;
												overflow: hidden;
											}

												#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider ul.list>li>*{
													margin-left: 52.5%;
													margin-left: calc(50% + 2.5px);
												}


												#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider ul.list>li>.fieldtype_listimage{
													position: absolute;
													top: 5px;
													left: 5px;
													right: 52.5%;
													right: calc(50% + 2.5px);
													bottom: 5px;
													/*width: 100%;*/
													/*height: 100%;*/
													z-index: -1;
													background: var(--bg6);
													border-radius: 5px;
													text-align: center;
													margin-left: 0;
												}

													#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider .fieldtype_listimage>img{
														max-width: 100%;
														margin: 0 auto;
													}

												#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider .fieldname_hat{
													font-size: 12px;
													text-transform: uppercase;
													margin-bottom: .5em;
												}

												#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider .fieldname_title{
													font-size: 16px;
													text-transform: uppercase;
												}

												#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider .fieldname_text{
													position: relative;
													font-size: 11px;
													max-height: 4em;
													line-height: 1em;
												}

													#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider .fieldname_text .ql-editor{
														line-height: 1em;
													}

/*													#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider .fieldname_text::after{
														content: "";
														position: absolute;
														bottom: 0;
														left: 3px;
														right: 3px;
														height: 5px;
														background-image: linear-gradient(to bottom, rgba(var(--rawBg5), 0), var(--bg5));
													}*/

												#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider .fieldname_title+.fieldname_text{
													margin-top: .5em;
													opacity: .7;
												}

												#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider .fieldname_linkLabel{
													display: inline-block;
													font-size: 11px;
												}


												#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider .fieldname_description{
													margin-top: .5em;
												}

												#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider div.fieldtype_pager{
													
												}
													#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider div.fieldtype_pager>.pager{

													}


											#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider ul.list>li:first-child{
												opacity: 1;
												z-index: 2;
												background: var(--bg5);

											}
											#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider ul.list>li:nth-child(2){
												left: 45%;
												opacity: .5;
												transform-origin: 100% 50%;
												transform: scale(.9);
											}
											#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider ul.list>li:last-child{
												left: 5%;
												opacity: .5;
												transform-origin: 0% 50%;
												transform: scale(.9);

											}

											#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider ul.list.qtt1>li{
												left: 25%;
												opacity: 1;
												transform: none;
											}


											#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider ul.list.qtt2>li:first-child{
												left: 10%;
											}
											#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider ul.list.qtt2>li:last-child{
												left: 40%;
												opacity: .5;
												transform-origin: 100% 50%;
												transform: scale(.9);
											}



									#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider.type_header{
										padding-right: 15px;
										padding-left: 50%;
									}

										#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider.type_header>div{
											padding-left: 5%;
										}

										#contentEditorContainer>bcksection>div>section>div>div>div.mod_slider.type_header .fieldtype_listimage{
											float: left;
											margin-left: -100%;
											margin-right: 0;
											padding-left: 0;
										}

								/** button **/
								#contentEditorContainer>bcksection>div>section>div>div>div.mod_button{

								}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_button::before{
										content: "button";
									}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_button ul{
										margin: 0;
										padding: 0;

										margin: 0 -10px;
										display: flex;
									}

										#contentEditorContainer>bcksection>div>section>div>div>div.mod_button ul li{
											margin: 0;
											padding: 0;
											margin-top: .5em;
											
											width: 100% !important;
											padding: 0 10px;
											box-shadow: none;
										}

											#contentEditorContainer>bcksection>div>section>div>div>div.mod_button ul li div.fieldname_linkLabel{
												margin-top: 0;
												display: block;
												text-align: center;
											}

								/** édition **/
								#contentEditorContainer>bcksection>div>section>div>div>div.mod_a10_edition{

								}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_a10_edition::before{
										content: "Éditions";
									}

								/** Ads **/
								#contentEditorContainer>bcksection>div>section>div>div>div.mod_marketing{
									
								}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_marketing::before{
										content: "Publicités";
									}

									#contentEditorContainer>bcksection>div>section>div>div>div.mod_marketing>div.fieldname_ads{
										position: relative;
										border: 2px solid var(--bg1);
										margin-bottom: 15px;
										background-image: linear-gradient(45deg, var(--bg2), var(--bg4));
									}


										#contentEditorContainer>bcksection>div>section>div>div>div.mod_marketing>div.fieldname_ads>.ad{
											text-align: center;
											opacity: 0;
										}

										#contentEditorContainer>bcksection>div>section>div>div>div.mod_marketing>div.fieldname_ads::before{
											content: "Publicité";
											position: absolute;
											top: 100%;
											right: 0;
											padding: 0 5px;
											line-height: 15px;
											background: var(--bg1);
											color: #FFFFFF;
											text-transform: uppercase;
											font-size: 9px;
											margin-right: -2px;
										}

										#contentEditorContainer>bcksection>div>section>div>div>div.mod_marketing>div.fieldname_ads::after{
											content: "";
											display: block;
											padding-bottom: 16.6666666667%;
										}

										#contentEditorContainer>bcksection.nbZone2>div>section>div>div>div.mod_marketing>div.fieldname_ads::after{
											padding-bottom: 78.125%;
										}



							#contentEditorContainer>bcksection>div>section>div>div.dragging{
								opacity: .5;
							}

					#contentEditorContainer>bcksection::after{
						content:"";
						display: block;
						clear:both;
					}

			#contentEditorContainer>bcksection.size_small{
				width: 70%;
				max-width: 900px;
			}
			#contentEditorContainer>bcksection.size_full{
				width: 100%;
				max-width: 100%;
				max-width: calc(100% - 10px);
				/*padding-bottom:10px;*/
			}
				#contentEditorContainer>bcksection.size_full>div{
					margin:0 -20px -20px -20px;
				}

			#app>main>footer>#replaceContent{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				opacity: .5;
				text-transform: uppercase;
				font-size: 10px;
			}
			#app>main>footer>#replaceContent:hover{
				opacity: 1;
			}


			#app>main>footer>#contentInfo{
				position: absolute;
				top: 50%;
				left: 25px;
				transform: translateY(-50%);

				font-size: 12px;
				text-transform: uppercase;
				color: var(--foreground);
			}
				#app>main>footer>#contentInfo>div{
					display: none;
					position: relative;
				}
					#app>main>footer>#contentInfo>div.state_published::before,
					#app>main>footer>#contentInfo>div.state_draft::before,
					#app>main>footer>#contentInfo>div.state_pending::before{
						content: "";
						display: block;
						width: .5em;
						height: .5em;
						border-radius: 100%;
						box-sizing: border-box;

						position: absolute;
						top: 50%;
						left: -.5em;
						transform: translate(-100%, -50%);
					}

					#app>main>footer>#contentInfo>div.state_published::before{
						background: var(--successColor);
					}
					#app>main>footer>#contentInfo>div.state_draft::before{
						background: var(--warningColor);
					}
					#app>main>footer>#contentInfo>div.state_pending::before{
						background: var(--dangerColor);
					}

				#app>main>footer>#contentInfo.published>div.state_published{
					display: block;
				}
				#app>main>footer>#contentInfo.draft>div.state_draft{
					display: block;
				}
				#app>main>footer>#contentInfo.pending>div.state_pending{
					display: block;
				}

				#app>main>footer>#contentInfo>#contentDate{
					display: block;
/*					font-size: 10px;*/
					text-transform: none;
					opacity: .5;
				}

			#app>main>footer>button#draftButton{
				right: 100px;
				border: none;
				padding: 0;
				color: #888888;
/*				text-transform: none;*/

				text-align: right;
			}

				#app>main>footer>button#draftButton>span{
					text-decoration: underline;
					text-decoration-color: var(--accentColor);
				}

			#app>main>footer>button#draftButton:hover{
				background: transparent;
				color: #888888;
			}

				#app>main>footer>button#draftButton:hover>span{
					color: var(--accentColor);
				}

			#app.saving>main>footer>button#draftButton,
			#app.saving>main>footer>button#publishButton{
				display: none;
			}

		#app>main>footer{
			position: absolute;
			bottom:0;
			left:0;
			width:100%;
			/*background: var(--bg1);*/
			border-top: 1px solid var(--bg6);
			height: var(--footerHeight);

			z-index: 4;
			background: inherit;
		}

			#app>main>footer>div.select.foldLength{
				display: none;
/*				display: inline-block;
				border-radius: 5px;
				border: 1px solid var(--bg5);
				position: absolute;
				top: 9px;
				left: 9px;*/
			}
/*				#app>main>footer>div.select.foldLength::before{
					display: inline-block;
					padding-left: 5px;
					font-size: 12px;
					content: "Extrait : ";
				}

				#app>main>footer>div.select.foldLength::after{
					position: absolute;
					display: block;
					content: "⋯";
					position: absolute;
					top: 0;
					right: 0;
					width: 20px;
					line-height: 25px;
					pointer-events: none;
				}

				#app>main>footer>div.select.foldLength>select{
					display: inline-block;
					-webkit-appearance: none;
					border-radius: none;
					height: 25px;
					padding: 0 25px 0 5px;
					line-height: 15px;

					background: var(--curBg);
					color: var(--foreground);
					border: none;
				}*/

			#app>main>footer::before,
			#app>main>footer::after{
				display: none;
				content:"";
				position: absolute;
			}

			#app.saving>main>footer::before,
			#app.saving>main>footer::after{
				display: block;
			}

			#app>main>footer::before{
				width:32px;
				height:32px;
				border:2px solid var(--accentColor);
				position: absolute;
				top:50%;
				transform: translateY(-50%);
				right:25px;
				border-radius: 100%;
				box-sizing: border-box;
			}

			#app>main>footer::after{
				position: absolute;
				height:16px;
				width:16px;
				top:50%;
				right:25px;
				transform-origin: 0 50%;
				transform: translateY(-50%);
				background: var(--bg3); /*inherit;*/

				animation-name: rotate;
				animation-duration: 2s;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
			}
			@keyframes rotate {
				from {transform: translateY(-50%) rotate(0deg);}
				to {transform: translateY(-50%) rotate(360deg);}
			}

			#app>main>footer>p{
				position: absolute;
				top:50%;
				left:25px;
				text-align: left;
				transform: translateY(-50%);
				color:#FFF;
				margin:0;
				padding:0;

				font-size: 10px;
				text-transform: uppercase;
			}

			#app>main>footer>button{
				position: absolute;
				top: 50%;
				right: 25px;
				transform: translateY(-50%);
			}

	#app>main.subnav{
		width: 267px;
	}
	#app>main.subnav:last-child,
	#app>main.subnav:has(+ div.popup),
	#app>main.subnav:has(+ #cornerMessage){
		width: calc(100vw - 268px);
	}
	#app>main+main.subnav:last-child,
	#app>main+main.subnav:has(+ div.popup),
	#app>main+main.subnav:has(+ #cornerMessage){
		width: calc(100vw - (268px * 2));
	}
	#app>main+main+main.subnav:last-child,
	#app>main+main+main.subnav:has(+ div.popup),
	#app>main+main+main.subnav:has(+ #cornerMessage){
		width: calc(100vw - (268px * 3));
	}



		#app>main.subnav>header>nav{
			display: none;
		}

		#app>main.subnav table.list tr th,
		#app>main.subnav table.list tr td{
			display: none;
		}

		#app>main.subnav table.list tr th:first-child,
		#app>main.subnav table.list tr td:first-child{
			display: table-cell;

			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
		}

		#app>main.subnav>.container>div.pager .prev,
		#app>main.subnav>.container>div.pager .next{
			font-size: 0;
		}
		#app>main.subnav:last-child>.container>div.pager .prev,
		#app>main.subnav:last-child>.container>div.pager .next{
			font-size: 14px;
		}

			#app>main.subnav>.container>div.pager .prev::after,
			#app>main.subnav>.container>div.pager .next::after{
				font-size: 14px;
			}

	#app>main.subnav:last-child{
/*		width: auto;
		right: 0;*/
	}

		#app>main.subnav:last-child>header>nav,
		#app>main.subnav:has(+ div.popup)>header>nav
		{
			display: block;
		}

		#app>main.subnav:last-child table.list tr th,
		#app>main.subnav:last-child table.list tr td,
		#app>main.subnav:has(+ div.popup) table.list tr th,
		#app>main.subnav:has(+ div.popup) table.list tr td{
			display: table-cell;
		}

		#app>main.subnav table.list tr th.disabled,
		#app>main.subnav table.list tr td.disabled{
			color: var(--dangerColor);
		}

		#app>main.subnav:last-child table.list tr th:has(img),
		#app>main.subnav:last-child table.list tr td:has(img),

		#app>main.subnav:has(+ div.popup) table.list tr th:has(img),
		#app>main.subnav:has(+ div.popup) table.list tr td:has(img),

		#app>main.subnav table.list tr th:has(img),
		#app>main.subnav table.list tr td:has(img){
			display: flex;
			gap: 10px;
			align-items: center;
		}

			#app>main.subnav table.list tr th:has(img)>img,
			#app>main.subnav table.list tr td:has(img)>img{
				display: block;
				width: 30px;
				height: 30px;
				background: #FFFFFF;
			}


		#app>main.subnav table.list tr th.hidden,
		#app>main.subnav table.list tr td.hidden{
			color: rgba(255,255,255,.5);
		}

		#app>main.subnav table.list tr th:first-child,
			#app>main.subnav table.list tr td:first-child{
				position: relative;
			}

			#app>main.subnav table.list tr th:first-child>a.settings,
			#app>main.subnav table.list tr td:first-child>a.settings{
				position: absolute;
				top: 0;
				right: 0;
				width: 34px;
				height: 34px;
				background: red;
				overflow: hidden;
				margin: 0;
				padding: 0;
				background: var(--bg1);
				background: rgba(var(--rawBg1), .5);
				font-size: 0;
				color: transparent;
				display: none;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}
			#app>main.subnav table.list tr:hover th:first-child>a.settings,
			#app>main.subnav table.list tr th:first-child>a.active+a.settings,
			#app>main.subnav table.list tr:hover td:first-child>a.settings,
			#app>main.subnav table.list tr td:first-child>a.active+a.settings{
				display: block;
			}

				#app>main.subnav table.list tr th:first-child>a.settings::before,
				#app>main.subnav table.list tr td:first-child>a.settings::before{
					content:"\e93f";

					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					text-align: center;
					margin: 0;
					padding: 0;

					text-indent: 0;
					color:#FFFFFF;
					font-family: 'icomoon' !important;
					font-size:20px;
					line-height: 1em;
				}
				#app>main.subnav table.list tr th:first-child>a.settings:hover::before,
				#app>main.subnav table.list tr td:first-child>a.settings:hover::before{
					color: var(--accentColor);
				}


		#app>main.subnav:last-child table.list tr th:first-child,
		#app>main.subnav:last-child table.list tr td:first-child,
		#app>main.subnav:has(+ div.popup) table.list tr th:first-child,
		#app>main.subnav:has(+ div.popup) table.list tr td:first-child{

			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		#app>main.subnav:last-child>header>form.searchbox,
		#app>main.subnav:has(+ div.popup)>header>form.searchbox{
			position: absolute;
			top: calc(var(--headerHeight) + 1px);
			left: 0;
			right: 0;
			z-index: 2;

			background: inherit;
			border-bottom: 1px solid var(--bg6);

			display: none;
		}
		#app>main.subnav:last-child>header>form.searchbox.active,
		#app>main.subnav:has(+ div.popup)>header>form.searchbox.active{
			display: block;
		}

		#app>main.subnav:last-child>header nav li.active a.toggleSearchbox>span,
		#app>main.subnav:has(+ div.popup)>header nav li.active a.toggleSearchbox>span{
/*			box-shadow: inset 0 0 0 1px var(--accentColor)*/
			border-radius: 5px;
			padding: 5px;
			margin: 0 -5px;
/*			color: var(--accentColor)*/
			background: var(--foreground);
			color: var(--bg2);

			cursor: pointer;
		}
		#app>main.subnav:last-child>header:has(form.searchbox.active) nav a.toggleSearchbox>span,
		#app>main.subnav:has(+ div.popup)>header:has(form.searchbox.active) nav a.toggleSearchbox>span{
			background: var(--accentColor);
			border-radius: 5px;
			padding: 5px;
			margin: 0 -5px;
			color: var(--accentForeground);
		}

			#app>main.subnav:last-child>header>form.searchbox>ul,
			#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul{
				display: flex;
				list-style: none;
				margin: 0;
				margin: 20px;
				padding: 0;
				flex-wrap: wrap;
				margin-top: 0;
			}

				#app>main.subnav:last-child>header>form.searchbox>ul>li,
				#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li{
					flex: 1 1 250px;
					margin-top: 20px;
				}

				#app>main.subnav:last-child>header>form.searchbox>ul>li.break,
				#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.break{
					flex: 0 0 100%;
					margin-top: 0;
				}

				#app>main.subnav:last-child>header>form.searchbox>ul>li:has(ul>li:nth-child(12)),
				#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li:has(ul>li:nth-child(12)),
				#app>main.subnav:last-child>header>form.searchbox>ul>li:has(ul>li>ul),
				#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li:has(ul>li>ul){
					flex: 1 1 500px;
				}

					#app>main.subnav:last-child>header>form.searchbox>ul>li:has(ul>li:nth-child(12))>ul,
					#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li:has(ul>li:nth-child(12))>ul,
					#app>main.subnav:last-child>header>form.searchbox>ul>li:has(ul>li>ul)>ul,
					#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li:has(ul>li>ul)>ul{
						columns: 2;
					}

						#app>main.subnav:last-child>header>form.searchbox>ul>li:has(ul>li:nth-child(12))>ul>li,
						#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li:has(ul>li:nth-child(12))>ul>li,
						#app>main.subnav:last-child>header>form.searchbox>ul>li:has(ul>li>ul)>ul>li,
						#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li:has(ul>li>ul)>ul>li{
							break-inside: avoid;
						}


				#app>main.subnav:last-child>header>form.searchbox>ul>li.text,
				#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.text{
					flex: 100%;
				}

					#app>main.subnav:last-child>header>form.searchbox>ul>li.text>label,
					#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.text>label{
						position: relative;
						display: block;
						padding: 0px;
					}

						#app>main.subnav:last-child>header>form.searchbox>ul>li.text>label>input,
						#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.text>label>input{
							background: transparent;
							width: 100%;
							height: 40px;
							padding-top: 10px;
							border-radius: 0;
							border:none;
							border-bottom:2px solid var(--bg6);
							color: var(--foreground);
						}

						#app>main.subnav:last-child>header>form.searchbox>ul>li.text>label>input:focus,
						#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.text>label>input:focus{
							box-shadow: none;
							border-color: var(--accentColor);
						}

						#app>main.subnav:last-child>header>form.searchbox>ul>li.text>label>span,
						#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.text>label>span{
							display: block;
							position: absolute;
							top: 0;
							left: 0;

							font-size: 10px;
							line-height: 1em;
							text-transform: uppercase;
						}

					#app>main.subnav:last-child>header>form.searchbox>ul>li.popover>label,
					#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.popover>label{
						position: relative;
						display: block;
						padding: 0px 0 20px 0;
					}

						#app>main.subnav:last-child>header>form.searchbox>ul>li.popover>label>div.popoverLauncher,
						#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.popover>label>div.popoverLauncher{
							background: transparent;
							width: 100%;
							height: 40px;
							padding-top: 10px;
							border-radius: 0;
							border:none;
							border-bottom:2px solid var(--bg6);
							color: var(--foreground);

							width: calc(100% - 30px);
						}

							#app>main.subnav:last-child>header>form.searchbox>ul>li.popover>label>div.popoverLauncher>div,
							#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.popover>label>div.popoverLauncher>div{
								width: calc(100% - 30px);
								padding-right: 0;
							}

							#app>main.subnav:last-child>header>form.searchbox>ul>li.popover>label>div.popoverLauncher::after,
							#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.popover>label>div.popoverLauncher::after{
								top: 11px;
							}

						#app>main.subnav:last-child>header>form.searchbox>ul>li.popover>label>input:focus,
						#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.popover>label>input:focus{
							box-shadow: none;
							border-color: var(--accentColor);
						}

						#app>main.subnav:last-child>header>form.searchbox>ul>li.popover>label>span,
						#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.popover>label>span{
							display: block;
							position: absolute;
							top: 0;
							left: 0;

							font-size: 10px;
							line-height: 1em;
							text-transform: uppercase;
						}

				#app>main.subnav:last-child>header>form.searchbox>ul>li.select,
				#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select{

				}



					#app>main.subnav:last-child>header>form.searchbox>ul>li.select>span,
					#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select>span{
						font-size: 10px;
						text-transform: uppercase;
						color: var(--accentColor);
						font-weight: bold;
/*						padding-bottom: 5px;*/
						line-height: 2em;
					}

					#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul,
					#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul{
						display: block;
						list-style: none;
						margin: 0;
						padding: 0;
					}

						#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul>li,
						#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul>li{
							padding: 5px 0 0 0;
						}

						#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul>li>ul,
						#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul>li>ul{
							padding-left:20px;
/*							margin-top: -5px;*/
						}

							#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul>li>ul>li,
							#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul>li>ul>li{
								padding: 0;
								padding-bottom: 5px;
							}

								#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul>li>ul>li>label,
								#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul>li>ul>li>label{
									padding: 0;
								}

						#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul>li:first-child,
						#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul>li:first-child{
/*							padding-top: 5px;*/
						}

							#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul>li>label,
							#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul>li>label{
/*								padding: 5px 0;*/
									padding: 0 0 5px 0;
							}

								#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul>li>label>span,
								#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul>li>label>span{
									display: block;
									position: relative;
									padding-left: 15px;
									line-height: 1em;
									top: 0;

									text-transform: none;
									color: var(--foreground);
									font-size: 13px;
								}

								#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul>li>label>input,
								#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul>li>label>input{
									display: none;
								}
								#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul>li>label>input+span,
								#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul>li>label>input+span{
									line-height: 1.3em;
								}
									#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul>li>label>input+span::before,
									#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul>li>label>input+span::before,
									#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul>li>label>input+span::after,
									#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul>li>label>input+span::after{
										content: "";
										display: block;
										position: absolute;
										top: calc((1em - 10px) / 2);
										left: 0;
										width: 10px;
										height: 10px;
										box-sizing: border-box;
										border:1px solid var(--foreground);
										border-radius: 100%;
									}

									#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul>li>label>input+span::after,
									#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul>li>label>input+span::after{
										top: calc((1em - 6px) / 2);
										left: 2px;
										width: 6px;
										height: 6px;
										border:none;
									}

								#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul>li>label>input:checked,
								#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul>li>label>input:checked{
									
								}

									#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul>li>label>input:checked+span,
									#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul>li>label>input:checked+span{
										
									}

										#app>main.subnav:last-child>header>form.searchbox>ul>li.select ul>li>label>input:checked+span::after,
										#app>main.subnav:has(+ div.popup)>header>form.searchbox>ul>li.select ul>li>label>input:checked+span::after{
											background: var(--accentColor);
										}

			#app>main.subnav:last-child>header>form.searchbox>footer,
			#app>main.subnav:has(+ div.popup)>header>form.searchbox>footer{
				display: flex;
				flex-direction: row-reverse;
				margin: 20px;
				padding: 0;
				justify-content: space-between;
			}

				#app>main.subnav:last-child>header>form.searchbox>footer,
				#app>main.subnav:has(+ div.popup)>header>form.searchbox>footer{
					flex:auto;
				}

					#app>main.subnav:last-child>header>form.searchbox>footer>a.resetSearch,
					#app>main.subnav:has(+ div.popup)>header>form.searchbox>footer>a.resetSearch{
						font-size: 12px;
						color: var(--accentColor);
						text-transform: uppercase;
					}

	table.list{
		width: 100%;
		border-collapse:separate;
		border-spacing:0 5px;
	}

		table.list thead{

		}

			table.list thead tr{

			}

				table.list thead tr td,
				table.list thead tr th{
					text-align: left;
					font-weight: normal;

					vertical-align: top;
					padding-bottom: 30px;
				}

				table.list thead tr th{
					font-size: 9px;
					color: var(--disabledColor);
					text-transform: uppercase;
					padding: 8px 10px;

					padding-bottom: 30px;
				}

		table.list tbody{

		}

			table.list tbody tr{
				background: var(--bg1);
				border-radius: 5px;

				font-size: 13px;
				line-height: 1.4em;
			}

			.popup table.list tbody tr{
				background: var(--bg2);
			}

				table.list tbody tr th{
					padding: 8px 10px;
					font-weight: bold;
				}

				table.list tbody tr td{
					padding: 8px 10px;
				}

					table.list tbody tr th a,
					table.list tbody tr td a{
						display: block;
						position: relative;
					}

					table.list tbody tr th a.active,
					table.list tbody tr td a.active{
						color: var(--accentColor);
					}


					table.list tbody tr th a.success,
					table.list tbody tr td a.success,
					table.list tbody tr th a.error,
					table.list tbody tr td a.error{
						padding-right: 20px;
					}

						table.list tbody tr th a.success::after,
						table.list tbody tr td a.success::after,
						table.list tbody tr th a.error::after,
						table.list tbody tr td a.error::after{
							position: absolute;
							top: 50%;
							right: 0;
							transform: translateY(-50%);

							content:"";
							display: block;
							width: 15px;
							height: 15px;
							border: 1px solid white;
							border-radius: 100%;
						}

						table.list tbody tr th a.success::after,
						table.list tbody tr td a.success::after{
							color: var(--successColor);
							border-color: var(--successColor);
						}

						table.list tbody tr th a.error::after,
						table.list tbody tr td a.error::after{
							color: var(--dangerColor);
							border-color: var(--dangerColor);
						}

				table.list tbody tr td.folder a::before{
					content: "📁 ";
				}

			table.list tbody tr td.child::before,
			table.list tbody tr td.child::after{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 0;
				background: var(--bg2);
				bottom: 0;
			}

			table.list tbody tr td.child::after{
				width: 5px;
				background: var(--bg1);
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
			}

			table.list tbody tr td.level1{
				position: relative;
			}

				table.list tbody tr td.level1::before{
					width: 20px;
				}

				table.list tbody tr td.level1::after{
					left: 15px;
				}

				table.list tbody tr td.level1 a{
					padding-left: 15px;
				}

			table.list tbody tr td.level2{
				
			}

				table.list tbody tr td.level2::before{
					width: 35px;
				}

				table.list tbody tr td.level2::after{
					left: 30px;
				}

				table.list tbody tr td.level2 a{
					padding-left: 30px;
				}

			table.list tbody tr td.level3{
				
			}

				table.list tbody tr td.level3::before{
					width: 50px;
				}

				table.list tbody tr td.level3::after{
					left: 45px;
				}

				table.list tbody tr td.level3 a{
					padding-left: 45px;
				}

			table.list tbody tr td.level4{
				
			}

				table.list tbody tr td.level4::before{
					width: 65px;
				}

				table.list tbody tr td.level4::after{
					left: 60px;
				}

				table.list tbody tr td.level4 a{
					padding-left: 60px;
				}

			table.list tbody tr td.level5{
				
			}

				table.list tbody tr td.level5::before{
					width: 80px;
				}

				table.list tbody tr td.level5::after{
					left: 75px;
				}

				table.list tbody tr td.level5 a{
					padding-left: 75px;
				}



				table.list tbody tr th:first-child,
				table.list tbody tr td:first-child{
					width: 231px;
				}

				table.list tbody tr td:first-child{
					border-top-left-radius: 5px;
					border-bottom-left-radius: 5px;
				}

				table.list tbody tr td:last-child{
					border-top-right-radius: 5px;
					border-bottom-right-radius: 5px;
				}

		table.list tbody[data-reorderable]{

		}

			table.list tbody[data-reorderable] tr{

			}

				table.list tbody[data-reorderable] tr>td:first-child,
				table.list tbody[data-reorderable] tr>th:first-child{
					padding-left: 30px;
					position: relative;
					cursor: move;
				}

					table.list tbody[data-reorderable] tr>td:first-child::before,
					table.list tbody[data-reorderable] tr>th:first-child::before{
						content: "";
						display: block;
						position: absolute;
						top: 10px;
						left: 5px;
						bottom: 10px;
						width: 15px;
						background: red;

						opacity: .25;

						background: linear-gradient(to bottom, currentColor 50%, transparent 50%);
						background-size: 100% 20%;
						background-repeat: repeat-y;
					}

				table.list tbody[data-reorderable] tr:hover>td:first-child::before,
				table.list tbody[data-reorderable] tr:hover>th:first-child::before{
					opacity: .5;
				}




	#app>main table.box{
		margin-top: -1px;
		border-collapse:separate;
		border-spacing:0 1px;

		border-radius: 5px;
		overflow: hidden;
	}

		#app>main table.box thead{

		}

			#app>main table.box thead tr{

			}

				#app>main table.box thead tr td,
				#app>main table.box thead tr th{
					text-align: left;
					font-weight: normal;
				}

				#app>main table.box thead tr th{
					font-size: 9px;
					color: var(--disabledColor);
					text-transform: uppercase;
					padding: 8px 10px
				}

		#app>main table.box tbody{

		}

			#app>main table.box tbody tr{
				background: var(--bg1);

				font-size: 13px;
				line-height: 1.4em;
			}

				#app>main table.box tbody tr th{
					padding: 8px 10px;
					font-weight: bold;
					color: var(--accentColor);
					text-align: left;

					font-size: 10px;
					font-weight: bold;
					text-transform: uppercase;
				}

				#app>main table.box tbody tr td{
					padding: 8px 10px;
					text-align: right;
				}

					#app>main table.box tbody tr th a,
					#app>main table.box tbody tr td a{
						display: block;
						position: relative;
					}

					#app>main table.box tbody tr th a.success,
					#app>main table.box tbody tr td a.success,
					#app>main table.box tbody tr th a.error,
					#app>main table.box tbody tr td a.error{
						padding-right: 20px;
					}

						#app>main table.box tbody tr th a.success::after,
						#app>main table.box tbody tr td a.success::after{
							color: var(--successColor);
							border-color: var(--successColor);
						}

						#app>main table.box tbody tr th a.error::after,
						#app>main table.box tbody tr td a.error::after{
							color: var(--dangerColor);
							border-color: var(--dangerColor);
						}



				#app>main table.box tbody tr th:first-child,
				#app>main table.box tbody tr td:first-child{
					width: 231px;
				}


.popover .datefield{
	background: rgba(0,0,0,0.1);
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px;
	border-radius: 5px;
}
.popover .datefield:has(>span){
	margin-top: 20px;
}

	.popover .datefield>span{
		position: absolute;
		top: -20px;
		left: 0;
		line-height: 20px;

		font-size: 10px;
		text-transform: uppercase;
		font-weight: bold;
	}

		.popover .datefield>input{
			flex: 0 0 auto;
		}
		.popover .datefield>input.dateAlwaysChecked{
			display: none;
		}

		.popover .datefield>div{
			flex: 1 1 auto;
			display: flex;
			gap: 5px;
			opacity: .5;
			pointer-events: none;
		}
		.popover .datefield>input:checked+div{
			opacity: 1;
			pointer-events: auto;
		}

			.popover .datefield>div>*{
				flex: 1 1 auto;
			}

			.popover .datefield>div>div.select.small{
				flex: 0 0 50px;
			}

			.popover .datefield>div>div.button{
				flex: 0 0 auto;
				width: fit-content;
			}

			.datefield>div>div.select,
			.datefield>div>input{
				border-color: var(--popoverColor);
				background: var(--popoverContrast);
				color: inherit;
				border-radius: 5px;
				border:none;
			}

			.datefield>div>div.select{
				position: relative;
			}

				.datefield>div>div.select>select{
					border-radius: 5px;
				}

				.datefield>div>div.select::after{
					line-height: 1em;
					top: 50%;
					transform: translateY(-50%);
					opacity: .5;
				}


.popover div#calendar{
	text-align: center;
	margin-top: 10px;
}

	.popover div#calendar .calendar-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #000000;
		color: #FFFFFF;
	}

		.popover div#calendar .calendar-title button{
			color: inherit;
			border:none;
			border-radius: 0;
		}
		.popover div#calendar .calendar-title button:first-child{
			border-right: 1px solid white;
		}
		.popover div#calendar .calendar-title button:last-child{
			border-left: 1px solid white;
		}

	.popover div#calendar table{
		width: 100%;
		border-collapse: collapse;
	}
		.popover div#calendar table tr{

		}
			.popover div#calendar table tr th{
				background: var(--disabledColor);
				color: #FFFFFF;
			}
			.popover div#calendar table tr td{

			}

				.popover div#calendar table tr td:hover>div{
					cursor: pointer;
				}

				.popover div#calendar table tr td>div{
/*					height: 45px;*/
					line-height: 30px;
				}

				.popover div#calendar table tr td.selected>div{
					background: var(--accentColor);
					color: var(--accentForeground);
				}
				.popover div#calendar table tr td.start>div{
					border-top-left-radius: 20px;
					border-bottom-left-radius: 20px;
				}
				.popover div#calendar table tr td.end>div{
					border-top-right-radius: 20px;
					border-bottom-right-radius: 20px;
				}





div.tableContainer{
	background: inherit;
}

	div.tableContainer h2{
		font-size: 10px;
		text-transform: uppercase;
		margin: 0;
		padding: 0 8px;
		font-weight: normal;
		margin-bottom: calc(-1em + -8px); /*-33px;*/

	}

	div.tableContainer table.list{
	
	}

	#app>main div.tableContainer h2+table.list>thead>tr>th:first-child{
		color: transparent;
	}

	div.tableContainer ul.buttons,
	ul.mainSubmenuButtons{
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		gap: 5px;

		background: inherit;
		padding: 10px 0;
		margin-top: -10px;

		position: sticky;
		bottom: -20px;
		padding: 4px 10px;
		margin: 0 -10px -10px -10px;
		background: inherit;
		border-top: 1px solid var(--bg3);
	}

	ul.mainSubmenuButtons{
		margin-top: 20px;
		position: static;

	}

		div.tableContainer ul.buttons>li,
		ul.mainSubmenuButtons>li{
			display: block;
			width: 100%;
		}

			div.tableContainer ul.buttons>li>a,
			ul.mainSubmenuButtons>li>a{
				display: block;

				color: var(--foreground);
				border: 1px solid var(--foreground);
				padding: 8px;
				line-height: 15px;
				text-align: center;
				text-transform: uppercase;
				font-size: 10px;
				border-radius: 5px;
			}

			div.tableContainer ul.buttons>li>a:hover,
			ul.mainSubmenuButtons>li>a:hover{
				color: var(--accentColor);
				border: 1px solid var(--accentColor);
			}

table.stats{
	display: flex;
	border-collapse: collapse;
	margin: 0 -5px;
}

	table.stats tbody{
		display: flex;
		width: 100%;
	}

		table.stats tr{
			background: var(--bg2);
			border-radius: 5px;
			padding: 8px 10px;
			margin: 5px;

			text-align: center;
			display: flex;
			flex-direction: column;

			flex: 1;
			padding-bottom: 15px;
		}

			table.stats th{
				display: block;
				font-size: 9px;
				color: var(--disabledColor);
				text-transform: uppercase;

				padding-bottom: 15px;
			}

			table.stats td{
				display: block;
				font-size: 20px;
			}

				table.stats td div.detail{
					display: inline-block;
					font-size: 12px;
					opacity: .5;
					padding-left: 1em;
				}

					table.stats td div.detail::before{
						content: "(";
					}
					table.stats td div.detail::after{
						content: ")";
					}

		table.stats tr.clickable:hover{
			cursor: pointer;
			box-shadow: inset 0 0 2px var(--accentColor);
		}

div.tableContainer+div.tableContainer{
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--bg6);
}



div.oneliner{
	display: flex;
	justify-content:space-between;
}

	div.oneliner>*{
		flex-grow: 1;
		flex-shrink: 1;
		margin-left: 7.5px !important;
		margin-right: 7.5px !important;
	}

	div.oneliner>*:first-child{
		margin-left: 0 !important;
	}

	div.oneliner>*:last-child{
		margin-right: 0 !important;
	}


































.tabParent{

}

	.tabParent .tabTab{
		
	}
	.tabParent .tabTab.active{
		
	}

	.tabParent .tabContent{
		/*max-height: 0;
		overflow: hidden;
		transition: max-height .5s;*/
		display: none;
	}
	.tabParent .tabContent.active{
		/*max-height: 1000px;*/
		display: block;
	}







































































/**
	TIMELINE
*/

#timeline{
	background: var(--bg1);
	padding: 25px 25px 75px;
	margin: -25px -25px 0 -25px;
}

	#timeline h2{
		display: block;
		color: var(--accentColor);
		font-size: 10px;
		line-height: 10px;
		font-weight: bold;
		text-transform: uppercase;

		margin: 0;
		padding: 0 0 29px 0;
	}

	#timeline ul{
		list-style: none;
		margin: 0;
		padding: 0;

		width: 100%;
		height: 1px;

		background: var(--foreground);


		display: flex;
		justify-content:space-between;
	}

		#timeline li{
			position: relative;
			text-align: center;
			flex-grow: 2;
			width: 1px;
			height: 0px;
		}

			#timeline li::before{
				content:"";
				display: block;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 10px;
				height: 10px;
				background: var(--foreground);
				border-radius: 100%;
			}

			#timeline li::after{
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height:3px;
				transform: translateY(-50%);
				background: inherit;
			}

			#timeline li>div{
				font-size: 9px;
				text-transform: uppercase;
				font-weight: bold;
				width: 90%;
				max-width: 200px;
				margin: 0 auto;
				padding-top: 15px;
			}

				#timeline li>div>span{
					color: var(--foreground);
					font-size: 13px;
					font-weight: normal;
					display: block;
				}

		#timeline li:first-child{
			flex-grow:1;
			text-align: left;
		}

			#timeline li:first-child::before{
				left: 0;
			}

			#timeline li:first-child>div{
				margin: 0 auto 0 0;
			}

		#timeline li:last-child{
			flex-grow:1;
			text-align: right;
		}

			#timeline li:last-child::before{
				left: 100%;
			}

			#timeline li:last-child>div{
				margin: 0 0 0 auto;
			}

		#timeline li.success{
			background: var(--successColor);
			color: var(--successColor);
		}

			#timeline li.success::before,
			#timeline li.success::after{
				background: inherit;

			}

		#timeline li.error{
			background: var(--dangerColor);
			color: var(--dangerColor);
		}

			#timeline li.error::before{
				background: inherit;
			}

			#timeline li.error::after{
				background: inherit;
				width: 50%;
			}

			#timeline li.error:first-child::after{
				width: 0;
			}

			#timeline li.error:last-child::after{
				width: 100%;
			}







/* detailbox */

ul.box{
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	/*padding: 15px;*/
}

	ul.box>li{
		background: var(--bg1);
		padding: 15px;
		font-size: 13px;
		border-radius: 5px;
		margin-top: 5px;
	}

	ul.box>li:first-child{
		margin-top: 0;
	}

		ul.box>li label{
			display: block;
			color: var(--accentColor);
			font-size: 10px;
			font-weight: bold;
			text-transform: uppercase;
			padding-bottom: 1em;
		}


.printableaddress .addressPreview:hover{
	cursor: pointer;
	color: var(--accentColor);
}

















/* aside stuff */

#app>main>.container>aside{
	position: absolute;
	width: 267px;
	float: left;
}

#app>main>.container>aside.ready{
	position: absolute;
	top: 0
	left:0;
	bottom: 0;
	overflow: auto;
}

#app>main>.container>#timeline+aside{
	top: 135px;
}

#app>main>.container>aside+iframe{
	float: left;
	border: none;
	width: calc(100% - 267px - 20px);
	height: 500px;
	height: calc(100vh - 80px - 200px - 10px);
	background: var(--bg1);
	border-radius: 5px;
	margin: 0;
	margin-left: 277px;
}









































































/**	
	Popup UI
**/

.popup{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-align: center;

	z-index: 100;
	background: #000000;
	background: rgba(0,0,0,0.5);

	display: none;
}
	.popup::before{
		content:"";
		display: inline-block;
		vertical-align: middle;
		width:0px;
		height:100vh;
	}

	.popup>div{
		display: inline-block;
		vertical-align: middle;
		background:var(--bg1);
		text-align: left;
		border-radius: 5px;
		max-height: 80vh;
		width:50%;
		width:calc(90% - 20px);
		max-width: 800px;
		overflow: hidden;

		z-index: 10;

		/*box-shadow:0 0 0 2px rgba(128, 128, 128, 0.5);*/
	}

		.popup>div>header{
			height: 60px;
			padding: 0 20px;
			position: relative;
			line-height: 60px;
			border-bottom:1px solid var(--bg6);
			background: inherit;
		}

			.popup>div>header>h1,
			.popup>div>header>span>h1{
				margin:0;
				padding:0;

				font-size: 17px;
				font-weight: normal;

				width: 50%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

				.popup>div>header>h1>span,
				.popup>div>header>span>h1>span{
					display: none;
				}

				.popup>div>header>span{
					display: flex;
					align-items: start;
					gap: 1em;
				}

					.popup>div>header>span>*,
					.popup>div>header>span>h1{
						flex: 0 0 auto;
						width: auto;
					}

			.popup>div>header>div{
				position: absolute;
				top:0;
				right:0;
				width:60px;
				height:60px;
				cursor: pointer;
			}

				.popup>div>header>div::before{
					content: "";
					display: block;
					position: absolute;
					top: 14px;
					left: 14px;
					width: 32px;
					height: 32px;
					border: 1px solid #FFFFFF;
					border-color: inherit;
					border-radius: 100%;
					opacity: .5;
				}
				.popup>div>header>div:hover::before{
					color: var(--accentColor);
				}

				.popup>div>header>div>span{
					display: block;
					position: absolute;
					left: 0px;
					bottom: 0;
					line-height: 19px;
					width: 60px;
					text-align: center;
					font-size: 10px;
					opacity: 0;
					pointer-events: none;
				}
				.popup>div>header>div:hover>span{
					opacity: 1;
				}

				.popup>div>header>div.icon-close:hover>span{
					display: none;
				}

			.popup>div>header>div.popupClose{
				text-align: center;
				line-height: 32px;
			}

				.popup>div>header>div.popupClose::before{
					border-color: transparent;
				}

		.popup>div>div{
			position: relative;
		}

			.popup>div>div>aside{
				position: absolute;
				top:-61px;
				right:60px;
				width:calc(100% - 60px);
				font-size: 10px;
				text-transform: uppercase;
				height: 60px;
			}

				.popup>div>div>aside::before{
					content: "";
					display: inline-block;
					height: 100%;
					width: 1px;
					vertical-align: middle;
				}

				.popup>div>div>aside>ul{
					list-style: none;
					margin:0;
					padding:10px 0;
					display: inline-block;
					vertical-align: middle;
					width: 95%;
					width: calc(100% - 5px);
					text-align: right;
				}

					.popup>div>div>aside>ul>li{
						display: inline-block;
						padding: 5px;
						opacity: .5;
					}

						.popup>div>div>aside>ul>li>*{
							display: block;
							color: inherit;
						}

					.popup>div>div>aside>ul>li.pipe{
						pointer-events: none;
					}

						.popup>div>div>aside>ul>li.pipe::before{
							content: "|";
							opacity: .5;
						}


					.popup>div>div>aside>ul>li:hover{
						color: var(--accentColor);
						opacity: 1;
					}

					.popup>div>div>aside>ul>li.active{
						/*color: var(--accentColor);*/
						opacity: 1;
						color: #FFF;
						cursor: default;
					}

			.popup>div>div>form,
			.popup>div>div>div{
				/*min-height: 300px;*/
				/*max-height: 300px;*/
				height: calc(70vh - 115px - 40px);
				padding:0 20px 20px 20px;
				overflow: auto;
			}

			.popup>div>div>div.empty{
				position: relative;
				text-align: center;
			}

				.popup>div>div>div.empty>*:first-child:last-child{
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 0;
					right: 0;
				}

			.popup>div>div>aside+form{

			}

			.popup>div>div::after{
				display: block;
				content:"";
				clear:both;
			}

		.popup>div>footer{
			position: relative;
			height: var(--footerHeight);
			/*background:var(--bg5);*/
			border-top:1px solid var(--bg6);
		}

			.popup>div>footer>a{
				
			}

			.popup>div>footer>a{
				display: inline-block;
				margin-left: 10px;
				line-height: 12px;
				padding: 8px;
				border:1px solid currentColor;
				border-radius: 5px;
				margin-top: 7px;
				opacity: .5;
			}
				.popup>div>footer>a:hover{
					opacity: 1;
				}

			.popup>div>footer>a.ok{
/*				color: var(--accentColor);*/
			}

			.popup>div>footer>a.danger{
				border-color: transparent;
			}
				.popup>div>footer>a.danger:hover{
					border-color: var(--dangerColor);
					color: var(--dangerColor);
				}

			.popup>div>footer>button{
				position: absolute;
				top: 7px;
				right: 10px;
			}

			.popup>div>footer>button+button{
				right: auto;
				left: 10px;
			}


.popup.animate{
	display: block;
	opacity: 0;
	transition: opacity .5s;
	pointer-events: none;
}

	.popup.animate>div{
		transform: translateY(-100vh);
		/*transition: transform .5s;*/
	}


.popup.animate.visible{
	opacity: 1;
	pointer-events: auto;
	transition: opacity .3s;
}

	.popup.animate.visible>div{
		transform: translateY(0);
		/*transition: transform .3s;*/
	}



.popup.larger{

}


	.popup.larger>div{
		max-width: 1000px;
	}



.popup.large{

}


	.popup.large>div{
		width: calc(100% - 20px);
		max-width: 1500px;
		max-height: 90vh;
	}




.popup.smaller{

}

	.popup.smaller>div{
		max-width: 550px;
	}










.popup.right{
	position: static;
	/*position: absolute;*/
	background: transparent;
}

.popup.right+.popup.right::before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 268px;
	background: rgba(0,0,0,0.5);
}
.popup.right+.popup.right:nth-child(3)::before{
	left: calc(1 * 268px);
}
.popup.right+.popup.right:nth-child(4)::before{
	left: calc(2 * 268px);
}
.popup.right+.popup.right:nth-child(5)::before{
	left: calc(3 * 268px);
}

	.popup.right::before{
		display: none;
	}

	.popup.right>div{
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 80%;
		height:100%;
		max-height:none;
		width: calc(100vw - 268px);
		max-width: calc(100vw - 268px);
		min-width:600px;
		border-radius: 0;

		/*box-shadow:0 0 0 2px rgba(128, 128, 128, 0.5);*/
	}

	#app>.popup.right:first-child>div{
		max-width: none;
		width: 100%;
	}

	.popup.right:nth-child(3)>div{
		width: calc(100vw - 268px * 2);
		max-width: calc(100vw - 268px * 2);
	}
	.popup.right:nth-child(4)>div{
		width: calc(100vw - 268px * 3);
		max-width: calc(100vw - 268px * 3);
	}
	.popup.right:nth-child(5)>div{
		width: calc(100vw - 268px * 4);
		max-width: calc(100vw - 268px * 4);
	}
	.popup.right:nth-child(6)>div{
		width: calc(100vw - 268px * 5);
		max-width: calc(100vw - 268px * 5);
	} 

	@media screen and (max-width:600px){
		.popup.right>div{
			width:100vw;
			min-width:100vw;
			max-width:100vw;
		}
	}

		.popup.right>div>header{
			border-bottom:1px solid var(--bg6);
			height: var(--headerHeight);
			line-height: var(--headerHeight);
		}
			.popup.right>div>header>div{
				height: var(--headerHeight);
			}
				.popup.right>div>header>div::before{
					top: 27px;
				}

				.popup.right>div>header>div>span{
					bottom: 5px;
				}

		.popup.right>div>div{
			min-height: none;
			position: absolute;
			top:calc(var(--headerHeight) + 1px);
			bottom: var(--footerHeight);
			width:100%;
			/*overflow: auto;*/
		}

		.popup.right>div>div>aside{
			top: calc((var(--headerHeight) + 1px) * -1);
			height: var(--headerHeight);
		}

/*			.popup.right>div>div>aside{
				position: absolute;
				width:100%;
				min-height: 0;
				height:45px;
				max-height: 45px;
			}
				.popup.right>div>div>aside>ul{
					padding:0 10px;
				}

					.popup.right>div>div>aside>ul>li{
						display: inline-block;
						width:auto;
						padding:0 10px;
						line-height: 45px;
					}

						.popup.right>div>div>aside>ul>li>*{
							padding:0 10px;
						}

					.popup.right>div>div>aside>ul>li.active{
						background:#FFFFFF;
					}
*/
/*			.popup.right>div>div::before{
				content:"";
				height:100%;
				display: inline-block;
				vertical-align: middle;
				width:15px;
			}*/

			.popup.right>div>div>form,
			.popup.right>div>div>div{
				/*display: inline-block;*/
				/*vertical-align: middle;*/
				/*width:calc(100% - 40px);*/
				/*min-height:0;*/
				/*padding: 0 0 20px 0;*/
				/*max-height:calc(100vh - 115px);*/
				/*max-height: none;*/
				/*overflow: visible;*/

				display: block;
				overflow: auto;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				height: 100%;
				margin: 0;
				padding: 0;

				text-align: center;

				padding-bottom: 10px;
				box-sizing: border-box;
			}

/*				.popup.right>div>div>form::before{
					content:"";
					height:80%;
					display: inline-block;
					vertical-align: middle;
					width:15px;
				}*/

				.popup.right>div>div>form>.tabContent.active,
				.popup.right>div>div>div>.tabContent.active{
					display: inline-block;
					/*vertical-align: middle;*/
					width: calc(100% - 30px);
					/*max-width: 700px;*/
					text-align: left;
				}

/*			.popup.right>div>div>aside+form{
				background: transparent;
				margin-top:45px;
				max-height:calc(100vh - 160px);
			}*/

		.popup.right>div>footer{
			position: absolute;
			bottom:0;
			right:0;
			width:100%;

			border-top: 1px solid var(--bg6);
			background: inherit;
		}

.popup.right.animate{
	display: block;
	opacity: 0;
	transition: opacity .5s;
	pointer-events: none;
}

	.popup.right.animate>div{
		transform: translateX(100%);
		/*transition: transform .5s;*/
	}


.popup.right.animate.visible{
	opacity: 1;
	pointer-events: auto;
}

	.popup.right.animate.visible>div{
		transform: translateY(0);
	}






.popup.right2{

}

	.popup.right2::before{
		display: none;
	}

	.popup.right2>div{
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 80%;
		height:100%;
		max-height:none;
		max-width:700px;
		max-width: calc(100vw - 753px);
		border-radius: 0;

		box-shadow:0 0 0 2px rgba(128, 128, 128, 0.5);
	}







.popup.bottom{

}

	.popup.bottom>div{
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		max-width: none;
		border-radius: 0;

		box-shadow:0 0 0 2px rgba(128, 128, 128, 0.5);
	}

		.popup.bottom>div>header{
			background: #FFF;
			color:#000;
		}

			.popup.bottom>div>header>h1{
				max-width: 900px;
				margin:0 auto;
			}

		.popup.bottom>div>div{
			max-height: 500px;
			max-height: calc(80vh - 115px);
			overflow: auto;
		}

			.popup.bottom>div>div>form,
			.popup.bottom>div>div>div{
				max-width: 900px;
				margin:0 auto;
				min-height: none;
				max-height: none;
				overflow: visible;
			}



.popup.bottom.animate{
	display: block;
	opacity: 0;
	transition: opacity .5s;
	pointer-events: none;
}

	.popup.bottom.animate>div{
		transform: translateY(100%);
		transition: transform .5s;
	}


.popup.bottom.animate.visible{
	opacity: 1;
	pointer-events: auto;
}

	.popup.bottom.animate.visible>div{
		transform: translateY(0);
	}
















.popup.popover{
	background:rgba(0,0,0,0.2);
}

	.popup.popover::before{
		display: none;
	}

	.popup.popover>div{
		max-width: 450px;
		position: absolute;
		top:50%;
		left:50%;
		overflow: visible;

		/*background: var(--bg6);*/
		background: var(--popoverColor);
		color: var(--popoverForeground);

		border-radius: 5px;
		/*box-shadow:0 0 0 2px rgba(128, 128, 128, 0.5);*/
	}

		.popup.popover>div::after{
			content:"";
			display: block;
			background:inherit;
			position: absolute;
			top:50%;
			right:0;
			width:20px;
			height:20px;
			transform: translate(50%, -50%) rotate(45deg);
			border-bottom-left-radius: 100%;
			z-index: -1;
		}

		.popup.popover>div>header{
			height:69px;
			line-height: 69px;
			border-bottom: 1px solid var(--popoverContrast);

			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
		}

			.popup>div>header>h1,
			.popup>div>header>span>h1{
				width: 40%;
			}

				.popup>div>header>h1>span,
				.popup>div>header>span>h1>span{
					opacity: .5;
				}

			.popup.popover>div>header>div{
				height:69px;
			}

				.popup.popover>div>header>div::before{
					top:18px;
				}

				.popup.popover>div>header>div>span{
					line-height: 12px;
					bottom: 5px;
				}

			.popup>div h2{
				/*text-align: center;*/
				margin: 30px -30px 0 -30px;
				padding: 5px 30px;

				background: var(--bg1);
				/*
				background-image: linear-gradient(to bottom, var(--bg2), var(--bg1));
				background-size: 100% 15px;
				background-repeat: no-repeat;
				*/

				text-transform: uppercase;
				font-size: 14px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: normal;
				color: var(--foreground); /*var(--accentColor);*/

				position: sticky;
				top: 0px;
				z-index: 2;
			}

			.popup>div h2+*{
				margin-top: 10px;
			}

			.popup>div .tabContent>div:first-child>h2:first-child,
			.popup>div .tabContent>h2:first-child{
				margin-top: 0;
			}


		.popup.popover>div>div{
			min-height: 100px;
			max-height: 400px;
			/*overflow: auto;*/
		}

			.popup.popover>div>div>aside{
				height: 69px;
				top: -70px;
				width: 65%;
			}
				.popup.popover>div>div>aside>ul{
					padding: 0;
				}

					.popup>div>div>aside>ul>li{

					}

					.popup>div>div>aside>ul>li.active{
						color: var(--accentColor);
					}

					.popup>div>div>aside>ul>li.tabTab+li.btn,
					.popup>div>div>aside>ul>li.btn.separator{
						padding-left: 35px;
					}

						.popup>div>div>aside>ul>li.tabTab+li.btn::before,
						.popup>div>div>aside>ul>li.btn.separator::before{
							display: block;
							content: "";
							/*background: red;*/
							width: 1px;
							height: var(--headerHeight);
							position: absolute;
							/*top: calc((var(--headerHeight) - 30px) / -2);*/
							top: -24px;
							left: 15px;
							background: var(--bg6);
						}

					.popup>div>div>aside>ul>li.btn{
						vertical-align: middle;
						position: relative;
					}

						.popup>div>div>aside>ul>li.btn>a[class^="icon-"], 
						.popup>div>div>aside>ul>li.btn>a[class*=" icon-"] {
							font-size: 0;
							width: 30px;
							height: 30px;
							border: 1px solid currentColor;
							border-radius: 100%;
							text-align: center;
							line-height: 30px;
							position: relative;
							/*box-sizing: border-box;*/
						}

							.popup>div>div>aside>ul>li.btn>a[class^="icon-"]::before, 
							.popup>div>div>aside>ul>li.btn>a[class*=" icon-"]::before {
								font-size: 15px;
							}

							.popup>div>div>aside>ul>li.btn>a.smaller[class^="icon-"]::before, 
							.popup>div>div>aside>ul>li.btn>a.smaller[class*=" icon-"]::before {
								font-size: 11px;
							}


							.popup>div>div>aside>ul>li.btn>a>span{
								display: block;
								position: absolute;
								left: -70px;
								bottom: -20px;
								line-height: 19px;
								width: 170px;
								text-align: center;
								font-size: 10px;
								opacity: 0;
								pointer-events: none;
							}

							.popup>div>div>aside>ul>li.btn>a:hover>span{
								opacity: 1;
								color: var(--foreground);
							}



			.popup.popover>div>div>form,
			.popup.popover>div>div>div{
				padding: 20px;
				/*height: auto;*/
				max-height: 400px;
				/*max-height: calc(70vh - 70px - 50px);*/
				/*height: 100%;*/
				box-sizing: border-box;
				overflow: auto;
			}

				.popup.popover>div>div label>span span.lang, 
				.popup.popover>div>div .label>span span.lang{
					background: var(--popoverContrast);
					right: 5px;
				}

				.popup.popover .fieldGroup>*.half{
					width: 100%;
				}

					.popup.popover .fieldGroup>*.half input,
					.popup.popover .fieldGroup>*.half .input, 
					.popup.popover .fieldGroup>*.half textarea, 
					.popup.popover .fieldGroup>*.half .wysiwyg,
					.popup.popover .fieldGroup>*.half+*.half input, 
					.popup.popover .fieldGroup>*.half+*.half .input, 
					.popup.popover .fieldGroup>*.half+*.half textarea, 
					.popup.popover .fieldGroup>*.half+*.half .wysiwyg{
						border-color: var(--popoverColor);
						border-radius: 0;
						width: calc(100% - 36px);
						border: 0;
					}

					.popup.popover .fieldGroup>*.half>span{
						
					}

						.popup.popover .fieldGroup>*.half>span span.lang{
							padding-left: 0;
							padding-right: 0;
							width: 30px;
							text-align: center;
							border-radius: 0;
							top: 100%;
							line-height: 29px;
							height: 29px;
							right: 5px;
						}

					.popup.popover .fieldGroup>*.half:first-child input, 
					.popup.popover .fieldGroup>*.half:first-child .input, 
					.popup.popover .fieldGroup>*.half:first-child textarea, 
					.popup.popover .fieldGroup>*.half:first-child .wysiwyg{
						border-top-left-radius: 5px;
					}

					.popup.popover .fieldGroup>*.half:first-child>span span.lang{
						border-top-right-radius: 5px;
					}

					.popup.popover .fieldGroup>*.half+.half:last-child input, 
					.popup.popover .fieldGroup>*.half+.half:last-child .input, 
					.popup.popover .fieldGroup>*.half+.half:last-child textarea, 
					.popup.popover .fieldGroup>*.half+.half:last-child .wysiwyg{
						border-bottom-left-radius: 5px;
					}

					.popup.popover .fieldGroup>*.half+.half:last-child>span span.lang{
						border-bottom-right-radius: 5px;
					}

				.popup.popover .fieldGroup>*.half+.half{
					padding-top: 0;
					margin-top: 1px;
				}

					.popup.popover .fieldGroup>*.half+.half>span{
						top: 0;
						height: 0;
					}

				.popup.popover fieldset{
					background: transparent;
					box-shadow: inset 0 0 0 2px var(--popoverContrast);
				}

				.popup.popover label>input, 
				.popup.popover label>.input, 
				.popup.popover label>textarea, 
				.popup.popover label>div.wysiwyg, 
				.popup.popover label>div.select, 
				.popup.popover label>div.popoverLauncher, 
				.popup.popover label>ul.img, 
				.popup.popover .label>ul.img, 
				.popup.popover .label>div.wysiwyg, 
				.popup.popover #moreVidContainer>input,
				.popup.popover #moreVidContainer>.input{
					border-color: var(--popoverColor);
					background: var(--popoverContrast);
					color: inherit;
					border-radius: 5px;
				}

				.popup.popover label>textarea{
					display: block;
					height: 50px;
				}

				.popup.popover .fieldGroup>*.half>textarea+span span.lang{
					height: 44px;
					line-height: 44px;
				}

				.popup.popover label>div.select>select{
					border-radius: 5px;
				} 


	.popup.popover label:has(>div.unit),
	.popup.popover label:has(>div.unit){
		display: flex;
	}

		.popup.popover label:has(>div.unit)>input,
		.popup.popover .label:has(>div.unit)>input,
		.popup.popover .halfGroup label:has(>div.unit).half>input,
		.popup.popover .halfGroup .label:has(>div.unit).half>input{
/*			flex: 1 1 auto;
			width: auto;
			min-width: auto;

			border-top-right-radius: 0;
			border-bottom-right-radius: 0;*/
		}

		.popup.popover label>div.unit,
		.popup.popover .label>div.unit,
		.popup.popover .halfGroup label>div.unit,
		.popup.popover .halfGroup .label>div.unit{
/*			flex: 0 0 auto;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			background: var(--bg5);
			min-height: 35px;

			padding: 0 5px;
			display: flex;
			align-items: center;

			width: auto;
			min-width: 0;
			max-width: auto;*/

			background: var(--popoverContrast);
			border-color: var(--popoverColor);
		}


				.popup.popover>div>div ul.filters{
					list-style: none;
					display: block;
					margin: 0 0 0 -8px;
					padding: 0;
					float: left;
					font-size: 0;
				}

					.popup.popover>div>div ul.filters>li{
						display: inline-block;
						/*margin-left: 20px;*/
						padding: 8px;
						border-radius: 5px;
						cursor: pointer;
						font-size: 10px;
						text-transform: uppercase;
					}

					.popup.popover>div>div ul.filters>li:hover{
						background: var(--popoverContrast);
					}

					.popup.popover>div>div ul.filters>li.active{
						color: var(--accentColor);
					}



				.popup.popover button.popoverAddHelperBtn,
				.popup.popover button.popoverAddCloseBtn{
					border: none;
					display: inline-block;
					width: auto;
					float: right;
					color: var(--popoverForeground);

					align-self: end;
				}


				.popup.popover button.popoverAddCloseBtn+br{
					display: block;
					clear: both;
				}




				.popup.popover>div>div input.search{
					clear: both;
					display: block;
					border: 1px solid #000;
					border-radius: 5px;
					width: 100%;
					box-sizing: border-box;
					padding: 8px;
					margin-bottom: 10px;

					position: sticky;
					top: -20px;
					z-index: 2;
				}

				.popup.popover>div>div div.results{
					
				}
				.popup.popover>div>div div.results.loading{
					opacity: .5;
					pointer-events: none;
				}





				.popup.popover>div>div ul.multilist{
					clear: both;
					background: transparent;
					margin: 0;
					padding: 0;
					border: 0;
				}
				.popup.popover>div>div ul.multilist#currentSelection{
					margin-bottom: 10px;
/*					position: sticky;*/
/*					top: -20px;*/
/*					background: var(--popoverColor);*/
					padding: 10px;
					margin: 0 -10px;
/*					z-index: 2;*/
				}
				.popup.popover>div>div ul.multilist#currentSelection:empty{
					display: none;
				}

				.popup.popover>div>div ul.multilist#currentSelection::before{
					content: "Sélection actuelle";

					line-height: 15px;
					font-size: 10px;
					text-transform: uppercase;
					color: var(--accentColor);
					font-weight: bold;
					line-height: 15px;
					padding-top: 15px;
				}

					.popup.popover>div>div ul.multilist li.noFilter:not(.title){
						display: none;
					}

					.popup.popover>div>div h3,
					.popup.popover>div>div ul.multilist li.title{
						font-size: 10px;
						text-transform: uppercase;
						color: var(--accentColor);
						font-weight: bold;
						line-height: 15px;
						padding-top: 15px;
					}

					.popup.popover>div>div ul.multilist li:first-child{
						margin-top: 0;
					}

						.popup.popover>div>div ul.multilist li>label{
							padding: 0;
						}

							.popup.popover>div>div ul.multilist li>label>input{
								display: none;
							}

							.popup.popover>div>div ul.multilist li>label>span{
								position: static;
								background: var(--popoverContrast);
								color: var(--popoverForeground);
								border-radius: 5px;
								padding: 10px 20px;
								text-transform: none;
								font-weight: normal;
								/*opacity: .5;*/

								display: flex;
								justify-content: space-between;
								flex-wrap: wrap;
							}

							.popup.popover>div>div ul.multilist li>label>span>span{
								display: flex;
								align-items: center;
								margin-top: -10px;
								margin-bottom: -10px;
							}

							.popup.popover>div>div ul.multilist li>label>span>span.top{
								font-size: .8em;
								text-transform: uppercase;
								font-weight: 600;
								flex: 0 0 100%;
								padding-bottom:.5em;

								display: flex;
								justify-content: space-between;

							}

							.popup.popover>div>div ul.multilist li>label>span>span.date{
								font-size: .8em;
								white-space: nowrap;
							}

								.popup.popover>div>div ul.multilist li>label>span>img{
									display: inline-block;
									vertical-align: middle;
									height: 30px;
									width: 30px;
									/*width: auto;*/
									margin: -5px 5px -5px -15px;
									object-fit: contain;

									justify-self: flex-start;
								}

								.popup.popover>div>div ul.multilist li>label>span>span>img{
									height: 30px;
									width: 30px;
									/*width: auto;*/
									margin-right: 5px;
									margin-left: -10px;
									object-fit: contain;
								}

								.popup.popover>div>div ul.multilist li>label>span>span.info{
									opacity: .5;
								}

							.popup.popover>div>div ul.multilist li>label>span:hover{
								cursor: pointer;
								/*opacity: 1;*/
							}

							.popup.popover>div>div ul.multilist li>label>input:checked+span{
								box-shadow: inset 0 0 0 2px var(--accentColor);
								font-weight: bold;
								opacity: 1;
							}

							.popup.popover>div>div ul.multilist ul{
								padding-left: 20px;
								list-style: none;
								margin: 0;
								border-left: 1px dashed var(--popoverContrast)
							}

								.popup.popover>div>div ul.multilist ul li{
									position: relative;
								}

								.popup.popover>div>div ul.multilist ul li:first-child{
									margin-top: 5px;
								}

									.popup.popover>div>div ul.multilist ul li span{
										border-bottom-left-radius: 15px;
									}

									.popup.popover>div>div ul.multilist ul li::before{
										content: "";
										width: 10px;
										/*height: 50%;*/
										display: block;
										position: absolute;
										top: 20px;
										bottom: 0;
										left: -20px;
										border-top: 1px dashed var(--popoverContrast)
									}


								.popup.popover>div>div ul.multilist ul li:last-child{
									position: relative;
								}

									.popup.popover>div>div ul.multilist ul li:last-child::before{
										left: -21px;
										background: var(--popoverColor);
									}

				.popup.popover>div>div .pager{
					position: sticky;
					bottom: -20px;
					background: var(--popoverColor);

					height: 40px;
					line-height: 40px;
					text-align: center;
				}

					.popup.popover>div>div .pager>*{
						opacity: .5;
					}

					.popup.popover>div>div .pager .prev{
						position: absolute;
						left: 0;
					}
						.popup.popover>div>div .pager .prev::before{
							content: "<";
							display: inline-block;
							padding-right: .5em;
						}

					.popup.popover>div>div .pager .next{
						position: absolute;
						right: 0;
					}
						.popup.popover>div>div .pager .next::after{
							content: ">";
							display: inline-block;
							padding-left: .5em;
						}

			.popup.popover>div>div>aside+form,
			.popup.popover>div>div>aside+div{
				
			}

				.popup.popover>div>div>aside+form>div{
					height: 100%;
					display: flex;
					flex-direction: column;
				}

				.popup.popover>div>div>aside+form>div.tabContent{
					display: none;
				}
				.popup.popover>div>div>aside+form>div.tabContent.active{
					display: flex;
				}

					.popup.popover>div>div>aside+form>div>*{
						flex: 0 0 auto;
					}
					.popup.popover>div>div>aside+form>div>.results:last-child{
						flex: 1 1 auto;
						display: flex;
						flex-direction: column;
					}

						.popup.popover>div>div>aside+form>div>.results:last-child>*{
							flex: 1 1 auto;
						}
						.popup.popover>div>div>aside+form>div>.results:last-child>.pager{
							flex: 0 0 auto;
						}

			.popup.popover>div>div>form.add{
				display: none;
			}
			.popup.popover>div>div.add>form{
				display: none;
			}
			.popup.popover>div>div.add>form.add{
				display: block;
			}


		.popup.popover>div>footer{
			height: 49px;
			border-top: 1px solid var(--popoverContrast);

			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
		}

			.popup.popover>div>footer>button.submit{
				background-color: var(--successColor);
				border: none;
				color: #FFF;
			}

			.popup.popover>div>footer>button.clearForm{
				background-color: var(--dangerColor);
				border: none;
				color: #FFF;				
			}

	.popup.popover.larger>div{
		max-width: 600px;
	}





.popup.popover.animate{
	display: block;
	opacity: 0;
	transition: opacity .5s;
	pointer-events: none;
}

	.popup.popover.animate>div{
		/*transform-origin: 100% 50%;*/
		/*transform-origin: calc(100% + 17px) 50%;*/
		transform-origin: 0 0;
		transform: scale(0) translate(-100%, -50%) translateX(-17px);
		/*transition: transform .5s;*/
	}


.popup.popover.animate.visible{
	opacity: 1;
	pointer-events: auto;
}

	.popup.popover.animate.visible>div{
		transform: scale(1) translate(-100%, -50%) translateX(-17px);
	}






.popup.popover.bubblePosTop{

}

	.popup.popover.bubblePosTop>div{

	}

		.popup.popover.bubblePosTop>div::after{
			top:60px;
		}

.popup.popover.bubblePosTop.animate{

}

	.popup.popover.bubblePosTop.animate>div{
		/*transform-origin: 100% 60px;*/
		/*transform-origin: calc(100% + 17px) 60px;*/
		transform: scale(0) translate(-100%, -60px) translateX(-17px);
		/*transition: transform .5s;*/
	}

.popup.popover.bubblePosTop.visible{

}

	.popup.popover.bubblePosTop.visible>div{
		transform: scale(1) translate(-100%, -60px) translateX(-17px);
	}








.popup.popover.bubblePosBottom{

}

	.popup.popover.bubblePosBottom>div{

	}

		.popup.popover.bubblePosBottom>div::after{
			top: auto;
			bottom:60px;
			transform: translate(50%, 50%) rotate(45deg);
		}

.popup.popover.bubblePosBottom.animate{

}

	.popup.popover.bubblePosBottom.animate>div{
		/*transform-origin: 100% 60px;*/
		/*transform-origin: calc(100% + 17px) 60px;*/
		transform: scale(0) translateY(60px) translate(-100%, -100%) translateX(-17px);
		/*transition: transform .5s;*/
	}

.popup.popover.bubblePosBottom.visible{

}

	.popup.popover.bubblePosBottom.visible>div{
		transform: scale(1) translateY(60px) translate(-100%, -100%) translateX(-17px);
	}












.popup.popover.bubblePosRight{

}

	.popup.popover.bubblePosRight>div{

	}

		.popup.popover.bubblePosRight>div::after{
			right:auto;
			left:0;
			transform: translate(-50%, -50%) rotate(225deg);
		}

.popup.popover.bubblePosRight.animate{

}

	.popup.popover.bubblePosRight.animate>div{
		transform: scale(0) translate(0%, -50%) translateX(17px);
	}

.popup.popover.bubblePosRight.visible{

}

	.popup.popover.bubblePosRight.visible>div{
		transform: scale(1) translate(0%, -50%) translateX(17px);
	}





.popup.popover.bubblePosRight.bubblePosTop{

}

	.popup.popover.bubblePosRight.bubblePosTop>div{

	}

		.popup.popover.bubblePosRight.bubblePosTop>div::after{

		}

.popup.popover.bubblePosRight.bubblePosTop.animate{

}

	.popup.popover.bubblePosRight.bubblePosTop.animate>div{
		transform: scale(0) translate(0%, -60px) translateX(17px);
	}

.popup.popover.bubblePosRight.bubblePosTop.visible{

}

	.popup.popover.bubblePosRight.bubblePosTop.visible>div{
		transform: scale(1) translate(0%, -60px) translateX(17px);
	}







.popup.popover.bubblePosRight.bubblePosBottom{

}

	.popup.popover.bubblePosRight.bubblePosBottom>div{

	}

		.popup.popover.bubblePosRight.bubblePosBottom>div::after{
			transform: translate(-50%, 50%) rotate(225deg)
		}

.popup.popover.bubblePosRight.bubblePosBottom.animate{

}

	.popup.popover.bubblePosRight.bubblePosBottom.animate>div{
		transform: scale(0) translateY(60px) translate(0%, -100%) translateX(17px);
	}

.popup.popover.bubblePosRight.bubblePosBottom.visible{

}

	.popup.popover.bubblePosRight.bubblePosBottom.visible>div{
		transform: scale(1) translateY(60px) translate(0%, -100%) translateX(17px);
	}


	.popup.popover>div form *.half{
		min-width: 0;
		width: calc(50% - 10px);
		float: left;
	}




	.popoverAddHelperBtn,
	.popoverAddCloseBtn{
		width: 100%;
		margin-bottom: 5px;
	}












#colorPicker_form{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

	#colorPicker_form label{
		color: var(--accentColor);
		width: 50px;
		display: inline-block;
		vertical-align: bottom;
		padding: 0;
	}

	#colorPicker_form input{
		display: inline-block;
		vertical-align: bottom;
		width: 100px;

		-webkit-user-select: initial;
		-moz-user-select: initial;
		-ms-user-select: initial;
		user-select: initial;
	}


	#colorPicker_form .colorPicker_restorer{
		
	}
	#colorPicker_form .colorPicker_restorer:hover{
		box-shadow: inset 0 0 0 2px #000000, inset 0 0 0 3px #FFFFFF;
		cursor: pointer;
	}

	#colorPicker{
		height: 175px;
		width: 100%;
		position: relative;
	}

		#colorPicker>*{
			border-radius: 5px;
			position: relative;
			height: 100%;
		}

			#colorPicker .knob{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 13px;
				height: 13px;
				border: 2px solid white;
				border-radius: 100%;
				box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
				z-index: 2;
				pointer-events: none;
				background: #FF0000;
			}

		#colorPicker_hue{
			width: 38px;
			margin-left: -15px;
			/*margin-right: 15px;*/
			float: left;
		}

			#colorPicker_hue::before{
				content: "";
				display: block;
				width: 8px;
				height: 100%;
				margin: 0 auto;

				background-image: linear-gradient(to bottom, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF, #FF0000);
				border-radius: 5px;
			}

			#colorPicker_hue>.knob{
				top: 0;
			}

		#colorPicker_saturationLuminance{
			margin-left: 23px;
			height: 100%;
			width: calc(100% - 23px - 65px);
			background: #FF0000;
		}

			#colorPicker_saturationLuminance::before,
			#colorPicker_saturationLuminance::after{
				content: "";
				position: absolute;
				top: 2px;
				right: 2px;
				bottom: 2px;
				left: 2px;
				/*width: 100%;*/
				/*height: 100%;*/
				border-radius: 3px;
			}

			#colorPicker_saturationLuminance::before{
				/*background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0));*/
				background: linear-gradient(to right, rgb(127, 127, 127), rgba(127, 127, 127, 0));
			}

			#colorPicker_saturationLuminance::after{
				/*background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);*/
				background: linear-gradient(to bottom, rgb(255, 255, 255) 0, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, #000000 100%);
			}

			#colorPicker_saturationLuminance>.knob{
				left: 100%;
			}

		#colorPicker_preview{
			width: 50px;
			position: absolute;
			top: 0;
			right: 0;
			background: #DDDDDD;

			background-image:
			linear-gradient(45deg, #888 25%, transparent 25%),
			linear-gradient(45deg, transparent 75%, #888 75%),
			linear-gradient(45deg, transparent 75%, #888 75%),
			linear-gradient(45deg, #888 25%, transparent 25%);


			background-size:10px 10px;
			background-position:0 0, 0 0, -5px -5px, 5px 5px;
		}

			#colorPicker_preview>*{
				width: 100%;
				height: 50%;
			}

			#colorPicker_currentColor{
				border-radius: 5px 5px 0 0;
			}

			#colorPicker_prevColor{
				border-radius: 0 0 5px 5px;
			}

	#colorPicker_form #color_list{
		list-style: none;
		margin: 0 -5px -5px 0;
		padding: 0;
		display: block;
	}

		#colorPicker_form #color_list>li{
			display: inline-block;
			width: 40px;
			height: 30px;
			margin: 0 5px 5px 0;
		}






/**	
	Forms
**/
form{

}

	form label,
	form .label,
	form .infos,
	form .warning{
		display: block;
		padding-top:40px;
		position: relative;
		clear:both;
	}

	form .counter{
		position: absolute;
		bottom: 0;
		right: 0;
		width: auto !important;
		min-width: 0 !important;
		line-height: 1em;
		min-height: 1em;

		pointer-events: none;
		background: var(--bg3);
		padding: .25em .5em;
		border-radius: 5px 0 0 0;
		font-size: 10px;

		opacity: .5;
	}

	form .autocount:focus+.counter{
		opacity: 1;
		background: var(--accentColor);
		color: #000000;
	}

	form .autocount:focus+.counter.d{
		background: var(--dangerColor);
	}
	form .autocount:focus+.counter.w{
		background: var(--warningColor);
	}



	form .infos{
/*		color: var(--accentColor);*/
/*		padding-top:20px;*/
		background: var(--bg2);
		margin-top: 20px;
		padding: 10px;
		border-radius: 5px;
	}
	.popup.popover form .infos{
		border: 2px solid var(--popoverContrast);
		background: transparent;
		color: #000000;
	}

	form .warning{
		background: var(--dangerColor);
		margin-top: 20px;
		padding: 10px;
		border-radius: 5px;
	}

		.popup>div form hr{
			margin: 0;
			height: 21px;
			/*background-image: linear-gradient(to bottom, var(--bg1) 20px, var(--accentColor) 20px);*/
			background-image: linear-gradient(to bottom, var(--bg1) 20px, transparent 20px);
		}

		form label>span,
		form .label>span{
			position: absolute;
			top:20px;
			left:0;
			right: 0;
			line-height: 20px;

			font-size: 10px;
			text-transform: uppercase;
			font-weight: bold;
			color: var(--accentColor);
		}

			form label>span span.lang,
			form .label>span span.lang{
				position: absolute;
				right: 0;
				bottom: 0;
				background:var(--bg3);
				color:var(--accentColor);
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				padding: 3px 10px;
				line-height: 15px;
			}

			form div.fieldGroup>label:first-child>span span.lang,
			form div.fieldGroup>.label:first-child>span span.lang{
				right: 2px;
			}
			/* hide that span if only one lang */
			form div.fieldGroup>label:first-child:last-child>span span.lang,
			form div.fieldGroup>.label:first-child:last-child>span span.lang{
				display: none;
			}


		form label>input,
		form label>.input,
		form label>textarea,
		form label>div.wysiwyg,
		form label>div.select,
		form label>div.popoverLauncher,
		form label>ul.img,
		form .label>ul.img,
/*		form label>ul.bigRadio,
		form .label>ul.bigRadio,*/
		form .label>div.wysiwyg,
		form #moreVidContainer>input{
			width:100%;
			border:1px solid var(--bg5);
			background:var(--bg5);
			color:var(--foreground);

			border-radius: 0;
			-webkit-appearance:none;
			height:35px;
			padding:0 10px;
			box-sizing: border-box;

			border-radius: 5px;
		}

		form label>.input{
			background: transparent;
			display: flex;
			align-items: center;
			min-height: 35px;
			height: auto;
			padding: 5px 10px;
		}

		form label>.input.noCaps{
			text-transform: none;
		}

		form label>input:last-child,
		form label>.input:last-child,
		form label>textarea:last-child,
		form label>div.wysiwyg:last-child,
		form label>div.select:last-child,
		form label>div.popoverLauncher:last-child,
		form label>ul.img:last-child,
		form .label>ul.img:last-child,
/*		form label>ul.bigRadio:last-child,
		form .label>ul.bigRadio:last-child,*/
		form .label>div.wysiwyg:last-child,
		form #moreVidContainer>input:last-child{
			margin-top: -40px;
		}

		form .label>div.wysiwyg,
		form label>div.wysiwyg{
			height:auto;
			padding:0;
			background:var(--bg5);
			color:var(--foreground);
		}
		form .label>div.wysiwyg+textarea,
		form label>div.wysiwyg+textarea{
			display: none;
		}

/*

			form label>div.wysiwyg>.ql-editor,
			form .label>div.wysiwyg>.ql-editor{
				padding:10px;
				min-height: 75px;
				max-height: 300px;
				overflow: auto;
			}

			form label>div.wysiwyg.autogrow>.ql-editor,
			form .label>div.wysiwyg.autogrow>.ql-editor{
				max-height: none;
				overflow: visible;
			}


				form label>div.wysiwyg>.ql-editor span.customLink,
				form .label>div.wysiwyg>.ql-editor span.customLink{
					text-decoration: underline;
					cursor: pointer;
				}

				form label>div.wysiwyg>.ql-editor span.customNote,
				form .label>div.wysiwyg>.ql-editor span.customNote{
					border-bottom: 1px dashed;
					cursor: pointer;
				}


				form label>div.wysiwyg>.ql-editor span.customLink:hover,
				form .label>div.wysiwyg>.ql-editor span.customLink:hover,
				form label>div.wysiwyg>.ql-editor span.customNote:hover,
				form .label>div.wysiwyg>.ql-editor span.customNote:hover{
					color: var(--accentColor);
				}

			form label>div.wysiwyg>.ql-tooltip,
			form .label>div.wysiwyg>.ql-tooltip{
				z-index: 2;
			}

*/

		form label>textarea{
			padding:10px;
			height:170px;
			resize:none;
			line-height: 1.25em;

			height: 158px;
			height: calc(10em + 20px);
		}

		form label>textarea.short{
			height: 56px;
			height: calc(2.5em + 20px);
		}

		form label>div.select{
			padding: 0;
			position: relative;
		}

			form label>div.select>select,
			.datefield div.select>select{
				border:0;
				margin: 0;
				padding:0 10px;
				display: block;
				-webkit-appearance:none;
				width:100%;
				height:100%;
				border-radius: 0;

				background: inherit;
				color: inherit;
			}

			form label>div.select::after,
			.datefield div.select::after{
				position: absolute;
				top:0;
				right:5px;
				pointer-events: none;
				content:"▿";
				display: block;
				line-height: 35px;
			}

		form label>ul.bigRadio,
		form .label>ul.bigRadio{
			list-style:none;
			margin:0 -5px;
			padding:0;
			display: block;	
			height:auto;
			border: 0;
			/*text-align: center;*/

			/*background: var(--bg3);*/
			/*border-radius: 5px;*/
		}

			form label>ul.bigRadio>li,
			form .label>ul.bigRadio>li{
				display: inline-block;
				margin:5px;
				padding:0;
				width:100px;
				height:100px;
			}

				form label>ul.bigRadio>li>label,
				form .label>ul.bigRadio>li>label{
					display: block;
					width:100%;
					height:100%;
					position:relative;
					margin:0;
					padding:0;
				}

					form label>ul.bigRadio>li>label>input,
					form .label>ul.bigRadio>li>label>input{
						opacity: 0;
						width: 1px;
						height: 1px;
						position: absolute;
					}

					form label>ul.bigRadio>li>label>span,
					form .label>ul.bigRadio>li>label>span{
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						line-height: 35px;
						padding-top: 65px;
						border-radius: 5px;

						font-size: 10px;
						font-weight: bold;
						text-transform: uppercase;
						text-align: center;

						background: var(--bg5);
						color: var(--accentForeground);
					}

					form label>ul.bigRadio>li>label>span:hover,
					form .label>ul.bigRadio>li>label>span:hover{
						cursor: pointer;
						box-shadow: inset 0 0 0 2px var(--accentColor);
					}


						form label>ul.bigRadio>li>label>span::before,
						form .label>ul.bigRadio>li>label>span::before{
							content:"";
							position: absolute;
							top:35px;
							left:50%;

							width:30px;
							height:30px;
							/*border:2px solid var(--bg3);*/
							font-size: 30px;
							border-color: inherit;
							border-radius: 100%;
							transform: translate(-50%, -50%);
						}


					form label>ul.bigRadio>li>label>input:checked+span,
					form .label>ul.bigRadio>li>label>input:checked+span{
						background:var(--accentColor);
						color:var(--accentForeground);
					}

		form label>div.popoverLauncher{
			padding: 0;
			position: relative;

			display: flex;
			padding: 0 27px 0 0;
			overflow: hidden;
		}

			form label>div.popoverLauncher>*{
				display: block;
				/*width: 50%;*/
				height: 100%;
				/*float: left;*/
				box-sizing: border-box;
			}

			form label>div.popoverLauncher>input{
				display: none;
			}

			form label>div.popoverLauncher>div.tool{
				flex: 0 0 30px;
				padding: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				border-right: 1px solid var(--bg2);
			}
			.popover form label>div.popoverLauncher>div.tool{
				border-color: #FFF;
			}
			form label>div.popoverLauncher>div.tool:hover{
				cursor: pointer;
				background: var(--accentColor);
			}

			form label>div.popoverLauncher>div{
				/*background: #FFFFFF;
				color: #000;*/
				padding: 0 10px;
				/*line-height: 33px;*/
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				flex: auto;
			}
				form label>div.popoverLauncher>div>div.colorPreview{
					--color:#000;
					display: inline-block;
/*					width: 2em;*/
/*					height: 1em;*/
					width:29px;
					height:29px;
					margin-right: .5em;
					background: var(--color);
					border:1px solid currentColor;
					vertical-align: middle;
					margin-left: -7px;
					box-sizing: border-box;
				}


			form label>div.popoverLauncher>div.delete{
				padding: 0;
				flex: 20px 0 0;
				font-size: 0;

				display: flex;
				justify-content: center;
				align-items: center;

				opacity: .25;
			}
				form label>div.popoverLauncher>div.delete::before{
					font-size: 15px;
					display: block;
					width: 19px;
					text-align: center;
					line-height: 19px;
					border-radius: 100%;
				}
			form label>div.popoverLauncher>div.delete:hover{
				opacity: 1;
				cursor: pointer;
			}
				form label>div.popoverLauncher>div.delete:hover::before{
					background: var(--dangerColor);
					color: #000000;
				}

			form label>div.popoverLauncher>div:empty+.delete{
				display: none;
			}

				form label>div.popoverLauncher>div img{
					display: inline-block;
					/*width: auto;*/
					height: 29px;
					width: 29px;
					vertical-align: middle;
					margin-left: -7px;

					object-fit: contain;
				}

				form label>div.popoverLauncher>div img+span{
					display: inline-block;
					padding-left: 5px;
					line-height: 1em;
					vertical-align: middle;

					white-space: nowrap;
					text-overflow: ellipsis;
					max-width: calc(100% - 40px);
					overflow: hidden;
				}

				form label>div.popoverLauncher>div::after{
					content: "";
					display: inline-block;
					vertical-align: middle;
					width: 1px;
					height: 100%;
				}


				form label>div.popoverLauncher>div a.editPopup{
					display: inline-block;
/*					float: right;*/
					width: 1em;
					height: 1em;
					overflow: hidden;
/*					background: fuchsia;*/
					vertical-align: middle;
					margin-left: .5em;
					position: relative;

					text-indent: -1000px;
/*					font-size: 0;*/
					color:transparent;
					opacity: .5;
				}
				form label>div.popoverLauncher>div a.editPopup:hover{
					opacity: 1;
				}

					form label>div.popoverLauncher>div a.editPopup::before{
						content:"\e90d";

						display: block;
						justify-content: center;
						align-items: center;

						text-indent: 0;
						color:#FFFFFF;
						font-family: 'icomoon' !important;
						font-size:1em;
					}


			form label>div.popoverLauncher::after{
				position: absolute;
				pointer-events: none;
				content:"⋯";
				display: block;

				width:27px;
				height:27px;
				top:4px;
				right:4px;
				line-height: 27px;
				text-align: center;
				border-radius: 100%;
				right: 0;
			}

			form label>div.popoverLauncher:hover::after,
			form label>div.popoverLauncher.focus::after{
				/*background:var(--accentColor);*/
				color:var(--accentColor);
			}

		form label>ul.img,
		form .label>ul.img{
			display: block;
			list-style: none;
			margin:0;
			padding:0;
			height: auto;
		}

			form label>ul.img>li,
			form .label>ul.img>li{
				float: left;
				width:150px;
				height:150px;
				text-align: center;
				line-height: 20px;
			}

				form label>ul.img>li .preview,
				form .label>ul.img>li .preview{
					margin: 15px 20px 5px 20px;
					border:1px solid #888;
					background:#EEE;
					background-position: 50% 50%;
					background-size: cover;
					background-repeat: no-repeat;
					width:110px;
					height:80px;
					position: relative;
				}

					form label>ul.img>li .preview>span,
					form .label>ul.img>li .preview>span{
						position: absolute;
						bottom:0;
						left:0;
						width:100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						line-height: 20px;
						font-size: 12px;
						color: #888;
						padding: 0 10px;
						box-sizing: border-box;
					}

					form label>ul.img>li .preview>span.big,
					form .label>ul.img>li .preview>span.big{
						line-height: 80px;
						font-size: 30px;
						font-weight: bold;
						color:#FFF;
					}

					form label>ul.img>li .preview input,
					form .label>ul.img>li .preview input{
						opacity: 0;
						width:100%;
						height:100%;
						overflow: hidden;
						z-index: 3;
					}

					form label>ul.img>li .preview::before,
					form label>ul.img>li .preview::after,
					form .label>ul.img>li .preview::before,
					form .label>ul.img>li .preview::after{
						content:"";
						display: block;
						position: absolute;
						top: 0;
						right: 0;
					}

					form label>ul.img>li .preview::before,
					form .label>ul.img>li .preview::before{
						background:#DDD;
						background-image:linear-gradient(45deg, rgba(0,0,0,0), rgba(0,0,0,.5));
						border:1px solid #888;
						width:22px;
						height:22px;
						border-top:0;
						border-right:0;
					}

					form label>ul.img>li .preview::after,
					form .label>ul.img>li .preview::after{
						background:#FFFFFF;
						width:40px;
						height:22px;
						transform: translate(40%, -40%) rotate(45deg);
						border-top-left-radius:20px;
						border-top-right-radius:20px;
						/*border-bottom:1px solid #888;*/
					}


				form label>ul.img>li .filename,
				form .label>ul.img>li .filename{
					padding: 0 10px;
					white-space: normal;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				form label>ul.img>li .deletebutton,
				form .label>ul.img>li .deletebutton{
					opacity: .3;
					font-size: 12px;
				}

				form label>ul.img>li .deletebutton:hover,
				form .label>ul.img>li .deletebutton:hover{
					opacity: 1;
					color:red;
					cursor: pointer;
				}

			form label>ul.img>li.new,
			form .label>ul.img>li.new{
				cursor: pointer;
			}

				form label>ul.img>li.new>label,
				form .label>ul.img>li.new>label{
					margin:0;
					padding:0;
					border:0;
					display: block;
					cursor: pointer;
				}

					form label>ul.img>li.new>label:hover .filename,
					form .label>ul.img>li.new>label:hover .filename{
						color:#0d5eba;
					}

			form label>ul.img>li.add,
			form .label>ul.img>li.add{
				cursor: pointer;
			}

				form label>ul.img>li.add::before,
				form .label>ul.img>li.add::before{
					content:"+";
					display: block;
					background-color:#888;
					color:#FFFFFF;
					border-radius: 100%;
					width:70px;
					line-height:70px;
					margin:20px 40px 10px 40px;
					font-size: 50px;
					font-weight: bold;
				}

				form label>ul.img>li.add:hover::before,
				form .label>ul.img>li.add:hover::before{
					background-color: #0d5eba;
				}

				form label>ul.img>li.add::after,
				form .label>ul.img>li.add::after{
					content:"Ajouter une image";
				}


			form label>ul.img::after,
			form .label>ul.img::after{
				display: block;
				content: "";
				clear:both;
			}

	form label:has(>div.unit),
	form label:has(>div.unit){
		display: flex;
	}

		form label:has(>div.unit)>input,
		form .label:has(>div.unit)>input,
		form .halfGroup label:has(>div.unit).half>input,
		form .halfGroup .label:has(>div.unit).half>input{
			flex: 1 1 auto;
			width: auto;
			min-width: 0;

			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		form label>div.unit,
		form .label>div.unit,
		form .halfGroup label>div.unit,
		form .halfGroup .label>div.unit{
			flex: 0 0 auto;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			background: var(--bg5);
			min-height: 35px;

			padding: 0 5px;
			display: flex;
			align-items: center;

			width: auto;
			min-width: 0;
			max-width: auto;

			border:1px solid var(--bg5);
			box-sizing: border-box;
		}

	form fieldset{
		position: relative;
		border: none;
		background: var(--bg2);
		border-radius: 5px;
		padding: 10px;
		margin: 15px 0 0 0;
	}

		form fieldset legend{
			text-transform: uppercase;
			font-size: 14px;
			font-weight: normal;
			color: var(--foreground); /*var(--accentColor);*/

			/*background: var(--bg2);*/
			/*padding: 3px 5px 0;*/
			/*margin: 0 -3px -10px;*/
			/*border-radius: 5px;*/

			background: var(--bg1);
			/*
			background-image: linear-gradient(to bottom, var(--bg2), var(--bg1));
			background-size: 100% 15px;
			background-repeat: no-repeat;
			*/

			position: relative;
			margin: 0 -10px 0 -10px;
			padding: 10px 10px 15px 10px;
			width: 100%;
			text-align: center;

			position: sticky;
			top: 0;
			z-index: 2;
		}

			form fieldset legend::before,
			form fieldset legend::after{
				content: "";
				display: block;
				position: absolute;
				bottom: -10px;
				left: 0;
				right: 0;
				height: 10px;
				background-position: top left, top right;
				background-repeat: no-repeat;

			}

			form fieldset legend::before{
				background-image: linear-gradient(var(--bg1), var(--bg1)), linear-gradient(var(--bg1), var(--bg1));
				background-size: 5px 5px, 5px 5px;
			}

			form fieldset legend::after{
				background-image: linear-gradient(var(--bg2), var(--bg2)), linear-gradient(var(--bg2), var(--bg2));
				background-size: 6px 6px, 6px 6px;

				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
			}

		form fieldset legend+*{
			margin-top: -10px;
		}

		form fieldset>p{
			font-size: 10px;
			text-transform: uppercase;
			opacity: .8;
			margin: 0;
			padding: 0;
			margin-top: 20px;
		}

		form fieldset>p:first-child{
			margin-top: 0;
		}


		form fieldset label,
		form fieldset .label{
			padding-top: 30px;
		}

			form fieldset label>span,
			form fieldset .label>span{
				top: 10px;
			}

		form fieldset>label:first-child,
		form fieldset>.label:first-child,
		form fieldset>.half:first-child+.half,
		form fieldset>.fieldGroup:first-child>label,
		form fieldset>.fieldGroup:first-child>.label,
		form fieldset>.halfGroup:first-child>label,
		form fieldset>.halfGroup:first-child>.label{
			padding-top: 20px;
		}

			form fieldset>label:first-child>span,
			form fieldset>.label:first-child>span,
			form fieldset>.half:first-child+.half>span,
			form fieldset>.fieldGroup:first-child>label>span,
			form fieldset>.fieldGroup:first-child>.label>span,
			form fieldset>.halfGroup:first-child>label>span,
			form fieldset>.halfGroup:first-child>.label>span{
				top: 0;
			}


	form .halfGroup *.half,
	.halfGroup *.half{
		float: left;
	}

	.halfGroup *.half,
	form *.half,
	form *.half+*.half+*.half{
		/*min-width:50%;*/
		width:calc(50% - 5px);
		/*display: flex;*/
		flex: auto;
		/*float:left;*/
		margin-right:5px;
		margin-left:0;
		clear:none;
		box-sizing: border-box;
	}

		.halfGroup *.half>*,
		form *.half>*{
			width: 100%;
			max-width: 100%;
			min-width: 100%;
			box-sizing: border-box;
		}

	.halfGroup *.half+*.half,
	form *.half+*.half{
		margin-left:5px;
		margin-right:0px;
	}
		.halfGroup *.half+*.half::after,
		form *.half+*.half::after{
			display: block;
			content:"";
			clear:both;
		}



	form *.third,
	form *.third+*.third+*.third+*.third{
		width:33.333%;
		width:calc(33.333% - 6.6666666667px);
		float:left;
		margin-right:10px;
		margin-left:0;
		clear:none;
	}
	form *.third+*.third{
		margin-right:10px;
		margin-left:0px;
	}

	form *.third+*.third+*.third{
		margin-left:0;
		margin-right:0px;
	}
		form *.third+*.third+*.third::after{
			display: block;
			content:"";
			clear:both;
		}


	form *.half:first-child:last-child,
	form *.third:first-child:last-child{
		width: 100%;
	}




.fieldGroup{
	margin:0 -5px -5px -5px;
	padding:0 5px 5px 5px;

	/*margin-top:15px;*/
	border-radius:3px;
	/*clear:both;*/
	display: flex;
}

	.fieldGroup>*{
		/*margin-top:-15px;*/
		

	}

		.fieldGroup>label>span,
		.fieldGroup>.label>span{
			color: transparent;
		}
		.fieldGroup>*:first-child>span{
			color: var(--accentColor);
		}

	.fieldGroup>*.half,
	.fieldGroup>*.half+*.half{
		/*width: 50%;*/
		flex: auto;
		margin: 0;
	}
		.fieldGroup>*.half input,
		.fieldGroup>*.half textarea,
		.fieldGroup>*.half .popoverLauncher,
		.fieldGroup>*.half .wysiwyg{
			border-right: 2px solid var(--bg3);
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
		.fieldGroup>*.half+*.half input,
		.fieldGroup>*.half+*.half textarea,
		.fieldGroup>*.half+*.half .popoverLauncher,
		.fieldGroup>*.half+*.half .wysiwyg{
			border-right: 0;
			border-left: 2px solid var(--bg3);

			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			border-top-right-radius: 0;
			border-bottom-right-radius: 5px;
		}

	.fieldGroup>*.third,
	.fieldGroup>*.third+*.third,
	.fieldGroup>*.third+*.third+*.third{
		width: 50%;
		margin: 0;
	}
		.fieldGroup>*.third input,
		.fieldGroup>*.third textarea,
		.fieldGroup>*.third .popoverLauncher,
		.fieldGroup>*.third .wysiwyg{
			border-right: 2px solid var(--bg3);
			border-left: 2px solid var(--bg3);
		}
		.fieldGroup>*.third:first-child input,
		.fieldGroup>*.third:first-child textarea,
		.fieldGroup>*.third:first-child .popoverLauncher,
		.fieldGroup>*.third:first-child .wysiwyg{
			border-left: 0;
		}
		.fieldGroup>*.third:last-child input,
		.fieldGroup>*.third:last-child textarea,
		.fieldGroup>*.third:last-child .popoverLauncher,
		.fieldGroup>*.third:last-child .wysiwyg{
			border-right: 0;
		}

	.fieldGroup::after{
		content:"";
		display:block;
		clear:both;
	}

.halfGroup{
	clear:both;
}

	.halfGroup::after{
		content:"";
		display:block;
		clear:both;
	}

ul.multilist{
	display: block;
	/*margin:0;*/
	/*padding:0 5px;*/
	list-style: none;
	/*background:var(--bg5);*/
	/*border:1px solid var(--bg3);*/
	/*border-radius: 3px;*/

	/*position: relative;*/
	border: none;
	background: var(--bg2);
	border-radius: 5px;
	padding: 10px;
	margin: 15px 0px;

}
label ul.multilist,
.label ul.multilist{
	margin: 0;
}

	ul.multilist:has(li.addRow:nth-child(1))::before{
		content: "Vide";
		display: block;
		width: 100%;
		height: 20px;
		line-height: 30px;
		text-align: center;
		margin-bottom: 20px;
		font-style: italic;
		opacity: .5;
	}

	ul.multilist li{
		display: block;
		padding:5px 0;
		line-height: 30px;
		border-top: 1px solid var(--bg3);
		position: relative;
	}
	ul.multilist li:first-child{
		border-top: 0;
	}

	ul.multilist li:first-child:last-child{
		margin-top: -10px;
		margin-bottom: -10px;
		padding: 3px 0;
	}

		form ul.multilist .halfGroup *.half, 
		form ul.multilist *.half, 
		form ul.multilist *.half+*.half+*.half,
		form ul.multilist label>div.select:last-child{
			padding-top: 0;
			margin-top: 0;
		}

		ul.multilist li button{
			display: block;
			-webkit-appearance: none;
			border: 0;
			background: var(--accentColor);
			border-radius: 5px;
			line-height: 35px;
			padding: 0 15px;
			margin: 0;
			color: var(--accentForeground);
			cursor: pointer;
			width:100%;
		}

		ul.multilist li:not(.addRow) button{
			background: var(--dangerColor);
			position: absolute;
			top: 5px;
			right: 0;
			bottom: 5px;
			width: 30px;
			box-sizing: border-box;
		}
		ul.multilist li:not(.addRow) button.deleteButton,
		ul.multilist li:not(.addRow) button.addCancel{
			background: transparent;
			font-size: 0;
			border-radius: 5px !important;

			opacity: .5;
		}
			ul.multilist li:not(.addRow) button.deleteButton::before,
			ul.multilist li:not(.addRow) button.addCancel::before{
				content: "\e908";
				font-weight: normal;
				font-family: 'icomoon' !important;
				font-size: 20px;
				width: 250px;
				height: 140px;
				color: #FFFFFF;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				font-weight: normal;
			}
		ul.multilist li:not(.addRow) button.deleteButton:hover,
		ul.multilist li:not(.addRow) button.addCancel:hover{
			opacity: 1;
		}
			ul.multilist li:not(.addRow) button.deleteButton:hover::before,
			ul.multilist li:not(.addRow) button.addCancel:hover::before{
				background: var(--dangerColor);
			}

		ul.multilist li input.radio{
/*			width:30px;*/
/*			height:30px;*/
			overflow: hidden;
			background: fuchsia;
			position: absolute;
			
			top:8px;
			left:8px;
			margin: 0;
			width: 14px;
			height: 14px;
		}

		ul.multilist li input,
		ul.multilist li span{
			display: block;
			/*width:100%;*/
			/*height:30px;*/
			/*box-sizing: border-box;*/
		}

		ul.multilist li span{
			color: inherit;
			font-weight: normal;
			text-transform: none;
			font-size: inherit;
		}

		ul.multilist li input,
		ul.multilist li textarea,
		ul.multilist li .popoverLauncher{
			width:calc(100% - 30px);
		}

		ul.multilist li span{
			padding-right: 30px;
			line-height: 20px;
			padding:5px 0;
			height:auto;
		}

		ul.multilist li input.radio+span{
			padding-left:30px;
		}

		ul.multilist li input.radio+input[type=text]{
			margin-left:30px;
			width:calc(100% - 60px);
		}

		ul.multilist li input[type=text],
		ul.multilist li textarea{
			box-sizing: border-box;
			border:none;
			background: var(--bg6);
/*			margin-top: -5px;*/
/*			margin-bottom: -5px;*/
			padding: 5px;
			color: inherit;
			margin-top: 0;
		}

		ul.multilist li textarea{
			margin-top: 2px;
		}

		ul.multilist li input+button,
		ul.multilist li span+button,
		ul.multilist li .halfGroup+button.addCancel{
			width:30px;
			top: 5px;
			right: 0;
			position: absolute;
			padding:0;
			line-height: 30px;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}

		ul.multilist li>label{
			margin:0;
			padding:0;
		}

			ul.multilist li>label input.radio{
				-webkit-appearance:checkbox;
			}

			ul.multilist li>label>span{
				position: static;
			}
			ul.multilist li>label>div.popoverLauncher:last-child{
				margin-top: 0;
			}

		ul.multilist li>label+p{
			font-size: 12px;
			margin: 0;
			padding: 0;
			opacity: .8;
			margin-left: 30px;
			padding-bottom: 10px;
			line-height: 1.2em;
		}

	ul.multilist li.group{

	}

		ul.multilist li.group>span{
			font-size: 10px;
			text-transform: uppercase;
			/*color: var(--accentColor);*/
			font-weight: bold;
			line-height: 15px;
			/*padding-top: 15px;*/
			position: static;	
		}

		ul.multilist li.group ul{
			position: relative;
			display: block;
			list-style: none;
			margin: 0;
			padding: 0;

			border-left: 1px dashed var(--bg4);
			padding-left: 20px;

			max-height: 270px;
			overflow: auto;
		}

		ul.multilist li.group ul:empty{
			border-left-color: transparent;
		}

			ul.multilist li.group ul:empty::before{
				display: block;
				content: "N/A";
				opacity: .5;
			}

			ul.multilist li.group ul>li{
				position: relative;
			}

				ul.multilist li.group ul>li::after{
					content: "";
					width: 10px;
					/*height: 50%;*/
					display: block;
					position: absolute;
					bottom: 0;
					left: -21px;
					top: 20px;
					border-top: 1px dashed var(--bg4);
				}

			ul.multilist li.group ul>li:last-child{

			}

				ul.multilist li.group ul>li:last-child::after{
					background: var(--bg2);
				}

		ul.multilist li.addRow{

		}

			ul.multilist li.addRow button{

			}

			ul.multilist li.addRow textarea{
				display: none;
			}

		ul.multilist li.addRow.hide{
			display: none;
		}

		ul.multilist li:has(button.addCancel)>div.halfGroup,
		ul.multilist li:has(button.deleteButton)>div.halfGroup{
			margin-right: 35px;
		}


.multiContainer{
	position: relative;
	width: 100%;
	border: 1px solid var(--bg5);
	background:var(--bg5);
	color:var(--foreground);

	box-sizing: border-box;
	background:linear-gradient(var(--bg5), var(--bg5));
	background-position: 0 0;
	background-size:200px 100%;
	background-repeat: no-repeat;
	margin-top:20px;

	border-radius: 10px;

	display: flex;
}

	.multiContainer>aside{
		/*position: absolute;*/
		/*top:0;*/
		/*left:0;*/
		width:200px;
		background: var(--bg5);
		border-radius: 10px;
	}

		.multiContainer>aside>ul{
			list-style: none;
			display: block;
			margin:0;
			padding:25px;

			/* Only if compatible and if not too much stuff...  */
			position: sticky;
			top: 0;
		}

			.multiContainer>aside>ul>li{
				display: block;
				margin:0;
				padding:0 10px;
				line-height: 45px;

				background: var(--bg1);
				border-radius: 5px;

				margin-top: 5px;

				position: relative;
			}

			.multiContainer>aside>ul>li.dragging{
				opacity: .5;
			}

			.multiContainer>aside>ul>li.over.top{
				margin-top: 2em;
			}

			.multiContainer>aside>ul>li.over.bottom{
				margin-bottom: 2em;
			}


				.multiContainer>aside>ul>li>span{
					display: block;
					padding-right: 15px;
	
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.multiContainer>aside>ul>li:nth-child(1):nth-last-child(2)>span{
					padding-right: 0;
				}

				.multiContainer>aside>ul>li>div.delete{
					position: absolute;
					top: 50%;
					right: 5px;
					width: 25px;
					height: 25px;
					line-height: 25px;
					text-align: center;
					/*border: 1px solid var(--foreground);*/
					border-radius: 100%;
					color: var(--foreground);
					transform: translateY(-50%);
					opacity: .5;
				}
				.multiContainer>aside>ul>li:nth-child(1):nth-last-child(2)>div.delete{
					display: none;
				}

				.multiContainer>aside>ul>li>div.delete:hover{
					background: var(--dangerColor);
					opacity: 1;
				}

			.multiContainer>aside>ul>li:first-child{
				margin-top:0;
			}

			.multiContainer>aside>ul>li.active{
				background: var(--accentColor);
				color: var(--accentForeground);
			}

			.multiContainer>aside>ul>li:hover{
				box-shadow: inset 0 0 0 2px var(--accentColor);
				cursor: pointer;
			}

			.multiContainer>aside>ul>li.addRow{
				color: #FFF;
				background: transparent;
				box-shadow: inset 0 0 0 2px;
				text-align: center;
				margin-top:15px;
				padding: 0;

				line-height: 30px;

				color: var(--accentColor);
			}

				.multiContainer>aside>ul>li.addRow button{
					display: inline-block;
					margin: 0;
					padding: 0;
					-webkit-appearance:none;
					border: 0;
					border-radius: 0;
					text-align: center;
					width: 100%;
					height: 100%;
					background: transparent;
					padding:0 10px;
					font: inherit;

					font-size: 10px;

					cursor: pointer;
				}

			.multiContainer>aside>ul>li.addRow:hover{
				background: var(--accentColor);
			}

				.multiContainer>aside>ul>li.addRow:hover button{
					color: var(--accentForeground);
				}

	.multiContainer>div{
		/*padding:0 20px 20px 225px;*/
		padding: 0 20px 20px 20px;
		width: 100%;
		width: calc(100% - 240px);
	}

		.multiContainer>div::after{
			display:block;
			content:"";
			clear:both;
		}

			.multiContainer>div>*{
				display: none;
			}

			.multiContainer>div>*.active{
				display: block;
			}







ul.reorderable,
[data-reorderable]{

}
ul.reorderable.dragging, ul.reorderable ul.dragging{
	opacity: 1;
}
ul.reorderable:has(ul.dragging)>li{
	opacity:.5;
}
ul.reorderable:has(ul.dragging)>li:has(ul.dragging){
	opacity:1;
}
	ul.reorderable.dragging ul{
/*		display: none;*/
		opacity: .5;
		pointer-events: none;
	}
	ul.reorderable li,
	[data-reorderable]>*{

	}
	ul.reorderable li.dragging,
	[data-reorderable]>*.dragging{
		opacity: .5;
	}
	ul.reorderable li.over.top,
	[data-reorderable]>*.over.top{
		margin-top: 2em !important;
	}
		[data-reorderable]>*.over.top>td{
			border-top:2em solid var(--curBg);
		}
	ul.reorderable li.over.bottom,
	[data-reorderable]>*.over.bottom{
		margin-bottom: 2em !important;
	}
		[data-reorderable]>*.over.bottom>td{
			border-bottom:2em solid var(--curBg);
		}







.requisiteForm{

}

	.requisiteForm::after{
		content: "";
		display: block;
		clear: both;
	}



.multiContainer .requisiteForm{
	
}

	.multiContainer .requisiteForm>h2{
		margin-left: -20px;
		margin-right: -20px;
		padding-left: -20px;
		padding-right: -20px;
	}




	











.imageFocusTool{

}

.imageFocusTool.ready{

}

	.imageFocusTool .alignTool{
		position: relative;
		padding: 18px;

		background: var(--bg5);
		border-radius: 5px;
		overflow: hidden;

		width: fit-content;
		max-width: 100%;
		height: fit-content;
	}

		.imageFocusTool .alignTool .corners{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: var(--bg1);

			--size:25px;
		}

			.imageFocusTool .alignTool .corners>div{
				position: absolute;
				box-sizing: border-box;
				background: var(--bg5);
				z-index: 1;
			}
			.imageFocusTool .alignTool .corners>div:hover{
				cursor: pointer;
				background: rgba(255,255,255,.5);
			}
			.imageFocusTool .alignTool .corners>div.active{
				background: var(--accentColor);
			}

			.imageFocusTool .alignTool .corners>div[data-corner="tl"]{
				width: var(--size);
				height: var(--size);

				top: 0;
				left: 0;
			}
			.imageFocusTool .alignTool .corners>div[data-corner="t"]{
				top: 0;
				left: calc(var(--size) + 1px);
				right: calc(var(--size) + 1px);
				height: 15px;
			}
			.imageFocusTool .alignTool .corners>div[data-corner="tr"]{
				width: var(--size);
				height: var(--size);

				top: 0;
				right: 0;
			}
			.imageFocusTool .alignTool .corners>div[data-corner="l"]{
				top: calc(var(--size) + 1px);
				left: 0;
				bottom: calc(var(--size) + 1px);
				width: 15px;
			}
			.imageFocusTool .alignTool .corners>div[data-corner="c"]{
				top: 15px;
				right: 15px;
				bottom: 15px;
				left: 15px;
				z-index: 2;
				border:1px solid var(--bg1);
			}
			.imageFocusTool .alignTool .corners>div[data-corner="r"]{
				top: calc(var(--size) + 1px);
				right: 0;
				bottom: calc(var(--size) + 1px);
				width: 15px;
			}
			.imageFocusTool .alignTool .corners>div[data-corner="bl"]{
				width: var(--size);
				height: var(--size);

				bottom: 0;
				left: 0;
			}
			.imageFocusTool .alignTool .corners>div[data-corner="b"]{
				bottom: 0;
				left: calc(var(--size) + 1px);
				right: calc(var(--size) + 1px);
				height: 15px;
			}
			.imageFocusTool .alignTool .corners>div[data-corner="br"]{
				width: var(--size);
				height: var(--size);

				bottom: 0;
				right: 0;
			}
			
		.popover .imageFocusTool .alignTool .corners{
			background: #FFF;
		}
			.popover .imageFocusTool .alignTool .corners>div{
				background: var(--popoverContrast);
			}
			.popover .imageFocusTool .alignTool .corners>div:hover{
				background: rgba(0,0,0,0.25);
			}
			.popover .imageFocusTool .alignTool .corners>div.active{
				background: var(--accentColor);
			}

			.imageFocusTool .alignTool .corners>div[data-corner="c"]{
				border-color: #FFF;
			}

		.imageFocusTool .alignTool .preview{
			/*background: fuchsia;*/
			width: 100%;
			height: auto;
			position: relative;
			cursor: crosshair;

			position: relative;
			z-index: 3;

			-webkit-user-select: none;  
			-moz-user-select: none;    
			-ms-user-select: none;      
			user-select: none;
		}
			.imageFocusTool .alignTool .preview *{
				pointer-events: none;
			}

			.imageFocusTool .alignTool .preview img{
				display: block;
				width: auto;
				height: auto;
				max-height: 250px;
				max-width: 100%;
				background: #FFFFFF;
			}

			.imageFocusTool .alignTool .preview div{
				position: absolute;
				top: 50%;
				left: 50%;
				width: 10px;
				height: 10px;
				border-radius: 100%;
				transform: translate(-50%, -50%);
				background: var(--accentColor);
				box-shadow: 0 0 0 2px white, 0 2px 0 2px rgba(0,0,0,0.2);
			}

			.imageFocusTool.contain .alignTool .preview img{
				/*margin: -10px;*/
			}


		.imageFocusTool.ready label.focusField,
		.imageFocusTool.ready label.uploadLabel{
			display: none;
		}

		.imageFocusTool.empty .alignTool .preview{
			height: 100px;
			line-height: 50px;
			/*background: red;*/
			background:var(--bg5);
/*			background: var(--popoverContrast);*/
			text-align: center;
		}
		.popover .imageFocusTool.empty .alignTool .preview{
			background: var(--popoverContrast);
		}

		.imageFocusTool.empty .alignTool .preview.over{
			box-shadow: inset 0 0 0 5px var(--accentColor);
		}

			.imageFocusTool.empty .alignTool .preview::before{
				content: "Aucune image";
				white-space: nowrap;
				padding: 0 1em;
			}
			.imageFocusTool.empty .alignTool .preview::after{
				content: "Cliquez pour téléverser";
				white-space: nowrap;
				padding: 0 1em;
			}

			.imageFocusTool.empty .alignTool .preview div{
				display: none;
			}


	.imageFocusTool .alignTool{ /* was only for .alignTool.contain before */
		--bg:var(--bg6);
		padding: 28px;
	}
	.popover .imageFocusTool .alignTool{ /* was only for .alignTool.contain before */
		--bg: var(--popoverColor);
	}

		.imageFocusTool .alignTool::before{ /* was only for .alignTool.contain before */
			content: "";
			display: block;
			position: absolute;
			top: 18px;
			left: 18px;
			right: 18px;
			bottom: 18px;
			z-index: 4;
			background: var(--bg);
		}

		.imageFocusTool .alignTool .preview{ /* was only for .alignTool.contain before */
			background-color: var(--bg);
			z-index: 5;
			position: relative;
		}
		.popover .imageFocusTool .alignTool .preview{ /* was only for .alignTool.contain before */
			background: var(--popoverContrast);
		}

		.imageFocusTool .alignTool[data-corner="tl"] .preview{ /* was only for .alignTool.contain before */
			top: -10px;
			left: -10px;
		}
		.imageFocusTool .alignTool[data-corner="t"] .preview{ /* was only for .alignTool.contain before */
			top: -10px;
		}
		.imageFocusTool .alignTool[data-corner="tr"] .preview{ /* was only for .alignTool.contain before */
			top: -10px;
			right: -10px;
		}
		.imageFocusTool .alignTool[data-corner="l"] .preview{ /* was only for .alignTool.contain before */
			left: -10px;
		}
		.imageFocusTool .alignTool[data-corner="c"] .preview{ /* was only for .alignTool.contain before */
			
		}
		.imageFocusTool .alignTool[data-corner="r"] .preview{ /* was only for .alignTool.contain before */
			right: -10px;
		}
		.imageFocusTool .alignTool[data-corner="bl"] .preview{ /* was only for .alignTool.contain before */
			bottom: -10px;
			left: -10px;
		}
		.imageFocusTool .alignTool[data-corner="b"] .preview{ /* was only for .alignTool.contain before */
			bottom: -10px;
		}
		.imageFocusTool .alignTool[data-corner="br"] .preview{ /* was only for .alignTool.contain before */
			bottom: -10px;
			right: -10px;
		}


.popup.popover>div>div.add>form.add.addFileForm{
	display: flex;
	flex-direction: column;
}

	.popup.popover>div .addFileForm div.half,
	.popup.popover>div .addFileForm div.half+div.half,
	.popup.popover>div .addFileForm div.half+div.half+div.half{
		float:none;
		width: 100%;
		margin:0;
	}

		.popup.popover>div .addFileForm div.half label,
		.popup.popover>div .addFileForm div.half .label{
			padding-top: 30px;
		}

			.popup.popover>div .addFileForm div.half ul.multilist li>label{
				padding-top: 0;
			}


		.popup.popover>div .addFileForm div.half label>span, 
		.popup.popover>div .addFileForm div.half .label>span{
			top: 10px;
		}

	.popup.popover>div .addFileForm .popoverAddCloseBtn{
		order: 1;
		flex: 0 0 auto;
	}
	.popup.popover>div .addFileForm>br{
		display: none;
	}

	.popup.popover>div .addFileForm div.half.file{
		order: 2;
	}

	.popup.popover>div .addFileForm div.half.meta{
		order: 3;
	}


.imageFocusTool{

}

	.imageFocusTool{

	}

		.imageFocusTool .pic{

		}

			.imageFocusTool .pic::before {
				font-size: 1.5em;
				display: inline-block;
				margin: 0 .5em 0 0;
				padding: 0;
				line-height: 1em;
				background: var(--bg6);
				color: var(--accentColor);
				border-radius: 2px;
			}
			.popover .imageFocusTool .pic::before {
				background: #FFF;
			}


.help{
	display: inline-block;
	position: relative;

	width: 1.5em;
	height: 1.5em;
	border-radius: 100%;

	margin-left: .5em;

	background: rgba(128,128,128,.2);
	color: var(--foreground);

	--boxcolor:#DDD;
}

	.help::before{
		content: "?";
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;

		pointer-events: none;
	}

	.help::after{
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 50%;
		width: 20px;
		height: 20px;
		background: var(--boxcolor);
		border-radius: 5px 0 100% 0;
		transform-origin: 0 0;
		transform: rotate(-135deg);

		z-index: 1;

		opacity: 0;
	}

	.help>div{
		position: absolute;
		bottom:100%;
		left: 50%;
		pointer-events: none;
		padding: 10px;
		border-radius: 5px;
		background: red;

		width: 50vw;
		max-width: 300px;
		min-width: 25px;
		text-transform: none;
		line-height: 1.2em;
		font-weight: normal;
		font-size: 14px;

		transform: translate(-50%, -10px);

		background: var(--boxcolor);
		color: #000000;
		z-index: 2;

		pointer-events: none;

		opacity: 0;
	}

.help:hover{

}

	.help:hover::after{
		opacity: 1;
	}

	.help:hover>div{
		opacity: 1;
	}


.help.down{

}

	.help.down::before{
		
	}

	.help.down::after{
		top:100%;
		transform: rotate(45deg);
	}

	.help.down>div{
		bottom:auto;
		top:100%;
		transform: translate(-50%, 10px);
	}

.dragging{
	opacity: .5;
	/*filter:drop-shadow(0 0 5px var(--accentColor));*/
}

.over{

}

	.over *{
		pointer-events: none;
	}

/* Over module */
#contentEditorContainer>bcksection>div>section>div>div.over{

}
	#contentEditorContainer>bcksection>div>section>div>div.over::before{
		position: absolute;

		display: block;
		content:" "; /*"+";*/
		color:var(--accentColor);
		font-weight: bold;
		text-align: center;
		border: 1px dashed var(--foreground);
		border-radius: 5px;
		box-sizing: border-box;

		left: 10px;
		right: 10px;
	}

#contentEditorContainer>bcksection>div>section>div>div.over.top{
	padding-top:20px;
}
	#contentEditorContainer>bcksection>div>section>div>div.over.top::before{
		height: 20px;
		top:-5px;
	}

#contentEditorContainer>bcksection>div>section>div>div.over.bottom{
	padding-bottom:30px;
}

	#contentEditorContainer>bcksection>div>section>div>div.over.bottom::before{
		height: 20px;
		bottom:5px;
	}






/* Over zone */
#contentEditorContainer>bcksection>div>section.over{

}
	#contentEditorContainer>bcksection>div>section.over::before{
		position: absolute;

		display: block;
		content:" "; /*"+";*/
		color:var(--accentColor);
		font-weight: bold;
		text-align: center;
		border: 1px dashed var(--foreground);
		border-radius: 5px;
		box-sizing: border-box;
	}

#contentEditorContainer>bcksection>div>section.over.left{
	/*position: relative;*/
	/*left:30px;*/
	padding-left:30px;
	box-sizing: border-box;
}

	#contentEditorContainer>bcksection>div>section.over.left::before{
		width:20px;
		height: 100%;
		top:0;
		left:-5px;
	}

#contentEditorContainer>bcksection>div>section.over.right{
	/*position: relative;*/
	/*right:30px;*/
	padding-right:30px;
	box-sizing: border-box;
}

	#contentEditorContainer>bcksection>div>section.over.right::before{
		width:20px;
		height: 100%;
		top:0;
		right:-5px;
	}

#contentEditorContainer>bcksection>div>section.over.top>div{
	/*padding-top:40px;*/
	margin-top: 0;
	padding-top: 30px;
}

	#contentEditorContainer>bcksection>div>section.over.top::before{
		height: 20px;
		top:5px;
		left: 10px;
		right: 10px;
		z-index: 2;
	}

#contentEditorContainer>bcksection>div>section.over.bottom>div{
	padding-bottom:20px;
}

	#contentEditorContainer>bcksection>div>section.over.bottom::before{
		height: 20px;
		bottom:5px;
		left: 10px;
		right: 10px;
		z-index: 2;
	}






/* Over section */
#contentEditorContainer>bcksection.over{

}

	#contentEditorContainer>bcksection.over::before{
		position: absolute;

		display: block;
		content:" "; /*"+";*/
		color:var(--accentColor);
		font-weight: bold;
		text-align: center;
		border: 1px dashed var(--foreground);
		border-radius: 5px;
		box-sizing: border-box;
	}

#contentEditorContainer>bcksection.over.top{
	margin-top:30px;
}

	#contentEditorContainer>bcksection.over.top::before{
		width:100%;
		height: 20px;
		bottom:100%;
		left:0;
		/*top: -25px;*/
		top: auto;
		margin-bottom: 5px;
	}

#contentEditorContainer>bcksection.over.bottom{
	margin-bottom:30px;
}

	#contentEditorContainer>bcksection.over.bottom::before{
		width:100%;
		height: 20px;
		top:100%;
		left:0;
		margin-top: 5px;
	}


#contentEditorContainer>bcksection.over.left>div{
	padding-left:30px;
}

	#contentEditorContainer>bcksection.over.left::before{
		width:20px;
		top: 30px;
		bottom: 30px;
		left: 25px;
	}

#contentEditorContainer>bcksection.over.right>div{
	padding-right:30px;
}

	#contentEditorContainer>bcksection.over.right::before{
		width:20px;
		top: 30px;
		bottom: 30px;
		right: 25px;
	}





/* EditorJS */
.codex-editor{
	padding: 10px 0;
}

.ce-block__content,
.ce-toolbar__content{
/*	max-width: calc(100% - 120px) !important;*/
	max-width: calc(100% - 50px) !important;
}

.ce-toolbar__actions{
	padding-right: 0;
}


.cdx-search-field{
	display: none !important;
}

	.ce-toolbar__actions svg{
		filter: invert(1);
	}

	.ce-popover svg{
		filter: invert(0) !important;
	}

	.ce-toolbar__settings-btn:hover,
	.ce-toolbar__plus:hover,
	.ce-popover-item:hover:not(.ce-popover-item--no-hover),
	.ce-inline-tool:hover{
		background: var(--accentColor);
	}

	.cdx-search-field__input{
		border:none !important;
	}

.ce-block--selected .ce-block__content{
	background: var(--accentColor);
}

/*.ce-popover__search,*/
.ce-toolbar__plus{
	display: none !important;
}


.wysiwyg h1,
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6{
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: normal !important;
	text-transform: none !important;
}

.wysiwyg h1{
	font-size: 20px !important;
}
.wysiwyg h2{
	font-size: 18px !important;
}
.wysiwyg h3{
	font-size: 16px !important;
}
.wysiwyg h4{
	font-size: 14px !important;
}
.wysiwyg h5{
	font-size: 12px !important;
}
.wysiwyg h6{
	font-size: 10px !important;
}


.wysiwyg span.note{
	display: inline;
/*	border-bottom:1px dashed;*/
	text-decoration: underline;
	text-decoration-style: dashed;
}

	.wysiwyg span.note::after{
		content: attr(data-note);
		display: inline;
		padding-left: .5em;
		font-size: .5em;
/*		color: var(--accentColor);*/

		text-decoration: none;
		text-decoration-color: var(--accentColor);
		text-decoration: underline;

		padding: .25em .5em;
		font-size: .7em;
		background: var(--accentColor);
		color: black;
		margin-left: .25em;
		border-radius: 10px;
	}


.wysiwyg span.clr{
	color: fuchsia;
}

/*	.wysiwyg span.clr::after{
		content: attr(data-clr);
		display: inline;
		padding-left: .5em;
		font-size: .5em;

		text-decoration: none;
		text-decoration-color: var(--accentColor);
		text-decoration: underline;

		padding: .25em .5em;
		font-size: .7em;
		background: var(--accentColor);
		color: black;
		margin-left: .25em;
		border-radius: 10px;
	}*/


.HTMLPreview{

}

	.HTMLPreview>h1,
	.HTMLPreview>h2,
	.HTMLPreview>h3,
	.HTMLPreview>h4,
	.HTMLPreview>h5,
	.HTMLPreview>h6,
	.HTMLPreview>p,
	.HTMLPreview>ul,
	.HTMLPreview>ol{
		margin: 5px 0;
		padding: 0;		
	}

	.HTMLPreview>ul,
	.HTMLPreview>ol{
		padding-left: 1em;
	}

	.HTMLPreview>h1,
	.HTMLPreview>h2,
	.HTMLPreview>h3,
	.HTMLPreview>h4,
	.HTMLPreview>h5,
	.HTMLPreview>h6{
		font-weight: normal;
		text-transform: none;
		font-size: 15px;
	}

	.HTMLPreview>h1,
	.mod_text.type_title{
		font-size: 20px;
	}

	.HTMLPreview>h2,
	.mod_text.type_subtitle{
		font-size: 17px;
	}

	.HTMLPreview .note{
		text-decoration: underline;
		text-decoration-style: dashed;
	}

	.HTMLPreview .clr{
		color:fuchsia;
	}

	.HTMLPreview a{
		text-decoration: underline;
		pointer-events: none;
		color: var(--accentColor);
	}

	.HTMLPreview .align_left{
		text-align: left;
	}
	.HTMLPreview .align_right{
		text-align: right;
	}
	.HTMLPreview .align_center{
		text-align: center;
	}
	.HTMLPreview .align_justify{
		text-align: justify;
	}

	.mod_text.type_hat .HTMLPreview{
		font-size: 1.1em;
		font-weight: 500px;
	}

	.mod_text.type_hat .HTMLPreview>p:first-child{
		font-weight: 500;
		font-size: 1.1em;
	}

		.mod_text.type_hat .HTMLPreview>p:first-child::first-letter{
			font-size: 3em;
			float: left;
			margin: -.25em .1em -.25em 0;
		}

	.mod_text.type_bigtext .HTMLPreview{
		font-size: 1.5em;
	}

	.mod_text.type_citation .HTMLPreview{
		
	}
	.mod_text.type_citation .fieldname_author{
		font-style: italic;
	}
		.mod_text.type_citation .fieldname_author::before{
			content: "- ";			
		}

	.mod_text.type_indented{
		border-left: 2px solid var(--accentColor);
		padding-left: 1em;
	}

	.mod_text.type_framed{
		border:2px solid var(--accentColor);
		padding: .5em;
	}

	.mod_text.type_exergue{
		font-size: 1.5em;
		color: var(--accentColor);
	}


.mod_button{
	
}

	.mod_button>ul{
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		gap: 5px;
		flex-wrap: wrap;
	}

		.mod_button>ul>li{
			display: block;
			padding: 5px;
			border-radius: 5px;
			border:1px solid var(--accentColor);
		}

.mod_form{
	max-height: 200px;
	overflow: hidden;
}

	.mod_form>ul{
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		gap: 10px;
		flex-direction: column;
	}

		.mod_form>ul>li{
			display: block;
		}

			.mod_form>ul>li .fieldname_label{
				padding-bottom: 5px;
				font-size: .8em;
				text-transform: uppercase;
			}
			.mod_form>ul>li .fieldname_placeholder{
				padding: 5px;
				border-radius: 5px;
				font-style: italic;
/*				border:1px solid #FFF;*/
				background: #FFF;
				color: rgba(0,0,0,.5);
				opacity: .5;
			}



/* Quill  Fred */
.ql-bubble .ql-toolbar button.ql-custom_link,
.ql-bubble .ql-toolbar button.ql-custom_note{
	width: 50px;
	color: #ccc;
}/**/
.ql-bubble .ql-toolbar button.ql-custom_link::after{
	content: 'Lien';
}
.ql-bubble .ql-toolbar button.ql-custom_note::after{
	content: 'Note';
}

/* KILL FRED */
.xdebug-var-dump{
	background: white;
	z-index: 999999;
}

/* Please remove Fred from this file */

ul.pricelist{
	display: block;
	height: auto;
	list-style: none;
	padding: 0;
}
ul.pricelist>li{
	display: block;
}
	ul.pricelist>li>.displayPrice{
		height: 50px;
		clear: both;
		margin-bottom: 5px;
	}
		ul.pricelist>li>.displayPrice>div{
			float: left;
			padding: 5px;
			
		}
		ul.pricelist>li>.displayPrice>div>span{
			display: block;
		}
		ul.pricelist>li>.displayPrice>div>a{
			display: block;
		}
		ul.pricelist>li>.displayPrice>div>a:hover{
			cursor: pointer;
		}
		ul.pricelist>li>.displayPrice>div.price{
			background-color: var(--accentColor) ;
			color:var(--bg1);
		}
	ul.pricelist>li>.displayPrice.hidden,
	ul.pricelist>li>.modifyform.hidden{
		display: none;
	}

/*
Moved somewhere else. Search for .customLink

.customLink{
	text-decoration: underline;
}
.customLink:hover{
	cursor: pointer;
}*/

/*.customLink:hover::before{
	content: 'X';
	margin-right: 5px;
	color: red;
}*/


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


.popup.previewPopup{

}

	.popup.previewPopup>div{
		/*width: calc(100% - 20px);*/
		/*max-width: 1500px;*/
		max-height: 90vh;
		/*width: auto;*/
		max-width: calc(100vw - 20px);
		width: auto;
	}

		.popup.previewPopup>div>header h1{
			width: auto;
		}

			.popup.previewPopup>div>header>span>a{
				font-size: 0;
			}
			.popup.previewPopup>div>header>span>a::before{
				display: block;
				font-size: 1rem;
			}

		.popup.previewPopup>div>div>aside{
			/*width: calc(80% - 60px);*/
			width: auto;
			background: var(--bg1);
			white-space: nowrap;
		}

		.contentPreviewOptionSize,
		.contentPreviewOptionLang{
			cursor: pointer;
			position: relative;
		}

			.contentPreviewOptionSize::before{
				font-weight: normal;
				font-family: 'icomoon' !important;
				font-size: 20px;
			}
			.contentPreviewOptionSize[data-size="computer"]::before{
				content: "\e905";
			}
			.contentPreviewOptionSize[data-size="tablet"]::before{
				content: "\e92a";
			}
			.contentPreviewOptionSize[data-size="phone"]::before{
				content: "\e933";
			}

			.contentPreviewOptionSize>span{
				display: block;
				position: absolute;
				left: -30px;
				bottom: -15px;
				line-height: 19px;
				width: 100%;
				width: calc(100% + 60px);
				text-align: center;
				font-size: 10px;
				opacity: 0;
				pointer-events: none;
			}
			.contentPreviewOptionSize:hover>span{
				opacity: 1;
			}


			#contentPreviewDiv{
				padding: 0;
				height: calc(90vh - 61px);
			}

				form#contentPreviewForm{
					display: none;
				}

				iframe#contentPreviewFrame{
					border: 0;
					width: 100%;
					height: 100%;
					/*height: calc(90vh - 200px);*/
					height: calc(90vh - 61px);

					background: #FFF;

					display: block;
					margin: 0 auto;

					transition: width .4s;
				}

				iframe#contentPreviewFrame.computer{
					width: 1500px;
				}

				iframe#contentPreviewFrame.phone{
					width: 320px;
				}

				iframe#contentPreviewFrame.tablet{
/*					width: 768px;*/
					width:820px;
				}

.ql-editor.ql-blank::before{
	color: var(--foreground) !important;
	opacity: .6 !important;
	font-style: normal !important;
	left: 10px !important;
}

























ul.messageBackground{
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;

	font-family: 'GreycliffCF', sans-serif;
	font-size: 14px;

	transition: opacity .5s;
}
ul.messageBackground.new,
ul.messageBackground.old{
	opacity: 0;
}

	ul.messageBackground>li{
		--msgColor: var(--disabledColor);

		position: relative;
		display: block;
		border-radius: 6px;
		background-color: var(--msgColor);
	}
	ul.messageBackground>li.info{
		--msgColor: var(--infoColor);
	}
	ul.messageBackground>li.success{
		--msgColor: var(--successColor);
	}
	ul.messageBackground>li.error{
		--msgColor: var(--dangerColor);
	}

		ul.messageBackground>li::before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 30px;
			height: 30px;

			background-size: 15px auto;
			background-position: 50% 50%;
			background-repeat: no-repeat;
			filter: invert(1);

			/*
			border-radius: 10px 0 0 10px;
			color: #FFFFFF;
			font-size: 15px;
			text-align: center;
			*/

			background-image: url('../medias/icon_info.svg');
		}

	/*
	ul.messageBackground>li.info::before{
		content: 'i';
	}
	*/
	ul.messageBackground>li.success::before{
		background-image: url('../medias/icon_success.svg');
		/*content: '\1f603';*/
	}
	ul.messageBackground>li.error::before{
		background-image: url('../medias/icon_error.svg');
		/*content: '!';*/
	}
		ul.messageBackground>li>div{
			background-color: #FFFFFF;
			border-radius: 3px;
			padding: 10px 20px 10px 10px;
		}
			ul.messageBackground>li>div .btnClose{
				display: block;
				-webkit-appearance: none;
				background: transparent;
				border: none;
				border-radius: 0;
				margin: 0;
				padding: 0;
				font-size: 10px;

				position: absolute;
				top: 10px;
				right: 10px;
				color: black;
				opacity: 0;
			}
			ul.messageBackground>li:hover>div .btnClose{
				opacity: 1;
			}

			ul.messageBackground>li>div .btnClose:hover{
				color: var(--dangerColor);
			}
				ul.messageBackground>li>div .btnClose::before{
					
				}

			/*title*/
			ul.messageBackground>li>div>h3{
				margin: 0;
				padding: 0;
				color: var(--msgColor);
				font-size: 15px;
			}

			/*text*/
			ul.messageBackground>li>div>div{
				margin: 0;
			}

				ul.messageBackground>li>div>div>p{
					margin: 1em 0 0 0;
				}

				ul.messageBackground>li>div>div>p:first-child{
					margin-top: 0;
				}

				ul.messageBackground>li>div>div>ul{
					/* todo */
				}

					ul.messageBackground>li>div>div>ul>li{
						/* todo */
					}

			/*buttons*/
			ul.messageBackground>li>div>ul{
				list-style: none;
				margin: 15px 0 0 0;
				padding: 0;
			}

				ul.messageBackground>li>div>ul>li{
					margin-top: 5px;
				}

					ul.messageBackground>li>div>ul>li>button{
						width: 100%;
						background-color: var(--msgColor);
						color: #FFF;
						border: none;
					}

			ul.messageBackground>li>div>ul.nbBtn1{

			}

				ul.messageBackground>li>div>ul.nbBtn1>li{

				}

					ul.messageBackground>li>div>ul.nbBtn1>li>button{

					}

			ul.messageBackground>li>div>ul.nbBtn2{
				float: right;
			}

				ul.messageBackground>li>div>ul.nbBtn2>li{
					float: right;
					margin-right: 5px;
				}
				ul.messageBackground>li>div>ul.nbBtn2>li:first-child{
					margin-right: 0;
				}

					ul.messageBackground>li>div>ul.nbBtn2>li>button{

					}

					ul.messageBackground>li>div>ul.nbBtn2>li>button{
						background-color: var(--dangerColor);
					}

					ul.messageBackground>li>div>ul.nbBtn2>li:first-child>button{
						background-color: var(--successColor);
					}



			ul.messageBackground>li>div::after{
				content: "";
				clear: both;
				display: block;
			}

/*
			ul.messageBackground>li>div ul{
				padding: 20px 0 20px 20px;
				margin: 0;
				list-style: none;

			}
			ul.messageBackground>li>div h3+ul{
				padding: 0 0 20px 20px;
			}
*/



ul.messageBackground.corner{
	position: absolute;
	height: auto;
	width: 360px;
	top: 0;
	right: 0;
	z-index: 1000;

	box-sizing: border-box;
	max-height: 100vh;
	overflow-y: auto;
	background: #000;
	background: rgba(0,0,0,0.15);
	box-shadow: 0 0 20px 15px rgba(0,0,0,0.15);

	padding: 25px;

	/*pointer-events: none;*/
}
	ul.messageBackground.corner>li{
		padding: 3px 3px 3px 30px;
		color: black;
		margin-top: 10px;

		/*pointer-events: auto;*/

		transition: transform .5s, opacity .5s, margin-bottom .5s;
	}

	ul.messageBackground.corner>li.new,
	ul.messageBackground.corner>li.old{
		transform: translateX(100%);
		opacity: 0;
	}

	ul.messageBackground.corner>li:first-child{
		margin-top: 0;
	}

		ul.messageBackground.corner>li::before{
			top: 50%;
			transform: translateY(-50%);
		}



ul.messageBackground.center{
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 1000;
}
	ul.messageBackground.center>li{
		position: absolute;
		max-width: 500px;
		min-width: 200px;
		top: 50%;
		left: 50%;
		padding: 5px 5px 5px 50px;
		border-radius: 10px;
		color: black;
		transform: translate(-50%, -50%);
	}

		ul.messageBackground.center>li::before{
			top: 10px;
			transform: none;
		}

		ul.messageBackground.center>li>div{
			padding: 20px;
		}

			ul.messageBackground.center>li>div>h3{
				font-size: 20px;
			}







fieldset.only4type,
div.fieldGroup.only4type,
label.only4type,
fieldset[data-opt],
div[data-opt],
label[data-opt],
span[data-opt]{
	display: none;
}

fieldset.only4type.displayOnly4type,
div.only4type.displayOnly4type,
fieldset.only4optvisible[data-opt],
div.only4optvisible[data-opt]{
	display: block;
}

span.only4type.displayOnly4type,
span.only4optvisible[data-opt]{
	display: inline;
}


div.fieldGroup.only4type.displayOnly4type,
label.only4type.displayOnly4type,
div.fieldGroup.only4optvisible[data-opt],
label.only4optvisible[data-opt]{
	display: flex;
}

/*Fred did that, kill him*/
#app > main.subnav > div.advancedSearchWrapper{
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	z-index: 10;
	background-color: rgba(0,0,0,.5);
}
	#app > main.subnav > div.advancedSearchWrapper > form#advancedSearch{
		height: 70%;
		width: 70%;
		margin-left: 50%;
		margin-top: 20px;
		transform: translateX(-50%);
		padding: 20px;
		background-color: red;
		background-color: var(--bg2);
	}




	.popup .tabParent .autoScroll{
		scroll-behavior: auto;
	}
		.popup .tabParent .autoScroll form table{
			width: 100%;
		}


























td.info{
	position: relative;
}

	td.info span.infoBox{
		pointer-events: none;
		display: none;
		background: #000000;
		border-radius: 5px;
		border: 1px solid white;
		padding: 5px;
		position: absolute;
		opacity: .9;
		z-index: 2;
		white-space: nowrap;
	}

		td.info span.infoBox::before{
			content: "";
			position: absolute;
			top: 0;
			left: 5px;
			width: 10px;
			height: 10px;
			background: #000000;
			border: 1px solid white;
			border-right: 0;
			border-bottom: 0;
			border-bottom-right-radius: 100%;
			transform: translateY(-50%) rotate(45deg);
		}

td.info:hover{
	z-index: 3;
}

	td.info:hover span.infoBox{
		display: block;
		z-index: 3;
	}






ul.subscriptions{
	list-style: none;
	margin: 0;
	padding: 0;
}

	ul.subscriptions>li{
		position: relative;
		display: block;
		margin: 0;
		padding: 25px;
		border: 2px solid var(--foreground);
		border-radius: 5px;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

		ul.subscriptions>li h3,
		ul.subscriptions>li h4{
			text-align: left;
			text-transform: none;
			margin: 0;
			padding: 0;
			font-size: 20px;

			font-weight: bold;
		}

			ul.subscriptions>li h3>a,
			ul.subscriptions>li h4>a{
				text-decoration: none;
			}

			ul.subscriptions>li h3 span,
			ul.subscriptions>li h4 span{
				font-size: 14px;
			}

		ul.subscriptions>li>span{

		}

			ul.subscriptions>li>span>strong{
				text-transform: uppercase;
				font-weight: bold;
			}

		ul.subscriptions>li>div.side{
			flex-grow: 0;
			/*position: absolute;*/
			/*top: 50%;*/
			right: 25px;
			width: 50px;
			font-size: 20px;
			line-height: 1em;
			text-align: center;

			margin: -15px 0;
			/*transform: translateY(-50%);*/
		}

			ul.subscriptions>li>div>div{
				padding: 10px 0;
			}

			ul.subscriptions>li>div>div+div{
				border-top: 1px solid var(--foreground);
			}

	ul.subscriptions>li+li{
		margin-top: 10px;
	}







#editPopup{
	position: absolute;
	top: 50px;
	left: 50px;
	right: 50px;
	bottom: 50px;
	z-index: 20;
	background: #000;
	box-shadow: 0 0 100px 100px rgba(0, 0, 0, .5);
}

	#editPopup>header{
		background: var(--bg3);
		height: 44px;
		line-height: 44px;
		border-bottom: 1px solid var(--bg6);

		padding: 10px;
		box-sizing: border-box;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

		#editPopup>header>h1{

		}

		#editPopup>header>button{

		}

	#editPopup>iframe{
		border:none;
		position: absolute;
		width: 100%;
		height: calc(100% - 44px);
	}



ul.comments{
	margin: 0;
	padding: 0;
	list-style: none;
	--color:var(--accentColor);
}

	ul.comments>li{
		display: block;
		margin: 0;
		padding: 0;
		background: var(--bg1);
		border-radius: 10px;

		display: flex;
		margin-top: 10px;
	}
	.popup ul.comments>li{
		background: var(--bg4);
	}
	ul.comments>li:first-child{
		margin-top: 0;
	}
	ul.comments>li.s_pending{
/*		--color:var(--warningColor);*/
	}
	ul.comments>li.s_pending.signaled{
		--color:var(--warningColor);
	}
	ul.comments>li.s_disabled{
		--color:var(--dangerColor);
		color: var(--disabledColor);
	}
	ul.comments>li.s_enabled{
		--color:var(--successColor);
	}

		ul.comments>li a{

		}
		ul.comments>li a:hover{
			text-decoration: underline;
			color: inherit;
		}

		ul.comments>li>div.message{
			flex: 1 1 75%;
		}

			ul.comments>li>div.message>header{
				display: flex;
				padding: 20px;
				border-bottom: 1px solid var(--color);
				color: var(--color);
			}

				ul.comments>li>div.message>header>a.src{
					flex: 1 1 auto;
				}

				ul.comments>li>div.message>header>div.like{
					flex: 0 0 auto;
					direction:rtl;
				}

					ul.comments>li>div.message>header>div.like::before{
						vertical-align: bottom;
						display: inline-block;
						margin-left: .5em;
					}

				ul.comments>li>div.message>header>a.report{
					flex: 0 0 auto;
					border-left: 1px solid var(--color);
					padding: 20px;
					margin: -20px -20px -20px 20px;
				}
				ul.comments>li>div.message>header>a.report:empty{
					display: none;
				}

					ul.comments>li>div.message>header>a.report::before{
						vertical-align: bottom;
						display: inline-block;
						margin-right: .5em;
					}

			ul.comments>li>div.message>div{
				padding: 20px;
			}

				ul.comments>li>div.message>div>.date{
					color: var(--color);
					margin-bottom: 1em;
				}

				ul.comments>li>div.message>div>.author{
					display: inline-block;
					font-weight: bold;
					margin-bottom: .5em;
				}

				ul.comments>li>div.message>div>.message{

				}


		ul.comments>li>div.actions{
			flex: 1 1 25%;
			min-width: 250px;
			border-left: 1px solid var(--color);
			padding: 20px;
		}

			ul.comments>li>div.actions>div{
				position: sticky;
				top: 0;
			}

				ul.comments>li>div.actions>div>p{
					font-weight: bold;
					font-size: 10px;
				}

				ul.comments>li>div.actions>div>a{
					margin-top: 10px;
				}
				ul.comments>li>div.actions>div>a:first-child{
					margin-top: 0;
				}

		ul.comments>li.s_enabled>div.actions,
		ul.comments>li.s_disabled>div.actions{
			text-align: center;
			text-transform: uppercase;
		}
		ul.comments>li.s_enabled>div.actions{
			color: var(--successColor);
		}
		ul.comments>li.s_disabled>div.actions{
			color: var(--dangerColor);
		}

			ul.comments>li.s_enabled>div.actions a,
			ul.comments>li.s_disabled>div.actions a{
				opacity: .5;
				color: #FFF;
				font-size: 10px;
				font-weight: bold;
			}

			ul.comments>li>div.actions textarea{
				margin-top: 10px;
				display: none;
			}

			ul.comments>li>div.actions input:checked+span+textarea{
				display: block;
				height: 75px;
			}

			ul.comments>li>div.actions p.note{
				background: var(--bg6);
				padding: 10px;
				font-weight: normal;
				font-size: 12px;
				border-radius: 5px;
			}


ul.printbox{
	display: block;
	margin: 0;
	padding: 0;
	background: var(--bg6);
	border: 1px solid var(--bg1);

	width: 425px;
	height: 550px;
	box-sizing: border-box;

	padding: 25px 10px;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: space-between;
}

	ul.printbox>li{
		display: block;
		list-style: none;
		padding: 0;
		border-radius: 5px;
		border:1px solid var(--bg1);
		box-sizing: border-box;
		margin: 0;

		width: 130px;
		height: 49px;
	}
	ul.printbox>li:hover{
		background: var(--accentColor);
		cursor: pointer;
	}


main[data-url^=comment] header nav ul.layout li a span{
	background-image: linear-gradient(var(--bgcolor), var(--bgcolor));
	background-size: 100% 1px;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	padding-bottom: 2px;
	padding-top: 2px;
}

main[data-url^=comment] header nav ul.layout li[data-target=search_state-pending] a span{
	--bgcolor: var(--accentColor);
}

main[data-url^=comment] header nav ul.layout li[data-target=search_state-reported] a span{
	--bgcolor: var(--warningColor);
}

main[data-url^=comment] header nav ul.layout li[data-target=search_state-enabled] a span{
	--bgcolor: var(--successColor);
}

main[data-url^=comment] header nav ul.layout li[data-target=search_state-disabled] a span{
	--bgcolor: var(--dangerColor);
}

pre.xdebug-var-dump{
	color: black;
}


#overFx{
	position: absolute;
	top: 20px;
	left: 20px;
	width: 100px;
	height: 20px;
	background: var(--accentColor);
	pointer-events: none;

	border-radius: 5px;
}



.seopreview_fb_pc,
.seopreview_google{
	background: var(--bg2);
	border-radius: 5px;
	padding: 10px;
	box-sizing: border-box;
	margin: 15px 0 0 0;
	min-height: 100px;

	max-width: 500px !important;
	min-width: 0 !important;
}

.seopreview_fb_pc{
	background: #EEF0F3;
	color: #000;
	border-radius: 0;
	padding: 0;
}

	.seopreview_fb_pc>div{
		width: 100%;
		aspect-ratio: 1200 / 630;
		border:1px solid #EAEAEA;
		background: #EAEAEA;
		border-left: 0;
		border-right: 0;
	}

		.seopreview_fb_pc>div>img{
			width: 100%;
			height: 100%;
			display: block;
			object-fit: cover;
		}

	.seopreview_fb_pc>header{
		font-family: system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
		padding: 12px;
	}

		.seopreview_fb_pc>header>span{
			display: block;
		}

		.seopreview_fb_pc>header>span:first-child{
			text-transform: uppercase;
			font-size: 13px;
			line-height: 16px;
			opacity: .5;
		}

		.seopreview_fb_pc>header>span:last-child{
			font-size: 17px;
			font-weight: 600;
			line-height: 20px;
		}

.seopreview_google{
	font-family: Helvetica Neue,sans-serif;
}

	.seopreview_google>header{
		padding-left: 45px;
		position: relative;
	}

		.seopreview_google>header::before{
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			width: 28px;
			height: 28px;
			border-radius: 100%;
			background: #DDDDDD;
			content: "";
			display: block;
		}

		.seopreview_google>header>*{
			display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: auto;
			opacity: .8;
		}

		.seopreview_google>header>*:first-child{
			font-size: 14px;
			line-height: 20px;
		}
		.seopreview_google>header>*:last-child{
			font-size: 12px;
			line-height: 18px;
		}

	.seopreview_google>span{
		display: block;
		font-size: 14px;
		line-height: 22px;
	}

	.seopreview_google>header+span{
		color: #7eaaff;
		font-size: 20px;
		line-height: 28px;
	}





button[data-item-name="convert-to"],
button[data-item-name="convert-to"]+.ce-popover-item-separator{
	display: none !important;
}
button[data-item-name="convert-to"] svg path{
/*	stroke:transparent;*/
}