/* 
===============================================================================  
                                          COLOURED NESTED FOLDER 
        credit : Lithou ; Jeremy Valentine ; Mara-Li
        You need to change the data-path to corresponding to your folder.
        This will allow the colouring of the top level folders into sections that "drop down" when opened. 
        The Color can be changed using Style Settings.
=============================================================================== */


/* @settings
name: Nested Folder — Relations Line
id: relation-line
settings:
    -
        id: relation-active
        type: class-toggle
        title: Relation Line
        description: Active the relation line
    -
        id: adjust-line 
        format: heading
        collapsed: true
        title: Adjust Line
        level: 3
    -
        id: adjust-pc
        format: em
        title: Line PC
        description: Adjust line with icon (in em) (ON PC)
        default: 1.2
        type: variable-number
    -
        id: adjust-mobile
        format: em
        title: Line MOBILE
        description: Adjust line with icon (in em) (ON MOBILE)
        default: 0.8
        type: variable-number
    -
        id: line-color
        type: heading
        level: 2
        collapsed: true
        title: Border Color
    -
        id: nestlinecolor1
        title: Level 1
        type: variable-themed-color
        format: hex
        opacity: true
        default-light: "#ffffff44"
        default-dark: "#00000025"
    -
        id: nestlinecolor2
        title: Level 2
        type: variable-themed-color
        format: hex
        opacity: true
        default-light: "#ffffff44"
        default-dark: "#00000025"
    -
        id: nestlinecolor3
        title: Level 3
        type: variable-themed-color
        format: hex
        opacity: true
        default-light: "#ffffff44"
        default-dark: "#00000025"
    -
        id: nested-type
        type: heading
        level: 2
        collapsed: true
        title: Border Style
    -
        id: nestlinesize1
        title: Level 1
        type: variable-select
        default: solid
        options:
            - none
            - hidden
            - inset
            - outset
            - dotted
            - dashed
            - solid
            - double
            - groove
            - ridge
    -
        id: nestlinesize2
        title: Level 2
        type: variable-select
        default: groove
        options:
            - none
            - hidden
            - inset
            - outset
            - dotted
            - dashed
            - solid
            - double
            - groove
            - ridge
    -
        id: nestlinesize3
        title: Level 3
        type: variable-select
        default: dashed
        options:
            - none
            - hidden
            - inset
            - outset
            - dotted
            - dashed
            - solid
            - double
            - groove
            - ridge
    -
        id: border-size
        type: heading
        level: 2
        collapsed: true
        title: Border Size
    -
        id: nestlinestyle1
        type: variable-number
        title: Level 1
        default: 2
        format: px
    -
        id: nestlinestyle2
        type: variable-number
        title: Level 2
        default: 2
        format: px
    -    
        id: nestlinestyle3
        type: variable-number
        title: Level 3
        default: 2
        format: px
*/


