/* COMMON */
ul, ol {
    margin-bottom: 0;
}

.margin-r-10 {
    margin-right: 10px;
}

.margin-l-10 {
    margin-left: 10px;
}

.margin-l-5 {
    margin-left: 5px;
}

.margin-t-5 {
    margin-top: 5px;
}

.margin-t-10 {
    margin-top: 10px;
}


.please-wait {
    background: url('images/ajax_loader_small.gif') no-repeat;
    padding-left: 20px;
}

.alert {
    margin-bottom: 0;
    border-radius: 0 0 3px 3px;
}

.alert-success {
    border-color: #02A91E;
}

.callout.callout-success, .alert-success,
.label-success, .modal-success .modal-body {
    background-color: #17b76d !important;
}

.field-validation-error, .validation-summary-errors {
    color: red;
}

.field-validation-valid.warning {
    color: #fff;
    background-color: #f39c12;
    margin: 5px 0;
    display: block;
    padding: 5px;
    border-radius: 3px;
    border-left: 5px solid #c87f0a;
}

ul.common-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 15px;
}

.fa.true-icon {
    color: #007FCC;
    font-size: 20px;
}

.fa.false-icon {
    color: #D22D2D;
    font-size: 20px;
}

.new-item-notification {
    width: 25px;
    height: 25px;
    background-image: -webkit-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);
    background-image: -o-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);
    background-image: 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);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
    background-color: #dd4b39;
    display: inline-block;
    color: #fff;
    border-radius: 15px;
    line-height: 24px;
    text-align: center;
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
    margin-left: 10px;
}

    .new-item-notification span {
        font-size: 15px;
    }

.info-box {
    min-height: 106px;
}

.info-box-icon {
    min-height: 106px;
}

.btn-back-top {
    display: none;
    right: 40px;
    bottom: 40px;
    position: fixed;
    width: 61px;
    height: 48px;
}

    .btn-back-top::before {
        content: "";
        display: block;
        position: relative;
        left: 7px;
        top: 12px;
        width: 22px;
        height: 22px;
        border-right: 6px solid white;
        border-top: 6px solid white;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }

.dropdown-menu button {
    border: none;
    padding: 3px 20px;
    text-align: left;
}

.dropdown-menu li:hover {
    background: rgba(0,0,0,0.1);
}

    .dropdown-menu li:hover button {
        background-color: transparent !important;
    }

.scroll-wrapper {
    overflow-x: scroll;
}

/*DISCOUNT*/
.requirement-container {
    margin-bottom: 5px;
    margin-top: 5px;
    border: 1px dashed #8c949a;
    display: table;
}

    .requirement-container.requirement-group {
        border: none;
        border-left: 2px solid #8c949a;
    }

    .requirement-container .requirement-heading {
        padding: 7px 10px 3px 10px;
        line-height: 24px;
    }

    .requirement-container.requirement-group > .requirement-heading {
        height: 30px;
        line-height: 30px;
        display: table;
        background: #eeeeee;
        padding: 0px 2px 0px 10px;
    }

    .requirement-container .requirement-heading .btn-link {
        padding: 0 3px;
        margin-left: 50px;
        font-size: 15px;
        color: #367fa9;
        float: right;
        text-decoration: none;
    }

    .requirement-container.requirement-group > .requirement-heading .btn-link {
        padding: 3px 10px 3px 0px;
    }

    .requirement-container .requirement-body {
        padding: 10px 20px 8px 10px;
        min-height: 35px;
    }

    .requirement-container.requirement-group > .requirement-body {
        padding: 10px 0 5px 20px;
    }

    .requirement-container .requirement-product-names.filled {
        clear: both;
        max-width: 600px;
        padding-top: 5px;
    }

.requirement-data-buttons {
    margin-top: 5px;
}

.requirement-container .requirement-data-buttons {
    margin-top: 0;
    float: left;
}

.requirement-container .requirement-data-input {
    float: left;
    margin-right: 5px;
}

.requirement-container .requirement-label-col {
    width: auto;
}

.requirement-container .requirement-data-col {
    width: auto;
}

.requirement-container .requirement-data-buttons button {
    margin-top: 0;
}

.requirement-container .requirement-messages-col {
    margin-left: 0;
}

