/*
Theme Name: Dolbeau-Mistassini
Theme URI: http://activis.ca
Author: Activis
Author URI: http://activis.ca
Description: A design system to build Wordpress site
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: activis
Template: act-wp-base-designsystem

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
body {

    /**
    * Variables wordpress pour les containers de blocs
    */
    --layout--content-size: 850px;
    --layout--wide-size: 1280px;

    --color--text--accent: var(--color--primary);
    --color--text--meta: var(--color--grey-40);
    /**
    * Variables de couleurs propres au projet
    */
    --color--primary: var(--b-700);
    --color--primary--hover: var(--b-800);
    --color--secondary: #222221;
    --color--secondary--hover: #222221;
    --color--tertiary: #86BBD8;
    --color--tertiary--hover: #86BBD8;
    --color--error: #DA1E28;
    --color--black: #000;

    --color--grey-90: #1A1A1A;
    --color--grey-80: #333333;
    --color--grey-70: #534545;
    --color--grey-60: #666666;
    --color--grey-50: #808080;
    --color--grey-40: #C4C4C4;
    --color--grey-30: #B3B3B3;
    --color--grey-20: #CCCCCC;
    --color--grey-10: #E5E5E5;
    --color--grey-05: #F2F2F2;
    --color--grey-03: #F7F7F7;
    --color--white: #fff;


    --font-family--heading: 'AccordAlternate', sans-serif;
    --font-family--text: 'AccordAlternate', sans-serif;

    --color--overlay--background: rgba(0, 0, 0, 0.8);

    --background: var(--color--white);
    --color--meta: var(--color--grey-70);
    --color--text: var(--color--black);
    --color--interactive: var(--color--secondary);
    --color--interactive--hover: var(--color--secondary);
    --color--emphasis: var(--color--primary);

    --color--box--background--emphasis: var(--b-700);
    --color--box--background--even: var(--b-50);
    --color--box--text--emphasis: var(--color--white);


    --color--facebook:#3B5999;
    --color--youtube:#CD201F;
    --color--linkedin :#0077B5;
    --color--twitter :#55ACEE;
    --color--instagram :#E4405F;

    --gaps--columns: 1.5rem;
    --gaps--grid: 2rem;
    --gaps--list: 1.5rem;
    --gaps--sides: 2rem;
    --gaps--boxed: 1.5rem;

    --gaps--text: 1.5rem;
    --gaps--block: 2.5rem;
    --gaps--section: 5rem;

    --gaps--inline: 0.5rem;
    --gaps--inline--large: 1em;
    --gaps--menu: 1.5rem;

    --padding--none: 0;
    --padding--xx-small: 0.25rem;
    --padding--x-small: 0.5rem;
    --padding--small: 1rem;
    --padding--medium: 1.25rem;
    --padding--x-medium: 1.5rem;
    --padding--xx-medium: 1.75rem;
    --padding--large: 2rem;
    --padding--x-large: 2.5rem;
    --padding--xx-large: 5rem;

    --margin--none: 0;
    --margin--xxx-small: 0.25rem;
    --margin--xx-small: 0.5rem;
    --margin--x-small: 1rem;
    --margin--small: 1.5rem;
    --margin--medium: 2rem;
    --margin--large: 3rem;
    --margin--x-large: 4rem;
    --margin--xx-large: 5rem;
    --margin--xxx-large: 8rem;

    --layer--behind: -1;
    --layer--set: 1;
    --layer--overlay: 800;
    --layer--menu: 900;
    --layer--header: 1000;
    --layer--modal: 1100;
    --layer--veil: 9000;
    --layer--always-on-top: 99999999;

    --line-height--text: 1.5;
    --line-height--x-small: 1.6;
    --line-height--small: 1.4285;
    --line-height--x-large: 1.25;


    --font-size--x-small: 0.625rem;
    --font-size--small: 0.75rem;
    --font-size--medium: 1rem;
    --font-size--large: 1.5rem;
    --font-size--x-large: 2rem;

    --font-size--h1: 4.5rem;
    --font-size--h2: 3.5rem;
    --font-size--h3: 2.5rem;
    --font-size--h4: 1.5rem;
    --font-size--h5: 1.25rem;
    --font-size--h6: 1.125rem;
    --line-height--heading: 1.3333;
    --line-height--h1: 1.142857;
    --line-height--h2: 1.142857;
    --line-height--h3: 1.2;
    --line-height--h4: 1.3333;
    --line-height--h5: 1.2;
    --line-height--h6: 1.3333;

    --easing--state: ease-in-out;
    --easing--entrance: ease-in;
    --easing--exit: ease-out;

    --duration--slowest: 1s;
    --duration--slower: 750ms;
    --duration--slow: 500ms;
    --duration--fast: 300ms;
    --duration--faster: 200ms;
    --duration--fastest: 100ms;
    --duration--none: 0;

    --icon--xx-small: 1rem;
    --icon--x-small: 1.25rem;
    --icon--small: 1.5rem;
    --icon--medium: 2rem;
    --icon--large: 2.5rem;
    --icon--x-large: 4rem;
    --icon--xx-large: 5rem;
    --icon--xxx-large: 6rem;

    --font-weight--heading: 700;
    --font-weight--text: 400;

    --list--bullet: url("../../assets/icons/SVG/bullet.svg");


    --caption--font: normal var(--font-weight--text) 0.875rem/1.5rem 'AccordAlternate', sans-serif;

    --quote--font: normal bold 2rem/1.25 'AccordAlternate', sans-serif;
    --quote--color: var(--color--white);
    --quote--background: var(--color--primary);
    --color--quote--emphasis: #3371f2;
    --color--quote--text: #333E48;


    /* non scopé, peut etre utilisé a beaucoup de places */
    --social--facebook:#3B5999;
    --social--youtube:#CD201F;
    --social--twitter:#55ACEE;
    --social--linkedin:#0077B5;
    --social--instagram:#E4405F;

    --button--background--hover:var(--color--primary--hover);
    --button--border-color--hover:var(--color--primary--hover);
    --button--color--hover:var(--color--white);

    --button--background--disabled:#ededed;
    --button--border-color--disabled:#ededed;
    --button--color--disabled:#bcbcbc;

    --icon-button--color: var(--color--white);
    --icon-button--background: var(--color--black);

    --icon-button--color--hover: var(--color--black);
    --icon-button--background--hover: var(--color--white);

    --logo--primary--filter: invert(51%) sepia(61%) saturate(495%) hue-rotate(79deg) brightness(93%) contrast(92%);
}

