@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url(../fonts/bootstrap-icons-1.8.0/bootstrap-icons.css);
@import url(_reset.css) layer(reset);
@import url(_devexpress.css) layer(devexpress);
@import url(_bootstrap.css) layer(bootstrap);
@import url(_base.css) layer(base);
@import url(_utils.css) layer(utils);
@import url(_layout.css) layer(layout);
@import url(_components.css) layer(components);
@import url(_refactoring.css) layer(refactoring);

@layer reset, devexpress, bootstrap, base, utils, layout, components, refactoring;

body {
    font-family: 'Inter' !important;
    background-color: var(--blue-100);
    color-scheme: light;
    scroll-margin: 3rem;
}

#modalSuccess,
#modalError,
#modalWarning {
    z-index: 1800 !important;
}

.dialog-loader {
    padding: 2rem;
}

#todoModal,
#modalPromiseDialog {
    z-index: 1616;
}

.modal-backdrop~.modal-backdrop {
    z-index: 1615;
}

.modal-backdrop~.dx-overlay-wrapper {
    z-index: 1616 !important;
}

.offcanvas~.dx-overlay-wrapper {
    z-index: 1616 !important;
}

#modalHotelPartecipante.show~.modal-backdrop {
    z-index: 1615;
}

.dx-treeview-item-with-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0;
}

.dx-treeview-node .dx-checkbox {
    order: 0;
    margin: 0;
    position: absolute;
    left: 0.25rem
}

.dx-datagrid-column-chooser.dx-datagrid-column-chooser-mode-select .dx-datagrid-column-chooser-list .dx-treeview-node .dx-treeview-item,
.dx-datagrid-column-chooser.dx-datagrid-column-chooser-mode-select .dx-datagrid-column-chooser-plain .dx-treeview-node .dx-treeview-item {
    -webkit-padding-start: 2rem;
    padding-inline-start: 2rem;
    flex: 1;
}

.todo-container-list {
    padding: 0.25rem;
    border: 1px solid var(--default-border-color);
    border-radius: 0.25rem;
    margin: 0rem 1rem 1rem 1rem;
    flex: 1;
    display: flex;
    gap: 0.25rem;
    flex-direction: column;
    overflow: auto;
}

.todo-container-list .placeholder-area {
    flex: 1;

}

.card-todo {
    transition: 0.3s ease
}

/* #region notifiche */

.todo-actions {
    margin-inline: 1rem;
    margin-block: 0.5rem;
}

.todo-actions p {
    flex: 1
}

.toast-wrapper {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 10000;
}

.toast-wrapper .toast {
    margin: 0.5rem;

    border-radius: 0.25rem;
    border: 1px solid var(--default-border-color);
    box-shadow: 0 0.5rem 1rem 0 var(--neutral-300);
    background-color: white;
    width: min(calc(100vw - 1rem), 20rem)
}

.toast-wrapper .toast.show {
    pointer-events: all;
}


.toast-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.125rem 0.125rem 0.125rem 0.75rem;
    margin: unset;
}

.toast-body {
    font-size: 1rem;
    padding: 0.5rem 0.75rem 0.75rem 0.75rem
}


/* #endregion */

/* #region login page */

.login-container {
    align-items: center;
    justify-content: center;
    --background-wrapper: white;
    color: var(--neutral-600);
}

.login-container #btnLogin {
    margin-block: 1.5rem 2rem;
    min-width: 10rem;
}

.login-logo {
    max-height: 10rem;
    margin-block-end: 1.5rem;
    aspect-ratio: 1;
}

.login-container .fields-group {
    width: 100%;
}

.login-container>.wrapper-padding {
    padding: 2rem clamp(1rem, 10vw, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 0.875rem;
}

.dialog-reset {
    text-wrap: balance;
    margin-block-end: 0.5rem;
}

.dialog-reset .fields-group {
    margin-block-start: 1.5rem;
}

.dialog-more {
    text-align: center;
    color: var(--neutral-600);
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 1.5rem;
}

/* #endregion login page */

/* #region pagina evento  */

.aside-cover {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.aside-cover .aside-background {
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: blur(0.5rem);
    z-index: 0;
    transform: scale(1.25);
    opacity: 0.7;
}

.aside-cover .aside-thumbnail {
    margin: 1rem;
    max-height: 6rem;
    max-width: 100%;
    border: 1px solid var(--default-border-color);
    z-index: 1;
    position: relative;
    border-radius: 0.25rem;
    object-fit: cover;
}

.aside-type {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    display: block;
}

.aside-type.secondario {
    color: white;
    background-color: var(--blue-600);
}

.aside-type.singolo {
    color: white;
    background-color: var(--error-600);
}

.aside-type.progetto {
    color: white;
    background-color: var(--neutral-600);
}

#btnAccordionInfoAside {
    margin: 0 1rem 1rem 1rem;
    align-self: flex-start;
}

.aside-titolo {
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.aside-titolo>.btn {
    font-size: 0.75rem;
}

.aside-item {
    background-color: white;
    color: var(--blue-900);
    padding: 0.75rem 1rem;
    margin-inline: 1rem;
    border-radius: 0.125rem;
    width: calc(100% - 2rem);
    display: grid;
}

.aside-item:not(.field) {
    gap: 0.25rem;
}

.aside-item:last-child {
    margin-block-end: 1rem;
}

.aside-masonry .fields-list>.tag,
.aside-masonry .fields-list>.btn {
    margin-inline: 1rem !important;
}

.aside-masonry .fields-list>.btn {
    margin-block: 0.5rem
}

/* .default-masonry {
    container: masonry / inline-size;
} */

.masonry-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1rem;
    width: 100%;
}

/* @media (min-width: 30rem) and (hover: hover) and (pointer: fine) {
    .default-masonry {
        padding-inline: 3.75rem 0;
    }
} */

/* #accordionInfoAside {
    margin-bottom: 0.25rem
} */

.aside-masonry {
    background-color: var(--blue-050);
    overflow: hidden auto;
    --back-scrollbar: var(--blue-050);
    --thumb-back: var(--blue-200);
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 0.25rem;
    margin-block-start: 1rem;
    border: 1px solid var(--blue-200);
    align-self: start;
    overflow: auto;
}

@container mainContainer (width > 50rem) {
    .masonry-container {
        grid-template-columns: 22rem minmax(0, 1fr);
    }

    #btnAccordionInfoAside {
        display: none;
    }

    #accordionInfoAside {
        margin-bottom: 0rem
    }

    .aside-masonry {
        margin-block: 1rem;
        max-height: calc(var(--viewport-height, 100vh) - 2rem);
    }

    .masonry-container {
        height: var(--viewport-height, 100vh);
        overflow: hidden;
    }
}



.evento-dashboard {
    container: evento-dashboard / inline-size;
}

