/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                    WARNING:    DO NOT UPDATE OR CHANGE THIS FILE                    +
+     IF YOU WANT MODIFY THESE STYLES PLEASE USE THE OVERRIDE FILE IN YOUR CSS_SITE   +
+     FOLDER, UPDATES TO THESE STYLES DELETED UPON NEXT TEMPLATE UPGRADE              +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
:root {
    /*--- Primary ---*/
    --primary: var(--titan-blue);
    --primary-rgb: var(--titan-blue-rgb);
    --primary-text: var(--titan-blue-text);
    --primary-hover: var(--titan-blue-hover);
    --primary-hover-text: var(--titan-blue-hover-text);
    --primary-dark: var(--titan-blue-dark);
    --primary-dark-rgb: var(--titan-blue-dark-rgb);
    --primary-dark-text: var(--titan-blue-dark-text);
    --primary-dark-hover: var(--titan-blue-dark-hover);
    --primary-dark-hover-text: var(--titan-blue-dark-hover-text);
    /*--- Secondary ---*/
    --secondary: var(--medium-blue);
    --secondary-rgb: var(--medium-blue-rgb);
    --secondary-text: var(--medium-blue-text);
    --secondary-hover: var(--medium-blue-hover);
    --secondary-hover-text: var(--medium-blue-hover-text);
    --secondary-dark: var(--medium-blue-dark);
    --secondary-dark-rgb: var(--medium-blue-dark-rgb);
    --secondary-dark-text: var(--medium-blue-dark-text);
    --secondary-dark-hover: var(--medium-blue-dark-hover);
    --secondary-dark-hover-text: var(--medium-blue-dark-hover-text);
    /*--- Neutral ---*/
    --neutral: var(--beige);
    --neutral-rgb: var(--beige-rgb);
    --neutral-text: var(--beige-text);
    --neutral-hover: var(--beige-hover);
    --neutral-hover-text: var(--beige-hover-text);
    --neutral-dark: var(--beige-dark);
    --neutral-dark-rgb: var(--beige-dark-rgb);
    --neutral-dark-text: var(--beige-dark-text);
    --neutral-dark-hover: var(--beige-dark-hover);
    --neutral-dark-hover-text: var(--beige-dark-hover-text);
    /*--- Dark ---*/
    --dark: var(--cool-gray);
    --dark-rgb: var(--cool-gray-rgb);
    --dark-text: var(--cool-gray-text);
    --dark-hover: var(--cool-gray-hover);
    --dark-hover-text: var(--cool-gray-hover-text);
    --dark-dark: var(--cool-gray-dark);
    --dark-dark-rgb: var(--cool-gray-dark-rgb);
    --dark-dark-text: var(--cool-gray-dark-text);
    --dark-dark-hover: var(--cool-gray-dark-hover);
    --dark-dark-hover-rgb: var(--cool-gray-dark-hover-rgb);
    --dark-dark-hover-text: var(--cool-gray-dark-hover-text);
    /*--- Accent 1 ---*/
    --accent-1: var(--orange);
    --accent-1-rgb: var(--orange-rgb);
    --accent-1-text: var(--orange-text);
    --accent-1-hover: var(--orange-hover);
    --accent-1-hover-text: var(--orange-hover-text);
    --accent-1-dark: var(--orange-dark);
    --accent-1-dark-rgb: var(--orange-dark-rgb);
    --accent-1-dark-text: var(--orange-dark-text);
    --accent-1-dark-hover: var(--orange-dark-hover);
    --accent-1-dark-hover-rgb: var(--orange-dark-hover-rgb);
    --accent-1-dark-hover-text: var(--orange-dark-hover-text);
    /*--- Accent 2 ---*/
    --accent-2: var(--light-blue);
    --accent-2-rgb: var(--light-blue-rgb);
    --accent-2-text: var(--light-blue-text);
    --accent-2-hover: var(--light-blue-hover);
    --accent-2-hover-rgb: var(--light-blue-hover);
    --accent-2-hover-text: var(--light-blue-hover-text);
    --accent-2-dark: var(--light-blue-dark);
    --accent-2-dark-rgb: var(--light-blue-dark-rgb);
    --accent-2-dark-text: var(--light-blue-dark-text);
    --accent-2-dark-hover: var(--light-blue-dark-hover);
    --accent-2-dark-hover-rgb: var(--light-blue-dark-hover-rgb);
    --accent-2-dark-hover-text: var(--light-blue-dark-hover-text);
    /*--- My Black ---*/
    --my-black: var(--black);
    --my-black-rgb: var(--black-rgb);
    --my-black-text: var(--black-text);
    --my-black-hover: var(--black-hover);
    --my-black-hover-rgb: var(--black-hover-rgb);
    --my-black-hover-text: var(--black-hover-text);
    --my-black-dark: var(--black-dark);
    --my-black-dark-rgb: var(--black-dark-rgb);
    --my-black-dark-text: var(--black-dark-text);
    --my-black-dark-hover: var(--black-dark-hover);
    --my-black-dark-hover-rgb: var(--black-dark-hover-rgb);
    --my-black-dark-hover-text: var(--black-dark-hover-text);
    /*--- My GRAY ---*/
    --my-gray: var(--light-gray);
    --my-gray-rgb: var(--light-gray-rgb);
    --my-gray-text: var(--light-gray-text);
    --my-gray-hover: var(--light-gray-hover);
    --my-gray-hover-rgb: var(--light-gray-hover-rgb);
    --my-gray-hover-text: var(--light-gray-hover-text);
    --my-gray-dark: var(--light-gray-dark);
    --my-gray-dark-rgb: var(--light-gray-dark-rgb);
    --my-gray-dark-text: var(--light-gray-dark-text);
    --my-gray-dark-hover: var(--light-gray-dark-hover);
    --my-gray-dark-hover-rgb: var(--light-gray-dark-hover-rgb);
    --my-gray-dark-hover-text: var(--light-gray-dark-hover-text);
    /*--- My White ---*/
    --my-white: var(--white);
    --my-white-rgb: var(--white-rgb);
    --my-white-text: var(--white-text);
    --my-white-hover: var(--white-hover);
    --my-white-hover-rgb: var(--white-hover-rgb);
    --my-white-hover-text: var(--white-hover-text);
    --my-white-dark: var(--white-dark);
    --my-white-dark-rgb: var(--white-dark-rgb);
    --my-white-dark-text: var(--white-dark-text);
    --my-white-dark-hover: var(--white-dark-hover);
    --my-white-dark-hover-rgb: var(--white-dark-hover-rgb);
    --my-white-dark-hover-text: var(--white-dark-hover-text);
    /*-- DARK MODE HEADERS --*/
    --dark-mode-headers: var(--dark-mode-medium-blue-headers);
}

/*--------------------------------------------
    TOP ELEMENTS
*/
.grid-item[first-child] {
    background-color: red;
}

main h1 {
    color: var(--secondary);
}

.dark-mode main h1 {
    color: var(--dark-mode-headers);
}


main h2 {
    color: var(--secondary);
}

.dark-mode main h2 {
    color: var(--dark-mode-headers);
}


main h3 {
    color: var(--my-black);
}

.dark-mode main h3 {
    color: var(--light-gray);
    background-color: unset;
}


main h4 {
    color: var(--light-dialog);
}

.dark-mode main h4 {
    color: var(--light-warm-gray);
    background-color: unset;
}

main .section-stock h1 {
    color: unset;
}

.background {
    background-color: var(--default);
    color: var(--default-color);
}

/*-- PRIMARY COLOR --*/

.background-1, .background-1 *:not([class*="button"]), .standout-block.background-1,
[id*="box"].background-1, [id*="box"].background-1 *:not([class*="button"]):not(.breakout-bg),
main .background-1 summary, main .background-1 details[open] summary,
.background-1 a, main .background-1 a, main .card-1 a,
[id*="box"][class*='stock-'] [id*="div"][class*="background-1"] .overlay-content *:not([class*="button"]),
.background-1.blog-data, .breakout-bg.background-1 {
    background-color: var(--primary);
    color: var(--primary-text);
    text-decoration-color: var(--orange-hover);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    main .background-1 a:not([class*='button']):hover, .card-1 a:not([class*='button']):hover {
        text-decoration-color: var(--primary-text);
        text-decoration-style: solid;
    }

    main .background-1 a:not([class*='button']):focus, .card-1 a:not([class*='button']):focus {
        text-decoration-color: var(--accent-1);
        text-decoration-style: solid;
    }

    .background-1.hover-focus:hover, .background-1.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--primary-hover);
        color: var(--primary-hover-text);
    }

        [id*='box'].background-1 [id*='div'].alt, [id*='box'].background-1 [id*='div'].alt *,
        .breakout-bg.background-1.alt, .breakout-bg.background-1.alt *:not([class*="button"]),
        .background-1.hover-focus:hover, .background-1.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--primary-hover);
            color: var(--primary-hover-text);
        }

.dark-mode .background-1, .dark-mode .background-1 *:not([class*="button"]), .dark-mode .standout-block.background-1,
.dark-mode [id*="box"].background-1, .dark-mode [id*="box"].background-1 *:not([class*="button"]):not(.breakout-bg),
.dark-mode main .background-1 summary, .dark-mode main .background-1 details[open] summary,
.dark-mode .background-1 a, .dark-mode main .background-1 a, .dark-mode .card-1 a,
.dark-mode [id*="box"][class*='stock-'] [id*="div"][class*="background-1"] .overlay-content *:not([class*="button"]),
.dark-mode .background-1.blog-data {
    background-color: var(--primary-dark);
    color: var(--primary-dark-text);
    text-decoration-color: var(--dark-mode-medium-blue-headers);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    .dark-mode main .background-1 a:not([class*='button']):hover, .dark-mode .card-1 a:not([class*='button']):hover {
        text-decoration-color: var(--primary-dark-text);
        text-decoration-style: solid;
    }

    .dark-mode main .background-1 a:not([class*='button']):focus, .dark-mode .card-1 a:not([class*='button']):focus {
        text-decoration-color: var(--accent-1-dark);
        text-decoration-style: solid;
    }

    .dark-mode .background-1.hover-focus:hover, .dark-mode .background-1.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--primary-dark-hover);
        color: var(--primary-dark-hover-text);
        text-decoration-color: var(--primary-dark-text);
    }

        .dark-mode [id*='box'].background-1 [id*='div'].alt, .dark-mode [id*='box'].background-1 [id*='div'].alt *,
        .dark-mode .breakout-bg.background-1.alt, .dark-mode .breakout-bg.background-1.alt *:not([class*="button"]),
        .dark-mode .background-1.hover-focus:hover, .dark-mode .background-1.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--primary-dark-hover);
            color: var(--primary-dark-hover-text);
        }


/*-- SECONDARY COLOR --*/

.background-2, .background-2 *:not([class*="button"]), .standout-block.background-2,
[id*="box"].background-2, [id*="box"].background-2 *:not([class*="button"]):not(.breakout-bg),
main .background-2 summary, main .background-2 details[open] summary, main .background-2 details[open] summary *:not([class*="button"]),
.background-2 a, main .background-2 a, main .card-2 a,
[id*="box"][class*='stock-'] [id*="div"][class*="background-2"] .overlay-content *:not([class*="button"]),
.background-2.blog-data {
    background-color: var(--secondary);
    color: var(--secondary-text);
    text-decoration-color: var(--orange-hover);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    main .background-2 a:not([class*='button']):hover, .card-2 a:not([class*='button']):hover {
        text-decoration-color: var(--secondary-text);
        text-decoration-style: solid;
    }

    main .background-2 a:not([class*='button']):focus, .card-2 a:not([class*='button']):focus {
        text-decoration-color: var(--accent-1);
        text-decoration-style: solid;
    }

    .background-2.hover-focus:hover, .background-2.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--secondary-hover);
        color: var(--secondary-hover-text);
    }

        [id*='box'].background-2 [id*='div'].alt, [id*='box'].background-2 [id*='div'].alt *,
        .breakout-bg.background-2.alt, .breakout-bg.background-2.alt *:not([class*="button"]),
        .background-2.hover-focus:hover, .background-2.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--secondary-hover);
            color: var(--secondary-hover-text);
        }

.dark-mode .background-2, .dark-mode .background-2 *:not([class*="button"]), .dark-mode .standout-block.background-2,
.dark-mode [id*="box"].background-2, .dark-mode [id*="box"].background-2 *:not([class*="button"]):not(.breakout-bg),
.dark-mode main .background-2 summary, .dark-mode main .background-2 details[open] summary, .dark-mode main .background-2 details[open] summary *:not([class*="button"]),
.dark-mode .background-2 a, .dark-mode main .background-2 a, .dark-mode main .card-2 a,
.dark-mode [id*="box"][class*='stock-'] [id*="div"][class*="background-2"] .overlay-content *:not([class*="button"]),
.dark-mode .background-2.blog-data {
    background-color: var(--secondary-dark);
    color: var(--secondary-dark-text);
    text-decoration-color: var(--orange);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    .dark-mode main .background-2 a:not([class*='button']):hover, .dark-mode .card-2 a:not([class*='button']):hover {
        text-decoration-color: var(--secondary-dark-text);
        text-decoration-style: solid;
    }

    .dark-mode main .background-2 a:not([class*='button']):focus, .dark-mode .card-2 a:not([class*='button']):focus {
        text-decoration-color: var(--accent-1-dark);
        text-decoration-style: solid;
    }

    .dark-mode .background-2.hover-focus:hover, .dark-mode .background-2.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--secondary-dark-hover);
        color: var(--secondary-dark-hover-text);
    }

        .dark-mode [id*='box'].background-2 [id*='div'].alt, .dark-mode [id*='box'].background-2 [id*='div'].alt *,
        .dark-mode .breakout-bg.background-2.alt, .dark-mode .breakout-bg.background-2.alt *:not([class*="button"]),
        .dark-mode .background-2.hover-focus:hover, .dark-mode .background-2.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--secondary-dark-hover);
            color: var(--secondary-dark-hover-text);
        }

/*-- NEUTRAL COLOR --*/

.background-3, .background-3 *:not([class*="button"]), .standout-block.background-3,
[id*="box"].background-3, [id*="box"].background-3 *:not([class*="button"]):not(.breakout-bg),
main .background-3 summary, main .background-3 details[open] summary, main .background-3 details[open] summary *:not([class*="button"]),
.background-3 a, main .background-3 a, main .card-3 a,
[id*="box"][class*='stock-'] [id*="div"][class*="background-3"] .overlay-content *:not([class*="button"]),
.background-3.blog-data, main [id*="div"][class*="background-3"] .overlay-content p a[class*='button-hover'] {
    background-color: var(--neutral);
    color: var(--neutral-text);
    text-decoration-color: var(--neutral-text-hover);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    main .background-3 a:not([class*='button']):hover, main .card-3 a:not([class*='button']):hover {
        text-decoration-color: var(--orange-dark);
        text-decoration-style: solid;
    }

    main .background-3 a:not([class*='button']):focus, main .card-3 a:not([class*='button']):focus {
        text-decoration-color: var(--orange-dark);
        text-decoration-style: solid;
    }

    .background-3.hover-focus:hover, .background-3.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--neutral-hover);
        color: var(--neutral-hover-text);
    }

        [id*='box'].background-3 [id*='div'].alt, [id*='box'].background-3 [id*='div'].alt *,
        .breakout-bg.background-3.alt, .breakout-bg.background-3.alt *:not([class*="button"]),
        .background-3.hover-focus:hover, .background-3.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--neutral-hover);
            color: var(--neutral-hover-text);
        }

.dark-mode .background-3, .dark-mode .background-3 *:not([class*="button"]), .dark-mode .standout-block.background-3,
.dark-mode [id*="box"].background-3, .dark-mode [id*="box"].background-3 *:not([class*="button"]):not(.breakout-bg),
.dark-mode main .background-3 summary, .dark-mode main .background-3 details[open] summary, .dark-mode main .background-3 details[open] summary *:not([class*="button"]),
.dark-mode main .background-3 a, .dark-mode main .background-3 a, .dark-mode main .card-3 a,
.dark-mode [id*="box"][class*='stock-'] [id*="div"][class*="background-3"] .overlay-content *:not([class*="button"]),
.dark-mode .background-3.blog-data {
    background-color: var(--neutral-dark);
    color: var(--neutral-dark-text);
    text-decoration-color: var(--neutral-dark-text);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    .dark-mode main .background-3 a:not([class*='button']):hover, .dark-mode main .card-3 a:not([class*='button']):hover {
        text-decoration-color: var(--neutral-dark-text);
        text-decoration-style: solid;
    }

    .dark-mode main .background-3 a:not([class*='button']):focus, .dark-mode main .card-3 a:not([class*='button']):focus {
        text-decoration-color: var(--orange-dark);
        text-decoration-style: solid;
    }

    .dark-mode .background-3.hover-focus:hover, .dark-mode main .background-3.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--orange-hover);
        color: var(--orange-dark-hover-text);
    }

        .dark-mode [id*='box'].background-3 [id*='div'].alt, .dark-mode [id*='box'].background-3 [id*='div'].alt *,
        .dark-mode .breakout-bg.background-3.alt, .dark-mode .breakout-bg.background-3.alt *:not([class*="button"]),
        .dark-mode .background-3.hover-focus:hover, .dark-mode .background-3.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--neutral-dark-hover);
            color: var(--neutral-dark-hover-text);
        }

/*-- DARK COLOR --*/
.background-4, .background-4 *:not([class*="button"]), .standout-block.background-4,
[id*="box"].background-4, [id*="box"].background-4 *:not([class*="button"]):not(.breakout-bg),
main .background-4 summary, main .background-4 details[open] summary, main .background-4 details[open] summary *:not([class*="button"]),
.background-4 a, main .background-4 a, main .card-4 a,
[id*="box"][class*='stock-'] [id*="div"][class*="background-4"] .overlay-content *:not([class*="button"]),
.background-4.blog-data {
    background-color: var(--dark);
    color: var(--dark-text);
    text-decoration-color: var(--neutral-text-hover);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    main .background-4 a:not([class*='button']):hover, main .card-4 a:not([class*='button']):hover {
        text-decoration-color: var(--orange-hover);
        text-decoration-style: solid;
    }

    main .background-4 a:not([class*='button']):focus, main .card-4 a:not([class*='button']):focus {
        text-decoration-color: var(--orange-hover);
        text-decoration-style: solid;
    }

    .background-4.hover-focus:hover, .background-4.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--dark-hover);
        color: var(--dark-hover-text);
    }

        [id*='box'].background-4 [id*='div'].alt, [id*='box'].background-4 [id*='div'].alt *,
        .breakout-bg.background-4.alt, .breakout-bg.background-4.alt *:not([class*="button"]),
        .background-4.hover-focus:hover, .background-4.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--dark-hover);
            color: var(--dark-hover-text);
        }

