body {
    --box-shadow: 0px 0px 4px 0 rgba(0,0,0,.04), 0px 3px 10px 0 rgba(0,0,0,.02);
    --color-xdark-grey: #2d2f31;
    --color-dark-grey: #444;
    --color-grey: #888;
    --color-light-grey: #aaa;
    --color-xlight-grey: #eee;
    --color-xxlight-grey: #f8f8f8;
    --color-white: #fff;
    --color-blue: #0f7bbc;
    --color-light-blue: #2f9bdf;
    --color-xlight-blue: #6dc0f3;
    --color-accent: #b22c84;
    --toolbar-height: 2.8rem;

    --font-size-xsmall: 0.6rem;
    --font-size-small: 0.8rem;
    --font-size-medium: 1rem;
    --font-size-large: 1.2rem;
    --font-size-xlarge: 1.5rem;
}

.flex {
    display: flex;
}
.flex.gap-60 {
    gap: 60px;
}

.negative-number,
.negative-number a,
.negative-number a:hover {
    color: var(--danger);
}

.positive-number,
.positive-number a,
.positive-number a:hover {
    color: var(--green);
}

.neutral-number,
.neutral-number a,
.neutral-number a:hover {
    color: var(--color-blue);
}

.negative-number .dx-icon-find,
.positive-number .dx-icon-find,
.neutral-number .dx-icon-find {
    color: var(--color-light-grey);
    border-left: 1px solid #eee;
    padding-left: 0.4em;
    margin-left: 0.2em;
    vertical-align: middle;
}

.amica-hidden {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
    max-height: 0 !important;
    opacity: 0 !important;
}

#app-side-nav-outer-toolbar {
    flex-direction: column;
    display: flex;
    height: 100%;
    width: 100%;
}

.long-title h3 {
    font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
    font-weight: 200;
    font-size: 28px;
    text-align: center;
    margin-bottom: 20px;
}

.layout-header {
    flex: 0 0 auto;
    position: relative;
    z-index: 1501;
}

.toolbar-separator {
    height: 2em;
    margin: 0 1em;
    width: 2px;
    background: var(--color-xlight-grey);
}

.app-title-header {
    color:#b30c16;
    font-size: 1.8rem;
}

.copyright {
    font-size: small;
    color: dimgrey;
    vertical-align: text-bottom;
    padding-top: 1.2rem;
    padding-right: 1rem;
}

.footer {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    /*background-color: #f5f5f5;*/
    background-color: #272727;
    text-align: left;
    font-size: small;
}

.footer2 {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #f5f5f5;
    /*background-color: #272727;*/
    text-align: center;
    font-size: small;
}

.widget-table-cell {
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.widget-table-cell:first-child {
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.display-right {
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
}


/* header */

.logoContainer a {
    display: none;
}
.logoalign .logoimage {
    float: none;
    display: block;
    margin: 0 auto;
}


/* login page */

body.login-page {
    background: var(--color-xxlight-grey);
}
.login-container {
    position: absolute;
    max-width: 30vw;
    min-width: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--color-xlight-grey);
    box-shadow: var(--box-shadow);
    background: var(--white);
    padding: 2rem;
}

.login-title {
    text-align: center;
    padding-top: 0;
    padding-bottom: 12px;
    font-weight: 400;
    font-size: 1.1em;
}

.login-controls {
    margin-left: auto;
    margin-right: auto;
    height: auto;
    width: 100%;
    padding-bottom: 1rem;
}
.login-controls .dx-checkbox,
.login-controls .dx-textbox {
    width: 100% !important;
    height: auto !important;
}

.login-container .password-reset {
    text-align: center;
    font-size: var(--font-size-small);
    margin-top: 1rem;
    padding-bottom: 0;
}
.login-container .error-message {
    color: var(--red);
    text-align: center;
}

#formPasswordReset h5 {
    text-align: center;
}
#formPasswordReset .dx-box-item-content {
    display: block !important;
}
#formPasswordReset .dx-button-has-text .dx-button-content {
    padding: 0 !important;
}
#formPasswordReset .dx-button-mode-contained {
    height: 4rem;
    margin-top: 1rem;
}

.login-summary {
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    padding-bottom: 1rem;
}

.login-button {
    width: 100%;
    padding: 0 26px;
}

.login-container .dx-button-mode-contained {
    font-size: var(--font-size-large);
    width: 100%;
    padding: 10px;
}

