/*
 * Copyright 2025 AffinityCE, LLC.
 * This file and its contents are proprietary business information and
 * may not be copied, shared, or reproduced in any fashion without the
 * express written approval by the Managing Partners of AffinityCE, LLC.
 */

/*
	ALERTS.CSS - styles for alerts and similar messages

    Created on:  2013-12-02, 11:46
    Modified on: 2021-07-15 DBO - Organizing, using variables
    Author:      David O'Donnell <dodonnell@affinityced.com>

    2021-02-16 DBO Taking inspiration from Bootstrap, assign our colors to :root as well
               All colors have been derived from AAA-compliant values (however ugly)

    2025-04-29 DBO Add colors from the "12-bit rainbow palette" (see: https://iamkate.com/data/12-bit-rainbow/)
               (Both colors and greyscale equivalents. Sadly only in hex.)

    2026-03-12 DBO Add alert card styles
*/

:root {
    accent-color: auto; /* David's Mac Studio: hsl(211deg 100% 50%); /*AccentColor;*/
    --AccentColor: hsl(211deg 100% 50%);
    --color-pale-green: #ecfaef;
    --color-green-pale: #ecfaef;
    --color-green: #116510;
    --color-medium-green: #1f803d;
    --color-green-medium: #1f803d;
    --color-green-forest: #01584D;
    --color-forest-green: #01584D;
    --color-light-green: #21c263;
    --color-green-light: #21c263;
    --color-red: #b50000;
    --color-orange: #fd850f;
    --color-orange-red: #ff4500;
    --color-coral: #ff7f50;
    --color-yellow: #f2c202;
    --color-gold: #ffd700;
    --color-yellow-green: #8f9b20;
    --color-green-yellow: #8f9b20;
    --color-khaki-dark: #bdb76b;
    --color-dark-khaki: #bdb76b;
    --color-blue: #2356a9;
    --color-dodger-blue: rgb(30 144 255);
    --color-french-blue: rgb(0 114 187);
    --color-blue-polo: #8CAAD1;
    --color-cyan-process: #00b7eb;
    --color-process-cyan: #00b7eb;
    --color-teal: #1e5f71;
    --color-turquoise-light: #00ced1;
    --color-light-turquoise: #00ced1;
    --color-turquoise: #269a93;
    --color-fuchsia: #c43997;
    --color-lavender: #c6f;
    --color-purple: #78358d;
    --color-pale-pink: #ffebe4;
    --color-light-pink: #ffebe4;
    --color-pink-pale: #ffebe4;
    --color-pink-light: #ffebe4;
    --color-pink: #ffc0cb;
    --color-pink-2: #dc3545;
    --color-pink-dark: #dc3545;
    --color-dark-pink: #dc3545;
    --color-pink-medium: #ff6b84;
    --color-medium-pink: #ff6b84;
    --color-pink-bg: #ff6b84;
    --color-white: #fff;
    --color-grey: #cdcdcd;
    --color-silver: #c0c0c0;
    --color-silver-roman: #838996;
    --color-roman-silver: #838996;
    --color-grey-dark: #595959;
    --color-dark-grey: #595959;
    --color-black: #000;
    --color-brown: #884503;
    --color-beige: #f5f5dc;
    --color-tan: #D2B48C;
    --color-brass: #6b5401;
    --color-cocoa-brown: #d2691e;
    --color-grey-1pct: hsl(0, 0%, 99%);
    --color-grey-2pct: hsl(0, 0%, 98%);
    --color-grey-3pct: hsl(0, 0%, 97%);
    --color-grey-4pct: hsl(0, 0%, 96%);
    --color-grey-5pct: hsl(0, 0%, 95%);
    --color-grey-6pct: hsl(0, 0%, 94%);
    --color-grey-7pct: hsl(0, 0%, 93%);
    --color-grey-8pct: hsl(0, 0%, 92%);
    --color-grey-9pct: hsl(0, 0%, 91%);
    --color-grey-10pct: hsl(0, 0%, 90%);
    --color-grey-15pct: hsl(0, 0%, 85%);
    --color-grey-20pct: hsl(0, 0%, 80%);
    --color-grey-25pct: hsl(0, 0%, 75%);
    --color-grey-30pct: hsl(0, 0%, 70%);
    --color-grey-35pct: hsl(0, 0%, 65%);
    --color-grey-40pct: hsl(0, 0%, 60%);
    --color-grey-45pct: hsl(0, 0%, 55%);
    --color-grey-50pct: hsl(0, 0%, 50%);
    --color-grey-55pct: hsl(0, 0%, 45%);
    --color-grey-60pct: hsl(0, 0%, 40%);
    --color-grey-65pct: hsl(0, 0%, 35%);
    --color-grey-70pct: hsl(0, 0%, 30%);
    --color-grey-75pct: hsl(0, 0%, 25%);
    --color-grey-80pct: hsl(0, 0%, 20%);
    --color-grey-85pct: hsl(0, 0%, 15%);
    --color-grey-90pct: hsl(0, 0%, 10%);
    --color-grey-95pct: hsl(0, 0%, 5%);
    --color-grey-1pct-a: rgb(0 0 0 / 1%);
    --color-grey-2pct-a: rgb(0 0 0 / 2%);
    --color-grey-3pct-a: rgb(0 0 0 / 3%);
    --color-grey-4pct-a: rgb(0 0 0 / 4%);
    --color-grey-5pct-a: rgb(0 0 0 / 5%);
    --color-grey-6pct-a: rgb(0 0 0 / 6%);
    --color-grey-7pct-a: rgb(0 0 0 / 7%);
    --color-grey-8pct-a: rgb(0 0 0 / 8%);
    --color-grey-9pct-a: rgb(0 0 0 / 9%);
    --color-grey-10pct-a: rgb(0 0 0 / 10%);
    --color-grey-15pct-a: rgb(0 0 0 / 15%);
    --color-grey-20pct-a: rgb(0 0 0 / 20%);
    --color-grey-25pct-a: rgb(0 0 0 / 25%);
    --color-grey-30pct-a: rgb(0 0 0 / 30%);
    --color-grey-35pct-a: rgb(0 0 0 / 35%);
    --color-grey-40pct-a: rgb(0 0 0 / 40%);
    --color-grey-45pct-a: rgb(0 0 0 / 45%);
    --color-grey-50pct-a: rgb(0 0 0 / 50%);
    --color-grey-55pct-a: rgb(0 0 0 / 55%);
    --color-grey-60pct-a: rgb(0 0 0 / 60%);
    --color-grey-65pct-a: rgb(0 0 0 / 65%);
    --color-grey-70pct-a: rgb(0 0 0 / 70%);
    --color-grey-75pct-a: rgb(0 0 0 / 75%);
    --color-grey-80pct-a: rgb(0 0 0 / 80%);
    --color-grey-85pct-a: rgb(0 0 0 / 85%);
    --color-grey-90pct-a: rgb(0 0 0 / 90%);
    --color-grey-95pct-a: rgb(0 0 0 / 95%);
    --activity-live: #1e5f71;
    --activity-enduring: #78358d;
    --activity-non-ed: #E65100;
    --activity-blended: #D2B48C;
    --activity-live-in-person: #339FBD;
    --activity-live-online: #6CABBD;
    --activity-live-hybrid: #4E7B88;
    --activity-enduring-online: #936C9F;
    --activity-enduring-remote: #4C2259;
    --activity-blended-hybrid: #9E876A;
    --color-top-navbar: #000;
    --color-bottom-navbar: #000;
    --color-table-head: #5f8cb0;
    --color-pseudo-table-head: #435b82;
    --color-page-head-bg: #66b7f5;
    --color-page-foot-bg: #66b7f5;
    --color-page-foot-a: #000000;
    --color-navbar-bg: #4689c8;
    --color-bottombar-bg: #eeeedd;
    --color-bottombar-top: #d0d0b5;
    --offers-credit: hsl(124, 39%, 48%);
    --offers-no-credit: hsl(346, 34%, 45%);
    --offers-credit-no: hsl(346, 34%, 45%);
    --retired-profession: hsl(41, 36%, 70%);
    --palette-817: #817;
    --palette-a35: #a35;
    --palette-c66: #c66;
    --palette-e94: #e94;
    --palette-ed0: #ed0;
    --palette-9d5: #9d5;
    --palette-4d8: #4d8;
    --palette-2cb: #2cb;
    --palette-0bc: #0bc;
    --palette-09c: #09c;
    --palette-36b: #36b;
    --palette-639: #639;
    --palette-817-grey: #404040;
    --palette-a35-grey: #5c5c5c;
    --palette-c66-grey: #848484;
    --palette-e94-grey: #a9a9a9;
    --palette-ed0-grey: #c9c9c9;
    --palette-9d5-grey: #b9b9b9;
    --palette-4d8-grey: #a6a6a6;
    --palette-2cb-grey: #979797;
    --palette-0bc-grey: #858585;
    --palette-09c-grey: #717171;
    --palette-36b-grey: #606060;
    --palette-639-grey: #4e4e4e;
}

