.flex {
    display: flex;
    --flex-grid: 12
}

.flex.inline {
    display: inline-flex
}

.flex.fullsize {
    width: 100vw;
    height: 100vh
}

.flex.column {
    flex-direction: column
}

.flex.column.reverse {
    flex-direction: column-reverse
}

.flex.reverse {
    flex-direction: row-reverse
}

.flex.wrap {
    flex-wrap: wrap
}

.flex.wrap-reverse {
    flex-wrap: wrap-reverse
}

.flex.auto > * {
    flex: 1 1 0%
}

.flex.center > * {
    margin: auto
}

.flex.justify-flex-start {
    justify-content: flex-start
}

.flex.justify-flex-end {
    justify-content: flex-end
}

.flex.justify-center {
    justify-content: center
}

.flex.justify-space-around {
    justify-content: space-around
}

.flex.justify-space-between {
    justify-content: space-between
}

.flex.align-flex-start {
    align-items: flex-start
}

.flex.align-flex-end {
    align-items: flex-end
}

.flex.align-center {
    align-items: center
}

.flex.align-stretch {
    align-items: stretch
}

.flex.align-baseline {
    align-items: baseline
}

.flex.content-flex-start {
    align-content: flex-start
}

.flex.content-flex-end {
    align-content: flex-end
}

.flex.content-center {
    align-content: center
}

.flex.content-space-around {
    align-content: space-around
}

.flex.content-space-between {
    align-content: space-between
}

.flex.content-stretch {
    align-content: stretch
}

.flex.gaps.column:not(.reverse) > :not(:last-child) {
    margin-bottom: var(--flex-gap, 1em)
}

.flex.gaps.column.reverse > :not(:last-child) {
    margin-top: var(--flex-gap, 1em)
}

.flex.gaps:not(.column):not(.reverse) > :not(:last-child) {
    margin-right: var(--flex-gap, 1em)
}

.flex.gaps:not(.column).reverse > :not(:last-child) {
    margin-left: var(--flex-gap, 1em)
}






.flex.spacing.column:not(.reverse) > div {
    padding-bottom: var(--flex-spacing, 10px)
}

.flex.spacing.column.reverse > div {
    padding-top: var(--flex-spacing, 10px)
}

.flex.spacing:not(.column):not(.reverse) > div {
    padding-right: var(--flex-spacing, 10px)
}

.flex.spacing:not(.column).reverse > div {
    padding-left: var(--flex-spacing, 10px)
}






.flex > .box.first {
    order: -1
}

.flex > .box.last {
    order: 1
}

.flex > .box.grow {
    flex: 1 0
}

.flex > .box.grow-fixed {
    flex: 1 0 0
}

@media not all and (min-resolution: 0.001dpcm) {
    .flex > .box.grow-fixed {
        flex-basis: 0%
    }
}

.flex > .box.nogrow {
    flex-grow: 0;
    flex-basis: auto
}

.flex > .box.noshrink {
    flex-shrink: 0
}

.flex > .box.center {
    margin: auto
}

.flex > .box.left {
    margin-left: 0;
    margin-right: auto
}

.flex > .box.right {
    margin-right: 0;
    margin-left: auto
}

.flex > .box.top {
    margin-top: 0;
    margin-bottom: auto
}

.flex > .box.bottom {
    margin-bottom: 0;
    margin-top: auto
}

.flex > .box.self-flex-start {
    align-self: flex-start
}

.flex > .box.self-flex-end {
    align-self: flex-end
}

.flex > .box.self-center {
    align-self: center
}

.flex > .box.self-stretch {
    align-self: stretch
}

.flex > .box.self-baseline {
    align-self: baseline
}

.flex.grid-1 > * {
    --flex-grid: 1
}

.flex .col-1 {
    --flex-col: 1
}

.flex.grid-2 > * {
    --flex-grid: 2
}

.flex .col-2 {
    --flex-col: 2
}

.flex.grid-3 > * {
    --flex-grid: 3
}

.flex .col-3 {
    --flex-col: 3
}

.flex.grid-4 > * {
    --flex-grid: 4
}

.flex .col-4 {
    --flex-col: 4
}

.flex.grid-5 > * {
    --flex-grid: 5
}

