/*Radial Slider*/
.rs-cont .rs-progress {
    user-select: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

.rs-cont .rs-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.rs-cont .rs-circle:before {
    user-select: none;
    content: "";
    position: absolute;
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

    /*Hardcoded values*/
    width: 95%;
    height: 95%;
    top: 2.5%;
    left: 2.5%;
}

/*Center Handle*/
.rs-cont .rs-handle-center {
    user-select: none;
    width: 0;
    height: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: rotate(0deg);
    transform-origin: center bottom;
}

.rs-cont .rs-handle-center:before,
.rs-cont .rs-handle-center:hover:before {
    user-select: none;
    content: "";
    display: block;
    position: relative;

    background-color: #fff;
    box-shadow: 0 0 10px #000;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
}

.rs-cont .rs-handle-center:before {
    width: 10px;
    height: 20px;
    right: 5px;
    bottom: 5px;
}

.rs-cont .rs-handle-center:hover:before {
    width: 14px;
    height: 24px;
    right: 7px;
    bottom: 6px;
}

/*Left Handle*/
.rs-cont .rs-handle-left {
    user-select: none;
    width: 0;
    height: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: rotate(0deg);
    transform-origin: center bottom;
}

.rs-cont .rs-handle-left:before,
.rs-cont .rs-handle-left:hover:before {
    user-select: none;
    content: "";
    display: block;
    position: relative;

    background-color: #fff;
    box-shadow: 0 0 10px #000;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
}

.rs-cont .rs-handle-left:before {
    width: 4px;
    height: 20px;
    right: 2px;
    bottom: 5px;
}

.rs-cont .rs-handle-left:hover:before {
    width: 6px;
    height: 24px;
    right: 3px;
    bottom: 6px;
}

/*Right Handle*/
.rs-cont .rs-handle-right {
    user-select: none;
    width: 0;
    height: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: rotate(0deg);
    transform-origin: center bottom;
}

.rs-cont .rs-handle-right:before,
.rs-cont .rs-handle-right:hover:before {
    user-select: none;
    content: "";
    display: block;
    position: relative;

    background-color: #fff;
    box-shadow: 0 0 10px #000;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
}

.rs-cont .rs-handle-right:before {
    width: 4px;
    height: 20px;
    right: 2px;
    bottom: 5px;
}

.rs-cont .rs-handle-right:hover:before {
    width: 6px;
    height: 24px;
    right: 3px;
    bottom: 6px;
}