#themeBtn
{
    background-color: transparent !important;
}

#themeBtn::before
{
    content: '\f186';
}

#map
{
    background-color: var(--panel-background-color);
}

#themeBtn::before
{
    color: var(--highlight-color);
    margin-right: 10px;
    font-size: 20px;
    line-height: 18px;
    display: inline-block;
    font-family: "Font Awesome 5 Free";
}

/* Dark theme colors */
body.dark-theme {
    --background-color: #22252a;
    --panel-background-color: #2d3035;
    --panel-highlight-background-color: #32353b;
    /*--font-color: #8a8d93;*/
    --font-color: #a2a3a5;
    --sub-font-color: #72747c;
    --border-color: #34373d;
    --bs-font-sans-serif: "Muli", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --highlight-color: #7467bd;

    --color-success: #528766;
    --color-error: #875256;
    --color-pending: #9c854b;
    --color-sending: #5b7588;

    --information-warning-color: #d9c581;

    --mud-palette-text-primary: var(--font-color) !important;
    --mud-typography-default-family: var(--bs-font-sans-serif) !important;
    --mud-elevation-1: 0 !important;
    --mud-palette-text-secondary: var(--sub-font-color) !important;

    --mud-palette-surface: var(--background-color) !important;
    --mud-palette-primary: var(--highlight-color) !important;
    --mud-default-borderradius: 1px !important;
    --mud-palette-action-default: var(--font-color) !important;
    --mud-palette-action-disabled: var(--sub-font-color) !important;
    --mud-palette-lines-inputs: var(--border-color) !important;

    --mud-typography-default-size: 15px !important;
    --mud-typography-h6-family: var(--bs-font-sans-serif) !important;
}

.dark-theme #themeBtn::before
{
    color: white;
    content: '\f185';
    
}

/* Styles for users who prefer dark mode at the OS level */
@media (prefers-color-scheme: dark) {
    
    :root
    {
        --background-color: #22252a;
        --panel-background-color: #2d3035;
        --panel-highlight-background-color: #32353b;
        /*--font-color: #8a8d93;*/
        --font-color: #a2a3a5;
        --sub-font-color: #72747c;
        --border-color: #34373d;
        --bs-font-sans-serif: "Muli", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --highlight-color: #7467bd;

        --color-success: #528766;
        --color-error: #875256;
        --color-pending: #9c854b;
        --color-sending: #5b7588;

        --information-warning-color: #f8c834;

        --mud-palette-text-primary: var(--font-color) !important;
        --mud-typography-default-family: var(--bs-font-sans-serif) !important;
        --mud-elevation-1: 0 !important;
        --mud-palette-text-secondary: var(--sub-font-color) !important;

        --mud-palette-surface: var(--background-color) !important;
        --mud-palette-primary: var(--highlight-color) !important;
        --mud-default-borderradius: 1px !important;
        --mud-palette-action-default: var(--font-color) !important;
        --mud-palette-action-disabled: var(--sub-font-color) !important;
        --mud-palette-lines-inputs: var(--border-color) !important;

        --mud-typography-default-size: 15px !important;
        --mud-typography-h6-family: var(--bs-font-sans-serif) !important;

        #logo
        {
            background-image: url("../img/bwlogo.png");
        }
    }

    #themeBtn::before
    {
        color: white;
        content: '\f185';

    }
    
    
    /* Override dark mode with light mode styles if the user decides to swap */
    body.light-theme
    {
        --background-color: #fffcfc;
        --panel-background-color: #ebebeb;
        --panel-highlight-background-color: #e0e0e0;
        --font-color: #48485a;
        --sub-font-color: #72747c;
        --border-color: #e0e0e0;
        --bs-font-sans-serif: "Muli", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --highlight-color: #4a4175;

        --color-success: #528766;
        --color-error: #875256;
        --color-pending: #9c854b;
        --color-sending: #5b7588;

        --mud-palette-text-primary: var(--font-color) !important;
        --mud-typography-default-family: var(--bs-font-sans-serif) !important;
        --mud-elevation-1: 0 !important;
        --mud-palette-text-secondary: var(--sub-font-color) !important;

        --mud-palette-surface: var(--background-color) !important;
        --mud-palette-primary: var(--highlight-color) !important;
        --mud-default-borderradius: 1px !important;
        --mud-palette-action-default: var(--font-color) !important;
        --mud-palette-action-disabled: var(--sub-font-color) !important;
        --mud-palette-lines-inputs: var(--border-color) !important;

        --mud-typography-default-size: 15px !important;
        --mud-typography-h6-family: var(--bs-font-sans-serif) !important;
    }


    .light-theme #themeBtn::before
    {
        content: '\f186';
    }
    
    .light-theme #map
    {
        background-color: var(--panel-background-color);
    }
}