@charset "UTF-8";
/* Input: Range
--------------------------------------------- */
:root {
	--range-cursor: pointer;
}

input[type=range] {
	-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
	width: 100%; /* Specific width is required for Firefox. */
	background: transparent; /* Otherwise white in Chrome */

	margin: -3px 0;
	/* font-size: 25px; */
}

input[type=range]:focus {
	outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

/* Thumb */
:root {
	--range-thumb-background: white;
	--range-thumb-border-width: 2px;
	--range-thumb-border: var(--range-thumb-border-width) solid #FFFFFF;
	--range-thumb-border-radius: 16px;
	--range-thumb-box-shadow: 0px 0px 0.6px rgba(0, 0, 0, 0.32), 0px 0px 0px rgba(13, 13, 13, 0.32);
	--range-thumb-height: 25px;
	--range-thumb-width: 25px;
}

/* These can't be comma separated selectors. Why? https://css-tricks.com/sliding-nightmare-understanding-range-input/ */
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	margin-top:    3px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
	background:    var(--range-thumb-background);
	border:        var(--range-thumb-border);
	border-radius: var(--range-thumb-border-radius);
	box-shadow:    var(--range-thumb-box-shadow);
	cursor:        var(--range-cursor);
	height:        var(--range-thumb-height);
	width:         var(--range-thumb-width);
}

input[type=range]::-moz-range-thumb {
	background:    var(--range-thumb-background);
	border:        var(--range-thumb-border);
	border-radius: var(--range-thumb-border-radius);
	box-shadow:    var(--range-thumb-box-shadow);
	cursor:        var(--range-cursor);
	height:        var(--range-thumb-height);
	width:         var(--range-thumb-width);
}

input[type=range]::-ms-thumb {
	background:    var(--range-thumb-background);
	border:        var(--range-thumb-border);
	border-radius: var(--range-thumb-border-radius);
	box-shadow:    var(--range-thumb-box-shadow);
	cursor:        var(--range-cursor);
	height:        var(--range-thumb-height);
	width:         var(--range-thumb-width);
}

/* Track */
:root {
	--range-track-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
	--range-track-height: 31px;
	--range-track-bg-color: #3071a9;
	--range-track-border: 0px solid var(--range-track-bg-color);
	--range-track-border-radius: 25px;
}

input[type=range]::-ms-track {
	width: 100%;
	cursor: var(--range-cursor);

	/* Hides the slider so custom styles can be added */
	background: transparent;
	border-color: transparent;
	color: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
	width:         100%;
	height:        var(--range-track-height);
	cursor:        var(--range-cursor);
	box-shadow:    var(--range-track-box-shadow);
	background:    var(--range-track-bg-color);
	border-radius: var(--range-track-border-radius);
	border:        var(--range-track-border);
}

input[type=range]:focus::-webkit-slider-runnable-track {
	background: #367ebd;
}

input[type=range]::-moz-range-track {
	width:         100%;
	height:        var(--range-track-height);
	cursor:        var(--range-cursor);
	box-shadow:    var(--range-track-box-shadow);
	background:    var(--range-track-bg-color);
	border-radius: var(--range-track-border-radius);
	border:        var(--range-track-border);
}

input[type=range]::-ms-track {
	width: 100%;
	height: var(--range-track-height);
	cursor: var(--range-cursor);;
	background: transparent;
	border-color: transparent;
	border-width: 16px 0;
	color: transparent;
}

input[type=range]::-ms-fill-lower {
	background: #15314a;
	border:        var(--range-track-border);
	border-radius: ;
	box-shadow:    var(--range-track-box-shadow);
}

input[type=range]:focus::-ms-fill-lower {
	background:    var(--range-track-bg-color);
}

input[type=range]::-ms-fill-upper {
	background:    var(--range-track-bg-color);
	border:        var(--range-track-border);
	border-radius: var(--range-track-border-radius);
	box-shadow:    var(--range-track-box-shadow);
}

input[type=range]:focus::-ms-fill-upper {
	background: #367ebd;
}

/* Opinionated */
input[type=range]::-ms-track {
	width: 100%;
	height: 31px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent;
}

input[type=range]::-ms-fill-lower {
	background: ;
	border: 0px solid ;
	border-radius: 50px;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}

input[type=range]::-ms-fill-upper {
	background: ;
	border: 0px solid #3071a9;
	border-radius: 50px;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}

input[type=range]:focus::-ms-fill-lower {
	background: #3071a9;
}

input[type=range]:focus::-ms-fill-upper {
	background: #7aadd9;
}