.dropdown,
.dropleft,
.dropright,
.dropup,
.input-group {
	position: relative;

	.dropdown-menu {
		margin: 5px 0 0;
		border: none;
		box-shadow: 0 4px 14px rgba(174, 197, 231, 0.5);
		font-size: rem(14);
		width: 250px;
		position: absolute;
		z-index: 1000;
		top: 75% !important;

		.dropdown-header {
			margin-bottom: 8px;
			font-size: rem(15);
			display: block;
			padding: 15px;
			margin-bottom: 0;
			font-size: 0.875rem;
			white-space: nowrap;
		}

		.dropdown-item {
			display: block;
			width: 100%;
			padding: 20px;
			clear: both;
			font-weight: 400;
			text-align: inherit;
			white-space: nowrap;
			border: 0;
			padding: 10px 20px;
			font-size: rem(14);
			border-left: solid 2px transparent;
			position: relative;

			i {
				display: inline-block;
				vertical-align: middle;
				font-size: rem(15);
			}
		}

		&.dropdown-menu-right {
			right: 0 !important;
			left: auto !important;
		}

		&.dropdown-menu-left {
			left: 0 !important;
			right: auto !important;
		}
		&.dropdown-icon-menu {
			top: 100% !important;
		}
	}

	& > .dropdown-icon > i {
		color: #333;
		font-size: rem(24);
		position: relative;
		width: 35px;
		height: 35px;
		min-width: 35px;
		max-height: 35px;
	}

	& > .dropdown-icon.dropdown-border {
		width: 35px;
		height: 35px;
		min-width: 35px;
		max-height: 35px;
		text-align: center;
		vertical-align: middle;

		&:hover {
			background-color: #e3ebf4;
			width: 35px;
			height: 35px;
			border-radius: 50%;
		}

		&:before {
			content: "";
			position: absolute;
			border: 1px solid rgba(#333, 0.3);
			width: 35px;
			height: 35px;
			border-radius: 50%;
			left: 0;
			top: -2px;
			z-index: 0;
		}

		i {
			z-index: 5;
		}
	}

	&.show {
		& > .dropdown-icon.dropdown-border {
			&:before {
				background-color: #e3ebf4;
				width: 35px;
				height: 35px;
				border-radius: 50%;
			}
		}
	}

	&:has-arrow {
		display: inline-block;
		width: 0;
		height: 0;
		margin-left: 0.255em;
		vertical-align: 0.255em;
		content: "";
		border-top: 0.3em solid;
		border-right: 0.3em solid transparent;
		border-bottom: 0;
		border-left: 0.3em solid transparent;
	}
}
.dropdown .dropdown-menu {
	animation-name: slideUpIn;
	animation-duration: 0.3s;
	animation-fill-mode: both;
}
.dropup .dropdown-menu {
	top: -15% !important;
}
.dropdown a i,
.dropleft a i,
.dropright a i,
.dropup a i {
	font-size: rem(22);
}

.dropdown.show {
	.dropdown-icon.dropdown-secondary {
		i {
			color: $color-secondary-state;
		}

		&:before {
			content: "";
			position: absolute;
			width: 35px;
			height: 35px;
			border-radius: 50%;
			background-color: rgba($color-secondary-state, 0.4);
			left: 0;
			top: -2px;
		}
	}
}

.dropdown-menu > .dropdown-menu.show {
	position: absolute;
	left: 100%;
	margin-top: -1px;
	top: 0;
}

.dropdown-menu {
	.form-filter {
		max-height: 340px;
		position: relative;

		.filter-input {
			width: 90%;
			margin: 10px;
			background: #f3f3f3;
			border: none;
		}

		.clear-filter {
			right: 15px;
			top: 8px;
			position: absolute;
		}

		.filter-list {
			max-height: 300px;
			overflow: auto;
		}
	}
}
//CARD LEVEL DropDowns

.dropdown .dropdown-menu {
	.card {
		box-shadow: none;
		margin: 0;

		.card-header {
			padding: 10px 20px;

			.card-title {
				font-size: rem(18);
				margin: 0 0 8px;
			}
		}
	}
}
@keyframes slideUpIn {
	0% {
		transform: translateY(40px);
	}

	100% {
		transform: translateY(0);
	}

	0% {
		transform: translateY(40px);
	}
}

/**
// TOOLBAR DROPDOWN GRID MENU
**/
.dropdown-menu {
	.dropdown-menu-grid {
		padding: 0;
		margin: 0;
		display: table;
		table-layout: fixed;
		width: 100%;

		.menu-grid-row {
			display: table-row;

			> div {
				display: table-cell;
				vertical-align: middle;
				text-align: center;

				a {
					vertical-align: middle;
					text-align: center;
					padding: 35px 5px;

					i {
						font-size: rem(32);
						text-align: center;
					}

					span {
						display: block;
						font-weight: 400;
					}
				}
			}
		}
	}
}
/**
// TOOLBAR DROPDOWN LARGE
**/
.dropdown-menu-lg {
	.dropdown-menu {
		min-width: 320px;
		min-height: 200px;
	}
}