/* @settings
name: Nested Folder — Colors
id: nested
settings:
    -
        id: FolderRadius
        type: variable-number
        format: px
        default: 5
        title: Folder Radius
    -
        id: files
		title: Files icon
		type: class-toggle
    -
        id: size
        type: variable-number
        format: px
        default: 18
        title: Icon Size
    -
        id: augmente
        title: Augmente font size nav
        default: 14
        max: 30
        min: 14
        format: px
        step: 1
        type: variable-number-slider
    -
        type: heading
        level: 2
        collapsed: true
        title: Unset folder parameters
    -
        id: root-file-color
        format: hex
        opacity: true
        type: variable-themed-color
        title: Root color
        default-light: "#26272b"
        default-dark: "#ffffff"
    -
        id: FoldText
        format: hex
        opacity: true
        title: Top level folder title color
        type: variable-themed-color
        default-light: "#0000002c"
        default-dark: "#ffffff44"
    -
        id: normal-folder
        type: variable-themed-color
        format: hex
        opacity: false
        title: Normal Folder color
        description: Color for unset folder.
        default-light: "#000000"
        default-dark: "#ffffff"
    -
        type: heading
        level: 2
        collapsed: false
        title: Settled Folder
    -
        id: bg00
        format: hex
        opacity: true
        type: variable-themed-color
        title: 00. Folder
        description: Background 
        default-light: "#3131312c"
        default-dark: "#6e6e6e2c"
    -
        id: F00
        title: 00. Folder
        description: font
        type: variable-themed-color
        default-light: "#001219"
        default-dark: "#8d8d8d"
        format: hex
		opacity: false
    -
        id: bg10
        format: hex
        opacity: true
        description: Background
        type: variable-themed-color
        title: 10. Folder
        default-light: "#6867ad2c"
        default-dark: "#bb77622c"
    - 
        id: F10
        title: 10. Folder
        description: Font
        type: variable-themed-color
		opacity: false
        default-light: "#4765AB"
        default-dark: "#bb7762"
        format: hex
    -
        id: bg20
        format: hex
        opacity: true
        type: variable-themed-color
        title: 20. Folder
        description: Background
        default-light: "#85adad2c"
        default-dark: "#77664e2c"
    -
        id: F20
        title: 20. Folder
        description: Font
        type: variable-themed-color
		opacity: false
        default-light: "#3E9C9D"
        default-dark: "#b7822f"
        format: hex
    -
        id: bg30
        description: Background
        format: hex
        opacity: true
        type: variable-themed-color
        title: 30. Folder
        default-light: "#50A6862c"
        default-dark: "#798c642c"
    -
        id: F30
        description: Font
        title: 30. Folder
        type: variable-themed-color
        default-light: "#50A686"
        default-dark: "#798c64"
        format: hex
		opacity: false
    - 
        id: bg40
        description: Background
        format: hex
        opacity: true
        type: variable-themed-color
        title: 40. Folder
        default-light: "#4765AB2C"
        default-dark: "#4765AB2c"
    -
        id: F40
        title: 40. Folder
        description: Font
        type: variable-themed-color
        format: hex
        default-light: "#4765AB"
        default-dark: "#4765AB"
		opacity: false
    -
        id: bg50
        description: Background
        format: hex
        opacity: true
        type: variable-themed-color
        title: 50. Folder
        default-light: "#8FA1CC2c"
        default-dark: "#8FA1CC2c"    
	-
        id: F50
        description: Font
        title: 50. Folder
        type: variable-themed-color
        format: hex
        default-dark: "#8FA1CC"
        default-light: "#8FA1CC"
        opacity: false
    -
        id: bg60
        description: Background
        format: hex
        opacity: true
        type: variable-themed-color
        title: 60. Folder
        default-light: "#8FA1CC2c"
        default-dark: "#8FA1CC2c"    
    -
        id: F60
        title: 60. Folder
        description: Font
        type: variable-themed-color
        format: hex
        default-dark: "#8FA1CC"
        default-light: "#8FA1CC"
        opacity: false
	-
        id: bg70
        description: Background
        format: hex
        opacity: true
        type: variable-themed-color
        title: 70. Folder
        default-light: "#ffffff00"
        default-dark: "#ffffff00"
    -
        id: F70
        description: Font
        title: 70. Folder
        type: variable-themed-color
        format: hex
        default-dark: "#ffffff00"
        default-light: "#ffffff00"
        opacity: false
    -
        id: bg80
        description: Background
        format: hex
        opacity: true
        type: variable-themed-color
        title: 80. Folder
        default-light: "#ad8c332c"
        default-dark: "#ad8c332c"
	-
        id: F80
        description: Font
        title: 80. Folder
        type: variable-themed-color
        format: hex
        default-light: "#ad8c33"
        default-dark: "#ad8c33"
        opacity: false
    -
        id: bg90
        description: Background
        format: hex
        opacity: true
        type: variable-themed-color
        title: 90. Folder
        default-light: "#ffffff00"
        default-dark: "#ffffff00"
    -
        id: F90
        description: Font
        title: 90. Folder
        type: variable-themed-color
        format: hex
        default-light: "#ad8c33"
        default-dark: "#ad8c33"
        opacity: false    
    -
        id: bg100
        description: Background
        format: hex
        opacity: true
        type: variable-themed-color
        title: 100. Folder
        default-light: "#ffffff00"
        default-dark: "#ffffff00"
    -
        id: F100
        description: Font
        title: 100. Folder
        type: variable-themed-color
        format: hex
        default-light: "#ffffff00"
        default-dark: "#ffffff00"
        opacity: false    
    -
        id: bgZZ
        description: Background
        format: hex
        opacity: true
        type: variable-themed-color
        title: ZZ. Folder
        default-light: "#B69D912c"
        default-dark: "#617e8c2c"
    -
        id: FZZ
        description: Font
        title: ZZ. Folder
        type: variable-themed-color
        format: hex
        default-light: "#B69D91"
        default-dark : "#617e8c"
		opacity: false
*/