.evento-dashboard>.wrapper-padding {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.banner-principale {
    grid-column: 1 / 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
    align-items: flex-start;
}

.banner-principale .btn {
    font-size: 0.875rem;
}

@container evento-dashboard (width > 50rem) {
    .evento-dashboard>.wrapper-padding {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .banner-principale {
        grid-column: 1 / span 2;
    }

}

#mapEventoScheda {
    width: 100%;
    height: 10rem;
    background-color: white;
    margin-block-end: 1em;
    border-radius: 0.125rem;
}

.evento-secondario-list {
    container: evento-secondario-list / inline-size;
}

.evento-secondario-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.evento-secondario-item .field {
    flex: 1 1 30rem;
}

@container evento-dashboard (width > 30rem) {
    .evento-secondario-item {
        flex-wrap: nowrap;
    }
}

.area-placeholder {
    background-color: var(--background-area, white);
    color: var(--color-area, var(--neutral-700));
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.25rem;
}

.area-placeholder .btn {
    font-size: 0.875rem;
    margin-block-start: 0.5rem;
}

.partecipanti-stat {
    padding: 0.5rem 0.75rem;
    background-color: var(--background-stat, white);
    color: var(--color-stat, var(--neutral-800));
    border-radius: 0.125rem;
}

.partecipanti-stat.success {
    --background-stat: var(--success-100);
    --color-stat: var(--success-800);
}

.partecipanti-stat.error {
    --background-stat: var(--error-200);
    --color-stat: var(--error-800);
}

.partecipanti-stat.pending {
    --background-stat: var(--blue-100);
    --color-stat: var(--blue-900);
}

.partecipanti-stat.neutral {
    --background-stat: var(--neutral-200);
    --color-stat: var(--neutral-900);
}


.cordinatore-contacts {
    margin-block-start: 0.5rem;
}


/* #endregion */

/* #region biglietteria */

.header-row {
    display: grid;
    grid-template-columns: 30ch minmax(0, 24rem) minmax(0, 1fr);
    gap: 0.5em;
}

.header-row>div {
    display: flex;
    flex-flow: column wrap;
    gap: 0.5em;
    border-radius: 0.25rem;
}

.header-row>.header-doc {
    background-color: white;
    padding: 0.5rem;
    gap: 0;
}

.header-doc .header-row-item:not(.header-row-passport) {
    padding: 0.75em 1em 0rem 1rem;
}

.header-row-item.header-row-name {
    padding: 0.5rem 2rem 0.5rem 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    position: relative;
    gap: 0rem;
}

.header-row-name>small:not(:first-child) {
    margin-top: 0.25rem;
}

.header-row-name button {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    font-size: 1rem;
}

.header-row-item {
    background-color: white;
    color: var(--neutral-800);
    padding: 0.5rem 1rem;
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    border-radius: 0.25em;
}

.header-row-item-prenotazione {
    background-color: var(--danger-100);
    color: var(--danger-800);
    display: unset;
}

.header-row-item-prenotazione small {
    color: var(--danger-800) !important;
}

.header-row-passport {
    background-color: var(--neutral-100);
    color: var(--neutral-800);
}

.header-row-item small {
    color: var(--neutral-600);
    font-weight: 500;
}

.dx-datagrid .header-row-name .gender {
    margin-top: 0.5rem;
    background-color: var(--neutral-100);
    color: var(--neutral-800);
    padding: 0.15em 0.25rem;
    border-radius: 0.15rem;
    display: block;
    width: max-content;
}

.tab-emessi {
    display: grid;
    gap: 0 1rem;
    grid-template-columns: 24rem minmax(0, 1fr);
    height: 100%;
    grid-template-rows: min-content minmax(300px, 1fr);
}

.configuratore-emessi {
    grid-row: 1 / 3;
    font-size: 0.875rem;
}

@media (max-width: 70rem) {
    .tab-emessi {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: min-content min-content minmax(300px, 1fr);
    }

    .configuratore-emessi {
        margin-block-end: 1rem;
        grid-row: unset;
    }
}

.grid-prenotazione {
    background-color: var(--danger-100);
    color: var(--danger-800);
    padding: 0.5rem;
    border-radius: 0.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) min-content;
    gap: 1rem;
    align-items: center;
}

.grid-prenotazione button {
    background-color: var(--danger-200);
    color: var(--danger-800);
    padding: 0.5rem;
    border-radius: 0.1rem;
    display: grid;
    place-items: center;
    border: none;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1rem;
    line-height: 1;
}

.grid-prenotazione button:hover {
    background-color: var(--danger-400);
}

.grid-prenotazione button:active {
    background-color: var(--danger-800);
    color: var(--danger-200);
}

.dx-custom-prenotazione {
    overflow: visible !important;
    transition: all 0.3s ease;
}

.grid-prenotazione .btn-remove {
    display: none;
}

/* #endregion */

/* #region anagrafiche azienda */

.card-associazione {
    justify-items: start;
}

/* #endregion */

/* #region anagrafica persona */

.persona-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 3rem;
}

.persona-header .image-detail {
    flex: 1 1 20rem;
}

.persona-header .btn-actions {
    flex: 0 1 max-content;
}

.anagrafica-accordions {
    display: grid;
    gap: 0.5rem;
}

.anagrafica-accordion {
    border: 1px solid var(--blue-100);
    border-radius: 0.25rem;
    overflow: hidden;
    --tag-color: white;
    --tag-back: var(--blue-500);
}

.accordion-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 1em;
    width: 100%;
    align-items: stretch;
    background-color: var(--blue-100);
    border: 0;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    color: var(--blue-800);
    min-height: 2.5rem;
}

.accordion-header:hover {
    background-color: var(--blue-200);
}

.accordion-header:active {
    background-color: var(--blue-300);
}

.accordion-header .fields-list {
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    text-wrap: pretty;
    text-align: left;
}

.accordion-header .field {
    width: unset;
    text-align: left;
}

.accordion-header .fields-line {
    flex: 1 1 auto;
    text-align: left;
}

.accordion-label-container {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem 1rem;
}

.accordion-note {
    text-align: left;
    color: var(--blue-800);
}

.anagrafica-inserimento .accordion-note,
.consenso-list .accordion-note {
    color: var(--neutral-800);
}

@media all and (max-width: 50rem) {
    .accordion-header {
        flex-direction: row;
    }
}

@media all and (max-width: 50rem) {
    .accordion-label-container {
        flex-direction: column;
        align-items: flex-start;
    }
}

.accordion-label>p,
.accordion-label-container p {
    color: var(--blue-900);
    word-break: break-word;
    text-align: left;
}

.anagrafica-inserimento .accordion-label>p {
    color: var(--neutral-900);
}

.accordion-chevron {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    min-width: 6.5rem;
    justify-content: flex-end;
    margin-inline-end: 0.25rem;
    flex: 1 1 7rem
}

.accordion-chevron i {
    transition: all 0.2s ease;
}

.collapsed .accordion-chevron i {
    transform: rotate(180deg);
}

.events-list {
    border-block-start: 1px solid var(--blue-100);
}

.events-item {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.75rem 0.5rem 0.75rem 1rem;
    border-block-end: 1px solid var(--blue-100);
    background-color: white;
    width: 100%;
}

.events-item:last-child {
    border-block-end: unset;
}

.event-info {
    flex: 1 1;
}

.field-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
}

.field-header>p {
    color: var(--blue-700)
}


.anagrafica-inserimento {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem 2rem;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background-color: var(--neutral-050);
    border: 0;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    color: var(--neutral-800);
    --tag-color: white;
    --tag-back: var(--neutral-600);
    border-radius: 0.25rem;
    position: relative;
}

.tab-wrapper .form-column>.field {
    gap: 1rem;
}

/* privacy */

