.div_v1 > *{

  top: 50%;
  transform: translate(0, -50%);


}




.vico svg{
	fill:#fff;
	/*display: none;*/
}
.vico {
	background-color: #005;
	padding: 5px;
	bottom: 0;
	/*margin-bottom:5px;*/
	/*width: 32px;*/
	/*height: 32px;*/
	/*position:absolute;*/
	position:relative;

	border: 1px solid #fff;
	border-radius: 100px;
}
.vico {

	/*margin: auto;*/
	display: none;

}
input.spot_focus:checked ~ .vico {
	--bak_color:#fff;
	--hov_color:#daebfa;
	--svg_fill:#5e6d7a;

}
input.spot_focus:not(:checked) ~ .vico {

	--bak_color:#111;
	--hov_color:#666;
	--svg_fill:#fff;

}



.vico {
	/*background-color: #005;*/
	background-color: var(--bak_color);
}


.vico:hover {
	background-color: var(--hov_color);
}

.vico svg{
	fill: var(--svg_fill);
	/*fill:#f00;*/
}










/*
TODO:JFI are all of these real?;
also maybe make vico or some other class cover for multiple
*/
input.spot_focus:checked ~ .vico {}
input.spot_focus:not(:checked) ~ .vico {}


input.spot_focus {
	display: none;

}

input.spot_focus:not(:checked) ~ .volume_off_ico{
	display: block;

}

input.spot_focus:checked ~ .volume_ico{
	display: block;

}

input.spot_focus:not(:checked) ~ .volume_off_ico_vx{
	display: block;

}

input.spot_focus:checked ~ .volume_ico_vx{
	display: block;

}


.switch {
	display: none;
}


.slider_container {
    border-radius: 100px;
    position: absolute;

}