/* **************************************************************************************************** */
/*                                                                                                      */
/*                           CLASSE PROTETTA - NON MODIFICARE IL CODICE                                 */
/*              LE MODIFICHE DI QUESTA CLASSE NON SONO PROPAGATE NEI MODULI DEL DARKFACES               */
/*                                                                                                      */
/* **************************************************************************************************** */

/* ********** INIZIO VARIABILI GENERALI ********** */
:root {
    --surface-a: #2a323d;
    --surface-b: #20262e;
    --surface-c: rgba(255, 255, 255, 0.04);
    --surface-d: #3f4b5b;
    --surface-e: #2a323d;
    --surface-f: #2a323d;
    --text-color: rgba(255, 255, 255, 0.87);
    --text-color-secondary: rgba(255, 255, 255, 0.6);
    --primary-color: #5E81AC;
    --primary-color-text: #ffffff;
    --primary-color-hover: #4C6A92;
    --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --surface-0: #20262e;
    --surface-50: #363c43;
    --surface-100: #4d5158;
    --surface-200: #63676d;
    --surface-300: #797d82;
    --surface-400: #909397;
    --surface-500: #a6a8ab;
    --surface-600: #bcbec0;
    --surface-700: #d2d4d5;
    --surface-800: #e9e9ea;
    --surface-900: #ffffff;
    --gray-50: #e9e9ea;
    --gray-100: #d2d4d5;
    --gray-200: #bcbec0;
    --gray-300: #a6a8ab;
    --gray-400: #909397;
    --gray-500: #797d82;
    --gray-600: #63676d;
    --gray-700: #4d5158;
    --gray-800: #363c43;
    --gray-900: #20262e;
    --content-padding: 1.25rem;
    --inline-spacing: 0.5rem;
    --border-radius: 4px;
    --surface-ground: #20262e;
    --surface-section: #20262e;
    --surface-card: #2a323d;
    --surface-overlay: #2a323d;
    --surface-border: #3f4b5b;
    --surface-hover: rgba(255, 255, 255, .04);
    --maskbg: rgba(0, 0, 0, 0.4);
    --focus-ring: 0 0 0 1px #bfcdde;
}
/* ********** FINE VARIABILI GENERALI ********** */

/* ********** INIZIO CORPO PRINCIPALE E NAVIGAZIONE ********** */
* {
    scrollbar-width: thin !important;
    scrollbar-color: #96b879 #f0c56c !important;
}

body {
    font-family: var(--font-family), sans-serif !important;
    font-size: 14px !important;
    color: #d8dee9 !important;
    -webkit-font-smoothing: antialiased !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100% !important;
    background-color: #2e3440 !important;
}

main {
    margin-left: 60px !important;
    width: calc(100% - 70px) !important;
}

#login-form {
    width: 25rem !important;
    border: solid 1px #20252e !important;
    background-color: #20252e !important;
    padding: 3rem 3rem 2rem 3rem !important;
    border-radius: 10px !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}

#sidebar {
    width: 60px !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    transition: width 0.3s ease-in-out;
    z-index: 1050 !important;
    background-color: #2e3440 !important;
    box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
}
#sidebar.expanded {
    width: 235px !important;
    transition: width 0s ease-in-out;
}
#sidebar.expanded + main {
    margin-left: 235px !important;
    width: calc(100% - 245px) !important;
}
#sidebar.expanded #sidebar-appname {
    opacity: 1 !important;
}
#sidebar.expanded .sidebar-icon {
    display: none !important;
}
#sidebar.expanded .sidebar-item {
    display: flex !important;
}
#sidebar-content {
}
#sidebar-logo {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding-left: 7px !important;
}
#sidebar-logo img {
    vertical-align: middle !important;
    height: 45px !important;
    width: 45px !important;
    border: 0 none !important;
    margin-top: 10px !important
}
#sidebar-appname {
    opacity: 0 !important;
    font-size: 1.25rem !important;
    white-space: nowrap !important;
    transition: opacity 0.2s ease-in-out !important;
    position: relative !important;
    top: 5px !important;
}
#sidebar-toggle {
    border: none !important;
    background: transparent !important;
    color: #d8dee9 !important;
    font-size: 1.25rem !important;
}

