/* stili globali */

/* font monospace usato anche nella versione del tema 'creative', lo usiamo nelle tabelle perchè il font principale 'Poppins'
   non è monospace, quindi le date e gli importi non risultano ben allineati
*/
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap");


/* variabili root */
:root{
    --axi-orange: #DA821A;
    --axi-orange-hover: #DA7A08;
}

/* link arancio-axicura */
.link-orange { color: var(--axi-orange); }
.link-orange:hover { color: var(--axi-orange-hover); }

/* pulsanti arancio-axicura */
.btn-orange {
    --vz-btn-color: #fff;
    --vz-btn-bg: var(--axi-orange);
    --vz-btn-hover-bg: var(--axi-orange-hover);;
    --vz-btn-hover-color: #fff;
    --vz-btn-border-color: var(--axi-orange);
    --vz-btn-hover-border-color: var(--axi-orange-hover);
    --vz-btn-active-bg: var(--axi-orange-hover);
    --vz-btn-active-border-color: var(--axi-orange-hover);
    --vz-btn-active-color: #fff;
    /* --vz-btn-disabled-bg: #405189; */  /* disabled color da decidere */
}

/* input decimal */
.input-decimal, .input-decimal-3digits, .input-decimal-4digits { text-align: right; }

/* footer fisso per totali o per pulsanti azioni */
.footer-fixed
{
    padding: 0;
    bottom: 0;
    position: fixed;
    right: 0;
    color: var(--vz-footer-color);
    left: 0;
    height: 60px;
    -webkit-box-shadow: 0 -1px 2px rgba(56,65,74,.15);
    box-shadow: 0 -1px 2px rgba(56,65,74,.15);
    z-index: 10;
}
@media (min-width: 768px)
{
    .footer-fixed
    {
         left: var(--vz-vertical-menu-width);
    }
}
@media (min-width:768px)
{
    [data-sidebar-size=sm] .footer-fixed {
        left:var(--vz-vertical-menu-width-sm)
    }
}
@media (min-width:768px)
{
    [data-sidebar-size=md] .footer-fixed {
        left:var(--vz-vertical-menu-width-md)
    }
}

/* opacità pulsante back to top*/
#back-to-top { opacity: 0.3}

/* validazione per warning dati inseriti su inputs (non previene il submit della form, sono solo messaggi informativi) */
.form-control-valid {
    border-color:var(--vz-form-valid-border-color) !important;
    padding-right:calc(1.5em + 1rem);
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%230ab39c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat:no-repeat;
    background-position:right calc(.375em + .25rem) center;
    background-size:calc(.75em + .5rem) calc(.75em + .5rem)
}
.form-control-valid-description {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--vz-form-valid-color);
}
.form-control-invalid {
    border-color: var(--vz-form-invalid-border-color) !important;
    padding-right: calc(1.5em + 1rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23f06548'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f06548' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .25rem) center;
    background-size: calc(.75em + .5rem) calc(.75em + .5rem);
}
.form-control-invalid-description {
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--vz-form-invalid-color);
}

/* checkbox readonly */
.readonly-checkbox:hover { cursor: not-allowed; }