/* ----- warn-flag ----- */
.warn-flag, .warn_flag {
    background: url(/img/stop-sign.svg) no-repeat;
    margin-left: -2.5rem;
    padding-left: 2.5rem;
    min-height: 2.125rem;
}

/* Prefix "flags" are used in non-inline form fields to identify required fields and
   their error state. Remember to add appropriate jQuery to swap error and require back!
 */
.prefix-error::before {
    content: url(/img/stop-sign.svg);
    font-size: 130%;
    display: inline-block;
    width: 1.5rem;
    margin-right: 0.5rem;
    align-self: center;
    padding-top: 0.2rem;
}

.prefix-required::before {
    content: "✻";
    font-size: 130%;
    color: var(--color-red);
    display: inline-block;
    width: 2rem;
}

/* ----------------------------------------------

C O L O R S - We attempt to be WCAG AAA compliant whenever possible

----------------------------------------------- */

/* 2025-11-21 DBO Trying UI colors from CSS spec
   2026-04-20 DBO What a surprise, Chromium doesn't honor UI colors. */
.--color-control-on {
    color: var(--AccentColor);
    color: AccentColor;
}

.--color-control-off {
    color: CanvasText;
}

.--color-offers-credit-fg, .--offers-credit {
    color: var(--offers-credit);
}

.--color-offers-credit-bg {
    background-color: var(--offers-credit);
}

.--color-offers-no-credit-fg, .--offers-no-credit, .--offers-credit-no {
    color: var(--offers-no-credit);
}

.--color-offers-no-credit-bg {
    background-color: var(--offers-no-credit);
}

.--color-retired-profession-fg, .--retired-profession {
    color: var(--retired-profession);
}

.--color-retired-profession-bg {
    background-color: var(--retired-profession);
}

.--color-pale-green-fg, .--color-green-pale-fg {
    background-color: var(--color-green-pale) !important;
}

.--color-pale-green-bg, .--color-green-pale-bg {
    background-color: var(--color-green-pale) !important;
}

.--color-green-fg, .success-green, .color-green {
    color: var(--color-green) !important;
}

.--color-green-bg {
    background-color: var(--color-green) !important;
}

.--color-green-forest-fg, .color-forest-green-fg {
    color: var(--color-green-forest) !important;
}

