/*  ROOT ------------------------------------------------------*/
:root {
    /*--bs-primary-bg: #37517e;*/
    --bs-primary-bg: #283a5a;
    /*--bs-primary-rgb: 55, 81, 126;*/
    --bs-primary-rgb: 40, 58, 90;
    /*--bs-body-bg: var(--bs-secondary-bg);*/
    --header-height: 68px;
    --heading-color: var(--bs-primary-bg); /* Color for headings, subheadings and title throughout the website. This is a darker shade of the primary background color to ensure good contrast and readability */

    --accent-color: #47b2e4; /* from main.css */
    --bs-nav-link-color: var(--accent-color);
    --bs-link-color-rgb: rgba(13, 110, 253, 1);
}

/*  GENERAL ---------------------------------------------------*/
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--bs-secondary-bg);
    overflow-y: scroll;
}

header {
    width: 100%;
    padding: 0;
}

main {
    flex: 1 0 auto;
}

footer {
    width: 100%;
    flex-shrink: 0;
    font-size: 14px;
    position: relative;
}

.layout-root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Add margin to main when a fixed header is present (for hybrid Blazor/Razor layouts) */
.layout-root > header.header.fixed-top + main.main {
    margin-top: 68px;
}

/* Remove the top margin in Index*/
.index-page .layout-root > header.header.fixed-top + main.main {
    margin-top: 0;
}

a, .btn {
    color: var(--bs-link-color);
    text-decoration: none;
}

    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

h1:focus {
    outline: none;
}

.light-background {
    --background-color: #f5f6f8;
    --surface-color: #ffffff;
}

/* Keep bootstrapmade w/ custom bootstrap*/
.dark-background {
    --background-color: var(--bs-primary-bg);
}

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

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

/*  GLOBAL HEADER ---------------------------------------------*/
.header {
    --background-color: var(--bs-primary-bg);
    --heading-color: #ffffff;
    --nav-color: #ffffff;
    background-color: var(--background-color);
    transition: background-color 0.3s;
    width: 100%;
    padding: 0;
}

    .header .logo {
    }

        .header .logo img {
            max-height: 38px;
            margin-right: 0; /* override arsha*/
        }

@media (max-width: 1200px) {
    .header .logo {
        order: unset;
    }
}

/* this is the same as .navbar-dark */
.header .navbar {
    --bs-navbar-color: rgba(255, 255, 255, 0.55);
    --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/*  Theme Dropdown --------------------------------------------*/
.theme-dropdown .btn {
    padding: 0;
    /*margin-right: 0;*/
}

@media (max-width: 640px) {
    .theme-dropdown {
        /*margin-left: 0;*/
        /*margin-right: auto;*/ /*doesn't work in MainLayout top row*/
    }
}

/*  GLOBAL FOOTER ---------------------------------------------*/
.footer {
    /* same as --bs-nav-link-color to match header*/
    --app-blue-bg-color: #a7acb1; /*dark theme --bs-body-color */
    background-color: var(--bs-primary-bg);
    color: var(--app-blue-bg-color);
    padding: 0;
}

/*  ACCORDION -------------------------------------------------*/
.accordion-button {
    font-size: 1.2rem;
    color: var(--bs-accordion-btn-color);
    background-color: var(--bs-accordion-btn-bg);
}

    .accordion-button:not(.collapsed) {
        color: var(--bs-accordion-active-color);
        background-color: var(--bs-primary-bg);
        box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
    }

.accordion-item:first-of-type.no-radius {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/*
    --kendo-color-tertiary-subtle: #e2d9f3;
    --kendo-color-tertiary-subtle-hover: #d3c5ec;
    --kendo-color-tertiary-subtle-active: #c5b3e6;
    --kendo-color-tertiary: #6f42c1;
    --kendo-color-tertiary-hover: #59359a;
    --kendo-color-tertiary-active: #4e2f89;
    --kendo-color-tertiary-emphasis: rgba(111, 66, 193, 0.4);
    --kendo-color-tertiary-on-subtle: #432874;
    --kendo-color-on-tertiary: #ffffff;
    --kendo-color-tertiary-on-surface: #6f42c1;
*/

/*  ALERTS & NOTIFICATIONS ------------------------------------*/
.account-area .alert .alert-link {
    font-weight: normal;
}

.alert-purple, .text-bg-purple {
    background-color: var(--kendo-color-tertiary);
    border-color: var(--kendo-color-on-tertiary);
    color: var(--kendo-color-on-tertiary);
}

    .alert-purple a.link-primary {
        color: #fff !important;
        text-decoration-color: #fff !important;
    }

.alert.alert-primary {
    background-color: var(--bs-primary-bg);
    outline-color: #fff;
    color: #fff;
    border: 1px solid #004173;
}

    .alert.alert-primary .alert-title, .alert.alert-primary a:not(.button) {
        color: #9ccbee;
    }

.alert i {
    color: var(--bs-color);
    font-size: 1.25rem;
    margin-right: .55rem;
}

.k-notification-group {
    z-index: 10004;
}

.k-notification-success {
    color: #fff;
    background-color: #0d462c;
}

/*  BACKGROUNDS -----------------------------------------------*/
.text-bg-tertiary {
    background-color: var(--bs-secondary-bg-subtle);
}

/*  BACKLOG ---------------------------------------------------*/
.backlog .card {
    position: relative; /* Ensure the card is the positioning context */
}

    .backlog .card .card-body {
        padding: 0;
    }

.backlog .dropdown-menu {
    /* Limit the height of the dropdown menu and add a vertical scrollbar */
    max-height: 325px; /* Set the maximum height */
    overflow-y: auto; /* Enable vertical scrolling */
}

.backlog .k-switch-label-on, .backlog .k-switch-label-off {
    display: inline;
    font-size: 0.5rem;
}

.backlog .k-switch-label-on {
    left: 3px;
    color: #ffffff;
    text-transform: uppercase;
}

.backlog .k-switch-label-off {
    right: 5px;
    color: var(--bs-gray-500);
    text-transform: uppercase;
}

.backlog .list-group-sm {
    max-width: 100%
}

    .backlog .list-group-sm .list-group-item {
        padding: 0;
        max-width: 100%;
    }

        .backlog .list-group-sm .list-group-item .label {
            min-width: 7.5rem;
            width: 7.5rem;
        }

.backlog .masthead {
    --bd-pink-rgb: 214,51,132;
    padding: 3rem 0;
    background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0.01), rgba(var(--bs-body-bg-rgb), 1) 85%),radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), 0.5), transparent 50%),radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), 0.5), transparent 50%),radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), 0.5), transparent 50%),radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), 0.5), transparent 50%);
}

