@charset "UTF-8";

/* Font da Google */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=League+Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');

/*-----------------------------------
-------0) Reset / Normalize----------
-------------------------------------*/

/*------------------------------------------
-------1) Variabili e design tokes----------
---------------------------------------------*/

:root,
[data-bs-theme=light] {
    --blade-primary-950: #020D34;
    --blade-primary-900: #05164B;
    --blade-primary-800: #0C2978;
    --blade-primary-700: #153AA3;
    --blade-primary-600: #1F4FD5;
    --blade-primary-500: #4268F4;
    --blade-primary-400: #7085F7;
    --blade-primary-300: #95A3F9;
    --blade-primary-200: #BCC3FB;
    --blade-primary-150: #DDE1FD;
    --blade-primary-100: #ECEEFE;
    --blade-primary-50: #F4F5FE;
    --blade-secondary-900: #5C3D0F;
    --blade-secondary-700: #A67224;
    --blade-secondary-600: #D9962F;
    --blade-secondary-500: #F2A735;
    --blade-secondary-400: #F5BC67;
    --blade-secondary-300: #F7D399;
    --blade-secondary-100: #FAEEDC;
    --blade-black: #13151A;
    --blade-grey-950: #333333;
    --blade-grey-900: #444444;
    --blade-grey-800: #555555;
    --blade-grey-700: #777777;
    --blade-grey-600: #888888;
    --blade-grey-500: #999999;
    --blade-grey-400: #b2b2b2;
    --blade-grey-300: #C7C7C7;
    --blade-grey-200: #d6d6d6;
    --blade-grey-150: #E5E5E5;
    --blade-grey-100: #f0f0f0;
    --blade-grey-50: #f7f7f7;
    --blade-grey-25: #fcfcfc;
    --blade-white: #ffffff;
    --blade-green-900: #18592E;
    --blade-green-700: #268C48;
    --blade-green-500: #37CC69;
    --blade-green-300: #77E59D;
    --blade-green-100: #CFFADE;
    --blade-yellow-900: #91711A;
    --blade-yellow-700: #C79A24;
    --blade-yellow-500: #F7CC20;
    --blade-yellow-300: #F7DB74;
    --blade-yellow-100: #FAEEC0;
    --blade-red-900: #6E1A08;
    --blade-red-700: #A62C1C;
    --blade-red-500: #D94734;
    --blade-red-300: #F2816B;
    --blade-red-100: #FFCABD;
    --blade-red-50: #FFEFEB;
    --blade-heading-font: "DM Sans", sans-serif;
    --blade-text-font: "Lora", sans-serif;
    --blade-btn-font: "DM Sans", sans-serif;
    --blade-border-primary: var(--bs-border-width) var(--bs-border-style) var(--blade-grey-300);
    --blade-ombra-y: 0 4px 16px 0 rgba(0, 0, 0, 0.04);
    --blade-ombra-x: 4px 0 16px 0 rgba(0, 0, 0, 0.04);
}

/*----------------------
-------2) Base----------
------------------------*/

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/*---------------------------------
-------3) Layout generali----------
-----------------------------------*/

/* container */

@media (min-width: 1400px) {

    .container {
        max-width: 100%;
    }

}

.container-fluid {
    padding: 0;
}


/* navbar */

.navbar {
    --bs-navbar-toggler-icon-bg: url("font-awesome-icons/navbar-icon.4524f2962abe.svg");
}

.navbar-brand img {
    max-width: 40vw;
    height: 40px;
    max-height: 40px;
}

.navbar-logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 24px;
}

@media (max-width: 768px) {

    .navbar-toggler {
        padding: 0;
        border: none;
        margin-left: 12px;
    }

    .navbar-brand img {
        max-width: 35vw;
        margin-left: 9px;
    }
    
    .navbar-logo-container {
        padding-left: 12px;
    }
}

navbar-brand {
    display: flex;
}

.label-versione-blade {
    font-size: 12px;
    color: var(--blade-grey-700);
}

/* topbar */

.topbar {
    background: var(--blade-white);
    border-bottom: var(--blade-border-primary);
    box-shadow: var(--blade-ombra-y);
    padding: 0;
}

.pulsanti-topbar {
    gap: 0;
    display: flex;
    align-self: stretch;
}

.pulsanti-topbar>*:last-child {
    border-right: 1px solid var(--blade-grey-200);
}
.pulsanti-topbar>* {
    border-left: 1px solid var(--blade-grey-200);
}

.pulsanti-topbar>*:last-child:hover {
    border-right: 1px solid var(--blade-primary-200);
}
.pulsanti-topbar>*:hover {
    border-left: 1px solid var(--blade-grey-200);
}

/* user info button */

.img-utente {
    background: var(--blade-grey-500);
    width: 40px;
    height: 40px;
    border-radius: 50px;
    overflow: hidden;
    position: relative;
}

.img-utente img {
    position: absolute;
    object-fit: cover;
    top: 0;
    left: 0;
    width: 100%;
}

.info-utente {
    display: block;
    text-align: left;
}

.nome-utente {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) {
    .info-utente {
        display: none;
    }
}

/* Btn Header */

.btn-header {
    --bs-btn-padding-y: 14px;
    --bs-btn-padding-x: 14px;
    --bs-btn-border-radius: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 0;
    width: 64px;
    height: 100%;
}

.btn-header:hover {
    border: none;
    border-radius: 0;
    background: var(--blade-grey-100);
}

.btn-header:active {
    border: none !important;
    z-index: 2;
}

.btn-header.show {
    border: none !important;
    border-left: 1px solid var(--blade-grey-200) !important;
    border-top: none !important;
    border-bottom: none !important;
    z-index: 2;
    color: var(--blade-grey-900) !important;
}

.icon-container-btn-header {
    aspect-ratio: 0.75;
    width: 100%;
    height: 66px;
}

/* Btn Header Big */

.btn-header-big {
    display: inline-flex;
    padding: 13px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 0;
    height: 100%;
}

