/* =========================================
   FOTO / NOMOR
========================================= */

.bion-photo{
    display:flex;
    align-items:center;
    justify-content:flex-start;

    min-width:0;

    font-size:12px;

    color:#666;
}

.bion-photo img{
    width:34px;
    height:34px;

    border-radius:7px;

    object-fit:cover;
}
/* =========================================
   STATUS
========================================= */

.bion-status-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
}

.bion-status-wrap span{
    font-size:10px;
    color:#666;
    font-weight:500;
    line-height:1;
    text-align:center;
}


/* =========================================
   SWITCH
========================================= */

.bion-switch{
    width:40px;
    height:21px;
    background:#d6d6d6;
    border-radius:50px;
    position:relative;
    cursor:pointer;
    transition:.2s;
}

.bion-switch-circle{
    width:15px;
    height:15px;
    top:3px;
    left:3px;
    background:#fff;
    border-radius:50%;
    position:absolute;
    transition:.2s;
    box-shadow:0 2px 6px rgba(0,0,0,.18);
}

.bion-switch.active{
    background:#7b1e25;
}

.bion-switch.active .bion-switch-circle{
    left:22px;
}


/* =========================================
   DELETE MODAL
========================================= */

.bion-delete-modal{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.40);
    z-index:10000;
}

.bion-delete-box{
    width:360px;
    max-width:calc(100vw - 30px);
    background:#fff;
    border-radius:12px;
    padding:24px;
    text-align:center;
    animation:bionPopup .2s;
}

.bion-delete-icon{
    width:50px;
    height:50px;
    margin:auto auto 14px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:#fdeaea;
    color:#c62828;
    font-size:19px;
}

.bion-delete-box h3{
    margin:0 0 7px;
    font-size:15px;
}

.bion-delete-box p{
    margin:0;
    color:#777;
    font-size:11px;
    line-height:1.6;
}

.bion-delete-button{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:20px;
}

.bion-delete-cancel,
.bion-delete-ok{
    min-width:90px;
    height:34px;
    border:none;
    border-radius:7px;
    cursor:pointer;
    font-size:10px;
    font-weight:600;
}

.bion-delete-cancel{
    background:#eeeeee;
    color:#555;
}

.bion-delete-ok{
    background:#7b1e25;
    color:#fff;
}

.bion-delete-ok:hover{
    background:#61171d;
}


/* =========================================
   MODAL HEADER
========================================= */

.bion-modal-head{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px 20px;

    border-bottom:1px solid #ececec;

    background:#fff;
}

