ul.tree {
    --tree-height: 38vh;
    position: relative;
    list-style-type: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.2em;
    height: 35vh;
    overflow-y: auto;
}

ul.tree::-webkit-scrollbar {
    width: 10px;
}

ul.tree::-webkit-scrollbar-thumb {
    background-color: #cad4da;
    border: 2px solid #f2f2f2;
    border-radius: 10px;
}

ul.tree::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.05);
}

ul.tree li+li {
    margin-top: .5rem;
}

ul.tree ul {
    padding-left: 1.5rem;
}

.toggle-btn {
    cursor: pointer;
    width: 28px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .1rem;
    font-size: 1.4rem;
    transition: -webkit-transform .25s ease-in-out;
    transition: transform .25s ease-in-out;
    transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
}

.toggle-btn.active {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.toggle-btn:hover {
    opacity: .5;
}

.hidden {
    display: none;
}

label {
    cursor: pointer;
    font-size: .875rem;
}

.node {
    display: flex;
    align-items: center !important;
    gap: 4px;
}

.node+ul {
    height: 0;
    overflow: hidden;
}

.node + ul li:first-child {
    padding-top: 0.5rem;
}

ul.tree label {
    display: flex;
    align-items: center;
    gap: 6px;
}

/*ul.tree input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  all: revert;
}*/

ul.tree input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    aspect-ratio: 1 / 1;
    border: 1px solid #cad4da;
    border-radius: 1px;
    border-radius: 50%;
    transition: border-color .25s ease-in-out, background-color .25s ease-in-out, background-image .25s ease-in-out;
}


ul.tree input[type="checkbox"]:checked {
    border-color: #8B759A;
    background-color: #8B759A;
}

ul.tree input[type="checkbox"]:checked {
    background-size: 12px 17px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
}

.tree-title{
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}