.login-container .dx-toast-error {
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    bottom: calc(100% + 10px);
    top: auto !important;
}

/* change password */
#formChangePassword {
    margin: 8rem auto;
    width: 100% !important;
    max-width: 500px;
    padding: 10px;
}
#formChangePassword h5 {
    text-align: center;
    margin-top: 2rem;
}
.dx-field-item-help-text {
    font-style: normal;
    font-size: 0.8em;
    margin: 0.1em 0.3em;
    display: inline-block;
}
#formChangePassword #password-change-submit {
    margin-top: 1rem;
}
#formChangePassword #password-change-submit .dx-button-content {
    padding: 1em 2em !important;
}

/* box for logo image*/
.logoimage {
    width: 3.7rem;
    height: 3rem;
}

img {
    width: 100%;
    height: 100%;
}

.drawerTreeview {
    background-color: #fafafa;
    width: 200px;
}


/* alert */
.jconfirm .jconfirm-box {
    border-top: 0 !important;
}
.jconfirm .jconfirm-box div.jconfirm-title-c {
    text-align: center !important;
}
.jconfirm .jconfirm-box .jconfirm-buttons {
    text-align: center !important;
}
.jconfirm .jconfirm-box .jconfirm-buttons button {
    text-transform: none !important;
    margin: .3em !important;
    padding: 0.8em 1.4em !important;
}

/* inputs */
.dx-button-content .dx-icon {
    color: #000;
    opacity: 0.5;
    font-size: 0.9em;
}
.dx-item:hover .dx-button-content .dx-icon,
.dx-button-content:hover .dx-icon {
    opacity: 1;
}

/* main menu */
.toolbar {
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 0;
    left: 0;
    height: var(--toolbar-height);
    background: var(--color-xdark-grey);
}
.toolbar .dx-toolbar {
    background: transparent;
    box-shadow: var(--box-shadow);
    padding: 5px 10px;
}

.dx-toolbar {
    background: transparent;
    margin: 0 !important;
}

.dx-toolbar-after #selectAziende {
    background: transparent;
    border: 0;
}
.dx-toolbar-after #selectAziende input {
    text-align: right;
    color: var(--white);
}

.dx-list-item-icon-container, .dx-toolbar-before {
    width: 36px;
    padding-right: 0px !important;
    text-align: center;
}

.dx-list-item-content {
    padding-left: 10px !important;
}

.dx-toolbar-button .dx-menu .dx-menu-item-wrapper {
    margin: 0 5px;
}

.dx-toolbar-button .dx-menu .dx-menu-item {
    border: 0 !important;
    z-index: 100;
    color: var(--white);
    background: transparent;
}
.dx-toolbar-button .dx-menu .dx-menu-item.dx-state-hover,
.dx-toolbar-button .dx-menu .dx-menu-item.dx-state-expanded,
.dx-toolbar-button .dx-menu .dx-menu-item.dx-state-active {
    background: rgba(255,255,255,.2) !important;
    border:0 !important;
}
.dx-toolbar-button .dx-menu .dx-menu-item-expanded div {
    border: 0 !important;
    box-shadow: none;
}
.dx-toolbar-button .dx-menu .dx-menu-item .dx-menu-item-popout {
    transition: transform .3s ease-in-out;
    color: var(--color-light-grey);
}
.dx-toolbar-button .dx-menu .dx-menu-item-expanded .dx-menu-item-popout {
    transform: rotate(180deg);
}
.dx-dropdowneditor-icon,
.dx-menu-base .dx-menu-item .dx-menu-item-content .dx-menu-item-popout-container .dx-menu-item-popout {
    font-size: .7rem;
}
.dx-dropdowneditor .dx-dropdowneditor-icon,
.dx-dropdowneditor.dx-state-active .dx-dropdowneditor-icon,
.dx-dropdowneditor.dx-state-hover .dx-dropdowneditor-icon {
    background-color: transparent !important;
}
.dx-dropdowneditor-icon::before,
.dx-menu .dx-menu-horizontal .dx-menu-item-popout::before {
    content: "\f016";
    color: var(--color-grey);
}

.dx-context-menu .dx-submenu {
    min-width: 200px;
    padding: 10px;
    box-shadow: var(--box-shadow);
    position: relative;
    top: -4px;
    left: -2px
}
.dx-context-menu .dx-submenu ul {
    width: 100%;
}
.dx-context-menu .dx-submenu ul li,
.dx-context-menu .dx-submenu ul li .dx-item-content {
    padding: 0;
}
.dx-context-menu .dx-submenu ul li span {
    padding: 5px !important;
    display: block !important;
}

