// Custom color sets
// $filter-colors-light: (
//     classlist-progress-bar-border-color: #eee
// ); 

// $filter-colors-dark: (
//     classlist-progress-bar-border-color: #555
// );

// Variables
$classlist-filter-background-color: $color-layer-2;
$classlist-filter-border-color: $global-border-color;
$classlist-filter-padding: 5px;
$classlist-filter-group-height: 64px;
$classlist-filter-group-padding: ($padding-default / 3);
$classlist-filter-group-border-radius: 5px;

$classlist-progress-bar-height: 36px;
$classlist-progress-background-color: $color-layer-2;
$classlist-progress-bar-border-radius: ($classlist-progress-bar-height / 2);
$classlist-progress-bar-border-color: $color-layer-4; //custom-color(classlist-progress-bar-border-color, $filter-colors-light, $filter-colors-dark);
$classlist-progress-bar-arrow-width: 10px;

// Check if the primary color is 'rgb' or 'hex' for the SVG fill color
$svg-fill-color: if(
	str-index(inspect($color-primary), 'rgb') == null,
	'%23' + str-slice("#{$color-primary}", 2),
	$color-primary
);

#classlist-filters {
    padding: ($padding-default / 2) $padding-default;
	float: right;
	max-width: 100%;
	
    &::after {
        content: "";
        clear: both;
    }

	&.document-class-list-filters-left {
		float: left;
	}

	// When a progress bar filter is available, the progress bar must use full width so we must force the filters to a new line.
	&.has-progress-bar-filter {
		float: left;
		clear: both;
		width: 100%;
	}
}

#classlist {
	&[data-top-class-list-mode="0"],
	&[data-top-class-list-mode="4"] {
		#classlist-filters {
			// z-index: 6; // Frenk: Used so that it overlaps #classlist-dbq-tree-grid
			position: relative;
		}
	}
}