:root {
    /* folder colours */
    /* line styles for nesting indicators */
    --nestlinesize1: solid;
    --nestlinestyle1: 2px;
    --nestlinesize2: groove;
    --nestlinestyle2: 2px;
    --nestlinesize3: dashed;
    --nestlinestyle3: 2px;
    --FolderRadius: 5px;
    --FoldTextMaster: var(--FoldText);
    --inbox-font: 0, 18, 25;
    --adjust-pc: 1.2em;
    --adjust-mobile: 0.8em;
    --size: 18px;
    --augmente: 14px;
}

.theme-dark {
    --F00: #8d8d8d;
    --F10: #42a5f5;
    --F20: #43a047;
    --F30: #fb8c00;
    --F40: #ab47bc;
    --F50: #afb42b;
    --F60: #00ffd9;
    --F70: #5a81ff;
    --F80: #9925ff;
    --F90: #f700ff;
    --F100: #8d8d8d;
    --FZZ: #617e8c;
    --root-file-color: #ffffff;
    --FoldText: #ffffff44;
    --nestlinecolor1: #ffffff44;
    --nestlinecolor2: #ffffff44;
    --nestlinecolor3: #ffffff44;
    --bg00: #8d8d8d2c;
    --bg10: #ff00002c;
    --bg20: #ff62002c;
    --bg30: #ffd5002c;
    --bg40: #73ff002c;
    --bg50: #00ff772c;
    --bg60: #00ffd92c;
    --bg70: #5a81ff2c;
    --bg80: #9925ff2c;
    --bg90: #f700ff2c;
    --bg100: #8d8d8d2c;
    --bgZZ: #617e8c2c;
    --normal-folder: #ffffff;
}

.theme-light {
    --F00: #00121a;
    --F10: #bb7762;
    --F20: #3e9c9d;
    --F30: #50a686;
    --F50: #4765ab;
    --F40: #8fa1cc;
    --F60: #8fa1cc;
    --F70: #ffffff00;
    --F80: #ad8c33;
    --F90: #ad8c33;
    --F100: #ffffff00;
    --FZZ: #b69d91;
    --root-file-color: #26272b;
    --FoldText: #0000002c;
    --nestlinecolor1: #00000025;
    --nestlinecolor2: #00000025;
    --nestlinecolor3: #00000025;
    --bg00: #3131312c;
    --bg10: #bb77622c;
    --bg20: #85adad2c;
    --bg30: #50a6862c;
    --bg40: #4765ab2c;
    --bg50: #8fa1cc2c;
    --bg60: #ffffff00;
    --bg70: #ffffff00;
    --bg80: #ad8c332c;
    --bg90: #ffffff00;
    --bg100: #b69d912c;
    --bgZZ: #b69d912c;
    --normal-folder: #000000;
}

.nav-file-title,
.nav-folder-title {
    color: var(--normal-folder);
    font-size: var(--augmente) !important;
    border-radius: 0px;
}

.nav-folder-title[data-path^="/"] {
    display: none;
}

body:not(.is-grabbing) .nav-folder-title:hover {
    border-radius: 0px;
}

body:not(.is-grabbing) .nav-file-title:hover .nav-folder-collapse-indicator,
body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator {
    background-color: transparent !important;
}

.nav-folder-title[data-path^="/"] {
    display: none;
}

.fx-icons .nav-folder:not(.nav-folder.mod-root) {
    margin-left: 0;
}

.nav-folder-collapse-indicator.collapse-icon svg.right-triangle {
    background-color: currentColor !important;
    color: currentColor !important;
}

.nav-file-title.is-being-dragged,
.nav-folder-title.is-being-dragged {
    background-color: #8e939349 !important;
}

.nav-folder-title.is-being-dragged-over {
    background-color: transparent !important;
    color: currentColor !important;
    filter: saturate(500%) !important;
}

