Need some help with rtl for tree with a custom style

[ElEmFurt]

Hi,

So I have been using this custom css I found somewhere on the internet for JStree and it worked perfectly when the site was in English. I am now tasked to convert the site (dynamically user based) to Arabic and the direction=rtl breaks the tree.

I am attaching the css as well as images of how the tree looks, could you please help me with how to fix the tree when in RTL direction? Some guidance would help, as I am at a total loss as to how to fix the tree.

Also this is my tree initialization code
var tree = $("#tree").jstree({ "checkbox": { "keep_selected_style": false, }, "search": { "show_only_matches": true, 'show_only_matches_children': true }, "plugins": ["checkbox", "search"] });

Normal view

Arabic view

Attached custom css file.
Jstree-custom.zip