/* Import Open Iconic */
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* Global Styles */
html, body {
    @apply font-sans bg-white text-gray-900; /* Tailwind default font and text color */
}

h1:focus {
    @apply outline-none; /* Remove outline */
}

/* Links and Button Styling */
a, .btn-link {
    @apply text-blue-600; /* Tailwind blue */
}

.btn-primary {
    @apply text-white bg-blue-600 border-blue-700; /* Tailwind primary button */
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    @apply ring-4 ring-blue-500 focus:ring-4 focus:ring-white; /* Focus styles */
}

/* Content Padding */
.content {
    @apply pt-4; /* Padding top */
}

/* Validation Styles */
.valid.modified:not([type=checkbox]) {
    @apply outline outline-2 outline-green-500; /* Success validation outline */
}

.invalid {
    @apply outline outline-2 outline-red-500; /* Error validation outline */
}

/* Validation Message */
.validation-message {
    @apply text-red-500; /* Red text for validation errors */
}



/* Error UI */
#blazor-error-ui {
    @apply fixed bottom-0 left-0 w-full p-4 bg-yellow-100 text-black shadow-md z-50; /* Fixed positioning, padding, background color */
}

    #blazor-error-ui .dismiss {
        @apply cursor-pointer absolute top-1 right-3; /* Dismiss button styling */
    }

.blazor-error-boundary {
    @apply bg-red-600 text-white p-4 pl-16 rounded; /* Background and text for error boundary */
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC88Zz4= no-repeat 1rem/1.8rem, #b32121; background-size: 1.8rem;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."; /* Error message */
    }