.privacy-container {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.privacy-container .accordion-label {
    display: flex;
    flex-flow: row nowrap;
    align-items: baseline;
}

.privacy-container .accordion-header {
    flex-flow: row nowrap;
}

.privacy-container .accordion-chevron {
    min-width: unset;
}

.privacy-container .image-detail {
    padding-block: 1rem;
}

.privacy-container .image-detail-container {
    justify-items: center;
}

@media all and (max-width: 60rem) {
    .privacy-container {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media all and (max-width: 60rem) {
    .preview-privacy {
        flex-flow: row wrap;
        justify-content: flex-start;
    }
}

@media all and (max-width: 60rem) {
    .preview-privacy img {
        max-width: 3rem;
    }
}

.accordion-header .fields-line {
    align-items: center;
}

.accordion-header .check-consenso {
    background-color: white;
    border-radius: 100%;
    line-height: 1;
    margin-inline-start: 0.5rem;
}

.accordion-header .check-consenso.success {
    color: var(--success-600);
    box-shadow: 0 0 0rem 0.25rem var(--success-400);
}

.accordion-header .check-consenso.error {
    background-color: white;
    color: var(--error-800);
    box-shadow: 0 0 0rem 0.25rem var(--error-500);
}


.consenso-list {
    padding: 0.75rem 1rem;
    background-color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}

.consenso-list button,
.consenso-list .button-action {
    align-self: flex-end;
}

@media all and (max-width: 50rem) {
    .consenso-list {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media all and (max-width: 50rem) {
    .consenso-list .button-action {
        margin-block-start: 1rem;
    }
}

.consenso-list>*:first-child {
    flex: 1;
    width: 100%;
}

.button-action {
    display: flex;
    flex-flow: row nowrap;
    gap: 0.25rem;
}

.field-fake-input {
    min-height: 2.25rem;
    background-color: white;
    border-radius: 0.25rem;
    padding: 0.5rem 0.5rem;
    border: 1px solid var(--neutral-200);
    color: var(--neutral-700);
    font-size: 0.85rem;
}

.dx-datagrid-nodata {
    color: var(--error-800);
    font-size: 0.85rem;
}

.custom-tab-content .tab-pane.tab-fixed-height {
    overflow: hidden;
    height: 100%;
    position: relative;
}

.custom-tab-content .tab-pane.tab-fixed-height .tab-wrapper {
    overflow: hidden;
    height: 100%;
    position: relative;
}

.field.field-grid {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.field-grid>div {
    flex: 1 1;
}

.anagrafica-accordions.fatturazione> :not(:first-child) .accordion-label {
    opacity: 0.5;
}

.persona-abilitazioni {
    align-items: center;
}

.persona-abilitazioni label {
    font-size: 1rem;
}

.persona-abilitazioni>* {
    flex: 1 1 10rems
}

#listPermessi .dx-treelist-headers {
    background-color: var(--neutral-100);
}

.dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused)>td,
.dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused)>tr>td,
.dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover>td,
.dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover>tr>td {
    background-color: var(--success-100);
    color: var(--success-800);
}


/* #endregion */

/* #region comunicazioni */


/* .chat-message .wrapper {
    margin: unset;
    --background-wrapper: var(--blue-050)
}

.chat-message.sender {
    place-self: start;
    margin-inline-end: 1rem;
}

.chat-message.sender .wrapper {
    border-end-start-radius: 0.125rem;
}

.chat-message.recipient .wrapper {
    border-end-end-radius: 0.125rem;
}

.chat-message.recipient {
    place-self: end;
    margin-inline-start: 1rem;
}
 */
.chat-user-date {
    display: flex;
    flex-direction: row;
    color: var(--neutral-600);
    align-items: center;
    gap: 1rem
}

.chat-message.sender .chat-user-date {
    justify-content: flex-start;
}

.chat-message.recipient .chat-user-date {
    justify-content: flex-end;
}

.chat-username {
    font-weight: 700;
    margin-block-end: 0.5rem;
}

.chat-user-img {
    width: 2rem;
    aspect-ratio: 1;
    background-color: var(--blue-200);
    border-radius: 0.125rem;
    color: var(--blue-600);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    object-fit: cover;
    flex: 0 0 2rem;
}

.chat-message-text:has(+.fields-list>*) {
    margin-block-end: 1rem;
}

.comunicazione-list+.message-text-bar {
    margin-top: 0.5rem
}

.comunicazione-list {
    flex: 1;
    border-radius: 0.25rem;
    padding: 1rem;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    overflow: auto;
}

.comunicazione-list .tag,
.comunicazione-list .btn {
    align-self: center;
    text-align: center;
}

.comunicazione-list .card-white {
    width: min(30rem, calc(100% - 2rem));
    align-self: center;
    margin-block: 1rem
}

.chat-message {
    word-break: break-word;
    width: auto;
    max-width: min(80%, 75ch);
    background-color: var(--neutral-050);
    color: var(--neutral-950);
    border: 1px solid var(--neutral-100);
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-bottom-left-radius: 0;
    --background-item: var(--neutral-200);
    align-self: flex-start
}

.chat-message:has(.item-file) {
    min-width: min(16rem, 100%);
}

.chat-message.user {
    align-self: end;
    background-color: var(--blue-050);
    color: var(--blue-950);
    border-color: var(--blue-100);
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0;
    --background-item: var(--blue-100);
}

.chat-message small {
    color: var(--neutral-600);
    font-size: 0.75rem;
}

.chat-message.user small {
    color: var(--blue-600);
}

.chat-message.user small {
    align-self: end;
}

.comunicazione-list {
    padding: clamp(1rem, 3vw, 5rem)
}

.chat-message-container {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: end;
}

.chat-message-container.user {
    flex-direction: row-reverse;
}

.message-text-bar {
    padding: 0.5rem 1rem;
    max-height: 3rem;
    border-radius: 2rem;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: var(--neutral-600);
    cursor: text;
}

/* .chat-container {
    gap: 0.5rem;
} */

/* .chat-scrollable {
    --form-gap-x: clamp(1rem, 5vw, 3rem);
    --form-gap-y: clamp(2rem, 5vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: var(--form-gap-y, 1rem) var(--form-gap-x, 1rem);
    align-items: start;
    padding: clamp(1rem, 5vw, 3rem)
}
 */

/* .user-actions+.operatori-chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 20rem;
} */

/* .chat-actions #txaChatOperatore {
    flex: 1;
    transition: border-radius 0.2s ease;
}
 */
/* .chat-actions>* {
    border-radius: 1.5rem;
}
 */

/* #uplChatOperatoreModal {
    padding: 1rem;
    position: absolute;
    inset: auto 0 0 0;
    background-color: white;
    border: 1px solid var(--default-border-color);
    box-shadow: 0 0 0.5rem color-mix(in srgb, var(--neutral-950), transparent 90%);
}
 */

/* #endregion */

/* #region dashboard */


.dashboard-masonry {
    gap: clamp(1rem, 2vw, 3rem);
}

.dashboard-title {
    text-wrap: balance;
    position: relative;
}

.dashboard-title-container {
    color: white;
}


@media (min-width: 30rem) and (hover: hover) and (pointer: fine) {
    .dashboard-masonry {
        padding: clamp(1rem, 2vw, 3rem);
        --form-gap-y: clamp(1rem, 2vw, 3rem);
        --form-gap-x: clamp(1rem, 2vw, 3rem);
        flex-direction: column;
    }
}

.dashboard-masonry .actions-list {
    max-height: min(40rem, 50vh);
}

.dashboard-masonry .form-line {
    flex: 1;
}

.dashboard-masonry .placeholder-area {
    min-height: 10rem;
}

.main-masonry {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    flex: 1;
}




@container mainContainer (width > 50rem) {
    .dashboard-title {
        width: 16rem;
    }

    .dashboard-title-container {
        position: sticky;
        top: clamp(1rem, 2vw, 3rem);
    }

    .main-masonry {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: var(--form-gap-y) var(--form-gap-x);
        align-items: start
    }

    .dashboard-masonry {
        overflow: unset;
    }
}

/* #endregion */


/* #region modello email */


.tiny-editor {
    height: 100%;
}

.tiny-editor [role="application"] {
    flex: 1 1 10rem;
}

.tox-tinymce {
    border: 0px solid !important;
}

.tiny-legend {
    background-color: rgba(255, 255, 255, 0.6);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    pointer-events: none;
    display: none;
}

.tiny-legend.opening {
    display: block;
    opacity: 0;
}

.tiny-legend.open {
    display: block;
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.3s ease-in-out;
}

.tiny-legend.transition {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.tiny-legend.open .tiny-legend-list {
    transform: translateX(0rem);
    transition: transform 0.4s ease-in-out;
}

.tiny-legend.transition .tiny-legend-list {
    transform: translateX(-50rem);
    transition: transform 0.4s ease-in-out;
}

.tiny-legend-list {
    background-color: white;
    width: 20rem;
    height: calc(100% - 2rem);
    margin: 1rem;
    border: 2px solid rgb(238, 238, 238);
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
}

/* .tiny-result {
    position: relative;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
} */

.legend-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-bottom: 2px solid rgb(238, 238, 238);
    flex: 0 0 auto;
}

.legend-list {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    overflow: auto scroll;
    flex: 1;
}

.legend-label {
    padding: 1.25rem 0.75rem 0.5rem 0.75rem;
}

.legend-list button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-inline: 0.75rem;
    position: relative;
}

.tox-editor-header {
    min-height: 3.25rem;
    align-items: end;
}

#emailFinalPreview,
#emailPreview {
    flex: 1 1 10rem;
    overflow: auto;
}

#emailFinalPreview {
    ul {
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
        unicode-bidi: isolate;
    }
}