.CodeMirror-foldgutter-folded,
.is-collapsed .nav-folder-collapse-indicator,
.nav-folder-collapse-indicator {
    color: currentColor !important;
}

.nav-file-tag {
    display: none;
    top: -1px;
}

.nav-folder-children {
    padding-left: 0em;
}

.nav-file-title.is-active::before {
    margin-top: 2px;
    width: 22px;
    height: 20px;
}



/* == File Explorer - animation for active file as per Obuntu === */

.nav-folder.mod-root>.nav-folder-title {
    padding-left: 6px;
    font-size: 14px;
    font-weight: normal !important;
    top: -6px;
    cursor: default;
}

.nav-file.is-active>.nav-file-title,
.nav-file.is-active>.nav-file-title:hover {
    border-radius: 6px;
    font-weight: normal !important;
    border-left: 2px solid var(--text-accent);
    transition: all 0.5s ease;
}

.nav-file.is-active>.nav-file-title {
    padding-left: 5px;

}

.nav-file-title.is-active,
body:not(.is-grabbing) .nav-file-title:hover,
body:not(.is-grabbing) .nav-folder-title:hover {
    transition: all 0.2s ease;
}

div:not(.is-mobile)>.workspace-leaf-content .view-content .nav-file-title-content:hover,
div:not(.is-mobile)>.workspace-leaf-content>.view-content>.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-title:hover {
    color: var(--text-accent) !important;
}

.nav-folder-children .nav-file-title-content:first-child::before {
    font-size: 18px !important;
}

.nav-folder-children .nav-file-title-content:first-child::before {
    font-size: var(--size) !important;
    padding-left: 3px !important;
}

div:not(.is-mobile)>.workspace-leaf-content>.view-content .nav-folder-title {
    color: var(--text-accent) !important;
}


/* SR Plugins adjust */

div:not(.is-mobile)>.workspace-leaf-content>.view-content>.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-title {
    color: var(--text-normal) !important;
}

div:not(.is-mobile)>.workspace-leaf-content>.view-content .nav-file-title-content {
    color: var(--text-normal) !important;
}

div:not(.is-mobile)>.workspace-leaf-content .view-content .nav-folder-children .nav-file-title-content:first-child::before {
    top: -1px !important;
}


/* Set up explorer container margins */

.nav-files-container {
    margin: 0px 5px;
}

.nav-folder-title {
    margin: 0;
    width: 100% !important;
}

.relation-active .nav-folder:not(.mod-root)>.nav-folder-children .nav-file-title {
    margin-left: -5px;
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title {
    font-family: var(--default-font);
    font-size: calc(var(--augmente) + 3px) !important;
    color: var(--FoldText);
    padding-left: 5px;
    margin-top: 7px;
    /* space between top level sections */
    border-radius: var(--FolderRadius) var(--FolderRadius) 0px 0px;
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder.is-collapsed>.nav-folder-title {
    border-radius: var(--FolderRadius);
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children {
    padding-left: 0px;
    border-top: var(--FoldText) 1px solid;
    border-radius: 0px 0px var(--FolderRadius) var(--FolderRadius);
    color: var(--FoldText);
    /* padding-bottom: 12px; */
}

.nav-file-title.is-active,
.nav-file-title:hover,
body:not(.is-grabbing) .nav-folder-title:hover 
{
    border-radius: 5px;
}


/* ======================== FOLDER 00 =================== */

.nav-folder-title[data-path^="00."],
.nav-file-title[data-path*="00."] {
    color: var(--F00) !important;
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="00."],
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="00."]+.nav-folder-children {
    background-color: var(--bg00);
}

.theme-light .nav-file-title.is-active[data-path^="00."],
.theme-dark .nav-file-title.is-active[data-path^="00."],
.theme-dark .nav-folder-title[data-path^="00."]:hover,
.theme-light .nav-folder-title[data-path^="00."]:hover,
.theme-dark .colorful-active .nav-file-title.is-active[data-path^="00."],
.theme-light .colorful-active .nav-file-title.is-active[data-path^="00."],
.theme-dark .nav-file-title[data-path^="00."]:hover,
.colorful-active .nav-file-title.is-active[data-path^="00."],
.theme-light .nav-file-title[data-path^="00."]:hover,
.theme-light .nav-folder-title.is-active[data-path^="00."],
.theme-dark .nav-folder-title.is-active[data-path^="00."] {
    color: var(--F00) !important;
    background-color: var(--bg00) !important;
    filter: saturate(150%);
}


/* ======================== FOLDER 10 =================== */

.nav-folder-title[data-path^="10."],
.nav-file-title[data-path*="10."] {
    color: var(--F10) !important;
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="10."],
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="10."]+.nav-folder-children {
    background-color: var(--bg10);
}

.theme-light .nav-file-title.is-active[data-path^="10."],
.theme-dark .nav-file-title.is-active[data-path^="10."],
.theme-dark .nav-folder-title[data-path^="10."]:hover,
.nav-folder-title[data-path^="10."]:hover,
.theme-light .nav-folder-title[data-path^="10."]:hover,
.theme-dark .colorful-active .nav-file-title.is-active[data-path^="10."],
.theme-light .colorful-active .nav-file-title.is-active[data-path^="10."],
.colorful-active .nav-file-title.is-active[data-path^="10."],
.theme-dark .nav-file-title[data-path^="10."]:hover,
.theme-light .nav-file-title[data-path^="10."]:hover,
.theme-light .nav-folder-title.is-active[data-path^="10."],
.theme-dark .nav-folder-title.is-active[data-path^="10."] {
    color: var(--F10) !important;
    background-color: var(--bg10) !important;
    filter: saturate(150%);
}


/* ======================== FOLDER 20 - 23 =================== */

.nav-folder-title[data-path^="20."],
.nav-file-title[data-path^="20."],
.nav-file-title[data-path^="20."][data-path*="21."],
.nav-file-title[data-path^="20."][data-path*="22."],
.nav-file-title[data-path^="20."][data-path*="23."] {
    color: var(--F20) !important;
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="20."],
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="20."]+.nav-folder-children {
    background-color: var(--bg20);
}

