.dropdown {
	.dropdownToggle:active,
	&.dropdownOpen .dropdownToggle {
		outline: 0;
	}
	
	&.preInput {
		display: table;
		width: 100%;
		
		input {
			border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius 0;
			display: table-cell;
			margin: 0;
			width: 99%;
		}
		
		textarea {
			border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius;
			display: block;
			margin-top: 0;
		}
		
		.dropdownCaption {
			cursor: pointer;
			display: table-cell;
			letter-spacing: -1px;
			padding: 0 @wcfGapSmall 0 @wcfGapTiny;
			vertical-align: middle;
			width: 1%;
			
			&.button {
				border-right-width: 0;
				border-radius: @wcfInputBorderRadius 0 0 @wcfInputBorderRadius;
			}
			
			span {
				margin-right: -1px;
				padding-left: @wcfGapTiny;
				white-space: nowrap;
				word-wrap: normal;
				
				&.active::after {
					content: "\f0d7";
					font-family: FontAwesome;
					font-size: 14px;
					margin-left: 7px;
				}
			}
		}
		
		.dropdownCaptionTextarea {
			cursor: pointer;
			margin: 0 0 -1px 0;
			padding-left: @wcfGapSmall;
			padding-right: @wcfGapSmall;
			
			&.button {
				border-radius: @wcfInputBorderRadius @wcfInputBorderRadius 0 0;
			}
			
			&~ .dropdownMenu {
				top: 10%;
			}
			
			span {
				white-space: nowrap;
				word-wrap: normal;
				
				&.active::after {
					content: "\f0d7";
					font-family: FontAwesome;
					font-size: 14px;
					margin-left: 7px;
				}
			}
		}
	}
	
	&.dropdownOpen {
		.dropdownToggle {
			//color: @wcfPageLinkHoverColor;
		}
		
		.dropdownMenu {
			display: block;
		}
	}
	
	.dropdownToggle {
		cursor: pointer;
	}
}

.dropdownMenu {
	background-color: @wcfDropdownBackgroundColor;
	border: 1px solid @wcfDropdownBorderColor;
	color: @wcfDropdownColor;
	display: none;
	float: left;
	min-width: 160px;
	padding: 4px 0;
	position: absolute;
	text-align: left;
	z-index: 450;
	
	.boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
	
	&::after {
		border: 7px solid transparent;
		border-bottom-color: @wcfDropdownBorderColor;
		border-top-width: 0;
		content: "";
		display: inline-block;
		left: 9px;
		position: absolute;
		top: -7px;
		z-index: 100;
	}
	
	&::before {
		border: 6px solid transparent;
		border-bottom-color: @wcfDropdownBackgroundColor;
		border-top-width: 0;
		content: "";
		display: inline-block;
		left: 10px;
		position: absolute;
		top: -6px;
		z-index: 101;
	}
	
	&.dropdownArrowRight {
		&::after {
			left: auto;
			right: 9px;
		}
		
		&::before {
			left: auto;
			right: 10px;
		}
	}
	
	&.dropdownArrowBottom {
		&::after {
			border: 7px transparent solid;
			border-top-color: @wcfDropdownBorderColor;
			border-bottom-width: 0;
			bottom: -7px;
			top: auto;
		}
		
		&::before {
			border: 6px transparent solid;
			border-top-color: @wcfDropdownBackgroundColor;
			border-bottom-width: 0;
			bottom: -6px;
			top: auto;
		}
	}
	
	&.dropdownOpen {
		display: block;
	}
	
	li {
		display: block;
		
		&:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText),
		&.dropdownList > li:hover:not(.dropdownDivider),
		&.dropdownNavigationItem,
		&.active {
			background-color: @wcfDropdownHoverBackgroundColor;
		}
		
		&.dropdownDivider {
			border-top: 1px dotted @wcfDropdownBorderColor;
			margin: @wcfGapTiny;
		}
		
		&.dropdownText {
			font-size: @wcfSmallFontSize;
			padding: @wcfGapTiny @wcfGapMedium;
		}
		
		&.boxFlag {
			padding-top: 2px;
		}
		
		> a,
		> span {
			clear: both;
			color: @wcfDropdownColor;
			cursor: pointer;
			display: block;
			max-width: 350px;
			overflow: hidden;
			padding: @wcfGapTiny @wcfGapMedium;
			text-decoration: none;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-wrap: normal;
			
			.textShadow(@wcfDropdownBackgroundColor);
			
			&:hover {
				color: @wcfDropdownColor;
				
				.textShadow(@wcfDropdownHoverBackgroundColor);
			}
			
			> div > h3 {
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		
		> a + span.badge {
			display: none;
		}
		
		> .box16 {
			cursor: pointer;
			min-height: 0;
			padding: @wcfGapTiny @wcfGapTiny @wcfGapTiny @wcfGapSmall;
			
			> div {
				margin-left: 21px;
			}
		}
		
		> label {
			display: block;
		}
		
		.containerHeadline {
			margin-bottom: 0;
			
			> p {
				font-size: @wcfSmallFontSize;
			}
		}
		
		&.notificationItem {
			> a {
				white-space: normal;
			}
		}
	}
	
	.scrollableDropdownMenu {
		max-height: 300px;
		overflow: auto;
	}
}

.boxFlag > .box24, .boxFlag.box24 {
	min-height: 20px;
}

@media only screen and (max-width: 800px) {
	.dropdownMenu {
		left: 0 !important;
		right: 0 !important;
		
		li {
			overflow: hidden;
			
			> a,
			> span {
				max-width: none;
				white-space: normal;
			}
		}
	}
}