.interaction-type select {
    width: 70px;
    height: 26px;
    line-height: 25px;
    font-size: 12px;
    margin-top: 2px;
}

.panel-add-requirement {
    margin-top: 20px;
}

/*MODAL WINDOWS*/
.modal-content {
    text-align: left;
}

.modal-body {
    font-size: 14px;
}

/*override font-awesome styles*/
.fa {
    padding-right: 5px !important;
}

/* KENDO */
table.adminContent {
    border-collapse: collapse;
    color: #333;
    font-size: 14px;
    margin: 0;
    width: 100%;
    vertical-align: middle;
    text-align: left;
}

.k-button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: #f4f4f4;
    color: #444;
    border-color: #ddd;
}

.k-multiselect .k-button {
    white-space: normal;
}

.k-button:hover, .k-button:focus, .k-button.k-state-focused {
    background-color: #e7e7e7;
    background-image: none;
    color: #333;
    border-color: #adadad;
    text-decoration: none;
}

.k-button:active {
    color: #333;
    background-color: #e7e7e7;
    border-color: #adadad;
}

.k-button:focus:active:not(.k-state-disabled):not([disabled]) {
    box-shadow: none;
    -webkit-box-shadow: none;
}

.k-grid .k-button, .k-grid tbody td > .k-grid-delete, table .btn {
    margin: 2px;
}

.k-picker-wrap.k-state-default,
.k-numeric-wrap.k-state-default {
    border-radius: 0;
    border: none;
    height: 34px;
    padding-right: 23px;
    background: #fff;
}

.k-picker-wrap.k-state-hover {
    background: #fff;
}

.k-picker-wrap .k-select,
.k-numeric-wrap .k-select {
    border-radius: 0;
    border: none;
}

.k-numeric-wrap.k-state-default > .k-select {
    background-color: #fff;
    border: none;
    height: 34px;
    width: 22px;
    opacity: 1;
}

.k-picker-wrap.k-state-default > .k-select {
    background: #fff;
    border: 1px solid #d2d6de;
    height: 32px;
    width: 4.5em;
    padding-left: 1px;
    -moz-box-sizing: content-box;
}

.k-picker-wrap.k-state-hover > .k-select {
    border-color: #afafaf;
}

.k-picker-wrap .k-input,
.k-numeric-wrap .k-input {
    height: 26px;
    border-radius: 0;
    border: 1px solid #d2d6de;
    text-indent: 0.7em;
    color: #555;
    padding: 3px 0;
}

.k-picker-wrap.k-state-focused.k-state-selected,
.k-numeric-wrap.k-state-focused.k-state-selected,
td.k-state-focused.k-state-selected {
    -webkit-box-shadow: inset 0 0 3px 4px #5FA6D2;
    box-shadow: inset 0 0 3px 4px #5FA6D2;
}

.k-state-active, .k-state-active:hover,
.k-active-filter, .k-tabstrip .k-state-active {
    border-color: #c5c5c5 !important;
}

.k-state-selected,
.k-state-selected:link,
.k-state-selected:visited,
.k-list > .k-state-selected,
.k-list > .k-state-highlight,
.k-panel > .k-state-selected,
.k-ghost-splitbar-vertical,
.k-ghost-splitbar-horizontal,
.k-draghandle.k-state-selected:hover,
.k-scheduler .k-scheduler-toolbar .k-state-selected,
.k-scheduler .k-today.k-state-selected, .k-marquee-color {
    background-color: #3c8dbc;
    border-color: #3c8dbc;
}

.k-picker-wrap.k-state-focused,
.k-numeric-wrap.k-state-focused {
    border-color: #00c0ef;
    box-shadow: none;
    padding-bottom: 0;
}

.k-numerictextbox .k-link {
    height: 16px;
    border: 1px solid #d2d6de;
    border-radius: 0;
}

    .k-numerictextbox .k-link:hover {
        border-color: #afafaf;
    }

        .k-numerictextbox .k-link:hover + .k-link {
            border-top-color: #afafaf;
        }

.k-numeric-wrap .k-link + .k-link {
    margin-top: -1px;
    height: 15px;
    border-radius: 0;
}

