/*le classi sono per il layout su schermo piccolo, per accelerare il caricamento delle pagine su mobile*/
/*in fondo ci sono variazioni per gli schermi grandi*/

.button-velges {
    border-radius: 8px;
    border-style: none;
    color: white;
    cursor: pointer;
    padding: 10px 20px;
    box-shadow: rgba(255, 255, 255, 0.26) 0 1px 2px inset, 1px 1px 5px rgb(150, 150, 150);
}

.rz-button .rz-button-text {
    text-transform: none;
    font-size: larger;
    font-weight:unset;
    padding:0;
    letter-spacing:0;
}

.rz-button-md.rz-button-icon-only.rz-button-header-griglia {
    min-height: unset;
    min-width:unset;
    height: 1.5rem;
    padding: unset;
}

.button-velges, .rz-button.rz-primary.rz-shade-default, .rz-button.rz-secondary.rz-shade-default, .rz-primary.rz-shade-default.rz-paginator-element {
    background-color: var(--colore-principale);
    transition: color .13s ease-in-out,background .13s ease-in-out,opacity .13s ease-in-out,box-shadow .13s ease-in-out;
    touch-action: manipulation;
}

    .button-velges:active:not(:disabled)  {
        background-color: var(--colore-principale);
        transform:scale(0.9);
    }

    .button-velges:hover:disabled {
        cursor: default;
    }

    .button-velges:hover {
        opacity: 0.7;
    }

    .button-velges:disabled {
        opacity: 0.7;
        cursor: pointer;
    }

.button-80 {
    background: var(--colore-background);
    backface-visibility: hidden;
    border-radius: .375rem;
    border-style: solid;
    border-width: .125rem;
    box-sizing: border-box;
    color: var(--colore-principale);
    cursor: pointer;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 1rem 1.125rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    transform: translateZ(0) scale(1);
    transition: transform .3s ease-in, background-color .3s ease-in, color .3s ease-in;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin-top: auto;
    margin-bottom: auto;
    box-shadow: 0 0 10px darkgrey;
}

    .button-80:not(:disabled):hover {
        transform: scale(1.05);
        color: var(--colore-background);
        background: var(--colore-principale);
        opacity: 0.9;
        transition: transform .1s ease-in, background-color .1s ease-in, color .1s ease-in;
    }

    .button-80:not(:disabled):hover:active {
        transform: scale(1.05) translateY(.125rem);
    }

.button-80:focus {
    outline: 0 solid transparent;
}

    .button-80:focus:before {
        content: "";
        left: calc(-1*.375rem);
        pointer-events: none;
        position: absolute;
        top: calc(-1*.375rem);
        transition: border-radius;
        user-select: none;
    }

    .button-80:focus:not(:focus-visible) {
        outline: 0 solid transparent;
    }

        .button-80:focus:not(:focus-visible):before {
            border-width: 0;
        }

.button-80:not(:disabled):active {
    transform: translateY(.125rem);
}

@media screen and (min-width: 768px) {
    /* Medium devices (tablets, 768px and up) */

    .button-80 {
        font-size: 1.5rem;
        padding: 0.5rem 1.0rem;
    }
}

@media screen and (min-width: 992px) {
    /* Large devices (desktops, 992px and up) */

    .button-80 {
        font-size: 2.5rem;
        padding: 1.5rem 1.125rem;
    }
}