/*******************************************************************************
 * GAIA-MVprofessional CSS-Styles
 */
/* *****************************************************************************
 * globale Variablen
 * *****************************************************************************
 */
:root {
	/* Ausgestaltung Scrollbars */
	--gaia-scrollbar-track-color: rgb(255,255,0);
	--gaia-scrollbar-color: rgb(0,255,255);
	/* Chrome/Chromium-Edge */
	--gaia-scrollbar-size0: 1.375rem;
	--gaia-scrollbar-size1: 2.750rem;
	--gaia-scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
	/* Firefox */
	--gaia-scrollbar-ff-width: thin; /* thin|auto|none */
	/* auf Desktop erscheinen Scrollbalken */
	--gaia-dialog-content-padding-right: 0;
	/* i. Zhg. mit IPAD und Scrollbalken */
	--gaia-dialog-content-padding-right-mobile: 1.1em;

	/* JQueryicons - GAIAs Fontcolor
		#265380  s.i.f. --akzentColor5
		erzeugt mit http://download.jqueryui.com/themeroller/images/ui-icons_265380_256x240.png
	*/
	--baseJqueryIconsUrl0: url("images/ui-icons_265380_256x240.png");
	/* JQueryicons - GAIAs Hintergrundfarbe
		#f6f9fb s.i.f. --akzentColor1
		erzeugt mit http://download.jqueryui.com/themeroller/images/ui-icons_f6f9fb_256x240.png
	*/
	--baseJqueryIconsUrl1: url("images/ui-icons_f6f9fb_256x240.png");
	/* JQueryicons - Normal und groß
	 */

	--baseJqueryIconsSizeFactor: 1;
	--baseJqueryIconsSizeNormalFactor: 1;
	--baseJqueryIconsSizeBigFactor: 1.5;
	--baseJqueryIconsSize: 17px;
	--baseJqueryIconsSizeNormal: 17px;
	--baseJqueryIconsSizeBig: 26px;

	/* weiss z.B. Hintergrund Texteingabefelder */
	--baseColor0: 255, 255, 255;
	/* schwarz z.B. Textfarbe Texteingabefelder */
	--baseColor1: 0, 0, 0;
	/* leichtes grau, disabled (lightgrey), z.B. ausgegraute Texteingabefelder, box-shadow */
	--baseColor2: 211, 211, 211;
	/* grau (dimgrey), box-shadow */
	--baseColor3: 105, 105, 105;

	/* zwei helle und zwei dunkle Akzentfarben */
	--akzentColor0: 255, 255, 255;
	/** #ecf1f6 (236, 241, 246) Hellblau, #f6f9fb (246, 249, 251) helleres Hellblau
		Hintergrund Themenbaum, Hintergrund der aktiven Reiter,
		alte _hg_blau1 */
	--akzentColor1: 246, 249, 251;
	/** #dce9f0 (220, 233, 240) oder #dfe7ef (223, 231, 239) dunkleres Hellblau,
		z.B.Hintergrund inaktiver Reiter,
		alte _hg_blau2 */
	--akzentColor2: 220, 233, 240;
	/** #90adc3 helleres Stahlblau */
	--akzentColor4: 144, 173, 195;
	/** #265380 Stahlblau z.B. für Schrift */
	--akzentColor5: 38, 83, 128;

	/** Oft als Abstand zwischen benachbarten Objekten (margin) oder
		als innerer Abstand benutzt*/
	--commonDistance: 5px;
	--gaia-font-size: 12px;
	--gaia-font-color: rgb(var(--akzentColor5));
	--gaia-font-color_transparency: rgba(var(--akzentColor5), 0.6);
	--gaia-background-color: rgb(var(--akzentColor1));
	--gaia-background-color2: rgb(var(--akzentColor2));
	--gaia-background-color_transparency: rgba(var(--akzentColor1), 0.75);
	--gaia-disable-color: rgba(var(--akzentColor5), 0.5);

	--gaia-selected-color: var(--gaia-background-color);
	--gaia-selected-background-color: var(--gaia-font-color);
	--gaia-selected-border-color: var(--gaia-background-color);
	--gaia-selected-box-shadow: 3px 3px var(--gaia-font-color), 0 0 3px 3px var(--gaia-font-color);

	--gaia-active-color: var(--gaia-background-color);
	--gaia-active-background-color: var(--gaia-font-color);
	--gaia-active-border-color: var(--gaia-font-color);
	--gaia-active-border-width: 0 6px 6px 0;

	--gaia-focus-color: var(--gaia-background-color);
	--gaia-focus-background-color: rgb(var(--akzentColor4));
	--gaia-focus-border-width: 0 3px 3px 0;
	--gaia-focus-border-color: var(--gaia-background-color);
	--gaia-focus-box-shadow: -1px -1px 10px var(--gaia-font-color), 1px 1px 10px var(--gaia-font-color);

	/** Meldungsfarben */
	--gaia-error-color: #dc3545;
	--gaia-warning-color: magenta;
	--gaia-info-color: var(--gaia-font-color);
	--gaia-success-color: green;

	--gaia-btns-border-width: 0 1px 1px 0; /*klassisch 0 3px 3px 0;*/
	--gaia-btns-border-style: solid;
	--gaia-btns-border-color: rgb(var(--akzentColor5));
	/*0 0.7em;*/ /*rund 1em 1em;*/ /*klassisch 0.5em;*/
	--gaia-btns-border-radius0: 0;
	--gaia-btns-border-radius1: 0.7em;
	--gaia-btns-border-radius: var(--gaia-btns-border-radius0) var(--gaia-btns-border-radius1);

	/* 1em 12px, 1.1005em 16px, 1.145em 18px, 1.1855em 20px */
	--gaia-sidebar-font-size: 16px;
	--gaia-sidebar-btn-height-normal: 35px; /*klassisch 40px;*/
	--gaia-sidebar-btn-width-normal: 200px;
	--gaia-sidebar-btn-height-big: 50px;
	--gaia-sidebar-btn-width-big: 250px;
	--gaia-sidebar-btn-height: var(--gaia-sidebar-btn-height-normal);
	--gaia-sidebar-btn-width: var(--gaia-sidebar-btn-width-normal);
	--gaia-sidebar-lead-btns-bg-color: rgb(var(--akzentColor0));
	--gaia-sidebar-lead-btns-font-color: rgb(var(--akzentColor4));
	/**	Abstand zwischen den Buttons und ausgehend vom Top eines Buttons,
		Abstand zwischen den Buttons im Kartenstapel
	 */
	--gaia-sidebar-btns-margin: 3px;
	--gaia-sidebar-btns-border-width: var(--gaia-btns-border-width);
	--gaia-sidebar-btns-border-style: var(--gaia-btns-border-style);
	--gaia-sidebar-btns-border-color: var(--gaia-btns-border-color);
	--gaia-sidebar-btns-border-radius: var(--gaia-btns-border-radius);
	/* Abstand der Sidebar vom Fensterrand */
	--gaia-sidebar-margin: 2px;

	--gaia-slider-width: 20px;
	--gaia-slider-handle-size: 16px;
	--gaia-slider-width-normal: 20px;
	--gaia-slider-handle-size-normal: 16px;
	--gaia-slider-width-big: 40px;
	--gaia-slider-handle-size-big: 32px;
	--gaia-slider-edge: var(--gaia-slider-width);
	--gaia-slider-ends-width: 5px;


	/* @see gaia.query.setSelectedRowColorStyle */
	--gaia-query-selectedRowColor: rgba(var(--akzentColor4),0.8);
	/* @see gaia.query.setHighlightedRowColorStyle */
	--gaia-query-highlightedRowColor: rgb(255, 255, 0);

	--gaia-transition-duration: .5s; /*.5s;*/
	--gaia-transition-timing-function: cubic-bezier(0, 1, .5, 1); /* ease-in-out; */
}

/* *****************************************************************************
 * GAIA-MVprofessional Standardstyles
 * *****************************************************************************
 */
@font-face {
	font-family: 'Roboto Reg';
	font-style: normal;
	font-weight: 400;
	src: url("../webfonts/Roboto-Regular.ttf");
}

@font-face {
	font-family: 'Roboto Bold';
	font-style: normal;
	font-weight: 900;
	src: url("../webfonts/Roboto-Bold.ttf");
}

/* genutzt für nicht sichtbare Überschriften,
   z.B. <span class="barrier-free" role="heading">Konfiguration</span>
*/
.barrier-free {
	text-indent: -9999px;
	position: absolute;
}