.k-numeric-wrap.k-state-disabled,
.k-picker-wrap.k-state-disabled {
    border-radius: 0;
    border: none;
    opacity: 1;
    height: 34px;
}

    .k-numeric-wrap.k-state-disabled .k-input,
    .k-picker-wrap.k-state-disabled .k-input {
        background-color: #eee;
        cursor: not-allowed;
    }

.k-numerictextbox .k-link.k-state-selected {
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    background: #fff;
}

.k-numerictextbox .k-i-arrow-n,
.k-numerictextbox .k-i-arrow-s {
    position: absolute;
    left: 0px;
    font-size: 0;
    font-weight: 400;
    height: 17px;
    background: none;
    position: relative;
    top: 0px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 1;
}

.k-numerictextbox .k-select .k-i-arrow-n:before,
.k-numerictextbox .k-select .k-i-arrow-s:before {
    color: #444;
    font-family: 'Glyphicons Halflings';
    height: 17px;
    line-height: 17px;
    font-size: 9px;
}

.k-numerictextbox .k-link .k-i-arrow-n:before {
    content: "\e113";
}

.k-numerictextbox .k-link .k-i-arrow-s:before {
    content: "\e114";
}

.k-picker-wrap .k-select .k-i-calendar:before,
.k-picker-wrap .k-select .k-i-clock:before {
    font: normal normal normal 14px/1 FontAwesome;
    height: 17px;
    line-height: 17px;
}

.k-picker-wrap .k-i-calendar,
.k-picker-wrap .k-i-clock {
    background: none;
}

.k-calendar-container.k-group {
    padding: 0;
    border-radius: 0;
    background: #fff;
}

.k-calendar th {
    padding: .4em .45em .4em .8em;
}

.k-picker-wrap .k-i-calendar:before {
    content: "\f073";
}

.k-picker-wrap .k-i-clock:before {
    content: "\f017";
}

.k-datetimepicker .k-picker-wrap .k-icon {
    padding: 0 3px;
}

.ui-tooltip {
    z-index: 10005;
}

/* AdminLTE4: le regole .k-multiselect/.k-dropdown/.k-popup/.k-animation-container e tutto il
blocco delle grid e dei pager Kendo qui sotto sono state rimosse - Epic 5 ha convertito ogni grid/
multiselect/dropdown Kendo a Syncfusion EJ2 (confermato via grep, zero .kendoGrid(/
.kendoMultiSelect(/.kendoDropDownList( residui in Views/). Il blocco .k-button/.k-picker-wrap/
.k-numeric-wrap/.k-numerictextbox/.k-datetimepicker sopra resta invece, perche' alcuni campi
sono ancora Kendo (kendoDatePicker su Worksheets/DataLavori, kendoNumericTextBox/
kendoDatePicker sui filtri di ricerca di QueuedEmail/Log) - fuori scope per l'upgrade AdminLTE,
follow-up separato. Il campo Costo di Materiale/Superfice* invece e' stato convertito a
ej.inputs.NumericTextBox (rimosso sia bootstrap-touchspin che gli ultimi kendoNumericTextBox
residui, questi ultimi in 8 file completamente orfani - nessun controller/vista li
referenziava, resti di un vecchio schema di nomi mai ripulito). */

/* HEADER */
/* AdminLTE4: .main-header e' sparito (ora <nav class="app-header">, slim, senza logo - il logo
e' passato a .sidebar-brand nella sidebar), quindi le vecchie regole .main-header/.logo*
sono state rimosse invece di rinominate: non esiste piu' alcun elemento con quelle classi. */

/* SIDE BAR */
.sidebar-menu, .sidebar-menu > li.header {
    white-space: normal;
}

    .sidebar-menu .nav-treeview > li > a {
        padding: 5px 15px 5px 22px;
    }

/* Sottomenu aperto: la sidebar e' tutta dello stesso grigio scuro, quindi le voci interne non si
   distinguevano dal menu principale. Sfondo appena piu' chiaro (bianco all'11% di opacita', non bianco
   pieno: il testo e' chiaro e perderebbe contrasto) + barra di accento a sinistra col colore primario.
   Lo sfondo si imposta con la variabile di AdminLTE (--lte-sidebar-submenu-bg) invece che con una regola
   su .nav-treeview: AdminLTE la applica con la stessa specificita' e vincerebbe lei. Dichiarata su
   .sidebar-wrapper (piu' vicino ai figli di .app-sidebar) cosi' prevale sul valore del tema. */
