/* ==========================================================================
   The statically rendered pages, / and /story, load no MudBlazor (App.razor).
   This file gives them what they took from MudBlazor.min.css and from
   MudThemeProvider (FrontLayout's theme), so they look as before. It is linked
   in MudBlazor's place in the cascade: after style.css, before the page CSS.
   ========================================================================== */

/* MudBlazor's global element rules (MudBlazor 9.12), with the theme's values filled in. Left out on purpose:
   a:focus-visible { outline: none }, button:focus { outline: none } and outline: 0 on buttons, so keyboard users
   see where they are. */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-width: 0;
    border-style: solid;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

strong, b { font-weight: 700; }

body {
    color: #424242;
    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.43;
    letter-spacing: .01071em;
    text-transform: none;
    background-color: #fff;
}

a { color: #424242; text-decoration: none; }

label { display: inline-block; }

button {
    color: inherit;
    border: 0;
    cursor: pointer;
    margin: 0;
    display: inline-flex;
    padding: 0;
    position: relative;
    align-items: center;
    user-select: none;
    border-radius: 0;
    vertical-align: middle;
    appearance: none;
    justify-content: center;
    text-decoration: none;
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, input { overflow: visible; }
button, select { text-transform: none; }
select { word-wrap: normal; }
button, [type=button], [type=reset], [type=submit] { appearance: button; }
iframe { border: none; height: 100%; width: 100%; }

/* MudThemeProvider's scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; z-index: 1; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c4c4c4; border-radius: 1px; }
::-webkit-scrollbar-thumb:hover { background: #a6a6a6; }
html, body * { scrollbar-color: #c4c4c4 transparent; scrollbar-width: thin; }

/* The page wrapper (FrontLayout), as MudContainer MaxWidth.ExtraExtraLarge without gutters drew it */
.main-section { display: block; width: 100%; margin-left: auto; margin-right: auto; }
@media (min-width: 2560px) { .main-section { max-width: 2560px; } }

/* A link drawn as a button (Shared/MainPage/LandingButton.razor): MudButton's root, label and start icon, medium
   size. Each page's CSS gives the colours, border and padding (design58.css .wb-btn-*, design59.css .fr-btn-*). */
.dn-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    box-sizing: border-box;
    min-width: 64px;
    margin: 0;
    padding: 6px 16px;
    overflow: hidden;
    border: 0;
    border-radius: 4px;
    color: #424242;
    background-color: transparent;
    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: .02857em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 250ms cubic-bezier(.4, 0, .2, 1), box-shadow 250ms cubic-bezier(.4, 0, .2, 1), border 250ms cubic-bezier(.4, 0, .2, 1);
}

.dn-btn--full { width: 100%; }

.dn-btn-label { width: 100%; display: inherit; align-items: inherit; justify-content: inherit; }

.dn-btn-icon { display: inherit; margin-left: -4px; margin-right: 8px; }

.dn-btn-icon > svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: 20px;
    flex-shrink: 0;
    fill: currentColor;
    user-select: none;
}
