/*--------------------------------------------------------------
# Branding Constants
--------------------------------------------------------------*/
.BG_TRANSPARENT {
    background-color: transparent !important;
    border: 0 transparent !important;
}

.BG_TRANSPARENT:hover {
    background-color: transparent !important;
    border: 0 transparent !important;
}

.BG_BORDERLESS {
    border: 0 transparent !important;
}

/*--------------------------------------------------------------
# Kendo Grid Branding
# Remap Kendo CSS variables so grids inherit branding colors.
# COLOR_BODY is on <main>, covering all grids site-wide.
# COLOR_BODY_SECONDARY covers grids inside secondary containers
# (e.g. tab panes, modals).
--------------------------------------------------------------*/
.COLOR_BODY_IMPORTANT,
.COLOR_BODY,
.COLOR_BODY_SECONDARY_IMPORTANT,
.COLOR_BODY_SECONDARY {
    --kendo-color-surface: var(--COLOR_BODY_SECONDARY_BACKGROUND);
    --kendo-color-surface-alt: var(--COLOR_BODY_BACKGROUND);
    --kendo-color-app-surface: var(--COLOR_BODY_BACKGROUND);
    --kendo-color-on-app-surface: var(--COLOR_BODY_TEXT);
    --kendo-color-border: var(--COLOR_BODY_BORDER);
    --kendo-color-base-subtle: var(--COLOR_BODY_SECONDARY_BACKGROUND);
    --kendo-color-primary: var(--COLOR_PRIMARY_HOVER);
    --kendo-color-primary-hover: var(--COLOR_PRIMARY_HOVER);
    --kendo-color-primary-focus: var(--COLOR_PRIMARY_HOVER);
    --kendo-color-on-primary: var(--COLOR_PRIMARY_TEXT);
}

/*--------------------------------------------------------------
# Kendo Pager Link Branding
# Non-selected page numbers and nav arrows inherit text color
# by default. Override them to use the primary hover color.
--------------------------------------------------------------*/
.k-pager .k-pager-numbers-wrap .k-button:not(.k-selected),
.k-pager .k-pager-nav {
    color: var(--COLOR_PRIMARY_HOVER) !important;
}

.k-pager .k-pager-numbers-wrap .k-button.k-selected {
    background-color: var(--COLOR_PRIMARY_HOVER) !important;
    color: var(--COLOR_PRIMARY_TEXT) !important;
}

/*--------------------------------------------------------------
# Text Label Transparency
# When COLOR_BODY_SECONDARY is used with font classes it is
# styling a text label/heading, not a container — clear the
# background so the parent container shows through.
--------------------------------------------------------------*/
.BASE_FONT.COLOR_BODY_SECONDARY,
.BASE_FONT.COLOR_BODY_SECONDARY_IMPORTANT,
.HEADING_FONT.COLOR_BODY_SECONDARY,
.HEADING_FONT.COLOR_BODY_SECONDARY_IMPORTANT {
    background-color: transparent !important;
}

/*--------------------------------------------------------------
# Application Form Card Headers
# Section headers (Business Details, Business Address, etc.)
# use primary background instead of body secondary.
--------------------------------------------------------------*/
.app-from-tab .card.COLOR_BODY_SECONDARY_IMPORTANT {
    background-color: transparent !important;
    border: none !important;
}

.app-from-tab .card.COLOR_BODY_SECONDARY_IMPORTANT > .card-header {
    background-color: var(--COLOR_BODY_SECONDARY_BACKGROUND) !important;
    border-radius: 5px;
    border: 1px solid var(--COLOR_BODY_SECONDARY_BORDER);
}

.app-from-tab .card.COLOR_BODY_SECONDARY_IMPORTANT > .card-body {
    background-color: var(--COLOR_BODY_SECONDARY_BACKGROUND) !important;
    margin-top: 0.5rem;
    border-radius: 5px;
    border: 1px solid var(--COLOR_BODY_SECONDARY_BORDER);
}

.app-from-tab > .py-5 .card-body.COLOR_BODY_SECONDARY_IMPORTANT {
    border-radius: 5px;
    border: 1px solid var(--COLOR_BODY_SECONDARY_BORDER);
}

.app-from-tab .card .HEADING_FONT {
    color: var(--COLOR_SECONDARY_TEXT) !important;
}