Rainbow colored subfolders in order of levels

Custom CSS & Theme Design
1

I saw some existing CSS that can rainbow color folders, but I want to keep folders at the same level the same color to easily identify levels.

I didn’t find a script that could do what I wanted, so I wrote one myself. Here is how it looks:

image
image330×685 22.7 KB

I’m new to Obsidian and also new to CSS. It took me a whole day, and it looks pretty long-winded, but I’m happy it works. There is still one tiny issue: when the indentation is too large, the colored box of the folder slightly overlaps the sidebar window box.

It would be better if this could be resolved, but I’ll leave it at that for now.

CSS snippet:

:root{
    /* Folder colors */
    --Fold1: 243, 155, 155;
    --Fold2: 240, 174, 89;
    --Fold3: 219, 206, 89;
    --Fold4: 157, 205, 120;
    --Fold5: 138, 182, 226;
    --Fold6: 170, 165, 219;

    /* Opacity setting */
    --bgFoldOpacity: 0.25;
	
    /* Margins and padding */
    --foldBgPad: 3px;
    --foldBgMar: 5px;
}


.mod-root > .nav-folder-children {
    padding-left: 0;
    margin-left: 0;
}




.nav-files-container > div > .nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold1), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    padding-inline-start: 30px !important;
}
.nav-files-container > div > .nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold1), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    padding-inline-start: 10px !important;
}


.nav-files-container > div > .nav-folder > .nav-folder-children {
    padding-inline-start: 0px !important;
    margin-inline-start: 0px !important;
    padding-left: 0px !important;
    margin-left: 0;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder {
    padding-inline-start: 15px !important;
    margin-inline-start: 0px !important;
    margin-left: 0 !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-file {
    padding-inline-start: 15px !important;
    margin-inline-start: 0px !important;
    margin-left: 0 !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold2), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    padding-inline-start: 30px !important;
    margin-left: 0 !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title{
    background-color: rgba(var(--Fold2), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    padding-inline-start: 10px !important;
    margin-left: 0 !important;
}



.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children {
    padding-inline-start: 0px !important;
    margin-inline-start: 0px !important;
    padding-left: 0px !important;
    margin-left: 0 !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder {
    padding-inline-start: 30px !important;
    margin-inline-start: 0px !important;
    margin-left: 0 !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file {
    padding-inline-start: 30px !important;
    margin-inline-start: 0px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold3), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    padding-inline-start: 15px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold3), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    padding-left: 0px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > 
.nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div {
    margin-left: -10px !important;
}




.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children {
    padding-inline-start: 0px !important;
    margin-inline-start: 0px !important;
    padding-left: 0px !important;
    margin-left: 0 !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder {
    padding-inline-start: 45px !important;
    margin-inline-start: 0px !important;
    margin-left: 0 !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file {
    padding-inline-start: 45px !important;
    margin-inline-start: 0px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold4), var(--bgFoldOpacity)); 
    border-radius: 5px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -40px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -60px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > 
div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold4), var(--bgFoldOpacity)); 
    border-radius: 5px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
.nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div {
    margin-left: -60px !important;
}




.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children {
    padding-inline-start: 0px !important;
    margin-inline-start: 0px !important;
    padding-left: 0px !important;
    margin-left: 0 !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder {
    padding-inline-start: 60px !important;
    margin-inline-start: 0px !important;
    margin-left: 0 !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file {
    padding-inline-start: 60px !important;
    margin-inline-start: 0px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold5), var(--bgFoldOpacity)); 
    border-radius: 5px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -85px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -105px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > 
div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold5), var(--bgFoldOpacity)); 
    border-radius: 5px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
.nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div {
    margin-left: -105px !important;
}




.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children {
    padding-inline-start: 0px !important;
    margin-inline-start: 0px !important;
    padding-left: 0px !important;
    margin-left: 0 !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
.nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder {
    padding-inline-start: 75px !important;
    margin-inline-start: 0px !important;
    margin-left: 0 !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
.nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file {
    padding-inline-start: 75px !important;
    margin-inline-start: 0px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold6), var(--bgFoldOpacity)); 
    border-radius: 5px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -145px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -165px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > 
div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold6), var(--bgFoldOpacity)); 
    border-radius: 5px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > 
.nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -165px !important;
}




