.sds-datatable-container {
    box-shadow: 0px 0px 1px 0px rgba(2, 3, 3, 0.25), 0px 2px 1px 0px rgba(2, 3, 3, 0.05);
    border-radius: 6px;
    background: var(--sds-grey-000);
    height: 100%;
}

.sds-datatable {
    font-family: var(--sds-font-family) !important;
}

.sds-datatable .dx-toolbar-items-container {
    height: 76px;
}

.sds-datatable-toolbar-background {
    border-bottom: 1px solid var(--sds-grey-400, #DEE4E4);
    background: var(--sds-primary-100, #E5F1F2);
}

.sds-datatable-selection-count {
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    color: var(--sds-primary-500, #0B9294);
}

.sds-toolbar-btn-font {
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    color: var(--sds-grey-900, #020303);
}

.sds-datatable .datatable-search-container {
    border: 1px solid var(--sds-grey);
    border-radius: 6px !important;
    max-width: 360px !important;
    min-width: 204px !important;
    height: 32px !important;
    padding: 6px 12px !important;
    display: flex;
}

.sds-datatable .datatable-search-container.full {
    width: 20vw !important;
}

.sds-datatable .datatable-search-container input {
    border: none;
}

.sds-datatable .dx-datagrid-header-panel .dx-toolbar {
    margin: 0px !important;
}

.sds-datatable .dx-toolbar .dx-toolbar-items-container .dx-toolbar-before,
.sds-datatable .dx-toolbar .dx-toolbar-items-container .dx-toolbar-after {
    padding: 16px;
}

.sds-datatable .datatable-title {
    color: var(--sds-grey-900);
    /* B3/Medium */
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 150% */
}

.sds-datatable .datatable-subtitle {
    color: var(--sds-grey-600);
    /* B5/Regular */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    /* 150% */
}

.sds-datatable .datatable-btn {
    padding: 6px 12px;
    align-items: center;
    border-radius: 6px;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    /* 150% */
}

.sds-datatable .datatable-btn-secondary,
.sds-datatable .datatable-btn-ticket {
    border: 1px solid var(--sds-grey);
    background: var(--sds-grey-000);
    color: var(--sds-grey-900);
}

.sds-datatable .datatable-btn-secondary:hover,
.sds-datatable .datatable-btn-ticket:hover {
    background: var(--sds-grey-200);
}

.sds-datatable .datatable-btn-primary {
    border: 1px solid var(--sds-primary);
    background: var(--sds-primary);
    color: white;
}

.sds-datatable .datatable-btn-primary:hover {
    background: var(--sds-primary-600);
}

.sds-datatable .dx-header-row {
    background: var(--sds-grey-200);
    height: 52px;
    border-bottom: 0px;
}

.sds-datatable .dx-datagrid .dx-datagrid-headers .dx-header-filter,
.dx-datagrid .dx-datagrid-headers .dx-header-row>td {
    padding: 9px 16px;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid var(--sds-grey-400, #DEE4E4);
    background: var(--sds-grey-200, #F8F9FA);
    color: var(--sds-grey-700, #5A6161);
    /* B4/Medium */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    /* 142.857% */
    vertical-align: middle;
}

.sds-datatable tr.dx-row.dx-data-row {
    height: 72px;
    border-bottom: 1px solid var(--sds-grey-400, #DEE4E4);
}

.sds-datatable tr.dx-row.dx-data-row td {
    color: #000;
    padding: 10px 16px;
    overflow: clip;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    cursor: pointer;
    /* 142.857% */
}

.sds-datatable tr.dx-row.dx-data-row td .dx-datagrid-search-text {
    background-color: var(--sds-primary-600);
}

.sds-datatable .dx-datagrid-rowsview .dx-select-checkboxes-hidden>tbody>tr>td>.dx-select-checkbox {
    display: inline-block !important;
}


.sds-datatable .dx-datagrid-content .dx-datagrid-table .dx-row>td,
.dx-datagrid-content .dx-datagrid-table .dx-row>tr>td {
    vertical-align: middle !important;
}

.sds-datatable .dx-datagrid-checkbox-size .dx-checkbox-icon {
    padding: 1px !important;
    height: 18px;
    width: 18px;
    border-radius: 4px;
    border: 1px solid var(--sds-grey, #B6BFBF);
    background: var(--sds-grey-000, #FFF);
}

.sds-datatable .dx-datagrid-pager.dx-pager {
    padding: 0;
}

.sds-datatable .dx-pager .dx-pages:not(:empty) {
    float: unset;
    display: flex;
    justify-content: space-between;
    height: 64px;
    padding: 16px;
}

.sds-datatable .dx-pager .dx-pages .dx-info {
    color: var(--sds-grey-800, #2D3232);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    padding: 3px;
    opacity: 1;
}

.sds-datatable .datatable-title-container .itemCount {
    border-radius: 10px;
    background: var(--sds-grey-300, #F0F4F4);
    color: var(--sds-grey-800, #2D3232);
    /* B5/Medium */
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    /* 150% */
    display: inline-block;
    height: 20px;
    padding: 1px 8px;
    align-items: center;
}

.sds-datatable .dx-pager .dx-pages .dx-navigate-button {
    height: 18px !important;
    padding: 6px 12px !important;
    justify-content: center;
    align-items: center;
    width: unset;
    padding: 0px;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    /* 150% */
    border: 1px solid var(--sds-grey, #B6BFBF);
    background: var(--sds-grey-000, #FFF);
    font-family: 'Inter';
}

.sds-datatable .dx-navigate-button.dx-prev-button {
    border-radius: 6px 0px 0px 6px;
}

.sds-datatable .dx-navigate-button.dx-prev-button.dx-button-disable {
    border-right: 1px solid black;
}

.sds-datatable .dx-navigate-button.dx-prev-button svg {
    margin-top: -2px;
}

.sds-datatable .dx-navigate-button.dx-next-button {
    border-radius: 0px 6px 6px 0px;
    border-left: 0px;
}

.sds-datatable .dx-navigate-button.dx-next-button svg {
    margin-top: -2px;
}

.sds-datatable .dx-pager .dx-pages .dx-page,
.sds-datatable .dx-pager .dx-pages .dx-separator {
    height: 32px;
    min-width: 32px;
    padding: 4px 12px 6px 12px;
    margin: 0px !important;
    justify-content: center;
    align-items: center;
    border: 0.1px solid var(--sds-grey, #B6BFBF);
    border-left: 0px;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    /* 142.857% */
}

.sds-datatable .dx-pager .dx-pages .dx-page .dx-selection {
    background: var(--sds-grey-300, #F0F4F4);
}

.sds-datatable .dx-pager .dx-pages .dx-next-button::before,
.sds-datatable .dx-pager .dx-pages .dx-prev-button::before {
    content: '' !important;
}

.sds-datatable .dx-scrollable-scroll-content {
    background: var(--sds-primary);
}

.sds-datatable .dx-light-pages {
    margin: 0px 15px;
}

.sds-datatable .dx-pager.dx-light-mode .dx-page-index {
    height: 32px;
}

.sds-datatable .dx-widget.dx-datagrid-pager.dx-pager.dx-light-mode .dx-pages {
    text-align: center
}

.sds-datatable .dx-column-indicators {
    /*float: left;*/
    /*padding: 10px 5px;*/
}

.sds-datatable .dx-column-indicators .dx-sort {
    padding: 10px 5px;
}

.sds-datatable .dx-datagrid .dx-column-indicators .dx-sort-index-icon {
    display: none;
}

.sds-datatable .dx-datagrid-text-content {
    padding: 10px 0px;
}

.sds-datatable .dx-datagrid .dx-datagrid-headers .dx-header-filter,
.dx-datagrid .dx-datagrid-headers .dx-header-row>td {
    border: 0px;
    padding: 10px 5px;
}

.sds-datatable .dx-scrollbar-hoverable.dx-scrollable-scrollbar-active .dx-scrollable-scroll-content {
    background: var(--sds-primary-400);
}

.sds-datatable .row-options-btn .dx-dropdownbutton-action {
    border: 0px;
}

.sds-datatable .row-options-btn .dx-button-content {
    background-color: transparent;
    padding: 10px !important;
}

.sds-datatable .row-options-btn .dx-icon-spindown {
    background: url(../../Assets/Images/icons/option-btn.svg);
    width: 20px;
    height: 20px;
}

.sds-datatable .row-options-btn .dx-icon-spindown::before {
    content: '' !important;
}

.row-options-btn-dropdown-content .dx-list-item {
    height: 32px;
    padding: 5px;
    font-size: 14px;

}

.row-options-btn-dropdown-content .dx-dropdownbutton-content {
    padding: 12px 0 !important;
}

.row-options-btn-dropdown-content .dx-list-item:hover {
    background: var(--sds-primary-100);
    box-shadow: 3px 0px 0px 0px var(--sds-primary-500) inset;
}

.row-options-btn-dropdown-content .dx-list-item-icon-container {
    margin-right: 5px;
}

.row-options-btn-dropdown-content .dx-list-item-icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 5px;
}

.sds-datatable-spinner-container {
    position: absolute;
    top: 45%;
    left: 45%;
    z-index: 10;
}

.sds-datatable .dx-header-row td[role="columnheader"].dx-datagrid-action:first-child {
    padding-left: 20px;
}

.sds-datatable .dx-datagrid-rowsview .dx-data-row .dx-cell-modified.dx-cell-modified::after {
    border-color: transparent;
}

.sds-datatable .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused)>td {
    background-color: transparent;
}

.sds-datatable .dx-checkbox.dx-checkbox-checked .dx-checkbox-icon,
.sds-datatable .dx-checkbox.dx-checkbox-indeterminate .dx-checkbox-icon {
    background: var(--primary-500, #0B9294);
    color: white;
}

.sds-datatable .dx-checkbox.dx-checkbox-indeterminate .dx-checkbox-icon::before {
    background-color: white;
}

@media(max-width:800px) {
    .sds-datatable .dx-toolbar .dx-toolbar-items-container {
        height: unset !important;
    }

    .sds-datatable .dx-toolbar-before {
        float: unset;
        display: block;
    }

    .sds-datatable .dx-toolbar-after {
        display: block;
        padding-top: 0px !important;
    }

    .sds-datatable .dx-toolbar-after,
    .dx-toolbar-before {
        position: relative;
    }

    .datatable-btn {
        padding: 6px 8px;
    }
}

.sds-datatable .dx-buttongroup-item.dx-button.dx-button-mode-outlined.dx-state-focused,
.sds-datatable .dx-buttongroup-item.dx-button.dx-button-mode-outlined.dx-state-hover {
    background: none;
}

.filterDataTable {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-right: 0.75rem;
}

.datatable-filter {
    display: flex;
    height: 2rem;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.375rem !important;
    border: 1px solid var(--Grey-500, #B6BFBF) !important;
    background: var(--Grey-000, #FFF) !important;
    /* width: 13vw !important; */
    max-width: 360px !important;
    min-width: 204px !important;
    width: 15vw !important;
    color: var(--Grey-900, #020303);
    font-family: Inter;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    padding: 0
}

.datatable-filter .dx-placeholder {
    color: var(--Grey-900, #020303);
    font-family: Inter;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
}

.datatable-filter .dx-selectbox-container {
    width: 100%;
}

.domain-filter {
    margin-right: 6px;
}

.datatableFilterDropdown .dx-popup-content {
    padding: 1px !important;
}

.datatableFilterDropdown .dx-list-item-selected {
    background: var(--Primary-100, #E5F1F2) !important;
    box-shadow: 3px 0px 0px 0px #009F9B inset;
    color: var(--sds-primary-500) !important;
}

.datatableFilterDropdown .dx-list-item-selected .dx-list-item-content {
    color: var(--sds-primary-500) !important;

}

.datatableFilterDropdown .dx-item-content.dx-list-item-content {
    padding: 9px 16px !important;
}

.datatableFilterDropdown .dx-list-item .dx-item-content {
    padding: 9px 16px !important;
    font-size: 14px;
}

.dx-dropdowneditor-overlay.dx-overlay.dx-popup.dx-widget.dx-visibility-change-handler.dx-selectbox-popup {
    display: none;
}


/* start reorder datagrid rows */
.sds-datatable .dx-datagrid-table td.dx-command-drag {
    text-overflow: clip;
}

.custom-clone-from-sds-datatable-rowDragging.dx-sortable-clone.dx-sortable-dragging .dx-datagrid-table td.dx-command-select~td>.row-options-btn .dx-dropdownbutton-action {
    border: 0px;
}

.custom-clone-from-sds-datatable-rowDragging.dx-sortable-clone.dx-sortable-dragging .dx-datagrid-table td.dx-command-select~td>.row-options-btn .dx-icon-spindown {
    background: url('/Assets/Images/icons/option-btn.svg');
    width: 20px;
    height: 20px;
}

.custom-clone-from-sds-datatable-rowDragging.dx-sortable-clone.dx-sortable-dragging .dx-datagrid-table td.dx-command-select~td>.row-options-btn .dx-icon-spindown::before {
    content: '' !important;
}

.custom-clone-from-sds-datatable-rowDragging.dx-sortable-clone.dx-sortable-dragging .dx-datagrid-content .dx-datagrid-table .dx-row>td,
.custom-clone-from-sds-datatable-rowDragging.dx-sortable-clone.dx-sortable-dragging .dx-datagrid-content .dx-datagrid-table .dx-row>tr>td {
    vertical-align: middle !important;
    color: #000;
    font-size: 14px;
    font-family: 'Inter';
}

.custom-clone-from-sds-datatable-rowDragging.dx-sortable-clone.dx-sortable-dragging .dx-datagrid-table td.dx-command-select .dx-datagrid-checkbox-size .dx-checkbox-icon {
    padding: 1px !important;
    height: 18px;
    width: 18px;
    border-radius: 4px;
    border: 1px solid var(--sds-grey, #B6BFBF);
    background: var(--sds-grey-000, #FFF);
}

.datatable-header-actions-wrapper {
    /* d-flex flex-wrap justify-content-start w-100 gap-2 mx-1 */
    display: flex;
    gap: .5rem;
    margin-right: .25rem;
    margin-left: .25rem;
    width: 100%;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    /* -ms-flex-wrap: wrap;
    flex-wrap: wrap; */
}

/* end reorder datagrid rows */
@media(max-width:767px) {
    .sds-datatable .dx-toolbar-after .dx-toolbar-item {
        -webkit-padding-start: 0px;
        padding-inline-start: 0px;
    }

    .sds-datatable .datatable-header-actions-wrapper {
        -webkit-padding-start: 5px;
        padding-inline-start: 5px;
    }

    .sds-datatable .datatable-search-container.full {
        width: auto !important;
        min-width: auto !important;
    }

    .sds-datatable .dx-toolbar .dx-toolbar-items-container .dx-toolbar-after {
        margin-left: auto;
    }
}

@media all and (max-width: 767px) {
    .sds-datatable .dx-pager {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media(max-width:420px) {

    .datatable-header-actions-wrapper {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}