.dui-layout-grid {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.dui-grid-content {
    grid-area: g-content;
}

.dui-grid-header {
    grid-area: g-header;
}

.dui-grid-footer {
    grid-area: g-footer;
}

.dui-grid-left {
    grid-area: g-left;
}

.dui-grid-right {
    grid-area: g-right;
}

.dui-grid-row {
    display: grid;
    gap: var(--dui-row-default-gap);
    margin: var(--dui-row-default-margin);
}

.dui-row-12 {
    grid-template-columns: repeat(12, 1fr);
}

.dui-row-16 {
    grid-template-columns: repeat(16, 1fr);
}

.dui-row-18 {
    grid-template-columns: repeat(18, 1fr);
}

.dui-row-24 {
    grid-template-columns: repeat(24, 1fr);
}

.dui-row-32 {
    grid-template-columns: repeat(32, 1fr);
}

/*x-Large screens*/
@media screen and (min-width: 1800px) {
    .dui-span-xl-1 {
        grid-column-end: span 1;
    }

    .dui-span-xl-2 {
        grid-column-end: span 2;
    }

    .dui-span-xl-3 {
        grid-column-end: span 3;
    }

    .dui-span-xl-4 {
        grid-column-end: span 4;
    }

    .dui-span-xl-5 {
        grid-column-end: span 5;
    }

    .dui-span-xl-6 {
        grid-column-end: span 6;
    }

    .dui-span-xl-7 {
        grid-column-end: span 7;
    }

    .dui-span-xl-8 {
        grid-column-end: span 8;
    }

    .dui-span-xl-9 {
        grid-column-end: span 9;
    }

    .dui-span-xl-10 {
        grid-column-end: span 10;
    }

    .dui-span-xl-11 {
        grid-column-end: span 11;
    }

    .dui-span-xl-12 {
        grid-column-end: span 12;
    }

    .dui-span-xl-13 {
        grid-column-end: span 13;
    }

    .dui-span-xl-14 {
        grid-column-end: span 14;
    }

    .dui-span-xl-15 {
        grid-column-end: span 15;
    }

    .dui-span-xl-16 {
        grid-column-end: span 16;
    }

    .dui-span-xl-17 {
        grid-column-end: span 17;
    }

    .dui-span-xl-18 {
        grid-column-end: span 18;
    }

    .dui-span-xl-19 {
        grid-column-end: span 19;
    }

    .dui-span-xl-20 {
        grid-column-end: span 20;
    }

    .dui-span-xl-21 {
        grid-column-end: span 21;
    }

    .dui-span-xl-22 {
        grid-column-end: span 22;
    }

    .dui-span-xl-23 {
        grid-column-end: span 23;
    }

    .dui-span-xl-24 {
        grid-column-end: span 24;
    }

    .dui-span-xl-25 {
        grid-column-end: span 25;
    }

    .dui-span-xl-26 {
        grid-column-end: span 26;
    }

    .dui-span-xl-27 {
        grid-column-end: span 27;
    }

    .dui-span-xl-28 {
        grid-column-end: span 28;
    }

    .dui-span-xl-29 {
        grid-column-end: span 29;
    }

    .dui-span-xl-30 {
        grid-column-end: span 30;
    }

    .dui-span-xl-31 {
        grid-column-end: span 31;
    }

    .dui-span-xl-32 {
        grid-column-end: span 32;
    }

    .dui-row-12 .dui-span-xl-full {
        grid-column-end: span 12;
    }

    .dui-row-16 .dui-span-xl-full {
        grid-column-end: span 16;
    }

    .dui-row-18 .dui-span-xl-full {
        grid-column-end: span 18;
    }

    .dui-row-24 .dui-span-xl-full {
        grid-column-end: span 24;
    }

    .dui-row-32 .dui-span-xl-full {
        grid-column-end: span 32;
    }

    /*offset*/
    .dui-offset-xl-none {
    }

    .dui-offset-xl-0 {
        grid-column-start: 1;
    }

    .dui-offset-xl-1 {
        grid-column-start: 2;
    }

    .dui-offset-xl-2 {
        grid-column-start: 3;
    }

    .dui-offset-xl-3 {
        grid-column-start: 4;
    }

    .dui-offset-xl-4 {
        grid-column-start: 5;
    }

    .dui-offset-xl-5 {
        grid-column-start: 6;
    }

    .dui-offset-xl-6 {
        grid-column-start: 7;
    }

    .dui-offset-xl-7 {
        grid-column-start: 8;
    }

    .dui-offset-xl-8 {
        grid-column-start: 9;
    }

    .dui-offset-xl-9 {
        grid-column-start: 10;
    }

    .dui-offset-xl-10 {
        grid-column-start: 11;
    }

    .dui-offset-xl-11 {
        grid-column-start: 12;
    }

    .dui-offset-xl-12 {
        grid-column-start: 13;
    }

    .dui-offset-xl-13 {
        grid-column-start: 14;
    }

    .dui-offset-xl-14 {
        grid-column-start: 15;
    }

    .dui-offset-xl-15 {
        grid-column-start: 16;
    }

    .dui-offset-xl-16 {
        grid-column-start: 17;
    }

    .dui-offset-xl-17 {
        grid-column-start: 18;
    }

    .dui-offset-xl-18 {
        grid-column-start: 19;
    }

    .dui-offset-xl-19 {
        grid-column-start: 20;
    }

    .dui-offset-xl-20 {
        grid-column-start: 21;
    }

    .dui-offset-xl-21 {
        grid-column-start: 22;
    }

    .dui-offset-xl-22 {
        grid-column-start: 23;
    }

    .dui-offset-xl-23 {
        grid-column-start: 24;
    }

    .dui-offset-xl-24 {
        grid-column-start: 25;
    }

    .dui-offset-xl-25 {
        grid-column-start: 26;
    }

    .dui-offset-xl-26 {
        grid-column-start: 27;
    }

    .dui-offset-xl-27 {
        grid-column-start: 28;
    }

    .dui-offset-xl-28 {
        grid-column-start: 29;
    }

    .dui-offset-xl-29 {
        grid-column-start: 30;
    }

    .dui-offset-xl-30 {
        grid-column-start: 31;
    }

    .dui-offset-xl-31 {
        grid-column-start: 32;
    }
}

/*Large screens*/
@media screen and (min-width: 1200px) and (max-width: 1800px) {
    .dui-span-l-1 {
        grid-column-end: span 1;
    }

    .dui-span-l-2 {
        grid-column-end: span 2;
    }

    .dui-span-l-3 {
        grid-column-end: span 3;
    }

    .dui-span-l-4 {
        grid-column-end: span 4;
    }

    .dui-span-l-5 {
        grid-column-end: span 5;
    }

    .dui-span-l-6 {
        grid-column-end: span 6;
    }

    .dui-span-l-7 {
        grid-column-end: span 7;
    }

    .dui-span-l-8 {
        grid-column-end: span 8;
    }

    .dui-span-l-9 {
        grid-column-end: span 9;
    }

    .dui-span-l-10 {
        grid-column-end: span 10;
    }

    .dui-span-l-11 {
        grid-column-end: span 11;
    }

    .dui-span-l-12 {
        grid-column-end: span 12;
    }

    .dui-span-l-13 {
        grid-column-end: span 13;
    }

    .dui-span-l-14 {
        grid-column-end: span 14;
    }

    .dui-span-l-15 {
        grid-column-end: span 15;
    }

    .dui-span-l-16 {
        grid-column-end: span 16;
    }

    .dui-span-l-17 {
        grid-column-end: span 17;
    }

    .dui-span-l-18 {
        grid-column-end: span 18;
    }

    .dui-span-l-19 {
        grid-column-end: span 19;
    }

    .dui-span-l-20 {
        grid-column-end: span 20;
    }

    .dui-span-l-21 {
        grid-column-end: span 21;
    }

    .dui-span-l-22 {
        grid-column-end: span 22;
    }

    .dui-span-l-23 {
        grid-column-end: span 23;
    }

    .dui-span-l-24 {
        grid-column-end: span 24;
    }

    .dui-span-l-25 {
        grid-column-end: span 25;
    }

    .dui-span-l-26 {
        grid-column-end: span 26;
    }

    .dui-span-l-27 {
        grid-column-end: span 27;
    }

    .dui-span-l-28 {
        grid-column-end: span 28;
    }

    .dui-span-l-29 {
        grid-column-end: span 29;
    }

    .dui-span-l-30 {
        grid-column-end: span 30;
    }

    .dui-span-l-31 {
        grid-column-end: span 31;
    }

    .dui-span-l-32 {
        grid-column-end: span 32;
    }

    .dui-row-12 .dui-span-l-full {
        grid-column-end: span 12;
    }

    .dui-row-16 .dui-span-l-full {
        grid-column-end: span 16;
    }

    .dui-row-18 .dui-span-l-full {
        grid-column-end: span 18;
    }

    .dui-row-24 .dui-span-l-full {
        grid-column-end: span 24;
    }

    .dui-row-32 .dui-span-l-full {
        grid-column-end: span 32;
    }

    /*offset*/
    .dui-offset-l-none {
    }

    .dui-offset-l-0 {
        grid-column-start: 1;
    }

    .dui-offset-l-1 {
        grid-column-start: 2;
    }

    .dui-offset-l-2 {
        grid-column-start: 3;
    }

    .dui-offset-l-3 {
        grid-column-start: 4;
    }

    .dui-offset-l-4 {
        grid-column-start: 5;
    }

    .dui-offset-l-5 {
        grid-column-start: 6;
    }

    .dui-offset-l-6 {
        grid-column-start: 7;
    }

    .dui-offset-l-7 {
        grid-column-start: 8;
    }

    .dui-offset-l-8 {
        grid-column-start: 9;
    }

    .dui-offset-l-9 {
        grid-column-start: 10;
    }

    .dui-offset-l-10 {
        grid-column-start: 11;
    }

    .dui-offset-l-11 {
        grid-column-start: 12;
    }

    .dui-offset-l-12 {
        grid-column-start: 13;
    }

    .dui-offset-l-13 {
        grid-column-start: 14;
    }

    .dui-offset-l-14 {
        grid-column-start: 15;
    }

    .dui-offset-l-15 {
        grid-column-start: 16;
    }

    .dui-offset-l-16 {
        grid-column-start: 17;
    }

    .dui-offset-l-17 {
        grid-column-start: 18;
    }

    .dui-offset-l-18 {
        grid-column-start: 19;
    }

    .dui-offset-l-19 {
        grid-column-start: 20;
    }

    .dui-offset-l-20 {
        grid-column-start: 21;
    }

    .dui-offset-l-21 {
        grid-column-start: 22;
    }

    .dui-offset-l-22 {
        grid-column-start: 23;
    }

    .dui-offset-l-23 {
        grid-column-start: 24;
    }

    .dui-offset-l-24 {
        grid-column-start: 25;
    }

    .dui-offset-l-25 {
        grid-column-start: 26;
    }

    .dui-offset-l-26 {
        grid-column-start: 27;
    }

    .dui-offset-l-27 {
        grid-column-start: 28;
    }

    .dui-offset-l-28 {
        grid-column-start: 29;
    }

    .dui-offset-l-29 {
        grid-column-start: 30;
    }

    .dui-offset-l-30 {
        grid-column-start: 31;
    }

    .dui-offset-l-31 {
        grid-column-start: 32;
    }
}

/*Medium screens*/
@media screen and (min-width: 992px) and (max-width: 1200px) {
    .dui-span-m-1 {
        grid-column-end: span 1;
    }

    .dui-span-m-2 {
        grid-column-end: span 2;
    }

    .dui-span-m-3 {
        grid-column-end: span 3;
    }

    .dui-span-m-4 {
        grid-column-end: span 4;
    }

    .dui-span-m-5 {
        grid-column-end: span 5;
    }

    .dui-span-m-6 {
        grid-column-end: span 6;
    }

    .dui-span-m-7 {
        grid-column-end: span 7;
    }

    .dui-span-m-8 {
        grid-column-end: span 8;
    }

    .dui-span-m-9 {
        grid-column-end: span 9;
    }

    .dui-span-m-10 {
        grid-column-end: span 10;
    }

    .dui-span-m-11 {
        grid-column-end: span 11;
    }

    .dui-span-m-12 {
        grid-column-end: span 12;
    }

    .dui-span-m-13 {
        grid-column-end: span 13;
    }

    .dui-span-m-14 {
        grid-column-end: span 14;
    }

    .dui-span-m-15 {
        grid-column-end: span 15;
    }

    .dui-span-m-16 {
        grid-column-end: span 16;
    }

    .dui-span-m-17 {
        grid-column-end: span 17;
    }

    .dui-span-m-18 {
        grid-column-end: span 18;
    }

    .dui-span-m-19 {
        grid-column-end: span 19;
    }

    .dui-span-m-20 {
        grid-column-end: span 20;
    }

    .dui-span-m-21 {
        grid-column-end: span 21;
    }

    .dui-span-m-22 {
        grid-column-end: span 22;
    }

    .dui-span-m-23 {
        grid-column-end: span 23;
    }

    .dui-span-m-24 {
        grid-column-end: span 24;
    }

    .dui-span-m-25 {
        grid-column-end: span 25;
    }

    .dui-span-m-26 {
        grid-column-end: span 26;
    }

    .dui-span-m-27 {
        grid-column-end: span 27;
    }

    .dui-span-m-28 {
        grid-column-end: span 28;
    }

    .dui-span-m-29 {
        grid-column-end: span 29;
    }

    .dui-span-m-30 {
        grid-column-end: span 30;
    }

    .dui-span-m-31 {
        grid-column-end: span 31;
    }

    .dui-span-m-32 {
        grid-column-end: span 32;
    }

    .dui-row-12 .dui-span-m-full {
        grid-column-end: span 12;
    }

    .dui-row-16 .dui-span-m-full {
        grid-column-end: span 16;
    }

    .dui-row-18 .dui-span-m-full {
        grid-column-end: span 18;
    }

    .dui-row-24 .dui-span-m-full {
        grid-column-end: span 24;
    }

    .dui-row-32 .dui-span-m-full {
        grid-column-end: span 32;
    }

    /*offset*/
    .dui-offset-m-none {
    }

    .dui-offset-m-0 {
        grid-column-start: 1;
    }

    .dui-offset-m-1 {
        grid-column-start: 2;
    }

    .dui-offset-m-2 {
        grid-column-start: 3;
    }

    .dui-offset-m-3 {
        grid-column-start: 4;
    }

    .dui-offset-m-4 {
        grid-column-start: 5;
    }

    .dui-offset-m-5 {
        grid-column-start: 6;
    }

    .dui-offset-m-6 {
        grid-column-start: 7;
    }

    .dui-offset-m-7 {
        grid-column-start: 8;
    }

    .dui-offset-m-8 {
        grid-column-start: 9;
    }

    .dui-offset-m-9 {
        grid-column-start: 10;
    }

    .dui-offset-m-10 {
        grid-column-start: 11;
    }

    .dui-offset-m-11 {
        grid-column-start: 12;
    }

    .dui-offset-m-12 {
        grid-column-start: 13;
    }

    .dui-offset-m-13 {
        grid-column-start: 14;
    }

    .dui-offset-m-14 {
        grid-column-start: 15;
    }

    .dui-offset-m-15 {
        grid-column-start: 16;
    }

    .dui-offset-m-16 {
        grid-column-start: 17;
    }

    .dui-offset-m-17 {
        grid-column-start: 18;
    }

    .dui-offset-m-18 {
        grid-column-start: 19;
    }

    .dui-offset-m-19 {
        grid-column-start: 20;
    }

    .dui-offset-m-20 {
        grid-column-start: 21;
    }

    .dui-offset-m-21 {
        grid-column-start: 22;
    }

    .dui-offset-m-22 {
        grid-column-start: 23;
    }

    .dui-offset-m-23 {
        grid-column-start: 24;
    }

    .dui-offset-m-24 {
        grid-column-start: 25;
    }

    .dui-offset-m-25 {
        grid-column-start: 26;
    }

    .dui-offset-m-26 {
        grid-column-start: 27;
    }

    .dui-offset-m-27 {
        grid-column-start: 28;
    }

    .dui-offset-m-28 {
        grid-column-start: 29;
    }

    .dui-offset-m-29 {
        grid-column-start: 30;
    }

    .dui-offset-m-30 {
        grid-column-start: 31;
    }

    .dui-offset-m-31 {
        grid-column-start: 32;
    }
}

/*Small screens*/
@media screen and (min-width: 768px) and (max-width: 992px) {
    .dui-span-s-1 {
        grid-column-end: span 1;
    }

    .dui-span-s-2 {
        grid-column-end: span 2;
    }

    .dui-span-s-3 {
        grid-column-end: span 3;
    }

    .dui-span-s-4 {
        grid-column-end: span 4;
    }

    .dui-span-s-5 {
        grid-column-end: span 5;
    }

    .dui-span-s-6 {
        grid-column-end: span 6;
    }

    .dui-span-s-7 {
        grid-column-end: span 7;
    }

    .dui-span-s-8 {
        grid-column-end: span 8;
    }

    .dui-span-s-9 {
        grid-column-end: span 9;
    }

    .dui-span-s-10 {
        grid-column-end: span 10;
    }

    .dui-span-s-11 {
        grid-column-end: span 11;
    }

    .dui-span-s-12 {
        grid-column-end: span 12;
    }

    .dui-span-s-13 {
        grid-column-end: span 13;
    }

    .dui-span-s-14 {
        grid-column-end: span 14;
    }

    .dui-span-s-15 {
        grid-column-end: span 15;
    }

    .dui-span-s-16 {
        grid-column-end: span 16;
    }

    .dui-span-s-17 {
        grid-column-end: span 17;
    }

    .dui-span-s-18 {
        grid-column-end: span 18;
    }

    .dui-span-s-19 {
        grid-column-end: span 19;
    }

    .dui-span-s-20 {
        grid-column-end: span 20;
    }

    .dui-span-s-21 {
        grid-column-end: span 21;
    }

    .dui-span-s-22 {
        grid-column-end: span 22;
    }

    .dui-span-s-23 {
        grid-column-end: span 23;
    }

    .dui-span-s-24 {
        grid-column-end: span 24;
    }

    .dui-span-s-25 {
        grid-column-end: span 25;
    }

    .dui-span-s-26 {
        grid-column-end: span 26;
    }

    .dui-span-s-27 {
        grid-column-end: span 27;
    }

    .dui-span-s-28 {
        grid-column-end: span 28;
    }

    .dui-span-s-29 {
        grid-column-end: span 29;
    }

    .dui-span-s-30 {
        grid-column-end: span 30;
    }

    .dui-span-s-31 {
        grid-column-end: span 31;
    }

    .dui-span-s-32 {
        grid-column-end: span 32;
    }

    .dui-row-12 .dui-span-s-full {
        grid-column-end: span 12;
    }

    .dui-row-16 .dui-span-s-full {
        grid-column-end: span 16;
    }

    .dui-row-18 .dui-span-s-full {
        grid-column-end: span 18;
    }

    .dui-row-24 .dui-span-s-full {
        grid-column-end: span 24;
    }

    .dui-row-32 .dui-span-s-full {
        grid-column-end: span 32;
    }

    /*offset*/
    .dui-offset-s-none {
    }

    .dui-offset-s-0 {
        grid-column-start: 1;
    }

    .dui-offset-s-1 {
        grid-column-start: 2;
    }

    .dui-offset-s-2 {
        grid-column-start: 3;
    }

    .dui-offset-s-3 {
        grid-column-start: 4;
    }

    .dui-offset-s-4 {
        grid-column-start: 5;
    }

    .dui-offset-s-5 {
        grid-column-start: 6;
    }

    .dui-offset-s-6 {
        grid-column-start: 7;
    }

    .dui-offset-s-7 {
        grid-column-start: 8;
    }

    .dui-offset-s-8 {
        grid-column-start: 9;
    }

    .dui-offset-s-9 {
        grid-column-start: 10;
    }

    .dui-offset-s-10 {
        grid-column-start: 11;
    }

    .dui-offset-s-11 {
        grid-column-start: 12;
    }

    .dui-offset-s-12 {
        grid-column-start: 13;
    }

    .dui-offset-s-13 {
        grid-column-start: 14;
    }

    .dui-offset-s-14 {
        grid-column-start: 15;
    }

    .dui-offset-s-15 {
        grid-column-start: 16;
    }

    .dui-offset-s-16 {
        grid-column-start: 17;
    }

    .dui-offset-s-17 {
        grid-column-start: 18;
    }

    .dui-offset-s-18 {
        grid-column-start: 19;
    }

    .dui-offset-s-19 {
        grid-column-start: 20;
    }

    .dui-offset-s-20 {
        grid-column-start: 21;
    }

    .dui-offset-s-21 {
        grid-column-start: 22;
    }

    .dui-offset-s-22 {
        grid-column-start: 23;
    }

    .dui-offset-s-23 {
        grid-column-start: 24;
    }

    .dui-offset-s-24 {
        grid-column-start: 25;
    }

    .dui-offset-s-25 {
        grid-column-start: 26;
    }

    .dui-offset-s-26 {
        grid-column-start: 27;
    }

    .dui-offset-s-27 {
        grid-column-start: 28;
    }

    .dui-offset-s-28 {
        grid-column-start: 29;
    }

    .dui-offset-s-29 {
        grid-column-start: 30;
    }

    .dui-offset-s-30 {
        grid-column-start: 31;
    }

    .dui-offset-s-31 {
        grid-column-start: 32;
    }
}

/*x-Small screens*/
@media screen and (max-width: 768px) {
    .dui-span-xs-1 {
        grid-column-end: span 1;
    }

    .dui-span-xs-2 {
        grid-column-end: span 2;
    }

    .dui-span-xs-3 {
        grid-column-end: span 3;
    }

    .dui-span-xs-4 {
        grid-column-end: span 4;
    }

    .dui-span-xs-5 {
        grid-column-end: span 5;
    }

    .dui-span-xs-6 {
        grid-column-end: span 6;
    }

    .dui-span-xs-7 {
        grid-column-end: span 7;
    }

    .dui-span-xs-8 {
        grid-column-end: span 8;
    }

    .dui-span-xs-9 {
        grid-column-end: span 9;
    }

    .dui-span-xs-10 {
        grid-column-end: span 10;
    }

    .dui-span-xs-11 {
        grid-column-end: span 11;
    }

    .dui-span-xs-12 {
        grid-column-end: span 12;
    }

    .dui-span-xs-13 {
        grid-column-end: span 13;
    }

    .dui-span-xs-14 {
        grid-column-end: span 14;
    }

    .dui-span-xs-15 {
        grid-column-end: span 15;
    }

    .dui-span-xs-16 {
        grid-column-end: span 16;
    }

    .dui-span-xs-17 {
        grid-column-end: span 17;
    }

    .dui-span-xs-18 {
        grid-column-end: span 18;
    }

    .dui-span-xs-19 {
        grid-column-end: span 19;
    }

    .dui-span-xs-20 {
        grid-column-end: span 20;
    }

    .dui-span-xs-21 {
        grid-column-end: span 21;
    }

    .dui-span-xs-22 {
        grid-column-end: span 22;
    }

    .dui-span-xs-23 {
        grid-column-end: span 23;
    }

    .dui-span-xs-24 {
        grid-column-end: span 24;
    }

    .dui-span-xs-25 {
        grid-column-end: span 25;
    }

    .dui-span-xs-26 {
        grid-column-end: span 26;
    }

    .dui-span-xs-27 {
        grid-column-end: span 27;
    }

    .dui-span-xs-28 {
        grid-column-end: span 28;
    }

    .dui-span-xs-29 {
        grid-column-end: span 29;
    }

    .dui-span-xs-30 {
        grid-column-end: span 30;
    }

    .dui-span-xs-31 {
        grid-column-end: span 31;
    }

    .dui-span-xs-32 {
        grid-column-end: span 32;
    }

    .dui-row-12 .dui-span-xs-full {
        grid-column-end: span 12;
    }

    .dui-row-16 .dui-span-xs-full {
        grid-column-end: span 16;
    }

    .dui-row-18 .dui-span-xs-full {
        grid-column-end: span 18;
    }

    .dui-row-24 .dui-span-xs-full {
        grid-column-end: span 24;
    }

    .dui-row-32 .dui-span-xs-full {
        grid-column-end: span 32;
    }

    /*offset*/
    .dui-offset-xs-none {
    }

    .dui-offset-xs-0 {
        grid-column-start: 1;
    }

    .dui-offset-xs-1 {
        grid-column-start: 2;
    }

    .dui-offset-xs-2 {
        grid-column-start: 3;
    }

    .dui-offset-xs-3 {
        grid-column-start: 4;
    }

    .dui-offset-xs-4 {
        grid-column-start: 5;
    }

    .dui-offset-xs-5 {
        grid-column-start: 6;
    }

    .dui-offset-xs-6 {
        grid-column-start: 7;
    }

    .dui-offset-xs-7 {
        grid-column-start: 8;
    }

    .dui-offset-xs-8 {
        grid-column-start: 9;
    }

    .dui-offset-xs-9 {
        grid-column-start: 10;
    }

    .dui-offset-xs-10 {
        grid-column-start: 11;
    }

    .dui-offset-xs-11 {
        grid-column-start: 12;
    }

    .dui-offset-xs-12 {
        grid-column-start: 13;
    }

    .dui-offset-xs-13 {
        grid-column-start: 14;
    }

    .dui-offset-xs-14 {
        grid-column-start: 15;
    }

    .dui-offset-xs-15 {
        grid-column-start: 16;
    }

    .dui-offset-xs-16 {
        grid-column-start: 17;
    }

    .dui-offset-xs-17 {
        grid-column-start: 18;
    }

    .dui-offset-xs-18 {
        grid-column-start: 19;
    }

    .dui-offset-xs-19 {
        grid-column-start: 20;
    }

    .dui-offset-xs-20 {
        grid-column-start: 21;
    }

    .dui-offset-xs-21 {
        grid-column-start: 22;
    }

    .dui-offset-xs-22 {
        grid-column-start: 23;
    }

    .dui-offset-xs-23 {
        grid-column-start: 24;
    }

    .dui-offset-xs-24 {
        grid-column-start: 25;
    }

    .dui-offset-xs-25 {
        grid-column-start: 26;
    }

    .dui-offset-xs-26 {
        grid-column-start: 27;
    }

    .dui-offset-xs-27 {
        grid-column-start: 28;
    }

    .dui-offset-xs-28 {
        grid-column-start: 29;
    }

    .dui-offset-xs-29 {
        grid-column-start: 30;
    }

    .dui-offset-xs-30 {
        grid-column-start: 31;
    }

    .dui-offset-xs-31 {
        grid-column-start: 32;
    }
}

.dui-grid-col {
    min-inline-size: unset;
    min-height: 1px;
    max-width: 100%;
    display: block;
    flex-direction: column;
}