.dark-mode .background-4, .dark-mode .background-4 *:not([class*="button"]), .dark-mode .standout-block.background-4,
.dark-mode [id*="box"].background-4, .dark-mode [id*="box"].background-4 *:not([class*="button"]):not(.breakout-bg),
.dark-mode main .background-4 summary, .dark-mode main .background-4 details[open] summary, .dark-mode main .background-4 details[open] summary *:not([class*="button"]),
.dark-mode .background-4 a, .dark-mode main .background-4 a, .dark-mode main .card-4 a,
.dark-mode [id*="box"][class*='stock-'] [id*="div"][class*="background-4"] .overlay-content *:not([class*="button"]),
.dark-mode .background-4.blog-data {
    background-color: var(--dark-dark);
    color: var(--dark-dark-text);
    text-decoration-color: var(--dark-dark-text-hover);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    .dark-mode main .background-4 a:not([class*='button']):hover, .dark-mode main .card-4 a:not([class*='button']):hover {
        text-decoration-color: var(--dark-dark-text);
        text-decoration-style: solid;
    }

    .dark-mode main .background-4 a:not([class*='button']):focus, .dark-mode main .card-4 a:not([class*='button']):focus {
        text-decoration-color: var(--orange-dark);
        text-decoration-style: solid;
    }

    .dark-mode .background-4.hover-focus:hover, .dark-mode main .background-4.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--orange-hover);
        color: var(--orange-dark-hover-text);
    }

        .dark-mode [id*='box'].background-4 [id*='div'].alt, .dark-mode [id*='box'].background-4 [id*='div'].alt *,
        .dark-mode .breakout-bg.background-4.alt, .dark-mode .breakout-bg.background-4.alt *:not([class*="button"]),
        .dark-mode .background-4.hover-focus:hover, .dark-mode .background-4.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--orange-hover);
            color: var(--orange-dark-hover-text);
        }

/*-- ACCENT 1 --*/

.background-5, .background-5 *:not([class*="button"]), .standout-block.background-5,
[id*="box"].background-5, [id*="box"].background-5 *:not([class*="button"]):not(.breakout-bg),
main .background-5 summary, main .background-5 details[open] summary, main .background-5 details[open] summary *:not([class*="button"]),
.background-5 a, main .background-5 a, main .card-5 a,
[id*="box"][class*='stock-'] [id*="div"][class*="background-5"] .overlay-content *:not([class*="button"]),
.background-5.blog-data {
    background-color: var(--accent-1);
    color: var(--accent-1-text);
    text-decoration-color: var(--accent-1-text-hover);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    main .background-5 a:not([class*='button']):hover, main .card-5 a:not([class*='button']):hover {
        text-decoration-color: var(--accent-1-hover);
        text-decoration-style: solid;
    }

    main .background-5 a:not([class*='button']):focus, main .card-5 a:not([class*='button']):focus {
        text-decoration-color: var(--accent-1-hover);
        text-decoration-style: solid;
    }

    .background-5.hover-focus:hover, .background-5.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--accent-1-hover);
        color: var(--accent-1-hover-text);
    }

        [id*='box'].background-5 [id*='div'].alt, [id*='box'].background-5 [id*='div'].alt *,
        .breakout-bg.background-5.alt, .breakout-bg.background-5.alt *:not([class*="button"]),
        .background-5.hover-focus:hover, .background-5.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--accent-1-hover);
            color: var(--accent-1-hover-text);
        }

.dark-mode .background-5, .dark-mode .background-5 *:not([class*="button"]), .dark-mode .standout-block.background-5,
.dark-mode [id*="box"].background-5, .dark-mode [id*="box"].background-5 *:not([class*="button"]):not(.breakout-bg),
.dark-mode main .background-5 summary, .dark-mode main .background-5 details[open] summary, .dark-mode main .background-5 details[open] summary *:not([class*="button"]),
.dark-mode .background-5 a, .dark-mode main .background-5 a, .dark-mode main .card-5 a,
.dark-mode [id*="box"][class*='stock-'] [id*="div"][class*="background-5"] .overlay-content *:not([class*="button"]),
.dark-mode .background-5.blog-data {
    background-color: var(--accent-1-dark);
    color: var(--accent-1-dark-text);
    text-decoration-color: var(--dark-dark-text-hover);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    .dark-mode main .background-5 a:not([class*='button']):hover, .dark-mode main .card-5 a:not([class*='button']):hover {
        text-decoration-color: var(--accent-1-dark-text);
        text-decoration-style: solid;
    }

    .dark-mode main .background-5 a:not([class*='button']):focus, .dark-mode main .card-5 a:not([class*='button']):focus {
        text-decoration-color: var(--accent-1-dark-text);
        text-decoration-style: solid;
    }

    .dark-mode .background-5.hover-focus:hover, .dark-mode main .background-5.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--accent-1-dark-hover);
        color: var(--accent-1-dark-hover-text);
    }

        .dark-mode [id*='box'].background-5 [id*='div'].alt, .dark-mode [id*='box'].background-5 [id*='div'].alt *,
        .dark-mode .breakout-bg.background-5.alt, .dark-mode .breakout-bg.background-5.alt *:not([class*="button"]),
        .dark-mode .background-5.hover-focus:hover, .dark-mode .background-5.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--accent-1-dark-hover);
            color: var(--accent-1-dark-hover-text);
        }

/*-- ACCENT 2 --*/

.background-6, .background-6 *:not([class*="button"]), .standout-block.background-6,
[id*="box"].background-6, [id*="box"].background-6 *:not([class*="button"]):not(.breakout-bg),
main .background-6 summary, main .background-6 details[open] summary, main .background-6 details[open] summary *:not([class*="button"]),
.background-6 a, main .background-6 a, main .card-6 a,
[id*="box"][class*='stock-'] [id*="div"][class*="background-6"] .overlay-content *:not([class*="button"]),
.background-6.blog-data {
    background-color: var(--accent-2);
    color: var(--accent-2-text);
    text-decoration-color: var(--accent-2-text-hover);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    main .background-6 a:not([class*='button']):hover, main .card-6 a:not([class*='button']):hover {
        text-decoration-color: var(--my-white);
        text-decoration-style: solid;
    }

    main .background-6 a:not([class*='button']):focus, main .card-6 a:not([class*='button']):focus {
        text-decoration-color: var(--my-white);
        text-decoration-style: solid;
    }

    .background-6.hover-focus:hover, .background-6.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--accent-2-hover);
        color: var(--accent-2-hover-text);
    }

        [id*='box'].background-6 [id*='div'].alt, [id*='box'].background-6 [id*='div'].alt *,
        .breakout-bg.background-6.alt, .breakout-bg.background-6.alt *:not([class*="button"]),
        .background-6.hover-focus:hover, .background-6.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--accent-2-hover);
            color: var(--accent-2-hover-text);
        }

.dark-mode .background-6, .dark-mode .background-6 *:not([class*="button"]), .dark-mode .standout-block.background-6,
.dark-mode [id*="box"].background-6, .dark-mode [id*="box"].background-6 *:not([class*="button"]):not(.breakout-bg),
.dark-mode main .background-6 summary, .dark-mode main .background-6 details[open] summary, .dark-mode main .background-6 details[open] summary *:not([class*="button"]),
.dark-mode .background-6 a, .dark-mode main .background-6 a, .dark-mode main .card-6 a,
.dark-mode [id*="box"][class*='stock-'] [id*="div"][class*="background-6"] .overlay-content *:not([class*="button"]),
.dark-mode .background-6.blog-data {
    background-color: var(--accent-2-dark);
    color: var(--accent-2-dark-text);
    text-decoration-color: var(--accent-2-dark-text-hover);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    .dark-mode main .background-6 a:not([class*='button']):hover, .dark-mode main .card-6 a:not([class*='button']):hover {
        text-decoration-color: var(--my-white-dark-text);
        text-decoration-style: solid;
    }

    .dark-mode main .background-6 a:not([class*='button']):focus, .dark-mode main .card-6 a:not([class*='button']):focus {
        text-decoration-color: var(--my-white-dark-text);
        text-decoration-style: solid;
    }

    .dark-mode .background-6.hover-focus:hover, .dark-mode main .background-6.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--accent-2-dark-hover);
        color: var(--accent-2-dark-hover-text);
    }

        .dark-mode [id*='box'].background-6 [id*='div'].alt, .dark-mode [id*='box'].background-6 [id*='div'].alt *,
        .dark-mode .breakout-bg.background-6.alt, .dark-mode .breakout-bg.background-6.alt *:not([class*="button"]),
        .dark-mode .background-6.hover-focus:hover, .dark-mode .background-6.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--accent-2-dark-hover);
            color: var(--accent-2-dark-hover-text);
        }


/*---------------------------------------------------
    BACKGROUND DEFAULTS BLACK AND WHITE
*/

/*-- MY BLACK --*/
.background-black, .background-black *:not([class*="button"]), .standout-block.background-black,
[id*="box"].background-black, [id*="box"].background-black *:not([class*="button"]):not(.breakout-bg),
main .background-black summary, main .background-black details[open] summary, main .background-black details[open] summary *:not([class*="button"]),
.background-black a, main .background-black a, main .card-black a,
[id*="box"][class*='stock-'] [id*="div"][class*="background-black"] .overlay-content *:not([class*="button"]),
.background-black.blog-data {
    background-color: var(--my-black);
    color: var(--my-black-text);
    text-decoration-color: var(--my-black-text-hover);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    main .background-black a:not([class*='button']):hover, main .card-black a:not([class*='button']):hover {
        text-decoration-color: var(--orange);
        text-decoration-style: solid;
    }

    main .background-black a:not([class*='button']):focus, main .card-black a:not([class*='button']):focus {
        text-decoration-color: var(--orange);
        text-decoration-style: solid;
    }

    .background-black.hover-focus:hover, .background-black.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--my-black-hover);
        color: var(--my-black-hover-text);
    }

        [id*='box'].background-black [id*='div'].alt, [id*='box'].background-black [id*='div'].alt *,
        .breakout-bg.background-black.alt, .breakout-bg.background-black.alt *:not([class*="button"]),
        .background-black.hover-focus:hover, .background-black.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--my-black-hover);
            color: var(--my-black-hover-text);
        }

.dark-mode .background-black, .dark-mode .background-black *:not([class*="button"]), .dark-mode .standout-block.background-black,
.dark-mode [id*="box"].background-black, .dark-mode [id*="box"].background-black *:not([class*="button"]):not(.breakout-bg),
.dark-mode main .background-black summary, .dark-mode main .background-black details[open] summary, .dark-mode main .background-black details[open] summary *:not([class*="button"]),
.dark-mode .background-black a, .dark-mode main .background-black a, .dark-mode main .card-black a,
.dark-mode [id*="box"][class*='stock-'] [id*="div"][class*="background-black"] .overlay-content *:not([class*="button"]),
.dark-mode .background-black.blog-data {
    background-color: var(--my-black-dark);
    color: var(--my-black-dark-text);
    text-decoration-color: var(--my-black-text-hover);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    .dark-mode main .background-black a:not([class*='button']):hover, .dark-mode main .card-black a:not([class*='button']):hover {
        text-decoration-color: var(--orange-dark);
        text-decoration-style: solid;
    }

    .dark-mode main .background-black a:not([class*='button']):focus, .dark-mode main .card-black a:not([class*='button']):focus {
        text-decoration-color: var(--orange-dark);
        text-decoration-style: solid;
    }

    .dark-mode .background-black.hover-focus:hover, .dark-mode .background-black.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--my-black-dark-hover);
        color: var(--my-black-dark-hover-text);
    }

        .dark-mode [id*='box'].background-black [id*='div'].alt, .dark-mode [id*='box'].background-black [id*='div'].alt *,
        .dark-mode .breakout-bg.background-black.alt, .dark-mode .breakout-bg.background-black.alt *:not([class*="button"]),
        .dark-mode .background-black.hover-focus:hover, .dark-mode .background-black.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--my-black-dark-hover);
            color: var(--my-black-dark-hover-text);
        }

/*-- MY GRAY --*/
.background-gray, .background-gray *:not([class*="button"]), .standout-block.background-gray,
[id*="box"].background-gray, [id*="box"].background-gray *:not([class*="button"]):not(.breakout-bg),
main .background-gray summary, main .background-gray details[open] summary, main .background-gray details[open] summary *:not([class*="button"]),
.background-gray a, main .background-gray a, main .card-gray a,
[id*="box"][class*='stock-'] [id*="div"][class*="background-gray"] .overlay-content *:not([class*="button"]),
.background-gray.blog-data {
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    text-decoration-color: var(--my-gray-text-hover);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    main .background-gray a:not([class*='button']):hover, main .card-gray a:not([class*='button']):hover {
        text-decoration-color: var(--orange);
        text-decoration-style: solid;
    }

    main .background-gray a:not([class*='button']):focus, main .card-gray a:not([class*='button']):focus {
        text-decoration-color: var(--orange);
        text-decoration-style: solid;
    }

    .background-gray.hover-focus:hover, .background-gray.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--my-gray-hover);
        color: var(--my-gray-hover-text);
    }

        [id*='box'].background-gray [id*='div'].alt, [id*='box'].background-gray [id*='div'].alt *,
        .breakout-bg.background-gray.alt, .breakout-bg.background-gray.alt *:not([class*="button"]),
        .background-gray.hover-focus:hover, .background-gray.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--my-gray-hover);
            color: var(--my-gray-hover-text);
        }

.dark-mode .background-gray, .dark-mode .background-gray *:not([class*="button"]), .dark-mode .standout-block.background-gray,
.dark-mode [id*="box"].background-gray, .dark-mode [id*="box"].background-gray *:not([class*="button"]):not(.breakout-bg),
.dark-mode main .background-gray summary, .dark-mode main .background-gray details[open] summary, .dark-mode main .background-gray details[open] summary *:not([class*="button"]),
.dark-mode .background-gray a, .dark-mode main .background-gray a, .dark-mode main .card-gray a,
.dark-mode [id*="box"][class*='stock-'] [id*="div"][class*="background-gray"] .overlay-content *:not([class*="button"]),
.dark-mode .background-gray.blog-data {
    background-color: var(--my-gray-dark);
    color: var(--my-gray-dark-text);
    text-decoration-color: var(--my-gray-dark-text-hover);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none !important;
}

    .dark-mode main .background-gray a:not([class*='button']):hover, .dark-mode main .card-gray a:not([class*='button']):hover {
        text-decoration-color: var(--orange-dark);
        text-decoration-style: solid;
    }

    .dark-mode main .background-gray a:not([class*='button']):focus, .dark-mode main .card-gray a:not([class*='button']):focus {
        text-decoration-color: var(--orange-dark);
        text-decoration-style: solid;
    }

    .dark-mode .background-gray.hover-focus:hover, .dark-mode .background-gray.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--my-gray-dark-hover);
        color: var(--my-gray-dark-hover-text);
    }

        .dark-mode [id*='box'].background-gray [id*='div'].alt, .dark-mode [id*='box'].background-gray [id*='div'].alt *,
        .dark-mode .breakout-bg.background-gray.alt, .dark-mode .breakout-bg.background-gray.alt *:not([class*="button"]),
        .dark-mode .background-gray.hover-focus:hover, .dark-mode .background-gray.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--my-gray-dark-hover);
            color: var(--my-gray-dark-hover-text);
        }

/*-- MY WHITE --*/
.background-white, .background-white *:not([class*="button"]), .standout-block.background-white,
[id*="box"].background-white, [id*="box"].background-white *:not([class*="button"]):not(.breakout-bg),
main .background-white summary, main .background-white details[open] summary, main .background-white details[open] summary *:not([class*="button"]),
.background-white a, main .background-white a, main .card-white a,
[id*="box"][class*='stock-'] [id*="div"][class*="background-white"] .overlay-content *:not([class*="button"]),
.background-white.blog-data {
    background-color: var(--my-white);
    color: var(--my-white-text);
    text-decoration-color: var(--orange-dark);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    main .background-white a:not([class*='button']):hover, main .card-white a:not([class*='button']):hover {
        text-decoration-color: var(--orange);
        text-decoration-style: solid;
    }

    main .background-white a:not([class*='button']):focus, main .card-white a:not([class*='button']):focus {
        text-decoration-color: var(--orange);
        text-decoration-style: solid;
    }

    .background-white.hover-focus:hover, .background-white.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--my-white-hover);
        color: var(--my-white-hover-text);
    }

        [id*='box'].background-white [id*='div'].alt, [id*='box'].background-white [id*='div'].alt *,
        .breakout-bg.background-white.alt, .breakout-bg.background-white.alt *:not([class*="button"]),
        .background-white.hover-focus:hover, .background-white.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--my-white-hover);
            color: var(--my-white-hover-text);
        }

.dark-mode .background-white, .dark-mode .background-white *:not([class*="button"]), .dark-mode .standout-block.background-white,
.dark-mode [id*="box"].background-white, .dark-mode [id*="box"].background-white *:not([class*="button"]):not(.breakout-bg),
.dark-mode main .background-white summary, .dark-mode main .background-white details[open] summary, .dark-mode main .background-white details[open] summary *:not([class*="button"]),
.dark-mode .background-white a, .dark-mode main .background-white a, .dark-mode main .card-white a,
.dark-mode [id*="box"][class*='stock-'] [id*="div"][class*="background-white"] .overlay-content *:not([class*="button"]),
.dark-mode .background-white.blog-data {
    background-color: var(--my-white-dark);
    color: var(--my-white-dark-text);
    text-decoration-color: var(--accent-2-dark-text-hover);
    text-underline-offset: var(--text-underline-offset-more);
    text-shadow: none;
}

    .dark-mode main .background-white a:not([class*='button']):hover, .dark-mode main .card-white a:not([class*='button']):hover {
        text-decoration-color: var(--my-white-dark-text);
        text-decoration-style: solid;
    }

    .dark-mode main .background-white a:not([class*='button']):focus, .dark-mode main .card-white a:not([class*='button']):focus {
        text-decoration-color: var(--my-white-dark-text);
        text-decoration-style: solid;
    }

    .dark-mode .background-white.hover-focus:hover, .dark-mode .background-white.hover-focus:hover *:not([class*="button"]) {
        background-color: var(--my-white-dark-hover);
        color: var(--my-white-dark-hover-text);
    }

        .dark-mode [id*='box'].background-white [id*='div'].alt, .dark-mode [id*='box'].background-white [id*='div'].alt *,
        .dark-mode .breakout-bg.background-white.alt, .dark-mode .breakout-bg.background-white.alt *:not([class*="button"]),
        .dark-mode .background-white.hover-focus:hover, .dark-mode .background-white.hover-focus:hover *:not([class*="button"]) {
            background-color: var(--my-white-dark-hover);
            color: var(--my-white-dark-hover-text);
        }

