/*
 * TimeToFly — App Color Theme
 *
 * Override MobileKit's CSS custom properties to apply the
 * TimeToFly brand colors. All components in MobileKit that
 * reference var(--colorPrimary) or var(--colorSecondary) will
 * automatically pick up these values.
 *
 * To change the app colors, update the values below.
 * See also: wwwroot/scss/_colors.scss for the SCSS equivalent.
 */
:root {
    --colorPrimary:   #87a2a0;
    --colorSecondary: #87a2a0;
}

body {
    font-family: "Poppins", sans-serif;
}

#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: 70px !important;
}

.listview {
    line-height: 1.3em;
}

.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;
}

.leaflet-bottom {
    z-index: 900 !important;
}

.appHeader.scrolled.bg-primary.is-active .headerButton {
    color: var(--colorPrimary) !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;
}

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

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

body.dark-mode-active .footer-logo {
    content: url(/images/tenants/timetofly-dark.png);
}

.profileBox a {
    color: rgba(255,255,255,.5) !important;
}

.appHeader.scrolled.is-active,
.appHeader.scrolled {
    background: var(--colorPrimary);
}

.bg-primary {
    background: var(--colorPrimary) !important;
    color: #fff;
}

.profileBox {
    background: var(--colorPrimary) !important;
}

/*.appHeader .left .headerButton,
.appHeader .right .headerButton{
    color: var(--colorPrimary);
}
*/
body.dark-mode-active .form-switch .form-check-input:checked ~ .form-check-label:after,
.form-switch .form-check-input:checked ~ .form-check-label:after {
    background-color: #008000;
    border-color: #008000 !important;
}

.fab-button .fab:hover, .fab-button .fab:active,
.fab-button .fab {
    background-color: var(--colorPrimary);
}

.appBottomMenu .item.active i.bi, .appBottomMenu .item.active i.icon, .appBottomMenu .item.active ion-icon, .appBottomMenu .item.active strong {
    color: var(--colorPrimary) !important;
}

.btn-check:checked + .btn-outline-secondary {
    background: var(--colorSecondary) !important;
    border-color: var(--colorSecondary) !important;
}

.btn-outline-secondary {
    background: transparent;
}

/* Order management capacity calendar */
.capacity-calendar {
    width: 100%;
}

    .capacity-calendar .e-calendar {
        max-width: 100%;
        width: 100%;
    }

.e-calendar .e-content td.capacity-available span.e-day {
    background-color: #28a745;
    color: #fff;
    border-radius: 50%;
}

.e-calendar .e-content td.capacity-low span.e-day {
    background-color: #fd7e14;
    color: #fff;
    border-radius: 50%;
}

.e-calendar .e-content td.capacity-full span.e-day {
    background-color: #dc3545;
    color: #fff;
    border-radius: 50%;
}


/* Has Orders*/
.e-calendar .e-content td.has-orders span.e-day {
    font-weight: 700;
}

.e-calendar .e-content td.past-date span.e-day {
    opacity: 0.45;
}

/* 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: var(--colorPrimary);
    border-color: var(--colorPrimary);
}

    .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: var(--colorPrimary);
        border-color: var(--colorPrimary);
    }

.e-btn.e-flat.e-primary:focus, .e-css.e-btn.e-flat.e-primary:focus {
    background: var(--colorPrimary);
    box-shadow: 0 0 0 4px rgba(135, 162, 160, .5);
}

/* Today */
/* Selected Date */
.e-calendar .e-content td.e-selected.e-focused-date span.e-day {
    background-color: var(--colorPrimary);
    border-color: var(--colorPrimary);
    border-radius: 4px;
}

.e-calendar .e-content td.e-selected.e-focused-date.capacity-available span.e-day {
    background-color: #28a745;
    color: #fff;
}

.e-calendar .e-content td.e-selected.e-focused-date.capacity-low span.e-day {
    background-color: #fd7e14;
    color: #fff;
}

.e-calendar .e-content td.e-selected.e-focused-date.capacity-full span.e-day {
    background-color: #dc3545;
    color: #fff;
}

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

/* Today 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: var(--colorPrimary);
}

.e-calendar .e-content td.e-today.e-selected span.e-day {
    box-shadow: inset 2px 0 var(--colorPrimary), inset 0 2px var(--colorPrimary), inset -2px 0 var(--colorPrimary), inset 0 -2px var(--colorPrimary);
}

/* Today no value set */
.e-calendar .e-content td.e-focused-date.e-today span.e-day {
    box-shadow: inset 2px 0 var(--colorPrimary), inset 0 2px var(--colorPrimary), inset -2px 0 var(--colorPrimary), inset 0 -2px var(--colorPrimary);
}

.e-calendar .e-content td.e-focused-date.e-today.capacity-available span.e-day {
    background-color: #28a745;
    color: #fff;
}

.e-calendar .e-content td.e-focused-date.e-today.capacity-low span.e-day {
    background-color: #fd7e14;
    color: #fff;
}

.e-calendar .e-content td.e-focused-date.e-today.capacity-full span.e-day {
    background-color: #dc3545;
    color: #fff;
}


.btn-secondary {
    background: var(--colorSecondary) !important;
    border-color: var(--colorSecondary) !important;
    color: #fff !important;
}

.stepper-secondary .stepper-button {
    background: var(--colorSecondary) !important;
    border-color: var(--colorSecondary) !important;
}

.stepper-secondary .form-control {
    border-color: var(--colorSecondary) !important;
    color: var(--colorSecondary) !important;
}

.btn-sm i.bi, .btn-sm i.icon, .btn-sm ion-icon {
    margin-right: 0px !important;
}

.bg-secondary {
    background: var(--colorSecondary) !important;
}

.e-richtexteditor .e-rte-content .e-content,
.e-richtexteditor .e-source-content .e-content {
    font-size: 10pt;
}

.alert-warning {
    background: #e6b939;
    border: 1px solid #e6b939;
}

/* Dark mode overrides for Syncfusion calendar */
body.dark-mode-active .e-calendar {
    background-color: #0f1c2f;
    border-color: #1b283b;
}

body.dark-mode-active .e-calendar .e-header {
    background-color: #0f1c2f;
}

body.dark-mode-active .e-calendar .e-header .e-title,
body.dark-mode-active .e-calendar .e-header .e-prev,
body.dark-mode-active .e-calendar .e-header .e-next {
    color: #fff;
}

body.dark-mode-active .e-calendar .e-content {
    background-color: #0f1c2f;
}

body.dark-mode-active .e-calendar .e-content th {
    color: #8195a6;
}

body.dark-mode-active .e-calendar .e-content td span.e-day {
    color: #fff;
}

body.dark-mode-active .e-calendar .e-content td.e-other-month span.e-day {
    color: #4a5f72;
}

body.dark-mode-active .e-calendar .e-content td:hover span.e-day,
body.dark-mode-active .e-calendar .e-content td:focus span.e-day {
    background-color: #1b283b;
    color: #fff;
}

body.dark-mode-active .e-calendar .e-footer-container {
    background-color: #0f1c2f;
    border-top-color: #1b283b;
}

/* 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 > .right {
    justify-content: flex-end;
}