/**
 * Nach der ARIA-Spezifikation ist ein Informationscontainer
 * mit dem role-Attribut zu kennzeichnen (role="tooltip"). Da
 * der Container zunächst unsichtbar ist, erhält er das Attribut
 * aria-hidden="true" und erschient damit nicht im Accessibility-Tree
 * eines Screenreaders. Mittels event-Handler kann das Attribut per
 * Javascript entfernt oder hinzugefügt werden.
 */
[role=tooltip][aria-hidden=true] {
	/*display:none;*/
}

/* Auswirkungen erst testen
*, ::after, ::before {
	box-sizing: border-box;
}*/

/* *****************************************************************************
 * Basis-styles
 *
 * (Tag-Selektor)
 */
body,
p,
ol,
li,
td,
th,
h1,
h2,
h3,
h4,
h5,
h6,
h7,
center
{
	color: var(--gaia-font-color);
	font-family: Roboto Reg; /*Arial, Helvetica, sans-serif;*/
	font-size: var(--gaia-font-size);
	text-decoration: none;
	scrollbar-face-color: var(--gaia-background-color);
	scrollbar-highlight-color: var(--gaia-background-color2);
	scrollbar-3dlight-color: var(--gaia-disable-color);
	scrollbar-darkshadow-color: #222222;
	scrollbar-shadow-color: var(--gaia-background-color2);
	scrollbar-arrow-color: var(--gaia-disable-color);
	scrollbar-track-color: var(--gaia-background-color2);
}

a,
area,
button,
select {
	cursor: pointer;
	text-decoration: none;
}

iframe {
    margin:0;
    border:0;
    overflow:hidden;
}

label {
	cursor: pointer;
}

label.changeByTap {
	padding-inline: var(--commonDistance);
	padding-block: var(--commonDistance);
	border-radius:var(--gaia-btns-border-radius);
}

/*
 * Betextung für INPUT-Tag i.d.R links z.B. von Eingabefelder,
 * rechts von Radio-, Checkboxen angeordnet
 */
label input:not([type=checkbox],[type=radio]) {
	margin-right: var(--commonDistance);
	margin-left: var(--commonDistance);
}

label input[type=checkbox],[type=radio] {
	margin-right: var(--gaia-font-size);
	width: calc(var(--gaia-font-size) * 1.5);
	height: calc(var(--gaia-font-size) * 1.5);
	vertical-align: middle;
}

input[type=radio],[type=checkbox],[type=range] {
	accent-color: var(--gaia-font-color);
}

hr {
	color:var(--gaia-font-color);
	background-color:var(--gaia-font-color);
	border: none;
	height: 1px;
}

.gaia__parent-input-flex-box {
	display:flex;
	flex-direction: column;
	align-items: flex-start;
	/* unter FF ok
	display:block;
	text-align: -moz-center;*/
}

/* Spalte mit INPUT-Tags und deren Label */
.gaia__input-flex-box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	padding: var(--commonDistance);
	/*background-color:cyan;*/
}

/* Zeile mit INPUT-Tag und dazugehörigem Label */
.gaia__input-flex-box > label {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	margin: var(--commonDistance);
	padding: calc(2 * var(--commonDistance));
	background-color:white;
}

/* Label von INPUT-Felder sind i.d.R. unterschiedlich lang.
   Ausrichtung erforderlich */

/* Label links der Texteingabefelder
   Ausrichtung nach rechts erforderlich
 */
.gaia__input-flex-box.label-left > label {
	justify-content: flex-end;
}

/* Label rechts der Radio- oder Checkboxen
   Ausrichtung nach links erforderlich
*/
.gaia__input-flex-box.label-right > label {
	justify-content: flex-start;
}

.gaia__input-flex-box label:hover,
.gaia__input-flex-box label:active,
.gaia__input-flex-box label:focus {
	box-shadow: var(--gaia-focus-box-shadow);
}

/* "autocomplete" Liste und Felder */
.gaia__autocomplete {
	 position: relative;
	 display: inline-block;
 }
.gaia__autocomplete-items {
	position: absolute;
	border: 1px solid rgb(var(--baseColor2));
	border-bottom: none;
	border-top: none;
	z-index: 99;
	/*position the autocomplete items to be the same width as the container:*/
	top: 100%;
	left: 0;
	right: 0;
}

.gaia__autocomplete-items div {
	padding: 10px;
	cursor: pointer;
	background-color:rgb(var(--baseColor0));
	border-bottom: 1px solid rgb(var(--baseColor2));
}

/*when hovering an item:*/
.gaia__autocomplete-items div:hover {
	background-color: rgb(var(--baseColor2));
}

.gaia__autocomplete-active {
	background-color: rgb(var(--baseColor2))!important;
	color: var(--gaia-focus-color)!important;
}

/* Container für Slidebar, Filter, Hinweise, Themenbaum und
   Schaltknopf zum Aktualisieren */
.gaiaTreeContainer {
	margin:0 20px 0 10px;
	overflow:auto;
}

/* Schaltknopfleiste oberhalb des Themenbaums */
#gaiaTreeSlidebar {
	position: relative;
	display: inline-block;
	height: var(--gaia-sidebar-btn-height);
	width: 100%;
}

/* Style i.Zhg. mit Filter für Themenbaum */
.gaiaTreeHeader{
	height: 2em;
	width: 100%;
	margin-top: 5px;
}

.gaiaTreeFilterButtonContainer{
	display:inline-block;
	white-space: nowrap;
	margin:0;
	padding:0;
}

.gaiaTreeSel{
	background-color: #ffe154;
}
.gaiaTreeHide{
	display: none;
}


/** Button, Reset und Submit und Menüvorauswahlbuttons (s. Einstellungen) */

input[type=button],[type=reset],[type=submit],
button.prefMenuPoint {
	font-family: "Roboto Reg"!important;
	font-size: 12px!important;
	margin: var(--commonDistance) 0!important;
	padding: var(--commonDistance)!important;
	cursor: pointer;
	color: var(--gaia-font-color);
	background: var(--gaia-background-color); /* transparent */
	border-color: var(--gaia-btns-border-color);
	border-width: var(--gaia-btns-border-width);
	border-style: var(--gaia-btns-border-style);
	border-radius: var(--gaia-btns-border-radius);
}

button.prefMenuPoint.gaia-button.activeButton {
	color: var(--gaia-selected-color);
	background-color: var(--gaia-selected-background-color);
	border-color: var(--gaia-selected-border-color);
	border-width: var(--gaia-btns-border-width);
	border-style: var(--gaia-btns-border-style);
	border-radius: var(--gaia-btns-border-radius);
	box-shadow: var(--gaia-selected-box-shadow);
}

input[type=button][disabled],
input[type=reset][disabled],
input[type=submit][disabled],
a[disabled],
button.prefMenuPoint[disabled] {
	cursor: default!important;
	color: var(--gaia-disable-color)!important;
	border-color: var(--gaia-disable-color)!important;
	pointer-events:none!important;
	touch-action:none!important;
}

input[type=button]:not([disabled]):hover,
input[type=button]:not([disabled]):active,
input[type=button]:not([disabled]):focus,
input[type=reset]:not([disabled]):hover,
input[type=reset]:not([disabled]):active,
input[type=reset]:not([disabled]):focus,
input[type=submit]:not([disabled]):hover,
input[type=submit]:not([disabled]):active,
input[type=submit]:not([disabled]):focus,
.menuPoint:not([disabled]):hover,
.menuPoint:not([disabled]):active,
.menuPoint:not([disabled]):focus,
.prefGlobalDialogButtons button:not([disabled]):hover,
.prefGlobalDialogButtons button:not([disabled]):active,
.prefGlobalDialogButtons button:not([disabled]):focus,
button.prefMenuPoint:not([disabled]):hover,
button.prefMenuPoint:not([disabled]):active,
button.prefMenuPoint:not([disabled]):focus,
a:not([disabled]).gaia-button:hover,
a:not([disabled]).gaia-button:active,
a:not([disabled]).gaia-button:focus
{
	color: var(--gaia-focus-color);
	background-color: var(--gaia-focus-background-color);
	box-shadow: var(--gaia-focus-box-shadow);
	border-width: 0;
}

