:root {
    /* Variables for default theme (light-mode) */
    --background-color: #F2F2F7;
    /* #f8f8f8;*/
    --muted-color: #717171;
    --text-color: black;
    --nav-view-color: #fff;
    --table-td-color: #000;
    --tabmarker-color: rgb(39, 39, 39);

    /*blu 1*/
    --primary: #151529;
    --primary_text: #f1faff;
    /*#dddddd;*/
    /**/

    /* blu 7*/
    --secondary: #405189;

    --tertiary: #e5e5e5;

    --backup: #ffd900;
    --remote: #f74d00;

    --success: green;
    --error: #ce352c;
    --primary-dark: #253789;
    --dialog-color: #f1faff;
    --radius: 5px;
    --font-family: 'Poppins';
    --card-color: #fff;
    --font-size: clamp(13px, 1.5vw, 14px);
    --sidebar-width: 270px;
    --dialog-title-height: 32px;
    --dialog-content-height: calc(100% - 80px - 32px);
    --dialog-action-height: 80px;

    /*#295079; originale*/
    /**/
    /* blu 2*/
    /*--primary:#132235;*/

    /* blu 3*/
    /*--primary:#1E3857;*/

    /* blu 4*/
    /*--primary:#214167;*/

    /* blu 5*/
    /*--secondary:#164573; */

    /* blu 6*/
    /*--secondary:#27476E;*/

    /* blu 8*/
    /*--secondary:hsl(244, 100%, 55%);
    /* blu 9 acceso*/
    /*--secondary:#2064a8;*/

}

[data-theme="darkMode"] {
    /* Variables for dark mode */
    --background-color: #F2F2F7;
    /*#f8f8f8;*/
    --muted-color: #717171;
    --text-color: black;
    --nav-view-color: #fff;
    --table-td-color: #000;
    --tabmarker-color: rgb(39, 39, 39);
    --primary: #151529;
    /*#0050ef;*/
    --backup: #ffd900;
    --remote: #f74d00;
    --error: #ce352c;
    --tertiary: #e5e5e5;
    --primary-dark: #151529;
    ;
    --dialog-color: #f1faff;
    --radius: 13px;
    --font-family: 'Poppins';
}

html {
    font-size: var(--font-size);
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
    font-family: var(--font-family);
    scrollbar-width: thin;
}

body {
    margin: 0px;
    overflow-y: auto;
    font-weight: 400;
    scroll-behavior: smooth;
    line-height: 1.5;
    overflow-x: hidden;
    background-color: white;
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    font-family: var(--font-family);
    transition: all .2s ease-in-out !important;
}

.table.compact .td,
.table.compact .th,
.table.compact td,
.table.compact th {
    padding: 4px 4px;
}

.dark-side {
    --background-color: #F2F2F7;
    /*#f8f8f8;*/
    --muted-color: #717171;
    --text-color: black;
    --nav-view-color: #fff;
    --table-td-color: #000;
    --tabmarker-color: rgb(39, 39, 39);
    --primary: #151529;

    --backup: #ffd900;
    --remote: #f74d00;
    --error: #ce352c;
    --tertiary: #e5e5e5;
    --primary-dark: #151529;

    --dialog-color: #f1faff;
    --radius: 13px;
    --font-family: 'Poppins';
    --card-color: #ccc
}

[v-cloak] {
    opacity: 0;
    display: none;
}

.docs-content {
    margin-left: var(--sidebar-width);
    padding-top: 52px !important;
}

@media screen and (min-width: 990px) {
    .docs-content {
        margin-left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
    }
}

.table-component .table-search-block {
    flex-basis: 50%;
}

input,
textarea {
    font-family: 'Poppins', sans-serif;
}

input[type=number] {
    padding-left: 12px !important;
}

#appbar {
    left: var(--sidebar-width);
    position: fixed;
    right: 0;
    top: 0;
    width: calc(100% - var(--sidebar-width)) !important;
    z-index: 10000;
    background-color: white;
    box-shadow: 0 3px 3px rgba(56, 65, 74, 0.1);
    border-bottom: 1px solid none;
}

#appbar .d-menu,
#appbar [data-role="dropdown"] {
    z-index: 10001 !important;
}

#appbar.appbar-full-width {
    left: 0;
    width: 100% !important;
}

/**************************SIDEBAR MENU******************************/
/**************************SIDEBAR MENU******************************/
#main_menu {
    background-color: var(--primary);
    bottom: 0;
    left: 0;
    overflow-y: auto;
    padding-left: 10px;
    padding-top: 0;
    position: fixed;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    top: 0;
    width: var(--sidebar-width);
    z-index: 1000;
}

#main_menu:hover {
    scrollbar-color: #44445f transparent;
    scrollbar-width: thin;
}

#main_menu,
#main_menu a,
#main_menu .heading,
#main_menu .nav-section-title,
#main_menu .nav-section-title span,
#main_menu .sidebar-menu a,
#main_menu .sidebar-menu a>span,
#main_menu [class^="mif-"],
#main_menu [class*=" mif-"] {
    color: var(--primary_text) !important;
    opacity: 1 !important;
}

#main_menu .nav-section-menu li a,
#main_menu .accordion>.frame>.heading {
    border-radius: 12px !important;
}

#main_menu .nav-section-menu li a {
    border: 1px solid transparent;
    cursor: pointer !important;
    display: block;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    padding-left: 56px !important;
    position: relative;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#main_menu .nav-section-menu li a .icon {
    color: var(--primary_text) !important;
    align-items: center;
    display: flex;
    height: 24px;
    justify-content: center;
    left: 16px;
    line-height: 1;
    margin-top: -12px;
    position: absolute;
    top: 50%;
    width: 24px;
}

#main_menu .nav-section-menu li a .icon svg,
#main_menu .nav-section-menu li a img.icon {
    display: block;
    height: 24px;
    width: 24px;
}

#main_menu .accordion>.frame>.heading,
#main_menu .nav-section-menu {
    background-color: transparent !important;
}

#main_menu svg,
#main_menu svg *,
#main_menu svg path {
    color: var(--primary_text) !important;
    fill: var(--primary_text) !important;
    opacity: 1 !important;
}

#main_menu .nav-section-menu li a .icon svg.report-icon,
#main_menu .nav-section-menu li a .icon svg.report-icon * {
    fill: none !important;
    stroke: var(--primary_text) !important;
}

#main_menu img.icon,
#main_menu .icon img {
    filter: brightness(0) invert(1) contrast(200%) !important;
    opacity: 1 !important;
}

#main_menu .sidebar-brand {
    overflow: hidden;
}

#main_menu .sidebar-brand a {
    align-items: center;
    display: flex;
    height: auto !important;
    justify-content: center;
    line-height: normal !important;
    white-space: normal !important;
}

#main_menu .sidebar-brand img {
    display: block;
    height: auto;
    max-height: 60px;
    max-width: 100%;
    object-fit: contain;
}

#main_menu .sidebar-brand>a.active,
#main_menu .sidebar-brand>a.router-link-active,
#main_menu .sidebar-brand>a.router-link-exact-active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    font-weight: inherit;
}

#main_menu .sidebar-brand>a.active *,
#main_menu .sidebar-brand>a.router-link-active *,
#main_menu .sidebar-brand>a.router-link-exact-active * {
    background: transparent !important;
}

#main_menu .nav-section {
    margin: 10px 0 8px;
}

#main_menu .nav-section-title {
    align-items: center;
    display: flex;
    font-size: 11px;
    font-weight: 700;
    gap: 10px;
    line-height: 1;
    padding: 6px 14px 8px 2px;
    text-transform: uppercase;
}