.app-sidebar .sidebar-wrapper {
    --lte-sidebar-submenu-bg: rgba(255, 255, 255, .11);
}

.app-sidebar .sidebar-menu .nav-treeview {
    border-left: 3px solid var(--bs-primary, #0d6efd);
}

/* AdminLTE4: icona lente ora resa con un <i> posizionato in assoluto (vedi _Sidebar.cshtml)
invece della vecchia immagine di sfondo AdminLTE2 (images/search-icon.png), che si sovrapponeva
male al border-radius dell'input Bootstrap 5. Un input-group con input-group-text andava invece
a capo (l'input-group va in flex-wrap dentro la sidebar stretta), quindi si e' scartato. */
.admin-search-box {
    padding-top: .85rem;
    padding-bottom: .85rem;
    padding-right: 2.25rem;
}

.admin-search-icon {
    position: absolute;
    top: 50%;
    right: .75rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color, #6c757d);
    pointer-events: none;
}

/* AdminLTE4: .sidebar-form/.skin-blue e .navbar-custom-menu/.current-active-item non esistono
piu' nel markup (vedi _Sidebar.cshtml/_Header.cshtml/_Menu.cshtml) - regole rimosse invece di
rinominate, erano solo micro-tweak cosmetici (border-radius/altezza) non essenziali. */

/* NAV TABS */
.nav > li > a > img {
    margin-right: 8px;
    vertical-align: baseline;
}

.nav-tabs-custom {
    margin-bottom: 5px;
}

    /* AdminLTE4/Bootstrap5: i .panel sono diventati .card nelle view. In Bootstrap 5 cambia anche
       il markup delle tab: la classe "active" non sta piu' sul <li> ma sull'<a class="nav-link">,
       quindi i selettori "> .nav-tabs > li.active > a" non aggancerebbero piu' nulla (vedi
       HtmlExtensions.RenderBootstrapTabHeader, che genera il markup). */
    .nav-tabs-custom .tab-pane > .card {
        border: none;
        box-shadow: none;
    }

        .nav-tabs-custom .tab-pane > .card .card-body {
            padding: 15px 5px;
        }

    .nav-tabs-custom + .card, .card + .nav-tabs-custom {
        margin-top: 5px;
    }

    .nav-tabs-custom .nav-tabs-custom {
        border-bottom: 1px solid #ddd;
        box-shadow: none;
    }

    .nav-tabs-custom > .nav-tabs {
        border-bottom-color: #ddd;
    }

    .nav-tabs-custom > .tab-content {
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding-top: 15px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .nav-tabs-custom > .nav-tabs .nav-link.active {
        border-right: 1px solid #ddd !important;
        border-left: 1px solid #ddd !important;
    }

.nav-tabs-customer-statistics .chart, .nav-tabs-order-statistics .chart {
    height: 300px;
}

/* CONTENT HEADER */
/* AdminLTE4: .app-content-header non fissa piu' una font-size per il suo h1 (lo faceva
   AdminLTE2) - senza, eredita il default di Bootstrap 5 (2.5rem/40px), pensato per un titolo
   di pagina hero, non per l'intestazione compatta usata qui in ogni view. */
.app-content-header > h1 {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

    .app-content-header > h1 > small {
        color: #0076BB;
        font-weight: normal;
        margin-left: 6px;
    }

        .app-content-header > h1 > small .fa-arrow-circle-left {
            font-size: 14px;
            margin-right: 1px;
        }

.app-content-header .btn {
    margin-bottom: 5px;
}

.app-content-header .btn-group .dropdown-menu input,
.app-content-header .btn-group .dropdown-menu button,
.app-content-header .btn-group .dropdown-menu a {
    display: block;
    background: none;
    border: none;
    margin: 0;
    padding: 3px 20px;
    font-weight: 400;
    line-height: 1.42857143;
    color: #777;
    white-space: nowrap;
}

.app-content-header .float-end .dropdown-menu {
    right: 0;
    left: auto;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}

/* FORM ELEMENTS */
.form-horizontal .label-wrapper {
    display: table;
    float: right;
    min-height: 28px;
}

/* Usata quando l'etichetta deve stare SOPRA il campo su una riga a piena larghezza (es.
   Materiale/SottoMateriale in _AddEditMaterialeUtilizzatoModal.cshtml), invece che affiancata in
   una colonna stretta: senza questa il float:right di .label-wrapper sopra fa finire l'etichetta
   in alto a destra della riga invece che sopra il campo. */
.form-horizontal .label-wrapper-full {
    float: none;
    display: block;
}

    .form-horizontal .label-wrapper-full .label-wrapper {
        float: none;
        display: block;
    }

    .form-horizontal .label-wrapper .control-label {
        display: table-cell;
    }

    .form-horizontal .label-wrapper i.fa {
        width: 16px;
    }

        .form-horizontal .label-wrapper i.fa:before {
            position: absolute;
            top: 9px;
        }

.form-horizontal span.required {
    color: #ff2e2e;
    margin-left: 6px;
    font-size: 16px;
    font-weight: bold;
}

.form-horizontal .attributes select {
    width: 300px !important;
    max-width: 100%;
    border-radius: 0;
    border-color: #d2d6de;
    height: 34px;
}

.form-horizontal .attributes .input-group-required {
    width: 320px;
}

/*Worksheets/_AddEditMaterialeUtilizzatoModal: le descrizioni materiali sono spesso lunghe e il CSS
  di libreria Syncfusion (.e-dropdownbase .e-list-item) forza white-space: nowrap + text-overflow:
  ellipsis, troncandole con "..." indipendentemente dalla popupWidth impostata via JS - questa
  regola permette al testo di andare a capo (multi-riga) nelle righe del popup, cosi' resta leggibile
  per intero senza dover ricorrere al tooltip.*/
.e-materiale-dropdown-popup .e-list-item {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 30px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #eee;
}

.e-materiale-dropdown-popup .e-list-item:last-child {
    border-bottom: 0;
}

.form-horizontal .k-numerictextbox,
.form-horizontal .k-timepicker, .form-horizontal .k-datetimepicker,
.form-horizontal .k-datepicker {
    width: 300px !important;
    max-width: 100%;
    border-radius: 0;
    border-color: #d2d6de;
    height: 34px;
}

.tag-editor {
    border: 1px solid #d2d6de !important;
    line-height: 26px !important;
}

.form-text-row {
    padding-top: 6px;
}

.btn-search {
    margin-top: 10px;
    min-width: 150px;
    padding: 7px 10px;
    font-size: 18px;
}

.panel-search .form-control {
    max-width: 425px;
}

.panel-search .k-multiselect.k-header {
    max-width: 423px;
}

.panel-popup .btn-search {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.dropdown-toggle.bg-purple {
    border-left: 1px solid #AA89CE;
}

.input-group .input-group-btn .input-group-btn-hint {
    font-size: 14px;
    white-space: normal;
    max-width: 330px;
}

.custom-input-group.input-group-short .custom-input-group-btn,
.input-group.input-group-short .input-group-btn {
    width: auto;
}

.input-group.input-group-short .k-widget {
    margin-right: 10px;
}

.input-group.input-group-short .input-group-text {
    margin-right: 10px;
}

.input-group-required {
    width: 100%;
}

    /* AdminLTE4/Bootstrap5: l'asterisco "obbligatorio" e' ora un .input-group-text (in Bootstrap 5
       i figli di .input-group vanno diretti, .input-group-btn non esiste piu' - vedi
       HtmlExtensions.MyEditorFor). Va reso trasparente e senza bordo, altrimenti comparirebbe
       nel riquadro grigio dell'addon invece che come semplice asterisco rosso come prima. */
    .input-group-required .input-group-text.required {
        padding-left: 6px;
        padding-right: 0;
        background: transparent;
        border: none;
    }

    /* I widget Syncfusion EJ2 (es. DateTimePicker/DatePicker) si auto-inizializzano avvolgendo
       l'<input> originale in un proprio wrapper (.e-control-wrapper.e-input-group) che di default
       occupa tutta la larghezza disponibile. Dentro un .input-group Bootstrap (flex, nowrap di
       default) questo forza l'asterisco ".required" ad andare a capo sotto il campo invece di
       restare accanto. Restringendo il wrapper EJ2 con flex:1 e forzando flex-wrap: nowrap sul
       genitore, l'asterisco resta sulla stessa riga del controllo. */
    .input-group-required.input-group {
        flex-wrap: nowrap;
    }

        .input-group-required.input-group > .e-control-wrapper {
            flex: 1 1 auto;
            width: auto;
        }

/* Altezza uniforme dei campi nei moduli: i widget Syncfusion EJ2 (NumericTextBox, DropDownList, DatePicker,
   DateTimePicker, MultiSelect) sono alti ~32px, mentre i form-control/form-select Bootstrap e l'etichetta
   (.col-form-label) sono ~38px: senza questo l'etichetta cade ~3px sotto il centro del campo e, nelle
   righe con campi misti, i controlli risultano di altezze diverse. min-height e non height: il MultiSelect
   cresce con i tag selezionati. Misurato su pagina di prova con gli stessi CSS/JS dell'app. */
.form-horizontal .e-input-group.e-control-wrapper {
    min-height: 2.375rem;
}

input[type=file].form-control {
    height: auto;
}

.dropdown-menu a:hover {
    text-decoration: none;
}

.dropdown-menu > li > a > .fa {
    margin-right: 0;
}

/* AdminLTE4: rimossi i blocchi .editor-settings-modal-dialog e .store-scope-configuration -
   codice morto, confermato via grep che nessuna view usa quelle classi (erano gli unici punti
   rimasti a referenziare .panel-group/.panel-body/.panel-heading in questo file). */

/* PRODUCT EDIT/CREATE */
.attribute-picture-selection-block .checkbox {
    display: inline-block;
}

.attribute-picture-selection-block label {
    padding-left: 0;
    padding-right: 20px;
}

/* TINY MCE */
.mce-panel {
    border-color: #d2d6de !important;
}

.mce-container {
    max-width: 100%;
}

    .mce-container label {
        max-width: inherit;
    }

/* TABLES */
.table-bordered {
    border-collapse: separate;
    border-spacing: 0;
    border-color: #c5c5c5;
    border-left: none;
}

    .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
        border-color: #c5c5c5;
        border-style: solid;
        border-width: 0 0 0 1px;
    }

    .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td {
        text-align: left;
        overflow: hidden;
        border-style: solid;
        border-width: 0 0 1px 1px;
        padding: .5em .6em .4em .6em;
        font-weight: normal;
        white-space: normal;
        text-overflow: ellipsis;
        background-image: none,-webkit-linear-gradient(top,rgba(255,255,255,.6) 0,rgba(255,255,255,.0) 100%);
        background-image: none,-moz-linear-gradient(top,rgba(255,255,255,.6) 0,rgba(255,255,255,.0) 100%);
        background-image: none,-o-linear-gradient(top,rgba(255,255,255,.6) 0,rgba(255,255,255,.0) 100%);
        background-image: none,linear-gradient(to bottom,rgba(255,255,255,.6) 0,rgba(255,255,255,.0) 100%);
        background-position: 50% 50%;
        background-color: #e3e3e3;
    }

    .table-bordered tr:nth-child(even) {
        background-color: #f5f5f5;
    }

    .table-bordered tr:hover td {
        background-color: #e3e3e3;
    }

/* QQ */
.qq-upload-button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: #00a65a;
    border-color: #008d4c;
    float: left;
    margin-right: 5px;
}

.qq-upload-list {
    float: left;
}

    .qq-upload-list .qq-upload-success {
        margin-right: 5px !important;
    }

    .qq-upload-list li.qq-upload-success {
        background-color: #3c8dbc !important;
    }

/*order list statuses*/
.order-list span.order-status {
    padding: .2em .6em .3em;
    border-radius: .25em;
    color: #2e2e2e;
}

.order-list span.order-status-pending {
    background-color: #f39c12;
    color: #fff;
}

.order-list span.order-status-processing {
    background-color: #00c0ef;
    color: #fff;
}

.order-list span.order-status-complete {
    background-color: #00a65a;
    color: #fff;
}

.order-list span.order-status-cancelled {
    background-color: #dd4b39;
    color: #fff;
}

/*grid color statuses*/
span.grid-report-item {
    padding: .2em .6em .3em;
    border-radius: .25em;
    color: #2e2e2e;
}

    span.grid-report-item.yellow {
        background-color: #f39c12;
        color: #fff;
    }

    span.grid-report-item.blue {
        background-color: #00c0ef;
        color: #fff;
    }

    span.grid-report-item.green {
        background-color: #00a65a;
        color: #fff;
    }

    span.grid-report-item.red {
        background-color: #dd4b39;
        color: #fff;
    }

/*SETTINGS*/
.theme-selection-block .checkbox {
    float: left;
}

    .theme-selection-block .checkbox label {
        padding-left: 0;
        padding-right: 20px;
    }

        .theme-selection-block .checkbox label img {
            width: 175px;
        }

        .theme-selection-block .checkbox label span {
            display: block;
        }

            .theme-selection-block .checkbox label span input {
                margin: 0 5px 8px 0;
            }

/*advanced settings*/
.basic-settings-mode .advanced-setting {
    display: none !important;
}

.advanced-settings-mode .basic-setting {
    display: none !important;
}

.onoffswitch {
    position: relative;
    width: 130px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #367fa9;
    border-radius: 3px;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

    .onoffswitch-inner:before, .onoffswitch-inner:after {
        display: block;
        float: left;
        width: 50%;
        height: 32px;
        padding: 0;
        line-height: 32px;
        font-size: 14px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
    }

    .onoffswitch-inner:before {
        content: attr(data-locale-advanced);
        padding-left: 10px;
        background-color: #3c8dbc;
        color: #FFFFFF;
    }

    .onoffswitch-inner:after {
        content: attr(data-locale-basic);
        padding-right: 10px;
        background-color: #efefef;
        color: #3380ad;
        text-align: right;
    }

.onoffswitch-switch {
    display: block;
    width: 16px;
    margin: 6.5px;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 95px;
    border: 1px solid #367fa9;
    border-radius: 15px;
    transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}

/* THROBBER */
.throbber-header {
    font-size: 145%;
}

.throbber {
    display: none;
}

    .throbber .curtain {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #3e4d45;
        opacity: 0.9;
        filter: alpha(opacity=90);
        z-index: 9999;
    }

    .throbber .curtain-content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
    }

        .throbber .curtain-content div {
            text-align: center;
            padding: 250px;
            color: #FFF;
        }
/*AJAX loading*/
#ajaxBusy {
    display: none;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100000;
}

    #ajaxBusy span {
        background: url(images/ajax-loading.gif) no-repeat;
        width: 40px;
        height: 40px;
        float: right;
        margin: 9px 9px 0px 0px;
    }