.sidebar-icon {
    color: #d8dee9 !important;
    font-size: 1.25rem !important;
    gap: 25px !important;
}
.sidebar-item {
}
.sidebar-item button,
.sidebar-item a {
    color: #d8dee9 !important;
}
.sidebar-link:hover {
    background-color: #dc3545 !important;
}
.accordion-item {
    background-color: unset !important;
    border: unset !important;
}

#navbar {
    height: 40px !important;
    background-color: #20252e !important;
    color: var(--primary-color) !important;
}
.navbar {
    margin-bottom: 0 !important;
}
.navbar-item {
    color: var(--primary-color);
}
.navbar-item:hover {
    color: var(--primary-color-hover);
}

#navbar, #content {
    transition: margin-left 0.3s ease-in-out !important;
}

#breadcrumb {
    height: 40px !important;
    background-color: #20252e !important;
    color: var(--primary-color) !important;
    padding-left: 30px !important;
}
.breadcrumb {
    --bs-breadcrumb-margin-bottom: unset !important;
}
.breadcrumb-item {
    color: var(--primary-color);
}
.breadcrumb-item:hover {
    color: var(--primary-color-hover);
}

#breadcrumb, #content {
    transition: margin-left 0.3s ease-in-out !important;
}

.content {
    padding: 10px 30px;
}

.content, .content-home {
    width: calc(100% - 12px) !important;
}

.view-form-title,
.modify-form-title{
    font-size: 1rem !important;
}
.view-form-title i,
.modify-form-title i{
    color: darkred !important;
}
.view-form-content,
.modify-form-content{
    border: solid 1px #20252e !important;
    background-color: #20252e !important;
    padding: 1rem 1rem 0.2rem !important;
    border-radius: 10px !important;
}
/* ********** FINE CORPO PRINCIPALE E NAVIGAZIONE ********** */

/* ********** INIZIO CLASSI GENERALI ********** */
.cursor-pointer {
    cursor: pointer !important;
}

.label-disabled {
    color: #d8dee98a !important;
}
.align-middle {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.col-auto {
    width: 100%; /* Default per schermi piccoli */
}

@media (max-width: 1065px) {
    .col-custom-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 1065px) {
    .col-auto {
        width: 50%; /* col-6 */
    }
}

@media (min-width: 1550px) {
    .col-auto {
        width: 33.33%; /* col-4 */
    }
}

@media (min-width: 2029px) {
    .col-auto {
        width: 25%; /* col-3 */
    }
}

.col-40 {
    width: 40%;
}

.break-word {
    word-break: break-word;
}

.text-dark-success {
    color: #004100 !important;
}

.text-unread {
    color: #7dace5 !important;
    font-weight: bold !important;
}

/* ********** PERSONALIZZAZIONE PER LIMES ********** */
.text-dark-warning {
    color: #f6821f !important;
}

.text-dark-danger {
    color: #8b0000 !important;
}

.text-background-success {
    background-color: #004100 !important;
    color: #d8dee9 !important;
    border: 1px solid #d8dee9 !important;
    padding: 3px 5px !important;
}
.text-background-danger {
    background-color: #8b0000 !important;
    color: #d8dee9 !important;
    border: 1px solid #d8dee9 !important;
    padding: 3px 5px !important;
}
.text-background-primary {
    background-color: #0043a7 !important;
    color: #d8dee9 !important;
    border: 1px solid #d8dee9 !important;
    padding: 3px 5px !important;
}

.text-background-olive {
    background-color: #4a5c4f !important;
    color: #d8dee9 !important;
    border: 1px solid #d8dee9 !important;
    padding: 3px 5px !important;
}

#waiting {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(42, 50, 59, 0.75);
    z-index: 1050;
    display: flex;
    justify-content: center;
    align-items: center;
}

