/* Any custom CSS will go here. */
.message {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    padding: 1em;
    -webkit-box-shadow: 3px 3px 4px 0 rgba(0,0,0,0.4);
    box-shadow: 3px 3px 4px 0 rgba(0,0,0,0.4);
    border-style: solid;
    border-color: var(--primary);
}

/* Light Theme */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    --primary: #A3320B;
    --primary-hover: #C23A0D;
    --primary-focus: rgba(163, 50, 11, 0.25);
    --background-color: #BEBEBE;
    --color: #221B22;
    --muted-color: #3A2E39;
    --muted-border-color: #778899;
    --h1-color: #221B22;
    --h2-color: #251D24;
    --h3-color: #281F27;
    --h4-color: #2B222A;
    --h5-color: #2E242D;
    --h6-color: #312630;
    --secondary: #EA841D;
    --secondary-hover: #EE9A45;
    --secondary-focus: rgba(234, 132, 29, 0.125);
    --secondary-inverse: #fff;
    --contrast: #778899;
    --contrast-hover: #000;
    --contrast-focus: rgba(119, 136, 153, 0.125);
    --contrast-inverse: #fff;
    --mark-background-color: #F9DBBD;
    --mark-color: var(--primary);
    --ins-color: #46515C;
    --del-color: #611D07;
    --blockquote-border-color: var(--muted-border-color);
    --blockquote-footer-color: var(--muted-color);
    --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --form-element-background-color: #DCE0E5;
    --form-element-border-color: #778899;
    --form-element-color: var(--color);
    --form-element-placeholder-color: var(--muted-color);
    --form-element-active-background-color: #F5F5F5;
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --form-element-disabled-background-color: #8B99A7;
    --form-element-disabled-border-color: var(--form-element-border-color);
    --form-element-disabled-opacity: 0.5;
    --form-element-invalid-border-color: #D13F0F;
    --form-element-invalid-active-border-color: #B2360C;
    --form-element-invalid-focus-color: rgba(209, 63, 15, 0.125);
    --form-element-valid-border-color: #26A96C;
    --form-element-valid-active-border-color: #37D28A;
    --form-element-valid-focus-color: rgba(38, 169, 108, 0.125);
    --switch-background-color: #778899;
    --switch-color: var(--primary-inverse);
    --switch-checked-background-color: var(--primary);
    --range-border-color: #778899;
    --range-active-border-color: var(--primary);
    --range-thumb-border-color: var(--background-color);
    --range-thumb-color: var(--secondary);
    --range-thumb-hover-color: var(--secondary-hover);
    --range-thumb-active-color: var(--primary);
    --table-border-color: var(--muted-border-color);
    --table-row-stripped-background-color: #F3F5F6;
    --code-background-color: #3A2E39;
    --code-color: #F5F5F5;
    --code-kbd-background-color: var(--contrast);
    --code-kbd-color: var(--contrast-inverse);
    --code-tag-color: var(--primary);
    --code-property-color: var(--secondary);
    --code-value-color: var(--primary);
    --code-comment-color: var(--muted-color);
    --accordion-border-color: var(--muted-border-color);
    --accordion-close-summary-color: var(--muted-color);
    --accordion-open-summary-color: var(--primary);
    --card-background-color: #FDF5EC;
    --card-border-color: var(--muted-border-color);
    --card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
    --card-sectionning-background-color: #F5F5F5;
    --dropdown-background-color: var(--muted-color);
    --dropdown-border-color: var(--muted-border-color);
    --dropdown-box-shadow: var(--card-box-shadow);
    --dropdown-color: var(--color);
    --dropdown-hover-background-color: var(--secondary-hover);
    --progress-background-color: #778899;
    --progress-color: var(--primary);
    --loading-spinner-opacity: 0.5;
    --tooltip-background-color: #3A2E39;
    --tooltip-color: var(--contrast-inverse);
}

