/*  ROOT ------------------------------------------------------*/
:root {
    --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 */

    --header-footer-bg: #283a5a;
    /* keep below to match arsha main.css */
    --accent-color: #47b2e4;
    --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);*/ /*commented for mvc*/
    /*color: var(--bs-body-color);*/ /*commented for mvc*/
    overflow-y: scroll;
}

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

hr {
    border-top: 1px solid var(--bs-border-color);
    opacity: 1;
}

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

h1:focus {
    outline: none;
}

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

/* Keep bootstrapmade w/ custom bootstrap*/
.bg-dark,
.dark-background {
    --background-color: var(--header-footer-bg);
    background-color: var(--background-color) !important;
}

.bg-light {
    background-color: #f7f7f7 !important;
}

.blazor-error-boundary {
    background-color: #b32121; /* replaced invalid data-URI url(...) to fix unclosed function args warning */
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

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

    .header .logo {
        color: var(--nav-color);
        order: 0;
    }

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

.header .navbar-brand {
    font-size: 1rem;
}

.header .navbar-toggler {
    color: var(--bs-gray-500);
    border-color: var(--bs-gray-500);
}

    .header .navbar-toggler .navbar-toggler-icon {
        color: var(--bs-gray-500);
        fill: var(--bs-gray-500);
    }

.header .nav-link {
    color: var(--nav-color);
}

    .header .nav-link.active, .header .nav-link.show {
        color: var(--bs-yellow);
    }

    .header.nav-link:focus, .header .nav-link:hover {
        color: var(--accent-color);
    }

/*  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(--header-footer-bg);
    color: var(--app-blue-bg-color);
    padding: 0;
}

/*  ACCORDION -------------------------------------------------*/
.accordion-button {
    font-size: 1.1rem;
    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;
    color: var(--bs-link-color);
}

.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 i {
    font-size: 1.25rem;
    margin-right: .5rem;
}

.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 {
    display: inline-block;
    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-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 .bi {
        margin-right: 0.5rem;
    }

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

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

/*  DASHBOARD -------------------------------------------------*/
.dashboard {
    padding: .5rem 1rem;
}

/*  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;*/ /* removed for rbi.mvc*/
    }

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

    /* Ensure no theme padding adds a gap between header and body */
    .k-drawer .k-drawer-content,
    .k-drawer .k-drawer-wrapper,
    .k-drawer .k-drawer-items {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

.k-drawer-overlay .k-drawer {
    max-width: 100vw;
    /*width: 640px;*/ /*this width setting makes the rbi.mvc version always visible*/
}

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

/*  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);*/
}

.k-list-item.k-selected .ddlOptionLabelTemplate, .k-selected.k-list-optionlabel .ddlOptionLabelTemplate, .k-selected.k-list-custom-value .ddlOptionLabelTemplate {
    color: var(--kendo-color-on-primary, #ffffff);
    background-color: var(--kendo-color-primary, #0d6efd);
}

.k-list-item.k-selected .k-list-item-text {
    color: var(--kendo-color-on-primary, #ffffff) !important;
}

    .k-list-item.k-selected .k-list-item-text .text-body-secondary {
        color: var(--kendo-color-tertiary-subtle, #e2d9f3) !important;
    }

.k-list-item-text::before {
    content: unset;
}

/*  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;
}

    .ddlOptionLabelTemplate,
    .form-field .form-control-plaintext::placeholder,
    .form-field .form-control::placeholder,
    .form-group .form-control-plaintext::placeholder,
    .form-group .form-control::placeholder,
    .form-floating > .form-control-plaintext::placeholder,
    .form-floating > .form-control::placeholder,
    .form-control::placeholder, .k-input-inner::placeholder,
    .k-multiselect .k-placeholder {
        color: #6c757d;
        font-style: italic;
        font-size: 0.875rem;
        padding: 0;
    }

.form-field-help {
    font-style: italic;
    font-size: .875rem;
    display: block;
    color: #737373;
}

    .form-field-help .btn-link {
        font-size: .875rem;
        text-decoration: none;
    }

.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-label, .col-form-label {
    color: var(--bs-body-color);
    padding-bottom: calc(.05rem + var(--bs-border-width));
    margin-bottom: 0;
    font-size: inherit;
}

    .form-label.required, .col-form-label.required {
        font-weight: normal;
    }

        .form-label.required::after, .col-form-label.required::after {
            content: "*";
            font-weight: bold;
        }

.form-section {
    margin-top: 2.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;
    border-top: 1px solid var(--bs-border-color);
}

.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; where is this needed*/
    }

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

.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 {
}
    /* hide kendo grid loading indicator since we have our own */
    .k-grid .k-loading-mask, .k-grid .k-overlay, .k-grid .k-loading-image, .k-grid .k-loading-color, .k-grid .k-loader, .k-grid .k-loader-container, .k-grid .k-i-loading {
        display: none !important;
        pointer-events: none !important;
    }

    .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-caret-up::before {
    font-size: 1.4rem;
}

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

/* Google Places Autocomplete dropdown stacking
   - Kendo overlay:        z-index: 10001 (bootstrap-main.css)
   - Notifications:        z-index: 10004 (app.css)
   - Kendo tooltips/menu:  z-index: 12000 (bootstrap-main.css)
   - Kendo loader:         z-index: 20001 (bootstrap-main.css)
   - Global #loading:      z-index: 999999 (app.css)
   Place the predictions above overlays/notifications but below loaders. */
.pac-container {
    z-index: 12000 !important; /* align with Kendo tooltip/context menu */
}

.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;
}
/* rem'd for rbi mvc */
/*.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, ">");
}

@media (max-width: 991.98px) {
    .page.rounded {
        border-radius: 0 !important;
    }

    .page.shadow {
        box-shadow: none !important;
    }
}

.page {
    /*border: 1px solid var(--bs-border-color);*/
    background-color: var(--bs-light-bg-subtle);
}

/* Apply large (lg ≥992px) spacing to .page itself to mirror p-4 my-4 */
@media (min-width: 992px) {
    .page {
        border: 1px solid var(--bs-border-color);
        padding: 1.5rem !important; /* p-4 */
        margin-top: 1.5rem !important; /* my-4 */
        margin-bottom: 1.5rem !important; /* my-4 */
    }
}

.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 */
    padding: 0.5rem 0;
    color: var(--bs-body-color); /* override bsm*/
}

    .page-title h1 { /* override bsm*/
        color: var(--bs-body-color);
    }
    /* bsm
        .page-title h1 {
        font-size: 28px;
        font-weight: 700;
        margin: 0;
    }*/
    .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 {
    background: none;
    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; rem'd for rbi.mvc*/
    /*margin-bottom: 1rem; rem'd for rbi.mvc*/
    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(--bs-purple);
    --bs-popover-header-bg: var(--bs-purple);
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: .5rem;
}

.custom-tooltip {
    --bs-tooltip-bg: var(--bs-purple);
    --bs-tooltip-color: var(--bs-white);
}

.custom-tooltip-icon {
    color: var(--bs-purple);
}

/*  TOOLBARS --------------------------------------------------*/

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

/* Global toolbar utility */
.app-toolbar {
    background-color: var(--bs-secondary-bg-subtle);
    border-radius: var(--bs-border-radius);
    padding: 0.25rem;
}
/* top of drawer */
.k-drawer .k-toolbar {
    border-left: 0;
    border-right: 0;
    margin-bottom: 0.25rem;
}

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

.k-drawer .k-toolbar-items button {
    height: 38px;
}
/* Kendo header/menu buttons alignment inside header cells */
.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;
}

