h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9IiI6IiA5IDSMSUciIHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}


.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .card:hover {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

.product-button{
    min-width: 7rem;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Grau mit 50% Transparenz */
    z-index: 1049; /* Unterhalb des Modals, aber oberhalb des restlichen Inhalts */
}

.modal.show {
    z-index: 1050; /* Modal liegt über dem Overlay */
}

.double-underline {
    display: inline-block;
    position: relative;
    text-decoration: underline; /* Erste Linie */
    text-decoration-thickness: 2px; /* Dicke der ersten Linie */
    margin-bottom: 20px;
}

    .double-underline::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px; /* Abstand zur ersten Linie */
        border-bottom: 2px solid black; /* Zweite Linie */
    }
.w90{
    min-width: 90% !important;
}

.sum{
    font-size: 4rem;
}

.loading-progress {
    display: block;
    margin: 60px auto 20px auto;
    width: 64px;
    height: 64px;
}

.loading-progress-bg {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 8;
}

.loading-progress-bar {
    fill: none;
    stroke: #007bff;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 140;
    stroke-dashoffset: 100;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    animation: loading-progress-spin 1s linear infinite;
}

@keyframes loading-progress-spin {
    0% {
        stroke-dashoffset: 140;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.loading-spinner {
    display: block;
    margin: 60px auto 20px auto;
    width: 64px;
    height: 64px;
}

.spinner-bg {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 5;
}

.spinner-fg {
    fill: none;
    stroke: #007bff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 90;
    stroke-dashoffset: 60;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    animation: spinner-rotate 1s linear infinite;
}

@keyframes spinner-rotate {
    0% {
        stroke-dashoffset: 90;
    }
    100% {
        stroke-dashoffset: 0;
    }
}