@CHARSET "UTF-8";

/* -------------------- Allgemein -------------------- */

* {font-size: 15px;}

/*
body,html {
	font-family: Helvetica, Arial, Sans-Serif; font-size: 15px;
	margin: 0; width: 100%; height: 100%;
	background-color: white;
}

body, html, button {color: #333333; text-shadow: 1px 1px 2px silver;}
select, input[type="text"], #infobar {text-shadow: none;}
hr {border:none; border-bottom: 1px dotted silver;}
a:link, a:visited, a:hover {
    color: #336699;
    text-decoration: none;
}
*/



h1 {font-size: 1.3rem;}
h2 {font-size: 1.2rem;}
h3 {font-size: 1.1rem;}

#waitpanel{
	 background-color: rgba(200, 200, 200, 0.5);
}

#maploader{
    left: calc(50% - 1.25em);
    top: calc(50% - 1.25em);
}

button.gp-maploader{
    border-radius: 50%;
    cursor: default;
}

.gp-spinner{
    /*background-image: url("img/loader.gif");
    background-repeat: no-repeat;
    background-position: center;*/
    border-width: 0.35em;
    width: 2.5em;
    height: 2.5em;
    color: #777 !important;   
}

.gp-spinner-featureinfo{
    width: 24px;
    height: 24px;
    border: .2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
	-webkit-animation: spinner-border .75s linear infinite;
	animation: spinner-border .75s linear infinite;
}

/* -------------------- Navbar -------------------- */

.gp-bar {
	border-bottom: 1px solid silver;
	background: silver;
	background: linear-gradient(white, rgb(225,225,225));
	height: auto;
	display: flex;
}

nav.gp-bar {
	/*height:40px;*/ /* muss flexibel sein wg. Dropdown-Menü */
	padding: 0 0.8rem;
}

#button_tool_list { width: 8rem; }

.gp-navbar-button{
	/*display:flex;
	justify-content:center;
	flex-direction:column;*/
	white-space: nowrap;
	/*padding: 0.2rem 0;*/
	height:38px;
	font-size: 1.25rem;
	cursor:pointer;
	color: rgba(0, 0, 0, .7);
	align-content: center;
	text-align: center;
}
.gp-navbar-button.pressed{
	box-shadow: 0px 0px 0px silver;
	background: linear-gradient(rgb(225,225,225), white);
}

/*
#navbar {
	display: block;
	position: fixed; top: 0; z-index: 10;
	height: auto; width: 100%;
	border-bottom: 1px solid silver;
	background: silver;
	background: linear-gradient(white, rgb(225,225,225));	
}	
#navbar_title {background: url("img/banner.png") no-repeat center center;}
@media (max-width: 600px) {#navbar_title {background-image:none;}}		
#navbar button {border-top: none; border-bottom: none;}
*/

/* -------------------- Closebar -------------------- */
.gp-close {
	padding: .3rem .8rem;
	cursor: pointer;
	font-size: 1.25rem;
	color: rgba(0, 0, 0, .7);
	text-align:center;
	align-content:center;
	height: 38px;
}

/*
.closebar {
	display: block;
	position: fixed; top: 0; z-index: 20;
	height: auto; width: 100%;
	border-bottom: 1px solid silver;
	background: silver;
	background: linear-gradient(white, rgb(225,225,225));
}
.closebar button {border-top: none; border-bottom: none; width: 100%;}
.closebar button:before {content: "Zurück zur Karte";}
*/

/* ------------------------------ Karte ------------------------------ */
#map{
    padding-top: 2.5em;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* ------------------------------ Footer ------------------------------ */

#copyright{ 
    z-index: 1;
    position: absolute; 
    bottom: 0; 
	padding: .1rem .25rem;
    font-size: .7rem;
    /*font-weight: bold;*/
	line-height: 125%;
    text-align: left;
    /*text-shadow: white 1px 1px; */
    /*filter: DropShadow(color=white, offx=1, offy=1);*/
    width: 100%;
	background-color: rgba(255, 255, 255, 0.5);
} 
/* ------------------------------ Infobar ------------------------------ */

#infobar {
	display: block;
	opacity: 0.90;
	position: fixed; bottom: 0; z-index: 1050; 
	height: auto; width: 100%;  padding: 0em; text-align: center; 
	border-top: 1px solid silver;
}

#infobar_text{
    min-height: 1.8rem;
    padding-top: .3rem;
    line-height: 1.3;
}

.infobar_text_error {color: white; background: rgb(255,51,51);}	
.infobar_text_warning {color: white; background: rgb(255,51,51);}	
.infobar_text_info {background: rgb(255,255,102);}
.infobar_text_confirm {background: rgb(102,255,102);}		

/* ------------------------------ Panel-Toolmenu ------------------------------ */

#panel_toolmenu {
	/*resize: horizontal; --> nicht in Mobilbrowsern */	
	display: block;
	box-sizing: border-box;
	opacity: 0.90;
	position: fixed; top: 2.5em; z-index: 1;
	height: calc(100% - 2.5em);
	width: auto;
	min-width: 14.1em;
	padding: 1em;
	border-right: 1px solid silver; border-top:none;
	background-color: rgb(245,245,245);
	overflow: auto;}
	


