/* General Body Styles */
html, body {
    overflow-x: hidden;
    overflow-y: hidden;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif !important;
    background-color: #ffffff;
    color: #212121 !important;
}

a:not(.btn), a:not(.btn):hover, a:not(.btn):focus {
    text-decoration: none !important;
}

a, h3 {
    font-family: 'Poppins', sans-serif !important;
}

.dashboard-container {
    display: flex;
    background-color: #f6f6f6;
    height: 100vh;
    flex-grow: 1;
}

/* Sidebar Styles */
.sidebar {
    width: 240px;
    background-color: #fff;
    border-right: 1px solid #e4e3e7;
    padding: 20px 20px 0;
    margin-bottom: 0;
    /* min-height: 100vh; */
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh !important;
}

.sidebar .logo {
    margin-bottom: 40px;
    margin-left: 11px;
}

.logo-link {
    display: inline-block;
}

.logo-svg {
    width: 91px;
    height: 25px;
    display: block;
}

.main-nav {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.main-nav li {
    margin-bottom: 10px;
}

.main-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    color: #3f3f46;
    font-family: 'Poppins', sans-serif;
    font-size: 14px !important;
    font-weight: 500;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.main-nav a:hover {
    color: #f26633;
    background-color: rgba(242, 102, 51, 0.1);
}

.main-nav a svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    transition: color 0.2s ease-in-out;
}

.main-nav a svg path {
    stroke: currentColor;
    fill: none;
}

.nav-spacer {
    flex-grow: 1;
}

/* Main Content Styles */
.main-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: #f6f6f6;
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
    padding: 0 10px 10px;
    box-sizing: border-box;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 10px 20px;
    margin: 0 -20px 20px -20px;
    border-bottom: 1px solid #e4e3e7;
}

.main-header h1 {
    font-size: 20px;
    font-weight: 500;
    flex-grow: 1;
}

.header-logo {
    display: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

#search-bar::placeholder {
    font-size: 14px !important;
    color: #9999A2;
}

#global-search-bar::placeholder {
    font-size: 14px !important;
    color: #9999A2 !important;
}

.search-button {
    display: none;
}

.header-actions input {
    border: 1px solid #e5e4e6;
    border-radius: 6px;
    padding: 8px 40px 8px 12px;
    font-family: 'Poppins', sans-serif;
    width: 300px;
    transition: width 0.3s ease-in-out;
}

.header-actions input:focus {
    width: 400px;
    outline: 2px solid #007996;
    outline-offset: -1px;
}

.search-shortcut {
    position: absolute;
    right: 8px;
    display: flex;
    gap: 2px;
    align-items: center;
    background-color: #f6f6f6;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid #e5e4e6;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #64748b;
    pointer-events: none;
}

.profile-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e5e4e6;
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
}

.header-actions .avatar {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    object-fit: cover;
}

/* Profile Dropdown Styles */
.profile-dropdown {
    display: none;
    position: absolute;
    top: 110%;
    right: 0;
    background-color: white;
    border: 1px solid #e5e4e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 220px;
    z-index: 100;
    padding: 8px;
}

.profile-dropdown.show {
    display: block;
}

.profile-dropdown .dropdown-title {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
}

.profile-dropdown a {
    display: block;
    padding: 8px 12px;
    text-decoration: none !important;
    color: #3f3f46;
    font-size: 14px;
    border-radius: 4px;
}

.profile-dropdown a:hover {
    background-color: #f6f6f6;
    cursor: pointer;
}

.profile-dropdown hr {
    border: none;
    border-top: 1px solid #e4e3e7;
    margin: 8px 0;
}


.content-area {
    display: flex;
    gap: 24px;
}

.main-column {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.right-sidebar {
    width: 286px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Card Styles */
.hero-card {
    background-color: #007996;
    color: white;
    border-radius: 16px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 40px;
}

.hero-card.council {
    background-color: rgba(242, 102, 51, 0.1);
    border: 2px solid rgba(242, 102, 51, 0.1);
    color: #333333;
}

.hero-card.council .hero-text h2 {
  color: #333333 !important;
}

.hero-card.council .hero-text p {
  color: #333333;
}

.hero-card.council .hero-profile p {
  color: #333333;
}

.hero-card.council .hero-profile .email {
  color: #333333;
}

.hero-text h2 {
    font-size: 24px;
    font-weight: 500;
    color: white !important;
    margin: 0 0 4px 0;
}

.hero-text p {
    color: rgba(255, 255, 255, 0.44);
    margin: 0;
    font-size: 16px;
}

.hero-disclaimer {
    font-size: 14px !important;
}

.hero-profile {
    text-align: right;
}

.hero-profile p {
    margin: 0 0 4px 0;
    color: white;
    font-size: 16px;
}

.hero-profile .email {
    color: rgba(255, 255, 255, 0.49);
    margin-bottom: 16px;
}


.info-card {
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 22px;
    padding: 35px;
}

.info-header {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
}

.info-header-text {
    flex-basis: 50%;
}

.info-header-text h3 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 18px;
}

.info-header-text p {
    font-size: 14px;
    line-height: 1.7;
}

/* Slider Styles */
.slider-container {
    position: relative;
    flex-basis: 50%;
    aspect-ratio: 439 / 318;
    border-radius: 16px;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.slide {
    min-width: 100%;
    height: 100%;
}

.info-header-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-nav {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
}

.slider-arrow {
    background-color: rgba(0, 0, 0, 0.4);
    border: none;
    border-radius: 50%;
    width: 51px;
    height: 51px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4.5px);
    -webkit-backdrop-filter: blur(4.5px);
    transition: background-color 0.2s ease;
}

.slider-arrow:hover {
    background-color: rgba(0, 0, 0, 0.7);
}


.faq-section {
    background-color: #f6f6f69e;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    padding: 34px 32px;
    margin-bottom: 16px;
}

.faq-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
}