/* VALIDATION ------------------------------------------------*/
.form-control.k-invalid,
.k-picker-solid.k-invalid,
.k-picker-solid.ng-invalid.ng-touched,
.k-picker-solid.ng-invalid.ng-dirty {
    border-color: var(--kendo-color-error, #dc3545);
    background-color: var(--bs-danger-bg-subtle);
    /*box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--kendo-color-error, #dc3545) 25%, transparent);*/
}

    .k-picker-solid.k-invalid .k-input-inner,
    .k-picker-solid.ng-invalid.ng-touched .k-input-inner,
    .k-picker-solid.ng-invalid.ng-dirty .k-input-inner {
        background-color: var(--bs-danger-bg-subtle);
    }


/* all validation styles below for validation helpers found in mvc project */
label.error {
    color: #b94a48;
}

input.error,
input.input-validation-error,
input.k-invalid {
    border: 1px solid var(--kendo-color-error, #dc3545);
    background-color: var(--bs-danger-bg-subtle);
}

    input.error:focus,
    input.input-validation-error:focus,
    input.k-invalid :focus {
        border-color: var(--kendo-color-error, #dc3545);
        box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--kendo-color-error, #dc3545) 25%, transparent);
        background-color: var(--bs-danger-bg-subtle);
    }

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    padding: 10px 15px;
    margin-bottom: 15px;
    background-color: var(--bs-danger-bg-subtle);
    border: solid 1px var(--kendo-color-error, #dc3545);
    border-radius: var(--bs-border-radius);
    color: var(--kendo-color-error, #dc3545);
    vertical-align: middle;
    min-height: 14px; /*+padding=34px*/
}

    .validation-summary-errors ul {
        padding-left: 15px;
        margin-bottom: 2px;
    }

.validation-summary-valid {
    display: none;
}