@media (max-width: 500px) {
    
    #designer-content{
        margin: 50px auto;
         padding: 20px 20px;
    }
    
    #finish-proceed-action span{
        display:none;
        padding: 6px 14px;

    }
    .header-actions{
        gap:0px;
    }
    .finish-design{
        width: 170px;
    }
    .app-content{
        flex-direction: column;
        border: 1px solid lightgray;
        border-radius: 12px;
                margin-top: 9px;
    }

    .app-header h1{
        font-size: 12px;
    }
    .left-toolbar{
        width:100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .properties-panel{

        max-width: 100%;
        width: 100%;
    }

    .tool-button{
        width: fit-content;
    }

    .collapsed{
        height:0px;
        display:none;
    }

    .app-menubar{
        border: 1px solid #ececec;
        padding: 5px;
        border-radius: 10px;
    }
    .menubar-header{
        width:100%;
        display:flex;
        justify-content:space-between;
    }

    .menubar-actions{
        /* border: 1px solid #ececec;
        padding: 5px;
        border-radius: 10px; */
    }

    .menubar-header{
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        padding: 0 12px;
    }

    .panel-content{
            height: fit-content !important;
    }
    .tool-button.active {
        /* background-color: #f9f5ff; */
        color: #4f46e5;
        box-shadow: none;
    }

    .menubar-header svg, .menubar-header svg polyline{
        stroke:white;
    }

    .menubar-properties {
        /* display: none; */
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        row-gap: 0.5rem;
        column-gap: 0.5rem;
    }
}