.backlog .notification {
    position: absolute;
    width: 300px;
    z-index: 10004; /* Ensure it appears above other elements */
}

/* APPEARS UNUSED */
.backlog .notice {
    background-color: #ffe484;
    box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), 0.15),0 0.25rem 1.5rem rgba(var(--bs-body-bg-rgb), 0.75);
}

.backlog .work-item {
    /* work item wrapper (middle column) inside card */
    display: flex;
    flex-direction: column;
    padding: .25rem;
    overflow: visible;
    position: relative; /* Ensure z-index works */
    width: 100%;
}

    .backlog .work-item .badge {
        padding-top: .425rem;
    }

        .backlog .work-item .badge.inspector {
            padding: 0;
        }

    .backlog .work-item .inspector .btn-group-sm > .btn, .backlog .work-item .inspector .btn-sm {
        --bs-btn-padding-y: 0.25rem;
        --bs-btn-padding-x: 0.40rem;
        --bs-btn-font-size: 0.675rem;
        --bs-btn-border-radius: var(--bs-border-radius-pill);
        font-weight: 700;
    }

.backlog .inspector.k-picker-sm {
    font-size: 0.675rem;
    font-weight: 700;
}

.backlog .inspector.k-picker-flat {
    border: 0;
}

.backlog .inspector .k-input-inner {
    background-color: transparent;
    padding-block: .125rem;
    padding-inline: .25rem;
}

.backlog .inspector .k-input-button {
    padding-block: .15rem;
    padding-inline: .15rem;
}

.backlog .inspector .k-picker-flat {
    border-radius: var(--bs-border-radius-pill) !important;
}

/*  BORDERS ---------------------------------------------------*/
.bd-example {
    /*wrapper for small tables and such*/
    padding: 1rem;
    border: solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    border-width: 1px;
}

/*  BUSY INDICATOR --------------------------------------------*/
.loading-page-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 2.0em;
    background-color: var(--bs-primary-bg);
    color: var(--bs-white);
}

.alert-busy {
    background-color: var(--bs-primary-bg);
    outline-color: #fff;
    color: #fff;
    border: 1px solid #004173;
    display: flex;
    justify-content: center;
    align-items: center;
}

