body {
    background: #F7F7F7;
}

.bgDark {
    background: rgb( 33, 41, 66 )
}

.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #dfdeee !important;
}

@media (min-width: 576px) {
    .navbar-expand-sm .navbar-nav .nav-link {
        padding-right: .8rem;
        padding-left: .8rem;
    }
}

.footer {
    color: rgb( 33, 41, 66 ) !important
}

h4 {
    color: rgb( 33, 41, 66 )
}

.navbar-brand {
    color: #dfdeee !important
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid #b3b3b3;
    border-radius: 10px;
    height: auto;
    max-height: calc(100vh - 200px);
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #f2f2f2
}

th {
    background-color: #04AA6D;
    color: steelblue;
}

.table {
    width: 100%;
    -webkit-box-shadow: 0px 5px 12px -12px rgba(0, 0, 0, 0.29);
    -moz-box-shadow: 0px 5px 12px -12px rgba(0, 0, 0, 0.29);
    box-shadow: 0px 5px 12px -12px rgba(0, 0, 0, 0.29);
}

    .table thead th {
        border: none;
        padding: 10px;
        font-size: 13px;
        font-weight: 500;
        color: gray;
    }

    .table thead tr {
        background: #fff;
        border-bottom: 4px solid #eceffa;
    }

    .table tbody tr {
        margin-bottom: 10px;
        border-bottom: 4px solid #f8f9fd;
    }

        .table tbody tr:last-child {
            border-bottom: 0;
        }

    .table tbody th, .table tbody td {
        border: none;
        padding: 10px;
        font-size: 14px;
        background: #fff;
        vertical-align: middle;
    }

        .table tbody td.status span {
            position: relative;
            border-radius: 30px;
            padding: 4px 10px 4px 25px;
        }

            .table tbody td.status span:after {
                position: absolute;
                top: 9px;
                left: 10px;
                width: 10px;
                height: 10px;
                content: '';
                border-radius: 50%;
            }

        .table tbody td.status .active {
            background: #cff6dd;
            color: #1fa750;
        }

            .table tbody td.status .active:after {
                background: #23bd5a;
            }

        .table tbody td.status .waiting {
            background: #fdf5dd;
            color: #cfa00c;
        }

            .table tbody td.status .waiting:after {
                background: #f2be1d;
            }

        .table tbody td .img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .table tbody td .email span {
            display: block;
        }

            .table tbody td .email span:last-child {
                font-size: 12px;
                color: rgba(0, 0, 0, 0.3);
            }

        .table tbody td .close span {
            font-size: 12px;
            color: #dc3545;
        }


/* button styling*/
.btnInfo, .btnInfo:active, .btnInfo:focus, .btnInfo:hover {
    background: #e7ddfd;
    color: #230ccf;
    text-wrap: nowrap;
    box-shadow: none;
    outline: 0
}

.btnSuccess, .btnSuccess:active, .btnSuccess:focus, .btnSuccess:hover {
    background: #cff6dd;
    color: #1fa750;
    text-wrap: nowrap;
}

.btnWaring, .btnWaring:active, .btnWaring:focus, .btnWaring:hover {
    background: #fdf5dd;
    color: #cfa00c;
    text-wrap: nowrap;
}

.exportToExcel {
    float: right
}

.flexBtn {
    display: flex;
    justify-content: right;
    gap: 10px;
}