.theme-light .nav-file-title.is-active[data-path^="20."],
.theme-dark .nav-file-title.is-active[data-path^="20."],
.theme-dark .nav-folder-title[data-path^="20."]:hover,
.theme-light .nav-folder-title[data-path^="20."]:hover,
.theme-dark .colorful-active .nav-file-title.is-active[data-path^="20."],
.colorful-active .nav-file-title.is-active[data-path^="20."],
.theme-light .colorful-active .nav-file-title.is-active[data-path^="20."],
.theme-dark .nav-file-title[data-path^="20."]:hover,
.theme-light .nav-file-title[data-path^="20."]:hover,
.nav-file-title[data-path^="20."]:hover,
.theme-light .nav-folder-title.is-active[data-path^="20."],
.theme-dark .nav-folder-title.is-active[data-path^="20."] {
    color: var(--F20) !important;
    background-color: var(--bg20) !important;
    filter: saturate(150%);
}


/* ======================== FOLDER 30 =================== */

.nav-folder-title[data-path^="30"],
.nav-file-title[data-path*="30."] {
    color: var(--F30) !important;
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="30."],
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="30."]+.nav-folder-children {
    background-color: var(--bg30);
}

.theme-light .nav-file-title.is-active[data-path^="30."],
.theme-dark .nav-file-title.is-active[data-path^="30."],
.theme-dark .nav-folder-title[data-path^="30."]:hover,
.colorful-active .nav-file-title.is-active[data-path^="30."],
.theme-light .nav-folder-title[data-path^="30."]:hover,
.theme-dark .colorful-active .nav-file-title.is-active[data-path^="30."],
.theme-light .colorful-active .nav-file-title.is-active[data-path^="30."],
.theme-dark .nav-file-title[data-path^="30."]:hover,
.theme-light .nav-file-title[data-path^="30."]:hover,
.theme-light .nav-folder-title.is-active[data-path^="30."],
.theme-dark .nav-folder-title.is-active[data-path^="30."] {
    color: var(--F30) !important;
    background-color: var(--bg30) !important;
    filter: saturate(150%);
}


/* ======================== FOLDER 40 =================== */

.nav-folder-title[data-path^="40"],
.nav-file-title[data-path*="40."] {
    color: var(--F40) !important;
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="40."],
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="40."]+.nav-folder-children {
    background-color: var(--bg40);
}