#main_menu .nav-section-title::after {
    background-color: rgba(255, 255, 255, .28);
    content: "";
    flex: 1;
    height: 1px;
}

#main_menu .nav-section-menu li {
    margin-bottom: 2px;
    margin-right: 20px;
}

#main_menu .nav-section-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main_menu .nav-section-menu li a {
    margin-left: 0;
}

#main_menu .arrow {
    border-color: #FFFFFF !important;
}

#main_menu .nav-section-menu li a.active,
#main_menu .nav-section-menu li a.router-link-active,
#main_menu .nav-section-menu li a.router-link-exact-active,
#main_menu .frame.active>.heading,
#main_menu .heading.active {
    background-color: rgba(229, 229, 229, .12) !important;
    background-color: color-mix(in srgb, var(--tertiary) 14%, transparent) !important;
    border-color: rgba(229, 229, 229, .34) !important;
    box-shadow: 0 0 0 1px rgba(229, 229, 229, .08), 0 8px 22px rgba(64, 81, 137, .26) !important;
    color: #FFFFFF !important;
}

#main_menu .nav-section-menu li a.active .icon,
#main_menu .nav-section-menu li a.router-link-active .icon,
#main_menu .nav-section-menu li a.router-link-exact-active .icon,
#main_menu .frame.active>.heading .icon,
#main_menu .heading.active .icon {
    background-color: rgba(229, 229, 229, .18) !important;
    background-color: color-mix(in srgb, var(--tertiary) 20%, transparent) !important;
    border-radius: 999px !important;
}

#main_menu .nav-section-menu li a.active *,
#main_menu .nav-section-menu li a.router-link-active *,
#main_menu .nav-section-menu li a.router-link-exact-active *,
#main_menu .frame.active>.heading *,
#main_menu .heading.active * {
    background-color: transparent !important;
    color: #FFFFFF !important;
}

#main_menu::-webkit-scrollbar {
    width: 0;
}

#main_menu::-webkit-scrollbar-track {
    background: transparent;
}

#main_menu::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 8px;
}

#main_menu:hover::-webkit-scrollbar {
    width: 8px;
}

#main_menu:hover::-webkit-scrollbar-thumb,
#main_menu:hover::-webkit-scrollbar-thumb:hover,
#main_menu::-webkit-scrollbar-thumb:hover {
    background-color: #44445f !important;
}

#main_menu.licence-expired .nav-section-menu li {
    cursor: default !important;
    opacity: 0.9 !important;
}

#main_menu.licence-expired .sidebar-menu .nav-section-menu a,
#main_menu.licence-expired .sidebar-menu .nav-section-menu button,
#main_menu.licence-expired .sidebar-menu .nav-section-menu a *,
#main_menu.licence-expired .sidebar-menu .nav-section-menu button * {
    cursor: default !important;
    opacity: 0.9 !important;
    pointer-events: none !important;
}
/* #main_menu {
    background-color: var(--primary);
    bottom: 0;
    left: 0;
    overflow-y: auto;
    padding-left: 10px;
    padding-top: 0;
    position: fixed;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    top: 0;
    width: var(--sidebar-width);
    z-index: 1000;
}

#main_menu:hover {
    scrollbar-color: #44445f transparent;
    scrollbar-width: thin;
}

#main_menu,
#main_menu a,
#main_menu .heading,
#main_menu .nav-section-title,
#main_menu .nav-section-title span,
#main_menu .sidebar-menu a,
#main_menu .sidebar-menu a>span,
#main_menu [class^="mif-"],
#main_menu [class*=" mif-"] {
    color: var(--primary_text) !important;
    opacity: 1 !important;
}

#main_menu .nav-section-menu li a,
#main_menu .accordion>.frame>.heading {
    border-radius: 12px !important;
}

#main_menu .nav-section-menu li a {
    display: block;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    padding-left: 56px !important;
    position: relative;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#main_menu .nav-section-menu li a .icon {
    color: var(--primary_text) !important;
    align-items: center;
    display: flex;
    height: 24px;
    justify-content: center;
    left: 16px;
    line-height: 1;
    margin-top: -12px;
    position: absolute;
    top: 50%;
    width: 24px;
}

#main_menu .nav-section-menu li a .icon svg,
#main_menu .nav-section-menu li a img.icon {
    display: block;
    height: 24px;
    width: 24px;
}

#main_menu .accordion>.frame>.heading,
#main_menu .nav-section-menu {
    background-color: transparent !important;
}

#main_menu svg,
#main_menu svg *,
#main_menu svg path {
    color: var(--primary_text) !important;
    fill: var(--primary_text) !important;
    opacity: 1 !important;
}

#main_menu .nav-section-menu li a .icon svg.report-icon,
#main_menu .nav-section-menu li a .icon svg.report-icon * {
    fill: none !important;
    stroke: var(--primary_text) !important;
}

#main_menu img.icon,
#main_menu .icon img {
    filter: brightness(0) invert(1) contrast(200%) !important;
    opacity: 1 !important;
}

#main_menu .sidebar-brand {
    overflow: hidden;
}

#main_menu .sidebar-brand a {
    align-items: center;
    display: flex;
    height: auto !important;
    justify-content: center;
    line-height: normal !important;
    white-space: normal !important;
}

#main_menu .sidebar-brand img {
    display: block;
    height: auto;
    max-height: 60px;
    max-width: 100%;
    object-fit: contain;
}

#main_menu .nav-section {
    margin: 10px 0 8px;
}

#main_menu .nav-section-title {
    align-items: center;
    display: flex;
    font-size: 11px;
    font-weight: 700;
    gap: 10px;
    line-height: 1;
    padding: 6px 14px 8px 2px;
    text-transform: uppercase;
}

#main_menu .nav-section-title::after {
    background-color: rgba(255, 255, 255, .28);
    content: "";
    flex: 1;
    height: 1px;
}

#main_menu .nav-section-menu li {
    margin-bottom: 2px;
    margin-right: 20px;
}

#main_menu .nav-section-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main_menu .nav-section-menu li a {
    margin-left: 0;
}

#main_menu .arrow {
    border-color: #FFFFFF !important;
}

#main_menu a.active,
#main_menu a.router-link-active,
#main_menu a.router-link-exact-active,
#main_menu .frame.active>.heading,
#main_menu .heading.active {
    background-color: rgba(229, 229, 229, .12) !important;
    background-color: color-mix(in srgb, var(--tertiary) 14%, transparent) !important;
    border-color: rgba(229, 229, 229, .34) !important;
    box-shadow: 0 0 0 1px rgba(229, 229, 229, .08), 0 8px 22px rgba(64, 81, 137, .26) !important;
    background-color: rgba(229, 229, 229, .12) !important;
    background-color: color-mix(in srgb, var(--tertiary) 14%, transparent) !important;
    border-color: rgba(229, 229, 229, .34) !important;
    box-shadow: 0 0 0 1px rgba(229, 229, 229, .08), 0 8px 22px rgba(64, 81, 137, .26) !important;
    color: #FFFFFF !important;
}

#main_menu a.active .icon,
#main_menu a.router-link-active .icon,
#main_menu a.router-link-exact-active .icon,
#main_menu .frame.active>.heading .icon,
#main_menu .heading.active .icon {
    background-color: rgba(229, 229, 229, .18) !important;
    background-color: color-mix(in srgb, var(--tertiary) 20%, transparent) !important;
    border-radius: 999px !important;
}

#main_menu a.active .icon,
#main_menu a.router-link-active .icon,
#main_menu a.router-link-exact-active .icon,
#main_menu .frame.active>.heading .icon,
#main_menu .heading.active .icon {
    background-color: rgba(229, 229, 229, .18) !important;
    background-color: color-mix(in srgb, var(--tertiary) 20%, transparent) !important;
    border-radius: 999px !important;
}

#main_menu a.active *,
#main_menu a.router-link-active *,
#main_menu a.router-link-exact-active *,
#main_menu .frame.active>.heading *,
#main_menu .heading.active * {
    background-color: transparent !important;
    color: #FFFFFF !important;
}

#main_menu::-webkit-scrollbar {
    width: 0;
}

#main_menu::-webkit-scrollbar-track {
    background: transparent;
}

#main_menu::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 8px;
}

#main_menu:hover::-webkit-scrollbar {
    width: 8px;
}

#main_menu:hover::-webkit-scrollbar-thumb,
#main_menu:hover::-webkit-scrollbar-thumb:hover,
#main_menu::-webkit-scrollbar-thumb:hover {
    background-color: #44445f !important;
} */


