.zal.test {
	color: pink;
}


:root {
	/* Theme erstellen: https://www.w3schools.com/w3css/w3css_color_generator.asp */
	/* leider müssen wir die RGB-Werte direkt vorhalten, sonst kommen wir später bei Opacity nicht weiter */
	/* Converter zb: http://www.zonums.com/online/color_converter/ */

	--rgbP0: 255, 105, 0; /* GRUNDTON PRIMARY*/
	--rgbPL1: 255, 136, 51; /* Abstufungen hell*/
	--rgbPL2: 255, 166, 102;
	--rgbPL3: 255, 196, 153;
	--rgbPL4: 255, 225, 204;
	--rgbPL5: 255, 246, 240; /* Abstufung heller*/
	--rgbPD1: 230, 96, 0; /* Abstufungen dunkel */
	--rgbPD2: 204, 85, 0;
	--rgbPD3: 179, 74, 0;
	--rgbPD4: 153, 64, 0;
	--rgbPD5: 128, 53, 0; /* Abstufunden dunkler */
	--rgbWhite: 255, 255, 255;
	--rgbBlack: 0, 0, 0;
	--accentTheme: rgb(var(--rgbP0));
	--accentThemeTxt: var(--brighter);
	--accentThemeL0: var(--accentTheme);
	--accentThemeL1: rgb( var(--rgbPL1));
	--accentThemeL2: rgb( var(--rgbPL2));
	--accentThemeL3: rgb( var(--rgbPL3));
	--accentThemeL4: rgb( var(--rgbPL4));
	--accentThemeL5: rgb( var(--rgbPL5));
	--accentThemeL1txt: var(--darker);
	--accentThemeL2txt: var(--darker);
	--accentThemeL3txt: var(--dark);
	--accentThemeL4txt: var(--dark);
	--accentThemeL5txt: var(--dark);
	--accentThemeD0: var(--accentTheme);
	--accentThemeD1: rgb( var(--rgbPD1));
	--accentThemeD2: rgb( var(--rgbPD2));
	--accentThemeD3: rgb( var(--rgbPD3));
	--accentThemeD4: rgb( var(--rgbPD4));
	--accentThemeD5: rgb( var(--rgbPD5));
	--accentThemeD1txt: var(--brighter);
	--accentThemeD2txt: var(--brighter);
	--accentThemeD3txt: var(--bright);
	--accentThemeD4txt: var(--bright);
	--accentThemeD5txt: var(--bright);
	/* einstellen was generell "hell" und "dunkel" aus dem Schema sein soll: */
	--accentThemeLight: var(--accentThemeL4);
	--accentThemeLightTxt: var(--accentThemeL4txt);
	--accentThemeDark: var(--accentThemeD5);
	--accentThemeDarkTxt: var(--accentThemeD5txt);
	/* COMPLIMENTARY - Zweite Akzentfarbe */ /* https://www.shadegenerator.com/58F3E1 https://htmlcolorcodes.com/color-picker/ */
	--rgbC0: 179, 74, 0; /* GRUNDTON PRIMARY*/
	--rgbCL1: 191, 79, 0; /* Abstufungen hell*/
	--rgbCL2: 204, 84, 0;
	--rgbCL3: 217, 89, 0;
	--rgbCL4: 230, 95, 0;
	--rgbCL5: 242, 100, 0; /* Abstufung heller*/
	--rgbCD1: 128, 53, 0; /* Abstufungen dunkel */
	--rgbCD2: 115, 47, 0;
	--rgbCD3: 102, 42, 0;
	--rgbCD4: 89, 37, 0;
	--rgbCD5: 77, 32, 0; /* Abstufungen dunkler */
	--complimentaryTheme: rgb(var(--rgbC0));
	--complimentaryThemeTxt: var(--bright);
	--complimentaryThemeLight: var(--complimentaryThemeL3);
	--complimentaryThemeLightTxt: var(--complimentaryThemeL3txt);
	--complimentaryThemeDark: var(--complimentaryThemeD5);
	--complimentaryThemeDarkTxt: var(--complimentaryThemeD5txt);
	--complimentaryThemeL0: var(--complimentaryTheme);
	--complimentaryThemeL1: rgb( var(--rgbCL1));
	--complimentaryThemeL2: rgb( var(--rgbCL2));
	--complimentaryThemeL3: rgb( var(--rgbCL3));
	--complimentaryThemeL4: rgb( var(--rgbCL4));
	--complimentaryThemeL5: rgb( var(--rgbCL5));
	--complimentaryThemeL1txt: var(--bright);
	--complimentaryThemeL2txt: var(--bright);
	--complimentaryThemeL3txt: var(--bright);
	--complimentaryThemeL4txt: var(--bright);
	--complimentaryThemeL5txt: var(--bright);
	--complimentaryThemeD0: var(--complimentaryTheme);
	--complimentaryThemeD1: rgb( var(--rgbCD1));
	--complimentaryThemeD2: rgb( var(--rgbCD2));
	--complimentaryThemeD3: rgb( var(--rgbCD3));
	--complimentaryThemeD4: rgb( var(--rgbCD4));
	--complimentaryThemeD5: rgb( var(--rgbCD5));
	--complimentaryThemeD1txt: var(--bright);
	--complimentaryThemeD2txt: var(--bright);
	--complimentaryThemeD3txt: var(--bright);
	--complimentaryThemeD4txt: var(--bright);
	--complimentaryThemeD5txt: var(--bright);
	/* secondary RGB: */
	--rgbS0: 123, 123, 129; /* GRUNDTON SECONDARY */
	--rgbSL1: 149, 149, 153; /* Abstufungen hell*/
	--rgbSL2: 175, 175, 179;
	--rgbSL3: 202, 202, 204;
	--rgbSL4: 228, 228, 230;
	--rgbSL5: 240, 240, 240; /* Abstufung heller*/
	--rgbSD1: 110, 110, 115; /* Abstufungen dunkel */
	--rgbSD2: 98, 98, 102;
	--rgbSD3: 86, 86, 89;
	--rgbSD4: 73, 73, 76;
	--rgbSD5: 61, 61, 64; /* Abstufunden dunkler */
	/* Graustufen */
	--secondaryTheme: rgb(var(--rgbS0)); /* Grundton, daraus Theme erstellen: https://www.w3schools.com/w3css/w3css_color_generator.asp */
	--secondaryThemeTxt: var(--brighter);
	/* lighter-varianten aus w3 unten kopiert */
	--secondaryThemeL0: var(--secondaryTheme);
	--secondaryThemeL1: rgb( var(--rgbSL1));
	--secondaryThemeL2: rgb( var(--rgbSL2));
	--secondaryThemeL3: rgb( var(--rgbSL3));
	--secondaryThemeL4: rgb( var(--rgbSL4));
	--secondaryThemeL5: rgb( var(--rgbSL5));
	--secondaryThemeL1txt: var(--brighter);
	--secondaryThemeL2txt: var(--darker);
	--secondaryThemeL3txt: var(--dark);
	--secondaryThemeL4txt: var(--dark);
	--secondaryThemeL5txt: var(--dark);
	--secondaryThemeD0: var(--secondaryTheme);
	--secondaryThemeD1: rgb( var(--rgbSD1));
	--secondaryThemeD2: rgb( var(--rgbSD2));
	--secondaryThemeD3: rgb( var(--rgbSD3));
	--secondaryThemeD4: rgb( var(--rgbSD4));
	--secondaryThemeD5: rgb( var(--rgbSD5));
	--secondaryThemeD1txt: var(--brighter);
	--secondaryThemeD2txt: var(--brighter);
	--secondaryThemeD3txt: var(--bright);
	--secondaryThemeD4txt: var(--bright);
	--secondaryThemeD5txt: var(--bright);
	/* einstellen was generell "hell" und "dunkel" aus dem Schema sein soll: */
	--secondaryThemeLight: var(--secondaryThemeL4);
	--secondaryThemeLightTxt: var(--secondaryThemeL4txt);
	--secondaryThemeDark: var(--secondaryThemeD4);
	--secondaryThemeDarkTxt: var(--secondaryThemeD5txt);
	/* Themen Ende */
	/* ---------------------------------------------------------------------------------------*/
	/* alte Variablennamen */
	--primary: var(--accentTheme);
	--primaryText: var(--accentThemeTxt);
	--secondary: var(--secondaryTheme);
	--secondaryText: var(--secondaryThemeTxt);
	--tertiary: var(--secondaryThemeL3);
	--tertiaryText: var(--secondaryThemeL3txt);
	/* spezial: */
	--currentColor: var(--mds-gray);
	--currentTextcolor: var(--primaryText);
	--special: var(--accentThemeL2);
	--specialText: var(--accentThemeL2txt);
	/* hell/mittel/dunkel */
	--bright: var(--secondaryThemeLight);
	--veryBright: rgb(var(--rgbWhite));
	--mediumBright: var(--secondaryThemeL3);
	--medium: var(--secondaryThemeL2);
	--dark: var(--secondaryThemeDark);
	--veryDark: rgb(var(--rgbBlack));
	--brightTransparent: rgba( var(--rgbSL5), 0.3);
	--mediumBrightTransparent: rgba(var(--rgbCL4), 0.3);
	/*--mediumTransparent: rgba( var(--rgbPD4), 0.2);*/
	--darkTransparent: rgba( var(--rgbSD5), 0.3);

	--extraHeader: 0px;
}


