:root {
    --lumo-secondary-text-color: var(--color-text-average-transparent);
    --lumo-primary-text-color: var(--color-text-average);
    --lumo-header-text-color: var(--color-text-main);
    --lumo-body-text-color: var(--color-text-main);
    --lumo-tertiary-text-color: var(--color-text-average);

    --lumo-primary-color-10pct: #1676F319;

    --lumo-contrast-90pct: #6e8091;
    --lumo-contrast-60pct: #6e809177;
    --lumo-contrast-30pct: #6e809170;
    --lumo-contrast-20pct: #6e809160;
    --lumo-contrast-10pct: #6e809155;
    --lumo-contrast-5pct: #6e809133;
    --lumo-base-color: var(--color-background-white);

    --color-delete: #d9534f;
    --color-delete-hover: #d20700;
    --color-decline: #999999;
    --color-accept: #4CAF50;


    --color-tx-label-background: #a29574;
    --color-tx-label-dep-background: #afdac1;
    --color-tx-label-with-background: #d99294;
    --color-tx-label-buy-background: #799fcb;
    --color-tx-label-sell-background: #ded29e;

    --color-error: #DC143C;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    overflow: hidden;
}

body {
    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app-loading-indicator.hiding {
    opacity: 0;
}

.app-loading-indicator {
    background-color: white;
    background-color: var(--color-background-accent);
    width: 100%;
    height: 100%;
    position: fixed;
    opacity: 1;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    transition: opacity 500ms;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.app-loading-logo {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-animation: fadein 500ms;
    -moz-animation: fadein 500ms;
    animation: fadein 500ms;
    width: 17rem;
    margin-bottom: 40px;
}

.loader {
    width: 5rem;
    height: 5rem;
    margin: 0 auto;
    position: relative;
}

.loader svg {
    width: 5rem;
    height: 5rem;
}

.timeout-error {
    color: gray;
    font-size: 1.2rem;
    height: 5rem;
    position: relative
}

.hidden {
    display: none
}