.email-editing .grid-header,
.tiny-result-title {
    border-block-end: 1px solid var(--default-border-color);
    margin: unset;
}

.email-edit {
    container: email-edit-container / inline-size;
    background-color: var(--default-border-color);
}

.email-edit-container {
    display: grid;
    gap: 1px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(200px, 1fr) minmax(200px, 1fr);
    flex: 1;
    overflow: auto;
    --back-scrollbar: white;
}

.tiny-editor,
.tiny-result {
    background-color: white;
}

@container email-edit-container (width > 80rem) {
    .email-edit-container {
        grid-template-rows: minmax(0, 1fr);
        grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
    }
}

.grid-header.email-fields {
    align-items: flex-end;
}

.email-fields-edit {
    flex-basis: 50rem;
}

.email-field-nome {
    flex: 1 1 0rem
}

.email-field-azienda {
    flex: 1 1 0rem
}

.email-field-serversmtp {
    flex: 1 1 0rem
}


/* #endregion */

/* #region pagamenti */

/* .summary-title {
    font-weight: 400;
}
 */
.dettaglio-distinta {
    align-items: stretch;
    gap: 0.25rem
}

.dettaglio-prezzo-data {
    gap: 1rem
}

.dettaglio-causale {
    grid-template-rows: min-content 1fr;
}

.list-distinta {
    border: 1px solid var(--default-border-color);
    border-radius: 0.25rem;
    padding: 1rem;
}

.admin-filter {
    margin: 1rem;
    border: 1px solid var(--default-border-color);
    padding: 1rem;
    flex: 1;
    border-radius: 0.25rem;
    overflow: auto;

}

.admin-filter-label {
    margin-block-start: 0.25rem;
    cursor: pointer;
    border-radius: 4rem;
}

.reset-tipologia {
    max-width: max-content;
    --btn-color: var(--neutral-600);
    position: absolute;
    right: 0;
}

.reset-tipologia i {
    scale: 1.25
}

.admin-filter .card {
    padding: 0.5rem;

}

/* #endregion */

[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.btn-accordion {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
}

.btn-accordion-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem
}

.accordion-collapse.fields-list {
    margin-inline-start: 2.75rem
}

.accordion-collapse.fields-list:not(.show, .collapsing) {
    display: none;
}

.contacts-list {
    justify-items: start;
}

.radio-list .dx-collection {
    display: flex;
    flex-flow: row wrap;
    gap: 0.5rem;
}

.radio-list .dx-collection .dx-item {
    flex: 1 1;
}

.dx-custom-cell.danger {
    background-color: var(--danger-050);
}

.dx-row-alt .dx-custom-cell.danger {
    background-color: var(--danger-100);
}

.dx-datagrid .danger .dx-link {
    color: var(--danger-800);
}

.footer-pagamenti {
    background-color: white;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
}

.pagamenti-line {
    padding: 0.5rem;
    border-bottom: 1px solid var(--default-border-color);
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 1rem;
    color: var(--neutral-900);
    border: 1px solid var(--default-border-color);
    border-top-width: 0;
}

.pagamenti-line[data-theme="success"] {
    color: white;
    font-size: 1rem;
    background-color: var(--neutral-800);
    border-color: var(--neutral-800);
}

.resoconto-importo {
    text-align: right;
    font-weight: 700;
}

/* previsionali */

.size-controller:has(.previsionali-masonry) {
    container: previsionaliMasonry / inline-size;
}

.previsionali-masonry {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    gap: 1rem;
    justify-content: stretch;
    align-content: stretch;
}

.previsionali-masonry .fullheight-grid {
    height: 100%
}


.previsionali-grafici {
    gap: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    max-height: min-content;
}

#chartPrevisionali {
    min-height: 20rem;
    max-height: 20rem;
}


@container previsionaliMasonry (min-width: 40rem) {
    .previsionali-grafici {
        gap: 1rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));

    }

    .previsionali-masonry {
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);

    }

    #chartPrevisionali {
        min-height: 20rem;
        max-height: unset;
    }
}



@container previsionaliMasonry (min-width: 80rem) {
    .previsionali-masonry {
        grid-template-columns: 30rem minmax(0, 1fr);
        grid-template-rows: 1fr;
    }

    /*     .previsionali-grafici .card {
        grid-column: unset;
    } */
}

.tooltip-grid {
    border: 1px solid var(--default-border-color);
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.tooltip-header {
    margin-bottom: 5px;
    font-size: 1rem;
    font-weight: 500;
    margin-inline: 0.52rem
        /*     border-bottom: 1px solid #c5c5c5;
 */
}

.tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tooltip-body .series-name {
    font-weight: normal;
    opacity: 0.6;
    display: inline-block;
    line-height: 1.5;
    padding-right: 10px;
    width: 126px;
}

.tooltip-body .value-text {
    display: inline-block;
    line-height: 1.5;
    width: 30px;
}


.bilancio-card {
    display: flex;
    flex-direction: column;
    /*  justify-content: space-between; */
    gap: 1rem
}


/* admin */

.img-import+.message {
    border: 1px solid var(--danger-300);
}

.grid-header-checkbox {
    padding-inline: 0.5em 1em;
    padding-block: 0.5em;
    background-color: var(--neutral-050);
    border-radius: 0.25rem;
}

.grid-header-checkbox.dx-checkbox-checked {
    background-color: var(--blue-100);
}

.importazione-aside-body {
    flex: 1;
    overflow: auto;
}

.importazione-aside {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
}

/* chat operatori */

.overlay-chat-container {
    padding-inline: 1rem;
    padding-block: 1rem;
    display: flex;
    flex-flow: column wrap;
    overflow: hidden;
}

.chat-list {
    border: 1px solid var(--default-border-color);
    background-color: var(--default-border-color);
    border-radius: 0.25rem;
    margin-block-start: 0.5rem;
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1px;
}

.operatori-chat-container {
    margin-inline: 1rem;
    margin-block-end: 1rem;
}

#offCanvasChat .placeholder-area {
    height: 100%;
    flex-direction: column;
    text-wrap: pretty;
    text-align: center;
    gap: 1.5rem
}