.room_image {
	vertical-align: middle;
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.switchable-select-popup {
	position: absolute;
	background-color: white;
	left: 0px;
	top: 44px;
	z-index: 1;
	display: none;
	/*max-height: 300px;
	overflow-y: auto;*/
}

@font-face {
	font-family: 'Tiempos Text Regular';
	src: url('Font/TiemposText-Regular.eot');
	src: url('Font/TiemposText-Regular.eot?#iefix') format('embedded-opentype'), url('Font/TiemposText-Regular.woff') format('woff'), url('Font/TiemposText-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Helvetica Now Text';
	src: local('Helvetica Now Text  Medium'), local('Helvetica-Now-Text--Medium'), url('Font/HelveticaNowText-Medium.woff2') format('woff2'), url('Font/HelveticaNowText-Medium.woff') format('woff'), url('Font/HelveticaNowText-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}


:root {
	--font: "Helvetica Now Text", Helvetica, sans-serif;
}

.e-control, .e-css {
	font-family: "Helvetica Now Text", Helvetica, sans-serif!important;
}

.e-schedule .e-schedule-toolbar .e-active-view .e-tbar-btn-text, .e-schedule .e-schedule-toolbar .e-active-view .e-icons {
	color: var(--primary)!important;
}

.rooom_configuration_icon {
	height: 20px;
	width: 24px;
	margin-right: 2px;
	background-repeat: no-repeat;
}


.roundedTag {
	background: var(--primaryTransparent);
	border-radius: 10px;
	border: 1px;
	padding: 4px;
	margin: 4px;
}

/* Semantische Varianten fuer die Machbarkeits-Badges am Event-Provider.
   --successBG / --warningBG kommen aus Content/Site.css. */
.roundedTag.tagPositive {
	background: var(--successBG);
}

.roundedTag.tagWarning {
	background: var(--warningBG);
}

	/* Site_Dark.css definiert --warningBG fuer den Darkmode um (rgba(222,0,0,0.2)), fuer
	   --successBG fehlt das Gegenstueck - dort bliebe das helle Pastellgruen stehen und die
	   helle Schrift waere darauf unlesbar. Deshalb hier nachziehen, in derselben Machart.
	   Site_Dark.css ist mandantenuebergreifend und wird bewusst nicht angefasst. */
	.darkTheme .roundedTag.tagPositive {
		background: rgba(0, 190, 0, 0.2);
	}

/* Maps-Button in der Event-Provider-Hintbox: transparent mit Primaerrahmen und rotem Pin,
   damit er sich vom gefuellten Filter-Button daneben unterscheidet.
   Die Spezifitaet muss .hintbox #inputWrapper button.hintboxInlinebutton aus
   moreCoreDefault.css (1,2,1) schlagen - daher der vollstaendige Selektor statt !important. */
.hintbox #inputWrapper button.hintboxInlinebutton.eventProviderMapsButton {
	background-color: transparent;
	border: 1px solid var(--primary);
	color: var(--primary);
	/* moreCoreDefault setzt ab dem zweiten Inlinebutton einen Schatten als Trennung - beim
	   transparenten Button wirkt der wie ein Rendering-Fehler. */
	box-shadow: none;
}

	/* hoverDark waere auf dunklem Grund praktisch unsichtbar */
	.hintbox #inputWrapper button.hintboxInlinebutton.eventProviderMapsButton:hover {
		background-color: var(--primaryTransparent);
	}

/* Maps-Pin in der Trefferzeile des SelectEntityDialog (linkAttribute-Feature).
   Ohne eigene Regel erbt der Link die Textfarbe der Zeile und ist als Bedienelement nicht
   erkennbar. Gleiche Optik wie der Maps-Button am Feld: transparent, Primaerrahmen, Primaerfarbe.
   Bewusst hier und nicht in moreCoreDefault.css - dieses Repo ist ein ZAL-Fork und kein anderer
   Dialog nutzt linkAttribute. */
.selectEntityDialog #rightContainer a.itemLink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border: 1px solid var(--primary);
	border-radius: var(--round);
	color: var(--primary);
	text-decoration: none;
}

	.selectEntityDialog #rightContainer a.itemLink:hover {
		background-color: var(--primaryTransparent);
	}