/* Enter and leave animations can use different */


/* durations and timing functions.       */

.slide-fade-enter-active {
    transition: all .1s ease;
}

.app-bar-menu li {
    list-style: none !important;
}

li>a.router-link-active {
    background-color: var(--primary_text);
}

li>a.active {
    background-color: var(--primary_text);
}

.sidebar-menu li {
    transition: all .2s;
    margin-bottom: 8px;
}

/* .sidebar-menu li a:hover {
    background: transparent;
} */


.sidebar-menu li>a.router-link-active svg>path {
    fill: #000;
}

.sidebar-menu .dropdown-toggle::before {
    border-color: #fff;
}


.sidebar-menu li:hover {
    background-color: transparent !important;

    transition: all .2s;
}

div#scheduling_dialog {
    height: auto !important;
}

.bd-primary {
    border-color: var(--primary) !important;
}

.bd-secondary {
    border-color: var(--secondary) !important;
}

.ribbed-secondary {
    background: var(--secondary) linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent) !important;
    background-size: 20px 20px !important
}

.tabs>ul.tabs-list {
    margin-bottom: 0px;
}

.d-menu li a .icon {
    width: 24px;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    left: 0.625rem;
    bottom: 12px;
}

.d-menu li a .icon::before {
    position: relative !important;
}

.backup-actions-menu li>a {
    align-items: center;
    display: flex;
    gap: .5rem;
    padding-left: .75rem;
    padding-right: 1rem;
}

.backup-actions-menu li>a .icon {
    align-items: center;
    bottom: auto;
    display: inline-flex;
    flex: 0 0 24px;
    height: 24px;
    justify-content: center;
    left: auto;
    line-height: 1;
    margin-top: 0;
    position: static;
    top: auto;
    width: 24px;
}

.backup-actions-menu li>a .icon::before {
    line-height: 1;
}

.d-menu .menu-title {
    border: 0;
    cursor: default;
    color: #646464;
    font-size: .75rem;
    font-weight: 700;
    line-height: .875rem;
    padding: .25rem .5rem;
    background-color: rgba(29, 29, 29, .1);
}

/* disabilita selezione e click */
.d-menu .menu-title,
.d-menu .menu-title * {
    user-select: none;
    pointer-events: none;
}

svg:not(:root) {
    overflow: initial !important;
}

.switch input[type=checkbox]:disabled~.check {
    background-color: #e9e9e9 !important;
    border-color: #e9e9e9 !important;
}

.switch .check {
    background-color: #fff;
}

button:disabled,
input[type=button]:disabled,
[disabled] {
    pointer-events: all !important;
    cursor: unset;
}

[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
    cursor: unset;
}


.switch input[type=checkbox]:checked~.check {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #1d1d1d;
}

* {

    user-select: text;
    /* supported by Chrome and Opera */
    -webkit-user-select: text;
    /* Safari */
    -khtml-user-select: text;
    /* Konqueror HTML */
    -moz-user-select: text;
    /* Firefox */
    -ms-user-select: text;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #F2F2F7;
    /*#ccc;*/
    /* color of the scroll thumb */
    border-radius: 20px;
    /* creates padding around scroll thumb */
}

.splitter {
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    flex-direction: row !important;
    -webkit-box-pack: justify;
    justify-content: space-between;
    position: relative;
}

.splitter.vertical>.gutter {
    cursor: col-resize;
}

.splitter.vertical>.gutter::before {
    height: 30px;
    width: 6px;
    top: 0;
    left: 0;
    margin-left: 0;
    margin-top: 0;
}

.listview.view-tiles .node {
    width: auto;

}

.-disabled,
.disabled {
    /*pointer-events: none !important;*/
    opacity: .5 !important;
    color: #000 !important;
}

.h-menu>li:hover {
    background-color: transparent;
}

.info-button .button:hover {
    background-color: var(--secondary);
}

.selectable {
    user-select: text;
    /* supported by Chrome and Opera */
    -webkit-user-select: text;
    /* Safari */
    -khtml-user-select: text;
    /* Konqueror HTML */
    -moz-user-select: text;
    /* Firefox */
    -ms-user-select: text;
}

.tabs-material-wrapper {
    z-index: 10;
    /*margin-bottom: 20px;*/
}

.tabs-material li {
    opacity: 100;
}

.tag {
    height: 29px;
    line-height: 27px;
}

.input input {
    padding: 0;
}

.bg-primary {
    background-color: var(--primary);
}

.bg-secondary {
    background-color: var(--secondary);
}

/* #chart {
    max-width: 650px;
    margin: 35px auto;
} */

.content {
    width: 100%;
}

.chart {
    margin: auto;
    width: 100%;
    overflow: hidden;
}

.bottomposition {
    position: absolute !important;
    top: 125px !important;
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: stretch;
}

.router-link-active {
    transition: all .2s;
}

.charms {
    position: absolute !important;
    z-index: 9999;
    /*stesso delle dialog*/
}

.progress .bar {
    background: var(--secondary);
}

.info-box {
    position: relative;
    border: none;
    background: transparent;
}

.tabs>ul.tabs-list>li {
    background-color: transparent;
    /*min-width: 350px;*/
    transition: all .2s ease-in-out !important;
}


/* .tabs>ul.tabs-list>li:hover {
    background-color:transparent;
} */

.button {
    border-radius: var(--radius) !important;
    transform: translateZ(0);

}

.button img {
    height: auto;
}

.button.mini {
    height: 23px;
}

.bg-remote:hover {
    background-color: #ff5b00;
}

.dialog-actions>*,
.dialog-actions>.ml-auto>* {
    padding: 20px;
    margin: 0;
}

.loader {
    position: fixed;
    z-index: 40;
    user-select: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(162 176 189 / 50%);
    transition: opacity 0.3s ease;
}

/*Questa classe rende l'apertura della dialog a scatti
Aggiunto _old per non far prendere la classe alle dialogs
*/
/* .draggable-item {
    /*Questa proprietà rende l'apertura della dialog a scatti*/
/*position: absolute;*/

/* Permette il posizionamento libero */
/*user-select: none;
    /* Evita la selezione del testo durante il drag */
/* Assicura che il div sia sopra gli altri elementi */
/*transition: none;
    /*Alberto vuole le dialog più piccole, quindi le nuove size sono state scritte in .dialog*/
/*width: 50vw;
    /*height: 80vh !important;
    /*min-height : 50vh !important;
    max-height : 80vh !important;*/
/*} */

