html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#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+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MS4wNTggOTQuMDcyIDI5MS4wNTggOTQuNjk2QzI5MS4wNTggOTUuOTk5IDI5MC4wMjEgOTcgMjgwLjM4NiA5N0gyNDcuNjE0QzIzNy45NzkgOTcgMjM2Ljk0MiA5NS45OTkgMjM2Ljk0MiA5NC42OTZDMjM2Ljk0MiA5NC4wNzIgMjM3LjEzNyA5My41MTMgMjM3LjM0NCA5Mi45OTZMMjM3LjQ1NSA5Mi43OTUgMjM3LjgxNSA5Mi4xODMxIDI2MC40NjEgNTMuNjI4MyAyNjAuOTQ4IDUyLjc5ODcgMjYxLjQwMiA1Mi4yNjU4QzI2Mi4xOTUgNTEuNDgzNyAyNjIuNzkxIDUxIDI2My41MDYgNTF6TTI2My41MDYgNTIuNzk4N0MyNjEuMDA4IDUyLjc5ODcgMjU5LjcxNyA1My40MTg0IDI1OS4zNDEgNTQuNzk5OUw1NC4yOTkyIDU0LjEzNjYyOTIuMTk5IDkxLjE5NzZHMjU4LjcxNyA5MS40OTQ1IDI1OS4zNDEgOTIuNzk5OUwyNjMuNTMDYgOTIuNzk5OUwyNjcuNjcxIDkyLjc5OTlDMjY4LjI5NSA5MS40OTQ1IDI2OC44MTggOTEuMTk3NiAyNjcuNjcxIDgyLjE5OTlMNjUuNzE2Nzk5OSAyNTkuMzQxIDU0Ljc5OTlDMjY3LjI5NSA1My40MTg0IDI2Ni4wMDggNTIuNzk4NyAyNjMuNTA2IDUyLjc5ODd6TTI2My41MDYgNzEuOTkyN0MyNjQuMzM1IDcxLjk5MjcgMjY1LjEwMiA3Mi43NTk5IDI2NS4xMDIgNzMuNTg4N0MyNjUuMTAyIDc0LjQxNzUgMjY0LjMzNSA3NS4xODQ3IDI2My41MDYgNzUuMTg0N0MyNjIuNjc4IDc1LjE4NDcgMjYxLjkwMiA3NC40MTc1IDI2MS45MDIgNzMuNTg4N0MyNjEuOTAyIDcyLjc1OTkgMjYyLjY3OCA3MS45OTI3IDI2My41MDYgNzEuOTkyN3pNMjYzLjUwNiA3Ny41MTYxQzI2NC4zMzUgNzcuNTE2MSAyNjUuMTAyIDc4LjI4MzMgMjY1LjEwMiA3OS4xMTIxQzI2NS4xMDIgNzkuOTQwOSAyNjQuMzM1IDgwLjcwODIgMjYzLjUwNiA4MC43MDgyQzI2Mi42NzggODAuNzA4MiAyNjEuOTAyIDc5Ljk0MDkgMjYxLjkwMiA3OS4xMTIxQzI2MS45MDIgNzguMjgzMyAyNjIuNjc4IDc3LjUxNjEgMjYzLjUwNiA3Ny41MTYxek0yNjMuNTA2IDg0LjAxMjdDMjY0LjMzNSA4NC4wMTI3IDI2NS4xMDIgODQuNzggMjY1LjEwMiA4NS42MDgyQzI2NS4xMDIgODYuNDM3IDI2NC4zMzUgODcuMjA0MiAyNjMuNTA2IDg3LjIwNDJDMjYyLjY3OCA4Ny4yMDQyIDI2MS45MDIgODYuNDM3IDI2MS45MDIgODUuNjA4MkMyNjEuOTAyIDg0Ljc4IDI2Mi42NzggODQuMDEyNyAyNjMuNTA2IDg0LjAxMjd6IiBmaWxsPSIjRjMyNDIzIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L2c+PC9zdmc+) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Custom class to perfectly center the Belegtresor title in the header. */
.appbar-title-centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

@keyframes golden-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

.onboarding-highlight {
    animation: golden-pulse 2s infinite;
    border: 2px solid rgba(255, 215, 0, 0.6) !important; /* Gold border */
    background-color: rgba(255, 215, 0, 0.1) !important; /* Slight yellow tint */
}