:root {
    --b-900: #003657;
    --b-800: #005C94;
    --b-700: #0078C1;
    --b-400: #60A7D4;
    --b-50: #E2E8EE;

    --v-900: #1B3E18;
    --v-800: #2E6A2A;
    --v-700: #49A942;

    --white: #fff;
    --black: #000;


    --color--primary: var(--b-700);
    --color--primary--hover: var(--b-800);
    --color--primary--active: var(--b-900);


    --color--link--text: var(--b-700);
    --color--link--text--hover: var(--b-800);
    --color--link--text--active: var(--b-900);

    --color--text--high: #000;
    --color--text--medium: #333;
    --color--text--low: #666;
    --color--text: var(--color--text--high);
    --color--accent: #3371F2;
    --color--background: #fff;
    --color--border: #E5E5E5;

    --color--lead--text: #000;
    --color--title--text: var(--b-900);

    --color--list--icon: var(--color--text);


    --color--link--decoration: transparent;
    --color--link--decoration--hover: transparent;
    --color--link--decoration--active: transparent;

    --color--background--button--primary: #3371F2;
    --color--background--button--hover--primary: #0C47C1;
    --color--background--button--active--primary: #09338A;
    --color--link--button--secondary: var(--color--link--text);
    --color--background--surface--light: #EBF1FE;

    --color--button--background: var(--color--link--text);
    --color--button--text: #fff;
    --color--button--border: var(--color--link--text);
    --color--button--background--filled: var(--v-700);
    --color--button--text--filled: #fff;
    --color--button--border--filled: var(--v-700);

    --color--button--background--hover--filled: var(--v-800);
    --color--button--text--hover--filled: #fff;
    --color--button--border--hover--filled: var(--v-800);

    --color--button--background--disabled--filled: var(--color--text--low);
    --color--button--text--disabled--filled: #fff;
    --color--button--border--disabled--filled: var(--color--text--low);


    --color--button--background--outlined: transparent;
    --color--button--text--outlined:var(--b-700);
    --color--button--border--outlined: var(--b-700);

    --color--button--background--hover--outlined: var(--b-700);
    --color--button--text--hover--outlined: #fff;
    --color--button--border--hover--outlined: var(--b-700);

    --color--button--background--disabled--outlined: transparent;
    --color--button--text--disabled--outlined: var(--color--text--low);
    --color--button--border--disabled--outlined: var(--color--text--low);


    --color--button--background--light: #fff;
    --color--button--text--light: var(--b-700);
    --color--button--border--light: #fff;

    --color--button--background--hover--light: var(--b-50);
    --color--button--text--hover--light: var(--b-700);
    --color--button--border--hover--light: var(--b-50);

    --color--button--background--disabled--light: #efefef;
    --color--button--text--disabled--light: var(--color--text--low);
    --color--button--border--disabled--light: #efefef;


    --color--button--background--dark: var(--b-900);
    --color--button--text--dark: #fff;
    --color--button--border--dark: var(--b-900);

    --color--button--background--hover--dark: var(--b-800);
    --color--button--text--hover--dark: #fff;
    --color--button--border--hover--dark: var(--b-800);

    --color--button--background--disabled--dark: var(--color--text--low);
    --color--button--text--disabled--dark: #fff;
    --color--button--border--disabled--dark: var(--color--text--low);


    --color--button--background--transparent: transparent;
    --color--button--text--transparent: var(--b-700);
    --color--button--border--transparent: transparent;

    --color--button--background--hover--transparent: transparent;
    --color--button--text--hover--transparent: var(--b-800);
    --color--button--border--hover--transparent: transparent;

    --color--button--background--disabled--transparent: transparent;
    --color--button--text--disabled--transparent: var(--color--text--low);
    --color--button--border--disabled--transparent: transparent;


    --color--label--text:var(--color--text);

    --color--input--background:#F2F2F2;
    --color--input--border:#F2F2F2;
    --color--input--text:var(--color--text);

    --color--input--background--error:var(--color--input--background);
    --color--input--border--error:var(--color--input--border);
    --color--input--text--error:var(--color--input--text);

    --color--input--background--disabled:var(--color--input--background);
    --color--input--border--disabled:var(--color--input--border);
    --color--input--text--disabled:var(--color--input--text);

    --color--box--text: var(--color--text);
    --color--box--background: #EBF1FE;
    --color--box--border: #EBF1FE;

    --color--box--text--odd: var(--color--text);
    --color--box--background--odd: var(--color--background);
    --color--box--border--odd: var(--color--background);

    --color--box--text--even: var(--color--box--text);
    --color--box--background--even: var(--b-50);
    --color--box--border--even: var(--color--box--border);

    --color--box--text--contrast: #fff;
    --color--box--background--contrast: #000;
    --color--box--border--contrast: #000;

    --color--box--text--emphasis: #fff;
    --color--box--background--emphasis: var(--b-700);
    --color--box--border--emphasis: var(--color--primary);;

    --color--box--text--info: #202084;
    --color--box--background--info: #CFE2FF;
    --color--box--border--info: #CFE2FF;

    --color--box--text--warning: #664D03;
    --color--box--background--warning: #FFF3CD;
    --color--box--border--warning: #FFF3CD;


    --color--box--text--error: #842029;;
    --color--box--background--error: #F8D7DA;
    --color--box--border--error: #F8D7DA;


    --color--box--text--success: #0F5132;
    --color--box--background--success: #D1E7DD;
    --color--box--border--success: #D1E7DD;

    --font--input:normal 1rem/1.5rem 'AccordAlternate', sans-serif;


    --font--text--regular: 1rem/1.5 'AccordAlternate', sans-serif;
    --font--text--bold: bold 1rem/1.5 'AccordAlternate', sans-serif;
    --font--text: var(--font--text--regular);
    --font--small--regular:0.875rem/1.714 'AccordAlternate', sans-serif;
    --font--small--bold:bold 0.875rem/1.714 'AccordAlternate', sans-serif;
    --font--small:var(--font--small--regular);
    --font--input: var(--font--text);

    --font--button: bold 1rem/1.25 'AccordAlternate', sans-serif;

    --font--lead--regular: 1.75rem/1.429 'AccordAlternate', sans-serif;
    --font--lead--bold: bold 1.75rem/1.429 'AccordAlternate', sans-serif;
    --font--lead: var(--font--lead--regular);
    /*100/960*48*/
    --font--hero: clamp(2rem, 5vw, 4rem)/1.156 'AccordAlternate', sans-serif;
    --font--title--h1--regular:  4rem/1.25 'AccordAlternate', sans-serif;
    --font--title--h2--regular:  3rem/1.25 'AccordAlternate', sans-serif;
    --font--title--h3--regular: 1.5rem/1.25 'AccordAlternate', sans-serif;
    --font--title--h4--regular: 1.375rem/1.3636 'AccordAlternate', sans-serif;
    --font--title--h5--regular: 1.250rem/1.2 'AccordAlternate', sans-serif;
    --font--title--h6--regular: 1.125rem/1.333333 'AccordAlternate', sans-serif;

    --font--title--h1--bold: bold 4rem/1.25 'AccordAlternate', sans-serif;
    --font--title--h2--bold: bold 3rem/1.25 'AccordAlternate', sans-serif;
    --font--title--h3--bold: bold 1.5rem/1.25 'AccordAlternate', sans-serif;
    --font--title--h4--bold: bold 1.375rem/1.3636 'AccordAlternate', sans-serif;
    --font--title--h5--bold: bold 1.250rem/1.2 'AccordAlternate', sans-serif;
    --font--title--h6--bold: bold 1.125rem/1.33333 'AccordAlternate', sans-serif;

    --font--title--h1: var(--font--title--h1--bold);
    --font--title--h2: var(--font--title--h2--bold);
    --font--title--h3: var(--font--title--h3--bold);
    --font--title--h4: var(--font--title--h4--bold);
    --font--title--h5: var(--font--title--h5--bold);
    --font--title--h6: var(--font--title--h6--bold);

    --font--label:normal 0.875rem/1.2 'AccordAlternate', sans-serif;

    --spacing--none: 0;
    --spacing--xxx-small: 0.25rem;
    --spacing--xx-small: 0.5rem;
    --spacing--x-small: 1rem;
    --spacing--small: 1.5rem;
    --spacing--medium: 2rem;
    --spacing--large: 3rem;
    --spacing--x-large: 4rem;
    --spacing--xx-large: 5rem;
    --spacing--xxx-large: 8rem;


    --border-radius--button: 0.5rem;
    --border-width--button:2px;
    --border-width--button--large:2px;
    --border-width--button--medium:2px;
    --border-width--button--small:2px;
    --border-width--button--x-small:2px;
    --border-width--button--text:0;
    /*--height--button:3.5rem;*/

    --padding--button:1rem;
    --padding--button--large:1rem;
    --padding--button--medium:0.75rem;
    --padding--button--small:0.5rem;
    --padding--button--x-small:0.25rem;
    --padding--button--text:0rem;

    --height--input:3rem;
    --padding--input:0.5rem 1rem;
    --border-radius--input:0;
    --border-width--input:0;

    --border-radius--badge: 0.5rem;
    --border-width--badge:1px;
    --padding--badge:0.25rem 0.75rem;
    --font--badge:var(--font--small--bold);

    --color--badge--background:var(--b-700);
    --color--badge--text:var(--white);
    --color--badge--border:var(--b-700);

    --color--badge--background--light:var(--b-700);
    --color--badge--text--light:var(--white);
    --color--badge--border--light:var(--b-700);

    --border-width--box: none;
    --border-radius--box: none;
    --border-radius--interactive-box: 0.5rem;
    --box-shadow--box: none;
    --padding--box:1.5rem;

    --border-width--interactive-box: 1px;
    --border-radius--interactive-box: 0.5rem;
    --padding--interactive-box:1.5rem;


    --outline--focus: 2px solid currentColor;
    --outline--active: 3px solid currentColor;

    --opacity--full: 1;
    --opacity--high: 0.8;
    --opacity--medium: 0.6;
    --opacity--low: 0.4;

    /**
    https://yoksel.github.io/url-encoder/
    */
    --icon--list: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctitle%3Ebullet%3C/title%3E%3Cpath d='M16 21.333c-2.945 0-5.333-2.388-5.333-5.333s2.388-5.333 5.333-5.333c2.945 0 5.333 2.388 5.333 5.333 0 1.415-0.561 2.771-1.563 3.771s-2.356 1.563-3.771 1.563z'%3E%3C/path%3E%3C/svg%3E");

    --color--interactive-box--border: var(--color--border);
    --color--interactive-box--text: var(--color--text);
    --color--interactive-box--link: var(--color--link--text);
    --color--interactive-box--background:var(--color--background);

    --color--interactive-box--border--hover: var(--color--button--border--filled);
    --color--interactive-box--text--hover: var(--color--button--text--filled);
    --color--interactive-box--link--hover: var(--color--button--text--filled);
    --color--interactive-box--background--hover: var(--color--button--background--filled);

    --color--interactive-box--border--activated: var(--color--button--border--filled);
    --color--interactive-box--text--activated: var(--color--button--text--filled);
    --color--interactive-box--link--activated: var(--color--button--text--filled);
    --color--interactive-box--background--activated: var(--color--button--background--filled);
}

