html,
body {
    margin: 0;
    min-height: 100%;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    color: #2a333a;
    background: #fbfbfa;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
}

.pagina-servizio {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 34px 20px;
}

    .pagina-servizio .part-cloud {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

        .pagina-servizio .part-cloud svg {
            position: absolute;
            opacity: .5;
        }

    .pagina-servizio .cloud-disc {
        width: 250px;
        height: 250px;
        left: -55px;
        bottom: -38px;
    }

    .pagina-servizio .cloud-filter {
        width: 135px;
        height: 160px;
        right: 7%;
        top: 7%;
        transform: rotate(10deg);
    }

    .pagina-servizio .cloud-plug {
        width: 90px;
        height: 190px;
        right: 10%;
        bottom: 1%;
        transform: rotate(-12deg);
    }

    .pagina-servizio .content {
        width: 100%;
        max-width: 700px;
        text-align: center;
        position: relative;
        z-index: 2;
    }

    .pagina-servizio .badge {
        width: 72px;
        height: 72px;
        margin: 0 auto 26px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 22px;
        box-shadow: inset 0 0 0 1px #dce3df;
    }

        .pagina-servizio .badge svg {
            width: 38px;
            height: 38px;
        }

    .pagina-servizio .service-icon {
        display: none;
    }

    .pagina-servizio h1 {
        margin: 0;
        font-size: 47px;
        line-height: 1.06;
        letter-spacing: -1.6px;
        font-weight: 650;
    }

    .pagina-servizio .message {
        margin: 22px auto 0 auto;
        max-width: 570px;
        color: #6d7880;
        font-size: 16px;
        line-height: 1.7;
    }

    .pagina-servizio .actions {
        margin-top: 31px;
    }

    .pagina-servizio .button {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 25px;
        border: 0;
        border-radius: 7px;
        background: #2a333a;
        color: #ffffff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 8px 18px rgba(42, 51, 58, .12);
        transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    }

        .pagina-servizio .button:hover {
            transform: translateY(-1px);
            background: #182027;
            color: #ffffff;
            text-decoration: none;
            box-shadow: 0 11px 22px rgba(42, 51, 58, .16);
        }

    .pagina-servizio .little-accent {
        width: 96px;
        height: 3px;
        margin: 42px auto 0 auto;
    }

    .pagina-servizio .metal {
        fill: #ffffff;
        stroke: #7c909c;
        stroke-width: 2;
    }

    .pagina-servizio .metal-line {
        fill: none;
        stroke: #7c909c;
        stroke-width: 2;
    }

    .pagina-servizio .soft {
        fill: #dfe8e3;
        stroke: #7c909c;
        stroke-width: 2;
    }

    .pagina-servizio .accent-line {
        fill: none;
        stroke-width: 4;
        stroke-linecap: round;
    }


    /* SESSIONE SCADUTA -------------------------------------------------------- */

    .pagina-servizio.tipo-sessione .badge {
        background: #eef2f0;
        color: #687b73;
    }

    .pagina-servizio.tipo-sessione .service-icon.icon-sessione {
        display: block;
    }

    .pagina-servizio.tipo-sessione .accent-line {
        stroke: #e07d2f;
    }

    .pagina-servizio.tipo-sessione .little-accent {
        background: linear-gradient(90deg, #e07d2f 0 38%, #d8ddda 38% 100%);
    }


    /* 404 -------------------------------------------------------------------- */

    .pagina-servizio.tipo-404 .badge {
        background: #fff3e8;
        color: #a86e35;
        box-shadow: inset 0 0 0 1px #f1dfcf;
    }

    .pagina-servizio.tipo-404 .service-icon.icon-404 {
        display: block;
    }

    .pagina-servizio.tipo-404 .accent-line {
        stroke: #d78a3f;
    }

    .pagina-servizio.tipo-404 .little-accent {
        background: linear-gradient(90deg, #d78a3f 0 38%, #ded8d1 38% 100%);
    }


    /* ERRORE GENERICO / 500 -------------------------------------------------- */

    .pagina-servizio.tipo-500 .badge {
        background: #f8ecea;
        color: #ad625d;
        box-shadow: inset 0 0 0 1px #ead5d2;
    }

    .pagina-servizio.tipo-500 .service-icon.icon-500 {
        display: block;
    }

    .pagina-servizio.tipo-500 .accent-line {
        stroke: #c97068;
    }

    .pagina-servizio.tipo-500 .little-accent {
        background: linear-gradient(90deg, #c97068 0 38%, #ddd7d5 38% 100%);
    }


    /* SERVIZIO NON DISPONIBILE / 503 ---------------------------------------- */

    .pagina-servizio.tipo-503 .badge {
        background: #eaf3f1;
        color: #5f8179;
        box-shadow: inset 0 0 0 1px #d5e4e0;
    }

    .pagina-servizio.tipo-503 .service-icon.icon-503 {
        display: block;
    }

    .pagina-servizio.tipo-503 .accent-line {
        stroke: #6f9289;
    }

    .pagina-servizio.tipo-503 .little-accent {
        background: linear-gradient(90deg, #6f9289 0 38%, #d5dcda 38% 100%);
    }


    /* ACCESSO NON CONSENTITO / 403 ------------------------------------------ */

    .pagina-servizio.tipo-403 .badge {
        background: #edf1f5;
        color: #66798e;
        box-shadow: inset 0 0 0 1px #d9e0e7;
    }

    .pagina-servizio.tipo-403 .service-icon.icon-403 {
        display: block;
    }

    .pagina-servizio.tipo-403 .accent-line {
        stroke: #74869b;
    }

    .pagina-servizio.tipo-403 .little-accent {
        background: linear-gradient(90deg, #74869b 0 38%, #d8dde3 38% 100%);
    }


@media (max-width: 650px) {

    .pagina-servizio {
        align-items: flex-start;
        padding-top: 70px;
    }

        .pagina-servizio h1 {
            font-size: 36px;
            letter-spacing: -1px;
        }

        .pagina-servizio .message {
            font-size: 15px;
        }

        .pagina-servizio .button {
            width: 100%;
        }

        .pagina-servizio .cloud-filter {
            width: 100px;
            right: -15px;
            top: 10px;
        }

        .pagina-servizio .cloud-disc {
            width: 200px;
            left: -90px;
        }

        .pagina-servizio .cloud-plug {
            display: none;
        }
}