.btn-header-big:hover {
    border: none;
    border-radius: 0;
    background: var(--blade-grey-100);
}

.btn-header-big:active {
    border: none !important;
    z-index: 2;
    color: var(--blade-grey-900) !important;
}

.btn-header-big.show {
    border-right: 1px solid var(--blade-grey-200) !important;
    border-left: 1px solid var(--blade-grey-200) !important;
    border-top: none !important;
    border-bottom: none !important;
    z-index: 2;
    color: var(--blade-grey-900) !important;
}

@media (max-width: 576px) {
    .btn-header-big {
        padding: 13px 16px;
    }
}

/* main area */

.main-area-container {
    overflow: hidden;
    width: 100%;
    display: flex;
    flex: 1;
}

/* SIDEBAR */

.sidebar {
    background-color: var(--blade-white);
    border-right: var(--blade-border-primary);
    box-shadow: var(--blade-ombra-x);
    max-width: 261px;
    min-width: 261px;
    z-index: 100;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar a {
    color: var(--blade-grey-900);
}

.sidebar ul li a:hover,
.sidebar ul li a.active {
    background-color: var(--blade-primary-50);
    color: var(--blade-primary-500) !important;
    border-radius: 6px;
}

.sidebar .nav-link {
    padding: 8px 12px;
    margin-bottom: 4px;
    font-weight: 500;
    position: relative;
    gap: 8px;
    display: flex;
}

.sidebar-mobile {
    background-color: var(--blade-white);
    border-right: var(--blade-border-primary);
    z-index: 1026;
}

.offcanvas-body {
    padding: 0px;
}

/* select ambiente sidebar */

.select-sidebar-container {
    padding: 24px;
}

[data-ambiente-select] {
    background-position: right 0.75rem top 14px;
    white-space: normal;
    align-items: center;
    display: flex;
    font-weight: 500;
}

/*--- menù sidebar ---*/

/* Menù Plain */

.plain-menu {
    padding: 0px 20px 20px 20px;
}

.label-menu {
    color: var(--blade-grey-700);
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    margin: 0px 0px 12px 12px;
}

/* menù Collapsible */

.menu-sticky {
    overflow: auto;
}

#home-collapse,
#gestione-collapse,
#progettazione-collapse,
#selezioni-collapse,
#gestioneesuberi-collapse,
#servizio-collapse,
#presenze-collapse,
#monitoraggio-collapse,
#certificazioni-collapse,
#formazione-collapse,
#tutoraggio-collapse,
#formazioneolp-collapse {
    border-left: var(--blade-border-primary);
    margin-left: 24px;
    padding: 6px 0;
}

ul.btn-toggle-nav {
    padding-left: 8px;
}

@media (max-width: 768px) {

    .btn-toggle-menu:not(.collapsed),
    button.btn.btn-toggle.btn-toggle-menu.collapsed {
        width: 100%;
        font-size: 16px;
    }

    ul.btn-toggle-nav.ul-no-bullet {
        font-size: 16px;
        padding-left: 24px;
    }

    .btn-toggle-nav li.nav-item {
        margin-bottom: 8px;
    }

    a.nav-link {
        padding: 8px 12px;
        border-radius: 6px;
    }

    .display-when-collapsed {
        width: 22px;
    }

    .display-when-active {
        width: 22px;
    }

}

/* workspace */

