@charset "utf-8";

/************************************************************************************
 *	Auswahlboxen																	*
 ***********************************************************************************/
 
 .dropdown{
	position: relative;
	float: left;
	display: inline-block;
		
	width: auto;
	
	background: transparent;
		
	cursor: pointer;
	z-index: 2;
}

.dropdown > span{
	position: relative;
	float: left;
	
	width: 100%;
	height: 34px;
	padding: 8px;
	padding-right: 30px;
	
	color: #828282;
	background: #fff;
	border: 1px solid silver;
	border-radius: 4px;	
	box-sizing: border-box;
	
	line-height: 14px;	
	white-space: nowrap;
	z-index: 2;
}

.dropdown > span::after{
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-block;
	
	padding: 0px;
	
	font-family: fontawesome;
	font-size: 20px;
	content: "\f0d7";
	
	z-index: 1;
}

.dropdown > span:hover::after{
	color: red;
}

.dropdown > span.open{
	text-align: left;
	background: #fff;
	border-bottom: none;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.dropdown > span.open::after{
	content: "\f0d8";
	color: red;
}

.dropdown > span + ul{
	position: absolute;
	top: 34px;
	right: 0px;
	display: none;
	
	margin: 0px;
	padding: 0px;
	width: auto;	
	list-style-type: none;
	
	background: #fff;
	border: 1px solid silver;
	border-top: none;
	border-radius: 4px;
	box-sizing: border-box;
}

.dropdown > span.open + ul{
	display: block;
	
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	
	max-height: 210px;
	overflow-y: hidden;
}

.dropdown > span.open + ul li{
	position: relative;
	padding: 5px 10px;
	white-space: nowrap;
}

.dropdown.radio > span.open + ul li,
.dropdown.checkbox > span.open + ul li{
	padding: 5px 30px;
}

.dropdown > span.open + ul li:hover,
.dropdown > span.open + ul li.selected{
	color: #fff;
	background: #5897fb;
}

.dropdown.radio > span.open + ul li::before,
.dropdown.checkbox > span.open + ul li::before{
	position: absolute;
	top: 6px;
	left: 10px;
	display: inline-block;
	
	padding: 0px;
	
	font-family: fontawesome;
	
	z-index: 1;
}

.dropdown.radio > span.open + ul li::before{content: "\f10c"}
.dropdown.radio > span.open + ul li.selected::before{content: "\f192";}

.dropdown.checkbox > span.open + ul li::before{content: "\f096"}
.dropdown.checkbox > span.open + ul li.selected::before{content: "\f14a";}