@media (max-width: 1279px) {

    body {
        --font--lead--regular: 1.375rem/1.3636 'AccordAlternate', sans-serif;
        --font--lead--bold: bold 1.375rem/1.3636 'AccordAlternate', sans-serif;
        --font--title--h1--regular:2rem/1.25 'AccordAlternate', sans-serif;
        --font--title--h1--bold:bold 2rem/1.25 'AccordAlternate', sans-serif;
        --font--title--h2--regular:1.5rem/1.25 'AccordAlternate', sans-serif;
        --font--title--h2--bold: bold 1.5rem/1.25 'AccordAlternate', sans-serif;
        --font--title--h3--regular: 1.375rem/1.3636 'AccordAlternate', sans-serif;
        --font--title--h3--bold:bold 1.375rem/1.3636 'AccordAlternate', sans-serif;
        --font--title--h4--regular: 1.25rem/1.2 'AccordAlternate', sans-serif;
        --font--title--h4--bold:bold 1.25rem/1.2 'AccordAlternate', sans-serif;
        --font--title--h5--regular: 1.175rem/1.333333 'AccordAlternate', sans-serif;
        --font--title--h5--bold:bold 1.175rem/1.333333 'AccordAlternate', sans-serif;
        --font--title--h6--regular: 1rem/1.5 'AccordAlternate', sans-serif;
        --font--title--h6--bold:bold 1rem/1.5 'AccordAlternate', sans-serif;

        --font--lead:1.375rem/1.333333 'AccordAlternate', sans-serif;

        --spacing--medium: 1.5rem;
        --spacing--large: 2rem;
        --spacing--x-large: 2.5rem;
        --spacing--xx-large: 4rem;
        --spacing--xxx-large: 5rem;
    }
}

