@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
        @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

        img.bg {
            max-width: 100%;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        div.videoTeaser {
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
            max-width: 1500px;
        }

        div.videoTeaser .button {
            background-color: #e10600;
            color: white;
        }

        div.sezioniTabs .sezioneTab {
            display: none;
        }

        div.sezioniTabs .sezioneTab.visible {
            display: block;
        }

        [contenteditable] {
            outline: 0px solid transparent;
        }

        .tabs.is-toggle li.is-active a {
            background-color: #e10600;
            border-color: #d30702;
            color: #fff;
            z-index: 1;
        }

        .snepColor {
            color: #e10600;
        }

        .luogo a {
            color: #e10600;
        }

        /* snep ticket */
        .containerTicket {
            display: grid;
            gap: 30px;
            max-width: 790px;
            margin: auto;
        }

        .containerTicket .ticketTemplate {
            display: none;
        }

        .ticket {
            color: black;
            line-height: 1;
            font-family: "Staatliches", cursive;
            letter-spacing: 0.1em;
            background-color: white;
            box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
            margin: auto;

            /*display: flex;*/
            display: grid;
            grid-template-columns: 0.33fr 0.45fr 0.22fr;
            /*250px 360px 180px;*/
            grid-template-rows: 1fr;
            grid-column-gap: 0px;
            grid-row-gap: 0px;

            max-width: 790px;
            /*max-height: 360px;*/
            /*250px;*/
            /* width: 790px; */
            width: 100%;
            /* height: 360px; */
            /*250px;*/
        }

        .ticket .left {
            grid-area: 1 / 1 / 2 / 2;
            height: 250px;
            width: 250px;
            background-image: url("./logoEvento250x250.jpg");
            background-size: contain;
            opacity: 0.85;
        }

        .ticket .lateralText {
            overflow: hidden;
            gap: 4px;

            position: absolute;
            color: darkgray;
            height: 250px;
            padding: 0 10px;
            letter-spacing: 0.15em;
            display: flex;
            text-align: center;
            justify-content: space-around;
            writing-mode: vertical-rl;
            transform: rotate(-180deg);
        }

        .ticket .lateralText span:nth-of-type(2) {
            color: white;
            font-weight: 700;
        }

        .ticket .right .lateralText span:nth-of-type(2) {
            color: gray;
        }

        .ticket .center {
            grid-area: 1 / 2 / 2 / 3;
            padding: 10px 30px;
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: space-between;
            align-items: center;
            max-width: 360px;
            width: 360px;
        }

        .ticket .center .ticketHeader {
            position: relative;
            border-top: 1px solid gray;
            border-bottom: 1px solid gray;
            padding: 5px 0;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .ticket .center .ticketHeader span {
            width: 100px;
        }

        .ticket .center .ticketHeader span:first-child {
            text-align: left;
        }


        .ticket .center .ticketHeader span:nth-of-type(2) {
            color: #e10600;
            font-size: 20px;
        }

        .ticket .center .ticketHeader span:last-child {
            text-align: right;
        }

        .ticket .center .ticketContent {
            font-size: 28px;
            font-family: 'Open Sans', sans-serif;
            color: black;
            max-width: 100%;
            width: 100%;
            max-height: 144px;
        }

        .ticket .center .ticketHeader .headerAddon {
            position: absolute;
            bottom: -20px;
            right: 0px;
            font-weight: normal;
        }

        .ticket .center .ticketName {
            font-size: 30px;
            font-weight: 700;
            letter-spacing: 0.1em;
            color: #e10600;
        }

        .ticket .center .fieldHelp {
            font-size: 0.5em;
        }

        .ticket .center .ticketFooter {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 100%;
            padding-top: 8px;
            border-top: 1px solid gray;
        }

        .ticket .right {
            grid-area: 1 / 3 / 2 / 4;
            width: 180px;
            max-width: 180px;
            border-left: 1px dashed #404040;
            position: relative;
        }

        .ticket .right .qrContainer {
            width: 100px;
            height: 100px;
            position: relative;
        }

        .ticket .right .qr {
            max-height: 100px;
            opacity: 0.5;
            filter: blur(1px);
        }

        .ticket .right .qrOverlay {
            position: absolute;
            pointer-events: none;
            top: 41%;
            left: 3%;
            display: flex;
            color: #e10600;
            font-size: 24px;
            transform: rotate(45deg);
        }

        .ticket .right .sideWithQR {
            height: 250px;
            padding: 10px 10px 10px 35px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            text-align: center;
        }

        .ticket .right .sideWithQR .eventName {
            color: #e10600;
            font-size: 20px;
        }

        .ticket .bottom {
            background: white;
            padding: 10px;
            grid-area: 2 / 1 / 3 / 4;
            font-family: 'Open Sans', sans-serif;
            letter-spacing: normal;
            position: relative;
            border-top: 1px solid;
        }

        .ticket .bottom select {
            width: 100%;
            text-align: center;
        }

        .ticket .bottom input {
            width: 100%;
            text-align: center;
        }

        .containerTicket .addTicket {
            width: 100%;
            margin: auto;
        }

        .containerTicket .bottom .privacy {
            text-align: center;
            background-color: #e10600;
            color: white;
            font-weight: bolder;
            width: 100%;
            padding: 10px;
        }

        .containerTicket .bottom .privacy a {
            color: white;
            margin-left: 5px;
            text-decoration: underline;
            text-align: center;
        }

        .pulse {
            animation: pulse-animation 2s infinite;
        }

        .campoNonCompilato {
            border: 3px solid red;
        }

        .tabellaPrezzi {
            background-color: #e10600;
            color: white;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr;
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            align-content: center;
            justify-content: center;
            align-items: center;
            justify-items: center;

            padding: 20px;
        }

        .tabellaPrezzi:hover {
            cursor: pointer;
        }

        .tabellaPrezzi .testoPromozionale {
            font-weight: bold;
            font-size: 3rem !important;
        }

        .tabellaPrezzi .sx {
            grid-area: 1 / 1 / 2 / 2;
            justify-self: right;
            display: flex;
            gap: 10px;
        }

        .tabellaPrezzi .cx {
            grid-area: 1 / 2 / 2 / 3;
        }

        .tabellaPrezzi .dx {
            grid-area: 1 / 3 / 2 / 4;
            justify-self: left;
        }

        .tabellaPrezzi .containerPrezzo {
            text-align: center;
            position: relative;
        }

        .tabellaPrezzi .containerPrezzo .prezzo {
            word-break: keep-all;
            font-weight: 600;
            line-height: 1.125;
            font-size: 4rem;
            color: rgba(255, 255, 255, .54);
        }

        .tabellaPrezzi .containerPrezzo .prezzo.attivo {
            color: white;
            animation: animazionePrezzo 2.5s infinite;
        }

        @keyframes animazionePrezzo {

            50% {
                text-shadow: 0px 0px 7px yellow;
            }
        }

        .tabellaPrezzi .containerPrezzo .strike {
            position: absolute;
            width: 100%;
            height: 2px;
            background: black;
            top: 33px;
            left: 0px;
            transform: rotate(18deg);

        }

        @keyframes pulse-animation {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
            }

            70% {
                transform: scale(1);
                box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
            }

            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
            }
        }

        /*
            media queries
        */

        @media screen and (max-width: 819px) {

            .tabellaPrezzi {
                grid-template-columns: 1fr;
                row-gap: 20px;
            }

            .tabellaPrezzi .sx,
            .tabellaPrezzi .cx,
            .tabellaPrezzi .dx {
                grid-area: auto;
            }

            .tabellaPrezzi .dx {
                justify-self: center;
            }

            .tabellaPrezzi .sx {
                justify-self: center;
            }

            .containerTicket {
                max-width: 89%;
                gap: 55px;
            }

            .ticket {
                max-height: none;
            }

            .ticket .left {
                width: 200px;
                height: 200px;
            }

            .ticket .lateralText {
                height: 200px;
                font-size: 0.8em;
            }

            .ticket .center {
                width: 310px;
            }

            .ticket .center .ticketHeader span {
                width: 80px;
                font-size: 12px;
            }


            .ticket .center .ticketHeader span:nth-child(2) {
                font-size: 17px;
            }

            .ticket .center .ticketFooter {
                font-size: 0.8em;
            }

            .ticket .right .sideWithQR {
                height: 200px;
            }

            .ticket .right .sideWithQR .eventName {
                font-size: 17px;
            }

            .ticket .right .sideWithQR .ticketNumber {
                font-size: 0.8em;
            }

        }

        @media screen and (max-width: 759px) {

            .ticket .left {
                width: 150px;
                height: 150px;
            }

            .ticket .lateralText {
                height: 150px;
                font-size: 0.6em;
            }

            .ticket .center {
                width: 260px;
            }

            .ticket .center .ticketHeader span {
                width: 70px;
                font-size: 12px;
            }

            .ticket .center .ticketHeader span:nth-child(2) {
                font-size: 17px;
            }

            .ticket .center .ticketName {
                font-size: 22px;
            }

            .ticket .center .ticketSurname {
                font-size: 18px;
            }

            .ticket .center .ticketFooter {
                font-size: 0.8em;
            }

            .ticket .right .sideWithQR {
                height: 100%;
            }

            .ticket .right .sideWithQR .eventName {
                font-size: 13px;
            }

            .ticket .right .sideWithQR .qr {
                max-height: 70px;
            }

            .ticket .right .sideWithQR .ticketNumber {
                font-size: 0.8em;
            }

        }

        @media screen and (max-width: 649px) {

            .containerTicket {
                gap: 15px;
            }

            .ticket .left,
            .ticket .right {
                display: none;
            }

            .ticket .center {
                grid-area: 1 / 1 / 2 / 4;
                width: 100%;
                margin: auto;
                height: 200px;
            }

            .ticket .ticketHeader {
                width: 100%;
            }

            .ticket .center .ticketHeader span {
                width: 33.33%;
            }
        }