/*-- BACKGROUND OVER IMAGE --*/

.background-img {
    background-color: var(--box-shade-background-more);
    color: var(--white);
}

    .background-img a:not([class*='button']) {
        color: var(--white);
        text-decoration-color: var(--border-gray);
    }

    .background-img a:hover:not([class*='button']) {
        color: var(--white-hover);
        text-underline-offset: var(--text-underline-offset-more);
    }


.background-img-dark {
    background-color: var(--box-shade-background-most);
    color: var(--white);
}

    .background-img-dark a:not([class*='button']) {
        color: var(--white);
        text-decoration-color: var(--border-gray);
    }

    .background-img-dark a:hover:not([class*='button']) {
        color: var(--white-hover);
        text-underline-offset: var(--text-underline-offset-more);
    }


/*- UPDATE WHERE STOCK AND OTHER BACKGROUNDS USING BREAKOUT STYLES --*/
[id*='box'][class*='background'] .breakout-shell,
[id*='box'][class*='background'] .breakout-shell *:not([class*='background-']):not(.alt),
[id*='box'][class*='background'] .breakout-shell.stock *,
[class*='background'] *:not([class*='button']) .breakout-shell .breakout-bg[class*='stock'],
.breakout-shell .breakout-bg[class*='stock'] * {
    background-color: transparent !important;
    padding: 0px;
}

    .breakout-shell .breakout-bg[class*='stock'] *,
    [id*='box'][class*='background'] .breakout-shell.stock *,
    [id*='box'][class*='background'] .grid-item[class*='stock'],
    [id*='box'][class*='background'] .grid-item[class*='stock'] *:not(.editing-content-meta) {
        background-color: transparent !important;
        color: var(--white);
    }

    [id*='box'][class*='background'] .breakout-shell.stock * {
        font-weight: 400;
    }



/*- UPDATE H1 and H2 WHERE APPROPRIATE --*/

[id*="box"].background-3 h1, .background-3 h1:not([class*='button']),
[id*="box"].background-gray h1, .background-gray h1:not([class*='button']),
[id*="box"].background-white h1, .background-white h1:not([class*='button']) {
    color: var(--primary);
}

[id*="box"].background-3 h2, .background-3 h2:not([class*='button']),
[id*="box"].background-gray h2, .background-gray h2:not([class*='button']),
[id*="box"].background-white h2, .background-white h2:not([class*='button']) {
    color: var(--secondary);
}

/*-- ADD PADDING TO ITEMS NOT DIV OR SECTION 

.background-1, .background-2, .background-3, .background-4,
.background-5, .background-6, .background-black, .background-gray, .background-white {
    padding: 10px;
}--*/

/*--------------------------------------------------
    TITLES 
*/
.block-main-title {
    margin-top: 1em;
    position: relative;
    font-size: 1.67em;
    font-weight: bold;
}

/*--------------------------------------------------------------
    ACCORDION CLEAN UP
*/

[class*='background'] details[open], [class*='background'] details[open] > *:not(summary) {
    background-color: var(--cream) !important;
    color: var(--cream-text) !important;
}

    [class*='background'] details summary .accordion-right-icon, [class*='background'] details[open] summary .accordion-right-icon {
        background-color: transparent;
        color: inherit;
    }

/*---------------------------------------------
    OVERLAY AND WASHES
*/

.darken > .overlay-content, [class*="wash-"] .overlay-content {
    position: relative;
}

    .darken > .overlay-content:before {
        background-color: var(--dark);
        opacity: 0.6;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
    }
/*,
    [class*="wash-"] .overlay-content:before */

[class*="wash"] .overlay-content:before {
    opacity: .8;
    z-index: -1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: " ";
}


[class*="wash-1"] > .overlay-content:before {
    background-color: var(--primary) !important;
}

div[id*='box'][css*='stock'] [class*="wash-1"] .overlay-content *:not(.visually-hidden),
div[id*='box'][desktop*='.'] [class*="wash-1"] .overlay-content *:not(.visually-hidden),
[class*="wash-1"] > .overlay-content > *:not(.visually-hidden) {
    color: var(--primary-text);
    text-shadow: var(--text-shadow-less);
    font-weight: 300;
}

[class*="wash-2"] > .overlay-content:before {
    background-color: var(--secondary) !important;
}


div[id*='box'][css*='stock'] [class*="wash-2"] .overlay-content *:not(.visually-hidden),
div[id*='box'][desktop*='.'] [class*="wash-2"] .overlay-content *:not(.visually-hidden),
[class*="wash-2"] > .overlay-content > *:not(.visually-hidden) {
    color: var(--secondary-text);
    text-shadow: var(--text-shadow-less);
    font-weight: 300;
}

[class*="wash-3"] > .overlay-content:before {
    background-color: var(--neutral) !important;
}

div[id*='box'][css*='stock'] [class*="wash-3"] .overlay-content *:not(.visually-hidden),
div[id*='box'][desktop*='.'] [class*="wash-3"] .overlay-content *:not(.visually-hidden),
[class*="wash-3"] > .overlay-content > *:not(.visually-hidden) {
    color: var(--neutral-text) !important;
    text-shadow: var(--text-shadow-less);
    text-shadow: none !important;
    font-weight: 600 !important;
}


[class*="wash-4"] > .overlay-content:before {
    background-color: var(--dark) !important;
}

div[id*='box'][css*='stock'] [class*="wash-4"] .overlay-content *:not(.visually-hidden),
div[id*='box'][desktop*='.'] [class*="wash-4"] .overlay-content *:not(.visually-hidden),
[class*="wash-4"] > .overlay-content > *:not(.visually-hidden) {
    color: var(--dark-text) !important;
    text-shadow: var(--text-shadow-less);
    font-weight: 300;
}

[class*="wash-5"] > .overlay-content:before {
    background-color: var(--accent-1) !important;
}

div[id*='box'][css*='stock'] [class*="wash-5"] .overlay-content *:not(.visually-hidden),
div[id*='box'][desktop*='.'] [class*="wash-5"] .overlay-content *:not(.visually-hidden),
[class*="wash-5"] > .overlay-content > *:not(.visually-hidden) {
    color: var(--accent-1-text) !important;
    text-shadow: var(--text-shadow-less);
    text-shadow: none !important;
    font-weight: 600 !important;
}

[class*="wash-6"] > .overlay-content:before {
    background-color: var(--accent-2) !important;
}

div[id*='box'][css*='stock'] [class*="wash-6"] .overlay-content *:not(.visually-hidden),
div[id*='box'][desktop*='.'] [class*="wash-6"] .overlay-content *:not(.visually-hidden),
[class*="wash-6"] > .overlay-content > *:not(.visually-hidden) {
    color: var(--accent-2-text) !important;
    text-shadow: var(--text-shadow-less);
    text-shadow: none !important;
    font-weight: 600 !important;
}


[class*="wash-black"] > .overlay-content:before {
    background-color: var(--my-black) !important;
}

div[id*='box'][css*='stock'] [class*="wash-black"] .overlay-content *:not(.visually-hidden),
div[id*='box'][desktop*='.'] [class*="wash-black"] .overlay-content *:not(.visually-hidden),
[class*="wash-black"] > .overlay-content > *:not(.visually-hidden) {
    color: var(--my-black-text) !important;
    text-shadow: var(--text-shadow-less);
    font-weight: 300;
}

[class*="wash-gray"] > .overlay-content:before {
    background-color: var(--my-gray) !important;
}

div[id*='box'][css*='stock'] [class*="wash-gray"] .overlay-content *:not(.visually-hidden),
div[id*='box'][desktop*='.'] [class*="wash-gray"] .overlay-content *:not(.visually-hidden),
[class*="wash-gray"] > .overlay-content > *:not(.visually-hidden) {
    color: var(--my-gray-text) !important;
    text-shadow: var(--text-shadow-less);
    text-shadow: none !important;
    font-weight: 600 !important;
}

[class*="wash-white"] > .overlay-content:before {
    background-color: var(--my-white) !important;
}

div[id*='box'][css*='stock'] [class*="wash-white"] .overlay-content *:not(.visually-hidden),
div[id*='box'][desktop*='.'] [class*="wash-white"] .overlay-content *:not(.visually-hidden),
[class*="wash-white"] > .overlay-content > *:not(.visually-hidden) {
    color: var(--my-white-text) !important;
    text-shadow: var(--text-shadow-less);
    text-shadow: none !important;
    font-weight: 600 !important;
}

/*------------------------------------------
    SITE WIDE CONTENT
*/

/*-- primary --*/
#site-wide-content-header.background-1 .sitewide-links .block-item p:hover {
    background-color: var(--primary-hover);
    color: var(--primary-hover-text);
}

.dark-mode #site-wide-content-header.background-1 .sitewide-links .block-item p:hover {
    background-color: var(--primary-dark-hover);
    color: var(--primary-dark-hover-text);
}

/*-- secondary --*/
#site-wide-content-header.background-2 .sitewide-links .block-item p:hover {
    background-color: var(--secondary-hover);
    color: var(--secondary-hover-text);
}

.dark-mode #site-wide-content-header.background-2 .sitewide-links .block-item p:hover {
    background-color: var(--secondary-dark-hover);
    color: var(--secondary-dark-hover-text);
}

/*-- neutral --*/
#site-wide-content-header.background-3 .sitewide-links .block-item p:hover {
    background-color: var(--neutral-hover);
    color: var(--neutral-hover-text);
}

.dark-mode #site-wide-content-header.background-3 .sitewide-links .block-item p:hover {
    background-color: var(--neutral-dark-hover);
    color: var(--neutral-dark-hover-text);
}

/*-- dark --*/
#site-wide-content-header.background-4 .sitewide-links .block-item p:hover {
    background-color: var(--dark-hover);
    color: var(--dark-hover-text);
}

.dark-mode #site-wide-content-header.background-4 .sitewide-links .block-item p:hover {
    background-color: var(--dark-dark-hover);
    color: var(--dark-dark-hover-text);
}

/*-- accent-1 --*/
#site-wide-content-header.background-5 .sitewide-links .block-item p:hover {
    background-color: var(--accent-1-hover);
    color: var(--accent-1-hover-text);
}

.dark-mode #site-wide-content-header.background-5 .sitewide-links .block-item p:hover {
    background-color: var(--accent-1-dark-hover);
    color: var(--accent-1-dark-hover-text);
}

/*-- accent-2 --*/
#site-wide-content-header.background-6 .sitewide-links .block-item p:hover {
    background-color: var(--accent-2-hover);
    color: var(--accent-2-hover-text);
}

.dark-mode #site-wide-content-header.background-6 .sitewide-links .block-item p:hover {
    background-color: var(--accent-2-dark-hover);
    color: var(--accent-2-dark-hover-text);
}
/*-- black --*/
#site-wide-content-header.background-black .sitewide-links .block-item p:hover {
    background-color: var(--my-black-hover);
    color: var(--my-black-hover-text);
}

.dark-mode #site-wide-content-header.background-black .sitewide-links .block-item p:hover {
    background-color: var(--my-black-dark-hover);
    color: var(--my-black-dark-hover-text);
}

/*-- gray --*/
#site-wide-content-header.background-gray .sitewide-links .block-item p:hover {
    background-color: var(--my-gray-hover);
    color: var(--my-gray-hover-text);
}

.dark-mode #site-wide-content-header.background-gray .sitewide-links .block-item p:hover {
    background-color: var(--my-gray-dark-hover);
    color: var(--my-gray-dark-hover-text);
}

/*-- white --*/
#site-wide-content-header.background-white .sitewide-links .block-item p:hover {
    background-color: var(--my-white-hover);
    color: var(--my-white-hover-text);
}

.dark-mode #site-wide-content-header.background-white .sitewide-links .block-item p:hover {
    background-color: var(--my-white-dark-hover);
    color: var(--my-white-dark-hover-text);
}

/*-- background adjustments --*/
#site-wide-content-header .sitewide-links .block-item p:hover * {
    background-color: inherit;
    color: inherit;
}


/*--------------------------------------------
    HEADLINES
*/
main h1.headline, main h2.headline, main h3.headline, main h4.headline, main h5.headline {
    border-bottom: double 3px var(--accent-1);
}

p.headline, a.headline {
    position: relative;
    font-weight: bold;
    font-size: var(--font-size-headline);
}

.headline {
    padding-bottom: 14px;
}

/*-------------------------------------------
    NOTICES
*/
.notice-1 {
    background-color: var(--my-white) !important;
    color: var(--my-white-text) !important;
    border: solid 1px var(--dark);
    border-left: solid 5px var(--accent-1);
    align-content: center;
    padding: 8px;
    text-shadow: none !important;
}

.dark-mode .notice-1 {
    background-color: var(--my-white-dark) !important;
    color: var(--my-white-dark-text) !important;
    border-color: var(--dark-dark);
    border-left: solid 5px var(--accent-1-dark);
}

.notice-2 {
    background: linear-gradient(to bottom right,var(--secondary) 0,var(--secondary-dark) 100%) !important;
    color: var(--secondary-text) !important;
    border-left: solid 11px var(--secondary-hover);
    align-content: center;
    padding: 1em;
    line-height: 1em;
    border-radius: var(--border-radius-chamfer);
}

.dark-mode .notice-2 {
    background: linear-gradient(to bottom right,var(--secondary-dark) 0,var(--secondary-dark-hover) 100%) !important;
    color: var(--secondary-dark-text) !important;
    border-color: var(--secondary-hover);
}

/*------------------------------------------------------------
     DEFAULT / ALERT / WARNING / SUCCESS
    */
[class*='notice']:not([class*="notice-1"]):not([class*='notice-2']) {
    border-style: solid;
    border-width: 2px;
    border-left-width: 5px;
    padding: var(--notice-padding-clamp);
    border-radius: var(--border-radius-small);
    position: relative;
    padding-left: 60px;
    font-weight: 700;
    min-width: 75%;
    max-width: 96%;
    margin-left: 2%;
}

[class*='notice']:before {
    position: absolute;
    left: 14px;
    top: 0px;
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: 1.5em;
    padding: 5px;
    border-radius: var(--border-radius-small);
    place-content: center;
    display: grid;
    height: 100%;
    /*box-shadow:1px 1px 1px rgba(0,0,0,.3);*/
}

.notice-default {
    background-color: var(--light-gray) !important;
    color: var(--light-gray-text) !important;
    border-color: var(--border-gray) !important;
}

    .notice-default:before {
        content: "\f024";
        color: var(--border-coal) !important;
    }

.dark-mode .notice-default {
    background-color: var(--dark-gray) !important;
    color: var(--dark-gray-text) !important;
    border-color: var(--border-dark-gray) !important;
}

    .dark-mode .notice-default:before {
        content: "\f024";
        color: var(--dark-gray-text) !important;
    }

.notice-alert {
    background-color: var(--alert-red) !important;
    color: var(--alert-red-text) !important;
    border-color: var(--alert-red-border) !important;
}

    .notice-alert:before {
        content: "\e204";
        color: var(--alert-red-icon) !important;
    }

.dark-mode .notice-alert {
    background-color: var(--alert-red-dark) !important;
    color: var(--alert-red-dark-text) !important;
    border-color: var(--alert-red-dark-border) !important;
}

    .dark-mode .notice-alert:before {
        content: "\e204";
        color: var(--alert-red-dark-text) !important;
    }

.notice-warning {
    background-color: var(--warning) !important;
    color: var(--warning-text) !important;
    border-color: var(--warning-border) !important;
}

    .notice-warning:before {
        content: "\f071";
        color: var(--warning-icon) !important;
    }

.dark-mode .notice-warning {
    background-color: var(--warning-dark) !important;
    color: var(--warning-dark-text) !important;
    border-color: var(--warning-dark-border) !important;
}

    .dark-mode .notice-warning:before {
        content: "\f071";
        color: var(--warning-dark-text) !important;
    }

.notice-information {
    background-color: var(--information) !important;
    color: var(--information-text) !important;
    border-color: var(--information-border) !important;
}

    .notice-information:before {
        content: "\f4a5";
        color: var(--information-icon) !important;
    }

.dark-mode .notice-information {
    background-color: var(--information-dark) !important;
    color: var(--information-dark-text) !important;
    border-color: var(--information-dark-border) !important;
}

    .dark-mode .notice-information:before {
        content: "\f4a5";
        color: var(--information-dark-text) !important;
    }

.notice-success {
    background-color: var(--success) !important;
    color: var(--success-text) !important;
    border-color: var(--success-border) !important;
}

    .notice-success:before {
        content: "\f058";
        color: var(--success-icon) !important;
    }


.dark-mode .notice-success {
    background-color: var(--success-dark) !important;
    color: var(--success-dark-text) !important;
    border-color: var(--success-dark-border) !important;
}
/*-------------------------------------------
    CARDS    
*/

[class*="card"]:not([class*="fa-"]), .card,
[id*="box"][class*="background-"] .grid-item.card {
    background-color: var(--my-white);
    color: var(--my-white-text);
    border: solid;
    border-width: 1px;
    border-color: var(--warm-gray);
    display: grid;
    padding: var(--card-padding);
}

    [class*="card"]:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    [id*="box"][class*="background-"] .card *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--my-white);
        color: var(--my-white-text);
    }

    [class*="card"]:not([class*="fa-"]) [class*="fa-"] {
        background-color: inherit;
        color: inherit;
    }

.dark-mode [class*="card"]:not([class*="fa-"]), .card,
.dark-mode [id*="box"][class*="background-"] .grid-item.card {
    background-color: var(--slate);
    color: var(--slate-text);
    border-color: var(--my-gray);
}

    .dark-mode [class*="card"]:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--slate);
        color: var(--slate-text);
    }

.dark-mode a[data-region-style='button'] i[class*='ou-icon-'], .dark-mode [class*="card"] a[data-region-style='button'] i[class*='ou-icon-'] {
    background-color: var(--cms-edit--primary-green-500) !important;
    color: var(--cms-edit--primary-white) !important;
}

.card-clamp {
    margin-top: var(--card-margin);
    margin-bottom: var(--card-margin);
}

.card-1:not([class*="fa-"]),
[id*="box"][class*="background"] .card-1.grid-item {
    border-color: var(--primary-hover);
    background-color: var(--primary);
    color: var(--primary-text);
}

    .card-1:not([class*="fa-"]) *, .card-1:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    [id*="box"][class*="background"] .card-1:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--primary);
        color: var(--primary-text);
    }

.dark-mode .card-1:not([class*="fa-"]),
.dark-mode [id*="box"][class*="background"] .card-1.grid-item {
    border-color: var(--primary-dark-hover);
    background-color: var(--primary-dark);
    color: var(--primary-dark-text);
}

    .dark-mode .card-1:not([class*="fa-"]) *, .dark-mode .card-1:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    .dark-mode [id*="box"][class*="background"] .card-1:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--primary-dark);
        color: var(--primary-dark-text);
    }