.theme-light .nav-file-title.is-active[data-path^="40."],
.theme-dark .nav-file-title.is-active[data-path^="40."],
.theme-dark .nav-folder-title[data-path^="40."]:hover,
.theme-light .nav-folder-title[data-path^="40."]:hover,
.theme-dark .colorful-active .nav-file-title.is-active[data-path^="40."],
.colorful-active .nav-file-title.is-active[data-path^="40."],
.theme-light .colorful-active .nav-file-title.is-active[data-path^="40."],
.theme-dark .nav-file-title[data-path^="40."]:hover,
.theme-light .nav-file-title[data-path^="40."]:hover,
.theme-light .nav-folder-title.is-active[data-path^="40."],
.theme-dark .nav-folder-title.is-active[data-path^="40."] {
    color: var(--F40) !important;
    background-color: var(--bg40) !important;
    filter: saturate(150%);
}


/* ======================== FOLDER 50 =================== */

.nav-folder-title[data-path^="50."],
.nav-file-title[data-path*="50."] {
    color: var(--F50) !important;
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="50."],
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="50."]+.nav-folder-children {
    background-color: var(--bg50);
}

.theme-light .nav-file-title.is-active[data-path^="50."],
.theme-dark .nav-file-title.is-active[data-path^="50."],
.theme-dark .nav-folder-title[data-path^="50."]:hover,
.theme-light .nav-folder-title[data-path^="50."]:hover,
.colorful-active .nav-file-title.is-active[data-path^="50."],
.theme-dark .colorful-active .nav-file-title.is-active[data-path^="50."],
.theme-light .colorful-active .nav-file-title.is-active[data-path^="50."],
.theme-dark .nav-file-title[data-path^="50."]:hover,
.theme-light .nav-file-title[data-path^="50."]:hover,
.theme-light .nav-folder-title.is-active[data-path^="50."],
.theme-dark .nav-folder-title.is-active[data-path^="50."] {
    color: var(--F50) !important;
    background-color: var(--bg50) !important;
    filter: saturate(150%);
}


/* ======================== FOLDER 60 =================== */

.nav-folder-title[data-path^="60."],
.nav-file-title[data-path*="60."] {
    color: var(--F60) !important;
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="60."],
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="60."]+.nav-folder-children {
    background-color: var(--bg60);
}

.theme-light .nav-file-title.is-active[data-path^="60."],
.theme-dark .nav-file-title.is-active[data-path^="60."],
.theme-dark .nav-folder-title[data-path^="60."]:hover,
.theme-light .nav-folder-title[data-path^="60."]:hover,
.theme-dark .colorful-active .nav-file-title.is-active[data-path^="60."],
.colorful-active .nav-file-title.is-active[data-path^="60."],
.theme-light .colorful-active .nav-file-title.is-active[data-path^="60."],
.theme-dark .nav-file-title[data-path^="60."]:hover,
.theme-light .nav-file-title[data-path^="60."]:hover,
.theme-light .nav-folder-title.is-active[data-path^="60."],
.theme-dark .nav-folder-title.is-active[data-path^="60."] {
    color: var(--F60) !important;
    background-color: var(--bg60) !important;
    filter: saturate(150%);
}


/* ======================== FOLDER 70 =================== */

.nav-folder-title[data-path^="70"],
.nav-file-title[data-path*="70."] {
    color: var(--F70) !important;
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="70."],
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="70."]+.nav-folder-children {
    background-color: var(--bg70);
}

.theme-light .nav-file-title.is-active[data-path^="70."],
.theme-dark .nav-file-title.is-active[data-path^="70."],
.theme-dark .nav-folder-title[data-path^="70."]:hover,
.theme-light .nav-folder-title[data-path^="70."]:hover,
.theme-dark .colorful-active .nav-file-title.is-active[data-path^="70."],
.theme-light .colorful-active .nav-file-title.is-active[data-path^="70."],
.colorful-active .nav-file-title.is-active[data-path^="70."],
.theme-dark .nav-file-title[data-path^="70."]:hover,
.theme-light .nav-file-title[data-path^="70."]:hover,
.theme-light .nav-folder-title.is-active[data-path^="70."],
.theme-dark .nav-folder-title.is-active[data-path^="70."] {
    color: var(--F70) !important;
    background-color: var(--bg70) !important;
    filter: saturate(150%);
}