.faq-section h4 svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.faq-section h5 {
    font-size: 14px;
    font-weight: 500;
    margin-top: 16px;
}

.faq-section p {
    font-size: 14px;
    line-height: 1.7;
}

.faq-section a {
    color: #007996;
}

.faq-accordion-section {
    text-align: center;
}

.faq-accordion-section h3 {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 8px;
    /* Reduced padding */
}

.faq-accordion-section p {
    font-size: 20px;
    margin-bottom: 24px;
}

/* FAQ Accordion Styles */
.faq-accordion {
    text-align: left;
}

.faq-item {
    border-bottom: 1px solid #dedede;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 20px 0;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.faq-toggle {
    width: 24px;
    height: 24px;
    position: relative;
    margin-left: 20px;
    flex-shrink: 0;     
}

.faq-toggle .line1,
.faq-toggle .line2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background-color: #007996;
    transition: transform 0.3s ease-in-out;
}

.faq-toggle .line1 {
    transform: translate(-50%, -50%) rotate(0deg);
}

.faq-toggle .line2 {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.active .faq-toggle .line1 {
    transform: translate(-50%, -50%) rotate(45deg);
}

.faq-item.active .faq-toggle .line2 {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.faq-answer * {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    color: initial !important;
    background-color: transparent !important;
    line-height: 1.5 !important;
}

.faq-answer > *:last-child {
    margin-bottom: 20px;
}

/* Widget Styles */
.widget-card {
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}

.widget-card hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.11);
    margin: 24px 0;
}

.widget-card h4 {
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    margin-bottom: 14px;
}

.widget-card p {
    font-size: 14px;
    text-align: left;
    line-height: 1.5;
    margin-bottom: 12px;
}

.widget-card strong {
    font-weight: 500;
}

.widget-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    margin: 0 auto 10px;
    object-fit: cover;
}

.widget-title {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.44);
    margin: 0;
}

.widget-card>p strong {
    font-size: 16px;
    color: #212121;
}

.widget-date {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.44);
    margin-bottom: 12px;
}

.widget-card ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-bottom: 12px;
}

.widget-card li {
    margin-left: 1em;
}

.widget-card a {
    color: #212121;
    text-decoration: underline;
}

.widget-card a:hover {
    color: #007996;
}

/* Button Styles */
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-secondary-outline,
.btn-tertiary-outline,
.previous-btn {
    box-sizing: border-box;
    border-radius: 6px;
    padding: 9px 25px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    width: 100%;
    margin-bottom: 10px;
    display: block;
    text-align: center;
    text-decoration: none !important;
    width: auto;
}

.btn-primary {
    background-color: #f26633 !important;
    color: white !important;
    border: 1px solid transparent !important;
}

.btn-primary:hover {
    background-color: #d45a2d !important;
}

.btn-secondary {
    background-color: #fff;
    border-color: #f5f5f5;
    color: #212121;
}

.btn-secondary:hover {
    background-color: #323130;
    border-color: #323130;
}

.btn-tertiary {
    background-color: #007996;
    color: white !important;
}

.btn-tertiary:hover {
    background-color: #005f79;
}

.btn-secondary-outline {
    background-color: white;
    color: #007996 !important;
    border: 1px solid #007996;
}

.btn-secondary-outline:hover {
    background-color: #e6f2f5;
}

.btn-tertiary-outline {
    background-color: transparent;
    color: white !important;
    border: 1px solid white;
}

.btn-tertiary-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.previous-btn {
    background-color: white;
    color: #007996 !important;
    border: 1px solid #007996;
}

#profile_update #submit {
    width: auto;
    display: inline-block;
}

#profile_update input[readonly].form-control {
    background-color: #f3f2f1 !important;
    cursor: not-allowed;
}

#profile_update input[readonly].form-control:focus {
    border-color: #949494;
    box-shadow: none;
    outline: none;
}

input[readonly] {
    background-color: #f0f0f0 !important;
    cursor: not-allowed;
    color: #555;
}

input[readonly] {
    border: 1px solid #ccc;
    padding: 6px 10px;
    border-radius: 4px;
}

.previous-btn:hover {
    background-color: #e6f2f5;
}

/* Mobile Menu Styles */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-menu-btn {
    display: none;
    /* Hidden by default */
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #3f3f46;
}

.menu-toggle {
    display: none;
    /* Hidden by default */
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
    padding: 0;
}

.menu-toggle svg {
    display: block;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.overlay.show {
    display: block;
    opacity: 1;
}

.desktop-only {
    display: initial;
}

.mobile-only {
    display: none;
}

/* Search Modal Styles */
.search-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    align-items: center;
    justify-content: center;
}

.search-modal.show {
    display: flex;
    opacity: 1;
}

.search-modal-content {
    position: relative;
    width: 90%;
    max-width: 500px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    padding: 0;
}

.search-modal-content input {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    color: #333;
    background: #fff;
}

.search-modal-content input:focus {
    outline: 2px solid #007996;
}