.dx-context-menu .dx-submenu .username {
    text-align: center;
    border-bottom: 1px solid var(--color-xlight-grey);
    padding: 0 0 1em !important;
    margin: 0 0 0.5em;
    cursor: default;
}
.dx-context-menu .dx-submenu .username:hover {
    background: var(--color-white);
}
.dx-context-menu .dx-menu-separator {
    margin: 12px -10px;
    background: var(--color-xlight-grey);
}
 
.dx-menu-item-content .user-menu {
    color: var(--color-grey);
    line-height: 1em;
    padding: 0 8px 0 3px;
}
.dx-menu-item-content .user-menu .username {
    color: var(--color-white);
}
.dx-menu-item-content .user-menu .company {
    font-weight: bold;
    color: var(--color-white);
}
.dx-menu-item-content .user-menu .dx-icon-user {
    font-size: 1.1em;
    line-height: 1em;
    margin-top: -0.2em;
}
.dx-context-menu .dx-submenu ul li span.company-name.selected {
    font-weight: bold;
}
.dx-context-menu .dx-submenu ul li span.company-name .fa {
    display: inline-block !important;
    padding: 0 !important;
    font-size: 0.8em;
}
.dx-context-menu .dx-submenu ul li span.company-settings {
    padding-left: calc(1em + 5px) !important;
}

.dx-menu-base .dx-menu-items-container {
    cursor: auto;
}
.dx-menu-base .dx-menu-items-container li {
    cursor: pointer;
}
.dx-submenu li.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.panel-list {
    height: 400px;
}

.site-theme-background-color {
    background-color: #f5f5f5 !important;
    fill: #f5f5f5 !important;
}
​
.dx-drawer-expand.dx-drawer-right .panel-list {
    float: right;
}

​
.panel-list .dx-list-item {
    color: #fff;
    border-top: 1px solid rgba(221, 221, 221, .2);
}

    ​
.panel-list .dx-list-item .dx-icon {
    color: #fff !important;
}

​
.options {
    padding: 20px;
    background-color: rgba(191, 191, 191, .15);
}

​
.caption {
    font-size: 18px;
    font-weight: 500;
}

​
.option {
    margin-top: 10px;
    display: inline-block;
    margin-right: 50px;
}

​
label {
    font-weight: bold;
}

​
#content {
    height: 100%;
    padding: 10px 20px;
}

    ​
#content h2 {
    font-size: 26px;
}

#drawerTreeview .dx-icon {
    width: 28px;
    height: 28px;
}


/* multiview (tabs) */
.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs {
    background: var(--color-xlight-grey);
    border: 0;
}
.dx-tabpanel > .dx-tabpanel-tabs .dx-tab {
    width: auto;
    padding: 12px 30px;
    background: var(--color-xlight-grey);
}
.dx-rtl .dx-tabpanel > .dx-tabpanel-tabs .dx-tabs-expanded .dx-tab:not(.dx-tab-selected):first-of-type, .dx-rtl.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs-expanded .dx-tab:not(.dx-tab-selected):first-of-type, .dx-tabpanel > .dx-tabpanel-tabs .dx-tabs-stretched .dx-tab:not(.dx-tab-selected):last-of-type {
    box-shadow: inset 0 -1px, inset 0 1px;
}
.dx-tabpanel > .dx-tabpanel-tabs .dx-tab.dx-tab-selected {
    background-color: var(--color-xxlight-grey);
}
.dx-multiview-item-container {
    transform: none !important;
}
.dx-item.dx-multiview-item {
    padding: 20px;
    transform: none !important;
}
.dx-item.dx-multiview-item .dx-datagrid-header-panel {
    position: relative;
    top: -20px;
    left: -20px;
    width: calc(100% + 40px);
}
.dx-item.dx-multiview-item .dx-datagrid-total-footer {
    display: none;
}
#divBody > div > .dx-multiview .dx-widget,
#divBody > div > .dx-multiview.dx-tabpanel .dx-multiview-wrapper {
    border: 0 !important;
}

