/** Scroll Behavior **/
html {
    scroll-behavior: smooth;
}

/** General **/
body {
    background-color: #fafafa !important;
}

.document>div,
p,
ol,
li,
br {
    padding: revert;
    margin: revert;
}

.sticky-navmenu {
    height: fit-content;
    position: sticky;
    z-index: 2;
    align-self: flex-start; /* Ensures it sticks to the top of its container */
}

.mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 20px) calc(100% - 20px) !important;
}

.mud-table-container {
    min-width: -webkit-fill-available;
}

.active-tab-panel {
    background-color: #d1e2e3 !important;
    /* Change to blue when active */
    color: black;
}

.inactive-tab-panel {
    background-color: white !important;
    /* Keep white when inactive */
    color: black;
}

/** Top App Bar **/
.mud-appbar {
    z-index: 1000 !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Input Adornments */
.mud-input-adornment.mud-input-adornment-start.mud-text.mud-input-root-filled-shrink {
    padding-top: 8px;
}

.custom-numeric-field .mud-input-adornment {
    padding-top: 8px;
}

.left-aligned-button {
    justify-content: start !important;
    /* Aligns the content to the start (left) */
    text-align: left !important;
    /* Ensures text is left-aligned */
}

.custom-timeline.mud-timeline-vertical.mud-timeline-position-start::before {
    left: 11px;
}

.custom-timeline.mud-timeline-vertical.mud-timeline-position-start .mud-timeline-item-content,
.custom-timeline.mud-timeline-vertical.mud-timeline-position-end .mud-timeline-item-content {
    max-width: calc(100% - 24px) !important;
}

.mud-timeline-vertical {
    padding-top: 0px !important;
}
.mud-timeline-vertical .mud-timeline-item {
    padding-bottom: 0px !important;
}
.mud-timeline-vertical .mud-timeline-item:not(:last-child) {
    padding-bottom: 24px !important;
}

/*
    For Table
*/
.mud-table-root .mud-table-head .mud-table-cell {
    background-color: #F5F5F5;
    text-align: start;
}

.mud-data-grid .mud-table-cell .column-header {
    display: block !important;
}

.mud-table-root .mud-table-head .mud-table-cell.short {
    text-align: center !important;
}

.nopadding .mud-table-root .mud-table-body tr .mud-table-cell {
    padding: 5px 16px 5px 16px;
}

.mud-card-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.quick-navigation .mud-card-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

.quick-navigation .mud-card-content .mud-nav-link {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 10px !important;
}

.quick-navigation .mud-card-content .mud-nav-link .mud-nav-link-text {
    margin: 0;
}

.quick-navigation .mud-card-content .mud-nav-link .mud-nav-link-text {
    margin: 0;
    display: flex;
    align-items: center;
}

/* Ensure QuickNavigation component is sticky when not inside sticky-navmenu */
.quick-navigation {
    position: sticky;
    top: 100px;
    z-index: 2;
    height: fit-content;
    align-self: flex-start; /* Ensures it sticks to the top of its container */
}

/* When QuickNavigation is inside sticky-navmenu, let the parent handle sticky positioning */
.sticky-navmenu .quick-navigation {
    position: static;
}

/* QuickNavigation responsive behavior */
.quick-navigation .mud-card {
    width: 225px;
    transition: width 0.3s ease;
}

/* When navigation is minimized to FAB */
.quick-navigation .mud-fab {
    width: 40px;
    transition: width 0.3s ease;
    margin-top: 6px !important;
}

/* Ensure FAB is aligned to the top when minimized */
.quick-navigation-fab {
    align-self: flex-start !important;
    margin: 0 !important;
}

.mud-table-root .mud-table-head .mud-table-cell.price {
    text-align: end !important;
}

.mud-table-root .mud-table-body .mud-table-cell.short {
    text-align: center !important;
}

.mud-table-root .mud-table-body .mud-table-cell.price {
    text-align: end !important;
}

.mud-table-root .mud-table-foot .mud-table-cell.short {
    text-align: center !important;
}

.mud-table-root .mud-table-foot .mud-table-cell.price {
    text-align: end !important;
}

.mud-table-root .mud-table-foot .mud-table-row.hover:hover {
    background-color: rgba(250, 250, 250, 1);
}

.mud-table-root .mud-table-foot .mud-table-row.head {
    background-color: #F5F5F5;
}

.mud-input-control.mud-input-control-margin-normal.price.mud-input-control>.mud-input-control-input-container>div.mud-input.mud-input-text.mud-input>input.mud-input-root,
.mud-input-control.price.mud-input-control>.mud-input-control-input-container>div.mud-input.mud-input-text.mud-input>input.mud-input-root {
    text-align: right;
}


.mud-input-adornment.mud-input-adornment-start.mud-text.mud-input-root-filled-shrink {
    padding-top: 0px;
}

.mud-icon-root.mud-svg-icon.title,
.mud-icon-root.mud-svg-icon.mr-2.title,
.title {
    vertical-align: bottom !important;
}

/*
    Nested Tables
*/
.pre-bid-header:first-child>.mud-table-container:first-child>.mud-drop-container:first-child>.mud-table-root:first-child>.mud-table-head .mud-table-row .mud-table-cell {
    background-color: #1E88E5;
    color: #424242 !important;
}

/*
    Recaptcha
*/
.recaptcha-container {
    margin-top: 15px;
}

.recaptcha-container {
    margin-top: 15px;
}

/*
    General Container Rules
*/
/** No padding **/
.np {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.custom-active {
    background-color: #72A8E7 !important;
}


/*
    DANGER
*/
.mud-nav-link:active:not(.mud-nav-link-disabled) {
    background-color: #72A8E7 !important;
}

/*Minimize navmenu if screen height is small*/
@media (max-height: 700px) {
    .mud-drawer .mud-drawer-content {
        overflow: hidden !important;
    }

    .mud-drawer .mud-drawer-content:hover {
        overflow: auto;
    }
}

/*
    Tables
*/
/*Remove selectall checkbox in table*/
/* .no-select-all .mud-table-foot tr.mud-table-row:last-child {
    display: none;
} */

/*Common Table Page Rules*/
.fixed-width {
    overflow: hidden;
}

.fixed-width div {
    width: 100%;
    /* Ensure it takes the full width of the parent */
    white-space: nowrap;
    /* Prevent the text from wrapping */
    overflow: hidden;
    /* Hide any overflowing text */
    text-overflow: ellipsis;
    /* Show ellipses for overflowed text */
    display: block;
    /* Ensure the element behaves like a block-level element */
}

/* Ensure form containers don't overflow */
.d-flex.flex-row {
    max-width: 100%;
}

.d-flex.flex-row > .flex-grow-1 {
    min-width: 0;
    overflow-x: auto;
}

/* Form content area responsive padding */
.form-content-area {
    padding-right: 0.5rem;
    transition: padding-right 0.3s ease;
}

.centered {
    text-align: center !important;
}

/*
    ?
*/
.pre-bid-header:first-child>.mud-table-container:first-child>.mud-drop-container:first-child>.mud-table-root:first-child>.mud-table-head .mud-table-row .mud-table-cell,
.mud-table-root .mud-table-head.table-header .mud-table-cell {
    background-color: #F5F5F5;
    color: #424242 !important;
}

.custom-radio {
    border: 1px solid #ccc;
    /* Adds a border around the radio button */
    border-radius: 3%;
    /* Makes the border circular to match the radio button */
    padding: 4px;
    /* Adjust padding as necessary */
}

/*
    CHSEM
*/
.CHSEMInternalPage .sticky-navmenu {
    height: fit-content;
    position: sticky;
    top: 100px;
    z-index: 9;
    align-self: flex-start;
}

.mud-grid-item.mud-grid-item-xs-2.mud-grid-item-md-2.mt-n15.sticky-navmenu,
.mud-grid-item.mud-grid-item-xs-2.mud-grid-item-md-2.sticky-navmenu {
    height: fit-content;
    position: sticky;
    top: 124px;
    z-index: 9;
    align-self: flex-start;
}

.button-container {
    display: flex;
    justify-content: flex-end !important;
}

.button-dialog-container {
    display: flex;
    justify-content: flex-end;
    margin-inline-end: 16px;
    margin-bottom: 16px;
}

/*Custom Class*/
.w-100 {
    width: 100% !important;
}

.cursor-pointer {
    cursor: pointer;
}

.child-table .mud-table-cell {
    padding-left: 56.67px !important;
}

/*Typography*/
.title {
    letter-spacing: -.02em;
}

/*Colors*/
:root {
    --promizure: #1E88E5;
    --orange-lighten2: #FFB74D;
    /* Basic Colors */
    --black: #000000;
    --white: #FFFFFF;
    --transparent: transparent;
    --default-border: rgb(226, 232, 240);
}

.info-container {
    padding: 16px;
    margin-bottom: 16px;
    background-color: #f5f8fa;
    border-radius: 0px;
}

/** Text Fields **/
/* change outlined style to hide moving label (AKA legend) */
.mud-input.mud-input-outlined.mud-shrink>.mud-input-outlined-border legend {
    display: none !important;
}

/* change filled style to be IFTA */
.mud-input.mud-input-filled {
    background-color: white !important;
    border: 1px solid #e0e0e0;
}

/*Text Input when disabled*/
.mud-input.mud-input-filled.mud-disabled {
    /* color: #9f9f9f !important; */
    /* background-color: #f0f0f0 !important; */
}

@media (hover: hover) and (pointer: fine) {
    .mud-input .mud-input-filled:hover {
        background: none !important;
    }
}

/** Outlined input fields styling **/
.mud-input-outlined-with-label>div>label {
    transform: translate(10px, 8px) scale(0.8) !important;
    line-height: 1.2 !important;
}
.mud-input-outlined-with-label>div>div>textarea {
    padding-top: 14px !important;
    margin-left: -4px !important;
}
.mud-input-outlined-with-label .mud-shrink > .mud-input-root:not(textarea) {
    padding-top: 28px !important;
}
.mud-input-outlined-with-label>.mud-input-adornment.mud-select-input {
    padding-top: 0px !important;
}
.mud-input-outlined-with-label .mud-shrink > .mud-input-adornment
{
    padding-top: 14px;
}
.mud-input-outlined-with-label>input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding: 14px 14px 14px 14px !important;
}
/* When fields are disabled */
.mud-input.mud-disabled,.mud-input.mud-disabled>.mud-input-adornment, .mud-input-label.mud-disabled {
    color: #494949 !important;
    background-color: #f0f0f0 !important;
}
/* Remove required aria and if field is disabled or readonly */
.mud-input-control.mud-input-required>.mud-input-control-input-container>.mud-input-label::after {
    content: "" !important;
}
/* Remove aria from disabled fields */
.mud-input-control>.mud-input-control-input-container>.mud-input-label-inputcontrol.mud-disabled::after {
    content: "" !important;
}
/* Optional aria */
.mud-input-control:not(.mud-input-required) .mud-input-label::after {
    content: " - optional" !important;
    font-style: italic;
    font-weight: 600;
}

/* adornments */
/* .mud-input.mud-input-outlined.mud-input-adorned-start {
    padding-inline-start: 10px !important;
} */

.mud-item-custom-width {
    width: 100% !important;
    /* Default to full width for small screens */
}

.mud-flex-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Default gap for small screens */
}

