.range-header {
    display: flex;
    justify-content: space-between;
}

.roi-calc input[type='radio'] {
    visibility: hidden;
    position: absolute;
    z-index: -1;
}

.roi-calc input[type='radio'] + label {
    position: relative;
    padding-left: 32px;
    display: block;
    min-height: 24px;
    margin-bottom: 15px;
    cursor: pointer;
}

.roi-calc input[type='radio'] + label::before {
    content: ' ';
    display: block;
    border: 1px solid #6b8094;
    background-color: #fff;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
    top: 0;
    transition: border 300ms ease-in-out;
}

.roi-calc input[type='radio']:checked + label::before {
    border: 8px solid #0072db;
}

.roi-calc label {
    margin: 0 0 13px 0;
}

/* https://codepen.io/ShadowShahriar/pen/zYPPYrQ */
.roi-calc input[type='range'] {
    color: #0072db;
    --thumb-height: 16px;
    --track-height: 4px;
    --track-color: #bbc5cd;
    --brightness-hover: 180%;
    --brightness-down: 80%;
    --clip-edges: 1px;
    margin: 0 0 32px 0;
}

/* === range commons === */
.roi-calc input[type='range'] {
    position: relative;
    background: #fff0;
    overflow: hidden;
    width: 100%;
}

/* === WebKit specific styles === */
.roi-calc input[type='range'],
.roi-calc input[type='range']::-webkit-slider-runnable-track,
.roi-calc input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

.roi-calc input[type='range']::-webkit-slider-runnable-track,
.roi-calc input[type='range']::-webkit-slider-thumb {
    position: relative;
}

.roi-calc input[type='range']::-webkit-slider-thumb {
    --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
    --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
    --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
    --clip-further: calc(100% + 1px);
    --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
        100vmax currentColor;

    width: var(--thumb-width, var(--thumb-height));
    background: linear-gradient(currentColor 0 0) scroll no-repeat left center /
        50% calc(var(--track-height) + 1px);
    background-color: currentColor;
    box-shadow: var(--box-fill);
    border-radius: var(--thumb-width, var(--thumb-height));

    filter: brightness(100%);
    clip-path: polygon(
        100% -1px,
        var(--clip-edges) -1px,
        0 var(--clip-top),
        -100vmax var(--clip-top),
        -100vmax var(--clip-bottom),
        0 var(--clip-bottom),
        var(--clip-edges) 100%,
        var(--clip-further) var(--clip-further)
    );
}

.roi-calc input[type='range']:hover::-webkit-slider-thumb {
    filter: brightness(var(--brightness-hover));
    cursor: grab;
}

.roi-calc input[type='range']:active::-webkit-slider-thumb {
    filter: brightness(var(--brightness-down));
    cursor: grabbing;
}

.roi-calc input[type='range']::-webkit-slider-runnable-track {
    background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center /
        100% calc(var(--track-height) + 1px);
}

.roi-calc input[type='range']:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}

/* === Firefox specific styles === */
.roi-calc input[type='range'],
.roi-calc input[type='range']::-moz-range-track,
.roi-calc input[type='range']::-moz-range-thumb {
    appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

.roi-calc input[type='range']::-moz-range-track,
.roi-calc input[type='range']::-moz-range-thumb,
.roi-calc input[type='range']::-moz-range-progress {
    background: #fff0;
}

.roi-calc input[type='range']::-moz-range-thumb {
    background: currentColor;
    border: 0;
    width: var(--thumb-width, var(--thumb-height));
    border-radius: var(--thumb-width, var(--thumb-height));
    cursor: grab;
}

.roi-calc input[type='range']:active::-moz-range-thumb {
    cursor: grabbing;
}

.roi-calc input[type='range']::-moz-range-track {
    width: 100%;
    background: var(--track-color);
}

.roi-calc input[type='range']::-moz-range-progress {
    appearance: none;
    background: currentColor;
    transition-delay: 30ms;
}

.roi-calc input[type='range']::-moz-range-track,
.roi-calc input[type='range']::-moz-range-progress {
    height: calc(var(--track-height) + 1px);
    border-radius: var(--track-height);
}

.roi-calc input[type='range']::-moz-range-thumb,
.roi-calc input[type='range']::-moz-range-progress {
    filter: brightness(100%);
}

.roi-calc input[type='range']:hover::-moz-range-thumb,
.roi-calc input[type='range']:hover::-moz-range-progress {
    filter: brightness(var(--brightness-hover));
}

.roi-calc input[type='range']:active::-moz-range-thumb,
.roi-calc input[type='range']:active::-moz-range-progress {
    filter: brightness(var(--brightness-down));
}

.roi-calc input[type='range']:disabled::-moz-range-thumb {
    cursor: not-allowed;
}

.roi-calc-highlight {
    color: #6A9D0B;
    font-size: 21px;
    line-height: 27px;
    letter-spacing: -0.04px;
}

.roi-green {
    color: #6A9D0B;
}

.roi-group {
    margin-top: 16px;
}

.roi-group p {
    margin: 0 0 3px;
}