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





.mudlike-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

    .mudlike-row > .mudlike-field {
        flex: 1;
    }

.mudlike-field {
    position: relative;
    margin-top: 16px;
}

.mudlike-label {
    position: absolute;
    top: -9px;
    left: 12px;
    padding: 0 6px;
    font-size: 0.75rem;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-secondary, #666);
}

.mudlike-inputhost {
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.23));
    border-radius: var(--mud-default-borderradius, 4px);
    padding: 14px 12px; /* space around the iframe */
    min-height: 56px; /* matches MudTextField height */
    display: flex;
    align-items: center;
}

.mudlike-field:focus-within .mudlike-inputhost {
    border-width: 2px;
    border-color: var(--mud-palette-primary, #594ae2);
}



/* These rules are what Collect.js "sniffs" from a temporary <input> it creates */
#nmi-ccnumber input,
#nmi-ccexp input,
#nmi-cvv input {
    background-color: rgba(255,255,255,0.08); /* Mud dark-ish grey */
    color: rgba(255,255,255,0.87);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    padding: 16px 12px;
    height: 56px;
    box-sizing: border-box;
    font-size: 16px;
}

    /* Placeholder */
    #nmi-ccnumber input::placeholder,
    #nmi-ccexp input::placeholder,
    #nmi-cvv input::placeholder {
        color: rgba(255,255,255,0.5);
    }

/* Optional: iframes often get these classes on the outer frame */
.CollectJSInvalid {
    outline: 2px solid #f44336;
    outline-offset: 2px;
}