body {
    font-size: 0.8rem;
}

/* Hide the caret in case the dropdown doesn't have the span caret */
.dropdown-toggle:not(.collapsed)::after,
.dropdown-toggle::after {
    display: none;
}

/* Restore the caret in case the dropdown has the span caret */
.dropdown-toggle:has(.caret)::after,
.dropdown-toggle.caret::after {
    display: inline-block;
}

.dropdown-menu {
    font-size: 14px;
}

.nav.navbar-nav > li {
    padding-right: 2px;
}

.nav.navbar-nav > li:last-child {
    padding-right: 8px;
}

.sidebar-menu * {
    text-decoration: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
}

.breadcrumb > li + li:before {
    padding: 0 5px;
    color: #ccc;
}

.breadcrumb > .active {
    color: #777;
}

@media (min-width: 992px) {
    /* Fix position of the user menu only if the language menu is not present */
    .user.user-menu:has(> .dropdown-toggle) + .user.user-menu.nav-item.dropdown {
        top: 4px;
    }
}

@media (max-width: 991px) {
    /* Fix dropdown menu color */
    .skin-blue .main-header .navbar .dropdown-menu li a {
        color: #777;
    }

    /* Fix Language menu */
    .navbar-custom-menu .navbar-nav > li > div {
        padding-top: 15px;
        padding-bottom: 15px;
        line-height: 20px;
    }

    .navbar-custom-menu .navbar-nav > li > div {
        padding-top: 14px;
        padding-bottom: 12px;
        line-height: 20px;

        button {
            padding: 0;

            img {
                width: 21px;
                height: 21px;
            }
        }
    }
}

@media (max-width: 767px) {
    /* breakpoint Bootstrap per sm */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030; /* come fixed-top */
    }

    /* Fix dropdown menu color */
    .skin-blue .main-header .navbar .dropdown-menu li a {
        color: #777;
    }
}

.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.form-group {
    margin-bottom: 15px;
}

/* Fix Datepicker and the bootstrap-select hidden by the Navbar */
.ui-datepicker, .dropdown-menu.show {
    z-index: 9999 !important;
}

.dt-search {
    text-align: right;
    float: right;
}

.dt-search label {
    margin-bottom: 5px;
}

div.dt-info {
    padding-top: 8px;
    white-space: nowrap;
    display: inline-block !important;
    font-size: 13px;
}

div.dt-paging {
    margin: 0;
    white-space: nowrap;
    text-align: right;
    float: right;
    font-size: 13px;
}

div.dt-container.dt-empty-footer {
    position: static;
    clear: none;
}

/* Fix the caret (the arrow) at the end of the selectpicker */
.bootstrap-select > .dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
}

/* Fix the close button black color to a gray color */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Fix the bootbox modal xl to be like the bootbox modal in Bootstrap 3 */
.modal-dialog.modal-xl {
    max-width: 90%;
}

/* Increase the bootbox large modal width to be the same of Bootstrap 3 */
.modal-lg {
    max-width: 900px;
}

/* Fixes the bootbox radius borders */
.modal-content {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Fix the link color of the nav-tabs */
.nav-tabs .nav-link {
    color: #3c8dbc;
}

.pagination > .active > button, .pagination > .active > button:focus, .pagination > .active > button:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}

.pagination > li > button {
    color: #666;
}


/* Ensure the floating button will not cover the content */
section.content {
    padding-bottom: 75px;
}

.text-muted {
    display: inline-block !important;
}

/* Tom-select (not multiple selection) highlight the selected element   */
.ts-dropdown:not(.multi) .selected:not(:hover) {
    color: #fff;
    text-decoration: none;
    background-color: #337ab7;
}

/* Tom-select remove internal border. Also, ensure that the input has always a height  */
.ts-control, .plugin-dropdown_input.focus.dropdown-active .ts-control {
    border: none;
    outline: none;
}

/* Tom-Select ensure that minimum height is set when the dropdown multiple*/
.plugin-dropdown_input.multi .ts-control {
    min-height: 24px;
}

/* Tom-Select ensure that minimum height is set when the dropdown is single and no element are selected and the dropdown is open*/
.plugin-dropdown_input:not(.multi) .ts-control {
    min-height: 18px;
}

/* Tom-select remove internal spacing */
.ts-control {
    padding: 0;
}

/* Fix Tom-select dimension (single) */
.ts-wrapper:not(.multi) {
    padding: 9px;
}

/* Fix Tom-select dimension (multiple) */
.ts-wrapper.multi {
    min-height: 38px;
}


/* Stile caret con Font Awesome per tom-select */
.selectpicker .ts-control {
    position: relative;
    padding-right: 2rem; /* spazio per la freccia */
}

.selectpicker .ts-control::after {
    font-family: "Font Awesome 7 Pro"; /* assicurati che corrisponda alla tua versione */
    content: "\f078"; /* codice Unicode per l'icona "fa-chevron-down" */
    position: absolute;
    right: 0.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 900; /* necessario per FA solid */
    pointer-events: none;
    color: #495057;
}


/* Tag (item) - flexbox to separate text and X button */
.ts-wrapper.multi .ts-control .item {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    max-width: 158px;
    min-width: 0;
    margin-right: 4px;
    padding: 2px 6px;
    background: #f0f0f0;
    border-radius: 10px;
    font-size: 0.9em;
    overflow: hidden; /* 👈 nasconde il testo in eccesso */
    white-space: nowrap;
    text-overflow: ellipsis;
    max-height: 22px;
}

/* Badge "+N" */
.ts-more-count {
    background: #e9ecef;
    border-radius: 12px;
    padding: 0 8px;
    font-size: 0.85em;
    flex-shrink: 0;
}

/* Fix TomSelect in case live-search is disabled to work like a normal select.
Also, the color must be the same of the parent (that gets the classes from the selectpicker) */
.full .ts-control, .ts-control, .ts-control, .ts-wrapper.single.input-active .ts-control {
    cursor: pointer;
    background: transparent;
    color: inherit;
}

/* TomSelect The input created by TomSelect has no more a size */
.ts-control > input, .has-items .ts-control > input {
    width: 0;
    margin: 0 !important;
    min-width: 0;
}

/* TomSelect fix the padding in the X button of the tags */
.ts-wrapper.plugin-remove_button .item .remove {
    padding: 0 4px 2px 1px;
}

/* TomSelect vertical alignment of the caret */
.ts-control.dropdown-toggle.caret {
    display: flex;
    align-items: center;
}

/* TomSelect vertical alignment of the HTML content */
.ts-item-content {
    vertical-align: sub;
}

/* Fix the background color ignoring the one set by DataTables */
.table.table.dataTable td {
    background-color: inherit;
}

/* Fix Font Awesome 7 icons that by default have always a width */
.fa, .fa-brands, .fa-chisel, .fa-classic, .fa-duotone, .fa-etch, .fa-jelly, .fa-jelly-duo, .fa-jelly-fill, .fa-light, .fa-notdog, .fa-notdog-duo, .fa-regular, .fa-semibold, .fa-sharp, .fa-sharp-duotone, .fa-slab, .fa-slab-press, .fa-solid, .fa-thin, .fa-thumbprint, .fa-utility, .fa-utility-duo, .fa-utility-fill, .fa-whiteboard, .fab, .facr, .fad, .fadl, .fadr, .fadt, .faes, .fajdr, .fajfr, .fajr, .fal, .fands, .fans, .far, .fas, .fasdl, .fasdr, .fasds, .fasdt, .fasl, .faslpr, .faslr, .fasr, .fass, .fast, .fat, .fatl, .faudsb, .faufsb, .fausb, .fawsb {
    width: auto;
}