/* wui-lightbox selector */

.wui-lightbox.selector > .box {
	width: var(--wui-lightbox-selector-box-width);
	height: auto;
	min-height: 96px;
	overflow: hidden;
	background-color: var(--wui-lightbox-selector-box-bgcolor);
}
.wui-lightbox.selector > .box > .options {
	display: flex;
	position: relative;
	max-height: calc(calc(10 * 44px) - 1px);
	overflow: auto;
	flex-grow: 1;
	flex-shrink: 0;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
}
.wui-lightbox.selector > .box > .options {
	scrollbar-color: var(--wui-lightbox-body-scroll-bgcolor-out) transparent;
}
.wui-lightbox.selector > .box > .options::-webkit-scrollbar {
	width: 4px;
	background-color: transparent;
}
.wui-lightbox.selector > .box > .options::-webkit-scrollbar-thumb {
	border-radius: 2px;
	background-color: var(--wui-lightbox-body-scroll-bgcolor-out);
}
.wui-lightbox.selector > .box > .options::-webkit-scrollbar-thumb:hover,
.wui-lightbox.selector > .box > .options::-webkit-scrollbar-thumb:active {
	background-color: var(--wui-lightbox-body-scroll-bgcolor-over);
}
.wui-lightbox.selector > .box > .options::-webkit-scrollbar-track {
	background-color: transparent;
}
.wui-lightbox.selector > .box > .options > .option {
	display: flex;
	position: relative;
	width: 100%;
	height: 44px;
	border-bottom: 1px solid var(--wui-lightbox-selector-option-bordercolor-out);
	background-color: var(--wui-lightbox-selector-option-bgcolor-out);
	padding: 0 10px;
	flex-grow: 1;
	flex-shrink: 0;
	align-items: center;
	gap: 10px;
}
.wui-lightbox.selector > .box > .options > .option > .icon {
	visibility: hidden;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}
.wui-lightbox.selector > .box > .options > .option > .icon:not([class$="color"]) {
	background-color: var(--wui-lightbox-selector-option-iconcolor-out);
}
.wui-lightbox.selector > .box > .options > .option > .icon.visible,
.wui-lightbox.selector > .box > .options > .option.selected > .icon {
	visibility: visible;
}
.wui-lightbox.selector > .box > .options > .option > .text {
	cursor: default;
	overflow: hidden;
	flex-grow: 1;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--wui-lightbox-selector-option-textcolor-out);
}
.wui-lightbox.selector > .box > .options > .option > .text > .empty {
	-khtml-opacity: .7;
	-moz-opacity: .7;
	opacity: .7;
}
.wui-lightbox.selector > .box > .options > .option:not(.disabled):hover,
.wui-lightbox.selector > .box > .options > .option:not(.disabled):focus,
.wui-lightbox.selector > .box > .options > .option:not(.disabled):focus-within {
	border-color: var(--wui-lightbox-selector-option-bordercolor-over);
	background-color: var(--wui-lightbox-selector-option-bgcolor-over);
}
.wui-lightbox.selector > .box > .options > .option:not(.disabled):hover > .icon,
.wui-lightbox.selector > .box > .options > .option:not(.disabled):focus > .icon,
.wui-lightbox.selector > .box > .options > .option:not(.disabled):focus-within > .icon {
	background-color: var(--wui-lightbox-selector-option-iconcolor-over);
}
.wui-lightbox.selector > .box > .options > .option:not(.disabled):hover > .text,
.wui-lightbox.selector > .box > .options > .option:not(.disabled):focus > .text,
.wui-lightbox.selector > .box > .options > .option:not(.disabled):focus-within > .text {
	color: var(--wui-lightbox-selector-option-textcolor-over);
}
.wui-lightbox.selector > .box > .options > .option.disabled > .icon {
	background-color: var(--wui-lightbox-selector-option-iconcolor-disabled);
}
.wui-lightbox.selector > .box > .options > .option.disabled > .text {
	color: var(--wui-lightbox-selector-option-textcolor-disabled);
}
/*.wui-lightbox.selector > .box > .options.multiple > .text {
	padding-right: 30px;
}
.wui-lightbox.selector > .box > .options.multiple > .option > .checker {
	width: 20px;
	height: 20px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 1px solid var(--wui-lightbox-selector-option-checker-bordercolor-out);
	background-color: var(--wui-lightbox-selector-option-checker-bgcolor-out);
}
.wui-lightbox.selector > .box > .options.multiple > .option.selected > .checker {
	border-color: var(--wui-lightbox-selector-option-checker-bordercolor-selected);
	background-color: var(--wui-lightbox-selector-option-checker-bgcolor-selected);
}*/
.wui-lightbox.selector > .box > .footer {
	height: 70px;
}
.wui-lightbox.selector > .box > .footer > button {
	min-width: 120px;
	margin-top: 15px;
	margin-left: 10px;
	margin-right: 10px;
}
.wui-lightbox.selector > .box > .footer.hidden,
.wui-lightbox.selector > .box > .footer > button.hidden {
	display: none;
}
@media screen and (max-width: 599px) {
	.wui-lightbox.selector > .box > .options > .option:last-child {
		border: 0;
	}
	.wui-lightbox.selector > .box > .footer {
		height: 52px;
		border-top: 1px solid var(--wui-lightbox-selector-button-bordercolor);
	}
	.wui-lightbox.selector > .box > .footer > button {
		margin-top: 0;
		margin-left: 0;
    	margin-right: 0;
		border-top: 0;
		border-bottom: 0;
	}
	.wui-lightbox.selector > .box > .footer > button:first-child {
		border-right: 1px solid var(--wui-lightbox-selector-button-bordercolor);
	}
}