/*
	=====================
	hylide User Interface
	14.10.2021
	V1.00.01
	---------------------
	Copyright YGG
	www.ygg.de
	=====================
*/

/* Aktiver Baustein erheben, damit der Texteditor für Formatierungen,
   die "isolation: isolate" verwenden, nicht von nachfolgenden
   Bausteinen überdeckt wird. */
.component01.active { z-index: 2; }

/* ===== Individuelle Formatierungen ===== */
[hui="root"] { padding: 50px; --box_offset: 50px; --box_padding_x: 50px; }
[hui="root"] { box-sizing: content-box; }
.component_space_hui.flat [hui="root"] { padding-top: 20px; padding-bottom: 20px; }
.component_space_hui.xflat [hui="root"] { padding-top: 5px; padding-bottom: 5px; }

/* Spezialabstände - expand_area */
/* Reduziert die Abstände auf ein Minimum, wenn Ausdehnung auf "Gesamtbreite" gesetzt ist */
.container_layout_compact .component_space_hui.expand_area .hui_box.hui_box_expand { max-width: none; }
.component_space_hui.expand_area .hui_box_expand[hui="root"] { padding: 0; }
.component_space_hui.expand_area .hui_box_expand [hui="box_main"]::before,
.component_space_hui.expand_area .hui_box_expand [hui="box_main"]::after { opacity: 0; }

/* Formatierung für den Texteditor */
/* Diese Formatierung wird benötigt, damit der Editor richtig zu bedienen ist. */
/* Ohne pre-wrap wird kein Leerzeichen beim eintippen angelegt. Dieser Bug tritt auf, */
/* wenn man einen Text am Blockende bzw. in einem leeren Eingabefeld eingibt */
.hui_format:focus { white-space: pre-wrap; }	/* Bug in Firefox, Edge, IE -> blocksatz funktioniert hier nicht */

/* Markierungen für Ausdehnung */
[hui="box_main"]::before,
[hui="box_main"]::after {
	content: "";
	transition: 0.3s ease all;
	position: absolute;
	top: 0px;
	bottom: 0px;
	height: 40px;
	width: 30px;
	margin: auto;
	border-radius: 5px;
	background-color: white;
	background-image: url(../pic/expand01.png);
	background-repeat: no-repeat;
	opacity: 0;
	pointer-events: none;
}
[hui="box_main"]::before { left: 0px; border-radius: 0px 5px 5px 0px; background-position: 10px -10px; }
[hui="box_main"]::after { right: 0px; border-radius: 5px 0px 0px 5px; background-position: -40px -10px; }
.hui_box.hui_box_expand [hui="box_main"]::before,
.hui_box.hui_box_expand_left [hui="box_main"]::before { opacity: 1; }
.hui_box.hui_box_expand [hui="box_main"]::after,
.hui_box.hui_box_expand_right [hui="box_main"]::after { opacity: 1; }

/* ===== Definition der Standardbreite (Fallbackwert) ===== */
:root { --set_box_main: 1200; }
/* ===== Text / Schriftgröße ===== */
html {
	line-height: initial;
	font-size: 1px;
}
@media screen and (max-width: 3100px) { html { font-size: 1.4px; } }
@media screen and (max-width: 2800px) { html { font-size: 1.3px; } }
@media screen and (max-width: 2300px) { html { font-size: 1.2px; } }
@media screen and (max-width: 2100px) { html { font-size: 1.0px; } }
@media screen and (max-width: 1950px) {
	html:not(.bsc_minimized_box01):not(.bsc_minimized_box03):not(.bsc_minimized_all) { 
		font-size: calc((900 / var(--box_main, var(--set_box_main))) * 1px);
	}
}


/* Schaltfläche - MouseOver */
.hui_button:hover {
	box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.0);
	top: 0px;
}

/* Schaltflächen - Vorschau */
.sys_pulldown01 .option > [class*="hui_button"].hui_button_3d > span { top: -2px; }
.sys_pulldown01 .option .hui_button.autoclr { --clr: #999999; --bgr: #ffffff; }


/* Vorschau für Farben (Editor, Listen, etc.) */
.sys_pulldown01 .option span[class*="hui_bgr"]::before {
	content: "A";
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	font-family: georgia, serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	border: none !important;
	padding: 0px !important;
	letter-spacing: 0 !important;
}
[class*="hui_bgr_preview_"] {
	position: relative;
	overflow: hidden;
	background-color: white;
	border: none !important;
}
[class*="hui_bgr_preview_"]::before {
	content: "A";
	position: absolute;
	font-family: georgia, serif !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 38px !important;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	text-align: center !important;
	border: none !important;
	padding: 0px !important;
	letter-spacing: 0 !important;
}
[class*="hui_color_preview_"] {
	position: relative;
	overflow: hidden;
	background-color: white;
	border: none !important;
}
[class*="hui_color_preview_"]::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	border: none !important;
	box-shadow: 100px 100px inset;
}