/*
	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;
}

.dark-text-button {
    color: #303030 !important; /* Black text */
}

    .dark-text-button .mud-button-root .mud-button-label {
        color: #303030 !important; /* Dark color for the text */
    }


spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Ensure it's above other content */
}

.mud-card-disabled {
    background-color: #330000;
}
.mud-card-hover:hover {
    background-color: #838394 !important; /* Light grey on hover */
}

.mud-card-clicked {
    background-color: #000000 !important; /* Slightly darker grey on click */
}

.margin-top-20
{
    margin-top:20px !important;
}

.mt-16, .my-16 {
    margin-top: -50px !important
}

.scroll-container {
    position: relative; /* Allows absolute positioning inside this container */
    display: flex;
    align-items: center; /* Center arrows vertically */
}

.horizontal-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    flex-grow: 1; /* Ensures it takes up available space */
    margin-left:20px;
    margin-right:20px;
}
    .horizontal-scroll-wrapper::-webkit-scrollbar {
        
    }

    .horizontal-scroll-wrapper > .mud-grid {
        display: flex;
        flex-wrap: nowrap;
    }

.arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    font-size: 36pt;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ and Edge */
    user-select: none; 
    margin-top:10px
}

.left-arrow {
    left: 0;
}

.right-arrow {
    right: 0;
}

.arrow.hidden {
    display: none;
}


.mud-grid-item-custom {
    flex: 0 0 auto; /* Prevent flex items from growing or shrinking to fit */
}

.mud-grid-spacing-xs-3
{
    margin:0px !important;
}

.center-text {
    margin-top:25px;
   text-align:center;  
}

.bordered-div {
    margin-left:auto;
    margin-right:auto;
    max-width:600px;
    margin-top: 25px;    
    padding:30px;
    border: 2px solid var(--mud-palette-primary);
}

.setup-menu-div
{
    margin-top:50px;
}

/* Hide the vertical timeline by default */
.timeline-vertical {
    display: none;
}

/* When the screen size is less than 500px, hide the horizontal timeline and show the vertical one */
@media (max-width: 700px) {
    .timeline-horizontal {
        display: none;
    }

    .timeline-vertical {
        display: block;
    }
}
.rzi 
{
    color:black;
}