.changed
    {
        color:orange;
    }

    .tree-view li[data-xtype="web-page"]>div .icon,
    .tree-view li[data-xtype="widget"]>div .icon,
    .xnode[data-xtype="widget"] .icon {
        color: #c0d586;
    }


    .tree-view li.js>div .icon,
    .xnode.js .icon {
        color: #8fa3f6;
    }

    .tree-view li.json>div .icon,
    .xnode.json .icon {
        color: #8aceee;
    }


    .tree-view li.css>div .icon,
    .xnode.css .icon {
        color: #FF9AA2;
    }

    .tree-view li.html>div .icon,
    .xnode.html .icon {
        color: #FFDAC1;
    }

    .tree-view li.php>div .icon,
    .xnode.php .icon {
        color: #E2F0CB;
    }

    .tree-view li.python>div .icon,
    .xnode.python .icon {
        color: #3776ab;
    }



    .xnode {
        cursor: pointer;
        transition: background 0.2s;
        padding: 5px 8px;
        font-size: 12px;
        border-radius: 4px;
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
    }

    .xnode:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .xnode.active,
    .xnode.selected {

        background-color: rgb(40 58 72);
        color: #3498dc;
    }
.item-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, 120px);
    gap: 10px;
}


.item-list .item {
    border-radius: 10px;
    font-size: 10px;
    cursor: pointer;
    border: 3px solid transparent;
}

.item-list .item:hover {
    border: 3px solid var(--accent-color-hover);
}

.item-list .item.selected {
   border: 3px solid var(--accent-color);
}


.item-list .item img {
    width: stretch;
    border-radius: 6px;
    margin: 5px;
}



.item-list .item .info  {
    padding: 10px;
}

.item-list .item .info div {
   
    opacity: 0.6;
}


.item-list .item .info div[name="name"] {
    font-size: 13px;
    margin-bottom: 2px;
    opacity: 1.0;
}



.items-display .back-button {
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
}
#editor-column iframe.smartphone-view  {
    border: 20px solid black;
    border-radius: 40px;
    height: 800px;
    width: 380px;
    margin-top: 40px;
    margin-left: calc(50% - 210px);
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

#editor-column iframe.smartphone-view-rotate  {
    border: 20px solid black;
    border-radius: 40px;
    height: 380px;
    width: 800px;
    margin-left: calc(50% - 400px);
    margin-top:100px;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}