.sah-rangeselect {
	display: flex;
	gap: 3px;
}
.sah-rangeselect label {
	display: flex;
	flex-direction: column;
	width: 100px;
	height: 100%;
	gap: 5px;
}
.sah-rangeselect label span {
	flex-grow: 1;
	text-align: center;
	line-height: 1;
	align-items: end;
	display: flex;
	justify-content: center;
}
.sah-rangeselect .colorbar {
	height: 30px;
	//opacity: 0.5;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	cursor: pointer;
	transition: all 0.3s;
}
.sah-rangeselect .colorbar:hover {
	transform: scale(1.1);
}
.sah-rangeselect > div:first-child .colorbar{
	border-radius: 15px 0 0 15px;
}
.sah-rangeselect > div:last-child .colorbar{
	border-radius: 0 15px 15px 0;
}
.sah-rangeselect input {
	opacity: 0;
	position: fixed;
	width: 0;
}
.sah-rangeselect input:checked + label {
/*	font-weight: bold;*/
}
.sah-rangeselect input:checked + label .colorbar {
	opacity: 1;
	transform: scale(1.1);
	filter: drop-shadow(0 0 5px black);
}
.sah-rangeselect input:checked + label .colorbar::after {
	content: '\f058';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
}
.sah-rangeselect-question-group {
	display: flex;
	flex-direction: column;
	gap: 25px;
}
.sah-rangeselect-question {
	display: flex;
	gap: 15px;
	align-items: end;
	justify-content: space-between;
}
.sah-rangeselect-question-group .sah-rangeselect-question + .sah-rangeselect-question .sah-rangeselect label span {
	display: none;
}
.color-excellent {
	background-color: var(--clr-calm);
}
.color-good {
	background-color: var(--clr-calm-light);
}
.color-fair {
	background-color: var(--clr-vocational);
}
.color-poor {
	background-color: var(--clr-fire);
}
.color-very-poor {
	background-color: var(--clr-compassion);
}
.color-na {
	background-color: var(--clr-grey);
}
.color-thrive {
	background-color: var(--clr-thrive);
}
.color-social {
	background-color: var(--clr-social);
}
.color-onyx {
	background-color: var(--clr-onyx);
}

.sah-rangeslider {
	--srs-width: 100%;

	--srs-track-background: linear-gradient(90deg, var(--clr-calm) 0%, var(--clr-fire) 50%, var(--clr-compassion) 100%);
	--srs-track-border-radius: 15px;
	--srs-track-width: 100%;
	--srs-track-height: 30px;

	--srs-thumb-background: var(--clr-thrive);
	--srs-thumb-border-radius: 50%;
	--srs-thumb-width: 40px;
	--srs-thumb-height: 40px;
	--srs-thumb-border-width: 2px;
	--srs-thumb-border-color: var(--clr-vocational);
	--srs-thumb-outline-offset: 3px;
	--srs-thumb-outline-width: 0px;
	--srs-thumb-outline-color: var(--clr-compassion);
	--srs-thumb-drop-shadow: 0 0 5px var(--clr-thrive);

	--srs-thumb-offset: calc((var(--srs-thumb-height) - var(--srs-track-height)) / 2 );
	--srs-padding-block: calc(var(--srs-thumb-offset) + var(--srs-thumb-outline-offset) + var(--srs-thumb-outline-width) + 3px);
}

/********** Range Input Styles **********/
/*Range Reset*/
.sah-rangeslider input {
   -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: var(--srs-width);
    padding-block: var(--srs-padding-block);
}
/* Removes default focus */
.sah-rangeslider input:focus {
	outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
.sah-rangeslider input::-webkit-slider-runnable-track {
   background: var(--srs-track-background);
   border-radius: var(--srs-track-border-radius);
   width: var(--srs-track-width);
   height: var(--srs-track-height);
}

/* slider thumb */
.sah-rangeslider input::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
   appearance: none;
   margin-top: calc(0px - var(--srs-thumb-offset));
	border: var(--srs-thumb-border-width) solid var(--srs-thumb-border-color);
   background: var(--srs-thumb-background);
   border-radius: var(--srs-thumb-border-radius);
   width: var(--srs-thumb-width);
   height: var(--srs-thumb-height);
   filter: drop-shadow(var(--srs-thumb-drop-shadow));
}

.sah-rangeslider input:focus::-webkit-slider-thumb {   
  border: var(--srs-thumb-border-width) solid var(--srs-thumb-border-color);
  outline: var(--srs-thumb-outline-width) solid var(--srs-thumb-outline-color);
  outline-offset: var(--srs-thumb-outline-offset); 
}

/******** Firefox styles ********/
/* slider track */
.sah-rangeslider input::-moz-range-track {
   background: var(--srs-track-background);
   border-radius: var(--srs-track-border-radius);
   width: var(--srs-track-width);
   height: var(--srs-track-height);

}

/* slider thumb */
.sah-rangeslider input::-moz-range-thumb {
   border: none; /*Removes extra border that FF applies*/
	border: var(--srs-thumb-border-width) solid var(--srs-thumb-border-color);
   background: var(--srs-thumb-background);
   border-radius: var(--srs-thumb-border-radius);
   width: var(--srs-thumb-width);
   height: var(--srs-thumb-height);
   
   filter: drop-shadow(var(--srs-thumb-drop-shadow));
}

.sah-rangeslider input:focus::-moz-range-thumb {
	border: var(--srs-thumb-border-width) solid var(--srs-thumb-border-color);
	outline: var(--srs-thumb-outline-width) solid var(--srs-thumb-outline-color);
	outline-offset: var(--srs-thumb-outline-offset); 
}

.sah-rangeslider datalist {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.sah-rangeslider-labels {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.sah-rangeslider-labels p {
	margin: 0;
}
.sah-rangeslider option {
	padding: 0;
	width: calc(100% / 6);
	text-align: center;
}
.sah-rangeslider input {
	width: 100%;
	direction: rtl;
}

@media (max-width: 1023px) {
	.sah-rangeselect:not(.yes-no) label {
		width: 70px;
	}
	.sah-rangeselect:not(.yes-no) label span {
		font-size: 80%;
	}
}
@media (max-width: 767px) {
	.sah-rangeselect-question {
		flex-direction: column;
		align-items: start;
	}
	.sah-rangeselect-question-group .sah-rangeselect-question + .sah-rangeselect-question .sah-rangeselect label span {
		display: flex;
	}
}
@media (max-width: 479px) {
	.sah-rangeselect {
		width: 100%;
	}
	.sah-rangeselect:not(.yes-no) > div {
		width: calc(100% / 6);
	}
	.sah-rangeselect:not(.yes-no) label {
		width: 100%;
	}
	.sah-rangeselect:not(.yes-no) label span {
		font-size: 70%;
	}

	.sah-rangeslider {
		--srs-track-height: 20px;
		--srs-thumb-width: 30px;
		--srs-thumb-height: 30px;
	}
}