
.cx-slider-wrap{
	display: flex;
	flex-wrap: wrap;

	&.cx-slider-wrap__labels-range {
		.cx-slider-input {
			.cx-ui-stepper {
				display: none;
			}
		}
	}

	.cx-slider-input {
		flex: 0 1 10%;
		min-width: 100px;
		max-width: 200px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.cx-slider-holder{
		flex: 0 1 90%;
		min-width: 200px;
		max-width: 300px;
		margin: 0 10px 0 0;
		.rtl & {
			margin: 0 0 0 10px;
		}
			input[type=range] {
				-webkit-appearance: none;
				width: 100%;
				margin: 10px 0;
			}
			input[type=range]:focus {
				outline: none;
			}
			input[type=range]::-webkit-slider-runnable-track {
				width: 100%;
				height: 5px;
				cursor: pointer;
				box-shadow: none;
				background: #a4afb7;
				border-radius: 25px;
				border: none;
			}
			input[type=range]::-webkit-slider-thumb {
				box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
				height: 16px;
				width: 16px;
				margin-top: -6px;
				border-radius: 15px;
				background: white;
				cursor: pointer;
				-webkit-appearance: none;
				transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1);
			}
			input[type=range]:focus::-webkit-slider-runnable-track {
				background: #a4afb7;
			}
			input[type=range]::-moz-range-track {
				width: 100%;
				height: 5px;
				cursor: pointer;
				box-shadow: none;
				background: #a4afb7;
				border-radius: 25px;
				border: none;
			}
			input[type=range]::-moz-range-thumb {
				box-shadow: none;
				border: none;
				height: 16px;
				width: 16px;
				border-radius: 15px;
				background: #a4afb7;
				cursor: pointer;
			}
			input[type=range]::-ms-track {
				width: 100%;
				height: 10px;
				cursor: pointer;
				background: $grey_color_3;
				border-color: transparent;
				color: transparent;
			}
			input[type=range]::-ms-fill-lower {
				background: $grey_color_3;
				border: none;
				border-radius: 50px;
				box-shadow: none;
			}
			input[type=range]::-ms-fill-upper {
				background: $green_color;
				border: none;
				border-radius: 50px;
				box-shadow: none;
			}
			input[type=range]::-ms-thumb {
				box-shadow: none;
				border: none;
				height: 10px;
				width: 10px;
				border-radius: 15px;
				background: #495159;
				cursor: pointer;
			}
			input[type=range]:focus::-ms-fill-lower {
				background: $grey_color_3;
			}
			input[type=range]:focus::-ms-fill-upper {
				background: $green_color;
			}
	}
	.cx-input{
		margin: 0;
		width: 100%;
	}
}