input[type=button][disabled]:hover,
input[type=button][disabled]:active,
input[type=button][disabled]:focus,
input[type=reset][disabled]:hover,
input[type=reset][disabled]:active,
input[type=reset][disabled]:focus,
input[type=submit][disabled]:hover,
input[type=submit][disabled]:active,
input[type=submit][disabled]:focus,
.menuPoint[disabled]:hover,
.menuPoint[disabled]:active,
.menuPoint[disabled]:focus,
.prefGlobalDialogButtons button[disabled]:hover,
.prefGlobalDialogButtons button[disabled]:active,
.prefGlobalDialogButtons button[disabled]:focus,
button.prefMenuPoint[disabled]:hover,
button.prefMenuPoint[disabled]:active,
button.prefMenuPoint[disabled]:focus {
	color: var(--gaia-sidebar-lead-btns-bg-color);
	background-color: var(--gaia-sidebar-lead-btns-font-color);
}

/** color, date, datetime-local, email, file, month, number, password,
    range,search,tel,text,time,url,week
*/
input:not([type]),
input[type=''],[type=checkbox],[type=color],[type=date],[type=datetime-local],[type=email],[type=file],
[type=month],[type=number],[type=password],[type=radio],[type=range],[type=search],
[type=tel],[type=text],[type=time],[type=url],[type=week] {
	border-color: var(--gaia-background-color);
}

/* [type=text]:hover [type=text]:active und [type=text]:focus
umbenannt  wegen Suchbar [type=texxt] @TODO mit not ausschließen
Schreibweise noch klären
not([id=gaia__searchBarInputField])
*/
input:not([type]):hover, input:not([type]):active, input:not([type]):focus,
input[type='']:hover,[type=checkbox]:hover,[type=color]:hover,[type=date]:hover,
[type=datetime-local]:hover,[type=email]:hover,[type=file]:hover,[type=image]:hover,
[type=month]:hover,[type=number]:hover,[type=password]:hover,[type=radio]:hover,
[type=range]:hover,[type=search]:hover,[type=tel]:hover,[type=texxt]:hover,
[type=time]:hover,[type=url]:hover,[type=week]:hover,
input[type='']:active,[type=checkbox]:active,[type=color]:active,[type=date]:active,
[type=datetime-local]:active,[type=email]:active,[type=file]:active,[type=image]:active,
[type=month]:active,[type=number]:active,[type=password]:active,[type=radio]:active,
[type=range]:active,[type=search]:active,[type=tel]:active,[type=texxt]:active,
[type=time]:active,[type=url]:active,[type=week]:active,
input[type='']:focus,[type=checkbox]:focus,[type=color]:focus,[type=date]:focus,
[type=datetime-local]:focus,[type=email]:focus,[type=file]:focus,[type=image]:focus,
[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=radio]:focus,
[type=range]:focus,[type=search]:focus,[type=tel]:focus,[type=texxt]:focus,
[type=time]:focus,[type=url]:focus,[type=week]:focus,
.gaia__input-flex-box label:hover,
.gaia__input-flex-box label:active,
.gaia__input-flex-box label:focus,
select:hover,select:active,select:focus,
label.changeByTap:hover,
label.changeByTap:focus,
.ui-selectmenu-button:hover,
.ui-selectmenu-button:focus,
#gaia-bgChanger a.mapBackground:hover,
#gaia-bgChanger a.mapBackground:active,
#gaia-bgChanger a.mapBackground:focus,
#gaia-quickInfoClose:hover,
#gaia-quickInfoClose:active,
#gaia-quickInfoClose:focus,
.gaia__searchBar:hover,
.gaia__searchBar:focus-within
/*,
a:hover,
a:focus*/ {
	box-shadow: var(--gaia-focus-box-shadow);
}

.gaia_drawContainer {
	position:absolute;
	left:0;
	top:0;
	overflow:hidden;
	cursor:default;
}

/* *****************************************************************************
 * Element-spezifische Styles
 *
 * (id-Selektor)
 */

#titel_schmal {
	background-color: var(--gaia-background-color2);
}

#seite {
	width: 100%;
}

#ti_links_klein {
	position: absolute;
	top:0;
	left: 210px;
}

#ti_links {
	position: absolute;
	top: 50px;
	left: 220px;
}

#ti_links a:link,
#ti_links a:visited,
#ti_links a:hover,
#ti_links a:active,
#ti_links_klein a:link,
#ti_links_klein a:visited,
#ti_links_klein a:hover,
#ti_links_klein a:active {
	color: #000000;
	font-size: 10px;
}

#ti_rechts {
	position: absolute;
	top: 30px;
	left: 600px;
}

/* *****************************************************************************
 * Allgemeine klassenspezifische Styles
 *
 * (class-Selektor)
 */

/*
 * Eieruhr/ Warteanzeige
 */
div.waitImg {
	position:absolute;
	left:250px;
	top:300px;
	display:block;
	margin:0;
	z-index:1000000
}

div.waitImg img.waitImgSpinner {
	position: absolute;
	left: 0;
	top: 0
}

/* *******************
 * Container with Tabs
 *
 */
#tabDiv {
	position:absolute;
	top:0;
	height:24px;
	border:0 solid red;
	overflow: hidden;
	z-index:100;
	padding-left:1.8em;
	display:flex;
	align-items:flex-end;
}

/* ******************************************
 * tabs that are used to open the tab content
 * float: left;
 */
#tabDiv button {
	float: left;
	cursor: pointer;
    padding: 2px 9px;
    transition: 0.3s;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-size: 11px;
}

/* ********
 * tabs
 */
.tabLinks {
	color: var(--gaia-font-color);
	background-color: var(--gaia-background-color2);
	border: 1px solid var(--gaia-font-color_transparency); /*#9cb6cc;*/
	white-space: nowrap;
}

.tabLinks:hover, .tabLinks:focus, .tabLinks:active {
	color: var(--gaia-background-color2);
	background-color: var(--gaia-font-color);
	border: 1px solid var(--gaia-font-color_transparency); /*#9cb6cc;*/
	white-space: nowrap;
}

/* **********
 * active tab
 */
.tabActive {
	color: var(--gaia-font-color) !important;
	background-color: var(--gaia-background-color) !important;
	border-top: 2px solid var(--gaia-font-color) !important;
	border-bottom: 1px solid var(--gaia-background-color) !important;
	height: 24px !important;
}

/* **********
 * tab content
 */
.tabContent {
	position: absolute;
	top:23px;
	left:0;
	right:0;
	bottom:0;
	margin:0;
	padding: var(--commonDistance);
}

.tabContent,
.activeDIV, .msgbox {
	border: 1px solid var(--gaia-font-color); /*#9cb6cc;*/
}

.tooltip, .msgbox {
	-moz-border-radius: var(--gaia-btns-border-radius1);
	-webkit-border-radius: var(--gaia-btns-border-radius1);
	-khtml-border-radius: var(--gaia-btns-border-radius1);
	border-radius: var(--gaia-btns-border-radius1);
}

.msgbox, .selbox {
	opacity: .85;
	-moz-opacity: .85;
	filter: alpha(opacity=85);
}

/* ******************
 * Iframe nicht sichtbar
 */
.iframe0 {
    width:0;
	height:0;
}

/* ******************
 * Iframe zum Debuggen
 */
.iframeD {
    width:100%;
	height:25%;
	bottom:0;
	overflow:auto;
	border:1px solid red;
	position:relative;
}

/* ******************
 * Tabellenzelle ohne Ränder
 */
.tdbild {
    font-size:0;
	padding:0;
	border:0 solid blue;
}

/* ******************
 * Buttons (mit Text)
 */

.tarnButton {
	border:0 solid black;
	color: blue;
	cursor: pointer;
	background-color: var(--gaia-background-color2);
}

.unvislinks {
	text-decoration: none;
	font-size: 12px;
	color: rgb(var(--akzentColor5));
	width: 100%;
	height: 100%;
}

.linkasbutFormat {
	font-size: 12px;
	background-color: transparent;
	border: 1px solid #000000;
	cursor: pointer;
	margin:0;
	padding: 1px;
	color: rgb(var(--akzentColor5));
}

/* ******************
 * Buttons (mit Bild)
 */

.iconFormat {
	border:0 solid black;
	width: 26px;
	height: 26px;
	cursor: pointer;
}

.iconFormatBreit {
	border:0 solid black;
	width: 52px;
	height: 26px;
	cursor: pointer;
}

/* *********
 * Nicht-,selektierbare Texte, Klick auf Eingabefelder (input), Cursor landet
 * bei Klick immer am Ende hinterm letztem Zeichen - textarea und input deshalb
 * hier nicht mit einschließen
 */
