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

// Variables
$border-radius-default: 5px; // temporary overrule - To-do: remove after update
$input-field-border-radius: $border-radius-default;
$modal-header-background: $color-layer-1;
$modal-body-background: $color-layer-1;
$modal-footer-background: $color-layer-1;

#docbuilder .dbq-form {
	padding-top: 15px;
}

.dbq-form {
	border-bottom: 0 !important;
	section {
		padding: 0;
	}
	.dbqdb-element-header {
		svg {
			width: 20px;
			height: 20px;
		}
	}
	h1, h2, h3, h4, .dbq-element-header-5, p {
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		color: $text-color-default;
		line-height: 1.5;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	h1 {
		font-size: $font-size-xxl;
		font-weight: 700;
	}
	h2 {
		font-size: $font-size-large;
		text-transform: unset;
		font-weight: 600;
	}
	h3 {
		font-size: 18px;
		font-weight: 600;
		text-transform: unset;
	}
	h4 {
		font-size: $font-size-medium;
		font-weight: 500;
		text-transform: unset;
	}
	.dbq-element-header-5 {
		font-size: $font-size-base;
		font-weight: 500;
		text-transform: unset;
	}
	a {
		color: $color-gray-darker;
	}
	p {
		font-size: $font-size-small;
		font-weight: 500;

		// Insert properties
		&.dbqdb-insert-property {

			// XML insert property (Format 4 = XML)
			&[data-property-type="Text"][data-format="4"] {
				code {
					white-space: pre; // Adds indenting the the XML output
				}
			}
		}
	}

	// Insert properties
	.dbqdb-insert-property-header {
		display: inline-flex;
		align-items: center;

		.dbqdb-icon-inline-info-tooltip {
			margin-left: 2px;
			
			svg {
				display: inline-block;
				width: 20px;
				height: 20px;
			}
		}
	}

	.dbqdb-wizard-topic-name {
		padding: 0 30px;
		float: left;
		font-size: $font-size-medium;
		font-weight: $font-weight-bold;
		margin-top: 30px;
		color: $color-primary;
	}
	.checkbox {
		border-radius: 0 0 $input-field-border-radius $input-field-border-radius;
	}

	
	// label {
	// 	margin: 0 0 5px;
	// 	font-weight: 500;
	// 	font-size: $font-size-small;
	// 	line-height: 12px;
	// }

	.action-button {
		span {
			background: $color-primary;
			border-color: $color-primary;
			color: #fff;
			font-size: $font-size-small;
			line-height: 20px;
			font-weight: 600;
			padding: 8px 12px;
			border-radius: 3px;
		}
	}

	.topic {
		display: none;
		background: $modal-input-background;
		background: none !important;
		border-radius: 0 0 $input-field-border-radius $input-field-border-radius;
		
		&.active {
			display: block;
			> footer {
				-webkit-box-flex: 1;
				-ms-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				min-height: 40px;
			}
			> nav {
				-webkit-box-flex: 1;
				-ms-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				min-height: 40px;
			}
		}
	}

	.form-control {
		height: $field-height;
		line-height: 20px; 
		min-height: $field-height;
		padding: 11px 10px 9px;
		z-index: 1;
		position: relative;
		text-indent: 0;
		border-radius: 0 0 $input-field-border-radius $input-field-border-radius;
		background-color: $modal-input-background;
		font-weight: $field-font-weight;
		font-size: $field-font-size;
		color: $modal-input-color;
		border: $field-border-width solid $modal-border-color;
		-webkit-touch-callout: text !important;
		-webkit-user-select: text !important;
		-khtml-user-select: text !important;
		-moz-user-select: text !important;
		-ms-user-select: text !important;
		user-select: text !important;
		&:focus {
			border-color: $color-primary !important;
			outline: 0;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
		}
		&:disabled,
		.disabled {
			background: $modal-disabled-color !important;
			border: $field-border-width solid $modal-disabled-color;
			opacity: 1;
			color: $modal-input-color;
			cursor: not-allowed;
			-webkit-text-fill-color: $modal-input-color;
			-webkit-opacity: 1; /* Override iOS opacity change affecting text & background color */
		}
	}
	.dbq-form-group-title-label {
		&::after {
			content: "";
			clear: both;
			display: table;
		}
		@if $display-label-background == true {
			background: $modal-label-background;
			border: $field-border-width solid $modal-border-color;
		} @else {
			background: $label-background;
			border: $label-border;
		}
		border-bottom: 0;
		color: $modal-label-color;
		margin: 0;
		padding: 0;
		border-radius: 5px 5px 0 0;
		font-weight: 600 !important;
		width: 100% !important;
		line-height: 12px;
		cursor: not-allowed;
		a {
			float: left;
			width: 26px;
			height: 26px;
		}
		.dbq-label-text {
			float: left;
		}
		label {
			float: left;
			margin: 0;
			padding: 0;
			font-weight: $label-font-weight;
			line-height: 20px;
			font-size: $label-font-size;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	select {
		option {
			font-weight: 600;
		}
	}
	.row {
		//margin: 0;
		width: 100%;
	}
	
	// .dbqdb-element[data-element-type="Url"] {
	// 	margin-bottom: $global-margin;
	// }

	.col-xs-12,
	.col-sm-12,
	.col-md-12 {
		padding: 0;
	}
	.dbq-form-group {
		padding: 5px;
		//margin: 0 0 10px 0 !important;
		border-radius: 0 0 $input-field-border-radius $border-radius-default;
		.element {
			.property {
				flex: 1;
			}
		}
		.checkbox {
			border-radius: 6px;
		}
	}
	// .dbqdb-button-list { //.dbq-form-group-padding { // Replaced group padding for update 8-2024
	// 	padding: $field-form-group-padding-top 5px $field-form-group-padding-bottom 5px;
	// 	float: left;
	// 	width: 100%;
	// 	border: $field-border-width solid $modal-border-color;
	// 	background: $modal-input-background;
	// 	border-radius: 0 0 $input-field-border-radius $border-radius-default;
	// 	&[data-read-only="true"] {
	// 		background: $modal-disabled-color !important;
	// 		border-color: $modal-disabled-color !important;
	// 	}

	// 	.checkbox {
	// 		border-radius: 0;
	// 	}
	// }
	.dbq-form-group-no-padding {
		padding: 0;
		float: left;
		width: 100%;
		border-radius: 0 0 $input-field-border-radius $border-radius-default;
		.checkbox {
			border-radius: 0;
		}
	}
	.dbq-block-text {
		padding: 0 10px 10px 10px !important;
	}
	.dbq-form-group-title-label.dbq-label-disabled {
		background: $modal-disabled-color;
		border-color: $modal-disabled-color;
		padding: 0;
	}
	.dbq-form-group-title-label[data-has-info-tooltip="true"] {
		label {
			padding: 4px 10px;
			width: calc(100% - 26px) !important;
		}
	}
	.dbq-form-group-title-label[data-has-info-tooltip="false"] {
		label {
			padding: 4px 10px;
			width: 100% !important;
		}
	}
	input.form-control {
		padding: 11px 10px 9px;
		border: $field-border-width solid $modal-border-color;
	}
	select.form-control {
		height: $field-height;
		padding: $field-select-padding !important;
	}
	select.form-control,
	input.form-control {
		background-color: $modal-input-background;
	}
	
	/* Remove the HTML5 arrows/spinners from number inputs (Chrome, Safari, Edge, Opera) */
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	/* Remove the HTML5 arrows/spinners from number inputs (Firefox) */
	input[type=number] {
		-moz-appearance: textfield;
	}
	hr {
		margin: 14px 0 !important;
		border-top: 1px solid $render-engine-element-line-color;
	}
	pre {
		background-color: $render-engine-element-text-pre-background-color;
		color: $render-engine-element-text-pre-color;
		border-color: darken($render-engine-element-text-pre-background-color, 20);
		border-radius: 5px;
		padding: $padding-default;
	}
	.form-group {
		padding: 0;
		margin-bottom: 0;
		position: relative;
		flex: 1;
		.dbqdb-searchbox-container {
			.input-group-addon {
				padding: 0px;
				border-radius: 0 0 0 $input-field-border-radius;
				svg {
					width: 40px;
					height: $field-addon-height; 
					padding: $field-single-select-padding-y 10px;
				}
				.input-group-btn {
					border-radius: 0 $input-field-border-radius $input-field-border-radius 0;
				}
				&.disabled {
					border-radius: 0 0 0 $input-field-border-radius;
				}
			}
			.input-group {
				.input-group-btn {
					button {
						border-left: 0;
						padding: 0;
						border: 0;
						span {
							color: #b3baca;
						}
						svg {
							width: 40px;
							height: 41px;
							padding: 11px 10px 10px;
						}
						&.dbqdb-searchbox-container-remove {
							border-left: 0 !important;
							border-top: 2px solid $modal-border-color;
							border-right: 2px solid $modal-border-color;
							border-bottom: 2px solid $modal-border-color;
							padding: 0;
							border-radius: 0 0 $input-field-border-radius 0;
							&.btn-default {
								&:enabled {
									&:hover {
										background: $color-primary !important;
										border-color: $color-primary !important;
										svg {
											fill: #ffffff !important;
										}
									}
								}
							}
						}
					}
				}
			}
			&.searchbox-clear-hidden {
				border-radius: 0 0 $input-field-border-radius 0;
				.input-group {
					.input-group-btn {
						display: none;
					}
				}
			}
		}
	}
	.dbq-property-no-label {
		.form-control {
			border-radius: $input-field-border-radius !important;
		}
	}
	// .row[data-element-type="Button"],
	// .row[data-element-type="InputProperty"],
	// .row[data-element-type="Text"] {
	// 	//margin: 0 0 $global-margin 0;
	// 	margin: 0;
	// }
	.row.dbq-form-group-title[data-element-type="Text"] {
		p {
			float: left;
			margin: 0;
			padding: 0;
			font-weight: 600;
			line-height: 20px;
			font-size: $font-size-small;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			cursor: pointer;
		}
	}

	// .dbq-colon-first,
	// .dbq-colon-second {
	// 	padding: 5px 10px;
	// 	margin: 3px;
	// 	p {
	// 		padding: 7px 10px 6px;
	// 		margin: 3px 0;
	// 		font-size: $font-size-medium;
	// 		line-height: 16px;
	// 	}
	// 	&:first-of-type {
	// 		margin-top: 10px !important;
	// 	}
	// 	&:last-of-type {
	// 		margin-bottom: 10px !important;
	// 	}
	// }

	// .dbq-colon-first {
	// 	p {
	// 		font-weight: 500;
	// 		color: color(text-color-p);
	// 	}
	// }
	// .dbq-colon-second {
	// 	p {
	// 		float: left;
	// 		font-weight: 600;
	// 		background: color(default-background);
	// 		color: color(text-color-p);
	// 		border-radius: $border-radius-button-default;
	// 	}
	// }
	.dbq-column {
		// > .block {
		// 	border-radius: $input-field-border-radius;
		// 	background: $graph-background;
		// }
		// .block.dbq-block-text {
		// 	-webkit-box-shadow: none;
		// 	-moz-box-shadow: none;
		// 	box-shadow: none;
		// }
	}
	.dbq-no-file-found {
		height: $field-height;
		min-height: $field-height;
		line-height: $field-line-height;
		padding: 10px;
		font-size: $field-font-size;
		background: $modal-input-background;
		border: $field-border-width solid $modal-border-color;
		border-radius: 0 0 $input-field-border-radius $input-field-border-radius;
		font-weight: 600;
	}

	.dbq-input-no-label {
		.form-control {
			border-radius: $input-field-border-radius;
		}
		.input-group {
			.form-control {
				border-radius: 0 $input-field-border-radius $input-field-border-radius 0;
			}
			.input-group-addon {
				border-radius: $input-field-border-radius 0 0 $input-field-border-radius;
			}
			.cr-icon {
				border-radius: $input-field-border-radius 0 0 $input-field-border-radius;
			}
			.input-group.date {
				.input-group-addon {
					border-radius: $input-field-border-radius 0 0 $input-field-border-radius;
				}
			}
		}
	}
	.input-group.date {
		input.form-control {
			border-radius: 0 $input-field-border-radius $input-field-border-radius 0;
		}
	}

	.dbq-form-group-title p,
	.dbq-form-group-title span,
	.form-group label,
	.dbq-custom-label p {
		margin: 0;
		padding: 7px 10px;
		background: $modal-label-background;
		border: $field-border-width solid $modal-border-color;
		border-bottom: 0;
		color: $modal-label-color;
		font-weight: 600;
		width: 100% !important; /* auto */
		/*float: left; float left not possible for noImageFound text, then it wil not float..*/
		float: left; /* needed for labels.. so make another solution for noImageFound */
		line-height: 12px;
		font-size: $font-size-small;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		cursor: pointer;
	}
	.row[data-element-type="Button"] {
		.action-button {
			a {
				padding: 0;
				span {
					float: left;
					padding: 3px 10px;
					background: $color-primary;
					border: 0;
					border-radius: $border-radius-button-default;
					color: #ffffff;
					fill: #ffffff;
					-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
					-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
					box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
					opacity: 1;
					cursor: pointer;
				}
			}
		}
	}
	.row.dbq-form-group-title {
		padding: 0 !important;
		+ {
			.flex-container.dbq-form-group {
				border: $field-border-width solid $modal-border-color;
				background: $modal-input-background;
				margin: 0 0 10px 0;
			}
		}
		p {
			padding: 7px 10px;
			background: $modal-label-background;
			border: $field-border-width solid $modal-border-color;
			border-bottom: 0;
		}
		&[data-element-type="Text"] {
			p {
				padding: 7px 10px;
				background: $modal-label-background;
				border: $field-border-width solid $modal-border-color;
				border-bottom: 0;
			}
		}
		&.dbq-label-disabled {
			+ {
				.flex-container.dbq-form-group {
					border: $field-border-width solid $modal-disabled-color;
					background: $modal-disabled-color;
					margin: 0 0 10px 0;
				}
			}
			span.dbq-element-header-5 {
				background: $modal-disabled-color;
				border: $field-border-width solid $modal-disabled-color;
				border-bottom: 0;
				opacity: 1 !important;
			}
			p {
				background: $modal-disabled-color;
				border: $field-border-width solid $modal-disabled-color;
				border-bottom: 0;
				opacity: 1 !important;
			}
		}
	}
	.dbq-custom-label {
		margin: 0 !important;
	}
	// .dbq-form-group-title,
	// .dbq-custom-label {
	// 	+ {
	// 		.row[data-element-type="InputProperty"] {
	// 			margin: 0 0 $global-margin 0;
	// 		}
	// 	}
	// }
	input[data-is-searchbox="true"] {
		+ {
			.dbqdb-searchbox-container {
				.input-group {
					input.form-control {
						border-radius: 0 !important;
					}
				}
				&.searchbox-clear-hidden {
					.input-group {
						input.form-control {
							border-radius: 0 0 $input-field-border-radius 0 !important;
						}
					}
				}
			}
		}
	}

	.dbq-required {
		p {
			&:after {
				color: #b64f4b;
				content: "*";
				font-size: 1em;
			}
		}
	}
	select.form-control {
		padding: 0 10px;
	}
	textarea.form-control {
		@include scrollbar;
		min-height: 130px !important;
		padding: 10px;
	}

		
	.dbq-form-group-padding {
		background: $modal-input-background;
		border: $field-border-width solid $modal-border-color;
	}
	
	.dbq-form-group-disabled {
		background: $modal-disabled-color;
	}
}

form[data-view-mode="Modify"] {
	.input-group-addon {
		border-radius: 0 0 0 $input-field-border-radius;
		input.form-control {
			border-radius: 0 0 $input-field-border-radius 0 !important;
		}
	}
}
form[data-view-mode="View"] {
	.input-group-addon {
		border-radius: 0 0 0 $input-field-border-radius;
		input.form-control {
			border-radius: 0 0 $input-field-border-radius 0 !important;
		}
	}
	.dbq-form {
		.dbq-form-group {
			.checkbox {
				border-radius: 0;
				label {
					border-radius: 0 0 $input-field-border-radius $input-field-border-radius;
				}
			}
			label.dbq-label-disabled {
				border-radius: 5px 5px 0 0;
			}
		}
		.row.dbq-form-group-title {
			p {
				background: $modal-disabled-color;
				border: $field-border-width solid $modal-disabled-color;
			}
			&[data-element-type="Text"] {
				p {
					background: $modal-disabled-color;
				}
			}
		}
		.dbq-form-group-no-padding {
			button.btn-primary,
			button.btn-default {
				margin: 8px 0 8px 5px !important;
				&:disabled {
					margin: 8px 0 8px 5px !important;
					&:first-of-type {
						margin: 8px 0 8px 10px !important;
					}
				}
				&:first-of-type {
					margin: 8px 0 8px 10px !important;
				}
			}
		}
	}
}

.dbq-column {
	min-width: 0; // Note from Jeroen @ 24-02-2023: The min-width=0 is very important here. Because a dbq-column is a flex box, the min-width goes to auto and this gives columns the ability to grow past their set size.
	margin-right: 15px;
	border-radius: $input-field-border-radius;
	&:last-of-type {
		margin-right: 0;
	}
	.dbq-column {
		-webkit-box-shadow: none !important;
		-moz-box-shadow: none !important;
		box-shadow: none !important;
	}
}

.modal,
.dbq-popup {
	.dbq-column {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	.dbq-form {
		.form-group {
			.input-group {
				flex-wrap: nowrap;
			}
		}
		section {
			padding: 30px 30px 20px;
		}
	}
}


.dbqdb-footer {
	background-color: $modal-footer-background;
	border: 0;
	border-radius: 0 0 $input-field-border-radius $input-field-border-radius;
	padding: 20px 30px;
	border-top: 1px solid $global-border-color;

	&.dbqdb-footer-wizard {
		float: left;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;

		.dbqdb-footer-left-column {
			display: flex;
			flex: 1;
			justify-content: flex-start;
		}

		.dbqdb-footer-center-column {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			flex: 1;
		}

		.dbqdb-footer-right-column {
			display: flex;
			flex: 1;
			justify-content: flex-end;
		}

		// Hiding the previous button
		.dbqdb-wizard-previous-button-hidden {
			opacity: 0;
			user-select: none;
			cursor: default;
		}

		// Progress
		.dbqdb-wizard-progress {
			margin-right: 10px;	
		}

		.dbqdb-wizard-state-indicator {
			display: flex;
			align-items: center;

			.dbq-loading-spinner-to-checkmark {
				display: none;
			}

			&.dbqdb-wizard-state-saving {
				.dbq-loading-spinner-to-checkmark {
					display: block;
				}
			}
		}
	}
}
.form-control, .form-control:focus {
	color: $modal-input-color;
	background-color: $modal-input-background;
	border: 1px solid $modal-border-color;
}

.modal-dialog-loading {
	position: absolute;
	height: 230px;
	top: 0;// Note from Jeroen @ 21-09-2023: Used to be -3px? No idea why, but this was an issue for the sidepanel loading view where 3px were missing at the bottom.
	left: 0;
	width: 100%;
	background-color: $modal-body-background !important;
	
	.modal-dialog-loading-title {
		margin-left: auto;
		margin-right: auto;
		font-size: 16px;
	}
}

.dbq-form {
	.dbq-form-group-title + div + .dbq-form-group {
		border-radius: 0 0 $input-field-border-radius $input-field-border-radius !important;
	}
	.dbq-form-group {
		.dbq-form-group-title-label {
			display: none;
		}
	}
	.dbq-no-file-found {
		// padding: 10px;
		// background: $modal-body-background;
		// border: 2px solid $modal-border-color;
		// font-weight: 600 !important;
		// height: 50px;
		// line-height: 20px;
		// min-height: 50px;
	}
	.row {
		/* table insde data-element-type="InputProperty" (mail) */
		&[data-element-type="InputProperty"] {
			//margin: 0 0 $global-margin 0;

			.dbq-property-no-label {
				border-radius: $input-field-border-radius;
				input {
					border-radius: $input-field-border-radius;
				}
				textarea {
					border-radius: $input-field-border-radius;
				}
				.dbq-input-no-label {
					.date {
						input {
							border-radius: 0 $input-field-border-radius $input-field-border-radius 0;
						}
					}
				}
			}
		}
		&[data-element-type="Button"],
		&[data-element-type="Text"] {
			//margin: 0 0 $global-margin 0;
		}
		&.dbq-form-group-title {
			&[data-element-type="Text"] {
				margin: 0;
				p {
					margin: 0;
				}
			}
		}
	}
	// .dbq-form-group-title {
	// 	>.row[data-element-type="InputProperty"] {
	// 		margin: 0 0 $global-margin 0;
	// 	}
	// 	+ {
	// 		.row {
	// 			&[data-element-type="InputProperty"] {
	// 				&.dbq-form-group-padding,
	// 				&.dbq-form-group-no-padding {
	// 					margin: 0 !important;
	// 				}
	// 				.dbq-property-no-label {
	// 					border-radius: 0 0 $input-field-border-radius $input-field-border-radius;
	// 					input,
	// 					textarea {
	// 						border-radius: 0 0 $input-field-border-radius $input-field-border-radius;
	// 					}
	// 					.input-group.date {
	// 						input[data-type="time"] {
	// 							border-radius: 0 0 $input-field-border-radius 0;
	// 						}
	// 					}
	// 					select {
	// 						border-radius: 0 0 $input-field-border-radius $input-field-border-radius;
	// 					}
	// 					select[data-has-value="true"] {
	// 						border-radius: 0 0 0 $input-field-border-radius;
	// 					}
	// 				}
	// 				.property {
	// 					>label {
	// 						display: none;
	// 					}
	// 					.checkbox {
	// 						border-radius: 0 0 $input-field-border-radius $input-field-border-radius;
	// 						>label {
	// 							border-top: 0 !important;
	// 						}
	// 					}
	// 				}
	// 			}
	// 		}
	// 	}
	// }
	.flex-container {
		&.dbq-form-group {
			border: 1px solid $modal-border-color;
			border-radius: $input-field-border-radius;
			.element {
				margin: 0 !important;
			}
			.dbq-form-group-title {
				+ {
					.flex-container {
						margin: 0 !important;
					}
				}
			}
			// .row {
			// 	&[data-element-type="InputProperty"] {
			// 		&:first-of-type {
			// 			margin: 0;
			// 		}
			// 	}
			// }
		}
		// .row {
		// 	&[data-element-type="InputProperty"] {
		// 		&:first-of-type {
		// 			margin: 0 0 $global-margin 0;
		// 		}
		// 	}
		// }
	}


	.dbq-input-no-label {
		.input-group.date {
			.input-group-addon {
				border-radius: $input-field-border-radius 0 0 $input-field-border-radius;
			}
		}
	}
	.dbq-property-no-label {
		.checkbox {
			label {
				float: left;
				border-top: 0;
			}
		}
	}
	.dbq-form-group-no-padding {
		button.btn-primary,
		button.btn-default {
			&:disabled {
				margin: 8px 0 8px 5px !important;
				&:first-of-type {
					margin: 8px 0 8px 10px !important;
				}
			}
		}
	}

	.input-group-addon {
		display: flex;
		align-items: center;
		color: $modal-label-color;
		background-color: $modal-label-background;
		border-top: $field-border-width solid $modal-border-color;
		border-bottom: $field-border-width solid $modal-border-color;
		border-left: $field-border-width solid $modal-border-color;
		border-radius: 0 0 0 $border-radius-default;
	
		svg {
			padding: 5px;
			width: 40px;
			height: $field-addon-height;
			border: 0;
			border-radius: 0 0 0 $border-radius-default;
			cursor: default;
			background: $modal-label-background;
			fill: $modal-label-color;
		}
	
		&.disabled {
			background-color: color(modal-disabled-color);
			border-color: color(modal-disabled-color);
			opacity: 1;
	
			svg {
				background: transparent;
			}
		}
	}
}

#UserPasswordChangeDialog {
	.form-group {
		border-radius: $input-field-border-radius;
		margin-bottom: $global-margin;
		input.form-control {
			padding: 11px 10px 9px;
			min-height: 50px;
			line-height: 20px;
			text-indent: 0;
			font-weight: 600;
			font-size: $font-size-base;
			user-select: text !important;
			border: $field-border-width solid $modal-border-color;
			background-color: $modal-input-background;
			border-radius: 0 0 $input-field-border-radius $input-field-border-radius;
			&:focus {
				border-color: $color-primary !important;
				outline: 0;
				box-shadow: none;
			}
		}
		label {
			border-radius: $input-field-border-radius $input-field-border-radius 0 0;
			background-color: $modal-label-background;
			color: $modal-label-color;
			border: $field-border-width solid $modal-border-color;
			border-bottom: none !important;
			padding: 4px 10px;
			width: 100% !important;
			float: left;
			margin: 0;
			font-weight: 600;
			line-height: 20px;
			font-size: $font-size-small;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			cursor: pointer;
		}
	}
}

.input-group-btn {
	width: auto !important;
}

.form-group {
	.dbqdb-searchbox-container {
		.input-group-addon {
			svg {
				fill: #595f6e;
				margin-right: 0;
			}
		}
		.input-group-btn {
			svg {
				fill: #b3baca;
				padding: 0;
				margin-right: 0;
			}
		}
	}
}