/* help */
#help {
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index: 100000;
}
#help a {
    background: #09a164;
    color: #fff;
    border-radius: 500px;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
    width: 1.8em;
    height: 1.8em;
    text-align: center;
    display: block;
    padding: 0.4em;
    transition: transform 0.2s ease-in-out;
}
#help a:hover {
    transform: translateY(-0.2em);
    text-decoration: none;
}

/* datagrid */
.dx-datagrid-search-panel .dx-button .dx-button-text {
    color: var(--color-blue);
    text-decoration: underline;
    font-size: 0.8em;
}
#mainContent {
    margin: var(--toolbar-height) 0 0;
    position: relative;
    min-height: calc(100vh - var(--toolbar-height));
}
.dx-datagrid-header-panel {
    background: var(--color-xxlight-grey);
    padding: 10px 20px;
    border-bottom: 0;
    position: sticky;
    top: var(--toolbar-height);
    z-index: 100;
    box-shadow: var(--box-shadow);
}
.dx-multiview-wrapper .dx-datagrid-header-panel {
    box-shadow: none;
}
#mainContent > h4#titoloSezione {
    display: none;
}
#titoloSezione {
    padding: 5px 10px;
    color: var(--color-grey);
    font-size: 1.3rem;
    margin: 0;
    white-space: nowrap;
}
#divBody {
    padding-bottom: 60px;
    min-height: calc(100vh - 45px);
    position: relative;
}
#divBody > div.dx-widget > .dx-datagrid > .dx-datagrid-headers {
    margin: 20px;
    margin-bottom: 0;
}
#divBody > div.dx-widget > .dx-datagrid > .dx-datagrid-rowsview {
    margin: 0 20px;
}
#divBody > div.dx-widget > .dx-datagrid > .dx-datagrid-total-footer {
    display: none;
}
#divBody > div.dx-widget > .dx-datagrid > .dx-datagrid-pager,
#divBody > div > .dx-multiview .dx-widget .dx-pager {
    width: calc(100% - 40px);
    margin: 0 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    background: var(--color-white);
    z-index: 10;
    font-size: 0.7em;
    line-height: 1;
    padding-right: 50px;
    border-top: 1px solid #ddd !important;
}
.dx-pager .dx-pages .dx-next-button, .dx-pager .dx-pages .dx-prev-button {
    font-size: 1.2em;
    line-height: 1;
}
.dx-row.dx-column-lines.dx-header-row td:first-child {
    text-align: center !important;
}
tr.dx-row td:not(:first-child) .dx-datagrid-checkbox-size .dx-checkbox-icon {
    background: transparent !important;
    border: 0 !important;
}
tr.dx-row-focused td:not(:first-child) .dx-datagrid-checkbox-size .dx-checkbox-icon {
    color: var(--color-white);
}

.dx-row.dx-data-row .dx-link-icon {
    display: none !important;
}
.dx-row.dx-data-row.dx-state-hover .dx-link-icon {
    display: inline-block !important;
}

.dx-datagrid .dx-header-filter:not(.dx-header-filter-empty) {
    color: var(--color-light-blue);
}

.dx-datagrid-rowsview .dx-row > .dx-master-detail-cell {
    padding: 6px 5px 5px 40px;
    transform: translateY(-1px);
}
.dx-row.dx-selection + .dx-master-detail-row > td {
    background: #e6e6e6 !important;
    box-shadow: inset 0 1px var(--color-xlight-grey) !important;
}
.dx-row.dx-row-focused + .dx-master-detail-row > td {
    background: #5c95c5 !important;
    box-shadow: inset 0 1px var(--color-xlight-grey) !important;
}
.dx-master-detail-row > td {
    background: var(--color-xlight-grey);
    position:relative;
}
.dx-master-detail-row > td > div {
    padding: 20px;
}
.dx-master-detail-row > td::before/*,
.dx-master-detail-row > td::after*/ {
    content: '';
    position: absolute;
    top: -1px;
    width: 35px;
    height: calc(100% + 1px);
    background: var(--color-white);
}
.dx-master-detail-row > td::before {
    left: 0;
    border-right: 1px solid #dddddd;
}
/*
.dx-master-detail-row > td::after {
    right: 0;
    width: 80px;
    border-left: 1px solid #dddddd;
}
*/
.dx-row.dx-selection + .dx-master-detail-row > td::before,
.dx-row.dx-selection + .dx-master-detail-row > td::after {
    background: #e6e6e6 !important;
}
.dx-row.dx-row-focused + .dx-master-detail-row > td::before,
.dx-row.dx-row-focused + .dx-master-detail-row > td::after {
    background: #5c95c5 !important;
}