.workspace {
    background: var(--light);
    overflow: hidden;
    overflow-y: overlay;
    width: 100%;
    max-width: none;
    padding: 0;
    background-color: var(--blade-white);
    min-height: none;
    position: relative;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

.workspace .breadcrumb {
    font-size: 14px;
    margin: 8px 0px 0px 0px;
}

.workspace.full-screen .pagehead {
    margin: 0;
    max-width: 100%;
}

.pagebody {
    padding: 40px 34px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-x: auto;
}

@media (max-width: 576px) {

    .pagebody {
        padding: 24px;
    }
}

/* pagehead */

.workspace-header-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.pagehead {
    border-bottom: var(--blade-border-primary);
    background-color: var(--blade-grey-25);
    padding: 24px 32px 24px 32px;
    margin-left: 0;
    max-width: 100%;
    margin-right: 0;
}

@media (min-width: 576px) {

    .page-title {
        margin: 0;
    }

}

@media (max-width: 576px) {

    .pagehead {
        padding: 24px 24px 20px 24px;
    }

}

/* page title */

@media (min-width: 576px) {

    .page-title {
        white-space: nowrap;
    }
}

.top-card-buttons {
    gap: 12px;
    display: flex;
    flex-wrap: wrap;
}

.section {
    width: 100%;
    position: relative;
    min-width: fit-content;
}

.section-card {
    border: 1px solid var(--blade-grey-200);
    border-radius: 6px;
    padding: 32px;
}

@media (max-width: 767px) {
    
    .section-card {
        padding: 0px !important;
        border: 0px !important;
        background: none !important;
    }
}



:has(>.section-card) {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Heading sezione */
.heading-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0px;
}

.heading-section:has(+*) {
    margin-bottom: 24px;
}


.title-section {
    width: 75%;
}

@media (max-width: 992px) {

    .heading-section:has(+*) {
        margin-bottom: 12px;
    }

    .title-section {
        width: 100%;
    }
}

.subtitle-container {
    margin-bottom: 6px;
}

/*-------------------------------------
-------------4) COMPONENTI-------------
--------------------------------------*/


/*-------------- TABELLE (GENERALE & LAYOUT) ------------ */

/* Tabella base */
.table {
    margin-bottom: 0;
}

/* Header tabella */
th {
    color: var(--blade-grey-800);
    font-family: var(--blade-text-font);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px 8px 12px 8px !important;
}

thead th {
    background-color: var(--blade-grey-150) !important;
}

/* Riga tabella */
tbody tr {
    height: 64px;
    background-color: var(--blade-white);
}

tbody:not(:has(tr.ui-sortable-helper)):not(:has(.jqs-day)):not(:has(.month-day)) tr:hover,
.ui-sortable-placeholder {
    background-color: var(--blade-grey-100);
}

/* Checkbox checked - possibile conflitto */
.form-check-input:checked[type=checkbox]+tr {
    background-color: #000;
    /* possibile conflitto */
}

/* Celle tabella */
table:not(.v-table) tr td:first-child {
    padding-left: 16px;
}

table:not(.v-table):not(.impossible-table) tr td:last-child {
    padding-right: 16px !important;
}

table:not(.v-table) tr th:first-child {
    padding-left: 20px !important;
    border-radius: 4px 0 0 0 !important;
}

table:not(.v-table) tr th:last-child {
    padding-right: 16px !important;
    justify-content: end;
    display: flex;
    align-items: flex-end;
    border-radius: 0 4px 0 0 !important;
}

tbody tr:last-child {
    border-bottom: transparent;
}

/* Responsive tabella */
@media (max-width: 576px) {
    .table-container {
        overflow: scroll;
    }
}

/* Ultime celle tabella */
td:last-child {
    margin-right: 0;
    padding-right: 10px;
}

td:last-child * {
    margin-right: 0;
}

.cta-table-container {
    display: flex;
    justify-content: end;
    padding-right: 8px;
    position: relative;
}

.cta-table-container:has(> * ~ *) {
    gap: 10px;
}

/* Table responsive */
.table-responsive {
    border-radius: 5px 5px 0px 0px !important;
    border: var(--blade-border-primary);
    overflow: visible;
    width: 100%;
}

/* Dimensioni e allineamenti base */

td {
    vertical-align: middle;
}

/* V-Table (Variante compatta) */
.v-table tr {
    height: 20px;
}

.v-table th {
    height: 20px;
    padding: 12px 8px 4px 8px !important;
}

.v-table td {
    height: 30px;
}

.v-table tr:has(td.d-none) {
    /* d-none: Bootstrap Native */
    display: none;
}

/* Label risultati ricerca filtri */

.label-search-results-display {
    font-weight: 500;
}

.label-search-results-display-total {
    color: var(--blade-grey-600);
}

/* Gestione liste vuote in tabella */

[data-trs-ul]:has(li)~[data-trs-ul-empty] {
    display: none;
}

/* compact tables */
.compact-table tr,
.compact-table td {
    height: 0;
}

/* sortable tables */

.ui-sortable-placeholder {
    border-width: 3px;
    border-color: rgba(0, 0, 255, 0.2);
    border-radius: 1px;
}

.ui-state-hover {
    background: lightyellow;
}

.ui-state-active {
    background: lightgray;
}

/*==========================================================================
  3. COMPONENTI PULSANTI GENERICI E UTILITY
  ==========================================================================*/

/*----------- PULSANTI (BASE & SCHEMA) -----------*/

/* Base btn - possibile conflitto con bootstrap */
/* classe bootstrap */
.btn {
    --bs-btn-padding-y: 10px;
    --bs-btn-padding-x: 16px;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 140%;
    --bs-btn-color: var(--blade-grey-900);
    --bs-btn-bg: var(--blade-white);
    --bs-btn-border-radius: 6px;
    --bs-btn-box-shadow: none;
    --bs-btn-font-family: var(--blade-btn-font);
}

.btn:hover {
    --bs-btn-bg: var(--blade-grey-150);
}

.btn:focus {
    box-shadow: none;
}

/* Primary button */
/* classe bootstrap - sovrascrittura */
.btn-primary {
    --bs-btn-border-color: var(--blade-primary-500);
    --bs-btn-bg: var(--blade-primary-500);
    --bs-btn-color: var(--blade-white);
    --bs-btn-hover-border-color: var(--blade-primary-600);
    --bs-btn-hover-bg: var(--blade-primary-600);
    --bs-btn-hover-color: var(--blade-white);
    --bs-btn-active-border-color: var(--blade-primary-600);
    --bs-btn-active-bg: var(--blade-primary-600);
    --bs-btn-active-color: var(--blade-white);
    --bs-btn-disabled-border-color: var(--blade-grey-100);
    --bs-btn-disabled-bg: var(--blade-grey-100);
    --bs-btn-disabled-color: var(--blade-grey-400);
    font-style: normal;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* Secondary button */
/* classe bootstrap - sovrascrittura */
.btn-secondary {
    --bs-btn-border-color: var(--blade-grey-200);
    --bs-btn-bg: var(--blade-white);
    --bs-btn-hover-border-color: var(--blade-grey-200);
    --bs-btn-hover-bg: var(--blade-grey-50);
    --bs-btn-hover-color: var(--blade-grey-900);
    --bs-btn-active-border-color: var(--blade-primary-300);
    --bs-btn-active-bg: var(--blade-primary-100);
    --bs-btn-active-color: var(--blade-primary-600);
    --bs-btn-disabled-border-color: var(--blade-grey-100);
    --bs-btn-disabled-bg: var(--blade-white);
    --bs-btn-disabled-color: var(--blade-grey-300);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    white-space: nowrap;
    font-style: normal;
}

/* Btn Delete */
.btn-delete {
    --bs-btn-color: var(--blade-red-700);
    --bs-btn-hover-bg: var(--blade-red-50);
    --bs-btn-hover-color: var(--blade-red-700);
    --bs-btn-active-bg: var(--blade-red-100);
    --bs-btn-active-border-color: var(--blade-red-300);
    --bs-btn-active-color: var(--blade-red-700);
}

.btn-delete .delete-icon .linea {
    stroke: var(--blade-red-500) !important;
}

/* Pulsante Link - classe bootstrap */
.btn-link {
    --bs-btn-focus-shadow-rgb: 49, 113, 128;
}

/* Pulsante di chiusura (X) - classe bootstrap */
.btn-close {
    --bs-btn-close-color: #000;
    --bs-btn-close-opacity: 0.5;
    --bs-btn-close-hover-opacity: 0.75;
    --bs-btn-close-focus-opacity: 1;
    --bs-btn-close-disabled-opacity: 0.25;
    --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);

    --bs-btn-close-bg: url("font-awesome-icons/cross.7b8321c2cf5e.svg");
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(58, 133, 150, 0.25);
}

/* Gestione overflow pulsanti con notifiche */
button:has(.badge-notifications) {
    overflow: visible;
}

/* Pulsante informazioni posizionato */
.info-button {
    position: absolute;
    right: 2rem;
    
}

/* Pulsante link personalizzato */
button.link {
    font-size: 13px;
    color: #3A8596;
    background: none !important;
    border: none;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    margin-left: 3px;
    text-decoration: underline;
    cursor: pointer;
}

/* Variante rossa pulsante link */
button.link-red {
    color: #f0686a !important;
}

/* Pulsante chiusura base */
.close-btn-basic {
    border: none;
    background-color: rgba(0, 0, 0, 0);
    color: #222;
    font-size: 18px;
    padding: 0;
}

/* btn ghost */

.btn-ghost-white {
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: #fff;
    --bs-btn-color: #fff;
}

/*------- span ------*/

span.link {
    font-size: 13px;
    color: #3A8596;
    background: none !important;
    text-decoration: underline;
}


/*==========================================================================
  7. PULSANTI CON ICONE
  ==========================================================================*/

/* btn icon */
.btn-icon {
    width: 41px;
    height: 41px;
}

.btn-sm.btn-icon {
    width: 34px;
    height: 35px;
}

/* btn icon piccola */
.btn-sm.btn-icon {
    --bs-btn-padding-y: 8px;
    --bs-btn-padding-x: 12px;
    --bs-btn-font-size: 12px;
    --bs-btn-border-radius: 4px;
}

/* btn icon grande */
.btn-lg.btn-icon {
    --bs-btn-padding-y: 8px;
    --bs-btn-padding-x: 20px;
    --bs-btn-border-radius: 8px;
}

/* info button */
.info-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-style: normal;
    margin-top: 1.5rem;
    text-decoration: underline
}