.close-modal-btn {
    font-size: 35px;
    font-weight: 300;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.close-modal-btn:hover,
.close-modal-btn:focus {
    color: #ccc;
    text-decoration: none;
}

/* Footer Styles */
.site-footer {
    background-color: #f6f6f6;
    padding: 10px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    font-size: 14px;
    color: #64748b;
    gap: 5px;
    text-align: right;
    margin-top: auto;
}

/* Copyright text */
.footer-text {
    color: #64748b;
}

.footer-text p {
    font-size: 14px;
    margin-bottom: 0;
}

/* Footer links */
.footer-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.footer-links a {
    text-decoration: none;
    color: #64748b;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.footer-links a:hover {
    color: #007996;
}

.back-to-top-icon {
    transition: transform 0.2s ease-in-out;
}

.footer-links a:hover .back-to-top-icon {
    transform: translateY(-2px);
}

/* --- Unit Selector Page Styles --- */

/* Main container for the unit selection content */
.unit-selector-container {
    padding: 2.5rem;
    /* Corresponds to the spacing around the content */
}

/* Welcome banner styling */
.unit-selector-banner {
    background-color: #007996;
    border-radius: 16px;
    padding: 4rem 2.5rem;
    color: white;
    margin-bottom: 2.5rem;
}

.unit-selector-banner h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #f5f5f5;
}

.unit-selector-banner p {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.44);
}

/* "My Units" title section */
.units-header {
    display: flex;
    align-items: center !important;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.units-header h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #333;
    margin: 0;
}

/* .units-header svg, #sidebar > nav > ul > li > a > svg, #sidebar > nav > ul > li.active > a > svg {
  color: #00799C;
} */

/* Container for the list of unit cards */
.unit-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Individual unit card styling */
.unit-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 1.5rem 2.25rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #E0E0E0;
}

.unit-list-item-details {
    margin-right: 20px;
}

.unit-list-item-details h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #333;
    margin: 0 0 8px 0;
}

.unit-list-item-details p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.5);
    margin: 0;
}

/* Button styling inside the card */
.unit-list-item .view-unit-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid #007996;
    background-color: rgba(0, 121, 150, 0.08);
    color: #007996;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    transition: inherit;
}

.unit-list-item .view-unit-btn svg {
    width: 12px;
    height: 12px;
}

/* Hover and Active/Selected state */
.unit-list-item.selected,
.unit-list-item:hover {
    border-left-color: #F26633;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
}

.unit-list-item.selected .view-unit-btn,
.unit-list-item:hover .view-unit-btn {
    background-color: #007996;
    color: #FFFFFF;
}

/* -------------------------- */
/* --- Responsive Styles --- */
/* -------------------------- */

