/*
	This CSS file matches the color scheme from MudBlazor to Bootstrap when utilized for authentication.
	The file remains available at all times for demonstration purposes,
	but it is exclusively employed in the 'App.razor' component when authentication is enabled.
*/

.btn-primary {
    text-transform: uppercase;
    --bs-btn-bg: var(--mud-palette-primary) !important;
    --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
    --bs-nav-link-color: var(--mud-palette-primary) !important;
    --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}

body {
    font-size: 1.2em !important;
}

.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 8px !important;
}

.mud-table-row .mud-table-cell,
.mud-table-cell {
    padding: 4px !important;
}

.mono-font {
    font-family: 'Courier New', Courier, monospace;
    /* Replace 'YourFontFamily' with the desired font family */
    font-size: 20px;
    /* Adjust the font size as needed */
}

.background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/background.webp');
    /* Update with your image path */
    background-size: cover;
    background-position: center;
    z-index: -1;
    /* Ensure it is behind other content */
    opacity: 0.1;
    /* Adjust the opacity to dim the image */
}