/*------------------------------------*\
    
    WebFX Ninja Tables Customizations - Global Styling for Responsive Tables

    Add custom Ninka tables styling to this file if it should be applied to all Ninja tables on the site
    Otherwise, put your styles in individual block stylesheets

\*------------------------------------*/


.footable_parent {
    @supports not (selector(::-webkit-scrollbar-thumb)) {
        scrollbar-color: var(--blue) #fff;
        scrollbar-width: thin;
    }
}


.footable_parent::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.footable_parent::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 10px;
}

.footable_parent::-webkit-scrollbar-thumb {
    background-color: var(--blue);
    border-radius: 10px;
}

.semantic_ui .ui.table,
.foo-table {
    border: 0 !important;
    border-collapse: collapse;
    font-family: "DM Sans", sans-serif; 
    background: var(--bright-blue);
    width: 100%;
    border-radius: 8px !important;
    color: #4F5052;
    min-width: 700px;
    overflow: hidden;
}

.foo-table tbody tr td {
    border-left: 0 !important;
}

.semantic_ui .ui.table tr td {
    border-top: 0 !important;
}

.foo-table thead th,
.ninja_table_wrapper.semantic_ui .ui.table thead th {
    background: var(--dark-blue) !important;
    border: 0 !important;
    color: #FFFFFF !important;
}

.bg-dark-blue .foo-table thead th,
.bg-dark-blue .ninja_table_wrapper.semantic_ui .ui.table thead th {
    background: var(--darkest-blue) !important;
}

.foo-table thead tr.footable-filtering th,
.ninja_table_wrapper.semantic_ui .ui.table thead tr.footable-filtering th {
    background: var(--motive) !important;
    border: 0 !important;
}

.foo-table thead tr.footable-header th,
.ninja_table_wrapper.semantic_ui .ui.table thead tr.footable-header th {
    padding: 8px 12px;
    text-align: left;
    font-size: 24px;
    line-height: 1.5em;
    font-weight: 400;
    border: none;
    vertical-align: middle;
    font-family: "Petrona", serif;
}


.ninja_table_wrapper .foo-table .form-group.footable-filtering-search .input-group-btn > button:after {
    display: none;
}

.footable .btn-primary {
    background: var(--dark-blue) !important;
    border: 0 !important;
}

.footable .btn-primary span {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1em;
}

.bg-dark-blue .footable .btn-primary {
    background: var(--darkest-blue) !important;
}

.foo-table tbody tr td {
    background: var(--bright-blue) !important;
}

.foo-table tbody tr:nth-child(even) td {
    background: #DAE5E8 !important;
}

.input-group-btn li:before {
    display: none;
}