.draggable-item-little {
    /*Questa proprietà rende l'apertura della dialog a scatti*/
    /*position: absolute;*/

    /* Permette il posizionamento libero */
    user-select: none;
    /* Evita la selezione del testo durante il drag */
    /* Assicura che il div sia sopra gli altri elementi */
    transition: none;
    /*Alberto vuole le dialog più piccole, quindi le nuove size sono state scritte in .dialog*/
    width: 50vw;
    /*height: 80vh !important;*/
    min-height: 50vh !important;
    max-height: 80vh !important;
}

.dialog.light {
    border: none !important;
}

.dialog-title,
.dialog.light .dialog-title {
    cursor: move;
    /* Mostra il cursore di spostamento solo sull'header */
    border: none !important;
    background-color: var(--secondary);
    color: white;
    font-weight: 700;
    width: 100%;
}

.dialog-topmost {
    z-index: 9999 !important;
    /* [TG 26/03/2025] classe custom per mettere la dialog sempre in primo piano
    questa classe è utilizzata alla riga 120 del file main.js*/
}

.overlay {
    background: rgb(162 176 189 / 50%) !important;
    z-index: 2000;
}

.checkbox input[data-indeterminate=true]~.check::before {
    border-radius: 20px;
    background-color: var(--secondary);
    border: 2px solid var(--secondary);
}

.checkbox input[type=checkbox]:checked~.check {
    border-color: var(--secondary) !important;
    background-color: var(--secondary) !important;
    border-radius: 7px;
}

.checkbox .check {
    background-color: #fff;
    border-radius: 7px;
}

option[disabled] {
    color: lightgrey !important;
}

[disabled] {
    /*pointer-events: none !important;*/
    opacity: 0.5 !important;
    color: #000000 !important;
}

.input .append {
    min-width: 150px;
}

.input.input-large {
    height: 50px !important;
}

.navview-content {
    background-color: var(--background-color);
}

#app {
    overflow: hidden;
}

.text-small {
    font-size: .85rem;
}

.text-muted {
    color: var(--muted-color);
}

.secondary .text-muted,
.bg-secondary .text-muted {
    color: inherit !important;
}

.slider .complete {
    background-color: var(--secondary)
}

.form-group+.form-group {
    margin-top: 0;
}

.dialog-title {
    /*border-radius: var(--radius);*/
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}



div#newfolderDialog {
    height: auto !important;
}



.rounded {
    border-radius: var(--radius) !important;
}

.hamburger .line,
.nav-button .line {
    background-color: #505050;
}

.button.primary:hover,
.command-button.primary:hover,
.image-button.primary:hover,
.info-button.primary:hover,
.input .button.primary:hover,
.notify.primary:hover,
.select .button.primary:hover,
.shortcut.primary:hover,
.spinner .button.primary:hover,
.split-button .split.primary:hover,
.tag-input .button.primary:hover,
.tally.primary:hover,
.toast.primary:hover,
.tool-button.primary:hover,
code.primary:hover,
tbody td.primary:hover,
tbody tr.primary:hover {
    color: #fff;
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.toast {
    border-radius: 20px;
}

.button.spinner-button {
    border-radius: 10px !important;
}

.background {
    transform: scale(.9);
    transform-origin: top left;
    filter: brightness(90%);
    border: none;
    /*   transform: translate(-20vw, -43vh); */
    display: block !important;
}

.listview .node.current-select {
    background-color: rgb(228 228 228 / 45%);
    border-color: #f8f8f8 !important;
}



.dialog-content .form-group {
    padding: 5px 30px !important;
    position: relative;
    z-index: 5;
}

/*
    SARepoSelect (.form-group.p-2) contiene un <select data-role="select"> che
    apre un .drop-container assoluto. Tutti i .dialog-content .form-group hanno
    z-index: 5 (regola sopra), quindi i fratelli successivi a SARepoSelect
    (SelectedResourcesLayout, checkbox, ecc.) si trovano allo stesso livello di
    stacking: l'ordine DOM li fa vincere e il drop-container resta sotto.

    Bumpando .form-group.p-2 a un livello superiore, il suo intero stacking
    context (drop-container incluso) si pone sopra ai fratelli con z-index: 5,
    risolvendo sia il "va sotto" sia il "non riesco a cliccare le voci".
*/
.dialog-content .form-group.p-2 {
    z-index: 100;
}

/*
    Dentro SARepoSelect, il <ClientMessageView> (renderizzato come ultimo figlio
    della .form-group.p-2) sta comunque sopra al drop-container del <select>:
    il drop-container è position:absolute con z-index 1000, ma il suo stacking
    context viene determinato dalla .form-group.p-2 stessa. Dato che la .row.m-0
    che contiene il select è statica, la sua sotto-tree (incluso il drop-container)
    si "mescola" nell'ordine di disegno con il ClientMessageView, e l'ordine DOM
    può far apparire ClientMessageView sopra.

    Promuovendo .row.m-0 dentro .form-group.p-2 a stacking context proprio con
    z-index esplicito, tutta la sua sotto-tree (drop-container incluso) viene
    dipinta in un layer separato sopra al ClientMessageView (che resta a z-index
    auto/statico).
*/
.dialog-content .form-group.p-2>.row.m-0 {
    position: relative;
    z-index: 10;
}

.h-ab {
    height: calc(100% - 40px);
}

.info-box-content {
    min-width: 280px;
}

.fg-green {
    color: #00d12f !important;
}

.scrollable-container {
    max-height: 60vh;
    /* Adjust based on your needs */
    overflow-y: auto;
    padding: 10px;
}

.dialog-actions {
    margin-top: 0px !important;
    border-top: none;
    height: var(--dialog-action-height);
    display: flex !important;
    -webkit-box-align: center !important;
    align-items: center !important;
    padding: 0px 50px !important;
    /*20px 50px !important;*/
    justify-content: end;
    background: white;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    background-color: white;
    box-shadow: 0 -3px 3px rgba(56, 65, 74, 0.1);
}

/* .dialog *+.dialog-actions,
.dialog *+.dialog-content {
    margin-top: 0px;
} */

.dialog-actions div button,
.dialog-actions button {
    margin-left: 8px !important;
    /*simula ml-2*/
}

textarea.focused,
textarea:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

textarea {
    resize: none;
    outline: none;
    width: 100% !important;
}

.prevent-select {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* primary_text syntax */
}

.navview .holder.active,
.navview .navview-menu li a.active,
.navview .pull-button.active {
    color: var(--primary) !important;
    font-weight: 500;
}

.fg-primary {
    color: var(--primary);
}


.checkbox.small .check.small {
    border: 2px #d9d9d9 solid;
    width: 15px;
    height: 15px;
}

/*.toast.show-top {
    top: 6px !important;
}*/

.sidenav-m3 li+li {
    border-top: 0;
}

.secondary {
    background-color: var(--secondary) !important;
    color: white !important;

}

input[type=button].secondary,
input[type=reset].secondary,
input[type=submit].secondary,
.button.secondary,
.command-button.secondary,
.image-button.secondary,
.info-button.secondary,
.input .button.secondary,
.notify.secondary,
.select .button.secondary,
.shortcut.secondary,
.spinner .button.secondary,
.split-button .split.secondary,
.tag-input .button.secondary,
.tally.secondary,
.toast.secondary,
.tool-button.secondary {
    outline-color: var(--secondary) !important;
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: #fff !important;
}

input[type=button].secondary:hover,
input[type=reset].secondary:hover,
input[type=submit].secondary:hover,
.button.secondary:hover,
.command-button.secondary:hover,
.image-button.secondary:hover,
.info-button.secondary:hover,
.input .button.secondary:hover,
.notify.secondary:hover,
.select .button.secondary:hover,
.shortcut.secondary:hover,
.spinner .button.secondary:hover,
.split-button .split.secondary:hover,
.tag-input .button.secondary:hover,
.tally.secondary:hover,
.toast.secondary:hover,
.tool-button.secondary:hover {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: #fff !important;
}

input[type=button].secondary:active,
input[type=button].secondary:focus,
input[type=reset].secondary:active,
input[type=reset].secondary:focus,
input[type=submit].secondary:active,
input[type=submit].secondary:focus,
.button.secondary:active,
.button.secondary:focus,
.command-button.secondary:active,
.command-button.secondary:focus,
.image-button.secondary:active,
.image-button.secondary:focus,
.info-button.secondary:active,
.info-button.secondary:focus,
.input .button.secondary:active,
.input .button.secondary:focus,
.select .button.secondary:active,
.select .button.secondary:focus,
.tool-button.secondary:active,
.tool-button.secondary:focus {
    box-shadow: 0 0 0 3px rgba(22, 69, 115, .35) !important;
}

.tertiary {
    background-color: var(--tertiary) !important;
    color: black !important;
}

.fg-secondary {
    color: var(--secondary) !important;
}

.tabs-expand:not(.vertical):not(.bottom) ul.tabs-pills>li.active {
    font-weight: 500;
    border-color: var(--secondary) !important;
    background: var(--secondary) !important;
    color: #fff;
    width: 450px;
}

.checkbox input[data-indeterminate=true]~.check {
    border-color: var(--secondary);
    background-color: #fff;
}

.slide-fade-enter,
.slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */

    {
    transform: translateX(-15px);
    opacity: 0;
}

.select.multiple {
    padding: 5px;
}

.select .option-list li.active {
    background-color: var(--secondary);
    color: #fff !important;
    font-weight: 300;
}

.select .drop-container {
    top: 110%;
    z-index: 1000;
    background-color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.select.focused {
    z-index: 3000;
}

.select.focused .drop-container {
    z-index: 3001 !important;
}

@supports selector(:has(*)) {

    .form-group:has(.select.focused),
    .row:has(.select.focused),
    [class*=cell-]:has(.select.focused),
    [class*=col-]:has(.select.focused) {
        position: relative;
        z-index: 3000 !important;
    }
}

/*
    Quando un <select data-role="select" data-filter="true"> apre il dropdown,
    Metro inietta dentro .drop-container la struttura:
        <div class="drop-container">
            <div>                       ← wrapper della search senza classe né bg
                <div class="input">     ← input Metro di ricerca
                    <input>
                    <div class="button-group">...</div>
                </div>
            </div>
            <ul class="option-list">    ← lista delle voci (bg opaco di default)
        </div>

    Il <div> wrapper della search non ha background: se la regola di bg sul
    .drop-container per qualche motivo non viene applicata visivamente in
    quell'area (es. .option-list crea un proprio "blocco" opaco e il resto
    del .drop-container resta scoperto), si vede in trasparenza il contenuto
    di SARepoSelect sotto al dropdown.

    Forziamo un background pieno bianco sui wrapper interni del .drop-container
    in modo che la zona della search sia opaca a prescindere dall'ereditarietà.
*/
.drop-container,
.drop-container>div,
.drop-container .input {
    background-color: #fff !important;
}

.sys-button {
    border-radius: 0px !important;
}

.window-caption .buttons .btn-close::before {
    color: #1d1d1d;
}

.notify-container .red,
.notify-container .error,
.notify-container .alert {
    background: var(--error) !important;
    color: white;
    text-align: center;
    border-radius: var(--radius) !important;
    padding: 10px;
    border: none;
    box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.51);
}

.notify-container .info,
.notify-container .success,
.notify-container .ok {
    background: var(--success) !important;
    color: white;
    text-align: center;
    border-radius: var(--radius) !important;
    padding: 10px;
    border: none;
    box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.51);
}