#modalViewer {
    background: rgba(42, 50, 59, 0.75);
    display: block;
}

.info-message {
    --bs-toast-header-color: #d8dee9 !important;
    --bs-toast-header-bg: #2b3a4e !important;
    --bs-toast-bg: #496485 !important;
}
.warning-message {
    --bs-toast-header-color: #d8dee9 !important;
    --bs-toast-header-bg: #4e442b !important;
    --bs-toast-bg: #857349 !important;
}
.error-message {
    --bs-toast-header-color: #d8dee9 !important;
    --bs-toast-header-bg: #4e2b2b !important;
    --bs-toast-bg: #854949 !important;
}
.info-message .btn-close,
.warning-message .btn-close,
.error-message .btn-close {
    --bs-btn-close-color: #d8dee9 !important;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
}

.tooltip.tooltip-left .tooltip-inner {
    text-align: left;
}
/* ********** FINE CLASSI GENERALI ********** */

/* ********** INIZIO FORM-CONTROL ********** */
.form-control {
    font-size: unset !important;
}
.form-control:focus {
    border-color: #0d6efd !important;
    box-shadow: unset !important;
}
/* ********** FINE FORM-CONTROL ********** */

/* ********** INIZIO INPUT ********** */
input {
    color: rgba(255, 255, 255, 0.87) !important;
    background: #20262e !important;
    border: 1px solid #3f4b5b !important;
    outline: 0 none !important;
    border-radius: 4px !important;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 2.25rem !important;
}
input::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

.modify-form-content input {
    background: #2e3440 !important;
}

.input-icon {
    position: relative !important;
}
.input-icon > input {
    padding-right: 30px !important;
}
.input-icon > i {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    color: #9ca3af;
}
/* ********** FINE INPUT ********** */

/* ********** INIZIO SELECT2 ********** */
.select-icon {
    position: relative !important;
}
.select-icon > input {
    padding-right: 30px !important;
}
.select-icon > i {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    color: #9ca3af;
    z-index: 10 !important;
}

.select2-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 2.25rem !important;
}
.select2-container .select2-selection--single,
.form-select {
    color: rgba(255, 255, 255, 0.87) !important;
    background: #20262e !important;
    border: 1px solid #3f4b5b; /* Non mettere !important, la funzione requiredItem lo deve poter sovrascrivere */
    outline: 0 none !important;
    border-radius: 4px !important;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 2.25rem !important;
    padding: 0.375rem 0.75rem !important;
    display: flex !important;
    align-items: center !important;
}

.modify-form-content .select2-container .select2-selection--single,
.form-select {
    background: #2e3440 !important;
}

.select2-selection.select2-selection--single:focus {
    border-color: #0d6efd !important;
    box-shadow: unset !important;
}
.select2-container .select2-selection--single .select2-selection__arrow {
   display: none !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0px !important;
}
.select2-container .select2-selection__rendered {
    line-height: normal !important;
    color: rgba(255, 255, 255, 0.87) !important;
    display: flex !important;
    align-items: center !important;
}
.select2-container .select2-selection__clear {
    color: #db3444 !important;
    padding-left: 10px !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    order: 2 !important;
}
.select2-container .select2-dropdown {
    background: #20262e !important;
    border: 1px solid #3f4b5b !important;
    border-radius: 4px !important;
    box-shadow: unset !important;
}
.select2-container .select2-results__option {
    padding: 8px 12px !important;
    color: rgba(255, 255, 255, 0.87) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #5897fb !important;
    color: rgb(45, 49, 54) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    color: rgba(255, 255, 255, 0.87) !important;
    background-color: #198754 !important;
    overflow: auto !important;
}
.select2-search--dropdown {
    padding: 0.5rem !important;
}
/* ********** FINE SELECT2 ********** */

