html,
body{
    height:100%;
    overflow:hidden;
    background:#f5f7fb;
    font-family:Segoe UI,Tahoma,sans-serif;
}

/* Sidebar */

#toolbox{
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* Components */

.builder-item{

    background:#ffffff;

    border:1px solid #dee2e6;

    border-radius:8px;

    padding:12px;

    cursor:grab;

    transition:.2s;

    font-size:15px;

    font-weight:500;

    user-select:none;
}

.builder-item i{

    color:#0d6efd;

    margin-right:10px;

}

.builder-item:hover{

    background:#0d6efd;

    color:#ffffff;

    transform:translateY(-2px);

    box-shadow:0 5px 15px rgba(0,0,0,.15);

}

.builder-item:hover i{

    color:#ffffff;

}


.builder-item{

    cursor:grab;

}

.builder-item:active{

    cursor:grabbing;

}
/* Canvas */

#canvas{

    min-height:700px;

    background:#ffffff;

    border:3px dashed #ced4da;

    border-radius:12px;

    padding:20px;

    overflow-y:auto;

}

/* Empty Canvas */

.empty-message{

    text-align:center;

    color:#999;

    margin-top:180px;

}

/* Form Fields */

.canvas-item{

    position:relative;

    background:#ffffff;

    border:2px solid transparent;

    border-radius:8px;

    padding:15px;

    margin-bottom:15px;

    transition:.2s;

    cursor:pointer;

}

.canvas-item:hover{

    border-color:#86b7fe;

    box-shadow:0 0 15px rgba(13,110,253,.15);

}

/* Selected */

.canvas-item.active{

    border-color:#0d6efd;

    box-shadow:0 0 15px rgba(13,110,253,.35);

}

/* Drag Handle */

.drag-handle{

    position:absolute;

    top:8px;

    right:10px;

    cursor:move;

    color:#888;

}

.drag-handle:hover{

    color:#0d6efd;

}

/* Resize Handle */

.resize-handle{

    position:absolute;

    width:12px;

    height:12px;

    background:#0d6efd;

    border-radius:50%;

    right:-6px;

    bottom:-6px;

    cursor:ew-resize;

}

/* Labels */

.canvas-item label{

    font-weight:600;

}

/* Property Panel */

#propertyPanel{

    background:#ffffff;

    padding:15px;

    border-radius:10px;

    border:1px solid #dee2e6;

}

/* Navbar */

.navbar{

    height:60px;

}

/* Scrollbars */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#bdbdbd;

    border-radius:20px;

}

/* Placeholder */

.sortable-ghost{

    opacity:.35;

}

.sortable-chosen{

    background:#eaf4ff;

}

/* Drop Highlight */

.canvas-highlight{

    border:3px dashed #0d6efd !important;

    background:#f4f9ff;

}