body { font-family: Arial; padding: 0; margin:0; background: #f5f5f5; }
    .box { width: 40%; margin: auto; background: white; padding: 20px 0;}
    .logout { display: inline-block; margin-top: 20px; padding: 10px 20px; background: red; color: white; text-decoration: none; border-radius: 5px; }
    .box h2{color:#00A3E6;}
    .box p{color:#003E8B;}
    .box ul li
    {
        line-height:45px;
    }
    .box ul li a
    {
    color: #000;
    text-decoration: none;
    border: 1px solid #ddd;
    padding: 5px 16px;
    border-radius: 5px;
    }
    .box input[type="text"]
    {
        width:50%;
        padding:5px 5px;
    }
    .box input[type="password"]
    {
        width:50%;
        padding:5px 5px;
    }
    .box select
    {
        width:50%;
        padding:5px 5px;
        background-color: #fff;
        border: 1px solid #9b9b9b;
        color: #686868;
        margin-bottom: 10px;
    }
    .box input[type="number"]
    {
        width:50%;
        padding:5px 5px;
    }
    .box button
    {
        background-color: #0255DB;
        border: 0;
        color: #fff;
        padding: 5px 10px;
        border-radius: 3px;
    }
    .box input[type="date"]
    {
        width:40%;
        padding:5px 5px;
        margin: 10px 0;
    }
    th, td
    {
        padding: 8px 5px;
        border: 1px solid #ccc;
        text-align: left;
    }
    table { border-collapse: collapse; margin-top: 20px; }
    #box-inner-ex {width:85%;}
    
    /* User Management Table */
/* Base table style */
.user-table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.user-table th, .user-table td {
    border: 1px solid #ddd;
    padding: 10px 12px;
    text-align: left;
}

.user-table th {
    background-color: #007bff;
    color: white;
}

.user-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Active/Suspended rows */
.user-table tr.active {
    background-color: #d4edda; /* Light green */
}

.user-table tr.suspended {
    background-color: #f8d7da; /* Light red */
}

/* Action buttons */
.action-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    margin: 0 2px;
}

.action-btn.delete { color: red; }
.action-btn.password { color: #007bff; }
.action-btn.toggle { color: #28a745; }
.action-btn.toggle.suspended { color: #dc3545; }

/* Responsive Table */
@media (max-width: 768px) {
    .user-table th, .user-table td {
        font-size: 14px;
        padding: 8px;
    }
}

/* Top Header Styling */
    .top-header {
        background-color: #f8f9fa;
        width: 100%;
    }
    #top-header-inner
    {
        width:96%;
        border-bottom: 2px solid #007bff;
        padding: 20px 0;
    }
.top-header img {
        height: auto;
        width: 4vw;
    }
/*-- Footer Section */    
.footer {
        background-color: #f8f9fa;
        color: #333;
        font-size: 14px;
        width:100%;
    }
    #inner-footer
    {
        width:96%;
        border-top: 2px solid #007bff;
        padding: 15px 0;
    }
    .footer strong {
        color: #007bff;
    }
    
@media only screen and (max-width: 425px)
{
    #top-header-inner
    {
        padding: 8px 0;
    }
    .top-header img
    {
        height: auto;
        width: 18vw;
    }
    .box
    {
        width:100%;
    }
    .box h2
    {
        margin-top:0;
    }
    .box ul li a
    {
        color:#000;
        text-decoration: none;
    }
    #box-inner
    {
        width:80%;
        text-align:left;
    }
    .box input[type="text"]
    {
        width:80%;
    }
    .box input[type="password"]
    {
        width:80%;
    }
    .box select
    {
        width:80%;
    }
    .box input[type="number"]
    {
        width:80%;
    }
    .box input[type="date"]
    {
        width: 32%;
    }
}