@media (max-width: 781px) {

    body {
        --font--title--h1--regular:1.75rem/1.429 'AccordAlternate', sans-serif;
        --font--title--h1--bold:bold 1.75rem/1.429 'AccordAlternate', sans-serif;
        --spacing--large: 1.5rem;
        --spacing--x-large: 2rem;
        --spacing--xx-large: 3rem;
        --spacing--xxx-large: 4rem;
        --gaps--sides: 1.5rem;
    }
}

.post-navigation-link {
    --link--color: var(--color--primary);
}

.act-page-tree-menu {

    /* overlay */
    --overlay--background: var(--color--secondary);
    --overlay--opacity: 0;

}

.act-quick-links {
    --color--background: var(--color--primary);
    --color--background--hover: var(--color--tertiary);
    --color--text: var(--color--white);
    --color--text--hover: var(--color--white);
}

.wp-block-cover, .act-gallery-cover {
    --cover-heading-color: var(--color--white);
    --cover-heading-font: normal var(--font-weight--heading) var(--font-size--h1)/var(--line-height--heading) 'AccordAlternate', sans-serif;
    --cover-heading-align: left;
    --cover-heading-valign: center;
    --cover-container-width: var(--layout--wide-size);
    --cover-overlay-background: var(--color--black);
    --cover-overlay-opacity: 0.35;
    --cover-height: 500px;

}