.info-button:hover {
    color: var(--blade-primary-500);
    font-family: var(--blade-text-font);
    text-decoration: underline
}

.info-button:active {
    color: var(--blade-primary-500) !important;
    font-family: var(--blade-text-font) !important;
    text-decoration: underline
}

.btn-icon .duo-icon {
    width: 16px;
}

.btn-icon.btn-header .duo-icon {
    width: 18px;
}

.btn-sm .duo-icon {
    /*classe bootstrap: .btn-sm*/
    width: 14px;
}

/*-------------- ACTIONS & NAVIGAZIONE TABELLA ------------ */

/* Pagination */

.pagination-container {
    padding: 16px 0px 0px 0px;
}

.pagination {
    /* Bootstrap Native */
    --bs-pagination-font-size: 14px;
    display: inline-flex;
}

.page-link {
    --bs-pagination-color: var(--blade-primary-500);
    --bs-pagination-bg: var(--blade-white);
    border-radius: 4px !important;
    border: var(--blade-border-primary);
    font-weight: 500;
    color: var(--blade-grey-900);
}

.page-link:focus {
    --bs-pagination-focus-color: var(--blade-primary-600);
    --bs-pagination-focus-bg: var(--blade-primary-100);
    box-shadow: none;
}

.current {
    margin: 0 16px;
}

/* Action Tabs Container */
.table-action-tab-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 20px !important;
}

.table-visible-action {
    display: inline-flex;
    gap: 16px;
    align-items: center;
}

.table-action {
    display: inline-flex;
    gap: 16px;
    align-items: center;
}

.table-action .dropdown:not(:has(ul *)) {
    /* dropdown: Bootstrap Native */
    display: none;
}

/* Action Media Queries */
@media screen and (max-width: 1256px) {
    .table-action-tab-container {
        display: block;
    }

    .table-action-container {
        margin-bottom: 24px;
    }
}