.notify-container .wait {
    background: rgb(255, 236, 152) !important;
    color: black;
    border-radius: var(--radius) !important;
    padding: 10px;
    border: none;
    text-align: center;
    box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.20);
}

.notify-container {
    left: auto;
    right: calc(50% - 150px);
}

.color-picker .append,
.color-picker .prepend,
.file .append,
.file .prepend,
.input .append,
.input .prepend,
.select .append,
.select .prepend,
.spinner .append,
.spinner .prepend,
.tag-input .append,
.tag-input .prepend,
.textarea .append,
.textarea .prepend {
    left: -10px;
    border-radius: 10px;
    transform: translateZ(0);
}

.tag.short-tag .title {
    max-width: 200px;
}

.tag .action {
    cursor: pointer;
}

.input .input-clear-button,
.input .input-reveal-button,
.input .input-search-button {
    font-size: 18px;
}

.input,
.input-small {
    border-radius: 5px;
    padding-left: 10px !important;
    transform: translateZ(0);
}

.table-component .table-container {
    border: none;
    margin: 0px 0;
}

.table-bottom {
    margin: 20px;
}

.tool-button:hover {
    background-color: var(--secondary);
    opacity: .6;
}

.button.primary,
.command-button.primary,
.image-button.primary,
.info-button.primary,
.input .button.primary,
.notify.primary,
.select .button.primary,
.shortcut.primary,
.spinner .button.primary,
.split-button .split.primary,
.tag-input .button.primary,
.tally.primary,
.toast.primary,
.tool-button.primary,
code.primary,
tbody td.primary,
tbody tr.primary {
    outline-color: var(--primary);
    background-color: var(--primary);
    border-radius: var(--radius);
    color: #fff !important;
}

.app-bar .primary {
    background-color: var(--primary);
}

/*input[type=button].tertiary,
input[type=reset].tertiary,
input[type=submit].tertiary,
.button.tertiary,
.command-button.tertiary,
.image-button.tertiary,
.info-button.tertiary,
.input .button.tertiary,
.notify.tertiary,
.select .button.tertiary,
.shortcut.tertiary,
.spinner .button.tertiary,
.split-button .split.tertiary,
.tag-input .button.tertiary,
.tally.tertiary,
.toast.tertiary,
.tool-button.tertiary,
code.tertiary,
tbody td.tertiary,
tbody tr.tertiary {
    background-color: #fff;
    color: #212529;
    border: 1px solid #dfdfdf;
}*/

.app-bar .primary:hover {
    border-color: var(--primary);
    background-color: var(--primary-dark) !important;
}

.dropdown-button {
    line-height: 0;
}

.splitter>.gutter {
    border: var(--nav-view-color);
    background-color: var(--background-color);
}

.select {
    border-radius: 5px;
    padding-left: 10px;
    transform: translateZ(0);
}

.listview.view-tiles .node>.data {
    font-size: 14px;
}

.bg-backup.dropdown-toggle::before {
    border-color: #000;
}

.bg-remote.dropdown-toggle::before {
    border-color: #fff;
}

.arrow {
    display: inline-block;
    margin-left: 10px;
    transition: transform 0.3s ease;
    border: solid black;
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: rotate(-45deg);
}

.arrow.open {
    transform: rotate(45deg);
}

ul.d-menu {
    width: auto;
}

a.button,
a.flat-button {
    border-radius: var(--radius)
}

.tabs>ul.tabs-list>li.active {
    border: 1px solid #dfdfdf !important;
    border-bottom: none !important;
    /* border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius); */
}

