@import url('https://fonts.googleapis.com/css2?family=A xrimo:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Raleway:ital,wght@0,400;0,500;0,600;1,700&family=Roboto+Slab:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&family=Rubik:wght@400;500;600&display=swap');

:root {
    --table-head-bg: #f1f6fa;
    --bg-dark: #000
}
html,*{
    font-family: 'Poppins', sans-serif;
}

body {
    display: block;
    margin: 0px;
    font-family: 'Poppins', sans-serif;
}

.userDetailsContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */
    /* padding: 20px; */
width:300px
}

.top-bar {
    background-color: #333;
    color: white;
    padding: 10px 0;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1111;
}


.top-bar a {
    color: white;
    text-decoration: none;
    margin-left: 10px;
}


.top-bar span {
    margin-right: 10px;
    float: right
}

.bottom-bar {
    align-items: center;
    padding: 10px 0;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: #333;
    color: #fff;
}

.content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.content-top {
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    /* margin-top: 50px; */
    margin-top: 40px;
    /* height: 100vh; */
    overflow: hidden;
}

.button {
    display: block;
    width: 200px;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}


/* table css */
.simple-table {
    width: 100%;
    text-align: left;
    font-size: 0.875rem;
    /* equivalent to text-sm */
    color: #4A5568;
    /* equivalent to text-gray-500 */
    border-radius: 8px;
    /* This is to give the table rounded corners */
    overflow: hidden;
    /* This is to make sure inner elements respect the rounded corners */
}

.simple-table>tbody>tr>td>button {
    background: #fff;
    color: #0d6efd;
    border: none;
}

.simple-table>tbody>tr>td>button:hover {
    background: none;
    color: #000
}

.simple-table>thead {
    font-size: 0.75rem;
    /* equivalent to text-xs */
    text-transform: uppercase;
    color: #4A5568;
    /* equivalent to text-gray-700 */
    background-color: var(--table-head-bg);
    /* equivalent to bg-gray-50 */
    border-radius: 10px;

}

.simple-table>thead th {
    font-weight: 700 !important;
}

.simple-table>thead th,
.simple-table>tbody tr td {
    padding: 0.30rem 1.5rem;
    /* equivalent to px-6 py-3 */
    white-space: nowrap;
    font-weight: 500;
    /* equivalent to font-medium */
    border-bottom: 1px solid var(--table-head-bg);
}

.simple-table>tbody tr {
    background-color: #FFFFFF;
    /* equivalent to bg-white */
    border-color: #E2E8F0;
    /* equivalent to border-gray-300 */
    transition: background-color 0.3s ease;
}

.simple-table>tbody tr:hover {
    background-color: #f9fafb;
    /* equivalent to hover:bg-gray-50 */
}

.simple-table>tbody tr:last-child td {
    border-bottom: none;
}