@media screen and (max-width: 912px) {
    .table-visible-action {
        display: block;
    }

    .table-action {
        margin-bottom: 8px;
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* immagine scatola vuota */
.empty div img {
    max-width: 25%;
}

/*-------------- FORM & INPUTS (Generale) ------------ */

.form-section {
    --bs-gutter-y: 1.25rem;
    margin-top: 0;
    padding-bottom: 2rem;
}

/* Search input states */
input[type="search"]:hover:not(:placeholder-shown),
input[type="search"]:focus:not(:placeholder-shown),
select[type="search"]:hover:not(:placeholder-shown),
select[type="search"]:focus:not(:placeholder-shown) {
    background-image: none !important;
}

/* Error messages */
.errorlist {
    width: 100%;
    color: var(--bs-danger-text);
    list-style: none;
    padding-left: 0;
    margin-top: 8px;
}

/* Labels */
.form-label {
    /* Bootstrap Native */
    margin-bottom: 0.2rem;
}

.floating-label {
    position: absolute;
    margin-left: 10px;
    margin-top: 5px;
    transition: 0.15s ease-in-out;
    opacity: 70%;
}

/* Form Control */
.form-control {
    /* Bootstrap Native */
    font-size: 14px;
}

/* Select Generica */
select {
    border: 1px solid #eee;
    padding: 5px 6px;
    margin-top: 0;
    color: #222;
    background-color: #fff;
}

/* Form Select (Bootstrap style) */
.form-select {
    /* Bootstrap Native */
    background-size: 13px 10px;
    font-size: 14px;
}

/* nasconde le sezioni vuote dei form - per maggiori info chiedere a @xzy */
[data-form-section-title]:not(:has(+[data-form-section]>div:not([hidden]) :is(input:not(.d-none), select:not(.d-none), textarea:not(.d-none)))) {
    display: none !important;
}

/*-------------- CHECKBOX, RADIO & SWITCHES ------------ */

/* Interactive Checkbox Label Logic */
div[data-interactive-checkbox-label]:has(input[type="checkbox"]:not(:checked)) label.checkbox-true-label {
    display: none;
}

div[data-interactive-checkbox-label]:has(input[type="checkbox"]:checked) label.checkbox-false-label {
    display: none;
}

/* Form Switch */

.form-check-input[type=checkbox] {
    border-color: var(--blade-grey-300);
}

.form-check-input:checked[type=checkbox]:not([role="switch"]) {
    background-image: url("font-awesome-icons/check-icon.3c206490757a.svg");
    background-size: 8px 6px;
    --bs-form-check-bg-image: initial;
}

/* Checkbox focus */
.form-check-input:focus {
    border-color: var(--blade-primary-500);
    box-shadow: 0 0 0 0.25rem rgba(53, 160, 242, 0.25);
}

.form-check-input:checked {
    background-color: var(--blade-primary-500);
    border-color: var(--blade-primary-500);
}

.form-check-input:disabled~.form-check-label,
.form-check-input[disabled]~.form-check-label {
    color: var(--blade-grey-400);
    opacity: 1;
}

/* Checkbox active */
.form-check-input:active {
    filter: brightness(100%);
}

/* Checkbox disabled checked */
.form-check-input:checked[type=checkbox]:not([role="switch"]):disabled {
    background-image: url("font-awesome-icons/check-icon.3c206490757a.svg");
}

/* Checkbox disabled */
.form-check-input:disabled {
    background-color: var(--blade-grey-300);
    border-color: var(--blade-grey-300);
}

.form-switch {
    /* Bootstrap Native */
    padding-top: 0.15rem;
}

.form-switch .form-check-input {
    /* Bootstrap Native */
    --bs-form-switch-bg: url("font-awesome-icons/circle-gray.5eb6afd730eb.svg");
}

.form-switch .form-check-input:checked {
    /* Bootstrap Native */
    --bs-form-switch-bg: url("font-awesome-icons/circle-white.3e042b1c2725.svg");
}

/* Radio Buttons Styles */
.radio-label-button {
    display: block;
    min-width: 1.5rem;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 3px;
    border: #CFDBE5 solid 1px;
}

.radio-text {
    white-space: normal;
    align-items: center;
}

/*-------------- INPUT GROUPS ------------ */

.input-group-text:last-child span {
    /* Bootstrap Native (Legacy BS4) */
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* In-group input styling */
.in-group-input,
.input-group span {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

/* TODO: da sistemare, su Blade non voglio più questi filtri */
.in-group-form-container {
    all: initial;
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    max-width: 25vw;
}

/* TODO: da sistemare, rivederla per farla ancora meglio...già è ottima, ma si può migliorare sempre */
.in-group-form-container:has(input:not([type='hidden']):not(:placeholder-shown)) .floating-label,
.in-group-form-container:has(input:focus) .floating-label,
.in-group-form-container:has(select option:first-of-type:not(:checked)) .floating-label {
    position: absolute;
    margin-left: 5px;
    margin-top: -6px;
    transition: 0.15s ease-in-out;
    opacity: 100%;
}

/* Testo dentro agli input o select */
.in-group-form-container input,
.in-group-form-container select {
    line-height: 1.5;
    font-family: var(--blade-text-font), sans-serif;
    font-weight: 400;
    color: var(--bs-gray-600);
}


/*-------------- FILE INPUTS (Custom) ------------ */

.custom-file-input {
    /* Bootstrap Native (Legacy BS4 style) */
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    margin: 0;
    opacity: 0;
}

.custom-file-label {
    /* Bootstrap Native (Legacy BS4 style) */
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.custom-file {
    /* Bootstrap Native (Legacy BS4 style) */
    position: relative;
    display: inline-block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    margin-bottom: 20px;
}

.custom-file+* .errorlist {
    margin-top: 0;
}

.custom-file-label::after {
    /* Bootstrap Native (Legacy BS4 style) */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.5em + 0.75rem);
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: #495057;
    content: "Browse";
    background-color: #e9ecef;
    border-left: inherit;
    border-radius: 0 0.25rem 0.25rem 0;
}

.custom-file-input~.custom-file-label[data-browse]::after {
    content: attr(data-browse);
}

.custom-file-model-btn {
    flex: 2;
    /* height: fit-content;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    font-size: 12px;
    font-family: var(--blade-text-font);
    font-style: normal;
    margin-right: 12px !important; */
}

.custom-file-change-btn {
    flex: 1;
}

/* TODO: @XZY Sistemalo!!! */
.custom-file:has(input[data-delete-file-checkbox]:checked) label[data-browse] {
    background-color: rgba(245, 86, 86, 0.2);
}

.custom-file:has(input[data-delete-file-checkbox]:checked) label[data-delete-file-label] {
    background-color: #f0686a;
    color: white;
}

/* Anteprima (thumbnail) del documento nel widget file.
   Altezza fissa condivisa con la drop zone: thumbnail, icona PDF e drop zone
   occupano lo stesso box, così i widget restano allineati in orizzontale. */
.document-thumbnail-preview,
.blade-dropzone {
    height: var(--blade-file-media-h, 200px);
}
.document-thumbnail-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    overflow: hidden;
}
.document-thumbnail-preview a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.document-thumbnail-preview .document-thumbnail-img {
    max-height: var(--blade-file-media-h, 200px);
    max-width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fff;
    object-fit: contain;
}

.document-thumbnail-preview .document-thumbnail-icon {
    font-size: 96px;
    line-height: 1;
    color: #c0392b;
}

/* ---- blade-file-widget (drop zone + controlli) ---- */
.blade-file-input-wrap {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.blade-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    border: 1px dashed var(--blade-grey-300);
    border-radius: 8px;
    cursor: pointer;
    background: var(--blade-grey-50);
    transition: background 0.15s, border-color 0.15s;
    width: 100%;
    margin-bottom: 12px;
}
.blade-dropzone:hover,
.blade-dropzone--over {
    background: var(--blade-grey-100);
    border-color: var(--blade-grey-500);
}
.blade-dropzone-icon {
    font-size: 2rem;
    color: var(--blade-grey-400);
}
.blade-dropzone-hint {
    font-size: 0.82rem;
    color: var(--blade-grey-600);
}
.blade-dropzone-btn {
    pointer-events: none;
}
.blade-file-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}
.blade-file-controls>* {
    min-width: fit-content;
}
.blade-file-controls .only-when-file {
    display: none;
}
/* Sostituisci si espande per riempire il widget; il cestino resta icona a destra */
.blade-file-controls > label:first-child {
    flex: 1 1 auto;
}
.blade-file-widget--has-file .blade-dropzone {
    display: none;
}
.blade-file-widget--has-file .blade-file-controls .only-when-file {
    display: flex;
}


/*-------------- COMPONENTI SPECIALI & LOGIN ------------ */

/* Hider functionality */
[data-hider-container] {
    position: relative;
}

[data-hider-container]:has([data-hider]:not(:checked)) [data-hider-target] {
    display: none;
}

[data-hider-container]:has([data-hider]:checked) [data-hider-placeholder] {
    display: none;
}

/* Login & Password */

.password-toggler {
    top: 0;
    bottom: 0;
    margin-bottom: auto;
    margin-top: auto;
}

button#toggle-password {
    position: absolute;
    top: 3px;
    right: 4px;
    z-index: 9;
    width: 28px;
    height: 30px;
    background: 0;
    border: 0;
}

/*-------------- SELECTIZE CONTROL ------------ */

.selectize-control.multi .selectize-input [data-value].active {
    padding: 4px 8px;
}

.selectize-control.multi .selectize-input>div.active {
    color: #fff !important;
}

.selectize-control.multi .selectize-input [data-value] {
    border-radius: 3px !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 4px 8px;
}

.selectize-control.plugin-remove_button .item .remove {
    background: rgba(255, 255, 255, 0);
    color: #fff !important;
    border: none !important;
    text-decoration: none !important;
}

.selectize-control.multi .selectize-input.has-items {
    padding: 8px 8px !important;
}

.selectize-control.plugin-remove_button .item .remove:hover {
    background: rgba(0, 0, 0, 0) !important;
    color: #fff !important;
    border: none !important;
    text-decoration: none !important;
}

.selectize-input>input[placeholder] {
    width: 100% !important;
    top: 2px;
}

/*-------------- FORMSETS ------------ */

.formset-delete-row {
    align-content: space-around;
}

label:has(input[data-formset-delete-checkbox]:checked) .formset-delete-icon {
    display: none;
}

.btn.formset-delete-icon-deleting, i.formset-delete-icon-deleting {
    display: none;
}

label:has(input[data-formset-delete-checkbox]:checked) .formset-delete-icon-deleting {
    display: block;
}

/* btn admin console */

.btn-admin-console {
    width: 100%;
    justify-content: space-between !important;
}

/*==========================================================================
  9. LAYOUT E CONTENITORI
  ==========================================================================*/

/* TODO: da rivedere / capire dove va messo in HTML @XZY */
.btn-form-container {
    margin-top: 15px;
    max-width: fit-content;
}

/*---DROPDOWN---*/

.dropdown:not(:has(li)) .dropdown-toggle {
    display: none;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--blade-primary-100);
    --bs-dropdown-color: var(--blade-grey-900);
    font-size: 14px;
    --bs-dropdown-bg: var(--blade-white);
    --bs-dropdown-border-color: var(--blade-grey-200);
    --bs-dropdown-border-radius: 6px;
    box-shadow: var(--blade-ombra-y);
    --bs-dropdown-link-color: var(--blade-grey-900);
    --bs-dropdown-link-hover-color: var(--blade-grey-900);
    --bs-dropdown-link-hover-bg: var(--blade-grey-100);
    --bs-dropdown-link-active-color: var(--blade-primary-500);
    --bs-dropdown-link-disabled-color: var(--blade-grey-400);
    --bs-dropdown-header-color: var(--blade-grey-800);
    padding: 6px 12px;
}