/* ------------------------------ Panel-Tool ------------------------------ */	

#panel_tool {
    position: absolute;
	padding-top: 2.5em;
    top: 0;
    left: 0;
    bottom: 0;
	max-width: 90%;
}

#panel_featureinfo {
    position: absolute;
	padding-top: 2.5em;
    top: 0;
    left: 0;
    bottom: 0;
	max-width: 90%;
}

.tool_content{
    width: auto;
	z-index: 2;
	box-sizing: border-box;
	opacity: 0.90;
	padding: 1rem .5rem;
	border-right: 1px solid silver; border-top:none;
	background-color: rgb(245,245,245);
	overflow: auto;
    min-width: 14.1em;
}

/* -------------------- Panel-Layerselection (alt: Layerbar) -------------------- */

.dialogpanel {
	display: none;
	box-sizing: border-box;
	opacity: 1.0;
	position: fixed; top: 0; z-index: 1040; /* --- bei Korrektur von top kein Button unter iOS --- */
	height: 100%;
	width: 100%;
	padding: 0em;
	padding-top: 2.5em;
	border: none;
	background-color: rgb(245,245,245);
	overflow: auto;
}

#panel_layerselection h2 {padding-left: 0.8em; font-size: 1.2em;}
#panel_layerselection label { font-size: 1.0rem; }
#layerfilterpanel { margin: 0; }
#layerpanel_overlay {
    padding-left: .2rem;
    padding-bottom: 2rem;
}



.gp-tab-title{
    font-size: 1.25rem;
}

.gp-treelayer{ /*Top-Level-Layer*/
    padding-left: .3rem;
}

.gp-treefolder{
    padding-left: 1.8rem;
    /*padding-top: .3rem;*/
	margin-top: 3px;
}
.gp-treefolder-title{
    position: relative;
    font-size: 1.0rem;
}

.gp-treefolder-title.collapsed::before{
    position: absolute;
    top: 0.2rem;
    left: -1.3rem;
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23999' fill='transparent' d='M1 0 L3 2 L1 4'/%3e%3c/svg%3e");
}
.gp-treefolder-title.expanded::before{
    position: absolute;
    top: 0.2rem;
    left: -1.3rem;
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23999' fill='transparent' d='M0 1 L2 3 L4 1'/%3e%3c/svg%3e");
}


.gp-tree-layers{
    padding-left: 1.8rem;
    padding-bottom: .3rem;
}

.gp-tree-layers > div{
	margin-top: 3px;
}

.gp-tree-sublayers{
    padding-left: 2.4rem;
    padding-bottom: .3rem;
}

.gp-tree-sublayers > div{
	margin-top: 3px;
}

.gp-tree-title{
    font-size: 1.0rem;
    display: inline-block;
    padding-left: 4px;
    white-space: normal;
    line-height: 1.4;
    padding-bottom: .2rem;
    width: calc(100% - 6rem);
}

.gp-tree-icon{
  	display: inline-block;
  	width: 20px;
  	height: 20px;	
  	background-repeat: no-repeat; 
    background-size: cover;
  	vertical-align: top; 
    margin-right: 3px;
}

.gp-tree-node{
	display: inline-block;
	width: 0.8rem;
    height: 0.8rem;
    margin-top: 0.3rem;
    margin-right: 0.3rem;
    margin-left: 0.5rem;
  	background-repeat: no-repeat; 
    background-size: cover;
  	vertical-align: top; 
}

.gp-tree-node-collapsed{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23999' fill='transparent' d='M1 0 L3 2 L1 4'/%3e%3c/svg%3e");
}

.gp-tree-node-expanded{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23999' fill='transparent' d='M0 1 L2 3 L4 1'/%3e%3c/svg%3e");
}

#panel_layerinfo td{
    font-size: 1.2rem;
}

.gp-tree-folder-open{ background-image: url("img/layertree/folder_open_16.gif"); }
.gp-tree-folder-closed{ background-image: url("img/layertree/folder_closed_16.gif"); }
/*
.gp-tree-node-expanded{ background-image: url("img/layertree/tree2_expanded_16.gif"); }
.gp-tree-node-collapsed{ background-image: url("img/layertree/tree2_collapsed_16.gif"); }	
*/
.gp-tree-layerinfo{ background-image: url("img/layertree/info.gif");}
.gp-tree-checked{ background-image: url("img/layertree/checkbox_s_16.gif"); }
.gp-tree-unchecked{ background-image: url("img/layertree/checkbox_16.gif"); }
.gp-tree-checked-disabled{ background-image: url("img/layertree/checkbox_ds_16.gif"); }
.gp-tree-unchecked-disabled{ background-image: url("img/layertree/checkbox_d_16.gif"); }	

.gp-tree-opacity{ background-image: url("img/layertree/pie.gif"); } 
.gp-tree-opacity-25{ background-image: url("img/layertree/pie25.gif"); }	
.gp-tree-opacity-50{ background-image: url("img/layertree/pie50.gif"); }
.gp-tree-opacity-75{ background-image: url("img/layertree/pie75.gif");}	