.card-2:not([class*="fa-"]),
[id*="box"][class*="background"] .card-2.grid-item {
    border-color: var(--secondary-hover);
    background-color: var(--secondary);
    color: var(--secondary-text);
}

    .card-2:not([class*="fa-"]) *, .card-2:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    [id*="box"][class*="background"] .card-2 *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--secondary);
        color: var(--secondary-text);
    }

.dark-mode .card-2:not([class*="fa-"]),
.dark-mode [id*="box"][class*="background"] .card-2.grid-item {
    border-color: var(--secondary-dark-hover);
    background-color: var(--secondary-dark);
    color: var(--secondary-dark-text);
}

    .dark-mode .card-2:not([class*="fa-"]) *, .dark-mode .card-2:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    .dark-mode [id*="box"][class*="background"] .card-2 *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--secondary-dark);
        color: var(--secondary-dark-text);
    }


.card-3:not([class*="fa-"]),
[id*="box"][class*="background"] .card-3.grid-item {
    border-color: var(--neutral-hover);
    background-color: var(--neutral);
    color: var(--neutral-text);
}

    .card-3:not([class*="fa-"]) *, .card-3:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    [id*="box"][class*="background"] .card-3 *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--neutral);
        color: var(--neutral-text);
    }

.dark-mode .card-3:not([class*="fa-"]),
.dark-mode [id*="box"][class*="background"] .card-3.grid-item {
    border-color: var(--neutral-dark-hover);
    background-color: var(--neutral-dark);
    color: var(--neutral-dark-text)
}

    .dark-mode .card-3:not([class*="fa-"]) *, .dark-mode .card-3:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    .dark-mode [id*="box"][class*="background"] .card-3 *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--neutral-dark);
        color: var(--neutral-dark-text);
    }


.card-4:not([class*="fa-"]),
[id*="box"][class*="background"] .card-4.grid-item {
    border-color: var(--dark-hover);
    background-color: var(--dark);
    color: var(--dark-text);
}

    .card-4:not([class*="fa-"]) *, .card-4:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    [id*="box"][class*="background"] .card-4 *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--dark);
        color: var(--dark-text);
    }

.dark-mode .card-4:not([class*="fa-"]),
.dark-mode [id*="box"][class*="background"] .card-4.grid-item {
    border-color: var(--dark-dark-hover);
    background-color: var(--dark-dark);
    color: var(--dark-dark-text);
}

    .dark-mode .card-4:not([class*="fa-"]) *, .dark-mode .card-4:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    .dark-mode [id*="box"][class*="background"] .card-4 *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--dark-dark);
        color: var(--dark-dark-text);
    }


.card-5:not([class*="fa-"]),
[id*="box"][class*="background"] .card-5.grid-item {
    border-color: var(--accent-1-hover);
    background-color: var(--accent-1);
    color: var(--accent-1-text);
}

    .card-5:not([class*="fa-"]) *, .card-5:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    [id*="box"][class*="background"] .card-5 *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--accent-1);
        color: var(--accent-1-text);
    }

.dark-mode .card-5:not([class*="fa-"]),
.dark-mode [id*="box"][class*="background"] .card-5.grid-item {
    border-color: var(--accent-1-dark-hover);
    background-color: var(--accent-1-dark);
    color: var(--accent-1-dark-text);
}

    .dark-mode .card-5:not([class*="fa-"]) *, .dark-mode .card-5:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    .dark-mode [id*="box"][class*="background"] .card-5 *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--accent-1-dark);
        color: var(--accent-1-dark-text);
    }


.card-6:not([class*="fa-"]),
[id*="box"][class*="background"] .card-6.grid-item {
    border-color: var(--accent-2-hover);
    background-color: var(--accent-2);
    color: var(--accent-2-text);
}

    .card-6:not([class*="fa-"]) *, .card-6:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    [id*="box"][class*="background"] .card-6 *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--accent-2);
        color: var(--accent-2-text);
    }

.dark-mode .card-6:not([class*="fa-"]),
.dark-mode [id*="box"][class*="background"] .card-6.grid-item {
    border-color: var(--accent-2-dark-hover);
    background-color: var(--accent-2-dark);
    color: var(--accent-2-dark-text);
}

    .dark-mode .card-6:not([class*="fa-"]) *, .dark-mode .card-6:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    .dark-mode [id*="box"][class*="background"] .card-6 *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--accent-2-dark);
        color: var(--accent-2-dark-text);
    }


.card-black:not([class*="fa-"]),
[id*="box"][class*="background"] .card-black.grid-item {
    border-color: var(--my-black-hover);
    background-color: var(--my-black);
    color: var(--my-black-text);
}

    .card-black:not([class*="fa-"]) *, .card-black:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    [id*="box"][class*="background"] .card-black *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--my-black);
        color: var(--my-black-text);
    }

.dark-mode .card-black:not([class*="fa-"]),
.dark-mode [id*="box"][class*="background"] .card-black.grid-item {
    border-color: var(--my-black-dark-hover);
    background-color: var(--my-black-dark);
    color: var(--my-black-dark-text);
}

    .dark-mode .card-black:not([class*="fa-"]) *, .dark-mode .card-black:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    .dark-mode [id*="box"][class*="background"] .card-black *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--my-black-dark);
        color: var(--my-black-dark-text);
    }


.card-gray:not([class*="fa-"]),
[id*="box"][class*="background"] .card-gray.grid-item {
    border-color: var(--my-gray-hover);
    background-color: var(--my-gray);
    color: var(--my-gray-text);
}

    .card-gray:not([class*="fa-"]) *, .card-gray:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    [id*="box"][class*="background"] .card-gray *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--my-gray);
        color: var(--my-gray-text);
    }

.dark-mode .card-gray:not([class*="fa-"]),
.dark-mode [id*="box"][class*="background"] .card-gray.grid-item {
    border-color: var(--my-gray-dark-hover);
    background-color: var(--my-gray-dark);
    color: var(--my-gray-dark-text);
}

    .dark-mode .card-gray:not([class*="fa-"]) *, .dark-mode .card-gray:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    .dark-mode [id*="box"][class*="background"] .card-gray *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--my-gray-dark);
        color: var(--my-gray-dark-text);
    }


.card-white:not([class*="fa-"]),
[id*="box"][class*="background"] .card-white.grid-item {
    border-color: var(--border-gray);
    background-color: var(--my-white);
    color: var(--my-white-text);
}

    .card-white:not([class*="fa-"]) *, .card-white:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    [id*="box"][class*="background"] .card-white *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--my-white);
        color: var(--my-white-text);
    }

.dark-mode .card-white:not([class*="fa-"]),
.dark-mode [id*="box"][class*="background"] .card-white.grid-item {
    border-color: var(--gray-dark);
    background-color: var(--my-white-dark);
    color: var(--my-white-dark-text);
}

    .dark-mode .card-white:not([class*="fa-"]) *, .dark-mode .card-white:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block),
    .dark-mode [id*="box"][class*="background"] .card-white *:not([class*="button"]):not(i):not(.standout-block) {
        background-color: var(--my-white-dark);
        color: var(--my-white-dark-text);
    }


/*--------------------------------------------
    ASIDE / SIDEBAR
*/
aside {
    max-width: 300px;
    min-width: 200px;
    float: right;
}

.mobile aside, .small-content aside, .aside-solo aside, .MaxGutter.small-gutter aside {
    max-width: unset;
    float: none;
}

aside {
    border: solid 1px var(--border-gray);
    padding: 0px;
    margin: .85rem;
    font-size: var(--font-size-reduced);
}

main aside > * {
    padding: 8px 1.5rem;
}

aside > *:first-child {
    border-bottom: solid 1px var(--border-gray);
    text-align: center;
    position: relative;
    margin-top: 4px;
}

    aside > *:first-child:before {
        content: " ";
        position: absolute;
        background-color: var(--orange);
        left: 30%;
        width: 40%;
        bottom: -3px;
        height: 6px;
    }

aside ul {
    width: 90%;
    margin: auto;
    display: block;
}

    aside ul li::marker {
        color: var(--orange);
    }
/* primary */
.aside-1 aside {
    background-color: var(--primary);
    color: var(--primary-text);
    border-color: var(--primary-hover);
}

    .aside-1 aside > *:first-child {
        border-bottom: solid 1px var(--primary-hover-text);
    }

        .aside-1 aside > *:first-child:before {
            background-color: var(--accent-1);
        }

    .aside-1 aside ul li::marker {
        color: var(--accent-1);
    }

.dark-mode .aside-1 aside {
    background-color: var(--primary-dark);
    color: var(--primary-dark-text);
    border-color: var(--primary-dark-hover);
}

    .dark-mode .aside-1 aside > *:first-child {
        border-bottom: solid 1px var(--primary-hover);
    }

        .dark-mode .aside-1 aside > *:first-child:before {
            background-color: var(--accent-1-dark);
        }

    .dark-mode .aside-1 aside ul li::marker {
        color: var(--accent-1-dark);
    }
/* secondary */
.aside-2 aside {
    background-color: var(--secondary);
    color: var(--secondary-text);
    border-color: var(--secondary-hover);
}

    .aside-2 aside > *:first-child {
        border-bottom: solid 1px var(--secondary-hover);
    }

        .aside-2 aside > *:first-child:before {
            background-color: var(--accent-1);
        }

    .aside-2 aside ul li::marker {
        color: var(--accent-1);
    }

.dark-mode .aside-2 aside {
    background-color: var(--secondary-dark);
    color: var(--secondary-dark-text);
    border-color: var(--secondary-dark-hover);
}

    .dark-mode .aside-2 aside > *:first-child {
        border-bottom: solid 1px var(--secondary-hover);
    }

        .dark-mode .aside-2 aside > *:first-child:before {
            background-color: var(--secondary-hover);
        }

    .dark-mode .aside-2 aside ul li::marker {
        color: var(--secondary-hover);
    }
/* neutral */
.aside-3 aside {
    background-color: var(--neutral);
    color: var(--neutral-text);
    border-color: var(--neutral-hover);
}

    .aside-3 aside > *:first-child {
        border-bottom: solid 1px var(--neutral-dark-hover);
    }

        .aside-3 aside > *:first-child:before {
            background-color: var(--neutral-dark-hover);
        }

    .aside-3 aside ul li::marker {
        color: var(--neutral-dark-hover);
    }

.dark-mode .aside-3 aside {
    background-color: var(--neutral-dark);
    color: var(--neutral-dark-text);
    border-color: var(--neutral-dark-hover);
}

    .dark-mode .aside-3 aside > *:first-child {
        border-bottom: solid 1px var(--neutral-dark-hover);
    }

        .dark-mode .aside-3 aside > *:first-child:before {
            background-color: var(--neutral-dark-hover);
        }

    .dark-mode .aside-3 aside ul li::marker {
        color: var(--neutral-dark-hover);
    }
/* dark */
.aside-4 aside {
    background-color: var(--dark);
    color: var(--dark-text);
    border-color: var(--dark-hover);
}

    .aside-4 aside > *:first-child {
        border-bottom: solid 1px var(--dark-dark-hover);
    }

        .aside-4 aside > *:first-child:before {
            background-color: var(--accent-1);
        }

    .aside-4 aside ul li::marker {
        color: var(--accent-1);
    }

.dark-mode .aside-4 aside {
    background-color: var(--dark-dark);
    color: var(--dark-dark-text);
    border-color: var(--dark-dark-hover);
}

    .dark-mode .aside-4 aside > *:first-child {
        border-bottom: solid 1px var(--dark-dark-hover);
    }

        .dark-mode .aside-4 aside > *:first-child:before {
            background-color: var(--accent-1-dark);
        }

    .dark-mode .aside-4 aside ul li::marker {
        color: var(--accent-1-dark);
    }
/* accent-1 */
.aside-5 aside {
    background-color: var(--accent-1);
    color: var(--accent-1-text);
    border-color: var(--accent-1-hover);
}

    .aside-5 aside > *:first-child {
        border-bottom: solid 1px var(--accent-1-dark-hover);
    }

        .aside-5 aside > *:first-child:before {
            background-color: var(--accent-1-dark-hover);
        }

    .aside-5 aside ul li::marker {
        color: var(--accent-1-dark-hover);
    }

.dark-mode .aside-5 aside {
    background-color: var(--accent-1-dark);
    color: var(--accent-1-dark-text);
    border-color: var(--accent-1-dark-hover);
}

    .dark-mode .aside-5 aside > *:first-child {
        border-bottom: solid 1px var(--accent-1-dark-hover);
    }

        .dark-mode .aside-5 aside > *:first-child:before {
            background-color: var(--accent-1-dark-hover);
        }

    .dark-mode .aside-5 aside ul li::marker {
        color: var(--accent-1-dark-hover);
    }
/* accent-2 */
.aside-6 aside {
    background-color: var(--accent-2);
    color: var(--accent-2-text);
    border-color: var(--accent-2-hover);
}

    .aside-6 aside > *:first-child {
        border-bottom: solid 1px var(--accent-2-dark-hover);
    }

        .aside-6 aside > *:first-child:before {
            background-color: var(--accent-2-dark-hover);
        }

    .aside-6 aside ul li::marker {
        color: var(--accent-2-dark-hover);
    }

.dark-mode .aside-6 aside {
    background-color: var(--accent-2-dark);
    color: var(--accent-2-dark-text);
    border-color: var(--accent-2-dark-hover);
}

    .dark-mode .aside-6 aside > *:first-child {
        border-bottom: solid 1px var(--accent-2-dark-hover);
    }

        .dark-mode .aside-6 aside > *:first-child:before {
            background-color: var(--accent-2-dark-hover);
        }

    .dark-mode .aside-6 aside ul li::marker {
        color: var(--accent-2-dark-hover);
    }
/* black */
.aside-black aside {
    background-color: var(--my-black);
    color: var(--my-black-text);
    border-color: var(--my-black-hover);
}

    .aside-black aside > *:first-child {
        border-bottom: solid 1px var(--my-black-hover);
    }

        .aside-black aside > *:first-child:before {
            background-color: var(--my-white-hover);
        }

    .aside-black aside ul li::marker {
        color: var(--my-black-text);
    }

.dark-mode .aside-black aside {
    background-color: var(--my-black-dark);
    color: var(--my-black-dark-text);
    border-color: var(--my-black-dark-hover);
}

    .dark-mode .aside-black aside > *:first-child {
        border-bottom: solid 1px var(--my-black-dark-hover);
    }

        .dark-mode .aside-black aside > *:first-child:before {
            background-color: var(--my-black-hover);
        }

    .dark-mode .aside-black aside ul li::marker {
        color: var(--my-black-hover);
    }
/* gray */
.aside-gray aside {
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    border-color: var(--my-gray-hover);
}

    .aside-gray aside > *:first-child {
        border-bottom: solid 1px var(--my-gray-dark-hover);
    }

        .aside-gray aside > *:first-child:before {
            background-color: var(--accent-1);
        }

    .aside-gray aside ul li::marker {
        color: var(--accent-1);
    }

.dark-mode .aside-gray aside {
    background-color: var(--my-gray-dark-hover);
    color: var(--my-gray-dark-hover-text);
    border-color: var(--my-gray-dark-hover);
}

    .dark-mode .aside-gray aside > *:first-child {
        border-bottom: solid 1px var(--my-white-dark-hover);
    }

        .dark-mode .aside-gray aside > *:first-child:before {
            background-color: var(--my-white-dark);
        }

    .dark-mode .aside-gray aside ul li::marker {
        color: var(--my-white-dark-hover);
    }
/* white */
.aside-white aside {
    background-color: var(--my-white);
    color: var(--my-white-text);
    border-color: var(--my-white-hover);
}

    .aside-white aside > *:first-child {
        border-bottom: solid 1px var(--my-white-dark-hover);
    }

        .aside-white aside > *:first-child:before {
            background-color: var(--accent-1);
        }

    .aside-white aside ul li::marker {
        color: var(--accent-1);
    }

.dark-mode .aside-white aside {
    background-color: var(--my-white-dark);
    color: var(--my-white-dark-text);
    border-color: var(--my-white-dark-hover);
}

    .dark-mode .aside-white aside > *:first-child {
        border-bottom: solid 1px var(--border-gray);
    }

        .dark-mode .aside-white aside > *:first-child:before {
            background-color: var(--accent-1-dark);
        }

    .dark-mode .aside-white aside ul li::marker {
        color: var(--accent-1-dark);
    }
/*---- ASIDE GRADIENTS ---*/
/* primary */
.aside-grad-1 aside {
    background: linear-gradient(45deg, var(--primary-hover) -25%, var(--primary) 120%);
    color: var(--primary-text);
    border-color: var(--primary-hover);
}

    .aside-grad-1 aside > *:first-child {
        border-bottom: solid 1px var(--primary-hover-text);
    }

        .aside-grad-1 aside > *:first-child:before {
            background-color: var(--accent-1);
        }

    .aside-grad-1 aside ul li::marker {
        color: var(--accent-1);
    }

.dark-mode .aside-grad-1 aside {
    background: linear-gradient(45deg, var(--primary-dark-hover) 0%, var(--primary-dark) 100%);
    color: var(--primary-text);
    border-color: var(--primary-dark-hover);
}

    .dark-mode .aside-grad-1 aside > *:first-child {
        border-bottom: solid 1px var(--primary-hover-text);
    }

        .dark-mode .aside-grad-1 aside > *:first-child:before {
            background-color: var(--accent-1-dark);
        }

    .dark-mode .aside-grad-1 aside ul li::marker {
        color: var(--accent-1-dark);
    }
/* secondary */
.aside-grad-2 aside {
    background: linear-gradient(45deg, var(--secondary-hover) -25%, var(--secondary) 120%);
    color: var(--secondary-text);
    border-color: var(--secondary-hover);
}

    .aside-grad-2 aside > *:first-child {
        border-bottom: solid 1px var(--secondary-hover-text);
    }

        .aside-grad-2 aside > *:first-child:before {
            background-color: var(--accent-1);
        }

    .aside-grad-2 aside ul li::marker {
        color: var(--accent-1);
    }

.dark-mode .aside-grad-2 aside {
    background: linear-gradient(45deg, var(--secondary-dark-hover) 0%, var(--secondary-dark) 100%);
    color: var(--secondary-text);
    border-color: var(--secondary-dark-hover);
}

    .dark-mode .aside-grad-2 aside > *:first-child {
        border-bottom: solid 1px var(--secondary-hover-text);
    }

        .dark-mode .aside-grad-2 aside > *:first-child:before {
            background-color: var(--accent-1-dark);
        }

    .dark-mode .aside-grad-2 aside ul li::marker {
        color: var(--accent-1-dark);
    }
