body, form, datalist {
display: grid;
}
.bwc-sticky{
position: sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: -webkit-sticky;
top: 110px;
margin-bottom: 1em;
display: flex;
justify-content: space-evenly;
margin-bottom: 3em;
font-weight: 700;
@media (width < 700px){
flex-direction: column;
align-items: center;
}
}
div.bwc_title {
padding-top: 0px;
font-weight: 800;
padding-bottom: 0.5em;
}
.bwc_total span {
font-size: 3em;
display: block;
@media (width < 700){
font-size:1rem;
}
}
.bwc_total {
text-align: end;
}
body {
overflow-x: hidden;
min-height: 100vh;
}
@media (max-width: 240px) {
body {
font-size: 0.75em;
}
}
form {
--k: calc((var(--val) - var(--min))/
(var(--max) - var(--min)));
--pos: calc(1.125em + var(--k)*(100% - 2.25em));
grid-gap: 0.25em;
place-self: center;
min-width: 8em;
width: calc(100% - 1.5em);
max-width: 19.5em;
filter: Saturate(var(--hl, 0));
transition: filter 0.3s ease-out;
}
form:focus-within, form:hover {
--hl: 1 ;
}
input[type=range] {
height: 2.25em;
border-radius: 2.25em;
box-shadow: 0 -1px #eaeaea, 0 1px #fff;
background: linear-gradient(#c3c3c3, #f1f1f1);
cursor: pointer;    
border: 0px solid #bbb; 
display: block; 
padding: 0em; 
width: 100%;
}
input[type=range], input[type=range]::-webkit-slider-runnable-track, input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range][list]::-webkit-slider-container {
min-height: 1.5em;
}
input[type=range]::-webkit-slider-container {
-webkit-user-modify: read-write !important;
margin: 0.375em;
height: 1.5em;
border-radius: 0.75em;
box-shadow: inset 0 1px 4px #8c8c8c;
background: linear-gradient(#f8dd36, #d68706) 0/var(--pos) no-repeat, linear-gradient(#efefef, #c9c9c9);
}
input[type=range]::-webkit-slider-runnable-track {
margin: -0.375em;
}
input[type=range]::-moz-range-track {
margin: 0.375em;
height: 1.5em;
border-radius: 0.75em;
box-shadow: inset 0 1px 4px #8c8c8c;
background: linear-gradient(#f8dd36, #d68706) 0/var(--pos) no-repeat, linear-gradient(#efefef, #c9c9c9);
}
input[type=range]::-webkit-slider-thumb {
box-sizing: border-box;
border: solid 0.375em transparent;
width: 2.25em;
height: 2.25em;
border-radius: 50%;
box-shadow: 0 2px 5px #7d7d7d;
background: linear-gradient(#c5c5c5, whitesmoke) padding-box, linear-gradient(#fbfbfb, #c2c2c2) border-box;
cursor: ew-resize;
}
input[type=range]::-moz-range-thumb {
box-sizing: border-box;
border: solid 0.375em transparent;
width: 2.25em;
height: 2.25em;
border-radius: 50%;
box-shadow: 0 2px 5px #7d7d7d;
background: linear-gradient(#c5c5c5, whitesmoke) padding-box, linear-gradient(#fbfbfb, #c2c2c2) border-box;
cursor: ew-resize;
}
input[type=range]:focus {
outline: none;
}
datalist {
grid-row: 1;
grid-template-columns: 3em 1fr 3em;
place-content: end center;
margin: 0 -0.375em;
color: #bababa;
text-align: center;
text-transform: uppercase;
}
datalist::after { }