.top-line-loader {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    z-index: 105; /*above navbar*/
    pointer-events: none;
}

.line-loader-inner {
    height: 100%;
    width: 0;
    background-color: var(--primary);
}

.loaderDiv {
    position: relative;
    /*display: block;*/
}

/*add elements where loader will pre load to make the loader visible during initial fetch*/
.post-loaded-data {
    min-height: 100px;
}

.loader {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgb(14 28 43 / 94%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999999;
}

.loader-spinner {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-conic-gradient(#000 0 90deg, #ccc 0 180deg);
    animation: l21 1s infinite linear;
}

@keyframes l21 {
    100% {
        transform: rotate(.5turn)
    }
}

.use-voucher.connected, .btn-disconnect.connected {

    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #198754;
    --bs-btn-hover-border-color: #198754;
    --bs-btn-bg: #198754;
    --bs-btn-color: white;
}

.card-fancy {
    /*background-color: #fff;*/
    /*border-radius: 10px;*/
    /*border: none;*/
    /*position: relative;*/
    /*margin-bottom: 30px;*/
    box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1);
    color: white;
}

.l-bg-cherry {
    background: linear-gradient(to right, #493240, #f09) !important;
}

.l-bg-blue-dark {
    background: linear-gradient(to right, #373b44, #4286f4) !important;
}

.l-bg-yellow {
    background: linear-gradient(to right, #444037, #f4e542) !important;
}

.l-bg-pink {
    background: linear-gradient(to right, #383744, #360a83) !important;
}

.l-bg-green {
    background: linear-gradient(to right, #3c4437, #30750e) !important;
}

.card .card-statistic-3 .card-icon-large .fas, .card .card-statistic-3 .card-icon-large .far, .card .card-statistic-3 .card-icon-large .fab, .card .card-statistic-3 .card-icon-large .fal {
    font-size: 110px;
}

.subNavItemLink.active {
    font-weight: 900;
}

table tbody tr {
    cursor: pointer;
}

.cardHeaderText {
    font-weight: 900;
    font-size: larger;
}

.subNavItemLink.active {
    font-weight: 900;
    font-size: larger;
}

table.dataTable > tbody > tr > td {
    padding: 5px !important;
}

table.dataTable > thead > tr > th {
    padding: 5px !important;
}

.dt-container > .dt-layout-row:nth-child(1) {
    display: flex !important;
    justify-content: end !important;
    margin: 0 !important;
    align-items: end !important;

}

.dt-container > .dt-layout-row:nth-child(1) > div {
    margin: 0  1rem !important;
}
.dt-container > .dt-layout-row:nth-child(1) > div:nth-child(1) .dt-length{
    display: flex;
    flex-direction: column-reverse;

}
.dt-container > .dt-layout-row:nth-child(1) > div label {
    margin-bottom: 0;
    text-transform: capitalize;

}

.dt-input {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* HTML: <div class="loader"></div> */
.loader-1 {
    width: fit-content;
    font-size: 40px;
    line-height: 1.5;
    font-family: system-ui, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #0000;
    -webkit-text-stroke: 1px #000;
    background: radial-gradient(1.13em at 50% 1.6em, #000 99%, #0000 101%) calc(50% - 1.6em) 0/3.2em 100% text,
    radial-gradient(1.13em at 50% -0.8em, #0000 99%, #000 101%) 50% .8em/3.2em 100% repeat-x text;
    animation: l9 2s linear infinite;
}

.loader-1:before {
    content: "Loading";
}

@keyframes l9 {
    to {
        background-position: calc(50% + 1.6em) 0, calc(50% + 3.2em) .8em
    }
}