*{
    --color-primary: #5e17eb;
    --color-secondary: #ffa500;
}

#myCanvas{
    /*height: 300px;*/
    width: 350px;
}
#thetaRange{
    width: 300px;
}
.range {
    width: 270px;
    height: 48px;
    border: 0;
    background: var(--color-secondary);
    position: relative;
    /* top: 45%; */
    /* left: 50%; */
    /* margin-left: -117px; */
    margin: auto;
}
.range:before, .range:after {
    content: "";
    position: absolute;
    top: 0;
    z-index: 0;
    height: 100%;
    width: 28px;
    background: var(--color-secondary);
    pointer-events: none;
}
.range:before {
    left: -28px;
    border-radius: 5px 0 0 5px;
}
.range:after {
    right: -28px;
    border-radius: 0 5px 5px 0;
}
.range input {
    -webkit-appearance: none;
    position: absolute;
    width: calc(100% + 40px);
    height: 100%;
    margin: 0;
    background-color: transparent;
    outline: none;
    left: -20px;
    -webkit-tap-highlight-color: transparent;
}
.range input::-webkit-slider-thumb, .range input::-webkit-media-slider-thumb {
    opacity: 0;
}
@media screen and (max-width: 768px) {
    .range input:hover + .range-thumb, .range input:active + .range-thumb {
        transform: translateY(-48px);
    }
}
.range input:hover + .range-thumb::before, .range input:active + .range-thumb::before {
    display: block;
}

.lbl-lft, .lbl-rgt {
    position: absolute;
    top: -15px;
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 700;
}

.lbl-lft {
    left: -28px;
}

.lbl-rgt {
    right: -28px;
    text-align: left;
}

.range-thumb {
    position: absolute;
    top: 0px;
    margin-left: -24px;
    border-radius: 50%;
    border: 5px solid var(--color-secondary);
    background: white;
    height: 48px;
    width: 48px;
    outline: none;
    transition: transform 0.3s ease;
    text-align: center;
    font-size: 12px;
    line-height: 38px;
    color: #1a1a1a;
    font-weight: 700;
    pointer-events: none;
    z-index: 1;
}
.range-thumb::before {
    display: none;
    content: "";
    position: absolute;
    z-index: 1;
    top: 53px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px;
    width: 2px;
    height: 28px;
    margin-left: -3px;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 6px 0 0 rgba(255, 255, 255, 0.25);
}
.range-thumb::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: -5px;
    width: 48px;
    height: 10px;
    /*background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDhweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgNDggMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ3ICg0NTM5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+Q29tYmluZWQgU2hhcGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQiIGZpbGw9IiM2MTY4RTciPgogICAgICAgICAgICA8cGF0aCBkPSJNMTEuMTU0NjA2NCwyLjE4MjkyMDUxZS0xMiBMNC40NzIyMTMwMSwyLjE4MjkyMDUxZS0xMiBDNS40MjIyOTI4NiwxLjA2MTUxMjk4IDYsMi40NjMyOTExMyA2LDQgQzYsNy4zMTM3MDg1IDMuMzEzNzA4NSwxMCAwLDEwIEw0OCwxMCBDNDQuNjg2MjkxNSwxMCA0Miw3LjMxMzcwODUgNDIsNCBDNDIsMi40NjMyOTExMyA0Mi41Nzc3MDcxLDEuMDYxNTEyOTggNDMuNTI3Nzg3LDAgTDQzLjUyNzc4NywyLjE4MjkyMDUxZS0xMiBMMzYuODQ1MzkzNiwyLjE4MjkyMDUxZS0xMiBDMzMuNDYzMzI1NSwzLjEwNDc5MzA5IDI4Ljk1Mjk4NzQsNSAyNCw1IEMxOS4wNDcwMTI2LDUgMTQuNTM2Njc0NSwzLjEwNDc5MzA5IDExLjE1NDYwNjQsMi4xOTQyNDQ3OWUtMTIgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=");*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/
}