/* ======================== FOLDER 80 =================== */

.nav-folder-title[data-path^="80."],
.nav-file-title[data-path^="80."] {
    color: var(--F80) !important;
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="80."],
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="80."]+.nav-folder-children {
    background-color: var(--bg80);
}

.theme-light .nav-file-title.is-active[data-path^="80."],
.theme-dark .nav-file-title.is-active[data-path^="80."],
.theme-dark .nav-folder-title[data-path^="80."]:hover,
.theme-light .nav-folder-title[data-path^="80."]:hover,
.theme-dark .colorful-active .nav-file-title.is-active[data-path^="80."],
.colorful-active .nav-file-title.is-active[data-path^="80."],
.theme-light .colorful-active .nav-file-title.is-active[data-path^="80."],
.theme-dark .nav-file-title[data-path^="80."]:hover,
.theme-light .nav-file-title[data-path^="80."]:hover,
.theme-light .nav-folder-title.is-active[data-path^="80."],
.theme-dark .nav-folder-title.is-active[data-path^="80."] {
    color: var(--F80) !important;
    background-color: var(--bg80) !important;
    filter: saturate(150%);
}


/* ======================== FOLDER 90 =================== */

.nav-folder-title[data-path^="90."],
.nav-file-title[data-path*="90."] {
    color: var(--F90) !important;
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="90."],
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="90."]+.nav-folder-children {
    background-color: var(--bg90);
}

.theme-light .nav-file-title.is-active[data-path^="90."],
.theme-dark .nav-file-title.is-active[data-path^="90."],
.theme-dark .nav-folder-title[data-path^="90."]:hover,
.theme-light .nav-folder-title[data-path^="90."]:hover,
.theme-dark .colorful-active .nav-file-title.is-active[data-path^="90."],
.theme-light .colorful-active .nav-file-title.is-active[data-path^="90."],
.colorful-active .nav-file-title.is-active[data-path^="90."],
.theme-dark .nav-file-title[data-path^="90."]:hover,
.theme-light .nav-file-title[data-path^="90."]:hover,
.theme-light .nav-folder-title.is-active[data-path^="90."],
.theme-dark .nav-folder-title.is-active[data-path^="90."] {
    color: var(--F90) !important;
    background-color: var(--bg90) !important;
    filter: saturate(150%);
}


/* ======================== FOLDER 100 =================== */

.nav-folder-title[data-path^="100."],
.nav-file-title[data-path*="100."] {
    color: var(--F100) !important;
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="100."],
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="100."]+.nav-folder-children {
    background-color: var(--bg100);
}

.theme-light .nav-file-title.is-active[data-path^="100."],
.theme-dark .nav-file-title.is-active[data-path^="100."],
.theme-dark .nav-folder-title[data-path^="100."]:hover,
.theme-light .nav-folder-title[data-path^="100."]:hover,
.colorful-active .nav-file-title.is-active[data-path^="100."],
.theme-dark .colorful-active .nav-file-title.is-active[data-path^="100."],
.theme-light .colorful-active .nav-file-title.is-active[data-path^="100."],
.theme-dark .nav-file-title[data-path^="100."]:hover,
.theme-light .nav-file-title[data-path^="100."]:hover,
.theme-light .nav-folder-title.is-active[data-path^="100."],
.theme-dark .nav-folder-title.is-active[data-path^="100."] {
    color: var(--F100) !important;
    background-color: var(--bg100) !important;
    filter: saturate(150%);
}


/* ======================== RESSOURCE - ZZ =================== */

.nav-folder-title[data-path^="ZZ."],
.nav-file-title[data-path*="ZZ."] {
    color: var(--FZZ) !important;
}

.nav-folder-title[data-path^="Ressource"],
.nav-file-title[data-path*="Ressource"] {
    color: var(--FZZ) !important;
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="ZZ."],
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="ZZ."]+.nav-folder-children {
    background-color: var(--bgZZ);
}

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="Ressource"],
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="Ressource"]+.nav-folder-children {
    background-color: var(--bgZZ);
}