.dropdown-menu.show {
    background-color: white;
    padding: 0.5rem;
    border-radius: 12px;
    margin-top: 4px !important;
    width: 98%;
    min-width: fit-content;
}

ul.dropdown-menu.show li {
    padding: 0 0px;
    position: relative;
}

.dropdown-item {
    color: var(--blade-grey-900);
    border-radius: 8px;
    padding: 6px 12px 6px 12px !important;
    font-size: 14px !important;
}

.dropdown-item.delete {
    color: var(--blade-red-700);
}

.dropdown-item.delete:focus,
.dropdown-item.delete:hover {
    color: var(--blade-red-700);
    background-color: var(--blade-red-50);
}

.dropdown-item.delete.active,
.dropdown-item.delete:active {
    color: var(--blade-red-700);
    background-color: var(--blade-red-50);
}

.li-dropdown-divider {
    padding: 0 !important;
}

.dropdown-menu button {
    text-align: left;
}

.dropdown-toggle::after {
    display: none;
}

.dropdown-item.annulla {
    width: fit-content;
}

.dropdown-item.salva {
    width: fit-content;
}

.dropdown:not(:has(ul *)) {
    display: none;
}

/*---NAV---*/

/* nav item */

.nav-item a {
    text-decoration: none !important;
}

.nav-link {
    color: var(--blade-primary-500);
}

.nav-link:hover {
    color: var(--blade-primary-600);
    background-color: var(--blade-primary-100);
}

.nav-link:active {
    background-color: var(--blade-primary-100);
}

/* tabs */

ul#pills-tab-table {
    border-radius: 5px;
    padding: 0;
    width: fit-content;
    font-size: 14px;
    margin-bottom: 0 !important;
}