.--color-green-forest-bg, .--color-forest-green-bg {
    background-color: var(--color-green-forest) !important;
}

.--color-tan-fg {
    color: var(--color-tan) !important;
}

.--color-tan-bg {
    background-color: var(--color-tan) !important;
}

.--color-brass-fg {
    color: var(--color-brass) !important;
}

.--color-brass-bg {
    background-color: var(--color-brass) !important;
}

.--color-blue-polo-fg, .--color-polo-blue-fg {
    color: var(--color-blue-polo) !important;
}

.--color-blue-polo-bg, .--color-polo-blue-bg {
    background-color: var(--color-blue-polo) !important;
}

.--color-french-blue-bg {
    background-color: var(--color-french-blue) !important;
}

.--color-french-blue-fg {
    color: var(--color-french-blue) !important;
}

.--color-dodger-blue-bg {
    background-color: var(--color-dodger-blue) !important;
}

.--color-dodger-blue-fg {
    color: var(--color-dodger-blue) !important;
}

.--color-pale-green-fg, .color-green-pale-fg {
    color: var(--color-pale-green) !important;
}

.--color-pale-green-bg, .color-green-pale-bg {
    background-color: var(--color-pale-green) !important;
}

.--color-medium-green-fg, .color-green-medium-fg {
    color: var(--color-medium-green) !important;
}

.--color-medium-green-bg, .color-green-medium-bg {
    background-color: var(--color-medium-green) !important;
}

.--color-light-green-fg, .color-green-light-fg {
    color: var(--color-light-green) !important;
}

.--color-light-green-bg, .color-green-light-bg {
    background-color: var(--color-light-green) !important;
}

.--color-yellow-green-fg, .color-green-yellow-fg {
    color: var(--color-yellow-green) !important;
}

.--color-yellow-green-bg, .color-green-yellow-bg {
    background-color: var(--color-yellow-green) !important;
}

.success-green-bg, .color-green-bg, .color-bg-green {
    color: var(--color-white) !important;
    background-color: var(--color-green) !important;
}

.--color-red-fg, .fail-red, .color-red {
    color: var(--color-red) !important;
}

.--color-red-bg {
    background-color: var(--color-red) !important;
}

.--color-turquoise-fg {
    color: var(--color-turquoise) !important;
}

.--color-turquoise-bg {
    background-color: var(--color-turquoise) !important;
}

.--color-fuchsia-fg {
    color: var(--color-fuchsia) !important;
}

.--color-fuchsia-bg {
    background-color: var(--color-fuchsia) !important;
}

.--color-lavender-fg {
    color: var(--color-lavender) !important;
}

.--color-lavender-bg {
    background-color: var(--color-lavender) !important;
}

.fail-red-bg, .color-red-bg, .color-bg-red {
    color: var(--color-white) !important;
    background-color: var(--color-red) !important;
}

.--color-orange-fg, .warning-orange, .color-orange {
    color: var(--color-orange) !important;
}

.--color-orange-bg {
    background-color: var(--color-orange) !important;
}

.warning-orange-bg, .color-orange-bg, .color-bg-orange {
    color: var(--color-white) !important;
    background-color: var(--color-orange) !important;
}

.--color-yellow-fg, .unsure-yellow, .color-yellow {
    color: var(--color-yellow) !important;
}

.--color-yellow-bg {
    background-color: var(--color-yellow) !important;
}

.unsure-yellow-bg, .color-yellow-bg, .color-bg-yellow {
    color: var(--color-white) !important;
    background-color: var(--color-yellow) !important;
}

.--color-blue-fg, .info-blue, .color-blue {
    color: var(--color-blue) !important;
}

.--color-blue-bg {
    background-color: var(--color-blue) !important;
}

.info-blue-bg, .color-blue-bg, .color-bg-blue {
    color: var(--color-white) !important;
    background-color: var(--color-blue) !important;
}

.--color-teal-fg, .fyi-teal, .color-teal {
    color: var(--color-teal) !important;
}

.--color-teal-bg {
    background-color: var(--color-teal) !important;
}

.fyi-teal-bg, .color-teal-bg, .color-bg-teal {
    color: var(--color-white) !important;
    background-color: var(--color-teal) !important;
}

.--color-purple-fg, .color-purple {
    color: var(--color-purple) !important;
}

.--color-purple-bg {
    background-color: var(--color-purple) !important;
}

.info-purple-bg, .color-purple-bg, .color-bg-purple {
    color: var(--color-white) !important;
    background-color: var(--color-purple) !important;
}

.--color-pink-fg, .color-pink {
    color: var(--color-pink) !important;
}

.--color-pink-bg, .color-pink-bg, .color-bg-pink {
    background-color: var(--color-pink) !important;
}

.--color-medium-pink-fg, .--color-medium-pink, .--color-pink-medium-fg, .--color-pink-medium {
    color: var(--color-pink-medium) !important;
}

.--color-pink-medium-bg, .color-pink-medium-bg, .color-bg-pink-medium,
.--color-medium-pink-bg, .color-medium-pink-bg, .color-bg-medium-pink {
    background-color: var(--color-pink-medium) !important;
}

.--color-white-fg, .default-white, .color-white {
    color: var(--color-white) !important;
}

.--color-white-bg, .default-white-bg, .color-white-bg, .color-bg-white {
    background-color: var(--color-white) !important;
}

.--color-grey-fg, .--color-gray-fg, .neutral-grey, .color-grey {
    color: var(--color-grey) !important;
}

.--color-grey-bg, .--color-gray-bg, .neutral-grey-bg, .color-grey-bg, .color-bg-grey {
    background-color: var(--color-grey) !important;
}