.theme-light .nav-file-title.is-active[data-path^="ZZ."],
.theme-dark .nav-file-title.is-active[data-path^="ZZ."],
.theme-dark .nav-folder-title[data-path^="ZZ."]:hover,
.theme-light .nav-folder-title[data-path^="ZZ."]:hover,
.theme-dark .colorful-active .nav-file-title.is-active[data-path^="ZZ."],
.theme-light .colorful-active .nav-file-title.is-active[data-path^="ZZ."],
.theme-dark .nav-file-title[data-path^="ZZ."]:hover,
.theme-light .nav-file-title[data-path^="ZZ."]:hover,
.theme-light .nav-folder-title.is-active[data-path^="ZZ."],
.theme-dark .nav-folder-title.is-active[data-path^="ZZ."],
.theme-light .nav-file-title.is-active[data-path^="Ressource"],
.theme-dark .nav-file-title.is-active[data-path^="Ressource"],
.theme-dark .nav-folder-title[data-path^="Ressource"]:hover,
.colorful-active .nav-file-title.is-active[data-path^="Ressource"],
.theme-light .nav-folder-title[data-path^="Ressource"]:hover,
.theme-dark .colorful-active .nav-file-title.is-active[data-path^="Ressource"],
.theme-light .colorful-active .nav-file-title.is-active[data-path^="Ressource"],
.theme-dark .nav-file-title[data-path^="Ressource"]:hover,
.theme-light .nav-file-title[data-path^="Ressource"]:hover,
.theme-light .nav-folder-title.is-active[data-path^="Ressource"],
.theme-dark .nav-folder-title.is-active[data-path^="Ressource"] {
    color: var(--FZZ) !important;
    background-color: var(--bgZZ) !important;
    filter: saturate(150%);
}


/* Scrollbars eliminated */

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}


/* Relationship lines for 2nd, 3rd, and 4th level folders */

@media only screen and (max-device-width: 1024px) {
    .relation-active .is-mobile .nav-folder.mod-root {
        overflow: hidden !important;
    }
    .relation-active .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-file {
        border-left: var(--nestlinestyle1) var(--nestlinesize1) var(--nestlinecolor1);
        margin-left: var(--adjust-mobile);
    }
    .relation-active .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder {
        border-left: var(--nestlinestyle1) var(--nestlinesize1) var(--nestlinecolor1);
        margin-left: var(--adjust-mobile);
    }
    .relation-active .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-file {
        border-left: var(--nestlinestyle2) var(--nestlinesize2) var(--nestlinecolor2);
        margin-left: var(--adjust-mobile);
    }
    .relation-active .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder {
        border-left: var(--nestlinestyle2) var(--nestlinesize2) var(--nestlinecolor2);
        margin-left: var(--adjust-mobile);
    }
    .relation-active .nav-folder.mod-root>.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 {
        border-left: var(--nestlinestyle3) var(--nestlinesize3) var(--nestlinecolor3);
        margin-left: var(--adjust-mobile);
    }
    .relation-active .nav-folder.mod-root>.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 {
        border-left: var(--nestlinestyle3) var(--nestlinesize3) var(--nestlinecolor3);
        margin-left: var(--adjust-mobile);
    }
}

@media only screen and (min-device-width: 1024px) {
    .relation-active .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-file {
        border-left: var(--nestlinestyle1) var(--nestlinesize1) var(--nestlinecolor1);
        margin-left: var(--adjust-pc);
    }
    .relation-active .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder {
        border-left: var(--nestlinestyle1) var(--nestlinesize1) var(--nestlinecolor1);
        margin-left: var(--adjust-pc);
    }
    .relation-active .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-file {
        border-left: var(--nestlinestyle2) var(--nestlinesize2) var(--nestlinecolor2);
        margin-left: var(--adjust-pc);
    }
    .relation-active .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder {
        border-left: var(--nestlinestyle2) var(--nestlinesize2) var(--nestlinecolor2);
        margin-left: var(--adjust-pc);
    }
    .relation-active .nav-folder.mod-root>.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 {
        border-left: var(--nestlinestyle3) var(--nestlinesize3) var(--nestlinecolor3);
        margin-left: calc(var(--adjust-pc));
    }
    .relation-active .nav-folder.mod-root>.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 {
        border-left: var(--nestlinestyle3) var(--nestlinesize3) var(--nestlinecolor3);
        margin-left: calc(var(--adjust-pc));
    }
}
