.table-container {
    margin-top: 5em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
}

.card {
    width: 90%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: var(--theme-color);
}

.pagination > li > a, .pagination > li > span {
    color: var(--theme-color);
}

.view-btn {
    cursor: pointer;
    width: 1.8em;
    transition: all 1s;
}

    .view-btn:hover {
        transform: scale(.9) !important;
    }

.table {
    /*width: 100%;*/
    border-collapse: collapse;
}

    .table td, .table th {
        border: .9px solid var(--theme-color);
        text-align: center;
        font-size: 1em;
        font-family: var(--Poppins);
        color: var(--theme-color);
    }

    .table th {
        background-color: var(--theme-color);
        color: #ffffff;
    }

   /* .table tbody tr:nth-child(even) {
        background-color: #f5f5f5;
    }*/

/*responsive*/

@media(max-width: 500px) {
    .table thead {
        display: none;
    }

    .table, .table tbody, .table tr, .table td {
        display: block;
        /*width: 100%;*/
    }

        .table tr {
            margin-bottom: 15px;
        }

        .table td {
            text-align: right;
            padding-left: 50%;
            text-align: right;
            position: relative;
            font-family: var(--Poppins);
            color: var(--theme-color);
            font-size: 1em;
        }

            .table td::before {
                content: attr(data-label);
                position: absolute;
                left: 0;
                width: 50%;
                padding-left: 7px;
                font-size: 1em;
                text-align: left;
                font-family: var(--Poppins);
                color: var(--theme-color);
            }
}