/*
	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.
*/

a {
    color: #2D6E8D;
    text-decoration: underline;
    cursor: pointer;
}

.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;
}

.mud-main-content {
    height: calc(100vh - 63px);
    padding-top: 80px;
    overflow-y: scroll;
}

.flex {
    display: flex;
}

.flex > div {
    flex: 1 1;
}

.mud-input-control-helper-container:has(.mud-input-error) {
    padding: 0 !important;
}

.logout-button-text {
    font-size: 14px;
    font-weight: 600;
}

footer > .mud-toolbar-appbar {
    display: flex;
    justify-content: center;
}

.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mud-dialog-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.tile {
    width: 267px;
    height: 114px;
    gap: 0px;
    border-radius: 4px 0px 0px 0px;
}

.flex-container {
    display: flex;
    align-items: center;
    padding: 16px 0px 16px 0px;
}

.o-zero,
.o-zero * {
    opacity: 0 !important;
}

.mud-input.mud-disabled {
    cursor: default;
    background-color: #EFEFEF;
}

.vertical-options .mud-radio  {
    display: flex !important;
}
.vertical-options .mud-radio-group {
    display: block !important;
}
.mud-input.mud-input-outlined {
    border-radius: 4px;
}
/*This style prevents auto-focus of the title element on initial load*/
.title:focus {
    outline: none !important;
}

.select-popover {
    z-index: 1500 !important;
}

.footer-link {
    font-size: 12px;
    font-weight: 600;
}

.focused-app-bar {
    margin-top: 40px;
    transition: margin-top 0.3s ease-in-out;
}

.mud-markdown-body a[target="_blank"] {
    color: #2D6E8D !important;
}

.caption .mud-typography-body1 {
    font-size: 0.80rem !important;
}

.text-transform-none {
    text-transform: none;
}