/* Customizing the Slider handle as custom image */
#image_slider.e-control.e-slider .e-handle {
    background-image: url('../img/sliders.png');
    background-repeat: no-repeat;
    background-color: white; /* Adding white background */
    border: 0;
    opacity: 0.8;
    border-radius: 50%; /* Making it round */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Optional: adding subtle shadow */
}

#image_slider.e-control.e-slider .e-handle {
    height: 35px;
    width: 35px;
    background-size: 30px; /* Slightly smaller than the container to allow white border */
    background-position: center; /* Center the image in the handle */
}

.material #image_slider.e-control.e-slider .e-handle {
    height: 20px;
    width: 20px;
    background-size: 16px; /* Slightly smaller than the container */
    background-position: center;
}

/* Customizing the custom image Slider position */
.e-control-wrapper.e-slider-container #image_slider .e-handle {
    margin-left: -18px;
    top: calc(40% - 7px);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Consistent shadow */
}

.tailwind .e-control-wrapper.e-slider-container #image_slider .e-handle,
.tailwind-dark .e-control-wrapper.e-slider-container #image_slider .e-handle {
    top: calc(50% - 10px);
}

.material .e-control-wrapper.e-slider-container #image_slider .e-handle {
    margin-left: -20px;
    top: calc(50% - 7px);
}

.fluent2 .custom-thumb .e-control.e-slider .e-handle,
.fluent2-dark .custom-thumb .e-control.e-slider .e-handle,
.fluent2-highcontrast .custom-thumb .e-control.e-slider .e-handle {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Consistent shadow instead of none */
}
.e-control.e-slider .e-slider-track {
    height: 10px!important;
    top: calc(70% - 4px)!important;
    border-radius: 5px!important;
}

#progress_Circularprogress {
    stroke-linecap: round;
    stroke-width: 12px;
    clip-path: none !important; /* Try to remove the clip if rounding is cut off */
}

/* Scoped only to progress bars with the "rounded-progress" custom class */
.rounded-progress .e-progressbar-svg path[id*="Circularprogress"] {
    stroke-linecap: round;
    clip-path: none !important;
}