//@import "../../../abstracts/abstracts";

.dbq-form {
	.multiple-select-selectmulti {
		&:not([data-is-read-only="true"]) {
			min-height: 246px;
		}
		width: 100%;
		padding: 0;
		float: left;
		border: $field-border-width solid $modal-border-color;
		border-top: unset;
		border-radius: 0 0 $border-radius-default $border-radius-default;
		.col-sm-5 {
			margin: 0;
			padding: 0;
		}
		strong {
			float: left;
			width: 100%;
			padding: 5px;
			font-size: $font-size-base;
			line-height: 14px;
			font-weight: $font-weight-bold;
			text-align: center;
			background: $modal-label-background;
			background-color: $modal-label-background;
			border: 2px solid $modal-border-color;
			border-left: unset;
			border-right: unset;
			border-radius: 0;
			color: color(text-color-default);
		}
		.form-control {
			padding: 10px !important;
		}
		.dbq-multiselect-buttons-container {
			float: left;
			width: 50px;
			height: 100%;
			background-color: $modal-input-background;
			border-left: 2px solid $modal-border-color;
			border-right: 2px solid $modal-border-color;
		}
		svg {
			padding: 2px;
			fill: #5a5a5a;
            width: $svg-icon-size;//20px;
            height: $svg-icon-size;//20px;
		}
		button {
			&:hover {
				svg {
					fill: #000000;
				}
			}
		}
		option {
			background: $modal-input-background;
			color: #000000;
		}
		.btn {
			background: $modal-input-background;
            background-color: $modal-input-background;
			border-top: 2px solid $modal-border-color;
			border-bottom: unset;
			padding: 0;
			margin: 0;
			border-radius: 0;
			height: 25%;
            box-shadow: unset;
			transition: none;
			svg {
				padding: 4px;
				margin-right: 0px;
				fill: $color-primary;
			}
			&:hover {
				background: $color-primary;
				svg {
					fill: #ffffff;
				}
			}
		}
		select.form-control {
			box-shadow: none;
			padding: 0 !important;
			background-image: none;
            background: $modal-input-background;
            border-radius: 0 0 $border-radius-default $border-radius-default;
			@include scrollbar($modal-input-background, 0);
			
			option {
				background: $modal-input-background;
				border-bottom: 1px solid $modal-border-color;
				color: $modal-input-color;
				padding: 4px 6px;
				line-height: 12px !important;
				font-size: 12px;
				font-weight: $font-weight-bold !important;
				&:checked,
				&:hover {
					background: $color-primary;
					color: $color-white;
				}
			}
		}
		.multiple-select-selectmulti-left,
		.multiple-select-selectmulti-right {
			float: left;
			width: calc(50% - 25px);
			height: 100%;
			select.form-control {
				background-color: $modal-input-background;
				height: calc(100% - 28px);
				border: unset;
			}
		}

		.multiple-select-selectmulti-left {
			select.form-control {
				border-radius: 0 0 0 $border-radius-default !important;
			}
		}
		.multiple-select-selectmulti-right {
			select.form-control {
				border-radius: 0 0 $border-radius-default 0 !important;
			}
		}
        select[multiple="multiple"] {
            min-height: 170px !important;
        }
		&[data-is-read-only="true"] {
			font-size: $field-font-size;
			line-height: 20px;
			border-radius: $border-radius-default;
			padding: 10px;
			background: $modal-disabled-color;
			border: $field-border-width solid $modal-disabled-color;
			font-weight: $field-font-weight;
		}
	}
	.dbq-property-no-label {
		.multiple-select-selectmulti {
			border-radius: $border-radius-default;
			strong {
				border-radius: $border-radius-default $border-radius-default 0 0;
			}
		}
		.multiple-select-selectmulti-left {
			border-radius: $border-radius-default 0 0 $border-radius-default;
			select {
				border-radius: 0 0 0 $border-radius-default;
			}
			strong {
				border-radius: 8px 0 0 0;
			}
		}
		.multiple-select-selectmulti-right {
			border-radius: 0 $border-radius-default $border-radius-default 0;
			select {
				border-radius: 0 0 $border-radius-default 0;
			}
			strong {
				border-radius: 0 8px 0 0;
			}
		}
	}
	.dbq-form-group-title {
		+ {
			.dbq-property-no-label {
				.multiple-select-selectmulti {
					border-radius: $border-radius-default;
					.multiple-select-selectmulti-left {
						select {
							border-radius: 0 0 0 $border-radius-default;
						}
						strong {
							border-radius: 0;
						}
					}
					.multiple-select-selectmulti-right {
						select {
							border-radius: 0 0 $border-radius-default 0;
						}
						strong {
							border-radius: 0;
						}
					}
				}
			}
		}
	}
}
.dbq-property-no-label {
	.multiple-select-selectmulti {
		border-radius: $border-radius-default;
		strong {
			border-radius: $border-radius-default $border-radius-default 0 0;
		}
	}
}
div[data-document-property-code="OrganisationUserSecurityObjects"] {
	svg {
		&:hover {
			fill: $color-primary;
		}
	}
}

.dbq-resizable-selectmulti {
    resize: vertical;
    overflow: auto;
}