/* Tablet and smaller */
@media (max-width: 1024px) {
    .content-area {
        flex-direction: column;
    }

    .right-sidebar {
        width: 100%;
        flex-shrink: 1;
    }

    .info-header {
        flex-direction: column;
    }

    .info-header-text,
    .slider-container {
        flex-basis: auto;
        width: 100%;
    }

    .moving-section {
        flex-direction: column;
    }

    .moving-img {
        width: 100%;
        height: auto;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .dashboard-container {
        flex-direction: column;
    }

    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    .main-content {
        overflow-x: visible; 
    }

    /* Sidebar becomes a slide-in menu */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
        border-right: none;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-header {
        align-items: center;
        padding-top: 10px;
        /* Lowers the logo and close icon */
    }

    .sidebar .logo {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .close-menu-btn {
        display: block;
        margin-top: 0px;
    }

    .main-header {
        margin: 0 -10px 20px -10px;
        padding: 10px 15px;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 999;
    }

    .main-header .header-logo {
        display: block;
    }

    .main-header h1.desktop-only {
        display: none;
    }

    .header-actions {
        gap: 12px;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
    }

    .search-button.mobile-only {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: 1px solid #e5e4e6;
        border-radius: 6px;
        padding: 4px;
        height: 33px;
        width: 33px;
        cursor: pointer;
    }

    .search-button.mobile-only svg {
        width: 17px;
        height: 17px;
    }

    .profile-container {
        border: none;
        padding: 0;
    }

    .hero-card {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
        align-items: flex-start;
        /* Keep content left-aligned */
    }

    .hero-profile {
        text-align: left;
        /* Keep content left-aligned */
    }

    .info-card {
        padding: 20px;
    }

    .info-header-text h3,
    .faq-accordion-section h3 {
        font-size: 24px;
    }

    .faq-accordion-section p {
        font-size: 16px;
    }

    .faq-question {
        font-size: 16px;
    }

    .faq-section {
        padding: 20px;
    }

    .site-footer {
        flex-direction: column;
        gap: 15px;
        padding: 25px 20px;
    }
}

/* --- Custom Sign In Page Styles (Final Version) --- */

/* Hide the default Bootstrap header on the sign-in page */
/* body:has(.nav-account) .masthead,
body:has(.nav-account) .header-navbar {
    display: none !important;
} */

.page-content {
    position: relative;
    padding-top: 140px;
}

/* Add and style the logo using a pseudo-element on the main content area */
.page-content::before {
    content: "";
    display: block;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("data:image/svg+xml,%3Csvg width='182' height='50' viewBox='0 0 91 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1_148)'%3E%3Cpath d='M40.7517 5.70117C39.2713 5.70117 38.062 6.33153 37.1768 7.35968V6.03777H33.792V19.6302H37.3389V11.6834C37.3389 10.1534 38.4391 8.99065 40.0255 8.99065C42.3631 8.99065 42.6062 10.894 42.6062 11.6834V19.6302H46.1499V11.6834C46.1499 8.10019 44.0025 5.70117 40.7517 5.70117Z' fill='%2300799C'/%3E%3Cpath d='M61.3687 5.70117C57.5289 5.70117 54.4121 8.78563 54.4121 12.8493C54.4121 16.9129 57.5289 19.9454 61.3687 19.9454C65.2117 19.9454 68.3534 16.9129 68.3534 12.8493C68.3565 8.78563 65.2117 5.70117 61.3687 5.70117ZM61.3687 16.7538C59.4862 16.7538 57.959 15.1749 57.959 12.8768C57.959 10.5237 59.4893 8.88967 61.3687 8.88967C63.2512 8.88967 64.7816 10.5237 64.7816 12.8768C64.7816 15.1749 63.2544 16.7538 61.3687 16.7538Z' fill='%2300799C'/%3E%3Cpath d='M87.4526 0V7.33476C86.3805 6.33109 84.9842 5.74663 83.3697 5.74663C79.7698 5.74663 76.7871 8.80661 76.7871 12.8458C76.7871 16.8574 79.7698 19.9143 83.3697 19.9143C85.0621 19.9143 86.5145 19.284 87.6147 18.1732V19.6267H90.9995V0H87.4526ZM83.9058 16.7044C81.9422 16.7044 80.362 15.0398 80.362 12.8794C80.362 10.6579 81.9422 8.96879 83.9058 8.96879C85.8693 8.96879 87.4526 10.713 87.4526 12.8794C87.4526 14.9878 85.8693 16.7044 83.9058 16.7044Z' fill='%2300799C'/%3E%3Cpath d='M72.9814 7.38736V6.04097H69.5935V19.6334H73.1404V12.9535C73.1404 11.8702 73.2744 10.7595 74.0287 10.0006C74.5616 9.43754 75.2723 9.18356 76.1076 9.1193L77.4197 5.77781C75.7585 5.51771 74.1035 6.01955 72.9814 7.38736Z' fill='%2300799C'/%3E%3Cpath d='M26.24 15.8568L22.8552 6.03733H20.9571H19.0933H17.1952L14.7797 15.5386L12.252 6.03733H8.70511L6.18053 15.5386L3.76193 6.03733H0L4.29801 19.6297H7.97579L10.4817 10.6304L12.9751 19.6297H16.631L20.1156 8.68115L24.4416 19.8684L22.4531 25H26.0966L33.3337 6.03733H29.5469L26.24 15.8568Z' fill='%2300799C'/%3E%3Cpath d='M51.5506 6.09305C51.5755 4.39783 52.3298 3.67873 53.7323 3.65425L53.5983 3.65119H55.54L56.8304 0.352539H53.3271V0.355599C49.8956 0.364779 48.0068 2.91068 48.0068 6.25829V19.661H51.5506V9.18057H53.3708L54.5832 6.09305H51.5506Z' fill='%2300799C'/%3E%3C/g%3E%3Cdefs%3E%3Cclippath id='clip0_1_148'%3E%3Crect width='91' height='25' fill='white'/%3E%3C/clippath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    width: 182px;
    height: 50px;
    background-size: contain;
}

#mainContent > div.row {
    justify-content: center;
}

#mainContent > div.row > div > form > div > div:nth-child(6) > div > a {
    padding-left: 0;
}
/* Hide the external sign-in column and center the local sign-in form */
body:has(.nav-account) .page-content .col-md-6:nth-child(2) {
    display: none;
}

#mainContent > div.row > div {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    float: none;
}

/* Apply custom font styles to the form text */
.login-heading-section,
.portal-form .col-form-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #333;
}

.login-heading-section {
    text-align: center;
    margin-bottom: 2rem;
}

/* Apply custom styles to the buttons */
#submit-signin-local.btn-primary {
    background-color: #007996;
    border-color: #007996;
    border-radius: 6px;
    padding: 10px 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

#submit-signin-local.btn-primary:hover {
    background-color: #005f78;
    border-color: #005f78;
}

.portal-form .btn-default {
    background-color: transparent;
    color: #007996;
    border-color: transparent;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 20px;
}

.portal-form .btn-default:hover {
    background-color: transparent;
    color: #005f78;
    text-decoration: underline;
}

/* Style the footer copyright text */
body:has(.nav-account) .footer-bottom p {
    font-size: 14px;
    color: #6c757d;
    text-align: center;
}

/* --- Mobile Header Logo Styles --- */

/* By default, the mobile logo is hidden */
.header-logo-mobile {
    display: none;
}

/* --- Mobile View (e.g., screens smaller than 768px) --- */
@media (max-width: 767px) {

    /* Show the mobile logo on small screens */
    .header-logo-mobile {
        display: block;
        margin-right: auto;
        /* Pushes other items to the right */
    }

    /* Hide the main page title in the header on mobile to make space */
    .main-header h1.desktop-only {
        display: none;
    }

    /* Make the header items spread out correctly */
    .main-header {
        justify-content: space-between;
    }
}

/* --- Info Grid Layout --- */

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Creates a 2-column grid */
    gap: 16px;
    /* Sets the spacing between all grid items */
    margin-bottom: 16px;
}

/* We use the grid gap for spacing, so remove the bottom margin from items inside the grid */
.info-grid>.faq-section {
    margin-bottom: 0;
}

/* On tablets and smaller, the grid collapses to a single column */
@media (max-width: 1024px) {
    .info-grid {
        grid-template-columns: 1fr;
        /* Stacks the items vertically */
    }
}

/* --- Ledger Page Styles --- */

.hero-balance {
    background-color: #fff;
    color: #212121;
    border-radius: 12px;
    padding: 1rem;
    text-align: left;
}

