/**
 * SCOPE: Apexus Style Guide
 * Only include styles intended to allow custom on-the-fly content styling
 * across all pages of the application which aligns with our Style Guide.
 *
 * For example, titles 1-3 should be weight 300 but if it falls on a gray
 * background it should be 400 instead. We therefore need a style that allows
 * which title to be used, another to allow choosing of background colors,
 * and a rule in place that dictates how these two interact with each other.
 * --------------------------------------------------------------------------
 * CAUTION: Do not modify this file unless absolutely necessary!
 *
 *          There are over 100 pages throughout the application. Adjustments
 *          to this file should therefore only be done if the intention is to
 *          affect all pages. Even small adjustments like reordering styles
 *          can have major implications.
 *
 *          Changes intended for specific pages are recommended through the
 *          Pages/*.css files instead.
 *
 *          Changes intended for specific components are recommended through
 *          the Components/*.css files instead.
 *
 *          Changes intended for specific isolated areas of the application
 *          are recommended through the Partials/*.css files instead.
 * --------------------------------------------------------------------------
 */

/* ---------------------------------------------------- */
/*                Alternative Backgrounds               */
/* :: sets the background color of any given element :: */
.background-blue {
    background-color: var(--apexus-color-blue);
}
.background-blue-dark {
    background-color: var(--apexus-color-blue-dark);
}
.background-green {
    background-color: var(--apexus-color-green);
}
.background-black {
    background-color: var(--apexus-color-black);
}
.background-gray {
    background-color: var(--apexus-color-gray-light-2);
}
.background-white {
    background-color: var(--apexus-color-white);
}