.flex .col-5 {
    --flex-col: 5
}

.flex.grid-6 > * {
    --flex-grid: 6
}

.flex .col-6 {
    --flex-col: 6
}

.flex.grid-7 > * {
    --flex-grid: 7
}

.flex .col-7 {
    --flex-col: 7
}

.flex.grid-8 > * {
    --flex-grid: 8
}

.flex .col-8 {
    --flex-col: 8
}

.flex.grid-9 > * {
    --flex-grid: 9
}

.flex .col-9 {
    --flex-col: 9
}

.flex.grid-10 > * {
    --flex-grid: 10
}

.flex .col-10 {
    --flex-col: 10
}

.flex.grid-11 > * {
    --flex-grid: 11
}

.flex .col-11 {
    --flex-col: 11
}

.flex.grid-12 > * {
    --flex-grid: 12
}

.flex .col-12 {
    --flex-col: 12
}

.flex.grid-1 > *, .flex.grid-2 > *, .flex.grid-3 > *, .flex.grid-4 > *, .flex.grid-5 > *, .flex.grid-6 > *, .flex.grid-7 > *, .flex.grid-8 > *, .flex.grid-9 > *, .flex.grid-10 > *, .flex.grid-11 > *, .flex.grid-12 > * {
    flex: 0 4 calc(100% / var(--flex-grid))
}

.flex > .col-1, .flex > .col-2, .flex > .col-3, .flex > .col-4, .flex > .col-5, .flex > .col-6, .flex > .col-7, .flex > .col-8, .flex > .col-9, .flex > .col-10, .flex > .col-11, .flex > .col-12 {
    flex: 0 1 calc(100% / var(--flex-grid) * var(--flex-col))
}

.flex > input, .flex > textarea {
    min-width: 0
}




.text-xs {
    font-size: 0.75em; /* Testo extra piccolo */
}

.text-sm {
    font-size: 0.875em; /* Testo piccolo */
}

.text-base {
    font-size: 1em; /* Testo normale */
}

.text-lg {
    font-size: 1.125em; /* Testo grande */
}

.text-xl {
    font-size: 1.25em; /* Testo extra grande */
}

.text-2xl {
    font-size: 1.5em; /* Testo doppio extra grande */
}

.text-3xl {
    font-size: 1.875em; /* Testo triplo extra grande */
}

.text-4xl {
    font-size: 2.25em; /* Testo quadruplo extra grande */
}

.text-5xl {
    font-size: 3em; /* Testo cinque volte extra grande */
}

.text-6xl {
    font-size: 4em; /* Testo sei volte extra grande */
}


.strong {
    font-weight: 700;
}



/* Extra piccolo (xs) */
@media (max-width: 767px) {
    .my-xs-1 {
        margin-top:5px;
        margin-bottom:5px;
    }
}

/* Piccolo (sm) */
@media (min-width: 768px) and (max-width: 991px) {
    .my-sm-1 {
        margin-top:5px;
        margin-bottom:5px;
    }
}

/* Medio (md) */
@media (min-width: 992px) and (max-width: 1199px) {
    .my-md-1 {
        margin-top:5px;
        margin-bottom:5px;
    }
}

/* Grande (lg) */
@media (min-width: 1200px) {
    .my-lg-1 {
        margin-top:5px;
        margin-bottom:5px;
    }
}



.font-weight-300{
    font-weight: 300 !important;
}

.font-weight-700{
    font-weight: 700 !important;
}

.mt-0 { margin-top: 0px; }
.mt-1 { margin-top: 0.25em; /* 4px */ }
.mt-2 { margin-top: 0.5em; /* 8px */ }
.mt-3 { margin-top: 0.75em; /* 12px */ }
.mt-4 { margin-top: 1em; /* 16px */ }
.mt-5 { margin-top: 1.25em; /* 20px */ }
.mt-6 { margin-top: 1.5em; /* 24px */ }
.mt-7 { margin-top: 1.75em; /* 28px */ }
.mt-8 { margin-top: 2em; /* 32px */ }
.mt-9 { margin-top: 2.25em; /* 36px */ }
.mt-10 { margin-top: 2.5em; /* 40px */ }
.mt-11 { margin-top: 2.75em; /* 44px */ }
.mt-12 { margin-top: 3em; /* 48px */ }


