.search {

    top: 6px;
    left: 10px;
}

.form-control {

    border: none;
    padding-left: 32px;
}

.form-control:focus {

    border: none;
    box-shadow: none;
}

.green {

    color: green;
}

thead {
    background: var(--first-color) !important;
    color: var(--white-color);
}

.grow {
    animation: glow 1s linear infinite alternate;
}

@keyframes glow {
    to {
        opacity: 0;
    }

}


@media screen and (max-width: 968px) {
    thead {
        display: none;
    }

    td {
        display: block;
    }

    td:first-child {
        background-color: var(--first-color);
        color: #fff !important;
        text-align: end;
        margin-top: 1rem;
    }

    td:first-child::before {
        content: "Id";
    }

    td:nth-child(2)::before {
        content: "Name";
    }

    td:nth-child(3)::before {
        content: "Gender";
    }

    td:nth-child(4)::before {
        content: "Email";
    }

    td:nth-child(5)::before {
        content: "Address";
    }

    td:nth-child(6)::before {
        content: "Reg-No.";
    }

    td:nth-child(7)::before {
        content: "Action";
    }

    td {
        text-align: right;
    }

    td::before {
        float: left;
        margin-right: 3rem;
        font-weight: bold;
    }
}