/* neutral */
.aside-grad-3 aside {
    background: linear-gradient(45deg, var(--neutral-hover) -25%, var(--neutral) 120%);
    color: var(--neutral-text);
    border-color: var(--neutral-hover);
}

    .aside-grad-3 aside > *:first-child {
        border-bottom: solid 1px var(--neutral-dark);
    }

        .aside-grad-3 aside > *:first-child:before {
            background-color: var(--accent-1);
        }

    .aside-grad-3 aside ul li::marker {
        color: var(--accent-1);
    }

.dark-mode .aside-grad-3 aside {
    background: linear-gradient(45deg, var(--neutral-dark-hover) 0%, var(--neutral-dark) 100%);
    color: var(--neutral-text);
    border-color: var(--neutral-dark-hover);
}

    .dark-mode .aside-grad-3 aside > *:first-child {
        border-bottom: solid 1px var(--neutral-hover-text);
    }

        .dark-mode .aside-grad-3 aside > *:first-child:before {
            background-color: var(--accent-1-dark);
        }

    .dark-mode .aside-grad-3 aside ul li::marker {
        color: var(--accent-1-dark);
    }
/* dark */
.aside-grad-4 aside {
    background: linear-gradient(45deg, var(--dark-hover) -25%, var(--dark) 120%);
    color: var(--dark-text);
    border-color: var(--dark-hover);
}

    .aside-grad-4 aside > *:first-child {
        border-bottom: solid 1px var(--dark-hover-text);
    }

        .aside-grad-4 aside > *:first-child:before {
            background-color: var(--accent-1);
        }

    .aside-grad-4 aside ul li::marker {
        color: var(--accent-1);
    }

.dark-mode .aside-grad-4 aside {
    background: linear-gradient(45deg, var(--dark-dark-hover) 0%, var(--dark-dark) 100%);
    color: var(--dark-text);
    border-color: var(--dark-dark-hover);
}

    .dark-mode .aside-grad-4 aside > *:first-child {
        border-bottom: solid 1px var(--dark-hover-text);
    }

        .dark-mode .aside-grad-4 aside > *:first-child:before {
            background-color: var(--accent-1-dark);
        }

    .dark-mode .aside-grad-4 aside ul li::marker {
        color: var(--accent-1-dark);
    }
/* accent-1 */
.aside-grad-5 aside {
    background: linear-gradient(45deg, var(--accent-1-hover) -25%, var(--accent-1) 120%);
    color: var(--accent-1-text);
    border-color: var(--accent-1-hover);
}

    .aside-grad-5 aside > *:first-child {
        border-bottom: solid 1px var(--accent-1-hover-text);
    }

        .aside-grad-5 aside > *:first-child:before {
            background-color: var(--accent-1-hover-text);
        }

    .aside-grad-5 aside ul li::marker {
        color: var(--accent-1);
    }

.dark-mode .aside-grad-5 aside {
    background: linear-gradient(45deg, var(--accent-1-dark-hover) 0%, var(--accent-1-dark) 100%);
    color: var(--accent-1-text);
    border-color: var(--accent-1-dark-hover);
}

    .dark-mode .aside-grad-5 aside > *:first-child {
        border-bottom: solid 1px var(--accent-1-hover-text);
    }

        .dark-mode .aside-grad-5 aside > *:first-child:before {
            background-color: var(--accent-1-dark);
        }

    .dark-mode .aside-grad-5 aside ul li::marker {
        color: var(--accent-1-dark);
    }
/* accent-2 */
.aside-grad-6 aside {
    background: linear-gradient(45deg, var(--accent-2-hover) -25%, var(--accent-2) 120%);
    color: var(--accent-2-text);
    border-color: var(--accent-2-hover);
}

    .aside-grad-6 aside > *:first-child {
        border-bottom: solid 1px var(--accent-2-hover-text);
    }

        .aside-grad-6 aside > *:first-child:before {
            background-color: var(--accent-2-dark);
        }

    .aside-grad-6 aside ul li::marker {
        color: var(--accent-2-dark);
    }

.dark-mode .aside-grad-6 aside {
    background: linear-gradient(45deg, var(--accent-2-dark-hover) 0%, var(--accent-2-dark) 100%);
    color: var(--accent-2-text);
    border-color: var(--accent-2-dark-hover);
}

    .dark-mode .aside-grad-6 aside > *:first-child {
        border-bottom: solid 1px var(--accent-2-hover-text);
    }

        .dark-mode .aside-grad-6 aside > *:first-child:before {
            background-color: var(--accent-2-dark);
        }

    .dark-mode .aside-grad-6 aside ul li::marker {
        color: var(--accent-2-dark);
    }
/* my-black */
.aside-grad-black aside {
    background: linear-gradient(45deg, var(--my-black-hover) -25%, var(--my-black) 120%);
    color: var(--my-black-text);
    border-color: var(--my-black-hover);
}

    .aside-grad-black aside > *:first-child {
        border-bottom: solid 1px var(--my-black-hover-text);
    }

        .aside-grad-black aside > *:first-child:before {
            background-color: var(--accent-1);
        }

    .aside-grad-black aside ul li::marker {
        color: var(--accent-1);
    }

.dark-mode .aside-grad-black aside {
    background: linear-gradient(45deg, var(--my-black-dark-hover) 0%, var(--my-black-dark) 100%);
    color: var(--my-black-text);
    border-color: var(--my-black-dark-hover);
}

    .dark-mode .aside-grad-black aside > *:first-child {
        border-bottom: solid 1px var(--my-black-hover-text);
    }

        .dark-mode .aside-grad-black aside > *:first-child:before {
            background-color: var(--accent-1-dark);
        }

    .dark-mode .aside-grad-black aside ul li::marker {
        color: var(--accent-1-dark);
    }
/* my-gray */
.aside-grad-gray aside {
    background: linear-gradient(45deg, var(--my-gray-hover) 0%, var(--my-gray) 100%);
    color: var(--my-gray-text);
    border-color: var(--my-gray-hover);
}

    .aside-grad-gray aside > *:first-child {
        border-bottom: solid 1px var(--my-gray-hover-text);
    }

        .aside-grad-gray aside > *:first-child:before {
            background-color: var(--accent-1);
        }

    .aside-grad-gray aside ul li::marker {
        color: var(--accent-1);
    }

.dark-mode .aside-grad-gray aside {
    background: linear-gradient(45deg, var(--my-gray-hover) 0%, var(--my-gray-dark) 100%);
    color: var(--my-gray-text);
    border-color: var(--my-gray-dark-hover);
}

    .dark-mode .aside-grad-gray aside > *:first-child {
        border-bottom: solid 1px var(--my-white-dark);
    }

        .dark-mode .aside-grad-gray aside > *:first-child:before {
            background-color: var(--accent-1-dark);
        }

    .dark-mode .aside-grad-gray aside ul li::marker {
        color: var(--accent-1-dark);
    }
/* my-white */
.aside-grad-white aside {
    background: linear-gradient(45deg, var(--my-white-hover) -25%, var(--my-white) 120%);
    color: var(--my-white-text);
    border-color: var(--my-white-hover);
}

    .aside-grad-white aside > *:first-child {
        border-bottom: solid 1px var(--my-white-hover-text);
    }

        .aside-grad-white aside > *:first-child:before {
            background-color: var(--accent-1);
        }

    .aside-grad-white aside ul li::marker {
        color: var(--accent-1);
    }

.dark-mode .aside-grad-white aside {
    background: linear-gradient(45deg, var(--my-white-dark-hover) 0%, var(--my-white-dark) 100%);
    color: var(--my-white-text);
    border-color: var(--my-white-dark-hover);
}

    .dark-mode .aside-grad-white aside > *:first-child {
        border-bottom: solid 1px var(--my-white-hover-text);
    }

        .dark-mode .aside-grad-white aside > *:first-child:before {
            background-color: var(--accent-1-dark);
        }

    .dark-mode .aside-grad-white aside ul li::marker {
        color: var(--accent-1-dark);
    }
/*--------------------------------------
  BUTTONS & LINKS
*/
a {
}

    a[class*='hover-button'] {
        backdrop-filter: blur(14px);
        text-shadow: 1px 1px 1px rgba(0,0,0,.55);
    }

    a[class*='glass-button'] {
        color: var(--my-white);
        text-shadow: 1px 1px 1px rgba(0,0,0,.55);
        font-weight: 500;
        position: relative;
        background: transparent;
        backdrop-filter: blur(14px);
    }

        a[class*='glass-button']:hover {
            color: var(--my-white);
            backdrop-filter: blur(0px);
        }

.dark-mode a[class*='glass-button'] {
    color: var(--my-white-dark);
}

.standout-block a[class*='glass-button'] {
    color: var(--my-gray-text);
    text-shadow: none;
}

.dark-mode .standout-block a[class*='glass-button'] {
    color: var(--my-gray-dark-text);
    text-shadow: none;
}

a[class*="button"], main a[class*="button"], button[class*="button"] {
    padding: var(--button-padding);
    transition: all var(--transition-time-fast) ease-in-out;
    font-weight: 300;
    text-decoration: none;
    cursor: pointer;
}

/*-- BUTTON 1 --*/
.button-1, .hover-button-1, .glass-button-1 {
    border: solid 1px var(--primary);
}

a.button-1, button.button-1 {
    background-color: var(--primary) !important;
    color: var(--primary-text) !important;
    border: solid 1px var(--primary-hover);
}

.dark-mode a.button-1, .dark-mode button.button-1 {
    background-color: var(--primary-dark) !important;
    color: var(--primary-dark-text) !important;
    border: solid 1px var(--primary-hover);
}

a[class*='button-1']:hover, [id*='div'][css*="stock"] a[class*='button-1']:hover, button[class*='button-1']:hover, [id*='div'][css*="stock"] button[class*='button-1']:hover {
    background-color: var(--primary-hover) !important;
    color: var(--primary-hover-text) !important;
    border: solid 1px var(--primary);
    text-shadow: none;
}

.dark-mode a[class*="button-1"]:hover, .dark-mode [id*='div'][css*="stock"] a[class*='button-1']:hover, .dark-mode button[class*="button-1"]:hover, .dark-mode [id*='div'][css*="stock"] button[class*='button-1']:hover {
    background-color: var(--primary-dark-hover) !important;
    color: var(--primary-dark-hover-text) !important;
    border: solid 1px var(--primary-dark);
}
/*-- BUTTON 2 --*/
.button-2, .hover-button-2, .glass-button-2 {
    border: solid 1px var(--secondary);
}

a.button-2 {
    background-color: var(--secondary) !important;
    color: var(--secondary-text) !important;
    border: solid 1px var(--secondary-hover);
}

.dark-mode a.button-2 {
    background-color: var(--secondary-dark) !important;
    color: var(--secondary-dark-text) !important;
    border: solid 1px var(--secondary-hover);
}

a[class*='button-2']:hover, [id*='div'][css*="stock"] a[class*='button-2']:hover {
    background-color: var(--secondary-hover) !important;
    color: var(--secondary-hover-text) !important;
    border: solid 1px var(--secondary);
    text-shadow: none;
}

.dark-mode a[class*="button-2"]:hover, .dark-mode [id*='div'][css*="stock"] a[class*='button-2']:hover {
    background-color: var(--secondary-dark-hover) !important;
    color: var(--secondary-dark-hover-text) !important;
    border: solid 1px var(--secondary);
}
/*-- BUTTON 3 --*/
.button-3, .hover-button-3, .glass-button-3 {
    border: solid 1px var(--neutral);
}

a.button-3 {
    background-color: var(--neutral) !important;
    color: var(--neutral-text) !important;
    border: solid 1px var(--neutral-hover);
}

.dark-mode a.button-3 {
    background-color: var(--neutral-dark) !important;
    color: var(--neutral-dark-text) !important;
    border: solid 1px var(--neutral-hover);
}

a[class*='button-3']:hover, [id*='div'][css*="stock"] a[class*='button-3']:hover {
    background-color: var(--neutral-hover) !important;
    color: var(--neutral-hover-text) !important;
    border: solid 1px var(--neutral);
    text-shadow: none;
}

.dark-mode a[class*="button-3"]:hover, .dark-mode [id*='div'][css*="stock"] a[class*='button-3']:hover {
    background-color: var(--neutral-dark-hover) !important;
    color: var(--neutral-dark-hover-text) !important;
    border: solid 1px var(--neutral);
}
/*-- BUTTON 4 --*/
.button-4, .hover-button-4, .glass-button-4 {
    border: solid 1px var(--dark);
}

a.button-4 {
    background-color: var(--dark) !important;
    color: var(--dark-text) !important;
    border: solid 1px var(--dark-hover);
}

.dark-mode a.button-4 {
    background-color: var(--dark-dark) !important;
    color: var(--dark-dark-text) !important;
    border: solid 1px var(--dark-hover);
}

a[class*='button-4']:hover, [id*='div'][css*="stock"] a[class*='button-4']:hover {
    background-color: var(--dark-hover) !important;
    color: var(--dark-hover-text) !important;
    border: solid 1px var(--dark);
    text-shadow: none;
}

.dark-mode a[class*="button-4"]:hover, .dark-mode [id*='div'][css*="stock"] a[class*='button-4']:hover {
    background-color: var(--dark-dark-hover) !important;
    color: var(--dark-dark-hover-text) !important;
    border: solid 1px var(--dark);
}
/*-- BUTTON 5 --*/
.button-5, .hover-button-5, .glass-button-5 {
    border: solid 1px var(--accent-1);
}

a.button-5 {
    background-color: var(--accent-1) !important;
    color: var(--accent-1-text) !important;
    border: solid 1px var(--accent-1-hover);
}

.dark-mode a.button-5 {
    background-color: var(--accent-1-dark) !important;
    color: var(--accent-1-dark-text) !important;
    border: solid 1px var(--accent-1-hover);
}

a[class*='button-5']:hover, [id*='div'][css*="stock"] a[class*='button-5']:hover,
[id*='box'][css*="stock"] .overlay-content a[class*='button-5']:hover {
    background-color: var(--accent-1-hover) !important;
    color: var(--accent-1-hover-text) !important;
    border: solid 1px var(--accent-1);
    text-shadow: none;
}

.dark-mode a[class*="button-5"]:hover, .dark-mode [id*='div'][css*="stock"] a[class*='button-5']:hover,
.dark-mode [id*='box'][css*="stock"] .overlay-content a[class*='button-5']:hover {
    background-color: var(--accent-1-dark-hover) !important;
    color: var(--accent-1-dark-hover-text) !important;
    border: solid 1px var(--accent-1);
}
/*-- BUTTON 6 --*/
.button-6, .hover-button-6, .glass-button-6 {
    border: solid 1px var(--accent-2);
}

a.button-6 {
    background-color: var(--accent-2) !important;
    color: var(--accent-2-text) !important;
    border: solid 1px var(--accent-2-hover);
}

.dark-mode a.button-6 {
    background-color: var(--accent-2-dark) !important;
    color: var(--accent-2-dark-text) !important;
    border: solid 1px var(--accent-2-hover);
}

a[class*='button-6']:hover, [id*='div'][css*="stock"] a[class*='button-6']:hover {
    background-color: var(--accent-2-hover) !important;
    color: var(--accent-2-hover-text) !important;
    border: solid 1px var(--accent-2);
    text-shadow: none;
}

.dark-mode a[class*="button-6"]:hover, .dark-mode [id*='div'][css*="stock"] a[class*='button-6']:hover {
    background-color: var(--accent-2-dark-hover) !important;
    color: var(--accent-2-dark-hover-text) !important;
    border: solid 1px var(--accent-2);
}
/*-- BUTTON BLACK --*/
.button-black, .hover-button-black, .glass-button-black {
    border: solid 1px var(--my-black);
}

a.button-black {
    background-color: var(--my-black) !important;
    color: var(--my-black-text) !important;
    border: solid 1px var(--my-black-hover);
}

.dark-mode a.button-black {
    background-color: var(--my-black-dark) !important;
    color: var(--my-black-dark-text) !important;
    border: solid 1px var(--my-black-hover);
}

a[class*='button-black']:hover, [id*='div'][css*="stock"] a[class*='button-black']:hover {
    background-color: var(--my-black-hover) !important;
    color: var(--my-black-hover-text) !important;
    border: solid 1px var(--my-black);
    text-shadow: none;
}

.dark-mode a[class*="button-black"]:hover, .dark-mode [id*='div'][css*="stock"] a[class*='button-black']:hover {
    background-color: var(--my-black-dark-hover) !important;
    color: var(--my-black-dark-hover-text) !important;
    border: solid 1px var(--my-black);
}
/*-- BUTTON GRAY --*/
.button-gray, .hover-button-gray, .glass-button-gray {
    border: solid 1px var(--my-gray);
}

a.button-gray {
    background-color: var(--my-gray) !important;
    color: var(--my-gray-text) !important;
    border: solid 1px var(--my-gray-hover);
}

.dark-mode a.button-gray {
    background-color: var(--my-gray-dark) !important;
    color: var(--my-gray-dark-text) !important;
    border: solid 1px var(--my-gray-hover);
}

a[class*='button-gray']:hover, [id*='div'][css*="stock"] a[class*='button-gray']:hover {
    background-color: var(--my-gray-hover) !important;
    color: var(--my-gray-hover-text) !important;
    border: solid 1px var(--my-gray);
    text-shadow: none;
}

.dark-mode a[class*="button-gray"]:hover, .dark-mode [id*='div'][css*="stock"] a[class*='button-gray']:hover {
    background-color: var(--my-gray-dark-hover) !important;
    color: var(--my-gray-dark-hover-text) !important;
    border: solid 1px var(--my-gray);
}
/*-- BUTTON WHITE --*/
.button-white, .hover-button-white, .glass-button-white {
    border: solid 1px var(--my-white);
}

a.button-white {
    background-color: var(--my-white) !important;
    color: var(--my-white-text) !important;
    border: solid 1px var(--my-white-hover);
}

.dark-mode a.button-white {
    background-color: var(--my-white-dark) !important;
    color: var(--my-white-dark-text) !important;
    border: solid 1px var(--my-white-hover);
}

a[class*='button-white']:hover, [id*='div'][css*="stock"] a[class*='button-white']:hover {
    background-color: var(--my-white-hover) !important;
    color: var(--my-white-hover-text) !important;
    border: solid 1px var(--my-white);
    text-shadow: none;
}

.dark-mode a[class*="button-white"]:hover, .dark-mode [id*='div'][css*="stock"] a[class*='button-white']:hover {
    background-color: var(--my-white-dark-hover) !important;
    color: var(--my-white-dark-hover-text) !important;
    border: solid 1px var(--my-white);
}

.button-1, .button-2, .button-3, .button-4, .button-5, .button-6, .button-black, .button-white {
    border: solid 1px var(--border-gray);
}
/*---------------------------------------
     BUTTON DISABLED 
 */