.tabs>ul.tabs-list>li>a {
    border-radius: 13px;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.panel {
    border-radius: 5px;
    transition: 0.2s ease-out;
    overflow: hidden !important;
    background-color: var(--card-color);
}

.badge.inline {
    padding: 5px;
    /*font-weight: 100;*/
    min-width: fit-content;
    max-width: fit-content;
}

.fake-heading {
    display: block;
    position: relative;
    padding: 8px 16px;
    background-color: #F2F2F7;
    /*#f8f8f8;*/
    /*cursor: pointer;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 40px;
}

.d-menu li:hover,
.v-menu li:hover {
    text-decoration: none;
    background-color: rgba(201, 201, 201, 0.3);
}

.sidenav-m3 a {
    background-color: var(--nav-view-color)
}

.navview .holder:active,
.navview .navview-menu li a:active,
.navview .pull-button:active {
    background-color: #f6f9fc !important;
}

.navview .holder:hover,
.navview .navview-menu li a:hover,
.navview .pull-button:hover {
    background-color: #f6f9fc;
}

.navview .navview-pane {
    background-color: var(--nav-view-color);
}

.sidenav-m3 {
    background-color: var(--nav-view-color);
}

.skill-box {
    background-color: var(--nav-view-color);
}

.listview {
    background-color: transparent;
}

.breadcrumbs {
    background-color: transparent;
    color: var(--text-color);
    margin-bottom: 0rem;
}

a.brand {
    color: var(--secondary) !important;
    font-weight: 600;
}

.avatar,
.app-bar .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
}

.tree-node .active {
    text-decoration: underline;
    color: var(--secondary);
    padding-left: 3px;
    transition: all .2s;
}

.listview .node:hover {
    background-color: #fff;
    border-radius: var(--radius)
}

.listview.view-icons-medium .node {
    width: auto;
    margin: 10px;
}

.tabs-material .tab-marker {
    background-color: var(--secondary);
}

.bg-remote {
    background-color: var(--remote);
    color: #fff;
}

.progress.small {
    height: 3px;
}

td {
    color: var(--table-td-color);
}

button.button.wizard-btn-help.circle.outline {
    display: none;
}

a.router-link-exact-active.router-link-active {
    background: var(--background-color);
}

a.router-link-exact-active {
    transition: all .5s;
}

.tabs-material {
    color: var(--text-color);
}

.tile-app:hover,
.tile-large:hover,
.tile-medium:hover,
.tile-small:hover,
.tile-wide:hover {
    outline: none;
}

.overflow {
    overflow-y: auto;
    overflow-x: auto !important;
}

.button.error {
    background: #ce352c;
    color: white !important;
}

.wizard>section:nth-child(4) {
    border-color: #033390;
}

.wizard>section:nth-child(2) {
    border-color: var(--secondary);
}

.wizard>section:nth-child(3) {
    border-color: #0342c1;
}

.wizard-btn-finish {
    display: none;
}

.hint {
    background: var(--secondary);
    color: #fff;
    border-radius: 3px;
    transform: translateZ(0);
}

.selected {
    -webkit-box-shadow: 0 0 0 4px var(--secondary) !important;
    box-shadow: 0 0 0 4px var(--secondary) !important;
}

.selected::after {
    border-top: 28px solid var(--secondary);
}

.bg-backup {
    background: var(--backup);
}

.bg-backup-hover:hover {
    background: var(--backup);
}

.bg-backup:hover {
    background-color: var(--backup);
}

.select.input-small {
    height: 28px;
}

.select,
.spinner {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    cursor: pointer;
    position: relative;
    margin: 0;
}

.pagination .page-item {
    border: none;
}

.color-picker,
.file,
.input,
.metro-input,
.select,
.spinner,
.tag-input {
    position: relative;
    border: 1px #d9d9d9 solid;
    color: #1d1d1d;
    width: 100%;
    font-size: 16px;
    height: 36px;
    line-height: 36px;
    background: #fff none;
    background-clip: padding-box;
    min-width: 0;
}


a,
area,
button,
input,
label,
select,
summary,
textarea {
    touch-action: manipulation;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

/*I 4 px di spessore del css originale sono troppi*/
.table thead {
    border-bottom: 2px solid #e4e4e4;
}

.table thead tr td,
.table thead tr th {
    background-color: #F3F5F8;
    /*background-color: var(--secondary) !important;
    color: white !important;*/
}

label {
    cursor: default;
}

ol {
    list-style-type: decimal;
}


/* .dialog {
    position: fixed;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column;
    width: auto;
    max-width: calc(100vw - 100px);
    max-height: calc(100vh - 100px);
    height: auto;
    background-color: #fff;
    color: #1d1d1d;
    z-index: 1050;
    border: 1px solid #dfdfdf;
} */


/* style the items (options), including the selected item: */

.select-items div,
.select-selected {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
}


/* Style items (options): */

.select-items {
    position: absolute;
    background-color: var(--secondary);
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}


/* ul.d-menu li:first-child{
    border-radius: 10px 10px 0px 0px;
}


ul.d-menu li:last-child {
    border-radius: 0px 0px 10px 10px;
} */

.select.input-small.multiple {
    min-height: 28px;
    height: auto;
    border: none;
    /* padding: 5px; */
    margin: 10px;
}

.d-menu li.active>a,
.v-menu li.active>a {
    background-color: var(--secondary);
    color: #fff;
    font-weight: 300;
}

.cell-fit-content {
    white-space: nowrap;
    width: 1%;
}

.switch .check {
    border-radius: 1.125rem;
}

[class*=cell-],
[class*=col-] {
    padding: 6px;
}

.h-vh-10 {
    height: 10vh !important;
}

.h-vh-15 {
    height: 15vh !important;
}

.h-vh-20 {
    height: 20vh !important;
}

.h-vh-30 {
    height: 30vh !important;
}

.h-vh-40 {
    height: 40vh !important;
}

.h-vh-60 {
    height: 60vh !important;
}

.h-vh-80 {
    height: 80vh !important;
}

.w-wh-30 {
    width: 30vw !important;
}

.w-vw-40 {
    width: 40vw !important;
}

.w-100-sm .w-50 .w-50-lg .w-50-xl {
    min-width: 49vw !important;
}

.tile-app .badge-top,
.tile-large .badge-top,
.tile-medium .badge-top,
.tile-small .badge-top,
.tile-wide .badge-top {
    top: 10px;
    right: 25px;
}

.w-vw-80 {
    width: 80vw !important;
}

.w-fit {
    width: fit-content !important;
}


.w-5 {
    width: 5% !important;
}

.w-10 {
    width: 10% !important;
}

.w-20 {
    width: 20% !important;
}

.w-30 {
    width: 30% !important;
}

.w-40 {
    width: 40% !important;
}

.w-60 {
    width: 60% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}

.h-20 {
    height: 20% !important;
}

.h-70 {
    height: 70% !important;
}

.h-80 {
    height: 80% !important;
}

.h-90 {
    height: 90% !important;
}

.centered {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
}

.cell-05 {
    -webkit-box-flex: 0;
    flex: 0 0 4.1666675%;
    max-width: 4.1666675%;
}

a[href="javascript:void(0)"]:hover {
    color: gray;
    cursor: default
}

.text-truncate {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.multiline-clamp {
    display: -webkit-box;
    /* richiesto per -webkit-line-clamp */
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
    /* rispetta i \n reali */
    word-break: break-word;
    /* evita overflow su parole lunghissime */
    /* il numero di righe è impostato inline con :style */
}


/* input[type="number"] {
    width: fit-content !important;
}

.input {
    width: fit-content !important;
} */


/*Metro UI presenta un errore all'interno del suo CSS: i valori di queste proprietà sono scritti in questo modo : "12px/2" ma questo valore non presenta una corretta sintassi*/

.row {
    /*provato a togliere. vedi che succede*/
    margin-left: 0px
        /*6px*/
    ;
    margin-right: 0px;
    /*6px;*/
}


/* div[role=group] {
    padding: 0 !important;
} */

.ellipsize-left {
    /* primary_text CSS ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Beginning of string */
    direction: rtl;
    text-align: left;
}

.mif-share-circle:before {
    content: "\eabb";
}

#menu-toggle {
    display: none;
}


/*#region HyperVTreeViewCss*/


/* [TG 01/08/2024 - css per treeview macchine virtuali HyperV] ----------------- */


/*ul[data-role="treeview"] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
  }*/



li.p-2 {
    /*border-bottom: 1px solid #eee;*/
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
}

.treeview {
    font-size: var(--font-size)
}

.tree-item-header {
    /*display: flex;*/
    align-items: left;
    justify-content: space-between;
}

.tree-item-header span {
    cursor: pointer;
}

#logPopover {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: scroll;
    max-height: 80%;
    max-width: 90%;
}

.breadcrumbs .page-link {
    font-size: 28px !important;
}

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

/* [------------------------------------------------------------------ */


/*#endregion HyperVTreeViewCss*/

.minh-none {
    min-height: 0% !important;
}

input[type=text],
input[type=password] {
    cursor: text;
}


/********************************TERMINALE******************************************/
.window.terminal-window {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    /* niente scroll sul frame esterno */
}

.window.terminal-window.d-none {
    display: none !important;
}

.window.terminal-window .window-caption {
    flex: 0 0 auto;
}

.window.terminal-window .window-content {
    flex: 1 1 auto;
    min-height: 0;
    /* importantissimo per evitare buchi bianchi */
    display: flex;
}


/* #terminalwindow riempie window-content */
.window.terminal-window #terminalwindow {
    flex: 1 1 auto;
    display: flex;
}

