body{
    font-family: Tahoma, Arial;
    background: #f5f5f5;
}


.content{
    margin-right:200px;
    padding:20px;
}

.table-card{
    background:#fff;
    border-radius:16px;
    padding:25px;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.table-card h2{
    color:#1f2937;
    margin-bottom:20px;
    font-size:20px;
}

.add-btn{
    display:inline-block;
    background:#c4c4c4;
    color:#0c0d0d;
    text-decoration:none;
    padding:12px 20px;
    border-radius:10px;
    margin-bottom:20px;
    font-weight:bold;
    transition:.3s;
}

.add-btn:hover{
    background:#d5e3eb;
}

.table{
    width:100%;
    border-collapse:collapse;
    overflow:hidden;
    border-radius:12px;
    margin-top: 10px;
}

.table thead{
    background:#2596DB;
    color:#fff;
}

.table th{
    padding:15px;
    text-align:center;
    font-size:14px;
}

.table td{
    padding:14px;
    text-align:center;
    border-bottom:1px solid #e5e7eb;
    font-size:14px;
}

.table tbody tr{
    transition:.3s;
}

.table tbody tr:hover{
    background:#f9fafb;
}

.edit,
.delete{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:8px;
    text-decoration:none;
    transition:.3s;
}

.edit{
    background:#fef3c7;
    color:#d97706;
}

.edit:hover{
    background:#fcd34d;
}

.delete{
    background:#fee2e2;
    color:#dc2626;
}

.delete:hover{
    background:#fca5a5;
}

.table td:nth-child(1){
    font-weight:bold;
    color:#111827;
}

.table td:nth-child(5){
    color:#2563eb;
    font-weight:bold;
}

.table td:nth-child(6){
    color:#059669;
    font-weight:bold;
}

@media(max-width:992px){

    .content{
        margin-right:0;
        padding:15px;
    }

    .table-card{
        overflow-x:auto;
    }

    .table{
        min-width:1000px;
    }
}