.dx-datagrid-column-chooser .dx-overlay-content .dx-popup-title {
    background: var(--color-dark-grey);
    margin-bottom: 1em !important;
}

/* popup */
.dx-overlay-shader {
    pointer-events: auto;
    background-color: rgba(0,0,0,.6);
}
.dx-popup-wrapper > .dx-overlay-content {
    border: 0 !important;
}
.dx-popup-title {
    background: var(--color-dark-grey);
    color: var(--color-white);
    border-color: var(--color-dark-grey);
}
.dx-popup-title .dx-button-mode-text .dx-icon {
    color: var(--color-white) !important;
}
body:not(.login-page) div:not(.dx-dropdowneditor-overlay) .dx-popup-wrapper:not(.dx-header-filter-menu) .dx-popup-normal {
    max-height: 90vh;
    transform: translate(-50%, -50%) !important;
    left: 50% !important;
    top: 50% !important;
}
body:not(.login-page) .dx-popup-bottom.dx-toolbar {
    border-top: 1px solid var(--color-xlight-grey);
}
/*
body:not(.login-page) .dx-popup-content {
    padding: 0 20px;
}
body:not(.login-page) .dx-popup-content > div {
    padding-top: 20px;
}
*/
body.login-page .dx-tooltip-wrapper .dx-overlay-content,
body.login-page .dx-popup-content {
    height: auto !important;
}
.dx-form-group-caption {
    display: block;
    margin-top: 50px;
}

.popup-content-white-section,
.popup-content-grey-section {
    padding: 20px !important;
}
.popup-content-grey-section {
    background: var(--color-xxlight-grey);
}
.popup-content-section h6,
.popup-content-white-section h6,
.popup-content-grey-section h6 {
    margin: 2em 0 0;
    display: flex;
    gap: 1em;
    align-items: baseline;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
}
.popup-content-section h6:after,
.popup-content-white-section h6:after,
.popup-content-grey-section h6:after {
    content: '';
    height: 1px;
    flex-grow: 2;
    border-bottom: 1px solid #e0e0e0;
}
.popup-content-section textarea {
    min-height: 10rem;
}


.grid-popup-content-section h6 {
    /*margin: 2em 0 0;*/
    display: flex;
    gap: 1em;
    align-items: baseline;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
}

.grid-popup-content-section h6:after {
    content: '';
    height: 1px;
    flex-grow: 2;
    border-bottom: 1px solid #e0e0e0;
}

.grid-popup-content-section textarea {
    min-height: 6rem;
}

/* coming soon */
.coming-soon {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.coming-soon img {
    max-height: 50vh;
    max-width: 90%;
    width: auto;
    height: auto;
}


/* dashboard */

.home-dashboard {
    padding: 60px;
    background: var(--color-xxlight-grey);
    min-height: 80vh;
    box-shadow: 0 400px 0 0 var(--color-xxlight-grey);
}
.home-chart {
    padding: 40px 60px;
    margin-bottom: 60px;
    background: var(--color-white);
    box-shadow: var(--box-shadow);
}
.home-chart h2 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 1em;
}
.home-chart h3 {
    font-size: 1.2rem;
    font-weight: normal;
}
.home-chart h2 .anno1 {
    color: var(--color-light-grey);
}
.home-chart h2 .anno2 {
    color: var(--color-xlight-blue);
}
.home-chart h2 .anno3 {
    color: var(--color-blue);
}
.home-chart .dx-row.dx-column-lines.dx-header-row td:first-child {
    text-align: left !important;
}

#chart svg {
    width: 100%;
}
#chart svg .dxc-title text {
    font-size: 16pt !important;
}
#chart svg .dxc-val-grid path,
#chart svg .dxc-arg-grid path {
    stroke: var(--color-xlight-grey) !important;
}
#chart svg .dxc-axes-group path {
    stroke: var(--color-xlight-grey) !important;
}
#chart svg .dxc-val-axis .dxc-val-line path:first-child {
    stroke: transparent !important;
}
#chart svg .dxc-labels-group rect {
    fill: transparent !important;
}
#chart svg .dxc-labels-group text {
    fill: var(--color-xdark-grey) !important;
}

.home-chart .chart {
    position: relative;
}
.home-chart .chart .chart-overlay {
    position: absolute;
    top: 0;
    left: 0;
}
.home-chart .chart.clickable .dxc-markers rect {
    cursor: pointer;
}