/* il primo div dentro #terminalwindow (quello che contiene il form) riempie */
.window.terminal-window #terminalwindow>div:first-child {
    flex: 1 1 auto;
    display: flex;
}

/* il form nero diventa un flex colonna che occupa tutto */
.window.terminal-window #terminalwindow form.bg-black {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* textarea prende tutto lo spazio verticale disponibile */
.window.terminal-window #terminalwindow textarea {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    /* sovrascrive height: calc(100% - 28px) inline */
    overflow: auto;
    resize: none;
    width: 100%;
}

/* input in basso, sempre visibile e largo */
.window.terminal-window #terminalwindow input[name="terminalInput"] {
    flex: 0 0 auto;
    width: 100%;
}



/***************************************************************************************/

/* On screens that are 992px or less, set the background color to blue */

@media screen and (max-width: 992px) {
    .bg-white.border.border-radius-4.mr-4.p-3.pb-5.split-block {
        display: none;
    }

    .sidenav-m3 {
        overflow: hidden !important;
    }

    .brand {
        visibility: hidden !important;
    }

    #menu-toggle {
        display: inline;
    }

    #docs-content {
        left: 50px !important;
    }
}


/* On screens that are 600px or less, set the background color to olive */

@media screen and (max-width: 600px) {
    .bg-white.border.border-radius-4.mr-4.p-3.pb-5.split-block {
        display: none;
    }

    .sidenav-m3 {
        overflow: hidden !important;
    }

    #menu-toggle {
        display: inline;
    }

    body {
        background-color: white;
    }
}


.update-banner {
    background-color: #ffe08a;
    color: #333;
    font-size: 0.8rem;
    padding: 6px 10px;
    border-radius: 4px;
    margin-top: 10px;
    text-align: left;
    cursor: pointer;
    /* 🔸 Indica che è cliccabile */
    transition: background-color 0.2s ease;
}

.update-banner:hover {
    background-color: #ffd65a;
    /* effetto hover */
}

.update-banner:active {
    background-color: #f0c843;
}

.badge-update {
    background-color: var(--secondary);
    color: white;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;

}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

.update-banner.pulse {
    animation: pulse 2s infinite;
}

pre {
    font-family: inherit;
}

.no-data-img {
    max-width: 100%;
    width: 300px;
    /* o qualsiasi valore fisso tu voglia */
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

a[data-tip] {
    position: relative
}

a[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    left: 30%;
    transform: translateX(-50%);
    /* centra il tooltip */
    max-width: 36ch;
    /* ~36 caratteri: aumenta/diminuisci a piacere */
    width: 250px;
    white-space: normal;
    /* consente il wrapping automatico */
    overflow-wrap: anywhere;
    /* evita overflow su parole lunghe */
    padding: 8px 10px;
    border: 1px solid #ccc;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    border-radius: 6px;
    line-height: 1.35;
    z-index: 10;
    pointer-events: none;
    /* evita flicker */
}

.dot {
    display: inline-block;
    width: 13px;
    /* diametro */
    height: 13px;
    border-radius: 50%;
    line-height: 1;
    /* per evitare stiramenti */
    vertical-align: middle;
    /* per allinearlo meglio con il testo */
    background-color: currentColor;
    /* prende il colore dal testo */
}

.dot-small {
    display: inline-block;
    width: 12px;
    /* diametro */
    height: 12px;
    border-radius: 50%;
    line-height: 1;
    /* per evitare stiramenti */
    vertical-align: middle;
    /* per allinearlo meglio con il testo */
    background-color: currentColor;
    /* prende il colore dal testo */
}

.shadow-1 {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

progress {
    height: 8px;
    border: none;
}

progress::-webkit-progress-bar {
    background: #eee;
    border-radius: 999px;
}

progress::-webkit-progress-value {
    background: #3f51b5;
    border-radius: 999px;
}

/* colore a piacere */
progress::-moz-progress-bar {
    background: #3f51b5;
    border-radius: 999px;
}

/* START usato nella lista che mostra le policy (UserDialog.vue) */
.policy-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.policy-nav__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .8rem;
    margin-bottom: .35rem;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: all .15s ease;
}

.policy-nav__item:hover {
    background: #f6f8fb;
    border-color: #e5eaf2;
}

.policy-nav__item.active {
    background: #eaf2ff;
    border-color: #c9dcff;
    font-weight: 600;
    box-shadow: inset 0 0 0 2px #93b7ff;
}

.policy-nav__item .badge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    background: #1e90ff;
    /* Metro-ish primary */
    color: #fff;
}

.gap-1 {
    gap: .5rem;
}

/* se non hai già utilità simili */
.tag {
    border-radius: 999px;
}

/* FINE usato nella lista che mostra le policy (UserDialog.vue) */

/* START usato nelle Threshold delle policy (PolicyDialog.vue) */
.label-active {
    color: #000;
    font-weight: bold;
}

/* attiva: nero + bold */
.label-inactive {
    color: #9ca3af;
    font-weight: normal;
}

/* disattiva: grigio + normale */
.th-inactive input {
    opacity: .7;
}

.th-active input {
    opacity: 1;
}

/* FINE usato nelle Threshold delle policy (PolicyDialog.vue) */
.dialog {
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.08);

    margin-top: 0px;
    transition: width 0.3s ease;
    border: 0px solid #DFDFDE;
    border-radius: var(--radius);

    width: auto;
    height: auto;
    min-width: 30vw;
    max-height: 90vh;
    overflow: hidden;

    background-color: var(--background-color) !important;
}

/* La box dialog segue il contenuto, niente larghezze fisse */
.dialog-resizable {
    display: inline-block !important;

    /*resize: both;*/
    max-width: 80vw !important;
    min-width: 33vw !important;
    max-height: 90vh !important;
    min-height: 30vh !important;

    box-sizing: border-box;
    align-items: flex-start !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /**/
    box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.08);
    margin-top: 0px;
    transition: width 0.3s ease;
    border: 0px solid #DFDFDE;
    border-radius: var(--radius);
    z-index: 1050;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;

    resize: both;
    overflow: hidden !important;
}