#document-class-list-filters {
	display: flex;
	gap: $classlist-filter-padding;
	padding: $classlist-filter-padding;
	overflow-x: auto;  
	width: 100%;
	margin: 0;
    backdrop-filter: unset;
    background: unset;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;

	// New styling - TODO: Merge with existing CSS
	padding: 0px;
	@include scrollbar;
	@include border-radius;

	.dbqdclf-filter-group {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: $classlist-filter-background-color;
		border: 1px solid $classlist-filter-border-color;
		border-radius: $classlist-filter-group-border-radius;
		padding: $classlist-filter-group-padding;
		min-height: $classlist-filter-group-height; // Give the filter groups a minimum height, otherwise the height would be reduced if all filter groups are collapsed.

		.dbqdclf-filter-group-icon {
			margin: 0 ($margin-default / 3);
			svg {
				fill: $text-color-default;
			}
		}

		.dbqdclf-filter-group-name {
			font-weight: $font-weight-bold;
		}

		.dbqdclf-filter-group-filter-properties {
			display: flex;
			flex-direction: row;
			gap: 5px;

			.document-class-list-filter-column {
				display: flex;
				flex-direction: column;
				gap: 5px;

				.document-class-list-filter {
					&:first-child {
						margin-left: 0;
					}

					.dbq-checkbox-filters {
						display: flex;
						flex-direction: row;
						gap: 0px;
						margin: inherit;
					}
				}
			}
		}

		.dbqdclf-filter-group-toggle-button-container {
			height: 100%; // To increase the height of the collapse/expand button as well, making it easier to click.

			.dbqdclf-filter-group-toggle-button {
				background: none;
				border: none;
				outline: none;
				height: 100%;

				svg {
					fill: $text-color-default;
				}

				&:hover {
					svg {
						fill: $color-primary;
					}
				}
			}
		}

		.dbqdclf-filter-group-active-filter-count-indicator {
			display: none; // The count indicator should only be visible for collapsed filter groups
			margin-left: ($margin-default / 3);
			@include badge;
		}

		&:first-child {
			margin-left: auto; // Start aligning the filter groups from the right side by default
		}

		&[data-is-collapsed="true"] {
			cursor: pointer; // When the group is collapsed, the entire group is clickable to expand it.

			.dbqdclf-filter-group-filter-properties {
				display: none;
			}

			.dbqdclf-filter-group-toggle-button-container {
				.dbqdclf-filter-group-toggle-collapse-button {
					display: none;
				}
			}

			// Only show the filter count indicator when it's collapsed and has at least 1 active filter
			&[data-has-active-filter="true"] {
				.dbqdclf-filter-group-active-filter-count-indicator {
					display: flex;
				}
			}

			// Hovering a closed group should always highlight the toggle button icon
			&:hover {
				.dbqdclf-filter-group-toggle-button-container {
					.dbqdclf-filter-group-toggle-button {
						svg {
							fill: $color-primary;
						}
					}
				}
			}
		}

		&[data-is-collapsed="false"] {
			.dbqdclf-filter-group-name {
				display: none;
			}

			.dbqdclf-filter-group-toggle-button-container {
				.dbqdclf-filter-group-toggle-expand-button {
					display: none;
				}
			}
		}
	}

	.document-class-list-filter {
        max-width: 300px;
		//float: right;
		border: 0;
		border-radius: 10px;
        margin: 0;// ($classlist-filter-padding / 2);
        padding: 3px;
        background: $filter-tile-background;
        border: 1px solid $modal-border-color;
		@include border-radius($sidebar-tile-border-radius);

		&:first-child {
			margin-left: auto;
		}

		.dbq-checkbox-filters {
			input {
				display: none;
			}
		}

		.cr {
			float: left;
			width: 18px;
			height: 18px !important;
			clear: both;
			border-radius: 5px;
			background: $modal-input-background;
			cursor: pointer;

            background-color: unset;
            margin: 4px 5px;
            border: 1px solid $navbar-dropdown-menu-text-color;

			svg {
				width: 17px;
				height: 17px;
				padding: 3px;
				margin: 0;
				top: 0;
				left: 0;
				float: left;
			}
		}

		input.form-control {
			height: 26px;
			background-color: unset;
			border: none;

			&.range-text-filter {
				border: 1px solid #e5e7ec;
			}
		}

		label {
			margin: 0;
			display: flex;
			float: none;
			border-bottom: 0;
			width: 100%;
            color: $navbar-dropdown-menu-text-color !important;
            background: unset;
            border: none;
            font-weight: 600;
            padding: 3px 5px;
		}

		.filter-boolean-icon {
			// float: left;
			display: inline-block;
			width: 10px;
			height: 10px;
			padding: 0;
			margin: 10px 5px;
		}
		// select {
		// 	max-width: 200px !important;
		// }

		.input-filter {
			padding: 5px !important;
		}

		label:not(.dbq-checkbox-filters) {
			display: flex;
			align-items: center;
			width: max-content;
			padding: 3px 5px;

			// Info tooltip
			a {
				svg {
					width: 16px;
					height: 16px;
					margin-left: 2px;
					fill: $text-color-default;
				}
			}
		}

		&.checkbox-bottom {
			span.dbq-checkbox-label-filters {
				display: flex;
				align-items: center;
				width: 100%;
				padding: 3px 5px;
				
				// Info tooltip
				a {
					svg {
						width: 16px;
						height: 16px;
						margin-left: 2px;
						fill: $text-color-default;
					}
				}
			}
		}
	}

	// Change flex-direction to column when filters include more than just checkboxes
	&:has(.dbqdclf-select-type-dropdown) .form-group .dbq-checkbox-filters,
	&:has(.dropdown-toggle) .form-group .dbq-checkbox-filters {
		flex-direction: column;
	}

	.form-group {
		margin-bottom: 0 !important;
		padding: 0 !important;

        .form-control {
			font-size: $font-size-small;
            border: none;
            background: unset;
            color: $navbar-dropdown-menu-text-color;
            padding: 0;
            cursor: pointer;
            option {
                font-size: $font-size-small;
                line-height: $line-height-default;
                color: $navbar-dropdown-menu-text-color;
                padding: 3px 5px;
                background-color: $navbar-dropdown-menu-background-color !important;
                border: 0;
                -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
				@include border-radius($navbar-dropdown-menu-border-radius);
            }
            &.date-picker {
                padding: 0 5px;
				min-width: 110px;
                background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23" + str-slice("#{color(text-color-default)}", 2) + "'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
                background-size: 10px;
                background-position: calc(100% - 3px) calc(50% + 3px);
                background-repeat: no-repeat;
                &:hover {
                    color: $color-primary;
                    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='" + svg-fill-color($color-primary) + "'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
                    background-size: 10px;
                    background-position: calc(100% - 3px) calc(50% + 3px);
                    background-repeat: no-repeat;
                }
            }
        }
        select.form-control {
            padding: 0 20px 0 5px;
			height: 26px;
            -moz-appearance: none; 
            -webkit-appearance: none; 
            appearance: none;
            background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23" + str-slice("#{color(text-color-default)}", 2) + "'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
            background-size: 10px;
            background-position: calc(100% - 3px) calc(50% + 3px);
            background-repeat: no-repeat;
			width: 100%;
			@include scrollbar;
            &:hover {
                color: $color-primary;
                background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='" + svg-fill-color($color-primary) + "'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
                background-size: 10px;
                background-position: calc(100% - 3px) calc(50% + 3px);
                background-repeat: no-repeat;
            }
        }
        .dbq-checkbox-filters {
            border: unset !important;
            .dbq-checkbox-label-filters {
                background: unset;
                border-bottom: unset;
                font-weight: 600;
                color: $navbar-dropdown-menu-text-color !important;
				float: left;
    			padding: 4px 10px 4px 5px;
				width: auto;

				[data-toggle="tooltip"] {
					svg {
						fill: $material-design-icon-tooltip-color;
						width: $material-design-icon-tooltip-size;
						height: $material-design-icon-tooltip-size;
					}
				}
            }
        }
	}

	label {
		font-size: $font-size-small;
		min-width: 30px;
		position: relative;
		line-height: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #001323;
		font-weight: 600;

		input[type="checkbox"] {
			+ {
				.cr {
					> .cr-icon {
						opacity: 0;
						transform: scale(3) rotateZ(-20deg);
					}
				}
			}

			&:checked {
				+ {
					.cr {
						background-color: $color-primary;
						border-color: color(button-border-color);
						fill: #fff;

						> .cr-icon {
							opacity: 1;
							transform: scale(1) rotateZ(0deg);
						}
					}
				}
			}
		}
	}
	// To-do: CSS below still needs to be organised (automatically generated)

	.dbq-checkbox-container {
		float: left;
		width: 100%;
		margin: 5px 0 0 0;
	}

	.dbq-checkbox-container[data-visible="true"] {
		&:last-of-type {
			margin: 0 !important;
		}
	}

	label.dbq-checkbox {
		display: block;
		position: relative;
		cursor: pointer;
		font-size: 22px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		padding-left: 0;
		margin-bottom: 0;
		float: left;
		width: 100%;
		border-radius: 3px;

		input {
			position: absolute;
			opacity: 0;
			cursor: pointer;
			height: 0;
			width: 0;

			&:checked {
				~ {
					.dbq-checkmark {
						background-color: color(button-background-color);
						border: 2px solid color(button-background-color);

						&:after {
							display: block;
						}
					}
				}
			}
		}

		&:hover {
			input {
				~ {
					.dbq-checkmark {
						background-color: #001323;
					}
				}
			}
		}

		.dbq-checkmark {
			&:after {
				left: 5px;
				top: 1px;
				width: 6px;
				height: 11px;
				border: solid #fff;
				border-width: 0 2px 2px 0;
				-webkit-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
			}
		}
	}

	.dbq-checkbox-value {
		// float: left;
		width: 100%;
		padding: 0 0 0 30px;
		font-size: 14px;
		line-height: 20px;
		font-weight: 400;
		display: flex;
		white-space: nowrap;
	}

	.document-class-list-filter-column {
		float: left;
		margin-right: 10px;

		.document-class-list-filter {
			clear: both;

			&:first-of-type {
				clear: none;
			}
		}
	}

	.checkbox {
		label {
			input[type="checkbox"] {
				+ {
					.cr {
						> .cr-icon {
							opacity: 0;
							transform: scale(3) rotateZ(-20deg);
						}
					}
				}

				&:checked {
					+ {
						.cr {
							> .cr-icon {
								opacity: 1;
								transform: scale(1) rotateZ(0deg);
							}
						}
					}
				}
			}
		}
	}

	.bootstrap-datetimepicker-widget {
		.list-unstyled {
			padding: 5px;
		}

		table {
			tr {
				background: #ffffff;
				border-bottom: 1px solid #ffffff;
				color: #717886;
			}

			thead {
				tr {
					&:first-child {
						th {
							&:hover {
								background: #e5e7ec !important;
							}
						}
					}
				}
			}

			td.day {
				&:hover {
					background: #e5e7ec !important;
				}
			}
		}
	} 

	.bootstrap-datetimepicker-widget.dropdown-menu {
		li {
			padding: 0 !important;
			background: #ffffff !important;

			&:hover {
				background: 0 !important;
			}
		}

		background: #ffffff !important;
	}

	// &.document-class-list-filters-left {
	// 	.document-class-list-filter {
	// 		//float: left !important;
	// 		margin-bottom: 0;

	// 		&:first-child {
	// 			margin-left: unset;
	// 		}
	// 	}
	// }

    .dbqdclf-select-type-dropdown {
		width: min-content;
		max-width: 100%;
		
        .dbqstd-output-button {
            .dbqstd-output-content-container {
                height: 26px;
                border: none;
                font-size: 12px;
                padding-left: 5px;
                font-weight: 400;

                background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='" + svg-fill-color(color(text-color-default)) + "'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
                background-size: 10px;
                background-position: calc(100% - 3px) calc(50% + 3px);
                background-repeat: no-repeat;

                .dbqstd-output-item {
                    .dbqstd-attribute {
                        .dbqstd-attribute-value {
                            color: $navbar-dropdown-menu-text-color;
                        }
                    }
                }

				&.dbqstd-invalid {
					background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='" + svg-fill-color($select-type-popup-invalid-color) + "'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
					background-size: 10px;
                    background-position: calc(100% - 3px) calc(50% + 3px);
                    background-repeat: no-repeat;            
					
					.dbqstd-output-item {
						.dbqstd-attribute {
							.dbqstd-attribute-value {
								color: $select-type-popup-invalid-color;
							}
						}
					}
				}
            }   

            &:hover {
                .dbqstd-output-content-container {
                    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='" + svg-fill-color($color-primary) + "'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
                    background-size: 10px;
                    background-position: calc(100% - 3px) calc(50% + 3px);
                    background-repeat: no-repeat;                
    
                    .dbqstd-output-item {
                        .dbqstd-attribute {
                            .dbqstd-attribute-value {
                                color: $color-primary;
                            }
                        }
                    }
                }   
            }
        }

        // Unfortunately we can't get around without using !importants.
        // The #classlist .dropdown-menu styling has way too many !importants.
        .dbqstd-popup-container {
            padding: 0 0 ($padding-default / 3) 0 !important;
            background: $modal-label-background !important;

            .dbqstd-search-input {
                background-color: $modal-input-background !important;
                border: 2px solid $modal-border-color !important;
				color: $text-color-default;
            }
        }
    }
	
	.dbqdclf-select-type-popup {
		.dbqstp-output-button {
			background: 0 none;
			border: 0 none;	
			outline: 0 none;
			padding: 0;
			margin: 0;
			max-width: 100%;

			.dbqstp-output-content-container {
				display: flex;
				align-items: center;
				height: 26px;
                border: none;
                font-size: 12px;
                padding-left: 5px;
                font-weight: 400;

                background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='" + svg-fill-color(color(text-color-default)) + "'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
                background-size: 10px;
                background-position: calc(100% - 3px) calc(50% + 3px);
                background-repeat: no-repeat;

				.dbqstp-output-item {
					max-width: 100%;
					padding: 0 30px 0 0;

					.dbqstp-attribute-name {
						display: none;
					}

					.dbqstp-attribute {
						color: $text-color-default;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.dbqstp-loading {
					padding-right: 30px; // Padding is used to make room for the arrow-icon background
				}
			}

            &:hover {
                .dbqstp-output-content-container {
                    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='" + svg-fill-color($color-primary) + "'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
                    background-size: 10px;
                    background-position: calc(100% - 3px) calc(50% + 3px);
                    background-repeat: no-repeat;                
    
                    .dbqstp-output-item {
                        .dbqstp-attribute {
                            .dbqstp-attribute-value {
                                color: $color-primary;
                            }
                        }
                    }
                }   
            }
		}
	}

	.dbqstsd-output-button {
		.dbqstsd-output-content-container {
			height: 26px;
			border: none;
			font-size: 12px;
			padding-left: 5px;
			font-weight: 400;

			background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='" + svg-fill-color(color(text-color-default)) + "'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
			background-size: 10px;
			background-position: calc(100% - 3px) calc(50% + 3px);
			background-repeat: no-repeat;
			color: $navbar-dropdown-menu-text-color;
		}   

		&:hover {
			.dbqstsd-output-content-container {
				background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='" + svg-fill-color($color-primary) + "'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
				background-size: 10px;
				background-position: calc(100% - 3px) calc(50% + 3px);
				background-repeat: no-repeat;   
				color: $color-primary;
			}   
		}
	}

	// Unfortunately we can't get around without using !importants.
	// The #classlist .dropdown-menu styling has way too many !importants.
	.dbqstsd-popup-container {
		padding: 0 0 ($padding-default / 3) 0 !important;
		background: $modal-label-background !important;

		.dbqstsd-search-input {
			background-color: $modal-input-background !important;
			border: 2px solid $modal-border-color !important;
			color: $text-color-default;
		}
	}
}

.document-class-list-progress-bar-filters {

	// We're specifically using display: block with text-align: center instead of flex here in order to
	// allow the progress bar to scroll horizontally without any cut off on the sides. When using flex
	// with justify-content: center we did have this problem.
	.dbqdclf-progress-bar-filter {
		display: block;
		margin-bottom: $margin-default;
		overflow-x: auto;
		text-align: center;
		@include scrollbar;

		.dbqdclf-progress-bar-filter-steps {
			display: inline-flex;
			position: relative;

			&::before {
				content: '';
				background: $classlist-progress-bar-border-color;
				position: absolute;
				width: calc(100% - $classlist-progress-bar-arrow-width);
				height: $classlist-progress-bar-height;
				top: 0;
				left: 0;
				
			}

			.dbqdclf-progress-bar-filter-step {
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				padding: $classlist-filter-group-padding calc($classlist-progress-bar-arrow-width * 2);
				font-size: $font-size-base;
				min-width: 120px;
				height: $classlist-progress-bar-height;
				border: 1px solid $classlist-progress-bar-border-color;
				border-right: none;
				cursor: pointer;
				margin: 0 0 0 calc(($classlist-progress-bar-arrow-width - 1px) * -1);
  				-webkit-clip-path: polygon($classlist-progress-bar-arrow-width 50%, 0% 0%, calc(100% - $classlist-progress-bar-arrow-width) 0%, 100% 50%, calc(100% - $classlist-progress-bar-arrow-width) 100%, 0% 100%);
	
				&:first-of-type {
					border-radius: $classlist-progress-bar-border-radius 0 0 $classlist-progress-bar-border-radius;
    				-webkit-clip-path: polygon(0% 0%, calc(100% - $classlist-progress-bar-arrow-width) 0%, 100% 50%, calc(100% - $classlist-progress-bar-arrow-width) 100%, 0% 100%);
					padding-left: $padding-default;
					margin-left: -15px;
				}
	
				&:last-of-type {
					-webkit-clip-path: polygon($classlist-progress-bar-arrow-width 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
					border-radius: 0 $classlist-progress-bar-border-radius $classlist-progress-bar-border-radius 0;
					border-right: 1px solid $classlist-progress-bar-border-color;
					padding-right: $padding-default;
					margin-right: calc($classlist-progress-bar-arrow-width * -1);
				}
	
				// Standard
				&[data-search-item-display-mode="0"] {
					//background: $list-standard-background-color;
					background: $color-layer-1;
	
					.dbqdclf-step-icon {
						display: none;
					}
	
					.dbqdclf-step-name {
						color: $list-standard-font-color;
					}
				}
	
				// Elevated
				&[data-search-item-display-mode="1"] {
					background: $list-elevated-background-color;
	
					.dbqdclf-step-icon {
						display: none;
					}
	
					.dbqdclf-step-name {
						color: $list-elevated-font-color;
					}
				}
	
				// Essential
				&[data-search-item-display-mode="2"] {
					background: $list-essential-background-color;
	
					.dbqdclf-step-icon {
						display: none;
					}
	
					.dbqdclf-step-name {
						color: $list-essential-font-color;
					}
				}
	
				// Information
				&[data-search-item-display-mode="3"] {
					background: $list-information-background-color;
	
					.dbqdclf-step-icon {
						display: none;
					}
	
					.dbqdclf-step-name {
						color: $list-information-font-color;
					}
				}
	
				// Warning
				&[data-search-item-display-mode="4"] {
					background: $list-warning-background-color;
	
					.dbqdclf-step-icon {
						display: none;
					}
	
					.dbqdclf-step-name {
						color: $list-warning-font-color;
					}
				}
	
				// Error
				&[data-search-item-display-mode="5"] {
					background: $list-error-background-color;
	
					.dbqdclf-step-icon {
						svg {
							fill: $list-error-font-color;
						}
					}
	
					.dbqdclf-step-name {
						color: $list-error-font-color;
					}
				}
	
				// Diminished
				&[data-search-item-display-mode="6"] {
					background: $list-diminished-background-color;
	
					.dbqdclf-step-icon {
						display: none;
					}
	
					.dbqdclf-step-name {
						color: $list-diminished-font-color;
					}
				}
	
				// Disabled
				&[data-search-item-display-mode="7"] {
					background: $list-disabled-background-color;
	
					.dbqdclf-step-icon {
						display: none;
					}
	
					.dbqdclf-step-name {
						color: $list-disabled-font-color;
					}
				}
	
				// Success
				&[data-search-item-display-mode="8"] {
					background: $list-success-background-color;
	
					.dbqdclf-step-icon {
						svg {
							fill: $list-success-font-color;
						}
					}
	
					.dbqdclf-step-name {
						color: $list-success-font-color;
					}
				}

				// Step selected
				&.dbqdclf-progress-bar-filter-step-selected {
					.dbqdclf-step-name {
						font-weight: $font-weight-bold;
					}

					// Standard
					&[data-search-item-display-mode="0"] {
						//background: $list-standard-selected-background-color;
						background: $color-layer-0;

						.dbqdclf-step-name {
							//color: $list-standard-selected-font-color;
						}
					}
		
					// Elevated
					&[data-search-item-display-mode="1"] {
						background: $list-elevated-selected-background-color;

						.dbqdclf-step-name {
							color: $list-elevated-selected-font-color;
						}
					}
		
					// Essential
					&[data-search-item-display-mode="2"] {
						background: $list-essential-selected-background-color;

						.dbqdclf-step-name {
							color: $list-essential-selected-font-color;
						}
					}
		
					// Information
					&[data-search-item-display-mode="3"] {
						background: $list-information-selected-background-color;

						.dbqdclf-step-name {
							color: $list-information-selected-font-color;
						}
					}
		
					// Warning
					&[data-search-item-display-mode="4"] {
						background: $list-warning-selected-background-color;

						.dbqdclf-step-name {
							color: $list-warning-selected-font-color;
						}
					}
		
					// Error
					&[data-search-item-display-mode="5"] {
						background: $list-error-selected-background-color;

						.dbqdclf-step-name {
							color: $list-error-selected-font-color;
						}
					}
		
					// Diminished
					&[data-search-item-display-mode="6"] {
						background: $list-diminished-selected-background-color;

						.dbqdclf-step-name {
							color: $list-diminished-selected-font-color;
						}
					}
		
					// Disabled
					&[data-search-item-display-mode="7"] {
						background: $list-disabled-selected-background-color;

						.dbqdclf-step-name {
							color: $list-disabled-selected-font-color;
						}
					}
		
					// Success
					&[data-search-item-display-mode="8"] {
						background: $list-success-selected-background-color;

						.dbqdclf-step-name {
							color: $list-success-selected-font-color;
						}
					}
				}

				// Step hover
				&:hover {
					
					// Standard
					&[data-search-item-display-mode="0"] {
						//background: $list-standard-selected-background-color;
						background: $color-layer-2;

						.dbqdclf-step-name {
							//color: $list-standard-selected-font-color;
						}
					}
		
					// Elevated
					&[data-search-item-display-mode="1"] {
						background: $list-elevated-selected-background-color;

						.dbqdclf-step-name {
							color: $list-elevated-selected-font-color;
						}
					}
		
					// Essential
					&[data-search-item-display-mode="2"] {
						background: $list-essential-selected-background-color;

						.dbqdclf-step-name {
							color: $list-essential-selected-font-color;
						}
					}
		
					// Information
					&[data-search-item-display-mode="3"] {
						background: $list-information-selected-background-color;

						.dbqdclf-step-name {
							color: $list-information-selected-font-color;
						}
					}
		
					// Warning
					&[data-search-item-display-mode="4"] {
						background: $list-warning-selected-background-color;

						.dbqdclf-step-name {
							color: $list-warning-selected-font-color;
						}
					}
		
					// Error
					&[data-search-item-display-mode="5"] {
						background: $list-error-selected-background-color;

						.dbqdclf-step-name {
							color: $list-error-selected-font-color;
						}
					}
		
					// Diminished
					&[data-search-item-display-mode="6"] {
						background: $list-diminished-selected-background-color;

						.dbqdclf-step-name {
							color: $list-diminished-selected-font-color;
						}
					}
		
					// Disabled
					&[data-search-item-display-mode="7"] {
						background: $list-disabled-selected-background-color;

						.dbqdclf-step-name {
							color: $list-disabled-selected-font-color;
						}
					}
		
					// Success
					&[data-search-item-display-mode="8"] {
						background: $list-success-selected-background-color;

						.dbqdclf-step-name {
							color: $list-success-selected-font-color;
						}
					}
				}
			}
		}
	}	  
}

// Unfortunately we can't get around without using !importants.
// The #classlist .dropdown-menu styling has way too many !importants.
.dbqdclfg-container {
    width: 100%;
    min-width: 0;

    .dbqdclfg-output-button {
        outline: 0;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;

        .dbqdclfg-output-content-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            border: 0;
            outline: 0;
            width: 100%;
            height: 34px;
            -moz-appearance: none;
            -webkit-appearance: none;
            -ms-appearance: none;
            -o-appearance: none;
            appearance: none; 
            background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
            background-position: calc(100% - 3px) calc(50% + 3px);
            background-size: 10px 10px;
            border-radius: 0 0 $border-radius-default $border-radius-default;
            color: $modal-input-color;
            padding-left: 5px;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; 

            &: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 */
            }

            &.dbqdclfg-invalid {
                border-color: $select-type-popup-invalid-color;
            } 

            .dbqdclfg-output-item {
                display: flex;
                align-items: center;
				padding: 0 30px 0 0;

                .dbqdclfg-attribute {
                    display: block;
                    width: 100%;

                    .dbqdclfg-attribute-name {
                        float: left;
                        font-size: $font-size-small;
                        line-height: 14px;
                        color: #999;
                        margin-bottom: ($margin-default / 5);
                    }

                    .dbqdclfg-attribute-value {
                        float: left;
                        width: 100%;
                        text-align: left;
                        overflow-wrap: break-word;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        user-select: text;
                    }
                }
            }

            .dbqdclfg-error {
                color: $select-type-popup-invalid-color;
            }
        }

		&:hover {
			.dbqdclfg-output-content-container {
				background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='" + svg-fill-color($color-primary) + "'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
				background-size: 10px;
				background-position: calc(100% - 3px) calc(50% + 3px);
				background-repeat: no-repeat;

				.dbqdclfg-output-item {
					.dbqdclfg-attribute {
						.dbqdclfg-attribute-value {
							color: $color-primary;
						}
					}
				}
			}   
		}
    }
}

// The popup container will be moved to the end of the <body> tag upon opening. That's also why .dbqdclfg-popup-container is outside of .dbqdclfg-container in the CSS file.
.dbqdclfg-popup-container {
    // width: 100%;
    padding: 0 0 ($padding-default / 3) 0;
    background: $modal-label-background;
    overflow: hidden;
    z-index: 1060;

	.document-class-list-filter-geographic {
		background: $modal-body-background;
	}

    .dbqdclfg-title-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: ($padding-default / 3) ($padding-default / 2);
        color: $modal-label-color;
        font-size: $font-size-base;
        font-weight: 500;
        
        .dbqdclfg-close {
            width: 12px;
            height: 12px;
            display: inline-flex;
            cursor: pointer;

            svg {
                fill: $modal-label-color;
            }
        }
    }

	label {
		color: $color-black;
		font-weight: 600;
		font-size: 12px;
	}
}

//#classlist-filters {
// width: calc(100% - 20px) !important;
// margin: 0 10px !important;
// float: left;
//}