.yoast-breadcrumbs {
    --crumb--gap: var(--padding--x-small);
    --crumb--color: #000000;
    --crumb--font: normal 700 var(--font-size--medium)/1em 'AccordAlternate', sans-serif;
    --crumb--color--current: #000000;
    --crumb--font--current: normal 400 var(--font-size--medium)/1em 'AccordAlternate', sans-serif;
    --crumb--color--separator: var(--color--primary);
    --crumb--size--separator: var(--font-size--medium);
}

.alerte-banner{
    --avis--title-color:var(--color--white);
    --avis--color:var(--color--white);
    --avis--bg-color:var(--color--box--background--error);
    --annonce--title-color:var(--color--black);
    --annonce--color:var(--color--black);
    --annonce--bg-color:var(--color--box--background--warning);
    --information--title-color:var(--color--white);
    --information--color:var(--color--white);
    --information--bg-color:var(--color--box--background--info);
}

.act-galerie-slider{
    --nav--dots--height:0.5rem;
    --nav--dots--width:0.5rem;
    --nav--dots--margin:0 0.5rem;
    --nav--dots--shadow:0px 0.25rem 0.25rem rgb(0 0 0 / 25%);
    --nav--dots--bg-color:#fff;
    --nav--dots--border-color:#fff;
    --nav--dots--border-size:2px;
    --nav--controls--padding:0 1.5rem;
    --nav--controls--height:1.5rem;
    --nav--controls--width:1.5rem;
    --nav--controls--color:#fff;
    --nav--controls--bg-color:rgba(0, 0, 0, 0.4);
    --nav--controls--bg-color--hover:rgba(0, 0, 0, 1);
    --items-height:400px;
}