/* ********** INIZIO TOM-SELECT ********** */
.ts-control {
    background: #20262e !important;
    border: 1px solid #3f4b5b;
    border-radius: 4px !important;
    font-family: unset !important;
    font-size: unset !important;
    padding-left: 0.75rem !important;
}
.ts-control input {
    height: 1.15rem !important;
    font-family: unset !important;
    font-size: unset !important;
}
.ts-control input::placeholder {
    color: #999 !important;
}
.ts-dropdown {
    background: #20262e !important;
    border: 1px solid #3f4b5b !important;
    color: rgba(255, 255, 255, 0.87) !important;
    font-family: unset !important;
    font-size: unset !important;
}
.ts-dropdown-content {
    margin-top: 0.5rem !important;
}
.ts-dropdown .active {
    background-color: #5897fb !important;
    color: rgb(45, 49, 54) !important;
}
.ts-dropdown [data-selectable].option {
    padding: 0.55rem !important;
    padding-left: 0.75rem !important;
}
.ts-wrapper.multi .ts-control > div {
    background: #20262e !important;
    color: rgba(255, 255, 255, 0.87) !important;
    border: none !important;
    margin: unset !important;
    padding: unset !important;
}
.ts-wrapper.plugin-remove_button .item .remove {
    color: #db3444 !important;
    margin-left: 5px !important;
    margin-right: 0.5rem;
    font-size: 1rem !important;
    font-weight: bold !important;
    border-left: none !important;
}
.has-items .ts-control > input {
    display: none !important;
}

.modify-form-content .ts-control {
    background: #2e3440 !important;
}
.modify-form-content .ts-wrapper {
    padding: 0px !important;
    border: none !important;
}
.modify-form-content .ts-wrapper.multi .ts-control > div {
    background-color: transparent !important;
    font-size: 0.88rem !important;
}
.modify-form-content .ts-dropdown-content .option {
    font-size: 0.88rem !important;
}
/* ********** FINE TOM-SELECT ********** */

/* ********** INIZIO DATATABLE ********** */
.table-dark thead th {
    background-color: #1b2027 !important;
}
.table-dark thead > tr > th.dt-ordering-asc span.dt-column-order::before,
.table-dark thead > tr > th.dt-ordering-desc span.dt-column-order::after{
    opacity: 1 !important;
    color: #198754 !important;
}
.table-dark td {
    vertical-align: middle; !important;
}
.table-dark > tbody > tr:nth-of-type(2n+1):not(.tr-grouping) > * {
    --bs-table-bg-type: #4a525c !important;
    background-color: #4a525c !important;
}

.table-dark > :not(caption) > * > * {
    background-color: #20262e !important;
    border-bottom-width: inherit !important;
}
.view-form-content .table-dark > :not(caption) > * > td {
    background-color: #2d3641 !important;
}

.table-dark .dt-empty {
    text-align: start !important;
}
.th-operation {
    width: 60px !important;
}
div.dt-info {
    padding-bottom: 0.5rem !important;
}
div.dt-scroll-body {
    border-bottom-style: none !important;
}
.table-dark .table-button {
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.td-tooltip-left .tooltip-inner {
    text-align: left !important;
    white-space: pre-line;
}

.table-dark > tbody > tr.tr-grouping > * {
    background-color: #d47f00 !important;
    font-weight: bold !important;
    color: #20262e !important;
}
.table-striped > tbody > tr.tr-grouping:nth-of-type(2n+1) > * {
    --bs-table-bg-type: inherit !important;
}
/* ********** FINE DATATABLE ********** */

/* ********** INIZIO TABS ********** */
.nav-tabs {
    border-bottom: none;
    justify-content: left;
    position: relative;
    padding-top: 15px;
    padding-left: 20px;
    margin-right: 40px;
    padding-bottom: 2px;
}
.nav-tabs::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #4f545c;
}
.nav-tabs .nav-link.active {
    border: none !important;
    color: #ffffff !important;
    background-color: #198754 !important;
}
.nav-tabs .nav-link {
    border: none !important;
    color: #ffffff !important;
    background-color: #0d6efd !important;
}
/* ********** FINE TABS ********** */

