/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

.green-bg {
    color: #fff;
    background-color: #45cb85;
    border-color: #45cb85;
}

.gray-bg {
    color: #fff;
    background-color: #5d5d5d;
    border-color: #5d5d5d;
}

.black-bg {
    color: #fff;
    background-color: #212529;
    border-color: #212529;
}


.yellow-bg {
    color: #fff;
    background-color: #f2ae43;
    border-color: #f2ae43;
}


.blue-bg {
    color: #fff;
    background-color: #3577f1;
    border-color: #3577f1;
}

.orange-bg {
    color: #fff;
    background-color: #f1963b;
    border-color: #f1963b;

}

.pink-bg {
    background-color: #f672a7;
    border-color: #f672a7;

}

.red-bg {
    color: #fff;
    background-color: #f06060;
    border-color: #f06060;

}

.purple-bg {
    background-color:#751e88;
    border-color: #751e88;
}

.card-border-green-bg {
    border-color: #45cb85 !important;
}

.card-border-gray-bg {
    border-color: #5d5d5d !important;
}

.card-border-black-bg {
    border-color: #212529 !important;
}

.card-border-yellow-bg {
    border-color: #f2ae43 !important;
}

.card-border-blue-bg {
    border-color: #3577f1 !important;
}

.card-border-orange-bg {
    border-color: #f1963b !important;
}

.card-border-pink-bg {
    border-color: #f672a7 !important;
}

.card-border-red-bg {
    border-color: #f06060 !important;
}

.card-border-purple-bg {
    border-color: #751e88 !important;
}


    td.number{
        text-align: right;
    }

    th.number{
        text-align: right;
    }

    th.totale{
        color: black;

    }

    table.block-order td{
        padding: 0.1rem 0.2rem;


    }

    th.perc{
        text-align: right;
    }

    td.perc{
        text-align: right;
    }


    /*
    Parte annunci
     */
    #distico{ height:120px; }
    #txt1{ height:120px; }
    #txt2{ height:150px; }
    #preview_container { display: block; margin: 0 auto; padding: 20px 2px 0 2px; min-height: 200px; max-width: 170px; border-top:2px solid #ccc; background-color: #eeefee}
    #preview_croce p, .preview_croce p { text-align: center; }
    #preview_croce p img, .preview_croce p img { height:100%; max-height:25px; margin-bottom:10px; }
    #preview_foto p, .preview_foto p { text-align: center; }
    #preview_foto p img, .preview_foto p img { width: 90%; height: auto; border:1px solid #ccc; }

    .preview_container { display: block; margin: 0px auto; padding: 20px 2px 0px 2px; min-height: 200px; max-width: 170px; border-top:2px solid #ccc; background-color: #eeefee }


    .hx-loader {
        display: none;
    }

    .htmx-request .hx-loader{
        display:inline;
    }
    .htmx-request.hx-loader{
        display:inline;
    }

/* Parte per stampa */

@media print {
    #scrollbar {
        display: none;
    }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
    .container-fluid {
        margin: 0 !important;
        max-width: unset !important;
    }
    .page-content {
        margin-top: 0 !important;
        padding: 0 !important;
    }
    .table-print{
        table-layout: fixed;
    }
    .table-print th,
    .table-print td {

        font-size: 6px;
        word-break: break-all;
    }

    header {display: none;}

}

@keyframes fade-in {
         from { opacity: 0; }
       }

       @keyframes fade-out {
         to { opacity: 0; }
       }

       @keyframes slide-from-right {
         from { transform: translateX(90px); }
       }

       @keyframes slide-to-left {
         to { transform: translateX(-90px); }
       }

       /* define animations for the old and new content */
       ::view-transition-old(slide-it) {
         animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
         600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
       }
       ::view-transition-new(slide-it) {
         animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
         600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
       }

       /* tie the view transition to a given CSS class */
       .sample-transition {
           view-transition-name: slide-it;
       }