select, option, label,
.noselectable {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.selectable {
	-webkit-touch-callout: all; /* iOS Safari */
	-webkit-user-select: all; /* Safari */
	-khtml-user-select: all; /* Konqueror HTML */
	-moz-user-select: all; /* Old versions of Firefox */
	-ms-user-select: all; /* Internet Explorer/Edge */
	user-select: all;
	/* Non-prefixed version, currently
   supported by Chrome, Edge, Opera and Firefox */
}

/* ************
 * Formelemente
 */

input[type="checkbox"] {
	-webkit-appearance: checkbox;
}

/* *****************
 * Eingabefelder wie normalen Text anzeigen
 */
.show_as_text {
	background-color:#f6f9fb;
	border:none;
}

/* *****************
 * Eingabefelder deutlich umrandet anzeigen
 */
.show_clearly {
	box-shadow:-1px -1px 10px red,1px 1px 10px red;
}

.inpFormat.texteditor {
	border:1px dashed var(--gaia-font-color);
	margin:0;
	padding:0;
}

.inpFormat {
	color: rgb(var(--baseColor1));
	background-color: rgb(var(--baseColor0));
}

.inpFormat:focus,
.inpFormat:hover
{
	box-shadow: var(--gaia-focus-box-shadow);
}

.inpFormatOnMapSelect {
	font-size: 11px;
	background: transparent;
	border-style: none;
}

/* *********
 * Fontgröße
 */
.klein {
	font-size: 11px;
}

.sehrklein {
	font-size: 9px;
}

/* *****************
 * Hintergrundfarben
 */

.hg_weiss {
	background-color: #ffffff;
}

.hg_gelb {
	background-color: #ffcc00;
}

.hg_blau1 {
	background-color: var(--gaia-background-color);
}

.hg_blau2 {
	background-color:var(--gaia-background-color2);
}

.hg_grau1 {
	background-color: #cccccc;
}

.hg_grau2 {
	background-color: #777777;
}

/* *****************************************************************************
 * Anwendungsspezifische Styles
 *
 * (class-Selektor)
 */

/* *****************
 * Meldungsfarben
 */
.info {
	color: var(--gaia-info-color);
}

.error {
	color: var(--gaia-error-color);
}

.warning {
	color: var(--gaia-warning-color);
}

.success {
	color: var(--gaia-success-color);
}

.infoBox {
	color: var(--gaia-info-color);
	background-color:  var(--gaia-background-color);
	border-left: 4px solid var(--gaia-info-color);
	padding-left: 6px;
	text-align: left;
	position:relative;
	display:block;
	margin:2px auto;
}

.errorBox {
	color: var(--gaia-error-color);
	border-left: 4px solid var(--gaia-error-color);
	padding-left: 6px;
	text-align: left;
	position:relative;
	display:block;
	margin:2px auto;
}

.warningBox {
	color: var(--gaia-warning-color);
	border-left: 4px solid var(--gaia-warning-color);
	padding-left: 6px;
	text-align: left;
	position:relative;
	display:block;
	margin:2px auto;
}

.successBox{
	color: var(--gaia-success-color);
	border-left: 4px solid var(--gaia-success-color);
	padding-left: 6px;
	text-align: left;
	position:relative;
	display:block;
	margin:2px auto;
}

/*.error,.warning,.info{padding:3px;margin:5px}*/
/*.error span,.warning span,.info span{display:inline-block;width:5em;font-weight:bold;}*/

/* *****************
 * Labels links oder rechts von Formularfeldern //var(--gaia-font-color);
 */
.leftFromFld {
	text-align:right;
	font-weight:normal;
	color:black;
}

.leftFromFldTop {
	text-align:right;
	vertical-align:top;
	font-weight:normal;
	color:black;
}

.rightFromFld {
	text-align:left;
	font-weight:normal;
	color:black;
}

.rightFromFldTop {
	text-align:left;
	vertical-align:top;
	font-weight:normal;
	color:black;
}

/* *****************
 * Tabellen werden derzeit für die Formatierung der Formulare benutzt.
 * @TODO mit flexbox später ersetzen
 */
.frmTbl {
	width: 100%;
	margin: auto;
	padding: 0;
	text-align: center;
	border: 0 solid black;
	border-collapse: separate;
	border-spacing: 10px;
}

/* *****************
 * Tooltip
 */
.tooltip {
	border: 1px solid black;
	padding: 1px 3px;
	background-color: white;
	position: absolute;
}

/* ***********************
 * Abfrageergebnistabellen
 */

table.sortable {
	padding:0;
	border-collapse:separate;
	border-spacing:2px;
	border:0 solid black;
	color: rgb(var(--akzentColor5));
}

.query_tbl {
	padding:0;
	border-collapse:separate;
	border-spacing:2px;
	border:0 solid black;
}

.query_tbl_header {
	background-color: #cccccc;
}

table.query_tbl > tbody > tr > th,
table.query_tbl > tbody > tr > td,
table.sortable > tbody > tr > th,
table.sortable > tbody > tr > td {
	padding: var(--commonDistance);
}

.query_lupe {
	width:14px;
	height:14px;
}

.queryResultClassic {
	margin-left:10px;
	margin-top:20px;
}

.queryCloseButton {
	position:absolute;
	top:3px;
	left:5px;
	width:16px;height:14px;
	cursor:pointer;
	border:0 solid black;
}

/**
 * Datensätze abwechselnd in unterschiedlichen Farben
 */
table.sortable > tbody > tr:nth-child(n+2):nth-child(even) {
	background-color: var(--gaia-background-color)
}

table.sortable > tbody > tr:nth-child(n+2):nth-child(odd) {
	background-color: var(--gaia-background-color2)
}

/**
 * Ausgewählte Datensätze oder Felder
 */
table.sortable > tbody > tr:nth-child(n+2):nth-child(even).rowsel,
table.sortable > tbody > tr:nth-child(n+2):nth-child(odd).rowsel,
table.sortable > tbody > tr > td.colsel {
	background-color: var(--gaia-query-selectedRowColor);
}

/**
 * Datensätze beim Überfahren mit der Maus
 */
table.sortable > tbody > tr:nth-child(n+2):hover,
table.sortable > tbody > tr:nth-child(n+2):hover > td {
	background-color: var(--gaia-query-highlightedRowColor);
}

/**
 * Ausgewählte Datensätze beim Überfahren mit der Maus
 */
table.sortable > tbody > tr:nth-child(n+2):nth-child(even):hover.rowsel,
table.sortable > tbody > tr:nth-child(n+2):nth-child(odd):hover.rowsel,
table.sortable > tbody > tr > td:hover.colsel {
	background-color: var(--gaia-query-highlightedRowColor);
	/* Farbe i.d.R. gelb erscheint etwas dunkler,
	wenn Datensätze auch noch selektiert */
	filter: brightness(80%);
}

/**
 * Zu den ausgewählten Datensätze korrespondierende Objekte in der Karte beim
 * Überfahren mit der Maus in der Ergebnistabelle.
 */
.highLightQueryMapObjects {
	stroke: red;
	stroke-width: 2;
	animation: highLightStrokeColorChange 6s infinite;
	/*animation: changeStrokeDirection 6s infinite;*/
}

.highLightBox {
	fill: blue;
	stroke: yellow;
	stroke-width: 2;
	animation: highLightFillColorChange 6s infinite;
	/*animation: changeStrokeDirection 6s infinite;*/
}

.highLightCircle {
	r: 50;
	fill: none;
	stroke: blue;
	stroke-width: 10;
	stroke-opacity: 1;
	animation: changeCircleRadius 6s infinite;
	/*animation: changeStrokeDirection 6s infinite;*/
}

.highLightSmallCircle {
	r: 25;
	fill: red;
	stroke: blue;
	stroke-width: 3;
	stroke-opacity: 1;
	animation: changeSmallCircleRadius 6s infinite;
	/*animation: changeStrokeDirection 6s infinite;*/
}

@keyframes highLightStrokeColorChange {
	0%   {stroke: red;}
	20%  {stroke: yellow;}
	40%  {stroke: blue;}
	60%  {stroke: cyan;}
	80%  {stroke: magenta;}
	100% {stroke: green;}
}

@keyframes highLightFillColorChange {
	0%   {fill: red;}
	20%  {fill: yellow;}
	40%  {fill: blue;}
	60%  {fill: cyan;}
	80%  {fill: magenta;}
	100% {fill: green;}
}

@keyframes changeCircleRadius {
	from {
		r: 50;
		stroke-width: 10;
		stroke-opacity:1;
	}
	to {
		r: 0;
		stroke-width: 1;
		stroke-opacity:0;
	}
}

@keyframes changeSmallCircleRadius {
	from {
		r: 25;
		stroke-width: 3;
		stroke-opacity:1;
	}
	to {
		r: 0;
		stroke-width: 1;
		stroke-opacity:0;
	}
}

/*@keyframes changeStrokeDirection {
	0% {x1:0;y1:10;x2:10;y2:0;}
	100% {x1:10;y1:10;x2:0;y2:0;}
}*/

.beschr_tbl{
	border:0 solid black;
}
table.beschr_tbl th,
table.beschr_tbl td
{
	padding: 0;
	border:0 solid black;
	border-collapse:separate;
}
.beschr0c_tbl{
	border:0 solid black;
}
table.beschr0c_tbl th,
table.beschr0c_tbl td
{
	padding: 0;
	border-collapse:collapse;
}
.beschr0w_tbl{
	border:0 solid black;
}
table.beschr0w_tbl th,
table.beschr0w_tbl td
{
	padding: 0;
	border:0 solid black;
	border-collapse:collapse;
	width:100%;
}
.beschr0_tbl{
	border:0 solid black;
}
table.beschr0_tbl th,
table.beschr0_tbl td
{
	padding: 0;
	border:0 solid black;
	border-collapse:collapse;
}
.beschr1_tbl{
	border:0 solid black;
}
table.beschr1_tbl th,
table.beschr1_tbl td
{
	padding: 1px;
	border-collapse:separate;
}
.beschr2_tbl{
	border:0 solid black;
}
table.beschr2_tbl th,
table.beschr2_tbl td
{
	padding: 2px;
	border:0 solid black;
	border-collapse:collapse;
}
.beschr2o_tbl{
	border:0 solid black;
}
table.beschr2o_tbl th,
table.beschr2o_tbl td
{
	padding: 2px;
}
.beschr3_tbl{
	border:0 solid black;
}
table.beschr3_tbl th,
table.beschr3_tbl td
{
	padding: 3px;
	border:0 solid black;
	border-collapse:collapse;
}
.beschr3o_tbl{
	border:0 solid black;
}
table.beschr3o_tbl th,
table.beschr3o_tbl td
{
	padding: 3px;
}
.beschr5_tbl{
	border:0 solid black;
}
table.beschr5_tbl th,
table.beschr5_tbl td
{
	padding: var(--commonDistance);
	border:0 solid black;
}
.beschr6_tbl{
	border:1px solid black;
}
table.beschr6_tbl th,
table.beschr6_tbl td
{
	padding: 6px;
	border-collapse:separate;
	border-spacing:1px;
	border: 1px solid black;
}
.beschr7_tbl{
	border:1px solid black;
	border-collapse:separate;
	border-spacing:0;
}
table.beschr7_tbl th,
table.beschr7_tbl td
{
	border: 1px solid black;
}

/* ***************
 * Zeichenelemente
 */

.hdlVis {
	visibility: visible;
	position: absolute;
}

.hdlHid {
	visibility: visible;
	position: absolute;
}

.transparent {
	opacity: .0;
	-moz-opacity: .0;
	filter: alpha(opacity = 0);
}

.selbox {
	position: absolute;
	border: 4px solid blue;
	background-color: #ffcc00;
}

/* *****************************
 * Popup-Menu (rechte Maustaste)
 */

.menuu {
	padding: 0;
	margin: 0;
	cursor: pointer;
	font-size: var(--gaia-font-size);
}

.menuu0, .menuu1 {
	padding: calc(var(--commonDistance) * 2);
	border-width: var(--gaia-btns-border-width);
	border-style: var(--gaia-btns-border-style);
	border-radius: var(--gaia-btns-border-radius);
}

.menuu0 {
	color: var(--gaia-font-color);
	background-color: var(--gaia-background-color);
	border-color: var(--gaia-btns-border-color);
}

.menuu1 {
	color: var(--gaia-background-color);
	background-color: var(--gaia-font-color);
	border-color: var(--gaia-background-color);
}

/* Container für Texteditor */
#gaiaTextEditor {
	position:absolute;
	background-color: var(--gaia-background-color);
	left:0;
	top:0;
	margin:0;
	padding:0;
	display:none;
	border:0 solid black;
	width:auto;
	height:auto;
	z-index:52000;
}

