.amrit-dt th.dragging {
    opacity: 0.7;
    border: 2px dashed var(--bs-primary) !important;
}

.amrit-dt th.drag-original {
    background-color: #f8f9fa;
}

.amrit-dt th.drag-over-left {
    box-shadow: -2px 0 0 0 var(--bs-primary);
}

.amrit-dt th.drag-over-right {
    box-shadow: 2px 0 0 0 var(--bs-primary);
}

.amrit-dt th {
    cursor: move;
    user-select: none;
}



/************************************************************************************************
 * DataTable Styles
 ************************************************************************************************/
.amrit-dt-container {
    overflow-y: auto;
    position: relative;
}

.amrit-dt {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .amrit-dt thead {
        position: sticky;
        top: 0;
        z-index: 1;
        background: white;
    }

    .amrit-dt th, .amrit-dt td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .amrit-dt .sortable {
        cursor: pointer;
        user-select: none;
    }

    .amrit-dt th.action-col,
    .amrit-dt td.action-col {
        width: 128px !important;
        min-width: 128px !important;
        max-width: 128px !important;
    }

    .amrit-dt .sort-icon {
        margin-left: 5px;
        display: inline-flex;
        flex-direction: column;
        font-size: 0.7em;
        opacity: 0.3; /* default faded */
        line-height: 0.9em;
    }

    .amrit-dt .sortable.active .sort-icon {
        opacity: 1; /* active column highlighted */
    }

    .amrit-dt .arrow {
        display: block;
        color: #666;
    }

        .amrit-dt .arrow.up.active {
            color: black;
            font-weight: bold;
        }

        .amrit-dt .arrow.down.active {
            color: black;
            font-weight: bold;
        }

    .amrit-dt .new-added-data-row td {
        background-color: #d1fae5;
    }

    .amrit-dt .new-added-data-row.modified-row td {
        background-color: #fef9c3;
    }

    .amrit-dt tr:has([data-adt-invalid-row]) td {
        background-color: rgb(238, 66, 66)
    }

.amrit-dt-top .dt-top-toolbox {
    margin-bottom: 8px;
}

#smHeaderActionsOffcanvas .a-dt-tools .dt-top-toolbox {
    flex-direction: column;
}

    #smHeaderActionsOffcanvas .a-dt-tools .dt-top-toolbox > * {
        width: 100%;
    }

@media (min-width: 768px) {
    .amrit-dt-input-container {
        max-width: 250px;
    }
}

/*query builder*/

.filter-section {
    z-index: 9;
    max-width: 600px;
    box-shadow: 1px 1rem 3rem 1px rgb(0 0 0 / 50%);
    max-height: 80vh;
    overflow: auto;
}

.amrit-dt-top .dt-top-toolbox {
    margin-bottom: 8px;
}

.query-builder .rule-container .rule-filter-container, .query-builder .rule-container .rule-operator-container, .query-builder .rule-container .rule-value-container {
    display: inline-block;
}

.query-builder .rules-list > ::after, .query-builder .rules-list > ::before {
    content: none;
}

.query-builder .rule-value-container {
    border: 0;
    padding: 0;
}

.query-builder .rules-group-container {
    border: 1px solid #bbb;
    border-radius: 0.25rem;
    background: none;
    margin: 0;
    margin-bottom: 0.25rem;
}


.rule-container + .rule-container {
    border-top: 1px solid #eee;
    padding-top: 0.25rem
}

.query-builder .rules-list {
    padding: 0;
}



@media (max-width: 1199px) {
    .query-builder .rule-container .rule-filter-container, .query-builder .rule-container .rule-operator-container, .query-builder .rule-container .rule-value-container {
        display: inline-block;
        width: unset;
    }

    .filter-section {
        max-width: 360px;
    }
}

@media (max-width: 768px) {
    .query-builder .rule-container .rule-filter-container, .query-builder .rule-container .rule-operator-container, .query-builder .rule-container .rule-value-container {
        min-width: 120px;
    }
}

.edit-saved-filter, .del-saved-filter {
    visibility: hidden
}

.dropdown-item:hover .edit-saved-filter, .dropdown-item:hover .del-saved-filter {
    visibility: visible
}

.dropdown-item:hover {
    cursor: pointer;
}




.amrit-dt tr[data-val].dragging {
    opacity: 0.7;
    background-color: #f8f9fa !important;
}


    .amrit-dt tr[data-val].dragging td {
        border: 1px dashed var(--bs-primary) !important;
    }

.amrit-dt tr[data-val].drag-over {
    box-shadow: 0 0 0 2px #007bff inset;
}

.amrit-dt .drag-handle {
    cursor: move;
    opacity: 0.5;
    transition: opacity 0.2s;
}

    .amrit-dt .drag-handle:hover {
        opacity: 1;
    }

.amrit-dt tr[data-val] {
    transition: background-color 0.2s;
}