.greyd_multiselect {
	display: block;
	position: relative;
}

.greyd_multiselect input {
	/* opacity: 0; */
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	color: transparent;
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
}

/* input field */
.greyd_multiselect .input {
	cursor: pointer;
	position: relative;
    padding-right: calc( var(--FRMpaddingx) + var(--FRMfontSize) ); 
}

.greyd_multiselect .input::after {
	position: absolute;
	content: "\43";
	font-family: ElegantIcons;
	font-weight: 400;
	right: 10px;
	/* top: 50%; */
	/* transform: translateY(-50%); */
}

.greyd_multiselect.open .input::after {
	content: "\42";
}

/* tags */
.greyd_multiselect .tags {
	display: inline-block;
	margin: -0.2em;
	flex-wrap: wrap;
}

.greyd_multiselect .input .tags:empty::before {
    content: attr(data-placeholder);
    color: var(--FRphcolor);
	display: inline-block;
	margin-left: .2em;
}

.greyd_multiselect .input.is-style-link-sec .tags:empty::before {
    color: var(--FR2phcolor);
}

.greyd_multiselect .tag {
	cursor: pointer;
	display: inline-block;
    border-radius: calc( var(--FRMborderRadius) / 1.5 );
	font-size: 0.8em;
	padding: 0 .5em;
	margin: .2em;
    color: var(--MSLCTtagcolor);
    background: var(--MSLCTtagbgcolor);
    border: 1px solid var(--MSLCTtagbordercolor);
}

.greyd_multiselect .tag:hover {
    color: var(--MSLCTtagcolor_h);
    background: var(--MSLCTtagbgcolor_h);
    border-color: var(--MSLCTtagbordercolor_h);
}

/* dropdown */
.greyd_multiselect .dropdown {
	position: absolute;
	z-index: 9999;
	top: 100%;
	left: 0;
	min-width: 100%;
	width: auto;
	padding: 0;
	max-height: 300px;
	overflow: auto;
	display: none;
	/**
	 * Custom-dropdown options background fix:
	 * When the input-bg is transparent, the options won't be readable.
	 * By applying a bg-color and setting the actual color as an inset
	 * drop-shadow, we make sure the options are readable.
	 */
    background-color: var(--BDbgcolor, #fff );
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 200px var(--FRbgcolor) inset;
}

.greyd_multiselect.open .dropdown {
	display: block;
}

.greyd_multiselect .dropdown .option {
	cursor: pointer;
    padding: calc( var(--FRMpaddingy) - 4px) var(--FRMpaddingx);
	transition: all 200ms ease;
}

.greyd_multiselect .dropdown .option:hover,
.greyd_multiselect .dropdown .option.selected {
    color: var(--MSLCToptioncolor);
    background-color: var(--MSLCToptionbgcolor);
}

.greyd_multiselect .dropdown .option .icn {
	font-family: 'ElegantIcons' !important;
	font-weight: normal;
	margin-right: 10px;
}

.greyd_multiselect .dropdown .option .icn::before {
	content: "\56";
}

.greyd_multiselect .dropdown .option.selected .icn::before {
	content: "\5a";
}

.greyd_multiselect .dropdown .option.disabled {
	cursor: not-allowed;
	pointer-events: none;
}

@media (max-width: 576px) {
	.greyd_multiselect .tag {
		font-size: 1em;
		padding-top: 2px;
		padding-bottom: 2px;
	}

	.select-items div,
	.greyd_multiselect .dropdown .option {
        padding-top: calc( var(--FRMpaddingy) - 2px); 
        padding-bottom: calc( var(--FRMpaddingy) - 2px); 
	}
}