/* *******************
 * Sprechblasen-Styles
 */

.bubblebox {
	position: absolute;
	left:0;
	top:0;
}

.txt0 {
	position: relative;
	left:0;
	top:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: bold;
	color: black;
	text-align: left;
	display: inline;
	padding:0;
	margin:0;
	white-space: nowrap;
}

.txt1 {
	position: relative;
	left:0;
	top: 3px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	color: black;
	text-align: left;
	display: inline;
	padding:0;
	margin:0;
	white-space: nowrap;
}

/* *******************
 * Quickinfostyles
 */
#gaiaContainerQuickInfo {
	z-index: 51000;
	position:absolute;
	top:0;
	left:0
}

.quickInfoBox {
	color: red!important;
	background-color: var(--gaia-background-color);
}

.quickInfoDataTable {
	border: 0 solid  var(--gaia-font-color);
	width: min-content;
}

/* Textausgestaltung der Überschrift var(--baseColor1) */
.quickInfoHeader {
	text-align: left;
	color: var(--gaia-font-color);
	background-color: var(--gaia-background-color2);
}

/* Ausgestaltung der Spalte mit Checkboxen zum Labeln */
.quickinfo_label_col {
	vertical-align: top;
}

/* Textausgestaltung linke Spalte (Feldnamen) */
.quickinfo_left_col {
	text-align: right;
	font-weight: bold;
	color: var(--gaia-font-color);
	background-color: var(--gaia-background-color2);
}

/* Textausgestaltung rechte Spalte (Feldwerte) */
.quickinfo_right_col {
	font-weight: normal;
	color: var(--gaia-font-color);
	background-color: var(--gaia-background-color);
}

#quickInfoInsertAndLabel {
	font-size: 12px;
	font-weight: normal;
	padding: 0 5px 0 5px;
}

/* Anzeige der Checkboxen, Hinweise zum Labeln */
.quickInfoLabel_show {
	display: inline;
}

/* Ausblenden der Checkboxen, Hinweise zum Labeln */
.quickInfoLabel_noshow {
	display: none;
}

/* *******************
 * Abfragemanagerstyles
 */
.gaiaQueryManager {
	justify-content: center;
	display: grid;
	width: 100%;
	margin: auto;
	padding: 0;
	text-align: center;
	border: 0 solid black;
	border-collapse: separate;
	border-spacing: 10px;
}

.gaiaQueryManagerSection {
	margin-top:0.75em;
	margin-bottom:0.75em;
	/*background-color: lime;*/
}

.gaiaQueryManagerSection .info {
	margin-right: 1em;
}

.gaiaQueryManagerSection.left {
	text-align:left;
}

.gaiaQueryManagerSection.center {
	/*text-align:center;*/
}

.gaiaQueryManagerSection .top,
.gaiaQueryManagerSection .middle {
	display:inline-block;
	width:auto;
}

.gaiaQueryManagerSection .top {
	vertical-align:top;
}

.gaiaQueryManagerSection .middle {
	vertical-align:top;
}

.gaiaQueryManagerSection .top.margin {
	margin-bottom:1em;
}

.gaiaQueryManagerSection .marginTopBottom {
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}

.gaiaQueryManagerSection .examples {
	display: inline-block;
	height:80px;
	overflow-x:hidden;
	overflow-y:scroll;
	width:-moz-available;
	-webkit-overflow-scrolling: auto;
}

@media (max-width: 18em) {
	.gaiaQueryManagerSection .examples {
		width:15em;
	}
}

.gaiaQueryManagerSection .inputAsReadOnly {
	background: transparent;
	border-style: none;
	font-size: 12px;
	box-shadow: 0 0 0 black!important;
}

.gaiaQueryManagerSection #QueryValue {
	width:-moz-available;
}

.gaiaQueryManagerTable.table {
	text-align:left;
}

.gaiaQueryManagerTable.table .table-row {
	margin-bottom: 1em;
}

.gaiaQueryManagerTable.table .table-cell {
	margin-bottom: 1em;
}