.globalNewsContainer {
	text-align: center;
	font-size: 22px;
	background: var(--primary);
	color: var(--accentThemeL1txt);
}

.weekend {
	color: gray;
}
/* ---------------------------------------------------------------------------------------
   Evento 4.0: Restaurant + Aktivitaet im externen Formular (ProviderRow), Mockup 4
   --------------------------------------------------------------------------------------- */
.providerBlockTitle {
	margin-bottom: 8px;
}

.providerBlockRows {
	border: 1px solid var(--borderColor, #ddd);
	border-radius: 4px;
	padding: 8px;
}

.ProviderRow + .providerInlineMessage,
.providerInlineMessage + .ProviderRow {
	margin-top: 12px;
}

.providerRowTypeCell {
	padding-top: 28px;
}

.providerRowTypeTag {
	display: inline-block;
	font-size: small;
	font-weight: bold;
}

.providerRowBadges {
	display: flex;
	flex-wrap: wrap;
	font-size: small;
}

.providerNearby {
	margin-top: 8px;
	padding: 8px;
	border: 1px dashed var(--primary);
	border-radius: 4px;
	background: var(--primaryTransparent);
}

.providerNearbyTitle {
	font-weight: bold;
	font-size: small;
	margin-bottom: 4px;
}

.providerNearbyHint {
	font-size: small;
}

.providerNearbyCards {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.providerNearbyCard {
	min-width: 170px;
	padding: 8px 10px;
	border: 1px solid var(--borderColor, #ddd);
	border-radius: 4px;
	background: var(--bgColor, #fff);
}

.providerNearbyCardName {
	font-weight: bold;
}

.providerNearbyCardInfo {
	font-size: small;
	opacity: 0.8;
}

.providerNearbyCardAdd {
	font-size: small;
	font-weight: bold;
	color: var(--primary);
}

/* Hinweis unter dem Restaurantfeld: Inline statt Popup, weil Popups weggeklickt werden */
.providerInlineMessage {
	padding: 8px 12px;
	border-radius: 4px;
	background: var(--primary);
	color: #fff;
	font-weight: bold;
	font-size: small;
}

.providerDistance {
	margin-top: 8px;
	font-weight: bold;
}

.providerNearbyCardActions {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.providerNearbyCardInfoLink {
	color: var(--primary);
}

/* Info-Button im Filterdialog neben dem Maps-Pin */
.selectEntityDialog #rightContainer a.itemLink.itemInfo {
	margin-right: 4px;
}

/* Detaildialog (i) zu Restaurant/Aktivitaet */
.providerDetail {
	max-width: 560px;
}

.providerDetailSubtitle {
	font-weight: bold;
	margin-bottom: 8px;
}

.providerDetailFacts > div {
	margin: 2px 0;
}

.providerDetailHeading {
	font-weight: bold;
	margin-top: 12px;
}

.providerDetailTiers {
	border-collapse: collapse;
	margin-top: 4px;
}

	.providerDetailTiers th,
	.providerDetailTiers td {
		padding: 2px 12px 2px 0;
		text-align: left;
	}

.providerDetailInfo {
	margin-top: 12px;
}

.providerDetailLinks {
	margin-top: 12px;
	display: flex;
	gap: 16px;
}

	.providerDetailLinks a {
		color: var(--primary);
	}