#offCanvasChat .placeholder-area .field {
    max-width: 30ch;
}

.item-chat {
    cursor: pointer;
    margin-bottom: 0;
    flex: 1 0 auto;
    position: relative;
    --btn-background: white;
}

.item-chat .avatar-img {
    flex: 0 0 auto;
}

.item-chat>p {
    text-align: left;
    padding-inline: 0.25rem;
}


.item #txRicercaOperatore {
    border-radius: 2rem;
}


.item-chat.indicator-active:before {
    left: 2.25rem;
    top: .5rem;
    right: unset;
}

.back-to-chat {
    align-self: center;
    transform: translateX(-0.5rem);
    padding-inline-start: 0.5em
}


.avatar-img {
    display: grid;
    place-items: center;
}

.avatar-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0.5rem;
    gap: 0.25rem
}

.chat-income {
    background-color: var(--blue-600);
    color: white;
    font-size: 0.75rem;
    padding: 0.35em 0.5em;
    line-height: 1;
    border-radius: 3rem;
}

.chat-date {
    color: var(--neutral-600);
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 3rem;
}

.offcanvas-content>.user-actions {
    margin-inline-start: 0.5rem;
    margin-block: 0.25rem;
    color: var(--blue-800);
    gap: 0.5rem;
}

.dashboard-chart .fields-list {
    display: flex;
    flex-direction: row;
}

.dashboard-chart .fields-list .card {
    flex: 1 1 10rem;
}


/* #region Informazioni nuovo evento */

#txtInfoTipoEvento {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.informazioni-evento-container {
    display: grid;
    gap: 1rem;
    align-items: start;
    grid-auto-rows: max-content;
}

@container mainContainer (width> 60rem) {
    .informazioni-evento-container {
        grid-template-columns: 24rem minmax(0, 1fr);
    }
}


.informazioni-evento-padre img {
    width: 6rem;
    object-fit: cover;
    border: 1px solid var(--default-border-color);
    border-radius: 0.25rem;
    aspect-ratio: 1;
}

.row-info-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

.row-info-flex>* {
    flex: 1 1 20rem;
}

/* #endregion */

/* #region Nuovo evento */

.nuovo-evento-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1rem, 5vw, 3rem);
}

.informazioni-locandina {
    --card-background: white;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.informazioni-locandina img {
    border: 1px solid var(--default-border-color);
    height: 5rem;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.125rem;
}

.field-preview-google {
    display: flex;
    flex-flow: row wrap;
}

.field-preview-google img {
    flex: 1 1 10rem;
    height: clamp(10rem, 100vw, 15rem);
    object-fit: cover;
}

.field-preview-google div {
    flex: 1 20rem;
    height: clamp(10rem, 100vw, 15rem);

}

/* #endregion */

/* #region partecipante */

.partecipante-stato-chart {
    max-height: 12em;
    margin-block: 1em;
    position: relative;
    display: grid;
    place-items: center;
}

.partecipante-stato-chart svg {
    height: 100%;
    width: 100%;
}

.partecipante-stato-stroke {
    stroke-width: 4;
    fill: none;
    stroke: var(--blue-050);
}

.partecipante-stato-fill {
    stroke-width: 3;
    fill: none;
    stroke: var(--success-600);
    transition: all 1s ease;
}

#htmlPercentage {
    position: absolute;
    font-size: var(--fs-800);
    font-weight: 600;
}

.aside-back {
    display: flex;
    flex-direction: row;
    background-color: var(--black-100);
    border-block-end: 1px solid var(--blue-100);
    align-items: center;
    padding: 0.125rem
}

.aside-back .btn {
    align-self: flex-start
}

.aside-back small {
    color: var(--neutral-800);
    padding: 0.3rem 0.5rem 0.3rem 0.25rem
}

.aside-partecipante-preview {
    display: grid;
    place-items: center;
    padding: 1.5em 0;
    gap: 0.5em;
    position: relative;
    isolation: isolate;
    margin-block-end: 1rem;
}

.aside-partecipante-preview:after {
    content: "";
    background: linear-gradient(transparent, var(--blue-050));
    position: absolute;
    inset: 0;
    z-index: -1;
}

.aside-partecipante-preview img:not(.aside-partecipante-media) {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    inset: 0;
    z-index: -2;
}

.aside-partecipante-media {
    height: 5rem;
    aspect-ratio: 1;
    color: var(--blue-600);
    background-color: var(--blue-100);
    border-radius: 0.25rem;
    font-size: 5em;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--default-border-color);
    line-height: 0;
    padding: 0;
    width: 5rem;
    object-fit: cover;
}

.aside-partecipante-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
}

.comunicazione-preview {
    --detail-img-size: 2.25rem
}

.text-cropped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#listAndata,
#listRitorno {
    align-items: start;
    height: fit-content;
}

.item-assegnazione .card {
    padding-block: 0.75rem
}

.item-assegnazione .tag {
    text-wrap: wrap;
    line-height: 1.3;
}


/* #endregion */

/* #region Anagrafica azienda */

.log-list {
    border: 1px solid var(--default-border-color);
}

.radio-cards {
    width: 100%;
    display: grid;
    gap: 0.5rem;
    /* margin-block-end: 1rem; */
}

@container mainContainer (width > 50rem) {
    .radio-cards {
        grid-template-columns:
            repeat(auto-fit, minmax(10rem, 1fr))
    }
}

.radio-cards input {
    height: 0;
    width: 0;
    opacity: 0;
}

.radio-cards label {
    flex: 1;

}

.radio-cards input:checked+.radio-label {
    background-color: var(--blue-050);
    color: var(--blue-900);
    opacity: 1;
}

.radio-label {
    padding: 3rem;
    flex-direction: column;
    border: 1px solid var(--blue-100);
    text-wrap: wrap;
    opacity: 0.5;
    width: 100%;
}

.radio-label.inline {
    padding: 1rem
}

.radio-label i {
    font-size: var(--fs-900);
    margin-block-end: 1rem;
}

/* #endregion */

/* Amministrazione */

.log-list {
    max-height: 80vh;
    overflow: auto;
    border: 1px solid var(--default-border-color);
    border-radius: 0.25rem;
    padding: 0.5rem;
}

/* tab hotel */

.show-andata,
.show-ritorno,
.show-hotel {
    display: none;
}

.hotel-group-row {
    --card-background: white;
    align-items: stretch;
    gap: 0.25rem
}

.hotel-group-row .card {
    min-width: min(24rem, 100%);
}

.hotel-group-row .card:last-child {
    flex: 1;
}

.hotel-group-row .card:last-child:has(ul) {
    padding-inline-start: 0.5rem;
}

.dx-group-cell:has(.card-actions) {
    overflow: visible;
}

.message-hotel {
    margin: 1rem 1rem 0 1rem
}

.hotel-note {
    grid-column: 1 / -1
}

/* importazione */

.importazione-grid {
    overflow: auto;

}

#gridImportazioneUpdate .dx-selection.dx-row>td {
    background-color: var(--danger-050);
    color: var(--danger-900);
}

.importazione-nuovo {
    background-color: var(--danger-050);
    color: var(--danger-900);
    padding: 0.75rem;
    justify-items: start
}

.responsive-table {
    overflow: auto;
    border: 1px solid var(--default-border-color);
}

.table {
    background-color: white;
    width: 100%;

    border-collapse: collapse;
}

.table th,
.table td {
    border-inline: 1px solid var(--default-border-color);
}

.table th:first-child,
.table td:first-child {
    border-inline-start: 0px solid var(--default-border-color);
}