button[disabled], .dark-mode button[disabled], button[disabled][class*='button'], .dark-mode button[disabled][class*='button'] {
    cursor: not-allowed;
    background-color: var(--button-disabled-background) !important;
    color: var(--button-disabled-text) !important;
    border: solid 1px var(--button-disabled-border) !important;
}
/*---------------------------------------
     BUTTON CLEAN UP 
 */
strong a {
    font-weight: bold !important;
}

a[class*='button']:not([class*='glass-button']) {
    text-shadow: none !important;
}
/*--- clean up things like <em> <strong> having the wrong color background ---*/
[class*='card-']:not([class*='fa']) a[class*='button'] *:not([class*="button"]), [class*='background-']:not([class*='fa']) a[class*='button'] *:not([class*="button"]), *:not([class*='fa']) a[class*='button'] *:not([class*="button"]) {
    background-color: inherit !important;
    color: inherit !important;
    padding: 0px 4px;
}
/*-------------------------------------------\
    TOPIC LINK
*/
[class*='topic-link'] p {
    margin: 0px;
    padding: 0px;
    width: 100%;
}

    [class*='topic-link'] p a {
        border: solid 1px var(--border-gray);
        padding: 4em .75em 2em 1.25em;
        font-weight: 900;
        text-transform: uppercase;
        display: block;
        background-color: var(--my-white);
        color: var(--primary);
        text-decoration: none;
        min-height: 20vh;
        display: grid;
        align-content: end;
    }

        [class*='topic-link'] p a:hover {
            border: solid 1px var(--primary);
            background-color: var(--dialog);
            color: var(--white);
        }

.dark-mode [class*='topic-link'] p a {
    background-color: var(--slate);
    color: var(--dark-mode-medium-blue-headers);
}

    .dark-mode [class*='topic-link'] p a:hover {
        border: solid 1px var(--my-black);
        background-color: var(--slate-dark);
        color: var(--slate-dark-text);
    }
/*-- stock or image in bg --*/
[class*='topic-link-img'] p a {
    border: solid 1px var(--primary-hover);
    background-color: var(--box-shade-background) !important;
    color: var(--primary-text);
}

    [class*='topic-link-img'] p a:hover {
        border: solid 1px var(--primary-hover);
        background-color: var(--box-shade-background-more) !important;
        color: var(--primary-text);
    }

.dark-mode [class*='topic-link-img'] p a:hover {
    border: solid 1px var(--primary-dark-hover);
    background-color: var(--box-shade-background-more) !important;
    color: var(--primary-dark-text);
}
/*-- primary --*/
[class*='topic-link-1'] p a {
    border: solid 1px var(--primary-hover);
    background-color: var(--my-white);
    color: var(--primary);
}

    [class*='topic-link-1'] p a:hover {
        border: solid 1px var(--primary-hover);
        background-color: var(--primary);
        color: var(--primary-text);
    }

.dark-mode [class*='topic-link-1'] p a {
    border: solid 1px var(--primary-hover);
    background-color: var(--primary-dark);
    color: var(--primary-dark-text);
}

    .dark-mode [class*='topic-link-1'] p a:hover {
        border: solid 1px var(--primary-dark);
        background-color: var(--primary-dark-hover);
        color: var(--primary-dark-text);
    }
/*-- secondary --*/
[class*='topic-link-2'] p a {
    border: solid 1px var(--secondary-hover);
    background-color: var(--my-white);
    color: var(--secondary);
}

    [class*='topic-link-2'] p a:hover {
        border: solid 1px var(--secondary-hover);
        background-color: var(--secondary);
        color: var(--secondary-text);
    }

.dark-mode [class*='topic-link-2'] p a {
    border: solid 1px var(--secondary-hover);
    background-color: var(--secondary-dark);
    color: var(--secondary-dark-text);
}

    .dark-mode [class*='topic-link-2'] p a:hover {
        border: solid 1px var(--secondary-dark);
        background-color: var(--secondary-dark-hover);
        color: var(--secondary-dark-text);
    }
/*-- neutral --*/
[class*='topic-link-3'] p a {
    border: solid 1px var(--neutral-hover);
    background-color: var(--neutral);
    color: var(--neutral-text);
}

    [class*='topic-link-3'] p a:hover {
        border: solid 1px var(--neutral-dark);
        background-color: var(--neutral-hover);
        color: var(--neutral-text-hover);
    }

.dark-mode [class*='topic-link-3'] p a {
    border: solid 1px var(--neutral-hover);
    background-color: var(--neutral-dark);
    color: var(--neutral-dark-text);
}

    .dark-mode [class*='topic-link-3'] p a:hover {
        border: solid 1px var(--neutral-dark);
        background-color: var(--neutral-dark-hover);
        color: var(--neutral-dark-text);
    }
/*-- dark --*/
[class*='topic-link-4'] p a {
    border: solid 1px var(--dark-hover);
    background-color: var(--my-white);
    color: var(--dark);
}

    [class*='topic-link-4'] p a:hover {
        border: solid 1px var(--dark-hover);
        background-color: var(--dark);
        color: var(--dark-text);
    }

.dark-mode [class*='topic-link-4'] p a {
    border: solid 1px var(--dark-hover);
    background-color: var(--dark-dark);
    color: var(--dark-dark-text);
}

    .dark-mode [class*='topic-link-4'] p a:hover {
        border: solid 1px var(--dark-dark);
        background-color: var(--dark-dark-hover);
        color: var(--dark-dark-text);
    }
/*-- accent 1 --*/
[class*='topic-link-5'] p a {
    border: solid 1px var(--accent-1-hover);
    background-color: var(--accent-1);
    color: var(--accent-1-text);
}

    [class*='topic-link-5'] p a:hover {
        border: solid 1px var(--accent-1-dark);
        background-color: var(--accent-1-hover);
        color: var(--accent-1-hover-text);
    }

.dark-mode [class*='topic-link-5'] p a {
    border: solid 1px var(--accent-1-hover);
    background-color: var(--accent-1-dark);
    color: var(--accent-1-dark-text);
}

    .dark-mode [class*='topic-link-5'] p a:hover {
        border: solid 1px var(--accent-1-dark);
        background-color: var(--accent-1-dark-hover);
        color: var(--accent-1-dark-text);
    }
/*-- accent-2 --*/
[class*='topic-link-6'] p a {
    border: solid 1px var(--accent-2-hover);
    background-color: var(--accent-2);
    color: var(--accent-2-text);
}

    [class*='topic-link-6'] p a:hover {
        border: solid 1px var(--accent-2-dark);
        background-color: var(--accent-2-hover);
        color: var(--accent-2-hover-text);
    }

.dark-mode [class*='topic-link-6'] p a {
    border: solid 1px var(--accent-2-hover);
    background-color: var(--accent-2-dark);
    color: var(--accent-2-dark-text);
}

    .dark-mode [class*='topic-link-6'] p a:hover {
        border: solid 1px var(--accent-2-dark);
        background-color: var(--accent-2-dark-hover);
        color: var(--accent-2-dark-text);
    }
/*-- my-black --*/
[class*='topic-link-black'] p a {
    border: solid 1px var(--my-black-hover);
    background-color: var(--my-white);
    color: var(--my-black);
}

    [class*='topic-link-black'] p a:hover {
        border: solid 1px var(--my-black-hover);
        background-color: var(--my-black);
        color: var(--my-black-text);
    }

.dark-mode [class*='topic-link-black'] p a {
    border: solid 1px var(--my-black-hover);
    background-color: var(--my-black-dark);
    color: var(--my-black-dark-text);
}

    .dark-mode [class*='topic-link-black'] p a:hover {
        border: solid 1px var(--my-black-dark);
        background-color: var(--my-black-dark-hover);
        color: var(--my-black-dark-text);
    }
/*-- my-gray --*/
[class*='topic-link-gray'] p a {
    border: solid 1px var(--my-gray-hover);
    background-color: var(--my-gray);
    color: var(--my-gray-text);
}

    [class*='topic-link-gray'] p a:hover {
        border: solid 1px var(--my-gray-dark);
        background-color: var(--my-gray-hover);
        color: var(--my-gray-hover-text);
    }

.dark-mode [class*='topic-link-gray'] p a {
    border: solid 1px var(--my-gray-hover);
    background-color: var(--my-gray-dark);
    color: var(--my-gray-dark-text);
}

    .dark-mode [class*='topic-link-gray'] p a:hover {
        border: solid 1px var(--my-gray-dark);
        background-color: var(--my-gray-dark-hover);
        color: var(--my-gray-dark-text);
    }
/*-- my-white --*/
[class*='topic-link-white'] p a {
    border: solid 1px var(--my-white-hover);
    background-color: var(--my-white);
    color: var(--my-white-text);
}

    [class*='topic-link-white'] p a:hover {
        border: solid 1px var(--my-white-dark);
        background-color: var(--my-white-hover);
        color: var(--my-white-hover-text);
    }

.dark-mode [class*='topic-link-white'] p a {
    border: solid 1px var(--my-white-hover);
    background-color: var(--my-white-dark);
    color: var(--my-white-dark-text);
}

    .dark-mode [class*='topic-link-white'] p a:hover {
        border: solid 1px var(--my-white-dark);
        background-color: var(--my-white-dark-hover);
        color: var(--my-white-dark-text);
    }
/*-----------------------------------------
    HORIZONTRAL RULE
*/
hr {
    border: none;
    border-top: 2px dotted var(--border-gray);
    margin: 1.25rem 0;
}
/*--------------------------------------
  TABLES
*/
main table {
    border: solid 1px var(--gray);
    border-collapse: collapse;
    margin-bottom: 1rem;
    width: 100%;
}

    main table caption {
        color: var(--my-black);
        padding: var(--caption-padding);
        font-size: var(--font-size-table-caption);
        font-weight: bold;
    }

.dark-mode main table caption {
    color: var(--default-link-dark);
}

main table th {
    font-weight: 600;
    font-size: var(--font-size);
    padding: .85em;
    margin: 0px;
    text-align: left;
    border: solid 1px var(--border-gray);
}

main table td {
    margin: 0px;
    padding: 1em;
    border: solid 1px var(--gray);
}

.mobile main table tr th, .mobile main table tr td {
    display: grid;
    grid-template-columns: 1fr;
    text-align: left;
    padding-bottom: 1em;
}

table th {
    background-color: var(--light-gray);
    color: var(--light-gray-text);
    font-size: var(--font-size-main);
}

.dark-mode table th {
    background-color: var(--warm-gray);
    color: var(--warm-gray-text);
    font-size: var(--font-size-main);
}

.table-min table, .table-min table th, .table-min table td {
    border: 0;
    background-color: unset;
    color: inherit;
    border-bottom: solid 1px var(--border-gray);
}

.table-alt table tr:nth-child(2n+1) td {
    background-color: var(--light-gray);
    color: var(--light-gray-text);
}

.dark-mode .table-alt table tr:nth-child(2n+1) td {
    background-color: var(--warm-gray);
    color: var(--warm-gray-text);
}

.table-filter {
    display: grid;
    grid-template-columns: 1fr;
}

    .table-filter label {
        font-size: var(--font-size-reduced);
    }

    .table-filter input {
        font-size: var(--font-size);
        border-radius: var(--border-radius-small);
        border: solid 1px var(--border-gray);
        padding: 8px;
    }

.button-sort {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    background-color: inherit;
    color: inherit;
    border: solid 1px var(--border-gray);
}
/*-- primary --*/
.table-color-1 table th {
    background-color: var(--primary);
    color: var(--primary-text);
}

.dark-mode .table-color-1 table th {
    background-color: var(--primary-dark);
    color: var(--primary-dark-text);
}
/*-- secondary --*/
.table-color-2 table th {
    background-color: var(--secondary);
    color: var(--secondary-text);
}

.dark-mode .table-color-2 table th {
    background-color: var(--secondary-dark);
    color: var(--secondary-dark-text);
}
/*-- neutral --*/
.table-color-3 table th {
    background-color: var(--neutral);
    color: var(--neutral-text);
}

.dark-mode .table-color-3 table th {
    background-color: var(--neutral-dark);
    color: var(--neutral-dark-text);
}
/*-- dark --*/
.table-color-4 table th {
    background-color: var(--dark);
    color: var(--dark-text);
}

.dark-mode .table-color-4 table th {
    background-color: var(--dark-dark);
    color: var(--dark-dark-text);
}
/*-- accent-1 --*/
.table-color-5 table th {
    background-color: var(--accent-1);
    color: var(--accent-1-text);
}

.dark-mode .table-color-5 table th {
    background-color: var(--accent-1-dark);
    color: var(--accent-1-dark-text);
}
/*-- accent-2 --*/
.table-color-6 table th {
    background-color: var(--accent-2);
    color: var(--accent-2-text);
}

.dark-mode .table-color-6 table th {
    background-color: var(--accent-2-dark);
    color: var(--accent-2-dark-text);
}
/*-- my-black --*/
.table-color-black table th {
    background-color: var(--my-black);
    color: var(--my-black-text);
}

.dark-mode .table-color-black table th {
    background-color: var(--my-black-dark);
    color: var(--my-black-dark-text);
}
/*-- my-gray --*/
.table-color-gray table th {
    background-color: var(--my-gray);
    color: var(--my-gray-text);
}

.dark-mode .table-color-gray table th {
    background-color: var(--my-gray-dark);
    color: var(--my-gray-dark-text);
}
/*-- my-white --*/
.table-color-white table th {
    background-color: var(--my-white);
    color: var(--my-white-text);
}

.dark-mode .table-color-white table th {
    background-color: var(--my-white-dark);
    color: var(--my-white-dark-text);
}
/*--------------------------------------
    ACCORDIONS AND TABBED CONTENT
*/
details {
    border-width: 1px;
    border-style: solid;
}

summary {
    color: var(--primary-text);
}

details a {
    color: var(--secondary);
}

main [class*="accordion"] summary, main [class*="accordion"] details[open] summary {
    background-color: var(--light-gray);
    color: var(--light-gray-text);
}

.dark-mode main [class*="accordion"] summary {
    background-color: var(--dark-dialog);
    color: var(--dark-dialog-text);
}

.dark-mode main [class*="accordion"] details[open] summary {
    background-color: var(--warm-gray);
    color: var(--warm-gray-text);
}
/* primary */
.accordion-1 details {
    border-color: var(--primary-hover);
}

main [class*="accordion"][class*="accordion-1"] summary {
    background-color: var(--primary);
    color: var(--primary-text);
}

main [class*="accordion"][class*="accordion-1"] details[open] summary {
    background-color: var(--primary-hover);
    color: var(--primary-hover-text);
}

.dark-mode .accordion-1 details {
    border-color: var(--primary-dark-hover);
}

.dark-mode main [class*="accordion"][class*="accordion-1"] summary, .dark-mode main [class*="accordion"][class*="accordion-1"] summary * {
    background-color: var(--primary-dark);
    color: var(--primary-dark-text);
}

.dark-mode main [class*="accordion"][class*="accordion-1"] details[open] summary, .dark-mode main [class*="accordion"][class*="accordion-1"] details[open] summary * {
    background-color: var(--primary-dark-hover);
    color: var(--primary-dark-hover-text);
}
/* secondary */
.accordion-2 details {
    border-color: var(--secondary-hover);
}

main [class*="accordion"][class*="accordion-2"] summary {
    background-color: var(--secondary);
    color: var(--secondary-text);
}

main [class*="accordion"][class*="accordion-2"] details[open] summary {
    background-color: var(--secondary-hover);
    color: var(--secondary-hover-text);
}

.dark-mode .accordion-2 details {
    border-color: var(--secondary-dark-hover);
}

.dark-mode main [class*="accordion"][class*="accordion-2"] summary {
    background-color: var(--secondary-dark);
    color: var(--secondary-dark-text);
}

.dark-mode main [class*="accordion"][class*="accordion-2"] details[open] summary {
    background-color: var(--secondary-dark-hover);
    color: var(--secondary-dark-hover-text);
}
/* neutral */
.accordion-3 details {
    border-color: var(--neutral-hover);
}

main [class*="accordion"][class*="accordion-3"] summary {
    background-color: var(--neutral);
    color: var(--neutral-text);
}

main [class*="accordion"][class*="accordion-3"] details[open] summary {
    background-color: var(--neutral-hover);
    color: var(--neutral-hover-text);
}

.dark-mode .accordion-3 details {
    border-color: var(--neutral-dark-hover);
}

.dark-mode main [class*="accordion"][class*="accordion-3"] summary {
    background-color: var(--neutral-dark);
    color: var(--neutral-dark-text);
}

.dark-mode main [class*="accordion"][class*="accordion-3"] details[open] summary {
    background-color: var(--neutral-dark-hover);
    color: var(--neutral-dark-hover-text);
}
/* dark */
.accordion-4 details {
    border-color: var(--dark-hover);
}

main [class*="accordion"][class*="accordion-4"] summary {
    background-color: var(--dark);
    color: var(--dark-text);
}

main [class*="accordion"][class*="accordion-4"] details[open] summary {
    background-color: var(--dark-hover);
    color: var(--dark-hover-text);
}

.dark-mode .accordion-4 details {
    border-color: var(--dark-dark-hover);
}

.dark-mode main [class*="accordion"][class*="accordion-4"] summary {
    background-color: var(--dark-dark);
    color: var(--dark-dark-text);
}

.dark-mode main [class*="accordion"][class*="accordion-4"] details[open] summary {
    background-color: var(--dark-dark-hover);
    color: var(--dark-dark-hover-text);
}
/* accent-1 */
.accordion-5 details {
    border-color: var(--accent-1-hover);
}

main [class*="accordion"][class*="accordion-5"] summary {
    background-color: var(--accent-1);
    color: var(--accent-1-text);
}

main [class*="accordion"][class*="accordion-5"] details[open] summary {
    background-color: var(--accent-1-hover);
    color: var(--accent-1-hover-text);
}

.dark-mode .accordion-5 details {
    border-color: var(--accent-1-dark-hover);
}

.dark-mode main [class*="accordion"][class*="accordion-5"] summary {
    background-color: var(--accent-1-dark);
    color: var(--accent-1-dark-text);
}

.dark-mode main [class*="accordion"][class*="accordion-5"] details[open] summary {
    background-color: var(--accent-1-dark-hover);
    color: var(--accent-1-dark-hover-text);
}
/* accent-2 */
.accordion-6 details {
    border-color: var(--accent-2-hover);
}

main [class*="accordion"][class*="accordion-6"] summary {
    background-color: var(--accent-2);
    color: var(--accent-2-text);
}

main [class*="accordion"][class*="accordion-6"] details[open] summary {
    background-color: var(--accent-2-hover);
    color: var(--accent-2-hover-text);
}

.dark-mode .accordion-6 details {
    border-color: var(--accent-2-dark-hover);
}

.dark-mode main [class*="accordion"][class*="accordion-6"] summary {
    background-color: var(--accent-2-dark);
    color: var(--accent-2-dark-text);
}