@media (min-width: 600px) {

    /* 600px is the default 'sm' breakpoint in MudBlazor */
    .mud-item-custom-width {
        width: 49.5% !important;
        /* Apply 50% width when screen size is sm or larger */
    }

    .mud-flex-column {
        gap: 16px;
        /* Larger gap for medium screens and up */
    }
}

/* Hide dropdown icons on disabled fields */
.mud-input.mud-disabled>.mud-input-adornment>.mud-button-root {
    visibility: hidden;
}

/* Remove dotted borders */
.mud-input.mud-input-filled.mud-input-underline.mud-disabled:before {
    border: none !important;
}

/*Remove grey background color */
/* .mud-input.mud-input-filled.mud-disabled {
        background: none !important;
        border-radius: 4px;
            /* border: none !important; 
} */
/* .mud-input>textarea.mud-input-root, .mud-input.mud-disabled>.mud-input-adornment, .mud-disabled .mud-input-root {
    color: var(--mud-palette-text-primary) !important;
} */

/** Mudchip Modifications **/
.mud-chip>.mud-chip-content {
    font-weight: 500;
}

.mud-chip-text {
    border: 1px solid;
}

/** WASM Loading Page **/
#wasm-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    flex-direction: column;
    /* Stack elements */
    border: 1px solid !important;
}