.table th:last-child,
.table td:last-child {
    border-inline-end: 0px solid var(--default-border-color);
}

.table tr:nth-child(even) {
    background-color: var(--blue-050);
}

.table thead {
    border-bottom: 2px solid var(--default-border-color);
    color: var(--neutral-600);
}

.table th,
.table td:not(:has(.dx-texteditor)) {
    padding: 0.5rem
}

.table td>.dx-texteditor.dx-editor-outlined {
    border: unset;
    background-color: unset;
}

/* .table td .dx-texteditor.dx-editor-outlined .dx-texteditor-input {
    padding: 0;
    min-height: unset;
}

.table td .dx-texteditor.dx-editor-outlined .dx-placeholder:before {
    padding: 0;
} */

/* #btnMenuEvento {
    position: fixed; 
    bottom: 0.75rem; 
    right: 0.5rem; 
} */

.aside-redirect {
    position: fixed;
    bottom: 1rem;
    left: 0.75rem;
    right: 5rem;
    background-color: red;
    border-radius: 0.25rem;
    background-color: var(--blue-050);
    border: 1px solid var(--blue-100);
    height: 3rem;
    transition: 0.3s ease
}


/* .aside-masonry {
    position: fixed; 
    left: -120vw
} */


.fields-consuntivo {
    width: min(40rem, 100%)
}

.evento-actions {
    display: flex;
    flex-direction: row;
}

.card-hotel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card-hotel .tag {
    cursor: pointer
}

.hotel-list {
    display: grid;
    gap: 0.5rem;
}

.hotel-list .placeholder-area {
    grid-column: 1 / -1;
}


.card-hotel-masonry {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}


@container sizeController (width > 30rem) {
    .card-hotel-masonry {
        grid-template-columns: 1fr 1fr;
    }

}

@container sizeController (width > 50rem) {
    .hotel-list {
        grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    }

}

.date-hotel {
    text-transform: uppercase;
    line-height: 1;
}


/* .card {background-color: white; border: 1px solid var(--default-border-color); box-shadow: 0 0.5rem 1rem 0 var(--neutral-100);} */

.wrapper-outlined {
    background-color: white;
}


.offcanvas-menu-tab {
    display: flex;
    flex-direction: column;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    padding: 1rem;
    gap: 0.5rem;
    overflow: auto;
    flex: 1;
}

.offcanvas-menu-tab .nav-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 0.25rem;
    font-weight: bold;
    color: var(--neutral-800);
    gap: 0.75rem;
    padding: 0.5rem;
    position: relative
}

.offcanvas-menu-tab button.nav-link::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
    position: absolute;
    right: 1rem;
    transition: 0.3s;
    translate: 0 0.125em;
    transform-origin: center center;
}

.offcanvas-menu-tab button.nav-link:not(.collapsed)::before {
    rotate: 180deg;
    translate: 0 -0.125em;
}

.offcanvas-menu-tab .nav-link i {
    background-color: var(--neutral-200);
    padding: 0.5rem;
    border-radius: 0.125rem;
    aspect-ratio: 1;
    font-size: 1rem;
    display: grid;
    place-items: center;
}

.offcanvas-menu-tab .nav-link:hover {
    background-color: var(--neutral-050);
}

.offcanvas-menu-tab .nav-link.active,
.offcanvas-menu-tab .nav-link:has(+.accordion-collapse .active) {
    background-color: var(--blue-050);
    color: var(--blue-800);
}

.offcanvas-menu-tab .nav-link.active i,
.offcanvas-menu-tab .nav-link:has(+.accordion-collapse .active) i {
    background-color: var(--blue-600);
    color: var(--blue-100);
}

/* #region partecipante - dashbard */

.partecipante-dashboard {
    display: grid;
    gap: clamp(1rem, 5vw, 3rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: clamp(1rem, 5vw, 3rem)
}

.partecipante-dashboard>.fields-group {
    gap: clamp(1rem, 5vw, 3rem);
}

@container sizeController (width > 50rem) {
    .partecipante-dashboard {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

#partecipanteCheckboxes label {
    font-size: 1rem;
}

#partecipanteCheckboxes .fields-list .fields-line {
    flex: 1;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.field-checkbox:has(.dx-custom-checkbox-success.dx-checkbox.dx-checkbox-checked) label {
    color: var(--success-800) !important;
}

/* #endregion */

/* #region Gruppo Permessi - Monitor Abilitazioni */
.permessi-monitor-abilitazioni {
    display: grid;
    /* gap: clamp(1rem, 5vw, 3rem); */
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    /* padding: clamp(1rem, 5vw, 3rem) */
}

.permessi-monitor-abilitazioni>.fields-group {
    /* gap: clamp(1rem, 5vw, 3rem); */
}

@container sizeController (width > 50rem) {
    .permessi-monitor-abilitazioni {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* #endregion */

/* #region partecipante - partecipazione */

.container-partecipazione {
    padding: clamp(1rem, 5vw, 3rem);
}

.container-partecipazione>.fields-group {
    gap: clamp(1rem, 5vw, 3rem);
}

.container-partecipazione,
.container-partecipazione .inner-grid {
    display: grid;
    gap: 1rem clamp(1rem, 5vw, 3rem);
    align-items: start;
    place-content: unset;
}

.oscurato {
    filter: blur(4px);
    opacity: 0.5;
}

@container mainContainer (width > 70rem) {
    .container-partecipazione .inner-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@container mainContainer (width > 100rem) {
    .container-partecipazione {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* #endregion */

.btn-single {
    place-self: center;
    min-width: 8rem;
}

.field .fields-line>div:not(.dx-widget) {
    width: 100%;
}

.wrapper-spaced {
    padding: clamp(1rem, 5vw, 3rem);
    gap: clamp(1rem, 5vw, 3rem);
    align-content: start;
}

.wrapper-spaced>.fields-group {
    gap: clamp(1rem, 5vw, 3rem);
}

.dx-texteditor.danger {
    background-color: var(--danger-050);
}

.dx-select-item {
    min-height: 2.125rem;
    padding: 7px 9px 8px;
}


/* anagrafica azienda */


input.fav-star-radio[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--neutral-300);
    width: 2em;
    height: 2em;
    clip-path: polygon(50% 0%, 65% 30%, 98% 35%, 75% 58%, 79% 91%, 50% 74%, 21% 91%, 26% 57%, 2% 35%, 35% 30%);
    clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
    transform: scale(0.6);
    cursor: pointer;
    border-radius: 0;
}

input.fav-star-radio[type="radio"]:before {
    all: unset;
}

input.fav-star-radio[type="radio"]:checked {
    background-color: var(--error-600);
}

input.fav-star-radio[type="radio"]:focus {
    outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
}

input.fav-star-radio[type="radio"]:disabled {
    opacity: 0;
    cursor: auto;
}

input.fav-star-radio[type="radio"]:checked:disabled {
    opacity: 1;
}

label input.fav-star-radio {
    position: absolute;
    top: -0.35rem;
    right: -0.2rem;
}

.fav-message {
    position: absolute;
    right: 1.5rem;
    background-color: var(--neutral-050);
    color: var(--black-800);
    padding: 0.25rem 0.5rem;
    border-radius: 3rem;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
    top: -0.25rem;
    font-size: var(--fs-200);
}

.fav-star-radio:checked+.fav-message {
    background-color: var(--error-100);
    color: var(--error-600);
}

.fav-star-radio:hover+.fav-message {
    opacity: 1;
}

.fav-star-radio:disabled:hover+.fav-message {
    opacity: 0;
}

.fav-star-radio:checked:disabled:hover+.fav-message {
    opacity: 1;
}

#divContainerContatti .btn-actions {
    justify-content: end;

}

#divContainerContatti label {
    position: relative;
}

.offcanvas-menu-tab .tab-with-counter {
    flex-direction: row;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    display: flex;
    flex: 1;
}

.offcanvas-menu-tab .tab-counter {
    min-height: 2rem;
    min-width: 2rem;
    display: grid;
    place-items: center;
    background-color: var(--neutral-100);
    color: var(--neutral-800);
    border-radius: 3rem;
    padding: 0.5rem;
    line-height: 1;
}


.offcanvas-menu-tab .active .tab-counter {
    background-color: var(--blue-200);
    color: var(--blue-800);
}

/* dropdown */

.accordi-dropdown .dx-overlay-content {
    padding: 1rem
}

.accordi-dropdown .dx-overlay-content .dx-scrollview {
    display: none;
}

.hotel-focus {
    position: fixed;
    z-index: 1600;
    top: 0;
    left: 0;
    bottom: 0;
    right: 25rem;
    height: 100%;
    padding: 1rem;
    width: unset !important;
    padding: clamp(1rem, 5vw, 3rem);
}


.hotel-focus:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--blue-950);
    opacity: .5;

}

.btn-ticket {
    border-radius: 100%;
    scale: 1.25;
    padding: 1.125em;
    font-size: 0.75rem;
    max-width: unset !important;
}

.btn-ticket:not(:hover, :active) {
    background: linear-gradient(-180deg, var(--blue-600), var(--blue-900))
}

.tooltip {
    background-color: none;
    opacity: 1
}


.tooltip-inner {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: inherit;
    text-align: center;
    background-color: white;
    border: 1px solid var(--default-border-color);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 0 0.5rem 0rem rgba(33, 33, 78, 0.181);
}


.tooltip-arrow {
    display: none;
}

.tooltip .arrow::before {
    content: unset !important;
    border-width: unset !important;
    border-color: unset !important;
}

/* 
.btn-manuale {
    border-radius: 100%;

} */

/* #region controllo di gestione */

.controllo-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    flex: 1;
    grid-template-rows: auto;
    grid-auto-rows: min-content;
    overflow: hidden;
    position: relative;
}

.totali {
    height: fit-content;
}

.controllo-container .fullheight-grid {
    height: 100%;
    grid-column: 1/-1;
}

.controllo-container .collapse {
    overflow: auto;
    max-height: 90vh;
}

.controllo-container .fullheight-grid:has(~.show, ~.collapsing) {
    grid-column: 1/2;
}

@container mainContainer (width > 50rem) {
    .controllo-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1rem;
        flex: 1;
        grid-template-rows: auto;
        grid-auto-rows: min-content;
    }

    .totali {
        grid-column: 1/-1;
    }
}

