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

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

/*.appHeader.scrolled .pageTitle {
    opacity: 1;
    color: black;
}

.appHeader.scrolled.is-active .pageTitle {
    opacity: 1;
    color: white;
}*/

.fab-button.bottom-right {
    bottom: 80px !important;
}

.image-listview>li .item .in.center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.validation-message {
    color: #EC4433;
    font-size: 11px;
}

/* Empty Page */
.empty-page {
    -ms-flex-align: center;
    align-items: center;
    /*    background: #e9ecef;*/
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    -ms-flex-pack: center;
    justify-content: center;
    /*    background-color: #343a40;*/
    /*    color: #ffffff;*/
}

.brand-image {
    max-height: 155px;
}

.action-sheet-content {
    padding: 5px 16px !important;
}

.form-group.boxed .form-control {
    padding: 7px 16px !important;
}

.appHeader.scrolled.bg-primary.is-active .headerButton {
    color: #1e74fd !important;
}

#map {
    /*aspect-ratio: 4/3;*/
    height: 250px;
}


.e-signature {
    border: 1px solid;
    border-radius: 2px;
    border-color: #dee2e6;
    width: 100%;
    height: 150px;
}

#confetti-canvas {
    position: absolute;
}

.badge:empty {
    display: inline-flex;
}

.badge-indicator {
    padding: 0;
    opacity: 0.6;
}


/*
    Blazor SYncfusion Styling Extensions
    Does not work with scoped styles
*/

.e-calendar,
.e-bigger.e-small .e-calendar {
    max-width: unset;
    min-width: unset;
}

.e-input-group input.e-input,
.e-input-group.e-control-wrapper input.e-input {
    height: 40px;
    font-size: 20px;
}

.e-calendar .e-content .e-cell.sign-in-locked span.e-day,
.e-calendar .e-content td:hover.e-cell.sign-in-lockedt span.e-day,
.e-calendar .e-content td.e-selected.e-focused-date.e-cell.sign-in-locked span.e-day {
    color: #F1C40F;
    font-weight: 800;
}

/* Today Button */
.e-calendar .e-btn.e-today.e-flat.e-primary,
.e-calendar .e-css.e-btn.e-today.e-flat.e-primary {
    background-color: #ed7823;
    border-color: #ed7823;
}

.e-calendar .e-btn.e-today.e-flat.e-primary:hover, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:hover {
    background-color: #ed7823;
    border-color: #ed7823;
}

.e-btn.e-flat.e-primary:focus, .e-css.e-btn.e-flat.e-primary:focus {
    background: #ed7823;
    box-shadow: 0 0 0 4px rgba(237, 120, 35, .5);
}

/* Selected Date */
.e-calendar .e-content td.e-selected.e-focused-date span.e-day {
    background-color: #ed7823;
    border-color: #ed7823;
}


/* Toaday not selected */
.e-calendar .e-content td.e-today span.e-day {
    background: none;
    border: none;
    border-radius: 4px;
    box-shadow: inset 2px 0 #ed7823, inset 0 2px #ed7823, inset -2px 0 #ed7823, inset 0 -2px #ed7823;
    color: #ed7823;
}

/* Toaday selected */
.e-calendar .e-content td.e-today.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected.e-focused-date span.e-day {
    background: #ed7823;
}

.e-calendar .e-content td.e-today.e-selected span.e-day {
    box-shadow: inset 2px 0 #ed7823, inset 0 2px #ed7823, inset -2px 0 #ed7823, inset 0 -2px #ed7823;
}




.headerButton>.beamer_icon {
    right: 0px !important;
    top: 10px !important;
}

.beamer_icon {
    right: -25px !important;
}

/* swipeable list-view */

/* scroll snap takes care of restoring scroll position */
.swipe-container {
    display: flex !important;
    overflow: auto;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    padding: 0 !important;
    align-items: unset !important;
}

/* scrollbar should be hidden */
.swipe-container::-webkit-scrollbar {
    display: none;
}

/* main element should always snap into view */
.swipe-container>.swipe-element {
    scroll-snap-align: start;
}

/* actions and element should be 100% wide */
.swipe-container>.action,
.swipe-container>.swipe-element {
    min-width: 100%;
    padding: .5rem 1rem;
}

.swipe-container>.action {
    display: flex;
    align-items: center;
    opacity: 0.55;
}

.swipe-container>.action.active {
    opacity: 1;
}

.swipe-container>.action>ion-icon {
    color: white;
    position: sticky;
    left: 16px;
    right: 16px;
    font-size: 40px;
}

.swipe-container>.action>img {
    color: white;
    position: sticky;
    left: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
}

/* action background colors */
.swipe-container>.left {

}

.swipe-container>.right {
    justify-content: flex-end;
}