table of contents Widget Numbers

Hi,
Thank you for the screenshot mockup, first add this css to remove the blue circles and gray line, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.avia-toc-style-elegant {
    padding-left: 0px !important; 
}
.main_color .avia-toc-style-elegant a:first-child:after, .main_color .avia-toc-style-elegant a.avia-toc-level-0:after {
    border-color: #fff !important;
}
.main_color .avia-toc-style-elegant a:before {
    border-color: #fff !important; 
}

Then to add a number before each TOC link Try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_toc_script(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
var i = 0;
$('a.avia-toc-link').each(function(index, element){
    i++;
    $(element).text(i + '. ' + $(element).text());
});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_toc_script');

unfortunately, since the number is added to the link we can not change the color to red as in your mockup, I also only tested this on a TOC with no childern, as in your mockup.
This is the expected results:

Please clear your browser cache and check.
If this doesn’t help please include the url to the page in question so we can take a closer look.

Best regards,
Mike