:root {
    --text-color: rgba(34,42,66,.7);
    --success-text: #0d6832;
    --primary-text: #273e63;
    --warning-text: #73510d;
    --danger-text: #A61001;
    --success-bg: #d6f0e0;
    --primary-bg: #dfe7f6;
    --warning-bg: #fbf0da;
    --danger-bg: #FFEBE9;
    --primary-btn-text: #3b71ca;
}

.poppins-with-open-sans {
    /*  color:var(--text-color); */
    font-family: 'Open Sans', sans-serif;
    font-family: 'Poppins', sans-serif;
}

.main {
    background-color: #f5f6f8bb !important;
    height: 100vh;
}

.text-primary {
    color: var(--primary-btn-text) !important;
}

.fw-bold {
    font-weight: 500 !important;
}

h2 {
    font-weight: 400;
    margin-bottom: unset;
}

.action-icon {
    font-size: 1.08rem;
}



.table-badge-success {
    color: var(--success-text) !important;
    background-color: var(--success-bg);
    border: 1px solid;
}

.table-badge-primary {
    color: var(--primary-text) !important;
    background-color: var(--primary-bg);
    border: 1px solid;
}

.table-badge-warning {
    color: var(--warning-text) !important;
    background-color: var(--warning-bg);
    border: 1px solid;
}

.table-badge-danger {
    color: var(--danger-text) !important;
    background-color: var(--danger-bg);
    border: 1px solid;
}

.time {
    font-size: .75rem;
}


.table-container {
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 25%), 0px 2px 6px 2px rgb(60 64 67 / 10%);
    padding: 1rem;
    border-radius: 12px;
    background-color: white;
}


th {
    padding: 1rem .5rem !important;
    font-size: .875rem;
    margin-bottom: 1rem !important;
    background-color: white !important;
    color: var(--text-color) !important;
    font-weight: 600 !important;
}

    th:last-child {
        border-top-right-radius: 12px;
    }

    th:first-child {
        border-top-left-radius: 12px;
    }

/* //Removes border from last table row */

tr td:last-child {
    text-align: right;
}


/* Changing TH bottom border color*/
.table > :not(:last-child) > :last-child > * {
    border-bottom-color: rgba(128, 128, 128, 0.277) !important;
}

ul {
    margin-bottom: 0rem !important;
}

.avatar-span {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    object-fit: fill;
    background-image: url("https://st4.depositphotos.com/14903220/22197/v/450/depositphotos_221970610-stock-illustration-abstract-sign-avatar-icon-profile.jpg");
}

/* table styling end*/

/*  button styling */
.btn-link {
    font-weight: 500;
    color: var(--primary-text);
    /* border:1px solid #2c58a094 !important; */
    border-radius: 8px;
    text-decoration: underline 0.1em rgb(255, 255, 255) !important;
    text-underline-offset: 0.2em !important;
    transition: text-decoration-color 300ms, text-underline-offset 300ms !important;
}

    .btn-link:hover {
        text-decoration-color: #0d6efd !important;
        text-underline-offset: 0.4em !important;
    }

.logout-btn {
    text-decoration: none;
    font-size: 1rem;
}

.page-link {
    border: unset !important;
    color: var(--primary-btn-text)
}


.realtime-user-table td {
    font-size: 0.85em;
    vertical-align: middle;
}

    .realtime-user-table td.page-or-date {
        margin-top: 0 !important;
    }

    .realtime-user-table td:not(.page-or-date) {
        margin-top: 5px;
    }

.general-back-btn {
    transition: opacity 0.3s ease;
}

.btn-message-circle:hover {
    opacity: 0.7;
}

.btn-slash:hover {
    opacity: 0.7;
}