.nav-pills-table .nav-link-table.active,
.nav-pills-table .show>.nav-link-table {
    color: var(--blade-primary-500);
    background-color: var(--blade-primary-100);
    border: 1px solid var(--blade-primary-300);
    padding: 6px 12px;
    font-weight: 500;
    transition: 0.4s;
    z-index: 2;
    position: relative;
}

.nav-link-table {
    padding: 6px 12px;
    background-color: var(--blade-primary-100);
    color: var(--blade-grey-800);
}

.nav-pills-table .nav-link-table {
    border: 1px solid var(--blade-grey-300);
    border-radius: 0;
}

.nav-item-table:first-child .nav-link-table {
    border-radius: 5px 0 0 5px;
}

.nav-item-table:last-child .nav-link-table {
    border-radius: 0 5px 5px 0;
}

.nav-item-table {
    margin-right: -1px;
}

.nav-pills,
.nav-pills * {
    --bs-nav-pills-link-active-bg: var(--blade-primary-100);
    transition: 0.4s;
}

ul#pills-tab {
    background-color: var(--blade-white);
    border: 1px solid var(--blade-grey-200);
    border-radius: 6px;
    padding: 8px;
    width: fit-content;
}

ul#pills-tab-small {
    border-radius: 6px;
    border: 1px solid var(--blade-grey-400);
    padding: 6px;
    width: fit-content;
    font-size: 12px;
}

.nav-pills .nav-link.active {
    color: var(--blade-primary-500);
}

/* breadcrumb */

.breadcrumb {
    font-size: 14px;
}

.breadcrumb-item {
    white-space: nowrap;
}

/* warning in label */

.warning-in-label {
    display: inline-block;
    margin-top: -3px;
    margin-left: 5px;
    padding: 0 7px;
    font-size: 12px;
    color: #222;
    position: absolute;
}

.warning-in-label-menu {
    display: inline-block;
    margin-top: 0;
    margin-left: 6px;
    padding: 0 7px;
    font-size: 12px;
    color: #222;
    position: absolute;
}

.modal-content .warning-in-label {
    z-index: 999999999 !important;
}

.modal-content .warning-on-button {
    z-index: 999999999 !important;
}

/* badge */

.badge {
    --bs-badge-font-weight: 500;
    margin: 2px 0;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: fit-content;
}

.badge .badge {
    margin: 0 0;
}

.badge-null {
    filter: grayscale(1);
}

/* pills */

.rounded-pill {
    line-height: 0.5rem;
}

/*---MODAL---*/

.modal-header {
    padding: 20px 24px 20px 28px;
    /* margin-bottom: 24px; */
}

.modal-header .btn-close {
    padding: 0.5rem 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
}

@media (min-width: 992px) {

    .modal-lg,
    .modal-xl {
        --bs-modal-width: 950px;
    }

}

.modal-body {
    /* padding: 0; */
    padding: 32px;
}

