/**
 * Casse le style des tableaux quand largeur
 */
.table-break thead {
    position: absolute;
    left: -9999px;
}
.table-break tbody {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(-1 * var(--margin));
    margin-top: calc(-1 * var(--margin));
}
.table-break tr {
    flex-grow: 0;
    flex-shrink: 1;
    margin-left: var(--margin);
    margin-top: var(--margin);
    padding: var(--margin) calc(var(--margin) / 2);

    display: flex;
    flex-wrap: wrap;
}
.table-break tfoot tr {
    padding-left: 0;
    padding-right: 0;
}
.table-break tr.o-no-marge {
    padding: 0;
}
.table-break td {
    margin: auto;
    padding: calc(var(--margin) / 2) calc(var(--margin) / 4);
    flex-grow: 0;
    text-align: center;
}

.table-break tfoot {
    display: block;
    width: 100%;
}
.table-break tfoot tr {
    display: flex;
    width: 100%;
    margin-left: -1px;
}
.table-break tfoot td {
    margin-top: 1px;
    margin-bottom: 0;
    margin-left: 1px;
    flex-grow: 1;
}


/**
 * Style de bloc largeur
 */
.table-break-c1 tr:not([class*="size"]) {
    width: 100%;
}
.table-break-c2 tr:not([class*="size"]) {
    width: calc(50% - var(--margin));
}
.table-break-c3 tr:not([class*="size"]) {
    width: calc(100% / 3 - var(--margin));
}
.table-break-c4 tr:not([class*="size"]) {
    width: calc(100% / 4 - var(--margin));
}

.container-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.container-row:not(
    [class~=o-center],
    [class~=o-content-h-sb],
    [class~=o-content-h-center],
    [class~=o-content-h-evenly]
) {
    width: calc(100% + var(--margin));
    margin-left: calc(-1 * var(--margin));
    margin-top: calc(-1 * var(--margin));
}

.container-row:not(
    [class~=o-center],
    [class*=o-content-h-]
) > * {
    margin-left: var(--margin);
    margin-top: var(--margin);
    overflow: hidden;
}


.container-row-c1 > * {
    width: 100%;
}
.container-row-c2 > * {
    width: calc(50% - var(--margin));
}
.container-row-c3 > * {
    width: calc(100% / 3 - var(--margin));
}
.container-row-c4 > * {
    width: calc(25% - var(--margin));
}

.container-row-c3 > .size-2 {
    width: calc(100% / 3 * 2 - var(--margin));
}

.container-row-c4 > .size-2 {
    width: calc(100% / 4 * 2 - var(--margin));
}
.container-row-c4 > .size-3 {
    width: calc(100% / 4 * 3 - var(--margin));
}

.container-row-c5 > .size-2 {
    width: calc(100% / 5 * 2 - var(--margin));
}
.container-row-c5 > .size-3 {
    width: calc(100% / 5 * 3 - var(--margin));
}
.container-row-c5 > .size-4 {
    width: calc(100% / 5 * 4 - var(--margin));
}

.container-row-c6 > .size-2 {
    width: calc(100% / 6 * 2 - var(--margin));
}
.container-row-c6 > .size-3 {
    width: calc(100% / 6 * 3 - var(--margin));
}
.container-row-c6 > .size-4 {
    width: calc(100% / 6 * 4 - var(--margin));
}
.container-row-c6 > .size-5 {
    width: calc(100% / 6 * 5 - var(--margin));
}

/**
 * Style de bloc grid
 */
.container-grid {
    display: grid;
    grid-gap: var(--margin);
    justify-content: space-between;
    width: 100%;
}

.container-grid-c1 {
    grid-template-columns: repeat(auto-fill, 100%);
}

.container-grid-c2 {
    grid-template-columns: repeat(auto-fill, calc(50% - var(--margin) / 2));
}

.container-grid-c3 {
    grid-template-columns: repeat(auto-fill, calc(100% / 3 - var(--margin) / 3 * 2));
}

.container-grid-c4 {
    grid-template-columns: repeat(auto-fill, calc(25% - var(--margin) / 4 * 3));
}