/* -------------------- Toolmenu, Tools -------------------- */

#panel_toolmenu #toolmenu {
	display: block;
	margin-bottom: 1em;
	}
#panel_toolmenu #toolmenu button {
	display: block; 
	width: 100%;
	padding: 0;
	text-align: left;
	border: none; border-bottom: 1px dotted silver; 
	background: transparent;
	}
#panel_toolmenu #toolmenu button:hover {background: rgb(235,235,235);}	
.tool {display: block;}

.labelbutton {
	width: 100%;
	font-size: 1.1rem;
	color:rgba(0,0,0,.7);
}

/* -------------------- Fieldset, Formulare -------------------- */

.gp-form-row{
    padding-bottom: 1rem;
}
.gp-form-button{
    width: 100%;
}

a.gp-gray, a:link.gp-gray, a:visited.gp-gray{
  	color: #999;
}


/* ------------------------------ Korrekturen ------------------------------ */

#gp-featureinfo h2 {font-size: 1.25rem; color: rgba(0, 0, 0, .7)}  
#gp-featureinfo h3 {font-size: 1rem; font-style: italic;} 
#gp-featureinfo h4 {font-size: 1rem;} 

#gp-featureinfo img{
    max-width: 100%;
    height: auto;
}

#gp-legend { margin-top: 1rem; }
#gp-legend h2 {font-size: 1rem;  font-weight: bold;}  
#gp-legend h3 {font-size: 1rem;} 
#gp-legend h4 {font-size: 1rem; margin-bottom: 0;} 
.gp-legend-subdiv {margin-bottom: .5rem;} 

/* ------------------------------ Buttons ------------------------------ */

button:focus, input.button:focus {outline: none;}
button:-moz-focusring, input.button: -moz-focusring {outline: none;}
button:not(.btn), input.button {
	padding: 0; margin: 0;
	/*width: 2.5em; */
	height: 2.5em;
	text-align: center;
	border: 1px solid silver;
	background: silver;
	background: linear-gradient(white, rgb(225,225,225));		
}
/*
button.pressed, input.button.pressed {			
	box-shadow: 0px 0px 0px silver;
	background: silver;
	background: linear-gradient(rgb(225,225,225), white);}
*/	

/* ---------- Label-Buttons ---------- */
span.tools, span.tools::before {content:"Werkzeuge";}
span.back, span.back::before {content:"Zurück";}

/*
button.labelbutton {padding-left: 1em; padding-right: 1em; min-width: 7.07em; width: 100%;}
button.back, button.back::before {content:"Zurück"; margin-right: -0.3em; width: 7em;}
button.layers, button.layers::before {content:"Themen"; margin-right: -0.3em; border-right: none; width: 7em;}		
button.tools, button.tools::before {content:"Werkzeuge"; width: 7em;}
button.submit, button.submit::before {content:"Suchen";}
button.search, button.search::before {content:"Suchen";}
button.login, button.login::before {content:"Anmelden";}
button.logout, button.logout::before {content:"Abmelden";}
button.save, button.save::before {content:"Speichern";}
button.abort, button.abort::before {content:"Abbrechen";}
*/

/* ---------- Input-Buttons ---------- */

input.button {padding-left: 1em; padding-right: 1em; min-width: 7.07em; width: 100%;}
input.button.login, input.button.login {;}
input.button.logout, input.button.logout {margin-top: 1em;}
input.button.save, input.button.save {;}
input.button.abort, input.button.abort {;}
input.button.search, input.button.search {;}

/* ---------- Icon-Buttons ---------- */
		
button.open_login, button.open_login::before {
	font-family: 'Material Icons'; font-size: 1em; font-weight: normal;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; 
	content:"perm_identity";}

/* ------------------------------ Mapcontrols ------------------------------ */

#map_controls {position: fixed; bottom: 2em; right: 0; z-index: 2; padding: 0.5em;}
#map_controls button, #map_controls div {
	margin: 0.5em;
	width: 2.5em; height: 2.5em;
	border-radius: 50%;
	font-family: 'Material Icons'; font-size: 1.2em; font-weight: normal;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; 
}
button.plus, button.plus::before {content:"add_circle_outline";}
button.minus, button.minus::before {content:"remove_circle_outline";}
button.locate, button.locate::before {content:"gps_fixed";}
button.locate.active { color: #336699; }

/* #button_zoomin, #button_zoomin::before {content:"add_circle_outline";}
#button_zoomout, #button_zoomout::before {content:"remove_circle_outline";}
#button_locate, #button_locate::before {content:"gps_fixed";} */


.toolbutton_minify {
	display: inline-block;
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid silver;
	/*padding: .375rem .75rem;*/
	padding: .5rem .875rem;
	font-size: 1rem;
	line-height: 1.5;
	background: linear-gradient(white, rgb(225,225,225));
}


/* ---------- Textl. Festsetzungen XPlan ----- */
.xplanTextRow { margin-bottom: 1rem; }
.xplanTextRowHeader { font-weight: bold; }

#footer > button { height: 2em; font-size: .9rem; }