.busy {
    position: relative;
    width: 10ch; /* Adjust the width to fit "Loading" and the dots */
    text-align: center;
}

    .busy::after {
        content: "";
        position: absolute;
        /* this causes positioning problems inside "views"/cards */
        /*left: 130px;*/ /* Move the dots right according to the font size and text*/
        animation: busyDots 1000ms infinite steps(3);
    }

@keyframes busyDots {
    0% {
        content: "";
    }

    33% {
        content: ".";
    }

    66% {
        content: "..";
    }

    100% {
        content: "...";
    }
}

#loading {
    position: fixed;
    inset: 0;
    z-index: 999999;
    overflow: hidden;
    background: var(--background-color);
    transition: all 0.6s ease-out;
}

    #loading:before {
        content: "";
        position: fixed;
        top: calc(50% - 30px);
        left: calc(50% - 30px);
        border: 6px solid #ffffff;
        border-color: var(--accent-color) transparent var(--accent-color) transparent;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: animate-preloader 1.5s linear infinite;
    }

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*  BUTTONS ---------------------------------------------------*/
.avatar {
    border: 1px solid #666;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    color: white;
    font-weight: 400;
    font-size: 0.875rem;
    vertical-align: middle;
    text-align: center;
}

.bi.circle-bg-fill {
    display: inline-flex;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: .75rem;
}