.bion-modal-title{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.bion-modal-title h3{
    margin:0;

    font-size:16px;

    font-weight:700;

    color:#222;
}

.bion-modal-title span{
    font-size:10px;

    color:#888;
}


/* =========================================
   HEADER HALAMAN
========================================= */

.bion-menu-head{
    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:14px;

    gap:12px;
}

.bion-menu-title{
    display:flex;

    flex-direction:column;

    gap:4px;
}

.bion-menu-title h2{
    margin:0;

    font-size:22px;

    color:#222;

    font-weight:700;
}

.bion-menu-info{
    display:flex;

    flex-wrap:wrap;

    gap:6px;
}

.bion-menu-info span{
    padding:5px 10px;

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:20px;

    font-size:10px;

    color:#666;
}

.bion-menu-title p{
    margin:0;

    color:#8b8b8b;

    font-size:11px;
}


/* =========================================
   BUTTON TAMBAH
========================================= */

.bion-menu-add{
    height:36px;

    padding:0 14px;

    border:none;

    border-radius:8px;

    background:#7b1e25;

    color:#fff;

    display:flex;

    align-items:center;

    gap:7px;

    font-size:11px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;
}

.bion-menu-add:hover{
    background:#96252f;

    transform:translateY(-1px);

    box-shadow:0 5px 12px rgba(123,30,37,.18);
}

.bion-menu-add i{
    font-size:11px;
}


/* =========================================
   MODAL
========================================= */

.bion-modal{
    position:fixed;

    inset:0;

    background:rgba(0,0,0,.40);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding:15px;
}

.bion-modal-box{
    width:620px;

    max-width:94vw;

    max-height:86vh;

    background:#fff;

    border-radius:12px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    animation:bionPopup .2s;
}

@keyframes bionPopup{

    from{
        opacity:0;

        transform:scale(.97);
    }

    to{
        opacity:1;

        transform:scale(1);
    }

}


/* =========================================
   CLOSE
========================================= */

.bion-close{
    width:32px;

    height:32px;

    border:none;

    background:#f3f3f3;

    border-radius:7px;

    cursor:pointer;

    font-size:12px;
}

.bion-close:hover{
    background:#e9e9e9;
}


/* =========================================
   MODAL BODY
========================================= */

.bion-modal-body{
    flex:1;

    padding:17px 20px;

    overflow-y:auto;
}


/* =========================================
   FORM GROUP
========================================= */

.bion-group{
    margin-bottom:13px;
}

.bion-group:last-child{
    margin-bottom:0;
}

.bion-group label{
    display:block;

    margin-bottom:5px;

    font-weight:600;

    font-size:10px;

    color:#333;
}

.bion-input,
.bion-textarea{
    width:100%;

    border:1px solid #ddd;

    border-radius:7px;

    padding:9px 11px;

    outline:none;

    font-size:11px;

    box-sizing:border-box;

    background:#fff;
}

.bion-input:focus,
.bion-textarea:focus{
    border-color:#7b1e25;

    box-shadow:0 0 0 2px rgba(123,30,37,.06);
}

.bion-textarea{
    height:85px;

    resize:none;
}

.bion-grid2{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;
}


/* =========================================
   MODAL FOOT
========================================= */

.bion-modal-foot{
    flex-shrink:0;

    display:flex;

    justify-content:flex-end;

    gap:7px;

    padding:12px 20px;

    border-top:1px solid #eee;

    background:#fff;
}

.bion-cancel,
.bion-save{
    height:34px;

    padding:0 15px;

    border:none;

    border-radius:7px;

    cursor:pointer;

    font-size:10px;

    font-weight:600;
}

.bion-cancel{
    background:#ececec;

    color:#555;
}

.bion-cancel:hover{
    background:#e2e2e2;
}

.bion-save{
    background:#7b1e25;

    color:#fff;
}

.bion-save:hover{
    background:#681920;
}


/* =========================================
   TABLE
========================================= */

.bion-table{
    width:100%;

    background:#fff;

    border:1px solid #ececec;

    border-radius:9px;

    overflow:hidden;
}


/* =========================================
   ROW
========================================= */



.bion-row:last-child{
    border-bottom:none;
}

.bion-row:not(.bion-head):hover{
    background:#fafafa;
}


/* =========================================
   CELL
========================================= */

.bion-row > div{
    min-width:0;

    font-size:12px;

    color:#555;
}


/* =========================================
   TABLE HEADER
========================================= */

.bion-head{
    min-height:42px;

    background:#fafafa;

    font-size:10px;

    font-weight:600;

    color:#777;

    text-transform:uppercase;

    letter-spacing:.3px;
}

.bion-head > div{
    font-size:10px !important;

    font-weight:600;

    color:#777 !important;
}


/* =========================================
   USERNAME
========================================= */

.bion-name{
    min-width:0;

    font-size:12px !important;

    font-weight:600;

    color:#333 !important;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


/* =========================================
   PASSWORD
========================================= */

.bion-row > div:nth-child(4){
    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


/* =========================================
   ACTION
========================================= */

.bion-action{
    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:5px;
}

.bion-action button{
    width:28px;

    height:28px;

    padding:0;

    border:none;

    border-radius:6px;

    font-size:10px;

    cursor:pointer;

    transition:.15s;
}

.bion-edit:hover{
    background:#0d6efd;

    color:#fff;
}

.bion-delete:hover{
    background:#dc3545;

    color:#fff;
}


/* =========================================
   HEADER AKSI
========================================= */

.bion-row.bion-head > div:last-child{
    text-align:right;
}


/* =========================================
   STATUS BADGE
========================================= */

.bion-active,
.bion-disable{
    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:68px;

    height:23px;

    border-radius:20px;

    font-size:9px;

    font-weight:600;
}


/* =========================================
   FILTER
========================================= */

.bion-filter{
    display:flex;

    gap:8px;

    align-items:center;

    flex-wrap:wrap;

    margin-bottom:14px;
}


/* =========================================
   SEARCH
========================================= */

.bion-search{
    flex:1;

    min-width:240px;

    height:36px;

    display:flex;

    align-items:center;

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:8px;

    padding:0 11px;
}

.bion-search:focus-within{
    border-color:#7b1e25;

    box-shadow:0 0 0 2px rgba(123,30,37,.05);
}

.bion-search i{
    color:#9b9b9b;

    font-size:12px;
}

.bion-search input{
    flex:1;

    height:100%;

    border:none;

    outline:none;

    background:none;

    padding-left:8px;

    font-size:11px;
}


/* =========================================
   SELECT
========================================= */

.bion-select-box{
    position:relative;

    width:165px;
}

.bion-select{
    width:100%;

    height:36px;

    border:1px solid #e8e8e8;

    border-radius:8px;

    background:#fff;

    padding:0 34px 0 11px;

    font-size:11px;

    cursor:pointer;

    outline:none;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    transition:.2s;
}

.bion-select:hover{
    border-color:#cfcfcf;
}

.bion-select:focus{
    border-color:#7b1e25;

    box-shadow:0 0 0 2px rgba(123,30,37,.05);
}

.bion-select-box i{
    position:absolute;

    right:11px;

    top:50%;

    transform:translateY(-50%);

    color:#999;

    font-size:10px;

    pointer-events:none;
}

.bion-select:focus + i{
    color:#7b1e25;
}


/* =========================================
   FORM MENU
========================================= */

.bion-form{
    display:grid;

    grid-template-columns:250px 1fr;

    gap:20px;
}

.bion-left{
    display:flex;

    align-items:flex-start;
}

.bion-right{
    display:flex;

    flex-direction:column;
}


/* =========================================
   UPLOAD
========================================= */

.bion-upload{
    width:100%;

    aspect-ratio:1;

    border:2px dashed #ddd;

    border-radius:12px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    position:relative;

    cursor:pointer;

    transition:.2s;

    overflow:hidden;

    background:#fafafa;
}

.bion-upload:hover{
    border-color:#7b1e25;

    background:#faf7f7;
}

.bion-upload input{
    position:absolute;

    inset:0;

    opacity:0;

    cursor:pointer;

    z-index:5;
}

.bion-upload i{
    font-size:38px;

    color:#999;

    margin-bottom:10px;
}

.bion-upload span{
    color:#888;

    font-size:11px;
}


/* =========================================
   UPLOAD PREVIEW
========================================= */

#preview_menu{
    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    display:none;

    z-index:1;
}

.bion-upload-placeholder{
    position:absolute;

    inset:0;

    z-index:2;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

    text-align:center;
}

.bion-upload-placeholder i{
    font-size:38px;

    color:#b8b8b8;

    margin:0;
}

.bion-upload-placeholder span{
    color:#888;

    font-size:11px;

    line-height:17px;
}

.bion-upload-overlay{
    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:7px;

    opacity:0;

    transition:.2s;

    z-index:3;
}

.bion-upload:hover .bion-upload-overlay{
    opacity:1;
}

.bion-upload-overlay i{
    font-size:22px;
}


/* =========================================
   RADIO
========================================= */

.bion-radio{
    display:flex;

    gap:18px;

    margin-top:5px;
}

.bion-radio label{
    display:flex;

    align-items:center;

    gap:6px;

    cursor:pointer;

    font-size:11px;

    font-weight:500;
}


/* =========================================
   PAGINATION
========================================= */

.bion-pagination{
    display:flex;

    margin-top:10px;

    flex-wrap:wrap;

    gap:8px;


    background:#fff;

    border-radius:8px;

    border-top:1px solid #ececec;
    min-height:48px;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
}

.bion-pagination-info{
    color:#777;

    font-size:10px;
}

.bion-pagination-info b{
    color:#7b1e25;
}

.bion-pagination-nav{
    display:flex;

    align-items:center;

    gap:5px;
}

.bion-page{
    width:29px;

    height:29px;

    border:none;

    border-radius:7px;

    background:#f4f4f4;

    color:#666;

    cursor:pointer;

    transition:.15s;

    font-size:10px;

    font-weight:600;
}

.bion-page:hover{
    background:#ececec;

    transform:translateY(-1px);
}

.bion-page.active{
    background:#7b1e25;

    color:#fff;

    box-shadow:0 4px 10px rgba(123,30,37,.18);
}

.bion-dot{
    padding:0 3px;

    color:#888;

    font-weight:bold;

    font-size:10px;
}


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

@media(max-width:900px){

    .bion-form{
        grid-template-columns:1fr;
    }

}


@media(max-width:700px){

    .bion-row{
        grid-template-columns:
            45px
            minmax(160px,2fr)
            minmax(110px,1fr)
            90px
            75px;

        min-height:48px;

        padding:0 12px;
    }

    .bion-row > :nth-child(4),
    .bion-row > :nth-child(5){
        display:none;
    }

}


@media(max-width:600px){

    .bion-menu-head{
        flex-direction:column;

        align-items:stretch;
    }

    .bion-menu-title h2{
        font-size:20px;
    }

    .bion-filter{
        flex-direction:column;

        align-items:stretch;
    }

    .bion-search{
        width:100%;

        min-width:0;
    }

    .bion-select-box{
        width:100%;
    }

    .bion-menu-add{
        width:100%;

        justify-content:center;
    }

}