//  =================
//      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


/*! =======================================================
                      VERSION  10.2.0              
========================================================= */
/*! =========================================================
 * bootstrap-slider.js
 *
 * Maintainers:
 *		Kyle Kemp
 *			- Twitter: @seiyria
 *			- Github:  seiyria
 *		Rohit Kalkur
 *			- Twitter: @Rovolutionary
 *			- Github:  rovolution
 *
 * =========================================================
  *
 * bootstrap-slider is released under the MIT License
 * Copyright (c) 2017 Kyle Kemp, Rohit Kalkur, and contributors
 * 
 * Permission is hereby granted, free of charge, to any person
 * obtaining a copy of this software and associated documentation
 * files (the "Software"), to deal in the Software without
 * restriction, including without limitation the rights to use,
 * copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following
 * conditions:
 * 
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 *
 * ========================================================= */
.slider.slider-container {
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.slider.slider-horizontal {
	width: calc(100% - 20px);
	margin-left: 11px;
	height: 20px;
	.slider-track {
		height: 3px;
		width: calc(100% + 18px);
		margin-top: -2px;
		top: 50%;
		left: -9px;
	}
	.slider-selection {
		height: 100%;
		top: 0;
		bottom: 0;
	}
	.slider-track-low {
		height: 100%;
		top: 0;
		bottom: 0;
	}
	.slider-track-high {
		height: 100%;
		top: 0;
		bottom: 0;
	}
	.slider-tick {
		margin-left: -10px;
	}
	.slider-handle {
		margin-left: -10px;
	}
	.slider-tick.triangle {
		position: relative;
		top: 50%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		border-width: $b-width-0 $b-width-10 $b-width-10 $b-width-10;
		width: 0;
		height: 0;
		border-bottom-color: $color_588;
		margin-top: 0;
	}
	.slider-handle.triangle {
		position: relative;
		top: 50%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		border-width: $b-width-0 $b-width-10 $b-width-10 $b-width-10;
		width: 0;
		height: 0;
		border-bottom-color: $color_588;
		margin-top: 0;
	}
	.slider-tick-container {
		white-space: nowrap;
		position: $pos-abs;
		top: 0;
		left: 0;
		width: 100%;
	}
	.slider-tick-label-container {
		white-space: nowrap;
		margin-top: 20px;
		.slider-tick-label {
			padding-top: 4px;
			display: inline-block;
			text-align: center;
		}
	}
	.tooltip {
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
		display: none;
	}
	.tooltip.show {
		opacity: 1;
		display: block;
	}
}
.slider.slider-horizontal.slider-rtl {
	.slider-track {
		left: initial;
		right: 0;
	}
	.slider-tick {
		margin-left: initial;
		margin-right: -10px;
	}
	.slider-handle {
		margin-left: initial;
		margin-right: -10px;
	}
	.slider-tick-container {
		left: initial;
		right: 0;
	}
	.tooltip {
		-ms-transform: translateX(50%);
		transform: translateX(50%);
	}
}
.slider {
	.tooltip-arrow {
		position: $pos-abs;
		width: 0;
		height: 0;
		bottom: -6px;
		left: 50%;
		transform: translateX(-50%);
		border-left: 6px solid $color_none;
		border-right: 6px solid $color_none;
		border-top: 6px solid #1f212d;
	}
	input {
		display: none;
	}
	.tooltip.top {
		margin-top: -36px;
	}
	.tooltip-inner {
		white-space: nowrap;
		max-width: none;
		background-color: $color_74;
		border-radius: 30px;
		padding: 4px 17px;
	}
	.hide {
		display: none;
	}
}
.slider.slider-vertical {
	height: 210px;
	width: 20px;
	.slider-track {
		width: 10px;
		height: 100%;
		left: 25%;
		top: 0;
	}
	.slider-selection {
		width: 100%;
		left: 0;
		top: 0;
		bottom: 0;
	}
	.slider-track-low {
		width: 100%;
		left: 0;
		right: 0;
	}
	.slider-track-high {
		width: 100%;
		left: 0;
		right: 0;
	}
	.slider-tick {
		margin-top: -10px;
	}
	.slider-handle {
		margin-top: -10px;
	}
	.slider-tick.triangle {
		border-width: 10px 0 10px 10px;
		width: 1px;
		height: 1px;
		border-left-color: $color_588;
		border-right-color: $color_588;
		margin-left: 0;
		margin-right: 0;
	}
	.slider-handle.triangle {
		border-width: 10px 0 10px 10px;
		width: 1px;
		height: 1px;
		border-left-color: $color_588;
		border-right-color: $color_588;
		margin-left: 0;
		margin-right: 0;
	}
	.slider-tick-label-container {
		white-space: nowrap;
		.slider-tick-label {
			padding-left: 4px;
		}
	}
	.tooltip {
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}
.slider.slider-vertical.slider-rtl {
	.slider-track {
		left: initial;
		right: 25%;
	}
	.slider-selection {
		left: initial;
		right: 0;
	}
	.slider-tick.triangle {
		border-width: 10px 10px 10px 0;
	}
	.slider-handle.triangle {
		border-width: 10px 10px 10px 0;
	}
	.slider-tick-label-container {
		.slider-tick-label {
			padding-left: initial;
			padding-right: 4px;
		}
	}
}
.slider.slider-disabled {
	.slider-handle {
		background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
		background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
		background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%);
		background-repeat: repeat-x;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0);
	}
	.slider-track {
		background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
		background-image: -o-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
		background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%);
		background-repeat: repeat-x;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0);
		cursor: not-allowed;
	}
}
.slider-track {
	position: $pos-abs;
	cursor: pointer;
	background-color: $light-gray-3;
	border-radius: 4px;
}
.slider-selection {
	position: $pos-abs;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 4px;
	background-color: $color_587;
}
.slider-selection.tick-slider-selection {
	background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
	background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
	background-image: linear-gradient(to bottom, #8ac1ef 0%, #82b3de 100%);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0);
}
.slider-track-low {
	position: $pos-abs;
	background: $color_none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 4px;
}
.slider-track-high {
	position: $pos-abs;
	background: $color_none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 4px;
}
.slider-handle {
	position: $pos-abs;
	top: 0;
	width: 20px;
	height: 20px;
	background-color: $white;
	border: $b-width-2 $solid $color_587;
	&:hover {
		cursor: pointer;
	}
}
.slider-handle.round {
	border-radius: 50%;
}
.slider-handle.triangle {
	background: $color_none $no-color;
}
.slider-handle.custom {
	background: $color_none $no-color;
	&::before {
		line-height: 20px;
		font-size: 20px;
		content: '\2605';
		color: $color_586;
	}
}
.slider-tick {
	position: $pos-abs;
	cursor: pointer;
	width: 20px;
	height: 20px;
	background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
	background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
	background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
	-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	filter: none;
	opacity: 0.8;
	border: 0px solid $color_none;
}
.slider-tick.round {
	border-radius: 50%;
}
.slider-tick.triangle {
	background: $color_none $no-color;
}
.slider-tick.custom {
	background: $color_none $no-color;
	&::before {
		line-height: 20px;
		font-size: 20px;
		content: '\2605';
		color: $color_586;
	}
}
.slider-tick.in-selection {
	background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
	background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
	background-image: $additional-gradient-color-78;
	background-repeat: repeat-x;
	// filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0);
	opacity: 1;
}
