.loader-container {
    width: 100%;
    background-color: #fff;
    position: relative;
    margin-bottom: 30px;
    min-height: 60px;
}

.loader {
    width: 60px;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


.loader-text {
    font-size: 14px;
}

    .loader-text:after {
        content: 'laden';
        animation: load 2s linear infinite;
    }


@keyframes load {
    0% {
        content: 'laden';
    }

    33% {
        content: 'laden.';
    }

    67% {
        content: 'laden..';
    }

    100% {
        content: 'laden...';
    }
}

.spinner-border.small-spinner {
    width: 1em;
    height: 1em;
    border-top-color: currentcolor;
    border-top-style: solid;
    border-top-width: 0.15em;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 0.15em;
    border-bottom-color: currentcolor;
    border-bottom-style: solid;
    border-bottom-width: 0.15em;
    border-left-color: currentcolor;
    border-left-style: solid;
    border-left-width: 0.15em;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.spinner-border.large-spinner {
    width: 3em;
    height: 3em;
}

.loader-container {
    /*border: 1px solid lightgrey;*/
    background-color: #fcfcfc;
    min-height: 150px;
}


.filter-toolbar {
    border: 1px solid lightgrey;
}

[name='pager'] {
    display: flex;
    align-items: baseline;
    padding: 12px;
    margin-bottom: 30px;
}

.pagination {
    margin-left: auto;
    margin-bottom: 0;
}

    .pagination .page-item .page-link {
    }

    .pagination .page-item.active .page-link {
        cursor: default;
    }

    .pagination .page-item.disabled {
        cursor: not-allowed;
    }

        .pagination .page-item.disabled .page-link {
            color: #b7b7b7;
        }


[data-orderable-column]:not([data-orderable-column=""]) {
    cursor: pointer;
}

    [data-orderable-column]:not([data-orderable-column=""]):hover {
        color: #0078ff;
    }
/*[data-orderable-column]:not([data-orderable-column=""]).active-sort {
    color: #0078ff;
}*/

[data-orderable-column]:not([data-orderable-column=""]) {
    position: relative; /* This is needed for the absolute positioning. */
}

    [data-orderable-column]:not([data-orderable-column=""])::before,
    [data-orderable-column]:not([data-orderable-column=""]):after {
        position: absolute;
        right: 0.75em;
        font-size: 1em;
        font-family: 'Font Awesome 6 Free'; /* Use FontAwesome's font so that you can set the content */
        opacity: 0.3; /* Set opacity to gray out icons by default */
    }

    [data-orderable-column]:not([data-orderable-column=""])::before {
        content: '\f0de'; /* Font Awesome's up arrow */
        top: calc(50% - 1em); /* Tricky to calculate the top offset */
    }

    [data-orderable-column]:not([data-orderable-column=""])::after {
        content: '\f0dd'; /* Font Awesome's down arrow */
        bottom: calc(50% - 1em);
    }

    [data-orderable-column]:not([data-orderable-column=""]).sort-asc::before,
    [data-orderable-column]:not([data-orderable-column=""]).sort-desc::after {
        opacity: 1; /* When sorting, set full opacity on the direction */
    }


.btn.btn-xs {
    padding: 0.15rem 0.25rem;
    font-size: .75rem;
    border-radius: 0.2rem;
}