.footer-modal {
    /* margin-top: 24px; */
    /* margin-top: 24px; */
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.footer-modal .messages-container ul {
    margin-bottom: 0rem;
}

.footer-modal .messages-container .alert {
    margin-bottom: 0rem;
}

.no-exit .close[data-bs-dismiss='modal'] {
    display: none;
}

@media (max-width: 576px) {

    .no-exit-mobile .close[data-bs-dismiss='modal'] {
        display: none;
    }

}

.side-modal .modal-content {
    height: 100vh;
}

.wide-modal .modal-dialog {
    width: 90% !important;
    max-width: 90% !important;
}

@media (max-width: 575.98px) {

    .modal-dialog {
        position: relative;
        width: auto;
        margin: 150px 0 0 -1px;
        pointer-events: none;
    }

    .modal-content {
        padding: 15px;
    }

}

/* .modal-body-form-inner {
    padding: 0 32px;
}
.modal-body-form-inner:not(:has(.footer-modal)) {
    margin-bottom: 32px;
} */

form:has(.footer-modal) .modal-body-form-inner .messages-container {
    display: none;
}

/* TODO: da sistemare in quanto i modal sono strutturati malino!!! @xzy */
.modal-title-container {
    margin-bottom: 20px;
}

.side-modal .modal-body-form-inner {
    padding-bottom: 112px;
    padding-right: 1rem;
}

.side-modal .footer-modal:not(.hidden-footer) {
    /* position: fixed !important; */
    /* position: fixed !important; */
    left: 1px;
    z-index: 99999 !important;
    bottom: 0;
    width: calc(100% - 2px);
    background-color: white;
    padding: 21px;
}

.side-modal .modal-dialog {
    position: fixed;
    margin: auto;
    width: 45%;
    min-height: 100%;
    right: 0;
}

.side-modal .modal.fade .modal-dialog {
    transform: translate(45%, 0);
}

.side-modal .modal.fade.show .modal-dialog {
    transform: translate(0, 0);
}

.side-modal .modal-body {
    /* overflow-y: auto; */
    min-height: 0;
}

.side-modal .modal-body [data-modal-form] { /* check this out */
    height: 100%;
}
.side-modal .modal-body [data-modal-form]>div { /* check this out */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.side-modal .modal-body .modal-body-form-inner { /* check this out */
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 0;
    overflow-y: auto;
}
.side-modal .modal-body .footer-modal { /* check this out */
    position: relative!important;
}

.messages-container ul {
    padding-left: 0rem;
}

/*--- ALERT ---*/

/* alert */

.alert {
    padding: 7px 16px 6px 16px;
}

.alert-dismissible {
    padding-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.alert.success {
    color: var(--blade-green-900);
    background-color: var(--blade-green-150);
    --bs-alert-link-color: var(--blade-green-700);
}

.alert.success p {
    color: var(--blade-green-900);
    --bs-alert-link-color: var(--blade-green-700);
}

.alert.warning {
    color: var(--blade-yellow-900);
    background-color: var(--blade-yellow-150);
    --bs-alert-link-color: var(--blade-yellow-900);
}

.alert.warning p {
    color: var(--blade-yellow-900);
    --bs-alert-link-color: var(--blade-yellow-900);
}

.alert.danger {
    color: var(--blade-red-900);
    background-color: var(--blade-red-100);
    --bs-alert-link-color: var(--blade-red-900);
}

.alert.danger p {
    color: var(--blade-red-900);
    --bs-alert-link-color: var(--blade-red-900);
}

/*---ACCORDION---*/

.accordion-button:not(.collapsed) {
    font-weight: 600;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
    background-size: auto;
    background-position: center;
}

.accordion-button::after {
    background-image: url("font-awesome-icons/chevron-down-icon.adcd35715afa.svg");
    background-size: auto;
    background-position: center;
}

.accordion-item:has(div.accordion-collapse.show),
.accordion-item:has(div.accordion-collapse.collapsing) {
    transition: 0.3s;
}

.accordion-item {
    transition: 0.3s;
    transition-timing-function: cubic-bezier(0.07, 0.96, 0.33, 0.84);
}

/*---CARD---*/

.card {
    border-radius: 6px;
    border: 1px solid var(--blade-grey-200);
    padding: 20px 24px;
}

.card-title {
    font-weight: 600;
}

.card-title-container {
    display: inline-flex;
    gap: 16px;
    margin-bottom: 20px;
    align-items: center;
}

.card-title-container .card-title {
    margin-bottom: 0;
}

.header-card {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    padding-left: 0;
    padding-right: 0;
}

.dati-card-container {
    display: block;
}

.icon-title-card {
    background-color: var(--blade-primary-100);
    border-radius: 100px;
    width: 38px;
    height: 38px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

.icon-title-card-blank {
    width: 40px;
    height: 40px;
    display: flex;
    align-content: center;
    justify-content: center;
}

.dati-card {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4px;
}

.dato {
    margin-bottom: 4px;
}

.label-dati-card {
    font-size: 10px;
    color: var(--blade-grey-500);
}

/* popover */

.popover {
    --bs-popover-zindex: 1025;
    --bs-popover-max-width: 300px;
    --bs-popover-border-color: rgba(0, 0, 0, 0);
    --bs-popover-header-padding-x: 1.25rem;
    --bs-popover-header-padding-y: 0.75rem;
    --bs-popover-header-bg: #c1dadf;
    --bs-popover-body-padding-x: 1.25rem;
    --bs-popover-body-padding-y: 1.25rem;
    --bs-popover-arrow-border: #eee;
    background-color: #fff;
    border: 1px solid #dee2e6 !important;
    background: white;
}

.popover.show {
    z-index: 2025;
}

button.popover {
    text-decoration: underline;
    border: none !important;
    font-size: 14px !important;
}

span.popover {
    text-decoration: underline;
    border: none !important;
    font-size: 14px !important;
}

.popover-body {
    max-height: 70vh;
    overflow: auto;
}

/* spinner grow */

.spinner-grow {
    --bs-spinner-animation-speed: 1s;
}

/*----------- BOX & BANNER -----------*/

/* Welcome Banner */
.welcome-banner {
    border: none;
    background-color: var(--blade-primary-100);
}

.welcome-image {
    width: 280px;
}

@media (min-width: 992px) {
    .welcome-image-container {
        text-align: end;
    }
}

/* text weight e size */

.text-600 {
    font-weight: 600 !important;
}

.text-small {
    color: var(--blade-grey-900);
    font-family: var(--blade-text-font);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.text-small-500 {
    font-family: var(--blade-text-font);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    color: #ffffff;
}

.text-xsmall {
    color: var(--blade-grey-900);
    font-family: var(--blade-text-font);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
}

.text-xsmall-500 {
    color: var(--blade-grey-900);
    font-family: var(--blade-text-font);
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
}

/* text badge */

.text-bg-primary {
    color: #000 !important;
}

.text-bg-secondary {
    color: #000 !important;
}

.text-bg-info {
    color: #fff !important;
    background-color: #3A8596 !important;
}

.text-transparent {
    color: transparent;
}

.text-success {
    color: var(--blade-green-700) !important;
}

.text-danger {
    color: var(--blade-red-500) !important;
}


/*--------------------------------------------
-------5) Utilities / Helper classes----------
----------------------------------------------*/

.z-index-1026 {
    z-index: 1026;
}

.list-style-type-none {
    list-style-type: none;
}

.margin-right-meno-20 {
    margin-right: -20px;
}

.margin-top-meno-35 {
    margin-top: -35px;
}

.no-underline {
    text-decoration: none !important;
}

.nowrap {
    white-space: nowrap;
}

.ul-no-bullet {
    list-style: none;
}

.li-border-left {
    border-left: 2px solid;
}

.z-index-2000 {
    z-index: 2000;
}

.z-index-1900 {
    z-index: 1900;
}

/*----------------------
-------6) Altro---------
------------------------*/

/*---Animations---*/

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin: 100px auto;
    width: 50%;
}

.loading-fade {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: 5%;
    z-index: 1030;
    left: 0;
}

.refreshable-loading-animation {
    position: absolute;
    display: none !important;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: 1030;
}

/* Serch elements */

.blade-search-btn {
    width: fit-content;
}

/* divs slider */

.divs-slider-item {
    display: none !important;
}

.divs-slider:not(:has([name^="divs-slider-control-"]:checked)) .divs-slider-item:first-child {
    display: flex !important;
}

.divs-slider-item:has([data-slider-item-control-this]:checked),
.divs-slider-item:has([data-slider-item-control-next]:checked)+.divs-slider-item,
.divs-slider-item:has(+.divs-slider-item [data-slider-item-control-prev]:checked) {
    display: flex !important;
}

/* box grigio */

.mini-box-grigio {
    margin: -1px;
}

.box-grigio .form-label {
    margin: 0 0 8px 0;
}