@CHARSET "UTF-8";

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

* {font-size: 1em;}
body,html {
	font-family: Helvetica, Arial, Sans-Serif; font-size: 16px;
	margin: 0; width: 100%; height: 100%;
	background-color: white;
}
hr {border:none; border-bottom: 1px dotted silver;}
body, html, button {color: #333333; text-shadow: 1px 1px 2px silver;}
select, input[type="text"], #infobar {text-shadow: none;}

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 -------------------- */

#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 -------------------- */
.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 ------------------------------ */

#footer {
	position: fixed;
	bottom: 0em;
	/*left: calc(50% - 8em);*/
	width: 100%;
	z-index: 2;
}

/* ------------------------------ Infobar ------------------------------ */

#infobar {
	display: block;
	opacity: 0.90;
	position: fixed; bottom: 0; z-index: 30; 
	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-Login/out ------------------------------ */

#panel_login {
    z-index: 100;
}	

#panel_login_content {
	display: block;
	box-sizing: border-box;
	opacity: 0.90;
	position: fixed; top: 2.5em; right: 0; 
	height: auto;
	width: auto;
	min-width: 14.1em;
	padding: 1em;
	border: 1px solid silver;
	/*border-width: 0px 0px 1px 1px;*/
	background-color: rgb(245,245,245);
	overflow: auto;	
    z-index: 101;	
}	

/* ------------------------------ 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;
	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: 20; /* --- 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.1rem;
}

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

.gp-treefolder{
    padding-left: 1.8rem;
    /*padding-top: .3rem;*/
}
.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-sublayers{
    padding-left: 2.4rem;
    padding-bottom: .3rem;
}

.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;}
.tool .labelbutton {width: 100%;}

/* -------------------- 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: 1rem;  font-weight: bold;}  
#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:hover, input.button:hover {			
	box-shadow: 0px 0px 0px silver;
	background: silver;
	background: linear-gradient(rgb(225,225,225), white);
}*/
button.pressed, input.button.pressed {			
	box-shadow: 0px 0px 0px silver;
	background: silver;
	background: linear-gradient(rgb(225,225,225), white);}
	
/* ---------- Label-Buttons ---------- */

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";}
button.copyright, button.copyright::before {content:"\00a9" ; margin-right: -0.1em; border-right: none; width: 2.5em;}
button.impressum, button.impressum::before {content:"Impressum"; margin-right: -0.3em; border-right: none; width: 7em;}
button.datenschutz, button.datenschutz::before {content:"Datenschutz"; width: 7em;}
#button_desktop, #button_desktop::before {content:"Desktopversion"; width: 8em; border-left: none; }
#button_close_layerselection, #button_close_layerselection::before {content:"Zurück zur Karte"; width: 100%;}

/* ---------- 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; }