.hero-balance .balance-info {
    display: flex;
    flex-direction: column;
}

.hero-balance .balance-info span {
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
}

.hero-balance .balance-info strong {
    font-size: 20px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.hero-balance .balance-date {
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    padding: 4px 15px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.52);
    margin-top: 1rem;
    display: inline-block;
}

.ledger-table-card {
    background-color: #fff;
    border-radius: 16px;
    padding: 1.5rem;
}

.ledger-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f3f2f1;
    margin-bottom: 1.5rem;
}

.ledger-view-options {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ledger-view-options .btn-secondary {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    margin-bottom: 0;
    padding: 8px 16px;
    color: #343534;
}

.ledger-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin-bottom: 0;
}

.ledger-actions .btn-primary svg {
    width: 20px;
    height: 20px;
}

.table-responsive {
    overflow-x: auto;
}

.ledger-table {
    width: 100%;
    border-collapse: collapse;
}

.ledger-table th,
.ledger-table td {
    padding: 12px 16px;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}

.ledger-table thead th {
    color: #323130;
    font-weight: 500;
    border-bottom: 1px solid #f3f2f1;
}

.ledger-table tbody td {
    color: #323130;
    border-bottom: 1px solid #f3f2f1;
}

.ledger-table tbody tr:last-child td {
    border-bottom: none;
}

.ledger-table .text-right {
    text-align: right;
}