.container-grid-c5 {
    grid-template-columns: repeat(auto-fill, calc(100% / 5 - var(--margin) / 5 * 4));
}

.container-grid-c6 {
    grid-template-columns: repeat(auto-fill, calc(100% / 6 - var(--margin) / 6 * 5));
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-4 {
    order: 4;
}

.order-5 {
    order: 5;
}

.order-6 {
    order: 6;
}

.order-7 {
    order: 7;
}

.order-8 {
    order: 8;
}

.order-9 {
    order: 9;
}

.order-10 {
    order: 10;
}

.order-11 {
    order: 11;
}

.order-12 {
    order: 12;
}

.order-13 {
    order: 13;
}

.order-14 {
    order: 14;
}

.order-15 {
    order: 15;
}

.order-16 {
    order: 16;
}

.order-16 {
    order: 16;
}

.order-17 {
    order: 17;
}

.order-18 {
    order: 18;
}

.order-19 {
    order: 19;
}

.order-20 {
    order: 20;
}

/**
 * Configure la taille de l'élément suivant l'espace à occuper
 */
.size-1-2 {
    width: calc(100% / 2 * 1 - var(--margin));
}
.size-1-3 {
    width: calc(100% / 3 * 1 - var(--margin));
}
.size-2-3 {
    width: calc(100% / 3 * 2 - var(--margin));
}
.size-1-4 {
    width: calc(100% / 4 * 1 - var(--margin));
}
.size-2-4 {
    width: calc(100% / 4 * 2 - var(--margin));
}
.size-3-4 {
    width: calc(100% / 4 * 3 - var(--margin));
}
.size-1-5 {
    width: calc(100% / 5 * 1 - var(--margin));
}
.size-2-5 {
    width: calc(100% / 5 * 2 - var(--margin));
}
.size-3-5 {
    width: calc(100% / 5 * 3 - var(--margin));
}
.size-4-5 {
    width: calc(100% / 5 * 4 - var(--margin));
}
.size-1-6 {
    width: calc(100% / 6 * 1 - var(--margin));
}
.size-2-6 {
    width: calc(100% / 6 * 2 - var(--margin));
}
.size-3-6 {
    width: calc(100% / 6 * 3 - var(--margin));
}
.size-4-6 {
    width: calc(100% / 6 * 4 - var(--margin));
}
.size-5-6 {
    width: calc(100% / 6 * 5 - var(--margin));
}
.size-1-7 {
    width: calc(100% / 7 * 1 - var(--margin));
}
.size-2-7 {
    width: calc(100% / 7 * 2 - var(--margin));
}
.size-3-7 {
    width: calc(100% / 7 * 3 - var(--margin));
}
.size-4-7 {
    width: calc(100% / 7 * 4 - var(--margin));
}
.size-5-7 {
    width: calc(100% / 7 * 5 - var(--margin));
}
.size-6-7 {
    width: calc(100% / 7 * 6 - var(--margin));
}
.size-1-8 {
    width: calc(100% / 8 * 1 - var(--margin));
}
.size-2-8 {
    width: calc(100% / 8 * 2 - var(--margin));
}
.size-3-8 {
    width: calc(100% / 8 * 3 - var(--margin));
}
.size-4-8 {
    width: calc(100% / 8 * 4 - var(--margin));
}
.size-5-8 {
    width: calc(100% / 8 * 5 - var(--margin));
}
.size-6-8 {
    width: calc(100% / 8 * 6 - var(--margin));
}
.size-7-8 {
    width: calc(100% / 8 * 7 - var(--margin));
}
.table-break td.size-1-1,
.size-1-1 {
    width: 100%;
}
.size-grow {
    width: auto;
    flex-grow: 1;
}


.size-50 {
    width: 50px;
}
.size-100 {
    width: 100px;
}
.size-150 {
    width: 150px;
}
.size-200 {
    width: 200px;
}
.size-250 {
    width: 250px;
}
.size-300 {
    width: 300px;
}
.size-350 {
    width: 350px;
}
.size-400 {
    width: 400px;
}
.size-450 {
    width: 450px;
}
.size-500 {
    width: 500px;
}
.size-550 {
    width: 550px;
}
.size-600 {
    width: 600px;
}
.size-650 {
    width: 650px;
}
.size-700 {
    width: 700px;
}
.size-750 {
    width: 750px;
}
.size-800 {
    width: 800px;
}
.size-850 {
    width: 850px;
}
.size-900 {
    width: 900px;
}
.size-950 {
    width: 950px;
}
.size-1000 {
    width: 1000px;
}
.size-1050 {
    width: 1050px;
}
.size-1100 {
    width: 1100px;
}
.size-1150 {
    width: 1150px;
}
.size-1200 {
    width: 1200px;
}
.size-1250 {
    width: 1250px;
}
.size-1300 {
    width: 1300px;
}
.size-1350 {
    width: 1350px;
}
.size-1400 {
    width: 1400px;
}
.size-1450 {
    width: 1450px;
}
.size-1500 {
    width: 1500px;
}
.size-1550 {
    width: 1550px;
}
.size-1600 {
    width: 1600px;
}
.size-1650 {
    width: 1650px;
}
.size-1700 {
    width: 1700px;
}
.size-1750 {
    width: 1750px;
}
.size-1800 {
    width: 1800px;
}
.size-1850 {
    width: 1850px;
}
.size-1900 {
    width: 1900px;
}
.size-1950 {
    width: 1950px;
}
.size-2000 {
    width: 2000px;
}

.size-max-50 {
    max-width: 50px;
}
.size-max-100 {
    max-width: 100px;
}
.size-max-150 {
    max-width: 150px;
}
.size-max-200 {
    max-width: 200px;
}
.size-max-250 {
    max-width: 250px;
}
.size-max-300 {
    max-width: 300px;
}
.size-max-350 {
    max-width: 350px;
}
.size-max-400 {
    max-width: 400px;
}
.size-max-450 {
    max-width: 450px;
}
.size-max-500 {
    max-width: 500px;
}
.size-max-550 {
    max-width: 550px;
}
.size-max-600 {
    max-width: 600px;
}
.size-max-650 {
    max-width: 650px;
}
.size-max-700 {
    max-width: 700px;
}
.size-max-750 {
    max-width: 750px;
}
.size-max-800 {
    max-width: 800px;
}
.size-max-850 {
    max-width: 850px;
}
.size-max-900 {
    max-width: 900px;
}
.size-max-950 {
    max-width: 950px;
}
.size-max-1000 {
    max-width: 1000px;
}
.size-max-1050 {
    max-width: 1050px;
}
.size-max-1100 {
    max-width: 1100px;
}
.size-max-1150 {
    max-width: 1150px;
}
.size-max-1200 {
    max-width: 1200px;
}
.size-max-1250 {
    max-width: 1250px;
}
.size-max-1300 {
    max-width: 1300px;
}
.size-max-1350 {
    max-width: 1350px;
}
.size-max-1400 {
    max-width: 1400px;
}
.size-max-1450 {
    max-width: 1450px;
}
.size-max-1500 {
    max-width: 1500px;
}
.size-max-1550 {
    max-width: 1550px;
}
.size-max-1600 {
    max-width: 1600px;
}
.size-max-1650 {
    max-width: 1650px;
}
.size-max-1700 {
    max-width: 1700px;
}
.size-max-1750 {
    max-width: 1750px;
}
.size-max-1800 {
    max-width: 1800px;
}
.size-max-1850 {
    max-width: 1850px;
}
.size-max-1900 {
    max-width: 1900px;
}
.size-max-1950 {
    max-width: 1950px;
}
.size-max-2000 {
    max-width: 2000px;
}
.size-max-auto {
    max-width: inherit;
}

.o-center {
    margin-left: auto;
    margin-right: auto;
}
.o-top {
    margin-top: 0;
    margin-bottom: auto;
}
.o-bottom {
    margin-top: auto;
    margin-bottom: 0;
}
.o-left {
    margin-left: 0;
    margin-right: auto;
}
.o-right {
    margin-left: auto;
    margin-right: 0;
}



.o-content-center {
    align-items: center;
    justify-content: center;
}
.o-content-left {
    align-items: flex-start;
    justify-content: flex-start;
}
.o-content-right {
    align-items: flex-end;
    justify-content: flex-end;
}



.o-content-h-center {
    justify-content: center;
}
.o-content-h-left {
    justify-content: flex-start;
}
.o-content-h-right {
    justify-content: flex-end;
}
.o-content-h-evenly {
    justify-content: space-evenly;
}
.o-content-h-sb {
    justify-content: space-between;
}



.o-content-v-center {
    align-items: center;
}
.o-content-v-left {
    align-items: flex-start;
}
.o-content-v-right {
    align-items: flex-end;
}

.o-length-xxsmall {
    width: var(--length-xxsmall, 2.5rem);
}

.o-length-xsmall {
    width: var(--length-xsmall, 5rem);
}

.o-length-small {
    width: var(--length-small, 8rem);
}

.o-length-normal {
    width: var(--length-normal, 11rem);
}

.o-length-large {
    width: var(--length-large, 15rem);
}

.o-length-xlarge {
    width: var(--length-xlarge, 22rem);
}

.o-length-xxlarge {
    width: var(--length-xxlarge, 27rem);
}

.o-length-max {
    width: calc(100% - 2 * var(--margin));
}

.o-length-grow {
    width: auto;
    flex-grow: 1;
}

/* Marges extérieures */

.o-e-factor-0 {
    margin: 0;
}
.o-e-factor-1 {
    margin: var(--factor);
}
.o-e-factor-2 {
    margin: calc(2 * var(--factor));
}
.o-e-factor-3 {
    margin: calc(3 * var(--factor));
}
.o-e-factor-4 {
    margin: calc(4 * var(--factor));
}


.o-e-factor-t-0 {
    margin-top: 0;
}
.o-e-factor-t-1 {
    margin-top: var(--factor);
}
.o-e-factor-t-2 {
    margin-top: calc(2 * var(--factor));
}
.o-e-factor-t-3 {
    margin-top: calc(3 * var(--factor));
}
.o-e-factor-t-4 {
    margin-top: calc(4 * var(--factor));
}


.o-e-factor-b-0 {
    margin-bottom: 0;
}
.o-e-factor-b-1 {
    margin-bottom: var(--factor);
}
.o-e-factor-b-2 {
    margin-bottom: calc(2 * var(--factor));
}
.o-e-factor-b-3 {
    margin-bottom: calc(3 * var(--factor));
}
.o-e-factor-b-4 {
    margin-bottom: calc(4 * var(--factor));
}


.o-e-factor-tb-0 {
    margin-top: 0;
    margin-bottom: 0;
}
.o-e-factor-tb-1 {
    margin-top: var(--factor);
    margin-bottom: var(--factor);
}
.o-e-factor-tb-2 {
    margin-top: calc(2 * var(--factor));
    margin-bottom: calc(2 * var(--factor));
}
.o-e-factor-tb-3 {
    margin-top: calc(3 * var(--factor));
    margin-bottom: calc(3 * var(--factor));
}
.o-e-factor-tb-4 {
    margin-top: calc(4 * var(--factor));
    margin-bottom: calc(4 * var(--factor));
}


.o-e-factor-l-0 {
    margin-left: 0;
}
.o-e-factor-l-1 {
    margin-left: var(--factor);
}
.o-e-factor-l-2 {
    margin-left: calc(2 * var(--factor));
}
.o-e-factor-l-3 {
    margin-left: calc(3 * var(--factor));
}
.o-e-factor-l-4 {
    margin-left: calc(4 * var(--factor));
}


.o-e-factor-r-0 {
    margin-right: 0;
}
.o-e-factor-r-1 {
    margin-right: var(--factor);
}
.o-e-factor-r-2 {
    margin-right: calc(2 * var(--factor));
}
.o-e-factor-r-3 {
    margin-right: calc(3 * var(--factor));
}
.o-e-factor-r-4 {
    margin-right: calc(4 * var(--factor));
}


.o-e-factor-lr-0 {
    margin-left: 0;
    margin-right: 0;
}
.o-e-factor-lr-1 {
    margin-left: var(--factor);
    margin-right: var(--factor);
}
.o-e-factor-lr-2 {
    margin-left: calc(2 * var(--factor));
    margin-right: calc(2 * var(--factor));
}
.o-e-factor-lr-3 {
    margin-left: calc(3 * var(--factor));
    margin-right: calc(3 * var(--factor));
}
.o-e-factor-lr-4 {
    margin-left: calc(4 * var(--factor));
    margin-right: calc(4 * var(--factor));
}


/* Marges intérieures */

.o-i-factor-0 {
    padding: 0;
}
.o-i-factor-1 {
    padding: var(--factor);
}
.o-i-factor-2 {
    padding: calc(2 * var(--factor));
}
.o-i-factor-3 {
    padding: calc(3 * var(--factor));
}
.o-i-factor-4 {
    padding: calc(4 * var(--factor));
}

.o-i-factor-t-0 {
    padding-top: 0;
}
.o-i-factor-t-1 {
    padding-top: var(--factor);
}
.o-i-factor-t-2 {
    padding-top: calc(2 * var(--factor));
}
.o-i-factor-t-3 {
    padding-top: calc(3 * var(--factor));
}
.o-i-factor-t-4 {
    padding-top: calc(4 * var(--factor));
}

.o-i-factor-b-0 {
    padding-bottom: 0;
}
.o-i-factor-b-1 {
    padding-bottom: var(--factor);
}
.o-i-factor-b-2 {
    padding-bottom: calc(2 * var(--factor));
}
.o-i-factor-b-3 {
    padding-bottom: calc(3 * var(--factor));
}
.o-i-factor-b-4 {
    padding-bottom: calc(4 * var(--factor));
}

.o-i-factor-tb-0 {
    padding-top: 0;
    padding-bottom: 0;
}
.o-i-factor-tb-1 {
    padding-top: var(--factor);
    padding-bottom: var(--factor);
}
.o-i-factor-tb-2 {
    padding-top: calc(2 * var(--factor));
    padding-bottom: calc(2 * var(--factor));
}
.o-i-factor-tb-3 {
    padding-top: calc(3 * var(--factor));
    padding-bottom: calc(3 * var(--factor));
}
.o-i-factor-tb-3 {
    padding-top: calc(3 * var(--factor));
    padding-bottom: calc(3 * var(--factor));
}

.o-i-factor-l-0 {
    padding-left: 0;
}
.o-i-factor-l-1 {
    padding-left: var(--factor);
}
.o-i-factor-l-2 {
    padding-left: calc(2 * var(--factor));
}
.o-i-factor-l-3 {
    padding-left: calc(3 * var(--factor));
}
.o-i-factor-l-4 {
    padding-left: calc(4 * var(--factor));
}

.o-i-factor-r-0 {
    padding-right: 0;
}
.o-i-factor-r-1 {
    padding-right: var(--factor);
}
.o-i-factor-r-2 {
    padding-right: calc(2 * var(--factor));
}
.o-i-factor-r-3 {
    padding-right: calc(3 * var(--factor));
}
.o-i-factor-r-4 {
    padding-right: calc(4 * var(--factor));
}

/* Marges extérieures */

.o-e-margin-0 {
    margin: 0;
}
.o-e-margin-1 {
    margin: var(--margin);
}
.o-e-margin-2 {
    margin: calc(2 * var(--margin));
}
.o-e-margin-3 {
    margin: calc(3 * var(--margin));
}
.o-e-margin-4 {
    margin: calc(4 * var(--margin));
}


.o-e-margin-t-0 {
    margin-top: 0;
}
.o-e-margin-t-1 {
    margin-top: var(--margin);
}
.o-e-margin-t-2 {
    margin-top: calc(2 * var(--margin));
}
.o-e-margin-t-3 {
    margin-top: calc(3 * var(--margin));
}
.o-e-margin-t-4 {
    margin-top: calc(4 * var(--margin));
}


.o-e-margin-b-0 {
    margin-bottom: 0;
}
.o-e-margin-b-1 {
    margin-bottom: var(--margin);
}
.o-e-margin-b-2 {
    margin-bottom: calc(2 * var(--margin));
}
.o-e-margin-b-3 {
    margin-bottom: calc(3 * var(--margin));
}
.o-e-margin-b-4 {
    margin-bottom: calc(4 * var(--margin));
}


.o-e-margin-tb-0 {
    margin-top: 0;
    margin-bottom: 0;
}
.o-e-margin-tb-1 {
    margin-top: var(--margin);
    margin-bottom: var(--margin);
}
.o-e-margin-tb-2 {
    margin-top: calc(2 * var(--margin));
    margin-bottom: calc(2 * var(--margin));
}
.o-e-margin-tb-3 {
    margin-top: calc(3 * var(--margin));
    margin-bottom: calc(3 * var(--margin));
}
.o-e-margin-tb-4 {
    margin-top: calc(4 * var(--margin));
    margin-bottom: calc(4 * var(--margin));
}


.o-e-margin-l-0 {
    margin-left: 0;
}
.o-e-margin-l-1 {
    margin-left: var(--margin);
}
.o-e-margin-l-2 {
    margin-left: calc(2 * var(--margin));
}
.o-e-margin-l-3 {
    margin-left: calc(3 * var(--margin));
}
.o-e-margin-l-4 {
    margin-left: calc(4 * var(--margin));
}


.o-e-margin-r-0 {
    margin-right: 0;
}
.o-e-margin-r-1 {
    margin-right: var(--margin);
}
.o-e-margin-r-2 {
    margin-right: calc(2 * var(--margin));
}
.o-e-margin-r-3 {
    margin-right: calc(3 * var(--margin));
}
.o-e-margin-r-4 {
    margin-right: calc(4 * var(--margin));
}


.o-e-margin-lr-0 {
    margin-left: 0;
    margin-right: 0;
}
.o-e-margin-lr-1 {
    margin-left: var(--margin);
    margin-right: var(--margin);
}
.o-e-margin-lr-2 {
    margin-left: calc(2 * var(--margin));
    margin-right: calc(2 * var(--margin));
}
.o-e-margin-lr-3 {
    margin-left: calc(3 * var(--margin));
    margin-right: calc(3 * var(--margin));
}
.o-e-margin-lr-4 {
    margin-left: calc(4 * var(--margin));
    margin-right: calc(4 * var(--margin));
}


/* Marges intérieures */

.o-i-margin-0 {
    padding: 0;
}
.o-i-margin-1 {
    padding: var(--margin);
}
.o-i-margin-2 {
    padding: calc(2 * var(--margin));
}
.o-i-margin-3 {
    padding: calc(3 * var(--margin));
}
.o-i-margin-4 {
    padding: calc(4 * var(--margin));
}

.o-i-margin-t-0 {
    padding-top: 0;
}
.o-i-margin-t-1 {
    padding-top: var(--margin);
}
.o-i-margin-t-2 {
    padding-top: calc(2 * var(--margin));
}
.o-i-margin-t-3 {
    padding-top: calc(3 * var(--margin));
}
.o-i-margin-t-4 {
    padding-top: calc(4 * var(--margin));
}

.o-i-margin-b-0 {
    padding-bottom: 0;
}
.o-i-margin-b-1 {
    padding-bottom: var(--margin);
}
.o-i-margin-b-2 {
    padding-bottom: calc(2 * var(--margin));
}
.o-i-margin-b-3 {
    padding-bottom: calc(3 * var(--margin));
}
.o-i-margin-b-4 {
    padding-bottom: calc(4 * var(--margin));
}

.o-i-margin-tb-0 {
    padding-top: 0;
    padding-bottom: 0;
}
.o-i-margin-tb-1 {
    padding-top: var(--margin);
    padding-bottom: var(--margin);
}
.o-i-margin-tb-2 {
    padding-top: calc(2 * var(--margin));
    padding-bottom: calc(2 * var(--margin));
}
.o-i-margin-tb-3 {
    padding-top: calc(3 * var(--margin));
    padding-bottom: calc(3 * var(--margin));
}
.o-i-margin-tb-3 {
    padding-top: calc(3 * var(--margin));
    padding-bottom: calc(3 * var(--margin));
}

.o-i-margin-l-0 {
    padding-left: 0;
}
.o-i-margin-l-1 {
    padding-left: var(--margin);
}
.o-i-margin-l-2 {
    padding-left: calc(2 * var(--margin));
}
.o-i-margin-l-3 {
    padding-left: calc(3 * var(--margin));
}
.o-i-margin-l-4 {
    padding-left: calc(4 * var(--margin));
}

.o-i-margin-r-0 {
    padding-right: 0;
}
.o-i-margin-r-1 {
    padding-right: var(--margin);
}
.o-i-margin-r-2 {
    padding-right: calc(2 * var(--margin));
}
.o-i-margin-r-3 {
    padding-right: calc(3 * var(--margin));
}
.o-i-margin-r-4 {
    padding-right: calc(4 * var(--margin));
}

.o-text-normal {
    text-transform: none;
}
.o-text-upper {
    text-transform: uppercase;
}
.o-text-lower {
    text-transform: lowercase;
}


.o-text-wrap {
    white-space: normal;
}
.o-text-no-wrap {
    white-space: nowrap;
}


.o-text-left {
    text-align: left;
}
.o-text-right {
    text-align: right;
}
.o-text-center {
    text-align: center;
}


.o-text-xxsmall {
    font-size: var(--font-size-xxsmall, 1rem);
}
.o-text-xsmall {
    font-size: var(--font-size-xsmall, 1.2rem);
}
.o-text-small {
    font-size: var(--font-size-small, 1.35rem);
}
.o-text-normal {
    font-size: var(--font-size-normal, 1.5rem);
}
.o-text-large {
    font-size: var(--font-size-large, 1.6rem);
}
.o-text-xlarge {
    font-size: var(--font-size-xlarge, 1.8rem);
}
.o-text-xxlarge {
    font-size: var(--font-size-xxlarge, 2rem);
}
.o-text-xxxlarge {
    font-size: var(--font-size-xxxlarge, 2.2rem);
}


.o-text-weight-200 {
    font-weight: 200;
}
.o-text-weight-300 {
    font-weight: 300;
}
.o-text-weight-400 {
    font-weight: 400;
}
.o-text-weight-500 {
    font-weight: 500;
}
.o-text-weight-600 {
    font-weight: 600;
}
.o-text-weight-700 {
    font-weight: 700;
}
.o-text-weight-800 {
    font-weight: 800;
}

.o-show {
    display: unset;
}
.o-show-block {
    display: block;
}
.o-show-inline {
    display: inline;
}
.o-show-iblock {
    display: inline-block;
}
.o-show-iflex {
    display: inline-flex;
}
.o-show-flex {
    display: flex;
}
.o-hide {
    display: none;
}



.o-radius-1 {
    border-radius: 10px;
}
.o-radius-2 {
    border-radius: 10px;
}
.o-radius-3 {
    border-radius: 10px;
}
.o-radius-4 {
    border-radius: 10px;
}
.o-radius-5 {
    border-radius: 10px;
}



.o-wrap {
    flex-wrap: wrap;
}
.o-no-wrap {
    flex-wrap: nowrap;
}



.o-disabled {
    filter: grayscale(100%);
    opacity: .6;
}



.o-zoom-hover {
    transition: 200ms linear transform;
}
.o-zoom-hover:hover {
    transform: scale(1.3);
}

.item-status-container {
    white-space: nowrap;
    text-align: center;
}

.item-status {
    font-weight: 600;
    padding: 5px 10px;
    border-radius: .3em;
    white-space: nowrap;
    background-color: var(--bg-color, #424242);
    color: var(--fg-color, #FFFFFF);
    display: inline-block;
    min-width: 50px;
}

.item-status-active {
    --bg-color: #49A078;
}

.item-status-inactive {
    --bg-color: #F24236;
}

.item-status-draft {
    --bg-color: #666666;
}

.item-status-pending-moderation {
    --bg-color: #e66100;
}

:root {    --main-color: RGB(52, 62, 81);}