.dialog-content {
    padding: 20px;
    margin-top: 0px !important;
    /* min-height: 400px; */
    overflow: auto;
    height: var(--dialog-content-height)
}

.dialog .dialog-content,
.dialog-resizable .dialog-content {
    overflow: auto !important;
    scrollbar-color: #b8c0cc transparent;
    scrollbar-width: thin;
}

.dialog .dialog-content::-webkit-scrollbar,
.dialog-resizable .dialog-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dialog .dialog-content::-webkit-scrollbar-track,
.dialog-resizable .dialog-content::-webkit-scrollbar-track {
    background: transparent;
}

.dialog .dialog-content::-webkit-scrollbar-thumb,
.dialog-resizable .dialog-content::-webkit-scrollbar-thumb {
    background-color: #b8c0cc;
    border-radius: 8px;
}

.dialog .dialog-content::-webkit-scrollbar-thumb:hover,
.dialog-resizable .dialog-content::-webkit-scrollbar-thumb:hover {
    background-color: #8f99a8;
}

/* SOLO orizzontale */
.dialog-resizable .dialog-content {
    padding: 20px;

    overflow: auto !important;
}

/* (opzionale) cursore “drag” sull’header, così separi drag vs resize */
.dialog-resizable .dialog-title {
    cursor: move;
}

/* Maniglie laterali */
.dialog-resizable .resize-handle {
    position: absolute;
    top: 0;
    width: 10px;
    /* larghezza handle */
    height: 100%;
    cursor: ew-resize;
    opacity: 0.15;
    background: linear-gradient(90deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .02));
    transition: opacity .15s ease;
    user-select: none;
}

.dialog-resizable .resize-handle:hover {
    opacity: .35;
}

.dialog-resizable .resize-handle.left {
    left: -5px;
    border-left: 1px solid rgba(0, 0, 0, .08);
}

.dialog-resizable .resize-handle.right {
    right: -5px;
    border-right: 1px solid rgba(0, 0, 0, .08);
}

/* Durante il drag, evita selezioni/testo */
body.resizing-horizontal {
    cursor: ew-resize !important;
    user-select: none !important;
}

.tree-no-toggle .node-toggle {
    display: none !important;
}

.xterm-scrollable-element,
.xterm-screen {
    width: 100% !important;
    height: 100% !important;
}

.hint.credential-help-hint,
.hint.argument-help-hint {
    width: 340px;
    max-width: 340px /*calc(100vw - 2rem)*/;
    font-size: 0.85rem;
    line-height: 1.4;
}

.credential-help-icon,
.script-help-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid black;
	border-radius: 50%;
	color: black;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: help;
}

.hint.credential-name-help-hint {
    width: 360px;
    max-width: calc(100vw - 2rem);
}

.hint.credential-name-help-hint ul {
    margin: 0;
    padding-left: 1.25rem;
}

.hint.credential-name-help-hint li + li {
    margin-top: .35rem;
}


/* nasconde il testo sotto i 600px (regola la soglia a piacere) */
@media (max-width: 700px) {

    .hide-mobile {
        display: none !important;
    }

    .app-bar-item .user-label {
        display: none !important;
    }

    .app-bar-item .icon {
        margin-right: 0 !important;
    }

    /* nasconde i testi (se non l'hai già fatto) */
    #userdropdown .menu-text {
        display: none !important;
    }

    /* ogni voce del menu diventa un box centrato */
    #userdropdown li>a,
    #userdropdown li>.router-link,
    #userdropdown li>.router-link-active {
        display: flex !important;
        align-items: center;
        /* centratura verticale */
        justify-content: center;
        /* centratura orizzontale */
        gap: 0;
        min-height: 44px;
        /* target touch comodo */
        padding: .5rem !important;
    }

    /* rimuove il padding sinistro ereditato */
    #userdropdown a.pl-5 {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    /* azzera margini attorno all'icona */
    #userdropdown svg,
    #userdropdown .va-middle {
        display: block;
        margin: 0 !important;
    }

    #userdropdown .mr-1 {
        margin-right: 0 !important;
    }

    /* opzionale: centra il contenuto del <li> */
    #userdropdown li {
        text-align: center;
    }

    .app-bar-item .menu-text {
        display: none !important;
    }

    /* centra l’icona nel bottone */
    .app-bar-item.button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 .5rem;
        /* riduce padding laterale */
        min-width: 44px;
        /* target touch comodo */
        /* opzionale: alza un po' l'altezza per usabilità mobile */
        min-height: 35px;
        /* se puoi, meglio di 35px */
    }

    /* rimuovi eventuali margini dell’icona */
    .app-bar-item .icon {
        margin: 0 !important;
    }
}

/* serve per togliere gli angoli tagliati dall alistview delle sorgenti nella pagina di configurazione di un backup*/
.listview .node {
    overflow: visible;
    /* niente più angoli tagliati */
    /* opzionale: */
    /* border-radius: 0; */
}

.filter-left {
    /*col-*/
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    max-width: none;
    width: auto;
    display: block;
    min-height: 1px;
    position: relative;
    /*m-0 + p-0*/
    margin: 0px 8px 8px 0px !important;
    padding: 0 !important;
}

.filter-right {
    /*col-*/
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    max-width: none;
    width: auto;
    display: block;
    min-height: 1px;
    position: relative;
    /*m-0 + p-0*/
    margin: 0px 0px 8px 8px !important;
    padding: 0 !important;
}

/*pl-5 d-flex flex-justify-start*/
.filter-section {
    padding-left: 20px !important;
    display: flex !important;
    -webkit-box-pack: start !important;
    justify-content: flex-start !important;
}

/*w-100 px-5 pb-5 overflow*/
.results-section {
    height: 75vh;
    width: 100% !important;
    padding: 0px 20px 20px 20px !important;
    overflow: auto !important;
}

/* Soft "pill" badges (priority / status) */
.tk-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: .78rem;
    line-height: 1.15;
    white-space: nowrap;
}

.tk-badge--red {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.tk-badge--orange {
    background-color: #fff7ed;
    border-color: #fed7aa;
    color: #ea580c;
}

.tk-badge--amber {
    background-color: #fffbeb;
    border-color: #fde68a;
    color: #d97706;
}

.tk-badge--green {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    color: #16a34a;
}

.tk-badge--blue {
    background-color: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.tk-badge--gray {
    background-color: #f8fafc;
    border-color: #e2e8f0;
    color: #475569;
}

.ticket-menu-overlay {
    background: #fff;
    border: 1px solid #d9d9d9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    list-style: none;
    margin: 0;
    min-width: 200px;
    overflow-y: auto;
    padding: 4px 0;
    position: fixed;
    text-align: left;
    z-index: 1000;
}

.ticket-menu-item {
    cursor: pointer;
    padding: 7px 14px;
    white-space: nowrap;
}

.ticket-menu-item:hover {
    background: #f3f3f3;
}

.ticket-menu-title {
    border: 0;
    cursor: default;
    color: #646464;
    font-size: .75rem;
    font-weight: 700;
    line-height: .875rem;
    padding: .25rem .5rem;
    background-color: rgba(29, 29, 29, .1);
    user-select: none;
    border-top: 1px solid #e2e8f0;
    pointer-events: none;

}

.ticket-menu-divider {
    margin: 4px 0;
    height: 0;
    border-top: 1px solid #e2e8f0;
}