html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Lazy loading image styles */
img[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background: #f0f0f0;
}

img.lazy-loaded {
    opacity: 1;
}

img[data-src].showLogos {
    min-height: 100px;
}

a, .btn-link {
    color: #006bb7;
}

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

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

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

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

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

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

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


/* === Fade Transition for Blazor WASM Loading === */

/* The main app container fades in when WASM takes over */
#app {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

/* Loading container that appears during static render */
.loading-container {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

/* Static header fades out when WASM loads */
.static-header {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* Spinner animation for the loading indicator */
.spinner {
    width: 50px;
    height: 50px;
    margin: 20px auto;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #1b6ec2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.wasm-content {
    animation: fadeIn 0.5s ease-in-out;
}

body {
    min-width: 320px;
    min-height: 568px;
    background-color: #FFFFFF;
    /*color: #000000;*/
    padding-bottom: 0px;
}

.btn-submit {
    width: 100%;
    height: 50px;
}

.FullWidthButton {
    width: 100%;
}

.form-text-label {
    margin-right: 10px;
}

.form-basic-setup {
    margin: 0px;
}

/* TelerikForm has no Height parameter (unlike TelerikTileLayout/TelerikTabStrip).
   Apply Class="form-fill-height" on the TelerikForm itself so it fills its
   container's height regardless of embedding context (top-level page, nested
   TabStripTab, plain div, etc.) without depending on ancestor CSS selectors.

   Confirmed via decompiling Telerik.Blazor.dll (TelerikForm -> FormContent ->
   FormGridLayout, see ilspycmd output): when TelerikForm has Columns > 0 (all
   3 of our form-fill-height forms use Columns="1"), FormContent renders
   <form class="k-form ..."> and its FormItemsTemplate content (our
   TelerikTileLayout Height="100%") is NOT a direct child of <form> — it's
   wrapped one level deeper by FormGridLayout in
   <div class="k-form-layout k-d-grid k-grid-cols-1" style="gap:...">.
   Kendo's theme CSS only styles k-d-grid with "display:grid" and
   k-grid-cols-1 with "grid-template-columns" — there is NO rule anywhere
   giving .k-form-layout a height, and no rule giving its single implicit
   grid row a definite size. So even though .k-form itself gets height:100%
   from this class (verified: browser default <form> display is block, and
   the base ".k-form{border:0}" theme rule doesn't touch display/height),
   its .k-form-layout child is a block-level grid container with
   height:auto that does NOT inherit/stretch to fill its parent's height
   (block children never auto-stretch vertically), so it shrinks to content
   and its single grid row auto-sizes too — collapsing the TileLayout's
   Height="100%" (which resolves against that undefined row track) to
   whatever its content needs, i.e. effectively 0 usable fill height. This
   is the actual, DOM-confirmed break in the percentage-height chain (not a
   guess) that every previous CSS-selector-based attempt for this bug missed,
   because .k-form-layout is a Blazor-component-rendered wrapper with no
   corresponding markup in any of our own .razor files. */
.form-fill-height {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.form-fill-height > .k-form-layout {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
}

#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: 1000;
}

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

.loading-panel-wrapper {
    width: 100%;
    height: 100%;
    min-height: 200px;
    position: absolute;
    z-index: 123456;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .loading-panel-wrapper .loading-panel-overlay {
        background: gray;
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.5;
    }

.topRowMenu {
    width: 100%;
}

.callboardButtons {
    margin-top: 10px;
    width: 100%;
}

.btnMembership {
    width: 100%;
    height: 100%;
    font-size: 16px;
    padding: 15px;
    background-color: #343a40;
    border: none;
    color: white;
}

.NoPermissionBtn {
    width: 100%;
    height: 100%;
    font-size: 16px;
    padding: 15px;
    background-color: black;
    border: none;
    color: white;
}

.ShowBuilderBody {
    padding-top: 5vh;
    padding-bottom: 5vh;
    background-image: url('https://sbusersdoor-deeccbdbcnfafqfh.z01.azurefd.net/homefiles/banner-images/faqBackground.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.ShowBuilderBodyFull {
    background-image: url('https://sbusersdoor-deeccbdbcnfafqfh.z01.azurefd.net/homefiles/banner-images/faqBackground.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.ShowBuilderBodyNoBackground {
    padding-top: 5vh;
    padding-bottom: 5vh;
}

.LoggedInBody {
    margin: 20px;
    margin-bottom: 20px;
}

.bgimg {
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 250px;
    height: 450px;
}

.my-cardtitle {
    padding-bottom: 20px;
}

.photo {
    max-width: 800px;
    max-height: 600px;
    width: 75%;
    margin: auto;
    display: block;
}

.beaphoto {
    max-width: 400px;
    max-height: 300px;
    width: 75%;
    margin: auto;
    display: block;
}

#scrollView {
    border-width: 0
}

.k-card-media {
    /*max-height: 200px;*/
}

.k-card-header {
    flex: 0 0 auto;
    padding-block: 0 !important;
    padding-inline: 0 !important;
}

.k-card-title {
    text-align: center;
}

.k-card-body {
    overflow: hidden;
    padding-block: 0 !important;
    padding-inline: 0 !important;
}

.toolbar-wrapper {
    width: 100%;
}

.showLogos {
    width: 100%;
    height: auto;
    max-width: 200px;
    min-width: 75px;
    padding: 10px;
    margin: auto;
    display: block;
}

.cardPhotos {
    margin: auto;
    display: block;
}

.cardText {
    padding: 10px;
}

.cardStyle {
    min-height: 650px;
    max-width: 450px;
}

div.imagetiles {
}

.menuItemImage {
    height: 30px;
}

.CustomFontIcon {
    width: 30px;
}

.img-xlarge {
    margin-left: auto;
    margin-right: auto;
    max-width: 1080px;
    max-height: 1080px;
}

.img-large {
    max-width: 800px;
    max-height: 800px;
}

.img-medium {
    max-width: 400px;
    max-height: 400px;
}

.img-small {
    margin: auto;
}

.img-xicon {
    margin: auto;
}

.img-icon {
    width: 60px;
}

.img-listbox {
    width: 60px;
    border-radius: 50%;
}

.img-thumbnail {
    width: 100px;
}

.img-border {
    padding: 2px;
    border-width: 2px;
    border-color: red;
    border-style: solid;
}

.circular--square {
    border-radius: 50%;
}

.logo-image {
    padding: 0px;
    margin: 0px;
}

.showbuilder-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto
}

.showbuilderTop-form {
    width: 90%;
    margin: 10px;
}

.showbuilder-form {
}

.showbuilder-formNotBottom {
    margin: 20px;
    margin-bottom: 20px;
}

.showbuilderPre-form {
    padding: 10px;
}

.basicForm {
    padding-top: 10px;
    width: 100%;
}

.image-buttons {
    padding-left: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.image-gridbuttons {
}

.image-container {
    margin: auto;
    width: 240px;
    padding: 5px;
}

.image-iconcontainer {
    margin: 0;
    padding: 0;
    width: 40px;
    max-height: 40px;
}

.image-gridContainer {
    margin: auto;
    width: 80px;
}

.comboBoxButtons {
    width: 25px;
    height: 25px;
    font-size: 16px;
}

body {
}

.WideScreenClass {
    display: block;
    width: 100%;
}

.MobileClass {
    display: none;
    height: 100%;
}

.WideScreenMenu {
    width: 100%;
}

.MobileScreenMenu {
}

/* On screens that are 992px or less */
@media screen and (max-width: 992px) {
    body {
    }

    .WideScreenClass {
        display: block;
    }

    .MobileClass {
        display: none;
    }

    .WideScreenDrawerClass {
        display: block;
    }
}

/* On screens that are 700px or less */
@media screen and (max-width: 700px) {
    body {
    }

    .WideScreenClass {
        display: none;
    }

    .MobileClass {
        display: block;
    }

    .WideScreenDrawerClass {
        display: none;
    }
}

.VerticalMenuVisible {
    display: block;
}

.VerticalMenuInvisible {
    display: none;
}

.hamburger {
    width: auto;
    height: 100%;
    padding: 14px;
    background-color: transparent;
    border-color: transparent
}

.hamburger-icon {
    padding-right: 10px;
    width: 30px;
}

.k-textbox.WithButton {
    width: 90% !important;
}

.k-textbox.NoButton {
    width: 100% !important;
}

.editFormWrapper {
    margin: 10px;
}

.formInSplitterPane {
    margin: 15px;
}

.TabButtons {
    margin-left: 10px;
}

.k-grid .centered-content {
    text-align: center;
}

.first-th-centered .k-grid-header th:first-of-type {
    text-align: center;
}

.tablet_button {
    height: 75px;
    width: 100%;
}

.WordSection1 {
    background-color: white;
}

#wrd1 {
    position: relative;
    width: 100%;
    height: 100%;
    padding-right: 5px;
}

.k-grid-norecords .k-badge-container {
    display: inline-block
}

    .k-grid-norecords .k-badge-container > .k-badge {
        position: absolute;
        left: 70px;
        top: 25px;
    }

.k-grid-norecords {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
}

    .k-grid-norecords .cloud {
        color: #EBEBEB;
        font-size: 90px;
    }

    .k-grid-norecords:hover {
        background-color: #ffffff !important;
    }

.install-prompt {
    background-color: #54595f;
    color: #fff;
    position: fixed;
    bottom: 0.5rem;
    padding: 0.5rem;
    display: flex;
    font-size: 1.5rem;
    border-radius: .25rem;
    z-index: 99;
}

    .install-prompt .installButton {
        margin-left: auto;
        width: 4em;
    }

    .install-prompt .cancelButton {
        margin-left: 0.3rem;
        width: 4em;
    }

#parentBox {
    width: 100%;
    min-width: 400px;
    white-space: nowrap;
    overflow-x: auto;
}

.childDropDown {
    display: inline-block;
}

.childDropDownFull {
    display: inline-block;
    width: 85%;
}

.childButtons {
    display: inline-block;
}

.k-window .k-form-horizontal {
    min-width: 400px;
    max-height: 600px;
}

    .k-window .k-form-horizontal .k-form-field {
        display: block;
    }

        .k-window .k-form-horizontal .k-form-field > .k-form-label {
            display: block;
            width: auto;
            text-align: left;
        }

    .k-window .k-form-horizontal .k-form-field-wrap {
        max-width: none;
    }

.k-window {
    overflow: auto;
    overflow-x: hidden;
}

.k-tabstrip-content {
    padding: 0px !important;
}

.k-splitter-flex .k-pane {
    overflow-y: scroll;
}

.normalButton {
    margin-right: 5px;
    display: inline-block;
}

.imageCard {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 40vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(40vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

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

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

/* improved for chat text box */
textarea {
    border: 1px dashed #888;
    border-radius: 5px;
    width: 80%;
    overflow: auto;
    background: #f7f7f7
}

/* improved for speech bubbles */
.received, .sent {
    position: relative;
    font-family: arial;
    font-size: 1.1em;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

    .received:after, .sent:after {
        content: '';
        border: 20px solid transparent;
        position: absolute;
        margin-top: -30px;
    }

.sent {
    background: #03a9f4;
    color: #fff;
    margin-left: 10%;
    top: 50%;
    text-align: right;
}

.received {
    background: #4CAF50;
    color: #fff;
    margin-left: 10px;
    margin-right: 10%;
}

.sent:after {
    border-left-color: #03a9f4;
    border-right: 0;
    right: -20px;
}

.received:after {
    border-right-color: #4CAF50;
    border-left: 0;
    left: -20px;
}

/* div within bubble for name */
.user {
    font-size: 0.8em;
    font-weight: bold;
    color: #000;
}

.msg {
    /*display: inline;*/
}

.progress-info-title {
    font-weight: bold;
    font-size: 1.4em;
}

.progress-info-version {
    margin-bottom: 1em;
}

.bumpRightTop {
    margin-right: 5px;
    margin-top: 5px;
}

.bumpRight {
    margin-right: 5px;
}

.bumpRightText {
    margin-right: 5px;
    margin-top: 4px;
}

.tileTabStrip {
    padding: 0px;
}

.input-button {
}

.input-container {
}

    .input-container input:focus, .input-container input:active {
    }

    .input-container input {
    }

.k-window-content {
    padding-block: 5px !important;
    padding-inline: 5px !important;
}

.k-upload-button {
    min-width: 0px !important;
}

.k-form .k-form-fieldset.FormGroupNoHeader {
    margin-top: 0;
}

.FormGroupNoHeader legend {
    display: none;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

.batch-grid td:first-child,
.batch-grid th:first-child {
    text-align: center !important;
}

.batch-grid .k-new-row, .batch-grid .k-changed-cell {
    background-color: rgb(94, 194, 50, 0.5) !important;
}

    .batch-grid .k-new-row:hover {
        background-color: rgb(94, 194, 50, 0.6) !important;
    }

.batch-grid .k-deleted-row td:not(:first-child):not(.k-command-cell) {
    outline: none;
    cursor: default;
    opacity: 0.6;
    filter: grayscale(0.1);
    pointer-events: none;
    box-shadow: none;
}

.dropdown-list-tile {
    z-index: 10000;
}

.bigButton {
    width: 100%;
    margin-top: 10px;
}

.basicForm {
    min-width: 300px;
    min-height: 600px;
    padding: 5px;
    max-width: 800px;
    width: 100%;
}

.inlineButtons {
    display: inline;
}

.inlineButton {
    display: inline;
}

.formGroupPadding {
    margin: 10px;
    padding-left: 0px;
    padding: 0px;
    max-width: 500px;
}

.formGroupPaddingWidth {
    margin: 10px;
    padding-left: 0px;
    padding: 0px;
}

.formButtons {
    width: 50%;
    margin-bottom: 15px;
}

.formButtonsFull {
    width: 100%;
}

.formBottom {
}

.gridTemplates {
    width: 100%;
    max-width: 500px;
    min-width: 200px;
}

.gridBtnText {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.myOverrideClass {
    max-width: none !important;
}

.formBtnText {
    max-width: 350px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.k-form-buttons {
    margin-top: 0 !important;
}

.k-floating-label-container {
    width: 100% !important;
}

#loadingScreen {
    display: none;
}

/* === Fade Transition for Blazor WASM Loading === */

#app {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.loading-container {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.static-header {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.spinner {
    width: 50px;
    height: 50px;
    margin: 20px auto;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #1b6ec2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.wasm-content {
    animation: fadeIn 0.5s ease-in-out;
}

.k-flex-30 {
    /*flex: 1 1 30%;*/
}

.k-flex-40 {
    /*flex: 1 1 40%;*/
}
.max-width-agenda {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.agenda-row-break {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.agenda-width-sync-shell {
    width: min(100%, max(var(--agenda-row-width, 100%), 768px));
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.agenda-stacklayout-full-width {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Left-justify the callboard card grid instead of centering it. */
#company-callboard-card-wrap {
    justify-content: flex-start;
}

/* Left-justify the agenda row — matches callboard card grid alignment. */
#company-callboard-agenda-row {
    justify-content: flex-start;
}

.k-card-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.k-card-body {
    /*padding: 0px 8px !important;*/
}

.rect-img-container {
     position: relative; 
}

    .rect-img-container::after {
         content: "";
        display: block;
        padding-bottom: 100%; 
    }

.rect-img {
     position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover; 
}
.rect-img-company {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.btn-Select {
    width: 100%;
    height: auto !important;
    min-height: 32px;
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 8px 12px;
    line-height: 1.4;
    text-align: center;
}
.stack-layout-container {
    margin: 15px;
    padding: 0px;
}
.max-width-200 {
    max-width: 200px;
    min-width: 200px;
}
.max-width-150 {
    max-width: 150px;
    min-width: 150px;
}
.max-width-250 {
    max-width: 250px;
    min-width: 250px;
}
.min-max-width-500 {
    width: 100%;
    max-width: 500px;
    min-width: 150px;
}
.btn-btm-15
{
    margin-bottom: 15px;
}

/* ================================================================
   Grid full-height fill — Option E (CSS Flexbox Chain) — G1 fix
   Extends prior G1 fix into TileLayout > TabStrip > Grid patterns.
   POC: 2026-07-14 — approved by team decision patti-g1-fix-plan.md
   ================================================================ */

:root {
    --toolbar-h: 50px; /* safe fallback; overwritten by initToolbarHeightTracking() after first render */
}

/* Level 0 — Anchor: main locks to viewport height */
main {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Level 1 — drawer-shell: fills remaining height after NavMenuAuth toolbar */
.drawer-shell {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Level 2 — Telerik Drawer container/content override */
.drawer-shell .k-drawer-container {
    flex: 1 1 0;
    min-height: 0;
    align-items: stretch; /* override Telerik default flex-start */
}

.drawer-shell .k-drawer-content {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;     /* override Telerik default overflow: auto */
    display: flex;
    flex-direction: column;
}

/* Level 3 — article: fills drawer content */
.drawer-shell .k-drawer-content > article {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Secondary TelerikAppBar inside article: prevent flex compression and keep nested app bars
   in normal flow inside the article scroll container instead of creating a second sticky layer.
   Grid/form pages still avoid page scroll because their fill wrappers stay within article height.
   NavMenuAuth AppBar is NOT inside article, so this rule does not affect it. */
.drawer-shell .k-drawer-content > article > .k-appbar {
    flex-shrink: 0;
    position: relative; /* override sticky */
}

/* Level 4 — grid-fill: used by top-level grid pages.
   CSS-only fill; no JS pixel calc needed.
   TelerikGrid Height="100%" resolves against this. */
.grid-fill {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/* ================================================================
   Extension: TelerikForm > TileLayout > TabStrip > Grid chain
   ================================================================ */

/* TelerikForm (.k-form) must fill article via flex, and establishes a
   positioned containing block so the TileLayout can use absolute inset
   instead of height:100%. height:100% in a flex chain with flex-basis:0
   resolves to 0 (browsers use flex-basis as the percentage base), so we
   bypass that entirely with position:relative → absolute inset. */
.drawer-shell .k-drawer-content > article > .k-form {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* TelerikTileLayout inside the form: absolute fill of the form's bounds.
   This bypasses the height:100%=0 issue from the flex-basis:0 chain.
   grid-auto-rows:1fr distributes available height to tile rows. */
.drawer-shell .k-drawer-content > article > .k-form .k-tilelayout {
    position: absolute;
    inset: 0;
    overflow: hidden;
    grid-auto-rows: 1fr;
}

/* TileLayoutItem renders as a CSS grid cell; make it flex column.
   min-height:0 lets the grid row constrain the item height. */
.drawer-shell .k-tilelayout-item {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* TileLayoutItem header (AppBar) stays natural height */
.drawer-shell .k-tilelayout-item-header {
    flex-shrink: 0;
}

/* TileLayoutItem body fills remaining tile height */
.drawer-shell .k-tilelayout-item-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* TabStrip fills tile body */
.drawer-shell .k-tilelayout-item-body .k-tabstrip {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* TabStrip tab-bar stays natural height; content fills the rest.
   overflow:auto enables scrollbars when form field content exceeds tab height.
   Tabs containing grids (.tab-grid-fill) fill 100% so no scrollbar appears there. */
.drawer-shell .k-tilelayout-item-body .k-tabstrip-content,
.drawer-shell .k-tilelayout-item-body .k-tabstrip > .k-content.k-active {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

/* Nested form-in-tab chain: a second TelerikForm+TileLayout rendered by a
   whole separate component (e.g. FormContactPeople, FormGlobalKit,
   FormProductionShare) placed inside another form's TabStripTab content
   (e.g. FormContactPeople nested inside FormCompanyMember's "Profile Info"
   tab, FormGlobalKit nested inside FormKit's "Global Template Settings" tab,
   FormProductionShare nested inside FormProduction's "Share Production" tab).
   The rule above only matches a .k-form that is article's direct child, so a
   .k-form buried several levels inside .k-content.k-active never gets the
   flex/position treatment and collapses to height:auto (0 once every
   Height="100%" descendant resolves against it). Blazor component
   invocation does not add a wrapping DOM element, so the nested component's
   .k-form renders as a plain (non-direct-child) descendant of the active tab
   content — use the descendant combinator, not >, to match reliably here. */
.drawer-shell .k-content.k-active .k-form {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.drawer-shell .k-content.k-active .k-form .k-tilelayout {
    position: absolute;
    inset: 0;
    overflow: hidden;
    grid-auto-rows: 1fr;
}

/* tab-grid-fill: wrapper placed inside a TabStripTab <Content> around a grid.
   Must be a direct flex child of .k-content.k-active (do NOT add an outer
   tab-grid-fill wrapper on top of a component that already provides its own —
   the flex:1 1 0 only works when this div is itself a direct flex child).
   TelerikGrid Height="100%" resolves against this flex-allocated height.
   Must also be a flex container so the grid's height:100% resolves against a
   definite flex-allocated height rather than an auto containing-block height. */
.tab-grid-fill {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card-wrap-fill {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--card-wrap-gap, 15px);
    width: 100%;
    box-sizing: border-box;
}

.card-wrap-slot {
    flex: 0 1 var(--card-wrap-width, 250px);
    display: flex;
    width: var(--card-wrap-width, 250px);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.card-wrap-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-height: auto;
    height: auto;
    box-sizing: border-box;
}

.card-wrap-item .k-card-body {
    display: flex;
    flex: 1 1 auto;
    overflow: auto;
}

.card-wrap-item .k-card-body > div {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.card-wrap-item .k-card-actions {
    margin-top: auto;
}

/* card-wrap-slot-compact: applied to selector-panel slots (header-only cards).
   The class is kept in Razor markup for documentation purposes; the actual
   height behavior is now governed by the base .card-wrap-item rule above,
   which uses height: auto / min-height: auto for all card-wrap cards. */