//  =================
//      Imports
//  =================

@import '../../../assets/base/color_variables';    // Color Variables
@import '../../../assets/base/fonticons';              // Fonticons Variables
@import '../../../assets/base/urls';                   // URLS Variables
@import '../../../assets/base/utilities_variables';  // Utilities Variables

/*! nouislider - 9.2.0 - 2017-01-11 10:35:35 */
.noUi-target {
	color: $additional-color-6;
	border: $b-width-1 $solid $light-gray;
	position: $pos-rel;
	direction: ltr;
	background: $light-gray;
	border-radius: $br-4;
	border: $b-width-1 $solid $color_146;
	* {
		-webkit-touch-callout: none;
		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;
		-ms-touch-action: none;
		touch-action: none;
		-ms-user-select: none;
		-moz-user-select: none;
		user-select: none;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
}
.form-control {
	color: $additional-color-6;
	border: $b-width-1 $solid $light-gray;
	&:focus {
		color: $additional-color-11;
		border-color: $additional-color-11;
	}
}
h4 {
	font-size: 16px;
	color: $additional-color-7;
	text-transform: $transform-capital;
}
.noUi-base {
	width: 100%;
	height: 100%;
	position: $pos-rel;
	z-index: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.noUi-connect {
	position: $pos-abs;
	right: 0;
	top: 0;
	left: 0;
	bottom: 0;
	background: $color_47;
	box-shadow: inset 0 0 3px rgba(51, 51, 51, .45);
	-webkit-transition: background 450ms;
	transition: background 450ms;
}
.noUi-origin {
	position: $pos-abs;
	height: 0;
	width: 0;
}
.noUi-handle {
	position: $pos-rel;
	z-index: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	border: $b-width-1 $solid $color_56;
	border-radius: 3px;
	background: $color_56;
	cursor: default;
	box-shadow: inset 0 0 1px #ee3d50, inset 0 1px 7px #ee3d50, 0 3px 6px -3px #ee3d50;
	&:after {
		display: block;
		position: $pos-abs;
		height: 14px;
		width: 1px;
		background: $color_584;
		left: 14px;
		top: 6px;
		left: 17px;
	}
	&:before {
		display: block;
		position: $pos-abs;
		height: 14px;
		width: 1px;
		background: $color_584;
		left: 14px;
		top: 6px;
	}
}
.noUi-state-tap {
	.noUi-connect {
		-webkit-transition: top .3s, right .3s, bottom .3s, left .3s;
		transition: top .3s, right .3s, bottom .3s, left .3s;
	}
	.noUi-origin {
		-webkit-transition: top .3s, right .3s, bottom .3s, left .3s;
		transition: top .3s, right .3s, bottom .3s, left .3s;
	}
}
.noUi-state-drag {
	* {
		cursor: inherit !important;
	}
}
.noUi-horizontal {
	height: 5px;
	.noUi-handle {
		width: 14px;
		height: 14px;
		left: -10px;
		top: -6px;
		border-radius: 100%;
	}
	.noUi-tooltip {
		-webkit-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
		left: 50%;
		bottom: 120%;
	}
}
.noUi-vertical {
	width: 18px;
	.noUi-handle {
		width: 28px;
		height: 34px;
		left: -6px;
		top: -17px;
		&:after {
			width: 14px;
			height: 1px;
			left: 6px;
			top: 14px;
			top: 17px;
		}
		&:before {
			width: 14px;
			height: 1px;
			left: 6px;
			top: 14px;
		}
	}
	.noUi-draggable {
		cursor: ns-resize;
	}
	.noUi-tooltip {
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
		top: 50%;
		right: 120%;
	}
}
.noUi-draggable {
	cursor: ew-resize;
}
.noUi-active {
	box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}
[disabled] {
	.noUi-connect {
		background: $color_449;
	}
	.noUi-handle {
		cursor: not-allowed;
	}
}
[disabled].noUi-handle {
	cursor: not-allowed;
}
[disabled].noUi-target {
	cursor: not-allowed;
}
.noUi-pips {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: $pos-abs;
	color: $color_299;
	* {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
}
.noUi-value {
	position: $pos-abs;
	text-align: $align-center;
}
.noUi-value-sub {
	color: $color_103;
	font-size: 10px;
}
.noUi-marker {
	position: $pos-abs;
	background: $color_103;
}
.noUi-marker-large {
	background: $color_286;
}
.noUi-marker-sub {
	background: $color_286;
}
.noUi-pips-horizontal {
	padding: $p-10 $p-0;
	height: 80px;
	top: 100%;
	left: 0;
	width: 100%;
}
.noUi-value-horizontal {
	-webkit-transform: translate3d(-50%, 50%, 0);
	transform: translate3d(-50%, 50%, 0);
}
.noUi-marker-horizontal.noUi-marker {
	margin-left: -1px;
	width: 2px;
	height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
	height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
	height: 15px;
}
.noUi-pips-vertical {
	padding: $p-0 $p-10;
	height: 100%;
	top: 0;
	left: 100%;
}
.noUi-value-vertical {
	-webkit-transform: translate3d(0, 50%, 0);
	transform: translate3d(0, 50%, 0);
	padding-left: 25px;
}
.noUi-marker-vertical.noUi-marker {
	width: 5px;
	height: 2px;
	margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
	width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
	width: 15px;
}
.noUi-tooltip {
	display: block;
	position: $pos-abs;
	border: $b-width-1 $solid $color_530;
	border-radius: 3px;
	background: $white;
	color: $black;
	padding: $p-5;
	text-align: $align-center;
}