:root {
    --rgb-IN_ATTESA: 204, 197, 185;
    --rgb-DISPONIBILE: 25, 130, 196;
    --rgb-IN_LAVORAZIONE: 255, 202, 58;
    --rgb-CONCLUSO: 138, 201, 38;
    --rgb-ANNULLATO: 100, 100, 100;
}

@media print {
    /* pdf accettazione in stampa */

    body:has(.pdf-accettazione-container) {
        background: unset !important;
    }

    .pdf-accettazione-container.pdf-accettazione-container-read-only {
        padding: 0 !important;
    }

    .pdf-accettazione-container {
        --base-font: 12px !important;
        --bs-border-color: #cbd1d7 !important;
        width: 100%;
    }

        .pdf-accettazione-container table thead tr th {
            padding: 2px 4.8px !important;
        }

        .pdf-accettazione-container table tbody tr td {
            font-size: 13px !important;
            height: 22px !important;
            padding: 2px 4.8px !important;
        }

        .pdf-accettazione-container .option-with-box .option {
            height: 20px !important;
            width: 30px !important;
        }

            .pdf-accettazione-container .option-with-box .option:has(svg) {
                position: relative;
            }

            .pdf-accettazione-container .option-with-box .option svg {
                color: #495057;
                font-size: calc(var(--base-font) + 4px);
                height: 18px !important;
                position: absolute;
                right: 50%;
                top: 50%;
                transform: translate(50%,-50%);
            }
}

.pdf-accettazione-container {
    --base-font: 14px;
    padding: 0.5cm;
    display: flex;
    flex-direction: column;
    font-size: var(--base-font);
    gap: 16px;
    justify-self: center;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 21cm;
}

    .pdf-accettazione-container .option-with-box {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 8px;
        justify-content: end;
    }

        .pdf-accettazione-container .option-with-box .title {
            font-size: var(--base-font);
            font-weight: bold;
        }

        .pdf-accettazione-container .option-with-box .option {
            align-content: center;
            border: 2px solid #495057;
            font-size: calc(var(--base-font) - 2px);
            line-height: 14px;
            height: 26px;
            width: 42px;
            text-align: center;
        }

            .pdf-accettazione-container .option-with-box .option:has(.fa.fa-x) {
                position: relative;
            }

            .pdf-accettazione-container .option-with-box .option .fa.fa-x {
                color: #495057;
                font-size: calc(var(--base-font) + 4px);
                position: absolute;
                right: 50%;
                top: 50%;
                transform: translate(50%,-50%);
            }

    .pdf-accettazione-container table {
        margin-bottom: 0px;
    }

        .pdf-accettazione-container table thead tr th {
            font-size: var(--base-font);
        }

        .pdf-accettazione-container table tbody tr td {
            white-space: nowrap;
            font-size: calc(var(--base-font) - 2px);
            height: 30.1px;
        }

    .pdf-accettazione-container .pdf-row-input {
        background: transparent;
        border: 1px solid lightgrey;
        color: var(--bs-table-color);
        width: 100%;
        outline-color: transparent;
        outline-width: 1px;
    }

        .pdf-accettazione-container .pdf-row-input:focus, .pdf-accettazione-container .pdf-row-input:focus-visible {
            border: 1px solid lightgrey;
            outline-color: lightgrey;
            outline-width: 1px;
        }

.validation-message {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
    font-weight: 500;
}

.fw-bold {
    color: #495057;
}

.w-fit {
    width: fit-content;
}


.fa.fa-times.s2-clear.me-2 {
    margin: 0px 8px !important;
}
/* detail card */
.detail-card {
    background-color: rgba(var(--bs-body-bg-rgb), 1);
    display: flex;
    flex-direction: column;
    padding: 16px;
}

    .detail-card .row-title {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 8px;
        margin-bottom: 24px;
    }

        .detail-card .row-title .title {
            color: var(--bs-heading-color);
            font-size: 20px;
            font-weight: 500;
        }

    .detail-card .col-value {
        align-items: baseline;
        color: var(--bs-heading-color);
        display: flex;
        flex-direction: row;
        font-size: 14px;
        gap: 8px;
    }

        .detail-card .col-value .title {
            font-weight: normal;
        }

        .detail-card .col-value .value {
            font-weight: 500;
        }

/* wizard */

.sw .nav .nav-item {
    min-height: 55px;
}

    .sw .nav .nav-item .nav-link {
        align-items: center;
        display: flex;
        flex-direction: column;
        font-size: 14px;
        font-weight: bold;
        gap: 4px;
        justify-content: center;
        line-height: normal;
    }

        .sw .nav .nav-item .nav-link small {
            font-weight: normal;
        }

/* card */

