.make-model-page{
    display:flex;
    justify-content:center;
    gap:240px;
    padding-top:24px;
}

.make-model-group{
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.make-model-panel{
    width:232px; /* screenshot size */
}

.make-model-header{
    display:flex;
}

.make-model-search{
    width:150px;
    height:34px;
    border:1px solid #c7c7c7;
    border-right:none;
    border-radius:5px 0 0 0;
    padding:0 8px;
}

.make-model-action-title{
    width:80px;
    height:34px;
    border:1px solid #c7c7c7;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f4f4f4;
}

.make-model-add-btn{
    width:34px;
    height:34px;

    border:none;
    border-radius:50%;

    background:#e39a2f;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-top:0;
}

.make-model-add-btn i{
    font-size:18px;
}

.make-model-table-wrap{
    height:510px;
    overflow-y:auto;
    border:1px solid #c7c7c7;
    border-top:none;
}
.make-model-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

.make-model-table td{
    border:1px solid #c7c7c7;
    height:29px;
    padding:0 4px;
    font-size:13px;
    vertical-align:middle;
    background:#ffffff; 
}

.make-model-table tr:nth-child(even) td{
    background:#f3f0eb; 
}

/* Name column */
.make-model-table td:first-child{
    width:150px;
    white-space:normal;
    word-break:break-word;
}

/* Action icons */
.make-model-table td:nth-child(2),
.make-model-table td:nth-child(3){
    width:40px;
    text-align:center;
}

.make-model-table i{
    color:#e39a2f;
    cursor:pointer;
    font-size:14px;
}
.mm-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.25);

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:999;
}

.mm-overlay.active{
    opacity:1;
    visibility:visible;
}

.mm-popup{
    position:fixed;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:405px;
    height:400px;

    background:#efefef;

    border-radius:6px;

    overflow:hidden;

    z-index:1000;

    display:none;
}

.mm-popup.active{
    display:block;
}

.mm-header{
    height:50px;

    background:#1976f3;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 14px;

    color:#fff;
}

.mm-header h3{
    margin:0;
    font-size:16px;
}

.mm-close{
    border:none;
    background:none;

    color:#fff;

    font-size:24px;

    cursor:pointer;
}

.mm-body{
    padding:28px 16px;
}

.mm-body label{
    display:block;
    margin-bottom:8px;
}

.mm-input{
    width:100%;
    height:30px;

    border:1px solid #cfcfcf;
    border-radius:5px;

    padding:0 8px;
}

.mm-footer{
    margin-top:35px;

    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.mm-save-btn{
    width:58px;
    height:36px;

    border:none;
    border-radius:4px;

    background:#1976f3;
    color:#fff;
}

.mm-cancel-btn{
    width:70px;
    height:36px;

    border:none;
    border-radius:4px;

    background:#c9c9c9;
    color:#fff;
}
.mm-popup{
    display:none;
}

.mm-popup.active{
    display:block;
}

.mm-overlay{
    opacity:0;
    visibility:hidden;
}

.mm-overlay.active{
    opacity:1;
    visibility:visible;
}




/* ================= RESPONSIVE TOPBAR ================= */

@media screen and (max-width:768px){

    .topbar{
        padding:0 10px;
        height:37px;
        overflow:hidden;
    }

    .hamburger-icon{
        left:0;
        font-size:22px;
        flex-shrink:0;
    }

    .ribbon{
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        top:4px;
        width:auto;
    }

    .ribbon5{
        width:auto;
        min-width:110px;
        max-width:160px;

        height:28px;
        line-height:28px;

        margin:0;

        padding:0 12px;

        font-size:13px;
        white-space:nowrap;
    }

    .top-right{
        gap:6px;
    }

    .admin{
        right:0;
        margin-top:0;
        font-size:12px;
    }

    .icon-btn i{
        font-size:20px;
    }

    .settings-btn,
    .logout-btn{
        top:0;
        right:0;
        left:0;
    }
}

/* ================= SMALL PHONE ================= */

@media screen and (max-width:480px){

    .admin{
        display:none;
    }

    .ribbon5{
        min-width:90px;
        max-width:130px;
        font-size:12px;
    }

    .icon-btn i{
        font-size:18px;
    }

    .hamburger-icon{
        font-size:20px;
    }
}