@import url('fontawesome-free-6.7.2-web/css/all.css');

/* CSS base */
html, body {
    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
}

html, body {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.button-link {
    text-decoration: unset;
}

.footer-link {
    color: #555;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
}

    .title.title-secondary {
        padding-top: 0.313rem;
        padding-bottom: 0;
        color: var(--bs-secondary-color);
    }

.title-header-text {
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 600;
    letter-spacing: 0rem;
    padding: 0.3125rem 0;
}

.title-content-text {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2.5rem;
    letter-spacing: 0rem;
}

.main-content {
    display: flex;
    justify-content: start;
    align-items: start;
    height: 100%;
    width: 100%;
    background-color: #eee;
    overflow: auto; /* Necessario in Dashboard ... potrebbe interferire in altre parti dell'applicazione */
}

.block-content {
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: 100%;
    padding: 20px;
}


.or {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .or .or-line {
        border-bottom: 1px solid var(--bs-body-color);
        width: 100%;
        opacity: 0.2;
    }

    .or .or-text {
        padding: 0 0.625rem 0px 0.625rem;
        font-size: 0.75rem;
        line-height: 1.125rem;
        color: var(--bs-body-color);
        opacity: 0.7;
    }

.links-area {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: 0.625rem;
}

.links-container {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

    .links-container .dot {
        height: 0.3125rem;
        width: 0.3125rem;
        margin: 0 0.1875rem;
        border-radius: 50%;
        background-color: var(--bs-body-color);
        opacity: 0.7;
    }

.manage-layout {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    height: 100%;
    border-top: 2px solid white;
}

.info-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.15;
    background: var(--bs-primary);
    z-index: -1;
}

.info-message {
    padding: 0.625rem 1rem 0.625rem 1rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .info-message.info-panel {
        margin-bottom: 0.625rem;
    }

.manage-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.large-input {
    height: 4.3125rem;
    font-size: 1.875rem;
}

.title-content-text-secondary {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.button-group {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

.confirm-button {
    margin-top: 0.3125rem;
}

.display-desktop {
    display: block !important;
}

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

.icon-external-provider {
    width: 1rem;
    height: 1rem;
}

.icon-google {
    background-image: url("/images/account/providers/google-logo.svg")
}

.icon-facebook {
    background-image: url("/images/account/providers/facebook-logo.svg")
}

.icon-microsoft {
    background-image: url("/images/account/providers/microsoft-logo.svg")
}

.icon-twitter {
    background-image: url("/images/account/providers/x-logo.svg")
}

.icon-apple {
    background-image: url("/images/account/providers/apple-logo.svg")
}

@media (max-width: 768px) {
    .display-desktop {
        display: none !important;
    }

    .display-mobile {
        display: block !important;
    }
}

/*********************************/
/* Personalizzazioni Trend Flexy */
:root {
    /* Variabili predefinite */
    /* SizeMode.Large */
    --tabs-default-height: 44px;
    --footer-default-height: 26px;
    /* SizeMode.Medium */
    --tabs-default-height-md: 41.333px;
    --footer-default-height-md: 26px;
    /* SizeMode.Small */
    --tabs-default-height-sm: 37.333px;
    --footer-default-height-sm: 26px;
}

.unselectable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/* Tasto di svuotamento delle caselle di input */
.dxbl-text-edit > .dxbl-btn.dxbl-edit-btn-clear:not(.dxbl-disabled):not(:disabled):hover > svg.dxbl-image {
    color: var(--dxbl-text-edit-clear-btn-hover-color, var(--dxbl-image-color, white));
}

/* In Sidemenu imposta la modalità ellipsis su tutte le voci */
.dxbl-menu.dxbl-menu-vertical .dxbl-menu-item-list > .dxbl-menu-list-item > .dxbl-menu-item > .dxbl-btn {
    width: 100%;
}

.dxbl-menu.dxbl-menu-vertical .dxbl-menu-item-list > .dxbl-menu-list-item > .dxbl-menu-item > .dxbl-btn > .dxbl-menu-item-text-container {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Elimina qualsiasi cornice dalle celle delle Grid in modalità EditRow e EditCell */
table .dxbl-grid-editor-inplace-container * {
    outline: 0 !important;
    box-shadow: none;
}

.dxbl-disabled {
    filter: grayscale(100%);
}

.hidden {
    display: none !important;
}

.tfx-grid .dxbl-grid-table > tbody > .dxbl-grid-empty-row {
    background-color: #eee;
}

.dxbl-btn:not(.dxbl-disabled):not(:disabled):hover {
    color: #555;
}

/* Validation message */
.summaryclass {
    background-color: #fcc;
    margin-bottom: 0 !important;
}

.validation-summary-container {
    margin: 0;
    padding: 2px 5px;
    max-height: 100px;
    overflow: auto;
    border-radius: 0;
}

    .validation-summary-container.summary-hidden {
        display: none;
    }

.validation-message {
    font-size: 0.9rem;
    font-style: italic;
    list-style-type: none;
    padding: 2px 0;
    border-bottom: 1px dotted #000;
    color: var(--bs-danger-text-emphasis);
}

    .validation-message:last-child {
        border-bottom: 0;
    }

.dxbl-grid-edit-form .validation-summary-container {
    margin: -16px -15px 15px -15px;
}

/* Bottom right placeholder */
.bottom-right-placeholder input::-webkit-input-placeholder {
    font-size: 0.8rem;
    text-align: right;
    position: relative;
    transform: translateY(30%);
}

.bottom-right-placeholder input::-moz-placeholder {
    font-size: 0.8rem;
    text-align: right;
    position: relative;
    transform: translateY(30%);
}

.bottom-right-placeholder input:-ms-input-placeholder {
    font-size: 0.8rem;
    text-align: right;
    position: relative;
    transform: translateY(30%);
}

.bottom-right-placeholder input::placeholder {
    font-size: 0.8rem;
    text-align: right;
    vertical-align: bottom;
    position: relative;
}

/* Impostazione icone nei context-menu */
.dxbl-context-menu-item .dxbl-image {
    min-width: 20px;
    display: flex;
    justify-content: center;
}

/* Disattivato per evitare doppia icona in DxGrid */
.dxbl-icon-set-fluent {
    display: none;
}

.dxbl-icon-set-default {
}

/* Elimina il tasto predefinito del browser di svuotamento dei campi input */
input[type="search"]::-webkit-search-cancel-button {
    display: none; /* Per i browser basati su WebKit (Chrome, Safari) */
}

input[type="search"]::-ms-clear {
    display: none; /* Per Internet Explorer */
}

/* Altre impostazioni comuni */
.dxbl-text-edit > .dxbl-btn.dxbl-edit-btn-clear > .dxbl-image {
    background-color: transparent;
}

/* È stata dimezzata la dimensione del tasto di chiusura di un tab */
.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item > .dxbl-tabs-close-button svg,
.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item > .dxbl-tabs-close-button svg {
    min-width: 0.5rem;
    min-height: 0.5rem;
}

.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item > .dxbl-tabs-close-button,
.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item > .dxbl-tabs-close-button {
    background: none;
    visibility: hidden;
}

.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li:hover > .dxbl-tabs-item > .dxbl-tabs-close-button,
.dxbl-tabs > .dxbl-tabs-tablist > ul > li:hover > .dxbl-tabs-item > .dxbl-tabs-close-button {
    visibility: unset;
}

/* Impostazioni DxGrid */
.dxbl-grid .dxbl-grid-table > thead > tr > th.dxbl-grid-fixed-cell:not(.dxbl-grid-empty-cell) {
    background-color: var(--dxbl-grid-header-bg) !important;
}

/* Impostazioni Grid Toolbar */
.dxbl-grid > .dxbl-grid-toolbar-container,
.dxbl-grid > .dxbl-grid-top-panel {
    box-sizing: border-box;
    min-height: unset;
    padding: 0;
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 5px;
}

    .dxbl-grid > .dxbl-grid-top-panel > .dxbl-grid-group-panel-container .dxbl-grid-header {
        background-color: #ddd;
        margin: 5px;
        padding: 5px;
    }

    .dxbl-grid > .dxbl-grid-top-panel > .dxbl-grid-group-panel-container {
        padding: 0;
        display: flex;
        flex-direction: row;
        gap: 5px;
    }

    .dxbl-grid > .dxbl-grid-top-panel .dxbl-grid-search-box-container {
        padding: 0px;
    }

    .dxbl-grid > .dxbl-grid-toolbar-container dxbl-toolbar-item:not(.toolbar-search-box) .dxbl-btn {
        border-radius: 0;
        padding: 0px;
    }

/* Impostazioni predefinite Main Tabs */
.main-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    height: calc(100vh - var(--footer-default-height));
}

    .main-tabs.medium {
        height: calc(100vh - var(--footer-default-height-md));
    }

    .main-tabs.small {
        height: calc(100vh - var(--footer-default-height-sm));
    }

.dxbl-tabs-tablist {
    height: 100%;
    min-height: unset;
}

.dxbl-fl-group,
.dxbl-fl .dxbl-fl-gd,
.dxbl-fl .dxbl-fl-gt {
    margin: 0;
    padding: 0 !important;
}

.dxbl-tabs-item {
    position: relative;
}


.tabs-main-content {
    height: calc(100vh - var(--footer-default-height) - var(--tabs-default-height));
    overflow: hidden;
    display: flex;
}

    .tabs-main-content.medium {
        height: calc(100vh - var(--footer-default-height-md) - var(--tabs-default-height-md));
    }

    .tabs-main-content.small {
        height: calc(100vh - var(--footer-default-height-sm) - var(--tabs-default-height-sm));
    }

/* Impostazione grafiche per tutti i tab */
.dxbl-group,
.dxbl-group.expanded,
.dxbl-group.expanded .dxbl-group-header {
    border-radius: 0;
}

    .dxbl-group.expanded {
        border-color: var(--bs-primary);
        border-top-width: 0;
        border-bottom-width: 0;
        border-right-width: 0;
        border-left-width: 1px;
    }

        .dxbl-group.expanded .dxbl-group-header {
            border-left: 3px solid var(--bs-primary);
        }

.dxbl-tabs-item.dxbl-active {
    border-radius: 0 !important;
    border-top: 1px solid #fff !important;
    border-left: 1px solid #fff !important;
    border-right: 1px solid #fff !important;
    border-bottom: 3px solid var(--bs-primary) !important;
    box-sizing: border-box;
}

.dxbl-tabs-item:hover {
    border-radius: 0 !important;
    border-top: 1px solid #fff !important;
    border-left: 1px solid #fff !important;
    border-right: 1px solid #fff !important;
    border-bottom: 3px solid #aaa !important;
    box-sizing: border-box;
}

.dxbl-tabs-item.unsaved:before {
    font-family: "FontAwesome";
    content: "\f111";
    position: absolute;
    top: 2px;
    left: 4px;
    color: #c00;
    font-size: 10px;
}

/* Tab position left */
.dxbl-tabs.dxbl-tabs-left .dxbl-tabs-item.dxbl-active,
.dxbl-tabs.dxbl-tabs-left .dxbl-tabs-item:hover {
    border-radius: 0 !important;
    border-top: 1px solid #fff !important;
    border-left: 0;
    border-right-width: 3px !important;
    border-right-color: #c00 !important;
    border-bottom: 1px solid #fff !important;
}

/* Necessario in Account/Manage */
.dxbl-tabs.dxbl-tabs-left {
    --dxbl-tabs-tab-width: 100%;
    flex-direction: row;
}

.dxbl-tabs .dxbl-tabs-content-panel .dxbl-tabs-content {
    overflow: auto;
    background-color: #eee;
}

.dxbl-tabs > .dxbl-tabs-tablist.dxbl-tabs-tablist-scrollable {
    display: flex;
    height: auto;
    width: calc(100% - 50px);
    border: 0;
}

.dxbl-tabs.dxbl-tabs.dxbl-tabs-left > .dxbl-tabs-tablist.dxbl-tabs-tablist-scrollable {
    width: fit-content;
}

.dxbl-tabs.dxbl-tabs.dxbl-tabs-left > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li,
.dxbl-tabs.dxbl-tabs.dxbl-tabs-left > .dxbl-tabs-tablist > ul > li {
    border-right: 1px solid #eee;
}

/* Impostazioni per PopupEditForm - Accordion */
.dxbl-group:not(.expanded):not([is-animating]) > .dxbl-group-header {
    border-radius: 0;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup:not(.dxbl-popup-resized):not(.dxbl-popup-fixed-width) {
    max-width: 80% !important;
    max-height: 80% !important;
    position: absolute;
    top: auto;
    left: auto;
    overflow: hidden;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-body {
    padding: 0;
    overflow: auto;
    margin: 0;
}

/* Impostazioni per PopupEditForm - Tabs */
.dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-fl .dxbl-fl-tab-content {
    padding-bottom: 30px;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-fl-group,
.dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-fl .dxbl-fl-gd,
.dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-fl .dxbl-fl-gt,
.dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-fl .dxbl-row {
    padding: 0;
    margin: 0;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-fl:last-child {
    padding-bottom: 5px;
}
.dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-fl-group:last-child .dxbl-group {
    border-bottom: 0;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-modal-body {
    display: flex;
    flex-direction: column;
}

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-modal-body > .dxbl-grid-popup-edit-form {
        height: 100%;
    }

        .dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-modal-body > .dxbl-grid-popup-edit-form > form {
            height: 100%;
        }

            .dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-modal-body > .dxbl-grid-popup-edit-form > form .dxbl-fl.grid-popup-edit.tabs {
                height: 100%;
            }

                .dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-modal-body > .dxbl-grid-popup-edit-form > form .dxbl-fl.grid-popup-edit.tabs .dxbl-row {
                    height: 100%;
                }

                    .dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-modal-body > .dxbl-grid-popup-edit-form > form .dxbl-fl.grid-popup-edit.tabs .dxbl-row .dxbl-fl-gt {
                        height: 100%;
                    }

                        .dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-modal-body > .dxbl-grid-popup-edit-form > form .dxbl-fl.grid-popup-edit.tabs .dxbl-row .dxbl-fl-gt .dxbl-tabs.dxbl-tabs-top {
                            display: flex;
                            flex-direction: column;
                            height: 100%;
                        }

                            .dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-modal-body > .dxbl-grid-popup-edit-form > form .dxbl-fl.grid-popup-edit.tabs .dxbl-row .dxbl-fl-gt .dxbl-tabs.dxbl-tabs-top .dxbl-tabs-content-panel {
                                flex: 1;
                                overflow: auto;
                            }
/* Impostazioni per PopupEditForm - Tabs */


/* Impostazioni comuni DxGrid */
.dxbl-grid .dxbl-grid-table > thead > tr,
/*.dxbl-grid .dxbl-grid-table > tbody > tr,*/
.dxbl-grid .dxbl-grid-table > tfoot > tr {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Classi di configurazione del pannello di accesso rapido alle app */
.dxbl-dropdown-dialog.dropdown-app-panel {
    background-color: #fafafa !important;
}
    .dxbl-dropdown-dialog.dropdown-app-panel.dxbl-dropdown-scrollable > .dxbl-dropdown-body {
        padding: 8px !important;
    }
    .dxbl-dropdown-dialog.dropdown-app-panel .search-app-box {
        width: 100%;
    }

        .dxbl-dropdown-dialog.dropdown-app-panel .search-app-box button[id='all-app-combo-button'] {
            color: var(--bs-primary);
            font-size: 150%;
        }

    .dxbl-dropdown-dialog.dropdown-app-panel .panel-gridlayout {
    }

        .dxbl-dropdown-dialog.dropdown-app-panel .panel-gridlayout .panel-title {
            margin-top: 30px;
        }

        .dxbl-dropdown-dialog.dropdown-app-panel .panel-gridlayout.first .panel-title {
        }

        .dxbl-dropdown-dialog.dropdown-app-panel .panel-gridlayout .panel-cards {
            display: flex;
            flex-direction: row;
            gap: 0.5rem;
        }

            .dxbl-dropdown-dialog.dropdown-app-panel .panel-gridlayout .panel-cards .dxbl-btn {
                min-height: 100px !important;
                min-width: 100px !important;
                display: flex;
                flex-direction: column;
                color: var(--bs-text);
                border: 1px solid #555;
                line-height: normal;
            }
                .dxbl-dropdown-dialog.dropdown-app-panel .panel-gridlayout .panel-cards .dxbl-btn:hover {
                    color: white;
                }
                .dxbl-dropdown-dialog.dropdown-app-panel .panel-gridlayout .panel-cards .dxbl-btn .dxbl-btn-icon {
                    font-size: 1.6rem;
                    opacity: 0.6;
                }
                .dxbl-dropdown-dialog.dropdown-app-panel .panel-gridlayout .panel-cards .dxbl-btn .dxbl-btn-caption {
                    font-size: 0.9rem;
                    margin-left: 0;
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

/* Classi personalizzate per input noborder, nooutline, borderbottom, focus:background-color */
.dxbl-btn-group-right {
    background: transparent;
}

.dxbl-text-edit {
    border: 0px;
    border-radius: 0;
    border-bottom: 2px solid #ccc !important;
    background: transparent;
}

    .dxbl-text-edit.valid.modified:not([type=checkbox]) {
        border-bottom: 2px solid #528556 !important;
    }

    .dxbl-text-edit.invalid {
        border-bottom: 2px dotted #b93f46 !important;
    }

    .dxbl-text-edit:focus-within {
        background-color: #fff0f0 !important;
        outline: 0 !important;
        border: 0 !important;
        border-bottom: 2px solid var(--bs-primary) !important;
        box-shadow: none;
    }

.dxbl-spin-btn-inc,
.dxbl-spin-btn-dec,
.dxbl-edit-btn-dropdown,
.dxbl-btn-group.dxbl-btn-group-right {
    border: 0;
    background: transparent;
}

/* Required field */
.required-field label:after {
    font-family: "FontAwesome";
    content: "\f111";
    color: #c00;
    font-size: 35%;
    margin-left: 4px;
    vertical-align: super;
}

/* Form Help */
.form-help-container {
    background-color: #f6f6f6;
    padding: 15px;
}
.form-top-help-container {
    background-color: #f6f6f6;
    padding: 15px;
}

/* EditMode.PopupEditForm */
.content-container {
    width: 100%;
}
.child-table-container {
    padding: 0;
    margin: 0;
}

@media (max-width: 768px) {

}