html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

/* One variable drives the whole DevExpress theme (buttons, links, focus, selection). This is the ASAP teal. */
:root,
html,
body {
    --dxbl-accent-color: #0b6074;
}

/* Header brand: the OER seal with the product name. The element and class come from the XAF header template. */
.header-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
}

.header-logo::before {
    content: "";
    width: 38px;
    height: 38px;
    background: url("../images/ASAPLogo.png") center / contain no-repeat;
}

.header-logo::after {
    content: "ASAP 2.0";
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #0a3d4c;
    white-space: nowrap;
}

/* Loading screen: the stock splash squeezes the image into 46x30 px on a coloured disc, which flattens the round seal.
   Give the seal the whole disc, on white, at its own proportions. */
.loading-image-wrapper {
    background-color: #fff !important;
    overflow: hidden;
}

.loading-image {
    width: 112px;
    height: 112px;
    object-fit: contain;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}