.--color-dark-grey-fg, .--color-dark-gray-fg {
    color: var(--color-grey-dark) !important;
}

.--color-dark-grey-bg, .--color-dark-gray-bg {
    background-color: var(--color-grey-dark) !important;
}

.--color-black-fg, .color-black {
    color: var(--color-black) !important;
}

.--color-black-bg {
    background-color: var(--color-black) !important;
}

.--color-medium-green-fg {
    color: var(--color-medium-green);
}

.--color-medium-green-bg {
    background-color: var(--color-medium-green);
}

.--color-green-medium-fg {
    color: var(--color-green-medium);
}

.--color-green-medium-bg {
    background-color: var(--color-green-medium);
}

.--color-orange-red-fg {
    color: var(--color-orange-red);
}

.--color-orange-red-bg {
    background-color: var(--color-orange-red);
}

.--color-coral-fg {
    color: var(--color-coral);
}

.--color-coral-bg {
    background-color: var(--color-coral);
}

.--color-gold-fg {
    color: var(--color-gold);
}

.--color-gold-bg {
    background-color: var(--color-gold);
}

.--color-yellow-green-fg {
    color: var(--color-yellow-green);
}

.--color-yellow-green-bg {
    background-color: var(--color-yellow-green);
}

.--color-green-yellow-fg {
    color: var(--color-green-yellow);
}

.--color-green-yellow-bg {
    background-color: var(--color-green-yellow);
}

.--color-khaki-dark-fg {
    color: var(--color-khaki-dark);
}

.--color-khaki-dark-bg {
    background-color: var(--color-khaki-dark);
}

.--color-dark-khaki-fg {
    color: var(--color-dark-khaki);
}

.--color-dark-khaki-bg {
    background-color: var(--color-dark-khaki);
}

.--color-cyan-process-fg {
    color: var(--color-cyan-process);
}

.--color-cyan-process-bg {
    background-color: var(--color-cyan-process);
}

.--color-process-cyan-fg {
    color: var(--color-process-cyan);
}

.--color-process-cyan-bg {
    background-color: var(--color-process-cyan);
}

.--color-turquoise-light-fg {
    color: var(--color-turquoise-light);
}

.--color-turquoise-light-bg {
    background-color: var(--color-turquoise-light);
}

.--color-light-turquoise-fg {
    color: var(--color-light-turquoise);
}

.--color-light-turquoise-bg {
    background-color: var(--color-light-turquoise);
}

.--color-pale-pink-fg {
    color: var(--color-pale-pink);
}

.--color-pale-pink-bg {
    background-color: var(--color-pale-pink);
}

.--color-light-pink-fg {
    color: var(--color-light-pink);
}

.--color-light-pink-bg {
    background-color: var(--color-light-pink);
}

.--color-pink-pale-fg {
    color: var(--color-pink-pale);
}

.--color-pink-pale-bg {
    background-color: var(--color-pink-pale);
}

.--color-pink-light-fg {
    color: var(--color-pink-light);
}

.--color-pink-light-bg {
    background-color: var(--color-pink-light);
}

.--color-pink-2-fg {
    color: var(--color-pink-2);
}

.--color-pink-2-bg {
    background-color: var(--color-pink-2);
}

.--color-pink-dark-fg {
    color: var(--color-pink-dark);
}

.--color-pink-dark-bg {
    background-color: var(--color-pink-dark);
}

.--color-dark-pink-fg {
    color: var(--color-dark-pink);
}

.--color-dark-pink-bg {
    background-color: var(--color-dark-pink);
}

.--color-medium-pink-fg {
    color: var(--color-medium-pink);
}

.--color-medium-pink-bg {
    background-color: var(--color-medium-pink);
}

.--color-pink-bg-fg {
    color: var(--color-pink-bg);
}

.--color-pink-bg-bg {
    background-color: var(--color-pink-bg);
}

.--color-silver-fg {
    color: var(--color-silver);
}

.--color-silver-bg {
    background-color: var(--color-silver);
}

.--color-silver-roman-fg {
    color: var(--color-silver-roman);
}

.--color-silver-roman-bg {
    background-color: var(--color-silver-roman);
}

.--color-roman-silver-fg {
    color: var(--color-roman-silver);
}

.--color-roman-silver-bg {
    background-color: var(--color-roman-silver);
}

.--color-brown-fg {
    color: var(--color-brown);
}

.--color-brown-bg {
    background-color: var(--color-brown);
}

.--color-beige-fg {
    color: var(--color-beige);
}

.--color-beige-bg {
    background-color: var(--color-beige);
}

.--color-cocoa-brown-fg {
    color: var(--color-cocoa-brown);
}

.--color-cocoa-brown-bg {
    background-color: var(--color-cocoa-brown);
}

/* 2025-12-02 DBO Establish inline_alert() bg color */
.--color-inline-alert-bg {
    background-color: hsl(from var(--color-gold) h s 80%);
}

.--color-grey-1pct-fg {
    color: var(--color-grey-1pct);
}

.--color-grey-1pct-bg {
    background-color: var(--color-grey-1pct);
}

.--color-grey-2pct-fg {
    color: var(--color-grey-2pct);
}

.--color-grey-2pct-bg {
    background-color: var(--color-grey-2pct);
}

.--color-grey-3pct-fg {
    color: var(--color-grey-3pct);
}

.--color-grey-3pct-bg {
    background-color: var(--color-grey-3pct);
}

.--color-grey-4pct-fg {
    color: var(--color-grey-4pct);
}

.--color-grey-4pct-bg {
    background-color: var(--color-grey-4pct);
}

.--color-grey-5pct-fg {
    color: var(--color-grey-5pct);
}