.ledger-table .no-data-cell {
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

/* Responsive adjustments for the ledger page */
@media(max-width: 768px) {
    .ledger-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .ledger-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ledger-actions .btn-primary,
    .ledger-view-options .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* --- Ledger Page Style Corrections (Final) --- */

.ledger-hero {
    align-items: center;
}

.balance-and-actions-card {
    background-color: #f6f6f6;
    /* Match light gray background from design */
    border: 1px solid #00799630;
    /* Light blue border */
}

.balance-and-actions-card .ledger-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.balance-and-actions-card .ledger-disclaimer p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.balance-and-actions-card .ledger-disclaimer svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 4px;
}

.balance-and-actions-card .ck-content * {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.balance-actions-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 1.5rem 0;
    padding-top: 1.5rem;
    border-top: 1px solid #e4e3e7;
}

.balance-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.balance-details span {
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
}

.balance-details strong {
    font-size: 20px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.balance-actions-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.balance-actions-buttons .btn-tertiary,
.balance-actions-buttons .btn-secondary {
    margin-bottom: 0;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.balance-actions-buttons svg {
    width: 20px;
    height: 20px;
}

/* New card for the table itself */
.ledger-table-card {
    padding: 0;
    /* Remove padding to let actions header and table fill it */
}

/* Style the separated actions header */
.ledger-actions {
    padding: 1.5rem;
    margin-bottom: 0;
    border-bottom: 1px solid #f3f2f1;
}

/* Responsive tweaks for the balance card */
@media (max-width: 768px) {
    .balance-actions-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .balance-actions-buttons {
        flex-direction: column;
    }

    .balance-actions-buttons a {
        width: 100%;
    }
}

/* --- Final Ledger Polish --- */

/* 1. Change the background color of the balance card */
.balance-and-actions-card {
    background-color: #0079960f;
    /* Light blue transparent background */
}

/* 2. Style the new info icon */
.balance-and-actions-card .ledger-disclaimer svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 4px;
}

/* Final style for the 'As Of' date box on the Ledger page */
.balance-date {
    background-color: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 6px;
    padding: 4px 15px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.52);
    display: inline-block;
    margin-bottom: 1rem;
    /* Adds space between the date and 'Current Balance' */
}

/* --- New Info Header Layout for Text Wrapping --- */

.info-header {
    display: block;
    /* Change from flex to block */
    position: relative;
}

.info-header::after {
    content: "";
    display: table;
    clear: both;
}

.info-header .slider-container {
    float: right;
    width: 48%;
    /* Give it a bit of space from the text */
    margin-left: 2%;
    /* Gutter between text and slider */
    margin-bottom: 20px;
    /* Space when text wraps below */
}

.info-header .info-header-text {
    width: 100%;
    /* Allow text to take full width initially */
}

/* On mobile, stack them vertically */
@media (max-width: 768px) {
    .info-header .slider-container {
        float: none;
        width: 100%;
        margin-left: 0;
    }
}

/* --- Documents Page Styles (Optimized) --- */

.documents-page .hero-card {
    align-items: flex-start;
}

.documents-page .info-card,
.documents-page .documents-actions-card {
    margin-top: 16px;
    /* Adds the space below the hero card */
}

.documents-actions-card {
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.commonly-referenced h4 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.common-doc-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.document-search {
    display: flex;
    gap: 1rem;
}

.document-search input {
    border: 1px solid #e5e4e6;
    border-radius: 6px;
    padding: 8px 12px;
    font-family: 'Poppins', sans-serif;
    min-width: 250px;
}

.documents-table-card {
    padding: 0;
}

.documents-main-actions {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    margin-bottom: 0;
    border-bottom: 1px solid #f3f2f1;
}

/* Specificity for buttons on this page to override the default width: 100% */
.documents-page .btn-primary,
.documents-page .btn-secondary,
.documents-page .btn-tertiary {
    width: auto;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.common-doc-buttons .btn-secondary {
    border: 1px solid rgba(0, 0, 0, .06);
}

.common-doc-buttons svg {
    width: 14px;
    height: 18px;
}

.document-search svg,
.documents-main-actions svg {
    width: 18px;
    height: 18px;
}

/* --- Events Page Styles --- */

.calendar-card {
    margin-top: 16px;
}

/* --- FullCalendar Custom Theme (V2) --- */

/* Main calendar card */
.calendar-card {
    border: 1px solid #e4e3e7;
    background-color: #fff;
    border-radius: 16px;
    padding: 1.5rem;
}

/* Toolbar Header */
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1.5em;
    font-family: 'Poppins', sans-serif;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e4e3e7;
}

.fc .fc-toolbar-title {
    font-size: 28px;
    font-weight: 500;
}

/* All Toolbar Buttons */
.fc .fc-button {
    background-color: #fff;
    color: #3f3f46;
    border: 1px solid #e5e4e6;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    box-shadow: none;
    transition: all 0.2s ease;
}

.fc .fc-button:hover {
    background-color: #f6f6f6;
    border-color: #ccc;
}

.fc .fc-button .fc-icon {
    font-size: 1.2em;
    /* Makes prev/next arrows larger */
}

/* "Today" and View Buttons */
.fc .fc-button-primary {
    background-color: #fff;
    border-color: #e5e4e6;
    color: #3f3f46;
}

.fc .fc-button-primary:hover {
    background-color: #f6f6f6;
    border-color: #ccc;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: #007996;
    border-color: #007996;
    color: white;
}


/* Calendar Grid and Day Headers */
.fc .fc-col-header-cell {
    border-bottom-width: 1px;
    border-color: #e4e3e7;
    padding: 1rem 0;
}

.fc .fc-col-header-cell-cushion {
    /* Day name (Mon, Tue) */
    font-size: 14px;
    font-weight: 500;
    color: #77767b;
    text-decoration: none;
}

.fc .fc-daygrid-day {
    border-color: #e4e3e7;
}

.fc .fc-daygrid-day-number {
    font-size: 14px;
    font-weight: 500;
    color: #3f3f46;
    padding: 8px;
}

.fc .fc-day-today {
    background-color: #00799C1A !important;
}

/* Events */
.fc-direction-ltr .fc-daygrid-event .fc-event-main {
    color: #3f3f46;
}

.fc-event {
    border: none !important;
    background-color: rgba(242, 102, 51, 0.1);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 4px;
}

.fc-event .fc-event-main-frame {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Event dot */
.fc-event .fc-event-main-frame::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #F26633;
    flex-shrink: 0;
}

.fc-daygrid-day-events {
    padding: 0 4px;
}

/* Clean day-of-week header (no emoji, consistent weight) */
.fc .fc-col-header-cell-cushion {
    font-size: 14px;
    font-weight: 500;
    color: #77767b;
    text-decoration: none;
}

/* Custom View split menu */
.fc-view-menu {
    position: absolute;
    background: #fff;
    border: 1px solid #e5e4e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    padding: 6px;
    z-index: 1000;
}

.fc-view-menu.open {
    display: block;
}

.fc-view-menu button {
    display: block;
    width: 160px;
    text-align: left;
    background: #fff;
    border: none;
    padding: 10px 12px;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #3f3f46;
    cursor: pointer;
}

.fc-view-menu button:hover {
    background-color: #f6f6f6;
}

/* Toolbar polish to match screenshot spacing */
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1.5em;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e4e3e7;
}

.fc .fc-toolbar-title {
    font-size: 28px;
    font-weight: 500;
}

.fc .fc-button {
    background-color: #fff;
    color: #3f3f46;
    border: 1px solid #e5e4e6;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    box-shadow: none;
}

.fc .fc-button:hover {
    background-color: #f6f6f6;
    border-color: #ccc;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: #007996;
    border-color: #007996;
    color: #fff;
}

/* Hover text color for Today, Prev/Next, and View */
.fc .fc-button:hover,
.fc .fc-button:focus {
    color: #000;
    /* black text on hover/focus */
}

/* Make sure the prev/next icon arrows don’t override the hover color */
.fc .fc-button .fc-icon {
    color: inherit;
}

/* Custom View split menu (unchanged) */
.fc-view-menu {
    position: absolute;
    background: #fff;
    border: 1px solid #e5e4e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    padding: 6px;
    z-index: 1000;
}

.fc-view-menu.open {
    display: block;
}

.fc-view-menu button {
    display: block;
    width: 160px;
    text-align: left;
    background: #fff;
    border: none;
    padding: 10px 12px;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #3f3f46;
    cursor: pointer;
}

.fc-view-menu button:hover {
    background-color: #f6f6f6;
}

/* Add Event (orange) and Print (dark) in toolbar */
.fc .fc-addEventBtn-button {
    background-color: #F26633;
    color: #fff;
    border-color: transparent;
}

.fc .fc-addEventBtn-button:hover {
    background-color: #d45a2d;
    color: #fff;
    /* keep white text for the orange button */
}

.fc .fc-printBtn-button {
    background-color: #343534;
    color: #fff;
    border-color: transparent;
}

.fc .fc-printBtn-button:hover {
    filter: brightness(1.05);
    color: #fff;
    /* keep white text for the dark button */
}

/* Keep spacing consistent in the right side of the toolbar */
.fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:last-child .fc-button {
    margin-left: 8px;
}

/* View menu styling */
.fc-view-menu {
    position: absolute;
    background: #fff;
    border: 1px solid #e5e4e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    padding: 6px;
    z-index: 1000;
}

.fc-view-menu.open {
    display: block;
}

.fc-view-menu button {
    display: block;
    width: 160px;
    text-align: left;
    background: #fff;
    border: none;
    padding: 10px 12px;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #3f3f46;
    cursor: pointer;
}

.fc-view-menu button:hover {
    background-color: #f6f6f6;
}

/* Makes sure button hover turns text black (except for custom Add/Print) */
.fc .fc-button:hover,
.fc .fc-button:focus {
    color: #000;
}

/* Remove background/hover for today/prev/next unless styled by custom button class */
.fc .fc-todayCustom-button.btn-tertiary:focus,
.fc .fc-todayCustom-button.btn-tertiary:hover {
    color: #fff !important;
}

/* Ensure Add Event/Print class overrides stay applied on hover */
.fc .btn-primary:hover,
.fc .btn-primary:focus {
    color: #fff !important;
    background: #d45a2d !important;
}

.fc .btn-secondary:hover,
.fc .btn-secondary:focus {
    color: #fff !important;
}

/* Tighten up toolbar button spacing (optional) */
.fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:last-child .fc-button {
    margin-left: 8px;
}

/* Keep the left header chunk on one line */
.fc .fc-header-toolbar .fc-toolbar-chunk:first-child {
    white-space: nowrap;
    /* prevent wrapping */
    display: flex;
    align-items: center;
    gap: 8px;
    /* consistent spacing between buttons/title */
}

/* Make the title shrink if space is tight, but prefer staying inline */
.fc .fc-toolbar-title {
    margin: 0 8px;
    /* small horizontal breathing room */
    white-space: nowrap;
    /* don’t break the month/year */
    max-width: 38ch;
    /* keep from pushing Today to a new line */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Buttons spacing so they don't trigger wraps */
.fc .fc-header-toolbar .fc-toolbar-chunk .fc-button {
    margin: 0;
    /* rely on gap above */
    padding-left: 12px;
    padding-right: 12px;
}

/* At smaller widths, let the title give up space first */
@media (max-width: 1024px) {
    .fc .fc-toolbar-title {
        max-width: 26ch;
    }
}

@media (max-width: 768px) {
    .fc .fc-toolbar-title {
        max-width: 20ch;
        font-size: 22px;
    }
}

/* Home page rich text content override */
.info-header,
.info-header-text,
.info-header-text p,
.info-header-text ul,
.info-header-text li,
.faq-section,
.faq-section p,
.faq-section ul,
.faq-section li,
.property-contact-item,
.property-contact-item p,
.property-contact-item ul,
.property-contact-item li,
.property-contact-item [style] {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Ensure links inside these areas match font too */
.info-header-text a,
.faq-section a,
.property-contact-item a {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
}

.info-header-text .ck-content,
.info-header-text .ck-content * {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* --- Contact Page & Entity Form Styles (Corrected Spacing) --- */

/* 1. Hiding Unwanted Elements */
.info-card .crmEntityFormView h2.tab-title,
.info-card .crmEntityFormView td.lookup {
    display: none;
}

.info-card .crmEntityFormView fieldset {
    border: none !important;
    padding: 0;
    margin: 0;
}

/* 2. Enforce a stable, full-width table layout */
.info-card .crmEntityFormView table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 1rem;
}

/* 3. Style the table cells (td) for spacing */
.info-card .crmEntityFormView td.cell {
    padding: 0 12px;
    vertical-align: top;
}

.info-card .crmEntityFormView td.cell:first-child {
    padding-left: 0;
}

.info-card .crmEntityFormView td.cell:last-child {
    padding-right: 0;
}

/* 4. NEW: This fixes the spacing by putting the label and validator side-by-side */
.info-card .crmEntityFormView .table-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    /* This now correctly controls the space above the input */
}

/* 5. Style Labels and Inputs */
.info-card .crmEntityFormView .field-label {
    font-weight: 500;
}

.info-card .crmEntityFormView .required .field-label::after {
    content: " *";
    color: #f26633;
}

.info-card .crmEntityFormView .control input,
.info-card .crmEntityFormView .control select,
.info-card .crmEntityFormView .control textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    /* Sets horizontal and vertical padding */
}

.info-card .crmEntityFormView .control textarea {
    height: 150px;
    resize: vertical;
}

/* 6. Style the submit button */
.info-card .crmEntityFormView .actions {
    text-align: right;
    margin-top: 24px;
}

.info-card .crmEntityFormView #InsertButton {
    width: auto;
    display: inline-block;
}

