.dt-container .col-md-auto {
    width: 50%;
}

.col-md-auto:has(.dt-length) {
    justify-content: end !important;
    width:  40%;

    & .dt-info {
        font-family: var(--app-font-san-serif);
        font-size:  0.825rem;
        font-weight: 400;
        padding:  0;
    }
}

.col-md-auto:has(.dt-paging) {
    justify-content: end !important;
}

.dt-search {
    display:  inline-flex;
    align-items: center;
    width:  70%;

    &:has(:focus-within) {
        box-shadow:  0 0 0 0.25rem rgba(13,110,253,.25);
        border-radius:  .25rem;
    }
}

/* global search bar */

.search-icon {
    border: 1px solid var(--bs-border-color);
    padding: 2.75px .5rem 2.75px .5rem;
    border-top-left-radius: 15%;
    border-bottom-left-radius: 15%;
    border-right: 0;
    opacity: 0.8;
}

.dt-search input[type="search"].form-control {
    width: 100%;
    padding-left: .25rem;
    padding-right: .5rem;
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;

    &:focus {
        box-shadow: unset;
        border-color:  var(--bs-border-color);
    }
}


table.dataTable {
    border-collapse: collapse;

    &.dataTable thead th {
        background-color: var(--header-bg-color);
        font-size:  .95rem;
        text-align: left;
        
        &.sort.dt-orderable-asc.dt-orderable-desc span.dt-column-order {
            position: relative;
            left: 6px;
            top: 1px;
        }
    }

    tbody > tr {
        border-bottom:  0 solid var(--mgmt-primary-color-lightest);
    
        &:hover{
            box-shadow: unset;
            
            & > *{
                box-shadow: inset 0 0 0 9999px rgba(134, 129, 193, 0.075) !important;
            }
        }
    }

    td.actions a {
        color: var(--bs-secondary-color);
        opacity: 0.85;

        &:hover .editIcon {
            color:  red;
        }
    }

}

.dt-column-order {
    color:  var(--mgmt-primary-color);

    &:before {
        color: var(--mgmt-primary-color-darker);
    }

    &:after {
        color: var(--mgmt-primary-color-lighter);
    }
}

.align-start {
    display:  flex;
    justify-content: start;
}

.align-end {
    display:  flex;
    justify-content: end;
}