.--color-grey-5pct-bg {
    background-color: var(--color-grey-5pct);
}

.--color-grey-6pct-fg {
    color: var(--color-grey-6pct);
}

.--color-grey-6pct-bg {
    background-color: var(--color-grey-6pct);
}

.--color-grey-7pct-fg {
    color: var(--color-grey-7pct);
}

.--color-grey-7pct-bg {
    background-color: var(--color-grey-7pct);
}

.--color-grey-8pct-fg {
    color: var(--color-grey-8pct);
}

.--color-grey-8pct-bg {
    background-color: var(--color-grey-8pct);
}

.--color-grey-9pct-fg {
    color: var(--color-grey-9pct);
}

.--color-grey-9pct-bg {
    background-color: var(--color-grey-9pct);
}

.--color-grey-10pct-fg {
    color: var(--color-grey-10pct);
}

.--color-grey-10pct-bg {
    background-color: var(--color-grey-10pct);
}

.--color-grey-15pct-fg {
    color: var(--color-grey-15pct);
}

.--color-grey-15pct-bg {
    background-color: var(--color-grey-15pct);
}

.--color-grey-20pct-fg {
    color: var(--color-grey-20pct);
}

.--color-grey-20pct-bg {
    background-color: var(--color-grey-20pct);
}

.--color-grey-25pct-fg {
    color: var(--color-grey-25pct);
}

.--color-grey-25pct-bg {
    background-color: var(--color-grey-25pct);
}

.--color-grey-30pct-fg {
    color: var(--color-grey-30pct);
}

.--color-grey-30pct-bg {
    background-color: var(--color-grey-30pct);
}

.--color-grey-35pct-fg {
    color: var(--color-grey-35pct);
}

.--color-grey-35pct-bg {
    background-color: var(--color-grey-35pct);
}

.--color-grey-40pct-fg {
    color: var(--color-grey-40pct);
}

.--color-grey-40pct-bg {
    background-color: var(--color-grey-40pct);
}

.--color-grey-45pct-fg {
    color: var(--color-grey-45pct);
}

.--color-grey-45pct-bg {
    background-color: var(--color-grey-45pct);
}

.--color-grey-50pct-fg {
    color: var(--color-grey-50pct);
}

.--color-grey-50pct-bg {
    background-color: var(--color-grey-50pct);
}

.--color-grey-55pct-fg {
    color: var(--color-grey-55pct);
}

.--color-grey-55pct-bg {
    background-color: var(--color-grey-55pct);
}

.--color-grey-60pct-fg {
    color: var(--color-grey-60pct);
}

.--color-grey-60pct-bg {
    background-color: var(--color-grey-60pct);
}

.--color-grey-65pct-fg {
    color: var(--color-grey-65pct);
}

.--color-grey-65pct-bg {
    background-color: var(--color-grey-65pct);
}

.--color-grey-70pct-fg {
    color: var(--color-grey-70pct);
}

.--color-grey-70pct-bg {
    background-color: var(--color-grey-70pct);
}

.--color-grey-75pct-fg {
    color: var(--color-grey-75pct);
}

.--color-grey-75pct-bg {
    background-color: var(--color-grey-75pct);
}

.--color-grey-80pct-fg {
    color: var(--color-grey-80pct);
}

.--color-grey-80pct-bg {
    background-color: var(--color-grey-80pct);
}

.--color-grey-85pct-fg {
    color: var(--color-grey-85pct);
}

.--color-grey-85pct-bg {
    background-color: var(--color-grey-85pct);
}

.--color-grey-90pct-fg {
    color: var(--color-grey-90pct);
}

.--color-grey-90pct-bg {
    background-color: var(--color-grey-90pct);
}

.--color-grey-95pct-fg {
    color: var(--color-grey-95pct);
}

.--color-grey-95pct-bg {
    background-color: var(--color-grey-95pct);
}

.bad-field {
    border-left: 0.375rem solid var(--color-red);
    margin-left: -0.375rem;
    padding: 0.3rem 0;
    background-color: var(--color-pale-pink) !important;
}

.good-field {
    border-left: 0.375rem solid var(--color-green);
    margin-left: -0.375rem;
    padding: 0.3rem 0;
    background-color: var(--color-pale-green) !important;
}

.btn-action-okay:not([disabled]), .btn-action-success:not([disabled]), .btn-action-green:not([disabled]) {
    color: var(--color-green) !important; /* success-green */
}

.btn-action-okay:not([disabled]):hover, .btn-action-success:not([disabled]):hover, .btn-action-green:not([disabled]):hover {
    background-color: var(--color-green) !important; /* success-green */
    color: var(--color-white) !important;
}

.btn-action-danger:not([disabled]), .btn-action-fail:not([disabled]), .btn-action-red:not([disabled]) {
    color: var(--color-red) !important; /* fail-red */
}

.btn-action-danger:not([disabled]):hover, .btn-action-fail:not([disabled]):hover, .btn-action-red:not([disabled]):hover {
    background-color: var(--color-red) !important; /* fail-red */
    color: var(--color-white) !important;
}

.btn-action-warning:not([disabled]), .btn-action-orange:not([disabled]) {
    color: var(--color-brown); /* warning-orange */
}

.btn-action-warning:not([disabled]):hover, .btn-action-orange:not([disabled]):hover {
    background-color: var(--color-orange) !important; /* warning-orange */
    color: var(--color-black);
!important;
}

.btn-action-unsure:not([disabled]), .btn-action-yellow:not([disabled]) {
    color: #695402 !important; /* unsure-yellow */
}

.btn-action-unsure:not([disabled]):hover, .btn-action-yellow:not([disabled]):hover {
    background-color: var(--color-yellow) !important; /* unsure-yellow */
    color: var(--color-black) !important;
}

