.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__input-search {
		border-radius: 5px 0 0 5px;
		color: black;
	}

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

	.bg__qb__total-count {
		margin-left: 3%;
		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__query-row {
		display: flex;
		justify-content: stretch;

		.bg__qb__search-holder {
			display: flex;
			flex-grow: 1;
			& > span {
				cursor: pointer;
				background-color: $clPrimary;
				color: white;
				border-radius: 0 5px 5px 0;
				display: inline-block;
				width: 50px;
				height: 34px;
				text-align: center;
				line-height: 34px;
				& > i,
				& > span {
					line-height: 34px;
				}
			}
		}

		.bg__qb__selector-holder {
			flex-grow: 1;
			display: flex;
			.bg__qb__in-label {
				margin: 0 10px;
				line-height: 35px;
			}
		}
	}

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

	.bg__qb__no-results-message{
		margin: 20px;
		width: 70%;
		box-sizing: border-box;
		margin-left: calc(25% + 20px);
	}

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

		.bg__qb__result-dates-header {
			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: "FontAwesome";
						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;
					}
				}
			}

			.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;
				}

				.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;
		}
	}
}
