/*!
 * Bootstrap 4.5 XXL Grid Extension
 * Based on Bootstrap 5.2.3
 * Adds the xxl breakpoint (1400px+) to Bootstrap 4.x
 */

@media (min-width: 1400px) {

    /* Container */
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1320px;
    }

    /* Row Columns */

    .row-cols-xxl-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-xxl-1 > * {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-xxl-2 > * {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-xxl-3 > * {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row-cols-xxl-4 > * {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-xxl-5 > * {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-xxl-6 > * {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    /* Auto Columns */

    .col-xxl {
        flex: 1 0 0%;
    }

    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    /* Fixed Columns */

    .col-xxl-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xxl-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xxl-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xxl-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xxl-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxl-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xxl-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xxl-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xxl-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xxl-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xxl-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Orders */

    .order-xxl-first {
        order: -1;
    }

    .order-xxl-last {
        order: 13;
    }

    .order-xxl-0 { order: 0; }
    .order-xxl-1 { order: 1; }
    .order-xxl-2 { order: 2; }
    .order-xxl-3 { order: 3; }
    .order-xxl-4 { order: 4; }
    .order-xxl-5 { order: 5; }
    .order-xxl-6 { order: 6; }
    .order-xxl-7 { order: 7; }
    .order-xxl-8 { order: 8; }
    .order-xxl-9 { order: 9; }
    .order-xxl-10 { order: 10; }
    .order-xxl-11 { order: 11; }
    .order-xxl-12 { order: 12; }

    /* Offsets */

    .offset-xxl-0  { margin-left: 0; }
    .offset-xxl-1  { margin-left: 8.333333%; }
    .offset-xxl-2  { margin-left: 16.666667%; }
    .offset-xxl-3  { margin-left: 25%; }
    .offset-xxl-4  { margin-left: 33.333333%; }
    .offset-xxl-5  { margin-left: 41.666667%; }
    .offset-xxl-6  { margin-left: 50%; }
    .offset-xxl-7  { margin-left: 58.333333%; }
    .offset-xxl-8  { margin-left: 66.666667%; }
    .offset-xxl-9  { margin-left: 75%; }
    .offset-xxl-10 { margin-left: 83.333333%; }
    .offset-xxl-11 { margin-left: 91.666667%; }

}
/* Display Utilities */

@media (min-width: 1400px) {

    .d-xxl-none {
        display: none !important;
    }

    .d-xxl-inline {
        display: inline !important;
    }

    .d-xxl-inline-block {
        display: inline-block !important;
    }

    .d-xxl-block {
        display: block !important;
    }

    .d-xxl-table {
        display: table !important;
    }

    .d-xxl-table-row {
        display: table-row !important;
    }

    .d-xxl-table-cell {
        display: table-cell !important;
    }

    .d-xxl-flex {
        display: flex !important;
    }

    .d-xxl-inline-flex {
        display: inline-flex !important;
    }

}