.dark-mode main [class*="accordion"][class*="accordion-6"] details[open] summary {
    background-color: var(--accent-2-dark-hover);
    color: var(--accent-2-dark-hover-text);
}
/* black */
.accordion-black details {
    border-color: var(--my-black-hover);
}

main [class*="accordion"][class*="accordion-black"] summary {
    background-color: var(--my-black);
    color: var(--my-black-text);
}

main [class*="accordion"][class*="accordion-black"] details[open] summary {
    background-color: var(--my-black-hover);
    color: var(--my-black-hover-text);
}

.dark-mode .accordion-black details {
    border-color: var(--my-black-dark-hover);
}

.dark-mode main [class*="accordion"][class*="accordion-black"] summary {
    background-color: var(--my-black-dark);
    color: var(--my-black-dark-text);
}

.dark-mode main [class*="accordion"][class*="accordion-black"] details[open] summary {
    background-color: var(--my-black-dark-hover);
    color: var(--my-black-dark-hover-text);
}
/* gray */
.accordion-gray details {
    border-color: var(--my-gray-hover);
}

main [class*="accordion"][class*="accordion-gray"] summary {
    background-color: var(--my-gray);
    color: var(--my-gray-text);
}

main [class*="accordion"][class*="accordion-gray"] details[open] summary {
    background-color: var(--my-gray-hover);
    color: var(--my-gray-hover-text);
}

.dark-mode .accordion-gray details {
    border-color: var(--my-gray-dark-hover);
}

.dark-mode main [class*="accordion"][class*="accordion-gray"] summary {
    background-color: var(--my-gray-dark);
    color: var(--my-gray-dark-text);
}

.dark-mode main [class*="accordion"][class*="accordion-gray"] details[open] summary {
    background-color: var(--my-gray-dark-hover);
    color: var(--my-gray-dark-hover-text);
}
/* white */
.accordion-white details {
    border-color: var(--my-white-hover);
}

main [class*="accordion"][class*="accordion-white"] summary {
    background-color: var(--my-white);
    color: var(--my-white-text);
}

main [class*="accordion"][class*="accordion-white"] details[open] summary {
    background-color: var(--my-white-hover);
    color: var(--my-white-hover-text);
}

.dark-mode .accordion-white details {
    border-color: var(--my-white-dark-hover);
}

.dark-mode main [class*="accordion"][class*="accordion-white"] summary {
    background-color: var(--my-white-dark);
    color: var(--my-white-dark-text);
}

.dark-mode main [class*="accordion"][class*="accordion-white"] details[open] summary {
    background-color: var(--my-white-dark-hover);
    color: var(--my-white-dark-hover-text);
}
/*--- TABBED CONTENT ---*/
[class*='tab-content'] .details-section details:not([open]) {
    border: 0px;
    min-height: unset;
}

[class*='tab-content'] .details-section details[open] {
    background-color: var(--my-white);
    color: var(--my-white-text);
    width: calc(100% - 0px);
    min-height: 300px;
}

[class*='tab-content'].small-content .details-section details[open] {
    padding: 0px;
}

[class*='tab-content'].vertical .details-section details[open] {
    height: 100%;
    padding-top: 20px;
}

[class*="tab-content"].small-content .details-section details summary, .mobile .tab-content .details-section details summary {
    display: grid;
    background-color: var(--light-gray);
    color: var(--light-gray-text);
}

.dark-mode [class*="tab-content"].small-content .details-section details summary, .dark-mode.mobile .tab-content .details-section details summary {
    display: grid;
    background-color: var(--dark-dialog);
    color: var(--dark-dialog-text);
}

[class*='tab-content']:not([class*='vertical']) .details-section details[open] {
    border: solid 1px var(--border-gray);
    border-bottom: solid 2px var(--border-gray);
    padding-top: 15px;
}

.small-content[class*='tab-content']:not([class*='vertical']) .details-section details[open],
.mobile [class*='tab-content']:not([class*='vertical']) .details-section details[open] {
    padding-top: 0px;
}

[class*='tab-content'].vertical .details-section details[open] {
    border-left: 0px;
    border-top: solid 1px var(--border-gray);
    border-right: solid 1px var(--border-gray);
    border-bottom: solid 2px var(--border-gray);
    margin: 0px;
}

.dark-mode [class*='tab-content'] .details-section details[open] {
    background-color: var(--slate);
    color: var(--slate-text);
    width: 100%;
}

.dark-mode [class*='tab-content']:not([class*='vertical']) .details-section details[open] {
    border-top: 0;
    border-left: solid 1px var(--border-light-gray);
    border-right: solid 1px var(--border-light-gray);
    border-bottom: solid 2px var(--border-light-gray);
}

.dark-mode [class*='tab-content'].vertical .details-section details[open] {
    border-left: 0;
    border-top: solid 1px var(--border-light-gray);
    border-right: solid 1px var(--border-light-gray);
    border-bottom: solid 2px var(--border-light-gray);
}

.mobile [class*='tab-content']:not([class*='vertical']) .details-section details, .mobile [class*='tab-content'].vertical .details-section details {
    border-left: solid 1px var(--border-gray);
    border-top: solid 1px var(--border-gray);
    border: solid 1px var(--border-gray);
}

.mobile.dark-mode [class*='tab-content']:not([class*='vertical']) .details-section details, .mobile.dark-mode [class*='tab-content'].vertical .details-section details {
    border-left: solid 1px var(--border-light-gray);
    border-top: solid 1px var(--border-light-gray);
    border: solid 1px var(--border-light-gray);
}

[class*='tab-content'] .details-section details[open] p, [class*='tab-content'] .details-section details[open] ul, [class*='tab-content'] .details-section details[open] ol, .dark-mode [class*='tab-content'] .details-section details[open] p {
    padding: var(--tab-content-padding-clamp);
}

[class*='tab-content'] .details-section details[open] ul, [class*='tab-content'] .details-section details[open] ol {
    padding-left: 70px;
}

    [class*='tab-content'] .details-section details[open] ul li, [class*='tab-content'] .details-section details[open] ol li {
        line-height: var(--line-height);
        font-size: var(--font-size-unit);
    }

[class*='tab-content'] .details-section details[open] p[class*='notice'], .dark-mode [class*='tab-content'] .details-section details[open] p[class*='notice'] {
    padding-left: 60px;
}
/* primary */
.tab-content-1 .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-1.vertical .tabbed-content-buttons-section button.active, .tab-content-1 .details-section details summary, .tab-content-1.small-content .details-section details summary {
    background-color: var(--primary);
    color: var(--primary-text);
    border-color: var(--primary);
}

.tab-content-1 .tabbed-content-buttons-section, [class*='tab-content'].tab-content-1.vertical .tabbed-content-buttons-section, [class*='tab-content'].tab-content-1.vertical .tabbed-content-buttons-section button.active, [class*='tab-content-1'] .details-section details[open], [class*='tab-content-1'][class*='vertical'] .details-section details[open], [class*='tab-content-1'] .details-section {
    border-color: var(--primary);
}

.dark-mode .tab-content-1 .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content'].tab-content-1.vertical .tabbed-content-buttons-section button.active, .dark-mode .tab-content-1 .details-section details summary, .dark-mode .tab-content-1.small-content .details-section details summary {
    background-color: var(--primary-dark);
    color: var(--primary-dark-text);
    border-color: var(--primary-dark);
}

.dark-mode .tab-content-1 .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-1.vertical .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-1.vertical .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content-1'] .details-section details[open], .dark-mode [class*='tab-content-1'][class*='vertical'] .details-section details[open], .dark-mode [class*='tab-content-1'] .details-section {
    border-color: var(--primary-dark);
}
/* secondary */
.tab-content-2 .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-2.vertical .tabbed-content-buttons-section button.active, .tab-content-2 .details-section details summary, .tab-content-2.small-content .details-section details summary {
    background-color: var(--secondary);
    color: var(--secondary-text);
    border-color: var(--secondary);
}

.tab-content-2 .tabbed-content-buttons-section, [class*='tab-content-2'].vertical .tabbed-content-buttons-section, [class*='tab-content-2'].vertical .tabbed-content-buttons-section button.active, [class*='tab-content-2'] .details-section details[open], [class*='tab-content-2'][class*='vertical'] .details-section details[open], [class*='tab-content-2'] .details-section {
    border-color: var(--secondary);
}

.dark-mode .tab-content-2 .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content-2'].vertical .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content-2'] .details-section details summary, .dark-mode [class*='tab-content-2'].small-content .details-section details summary {
    background-color: var(--secondary-dark);
    color: var(--secondary-dark-text);
    border-color: var(--secondary-dark);
}

.dark-mode .tab-content-2 .tabbed-content-buttons-section, .dark-mode [class*='tab-content-2'].vertical .tabbed-content-buttons-section, .dark-mode [class*='tab-content-2'].vertical .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content-2'] .details-section details[open], .dark-mode [class*='tab-content-2'][class*='vertical'] .details-section details[open], .dark-mode [class*='tab-content-2'] .details-section {
    border-color: var(--secondary-dark);
}
/* neutral */
.tab-content-3 .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-3.vertical .tabbed-content-buttons-section button.active, .tab-content-3 .details-section details summary, .tab-content-3.small-content .details-section details summary {
    background-color: var(--neutral);
    color: var(--neutral-text);
    border-color: var(--neutral);
}

.tab-content-3 .tabbed-content-buttons-section, [class*='tab-content'].tab-content-3.vertical .tabbed-content-buttons-section, [class*='tab-content'].tab-content-3.vertical .tabbed-content-buttons-section button.active, [class*='tab-content-3'] .details-section details[open], [class*='tab-content-3'][class*='vertical'] .details-section details[open], [class*='tab-content-3'] .details-section {
    border-color: var(--neutral);
}

.dark-mode .tab-content-3 .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content'].tab-content-3.vertical .tabbed-content-buttons-section button.active, .dark-mode .tab-content-3 .details-section details summary, .dark-mode .tab-content-3.small-content .details-section details summary {
    background-color: var(--neutral-dark);
    color: var(--neutral-dark-text);
    border-color: var(--neutral-dark);
}

.dark-mode .tab-content-3 .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-3.vertical .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-3.vertical .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content-3'] .details-section details[open], .dark-mode [class*='tab-content-3'][class*='vertical'] .details-section details[open], .dark-mode [class*='tab-content-3'] .details-section {
    border-color: var(--neutral-dark);
}
/* dark */
.tab-content-4 .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-4.vertical .tabbed-content-buttons-section button.active, .tab-content-4 .details-section details summary, .tab-content-4.small-content .details-section details summary {
    background-color: var(--dark);
    color: var(--dark-text);
    border-color: var(--dark);
}

.tab-content-4 .tabbed-content-buttons-section, [class*='tab-content'].tab-content-4.vertical .tabbed-content-buttons-section, [class*='tab-content'].tab-content-4.vertical .tabbed-content-buttons-section button.active, [class*='tab-content-4'] .details-section details[open], [class*='tab-content-4'][class*='vertical'] .details-section details[open], [class*='tab-content-4'] .details-section {
    border-color: var(--dark);
}

.dark-mode .tab-content-4 .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content'].tab-content-4.vertical .tabbed-content-buttons-section button.active, .dark-mode .tab-content-4 .details-section details summary, .dark-mode .tab-content-4.small-content .details-section details summary {
    background-color: var(--dark-dark);
    color: var(--dark-dark-text);
    border-color: var(--dark-dark);
}

.dark-mode .tab-content-4 .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-4.vertical .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-4.vertical .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content-4'] .details-section details[open], .dark-mode [class*='tab-content-4'][class*='vertical'] .details-section details[open], .dark-mode [class*='tab-content-4'] .details-section {
    border-color: var(--dark-dark);
}
/* accent-1 */
.tab-content-5 .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-5.vertical .tabbed-content-buttons-section button.active, .tab-content-5 .details-section details summary, .tab-content-5.small-content .details-section details summary {
    background-color: var(--accent-1);
    color: var(--accent-1-text);
    border-color: var(--accent-1);
}

.tab-content-5 .tabbed-content-buttons-section, [class*='tab-content'].tab-content-5.vertical .tabbed-content-buttons-section, [class*='tab-content'].tab-content-5.vertical .tabbed-content-buttons-section button.active, [class*='tab-content-5'] .details-section details[open], [class*='tab-content-5'][class*='vertical'] .details-section details[open], [class*='tab-content-5'] .details-section {
    border-color: var(--accent-1);
}

.dark-mode .tab-content-5 .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content'].tab-content-5.vertical .tabbed-content-buttons-section button.active, .dark-mode .tab-content-5 .details-section details summary, .dark-mode .tab-content-5.small-content .details-section details summary {
    background-color: var(--accent-1-dark);
    color: var(--accent-1-dark-text);
    border-color: var(--accent-1-dark);
}

.dark-mode .tab-content-5 .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-5.vertical .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-5.vertical .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content-5'] .details-section details[open], .dark-mode [class*='tab-content-5'][class*='vertical'] .details-section details[open], .dark-mode [class*='tab-content-5'] .details-section {
    border-color: var(--accent-1-dark);
}
/* accent-2 */
.tab-content-6 .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-6.vertical .tabbed-content-buttons-section button.active, .tab-content-6 .details-section details summary, .tab-content-6.small-content .details-section details summary {
    background-color: var(--accent-2);
    color: var(--accent-2-text);
    border-color: var(--accent-2);
}

.tab-content-6 .tabbed-content-buttons-section, [class*='tab-content'].tab-content-6.vertical .tabbed-content-buttons-section, [class*='tab-content'].tab-content-6.vertical .tabbed-content-buttons-section button.active, [class*='tab-content-6'] .details-section details[open], [class*='tab-content-6'][class*='vertical'] .details-section details[open], [class*='tab-content-6'] .details-section {
    border-color: var(--accent-2);
}

.dark-mode .tab-content-6 .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content'].tab-content-6.vertical .tabbed-content-buttons-section button.active, .dark-mode .tab-content-6 .details-section details summary, .dark-mode .tab-content-6.small-content .details-section details summary {
    background-color: var(--accent-2-dark);
    color: var(--accent-2-dark-text);
    border-color: var(--accent-2-dark);
}

.dark-mode .tab-content-6 .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-6.vertical .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-6.vertical .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content-6'] .details-section details[open], .dark-mode [class*='tab-content-6'][class*='vertical'] .details-section details[open], .dark-mode [class*='tab-content-6'] .details-section {
    border-color: var(--accent-2-dark);
}
/* my-black */
.tab-content-black .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-black.vertical .tabbed-content-buttons-section button.active, .tab-content-black .details-section details summary, .tab-content-black.small-content .details-section details summary {
    background-color: var(--my-black);
    color: var(--my-black-text);
    border-color: var(--my-black);
}

.tab-content-black .tabbed-content-buttons-section, [class*='tab-content'].tab-content-black.vertical .tabbed-content-buttons-section, [class*='tab-content'].tab-content-black.vertical .tabbed-content-buttons-section button.active, [class*='tab-content-black'] .details-section details[open], [class*='tab-content-black'][class*='vertical'] .details-section details[open], [class*='tab-content-black'] .details-section {
    border-color: var(--my-black);
}

.dark-mode .tab-content-black .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content'].tab-content-black.vertical .tabbed-content-buttons-section button.active, .dark-mode .tab-content-black .details-section details summary, .dark-mode .tab-content-black.small-content .details-section details summary {
    background-color: var(--my-black-dark);
    color: var(--my-black-dark-text);
    border-color: var(--my-black-dark);
}

.dark-mode .tab-content-black .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-black.vertical .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-black.vertical .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content-black'] .details-section details[open], .dark-mode [class*='tab-content-black'][class*='vertical'] .details-section details[open], .dark-mode [class*='tab-content-black'] .details-section {
    border-color: var(--my-black-dark);
}
/* my-gray */
.tab-content-gray .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-gray.vertical .tabbed-content-buttons-section button.active, .tab-content-gray .details-section details summary, .tab-content-gray.small-content .details-section details summary {
    background-color: var(--my-gray-hover);
    color: var(--my-gray-text);
    border-color: var(--my-gray-dark);
}

.tab-content-gray .tabbed-content-buttons-section, [class*='tab-content'].tab-content-gray.vertical .tabbed-content-buttons-section, [class*='tab-content'].tab-content-gray.vertical .tabbed-content-buttons-section button.active, [class*='tab-content-gray'] .details-section details[open], [class*='tab-content-gray'][class*='vertical'] .details-section details[open], [class*='tab-content-gray'] .details-section {
    border-color: var(--my-gray-dark);
}

.dark-mode .tab-content-gray .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content'].tab-content-gray.vertical .tabbed-content-buttons-section button.active, .dark-mode .tab-content-gray .details-section details summary, .dark-mode .tab-content-gray.small-content .details-section details summary {
    background-color: var(--my-gray-dark);
    color: var(--my-gray-dark-text);
    border-color: var(--my-gray-dark);
}

.dark-mode .tab-content-gray .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-gray.vertical .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-gray.vertical .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content-gray'] .details-section details[open], .dark-mode [class*='tab-content-gray'][class*='vertical'] .details-section details[open], .dark-mode [class*='tab-content-gray'] .details-section {
    border-color: var(--my-gray-dark);
}
/* my-white */
.tab-content-white .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-white.vertical .tabbed-content-buttons-section button.active, .tab-content-white .details-section details summary, .tab-content-white.small-content .details-section details summary {
    background-color: var(--my-white);
    color: var(--my-white-text);
    border-color: var(--my-gray-hover);
}

.tab-content-white .tabbed-content-buttons-section, [class*='tab-content'].tab-content-white.vertical .tabbed-content-buttons-section, [class*='tab-content'].tab-content-white.vertical .tabbed-content-buttons-section button.active, [class*='tab-content-white'] .details-section details[open], [class*='tab-content-white'][class*='vertical'] .details-section details[open], [class*='tab-content-white'] .details-section {
    border-color: var(--my-white);
    border-color: var(--my-white-dark-hover);
}

.dark-mode .tab-content-white .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content'].tab-content-white.vertical .tabbed-content-buttons-section button.active, .dark-mode .tab-content-white .details-section details summary, .dark-mode .tab-content-white.small-content .details-section details summary {
    background-color: var(--my-white-dark);
    color: var(--my-white-dark-text);
    border-color: var(--my-white-dark);
}

.dark-mode .tab-content-white .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-white.vertical .tabbed-content-buttons-section, .dark-mode [class*='tab-content'].tab-content-white.vertical .tabbed-content-buttons-section button.active, .dark-mode [class*='tab-content-white'] .details-section details[open], .dark-mode [class*='tab-content-white'][class*='vertical'] .details-section details[open], .dark-mode [class*='tab-content-white'] .details-section {
    border-color: var(--my-white-dark-hover);
}
/*---------------------------------------------
    BLOCKQUOTES
*/
.blockquote-1 blockquote {
    border-top: 3px solid var(--primary);
    border-bottom: 3px solid var(--primary);
}