.btn-action-info:not([disabled]) {
    color: var(--color-blue) !important; /* info-blue */
}

.btn-action-info:not([disabled]):hover {
    color: var(--color-white) !important;
    background-color: var(--color-blue) !important; /* info-blue */
}

.btn-action-fyi:not([disabled]) {
    color: var(--color-teal) !important; /* fyi-teal */
}

.btn-action-fyi:not([disabled]):hover {
    color: var(--color-white) !important;
    background-color: var(--color-teal) !important; /* fyi-teal */
}

.btn-action-grey:not([disabled]) {
    color: var(--color-grey) !important; /* neutral-grey */
}

.btn-action-grey:not([disabled]):hover {
    color: var(--color-white) !important;
    background-color: #757575 !important; /* neutral-grey */
}

.btn-action-purple:not([disabled]) {
    color: var(--color-purple) !important; /* color-purple */
}

.btn-action-purple:not([disabled]):hover {
    color: var(--color-white) !important;
    background-color: var(--color-purple) !important; /* color-purple */
}

.btn-action-pink:not([disabled]) {
    color: var(--color-pink) !important; /* color-pink */
}

.btn-action-pink:not([disabled]):hover {
    color: var(--color-black) !important;
    background-color: var(--color-pink-bg) !important; /* color-pink */
}

/* button-array colors */
.button-array-button-warning {
    color: var(--color-brown)!important;
}

.button-array-button-warning:hover {
    background-color: var(--color-orange)!important;
    color: var(--color-black)!important;
}

.button-array-button-danger {
    color: var(--color-red)!important;
}

.button-array-button-danger:hover {
    background-color: var(--color-red)!important;
    color: var(--color-white)!important;
}

.button-array-button-success {
    color: var(--color-green)!important;
}

.button-array-button-success:hover,.button-array-button-success:hover span svg {
    background-color: var(--color-green)!important;
    color: var(--color-white)!important;
}

.button-array-button-info {
    color: var(--color-blue)!important;
}

.button-array-button-info:hover {
    background-color: var(--color-blue)!important;
    color: var(--color-white)!important;
}

.button-array-button-fyi {
    color: var(--color-teal)!important;
}

.button-array-button-fyi:hover {
    background-color: var(--color-turquoise)!important;
    color: var(--color-black)!important;
}

.button-array-button-terminal {
    color: var(--color-black)!important;
}

.button-array-button-terminal:hover {
    background-color: var(--color-black)!important;
    color: var(--color-white)!important;
}

/* FA5NOTE styles */
.fa5note-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    border-radius: 0.4rem;
    padding: 0.5rem 0;
    margin: 0 auto;
}

.fa5note-container-margins {
    margin: 1rem auto 2rem auto;
}

.fa5note-container-shadow {
    box-shadow: 0 0.2rem 0.75rem var(--color-grey-25pct-a);
}

.fa5note-container-bg-alert {
    background-color: #fff6e8;
}

.fa5note-container-bg-error {
    background-color: #ffece9;
}

.fa5note-container-bg-fyi {
    background-color: #eff8fa;
}

.fa5note-container-bg-info {
    background-color: #ecf1fc;
}

.fa5note-container-bg-okay, .fa5note-container-bg-success {
    background-color: #ecfaef;
}

.fa5note-container-border-alert {
    border: 1px solid #fff0d4;
}

.fa5note-container-border-error {
    border: 1px solid #ffe4df;
}

.fa5note-container-border-fyi {
    border: 1px solid #e0f2f7;
}

.fa5note-container-border-info {
    border: 1px solid #dce5f9;
}

.fa5note-container-border-okay {
    border: 1px solid #dbf7e1;
}

.fa5note-badge {
    padding: 0 1rem;
}

.fa5note-title {
    font-size: 175%;
}

.fa5note-body {
    padding: 0.5rem 0.5rem 0 0;
}

/* System message alert styles */
.system-message-container {
    margin: 3rem auto;
    padding: 1rem 1.75rem 1.5rem 1.75rem;
    box-shadow: 0 0.25rem 0.75rem var(--color-grey-45pct-a);
    border-radius: 0.5rem;
    max-width: 65%;
    min-width: 40%;
}

.system-message-container a, .system-message-container p {
    hyphens: none !important;
    -webkit-hyphens: none !important;
}

.system-message-container h1 {
    margin-bottom: 1.5rem;
}

.system-message-link {
    margin-top: 2.5rem;
    margin-bottom: 0;
    border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
}

.system-message-link:hover {
    margin: 2rem -0.5rem -0.5rem -0.5rem !important;
    padding: 0.5rem;
    color: var(--color-white);
    background-color: var(--color-blue);
}

.outline-text {
    font-weight: bolder;
    text-shadow: -1px 1px 1px #000, 1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
}

