:root {
    /*--bs-body-bg: white;*/
    --bs-body-bg: #edf1f6;
    --bs-primary: #006EC7;
    --bs-primary-rgb: 0, 110, 199;
    --bs-card-box-shadow: none !important;
    --nf-mainnav-link-padding-x: 1rem;
    --nf-btn-scroll-bottom-margin: 2rem;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
    font-size: 13px;
    line-height: 15px;
    font-weight: 400;
}

.scroll-container {
    position: fixed;
    bottom: var(--nf-btn-scroll-bottom-margin);
    right: 1rem;
    z-index: 99999;
    pointer-events: none; /* container itself ignores clicks */
}

/* =================================================================================
*   Go up button 
* ================================================================================= */

.scroll-page {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.5em;
    height: 3.5em;
    background-color: var(--bs-primary);
    color: var(--bs-primary-color);
    border: 3px solid var(--bs-body-bg);
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto; /* button is clickable */
    z-index: 100000;
    opacity: 0; /* hidden by default */
    transform: translateY(20px); /* slightly below for smooth transition */
    transition: transform 0.3s, opacity 0.3s;
}

    /* Show button when active */
    .scroll-page.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* =================================================================================
*   App-specific Custom Styles
* ================================================================================= */
/* =================================================================================
*   App-specific Custom Styles
* ================================================================================= */
/* =================================================================================
*   App-specific Custom Styles
* ================================================================================= */
/*
  This ensures the main navigation container itself fills the entire height
  of the viewport, providing a boundary for the flexbox layout inside.
*/
.mainnav {
    position: fixed; /* Keep the nav visible even when scrolling the page content */
    top: 0; /* Anchor the top of the nav to the top of the viewport */
    bottom: 0; /* Anchor the bottom of the nav to the bottom of the viewport */
    /* height: 100vh; is no longer needed as top:0 and bottom:0 achieve the same result more robustly */
}

.mainnav__inner {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure the inner container takes up the full height of the nav */
}

.mainnav__top-content {
    flex-grow: 1; /* Allows this element to grow and fill available space */
    overflow-y: auto; /* Adds a scrollbar only when content overflows */
}

.mainnav__bottom-content {
    flex-shrink: 0; /* Prevents this element from shrinking */
}
/* =================================================================================
*   App-specific Custom Styles
* ================================================================================= */
/*
  This ensures the main navigation container itself fills the entire height
  of the viewport, providing a boundary for the flexbox layout inside.
  Using !important to override theme defaults.
*/
.mainnav {
    position: fixed !important; /* Force position */
    top: 0 !important; /* Force top anchor */
    bottom: 0 !important; /* Force bottom anchor */
    height: 100vh !important; /* Force full viewport height */
}

.mainnav__inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Target the specific scrollable area and force it to grow and scroll */
.mainnav__top-content.scrollable-content {
    flex-grow: 1 !important;
    overflow-y: auto !important; /* Add scrollbar when needed */
}

.mainnav__bottom-content {
    flex-shrink: 0 !important; /* Prevent the bottom section from shrinking */
}

/* =================================================================================
*   Other sections Custom Styles
* ================================================================================= */

/*party combo container*/
.header-searchbox {
    padding-left: 20px;
}

/*Apple background */
section.content {
    background-color: white;
    /*background-color: #edf1f6;*/ /*new nifty to see the shadows better*/
}

.content .page-title {
    color: #25476a;
    font-size: 2rem;
    font-weight: 400;
    text-transform: capitalize;
    font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif !important;
}


footer {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}




.card {
    border: 1px solid #edf1f6 !important;
    border-radius: 6px;
    box-shadow: none;  
    background-color: white;
}

    .card.card-indicator:hover {
        background-color: aliceblue;
    }

.card-img .card-img-square {
    border-radius: 0px;
}

.header__brand {
    color: rgb(28, 62, 100);
    padding-inline: 1rem;
    margin-inline-end: 0rem;
}

    .header__brand > .brand-wrap > .brand-img {
        padding-top: 10px;
    }


/*for custom centered layout*/
.content__wrap {
    padding: 1rem 1.5rem 1rem 1rem;
}

@media (min-width: 1200px) {
    .content__wrap {
        padding: 1rem 1.5rem 1rem 1rem;
    }
}

@media (min-width: 992px) {
    .content__wrap {
        padding: 1rem 1.5rem 1rem 1rem;
    }
}

@media (min-width: 768px) {
    .content__wrap {
        /*padding-inline: 4.25rem;*/
        padding: 1rem 1.5rem 1rem 1rem;
    }
}

@media (max-width: 768px) {
    .content__wrap {
        padding: 1rem 1.5rem 1rem 1rem;
    }

    .hd--expanded .content__header {
        background-image: none !important;
    }
}

/*#region buttons */
.bg-primary .list-group-item {
    color: #fff;
}

.bg-secondary .list-group-item {
    color: white;
}
/*#endregion*/


/*#region Management pages with fair header */
.hd--fair .header__brand {
    margin-inline-end: 0rem;
}

.hd--fair .header__brand .brand-title {
    color: #fff !important;
}

/*#endregion*/


/*#region Dashboard big header */
.hd--expanded .header__brand .brand-title {
    /*apple colors*/
    /*color: #1c3e64 !important;*/
    line-height: 0rem;
}

@media (min-width: 1200px) {
    .hd--expanded .content__header {
        min-height: 440px; /*TODO change this to catch the size of the image*/
    }
}

@media (max-width: 768px) {
    .content__wrap {
        padding-inline: 1.25rem;
    }

    .hd--expanded .content__header {
        background-image: none;
    }
}
/*#endregion*/


/*#region Buttons */
.bg-primary .list-group-item-action:hover, .list-group-item-action:focus {
    background-color: #325983;
}

.bg-secondary .list-group-item-action:hover, .list-group-item-action:focus {
    background-color: #1d8177;
}

.bg-secondary .list-group-item:active, .bg-primary .list-group-item:active {
    font-weight: bold;
}

.btn-icon {
    height: calc(1.5rem + 1.5em);
    width: calc(1.5rem + 1.5em);
}

.btn-link {
    color: #337ab7;
}

/*#endregion Buttons */