.button-aggiorna {  
    float: right;  
}  
.scadenze-heading {
    padding-top: 20px;
}
.home-chart .heading > .dx-toolbar {
    height: 0;
}
.chart-chooser .dx-submenu {
    padding: 10px;
}
.chartChooser {
    padding-left: 10px;
}
.chart-chooser .mostra-tutti {
    position: relative;
    padding: 7px 10px;
    border-top: 1px solid var(--color-xlight-grey);
}
.chart-chooser .mostra-tutti:hover {
    background: var(--color-xxlight-grey);
}

.chart-chooser-item {
    padding: 5px 10px;
    border-bottom: 1px solid var(--color-xlight-grey);
}
.chart-chooser-item:last-of-type {
    border-bottom: 0;
}
.chart-chooser .dx-icon {
    margin-right: 0.5em;
    vertical-align: middle;
}

.tabella-scadenze .dx-header-row td:last-of-type {
    color: transparent !important;
}

/* user cards */
#divCards {
    justify-content: center;
}
#divCards::after {
    flex-grow: 2;
    content: '';
    min-width: 400px;
}
@media (max-width: 1610px) {
    #divCards::after {
        max-width: 800px;
    }
}
@media (max-width: 1210px) {
    #divCards::after {
        max-width: 400px;
    }
}
.cards-container {
    padding: 20px;
}
#divCards .card-padding {
    min-width: 400px;
    min-height: 300px;
    margin: 1rem 0 2rem;
}
.cards-container .card {
    margin: 0;
    padding: 20px 40px;
    transition: 0.3s;
    border-radius: 5px;
    border-color: var(--color-xlight-grey);
}