.orange-yellow-stripe-bg {
    background: repeating-linear-gradient(-45deg, #fc871c, #fc871c 10px, #ffd666 10px, #ffd666 20px);
}

.world-flag {
    filter: drop-shadow(0 0.25rem 0.25rem rgba(0, 0, 0, 0.4)) !important;
}

.--activity-live-fg {
    color: var(--activity-live);
}

.--activity-enduring-fg {
    color: var(--activity-enduring);
}

.--activity-non-ed-fg {
    color: var(--activity-non-ed);
}

.--activity-blended-fg {
    color: var(--activity-blended);
}

.--activity-live-bg {
    background-color: var(--activity-live);
}

.--activity-enduring-bg {
    background-color: var(--activity-enduring);
}

.--activity-non-ed-bg {
    background-color: var(--activity-non-ed);
}

.--activity-blended-bg {
    background-color: var(--activity-blended);
}

.--activity-live-in-person-fg {
    color: var(--activity-live-in-person);
}

.--activity-live-online-fg {
    color: var(--activity-live-online);
}

.--activity-live-hybrid-fg {
    color: var(--activity-live-hybrid);
}

.--activity-enduring-online-fg {
    color: var(--activity-enduring-online);
}

.--activity-enduring-remote-fg {
    color: var(--activity-enduring-remote);
}

.--activity-blended-hybrid-fg {
    color: var(--activity-blended-hybrid);
}

.--activity-live-in-person-bg {
    background-color: var(--activity-live-in-person);
}

.--activity-live-online-bg {
    background-color: var(--activity-live-online);
}

.--activity-live-hybrid-bg {
    background-color: var(--activity-live-hybrid);
}

.--activity-enduring-online-bg {
    background-color: var(--activity-enduring-online);
}

.--activity-enduring-remote-bg {
    background-color: var(--activity-enduring-remote);
}

.--activity-blended-hybrid-bg {
    background-color: var(--activity-blended-hybrid);
}

/* Orange and yellow stripes */
.warning-stripe {
    font-weight: bolder;
    text-shadow: -1px 1px 1px #000, 1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
    background: repeating-linear-gradient(-45deg, #fc871c, #fc871c 10px, #ffd666 10px, #ffd666 20px);
}

/* 2025-04-29 DBO Adding -fg abd -bg variants for 12-bit color palette + greys */
.--palette-817-fg, .--color-palette-817-fg {
    color: var(--palette-817);
}

.--palette-817-bg {
    background-color: var(--palette-817);
}

.--palette-a35-fg, .--color-palette-a35-fg {
    color: var(--palette-a35);
}

.--palette-a35-bg {
    background-color: var(--palette-a35);
}

.--palette-c66-fg, .--color-palette-c66-fg {
    color: var(--palette-c66);
}

.--palette-c66-bg {
    background-color: var(--palette-c66);
}

.--palette-e94-fg, .--color-palette-e94-fg {
    color: var(--palette-e94);
}

.--palette-e94-bg {
    background-color: var(--palette-e94);
}

.--palette-ed0-fg, .--color-palette-ed0-fg {
    color: var(--palette-ed0);
}

.--palette-ed0-bg {
    background-color: var(--palette-ed0);
}

.--palette-9d5-fg, .--color-palette-9d5-fg {
    color: var(--palette-9d5);
}

.--palette-9d5-bg {
    background-color: var(--palette-9d5);
}

.--palette-4d8-fg, .--color-palette-4d8-fg {
    color: var(--palette-4d8);
}

.--palette-4d8-bg {
    background-color: var(--palette-4d8);
}

.--palette-2cb-fg, .--color-palette-2cb-fg {
    color: var(--palette-2cb);
}

.--palette-2cb-bg {
    background-color: var(--palette-2cb);
}

.--palette-0bc-fg, .--color-palette-0bc-fg {
    color: var(--palette-0bc);
}

.--palette-0bc-bg {
    background-color: var(--palette-0bc);
}

.--palette-09c-fg, .--color-palette-09c-fg {
    color: var(--palette-09c);
}

.--palette-09c-bg {
    background-color: var(--palette-09c);
}

.--palette-36b-fg, .--color-palette-36b-fg {
    color: var(--palette-36b);
}

.--palette-36b-bg {
    background-color: var(--palette-36b);
}

.--palette-639-fg, .--color-palette-639-fg {
    color: var(--palette-639);
}

.--palette-639-bg {
    background-color: var(--palette-639);
}

.--palette-817-grey-fg {
    color: #404040;
}

.--palette-817-grey-bg {
    background-color: #404040;
}

.--palette-a35-grey-fg {
    color: #5c5c5c;
}

.--palette-a35-grey-bg {
    background-color: #5c5c5c;
}

.--palette-c66-grey-fg {
    color: #848484;
}

.--palette-c66-grey-bg {
    background-color: #848484;
}

.--palette-e94-grey-fg {
    color: #a9a9a9;
}

.--palette-e94-grey-bg {
    background-color: #a9a9a9;
}

.--palette-ed0-grey-fg {
    color: #c9c9c9;
}

.--palette-ed0-grey-bg {
    background-color: #c9c9c9;
}

.--palette-9d5-grey-fg {
    color: #b9b9b9;
}

.--palette-9d5-grey-bg {
    background-color: #b9b9b9;
}

.--palette-4d8-grey-fg {
    color: #a6a6a6;
}

.--palette-4d8-grey-bg {
    background-color: #a6a6a6;
}

.--palette-2cb-grey-fg {
    color: #979797;
}

.--palette-2cb-grey-bg {
    background-color: #979797;
}

.--palette-0bc-grey-fg {
    color: #858585;
}

.--palette-0bc-grey-bg {
    background-color: #858585;
}

.--palette-09c-grey-fg {
    color: #717171;
}

.--palette-09c-grey-bg {
    background-color: #717171;
}

.--palette-36b-grey-fg {
    color: #606060;
}

.--palette-36b-grey-bg {
    background-color: #606060;
}

.--palette-639-grey-fg {
    color: #4e4e4e;
}

.--palette-639-grey-bg {
    background-color: #4e4e4e;
}

/* 2025-05-13 DBO Adding styles to display content delivery types in both projects */
.delivery-label {
    margin-left: 1.4rem;
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
    color: var(--color-grey-dark);
    background-color: var(--color-grey-20pct);
}

.delivery-type-unset {
    background-color: var(--color-gold);
    color: var(--color-brown);
}

.live-in-person-selected, .delivery-type-live-in-person:hover {
    background-color: var(--activity-live-in-person);
    color: var(--color-white);
}

.live-online-selected, .delivery-type-live-online:hover {
    background-color: var(--activity-live-online);
    color: var(--color-black);
}

.live-hybrid-selected, .delivery-type-live-hybrid:hover {
    background-color: var(--activity-live-hybrid);
    color: var(--color-white);
}

.enduring-online-selected, .delivery-type-enduring-online:hover {
    background-color: var(--activity-enduring-online);
    color: var(--color-white);
}

.enduring-remote-selected, .delivery-type-enduring-remote:hover {
    background-color: var(--activity-enduring-remote);
    color: var(--color-white);
}

.live-in-person-selected:hover {
    background-color: hsl(from var(--activity-live-in-person) h s calc(l + 20));
    color: var(--color-white);
}

.live-online-selected:hover {
    background-color: hsl(from var(--activity-live-online) h s calc(l + 20));
    color: var(--color-black);
}

.live-hybrid-selected:hover {
    background-color: hsl(from var(--activity-live-hybrid) h s calc(l + 20));
    color: var(--color-white);
}

.enduring-online-selected:hover {
    background-color: hsl(from var(--activity-enduring-online) h s calc(l + 20));
    color: var(--color-white);
}

.enduring-remote-selected:hover {
    background-color: hsl(from var(--activity-enduring-remote) h s calc(l + 20));
    color: var(--color-white);
}

/* 2026-03-12 DBO Alert card styling. Note that only root colors are defined, even though
              there are alias card types (i.e., success = ok = okay, danger = stop).
*/
:root {
    --alert-card-padding: 0.45rem;
    --alert-card-padding-top: 0.4rem;
    --alert-card-padding-side: 0.6rem;
    --alert-card-radii: 0.45rem;
    --alert-color-info: var(--color-blue);
    --alert-color-success: var(--color-green);
    --alert-color-fyi: var(--color-teal);
    --alert-color-warning: var(--color-orange);
    --alert-color-alert: var(--color-gold);
    --alert-color-danger: var(--color-red);
    --alert-color-dark: var(--color-black);
    --alert-color-grey: var(--color-grey-50pct);
}
.alert-card-icon {
    display: flex;
    padding: 0 var(--alert-card-padding);
    border-top-left-radius: var(--alert-card-radii);
    border-bottom-left-radius: var(--alert-card-radii);
}

.alert-card-body {
    border-top-right-radius: var(--alert-card-radii);
    border-bottom-right-radius: var(--alert-card-radii);
    border-width:calc(1rem / 16);
    border-style: solid;
    border-left: none;
    padding: var(--alert-card-padding-top) var(--alert-card-padding-side);
}

/* INFO: blue */
.alert-card-icon-info {
    background-color: var(--alert-color-info);
    color: var(--color-white);
}

.alert-card-info {
    border-color: var(--alert-color-info);
}

.alert-card-info:hover {
    background-color: hsl(from var(--alert-color-info) h 50% 95%);
    color: var(--color-black);
}

/* SUCCESS, OK, OKAY: green */
.alert-card-icon-success, .alert-card-icon-ok, .alert-card-icon-okay {
    background-color: var(--alert-color-success);
    color: var(--color-white);
}

.alert-card-success, .alert-card-ok, .alert-card-okay {
    border-color: var(--alert-color-success);
}

.alert-card-success:hover, .alert-card-ok:hover, .alert-card-okay:hover {
    background-color: hsl(from var(--alert-color-success) h 50% 95%);
    color: var(--color-black);
}

/* FYI: teal */
.alert-card-icon-fyi {
    background-color: var(--alert-color-fyi);
    color: var(--color-white);
}

.alert-card-fyi {
    border-color: var(--alert-color-fyi);
}

.alert-card-fyi:hover {
    background-color: hsl(from var(--alert-color-fyi) h 50% 95%);
    color: var(--color-black);
}

/* WARNING: orange */
.alert-card-icon-warning {
    background-color: var(--alert-color-warning);
    color: var(--color-black);
}

.alert-card-warning {
    border-color: var(--alert-color-warning);
}

.alert-card-warning:hover {
    background-color: hsl(from var(--alert-color-warning) h 50% 95%);
    color: var(--color-black);
}

/* DANGER, STOP: red */
.alert-card-icon-danger, .alert-card-icon-stop {
    background-color: var(--alert-color-danger);
    color: var(--color-white);
}

.alert-card-danger, .alert-card-stop {
    border-color: var(--alert-color-danger);
}

.alert-card-danger:hover, .alert-card-stop:hover {
    background-color: hsl(from var(--alert-color-danger) h 50% 95%);
    color: var(--color-black);
}

/* ALERT: yellow */
.alert-card-icon-alert {
    background-color: var(--alert-color-alert);
    color: var(--color-black);
}

.alert-card-alert {
    border-color: var(--alert-color-alert);
}

.alert-card-alert:hover {
    background-color: hsl(from var(--alert-color-alert) h 50% 95%);
    color: var(--color-black);
}

/* DARK: black */
.alert-card-icon-dark {
    background-color: var(--alert-color-dark);
    color: var(--color-white);
}

.alert-card-dark {
    border-color: var(--alert-color-dark);
}

.alert-card-dark:hover {
    background-color: hsl(from var(--alert-color-dark) h 50% 95%);
    color: var(--color-black);
}

/* GREY: 50% grey */
.alert-card-icon-grey {
    background-color: var(--alert-color-grey);
    color: var(--color-black);
}

.alert-card-grey {
    border-color: var(--alert-color-grey);
}

.alert-card-grey:hover {
    background-color: hsl(from var(--alert-color-grey) h s 95%);
    color: var(--color-black);
}