:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #bcd5b1;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #ffd2d4;
    --light: #f8f9fa;
    --dark: #343a40;
}

.tabulator {
    border: 1px solid #dee2e6;
}
.tabulator .tabulator-header .tabulator-col,
.tabulator-row .tabulator-cell {
    border-color: #dee2e6;
}

.fa-spinner.fa-spin {
    display: block;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
}

.table-per-page {
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
}

.table-per-page select.form-control {
    width: 4rem;
    margin: 0 0.125rem;
}

.table-header {
    margin: auto;
}

.green-text {
    color: #54ae54;
}

.sidebar .submenu .nav-icon {
    vertical-align: middle;
}

.ace-toaster-container {
    display: block;
}

span.tag {
    padding: 10px;
    border-radius: 5px;
}

span.tag span {
    line-height: 0;
    display: flex;
    align-items: center;
}

.tabulator {
    max-width: calc(100vw - 20rem);
}

.tabulator-row.info {
    background-color: var(--info) !important;
}

.tabulator-row.success {
    background-color: var(--success) !important;
}

.tabulator-row.danger {
    background-color: var(--danger) !important;
}

.tabulator-row.warning {
    background-color: var(--warning) !important;
}

.tabulator-cell.info {
    background-color: var(--info) !important;
}

.tabulator-cell.success {
    background-color: var(--success) !important;
}

.tabulator-cell.danger {
    background-color: var(--danger) !important;
}

.tabulator-cell.warning {
    background-color: var(--warning) !important;
}

/* Table scroll */
.table-scroll {
    position: relative;
    width:100%;
    z-index: 1;
    margin: 0;
    overflow: auto;
    height: 35rem;
}
.table-scroll table {
    width: 100%;
    min-width: 80rem;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
}
.table-scroll th,
.table-scroll td {
    padding: 0.625rem 1rem;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    vertical-align: middle;
    font-weight: 400;
}
.table-scroll th {
    background: #e9ecef;
    color: #495057;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.table-scroll th:first-child,
.table-scroll th:nth-child(2) {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f5f6f8;
}
.table-scroll th:nth-child(2) {
    min-width: 12rem;
}
.table-scroll thead th:first-child,
.table-scroll thead th:nth-child(2) {
    background: #e9ecef;
    font-weight: 600;
}
.table-scroll thead th {
    font-weight: 600;
}
/* safari and ios need the tfoot itself to be position:sticky also */
.table-scroll tfoot,
.table-scroll tfoot th,
.table-scroll tfoot td {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    padding: 1rem 1rem;
    background: #e6f3e6;
    color: #609d40;
    font-weight: 600;
    z-index:4;
}
.table-scroll tfoot th:first-child,
.table-scroll tfoot th:nth-child(2) {
    background: #e6f3e6;
}
.table-scroll thead th:first-child,
.table-scroll tfoot th:first-child,
.table-scroll thead th:nth-child(2),
.table-scroll tfoot th:nth-child(2) {
    z-index: 5;
}

@media (min-width: 1200px) {
    .table-scroll {
        max-width: calc(100vw - 19rem);
    }
}
@media (min-width: 1500px) and (min-height: 900px) {
    .table-scroll {
     height: 50rem;   
    }
}