/* Dark Theme */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #EA841D;
        --primary-hover: #EFA357;
        --primary-focus: rgba(234, 132, 29, 0.25);
        --background-color: #141414;
        --color: #BEBEBE;
        --muted-color: #ADADAD;
        --muted-border-color: #778899;
        --h1-color: #C5CCD3;
        --h2-color: #D6D6D6;
        --h3-color: #E0E0E0;
        --h4-color: #EBEBEB;
        --h5-color: #F5F5F5;
        --h6-color: #FFFFFF;
        --secondary: #CD7013;
        --secondary-hover: #E07A15;
        --secondary-focus: rgba(224, 122, 21, 0.125);
        --secondary-inverse: #fff;
        --contrast: #778899;
        --contrast-hover: #000;
        --contrast-focus: rgba(119, 136, 153, 0.125);
        --contrast-inverse: #fff;
        --mark-background-color: #2C333A;
        --mark-color: var(--primary);
        --ins-color: #26A96C;
        --del-color: #611D07;
        --blockquote-border-color: var(--muted-border-color);
        --blockquote-footer-color: var(--muted-color);
        --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        --form-element-background-color: #221B22;
        --form-element-border-color: #A3320B;
        --form-element-color: var(--color);
        --form-element-placeholder-color: var(--muted-color);
        --form-element-active-background-color: #453643;
        --form-element-active-border-color: var(--primary);
        --form-element-focus-color: var(--primary-focus);
        --form-element-disabled-background-color: #46515C;
        --form-element-disabled-border-color: var(--form-element-border-color);
        --form-element-disabled-opacity: 0.5;
        --form-element-invalid-border-color: #D13F0F;
        --form-element-invalid-active-border-color: #B2360C;
        --form-element-invalid-focus-color: rgba(209, 63, 15, 0.125);
        --form-element-valid-border-color: #26A96C;
        --form-element-valid-active-border-color: #37D28A;
        --form-element-valid-focus-color: rgba(38, 169, 108, 0.125);
        --switch-background-color: #778899;
        --switch-color: var(--primary-inverse);
        --switch-checked-background-color: var(--primary);
        --range-border-color: #778899;
        --range-active-border-color: var(--primary);
        --range-thumb-border-color: var(--background-color);
        --range-thumb-color: var(--secondary);
        --range-thumb-hover-color: var(--secondary-hover);
        --range-thumb-active-color: var(--primary);
        --table-border-color: var(--muted-border-color);
        --table-row-stripped-background-color: #2C333A;
        --code-background-color: #3A2E39;
        --code-color: #F5F5F5;
        --code-kbd-background-color: var(--contrast);
        --code-kbd-color: var(--contrast-inverse);
        --code-tag-color: var(--primary);
        --code-property-color: var(--secondary);
        --code-value-color: var(--primary);
        --code-comment-color: var(--muted-color);
        --accordion-border-color: var(--muted-border-color);
        --accordion-close-summary-color: var(--muted-color);
        --accordion-open-summary-color: var(--primary);
        --card-background-color: #1A1F23;
        --card-border-color: var(--muted-border-color);
        --card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
        --card-sectionning-background-color: #222A2F;
        --dropdown-background-color: var(--muted-color);
        --dropdown-border-color: var(--muted-border-color);
        --dropdown-box-shadow: var(--card-box-shadow);
        --dropdown-color: var(--color);
        --dropdown-hover-background-color: var(--secondary-hover);
        --progress-background-color: #778899;
        --progress-color: var(--primary);
        --loading-spinner-opacity: 0.5;
        --tooltip-background-color: #3A2E39;
        --tooltip-color: var(--contrast-inverse);
    }
}

/* Dark Theme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
    --primary: #EA841D;
    --primary-hover: #EFA357;
    --primary-focus: rgba(234, 132, 29, 0.25);
    --background-color: #141414;
    --color: #BEBEBE;
    --muted-color: #ADADAD;
    --muted-border-color: #778899;
    --h1-color: #C5CCD3;
    --h2-color: #D6D6D6;
    --h3-color: #E0E0E0;
    --h4-color: #EBEBEB;
    --h5-color: #F5F5F5;
    --h6-color: #FFFFFF;
    --secondary: #CD7013;
    --secondary-hover: #E07A15;
    --secondary-focus: rgba(224, 122, 21, 0.125);
    --secondary-inverse: #fff;
    --contrast: #778899;
    --contrast-hover: #000;
    --contrast-focus: rgba(119, 136, 153, 0.125);
    --contrast-inverse: #fff;
    --mark-background-color: #2C333A;
    --mark-color: var(--primary);
    --ins-color: #26A96C;
    --del-color: #611D07;
    --blockquote-border-color: var(--muted-border-color);
    --blockquote-footer-color: var(--muted-color);
    --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --form-element-background-color: #221B22;
    --form-element-border-color: #A3320B;
    --form-element-color: var(--color);
    --form-element-placeholder-color: var(--muted-color);
    --form-element-active-background-color: #453643;
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --form-element-disabled-background-color: #46515C;
    --form-element-disabled-border-color: var(--form-element-border-color);
    --form-element-disabled-opacity: 0.5;
    --form-element-invalid-border-color: #D13F0F;
    --form-element-invalid-active-border-color: #B2360C;
    --form-element-invalid-focus-color: rgba(209, 63, 15, 0.125);
    --form-element-valid-border-color: #26A96C;
    --form-element-valid-active-border-color: #37D28A;
    --form-element-valid-focus-color: rgba(38, 169, 108, 0.125);
    --switch-background-color: #778899;
    --switch-color: var(--primary-inverse);
    --switch-checked-background-color: var(--primary);
    --range-border-color: #778899;
    --range-active-border-color: var(--primary);
    --range-thumb-border-color: var(--background-color);
    --range-thumb-color: var(--secondary);
    --range-thumb-hover-color: var(--secondary-hover);
    --range-thumb-active-color: var(--primary);
    --table-border-color: var(--muted-border-color);
    --table-row-stripped-background-color: #2C333A;
    --code-background-color: #3A2E39;
    --code-color: #F5F5F5;
    --code-kbd-background-color: var(--contrast);
    --code-kbd-color: var(--contrast-inverse);
    --code-tag-color: var(--primary);
    --code-property-color: var(--secondary);
    --code-value-color: var(--primary);
    --code-comment-color: var(--muted-color);
    --accordion-border-color: var(--muted-border-color);
    --accordion-close-summary-color: var(--muted-color);
    --accordion-open-summary-color: var(--primary);
    --card-background-color: #1A1F23;
    --card-border-color: var(--muted-border-color);
    --card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
    --card-sectionning-background-color: #222A2F;
    --dropdown-background-color: var(--muted-color);
    --dropdown-border-color: var(--muted-border-color);
    --dropdown-box-shadow: var(--card-box-shadow);
    --dropdown-color: var(--color);
    --dropdown-hover-background-color: var(--secondary-hover);
    --progress-background-color: #778899;
    --progress-color: var(--primary);
    --loading-spinner-opacity: 0.5;
    --tooltip-background-color: #3A2E39;
    --tooltip-color: var(--contrast-inverse);
}

/* Common styles */
:root {
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --switch-color: var(--primary-inverse);
    --switch-checked-background-color: var(--primary);
}