html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

#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-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuOTI5IDUxLjMwNCAyNjYuOTQgNTEuOTEyTDI4OS45NzggNjMuMzgxQzI5Mi4wOTkgNjQuNjE1IDI5My4zNDUgNjYuNjQzIDI5My4zNzQgNjguNjlWOTEuMzExQzI5My4zNDUgOTMuMzU4IDI5Mi4wOTkgOTUuMzg2IDI4OS45NzggOTYuNjJMMjY2LjkxNiAxMDguMDkxQzI2NC43OTQgMTA5LjMyNCAyNjIuMjE4IDEwOS4zMjQgMjYwLjA5NiAxMDguMDkxTDIzNy4wNCA5Ni42MkMyMzQuOTE4IDk1LjM4NiAyMzMuNjcyIDkzLjM1OCAyMzMuNjI2IDkxLjMxMVY2OC42OUMyMzMuNjcyIDY2LjY0MyAyMzQuOTE4IDY0LjYxNSAyMzcuMDQgNjMuMzgxTDI2MC4wNTIgNTEuOTEyQzI2MS4wNjIgNTEuMzA0IDI2Mi4yNzMgNTEgMjYzLjUwNiA1MVoiIHN0cm9rZT0iI0UwMUUwMCIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgc3Ryb2tlLW1pdGVybGltaXQ9IjgiIHN0cm9rZS1vcGFjaXR5PSIxIiBmaWxsPSIjRTAxRTAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L2c+PC9zdmc+) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ==================== LOADING ANIMATION ==================== */

.loader-full-screen {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #e6f0f5;
}

.loader-container {
    position: relative;
    height: 512px;
}

.icon-container {
    position: absolute;
    width: 512px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.height-animation {
    animation: anim 1s;
    position: absolute;
    bottom: 0;
    height: 512px;
    width: 100%;
    overflow: hidden;
}

@keyframes anim {
    0% {
        max-height: 132px;
    }

    100% {
        max-height: 380px;
    }
}

/* ==================== TABLE STYLING ==================== */

.mud-table-root .mud-table-head .mud-table-cell {
    color: var(--mud-palette-primary) !important;
}

/* Clickable card tiles */
.clickable-card {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.clickable-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Responsive tables */
.mud-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==================== MOBILE RESPONSIVE ==================== */

@media (max-width: 599.98px) {
    .appbar-title {
        font-size: 1rem !important;
        white-space: nowrap;
    }

    .mud-typography-h4 {
        font-size: 1.4rem !important;
    }

    .mud-typography-h5 {
        font-size: 1.15rem !important;
    }

    .clickable-card:hover {
        transform: none;
    }

    .mud-table-cell {
        padding: 6px 8px !important;
    }
}