<style type="text/css">

    /* The snackbar - position it at the bottom and in the middle of the screen */
    #snackbar {
        visibility: hidden; /* Hidden by default. Visible on click */
        min-width: 350px; /* Set a default minimum width */
        margin-left: -125px; /* Divide value of min-width by 2 */
        background-color: #333; /* Black background color */
        color: #fff; /* White text color */
        text-align: center; /* Centered text */
        border-radius: 2px; /* Rounded borders */
        padding: 16px; /* Padding */
        position: fixed; /* Sit on top of the screen */
        z-index: 1; /* Add a z-index if needed */
        left: 50%; /* Center the snackbar */
        bottom: 80px; /* 30px from the bottom */
        font-size: 15pt;
    }

    /* Show the snackbar when clicking on a button (class added with JavaScript) */
    #snackbar.show {
        visibility: visible; /* Show the snackbar */

        /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
        However, delay the fade out process for 2.5 seconds */
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    /* Animations to fade the snackbar in and out */
    @-webkit-keyframes fadein {
        from {bottom: 0; opacity: 0;}
        to {bottom: 80px; opacity: 1;}
    }

    @keyframes fadein {
        from {bottom: 0; opacity: 0;}
        to {bottom: 80px; opacity: 1;}
    }

    @-webkit-keyframes fadeout {
        from {bottom: 80px; opacity: 1;}
        to {bottom: 0; opacity: 0;}
    }

    @keyframes fadeout {
        from {bottom: 80px; opacity: 1;}
        to {bottom: 0; opacity: 0;}
    }

    .fissa tbody {
        width: 100% !important; float: left !important; display: block !important; overflow-y: scroll !important; max-height: 100px;
    }
    .fissa tr {
        float: left !important; display: block !important;
    }
    .fissa td {
        float: left !important; display: block !important;
    }
    .fissa th {
        float: left !important; display: block !important;
    }
    .fissa tr {
        width: 100% !important; height: auto !important;
    }
    .fissa td {
        width: 30% !important; float: left !important;
    }
    .fissa th {
        width: 30% !important; float: left !important;
    }
    .fissa table {
        width: 100% !important;
    }

    hr.style-five {
        border: 0;
        height: 0; /* Firefox... */
        box-shadow: 0 0 10px 1px black;
    }
    hr.style-five:after {
        content: "\00a0";  /* Prevent margin collapse */
    }

    .dato-invalido{
        -moz-box-shadow: 1px 1px 3px 2px #ff0000 !important;
        -webkit-box-shadow: 1px 1px 3px 2px #ff0000 !important;
        box-shadow:         1px 1px 3px 2px #ff0000 !important;
    }

    .sized-label{
        font-size: 10pt !important;
    }

    footer{
        position: fixed;
        height: 30px;
        width: 100%;
        bottom: 0;
        margin-bottom: 0;
        text-align: center;
        vertical-align: middle;
    }

    th {
        color: purple;
    }

    thead{
        background-color: white !important;
    }

    {% if impostazioni.ritornaImpostazioneDaNome('MostraFooterSviluppatoDa') == '1' %}
        .pushContent
        {
            height:20px;
            margin-top: 20px;
        }

        body { padding-bottom: 70px; }
    {% endif %}

</style>

<style type="text/css">

    .ric{
        color: darkblue;
    }

    .contenitore_generale_body table td:nth-child(2){
        padding-left: 20px;
    }
    .contenitore_generale_body{
        padding-top: 50px;
    }
    /* Absolute Center Spinner */
    .loading {
        position: fixed;
        z-index: 999;
        height: 2em;
        width: 2em;
        overflow: show;
        margin: auto;
        top: 0;
        left: 220px;
        bottom: 0;
        right: 0;
        display: none;
    }

    /* Transparent Overlay */
    .loading:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.3);
    }

    /* :not(:required) hides these rules from IE9 and below */
    .loading:not(:required) {
        /* hide "loading..." text */
        font: 0/0 a;
        color: transparent;
        text-shadow: none;
        background-color: transparent;
        border: 0;
    }

    .loading:not(:required):after {
        content: '';
        display: block;
        font-size: 10px;
        width: 1em;
        height: 1em;
        margin-top: -0.5em;
        -webkit-animation: spinner 1500ms infinite linear;
        -moz-animation: spinner 1500ms infinite linear;
        -ms-animation: spinner 1500ms infinite linear;
        -o-animation: spinner 1500ms infinite linear;
        animation: spinner 1500ms infinite linear;
        border-radius: 0.5em;
        -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
        box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
    }

    /* Animation */

    @-webkit-keyframes spinner {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @-moz-keyframes spinner {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @-o-keyframes spinner {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spinner {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
</style>

<style type="text/css">

    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait)
    and (-webkit-min-device-pixel-ratio: 1)  {
        .carrello_testo{
            display: none;
        }
        .nome_utente{
            display: none;
        }
        .navbar-brand{
            display: none;
        }
        .cerca_shop{
            margin-left: 10px;
            width: 200px !important;
        }


        #content_shop table td:nth-child(2){
            max-width: 100px !important;
        }
        #content_shop table td:nth-child(1){
            display: none;
        }
    }

    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape)
    and (-webkit-min-device-pixel-ratio: 1)  {
        .carrello_testo{
            display: none;
        }
        .nome_utente{
            display: none;
        }
        #content_shop table td:nth-child(2){
            max-width: 200px !important;
        }
    }

    @media (max-width: 1300px) {
        .carrello_testo{
            display: none;
        }
    }

    @media (max-width: 1215px) {
        .nome_utente{
            display: none;
        }
        #content_shop table td:nth-child(2){
            max-width: 200px !important;
        }
        #content_shop table td:nth-child(1){
            display: none;
        }
    }

    @media print{
        button,.btn{
            display: none !important;
        }

        tbody>tr:nth-child(even)>td {
            -webkit-print-color-adjust: exact !important;
            color: blue !important;
        }

        a{
            text-decoration: none !important;
        }

        a:after { content:''; }
        a[href]:after { content: none !important; }

        input{
            display: none !important;
        }

        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
            padding: 2px !important;
        }

        nav{
            display: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        .navbar{
            display: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        .contenitore_generale_body{
            padding: 0 !important;
            margin: 0 !important;
        }
        .page-header{
            font-size: 15pt !important;
        }

        body{
            padding: 0 !important;
            margin: 0 !important;
            font-size: .9em !important;
        }

        th{
            color: red !important;
        }

        h1{
            -webkit-transform: scale(0.7) !important;
            -moz-transform: scale(0.7) !important;
            -ms-transform: scale(0.7) !important;
            -o-transform: scale(0.7) !important;
            transform: scale(0.7) !important;
        }

        td{
            border-bottom: solid 1px black !important;
        }
    }
</style>