@media (max-width: 1200px) {
    /*FORM ELEMENTS*/
    .form-control {
        margin-bottom: 3px;
    }
    /* KENDO */
    .k-datepicker, .k-timepicker, .k-datetimepicker, .k-numerictextbox {
        margin-bottom: 3px;
    }
}

@media (max-width: 992px) {
    /*FORM ELEMENTS*/
    .form-horizontal .label-wrapper {
        float: none;
        margin-bottom: 3px;
        margin-top: 5px;
    }

    .form-horizontal .panel-popup .label-wrapper {
        float: right;
    }

        .form-horizontal .panel-popup .label-wrapper .control-label {
            padding-top: 0;
        }

    .panel-search .form-control {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    /* COMMON */
    .modal-dialog {
        margin-top: 30px;
    }

    /* FORM ELEMENTS */
    .form-horizontal .panel-popup .label-wrapper {
        float: left;
    }
}

.login-version {
    font-size: 25px;
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    color: #3c8dbc;
}

/*Search block collapse*/
.search-row {
    padding-left: 50px;
    padding-right: 30px;
    position: relative;
    cursor: pointer;
}

.panel-search .search-body.closed {
    display: none;
}

.panel-search .search-body {
    display: block;
    margin-top: 15px;
}

.icon-search {
    position: absolute;
    left: 0;
    top: 3px;
    text-align: center;
    width: 50px;
}

    .icon-search i {
        font-size: 18px;
        padding-right: 0 !important;
    }

.icon-collapse {
    position: absolute;
    right: 0;
    top: 3px;
    text-align: center;
    width: 42px;
}

    .icon-collapse i {
        font-size: 20px;
        padding-right: 0 !important;
        font-weight: bold;
    }

.search-text {
    font-size: 18px;
}


.form-control-feedback-pointer {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    pointer-events: painted;
    cursor: pointer;
}

.captcha-box {
    text-align: center;
    line-height: 0; /*firefox line-height bug fix*/
}

    .captcha-box > div {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
    }

    .captcha-box input {
        height: auto;
    }
/* AdminLTE4: pagine di autenticazione ausiliarie (recupero/reset password ed esiti), che usano
   le classi .login-page/.login-box native di AdminLTE4. Login.cshtml ha un layout suo
   (split-screen, CSS inline sotto .ws-login); qui basta allineare il colore del pulsante al blu
   del brand, altrimenti resterebbe il blu di default di Bootstrap. Nota: non basta ridefinire
   --bs-primary, perche' adminlte.min.css e' compilato con i colori gia' risolti in variabili
   per-componente (.btn-primary{--bs-btn-bg:#0d6efd}, valore letterale). */
.login-page .btn-primary {
    background-color: #3c8dbc;
    border-color: #367fa9;
}

    .login-page .btn-primary:hover,
    .login-page .btn-primary:focus,
    .login-page .btn-primary:active {
        background-color: #367fa9;
        border-color: #2d6a8a;
    }

/* AdminLTE4: la .small-box esiste ancora, ma il pacchetto NON porta piu' alcuna regola per il
   suo elemento .icon (verificato: nessun selettore ".small-box .icon" in adminlte.min.css).
   Senza, l'icona resta un glifo minuscolo in linea, in basso a sinistra, invece del watermark
   grande sulla destra che caratterizza queste tile. Ripristinato qui, sulla falsariga di come
   lo definiva AdminLTE. Il .inner va portato sopra l'icona, altrimenti il watermark coprirebbe
   numero ed etichetta. */
.small-box > .inner {
    position: relative;
    z-index: 1;
}

.small-box > .icon {
    position: absolute;
    top: 4px;
    right: 12px;
    z-index: 0;
    font-size: 68px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.15);
    transition: transform .25s linear;
    pointer-events: none;
}

    /* mystyles.css applica .fa{padding-right:5px !important} a tutte le icone: qui sfalserebbe
       il watermark rispetto al bordo destro. */
    .small-box > .icon .fa {
        padding-right: 0 !important;
    }

