CSS for better numbering in online Documents

There is this common problem with WordPress and other platforms  - the default numbering is like this on all levels:

In normal text editors, this goes like this:

Frankly, its nicer so after some reading I built a CSS override which work even in Publii (the static site generator that powers this site)
It most definitely works on WordPress - this is where it was built and tested

Here is the screenshot and the text itself (for copy-pastes) is below

How to apply it?   (notice - the formatting below is off, just to prove that it works)

1. in Wordpress open your theme configuration 
   1. Click on Customize
      
      
      1. you will see the "Additional CSS" tab - expand it
         
         
         1. paste the text above into the box and save
            The effect can be observed within 10 minutes to a full day (depends on your caching settings)
            
            
            

We are not done yet! The steps above affect only the end result, not the editor. If you are comfortable with having a difference between the two, then you are done but if you want to fix this, stick around:

1. In WordPress (versions below 5.0) , go to Appearance>Editor
   Note - if you are using WP 5.0 and above you need to install the classic editor plugin to replace the awful gutenberg
   
2. In the theme files  - find the one which says "editor-style.css" in it.
   
3. find the lines which define the ul and ol and replace them (after safely saving a copy in a notepad)
4. the changes will take place in few hours (editor caching is longer then the whole website)