.act-page-404{
    --page-404--bg--color:var(--color--primary);
    --page-404--text--color:var(--color--white);

    --button--background:#fff;
    --button--border-color:#fff;
    --button--color:var(--color--primary);

    --button--background--hover:#dcdcdc;
    --button--border-color--hover:#dcdcdc;
    --button--color--hover:var(--color--primary);

    --button--background--active:#dcdcdc;
    --button--border-color--active:#dcdcdc;
    --button--color--active:var(--color--primary);

    --button--background--disabled:#ededed;
    --button--border-color--disabled:#ededed;
    --button--color--disabled:#bcbcbc;
}

.l-footer{
    --footer--background: #EFF2F6;
    --footer--text-color:var(--color--white);
    --footer--font:normal 400 1rem/1.5rem 'AccordAlternate', sans-serif;
    --footer--spacing-y:var(--padding--none);
    --footer--content-spacing-y:var(--padding--xx-large);
    --footer--gap-x:92px;
    --footer--gap-y:var(--margin--large);
    --footer--font-level1:normal 700 1.125rem/1.25em 'AccordAlternate', sans-serif;
    --footer--font-level2:normal 400 1rem/1.25em 'AccordAlternate', sans-serif;
}

.act-share{
    --network--color:var(--color--primary);
    --network--color--hover:var(--color--secondary);
    --toggle--color:var(--color--secondary);
}

.wp-block-archive-filtres{
    --filtres--padding:0;
    --filtres--background:transparent;
    --filtres--title--font:700 normal 1.25rem/1.14em 'AccordAlternate', sans-serif;
    --filtres--label--font:700 normal 1rem/1.5em 'AccordAlternate', sans-serif;
    --filtres--field--font:400 normal 1rem/1.5em 'AccordAlternate', sans-serif;
    --filtres--field--color: #000;
    --filtres--label--text-color: #000;
    --filtres--form--gap:1rem;
}
.act-reveal-card{
    --card--height:400px;
    --color--text:#fff;
    --color--background--reveal:var(--color--primary);
    --color--background-opacity--reveal:0.9;
    --color--text--reveal:#fff;
    --font--normal: 700 normal 2.5rem/1.20em 'AccordAlternate', sans-serif;
}
.wp-block-act-notice,.act-notice{
    --notice--radius:0;
    --default--background:#000;
    --default--color:#fff;
    --default--border:transparent;
    --info--background:var(----color--box--background--info);
    --info--color:#202084;
    --info--border:transparent;
    --alert--background:var(--color--box--background--error);
    --alert--color:#842029;
    --alert--border:transparent;
    --warning--background:var(--color--box--background--warning);
    --warning--color:#664D03;
    --warning--border:transparent;
    --success--background:#D1E7DD;
    --success--color:#0F5132;
    --success--border:transparent;
}