/* ----------------- */
/* Alternative Fonts */
.font-default {
    font-size: var(--apexus-font-size);
    font-weight: var(--apexus-font-weight);
    line-height: var(--apexus-line-height);
}
.font-size-title-1,
.font-size-title-2,
.font-size-title-3,
.font-size-title-4,
.font-size-title-5,
.banner-title,
.card-title {
    line-height: var(--apexus-line-height-thin);
    margin-bottom: 0;
}
.font-size-title-1:has(+ *),
.font-size-title-2:has(+ *),
.font-size-title-3:has(+ *),
.font-size-title-4:has(+ *),
.font-size-title-5:has(+ *),
.banner-title:has(+ *),
.card-title:has(+ *) {
    margin-bottom: var(--apexus-content-gap-related);
}
.font-size-title-1 {
    font-size: var(--apexus-font-size-title-1);
}
.banner-title,
.font-size-title-2 {
    font-size: var(--apexus-font-size-title-2);
}
.card-title,
.font-size-title-3 {
    font-size: var(--apexus-font-size-title-3);
}
.font-size-title-4 {
    font-size: var(--apexus-font-size-title-4);
}
.font-size-title-5 {
    font-size: var(--apexus-font-size-title-5);
}
.font-size-normal {
    font-size: var(--apexus-font-size);
}
.font-size-small {
    font-size: var(--apexus-font-size-small);
}
.font-weight-normal {
    font-weight: var(--apexus-font-weight) !important;
}
.font-weight-light {
    font-weight: var(--apexus-font-weight-light) !important;
}
b, strong, .font-weight-bold {
    font-weight: var(--apexus-font-weight-heavy-3);
}
.font-italic {
    font-style: italic;
}
.caps {
    text-transform: uppercase;
}
/* [STYLE_GUIDE]: Titles 1-3 should be light font weight */
h1, .font-size-title-1,
h2, .font-size-title-2,
h3, .font-size-title-3,
.card-title,
.banner-title {
    font-weight: var(--apexus-font-weight-light);
}
/* [STYLE_GUIDE]: Titles 1-3 on a gray background should be normal font weight */
.background-gray h1, .background-gray .font-size-title-1,
.background-gray h2, .background-gray .font-size-title-2,
.background-gray h3, .background-gray .font-size-title-3,
.background-gray .card-title,
.background-gray .banner-title,
apexus-pointer-banner[container-class-list*="left-box-gray"] *[slot="left-content"] h1, apexus-pointer-banner[container-class-list*="left-box-gray"] *[slot="left-content"] .font-size-title-1,
apexus-pointer-banner[container-class-list*="left-box-gray"] *[slot="left-content"] h2, apexus-pointer-banner[container-class-list*="left-box-gray"] *[slot="left-content"] .font-size-title-2,
apexus-pointer-banner[container-class-list*="left-box-gray"] *[slot="left-content"] h3, apexus-pointer-banner[container-class-list*="left-box-gray"] *[slot="left-content"] .font-size-title-3,
apexus-pointer-banner[container-class-list*="left-box-gray"] *[slot="left-content"] .card-title,
apexus-pointer-banner[container-class-list*="left-box-gray"] *[slot="left-content"] .banner-title,
apexus-pointer-banner[container-class-list*="right-box-gray"] *[slot="right-content"] h1, apexus-pointer-banner[container-class-list*="right-box-gray"] *[slot="right-content"] .font-size-title-1,
apexus-pointer-banner[container-class-list*="right-box-gray"] *[slot="right-content"] h2, apexus-pointer-banner[container-class-list*="right-box-gray"] *[slot="right-content"] .font-size-title-2,
apexus-pointer-banner[container-class-list*="right-box-gray"] *[slot="right-content"] h3, apexus-pointer-banner[container-class-list*="right-box-gray"] *[slot="right-content"] .font-size-title-3,
apexus-pointer-banner[container-class-list*="right-box-gray"] *[slot="right-content"] .card-title,
apexus-pointer-banner[container-class-list*="right-box-gray"] *[slot="right-content"] .banner-title,
apexus-mid-page-banner[top-banner-class-list*="apexus-gray-bg"] *[slot="top-banner-left-content"] h1, apexus-mid-page-banner[top-banner-class-list*="apexus-gray-bg"] *[slot="top-banner-left-content"] .font-size-title-1,
apexus-mid-page-banner[top-banner-class-list*="apexus-gray-bg"] *[slot="top-banner-left-content"] h2, apexus-mid-page-banner[top-banner-class-list*="apexus-gray-bg"] *[slot="top-banner-left-content"] .font-size-title-2,
apexus-mid-page-banner[top-banner-class-list*="apexus-gray-bg"] *[slot="top-banner-left-content"] h3, apexus-mid-page-banner[top-banner-class-list*="apexus-gray-bg"] *[slot="top-banner-left-content"] .font-size-title-3,
apexus-mid-page-banner[top-banner-class-list*="apexus-gray-bg"] *[slot="top-banner-left-content"] .card-title,
apexus-mid-page-banner[top-banner-class-list*="apexus-gray-bg"] *[slot="top-banner-left-content"] .banner-title,
apexus-mid-page-banner[bottom-banner-class-list*="apexus-gray-bg"] *[slot="bottom-banner-left-content"] h1, apexus-mid-page-banner[bottom-banner-class-list*="apexus-gray-bg"] *[slot="bottom-banner-left-content"] .font-size-title-1,
apexus-mid-page-banner[bottom-banner-class-list*="apexus-gray-bg"] *[slot="bottom-banner-left-content"] h2, apexus-mid-page-banner[bottom-banner-class-list*="apexus-gray-bg"] *[slot="bottom-banner-left-content"] .font-size-title-2,
apexus-mid-page-banner[bottom-banner-class-list*="apexus-gray-bg"] *[slot="bottom-banner-left-content"] h3, apexus-mid-page-banner[bottom-banner-class-list*="apexus-gray-bg"] *[slot="bottom-banner-left-content"] .font-size-title-3,
apexus-mid-page-banner[bottom-banner-class-list*="apexus-gray-bg"] *[slot="bottom-banner-left-content"] .card-title,
apexus-mid-page-banner[bottom-banner-class-list*="apexus-gray-bg"] *[slot="bottom-banner-left-content"] .banner-title {
    font-weight: var(--apexus-font-weight);
}
/* [STYLE_GUIDE]: Title 4-5 should be normal font weight */
h4, .font-size-title-4,
h5, .font-size-title-5 {
    font-weight: var(--apexus-font-weight);
}
/* [STYLE_GUIDE]: Links regardless of Title should be normal font weight */
h1 a, .font-size-title-1 a, a .font-size-title-1, a.font-size-title-1,
h2 a, .font-size-title-2 a, a .font-size-title-2, a.font-size-title-2,
h3 a, .font-size-title-3 a, a .font-size-title-3, a.font-size-title-3,
.banner-title a, a .banner-title, a.banner-title,
.card-title a, a .card-title, a.card-title {
    font-weight: var(--apexus-font-weight);
}