@media (min-width: 60em) {
	.gaiaQueryManagerTable.table {
		display: table;
	}

	.gaiaQueryManagerTable .table-row {
		display: table-row;
	}

	.gaiaQueryManagerTable .table-cell {
		display: table-cell;
		vertical-align: middle;
	}

	.gaiaQueryManagerTable .table-cell.right {
		text-align: right;
	}

	.gaiaQueryManagerTable .table-cell.left {
		text-align: left;
		padding-left: 1em;
		/*background-color:red;*/
	}
}

/* *********
 * Sonstiges
 */

.activeDIV {
	padding-top: var(--commonDistance);
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: var(--commonDistance);
	width: 98%;
}

.uebersicht {
	width: 250px;
	height: 250px;
	overflow: auto;
	position: relative;
}

.msgbox {
	position: absolute;
	left: 3px;
	top: 3px;
	margin-right: var(--commonDistance);
	padding: var(--commonDistance);
	font-size: 11px;
	overflow:auto;
}

.msgboxicons {
	width: 14px;
	height: 14px;
	display: inline;
	float: left;
}

.kartentitel {
	font-family: Arial, Helvetica, bolder;
}

.query_sequence {
	background-image: url("../../images/karte/middleline.gif");
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100% 9px;
	margin: 0;
	padding: 2em 0 1em 0;
}

/* *****************************************************************************
 * DGM Profilviewer-Styles
 * *****************************************************************************
 */

.title{
	margin-left: 10px;
}

.summary{
	margin-left: 10px;
}

.profileViewer{
	box-shadow: 1px 1px 10px 1px silver inset;
}

.profileViewer .profileContainer {
	padding: 1.2em 4em 0.5em 1.5em;
	border-radius: 10px;
	margin: 0.5em 0.5em 2em 2em;
	position: relative;
	overflow: auto;
	display: grid;
	grid-template-columns: 25% 50% 25%;
	grid-template-rows: auto;
	grid-template-areas:
			"controls controls ."
			"profile profile profile"
			"profileData profileData ."
			"profileTable profileTable .";
	row-gap: 40px;
}

.profileViewer .profileContainer.active {
	border-color: rgb(15, 135, 182);
}

.profileViewer .profileContainer .profile {
	position: relative;
	overflow: visible;
	margin-left: 40px;
	border: 0;
	padding: 0;
	z-index: 10;
	grid-area: profile;
	border-left: 2px solid #287da8;
	border-bottom: 2px solid #287da8;
}

.profileViewer .profileContainer .controls {
	position: relative;
	margin-bottom: 0;
	margin-left: 40px;
	grid-area: controls;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}

.profileViewer .profileContainer .profileTable{
	grid-area: profileTable;
}

.profileViewer .profileContainer .controls .display .butFormat {
	border: 1px solid #287da8;
	color: #287da8;
	border-radius: 5px;
}

.dhmProfileViewer .controls {
	margin-bottom: 2em;
}

.dhmProfileViewer .controls input {
	text-align: right;
}

.dhmProfileViewer .controls input.vx {
	width: 3.5em;
	border: 1px solid #287da8;
	background-color: transparent;
	border-radius: 5px;
}

.dhmProfileViewer .controls label.w {
	margin-left: 0.5em;

}

.dhmProfileViewer .controls input.w {
	width: 2em;
	border: 1px solid #287da8;
	background-color: transparent;
	border-radius: 5px;
}

.dhmProfileViewer .controls .display button {
	margin-left: 0.5em;
}

.profileViewer .profileContainer .controls .display {
	display: flex;
	align-items: center;
}

.profileViewer .profileContainer .profileData {
	grid-area: profileData;
	margin-left: 40px;
}