.mb-0 { margin-bottom: 0px; }
.mb-1 { margin-bottom: 0.25em; /* 4px */ }
.mb-2 { margin-bottom: 0.5em; /* 8px */ }
.mb-3 { margin-bottom: 0.75em; /* 12px */ }
.mb-4 { margin-bottom: 1em; /* 16px */ }
.mb-5 { margin-bottom: 1.25em; /* 20px */ }
.mb-6 { margin-bottom: 1.5em; /* 24px */ }
.mb-7 { margin-bottom: 1.75em; /* 28px */ }
.mb-8 { margin-bottom: 2em; /* 32px */ }
.mb-9 { margin-bottom: 2.25em; /* 36px */ }
.mb-10 { margin-bottom: 2.5em; /* 40px */ }
.mb-11 { margin-bottom: 2.75em; /* 44px */ }
.mb-12 { margin-bottom: 3em; /* 48px */ }

.ml-0 { margin-left: 0px; }
.ml-1 { margin-left: 0.25em; /* 4px */ }
.ml-2 { margin-left: 0.5em; /* 8px */ }
.ml-3 { margin-left: 0.75em; /* 12px */ }
.ml-4 { margin-left: 1em; /* 16px */ }
.ml-5 { margin-left: 1.25em; /* 20px */ }
.ml-6 { margin-left: 1.5em; /* 24px */ }
.ml-7 { margin-left: 1.75em; /* 28px */ }
.ml-8 { margin-left: 2em; /* 32px */ }
.ml-9 { margin-left: 2.25em; /* 36px */ }
.ml-10 { margin-left: 2.5em; /* 40px */ }
.ml-11 { margin-left: 2.75em; /* 44px */ }
.ml-12 { margin-left: 3em; /* 48px */ }

.mr-0 { margin-right: 0px; }
.mr-1 { margin-right: 0.25em; /* 4px */ }
.mr-2 { margin-right: 0.5em; /* 8px */ }
.mr-3 { margin-right: 0.75em; /* 12px */ }
.mr-4 { margin-right: 1em; /* 16px */ }
.mr-5 { margin-right: 1.25em; /* 20px */ }
.mr-6 { margin-right: 1.5em; /* 24px */ }
.mr-7 { margin-right: 1.75em; /* 28px */ }
.mr-8 { margin-right: 2em; /* 32px */ }
.mr-9 { margin-right: 2.25em; /* 36px */ }
.mr-10 { margin-right: 2.5em; /* 40px */ }
.mr-11 { margin-right: 2.75em; /* 44px */ }
.mr-12 { margin-right: 3em; /* 48px */ }


.pt-0 { padding-top: 0px; }
.pt-1 { padding-top: 0.25em; /* 4px */ }
.pt-2 { padding-top: 0.5em; /* 8px */ }
.pt-3 { padding-top: 0.75em; /* 12px */ }
.pt-4 { padding-top: 1em; /* 16px */ }
.pt-5 { padding-top: 1.25em; /* 20px */ }
.pt-6 { padding-top: 1.5em; /* 24px */ }
.pt-7 { padding-top: 1.75em; /* 28px */ }
.pt-8 { padding-top: 2em; /* 32px */ }
.pt-9 { padding-top: 2.25em; /* 36px */ }
.pt-10 { padding-top: 2.5em; /* 40px */ }
.pt-11 { padding-top: 2.75em; /* 44px */ }
.pt-12 { padding-top: 3em; /* 48px */ }



.p-0 { padding: 0px; }
.p-1 { padding: 0.25em; /* 4px */ }
.p-2 { padding: 0.5em; /* 8px */ }
.p-3 { padding: 0.75em; /* 12px */ }
.p-4 { padding: 1em; /* 16px */ }
.p-5 { padding: 1.25em; /* 20px */ }
.p-6 { padding: 1.5em; /* 24px */ }
.p-7 { padding: 1.75em; /* 28px */ }
.p-8 { padding: 2em; /* 32px */ }
.p-9 { padding: 2.25em; /* 36px */ }
.p-10 { padding: 2.5em; /* 40px */ }
.p-11 { padding: 2.75em; /* 44px */ }
.p-12 { padding: 3em; /* 48px */ }