/* ********** INIZIO DASHBOARD ********** */
.dashboard-card {
    height: 220px !important;
    width: 475px !important;
    padding: 5px 25px 35px 15px !important;
    border: 1px solid #20252e;
    margin-top: 5px !important;
}
/* ********** FINE DASHBOARD ********** */

/* ********** INIZIO PROGRESS BAR ********** */
.progress  {
    position: relative;
    --bs-progress-bg: #333e4b;
    --bs-progress-bar-bg: #198754;
}
.progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
}
.progress-value-success {
    --bs-progress-bar-bg: #198754;
}
.progress-value-danger {
    --bs-progress-bar-bg: #8b0000;
}
.progress-value-warning {
    --bs-progress-bar-bg: #da981b;
}

table .progress  {
    height: 0.7rem;
}

table .progress-bar {
    font-size: 0.6rem;
}
/* ********** FINE PROGRESS BAR ********** */

/* ********** INIZIO BUTTON ********** */
.btn-small {
    --bs-btn-font-size: unset !important;
}

.file-upload {
    border: 1px solid #3f4b5b;
    border-radius: 4px !important;
}
/* ********** FINE BUTTON ********** */

/* ********** INIZIO MANY CHECKBOX ********** */
.many-checkbox {
    border: 1px solid #3f4b5b; /* Non mettere !important, la funzione requiredItem lo deve poter sovrascrivere */
    padding: 1rem 1rem 0 1rem !important;
    border-radius: 4px !important;
    margin-bottom: 1rem !important;
}
/* ********** FINE MANY CHECKBOX ********** */

/* ********** INIZIO ONE TO MANY ********** */
.one-to-many {
    border: 1px solid #3f4b5b; /* Non mettere !important, la funzione requiredItem lo deve poter sovrascrivere */
    padding: 1rem !important;
    border-radius: 4px !important;
    margin-bottom: 0.5rem !important;
}
/* ********** FINE ONE TO MANY ********** */

/* ********** INIZIO SELECT AND DATES ********** */
.select-and-dates {
    border: 1px solid #3f4b5b; /* Non mettere !important, la funzione requiredItem lo deve poter sovrascrivere */
    padding: 1rem !important;
    border-radius: 4px !important;
    margin-bottom: 0.5rem !important;
}
/* ********** FINE ONE TO MANY ********** */

/* ********** INIZIO POPOVER ********** */
.popover {
    max-width: 600px !important;
}
.popover-body {
    background-color: #2e3440 !important;
    color: rgba(255, 255, 255, 0.87) !important;
    border: 1px solid #3f4b5b !important;
    border-radius: 8px;
}
.popover-header {
    display: none !important;
}
/* ********** FINE POPOVER ********** */

/* ********** INIZIO CONFIRM MESSAGE ********** */
div:where(.swal2-container) div:where(.swal2-popup) {
    background: #384d67 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
}
div:where(.swal2-icon).swal2-warning {
    border-color: #d33 !important;
    color: #d33 !important;
}
/* ********** FINE CONFIRM MESSAGE ********** */

/* ********** INIZIO HOME PAGE LINK ********** */
.circle-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    background: transparent;
    font-family: sans-serif;
    cursor: pointer;
}

.circle-icon {
    width: 100px;
    height: 100px;
    position: relative;
}

.circle-icon svg {
    width: 100%;
    height: 100%;
}

.circle-icon i {
    font-size: 36px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.circle-icon-color-0 { color: #A3BE8C; }
.circle-icon-color-1 { color: #B68BEB; }
.circle-icon-color-2 { color: #D08770; }
.circle-icon-color-3 { color: #B48EAD; }
.circle-icon-color-4 { color: #BF616A; }
.circle-icon-color-5 { color: #AC8E5E; }

.circle-label {
    margin-top: 8px;
    font-size: 1rem;
    color: #cfd8df;
    text-align: center;
}
/* ********** FINE HOME PAGE LINK ********** */