/* ------------------------- */
/* Alternative (Font) Colors */
.color-white {
    color: var(--apexus-color-white);
}
.color-gray-dark {
    color: var(--apexus-color-gray-dark);
}
.color-yellow {
    color: var(--apexus-color-yellow);
}
.color-orange {
    color: var(--apexus-color-orange);
}
.color-red {
    color: var(--apexus-color-red);
}
.color-blue {
    color: var(--apexus-color-blue);
}
.color-green {
    color: var(--apexus-color-green);
}

/* ------------------- */
/* Alternative Borders */
.card-border {
    border: var(--apexus-card-border-width) solid var(--apexus-card-border-color);
}
.card-border-blue-dark {
    border: var(--apexus-card-border-width) solid var(--apexus-color-blue-dark);
}
.border-none {
    border: none !important;
}
.border-left-none {
    border-left: none;
}
.border-right-none {
    border-right: none;
}
.content-shadow {
    box-shadow: 0 -10px 5px -8px var(--apexus-color-shadow);
}

/* ------------------- */
/* Alternative Margins */
.margin-bottom-none {
    margin-bottom: 0;
}
.margin-top-content {
    margin-top: var(--apexus-content-gap);
}
.margin-bottom-content {
    margin-bottom: var(--apexus-content-gap);
}
.margin-bottom-related {
    margin-bottom: var(--apexus-content-gap-related);
}
.margin-bottom-divergent {
    margin-bottom: var(--apexus-content-gap-divergent);
}
.margin-top-divergent {
    margin-top: var(--apexus-content-gap-divergent);
}
.margin-left-auto {
    margin-left: auto;
}
.margin-right-auto {
    margin-right: auto;
}
.margin-left-right-auto {
    margin-left: auto;
    margin-right: auto;
}

/* -------------------- */
/* Alternative Paddings */
.padding-bottom-content {
    padding-bottom: var(--apexus-content-gap);
}
.padding-top-divergent {
    padding-top: var(--apexus-content-gap-divergent);
}
.banner-padding {
    padding-top: var(--apexus-banner-padding) !important;
    padding-bottom: var(--apexus-banner-padding) !important;
}
.card-body {
    flex: unset;
    min-height: 1px;
    padding: var(--apexus-card-padding);
}

/* ---------------- */
/* Alternative Gaps */
.content-gap {
    gap: var(--apexus-content-gap);
}
.no-gap {
    gap: 0;
}

/* ------------------ */
/* Alternative Widths */
.width-100 {
    width: 100%;
}
.max-width-content-copy {
    max-width: var(--apexus-content-copy-width);
}
.max-width-100 {
    max-width: 100%;
}
.icon-width {
    width: var(--apexus-icon-width);
}