.blockquote-1[class*='pull-image'] blockquote img:first-child {
    border-color: var(--primary);
}

dark-mode .blockquote-1 blockquote {
    border-top: 3px solid var(--primary-dark);
    border-bottom: 3px solid var(--primary-dark);
}

.dark-mode .blockquote-1[class*='pull-image'] blockquote img:first-child {
    border-color: var(--primary-dark);
}

.blockquote-2 blockquote {
    border-top: 3px solid var(--secondary);
    border-bottom: 3px solid var(--secondary);
}

.blockquote-2[class*='pull-image'] blockquote img:first-child {
    border-color: var(--secondary);
}

.dark-mode .blockquote-2 blockquote {
    border-top: 3px solid var(--secondary-dark);
    border-bottom: 3px solid var(--secondary-dark);
}

.dark-mode .blockquote-2[class*='pull-image'] blockquote img:first-child {
    border-color: var(--secondary-dark);
}

.blockquote-3 blockquote {
    border-top: 3px solid var(--neutral);
    border-bottom: 3px solid var(--neutral);
}

.blockquote-3[class*='pull-image'] blockquote img:first-child {
    border-color: var(--neutral);
}

.dark-mode .blockquote-3 blockquote {
    border-top: 3px solid var(--neutral-dark);
    border-bottom: 3px solid var(--neutral-dark);
}

.dark-mode .blockquote-3[class*='pull-image'] blockquote img:first-child {
    border-color: var(--neutral-dark);
}

.blockquote-4 blockquote {
    border-top: 3px solid var(--dark);
    border-bottom: 3px solid var(--dark);
}

.blockquote-4[class*='pull-image'] blockquote img:first-child {
    border-color: var(--dark);
}

.dark-mode .blockquote-4 blockquote {
    border-top: 3px solid var(--dark-dark);
    border-bottom: 3px solid var(--dark-dark);
}

.dark-mode .blockquote-4[class*='pull-image'] blockquote img:first-child {
    border-color: var(--dark-dark);
}

.blockquote-5 blockquote {
    border-top: 3px solid var(--accent-1);
    border-bottom: 3px solid var(--accent-1);
}

.blockquote-5[class*='pull-image'] blockquote img:first-child {
    border-color: var(--accent-1);
}

.dark-mode .blockquote-5 blockquote {
    border-top: 3px solid var(--accent-1-dark);
    border-bottom: 3px solid var(--accent-1-dark);
}

.dark-mode .blockquote-5[class*='pull-image'] blockquote img:first-child {
    border-color: var(--accent-1-dark);
}

.blockquote-6 blockquote {
    border-top: 3px solid var(--accent-2);
    border-bottom: 3px solid var(--accent-2);
}

.blockquote-6[class*='pull-image'] blockquote img:first-child {
    border-color: var(--accent-2);
}

.dark-mode .blockquote-6 blockquote {
    border-top: 3px solid var(--accent-2-dark);
    border-bottom: 3px solid var(--accent-2-dark);
}

.dark-mode .blockquote-6[class*='pull-image'] blockquote img:first-child {
    border-color: var(--accent-2-dark);
}

.blockquote-black blockquote {
    border-top: 3px solid var(--my-black);
    border-bottom: 3px solid var(--my-black);
}

.blockquote-black[class*='pull-image'] blockquote img:first-child {
    border-color: var(--my-black);
}

.dark-mode .blockquote-black blockquote {
    border-top: 3px solid var(--my-black-dark);
    border-bottom: 3px solid var(--my-black-dark);
}

.dark-mode .blockquote-black[class*='pull-image'] blockquote img:first-child {
    border-color: var(--my-black-dark);
}

.blockquote-gray blockquote {
    border-top: 3px solid var(--my-gray);
    border-bottom: 3px solid var(--my-gray);
}

.blockquote-gray[class*='pull-image'] blockquote img:first-child {
    border-color: var(--my-gray);
}

.dark-mode .blockquote-gray blockquote {
    border-top: 3px solid var(--my-gray-dark);
    border-bottom: 3px solid var(--my-gray-dark);
}

.dark-mode .blockquote-gray[class*='pull-image'] blockquote img:first-child {
    border-color: var(--my-gray-dark);
}

.blockquote-white blockquote {
    border-top: 3px solid var(--my-white);
    border-bottom: 3px solid var(--my-white);
}

.blockquote-white[class*='pull-image'] blockquote img:first-child {
    border-color: var(--my-white);
}

.dark-mode .blockquote-white blockquote {
    border-top: 3px solid var(--my-white-dark);
    border-bottom: 3px solid var(--my-white-dark);
}

.dark-mode .blockquote-white[class*='pull-image'] blockquote img:first-child {
    border-color: var(--my-white-dark);
}
/*-- blockquote plate --*/
[class*='blockquote-plate'] blockquote {
    border: solid 3px var(--border-gray);
    border-radius: var(--border-radius-chamfer);
    box-shadow: var(--box-shadow-down);
}

    [class*='blockquote-plate'] blockquote p {
        padding-left: 5%;
        padding-right: 5%;
    }

.blockquote-plate-1 blockquote {
    border-color: var(--primary-hover);
    background-color: var(--primary);
    color: var(--primary-text);
}

.dark-mode .blockquote-plate-1 blockquote {
    border-color: var(--primary-dark-hover);
    background-color: var(--primary-dark);
    color: var(--primary-dark-text);
}

.blockquote-plate-2 blockquote {
    border-color: var(--secondary-hover);
    background-color: var(--secondary);
    color: var(--secondary-text);
}

.dark-mode .blockquote-plate-2 blockquote {
    border-color: var(--secondary-dark-hover);
    background-color: var(--secondary-dark);
    color: var(--secondary-dark-text);
}

.blockquote-plate-3 blockquote {
    border-color: var(--neutral-hover);
    background-color: var(--neutral);
    color: var(--neutral-text);
}

.dark-mode .blockquote-plate-3 blockquote {
    border-color: var(--neutral-dark-hover);
    background-color: var(--neutral-dark);
    color: var(--neutral-dark-text);
}

.blockquote-plate-4 blockquote {
    border-color: var(--dark-hover);
    background-color: var(--dark);
    color: var(--dark-text);
}

.dark-mode .blockquote-plate-4 blockquote {
    border-color: var(--dark-dark-hover);
    background-color: var(--dark-dark);
    color: var(--dark-dark-text);
}

.blockquote-plate-5 blockquote {
    border-color: var(--accent-1-hover);
    background-color: var(--accent-1);
    color: var(--accent-1-text);
}

.dark-mode .blockquote-plate-5 blockquote {
    border-color: var(--accent-1-dark-hover);
    background-color: var(--accent-1-dark);
    color: var(--accent-1-dark-text);
}

.blockquote-plate-6 blockquote {
    border-color: var(--accent-2-hover);
    background-color: var(--accent-2);
    color: var(--accent-2-text);
}

.dark-mode .blockquote-plate-6 blockquote {
    border-color: var(--accent-2-dark-hover);
    background-color: var(--accent-2-dark);
    color: var(--accent-2-dark-text);
}

.blockquote-plate-black blockquote {
    border-color: var(--my-black-hover);
    background-color: var(--my-black);
    color: var(--my-black-text);
}

.dark-mode .blockquote-plate-black blockquote {
    border-color: var(--my-black-dark-hover);
    background-color: var(--my-black-dark);
    color: var(--my-black-dark-text);
}

.blockquote-plate-gray blockquote {
    border-color: var(--my-gray-hover);
    background-color: var(--my-gray);
    color: var(--my-gray-text);
}

.dark-mode .blockquote-plate-gray blockquote {
    border-color: var(--my-gray-dark-hover);
    background-color: var(--my-gray-dark);
    color: var(--my-gray-dark-text);
}

.blockquote-plate-white blockquote {
    border-color: var(--my-white-hover);
    background-color: var(--my-white);
    color: var(--my-white-text);
}

.dark-mode .blockquote-plate-white blockquote {
    border-color: var(--my-white-dark-hover);
    background-color: var(--my-white-dark);
    color: var(--my-white-dark-text);
}
/*-- block quote skins --*/
.corner-quotes blockquote, .top-shout blockquote {
    padding: 1.85rem;
    quotes: "\201C""\201D""\2018""\2019";
}

    .corner-quotes blockquote:before {
        content: "";
        position: absolute;
        border-left: solid 3px var(--border-gray);
        bottom: 0;
        left: 0;
        width: 1px;
        height: 45%;
    }

    .corner-quotes blockquote:after {
        content: "";
        position: absolute;
        border-right: solid 3px var(--border-gray);
        top: 0;
        right: 0;
        width: 1px;
        height: 45%;
    }

    .corner-quotes blockquote .start-quote:before {
        content: "\201C";
        font-family: Georgia, "Times New Roman", Times, serif;
        color: var(--border-gray);
        position: absolute;
        top: 65px;
        left: -30px;
        height: 5px;
        width: 5px;
        font-size: 8em;
        display: grid;
        align-content: start;
        justify-content: start;
    }

    .corner-quotes blockquote .end-quote:before {
        content: "\201D";
        font-family: Georgia, "Times New Roman", Times, serif;
        position: absolute;
        bottom: -8px;
        right: -30px;
        height: 5px;
        width: 5px;
        font-size: 8em;
        display: grid;
        align-content: end;
        justify-content: end;
        color: var(--border-gray);
    }

.top-shout blockquote {
    border: solid 3px var(--border-gray);
    border-top: 0px;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

    .top-shout blockquote:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 40%;
        border-top: solid 3px var(--border-gray);
    }

    .top-shout blockquote:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 40%;
        border-top: solid 3px var(--border-gray);
    }

    .top-shout blockquote .chat-quote:before {
        content: "\f075";
        font-family: "font awesome 6 pro";
        position: absolute;
        top: 0;
        right: 50%;
        height: 5px;
        width: 5px;
        font-size: 3em;
        display: grid;
        align-content: center;
        justify-content: center;
        color: var(--border-gray);
    }

.curve-chat blockquote {
    border: solid 3px var(--border-gray);
    border-radius: var(--border-radius);
    border-bottom: 0px;
    padding: 25px;
}

    .curve-chat blockquote:before {
        content: " ";
        position: absolute;
        bottom: -3px;
        width: 40px;
        height: 25px;
        border-bottom: solid 3px var(--border-gray);
        left: -2px;
        border-bottom-left-radius: var(--border-radius);
    }

    .curve-chat blockquote:after {
        content: " ";
        position: absolute;
        bottom: -3px;
        width: 65%;
        height: 25px;
        border-bottom: solid 3px var(--border-gray);
        right: -2px;
        border-bottom-right-radius: var(--border-radius);
    }

    .curve-chat blockquote .chat-curve:after {
        content: " ";
        position: absolute;
        border-top-right-radius: var(--border-radius);
        border-top: solid 3px var(--border-gray);
        border-right: solid 3px var(--border-gray);
        height: 30px;
        width: 50px;
        bottom: -30px;
        left: 29px;
        z-index: 5;
    }

    .curve-chat blockquote *:last-child {
        position: absolute;
        bottom: -35px;
        left: 35%;
    }

.line-bar blockquote {
    border: 0px;
    padding: 15px;
    text-align: center;
}

    .line-bar blockquote:before, .line-bar blockquote:after {
        content: " ";
        position: absolute;
        top: 0px;
        left: 25%;
        width: 50%;
        border-width: 1px;
        border-style: solid;
        border-color: var(--border-gray);
    }

    .line-bar blockquote:after {
        top: unset;
        bottom: 0px;
        border-width: 1px;
    }

    .line-bar blockquote *:last-child {
        padding-top: 18px;
        padding-bottom: 8px;
        position: relative;
        text-align: center;
    }

        .line-bar blockquote *:last-child:before {
            content: " ";
            position: absolute;
            top: 6px;
            left: 40%;
            width: 20%;
            border: solid 1px var(--border-gray);
        }

        .line-bar blockquote *:last-child:after {
            content: " ";
            position: absolute;
            top: 4px;
            left: calc(50% - 3px);
            width: 6px;
            height: 6px;
            transform: rotateZ(45deg);
            background-color: var(--border-gray);
        }

.frosted blockquote {
    border: solid 2px var(--border-gray);
    border-radius: var(--border-radius);
    color: var(--white);
    text-shadow: var(--text-shadow);
    padding: 15px;
}

    .frosted blockquote:after {
        content: " ";
        position: absolute;
        border-radius: calc(var(--border-radius) - 2px);
        background-color: rgba(5,5,30, .4);
        z-index: -1;
        backdrop-filter: blur(5px);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

.staples blockquote {
    border: 0px;
    border-left: solid 8px var(--border-gray);
    border-right: solid 8px var(--border-gray);
    padding: 35px;
}

    .staples blockquote:before, .staples blockquote:after {
        content: " ";
        position: absolute;
        z-index: -1;
        border-top: solid 8px var(--border-gray);
        border-bottom: solid 8px var(--border-gray);
        top: 0;
        left: 0;
        bottom: 0;
        width: 20%;
    }

    .staples blockquote:before {
        left: unset;
        right: 0;
    }
/*--------------------------------------
    FEATURES AND PHOTO-FEATURES 
 --------------------------------------*/
/*--------------------------------------------
   FEEDBACK 
*/
.feedback a {
    color: var(--secondary);
    text-decoration-color: var(--accent-1);
}

    .feedback a:hover {
        color: var(--dark);
        text-decoration-color: var(--accent-2);
    }

.feedback img {
    outline-color: var(--accent-1);
    outline-width: 3px;
}

.feedback blockquote {
    background-color: var(--secondary);
    color: var(--secondary-text);
}

    .feedback blockquote:after {
        border-color: transparent transparent var(--secondary) var(--secondary);
    }
/*--------------------------------------------
    FIXES FOR WASH ELEMENTS
*/
main *[class*="wash-"] h1, main *[class*="wash-"] h2, main *[class*="wash-"] h3, main *[class*="wash-"] p {
    background-color: inherit;
}
/*-----------------------------------------
    CALENDAR FEATURES: HOURS / EVENTS
*/
.calendar-title {
    border-bottom: solid 2px var(--accent-1);
}

.calendar {
    background-color: var(--light-gray);
    border: solid 1px var(--warm-gray);
}

.cal-day {
    border-radius: var(--border-radius);
    color: var(--neutral-text);
    background-color: var(--neutral);
}

.day-day {
    background-color: var(--cloud);
    color: var(--cloud-text);
}

.day-date {
    background-color: var(--secondary-text);
    color: var(--secondary);
}

    .day-date.today {
        background-color: var(--secondary);
        color: var(--secondary-text);
    }

.other-month {
    background-color: var(--neutral);
    color: var(--neutral-text);
}

.calendar-names select, .month-choice select {
    background-color: var(--secondary-text);
    color: var(--secondary);
    font-weight: 600;
    font-size: var(--font-size-large);
}

.calendar-names label, .month-choice label {
    background-color: var(--neutral);
    color: var(--neutral-text);
    padding: 4px;
}

.day-closed:before {
    content: "closed";
    color: var(--dark);
    font-weight: 400;
}

.mobile-hours-day-label, .mobile-closure-day-label {
    color: var(--secondary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: var(--accent-1);
    padding: 4px;
    margin: 0px;
}

.mobile-closure-day-label {
    color: var(--dark);
    text-decoration-color: var(--secondary);
}

.mobile-hours-day-hours {
    color: var(--my-black);
    font-size: var(--font-size-small);
    margin: 0;
    margin-bottom: 5px;
}

.calendar-mobile .time-hypen {
    width: 15px;
}
/*-------------
    EVENTS
*/
.date-marker p {
    border: solid 1px var(--dark);
    background-color: var(--accent-2);
    color: var(--accent-2-text);
    text-align: center;
    border-radius: var(--border-radius-small);
    padding: 0px;
}

    .date-marker p span:first-child {
        background-color: var(--primary);
        color: var(--primary-text);
        border-top-left-radius: var(--border-radius-small);
        border-top-right-radius: var(--border-radius-small);
    }

.date-marker hr {
    width: 90%;
    border-top: solid 2px var(--accent-1);
}

.event-organizer {
    font-size: var(--font-size-small);
    color: var(--dark);
}

.event-title {
    font-size: var(--font-size);
    font-weight: bold;
    color: var(--primary);
}

.event-course, .event-people {
    font-size: var(--font-size-reduced);
    color: var(--dark);
}

.event-location {
    font-size: var(--font-size-reduced);
    color: var(--priamry);
}
/*-------------------------------------------
    BORDERS
*/
.border {
    border-color: var(--gray);
}

.border-1 {
    border-color: var(--primary) !important;
}

.border-2 {
    border-color: var(--secondary) !important;
}

.border-3 {
    border-color: var(--neutral) !important;
}

.border-4 {
    border-color: var(--dark) !important;
}

.border-5 {
    border-color: var(--accent-1) !important;
}

.border-6 {
    border-color: var(--accent-2) !important;
}

.border-black {
    border-color: var(--my-black) !important;
}

.border-white {
    border-color: var(--my-white) !important;
}
/*-----------------------------------------------------
    INFO BLOCKS - DIRECTORY
*/
.directory-item.background-1 .item-name button {
    border-bottom: dotted 2px var(--primary-text);
}

.directory-item.background-2 .item-name button {
    border-bottom: dotted 2px var(--secondary-text);
}

.directory-item.background-3 .item-name button {
    border-bottom: dotted 2px var(--neutral-text);
}

.directory-item.background-4 .item-name button {
    border-bottom: dotted 2px var(--dark-text);
}

.directory-item.background-5 .item-name button {
    border-bottom: dotted 2px var(--accent-1-text);
}

.directory-item.background-6 .item-name button {
    border-bottom: dotted 2px var(--accent-2-text);
}

/*----------------------------------------
    TOPIC-BLOCK
*/
.grid-item.topic-block.has-content {
    display: block;
}

.grid-item.topic-block .overlay-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

    .grid-item.topic-block .overlay-content > * {
        margin: .4em;
    }

    .grid-item.topic-block .overlay-content *:last-child a {
        margin-left: 0px;
    }

    .grid-item.topic-block .overlay-content *:last-child:not(i) {
        margin-top: auto;
    }

/*-----------------------------------------------
    OTHER STYLES
*/
.sticky-note {
    position: sticky !important;
    top: 110px;
    height: 60vh;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+              END OF STANDARD STYLES YOU ARE                                         +
+     USE THE MY STYLE OVERRIDE CSS FILE TO ADJUST STYLES AS NEEDED                   +
+     PLEASE MAINTAIN YOUR SITE NAVIGATION SECTION IN THE MY NAVIGATION CSS FILE      +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/