.form-container {
    max-width: 960px;
    margin: 0 auto;
}

legend.section-title h3 {
    font-size: 16px;
}

label.field-label {
    font-weight: 500 !important;
}

.crmEntityFormView label {
    background-color: transparent !important;
}

.crmEntityFormView .boolean-radio label {
    background-color: transparent !important;
}

/* --- Sidebar Submenu Styles --- */

.main-nav .has-submenu>a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0079960F !important;
    color: #007996 !important;
}

.main-nav .nav-item-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.main-nav .submenu-arrow {
    width: 12px;
    height: 12px;
    transition: transform 0.3s ease-in-out;
    transform: rotate(-90deg);
}

.main-nav .has-submenu.open>a .submenu-arrow {
    transform: rotate(0deg);
}

.main-nav .submenu {
    list-style: none;
    padding-left: 32px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.main-nav .has-submenu.open>.submenu {
    margin-top: 10px;
}

.main-nav .submenu a {
    font-size: 14px;
    font-weight: 500;
    padding: 8px;
    color: #007996 !important;
}

.main-nav .submenu a svg {
    display: none;
}

.main-nav .has-submenu a:hover,
.main-nav .has-submenu li.active>a {
    background-color: #0079960F;
    color: #007996;
    font-weight: 600;
}

.main-nav a:hover,
.main-nav li.active>a {
    color: #f26633;
    background-color: rgba(242, 102, 51, 0.1);
    font-weight: 600;
}

label .visually-hidden {
    display: none;
}

.crmEntityFormView, label.field-label {
    background-color: transparent !important;
}

.checkbox-cell {
  display: flex;
  grid-template-columns: auto 1fr; /* Checkbox and label in two columns */
  align-items: start; /* Aligns both items to the top of the grid cell */
  flex-direction: row-reverse;
}

.checkbox-cell .checkbox, .checkbox-cell .table-info {
  margin-top: 0; /* Ensure no margin is pushing the checkbox down */
}

/* ============================================= */
/* ==   DOCUMENTS PAGE ACTION BAR STYLES        == */
/* ============================================= */

.documents-main-actions, .page-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 16px;
    padding: 1.5rem;
}