.profileViewer .profileContainer .profileData tbody {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.profileViewer .profileContainer .profileData tbody tr{
	margin: 5px;
}

.profileViewer .profileContainer .profileData th {
	text-align: left;
}

.profileViewer .profileContainer .profileData td {
	text-align: right;
}

.profileViewer .profileContainer .profileData .column-n {

}

.profileViewer .profileContainer .profile .tooltip {
	border: 1px solid black;
	padding: 1px 3px;
	white-space: nowrap;
	background-color: white;
	position: absolute;
}

.profileViewer .profileContainer .profile .label {
	white-space: nowrap;
	position: absolute;
}

.profileViewer .profileContainer .profile .label.length {
	bottom: -1.5em;
}

.profileViewer .profileContainer .profile .label.length.min {
	left: -3.5em;
	text-align: center;
}

.profileViewer .profileContainer .profile .label.length.max {
	right: -1em;
}
.profileViewer .profileContainer .prfile .label .label.height.max{
	text-align: center;
}

.profileViewer .profileContainer .profile .label.height {
	padding-left: 2px;
}

.profileViewer .profileContainer .profile .label.height.min {
	bottom: -0.5em;

}

.profileViewer .profileContainer .pleaseWait {
	color: green;
	font-weight: bold;
	margin: 0;
	padding: 0 1em 1em 40px;
	background: url("../../images/prozess/spinner.gif") no-repeat left top;
	cursor: wait;
}

/* *****************************************************************************
 * Neue Schaltflächenstyles
 * *****************************************************************************
 */

/*
 * Beispiele:
 * <a href="javascript:void(0);" onclick="alert('Weg damit!');"
 *     class="gaia-button gaia-icon gaia-icon-drop"></a>
 *<a id="mapLegendChange" class="gaia-button" href="#">
 *   <div data-dlgindex="gaiaShowDialog_legend"
 *        class="mapFooterContent icon-sym icon-sym-awe __legend">
 *   </div>
 *</a>
 */

/*
 * Alle Elemente die als Schaltfläche erscheinen sollen
 * border-box: Buttons haben die gleiche Größe, wie die Buttons der Sidebar
 * content-box: Buttons sind breiter, haben aber die gleiche Höhe wie die anderen
 * Bestandteile der Infozeile am unterem Bildschirmrand (am Maßstabsgo-Button erkennbar)
 */
.gaia-button {
	box-sizing: border-box;
	font-size: var(--gaia-sidebar-font-size);
	padding: 0;
	margin: 0;
}

.gaia-button110 {
	width: 110px;
}

.gaia-buttonauto {
	width: auto;
}

/*.gaia-button:hover,
.gaia-button:focus {
	color: var(--gaia-background-color);
	background-color: var(--gaia-font-color);
}*/

/*
 * Alle Elemente die gleiche Höhe wie die Schaltflächen haben sollen
 */
.gaia-button-height {
	height:var(--gaia-sidebar-btn-height);
}

/*
 * Alle Elemente die mit einem Standard-Icon dargestellt werden sollen
 */
.gaia-icon {
	border: 0;
	display: inline-block;
	width: 26px;
	height: 26px;
	background-image: url("../../images/symbole/icons_default.gif");
	background-color: transparent;
}

/*
 * Zugehörige Pseudoklassen für die Interaktion mit dem Mauszeiger
 */
.gaia-icon:hover,
.gaia-icon.gaia-icon-hover
{
	background-image: url("../../images/symbole/icons_hover.gif");
}

.gaia-icon:active,
.gaia-icon.gaia-icon-active,
.gaia-icon.gaia-icon-active:hover {
	background-image: url("../../images/symbole/icons_active.gif");
}

/*
 * Schaltflächen die gedruckt bleiben sollen: Klasse gaia-icon-active
 * mit dem Klick zuweisen und nachher wieder entfernen
 */
.gaia-icon.gaia-icon-active,
.gaia-icon.gaia-icon-active:hover {
	background-image: url("../../images/symbole/icons_active.gif");
}


/*
 * Zugehörige Pseudoklassen für die Interaktion mit dem Mauszeiger
 */
.gaia-icon.gaia-icon-hover:hover {
	background-image: url("../../images/symbole/icons_active.gif");
}

.gaia-icon.gaia-icon-hover:active {
	background-image: url("../../images/symbole/icons_hover.gif");
}

/*
 * Wenn Schaltfläche nicht aktiv dann die Klasse gaia-icon-disabled zuweisen
 */
.gaia-icon.gaia-icon-disabled,
.gaia-icon.gaia-icon-disabled:hover,
.gaia-icon.gaia-icon-disabled:active {
	background-image: url("../../images/symbole/icons_disabled.gif");
	cursor: default;
}

/* *******************************
 * Einzelne Schaltflächenbildchen
 */

/**
 * leerer Button
 */
.gaia-icon.gaia-icon-none {
	background-position: 0 0;
}

/**
 * einfache Diskette mit Pfeil zur Diskette
 */
.gaia-icon.gaia-icon-export {
	background-position: -26px 0;
}

/**
 * einfache Diskette mit Pfeil von der Diskette weg
 */
.gaia-icon.gaia-icon-import {
	background-position: -52px 0;
}

/**
 * Druckersymbol
 */
.gaia-icon.gaia-icon-print {
	background-position: -78px 0;
}

/**
 * ein rotes X
 */
.gaia-icon.gaia-icon-cancel {
	background-position: -104px 0;
}

/**
 * eine stilisierte Diskette
 */
.gaia-icon.gaia-icon-save {
	background-position: -130px 0;
}

/**
 * Blatt mit Bleistift
 */
.gaia-icon.gaia-icon-edit {
	background-position: -156px 0;
}

/**
 * pfeil (rund) nach links
 */
.gaia-icon.gaia-icon-undo {
	background-position: -182px 0;
}

/**
 * Mappe, blau, leer
 */
.gaia-icon.gaia-icon-coll-paper {
	background-position: -208px 0;
}

/**
 * Mappe, blau, mit Blatt
 */
.gaia-icon.gaia-icon-coll {
	background-position: -234px 0;
}

/**
 * Weiße sprechblase mit Fragezeichen
 */
.gaia-icon.gaia-icon-help {
	background-position: -260px 0;
}

/**
 * Acrobatreadersymbol
 */
.gaia-icon.gaia-icon-pdf {
	background-position: -286px 0;
}

/*
 * Auszoomen (Lupe mit "-"-Zeichen)
 */
.gaia-icon.gaia-icon-zoom-out {
	background-position: -0px -26px;
}

/*
 * Einzoomen (Lupe mit "+"-Zeichen)
 */
.gaia-icon.gaia-icon-zoom-in {
	background-position: -26px -26px;
}

/*
 * Zoomfixed in 4 Pfeile zum Zentrum
 */
.gaia-icon.gaia-icon-zoom-in-fixed {
	background-position: -52px -26px;
}

/*
 * Recenter 4 Pfeile zum Zentrum mit "+" in der Mitte
 */
.gaia-icon.gaia-icon-recenter {
	background-position: -78px -26px;
}

/*
 * Zoomfixed out 4 Pfeile vom Zentrum
 */
.gaia-icon.gaia-icon-zoom-out-fixed {
	background-position: -104px -26px;
}

/*
 * Pan (eine Hand)
 */
.gaia-icon.gaia-icon-pan {
	background-position: -130px -26px;
}

/*
 * Pan (eine Hand)
 */
.gaia-icon.gaia-icon-reverse {
	background-position: -156px -26px;
}

/*
 * Overview (Weltkugel mit Rechteck)
 */
.gaia-icon.gaia-icon-overview {
	background-position: -182px -26px;
}

/*
 * zoom Next (pfeil nach rechts)
 */
.gaia-icon.gaia-icon-next {
	background-position: -208px -26px;
}

/*
 * zoom Next (pfeil nach links)
 */
.gaia-icon.gaia-icon-prev {
	background-position: -234px -26px;
}

/*
 * zoom World (Weltkugel)
 */
.gaia-icon.gaia-icon-world {
	background-position: -260px -26px;
}

/**
* Polygon
*/
.gaia-icon.gaia-icon-polygon {
	background-position: 0 -52px;
}

/**
* Box - ein leeres Rechteck
*/
.gaia-icon.gaia-icon-box {
	background-position: -26px -52px;
}

/**
*
*/
.gaia-icon.gaia-icon-polyline {
	background-position: -52px -52px;
}

/**
* Tabelle
*/
.gaia-icon.gaia-icon-table {
	background-position: -78px -52px;
}

/**
* Textbox
*/
.gaia-icon.gaia-icon-textbox {
	background-position: -104px -52px;
}

/**
* Text
*/
.gaia-icon.gaia-icon-text {
	background-position: -130px -52px;
}

/**
* Kreis
*/
.gaia-icon.gaia-icon-circle {
	background-position: -156px -52px;
}

/**
*
*/
.gaia-icon.gaia-icon-point {
	background-position: -182px -52px;
}

/**
* gerade linie
*/
.gaia-icon.gaia-icon-line {
	background-position: -208px -52px;
}

/**
*
*/
.gaia-icon.gaia-icon-empty {
	background-position: -234px -52px;
}

/**
*
*/
.gaia-icon.gaia-icon-textbubble {
	background-position: -260px -52px;
}

/**
*
*/
.gaia-icon.gaia-icon-textline {
	background-position: -286px -52px;
}

/**
*
*/
.gaia-icon.gaia-icon-max {
	background-position: -0px -78px;
}

/**
*
*/
.gaia-icon.gaia-icon-restore {
	background-position: -26px -78px;
}

/**
*
*/
.gaia-icon.gaia-icon-link {
	background-position: -52px -78px;
}

/**
*
*/
.gaia-icon.gaia-icon-spanner {
	background-position: -78px -78px;
}

/**
*
*/
.gaia-icon.gaia-icon-hide {
	background-position: -104px -78px;
}

/**
*
*/
.gaia-icon.gaia-icon-tools {
	background-position: -130px -78px;
}

/**
*
*/
.gaia-icon.gaia-icon-pointer {
	background-position: -156px -78px;
}

/**
*
*/
.gaia-icon.gaia-icon-ovlbox {
	background-position: -182px -78px;
}

/**
*
*/
.gaia-icon.gaia-icon-ovlbox2 {
	background-position: -208px -78px;
}

/**
*
*/
.gaia-icon.gaia-icon-min {
	background-position: -234px -78px;
}

/**
*
*/
.gaia-icon.gaia-icon-78m260 {
	background-position: -260px -78px;
}

/**
*
*/
.gaia-icon.gaia-icon-property {
	background-position: -286px -78px;
}

/**
*
*/
.gaia-icon.gaia-icon-query-polygon {
	background-position: -0px -104px;
}

/**
*
*/
.gaia-icon.gaia-icon-query-load {
	background-position: -26px -104px;
}

/**
*
*/
.gaia-icon.gaia-icon-query-point {
	background-position: -52px -104px;
}

/**
*
*/
.gaia-icon.gaia-icon-query-circle {
	background-position: -78px -104px;
}

/**
*
*/
.gaia-icon.gaia-icon-query-box {
	background-position: -104px -104px;
}

/**
*
*/
.gaia-icon.gaia-icon-query-collect {
	background-position: -130px -104px;
}

/**
*
*/
.gaia-icon.gaia-icon-query-polyline {
	background-position: -156px -104px;
}

/**
*
*/
.gaia-icon.gaia-icon-query-polyline3D {
	background-position: -182px -104px;
}

/**
*
*/
.gaia-icon.gaia-icon-query-i {
	background-position: -208px -104px;
}

/**
*
*/
.gaia-icon.gaia-icon-query-general {
	background-position: -234px -104px;
}

/**
*
*/
.gaia-icon.gaia-icon-140m260 {
	background-position: -260px -104px;
}

/**
*
*/
.gaia-icon.gaia-icon-104m286 {
	background-position: -286px -104px;
}

/**
*
*/
.gaia-icon.gaia-icon-polter {
	background-position: -0px -130px;
}

/**
*
*/
.gaia-icon.gaia-icon-tree {
	background-position: -26px -130px;
}

/**
*
*/
.gaia-icon.gaia-icon-help-green {
	background-position: -52px -130px;
}

/**
*
*/
.gaia-icon.gaia-icon-zoom-street {
	background-position: -78px -130px;
}

/**
*
*/
.gaia-icon.gaia-icon-right {
	background-position: -104px -130px;
}

/**
*
*/
.gaia-icon.gaia-icon-close {
	background-position: -130px -130px;
}

/**
*
*/
.gaia-icon.gaia-icon-resize {
	background-position: -156px -130px;
}

/**
*
*/
.gaia-icon.gaia-icon-130m182 {
	background-position: -182px -130px;
}

/**
*
*/
.gaia-icon.gaia-icon-130m208 {
	background-position: -208px -130px;
}

/**
*
*/
.gaia-icon.gaia-icon-130m234 {
	background-position: -234px -130px;
}

/**
*
*/
.gaia-icon.gaia-icon-130m260 {
	background-position: -260px -130px;
}

/**
*
*/
.gaia-icon.gaia-icon-130m286 {
	background-position: -286px -130px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblcols-undelete {
	background-position: 0 -156px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblcols-drop {
	background-position: -26px -156px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblcols-hide {
	background-position: -52px -156px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblcols-moveleft {
	background-position: -78px -156px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblcols-moveleft-moved {
	background-position: -104px -156px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblcols-moveright {
	background-position: -130px -156px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblcols-moveright-moved {
	background-position: -156px -156px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblcols-nsel {
	background-position: -182px -156px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblcols-nsel-moved {
	background-position: -208px -156px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblcols-sortaz {
	background-position: -234px -156px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblcols-sortza {
	background-position: -260px -156px;
}

/**
*
*/
.gaia-icon.gaia-icon-excel {
	background-position: -286px -156px;
}

/**
*
*/
.gaia-icon.gaia-icon-open {
	background-position: -0px -182px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblrows-drop {
	background-position: -26px -182px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblrows-hide {
	background-position: -52px -182px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblrows-load {
	background-position: -78px -182px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblrows-movedown {
	background-position: -104px -182px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblrows-movedown-moved {
	background-position: -130px -182px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblrows-movetop {
	background-position: -156px -182px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblrows-movetop-moved {
	background-position: -182px -182px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblrows-nsel {
	background-position: -208px -182px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblrows-nsel-moved {
	background-position: -234px -182px;
}

/**
*
*/
.gaia-icon.gaia-icon-tblrows-save {
	background-position: -260px -182px;
}

/**
*
*/
.gaia-icon.gaia-icon-tbl-zoom2ext {
	background-position: -286px -182px;
}

/**
*
*/
.gaia-icon.gaia-icon-stack {
	background-position: -0px -208px;
}

/**
*
*/
.gaia-icon.gaia-icon-stack-delete {
	background-position: -26px -208px;
}

/**
*
*/
.gaia-icon.gaia-icon-stack-left {
	background-position: -52px -208px;
}

/**
*
*/
.gaia-icon.gaia-icon-stack-left2 {
	background-position: -78px -208px;
}

/**
*
*/
.gaia-icon.gaia-icon-stack-left-end {
	background-position: -104px -208px;
}

/**
*
*/
.gaia-icon.gaia-icon-stack-left-fast {
	background-position: -130px -208px;
}

/**
*
*/
.gaia-icon.gaia-icon-stack-left-short {
	background-position: -156px -208px;
}

/**
*
*/
.gaia-icon.gaia-icon-stack-save {
	background-position: -182px -208px;
}

/**
*
*/
.gaia-icon.gaia-icon-stack-updown {
	background-position: -208px -208px;
}

/**
*
*/
.gaia-icon.gaia-icon-clock {
	background-position: -234px -208px;
}

/**
*
*/
.gaia-icon.gaia-icon-208m260 {
	background-position: -260px -208px;
}

/**
*
*/
.gaia-icon.gaia-icon-208m286 {
	background-position: -286px -208px;
}

/**
*
*/
.gaia-icon.gaia-icon-234m0 {
	background-position: -0px -234px;
}

/**
*
*/
.gaia-icon.gaia-icon-234m26 {
	background-position: -26px -234px;
}

/**
*
*/
.gaia-icon.gaia-icon-234m52 {
	background-position: -52px -234px;
}

/**
*
*/
.gaia-icon.gaia-icon-234m78 {
	background-position: -78px -234px;
}

/**
*
*/
.gaia-icon.gaia-icon-234m104 {
	background-position: -104px -234px;
}

/**
*
*/
.gaia-icon.gaia-icon-234m130 {
	background-position: -130px -234px;
}

/**
*
*/
.gaia-icon.gaia-icon-234m156 {
	background-position: -156px -234px;
}

/**
*
*/
.gaia-icon.gaia-icon-234m182 {
	background-position: -182px -234px;
}

/**
*
*/
.gaia-icon.gaia-icon-234m208 {
	background-position: -208px -234px;
}

/**
*
*/
.gaia-icon.gaia-icon-234m234 {
	background-position: -234px -234px;
}

/**
*
*/
.gaia-icon.gaia-icon-234m260 {
	background-position: -260px -234px;
}

/**
*
*/
.gaia-icon.gaia-icon-234m286 {
	background-position: -286px -234px;
}

/**
*
*/
.gaia-icon.gaia-icon-260m0 {
	background-position: -0px -260px;
}

/**
*
*/
.gaia-icon.gaia-icon-260m26 {
	background-position: -26px -260px;
}

/**
*
*/
.gaia-icon.gaia-icon-260m52 {
	background-position: -52px -260px;
}

/**
*
*/
.gaia-icon.gaia-icon-260m78 {
	background-position: -78px -260px;
}

/**
*
*/
.gaia-icon.gaia-icon-260m104 {
	background-position: -104px -260px;
}

/**
*
*/
.gaia-icon.gaia-icon-260m130 {
	background-position: -130px -260px;
}

/**
*
*/
.gaia-icon.gaia-icon-260m156 {
	background-position: -156px -260px;
}

/**
*
*/
.gaia-icon.gaia-icon-260m182 {
	background-position: -182px -260px;
}

/**
*
*/
.gaia-icon.gaia-icon-260m208 {
	background-position: -208px -260px;
}

/**
*
*/
.gaia-icon.gaia-icon-260m234 {
	background-position: -234px -260px;
}

/**
*
*/
.gaia-icon.gaia-icon-260m260 {
	background-position: -260px -260px;
}

/**
*
*/
.gaia-icon.gaia-icon-260m286 {
	background-position: -286px -260px;
}

#QueryStuff #QueryValue {
	width: 100%;
	max-width: 20em;
}

#QueryStuff #QueryField {
	max-width: 9em;
}

#mode_frm #examples1 {
	max-width: 30em;
}

@font-face {
	font-family: 'Font Awesome 6 Free';
	font-style: normal;
	font-weight: 900;
	src: url("webfonts/fa-solid-900.woff2") format("woff2"), url("webfonts/fa-solid-900.ttf") format("truetype");
}

/**
 * Gruppe von Farbeingabefeldern
 */
div.colorInputFieldsAsRow {
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
}


/*********************************************************************
 *
 *                             Auswahlmaps
 *
 * Boxen zum Hervorheben ausgewählter oder focusierter Flächen.
 * in sogenannten "klickbaren Karten" (HTML-DOM Objekt "MAP"
 * und den anklickbaren Unterlementen "AREA")
 * s. Farbtafeln, Zoomstufen und Vergleichsansicht
 *********************************************************************/
div.highlightSelectedArea,
div.highlightFocusedArea {
	position: absolute;
}

/***********************************
 *          Farbtafel              *
 ***********************************/

/**
 * Container
 */
div.colorPicker {
	position:absolute;
	display: inline-block;
}

/**
 * Bild mit verschiedenen Farbtäfelchen
 */
img.colorPickerImage {
	width:217px;
	height:67px;
	border:0 solid black;
	margin-top:1px;
}

/**
 * Box zum Hervorheben der ausgewählten Farbe
 */
div.highlightSelectedColor {
	border: 10px solid transparent;
	outline: red solid 3px;
}

/**
 * Box zum Hervorheben der focusierten Farbe
 */
div.highlightFocusedColor {
	border: 11px solid transparent;
	outline: rgb(var(--baseColor0)) dotted 4px;
}

/***********************************
 *          Zoombalken             *
 ***********************************/

/**
 * Container
 */
/*div.scalePicker {
	position:absolute!important;
	display: inline-block!important;
}*/

/**
 * Bild mit Zoombalken
 */
img.scalePickerImage {
	border:0 solid black;
	width: 36px;
	height: 26px;
}

/**
 * Box zum Hervorheben des focusierten Zoombalkens.
 */
div.highlightFocusedScale {
	border: 2px solid transparent;
	outline: var(--gaia-font-color) solid 4px;
}

/***********************************
 *      Vergleichsansicht          *
 ***********************************/

/**
 * Container
 */
div.layerPicker {
	position: relative;
	display: inline-block;
}

/**
 * Bild mit Layerbereiche  (unten, oben)
 */
img.layerPickerImage {
	width: 280px;
	height: 150px;
	border: 0 solid black;
	margin-top: 1px;
}

/**
 * Box zum Hervorheben eines ausgewählten Layerbereiches (unten oder oben).
 */
div.highlightSelectedLayerArea {
	width: 137px; /* 145 - 8 */
	height: 142px; /* 150 - 8 */
	left: 0;
	top: 0;
	border: red solid 4px;
}

/**
 * Box zum Hervorheben eines focusierten Layerbereiches (unten oder oben)..
 */
div.highlightFocusedLayerArea {
	width: 137px; /* 145 - 8 */
	height: 142px; /* 150 - 8 */
	left: 0;
	top: 0;
	border: rgb(0 0 255) dotted 4px;
}