/* report invio estratti, avvisi e altri */
.js-invio-report {
    list-style: none;
    padding-left: 0;
    font-size: 70%;
    color: grey;
    text-align: left;
}
.js-invio-report .v-mark { color:#5cb85c; }
.js-invio-report .x-mark { color:red; }
.js-invio-report .s-mark { color:#c5e2e6; }

/* remix icon hoverable */
.ri-hoverable:hover {
    cursor: pointer;
    color: rgb(218, 130, 26) !important;
}

/* remix icon con animazione spin */
@keyframes ri-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.ri-spin {
    display: inline-block;
    animation: ri-spin 2s linear infinite;
}

/* elemento hoverable (necessario in quanto c'è regola .ri-* che setta font size */
.element-hoverable:hover {
    cursor: pointer;
    color: rgb(218, 130, 26) !important;
}

/* loader da usare in tooltip ajax */
.tooltip-loader {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    animation: spin 2s linear infinite;
}

/* filtri orizzontali per 'form filtro' che usano labels con icona */
.horizontal-form-filter
{
    border-top: 1px dashed;
    border-bottom: 1px dashed;
    border-color: #e9ebec;
    border-left: 0;
    border-right: 0;
}
.horizontal-form-filter .horizontal-form-label i {
    --vz-text-opacity: 1;
    color: rgba(var(--vz-info-rgb), var(--vz-text-opacity)) !important;
    margin-right: 0.25rem; /* me-1 */
}

/* dropdown stampe nei filtri: rimuoviamo icona di default verso il basso per usarne poi una custom nell'html */
.dropdown-stampe-filtri-toggle::after
{
    display: none;
}

/* tabelle table-striped: forzatura colore sfondo celle (utile in caso di sottotabelle)  */
.table-striped .force-even td {
  box-shadow: rgba(33, 37, 41, 0.02) 0 0 0 9999px inset;
}

.table-striped .force-odd td {
    box-shadow: none !important;
}

/* tabella simil-excel con 0 padding per gli inputs */
.excel-like-table > thead > tr > th,
.excel-like-table > thead > tr > td {
    border: 0;
}
.excel-like-table thead td
{
    padding: 0.50rem 0.2rem;
}
.excel-like-table tbody td {
    padding: 0;
}
.excel-like-table .form-control {
    text-align: right;
    border: 0;
}
.excel-like-table .select2-container .select2-selection--single
{
    border-radius: 0;
    border: none;
}
.excel-like-table select{
    border-radius: 0;
    border: none;
}

/* tabella parametri per elenchi label-valore*/
.table-parameters td {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}
.table-parameters td.label
{
    padding-left: 0;
    color: var(--vz-secondary-color);
}
.table-parameters td.value{
    font-weight: 600;
}

/* colonna con pulsanti azioni per tabella */
.table-actions-column {
    width: 2% !important;
    white-space: nowrap !important;
    text-align: right;
}

/* stack per pulsanti azioni tabella: utile comne alternativa a table-actions-column quando alcuni pulsanti possono essere opzionali:
lo stack fa in modo che siano sempre distanziati e allineati a dx
(di default usiamo allineamento a DX per allineare sempre in fondo i pulsanti di eliminazione) */
.table-actions-stack {
    /* hstack */
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;

    /* gap-2 (serve per quando usiamo icone di tipo btn, altrimenti con icone più piccole usare gap-3) */
    gap: 0.5rem;

   /* justify-content-end */
    justify-content: flex-end;
}

/* horizzontal row grigia tratteggiata */
.hr-dashed
{
    border-top: var(--vz-border-width) var(--vz-border-style) var(--vz-border-color) !important;  /* da border-top */
    border-top-style: dashed !important;                                                          /* da border-top-dashed */
    opacity: 1;
}

/* horizzontal row grigia continua, che arriva ai lati estremi delle colonne  */
.hr-full-lenght{
    margin-left: -16px;
    margin-right: -16px;
    border-top-color: var(--vz-border-color);
    opacity: 1;
}

/* pulsante stampa pagina */
@media print
{
    #stampa-pagina-div { display: none; }
}

/* left menu: contenitore con sfondo logo bianco */
.navbar-brand-box-white{
    background-color: white;
    background-clip: content-box;
}

/* left menu: input ricerca */
#left-menu-search-input {
    background-color: #2a2d38;
    border: 1px solid #3d4561;
    color: #e0e3eb;
}
#left-menu-search-input::placeholder {
    color: #9aa0b5;
    opacity: 1;
}

/* ricerca globale in header */
#global-search-form .autoComplete_wrapper > input {
    border: none !important;
}
#global-search-form .autoComplete_wrapper > ul{
    min-width: 400px !important;
    max-height: 400px !important;
}

/* badge notifiche in header */
@keyframes headerBadgePopIn
{
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    60% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}
#header-badge-notifiche {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}
.header-badge-animate {
    animation: headerBadgePopIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards !important;
}

/* START TITOLO FISSO */
#page-title-box-fixed {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1001;
    top: 71px;
    margin: 0;
    box-shadow: none;
    transition: all 0.1s ease-out; /* transizione per ombra */
}
/* aggiunge ombra su scroll */
#page-title-box-fixed.sticky-shadow {
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
}
@media (min-width: 768px) {
    #page-title-box-fixed {
        left: var(--vz-vertical-menu-width);
    }
}
/* regole per quando il menu laterale cambia larghezza */
@media (min-width: 768px) {
    [data-layout=vertical]:is([data-sidebar-size=sm], [data-sidebar-size=sm-hover]) #page-title-box-fixed {
        left: var(--vz-vertical-menu-width-sm);
    }
}
@media (min-width: 768px) {
    [data-layout=vertical][data-sidebar-size=md] #page-title-box-fixed {
        left: var(--vz-vertical-menu-width-md);
    }
}
/* da aggiungere a topbar quando c'è il titolo fisso: altrimenti si vede lo shadow in basso alla topbar che si sovrappone al titolo quando scrolliamo */
#page-topbar.no-shadow-topbar.topbar-shadow {
    box-shadow: none !important;
}
/* END TITOLO FISSO */


/* colori calendar */
.fc-toolbar-chunk .fc-button-group .fc-button {
    color: var(--vz-info);
    background-color: color-mix(in srgb, var(--vz-info) 15%, transparent);
}

.fc-toolbar-chunk .fc-button-group .fc-button:hover, .fc-toolbar-chunk .fc-button-group .fc-button.active {
    background-color: var(--vz-info);
}

.fc-toolbar-chunk .fc-today-button {
    background-color: var(--vz-info) !important;
    border: var(--vz-info);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--vz-info) !important;
    border-color: var(--vz-info) !important;
}

.fc-customNewAtt-button {
    background-color: var(--vz-success) !important;
    border-color: var(--vz-success) !important;
}