h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


.btn-component-back {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tab-host-bg);
    color: var(--app-text);
    border: 1px solid var(--special-card-border);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

    .btn-component-back:hover {
        background-color: var(--tab-host-bg);
    }

/* APEX TOOLTIP */
.apexcharts-tooltip {
    border-radius: .75rem !important;
    overflow: hidden !important;
}

.apexcharts-tooltip-series-group {
    background: transparent !important;
    padding: .55rem .875rem !important;
}

.apexcharts-tooltip-marker {
    width: .65rem !important;
    height: .65rem !important;
    margin-right: .5rem !important;
}

/* LIGHT */
[data-bs-theme="light"] .apexcharts-tooltip,
[data-bs-theme="light"] .apexcharts-tooltip.apexcharts-theme-light,
[data-bs-theme="light"] .apexcharts-tooltip.apexcharts-theme-dark {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .10) !important;
}

[data-bs-theme="light"] .apexcharts-tooltip-title {
    background: #f8f9fa !important;
    color: #111827 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
}

[data-bs-theme="light"] .apexcharts-tooltip-text,
[data-bs-theme="light"] .apexcharts-tooltip-y-group,
[data-bs-theme="light"] .apexcharts-tooltip-text-y-label,
[data-bs-theme="light"] .apexcharts-tooltip-text-y-value,
[data-bs-theme="light"] .apexcharts-tooltip-z-group {
    color: #111827 !important;
}

/* DARK */
[data-bs-theme="dark"] .apexcharts-tooltip,
[data-bs-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light,
[data-bs-theme="dark"] .apexcharts-tooltip.apexcharts-theme-dark {
    background: #262633 !important;
    color: #f8f9fa !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .45) !important;
}

[data-bs-theme="dark"] .apexcharts-tooltip-title {
    background: #303042 !important;
    color: #f8f9fa !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
}

[data-bs-theme="dark"] .apexcharts-tooltip-text,
[data-bs-theme="dark"] .apexcharts-tooltip-y-group,
[data-bs-theme="dark"] .apexcharts-tooltip-text-y-label,
[data-bs-theme="dark"] .apexcharts-tooltip-text-y-value,
[data-bs-theme="dark"] .apexcharts-tooltip-z-group {
    color: #f8f9fa !important;
}

.dashboard-monthly-chart .apexcharts-data-labels text,
.dashboard-monthly-chart .apexcharts-datalabel {
    fill: #1f2a44 !important;
    font-weight: 700 !important;
}

[data-bs-theme="dark"] .dashboard-monthly-chart .apexcharts-data-labels text,
[data-bs-theme="dark"] .dashboard-monthly-chart .apexcharts-datalabel {
    fill: #f8f9fa !important;
}
/* App scrollbars are global because some modal markup is rendered outside CSS isolation scope. */
html,
body,
.page-content,
.modal,
.modal-dialog,
.modal-content,
.modal-body,
.offcanvas,
.offcanvas-body,
.task-modal,
.task-modal .modal-dialog,
.task-modal .modal-content,
.task-modal .modal-body,
.task-modal .task-modal-body {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.page-content::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.modal-dialog::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.offcanvas::-webkit-scrollbar,
.offcanvas-body::-webkit-scrollbar,
.task-modal::-webkit-scrollbar,
.task-modal .modal-dialog::-webkit-scrollbar,
.task-modal .modal-content::-webkit-scrollbar,
.task-modal .modal-body::-webkit-scrollbar,
.task-modal .task-modal-body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Shared notification bell: Host and Cleaner use the default style; Laundry uses its layout variant. */
.app-notification-bell {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--app-text);
    font-size: 20px;
    text-decoration: none;
    transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.app-notification-bell:hover,
.app-notification-bell:focus-visible {
    background-color: var(--hover-bg);
    color: var(--primary-color);
}

.app-notification-bell:focus-visible {
    /*outline: 2px solid var(--primary-color);*/
    outline-offset: 2px;
}

.app-notification-bell.has-unread-notifications {
    color: var(--primary-color);
    /*background-color: var(--bs-primary-bg-subtle);*/
    box-shadow: none; /*0 0 0 1px var(--bs-primary-border-subtle);*/
}

.app-notification-bell__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1em;
}

.app-notification-bell__badge {
    position: absolute;
    top: -.65rem;
    right: -0.80rem; /*prima -1*/
    display: inline-flex;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 .28rem;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--app-bg);
    border-radius: 999px;
    background: var(--primary-color);
    color: var(--bs-white);
    font-size: .63rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 .2rem .5rem color-mix(in srgb, var(--primary-color) 28%, transparent);
    animation: app-notification-badge-enter .25s ease-out, app-notification-badge-pulse 2.4s ease-in-out .35s infinite;
}

.app-notification-bell--laundry {
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    border-radius: 13px;
    background: var(--app-bg-laundry-layout);
    color: var(--bs-body-color);
}

.app-notification-bell--laundry:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
}

.app-notification-bell--laundry:focus-visible {
    outline-color: var(--bs-primary);
}

.app-notification-bell--laundry.has-unread-notifications {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-primary) 18%, transparent);
}

.app-notification-bell--laundry .app-notification-bell__badge {
    top: -10px;
    right: -15px;
    display: grid;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-color: var(--app-bg-laundry-layout);
    font-size: .65rem;
    font-weight: 700;
    animation: app-notification-badge-enter .24s ease-out, app-notification-badge-pulse 1.8s ease-in-out infinite;
}

@keyframes app-notification-badge-enter {
    from { opacity: 0; transform: scale(.65); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes app-notification-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 45%, transparent); }
    50% { box-shadow: 0 0 0 .38rem transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .app-notification-bell,
    .app-notification-bell__badge {
        transition: none;
        animation: none;
    }
}


/*NOTIFICATIONS*/


.notifications-page .notification-icon--success {
    background-color: var(--badge-green-bg);
    color: var(--badge-green-color);
}

.notifications-page .notification-icon--warning {
    background-color: var(--badge-yellow-bg);
    color: var(--badge-yellow-color);
}

.notifications-page .notification-icon--error {
    background-color: var(--badge-red-bg);
    color: var(--badge-red-color);
}

.notifications-page .notification-icon--info {
    background-color: var(--badge-blue-bg);
    color: var(--badge-blue-color);
}

.notifications-page .notification-card--success {
    background-color: var(--badge-green-bg);
}

.notifications-page .notification-card--warning {
    background-color: var(--badge-yellow-bg);
}

.notifications-page .notification-card--error {
    background-color: var(--badge-red-bg);
}

.notifications-page .notification-card--info {
    background-color: var(--badge-blue-bg);
}