Why are gtk-3.0 custom settings ignored?

Question

Since Firefox was updated to version 52 on Ubuntu, I started to notice an annoying problem with too thin scroll bars:

I was able to find a would be solution to this issue: to create a file ~/.config/gtk-3.0/gtk.css with this content

.scrollbar {
  -GtkRange-slider-width: 20;
}

Without anything else this widened the scroll bars in Firefox on Ubuntu 16.04 LTS on a virtual machine:

But when I tried to apply this on my host machine (Ubuntu 16.10) it didn't.

I've tried almost everything, what I could suspect, to figure out what is the reason:

• I encrypted the home folder on the virtual machine, in an attempt to reproduce the same issue on the virtual machine;
• I tried to move the 'gtk.css' file and others to the /root/.config/gtk-3.0 directory;
• I created additional files settings.ini, .gtkrc-2.0 etc.
• I edited the /etc/environment file, by adding that line GTK_OVERLAY_SCROLLING=0

Nothing has helped, so could anyone suggest something to this, please? What is the reason, why these files gtk.css, settings.ini are ignored on a host machine Ubuntu 16.10 and are not on a virtual machine Ubuntu 16.04?

Also, I think, it's important to mention that the scroll bars in the "host machine" Firefox don't behave correctly at all, compared to the virtual machine ones: they don't react to a hover event, that is they don't increase their width, while the scroll bars on the "virtual machine" Firefox do.

Thank you in advance.