.card-title-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.card-span-title {
    color: var(--bs-heading-color);
    display: flex;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 16px;
}

.card-title-row .card-span-title {
    margin-bottom: 0px;
}

.card-title {
    padding: 0px;
    margin: 0px;
}

.card-title-row-with-icon {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-bottom: 16px;
}

    .card-title-row-with-icon .card-span-title {
        margin-bottom: 0px;
    }

/* form */

.form-control, .form-select {
    border: 1px solid #c7c7c7;
}

    .form-control::placeholder {
        opacity: 0.5;
    }

/* file input */

.file-drop-zone {
    align-items: center;
    aspect-ratio: 3 / 1;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

    .file-drop-zone input[type=file] {
        width: 100%;
        padding: 20px;
    }

    .file-drop-zone.hover {
        border-style: solid;
        /*background-color: red !important;*/
    }

    .file-drop-zone * {
        pointer-events: none;
    }

/* files table */

.file-table-icon-container {
    background-color: rgb(var(--bs-light-rgb)) !important;
    border-radius: 4px;
    padding: 16px;
}

/* select cercabile */

.search-select-component > .dropdown > button.dropdown-toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .2rem;
    color: #495057;
    display: block;
    font-size: .825rem;
    font-weight: 400;
    line-height: 1.625;
    padding: .25rem .7rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%;
}

/* multi select */

#dropdownMenuButton {
    border: 1px solid #c7c7c7;
    margin-bottom: 1rem;
}

    #dropdownMenuButton:focus, #dropdownMenuButton:active, #dropdownMenuButton:hover, #dropdownMenuButton.show {
        background-color: transparent;
        color: rgb(73, 80, 87);
    }

    #dropdownMenuButton:focus, #dropdownMenuButton:active {
        border-color: rgb(159, 192, 245);
        box-shadow: rgba(63, 128, 234, 0.25) 0px 0px 0px 3.2px;
    }

    #dropdownMenuButton::after {
        margin-left: 8px;
    }

.select2-container.select2-container--bootstrap4.select2-container--open {
    z-index: 10000 !important;
}

/* sidebar */

#sidebar {
    position: fixed;
}

.sidebar-brand img {
    max-width: 100%;
    max-height: 50px;
}

.sidebar-link.active, .sidebar-link.active i {
    color: #568fed !important;
    font-weight: bold !important;
}

/* alert */

.alert {
    border-radius: 8px;
    padding: 8px;
}

/* gap */

.gap-8px {
    gap: 8px;
}

.gap-16px {
    gap: 16px;
}

/* altro */

