body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /*overflow: scroll;*/
    -webkit-overflow-scrolling: touch !important;
}

/* ─── Dark Mode base (c-dark-theme toggled by the portal header button) ───
   Shared surface tiers used throughout this file and invoice.css:
   #2f353a page surface · #353b41 headers/toolbars · #3a4149 cards/fields ·
   #404950 alt rows · #515b65 borders · #23282e/#2a2f35 recessed panels ·
   #e4e7ea/#c8cfd8/#8a9ab5 text. Keep new dark rules on this palette instead
   of CoreUI's own slate (#2c2c34/#1e1e29/#34343b) so surfaces read as one theme. */
body.c-dark-theme {
    color: #e1e1e1;
    background-color: #2f353a !important;
}

.c-dark-theme .c-app,
.c-dark-theme .c-main  { background-color: #2f353a !important; }
.c-dark-theme .c-header,
.c-dark-theme .c-subheader { background-color: #23242d !important; }
.c-dark-theme .c-header { border-bottom-color: #515b65 !important; }
.c-dark-theme .c-footer { background: #23282e !important; border-top-color: #3a4149 !important; color: #c8cfd8 !important; }
.c-dark-theme .modal-content { background-color: #3a4149 !important; border-color: #515b65 !important; }

/* ─── Dark Mode — toast confirmations (any AJAX auto-save toast on the site) ───
   The toast shell itself already darkens under CoreUI's theme; Bootstrap's .text-dark
   utility forces a near-black color the theme doesn't override, leaving that text
   low-contrast against the darkened toast background. */
.c-dark-theme .toast.text-dark,
.c-dark-theme .toast .text-dark { color: #e4e7ea !important; }

/* ─── Dark Mode — shared icon badges & accordion sections (Resident/Architectural pages) ─── */
.c-dark-theme .header-icon,
.c-dark-theme .section-icon,
.c-dark-theme .deeded-owner-avatar { background: #1e3a5f !important; color: #60a5fa !important; }

.c-dark-theme .rp-page-header-icon       { background: #1e3a5f !important; }
.c-dark-theme .rp-page-header-icon__glyph { color: #60a5fa !important; }

.c-dark-theme #residentAccordion            { background: #2f353a !important; }
.c-dark-theme .resident-section             { background: #3a4149 !important; }
.c-dark-theme .resident-section-header      { background: #3a4149 !important; border-bottom-color: #515b65 !important; }
.c-dark-theme .resident-section-header:hover { background: #444c55 !important; }
.c-dark-theme .section-title                { color: #e4e7ea !important; }
.c-dark-theme .section-chevron              { color: #a0aab5 !important; }

.c-dark-theme .pagination-section { background: #23282e !important; color: #c8cfd8 !important; border-top-color: #3a4149 !important; }
.c-dark-theme .pagination-controls button,
.c-dark-theme .pagination-controls span      { background: #3a4149 !important; border-color: #515b65 !important; color: #60a5fa !important; }
.c-dark-theme .pagination-controls button:hover { background: #515b65 !important; }

.c-dark-theme .deeded-owners-section { background: #2a2f35 !important; border-color: #3a4149 !important; }
.c-dark-theme .deeded-owner-item     { background: #3a4149 !important; border-color: #515b65 !important; color: #e4e7ea !important; }

/* ─── Dark Mode — Resident/DirectorySettings layout ─── */
.c-dark-theme .ds-layout              { background: #2f353a !important; }
.c-dark-theme .ds-settings-col        { background: #2f353a !important; border-right-color: #515b65 !important; }
.c-dark-theme .ds-header-status-panel { background: #2a2f35 !important; }
.c-dark-theme .ds-header-status-label { color: #c8cfd8 !important; }

.c-dark-theme .ds-field           { background: #343e46 !important; border-color: #3a4149 !important; }
.c-dark-theme .ds-field-label     { color: #a0aab5 !important; }
.c-dark-theme .ds-field-value     { color: #e4e7ea !important; }
.c-dark-theme .ds-field-input     { color: #e4e7ea !important; border-bottom-color: #515b65 !important; }
.c-dark-theme .ds-field-input:focus { border-bottom-color: #60a5fa !important; }

/* Social media input-group prepend/append (icon + hidden/visible toggle) — CoreUI's
   own dark .input-group-text (#181924) reads near-black next to the lighter form-control,
   so lighten it here to match the ds-field surface tier. */
.c-dark-theme .ds-settings-col .input-group-text { background: #3a4149 !important; border-color: #515b65 !important; color: #c8cfd8 !important; }
.c-dark-theme .ds-settings-col .input-group-text .text-muted { color: #8a9ab5 !important; }

.c-dark-theme .ds-preview-col                { background: #2f353a !important; border-left-color: #515b65 !important; border-top-color: #515b65 !important; }
.c-dark-theme .ds-preview-label              { color: #8a9ab5 !important; }
.c-dark-theme .ds-preview-card               { background: #3a4149 !important; border-color: #515b65 !important; }
.c-dark-theme .ds-preview-avatar-placeholder { background: #2a2f35 !important; }
.c-dark-theme .ds-preview-name               { color: #e4e7ea !important; }
.c-dark-theme .ds-preview-type               { color: #8a9ab5 !important; }
.c-dark-theme .ds-preview-social a           { color: #93c5fd !important; }
.c-dark-theme .ds-preview-contact-item       { color: #c8cfd8 !important; }
.c-dark-theme .ds-preview-contact-item i     { color: #8a9ab5 !important; }
.c-dark-theme .ds-preview-hidden-overlay     { border-top-color: #515b65 !important; }

.c-dark-theme .ds-preview-visibility-badge.public  { background: #14352a !important; color: #4ade80 !important; }
.c-dark-theme .ds-preview-visibility-badge.private { background: #4a1919 !important; color: #fca5a5 !important; }
.c-dark-theme .ds-preview-visibility-badge.partial { background: #4a3800 !important; color: #fde68a !important; }

/* AP-style accordion cards used on this page (mirrors .resident-section treatment above) */
.c-dark-theme .ap-card                          { background: #3a4149 !important; }
.c-dark-theme .ap-card-header                    { background: #3a4149 !important; border-bottom-color: #2a2f35 !important; }
.c-dark-theme .ap-card-header.ap-collapsible:hover { background: #444c55 !important; }
.c-dark-theme .ap-card-header-icon               { background: #1e3a5f !important; color: #60a5fa !important; }
.c-dark-theme .ap-card-title                     { color: #e4e7ea !important; }
.c-dark-theme .ap-section-chevron                { color: #a0aab5 !important; }
.c-dark-theme .ds-footer                         { background: #23282e !important; border-top-color: #3a4149 !important; }

/* ─── Dark Mode — bootstrap-table plugin (resident list view) ─── */
.c-dark-theme .bootstrap-table       { background: transparent !important; }
.c-dark-theme .fixed-table-container { background: #2f353a !important; border-color: #515b65 !important; }
.c-dark-theme .fixed-table-body      { background: #2f353a !important; }
.c-dark-theme .fixed-table-toolbar .search input               { background: #3a4149 !important; border-color: #515b65 !important; color: #e4e7ea !important; }
.c-dark-theme .fixed-table-toolbar .search input::placeholder  { color: #6b7277 !important; }
.c-dark-theme .fixed-table-pagination { background: #2f353a !important; color: #c8cfd8 !important; }
.c-dark-theme .fixed-table-pagination .pagination .page-link                   { background: #3a4149 !important; border-color: #515b65 !important; color: #c8cfd8 !important; }
.c-dark-theme .fixed-table-pagination .pagination .page-item.active .page-link { background: #3b82f6 !important; border-color: #3b82f6 !important; color: #fff !important; }

.c-dark-theme #residentListTable thead th                  { background: #353b41 !important; color: #e4e7ea !important; border-color: #515b65 !important; }
.c-dark-theme #residentListTable tbody tr:nth-child(odd)   { background: #3a4149 !important; }
.c-dark-theme #residentListTable tbody tr:nth-child(even)  { background: #404950 !important; }
.c-dark-theme #residentListTable tbody tr:hover td,
.c-dark-theme #residentListTable tbody tr:hover             { background: #3d4f6e !important; }
.c-dark-theme #residentListTable td,
.c-dark-theme #residentListTable th                         { color: #e4e7ea !important; border-color: #515b65 !important; }

/* ─── Dark Mode — alerts (CoreUI's built-in dark alert palette stays pastel/light) ─── */
.c-dark-theme .alert-primary   { background: #1e3a5f !important; border-color: #1e40af !important; color: #93c5fd !important; }
.c-dark-theme .alert-secondary { background: #343a40 !important; border-color: #515b65 !important; color: #c8cfd8 !important; }
.c-dark-theme .alert-success   { background: #1a3a27 !important; border-color: #166534 !important; color: #86efac !important; }
.c-dark-theme .alert-info      { background: #1e3a5f !important; border-color: #1e40af !important; color: #93c5fd !important; }
.c-dark-theme .alert-warning   { background: #4a3800 !important; border-color: #5c4700 !important; color: #fde68a !important; }
.c-dark-theme .alert-danger    { background: #4a1919 !important; border-color: #7f1d1d !important; color: #fca5a5 !important; }
.c-dark-theme .alert-light     { background: #3a4149 !important; border-color: #515b65 !important; color: #e4e7ea !important; }
.c-dark-theme .alert-dark      { background: #23282e !important; border-color: #3a4149 !important; color: #e4e7ea !important; }
.c-dark-theme .alert-primary .alert-link,
.c-dark-theme .alert-info .alert-link    { color: #bfdbfe !important; }
.c-dark-theme .alert-success .alert-link { color: #bbf7d0 !important; }
.c-dark-theme .alert-warning .alert-link { color: #fef08a !important; }
.c-dark-theme .alert-danger .alert-link  { color: #fecaca !important; }

body, html, .modal, .container-fluid {
    font-family: 'Open Sans', sans-serif !important; 
}

.b-purple {color:#361E55}
.b-plum {color:#643371}
.b-dark-blue {color:#005B8B}
.b-light-blue {color:#29B5E4}
.b-dark-green {color:#62AD46}
.b-light-green {color:#B7D433}

:root {
  --deep-purple: #361E55;
  --plum: #643371;
  --ocean-blue: #005B8B;
  --sky-blue: #29B5E4;
  --grass-green: #62AD46;
  --lime-green: #B7D433;
}


.sidebar-bg,
#sidebar.c-sidebar,
#sidebar .c-sidebar-brand,
#sidebar .c-sidebar-nav,
#sidebar .c-sidebar-footer {
  background-color: #005B8B !important;
}
#sidebar .c-sidebar-nav-dropdown-toggle:hover,
#sidebar .c-sidebar-nav-link:hover,
#sidebar .c-sidebar-nav-link.c-active {
  background-color: #29B4E3 !important;
  color: #000 !important;
}
#sidebar .c-sidebar-nav-link.c-active .c-sidebar-nav-icon,
#sidebar .c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon,
#sidebar .c-sidebar-nav-link:hover .c-sidebar-nav-icon {
  color: #000 !important;
}



.card {
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
}

/* http://www.color-hex.com/color-palette/4832 */
.fa-cc-visa {
    color: #fdbb0a;
}

/* https://brand.mastercard.com/brandcenter/mastercard-brand-mark.html */
.fa-cc-mastercard {
    color: #eb001b;
}

/* http://www.codeofcolors.com/american-express-colors.html */
.fa-cc-amex {
    color: #37B1E6;
}

/* http://www.codeofcolors.com/discover-colors.html */
.fa-cc-discover {
    color: #F58220;
}

/*
 * Picture grid?
 */

.gridLayout {
    display: grid;
    display: -ms-grid;
    /*display: -moz-grid;*/
    grid-template-columns: repeat(auto-fill, minmax(95px, 100px));
    grid-gap: 20px;
    align-items: stretch;
}

.gridLayout .imgTag {
    border: 1px solid #ccc;
    box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.3);
    width: 100px;
    height: 100px;
}

.td-hover tbody td:hover {
    background-color: rgba(0,0,0,.075);
}

.portrait-card-img {
    object-fit: cover !important;
    width: inherit !important;
    max-height: -webkit-fill-available !important;
    max-height: -moz-available !important;
}

.portrait-card-width {
    max-width: 540px !important;
}

.landscape-card-img {
    width: 100%;   
    height: 120px !important;
}

.object-fit-cover {
    object-fit: cover !important;
    width: -webkit-fill-available;
    width: -mox-available;
    width: fill-available;
}

/* Mobile */
@media only screen and (max-width: 600px) {
    .landscape-card-img-sm {
        width: 100%;       
        height: 80px;
    }

    .card-content-padding {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 30px;
        padding-left: 30px;
    }
}

/* Desktop */
@media only screen and (min-width: 600px) {
    .landscape-card-img-sm {
        width: 100px;
        height: 80px;
    }

    .card-content-padding {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 30px;
    }
}

.fc .fc-scrollgrid-section-sticky > * {
    background: inherit !important;
}

.text-pdf {
    color: #ff0000;
}

.form-control {
    height: 40px !important;
}

.directory-banner {
    background-color: #CAEDD6;
    border: none;
    border-left: 4px solid #2EB85C;
    border-radius: 6px;
    padding: 12px 16px;
    color: #152536;
}

.c-dark-theme .directory-banner {
    background-color: #1a3a27 !important;
    border-left-color: #166534 !important;
    color: #86efac !important;
}

.directory-banner-description {
    font-size: 13px;
}

.directory-banner-btn {
    font-size: 11px;
    letter-spacing: .5px;
}

/* ── Resident Portal Modal Styles ── */
.modal-header {
    padding: 30px 50px 0 30px !important;
    border-bottom: none !important;
}

.modal-body {
    padding: 30px !important;
}

.modal-footer {
    border: none !important;
    padding: 0 30px 30px 30px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 50px !important;
}

.modal-body .input-group-prepend .input-group-text {
    background-color: #F4F4F4 !important;
    border-color: #F4F4F4 !important;
    padding: 8px 14px 8px 14px !important;
}

.modal-body .input-group-prepend .input-group-text,
.modal-body .input-group-append {
    background-color: #F4F4F4 !important;
    border-color: #F4F4F4 !important;
}

.modal-body .input-group .form-control,
.modal-body .input-group select.form-control {
    border-color: #ebebeb !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.modal-header .modal-title {
    color: #202020 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
}

.modal-header .close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    width: 32px !important;
    height: 32px !important;
    background: #F5F5F5 !important;
    opacity: 1 !important;
    color: #3C4B64 !important;
    border: none !important;
    border-radius: 50% !important;
}

.modal-body .input-group-append .input-group-text {
    background-color: transparent !important;
    border: none !important;
}

.input-group-append, .input-group-prepend {
    height: 40px !important;
}

.modal-body .form-control {
    color: #1E1E1E !important;
    height: 40px !important;
}

.modal-body .input-group .text-muted {
    color: #1E1E1E !important;
    font-weight: 600 !important;
    font-family: 'Open Sans' !important;
    font-size: .875rem !important;
}

.c-dark-theme .modal-header .modal-title { color: #e4e7ea !important; }
.c-dark-theme .modal-header .close       { background: #3a4149 !important; color: #c8cfd8 !important; }

.c-dark-theme .modal-body .input-group-prepend .input-group-text,
.c-dark-theme .modal-body .input-group-append              { background-color: #3a4149 !important; border-color: #515b65 !important; }
.c-dark-theme .modal-body .input-group .form-control,
.c-dark-theme .modal-body .input-group select.form-control  { border-color: #515b65 !important; }

.c-dark-theme .modal-body .form-control            { color: #e4e7ea !important; }
.c-dark-theme .modal-body .input-group .text-muted { color: #e4e7ea !important; }

.c-app {
  background-color: #f7f8fc !important;
}

/* FontAwesome's sitewide nest-mode config (_Layout.cshtml) keeps the original <i> in the DOM
   and nests the rendered <svg> inside it instead of replacing it; the svg's default
   vertical-align: -0.125em then nudges it down within the <i>'s own inline box, which
   .c-sidebar-nav-icon's flex-item sizing (in action.coreui.css) can't correct on its own.
   Making the icon itself a flex container centers the nested svg directly. */
.c-sidebar-nav-icon { display: inline-flex; align-items: center; justify-content: center; }

/* ─── Dark Mode — Pets page filter controls (SS-1893) ─── */
/* CoreUI only themes .form-control with a translucent overlay, and native <select>
   option popups do not follow it, so scope solid dark values to the Pets filter bar.
   color-scheme:dark makes the browser render the native dropdown popup dark too. */
.c-dark-theme #toggleDIV .form-control,
.c-dark-theme #toggleDIV select.form-control { background: #3a4149 !important; border-color: #515b65 !important; color: #e4e7ea !important; color-scheme: dark; }
.c-dark-theme #toggleDIV .form-control::placeholder { color: #6b7277 !important; }
.c-dark-theme #toggleDIV .input-group-text          { background: #3a4149 !important; border-color: #515b65 !important; color: #c8cfd8 !important; }