:root
{
    --datagrid-noresults-placeholder-bg: var(--gray-100);
    --datagrid-hidden-results-gradient-bg: var(--gray-50);
    --table-thead-color: var(--gray-800);
    --table-cell-color: var(--gray-600);
    --table-thead-marker-color: var(--gray-400);
    --table-cell-border-color: var(--bs-gray-200);
    --table-hover-cell-bg: var(--gray-50);
    --table-selected-cell-bg: var(--indigo-50);
    --table-thead-sorted-color: var(--gray-900);
    --table-thead-sorted-marker-color: var(--color-primary);
    --datalist-border-color: var(--gray-200);
    --datalist-label-color: var(--gray-500);
    --datalist-value-color: var(--gray-600);
    --pagination-color: var(--gray-600);
    --pagination-hover-border-color: var(--gray-300);
    --pagination-disabled-color: var(--gray-400);
    --pagination-active-bg: var(--color-primary);
    --pagination-active-color: var(--white);
}
table.datagrid {
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--table-cell-color);
    margin-bottom: 0;
    width: 100%
}

@media (max-width: 767px) {
    table.datagrid:not(.datagrid-empty) tbody,table.datagrid:not(.datagrid-empty) td,table.datagrid:not(.datagrid-empty) tr {
        display:block
    }

    table.datagrid:not(.datagrid-empty) tbody,table.datagrid:not(.datagrid-empty) tr {
        border-radius: var(--border-radius)
    }

    table.datagrid:not(.datagrid-empty) tbody tr td:first-of-type {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius)
    }

    table.datagrid:not(.datagrid-empty) tbody tr td:last-of-type {
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius)
    }

    table.datagrid:not(.datagrid-empty) thead {
        display: none
    }

    table.datagrid:not(.datagrid-empty) tr {
        border: 1px solid var(--responsive-table-row-border-color);
        margin-bottom: 30px
    }

    table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td {
        box-shadow: inset 0 1px 0 var(--table-cell-border-color);
        padding-left: 35%;
        position: relative
    }

    table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td:first-child {
        box-shadow: none
    }

    table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.batch-actions-selector {
        padding: 8px
    }

    table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.batch-actions-selector:before {
        display: none
    }

    table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions,table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions.actions-as-dropdown {
        padding: 8px
    }

    table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions.actions-as-dropdown:before,table.datagrid:not(.datagrid-empty) tr:not(.empty-row) td.actions:before {
        display: none
    }

    table.datagrid:not(.datagrid-empty) td {
        text-align: left!important
    }

    table.datagrid:not(.datagrid-empty) td:before {
        bottom: 0;
        color: var(--responsive-table-label-color);
        content: attr(data-label);
        font-weight: 500;
        left: 0;
        overflow: hidden;
        padding: 8px;
        position: absolute;
        text-align: left;
        text-overflow: ellipsis;
        top: 0;
        white-space: nowrap;
        width: 35%
    }

    table.datagrid:not(.datagrid-empty) td.field-boolean {
        padding-left: 8px
    }

    table.datagrid:not(.datagrid-empty) td.field-boolean:before {
        color: var(--table-cell-color);
        font-weight: 400;
        left: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

.datagrid thead th {
    border: 0;
    box-shadow: inset 0 -2px 0 var(--table-cell-border-color);
    padding: 0
}

.datagrid thead a,.datagrid thead span {
    color: var(--table-thead-color);
    display: block;
    font-weight: 500;
    line-height: 1.357;
    padding: 12px 8px;
    white-space: nowrap
}

.datagrid td {
    box-shadow: inset 0 1px 0 var(--table-cell-border-color);
    line-height: 20px;
    padding: 8px
}

.datagrid tbody {
    box-shadow: 0 1px 0 var(--table-cell-border-color)
}

@media (min-width: 992px) {
    .datagrid thead+tbody tr:first-child td {
        box-shadow:none
    }
}

.datagrid td.field-avatar {
    padding: 4px 8px
}

.datagrid thead .sorted a,.datagrid thead .sorted span {
    font-weight: 700
}

.datagrid thead i {
    color: var(--table-thead-marker-color);
    margin-left: 2px
}

.datagrid thead .sorted {
    box-shadow: inset 0 -2px 0 var(--color-primary)
}

.datagrid thead .sorted a,.datagrid thead .sorted span {
    color: var(--table-thead-sorted-color)
}

.datagrid thead .sorted i {
    color: var(--table-thead-sorted-marker-color)
}

.datagrid td,.datagrid th {
    border: none;
    vertical-align: middle
}

@media (min-width: 992px) {
    .datagrid tbody tr:hover td,.datagrid tbody tr:hover th {
        background:var(--table-hover-cell-bg)
    }
}

.datagrid tbody tr.selected-row td {
    background: var(--table-selected-cell-bg)
}

.datagrid tbody tr.selected-row td ::-moz-selection {
    background: transparent
}

.datagrid td.actions {
    text-align: right
}

.datagrid td.actions a:not(.dropdown-item) {
    font-size: var(--font-size-sm);
    font-weight: 500
}

.datagrid td.actions a:not(.dropdown-item)+a:not(.dropdown-item) {
    margin-left: 10px
}

.datagrid td.actions a:not(.dropdown-item) .action-icon {
    font-size: var(--font-size-base);
    margin-right: 2px
}

@media (min-width: 992px) {
    .datagrid td.actions-as-dropdown {
        padding:2px 8px
    }
}

.datagrid td.actions-as-dropdown-table-head {
    width: 10px
}

.datagrid tr:not(.selected-row):hover .dropdown-toggle {
    background: var(--dropdown-toggle-bg);
    border-color: var(--dropdown-toggle-border-color)
}

.datagrid tr:hover .dropdown-toggle:hover {
    border-color: var(--dropdown-toggle-hover-border-color)
}

.datagrid .dropdown-toggle.show,.datagrid .dropdown-toggle:active,.datagrid .dropdown-toggle:active:focus,.datagrid .dropdown-toggle:focus,.datagrid tr .dropdown-toggle.show,.datagrid tr:hover .dropdown-toggle.show,.datagrid tr:hover .dropdown-toggle:active,.datagrid tr:hover .dropdown-toggle:active:focus,.datagrid tr:hover .dropdown-toggle:focus {
    border-color: var(--dropdown-toggle-hover-border-color);
    box-shadow: var(--button-active-shadow);
    outline: none
}

.datagrid .dropdown-actions .dropdown-toggle {
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    color: var(--dropdown-toggle-color);
    padding: 3px 5px
}

.datagrid .dropdown-actions .dropdown-toggle:after {
    display: none
}

.datagrid .dropdown-actions .dropdown-toggle:hover {
    cursor: pointer
}

.datagrid .dropdown-actions .dropdown-toggle svg {
    vertical-align: top
}

.datagrid .dropdown-actions .dropdown-menu {
    z-index: var(--zindex-900)
}

.datagrid .ea-lightbox-thumbnail img {
    background: var(--white);
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    max-height: 50px;
    max-width: 100px;
    padding: 2px 4px
}

.datagrid tr:hover .ea-lightbox-thumbnail img {
    border-color: var(--border-color)
}

.datagrid .mark,.datagrid mark {
    background: var(--highlight-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 0 rgba(250,204,21,.4);
    color: inherit;
    padding: 0 1px
}

.datagrid .field-boolean,.datagrid .header-for-field-boolean {
    text-align: center
}

.datagrid .field-boolean.has-switch {
    padding: 6px 8px
}

.datagrid .field-boolean .form-switch {
    display: inline-flex;
    justify-content: center;
    margin-bottom: 0;
    padding-left: 0
}

.datagrid .field-boolean .form-switch input {
    margin-top: 0;
    position: relative;
    top: 3px
}

@media (max-width: 992px) {
    .datagrid .field-country {
        text-align:left!important
    }
}

.datagrid .form-check {
    margin-bottom: 0;
    min-height: 15px;
    padding-left: 0
}

.datagrid .no-results td {
    font-size: var(--font-size-lg);
    padding: 24px 0;
    text-align: center
}

.datagrid .empty-row:hover td,.datagrid .no-results:hover td {
    background: transparent
}

.datagrid .empty-row td {
    padding: 0 10px
}

.datagrid .empty-row td:first-child {
    width: 20%
}

.datagrid .empty-row td:nth-child(2) {
    display: none
}

@media (min-width: 992px) {
    .datagrid .empty-row td:nth-child(2) {
        width:5%
    }
}

.datagrid .empty-row td:nth-child(3) {
    width: 10%
}

.datagrid .empty-row td:nth-child(4) {
    width: 25%
}

.datagrid .empty-row td:nth-child(5) {
    width: 10%
}

.datagrid .empty-row td:nth-child(6) {
    width: 30%
}

.datagrid .empty-row td span {
    background: var(--datagrid-noresults-placeholder-bg);
    border-radius: var(--border-radius);
    display: block;
    height: 10px;
    margin: 13px 0;
    width: 100%
}

.datagrid tbody .datagrid-row-empty:hover td,.datagrid-row-empty td {
    background-color: transparent;
    background-image: linear-gradient(135deg,var(--datagrid-hidden-results-gradient-bg) 25%,transparent 25%,transparent 50%,var(--datagrid-hidden-results-gradient-bg) 50%,var(--datagrid-hidden-results-gradient-bg) 75%,transparent 75%,transparent 100%);
    background-size: 40px 40px;
    padding-bottom: 15px;
    padding-top: 15px
}

.datagrid-row-empty-message {
    background: var(--body-bg);
    border-radius: var(--border-radius);
    padding: 2px 4px
}

.datagrid-header-tools {
    display: flex;
    padding: 0 0 10px
}

.datagrid-header-tools .datagrid-search {
    flex: 1;
    margin-right: 15px;
    max-width: 480px
}

.datagrid-header-tools .datagrid-search .form-group,.datagrid-header-tools .datagrid-search .form-group .form-widget {
    flex: 1;
    margin: 0;
    padding: 0
}

.datagrid-header-tools .datagrid-search input[type=search].form-control {
    background-color: var(--white);
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="%23aaa" d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z"/></svg>');
    background-position: 10px 8px;
    background-repeat: no-repeat;
    background-size: 13px 13px;
    min-width: 100%;
    padding: 0 32px
}

.datagrid-header-tools .datagrid-search .form-widget {
    position: relative
}

.datagrid-header-tools .datagrid-search a.action-search-reset {
    color: var(--gray-500);
    padding: 4px 7px;
    position: absolute;
    right: 1px;
    text-decoration: none;
    top: 1px
}

.datagrid-header-tools .datagrid-search a.action-search-reset:hover {
    color: var(--gray-700)
}