.workflow-table {
    border-spacing: 0px;
}

    .workflow-table tr {
    }

    .workflow-table tbody tr:first-child .progress-up {
        visibility: hidden;
    }

    .workflow-table tbody tr:last-child .progress-down {
        visibility: hidden;
    }

    .workflow-table td, .workflow-table th {
        padding: 10px 16px;
        white-space: nowrap;
    }

        .workflow-table td:has(.progress-workflow) {
            padding: 0px;
        }


    .workflow-table tr:has(.stato.s_IN_ATTESA) .progress-icon {
        background-color: rgba(var(--rgb-IN_ATTESA), 0.3) !important;
        border-color: rgba(var(--rgb-IN_ATTESA), 0.2) !important;
        color: rgba(var(--rgb-IN_ATTESA), 0.5) !important;
    }

    .workflow-table tr:has(.stato.s_IN_ATTESA) .progress-up, tr:has(.stato.s_IN_ATTESA) .progress-down {
        visibility: hidden;
    }

    .workflow-table tr:has(.stato.s_DISPONIBILE) .progress-icon {
        background-color: var(--bs-white);
        border-color: rgba(100, 100, 100, 0.5);
        color: rgba(100, 100, 100, 0.5);
    }

    .workflow-table tr:has(.stato.s_DISPONIBILE) .progress-down {
        visibility: hidden;
    }

    .workflow-table tr:has(.stato.s_DISPONIBILE) .progress-up {
        border-color: rgba(100, 100, 100, 0.5);
    }

    .workflow-table tr:has(.stato.s_IN_LAVORAZIONE) .progress-icon {
        background-color: var(--bs-white);
        color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

    .workflow-table tr:has(.stato.s_IN_LAVORAZIONE) .progress-down {
        visibility: hidden;
    }

    .workflow-table tr:has(.stato.s_CONCLUSO) .progress-icon {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
        color: var(--bs-white);
    }

    .workflow-table tr:has(.stato.s_ANNULLATO) .progress-up, tr:has(.stato.s_ANNULLATO) .progress-down {
        visibility: hidden;
    }




.progress-workflow {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-up, .progress-down {
    /*background-color: var(--bs-primary);*/
    width: 1px;
    height: 12px;
    border-right: 4px solid var(--bs-primary);
}

.progress-icon {
    background-color: #CCC;
    border: 2px solid #CCC;
    color: #555;
    font-size: 14px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    justify-self: center;
    font-weight: 600;
}

.badge-stato-step {
    background-color: red;
    display: flex;
    align-items: center;
    padding: 2px 2px;
    padding-right: 8px;
    border-radius: 20px;
    font-weight: 500;
    width: 195px;
    line-height: 20px;
}

    .badge-stato-step.s_IN_ATTESA {
        background-color: rgba(var(--rgb-IN_ATTESA), 1);
        color: var(--bs-white);
    }

    .badge-stato-step.s_DISPONIBILE {
        background-color: rgba(var(--rgb-DISPONIBILE), 1);
        color: var(--bs-white);
    }

    .badge-stato-step.s_IN_LAVORAZIONE {
        background-color: rgba(var(--rgb-IN_LAVORAZIONE), 1);
        color: var(--bs-white);
    }

    .badge-stato-step.s_CONCLUSO {
        background-color: rgba(var(--rgb-CONCLUSO), 1);
        color: var(--bs-white);
    }

    .badge-stato-step.s_ANNULLATO {
        background-color: rgba(var(--rgb-ANNULLATO), 1);
        color: var(--bs-white);
    }

.badge-stato-esame {
    background-color: red;
    display: flex;
    align-items: center;
    padding: 2px 2px;
    border-radius: 20px;
    font-weight: 500;
    width: 125px;
}

    .badge-stato-esame.s_IN_ATTESA {
        background-color: rgba(var(--rgb-IN_ATTESA), 1);
        color: var(--bs-white);
    }

    .badge-stato-esame.s_IN_LAVORAZIONE {
        background-color: rgba(var(--rgb-IN_LAVORAZIONE), 1);
        color: var(--bs-white);
    }

    .badge-stato-esame.s_CONCLUSO {
        background-color: rgba(var(--rgb-CONCLUSO), 1);
        color: var(--bs-white);
    }


tr:has(.stato.s_IN_ATTESA) {
    background-color: rgba(var(--rgb-IN_ATTESA), 0.1);
}


tr:has(.stato.s_DISPONIBILE) {
    background-color: rgba(var(--rgb-DISPONIBILE), 0.1);
}

tr:has(.stato.s_IN_LAVORAZIONE) {
    background-color: rgba(var(--rgb-IN_LAVORAZIONE), 0.15);
}


tr:has(.stato.s_CONCLUSO) {
    background-color: rgba(var(--rgb-CONCLUSO), 0.15);
}


tr:has(.stato.s_ANNULLATO) {
    background-color: rgba(var(--rgb-ANNULLATO), 0.1);
}

.table.table-nowrap tbody tr td {
    white-space: nowrap;
}

.table-action-container {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: end;
}

.table-action .action-button, .table-action a {
    border: none !important;
    background-color: transparent !important;
    color: #6c757d;
}

    .table-action .action-button:hover, .table-action a:hover {
        border: none !important;
        background-color: transparent !important;
        color: #212529;
    }

.workflow-list-check-container {
    width: 0px;
    text-align: center;
}

th .workflow-list-check-container {
    margin-left: 6px
}

.menu-counter {
    display: flex;
    float: right;
    gap: 2px;
    align-items: center;
}

    .menu-counter .menu-counter-item {
        min-width: 16px;
        min-height: 16px;
        text-align: center;
        border-radius: 4px;
        font-weight: bold;
        padding: 0px 2px;
    }


        .menu-counter .menu-counter-item.attesa {
            background-color: rgba(var(--rgb-IN_ATTESA), 0.1);
            color: rgba(var(--rgb-IN_ATTESA), 1);
        }

        .menu-counter .menu-counter-item.disponibili {
            background-color: rgba(var(--rgb-DISPONIBILE), 0.1);
            color: rgba(var(--rgb-DISPONIBILE),1);
        }

        .menu-counter .menu-counter-item.lavorazione {
            background-color: rgba(var(--rgb-IN_LAVORAZIONE), 0.1);
            color: rgba(var(--rgb-IN_LAVORAZIONE), 1);
        }


/* TABELLA BARCODE */
.table-barcode {
    border: 1px solid #c7c7c7;
    width: 100%;
    border-radius: .2rem;
}

    .table-barcode td {
        border: 1px solid #c7c7c7;
        padding: 2px 2px;
        white-space: nowrap;
    }

    .table-barcode th {
        border: 1px solid #c7c7c7;
        padding: 2px 6px;
        white-space: nowrap;
    }

    .table-barcode input, .table-barcode select {
        border: none;
        padding: 2px 4px !important;
        outline: none;
    }

        .table-barcode input:focus, .table-barcode select:focus {
            outline: 1px solid black !important;
            box-shadow: none;
        }

.img-thumbnail {
    /*max-width: 250px;*/
    height: 250px;
    border: 1px solid #CCC;
    background-color: #FAFAFA;
}

    .img-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

.calcolo-file-viewer {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

    .calcolo-file-viewer .calcolo-file-viewer-title {
        border-bottom: 1px solid #ddd;
        background-color: #FAFAFA;
        padding: 12px;
    }

    .calcolo-file-viewer .calcolo-file-viewer-content {
        padding: 12px;
        width: 100%;
        max-height: 300px;
        overflow-y: auto;
    }

    .calcolo-file-viewer .calcolo-file-table {
        width: 100%;
        border: 1px solid #555;
    }

        .calcolo-file-viewer .calcolo-file-table th {
            background-color: #555;
            color: #FFF;
            padding: 2px 4px;
            text-align: center;
        }

        .calcolo-file-viewer .calcolo-file-table td {
            border: 1px solid #ccc;
            padding: 2px 4px;
            text-align: center;
        }

.stat {
    display: flex;
    justify-content: center;
    align-items: center;
}


.varianti-container {
    /*border: 1px solid red;*/
    overflow-x: auto;
}

.varianti-table {
}

    .varianti-table td, .varianti-table th {
        white-space: nowrap;
    }

.template-container-column {
    min-width: 350px;
    max-width: 500px;
    width: 100%;
}

.template-container {
    border: 1px solid #CCC;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .template-container .title {
        padding: 8px;
        border-bottom: 1px solid #CCC;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .template-container .list {
        flex: 1 1 auto;
        padding: 4px;
        overflow-y: auto;
    }

.template-item {
    margin-bottom: 4px;
    padding: 4px 6px;
    border: 1px solid #DDD;
    border-radius: 2px;
}

    .template-item .template-item-title {
        font-weight: bold;
        font-size: 11px;
    }


    .template-item .template-item-content {
        text-overflow: ellipsis;
        overflow: hidden;
        max-height: 90px;
        margin-bottom: 6px;
    }

        .template-item .template-item-content p {
            margin: 0px;
            padding: 0px;
        }

            .template-item .template-item-content p:empty {
                display: none;
            }

#modalTextEditorWithTemplate .ql-container {
    height: calc(100% - 42px) !important;
}

.table-info {
}

    .table-info td:first-child {
        width: 160px;
        white-space: nowrap;
        padding-right: 24px;
        color: #666;
    }

    .table-info a {
        background-color: transparent !important;
        padding: 0px;
    }

.td-nowrap {
    width: 1px;
    white-space: nowrap;
    padding-right: 24px !important;
}

.note-preview {
    display: flex;
    align-items: center;
    gap: 4px;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 26px;
}

    .note-preview > * {
        padding: 0px;
        margin: 0px;
    }

.riassunti {
    position: relative;
    display: flex;
    gap: 2px;
}

    .riassunti .badge {
        cursor: pointer;
    }

    .riassunti .riassunto-popper {
        display: none;
        background: #333;
        max-width: 50vw;
        color: white !important;
        padding: 6px 8px;
        font-size: 12px;
        border-radius: 4px;
        white-space: normal;
        font-weight: 500 !important;
        z-index: 9999999;
    }

        .riassunti .riassunto-popper * {
            color: white !important;
        }

        .riassunti .riassunto-popper[data-show] {
            display: block;
        }

        .riassunti .riassunto-popper p {
            margin: 0px;
            padding: 0px;
        }

.drag-handle {
    cursor: grab;
    margin-right: 16px;
    text-align: center;
}

    .drag-handle:active {
        cursor: grabbing;
    }

#dragHandles {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.font-weight-bold, b, strong {
    font-weight: bold !important;
}

.table-container {
    width: 100%;
    overflow-x: auto;
}

.table td.table-width-1 {
    width: 1px;
}

.flex-250px {
    display: flex;
    min-width: 250px;
    max-width: 250px;
}

.s2-250px .s2 {
    width: 250px !important;
}

.s2 .s2-inner .s2-inner-container .s2-inner-option {
    text-align: start;
}

.stats-table {
    margin-bottom: 16px !important;
}

.stats-table tbody tr td {
    height: 35px !important;
    white-space: nowrap !important;
}

/* #region Modal */

.modal-header-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-title {
    color: var(--bs-heading-color);
    font-size: 20px;
    font-weight: 500;
}

.modal-subtitle {
    color: #737d85;
    font-size: 14px;
    font-weight: 400;
}

/* #endregion */
