:root {
    --processing-adjust: 0.33em;
}

.tm--expanded-hd .content__header {
    border-radius: 0;
    height: 200px;
}
.header__brand {
    background: rgba(255, 255, 255, 1);
}
.content__wrap {
    padding-inline: 1rem;
}
.mn--max .header__brand {
    padding-inline-start: 0;
}
.mn--max .header__content, .mn--min .header__content {
    padding-inline-start: 1rem;
}
.root:not(.mn--min) .mainnav__menu > .nav-item.has-sub > .mininav-content > .nav-item > .nav-link {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.icon-spin {
    animation: icon-spin 4s linear infinite;
}
@keyframes icon-spin {
    from { transform: rotate(1turn) }
}
.icon-spin-reverse {
    rotate: 8deg;
    animation: icon-spin-reverse 4s linear infinite;
}
@keyframes icon-spin-reverse {
    to { transform: rotate(1turn) }
}

.processingOverlay {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: #00000080;
    z-index: 2000;
}
.processingOverlay > svg {
    font-size: 4em;
    position: absolute;
}
.processingOverlay > svg.icon-spin {
    left: calc(50% - var(--processing-adjust));
    top: calc(50% - var(--processing-adjust))
}
.processingOverlay > svg.icon-spin-reverse {
    left: calc(50% + var(--processing-adjust));
    top: calc(50% + var(--processing-adjust))
}

.datatable-list {
    cursor: pointer;
}
.dt-scroll-body {
    max-height: 370px !important;
    padding-bottom: 20px;
}

.offcanvas .dt-layout-row.dt-layout-table {
    width: 100%;
    overflow: auto;
    padding-bottom: 20px;
}

[id$="EditModal"].offcanvas.offcanvas-end {
    width: 100% !important;
    max-width: 1000px !important;
    background-color: #fafafa !important;
}
@media (min-width: 992px) {
    [id$="EditModal"].offcanvas.offcanvas-end {
        width: calc(100% - 220px) !important;
    }
}

div.dashboard {
    margin-bottom: 2em;
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-auto-rows: 90px;
    gap: 1em;

    div.card { margin-bottom: 0 }

    div.Reference-Year { grid-area: 1 / 1 / 2 / 13 }
    div.Service-Providers { grid-area: 1 / 13 / 2 / 25 }
    div.Clients { grid-area: 2 / 1 / 3 / 13 }
    div.Active-Users { grid-area: 2 / 13 / 3 / 25 }
    div.Services { grid-area: 3 / 1 / 4 / 13 }
    div.Partners-Sponsors { grid-area: 3 / 13 / 4 / 25 }
    div.Ads { grid-area: 4 / 13 / 5 / 25 }
    div.Total-Transactions { grid-area: 4 / 1 / 5 / 13 }

    div.New-Users { grid-area: 5 / 1 / 8 / 25 }
    div.Job-Statistics { grid-area: 8 / 1 / 12 / 25 }
    div.Transaction-Overview { grid-area: 12 / 1 / 15 / 25 }
    div.Subscriptions-Stats { grid-area: 15 / 1 / 18 / 25 }

    div.Top-Active-User { grid-area: 18 / 1 / 21 / 25 }
    div.Top-Requested-Services { grid-area: 21 / 1 / 24 / 25 }
    div.Ratings { grid-area: 24 / 1 / 27 / 25 }

    @media (min-width: 576px) and (max-width: 767px) {

        div.Reference-Year { grid-area: 1 / 1 / 2 / 9 }
        div.Service-Providers { grid-area: 1 / 9 / 2 / 17 }
        div.Clients { grid-area: 1 / 17 / 2 / 25 }
        div.Active-Users { grid-area: 2 / 1 / 3 / 9 }
        div.Services { grid-area: 2 / 9 / 3 / 17 }
        div.Partners-Sponsors { grid-area: 2 / 17 / 3 / 25 }
        div.Ads { grid-area: 3 / 13 / 4 / 25 }
        div.Total-Transactions { grid-area: 3 / 1 / 4 / 13 }

        div.New-Users { grid-area: 4 / 1 / 8 / 25 }
        div.Job-Statistics { grid-area: 8 / 1 / 13 / 25 }
        div.Transaction-Overview { grid-area: 13 / 1 / 17 / 25 }
        div.Subscriptions-Stats { grid-area: 17 / 1 / 21 / 25 }

        div.Top-Active-User { grid-area: 21 / 1 / 24 / 25 }
        div.Top-Requested-Services { grid-area: 24 / 1 / 27 / 25 }
        div.Ratings { grid-area: 27 / 1 / 30 / 25 }

    }

    @media (min-width: 768px) and (max-width: 991px) {

        div.Reference-Year { grid-area: 1 / 1 / 2 / 9 }
        div.Service-Providers { grid-area: 1 / 9 / 2 / 17 }
        div.Clients { grid-area: 1 / 17 / 2 / 25 }
        div.Active-Users { grid-area: 2 / 1 / 3 / 9 }
        div.Services { grid-area: 2 / 9 / 3 / 17 }
        div.Partners-Sponsors { grid-area: 2 / 17 / 3 / 25 }
        div.Ads { grid-area: 3 / 13 / 4 / 25 }
        div.Total-Transactions { grid-area: 3 / 1 / 4 / 13 }

        div.New-Users { grid-area: 4 / 1 / 8 / 25 }
        div.Job-Statistics { grid-area: 8 / 1 / 14 / 25 }
        div.Transaction-Overview { grid-area: 14 / 1 / 18 / 25 }
        div.Subscriptions-Stats { grid-area: 18 / 1 / 22 / 25 }

        div.Top-Active-User { grid-area: 22 / 1 / 25 / 25 }
        div.Top-Requested-Services { grid-area: 25 / 1 / 28 / 25 }
        div.Ratings { grid-area: 28 / 1 / 31 / 25 }

    }

    @media (min-width: 992px) and (max-width: 1199px) {

        div.Reference-Year { grid-area: 1 / 1 / 2 / 9 }
        div.Service-Providers { grid-area: 1 / 9 / 2 / 17 }
        div.Clients { grid-area: 1 / 17 / 2 / 25 }
        div.Active-Users { grid-area: 2 / 1 / 3 / 9 }
        div.Services { grid-area: 2 / 9 / 3 / 17 }
        div.Partners-Sponsors { grid-area: 2 / 17 / 3 / 25 }
        div.Ads { grid-area: 3 / 13 / 4 / 25 }
        div.Total-Transactions { grid-area: 3 / 1 / 4 / 13 }

        div.New-Users { grid-area: 4 / 1 / 8 / 25 }
        div.Job-Statistics { grid-area: 8 / 1 / 14 / 25 }
        div.Transaction-Overview { grid-area: 14 / 1 / 18 / 25 }
        div.Subscriptions-Stats { grid-area: 18 / 1 / 22 / 25 }

        div.Top-Active-User { grid-area: 22 / 1 / 25 / 13 }
        div.Top-Requested-Services { grid-area: 22 / 13 / 25 / 25 }
        div.Ratings { grid-area: 25 / 1 / 28 / 25 }

    }

    @media (min-width: 1200px) and (max-width: 1399px) {

        div.Reference-Year { grid-area: 1 / 1 / 2 / 7 }
        div.Service-Providers { grid-area: 1 / 7 / 2 / 11 }
        div.Clients { grid-area: 1 / 11 / 2 / 15 }
        div.Active-Users { grid-area: 1 / 15 / 2 / 19 }
        div.Services { grid-area: 1 / 19 / 2 / 25 }
        div.Partners-Sponsors { grid-area: 2 / 1 / 3 / 7 }
        div.Ads { grid-area: 2 / 7 / 3 / 15 }
        div.Total-Transactions { grid-area: 2 / 15 / 3 / 25 }

        div.New-Users { grid-area: 3 / 1 / 6 / 15 }
        div.Job-Statistics { grid-area: 3 / 15 / 6 / 25 }
        div.Transaction-Overview { grid-area: 6 / 1 / 9 / 15 }
        div.Subscriptions-Stats { grid-area: 6 / 15 / 9 / 25 }

        div.Top-Active-User { grid-area: 9 / 1 / 12 / 9 }
        div.Top-Requested-Services { grid-area: 9 / 9 / 12 / 17 }
        div.Ratings { grid-area: 9 / 17 / 12 / 25 }

    }

    @media (min-width: 1400px) and (max-width: 1599px) {

        div.Reference-Year { grid-area: 1 / 1 / 2 / 7 }
        div.Service-Providers { grid-area: 1 / 7 / 2 / 11 }
        div.Clients { grid-area: 1 / 11 / 2 / 15 }
        div.Active-Users { grid-area: 1 / 15 / 2 / 19 }
        div.Services { grid-area: 1 / 19 / 2 / 25 }
        div.Partners-Sponsors { grid-area: 2 / 1 / 3 / 7 }
        div.Ads { grid-area: 2 / 7 / 3 / 15 }
        div.Total-Transactions { grid-area: 2 / 15 / 3 / 25 }

        div.New-Users { grid-area: 3 / 1 / 7 / 15 }
        div.Job-Statistics { grid-area: 3 / 15 / 7 / 25 }
        div.Transaction-Overview { grid-area: 7 / 1 / 11 / 15 }
        div.Subscriptions-Stats { grid-area: 7 / 15 / 11 / 25 }

        div.Top-Active-User { grid-area: 11 / 1 / 14 / 9 }
        div.Top-Requested-Services { grid-area: 11 / 9 / 14 / 17 }
        div.Ratings { grid-area: 11 / 17 / 14 / 25 }

    }

    @media (min-width: 1600px) {

        div.Reference-Year { grid-area: 1 / 1 / 2 / 7 }
        div.Service-Providers { grid-area: 1 / 7 / 2 / 11 }
        div.Clients { grid-area: 1 / 11 / 2 / 15 }
        div.Active-Users { grid-area: 1 / 15 / 2 / 19 }
        div.Services { grid-area: 1 / 19 / 2 / 25 }
        div.Partners-Sponsors { grid-area: 2 / 1 / 3 / 7 }
        div.Ads { grid-area: 2 / 7 / 3 / 15 }
        div.Total-Transactions { grid-area: 2 / 15 / 3 / 25 }

        div.New-Users { grid-area: 3 / 1 / 7 / 15 }
        div.Job-Statistics { grid-area: 3 / 15 / 7 / 25 }
        div.Transaction-Overview { grid-area: 7 / 1 / 11 / 15 }
        div.Subscriptions-Stats { grid-area: 7 / 15 / 11 / 25 }

        div.Top-Active-User { grid-area: 11 / 1 / 14 / 9 }
        div.Top-Requested-Services { grid-area: 11 / 9 / 14 / 17 }
        div.Ratings { grid-area: 11 / 17 / 14 / 25 }

    }

}