.as-collapsible-tree-navigator {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    /*border-left: 1px solid #aaaaaa;*/
    user-select: none;
    position: relative;
    box-sizing: border-box;
    --level: 0;
    --selected-y: 0;
    background-color: white;
    min-width: 220px;
    color: #313030;
}

.as-collapsible-tree-navigator[data-size="v0"] {
    --node-content-height: 30px;
    border-bottom: 1px solid #aaaaaa;
}

.as-collapsible-tree-navigator[data-size="regular"] {
    border-radius: var(--default-radius);
    overflow: hidden;
    padding-right: 0;
}


.as-collapsible-tree-navigator[data-size="v0"] {
    padding-right: 4px;
}

.as-collapsible-tree-navigator[data-size="v0"] .as-collapsible-tree-navigator::after {
    content: "";
    position: absolute;
    transition: top 0.2s;
    top: var(--selected-y);
    height: var(--node-content-height);
    border-right: 4px solid rgb(20, 100, 246);
    right: 0;
}


.as-ctn-collapse-node {
    --children-height: 1000px;
}


.as-ctn-right > span.mdi {
    font-size: 20px;
    vertical-align: middle;
    transition: transform 0.2s ease-in-out;
    transform: rotate(0deg);
    visibility: hidden;
    display: inline-block;
}

.as-ctn-collapse-node.as-close .as-ctn-right > span.mdi-chevron-right {
    visibility: visible;
}

.as-ctn-collapse-node.as-open .as-ctn-right > span.mdi-chevron-right {
    visibility: visible;
    transform: rotate(90deg);
}

.as-ctn-collapse-node-content {
    height: var(--node-content-height);
    box-sizing: border-box;
    padding: 0 0 0 var(--distance-5);
    position: relative;
}

.as-ctn-collapse-node-content,
.as-ctn-node-content {
    display: flex;
    align-items: center;
    background-color: white;
    --color: #313030;
    --yiq-color: white;
    --op-10pc-color: rgb(70, 70, 75, 0.1);
    color: var(--color);
}

.as-collapsible-tree-navigator[data-size="v0"] .as-ctn-collapse-node-content {
    background-color: rgb(240, 240, 242);
}

.as-collapsible-tree-navigator[data-size="v0"] .as-ctn-collapse-node-content {
    height: calc(var(--node-content-height) + 1px);
    border-top: 1px solid #aaaaaa;
    --color: white;
    --yiq-color: #313030;
    --op-10pc-color: var(--color);
    background-color: var(--color);
    color: var(--yiq-color);
}

.as-collapsible-tree-navigator[data-size="v0"] .as-ctn-node-content {
    background-color: white;
    --color: #313030;
    --yiq-color: white;
    --op-10pc-color: rgb(70, 70, 75, 0.1);
    color: var(--color);
}


.as-ctn-collapse-node-content:hover::after,
.as-ctn-node-content:hover::after {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: rgba(172, 169, 169, 0.1);
}

.as-ctn-collapse-node-content::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.as-ctn-left {
    flex-grow: 1;
}

.as-ctn-collapse-node.as-open .as-ctn-collapse-node-children-ctn {
    /*max-height: calc(var(--children-height) + 1px);*/
}


.as-ctn-collapse-node.as-close .as-ctn-collapse-node-children-ctn,
.as-ctn-node.as-close .as-ctn-node-children-ctn {
    /*max-height: 0;*/
    display: none;
}


.as-ctn-collapse-node-children-ctn,
.as-ctn-node-children-ctn {
    box-sizing: border-box;

}

.as-ctn-collapse-node.as-open .as-ctn-collapse-node-content,
.as-ctn-collapse-node:not(:last-child) {
    /*border-bottom: 1px solid rgb(60, 60, 62);*/
}

.as-ctn-toggle-icon-ctn {
    font-size: var(--dropdown-icon-font-size);
    color: var(--dropdown-icon-color);
    height: var(--node-content-height);
    text-align: center;
    line-height: var(--node-content-height);
    overflow: hidden;
}

.as-ctn-toggle-icon-ctn .mdi {
    display: none;
}

.as-ctn-toggle-icon-ctn:hover{
    color: var(--primary-color);
}

