#user-all {
    background-color: rgb(227, 227, 227);
}

table {
    width: 100%;
}




a{
    text-decoration: none;
}

th, td {
    padding: 2px 4px;
}
.no, .identity, .generation, .category, .role, .status {
    background-color: rgb(255, 255, 255);
    text-align: center;
}

.name{
    width: 34%;
    background-color: rgb(255, 255, 255);
}

.no{
    width: 5%;
}

.identity{
    width: 17%;
}
.generation {
    width: 12%;
}
.category{
    width: 12%;
}
.role {
    width: 10%;
}
.status {
    width: 10%;
}

/* laptop */
@media (min-width: 768px) {
.info{
    width: 25%;
}
}

/* HP */
@media (max-width: 768px) {
.info{
    width: 40%;
}
}


#gen-filter {
    width: 4.8rem;
}

.btn{
width: 100%;
}

.btn-grid{
    width: 30%;
    display: grid;
    gap: 4px;
}
.btn-flex{
    display: flex;
    gap: 4px;
}