#collapseGestione.collapsing,
#collapseTotali.collapsing {
    -webkit-transition: unset;
    transition: unset;
    display: none;
}

#btnOpenTotali {
    width: 12rem;
    /*
    Rimosso perchè riposizionato
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    box-shadow: 0 0 0rem 0.25rem var(--lilac-300);
    */
}

.informazioni-evento .fields-line {
    gap: 0.25rem
}

.collapse-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1rem 0.25rem;
    padding-block: 0.25rem
}

.operatori-gestione {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
}


.dx-texteditor.dx-editor-filled {
    background: white;
}

#collapseTotali .dx-state-disabled.dx-widget {
    opacity: 1
}

.collapse-header+.fullheight-grid {
    border: 1px solid var(--default-border-color);
    border-width: 1px 0 0 0;
}

.fields-line.narrow {
    gap: 0.25rem;
    align-items: stretch;
}

/* #endregion */

/* #region Progetti */

#tabsAttivita li:has(button.active) {
    display: none;
}

.field-appointment {
    padding: 0.5rem;
    color: var(--neutral-900) !important;
}

.btn-actions>p {
    margin-inline-start: 0.5rem;
}

.avanzamento-container {
    padding: clamp(1rem, 10vw, 2.5rem);
    flex: 0 1 fit-content;
    margin: 1rem 1rem 0 1rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow: auto;
}

.avanzamento-container::-webkit-scrollbar {
    width: 0rem;
    height: 0rem;
}


.avanzamento-container .step {
    flex: 1 1 18rem;
    min-width: min-content;
    display: flex;
    gap: 0.75rem;
    flex-direction: column;
}


.avanzamento-container .step .step-content {
    background-color: var(--neutral-050);
    border: 1px solid var(--neutral-100);
    color: var(--neutral-700);
    border-radius: 0.25rem;
    padding: 1rem;
    text-wrap: balance;
    flex: 1;
    align-content: start;
}

.avanzamento-container .step .step-line {
    background-color: var(--neutral-400);
    border: 1px solid var(--neutral-400);
    height: 0.5rem;
    width: 80%;
    display: block;
    border-radius: 0.5rem;
    margin-inline: auto;
}


.avanzamento-container:has(.active) .step:not(.active ~ .step) .step-content {
    background-color: var(--success-050);
    border: 1px solid var(--success-100);
}

.avanzamento-container:has(.active) .step:not(.active ~ .step) .step-line {
    background-color: var(--success-400);
    border: 0px solid var(--success-400);

}

.avanzamento-container .step.active:not(:last-child) .step-line {
    background: linear-gradient(90deg, var(--success-400) 0%, var(--success-100) 25%, var(--success-400) 50%);
    background-size: 300% 300%;
    animation: 2s loaderBar linear infinite;
}

/*
Avanzamento manuale (ogni step deve avere l'active)
*/
.avanzamento-container-spot {
    padding: clamp(1rem, 10vw, 2.5rem);
    flex: 0 1 fit-content;
    margin: 1rem 1rem 0 1rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow: auto;
}

.avanzamento-container-spot::-webkit-scrollbar {
    width: 0rem;
    height: 0rem;
}


.avanzamento-container-spot .step {
    flex: 1 1 18rem;
    min-width: min-content;
    display: flex;
    gap: 0.75rem;
    flex-direction: column;
}


.avanzamento-container-spot .step .step-content {
    background-color: var(--neutral-050);
    border: 1px solid var(--neutral-100);
    color: var(--neutral-700);
    border-radius: 0.25rem;
    padding: 1rem;
    text-wrap: balance;
    flex: 1;
    align-content: start;
}

.avanzamento-container-spot .step .step-line {
    background-color: var(--neutral-400);
    border: 1px solid var(--neutral-400);
    height: 0.5rem;
    width: 80%;
    display: block;
    border-radius: 0.5rem;
    margin-inline: auto;
}

.avanzamento-container-spot .active .step-content {
    background-color: var(--success-050);
    border: 1px solid var(--success-100);
}

.avanzamento-container-spot .active .step-line {
    background-color: var(--success-400);
    border: 0px solid var(--success-400);
}

.avanzamento-container-spot .step.active:not(:last-child) .step-line {
    background: linear-gradient(90deg, var(--success-400) 0%, var(--success-100) 25%, var(--success-400) 50%);
    background-size: 300% 300%;
    animation: 2s loaderBar linear infinite;
}

@keyframes loaderBar {
    0% {
        background-position: 100% 0%
    }

    100% {
        background-position: -50% 0%
    }
}

.kpi-sponsor-container {
    padding: clamp(1rem, 10vw, 2.5rem);
    flex: 0 1 fit-content;
    margin: 1rem 1rem 0 1rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr)
}

