@import "variables.scss";
.query-build {
	/*padding-bottom: 100px;*/
}
.single_query.bool_query.show_hidden {
	background: #eee;
}
.bool_query.show_hidden > .add_condition_row > .add_condition,
.bool_query.show_hidden > .bool-btn-group {
	display: inline-block;
	z-index: 9;
}
.queryLeft {
	padding: 15px;
	.bool_query:first-child .nested-first {
		padding-left: 15px;
	}
}
.bool_query {
	.add_condition_row {
		padding: 0;
		padding-left: 15px;
		min-height: 34px;
		.add_condition {
			display: none;
		}
	}
	.internvalQuery {
		padding-left: 15px;
		.add_condition_row {}
		.add_condition,
		.nested-query {
			display: none;
		}
		&:hover {
			.add_condition,
			.nested-query,
			.add_condition_delete {
				display: inline-block;
			}
		}
	}
	.subQuery {
		padding: 0;
		padding-top: 15px;
		.single_query {
			border: 0;
			padding-top: 10px;
			padding-right: 0;
		}
	}
	.nested-container {
		position: relative;
		padding-left: 120px;
		.nested-query {
			position: absolute;
			left: 6px;
			top: 0;
		}
	}
}
.single_query {
	padding: 15px;
	padding-top: 15px;
	background: rgba(226, 91, 25, 0.2);
	border: 1px solid darken($grey-bg, 10%);
	margin-bottom: 10px;
	position: relative;
	.action-btn-group {
		position: absolute;
		top: 1px;
		right: 1px;
		display: none;
	}
	.select2-container {
		width: 100%;
	}
	.form-control,
	.form-element {
		max-width: 100%;
	}
	.editable-pack {
		line-height: 32px;
		height: 32px;
		.editable-front {
			display: inline-block;
			color: $grey-font;
			border-bottom: 1px dashed;
			cursor: pointer;
			overflow: hidden;
			&:hover {
				color: $primary-font-color;
			}
		}
		.editable-back {
			display: none;
			.select2-container {
				width: 100% !important;
			}
		}
		&.on {
			.editable-front {
				display: none;
			}
			.editable-back {
				display: inline-block;
			}
		}
	}
	div.checkbox, div.radio {
		display: inline-block;
		vertical-align: middle;
		margin: 0 0 10px 0;
		cursor: pointer;

		label {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			margin: 5px;

			&:before {
				content: '';
				background: #fff;
				border: 2px solid #ddd;
				display: inline-block;
				vertical-align: middle;
				width: 20px;
				height: 20px;
				padding: 2px;
				margin-right: 10px;
				text-align: center;
			}
		}

		input {
			opacity: 0;
			position: absolute;

			&:checked + label:before {
				background: #FCC829;
				box-shadow: inset 0px 0px 0px 3px #fff;
			}
		}
	}
	div.radio {
		label {
			padding-left: 0;
			padding-right: 15px;
		}

		input + label:before {
			border-radius: 50%;
		}
	}
	&.bool_query {
		background: $grey-bg;
	}
	&.query_complete {
		background: rgba(82, 199, 130, 0.2);
	}
	&.internal-query:hover {
		.action-btn-group {
			display: inline-block;
		}
	}
	.query-primary-input,
	.option-container {
		position: relative;
		.input_with_option {
			position: relative;
			width: 100%;
			float: left;
			display: block;
			padding-right: 30px;
			border-bottom: 1px solid #828282;
			input {
				border: 0;
			}
		}
		.delete-option {
			position: absolute;
			right: 0;
			top: 9px;
		}
	}
	.add-option {
		position: absolute;
		left: -35px;
		top: 9px;
	}
	.option-container {
		padding-left: 30px;
		.single-option {
			padding: 0;
			padding-top: 5px;
		}
		.delete-option {
			right: -15px;
		}
	}
}
.sort-query {
	.single_query {
		background-color: rgba(255,255,255,0.4);
	}
}
.form-element {
	input {
		color: $grey-font;
		background: 0 0;
		border: 0;
		box-shadow: none;
		border-bottom: 1px solid;
		border-radius: 0;
		padding: 0;
		line-height: 32px;
		height: 32px;
	}
	&.header-element {
		input {
			border-bottom: 1px dashed #aaa;
			background: transparent;
			padding: 0 5px;
			&.form-control[readonly] {
				background-color: transparent;
				opacity: 0.5;
			}
		}
	}
}
.esContainer {
	.form-element.header-element {
		input {
			border-bottom: 2px dashed #aaa;
		}
	}
}

.toggle, .tabs {
	display: inline-block;
	border-radius: 4px;
	height: 32px;
	overflow: hidden;
	text-transform: uppercase;

	&.head-tabs {
		height: auto;
		overflow: auto;
	}

	&.responseMode {
		height: auto;
		padding-top: 5px;
		margin-left: 20px;
		a {
			font-size: 10px;
			padding: 5px 6px;
			height: auto;
			border: 0;
			background: $grey-bg;
			color: $grey-font !important;
			border: 0;
			border-radius: 3px;
			&:first-child {
				border-left: 0;
				border-right: 0;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}
			&:last-child {
				border-left: 0;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}
			&.selected {
				background: $primary-color;
				color: #fff !important;
				&:hover {
					background: $primary-color;
					color: #fff !important;
				}
			}
			&:hover {
				background: $grey-bg;
				color: $grey-font !important;
			}
		}
	}


	a {
		width: 55px;
		display: inline-block;
		float: left;
		background-color: #fff;
		height: 33px;
		padding-top: 8px;
		font-size: 12px;
		color: #888;
		text-align: center;
		text-decoration: none;
		-webkit-transition: all .3s ease;
		transition: all .3s ease;

		&:hover, &:focus {
			text-decoration: none;
			color: #444;
		}

		&.selected {
			background-color: $primary-color;
			color: #fff;
		}
	}
}

.tabs {
	border-radius: 4px;
	height: 37px;

	a {
		width: auto;
		padding: 9px 18px;
		height: 37px;
		border: 2px solid #f3f3f3;
		border-left: 0;
		background-color: $primary-color;
		color: #fff !important;
		
		&:first-child {
			border-left: 2px solid #fefefe;
		}

		&:hover, &:focus {
			background-color: $secondary-color;
			color: #fff;
		}
		
		.fa { margin-right: 3px; }
		.fa-minus { display: none; }
		.fa-plus { display: inline-block; }

		&.selected {
			background-color: #666;

			.fa-plus { display: none; }
			.fa-minus { display: inline-block; }
		}
	}
}