.small-box:hover > .icon {
    transform: scale(1.12);
}

/*AdminLTE4: la freccia di espandi/comprimi riga (DetailRow di EJ2 - usata per la lista attributi
  espandibile di Materiale/Sottomateriali) risultava poco visibile. EJ2 la renderizza correttamente
  come <a class="e-icons e-icon-g(right|down)arrow"> (verificato nel sorgente), ma probabilmente
  qualche reset piu' generico dell'app sui link <a> ne offuscava font-family/colore. Espliciti qui
  per garantirne la visibilita' indipendentemente da altre regole con priorita' maggiore.*/
.e-grid .e-detailrowcollapse .e-icons,
.e-grid .e-detailrowexpand .e-icons {
    font-family: "e-icons" !important;
    font-size: 16px;
    color: #367fa9;
}

/*La vera causa (trovata ispezionando il DOM in DevTools, non piu' per tentativi): in
  table-layout:fixed e' il <col> del colgroup a determinare la larghezza reale della colonna, non
  la cella <td>/<th> - impostare width sulla cella (come sopra) non ha alcun effetto sul layout.
  Il <col class="e-detail-intent"> della colonna freccia risultava a "width: 1px" (stile inline
  assegnato via JS da EJ2), schiacciando la colonna e facendo scivolare "Codice" sopra la freccia.
  Serve !important per avere priorita' sullo stile inline (un !important in foglio di stile vince
  su uno stile inline non-important, per le regole standard della cascata CSS).*/
.e-grid col.e-detail-intent {
    width: 30px !important;
}