/* GLOBAL: START */

:root {
    --main-color: #001529;
    --main-color-monochromatic-100: #002b53;
    --main-color-monochromatic-200: #00417e;
    --main-color-monochromatic-300: #0056a8;
    --main-color-monochromatic-400: #006cd3;
    --main-color-monochromatic-500: #0082fd;
    --primary-color: #1890ff;
    --primary-danger-color: #ff4d4f;
    --font-color-black: #333333;
    --font-color-white: #ececec;
    --main-font: "Open Sans", sans-serif;
}

html,
body,
#root,
#app,
app {
    height: 100%;
    width: 100%;
}

.colorWeak {
    filter: invert(80%);
}

.ant-layout {
    min-height: 100vh;
}

canvas {
    display: block;
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
html {
    height: 100%;
    width: 100%;
}

a.white {
    color: var(--font-color-white);
}

.p-large {
    color: var(--font-color-black);
    font: 400 1.125rem/1.75rem var(--main-font);
}

.list-unstyled {
    list-style: none;
    padding-left: 0;
}

.media {
    -ms-flex-align: start;
    align-items: flex-start;
    display: -ms-flexbox;
    display: flex;
}

.media-body {
    -ms-flex: 1;
    flex: 1;
}

.list-unstyled .media-body {
    margin-left: 0.625rem;
}

.app-loader-wrapper > .app-loader {
    display: block;
}

.app-loader-wrapper > :not(.app-loader) ~ .app-loader {
    display: none;
}

/*Blazor error: START */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/*Blazor error: END */

/* GLOBAL: END */

/* Loader: START */

@keyframes slide {
    0% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(25%);
    }
}

.wasm-loader-background-base {
    animation: slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
    bottom: 0;
    left: -50%;
    opacity: .5;
    position: fixed;
    right: -50%;
    top: 0;
    z-index: 0;
}

.wasm-loader-background-layer-01 {
}

.wasm-loader-background-layer-02 {
    animation-direction: alternate-reverse;
    animation-duration: 4s;
}

.wasm-loader-background-layer-03 {
    animation-duration: 5s;
}

.wasm-loader-content-container {
    background: rgba(255,255,255,.75);
    position: fixed;
    top: 50%;
    left: 50%;
    border-radius: .25em;
    box-shadow: 0 0 .25em rgba(0,0,0,.25);
    box-sizing: border-box;
    padding: 0.5vmin;
    transform: translate(-50%, -50%);
}

.wasm-loader-content-svg-container {
    width: 15em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wasm-loader-content-description-container {
    width: 30em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.1em;
    margin-bottom: 1em;
    text-align: center;
    color: #2F3034;
    margin: 8px;
}

/* Loader: END */