.editor-container {
    height: 100%;
    position: relative;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */

    &:fullscreen {
        width: 100vw;
        height: 100vh;
    }

    /* Global */
    .margin-left-auto {margin-left: auto;}
    .margin-bottom-6 {margin-bottom: 6px;}
    .margin-bottom-20 {margin-bottom:20px;}
    ul.no-style {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .display-flex {display:flex;}
    .flex-1 {flex:1;}
    .column-gap-10 {column-gap: 10px;}
    .justify-content-end {justify-content: flex-end;}
    .align-items-center {align-items: center;}

    .editor-placeholder {
        height: 100%;
        display: grid;
        grid-auto-rows: auto 1fr;
        min-height: 0;

        .top-lint {
            display: flex;
            background-color: lab(100 0 0);
            border-bottom: 1px solid lab(86.2205 -1.13514 7.56733);
            justify-content: flex-start;
            align-items: center;
            color: rgb(0, 0, 0);
            padding: 8px 12px;

            .right {
                margin-left: auto;
                display: flex;
                gap: 8px;

                button,
                a {
                    height: 36px;
                    align-items: center;
                    cursor: pointer;
                    background-color: transparent;
                    border: 1px solid transparent;
                    border-radius: 8px;
                    display: flex;
                    gap: 8px;
                    text-decoration: none;
                    color: inherit;
                    padding: 0 10px;
                    font-size: 14px;

                    i, svg {
                        width: 16px;
                        height: 15px;
                        margin: auto;
                    }

                    &.style {
                        background-color: lab(98.334 -0.360012 4.57276);
                        border-color: lab(86.2205 -1.13514 7.56733);
                    }

                    &:hover {
                        background-color: lab(74.6768 10.2723 63.231);
                        border-color: lab(86.2205 -1.13514 7.56733);
                        color: lab(10.0133 -11.1421 8.38667);
                        border-radius: 8px;
                    }
                }
            }

            button {
                height: 36px;
                align-items: center;
                background-color: transparent;
                border-color: transparent;
                cursor: pointer;
                border-radius: 10px;
                display: inline-flex;
                gap: 6px;

                &.active {
                    background-color: lab(17.0974 -14.0026 11.3889);
                    color: lab(95.5439 0.315875 15.5684);
                    border-radius: 8px;
                }

                &:hover {
                    background-color: lab(93.1828 0.155687 11.6089);
                    color: rgb(0, 0, 0);
                }

                &:disabled,
                &.is-disabled {
                    background-color: transparent;
                    color: lab(62 0 0);
                    opacity: 0.45;
                    cursor: not-allowed;
                }

                &:disabled:hover,
                &.is-disabled:hover {
                    background-color: transparent;
                    color: lab(62 0 0);
                }

                i, svg {
                    width: 16px;
                    height: 15px;
                    margin: auto;
                }
            }

            .separator {
                width: 1px;
                height: 80%;
                margin: 4px;
                background-color: lab(86.2205 -1.13514 7.56733);
            }
        }

        .main-window {
            display: flex;
            height: 100%;
            min-height: 0;
            overflow: hidden;

            .container-left {
                border-left: 1px solid lab(86.2205 -1.13514 7.56733);

                .kop {
                    display: flex;
                    align-items: center;
                    button {margin-left: auto;}
                    h2 {
                        font-size: 18px;
                        color: lab(17.0974 -14.0026 11.3889);
                        text-transform: uppercase;
                    }

                    p {
                        font-size: 11px;
                        color: lab(42.346 -6.45709 8.87671);
                        margin: 0;
                        padding: 0;
                    }
                }

                .group {
                    background-color: lab(98.334 -0.360012 4.57276);
                    border-radius: 16px;
                    border: 1px solid lab(86.2205 -1.13514 7.56733);
                    margin-bottom: 12px;

                    .group-kop {
                        padding: 8px 12px;
                        display: flex;
                        gap: 8px;
                        align-items: center;
                        background: oklab(0.939999 -0.00000891089 0.0300203 / 0.3);
                        border-bottom: 1px solid lab(86.2205 -1.13514 7.56733);
                    }

                    .group-content {
                        padding: 12px;
                        ul {
                            margin: 0;
                            padding: 0;
                            position: relative;
                            list-style: none;
                            ul {
                                padding-left: 24px;
                                overflow-x: hidden;
                                overflow-y: hidden;
                                height: 0;
                                &::before {
                                    content: "";
                                    background-color: #172f19;
                                    position: absolute;
                                    top: 0;
                                    left: 11px;
                                    bottom: 0;
                                    width: 1px;
                                    opacity: 0.5;
                                }
                            }
                        }

                        .group-group {
                            display: flex;
                            column-gap: 4px;
                            align-items: center;
                            background: transparent;
                            border-radius: 10px;
                            padding: 4px;
                            font-size: 14px;
                            color: lab(17.0974 -14.0026 11.3889);
                            cursor: pointer;

                            .circle {
                                width: 10px;
                                height: 10px;
                                border-radius: 100px;
                            }

                            .right {
                                margin-left: auto;
                                display: flex;
                                column-gap: 4px;
                                align-items: center;
                                color: lab(42.346 -6.45709 8.87671);
                                button {opacity: 0;}
                                button[data-tree-action="toggle-object-lock"],
                                button[data-tree-action="toggle-group-lock"] {
                                    opacity: 1;
                                }
                            }

                            button {
                                margin: 0;
                                padding: 0;
                                background-color: transparent;
                                border: transparent;
                            }

                            &:hover {
                                background-color: oklab(0.939999 -0.00000891089 0.0300203 / 0.6);
                                .right {
                                    button {
                                        opacity: 1;
                                    }
                                }
                            }
                        }

                        li.open > .group-group {
                            background-color: oklab(0.780003 0.0121949 0.139475 / 0.25);
                            & > button:first-of-type svg {
                                transform: rotate(90deg);
                            }
                        }

                        li.selected > .group-group {
                            background-color: oklab(0.939999 -0.00000891089 0.0300203 / 0.6);
                        }

                        .tree-asset-item.is-dragging {
                            opacity: 0.45;
                        }

                        .tree-group-row.is-drop-target {
                            background-color: oklab(0.84 -0.04 0.12 / 0.4);
                            outline: 1px dashed lab(42.346 -6.45709 8.87671);
                        }

                        .tree-asset-item.is-locked > .group-group,
                        .tree-group-item.is-locked > .group-group {
                            opacity: 0.8;
                        }

                        .tree-asset-item.is-locked > .group-group {
                            cursor: default;
                        }

                        li.open > ul {
                            height: auto;
                        }
                    }
                }

                .partslist {
                    border: 1px solid lab(86.2205 -1.13514 7.56733);
                    background-color: oklab(0.939999 -0.00000891089 0.0300203 / 0.4);
                    border-radius: 16px;
                    padding: 12px;
                    font-size: 14px;
                    h3 {
                        font-size: 12px;
                        color: lab(42.346 -6.45709 8.87671);
                        text-transform: uppercase;
                        margin-bottom: 8px;
                    }

                    .gap {gap: 9px;}

                    .partslist-content {
                        display: grid;
                        gap: 8px;
                    }

                    .partslist-group-title {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        font-size: 12px;
                        font-weight: 600;
                        color: lab(30 0 0);
                        margin-bottom: 4px;
                    }

                    .partslist-group-count {
                        margin-left: auto;
                        font-size: 11px;
                        color: lab(42.346 -6.45709 8.87671);
                    }

                    .partslist-group-items {
                        display: grid;
                        gap: 6px;
                    }

                    .partslist-item {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        font-size: 13px;
                        color: lab(22 0 0);
                    }

                    .partslist-item-main {
                        display: inline-flex;
                        align-items: center;
                        gap: 8px;
                        min-width: 0;
                    }

                    .partslist-icon {
                        width: 16px;
                        height: 16px;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;

                        img,
                        svg {
                            width: 16px;
                            height: 16px;
                            display: block;
                        }
                    }

                    .partslist-item-count {
                        margin-left: auto;
                        font-weight: 600;
                        color: lab(42.346 -6.45709 8.87671);
                    }
                }

                .realtime-note {
                    background-color: #f2efdf;
                    color: #5e6755;
                    font-size: 13px;
                    text-align: center;
                    padding: 6px 8px;
                }

                ul.realtime-list {
                    margin: 0;
                    padding: 6px 2px;
                    list-style: none;
                    display: none;
                    column-gap: 5px;
                    row-gap: 5px;
                    flex-wrap: wrap;

                    li.realtime-user {
                        display: inline-flex;
                    }

                    .realtime-avatar {
                        width: 32px;
                        height: 32px;
                        border-radius: 100px;
                        border-width: 3px;
                        border-style: solid;
                        object-fit: cover;
                        background-color: #fff;
                    }

                    .realtime-avatar--fallback {
                        align-items: center;
                        display: inline-flex;
                        font-size: 10px;
                        font-weight: 700;
                        justify-content: center;
                        letter-spacing: 0.04em;
                        color: #2d2d2d;
                        background-color: #f6f2e4;
                    }
                }
            }

            .container-center {
                flex: 1;
                height: 100%;
                min-height: 0;
                display: grid;
                grid-template-rows: 1fr auto;

                .editor {
                    min-height: 0;
                    position: relative;

                    canvas {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }

                    .nav-cube {
                        position: absolute;
                        bottom: 16px;
                        left: 16px;
                        width: 120px;
                        height: 120px;
                        pointer-events: none;
                        border-radius: 8px;
                        overflow: hidden;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                        border: 1px solid lab(86.2205 -1.13514 7.56733 / 0.4);

                        canvas {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                .infobar {
                    background-color: oklab(0.999998 -0.00000980496 0.0000234246 / 0.8);
                    border-top: 1px solid oklab(0.879999 -0.00348094 0.0197155 / 0.6);
                    color: lab(42.346 -6.45709 8.87671);
                    font-size: 11px;
                    display: flex;
                    gap: 8px;
                    padding: 8px 16px;
                    align-items: center;

                    .left {
                        display:flex;
                        align-items: center;
                        gap: 8px;
                    }

                    .right {
                        margin-left: auto;
                        display: flex;
                        align-items: center;
                        gap: 8px;
                    }

                    .measurement-readout {
                        align-items: center;
                        background-color: oklab(0.93 -0.02 0.09 / 0.72);
                        border: 1px solid oklab(0.72 -0.04 0.12 / 0.62);
                        border-radius: 999px;
                        color: lab(17.0974 -14.0026 11.3889);
                        display: inline-flex;
                        font-size: 11px;
                        font-weight: 700;
                        letter-spacing: 0.02em;
                        line-height: 1;
                        padding: 4px 10px;
                    }

                    .transform-delta {
                        align-items: center;
                        background-color: oklab(0.7 -0.09 0.06 / 0.16);
                        border: 1px solid oklab(0.55 -0.09 0.06 / 0.55);
                        border-radius: 999px;
                        color: lab(29 -14 9);
                        display: inline-flex;
                        font-family: monospace;
                        font-size: 11px;
                        font-weight: 700;
                        letter-spacing: 0.02em;
                        line-height: 1;
                        padding: 4px 10px;
                    }

                    .selection-badge {
                        align-items: center;
                        border-radius: 999px;
                        border: 1px solid transparent;
                        display: inline-flex;
                        font-size: 10px;
                        font-weight: 700;
                        letter-spacing: 0.04em;
                        line-height: 1;
                        padding: 3px 8px;
                        text-transform: uppercase;

                        &.is-group {
                            background-color: oklab(0.84 -0.04 0.12 / 0.45);
                            border-color: oklab(0.62 -0.06 0.1 / 0.6);
                            color: lab(17.0974 -14.0026 11.3889);
                        }

                        &.is-multi {
                            background-color: oklab(0.87 0.01 0.03 / 0.55);
                            border-color: oklab(0.65 0.01 0.04 / 0.6);
                            color: lab(17.0974 -14.0026 11.3889);
                        }
                    }

                    .transform-delta-input {
                        background-color: lab(42.346 -6.45709 8.87671);
                        color: lab(100 0 0);
                        border: 1px solid lab(60 0 0);
                        border-radius: 4px;
                        padding: 2px 6px;
                        font-weight: 600;
                        font-family: monospace;
                        font-size: 11px;
                        width: 90px;
                        outline: none;

                        &:focus {
                            border-color: #ff8c00;
                            box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.3);
                        }

                        &::placeholder {
                            color: lab(70 0 0);
                            font-style: italic;
                        }
                    }
                }

                .axis-delta-editor {
                        background-color: #000000a1;
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 7px;


                }
            }

            .container-right {
                border-right: 1px solid lab(86.2205 -1.13514 7.56733);

                .catalogus {
                    display: grid;
                    grid-template-rows: auto 1fr;
                    height: 100%;
                    .categories {
                        height: 100%;
                        overflow-y: auto;
                        overflow-x: hidden;

                        .categorie {
                            h3 {
                                color: lab(42.346 -6.45709 8.87671);
                                font-size: 12px;
                                text-transform: uppercase;
                                margin-bottom: 8px;
                                font-weight: 600;
                            }
                            ul {
                                list-style: none;
                                margin: 0;
                                padding: 0;
                                li {
                                    align-items:center;
                                    background-color:lab(98.334 -0.360012 4.57276);
                                    border: 1px solid lab(86.2205 -1.13514 7.56733);
                                    border-radius: 12px;
                                    box-sizing: border-box;
                                    color: lab(10.0133 -11.1421 8.38667);
                                    column-gap: 12px;
                                    cursor: grab;
                                    display: flex;
                                    margin: 0px 0px 8px;
                                    padding: 12px;
                                    position: relative;
                                    row-gap:12px;
                                    transition: all 0.3s ease;

                                    img {
                                        background-color: rgba(200, 144, 96, 0.2);
                                        border-radius: 10px;
                                        overflow: hidden;
                                        border: 1px solid rgba(200, 144, 96, 0.4);
                                    }

                                    div {
                                        flex:1;
                                        .name {
                                            color: lab(17.0974 -14.0026 11.3889);
                                            font-size: 14px;
                                            font-weight: 600;
                                        }

                                        .dimensions {
                                            font-size: 10px;
                                            color: lab(42.346 -6.45709 8.87671);
                                        }
                                    }

                                    .asset-description-tooltip {
                                        background-color: lab(20% 0 0 / 0.96);
                                        border-radius: 6px;
                                        bottom: calc(100% + 6px);
                                        color: white;
                                        font-size: 11px;
                                        left: 8px;
                                        line-height: 1.35;
                                        max-width: calc(100% - 16px);
                                        opacity: 0;
                                        padding: 7px 9px;
                                        pointer-events: none;
                                        position: absolute;
                                        transform: translateY(4px);
                                        transition: opacity 0.2s ease, transform 0.2s ease;
                                        visibility: hidden;
                                        white-space: normal;
                                        width: max-content;
                                        z-index: 5;
                                    }

                                    button.favorite-btn {
                                        background-color: transparent;
                                        border-color: transparent;
                                        padding: 4px;
                                        svg {
                                            width: 16px;
                                            height: 16px;
                                            fill: none;
                                            stroke: currentColor;
                                        }
                                        &.is-favorite {
                                            svg {
                                                fill: #e74c3c;
                                                stroke: #e74c3c;
                                            }
                                        }
                                    }

                                    &:hover {
                                        border-color: lab(74.6768 10.2723 63.231);
                                        cursor: grab;
                                        translate: 0 -2px;
                                        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, lab(13.7226 -16.8454 13.6618 / 0.35) 0px 10px 30px -10px;

                                        .asset-description-tooltip {
                                            opacity: 1;
                                            transform: translateY(0);
                                            visibility: visible;
                                        }
                                    }

                                    &:focus-visible {
                                        outline: 2px solid lab(74.6768 10.2723 63.231);
                                        outline-offset: 2px;

                                        .asset-description-tooltip {
                                            opacity: 1;
                                            transform: translateY(0);
                                            visibility: visible;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .item,
                .group-panel {
                    details {
                        margin-bottom: 16px;
                        summary {
                            color: lab(42.346 -6.45709 8.87671);
                            font-size: 12px;
                            font-weight: 500;
                            text-transform: uppercase;
                            margin-bottom: 8px;
                        }
                    }

                    .grid {
                        display: grid;
                        grid-template-columns: 1fr 1fr 1fr;
                        grid-gap: 4px;
                    }

                    .asset-value-input {
                        div {
                            color: lab(42.346 -6.45709 8.87671);
                            font-size: 10px;
                            text-transform: uppercase;
                        }
                        label {
                            display: flex;
                            align-items: center;
                            column-gap: 4px;
                            input {
                                width: 100%;
                                background-color:transparent;
                                border: 0 solid transparent;
                                padding: 3px;

                                &:disabled {
                                    color: lab(55 0 0);
                                    cursor: not-allowed;
                                }
                            }

                            button.transform-lock-toggle {
                                background: transparent;
                                border: 0;
                                color: lab(42.346 -6.45709 8.87671);
                                padding: 0;
                                width: 16px;
                                height: 16px;
                                display: inline-flex;
                                align-items: center;
                                justify-content: center;
                                cursor: pointer;
                                flex-shrink: 0;

                                svg {
                                    width: 14px;
                                    height: 14px;
                                }

                                &:hover {
                                    color: lab(25 0 0);
                                }
                            }

                            &.is-locked {
                                background-color: oklab(0.93 -0.002 0.015 / 0.65);
                                border-color: lab(80 0 0);

                                button.transform-lock-toggle {
                                    color: lab(34 0 0);
                                }
                            }

                            border: 1px solid #dadada;
                            background-color: transparent;
                            padding: 4px 8px;
                            font-size: 14px;
                            font-weight: 600;
                            border-radius: 10px;
                            box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
                        }
                    }

                    label.solid {
                        background-color: oklab(0.780003 0.0121949 0.139475 / 0.1);
                        border: 1px solid oklab(0.879999 -0.00348094 0.0197155 / 0.6);
                        padding: 12px;
                        display: flex;
                        align-items: flex-start;
                        column-gap: 4px;
                        border-radius: 10px;

                        h3 {
                            color: lab(10.0133 -11.1421 8.38667);
                            font-size: 14px;
                            font-weight: 500;
                            margin-top: 0;
                            margin-bottom: 4px;
                        }
                        p {
                            margin: 0;
                            padding: 0;
                            color: lab(42.346 -6.45709 8.87671);
                            font-size:12px;
                        }
                    }

                    .default-color-grid {
                        display: grid;
                        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                        grid-gap: 5px;
                        margin-bottom: 8px;
                        button {
                            aspect-ratio: 1 / 1;
                            border-radius: 5px;
                            border: 3px solid #f2efdf;
                        }

                    }

                    .color-changer {
                        div {
                            background-color: oklab(0.780003 0.0121949 0.139475 / 0.1);
                            border: 1px solid oklab(0.879999 -0.00348094 0.0197155 / 0.6);
                            padding: 4px;
                            display: flex;
                            align-items: center;
                            column-gap: 4px;
                            border-radius: 10px;
                            margin-bottom: 1px;

                            input[type="color"] {
                                width: 15px;
                                height: 15px;
                                padding: 0;
                                border: none;
                                outline: none;
                                appearance: none;
                                -webkit-appearance: none;
                                background: transparent;
                                border-radius: 50%;
                                overflow: hidden;
                            }

                            input[type="color"]::-webkit-color-swatch-wrapper {
                                padding: 0;
                            }

                            input[type="color"]::-webkit-color-swatch {
                                border: none;
                                border-radius: 50%;
                            }

                            input[type="color"]::-moz-color-swatch {
                                border: none;
                                border-radius: 50%;
                            }

                            &.selected {
                                border-color: lab(74.6768 10.2723 63.231);
                            }

                            &:hover {
                                border-color: lab(74.6768 10.2723 63.231);
                                cursor: grab;
                                translate: 0 -1px;
                                box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, lab(13.7226 -16.8454 13.6618 / 0.35) 0px 10px 30px -10px;
                            }
                        }
                    }
                }

                .group-panel {
                    .group-empty {
                        p {
                            margin-top: 0;
                            margin-bottom: 8px;
                            color: lab(42.346 -6.45709 8.87671);
                            font-size: 13px;
                        }
                    }

                    textarea {
                        width: 100%;
                        min-height: 88px;
                        resize: vertical;
                        background-color: transparent;
                        border: 0 solid transparent;
                        font-family: inherit;
                        font-size: 14px;
                    }

                    input[type="color"] {
                        width: 100%;
                        height: 34px;
                        border: 0;
                        background: transparent;
                        padding: 0;
                        cursor: pointer;
                    }

                    .group-fields {
                        display: grid;
                        gap: 12px;
                    }
                }

                button.element-remove-button {
                    padding: 8px 16px;
                    background-color: lab(98.334 -0.360012 4.57276);
                    border: 1px solid lab(90.8608 -1.14018 7.56347);
                    color: lab(45.5806 69.4641 51.3946);
                    border-radius: 10px;
                    font-size: 14px;
                    column-gap:8px;
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    width: 100%;
                    justify-content: center;
                    box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 2px -1px;
                    transition: all 0.3s ease;
                    &:hover {
                        background-color: oklab(0.550008 0.195997 0.0998864 / 0.1);
                        color: lab(10.0133 -11.1421 8.38667);
                    }
                }

                label button svg.lock-closed {display: none;}
                label button svg.lock-open {display: block;}

                label.is-locked button svg.lock-closed {display: block;}
                label.is-locked button svg.lock-open {display: none;}
            }

            .container-left, .container-right {
                display: grid;
                grid-template-rows: auto 1fr;
                background-color: lab(100 0 0);
                height: 100%;
                min-height: 0;
                flex-shrink: 0;

                .top {
                    border-bottom: 1px solid lab(86.2205 -1.13514 7.56733);
                    padding: 12px;
                }

                .center {
                    padding: 12px;
                    overflow-x: hidden;
                    overflow-y: auto;
                }

                .tabselector {
                    padding: 4px;
                    background-color: lab(94.3203 -0.551969 7.65613);
                    border-radius: 12px;

                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
                    gap: 4px;

                    .tab {
                        background-color: transparent;
                        border: 1px solid transparent;
                        color: lab(42.346 -6.45709 8.87671);
                        cursor: pointer;
                        border-radius: 10px;
                        padding: 4px 12px;
                        font-size: 14px;
                        &.active {
                            background-color: lab(98.334 -0.360012 4.57276);
                            border: 1px solid lab(86.2205 -1.13514 7.56733);
                            color: lab(10.0133 -11.1421 8.38667);
                        }
                    }
                }

                .searchbar {
                    margin-bottom: 12px;
                    display: flex;
                    gap: 8px;
                    align-items: center;

                    > div {
                        flex: 1 1 auto;
                        min-width: 0;
                        position: relative;

                        svg {
                            width: 16px;
                            height: 16px;
                            position: absolute;
                            top: 12px;
                            left: 12px;
                        }

                        input {
                            width: 100%;
                            box-sizing: border-box;
                            background-color: rgba(0, 0, 0, 0);
                            border-radius: 10px;
                            border: 1px solid lab(90.8608 -1.14018 7.56347);
                            color: lab(10.0133 -11.1421 8.38667);
                            padding: 4px 36px;
                            height: 40px;
                            line-height: 15px;
                            font-size: 14px;
                            box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
                        }
                    }

                    button {
                        flex-shrink: 0;
                        width: 40px;
                        height: 40px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: rgba(0, 0, 0, 0);
                        border-radius: 10px;
                        border: 1px solid lab(90.8608 -1.14018 7.56347);
                        color: lab(10.0133 -11.1421 8.38667);
                        padding: 4px 4px;
                        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
                    }
                }
            }

            .slider {
                width: 6px;
                flex-shrink: 0;
                height: 100%;
                cursor: col-resize;
                background-color: oklab(0.879999 -0.00348094 0.0197155 / 0.4);
                position: relative;
                .stone {
                    z-index: 2;
                    background-color: lab(100 0 0);
                    position: absolute;
                    width: 12px;
                    height: 40px;
                    top: calc(50% - 20px);
                    left: -3px;
                    border-radius: 8px;
                    border: 1px solid lab(86.2205 -1.13514 7.56733);
                    display: none;
                    align-items: center;
                    svg {
                        margin: auto;
                    }
                }

                &:hover {
                    background-color: lab(74.6768 10.2723 63.231);
                    .stone {
                        display: flex;
                    }
                }
            }
        }
    }

    /* Loader */
    .loading {
        display: none;
        background-color: #fcfaf1b8;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        justify-content: center;
        align-items: center;

        .dialog {
            background-color: oklab(0.999998 -0.00000980496 0.0000234246 / 0.95);
            border: 1px solid lab(86.2205 -1.13514 7.56733);
            border-radius: 16px;
            color: lab(10.0133 -11.1421 8.38667);
            column-gap: 16px;
            text-align: center;
            display: flex;
            padding: 40px 48px;
            box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
            box-sizing: border-box;
            align-content: center;
            flex-direction: column;
            align-items: center;

            div.spinner {
                width: 48px;
                height: 48px;
                border: 5px solid lab(94.3203 -0.551969 7.65613);
                border-bottom-color: #172f19;
                border-radius: 50%;
                display: inline-block;
                box-sizing: border-box;
                animation: rotation 1s linear infinite;
            }

            p.line1 {
                color: lab(17.0974 -14.0026 11.3889);
                font-size: 24px;
                text-transform: uppercase;
            }
            p.line2 {
                color: lab(42.346 -6.45709 8.87671);
                font-size: 14px;
            }
        }
        &.active {
            display: flex;
        }
    }

    /* Dialog */
    .dialog-container {
        background-color: oklab(0 0 0 / 0.8);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        .dialog {
            width: 620px;
            padding: 24px;
            background-color: lab(98.334 -0.360012 4.57276);
            border-radius: 12px;
            border: 1px solid lab(86.2205 -1.13514 7.56733);
            display: grid;
            gap: 16px;
            position: relative;

            &.info-dialog {
                width: min(1120px, calc(100vw - 24px));
                max-height: calc(100vh - 24px);
                grid-template-rows: auto auto minmax(0, 1fr) auto;

                .info-dialog-tablist {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 8px;
                    padding-bottom: 8px;
                    border-bottom: 1px solid lab(86.2205 -1.13514 7.56733);
                    position: sticky;
                    top: 0;
                    z-index: 1;
                    background-color: lab(98.334 -0.360012 4.57276);

                    .info-dialog-tab {
                        border: 1px solid lab(86.2205 -1.13514 7.56733);
                        border-radius: 999px;
                        background-color: lab(96.2942 0.0254925 3.22595);
                        color: lab(42.346 -6.45709 8.87671);
                        padding: 6px 14px;
                        cursor: pointer;
                        font-size: 14px;
                        line-height: 1.2;

                        &:hover {
                            background-color: lab(93.6292 1.75789 8.60034);
                        }

                        &:focus-visible {
                            outline: 2px solid lab(64.8541 -24.1473 18.4447);
                            outline-offset: 2px;
                        }

                        &.active {
                            background-color: lab(64.8541 -24.1473 18.4447);
                            border-color: lab(64.8541 -24.1473 18.4447);
                            color: #fff;
                        }
                    }
                }

                .info-dialog-panels {
                    min-height: 0;
                    overflow-y: auto;
                    padding-right: 6px;
                }

                .info-dialog-panel {
                    h3 {
                        margin-bottom: 8px;
                    }

                    ul {
                        margin: 0;
                    }
                }

                @media (max-width: 768px) {
                    padding: 16px;

                    .info-dialog-tablist {
                        gap: 6px;

                        .info-dialog-tab {
                            font-size: 13px;
                            padding: 6px 10px;
                            flex: 1 1 calc(50% - 6px);
                            text-align: center;
                        }
                    }
                }
            }

            button.close {
                position: absolute;
                right: 16px;
                top: 16px;
                background: transparent;
                border: transparent;
                padding: 0;
                opacity: 0.8;
                cursor: pointer;
                &:hover {
                    opacity: 1;
                }
            }
        }
    }

    /* Input */
    input.style {
        width: 100%;
        box-sizing: border-box;
    }

}

/*buttons*/
button.style1 {
    height: 36px;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    padding: 0 10px;
    font-size: 14px;
    background-color: lab(98.334 -0.360012 4.57276);
    border-color: lab(86.2205 -1.13514 7.56733);

    i, svg {
        width: 16px;
        height: 15px;
        margin: auto;
    }

    &:hover {
        background-color: lab(74.6768 10.2723 63.231);
        border-color: lab(86.2205 -1.13514 7.56733);
        color: lab(10.0133 -11.1421 8.38667);
        border-radius: 8px;
    }
}

button.style2 {
    height: 36px;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    gap: 8px;
    text-decoration: none;
    padding: 0 10px;
    font-size: 14px;
    background-color: lab(17.0974 -14.0026 11.3889);
    color: lab(95.5439 0.315875 15.5684);
    border-color: lab(17.0974 -14.0026 11.3889);

    i, svg {
        width: 16px;
        height: 15px;
        margin: auto;
    }

    &:hover {
        background-color: lab(93.1828 0.155687 11.6089);
        color: rgb(0, 0, 0);
        border-color: lab(93.1828 0.155687 11.6089);
    }
}

img.avatar {
    border-radius: 90px;
    overflow: hidden;
    border: 1px solid lightgray;
}

/*form*/
textarea.formstyle {
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
    border: 1px solid lab(90.8608 -1.14018 7.56347);
    color: lab(10.0133 -11.1421 8.38667);
    padding: 4px 4px;
    height: 40px;
    line-height: 15px;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}

/*animation*/
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}