@container sizeController (width > 30rem) {
    .kpi-sponsor-container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@container sizeController (width > 50rem) {
    .kpi-sponsor-container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    }
}

.kpi-sponsor {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 1rem
}

/* #eendregion */

.dx-widget {
    --back-scrollbar: white;
    --thumb-back: var(--default-border-color);
}

.sponsor-collapse {
    padding-block-start: 1rem;
    margin-block-start: 0.75rem;
    border-block-start: 1px solid var(--default-border-color);
}

main+img {
    position: fixed;
    inset: 0;
    object-fit: cover;
    object-position: center;
    z-index: -1;
    min-height: 100vh;
    min-width: 100vw;
    opacity: 0.7;
}

/* #region mail riepilogativa */

.tooltip-copy {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    font-size: 0.85rem;
    background-color: var(--success-600);
    display: block;
    padding: 0.25rem 0.5rem;
    right: 0.35rem;
    color: white;
    border-radius: 0.25rem;
    transition: 0.3s ease;
}

.copied .tooltip-copy {
    opacity: 1;
}

.riepilgo-chart-container {
    align-items: center;

}

.riepilogo-chart {
    width: min(50%, 10rem);
    flex: unset;
}

.riepilogo-chart .chart-stato {
    stroke-width: 10;
    stroke: var(--success-400);
    transition: all 1s ease;
    fill: none;
}

.riepilogo-chart .chart-path {
    stroke-width: 10;
    stroke: var(--blue-200);
    fill: none;
}

.riepilogo-chart {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 100%;
    position: relative;
    margin-inline: auto;
}

.riepilogo-inner,
.riepilogo-stato {
    border-radius: 100%;
    position: absolute;
    aspect-ratio: 1;
}

.riepilogo-stato {
    width: 100%;
    background-color: var(--blue-200);
}

.riepilogo-inner {
    width: 66%;
    background-color: var(--blue-050);
}

.riepilogo-layout {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.riepilogo-layout .fields-group {
    align-content: start;
}

@container sizeController (min-width: 50rem) {
    .riepilogo-layout {
        display: grid;
        grid-template-columns: 20rem 1fr;
        align-content: unset;
    }

}

.dialog-container.fullscreen {
    padding: 0
}

.dialog-container.fullscreen .dialog-header,
.dialog-container.fullscreen .dialog-footer {
    padding: 1rem;
    margin: unset;
}

.dialog-container.fullscreen .dialog-header {
    border-block-end: 1px solid var(--default-border-color)
}

.dialog-container.fullscreen .dialog-footer {
    border-block-start: 1px solid var(--default-border-color)
}

.dialog-container.fullscreen .dialog-header .btn {
    position: absolute;
    right: .25rem;
}

.tox-tinymce-aux {
    z-index: 1690 !important;
}

/* #endregion */

.carta {
    border: 1px solid var(--lilac-100);
    border-radius: 1rem;
    padding: 1rem;
    background-color: var(--lilac-800);
    background-image: radial-gradient(at right top, var(--lilac-300), var(--lilac-700));
    color: white;
    aspect-ratio: 1.6;
    margin-inline: auto;
    max-width: 20rem;
    width: 100%;
    position: relative;
    box-shadow: 0 1rem 2rem 0rem var(--lilac-300);
    margin-block: 1rem;
    line-height: 1;
    align-self: center;
}

.carta .label {
    color: white;
    font-size: 10px;
    mix-blend-mode: overlay;
}

.tipo-carta {
    position: absolute;
    right: 1rem;
    font-size: 1rem;
}

.intestatario-carta {
    position: absolute;
    bottom: 6rem;
    font-size: 1rem;

}

.numero-carta {
    position: absolute;
    bottom: 4rem;
    font-size: 1.25rem;

}

.scadenza-carta {
    position: absolute;
    bottom: 1.1rem;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem
}

.cvc-carta {
    position: absolute;
    bottom: 1.1rem;
    left: 7rem;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem
}

.circuito-carta {
    position: absolute;
    bottom: 1.1rem;
    right: 1rem;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem
}

.dx-state-disabled .dx-checkbox .dx-checkbox-icon,
.dx-state-disabled .dx-checkbox-text,
.dx-state-disabled.dx-checkbox .dx-checkbox-icon {
    opacity: 1;
}

.dx-state-disabled .dx-widget,
.dx-state-disabled.dx-widget {
    opacity: 1;
    color: var(--neutral-600) !important
}

.dx-state-disabled.dx-texteditor.dx-editor-outlined:not(.dx-daterangebox .dx-state-disabled) {
    border: 1px solid var(--neutral-100) !important;
    border-radius: 4px;
}

.dx-state-disabled .dx-texteditor-input {
    color: var(--neutral-600);
}

.dx-state-disabled .dx-checkbox-icon {
    border: 1px solid var(--neutral-200) !important;
}


/* #region export */

main:not(header~main) {
    padding-inline: 1rem;
}

.grid-header:has(+.export-action) {
    margin: unset;
}

.export-action {
    border-block-start: 1px solid var(--default-border-color);
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0;
    gap: 1rem;
}

.export-loader {
    position: fixed;
    inset: 0 0 0 0;
    height: 100vh;
    width: 100vw;
    display: grid;
    place-items: center;
    background-color: white;
    align-content: center;
    gap: 1rem;
}

/* #endregion */

.assegnazione-types {
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    flex-wrap: wrap
}

.assegnazione-types .btn-icon {
    padding: 1rem;
    gap: 0.5rem;
    min-width: unset;
    align-content: center;
    flex: 0 1 8rem;
    text-wrap: balance;
    max-width: unset;
}

.field-viaggio {
    align-items: center;
}

.field-viaggio i {
    padding: 1rem
}

.input-inner {
    padding: 0.5rem
}

.dx-selectbox-container {
    width: 100%
}

.excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.field-intermediaria {
    margin-block-start: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    background-color: var(--blue-100);
    border: 1px solid var(--blue-700);
    border-width: 0 0 0 0.25rem;
    width: fit-content
}

[data-theme="success"] .field-intermediaria {
    background-color: var(--success-200);
    border-color: var(--success-700);
}

[data-theme="success"] label {
    color: var(--success-700);
}

.offcanvas-body .actions-list {
    /* border-radius: 0; */
}

.offcanvas-body .actions-list .message {
    /* border-radius: 0; */
}

/* BLINK */
.blink {
    animation: 4s blinker linear infinite;
    -webkit-animation: 4s blinker linear infinite;
    -moz-animation: 4s blinker linear infinite;
    color: #774010;
}

@-moz-keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}

@-webkit-keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}

@keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}

/* Per Check rimborso */
/* --- Checkbox ROSSO --- */
.chk-red .dx-checkbox-icon {
    border-color: #e25050 !important;
    /* Colore del bordo */
}

.chk-red.dx-checkbox-checked .dx-checkbox-icon {
    background-color: #e25050 !important;
    /* Sfondo quando selezionato */
    color: #ffffff !important;
    /* Colore del check (segno di spunta) */
}

/* --- Checkbox BLU --- */
.chk-blue .dx-checkbox-icon {
    border-color: #2a497e !important;
    /* Colore del bordo */
}

.chk-blue.dx-checkbox-checked .dx-checkbox-icon {
    background-color: #2a497e !important;
    /* Sfondo quando selezionato */
    color: #ffffff !important;
    /* Colore del check (segno di spunta) */
}

/* Opzionale: Cambia il colore del check anche quando è in stato "indeterminato" */
.chk-red.dx-checkbox-indeterminate .dx-checkbox-icon {
    background-color: #e25050 !important;
}