.btn-inline-delete {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    width: 40px;
    padding-bottom: 14px;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn-secondary {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.btn.btn-more-dots::before {
    font-weight: normal;
    content: "•••";
}

.btn-command {
    border-color: transparent;
    --bs-btn-padding-x: 1.0rem;
}

    .btn-command:hover {
        /* same as btn-outline-secondary*/
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: #6c757d;
        --bs-btn-hover-border-color: #6c757d;
    }

    .btn-command.active :not(.btn-check) + .btn:active {
        /* same as btn-outline-secondary*/
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: #6c757d;
        --bs-btn-active-border-color: #6c757d;
    }

    .btn-command .bi {
        /*color: var(--bs-body-color);*/
        opacity: 1.0;
        font-size: 1rem;
    }

    .btn-command .btn-command-text {
        /*opacity: 0.8;*/
        margin-left: 0.25rem;
        display: none;
    }

    .btn-command:disabled {
        border-color: transparent;
    }

@media (min-width: 768px) {
    .btn-command .btn-command-text {
        display: inline-block !important;
    }
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    --bs-btn-disabled-opacity: 0.25;
}

button.row-selector {
    padding: 0;
    border: 0;
    border-radius: 0;
    width: 23px;
}

.more-caret {
    /*expand/collapse chevron*/
    color: var(--bs-link-color);
    background-color: rgba(var(--bs-secondary-bg-rgb), .25);
    display: flex;
}

    .more-caret .bi-chevron-compact-down {
        transition: 0.35s;
    }

    .more-caret:is(.collapsed) .bi-chevron-compact-down {
        transform: rotate(0deg);
    }

    .more-caret:not(.collapsed) .bi-chevron-compact-down {
        transform: rotate(180deg);
    }

    .more-caret svg {
        flex: auto;
    }

h5 .btn-link {
    position: relative;
    top: -2.5px;
}

.item-separator {
    height: 2px;
}

.k-color-picker,
.k-colorpicker {
    width: 100%;
}

/*  CARDS -----------------------------------------------------*/
.card {
    /*width: 100%;*/
}

    .card .card-header .card-title {
        font-size: 1.125rem;
        font-weight: 400;
        margin-bottom: 0;
        text-transform: uppercase;
    }

    .card .card-header .card-tools {
        display: flex;
        padding-left: 0.5rem;
    }

        .card .card-header .card-tools .btn {
            text-decoration: none;
            color: var(--bs-body-color);
            border-color: var(--bs-card-bg);
            font-size: 1.0rem;
            font-weight: 400;
            padding: 2px .5rem;
        }

        .card .card-header .card-tools .vr {
            font-weight: normal;
            height: 100%;
            margin: 0 0.5rem;
        }

    .card .card-body {
        padding: 0.75rem;
    }

        .card .card-body > .list-group {
        }

            .card .card-body > .list-group .list-group-item {
            }

            .card .card-body > .list-group .list-group-item,
            .card .card-body > .table > :not(caption) > * > * {
                padding: .15rem;
            }

                .card .card-body > .list-group .list-group-item.expander {
                    padding: 0;
                }

                    .card .card-body > .list-group .list-group-item.expander .list-group-item,
                    .card .card-body > .list-group .list-group-item.indent {
                        /*indents the list-group-item with bottom border*/
                        margin-left: 20px;
                    }

                .card .card-body > .list-group .list-group-item.indent-2 {
                    /*this one is indent within an indent*/
                    margin-left: 40px !important;
                }

                .card .card-body > .list-group .list-group-item .field {
                    padding: 0.05rem 0.5rem;
                }

                    .card .card-body > .list-group .list-group-item .field .dropdown {
                        overflow: visible;
                    }

                    .card .card-body > .list-group .list-group-item .field .badge {
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                .card .card-body > .list-group .list-group-item .label {
                    padding: 0.05rem 0.5rem 0.05rem 0.05rem;
                    overflow-wrap: break-word;
                }

                .card .card-body > .list-group .list-group-item .field .link {
                    /*edit link btn*/
                    padding: 0.15rem 0.75rem;
                }

                .card .card-body > .list-group .list-group-item .label {
                    flex: 1 0 125px;
                    max-width: 220px;
                }

                .card .card-body > .list-group .list-group-item.expander .label,
                .card .card-body > .list-group .list-group-item.indent .label {
                    /* indent the listgroup-item within an expander by 20px */
                    flex: 1 0 105px;
                    max-width: 200px;
                }

                .card .card-body > .list-group .list-group-item.indent-2 .label {
                    /*this one is indent within an indent*/
                    /* indent the listgroup-item within an expander by 40px */
                    flex: 1 0 85px;
                    max-width: 180px;
                }

                .card .card-body > .list-group .list-group-item > .label + * {
                    /* width of fields */
                    flex: 1 0 10rem;
                    /*max-width: 760px;*/
                }

                .card .card-body > .list-group .list-group-item .label {
                    padding-right: 1.0rem;
                }

                    .card .card-body > .list-group .list-group-item .field a,
                    .card .card-body > .list-group .list-group-item .label a {
                        cursor: pointer;
                    }

@media (max-width: 500px) {
    .card .card-body > .list-group .list-group-item .field {
        font-weight: 300;
        font-size: .9rem;
    }

    .card .card-body > .list-group .list-group-item .label {
        padding-top: 4px;
        font-size: .75rem;
        font-weight: 100;
        line-height: 1;
    }
}

/*see AspNetUserLoginView for use of form-label-btns - consider eliminate*/
.card .card-body > .list-group .list-group-item .field .form-field-btns,
.card .card-body > .list-group .list-group-item .label .form-label-btns {
    /*div for buttons in form label or field*/
    margin-inline-start: auto;
    align-items: center;
}

    .card .card-body > .list-group .list-group-item .field .form-field-btns .btn-group .btn,
    .card .card-body > .list-group .list-group-item .label .form-label-btns .btn-group .btn {
        /*shrink button by reducing padding and hide border*/
        --bs-btn-padding-y: 0.125rem;
        --bs-btn-padding-x: 0.5rem;
        --bs-btn-border-color: transparent;
        color: var(--bs-emphasis-color);
    }

    .card .card-body > .list-group .list-group-item .field .form-field-btns .btn-group .dropdown-toggle::after,
    .card .card-body > .list-group .list-group-item .label .form-label-btns .btn-group .dropdown-toggle::after {
        /*remove the dropdown button caret*/
        content: none;
    }

.card .card-body .table tbody tr td:last-child {
    /* right side command column */
}

.backlog .card {
    border-radius: 0;
    border-top: 0;
}

/*  DIALOGS & WINDOWS -----------------------------------------*/
/*  Extra small None <576px
    Small sm ≥576px
    Medium md ≥768px
    Large lg ≥992px
    Extra large xl ≥1200px
    Extra extra large xxl ≥1400px*/

.k-dialog {
    width: 100%;
    /*max-width: 768px;*/
    max-width: 576px;
}

@media (max-width: 576px) {
    .k-dialog {
        width: 100%;
        max-width: 558px;
    }
}

.k-dialog, .k-window {
    max-height: calc(100vh - 50px);
}

.k-dialog-content .dialog-info {
    margin: -1rem -1rem .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.k-dialog-content .task-info {
    margin: -1rem -1rem .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-white);
    background-color: var(--bs-purple);
}

.k-dialog-wrapper .k-dialog {
    position: absolute;
    top: 50px;
}

.k-window-content, .k-dialog-content {
    /*zero padding doesn't work for normal dialogs*/
    /*some error messages can be long*/
    overflow-wrap: anywhere;
}

    .k-window-content.k-dialog-content .nav-underline {
        margin-left: -1rem;
        margin-right: -1rem;
        margin-top: -1rem;
    }

    .k-window-content.k-dialog-content .k-form .k-form-buttons {
        margin-left: -1rem;
        margin-right: -1rem;
        border-bottom-left-radius: var(--bs-border-radius);
        border-bottom-right-radius: var(--bs-border-radius);
        display: block;
    }

    .k-window-content.k-dialog-content .k-form.form-inline .k-form-field {
        margin: 0;
    }

        .k-window-content.k-dialog-content .k-form.form-inline .k-form-field .label {
            vertical-align: middle;
            margin: 0;
        }

    .k-window-content.k-dialog-content .k-form.form-inline .k-form-buttons {
        background-color: transparent !important;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .k-window-content.k-dialog-content .k-toolbar {
        margin-left: -1.0rem;
        margin-right: -1.0rem;
        margin-top: -1.0rem;
        border-radius: 0;
        border: 0;
    }

.k-window-titlebar-action {
    opacity: 0.75;
}

/*  DRAWER ----------------------------------------------------*/
.k-drawer {
}

    .k-drawer .drawer-body {
        padding: 1rem;
    }

        .k-drawer .drawer-body .card {
            margin-bottom: 1rem;
        }

        .k-drawer .drawer-body .view {
            border-bottom: 1px solid var(--bs-border-color);
        }

    .k-drawer .drawer-header {
        display: flex;
        padding: .65rem 1rem;
        background-color: var(--bs-tertiary-bg) !important;
    }

        .k-drawer .drawer-header .btn-close {
            margin-left: auto;
            padding: 1rem;
        }

.k-drawer-overlay .k-drawer {
    max-width: 100%;
    width: 640px;
}

@media (max-width: 640px) {
    .k-drawer-overlay .k-drawer {
        width: 100%;
    }
}

/*  DROPDOWNS -------------------------------------------------*/
.dropdown-arrow-none::after {
    display: none;
}

/* make the picker focus border consistent with other inputs*/
.k-picker-solid:focus-within {
    border-color: var(--kendo-color-primary-emphasis, #0a53be);
    color: var(--kendo-color-on-app-surface, #ffffff);
    background-color: var(--kendo-color-surface-alt, #000000);
    /*box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent);*/
}

/*  FORM ------------------------------------------------------*/

/*is this for arsha (ContactUsForm) or blazor ?*/
.form .row {
    /*keep consistent with form-group & form-floating bottom-margin*/
    --bs-gutter-x: 0.5rem;
}

.form-floating, .form-group, .form-field {
    /*keep consistent with .row{--bs-gutter-x} */
    margin-bottom: 0.5rem;
}

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

.form-header {
    display: flex;
    font-weight: 400;
    font-size: 1.1rem;
    padding-bottom: .35rem;
    padding-right: .75rem;
    margin-top: .75rem;
}

    .form-header a {
        cursor: pointer;
        margin-left: .5rem;
        font-size: 1rem;
        font-weight: normal;
        margin-left: auto;
        padding: 0 .75rem;
    }

        .form-header a i {
            font-size: 16px;
            position: relative;
            top: -3px;
        }

    .form-header i, .accordion-button i {
        top: -1px;
        position: relative;
        font-size: 20px;
        margin-inline-end: .5rem;
    }

    .form-header .expander-button {
        border: 0;
        font-weight: 500;
        font-size: 1.1rem;
        padding: 0;
        text-align: left;
        width: 100%;
    }

        .form-header .expander-button:not(.collapsed)::after {
            background-image: var(--bs-accordion-btn-active-icon);
            transform: var(--bs-accordion-btn-icon-transform);
        }

        .form-header .expander-button::after {
            flex-shrink: 0;
            width: var(--bs-accordion-btn-icon-width);
            height: var(--bs-accordion-btn-icon-width);
            margin-left: auto;
            content: "";
            background-image: var(--bs-accordion-btn-icon);
            background-repeat: no-repeat;
            background-size: var(--bs-accordion-btn-icon-width);
            transition: var(--bs-accordion-btn-icon-transition);
        }

    .form-header .form-header-btns {
        margin-left: auto;
    }

        .form-header .form-header-btns .btn {
            --bs-btn-padding-y: 0.125rem;
            --bs-btn-padding-x: 0.5rem;
            --bs-btn-font-size: 0.875rem;
            --bs-btn-border-radius: var(--bs-border-radius-sm);
            --bs-btn-border-color: transparent;
        }

.form-section {
    margin-top: .5rem;
    margin-bottom: 1.5rem;
}

    .form-section .form-section-title {
        font-size: 1.5rem;
        font-weight: 400;
        color: var(--bs-body-color);
    }

    .form-section .form-section-subtitle {
        color: var(--bs-body-color);
    }

.form-item-borderless {
    border: 0 !important;
}

.form-items-expander .form-items li .field {
    /*field inside expander*/
    flex-basis: 196px;
    font-weight: normal;
}

.form-select option {
    min-height: 1.2rem;
    padding: 1rem;
}

.form-footer {
    padding: .875rem;
    width: 100%;
    text-align: center;
}

.account-area .form-footer {
    border-top: solid 1px var(--bs-border-color);
    margin-top: 1.5rem;
}

.k-window-content.k-dialog-content .form-footer {
    margin-bottom: -1rem;
}

.form-footer .btn {
    margin: 0 .125rem;
}

.k-form-md .k-form-field {
    margin-top: 0;
}

.accordion-button .k-form-field {
    margin-bottom: 0;
}

.k-form-field {
    margin-bottom: .5rem;
}

    .k-form-field .k-input-md .k-input-inner,
    .k-form-field .k-picker-md .k-input-inner {
        padding: 0.5rem;
    }

.k-form.form-inline .k-form-field, .k-form.form-inline .k-form-field-wrap {
    display: inline-flex;
}

.form-label,
.k-label.k-form-label,
.k-form .k-form-field > .k-label,
.k-form .k-form-field > kendo-label,
.k-form .k-form-label {
    margin-bottom: 0;
}

.k-form .k-form-legend, .k-form-inline .k-form-legend {
    border-bottom: 2px solid #fff;
}

.k-form .k-form-fieldset.no-legend {
    /* addition of no-legend class to remove form-group border and top margin */
    margin: 0;
}

    .k-form .k-form-fieldset.no-legend .k-form-legend {
        margin: 0;
        border: 0;
    }

/*  GRIDS -----------------------------------------------------*/
.grid {
    box-sizing: border-box;
    overflow-x: auto;
    min-width: 0;
    width: 100%;
    /* Add any other layout helpers you want here */
}

.grid-header {
    border-left: solid 1px var(--bs-border-color);
    border-right: solid 1px var(--bs-border-color);
    border-top: solid 1px var(--bs-border-color);
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
    padding: 1rem;
    font-weight: 400;
}

.k-grid {
}

    .k-grid .k-cell-inner .k-grid-filter, .k-grid .k-cell-inner .k-header-column-menu, .k-grid .k-cell-inner .k-grid-header-menu {
        position: static;
        margin-inline-end: 0.25rem;
    }


    .k-grid .k-command-cell {
        padding: 0 !important;
    }

        .k-grid .k-command-cell button {
            height: 40px;
            width: 35px;
            padding: 0;
            border: 0;
            border-radius: 0;
            background-color: transparent;
        }

            .k-grid .k-command-cell button.row-selector {
                width: 23px;
            }

    .k-grid td, .k-grid .k-table-td {
        white-space: nowrap;
    }

    .k-grid th, .k-grid td {
        white-space: nowrap;
    }

    .k-grid .k-grouping-header {
        border-top: solid 1px var(--kendo-color-border, rgba(222, 226, 230, 0.22));
    }

.k-grid-norecords .k-table-td {
    text-align: left;
    padding: 1rem;
    color: var(--bs-secondary-color);
}
/*  ICONS -----------------------------------------------------*/
.bi-camera, .bi-camera-fill {
    /*color: #8f8f8f;*/
}

.bi-caret-up::before {
    font-size: 1.4rem;
}

.bi-images {
    /*color: #b365da;*/
}

.bi-pencil {
    /*color: #e0a800;*/
}

.bi-plus, .bi-plus-circle {
    color: #26b050;
}

.bi-save, .bi-save-fill, .bi-save2, .bi-save2-fill, .bi-floppy, .bi-floppy-fill, .bi-floppy2, .bi-floppy2-fill {
    /*color: #fff;*/
}

.bi-trash {
    color: #d9534f;
}


/*  INPUTS ----------------------------------------------------*/

/*  PICS/INPUT-PIC --------------------------------------------*/
input.form-control, input.k-input.inner, .k-input-solid {
    border-color: var(--bs-border-color);
    background-color: var(--bs-secondary-bg);
}

.k-picker {
    border: 1px solid var(--bs-border-color);
}

.input-pic {
    opacity: 1;
    width: 0;
    border: none;
}

.k-input-solid {
    /*this is the X inside an input*/
}

.k-i-x::before {
    /*increase X button icon size*/
    font-size: 1.75em;
    opacity: 0.875;
}

.k-messagebox-error ul {
    margin-block-end: 0.2em;
}

.k-overlay {
    opacity: .75;
}

.k-popup .k-actions, .k-popup .k-edit-buttons, .k-popup .k-action-buttons, .k-popup .k-columnmenu-actions, .k-popup .k-form-buttons {
    /*no margin needed in datetime picker footer*/
    /*watch for adverse affects to others*/
    margin-top: 0;
}

.k-step-indicator,
.k-step-label {
    cursor: pointer;
}

.k-switch-sm .k-switch-thumb {
    /* norm 20x20 */
    width: 18px;
    height: 18px;
}

.k-switch-sm .k-switch-track {
    /* norm 26x48 */
    width: 40px;
    height: 24px;
}

.notes textarea {
    height: 200px;
}

.pac-container {
    z-index: 100030 !important;
    position: relative;
}

.pac-target-input {
    z-index: 100003 !important;
    position: relative;
    width: 100%;
}

.three-dots .dropdown-toggle::after {
    /*hide the drop down arrow*/
    display: none;
}

/*  LINKS / NAVS ----------------------------------------------*/
.link {
    cursor: pointer;
}

.nav {
    --accent-color: #47b2e4; /* from main.css */
    --bs-nav-link-color: var(--accent-color);
    /*--bs-nav-link-hover-color: var(--bs-secondary-color);*/
    /*--bs-nav-link-active-color: var(--bs-secondary-color);*/
    /*--bs-nav-link-disabled-color: var(--bs-secondary-color);*/
}

.nav-underline .nav-link {
    /*--bs-nav-underline-border-width: 2px;*/
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    cursor: pointer;
}

.more-link {
    text-decoration: none;
}

.property-link {
    color: var(--bs-link-color);
    margin: 0rem 0.25rem 1.25rem 0.25rem;
}

/*  LIST GROUP ------------------------------------------------*/
/*
     # Used in cards & drawers
     # Add the expander class to the list-group-item to expand the field
*/

.list-group {
    /*inherit the bg of the parent*/
    --bs-list-group-bg: transparent;
}

    .list-group .list-group-item .label {
        min-width: 8rem;
        width: 10rem;
    }

    .list-group .list-group-item {
    }

/*  NOTIFICATIONS (see Alerts) --------------------------------*/

/*  PAGE ------------------------------------------------------*/
.breadcrumb-item + .breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider, ">");
}

.page {
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
}

.page-heading {
    margin-bottom: 0;
    padding-top: 0.25rem;
}

.page-title {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    /* no padding for acct */
    background-color: unset; /* override bsm */
    color: var(--bs-body-color);
}

    .page-title h1 {
        color: var(--bs-body-color);
    }

    .page-title .breadcrumb {
        padding-inline-start: .1rem;
        margin-bottom: 0;
        padding-bottom: 0.5rem;
    }

        .page-title .breadcrumb .breadcrumb-item a {
            text-decoration: none;
        }

    .page-title .btn-go-back {
        position: relative;
        top: -3px;
        padding: 0;
        margin: 0;
    }

    .page-title h1 {
        /* keep default for acct*/
        /*margin-bottom: 0;*/
    }

.account-area .page-title {
    margin-bottom: 1rem;
}

/*  RECONNECT DIALOG ------------------------------------------*/
.components-reconnect-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10100;
    display: none;
    overflow: hidden;
    animation: components-reconnect-fade-in;
}

    .components-reconnect-overlay.components-reconnect-visible {
        display: block;
    }

    .components-reconnect-overlay::before {
        content: '';
        background-color: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        animation: components-reconnect-fadeInOpacity 0.5s ease-in-out;
        opacity: 1;
    }

    .components-reconnect-overlay p {
        margin: 0;
        text-align: center;
    }

    .components-reconnect-overlay button {
        border: 0;
        background-color: #6b9ed2;
        color: white;
        padding: 4px 24px;
        border-radius: 4px;
    }

        .components-reconnect-overlay button:hover {
            background-color: #3b6ea2;
        }

        .components-reconnect-overlay button:active {
            background-color: #6b9ed2;
        }

.components-reconnect-dialog {
    position: relative;
    background-color: #fafad2; /* light goldenrod yellow */
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    animation: components-reconnect-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-fadeInOpacity 0.5s ease-out 0.3s;
    animation-fill-mode: forwards;
    z-index: 10001;
}

.components-rejoining-animation {
    display: block;
    position: relative;
    width: 68px;
    height: 80px;
}

    .components-rejoining-animation div {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2) {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

@keyframes components-reconnect-fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-slideUp {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

#components-reconnect-modal,
.components-reconnect-dialog,
.components-rejoining-animation {
    color: #000;
}

#components-reconnect-modal {
    z-index: 10101 !important;
    background-color: #ffe484;
}

    #components-reconnect-modal .components-reconnect-overlay {
        z-index: 10100 !important;
    }

.components-reconnect-dialog {
    position: relative;
    background-color: #fafad2; /* light goldenrod yellow */
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    animation: components-reconnect-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-fadeInOpacity 0.5s ease-out 0.3s;
    animation-fill-mode: forwards;
    z-index: 10001;
}

/*  TABLES ----------------------------------------------------*/
.card-body .table {
    margin: 0;
}

    .card-body .table tr:last-child td {
        border-bottom: none;
        border-bottom-left-radius: var(--bs-border-radius);
        border-bottom-right-radius: var(--bs-border-radius);
    }

.table-fixed {
    table-layout: auto;
}

.td-cmd {
    /*padding: 0 !important;*/
    width: 28px;
    /*text-align: center;*/
}

    .td-cmd .btn-command {
        /*padding: 0.125rem;*/
        /*border-radius: 0;*/
    }

.td-thumb {
    vertical-align: middle;
    text-align: center;
    width: calc(48px + .3rem);
}

    .td-thumb img {
        max-width: 48px;
        max-height: 48px;
    }

/*  TABS ------------------------------------------------------*/
.tab-strip {
    /*background-color: var(--bs-secondary-bg);*/
    /*border-left: 1px solid var(--bs-border-color);*/
    /*border-right: 1px solid var(--bs-border-color);*/
    /*border-top: 1px solid var(--bs-border-color);*/
    border: 0;
    margin-bottom: 1.0rem;
}

/* tab strip accross the top is placed above the drawer body */
.k-drawer .tab-strip {
    margin: 0;
    padding: 0;
}

/* tab strip within the drawer body for secondary info */
.k-drawer .drawer-body .tab-strip {
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-top: solid 1px var(--bs-border-color);
}

.tab-content {
    border: 0;
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    min-height: 50px; /* provide a short height in case of empty tabs */
}

.tab-info {
    padding: .75rem;
    border: 0;
}

    .tab-info i {
        margin-right: 0.75rem;
    }

/*  TIPS & TOOLTIPS -------------------------------------------*/
.bi-info-circle.hovertip {
    margin-left: 0.5rem;
}

.hovertip.todo {
    color: var(--bs-warning);
}

/*Bootstrap custom popover*/
.custom-popover {
    --bs-popover-max-width: 200px;
    --bs-popover-border-color: var(--bd-violet-bg);
    --bs-popover-header-bg: var(--bd-violet-bg);
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: .5rem;
}
/*Bootstrap custom tooltip*/
.custom-tooltip .tooltip-inner {
    background-color: var(--bd-violet-bg);
    opacity: 1.0;
    color: var(--bs-white);
}

.custom-tooltip .tooltip-arrow::before {
    border-top-color: var(--bd-violet-bg);
    opacity: 1.0;
}

/*  TOOLBARS --------------------------------------------------*/
.k-grid {
    border: 0;
}

    .k-grid .k-grouping-header {
        border-left: solid 1px var(--kendo-color-border);
        border-right: solid 1px var(--kendo-color-border);
        border-bottom: 0;
    }

    .k-grid .k-grid-aria-root {
        border: solid 1px var(--kendo-color-border);
        /*border-top: none;*/
    }

/* only used in ConditionEditor*/
.btn-toolbar {
    background-color: var(--bs-secondary-bg-subtle);
    border-radius: var(--bs-border-radius);
    padding: 0.25rem;
}

/* top of page */
.k-toolbar {
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

    .k-toolbar.k-grid-toolbar {
        border-bottom: none;
        padding: 0.5rem;
        margin-bottom: 0;
    }

/* top of drawer */
.k-drawer .k-toolbar {
    border-left: 0;
    border-right: 0;
    margin-bottom: 0.25rem;
}

.k-toolbar-solid {
    background-color: var(--kendo-color-app-surface);
}

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

.invalid {
    outline: 1px solid red;
}

.validation-errors {
    position: relative;
    padding: .85rem .5rem .85rem 2rem;
    margin-bottom: 2rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    text-align: left;
}

.validation-message {
    color: #721c24;
}