.as-ctn-collapse-node.as-open > .as-ctn-collapse-node-content .as-ctn-toggle-icon-ctn .mdi-menu-up,
.as-ctn-collapse-node.as-close > .as-ctn-collapse-node-content .as-ctn-toggle-icon-ctn .mdi-menu-down,
.as-ctn-node.as-open > .as-ctn-node-content .as-ctn-toggle-icon-ctn .mdi-menu-up,
.as-ctn-node.as-close > .as-ctn-node-content .as-ctn-toggle-icon-ctn .mdi-menu-down {
    display: inline-block;
}

.as-ctn-toggle-icon-ctn {
    width: var(--node-content-height);
    visibility: hidden;
}

.as-ctn-collapse-node.as-open > .as-ctn-collapse-node-content .as-ctn-toggle-icon-ctn,
.as-ctn-collapse-node.as-close > .as-ctn-collapse-node-content .as-ctn-toggle-icon-ctn,
.as-ctn-node.as-open > .as-ctn-node-content .as-ctn-toggle-icon-ctn,
.as-ctn-node.as-close > .as-ctn-node-content .as-ctn-toggle-icon-ctn {
    visibility: visible;
}


.as-ctn-right {
    height: 100%;
}

.as-ctn-right > button {
    width: 30px;
    height: 30px;

}

.as-ctn-right > button * {
    font-size: 20px;
}


.as-ctn-right::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.as-ctn-right > button:hover {
    color: var(--primary-color);

}

.as-ctn-text {
    margin-left: 7px;
}

.as-ctn-icon-ctn:empty {
    display: none;
}


.as-ctn-icon-ctn > * {
    font-size: 1.5em;
}

.as-ctn-icon-ctn > img,
.as-ctn-icon-ctn > svg {
    width: 1em;
    height: 1em;
}


.as-ctn-text, .as-ctn-icon-ctn {
    display: inline-block;
    vertical-align: middle;
}

.as-ctn-count {
    font-size: 14px;
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    background-color: rgb(113, 148, 169);
    line-height: 20px;
    min-width: 20px;
    padding-left: 5px;
    padding-right: 5px;
    height: 20px;
    border-radius: 10px;
    margin-left: 5px;
    color: white;
}


.as-ctn-node {
    position: relative;
}


.as-ctn-node-children-ctn:empty,
.as-ctn-node-children-ctn:empty {
    display: none;
}

.as-ctn-node-children-ctn .as-ctn-node:first-child::before {
    top: -15px;
    height: 30px;
}

.as-ctn-node:not(:last-child)::before {
    height: 100%;
}


.as-ctn-node-content {
    position: relative;
    height: var(--node-content-height);
    box-sizing: border-box;
    padding-left: calc(25px * var(--level) - 20px); /*5 is padding in level 0*/
}


.as-ctn-node-content::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.as-ctn-node-children-ctn {
    box-sizing: border-box;

}
.as-ctn-collapse-node > .as-ctn-collapse-node-content .as-ctn-text {
    font-weight: bold;
}

.as-ctn-collapse-node.as-selected > .as-ctn-collapse-node-content .as-ctn-text,
.as-ctn-node.as-selected > .as-ctn-node-content .as-ctn-text {
    /*text-shadow: 1px 0 0 currentColor;*/
}

.as-collapsible-tree-navigator:not([data-size="v0"]) .as-ctn-collapse-node.as-selected > .as-ctn-collapse-node-content,
.as-collapsible-tree-navigator:not([data-size="v0"]) .as-ctn-node.as-selected > .as-ctn-node-content {
    background-color: var(--op-10pc-color);
}


.as-ctn-collapse-node-content .toggler-ico,
.as-ctn-node-content .toggler-ico {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

.as-ctn-collapse-node-content .toggler-ico g,
.as-ctn-node-content .toggler-ico g {
    visibility: hidden;
}

.as-ctn-collapse-node.as-open > .as-ctn-collapse-node-content .toggler-ico .toggle-open,
.as-ctn-collapse-node.as-close > .as-ctn-collapse-node-content .toggler-ico .toggle-close,
.as-ctn-node.as-open > .as-ctn-node-content .toggler-ico .toggle-open,
.as-ctn-node.as-close > .as-ctn-node-content .toggler-ico .toggle-close {
    visibility: visible;
}