body {
    background: #fff url("../images/sfondo.jpg") no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
}

@font-face {
    font-family: sf;
    src: url("../fonts/comics.ttf");
    font-size: 12px;
}

div.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff url("../images/sfondo.jpg") no-repeat center center;
    background-attachment: fixed;
    color: white;
    text-align: center;
    background-size: cover;
}

div.footerUp {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: #fff url("../images/sfondo.jpg") no-repeat center center;
    background-attachment: fixed;
    color: white;
    text-align: center;
    background-size: cover;
}

div#alertSuccess {
    border: 3px solid #2a5f4b;
    border-radius: 20px;
    padding: 10px;
    background: #fff url("../images/sfondo_bg.jpg") no-repeat center center;
    background-size: cover;
}

div#alertError {
    border: 3px solid #b90200;
    border-radius: 20px;
    padding: 10px;
    background: #fff url("../images/sfondo_bg.jpg") no-repeat center center;
    background-size: cover;
}

p#tasto:hover {
    animation: 1s ease-in-out 1 alternate, neon 1.5s ease-in-out infinite alternate;
}

@keyframes neon {
    from {
        text-shadow: 0 0 2.5px #fff, 0 0 5px #fff, 0 0 7.5px #fff, 0 0 10px #00cafe, 0 0 17.5px #00cafe, 0 0 20px #00cafe, 0 0 25px #00cafe, 0 0 37.5px #00cafe;
    }
    to {
        text-shadow: 0 0 3px #fff, 0 0 7px #fff, 0 0 13px #fff, 0 0 17px #00cafe, 0 0 33px #00cafe, 0 0 38px #00cafe, 0 0 48px #00cafe, 0 0 63px #00cafe;
    }
}

font#tasto:hover {
    animation: 1s ease-in-out 1 alternate, neon 1.5s ease-in-out infinite alternate;
}

font {
    font-size: 22px;
    font-family: sf;
    color: #fff;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
    padding: 3px;
}

font#notifica {
    color: black;
    font-size: 18px;
    margin: 10px;
    float: left;
    padding: 3px;
}

font#titleTable {
    font-size: 15px;
    float: left;
    padding: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table#tableList {
    width: 85%;
    font-size: 12px;
    font-family: 'sf';
    border: 2px solid #13444e;
    border-collapse: separate;
    background: #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 20px auto;
    margin-bottom: 35px;
    margin-top: 90px;
    -moz-box-shadow: 0px 0px 5px #13444e;
    -webkit-box-shadow: 0px 0px 5px #13444e;
    box-shadow: 0px 0px 5px #13444e;
}

thead {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

thead th {
    font-family: sf;
    font-size: 12px;
    color: #fff;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
    text-align: left;
    padding: 3px;
    background-image: -webkit-linear-gradient(#3e8d5c, #13444e 50%, #35bad5);
    background-image: -o-linear-gradient(#3e8d5c, #13444e 50%, #35bad5);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3e8d5c), color-stop(50%, #13444e), to(#35bad5));
    background-image: linear-gradient(#3e8d5c, #13444e 50%, #35bad5);
    background-repeat: no-repeat;
}

thead th:first-child {
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
}

thead th:last-child {
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}

tbody tr:nth-child(even) {
    background-color: #dbdfe6;
}

tbody tr:nth-child(odd) {
    background-color: #e6eaf0;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:last-child td:first-child {
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

tbody tr:last-child td:last-child {
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

p {
    color: black;
    font-size: 15px;
    margin: 10px;
    float: left;
    padding: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

td#sep {
    height: 3px;
    background-image: linear-gradient(#3e8d5c, #13444e 50%, #35bad5);
}

a {
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    background-color: none;
}

input {
    width: 85%;
    font-size: 15px;
    padding: 5px;
    border-radius: 5px;
    margin: 20px auto;
}

.typeInput {
    width: 85%;
    font-size: 15px;
    padding: 5px;
    border-radius: 5px;
    margin: 20px auto;
}

.typeButton {
    font-size: 15px;
    font-family: sf;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 5px;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}


/* Stile di base per la prima immagine */

.image1 {
    position: absolute;
    z-index: 1;
    /* Sullo sfondo */
    opacity: 1;
    transition: opacity 0.5s;
    /* Transizione per svanire */
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* Stile per la seconda immagine con effetto stirato */

.image2 {
    position: absolute;
    z-index: 2;
    /* Sopra la prima immagine */
    left: 0;
    /* Stessa altezza del contenitore */
    width: 0;
    /* Parte da una linea sottile */
    overflow: hidden;
    transition: width 0.5s;
    /* Transizione per espandersi o contrarsi */
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* Quando la seconda immagine si espande */

.image2.visible {
    width: 300px;
    /* Larghezza finale */
}