.bg__query-builder {
	clear:both;

	.separator {
		height: 1em;
	}

	.bg__tooltip {
		width: 400px;
	}

	.bg__qb__breadcrumbs {
		padding: 0px 10px 10px 10px;
		text-align: center;

		.bg__qb__crumb {
			display: inline-block;
			margin: 0px 5px 5px 0px;
			i {
				cursor: pointer;
				&:hover {
					text-decoration: underline;
				}
			}
		}
	}

	.bg__qb__graph > button {
		float: right;
		position: relative;
		right: 12px;
		z-index: 10;
	}
	.bg__clear-query-btn {
		margin-left: 12px;
	}

	.bg__qb__count {
		margin-top: 5px;
		background-color: $clGrey;
		font-size: 14px;
		border-radius: 25px;
		display: inline-block;
		padding: 2px 8px;
		min-width: 20px;
		vertical-align: top;
		font-family: $fontHeading;
	}

	.bg__qb__total-count {
		font-family: $fontHeading;
		font-size: 16px;
		line-height: 20px;
		margin-top: 5px;
		display: inline-block;
		.bg__qb__count {
			background-color: $clPrimary;
			color: white;
			margin-top: 0;
			vertical-align: middle;
			margin-left: 10px;
		}
	}

	.bg__qb__lock-facets {
			font-size: 14px;

			> label {
			    margin-right: 5px;
			}

			> input {
			    vertical-align: middle;
                margin: 3px 3px 4px 4px;
			}
	}

	.bg__qb__query-row {
		display: flex;
		justify-content: stretch;
		margin-bottom: 10px;

		.bg__qb__selector-holder {
		    flex-grow: 1;
			display: flex;

			.bg__qb__tt {
				margin: 0 10px;
				line-height: 35px;
			}

			.bg__qb__in-label {
				margin: 0 10px;
				line-height: 35px;
			}
		}
	}

	.bg__qb__date-count {
		margin: 7px 10px 0 5px;
		background-color: $clGreyTint;
		font-size: 11px;
		border-radius: 25px;
		display: inline-block;
		padding: 2px 8px;
		min-width: 20px;
		line-height: 17px;
		vertical-align: top;
		font-family: $fontHeading;
	}

	.bg__qb__result-dates {
		border-radius: 5px;
		border: 1px solid $clGreyTint;
		background-color: $clGrey;
		margin-bottom: 20px;

		.bg__qb__result-dates-header {
			font-size: 14px;
			display: flex;
			flex-wrap: wrap;
			line-height: 34px;
			border-bottom: 1px solid $clGreyTint;

			.__react_component_tooltip {
				line-height: 16px;
			}

			.bg__qb__date-field {
				display: flex;
				padding: 8px 0px 8px 7px;
				& > div {
					margin-right: 10px;
				}

				i {
					display: inline-block;
					width: 20px;
					line-height: 34px;
				}
				& > i {
					text-align: center;
					margin-right: 10px;
				}

				.bg__dfs__date-field-selector {
					position: relative;

					&:after {
						color:#aaa;
						content:"\f073";
						font-family: "Font Awesome 5 Free";
						font-size: 16px;
						padding:0 0 2px;
						position:absolute;
						pointer-events:none;
						right:8px;
						top:0;
					}
					&:before {
						background:#fff;
						content:'';
						display:block;
						height:25px;
						position:absolute;
						pointer-events:none;
						right:4px;
						top:6px;
						width:23px;
					}

					select{
						font-size: 14px;
					}
				}
			}

			.bg__qb__keyword-field {
				display: flex;
				flex-wrap: nowrap;
				padding: 8px 0px 8px 7px;
				& > div {
					margin-right: 10px;
				}

				i {
					display: inline-block;
					width: 20px;
					line-height: 34px;
				}
				& > i {
					text-align: center;
					margin-right: 10px;
				}

				.bg__kfs__keyword-field-selector {
					position: relative;
					flex-grow: 3;

					select{
					background-color: white;
						font-size: 14px;
					}
				}

                .bg__kfs__keyword-limit{
				    display: flex;
				    width: 100%;
				    flex-wrap: nowrap;
                    margin-right: 10px;
                    overflow: hidden;
                    border-left: 1px solid $clGreyTint;

                    .bg__kfs__ms_input {
					  flex-grow: 1;
                      margin-left: 10px;
                      width: 70px;
                      font-size: 14px;
                    }

                    .bg__kfs__ms_label {
                      margin-left: 10px;
                    }
                }
			}
			.bg__qb__date-range {
				flex-grow: 1;
				border-left: 1px solid $clGreyTint;
				line-height: 34px;
				padding: 5px 10px 5px 10px;
				display: flex;
				margin: 3px 0;

				input {
					background-color: white;
					padding: 0.375rem 0.4rem;
					width: 79px;
				}

				.bg__qb__date-range-stats {
					margin-left: 5px;
				}
			}

			& > button {
				height: 28px;
				line-height: 16px;
				padding: 5px 10px;
				box-sizing: border-box;
				margin: 10px;
				background-color: $clGreyTint;
				transition: background-color $transition;
				&:hover {
					background-color: darken($clGreyTint, 5%);
				}
			}
		}

		.bg__qb__result-dates-content {
			background-color: mix($clGreyTint, $clGrey, 50%);
			.bg__qb__date-graph {
				padding: 20px 10px 0 10px;
				position: relative;
    			border-bottom: 1px solid $clGreyTint;
    			margin-bottom: 10px;
				.page-loader {
					padding-top: 10%;
					position: absolute;
				}
			}
		}

		input[type="text"] {
			margin-bottom: 0;
		}
	}
}