.card-plus {
    height: 100%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.card-plus.editing {
    pointer-events: none;
}
.card-plus .dx-icon {
    font-size: 3em;
}
.card-plus:hover .dx-icon {
    color: var(--color-blue);
}

.image-card-plus {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    width: auto;
    height: 80%
}

.card:hover {
    box-shadow: var(--box-shadow);
}

.card .fields-container {
    display: none;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.card .fields-container.visible {
    display: flex;
}
.card .fields-container.preview {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.card:hover .fields-container.preview {
    opacity: 1;
}
.card.editing:hover .fields-container.preview {
    opacity: 0;
    pointer-events: none;
}

.card .dx-fieldset {
    margin: 40px 0 0 0;
}

.card .field-value {
    padding-left: 5px;
}

.card label {
    opacity: 0.4;
}

.card .dx-state-disabled .dx-widget,
.card .dx-state-disabled.dx-widget {
    opacity: 1;
}
.card .dx-state-disabled .dx-widget .dx-texteditor.dx-editor-outlined,
.card .dx-state-disabled.dx-widget .dx-texteditor.dx-editor-outlined {
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 0;
}
.card .dx-state-disabled.dx-widget .dx-texteditor-buttons-container {
    opacity: 0;
}
.card .dx-icon-user {
    position: absolute;
    top: -0.8em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    color: var(--color-blue);
    border: 1px solid var(--color-xlight-grey);
    border-radius: 5em;
    background: var(--color-white);
    padding: 0.3em;
}

.card .dx-state-disabled .dx-field-item-required-mark {
    visibility: hidden;
}

.dateRangeSeparator {
    width: 120%;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: -20px;
}


/* drawer for popups */
.dx-drawer {
    height: 100% !important;
    width: 100%;
    overflow: auto;
}
.dx-popup-content .drawer .dx-drawer-panel-content {
    background: var(--color-xxlight-grey);
}
.dx-popup-content .drawer {
    left: -20px;
    position: relative;
    top: -20px;
    width: calc(100%);
    height: calc(100% + 1px);
}
.dx-drawer-panel-content .dx-scrollable {
    background: transparent !important;
}
.dx-drawer-panel-content .dx-scrollview-content {
    margin-top: 20px;
}
.popup-content-section {
    position: relative;
    min-height: 100vh;
    padding: 0 50px 50px;
}
.popup-content-section .dx-form-group-caption {
    margin: 0 0 20px;
    padding-top: 20px;
}
.drawer.snap-scroll .dx-box {
    scroll-snap-type: y mandatory;
}
.drawer.snap-scroll .dx-box .dx-box-item {
    scroll-snap-align: start;
}
.confirm-btncancel {
}

.searchPanelClass {
    width: 500px;
}

.rightaligntext input {
    text-align: right !important;
    border: none;
}

.nuovo-elemento {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    padding: 7px 10px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-xlight-grey);
    color: #333 !important;
}
.nuovo-elemento:hover {
    background: var(--color-xxlight-grey);
}

.nuovo-elemento .dx-icon {
    color: #333 !important;
}

.dx-switch-container {
    border-radius: 2em;
}
.dx-switch.dx-state-focused .dx-switch-container,
.dx-switch.dx-state-hover .dx-switch-container {
    border-color: #db5555;
}
.dx-switch.dx-switch-on-value.dx-state-focused .dx-switch-container,
.dx-switch.dx-switch-on-value.dx-state-hover .dx-switch-container {
    border-color: #ccc;
}
.dx-switch-handle {
    min-width: 18px;
    width: 18px;
    height: 18px;
}
.dx-switch-handle::before {
    border-radius: 2em;
}
.dx-switch-on, .dx-switch-off {
    font-size: 0.8em;
    font-weight: normal;
}
.dx-switch-handle::before {
    background-color: #ca0000;
}
.dx-switch.dx-state-hover .dx-switch-handle::before,
.dx-switch.dx-state-focused .dx-switch-handle::before {
    background-color: #db5555;
}
.dx-switch.dx-switch-on-value.dx-state-focused.dx-state-hover .dx-switch-handle::before,
.dx-switch.dx-switch-on-value.dx-state-hover .dx-switch-handle::before {
    background-color: #005eca;
}
.dx-switch.dx-switch-on-value .dx-switch-handle::before {
    background-color: #337ab7;
}

.dx-field-item-label-content {
    max-width: 180px !important;
}
.dx-field-item-label-text {
    max-width: min(100%, 180px) !important;
    display: inline-block;
    overflow: clip;
    text-overflow: ellipsis;
}

.bank-account {
    display: flex;
    gap: 1em;
}
.bank-account label span {
    letter-spacing: 0.1em;
    display: inline-block;
    background: var(--color-xxlight-grey);
    padding: 0 0.3em;
    border-bottom: 1px solid var(--color-light-grey);
}

.compact-fields .groupfield-first-child,
.compact-fields .groupfield-last-child {
    border: 1px solid var(--color-xlight-grey);
    padding: 1em 5px 5px 5px !important;
    margin-top: -1em;
}
.compact-fields .groupfield-first-child {
    border-right: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.compact-fields .groupfield-last-child {
    border-left: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-right: 10px;
}

.compact-fields .dx-item-content {
    position: relative;
    margin-top: 1em;
}
.compact-fields .dx-item-content .dx-field-item {
    padding-left: 0;
}
.compact-fields label {
    position: absolute;
    bottom: calc(100% - 0.5em);
    left: 0;
    width: 100% !important;
    font-size: 0.8em;
    opacity: 0.8;
    line-height: 1;
    white-space: nowrap;
}
.compact-fields .groupfield-first-child label,
.compact-fields .groupfield-last-child label {
    margin-left: 5px;
    width: 90% !important;
}
.compact-fields .dx-field-item-label-content {
    width: 100% !important;
}

.tipo-documento {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: 1px solid var(--color-xlight-grey);
    padding: 7px;
}


/* CookieConsent section */

#cookieConsentdiv-bkg {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
    background: #00000040;
}
#cookieConsentdiv {
    z-index: 1010;
    position: fixed;
    width: calc(100% - 60px);
    bottom: 30px;
    left: 30px;
    border-radius: 10px;
    background-color: var(--color-white);
    box-shadow: var(--box-shadow);
    padding: 30px 30px;
    text-align: center;
}

#cookieConsentdiv button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: none;
    border-radius: 4px;
    background-color: var(--color-blue);
    padding: 10px 50px;
    margin-top: -5px;
    color: var(--color-white);
    font-size: 1.2em;
}

#cookieConsentdiv button:hover {
    background-color: var(--color-light-blue);
}

#markdownDiv h1 {
    font-size: 1.5rem;
}

#markdownDiv h2 {
    font-size: 1rem;
}

#markdownDiv h3 {
    font-size: 0.75rem;
}

#markdownDiv h4 {
    font-size: 0.5rem;
}

#markdownDiv h5, h6 {
    font-size: 0.25rem;
}