/*----------------------------------------------------------*/
/*---------------------- GRID BASE CSS ---------------------*/
/*----------------------------------------------------------*/

.ro-cl {
    display: flex;
    flex-wrap: wrap;
}

.cont-cl {
    box-sizing: border-box;
    /*overflow: hidden;*/
    position: relative;
    min-height: 100%;
}

.scroll-wrapper-x {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1rem 2rem;
    width: 100%;
}

.elem-scadenze-xp {
    flex: 0 0 auto;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* === COLONNE - Mobile first (default) === */

.cl-0 {
    flex: 0 0 0%;
    max-width: 0%;
}

.cl-1 {
    flex: 0 0 calc(100% / 12 * 1);
    max-width: calc(100% / 12 * 1);
}

.cl-2 {
    flex: 0 0 calc(100% / 12 * 2);
    max-width: calc(100% / 12 * 2);
}

.cl-3 {
    flex: 0 0 calc(100% / 12 * 3);
    max-width: calc(100% / 12 * 3);
}

.cl-4 {
    flex: 0 0 calc(100% / 12 * 4);
    max-width: calc(100% / 12 * 4);
}

.cl-5 {
    flex: 0 0 calc(100% / 12 * 5);
    max-width: calc(100% / 12 * 5);
}

.cl-6 {
    flex: 0 0 calc(100% / 12 * 6);
    max-width: calc(100% / 12 * 6);
}

.cl-7 {
    flex: 0 0 calc(100% / 12 * 7);
    max-width: calc(100% / 12 * 7);
}

.cl-8 {
    flex: 0 0 calc(100% / 12 * 8);
    max-width: calc(100% / 12 * 8);
}

.cl-9 {
    flex: 0 0 calc(100% / 12 * 9);
    max-width: calc(100% / 12 * 9);
}

.cl-10 {
    flex: 0 0 calc(100% / 12 * 10);
    max-width: calc(100% / 12 * 10);
}

.cl-11 {
    flex: 0 0 calc(100% / 12 * 11);
    max-width: calc(100% / 12 * 11);
}

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

/* === Tablet (≥576px) === */
@media (min-width: 576px) {

    .cl-sm-0 {
        flex: 0 0 0%;
        max-width: 0%;
    }

    .cl-sm-1 {
        flex: 0 0 calc(100% / 12 * 1);
        max-width: calc(100% / 12 * 1);
    }

    .cl-sm-2 {
        flex: 0 0 calc(100% / 12 * 2);
        max-width: calc(100% / 12 * 2);
    }

    .cl-sm-3 {
        flex: 0 0 calc(100% / 12 * 3);
        max-width: calc(100% / 12 * 3);
    }

    .cl-sm-4 {
        flex: 0 0 calc(100% / 12 * 4);
        max-width: calc(100% / 12 * 4);
    }

    .cl-sm-5 {
        flex: 0 0 calc(100% / 12 * 5);
        max-width: calc(100% / 12 * 5);
    }

    .cl-sm-6 {
        flex: 0 0 calc(100% / 12 * 6);
        max-width: calc(100% / 12 * 6);
    }

    .cl-sm-7 {
        flex: 0 0 calc(100% / 12 * 7);
        max-width: calc(100% / 12 * 7);
    }

    .cl-sm-8 {
        flex: 0 0 calc(100% / 12 * 8);
        max-width: calc(100% / 12 * 8);
    }

    .cl-sm-9 {
        flex: 0 0 calc(100% / 12 * 9);
        max-width: calc(100% / 12 * 9);
    }

    .cl-sm-10 {
        flex: 0 0 calc(100% / 12 * 10);
        max-width: calc(100% / 12 * 10);
    }

    .cl-sm-11 {
        flex: 0 0 calc(100% / 12 * 11);
        max-width: calc(100% / 12 * 11);
    }

    .cl-sm-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* === Tablet (≥750px) === */
@media (min-width: 800px) {

    .cl-md-0 {
        flex: 0 0 0%;
        max-width: 0%;
    }

    .cl-md-1 {
        flex: 0 0 calc(100% / 12 * 1);
        max-width: calc(100% / 12 * 1);
    }

    .cl-md-2 {
        flex: 0 0 calc(100% / 12 * 2);
        max-width: calc(100% / 12 * 2);
    }

    .cl-md-3 {
        flex: 0 0 calc(100% / 12 * 3);
        max-width: calc(100% / 12 * 3);
    }

    .cl-md-4 {
        flex: 0 0 calc(100% / 12 * 4);
        max-width: calc(100% / 12 * 4);
    }

    .cl-md-5 {
        flex: 0 0 calc(100% / 12 * 5);
        max-width: calc(100% / 12 * 5);
    }

    .cl-md-6 {
        flex: 0 0 calc(100% / 12 * 6);
        max-width: calc(100% / 12 * 6);
    }

    .cl-md-7 {
        flex: 0 0 calc(100% / 12 * 7);
        max-width: calc(100% / 12 * 7);
    }

    .cl-md-8 {
        flex: 0 0 calc(100% / 12 * 8);
        max-width: calc(100% / 12 * 8);
    }

    .cl-md-9 {
        flex: 0 0 calc(100% / 12 * 9);
        max-width: calc(100% / 12 * 9);
    }

    .cl-md-10 {
        flex: 0 0 calc(100% / 12 * 10);
        max-width: calc(100% / 12 * 10);
    }

    .cl-md-11 {
        flex: 0 0 calc(100% / 12 * 11);
        max-width: calc(100% / 12 * 11);
    }

    .cl-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* === Desktop (≥992px) === */
@media (min-width: 992px) {

    .cl-lg-0 {
        flex: 0 0 0%;
        max-width: 0%;
    }

    .cl-lg-1 {
        flex: 0 0 calc(100% / 12 * 1);
        max-width: calc(100% / 12 * 1);
    }

    .cl-lg-2 {
        flex: 0 0 calc(100% / 12 * 2);
        max-width: calc(100% / 12 * 2);
    }

    .cl-lg-3 {
        flex: 0 0 calc(100% / 12 * 3);
        max-width: calc(100% / 12 * 3);
    }

    .cl-lg-4 {
        flex: 0 0 calc(100% / 12 * 4);
        max-width: calc(100% / 12 * 4);
    }

    .cl-lg-5 {
        flex: 0 0 calc(100% / 12 * 5);
        max-width: calc(100% / 12 * 5);
    }

    .cl-lg-6 {
        flex: 0 0 calc(100% / 12 * 6);
        max-width: calc(100% / 12 * 6);
    }

    .cl-lg-7 {
        flex: 0 0 calc(100% / 12 * 7);
        max-width: calc(100% / 12 * 7);
    }

    .cl-lg-8 {
        flex: 0 0 calc(100% / 12 * 8);
        max-width: calc(100% / 12 * 8);
    }

    .cl-lg-9 {
        flex: 0 0 calc(100% / 12 * 9);
        max-width: calc(100% / 12 * 9);
    }

    .cl-lg-10 {
        flex: 0 0 calc(100% / 12 * 10);
        max-width: calc(100% / 12 * 10);
    }

    .cl-lg-11 {
        flex: 0 0 calc(100% / 12 * 11);
        max-width: calc(100% / 12 * 11);
    }

    .cl-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* === Desktop (≥1000px) === */
@media (min-width: 1000px) {

    .cl-mega-0 {
        flex: 0 0 0%;
        max-width: 0%;
    }

    .cl-mega-1 {
        flex: 0 0 calc(100% / 12 * 1);
        max-width: calc(100% / 12 * 1);
    }

    .cl-mega-2 {
        flex: 0 0 calc(100% / 12 * 2);
        max-width: calc(100% / 12 * 2);
    }

    .cl-mega-3 {
        flex: 0 0 calc(100% / 12 * 3);
        max-width: calc(100% / 12 * 3);
    }

    .cl-mega-4 {
        flex: 0 0 calc(100% / 12 * 4);
        max-width: calc(100% / 12 * 4);
    }

    .cl-mega-5 {
        flex: 0 0 calc(100% / 12 * 5);
        max-width: calc(100% / 12 * 5);
    }

    .cl-mega-6 {
        flex: 0 0 calc(100% / 12 * 6);
        max-width: calc(100% / 12 * 6);
    }

    .cl-mega-7 {
        flex: 0 0 calc(100% / 12 * 7);
        max-width: calc(100% / 12 * 7);
    }

    .cl-mega-8 {
        flex: 0 0 calc(100% / 12 * 8);
        max-width: calc(100% / 12 * 8);
    }

    .cl-mega-9 {
        flex: 0 0 calc(100% / 12 * 9);
        max-width: calc(100% / 12 * 9);
    }

    .cl-mega-10 {
        flex: 0 0 calc(100% / 12 * 10);
        max-width: calc(100% / 12 * 10);
    }

    .cl-mega-11 {
        flex: 0 0 calc(100% / 12 * 11);
        max-width: calc(100% / 12 * 11);
    }

    .cl-mega-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* === Desktop (≥1200px) === */
@media (min-width: 1200px) {

    .cl-ultra-0 {
        flex: 0 0 0%;
        max-width: 0%;
    }

    .cl-ultra-1 {
        flex: 0 0 calc(100% / 12 * 1);
        max-width: calc(100% / 12 * 1);
    }

    .cl-ultra-2 {
        flex: 0 0 calc(100% / 12 * 2);
        max-width: calc(100% / 12 * 2);
    }

    .cl-ultra-3 {
        flex: 0 0 calc(100% / 12 * 3);
        max-width: calc(100% / 12 * 3);
    }

    .cl-ultra-4 {
        flex: 0 0 calc(100% / 12 * 4);
        max-width: calc(100% / 12 * 4);
    }

    .cl-ultra-5 {
        flex: 0 0 calc(100% / 12 * 5);
        max-width: calc(100% / 12 * 5);
    }

    .cl-ultra-6 {
        flex: 0 0 calc(100% / 12 * 6);
        max-width: calc(100% / 12 * 6);
    }

    .cl-ultra-7 {
        flex: 0 0 calc(100% / 12 * 7);
        max-width: calc(100% / 12 * 7);
    }

    .cl-ultra-8 {
        flex: 0 0 calc(100% / 12 * 8);
        max-width: calc(100% / 12 * 8);
    }

    .cl-ultra-9 {
        flex: 0 0 calc(100% / 12 * 9);
        max-width: calc(100% / 12 * 9);
    }

    .cl-ultra-10 {
        flex: 0 0 calc(100% / 12 * 10);
        max-width: calc(100% / 12 * 10);
    }

    .cl-ultra-11 {
        flex: 0 0 calc(100% / 12 * 11);
        max-width: calc(100% / 12 * 11);
    }

    .cl-ultra-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* === Desktop (≥1200px) === */
@media (min-width: 1280px) {

    .cl-matrix-0 {
        flex: 0 0 0%;
        max-width: 0%;
    }

    .cl-matrix-1 {
        flex: 0 0 calc(100% / 12 * 1);
        max-width: calc(100% / 12 * 1);
    }

    .cl-matrix-2 {
        flex: 0 0 calc(100% / 12 * 2);
        max-width: calc(100% / 12 * 2);
    }

    .cl-matrix-3 {
        flex: 0 0 calc(100% / 12 * 3);
        max-width: calc(100% / 12 * 3);
    }

    .cl-matrix-4 {
        flex: 0 0 calc(100% / 12 * 4);
        max-width: calc(100% / 12 * 4);
    }

    .cl-matrix-5 {
        flex: 0 0 calc(100% / 12 * 5);
        max-width: calc(100% / 12 * 5);
    }

    .cl-matrix-6 {
        flex: 0 0 calc(100% / 12 * 6);
        max-width: calc(100% / 12 * 6);
    }

    .cl-matrix-7 {
        flex: 0 0 calc(100% / 12 * 7);
        max-width: calc(100% / 12 * 7);
    }

    .cl-matrix-8 {
        flex: 0 0 calc(100% / 12 * 8);
        max-width: calc(100% / 12 * 8);
    }

    .cl-matrix-9 {
        flex: 0 0 calc(100% / 12 * 9);
        max-width: calc(100% / 12 * 9);
    }

    .cl-matrix-10 {
        flex: 0 0 calc(100% / 12 * 10);
        max-width: calc(100% / 12 * 10);
    }

    .cl-matrix-11 {
        flex: 0 0 calc(100% / 12 * 11);
        max-width: calc(100% / 12 * 11);
    }

    .cl-matrix-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .hide-on-small {
        display: none !important;
    }
}

@media (max-width: 800px) {
    .visible-on-mobile-fullpage {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (min-width: 800px) {
    .visible-only-on-mobile {
        display: none !important;
    }
}

@media (max-width: 800px) {
    .hide-on-mobile {
        display: none !important;
    }
}

@media (max-width: 1000px) {
    .hide-on-tablet {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hide-on-large {
        display: none !important;
    }
}

/*----------------------------------------------------------*/
/*-------------------- END GRID BASE CSS -------------------*/
/*----------------------------------------------------------*/

/*-------------------------------------------*/
/* ------------- OLD GRID START ------------ */
/*-------------------------------------------*/

.contain-x {
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    height: 100%;
    gap: 20px;
}

.x-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*--------------------------------*/

.x-1, .x-2, .x-3, .x-4, .x-5, .x-6, .x-7, .x-8 {
    display: flex;
    flex-wrap: wrap;
}

    .x-3 > .contain-x {
        flex: 1 1 calc(33.333%);
    }

    .x-2 > .contain-x {
        flex: 0 0 calc(100% / 2);
        max-width: calc(100% / 2);
    }

    .x-1 > .contain-x {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .x-4 > .contain-x {
        flex: 0 0 calc(25%);
        max-width: calc(25%);
    }

    .x-5 > .contain-x {
        flex: 0 0 calc(20%);
        max-width: calc(20%);
    }

    .x-6 > .contain-x {
        flex: 0 0 calc(100% / 6);
        max-width: calc(100% / 6);
    }

    .x-7 > .contain-x {
        flex: 0 0 calc(100% / 7);
        max-width: calc(100% / 7);
    }

    .x-8 > .contain-x {
        flex: 0 0 calc(100% / 8);
        max-width: calc(100% / 8);
    }

@media (max-width: 950px) {
    .x-5 > .contain-x,
    .x-4 > .contain-x,
    .x-3 > .contain-x,
    .x-2 > .contain-x,
    .x-1 > .contain-x {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .pad-1 {
        padding: 0.5rem;
    }
}

/*---------------------------------------------------------*/
/* --------------------- END OLD GRID ---------------------*/
/*---------------------------------------------------------*/

.hidden {
    display: none !important;
    visibility: hidden !important;
}

.visible {
    display: block !important;
    visibility: visible !important;
}

.center-horizontal {
    display: flex;
    justify-content: center;
}

.center {
    justify-content: center;
}

.center-horizontal-vertical {
    display: flex;
    justify-content: center;
    align-items: center;
}

.full-width {
    width: 100%;
    box-sizing: border-box; /* per includere padding e bordi nella larghezza */
    flex: 1 1 auto; /* nel caso sia dentro un contenitore flex */
    min-width: 0; /* evita che il contenuto faccia sforare */
}

.full-height-vh {
    height: 100vh;
}

.full-height-vh-nobar {
    height: calc(100vh - 46px);
}

.full-height {
    height: 100%;
}

.half-height {
    height: 50%;
}

.full-screen {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
}

.scroll-content {
    flex: 1;
    height: 100vh;
    overflow-y: auto;
}

/* 
    Questa classe è da usare per mettere nella zona visibile gli elementi e non farli scrollare
    se nel contenitore di questa classe non c'è full-height si adatta a quello che c'è dentro non fa full page
*/
.full-page-visible {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

    .full-page-visible > .x-2 {
        flex: 1; /* 50% in altezza questo funziona per x-2 quindi mette a 2 a 2 */
    }

.text-center {
    text-align: center;
}

.align-right {
    display: flex;
    justify-content: flex-end;
    /*flex-wrap: wrap; se voglio che gli elementi vadano a capo su più righe */
}

.min-cell-width-200 {
    min-width: 200px;
}

.min-cell-width-300 {
    min-width: 300px;
}

.min-cell-width {
    min-width: 400px;
}

.min-cell-width-500 {
    min-width: 500px;
}

.min-cell-width-600 {
    min-width: 600px;
}

.max-cell-width {
    max-width: 400px;
}

.max-cell-width-500 {
    max-width: 400px;
}

.max-cell-width-600 {
    max-width: 600px;
}

/*Non fa andare il testo fuori dal suo contenitore*/
.text-no-overflow {
    overflow-wrap: break-word; /* manda a capo le parole troppo lunghe */
    word-break: break-word; /* (fallback per browser più vecchi) */
    hyphens: auto; /* abilita sillabazione (se supportata) */
    overflow: hidden; /* nasconde eventuale overflow */
    text-overflow: ellipsis; /* ... opzionale, usato con white-space */
    white-space: normal; /* assicura che vada a capo normalmente */
}

/*Questa classe fa in modo che non vada a capo il testo e ne fa un replace di quello in più con "..." */
.text-ellipsis {
    white-space: nowrap; /* non andare a capo */
    overflow: hidden;
    text-overflow: ellipsis; /* mostra "..." se troppo lungo */
}

/* Cleaner */
.clean-pmg {
    padding: 0;
    margin: 0;
    gap: 0;
}

/* -------------------------------- */
/* ----------- PADDING ------------ */
/* -------------------------------- */

.pad-0 {
    padding: 0;
}

.pad-05 {
    padding: 5px;
}

.pad-1 {
    padding: 10px;
}

.pad-2 {
    padding: 20px;
}

.pad-4 {
    padding: 40px;
}

.pad-5 {
    padding: 50px;
}

.pad-6 {
    padding: 60px;
}

.pad-7 {
    padding: 70px;
}

.pad-8 {
    padding: 80px;
}

.pad-9 {
    padding: 900px;
}

.pad-10 {
    padding: 100px;
}

/* -------------------------------------- */
/* ----------- PADDING RIGHT ------------ */
/* -------------------------------------- */

.pad-r-1 {
    padding-right: 10px;
}

.pad-r-2 {
    padding-right: 20px;
}

.pad-r-3 {
    padding-right: 30px;
}

.pad-r-4 {
    padding-right: 40px;
}

/* -------------------------------------- */
/* ----------- PADDING LEFT ------------- */
/* -------------------------------------- */

.pad-l-1 {
    padding-left: 10px;
}

.pad-l-2 {
    padding-left: 20px;
}

.pad-l-3 {
    padding-left: 30px;
}

.pad-l-4 {
    padding-left: 40px;
}

/* --------------------------------------- */
/* ----------- PADDING BOTTOM ------------ */
/* --------------------------------------- */

.pad-b-1 {
    padding-bottom: 10px;
}

.pad-b-2 {
    padding-bottom: 20px;
}

.pad-b-3 {
    padding-bottom: 30px;
}

.pad-b-4 {
    padding-bottom: 40px;
}

/* --------------------------------------- */
/* ----------- PADDING BOTTOM ------------ */
/* --------------------------------------- */

.pad-t-1 {
    padding-top: 10px;
}

.pad-t-2 {
    padding-top: 20px;
}

.pad-t-3 {
    padding-top: 30px;
}

.pad-t-4 {
    padding-top: 40px;
}

/* ----------------------------------------------- */
/* ----------- PADDING Top and Bottom ------------ */
/* ----------------------------------------------- */

.pad-tb-1 {
    padding-bottom: 10px;
    padding-top: 10px;
}

.pad-tb-2 {
    padding-bottom: 20px;
    padding-top: 20px;
}

.pad-tb-3 {
    padding-bottom: 30px;
    padding-top: 30px;
}

.pad-tb-4 {
    padding-bottom: 40px;
    padding-top: 40px;
}

/* ----------------------------------------------- */
/* ----------- PADDING left and Right ------------ */
/* ----------------------------------------------- */

.pad-lr-1 {
    padding-left: 10px;
    padding-right: 10px;
}

.pad-lr-2 {
    padding-left: 20px;
    padding-right: 20px;
}

.pad-lr-3 {
    padding-left: 30px;
    padding-right: 30px;
}

.pad-lr-4 {
    padding-left: 40px;
    padding-right: 40px;
}

/* -------------------------------- */
/* ------------ MARGIN ------------ */
/* -------------------------------- */

.mar-0 {
    margin: 0;
}

.mar-05 {
    margin: 5px;
}

.mar-1 {
    margin: 10px;
}

.mar-2 {
    margin: 20px;
}

.mar-3 {
    margin: 30px;
}

.mar-4 {
    margin: 40px;
}

.mar-5 {
    margin: 50px;
}

.mar-6 {
    margin: 60px;
}

.mar-7 {
    margin: 70px;
}

.mar-8 {
    margin: 80px;
}

.mar-9 {
    margin: 90px;
}

.mar-10 {
    margin: 100px;
}

/* -------------------------------------------- */
/* --------------- margin top ----------------- */
/* -------------------------------------------- */

.mar-t-1 {
    margin-top: 10px;
}

.mar-t-2 {
    margin-top: 20px;
}

.mar-t-3 {
    margin-top: 30px;
}

.mar-t-4 {
    margin-top: 40px;
}

.mar-t-5 {
    margin-top: 50px;
}

.mar-t-6 {
    margin-top: 60px;
}

.mar-t-7 {
    margin-top: 70px;
}

.mar-t-8 {
    margin-top: 80px;
}

.mar-t-9 {
    margin-top: 90px;
}

.mar-t-10 {
    margin-top: 100px;
}

/* ----------------------------------------------- */
/* --------------- margin bottom ----------------- */
/* ----------------------------------------------- */

.mar-b-1 {
    margin-bottom: 10px;
}

.mar-b-2 {
    margin-bottom: 20px;
}

.mar-b-3 {
    margin-bottom: 30px;
}

.mar-b-4 {
    margin-bottom: 40px;
}

.mar-b-5 {
    margin-bottom: 50px;
}

.mar-b-6 {
    margin-bottom: 60px;
}

.mar-b-7 {
    margin-bottom: 70px;
}

.mar-b-8 {
    margin-bottom: 80px;
}

.mar-b-9 {
    margin-bottom: 90px;
}

.mar-b-10 {
    margin-bottom: 100px;
}

/* -------------------------------- */
/* --------- Margin Right --------- */
/* -------------------------------- */

.mar-r-1 {
    margin-right: 10px;
}

.mar-r-2 {
    margin-right: 20px;
}

.mar-r-3 {
    margin-right: 30px;
}

.mar-r-4 {
    margin-right: 40px;
}

.mar-r-5 {
    margin-right: 50px;
}

.mar-r-6 {
    margin-right: 60px;
}

.mar-r-7 {
    margin-right: 70px;
}

.mar-r-8 {
    margin-right: 80px;
}

.mar-r-9 {
    margin-right: 90px;
}

.mar-r-10 {
    margin-right: 100px;
}

/* --------------------------------------------- */
/* --------------- margin left ----------------- */
/* --------------------------------------------- */

.mar-l-1 {
    margin-left: 10px;
}

.mar-l-2 {
    margin-left: 20px;
}

.mar-l-3 {
    margin-left: 30px;
}

.mar-l-4 {
    margin-left: 40px;
}

.mar-l-5 {
    margin-left: 50px;
}

.mar-l-6 {
    margin-left: 60px;
}

.mar-l-7 {
    margin-left: 70px;
}

.mar-l-8 {
    margin-left: 80px;
}

.mar-l-9 {
    margin-left: 90px;
}

.mar-l-10 {
    margin-left: 100px;
}

/* ---------------------------------------------------- */
/* --------------- Margin Right Left ------------------ */
/* ---------------------------------------------------- */

.mar-lr-1 {
    margin-left: 10px;
    margin-right: 10px;
}

.mar-lr-2 {
    margin-left: 20px;
    margin-right: 20px;
}

.mar-lr-3 {
    margin-left: 30px;
    margin-right: 30px;
}

.mar-lr-4 {
    margin-left: 40px;
    margin-right: 40px;
}

.mar-lr-5 {
    margin-left: 50px;
    margin-right: 50px;
}

.mar-lr-6 {
    margin-left: 60px;
    margin-right: 60px;
}

.mar-lr-7 {
    margin-left: 70px;
    margin-right: 70px;
}

.mar-lr-8 {
    margin-left: 80px;
    margin-right: 80px;
}

.mar-lr-9 {
    margin-left: 90px;
    margin-right: 90px;
}

.mar-lr-10 {
    margin-left: 100px;
    margin-right: 100px;
}

/* ------------------------------------- */
/* --------------- GAP ----------------- */
/* ------------------------------------- */

.gap-0 {
    gap: 0;
}

.gap-05 {
    gap: 5px;
}

.gap-1 {
    gap: 10px;
}

.gap-2 {
    gap: 20px;
}

.gap-3 {
    gap: 30px;
}

.gap-4 {
    gap: 40px;
}

.gap-5 {
    gap: 50px;
}

/* ------------------------------------------------ */
/* --------------- BORDERS RADIUS ----------------- */
/* ------------------------------------------------ */

.border-smooth-light {
    border-radius: 5px;
}

.border-smooth-medium {
    border-radius: 15px;
}

.border-smooth-hard {
    border-radius: 25px;
}

.border-smooth-extreme {
    border-radius: 50px;
}

.border-bot-light {
    border-end-end-radius: 5px;
    border-end-start-radius: 5px;
}

.border-right-medium {
    border-end-end-radius: 15px;
    border-start-end-radius: 15px;
}

/* ------------------------------------------------------------ */
/* ----------------------- Text Font -------------------------- */
/* ------------------------------------------------------------ */

.txt-font-10 {
    font-size: 10px;
}

.txt-font-12 {
    font-size: 12px;
}

.txt-font-20 {
    font-size: 20px;
}

.txt-font-25 {
    font-size: 20px;
}

.txt-font-30 {
    font-size: 30px;
}

.txt-font-40 {
    font-size: 40px;
}

/* ------------------------------------------------------------ */
/* -------------------- Text Decoration ----------------------- */
/* ------------------------------------------------------------ */

.txt-underline {
    text-decoration: underline;
}

.txt-overline {
    text-decoration: overline;
}

.txt-line-through {
    text-decoration: line-through;
}

.txt-none {
    text-decoration: none;
}

/* Stile della linea */
.txt-dec-solid {
    text-decoration-style: solid;
}

.txt-dec-double {
    text-decoration-style: double;
}

.txt-dec-dotted {
    text-decoration-style: dotted;
}

.txt-dec-dashed {
    text-decoration-style: dashed;
}

.txt-dec-wavy {
    text-decoration-style: wavy;
}

/* Colore della decorazione */
.txt-dec-black {
    text-decoration-color: black;
}

.txt-dec-gray {
    text-decoration-color: gray;
}

.txt-dec-red {
    text-decoration-color: red;
}

.txt-dec-blue {
    text-decoration-color: blue;
}

.txt-dec-green {
    text-decoration-color: green;
}

/* Spessore linea */
.txt-dec-thin {
    text-decoration-thickness: 1px;
}

.txt-dec-medium {
    text-decoration-thickness: 2px;
}

.txt-dec-thick {
    text-decoration-thickness: 3px;
}

/* Trasformazioni del testo */
.txt-uppercase {
    text-transform: uppercase;
}

.txt-lowercase {
    text-transform: lowercase;
}

.txt-capitalize {
    text-transform: capitalize;
}

/* Stile del testo */
.txt-italic {
    font-style: italic;
}

.txt-oblique {
    font-style: oblique;
}

.txt-normal {
    font-style: normal;
}

/* Peso del testo */
.txt-light {
    font-weight: 300;
}

.txt-regular {
    font-weight: 400;
}

.txt-medium {
    font-weight: 500;
}

.txt-semibold {
    font-weight: 600;
}

.txt-bold {
    font-weight: 700;
}

.txt-extrabold {
    font-weight: 800;
}

.txt-black {
    font-weight: 900;
}

/* ---------------------------------------------------------------- */
/* -------------------- CURSOR STYLE ITEM START ------------------- */
/* ---------------------------------------------------------------- */

.cursor-default {
    cursor: default; /* stile predefinito del sistema */
}

.cursor-pointer {
    cursor: pointer; /* tipico per link o bottoni cliccabili */
}

.cursor-text {
    cursor: text; /* per aree di testo */
}

.cursor-move {
    cursor: move; /* per elementi trascinabili */
}

.cursor-crosshair {
    cursor: crosshair; /* mirino, utile in canvas o editor */
}

.cursor-wait {
    cursor: wait; /* rotellina o clessidra */
}

.cursor-help {
    cursor: help; /* con un punto interrogativo */
}

.cursor-not-allowed {
    cursor: not-allowed; /* divieto, ad es. bottone disabilitato */
}

.cursor-grab {
    cursor: grab; /* mano aperta (drag start) */
}

.cursor-grabbing {
    cursor: grabbing; /* mano chiusa (drag in corso) */
}

.cursor-progress {
    cursor: progress; /* simile a wait ma permette interazione */
}

.cursor-zoom-in {
    cursor: zoom-in; /* lente d’ingrandimento con + */
}

.cursor-zoom-out {
    cursor: zoom-out; /* lente d’ingrandimento con - */
}

/* ---------------------------------------------------------------- */
/* ------------------ END CURSOR STYLE ITEM STOP ------------------ */
/* ---------------------------------------------------------------- */

/* ----------------------------------------------------------- */
/*------------------------------COLORS-------------------------*/
/*-------------------------------------------------------------*/
.sky {
    background-color: #87CEEB;
    color: #000000;
}

.sun {
    background-color: #FBB027;
}

.moon {
    background-color: #C9CEE0;
    color: #000000;
}

.black {
    background-color: #000000;
}

.white {
    background-color: #ffffff;
    color: #000000;
}

.full-moon {
    background-color: #DAB174;
    color: #000000;
}

.dark-grass {
    background-color: #00a000;
}

.light-grass {
    background-color: #00FF00;
    color: #000000;
}

.dark-night {
    background-color: #0A2635;
}

.star-white {
    background-color: #ffffe6;
    color: #000000;
}

.future-color-01 {
    background-color: #9765E0;
    color: #000000;
}

.future-color-02 {
    background-color: #CE95FB;
    color: #000000;
}

.future-color-03 {
    background-color: #00C2BA;
    color: #000000;
}

.future-color-04 {
    background-color: #534FA5;
}

.future-color-05 {
    background-color: #36009C;
}

.future-color-06 {
    background-color: #EC00F0;
}

.future-gradient-01 {
    background: #4100F5;
    background: linear-gradient(90deg,rgba(65, 0, 245, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(240, 55, 165, 1) 100%);
}

.future-gradient-02 {
    background: linear-gradient(135deg, rgba(0, 255, 136, 1) 0%, rgba(120, 0, 255, 1) 50%, rgba(0, 180, 255, 1) 100%);
}

.future-gradient-03 {
    background: linear-gradient(45deg, rgba(255, 20, 147, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 0, 1) 100%);
}

.future-gradient-04 {
    background: linear-gradient(90deg, rgba(0, 200, 255, 1) 0%, rgba(50, 0, 100, 1) 50%, rgba(255, 30, 60, 1) 100%);
}

.future-gradient-05 {
    background: linear-gradient(120deg, rgba(255, 100, 0, 1) 0%, rgba(255, 0, 150, 1) 50%, rgba(0, 150, 255, 1) 100%);
}

.future-gradient-06 {
    background: linear-gradient(160deg, rgba(0, 255, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(255, 0, 200, 1) 100%);
}

.future-gradient-07 {
    background: linear-gradient(90deg, rgba(0, 255, 136, 1) 0%, rgba(255, 0, 200, 1) 20%, rgba(0, 180, 255, 1) 40%, rgba(255, 255, 0, 1) 60%, rgba(65, 0, 245, 1) 80%, rgba(0, 0, 0, 1) 100%);
}

.future-gradient-08 {
    background: linear-gradient(90deg, #ff00ff 0%, #00ffff 20%, #ffea00 40%, #4100f5 60%, #000000 80%, #f037a5 100%);
}

.future-gradient-09 {
    background: linear-gradient(135deg, #0ff 0%, #f0f 15%, #ff5500 35%, #ff0 55%, #4100f5 75%, #000 100%);
}

.future-gradient-10 {
    background: linear-gradient(225deg, #f037a5 0%, #4100f5 20%, #00d9ff 40%, #00ff88 60%, #ffea00 80%, #ff003c 100%);
}

.future-gradient-11 {
    background: linear-gradient(180deg, #000 0%, #ff003c 25%, #ffea00 50%, #00ff9f 75%, #00c3ff 90%, #f037a5 100%);
}

.future-gradient-12 {
    background: linear-gradient(45deg, #00fff7 0%, #f037a5 15%, #ffea00 35%, #ff00c8 55%, #4100f5 75%, #000000 100%);
}

.future-gradient-13 {
    background: linear-gradient(270deg, #ff00c8 0%, #ffea00 20%, #00ff9f 40%, #00c3ff 60%, #4100f5 80%, #000000 100%);
}

/* =========================== FUTURE CYBERPUNK MULTIGRADIENTS ANIMATI =========================== */

.future-multigradient-01 {
    background: linear-gradient(90deg, #ff00ff, #00ffff, #ffea00, #4100f5, #000000, #f037a5);
    background-size: 600% 600%;
    animation: gradientMove01 12s ease infinite;
}

@keyframes gradientMove01 {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.future-multigradient-02 {
    background: linear-gradient(135deg, #0ff, #f0f, #ff5500, #ff0, #4100f5, #000);
    background-size: 400% 400%;
    animation: neonPulse02 8s ease-in-out infinite;
}

@keyframes neonPulse02 {
    0%, 100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.6);
    }
}

/* 03 - rotazione dei colori */
.future-multigradient-03 {
    background: linear-gradient(225deg, #f037a5, #4100f5, #00d9ff, #00ff88, #ffea00, #ff003c);
    background-size: 500% 500%;
    animation: hueRotate03 15s linear infinite;
}

@keyframes hueRotate03 {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

/* 04 - scorrimento verticale */
.future-multigradient-04 {
    background: linear-gradient(180deg, #000, #ff003c, #ffea00, #00ff9f, #00c3ff, #f037a5);
    background-size: 400% 400%;
    animation: gradientMove04 10s ease infinite;
}

@keyframes gradientMove04 {
    0% {
        background-position: 50% 0%;
    }

    50% {
        background-position: 50% 100%;
    }

    100% {
        background-position: 50% 0%;
    }
}

/* 05 - glitch cibernetico */
.future-multigradient-05 {
    background: linear-gradient(45deg, #00fff7, #f037a5, #ffea00, #ff00c8, #4100f5, #000000);
    background-size: 600% 600%;
    animation: glitch05 2s steps(8) infinite;
}

@keyframes glitch05 {
    0% {
        background-position: 0% 0%;
    }

    20% {
        background-position: 20% 40%;
    }

    40% {
        background-position: 60% 20%;
    }

    60% {
        background-position: 40% 80%;
    }

    80% {
        background-position: 80% 60%;
    }

    100% {
        background-position: 0% 0%;
    }
}

/* 06 - loop diagonale lento */
.future-multigradient-06 {
    background: linear-gradient(270deg, #ff00c8, #ffea00, #00ff9f, #00c3ff, #4100f5, #000000);
    background-size: 500% 500%;
    animation: gradientMove06 20s ease-in-out infinite;
}

@keyframes gradientMove06 {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

/* -------------------------------------------------------------------------------------------------------------- */
/* ------------------HOVERS - HOVERS - HOVERS - HOVERS - HOVERS- HOVERS- HOVERS-----------------------------------*/
/* ------------------------------------------------------------------------------------------------------------ */

.hover-a {
    transition: all 0.3s ease;
    box-shadow: 0 0 0 transparent;
}

    .hover-a:hover {
        box-shadow: 0 0 20px rgba(0, 123, 255, 0.5), 0 0 40px rgba(0, 123, 255, 0.4);
        transform: translateY(-3px);
    }

    .hover-a:active {
        transform: scale(0.96);
        box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
    }


.hover-b {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

    .hover-b:hover {
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.05);
    }

    .hover-b:active {
        transform: scale(0.95);
    }


.hover-c {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    color: white;
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}

    .hover-c::before {
        content: '';
        position: absolute;
        top: 0;
        left: -75%;
        width: 150%;
        height: 100%;
        background: linear-gradient( 120deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2) );
        transform: skewX(-20deg);
        transition: left 0.5s ease;
        z-index: -1;
    }

    .hover-c:hover::before {
        left: 100%;
    }

    .hover-c:active {
        transform: scale(0.97);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }

.hover-d {
    perspective: 1000px;
    transition: transform 0.5s ease;
}

    .hover-d:hover {
        transform: rotateX(10deg) rotateY(5deg) scale(1.03);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

    .hover-d:active {
        transform: rotateX(0deg) rotateY(0deg) scale(0.98);
    }

.hover-e {
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

    .hover-e::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        border-top: 2px solid cyan;
        border-bottom: 2px solid cyan;
        transition: left 0.3s ease;
    }

    .hover-e:hover::before {
        left: 100%;
    }

    .hover-e:active {
        transform: scale(0.95);
    }


.hover-f {
    transition: transform 0.2s ease;
}

    .hover-f:hover {
        animation: hover-jelly 0.6s ease;
    }

    .hover-f:active {
        transform: scale(0.9);
    }

@keyframes hover-jelly {
    0% {
        transform: scale(1, 1);
    }

    30% {
        transform: scale(1.25, 0.75);
    }

    40% {
        transform: scale(0.75, 1.25);
    }

    50% {
        transform: scale(1.15, 0.85);
    }

    65% {
        transform: scale(0.95, 1.05);
    }

    75% {
        transform: scale(1.05, 0.95);
    }

    100% {
        transform: scale(1, 1);
    }
}


.hover-g {
    border: 2px solid #0ff;
    box-shadow: 0 0 5px #0ff, 0 0 10px #0ff;
    transition: all 0.3s ease;
}

    .hover-g:hover {
        box-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
    }

    .hover-g:active {
        transform: scale(0.97);
    }


.hover-h {
    transition: all 0.4s ease;
}

    .hover-h:hover {
        transform: rotateY(180deg);
        background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
        color: white;
    }

    .hover-h:active {
        transform: rotateY(180deg) scale(0.95);
    }


.hover-i {
    transition: transform 0.2s ease;
}

    .hover-i:hover {
        transform: scale(1.05);
    }

    .hover-i:active {
        transform: scale(0.92);
    }


.hover-l {
    position: relative;
    overflow: hidden;
    background: #222;
    color: white;
    transition: all 0.3s ease;
}

    .hover-l::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s ease;
    }

    .hover-l:hover::after {
        left: 100%;
    }

    .hover-l:active {
        transform: scale(0.97);
    }


.hover-m {
    transition: transform 0.2s ease;
}

    .hover-m:hover {
        animation: jelly 0.6s ease;
    }

    .hover-m:active {
        transform: scale(0.9);
    }

@keyframes jelly {
    0% {
        transform: scale(1,1);
    }

    30% {
        transform: scale(1.25, 0.75);
    }

    40% {
        transform: scale(0.75, 1.25);
    }

    50% {
        transform: scale(1.15, 0.85);
    }

    65% {
        transform: scale(0.95, 1.05);
    }

    75% {
        transform: scale(1.05, 0.95);
    }

    100% {
        transform: scale(1,1);
    }
}

/* ------------------------------------------------------------- */
/* -------------------------- COLORS TEXT ---------------------- */
/* ------------------------------------------------------------- */

.text-black {
    color: #000000;
}

.text-white {
    color: #ffffff;
}

.text-red {
    color: #ff0000;
}

.text-green {
    color: #12ff00;
}