.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children {
    padding-inline-start: 0px !important;
    margin-inline-start: 0px !important;
    padding-left: 0px !important;
    margin-left: 0 !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > 
.nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder {
    padding-inline-start: 90px !important;
    margin-inline-start: 0px !important;
    margin-left: 0 !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > 
.nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file {
    padding-inline-start: 90px !important;
    margin-inline-start: 0px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold1), var(--bgFoldOpacity)); 
    border-radius: 5px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -220px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -240px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > 
div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold1), var(--bgFoldOpacity)); 
    border-radius: 5px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
.nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -240px !important;
}




.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children {
    padding-inline-start: 0px !important;
    margin-inline-start: 0px !important;
    padding-left: 0px !important;
    margin-left: 0 !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder {
    padding-inline-start: 105px !important;
    margin-inline-start: 0px !important;
    margin-left: 0 !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file {
    padding-inline-start: 105px !important;
    margin-inline-start: 0px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold2), var(--bgFoldOpacity)); 
    border-radius: 5px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -310px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -330px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > 
div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold2), var(--bgFoldOpacity)); 
    border-radius: 5px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
.nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -330px !important;
}
1 Like
2

I improved it a little bit.

image
image330×685 22.7 KB

:root{
    /* Folder colors */
    --Fold1: 243, 155, 155;
    --Fold2: 240, 174, 89;
    --Fold3: 219, 206, 89;
    --Fold4: 157, 205, 120;
    --Fold5: 138, 182, 226;
    --Fold6: 170, 165, 219;

    /* Opacity setting */
    --bgFoldOpacity: 0.25;
	
    /* Margins and padding */
    --foldBgPad: 3px;
    --foldBgMar: 5px;
}



.nav-folder-children {
    border-left: 1px solid #96d5cedc;
}



.nav-files-container > div > .nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold1), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    padding-inline-start: 30px !important;
}
.nav-files-container > div > .nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold1), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    padding-inline-start: 10px !important;
}



.nav-files-container > div > .nav-folder > .nav-folder-children {
    margin-inline-start: 7px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold2), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(15px) !important;
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -6px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -26px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold2), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(15px);
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -25px !important;
}



.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > div.nav-folder-children {
    margin-inline-start: 10px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold3), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(30px) !important;
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -21px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > 
div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -41px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > 
div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold3), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(30px);
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > 
div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -41px !important;
}




.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.nav-folder-children {
    margin-inline-start: 10px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold4), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(45px) !important;
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -36px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -56px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold4), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(45px);
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-file > div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -56px !important;
}




.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.nav-folder-children > 
.nav-folder > .nav-folder-children {
    margin-inline-start: 10px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold5), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(60px) !important;
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -51px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -71px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold5), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(60px);
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -71px !important;
}




.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children {
    margin-inline-start: 10px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold6), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(75px) !important;
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -66px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -86px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold6), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(75px);
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -86px !important;
}




.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children {
    margin-inline-start: 10px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold1), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(90px) !important;
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -81px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -101px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold1), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(90px);
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -101px !important;
}




.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children {
    margin-inline-start: 10px; 
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title {
    background-color: rgba(var(--Fold2), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(105px) !important;
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-inner {
    margin-left: -96px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > div.tree-item-self.nav-folder-title > div.tree-item-icon {
    margin-left: -116px !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title {
    background-color: rgba(var(--Fold2), var(--bgFoldOpacity)); 
    border-radius: 5px; 
    transform:translateX(105px);
    width: calc(100% - 3px) !important;
}
.nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > 
.nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-file > div.tree-item-self.nav-file-title > div.nav-file-title-content {
    margin-left: -116px !important;
}