/*--------------------------------------------------------------------------------
*
* inc-select.css
*
* QuasiSelect, Verwendung in:
* bootsplaetze.php, fahrtenbuch.php, fluesse.php, inc-akthead.php, pegel.php.
*
* Hier werden SELECT Inputs mit DIVs nachgebaut um am Handy besser auszusehen.
*
* select ist ein einzeiliges Select, bei Focus-within wird das Select maximal 10
* Zeilen hoch (>10 = mit Scrollbalken). Focus auf eine Option löst onfocus aus
* und wird mit einer JS Funktion ausgewertet. Diese JS Funktion schreibt ev. den
* ausgewählten Wert in die erste Optionszeile und setzt den Focus zeitverzögert
* mit Timeout auf ein anderes Element. Damit löst im QuasiSelect onfocusout aus
* und scrollt das QuasiSelect mit 'this.scroll(0,0);' ganz nach links oben um
* den ausgewählten Wert anzuzeigen. Die erste Option DARF KEINE onfocus Funktion
* haben (oder muss den ersten Focus ignorieren), sonst funktioniert das
* Aufklappen des Select auf 10 Zeilen nicht! Hat eine Option die Klasse
* "seloptdis" wird die Schrift grau und hat keinen Hover Effekt. 
*
* select2 ist eine mehrzeiliges Select mit Mehrfachauswahl und hat max.
* 15 Zeilen (>15 Optionen mit Scrollbalken).
*
* font-family:'Lucida Console', 'Courier New', monospace; sieht am PC gut aus,
* wird auf Android zu Font 'Cutive Mono', einem zu kleinen und zu dünnen Font.
* font-family:monospace; wird auf Android zu Font 'Droid Sans Mono', der ist ok.
*
------------------------------------------------------------------------------- */

.selectbox {
	position:relative;
	width:100%;
	height:18rem;
	overflow:visible;
}
.select, .select2 {
	position:relative;
	height:18rem;
	overflow:hidden;
	width:inherit;
	background-color:white;
	border:1rem solid Silver;
	border-radius:3rem;
	padding:0 3rem;																/* R+L Innenabstand										*/
}
@media (pointer:coarse) {														/* am Handy (pointer:coarse) einrasten, Desktop nicht	*/
	.select, .select2 {
		scroll-snap-type:block mandatory;										/* Einrasten beim verticalen Scrollen					*/
	}
}
.select2 {
	height:auto;
	max-height:270rem;
	overflow:auto;
	font-size:13rem;
	font-family:monospace;
}
.select:focus-within {															/* 10 Zeilen (Optionen) hoch bei focus-within			*/
	position:absolute;
	height:auto;
	max-height:180rem;
	overflow:auto;
	border-color:MidnightBlue;
	z-index:1;																	/* Select eine Ebene über den restlichen Elementen		*/
}
.select2:focus-within {
	border-color:MidnightBlue;
}
.select div, .select2 div {
	width:100%;
	height:18rem;
	line-height:18rem !important;												/* wichtig, damit Hakerl die Zeilenhöhe nicht verändert	*/
	overflow:hidden;															/* breiter Inhalt clip, ohne 'hidden' > Scrollbar		*/
	word-break:break-all;
	font-size:12rem;
	font-family:monospace;
	color:MidnightBlue;
	background-color:white;
	scroll-snap-align:start;
	vertical-align:middle;
	cursor:default;
	user-select:none;
	-webkit-user-select:none;													/* Safari 3.1+											*/
	-moz-user-select:none;														/* Firefox 2+											*/
	-ms-user-select:none;														/* IE 10+												*/
}
.select2checker div:not(.seloptdis)::before {									/* select2checker, default ohne Hakerl					*/
	display:inline-block;
	width:18rem;
	content:' ';
}
.select2checker div[data-set='1']::before {										/* select2checker mit Hakerl, wenn data-set = 1			*/
	content:'\2705';															/* Quadrat mit Hakerl (White Heavy Check Mark)			*/
}
.select2marker div:focus-within {												/* select2marker lässt gewählte Zeile highlighted		*/
	color:White;
	background-color:MidnightBlue;
}
.select div:first-child {														/* Select ohne Focus hat Arial in erster Zeile			*/
	font:inherit;
}
.select:focus-within div:first-child {											/* Select mit Focus hat monospace grau in erster Zeile	*/
	font-family:monospace;
	color:Gray;
}
.select:not(:focus-within) div:first-child::after {
	content:'\25BC  ';															/* Dreieck nach unten (Black Down-Pointing Triangle)	*/
	font:10rem Arial, Helvetica, sans-serif;
	line-height:18rem;
	vertical-align:middle;
	float:right;
	padding-right:2rem;
	color:MidnightBlue;
}
.select div:not(.seloptdis):not(:first-child):hover, .select2 div:not(.seloptdis):hover {
	color:White;
	background-color:MidnightBlue;
}
.seloptdis {
	font-family:inherit;
	color:Gray !important;
}