/* ------------------- */
/* Alterantive Layouts */
.container {
    width: 100%;
    max-width: var(--apexus-page-width);
    padding-right: var(--apexus-page-padding);
    padding-left: var(--apexus-page-padding);
    margin-right: auto;
    margin-left: auto;
}
.row {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.row:not(.no-gap) {
    gap: var(--apexus-content-gap);
}
.row:not(.margin-bottom-none):has(> *):has(+ *) {
    margin-bottom: var(--apexus-content-gap);
}
.row:has(.card-body) > * {
    flex: 1;
}
.grid-box-2-col,
.grid-box-3-col,
.grid-box-4-col {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
}

/* ----------------- */
/* Alterantive Table */
.table-hover tbody tr:hover {
    color: var(--apexus-color-black);
    background-color: var(--apexus-color-gray-light-2);
}

/* ------------------- */
/* Alterantive Display */
.mobile-hidden {
    display: none;
}
.tablet-hidden {
    display: none;
}
.laptop-hidden {
    display: none;
}
.block {
    display: block;
}



/* ---------------------- */
/* Alternative Structures */

/* --- Tabulated Page Content --- */
/* Expected HTML Layout:
    <body>
        <div>
            <div class="container">
                <div>
                    <div class="tab-container" id="{{Your_Tab_1_ID}}">
                        <a>{{Your_Tab_1_Header_Content}}</a> (optional, OR:)
                        <button>{{Your_Tab_1_Header_Content}}</button>
                    </div>
                    ...
                </div>
            </div>
            <div>
                {{Your_Tab_1_Content}}
            </div>
            ...
        </div>
    </body>
 */
.container > div:has(.tab-container) {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tab-container {
    flex: 1;
    box-shadow: 0px -3px 5px var(--apexus-color-shadow);
}
.tab-container > a,
.tab-container > button {
    width: 100%;
    height: 100%;
    display: block;
    padding: 15px 25px 15px 25px;
    border: none;
    font-weight: var(--apexus-font-weight-heavy-2);
    font-size: var(--apexus-font-size-title-5);
    line-height: var(--apexus-line-height-thin);
    text-align: center;
    cursor: pointer;
    color: var(--apexus-color-white);
    background-color: var(--apexus-color-blue);
}
.tab-container a:hover,
.tab-container button:hover {
    background-color: var(--apexus-color-blue-light);
}
.tab-container a:hover {
    text-decoration: none;
}
.tab-container button:focus {
    outline: 0;
}
.tab-container a.active,
.tab-container button.active {
    color: var(--apexus-color-black);
    background-color: var(--apexus-color-white);
}
.tab-container a.active:hover,
.tab-container button.active:hover {
    background-color: var(--apexus-color-white);
}
.container:has(> div .tab-container) + div {
    box-shadow: 0 -10px 5px -8px var(--apexus-color-shadow);
}
.container:has(> div .tab-container) + div > div {
    padding-top: var(--apexus-content-gap-divergent);
}

/* --- Distribution Table --- */
/* Expected HTML Layout:
    <body>
        <div>
            <div class="container">
                <table class="distribution-table">
                    <thead>
                        <tr>
                            <th>{{Your_Header_Content}}<th>
                            ...
                        </tr>
                        ...
                    </thead>
                    <tbody>
                        <tr>
                            <th>
                                <img /> (optional, OR:)
                                {{Your_Cell_Header_Content}}
                            </th>
                            <td>{{Your_Cell_Content}}</td>
                            ...
                        </tr>
                        ...
                    </tbody>
                </table>
            </div>
        </div>
    </body>
 */
div:has(> .container table.distribution-table) {
    padding-bottom: var(--apexus-banner-padding);
    background-color: var(--apexus-color-gray-light-2);
}
.distribution-table thead th {
    padding: 15px 12px 5px 12px;
    border-top: none;
    border-bottom: 1px solid var(--apexus-color-gray-light);
    vertical-align: bottom;
    font-size: var(--apexus-font-size-title-5);
    line-height: var(--apexus-line-height);
    background-color: var(--apexus-color-gray-light-2);
}
.distribution-table tbody {
    background-color: var(--apexus-color-white);
}
.distribution-table tbody th,
.distribution-table tbody td {
    padding: 15px 12px 5px 12px;
    border-top: none;
    border-bottom: none;
    overflow-wrap: anywhere;
    vertical-align: top;
}
.distribution-table tbody tr:hover {
    background-color: var(--apexus-color-gray-light-2);
}
.distribution-table tbody tr th img {
    vertical-align: top;
    border-style: none;
    width: 100px;
}
.distribution-table th:not(:last-child),
.distribution-table td:not(:last-child) {
    border-right: 2px solid var(--apexus-color-gray-light);
}

/* --- Icon Flex List --- */
/* Expected HTML Layout:
    <div class="icon-flex-list">
        <div>
            <div>
                <img src="{{Your_List_Item_#1_Icon_Image}}" />
            </div>
            <div>
                {{Your_List_Item_#1_Content}}}
            </div>
        </div>
        ...
    </div>
 */
.icon-flex-list {
    display: flex;
    flex-direction: column;
    gap: var(--apexus-content-gap);
}
.icon-flex-list > div {
    display: flex;
    flex-direction: column;
    gap: var(--apexus-content-gap);
}
.icon-flex-list > div > div:first-child:has(> img) {
    min-width: 60px;
    text-align: center;
}
.icon-flex-list > div > div:first-child > img {
    width: 60px;
}
.icon-flex-list > div > *:not(:first-child) {
    align-content: center;
}

/* --- Toggle Tips Content --- */
/* Expected HTML Layout:
    <div class="toggle-tips-content">
        <div>
            <img src="{{Your_Tips_Icon_Image}}" />
            <span>{{Your_Tips_Title_Text}}</span>
            <span>
                <i class="fa fa-plus"></i>
                <i class="fa fa-minus"></i>
            </span>
        </div>
        <div>
            {{Your_Tips_Content}}}
        </div>
        ...
    </div>
 */
.toggle-tips-content > div:first-child {
    display: flex;
    width: 100%;
    align-items: start;
    gap: var(--apexus-content-gap-related);
    cursor: pointer;
    color: var(--apexus-color-blue);
    font-weight: var(--apexus-font-weight-heavy-3);
}
.toggle-tips-content > div:first-child:hover {
    color: var(--apexus-color-blue-light);
}
.toggle-tips-content.active > div:first-child:has(+ div) {
    margin-bottom: var(--apexus-content-gap-related)
}
.toggle-tips-content > div:first-child img {
    width: var(--apexus-icon-width);
}
.toggle-tips-content > div:first-child span:has(i) {
    margin-top: 2px;
}
.toggle-tips-content > div:first-child span i {
    display: none;
}
.toggle-tips-content:not(.active) > div:first-child i.fa-plus,
.toggle-tips-content:not(.active) > div:first-child i.fa-plus-circle {
    display: inline;
}
.toggle-tips-content.active > div:first-child i.fa-minus,
.toggle-tips-content.active > div:first-child i.fa-minus-circle {
    display: inline;
}
.toggle-tips-content > div:not(:first-child) {
    display: none;
}
.toggle-tips-content.active > div:not(:first-child) {
    display: block;
}

/* --- Left Floating Tips --- */
/* Expected HTML Layout:
    <div class="toggle-floating-tips-content">
        <button>
            {{Your_Tips_Content}}}
        </button>
        <apexus-modal-popup>
            <p slot="title">{{Your_Tips_Modal_Header_Content}}</p> (optional)
            <div slot="content">
                {{Your_Tips_Modal_Content}}
            </div>
        </apexus-modal-popup>
    <div>
 */
.toggle-floating-tips-content > button {
    position: fixed;
    top: 30%;
    color: var(--apexus-color-white);
    transform: rotate(-90deg);
    z-index: 10001;
    left: -60px;
}



/**
 * MEDIA QUERY: Breakpoint [481 - ...]px (Tablet)
 **/
@media only screen and (min-width: 481px) {
    /* Alterantive Display */
    .mobile-hidden {
        display: contents;
    }
}

/**
 * MEDIA QUERY: Breakpoint [769 - ...]px (Laptop)
 **/
@media (min-width: 769px) {
    /* Alterantive Layouts */
    .row {
        flex-direction: row;
    }
    .grid-box-2-col {
        grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    }
    .grid-box-3-col {
        grid-template-columns: repeat(auto-fit, minmax(33.33%, 1fr));
    }
    .grid-box-4-col {
        grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
    }
    .row:has(.card-body),
    .grid-box-2-col:has(.card-body),
    .grid-box-3-col:has(.card-body), 
    .grid-box-4-col:has(.card-body) {
        width: calc(100% + (var(--apexus-card-padding) * 2));
        margin-left: calc(-1 * var(--apexus-card-padding));
    }
    .row:has(.card-border):has(.card-body),
    .grid-box-2-col:has(.card-border):has(.card-body),
    .grid-box-3-col:has(.card-border):has(.card-body),
    .grid-box-4-col:has(.card-border):has(.card-body) {
        width: calc(100% + (var(--apexus-card-padding) * 2) + (var(--apexus-card-border-width) * 2));
        margin-left: calc(-1 * (var(--apexus-card-padding) + var(--apexus-card-border-width)));
    }
    /* Alterantive Display */
    .tablet-hidden {
        display: contents;
    }
    /* --- Tabulated Page Content --- */
    .container > div:has(.tab-container) {
        flex-direction: row;
        gap: var(--apexus-content-gap);
        width: calc(100% + (var(--apexus-card-padding) * 2) + (var(--apexus-card-border-width) * 2));
        margin-left: calc(-1 * (var(--apexus-card-padding) + var(--apexus-card-border-width)));
    }
    /* --- Distribution Table --- */
    table.distribution-table {
        width: calc(100% + 24px);
        margin-left: -12px;
    }
    .distribution-table thead th {
        position: sticky;
        top: var(--apexus-js-header-height);
    }
    /* --- Icon Flex List --- */
    .icon-flex-list > div {
        flex-direction: row;
    }
}

/**
 * MEDIA QUERY: Breakpoint [1280 - ...]px (Desktop)
 **/
@media only screen and (min-width: 1280px) {
    /* Alterantive Display */
    .laptop-hidden {
        display: contents;
    }
}