/** Loading Progress Components **/
.loading-progress-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
}

.loading-progress-circular {
    width: 48px;
    height: 48px;
    border: 4px solid #e3f2fd;
    border-top: 4px solid #1976d2;
    border-radius: 50%;
    animation: loading-spin 1s linear infinite;
}

@keyframes loading-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/** Bordered Area **/
.bordered-area {
    border: 1.2px solid #F0F0F0;
    border-radius: 6px;
}


/** MainLayout Spacing **/
.responsive-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

@media (min-width: 600px) {
    .responsive-container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (min-width: 1080px) {
    .responsive-container {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}

@media (min-width: 1280px) {
    .responsive-container {
        padding-left: 64px !important;
        padding-right: 64px !important;
    }
}

/** Main Header Bar **/
.responsive-container>.mud-toolbar-appbar {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.content {
    flex: 1;
    /* Pushes footer to the bottom */
}

.multiline-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
}

.border-upload-gray {
    border: 1px solid #bfbfbf;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
}

.border-upload-gray .mud-input-label
{
    font-size: 0.8rem !important;
    font-weight: 400;
}

.border-upload-gray .mud-file-upload>.mud-input-control-input-container
{
    font-size: 1rem !important;
    font-weight: 400;
}

.border-upload-gray .mud-input-label:not(.mud-input-required)::after {
    content: " - optional" !important;
    font-style: italic;
    font-weight: 600;
}

.border-upload-gray.disabled .mud-input-label:not(.mud-input-required)::after {
    content: "" !important;
}

/* AppSideNavbar */
.app-side-navbar {
    position: fixed;
    top: 64px;
    left: 12px;
    height: calc(100vh - 64px);
}