.document-search {
    display: flex;
    gap: 0.5rem;
}

#action-bar {
    display: flex;
    gap: 1rem;
}

@media (max-width: 1080px) {
    .documents-main-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .document-search input {
        flex-grow: 1;
        min-width: 0;
    }
    
    #action-bar {
        justify-content: flex-start;
    }
}

/* ============================================= */
/* ==   DOCUMENTS PAGE ACTION BAR BUTTONS       == */
/* ============================================= */

#action-bar .btn-secondary,
#action-bar .btn-tertiary {
    width: 170px; 
    height: 42px;
    justify-content: center;
}

#action-bar .btn-secondary {
    background-color: #343534;
    color: white !important;
    border-color: #343534;
}

#action-bar .btn-secondary:hover {
    background-color: #4a4b4a;
    border-color: #4a4b4a;
}

/* =================================================== */
/* ==   DOCUMENT SEARCH & TABLE ACTION BUTTONS      == */
/* =================================================== */

.document-search .btn-primary,
.document-search .btn-secondary {
    padding: 9px 12px;
}

.actions-column .btn-primary,
.actions-column .btn-tertiary {
    width: 100px !important;
    height: 40px !important;
    justify-content: center;
    padding: 8px 12px !important;
}

.actions-column button svg {
    width: 16px !important;
    height: 16px !important;
}

.document-search #clearSearch-button,
.actions-column .rename-btn {
    background-color: #007996;
    color: white !important;
    border-color: #007996;
}

.document-search #clearSearch-button {
    display: none;
}

.document-search #clearSearch-button:hover,
.actions-column .rename-btn:hover {
    background-color: #008caf;
    border-color: #008caf;
}

.document-search #search-button:hover,
.actions-column .delete-btn:hover {
     background-color: #f47e54 !important;
     border-color: #f47e54 !important;
}

.commonly-referenced-container h4 svg, 
.common-doc-buttons a svg {
    vertical-align: top;
}

.documents-table tbody td {
    vertical-align: baseline !important;
}

/* Table Styles */
.documents-table {
    width: 99%;
    border-collapse: collapse;
    table-layout: fixed;
}

.documents-table th,
.documents-table td {
    padding: 16px 8px;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    border-bottom: 1px solid #f4f4f4;
    overflow-wrap: break-word;
}

.documents-table thead th {
    color: #323130;
    font-weight: 500;
}

.documents-table tbody td {
    color: #323130;
    vertical-align: baseline !important;
}

.documents-table .actions-column {
    text-align: right;
}

.documents-table .name-column {
    font-weight: 500 !important;
}

.documents-table .name-column.folder-item svg {
    vertical-align: bottom;
}

.datatables_wrapper {
    display: flex;
    justify-content: center;
}

td.lookup.form-control-cell {
    display: none !important;
}

.crmEntityFormView, .entitylist, .modal-content, .popover-content {
  border: 0 !important; }

.ledger-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}
.ledger-table tbody tr:hover {
    background-color: #f1f1f1;
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    position: relative;
    padding-right: 30px;
}
table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:before {
    content: "\2191";
    position: absolute;
    right: 1em;
    opacity: 0.3;
}
table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:after {
    content: "\2193";
    position: absolute;
    right: 0.5em;
    opacity: 0.3;
}
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:after {
    opacity: 1;
}

.btn-tertiary.rename-btn {
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    white-space: nowrap;
}
.btn-tertiary.rename-btn .main-grid-item-icon {
    min-width: 24px;
}

.text-right {
    text-align: right;
}

.main-column .page-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 15px;
    padding: 1.5rem;
}
.main-column .page-controls .form-control {
    border-radius: 6px;
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
}
.main-column .page-controls .ledger-view-options {
    display: inline-flex;
    align-items: center;
    order: 1;
}
.main-column .page-controls .ledger-view-options span {
    margin-right: 8px;
    white-space: nowrap;
}
.main-column .page-controls #tableSearch {
    order: 3;
    flex-basis: 100%;
}
.main-column .page-controls #exportPdfBtn {
    order: 2;
    margin-left: auto;
}

@media (min-width: 768px) {
    .main-column .page-controls #tableSearch {
        order: 2;
        flex-basis: 250px;
    }
    .main-column .page-controls #exportPdfBtn {
        order: 3;
    }
}

#EntityFormPanel > div.actions {
    display: flex;
    justify-content: flex-end;
}

.form-action-container-left {
    float: none !important;
}

td.clearfix.cell.checkbox-cell {
    display: inline-block;
    text-align: left;
}

.boolean-radio > label {
    background-color: transparent !important;
}