:root {
    --filled-input-bg: white;
    --custom-card-bg: var(--mud-palette-surface);

}

html[data-theme="WhiteLight"] {
    --filled-input-bg: #f5f6f8;
    --custom-card-bg: #f7f8fa;

}

html[data-theme="GrayLight"] {
    --filled-input-bg: #eceff1;
    --custom-card-bg: #e9ecef;

}

html[data-theme="SlateLight"] {
    --filled-input-bg: #e8edf3;
    --custom-card-bg: #e7edf3;

}

html[data-theme="WarmLight"] {
    --filled-input-bg: #f5eee6;
    --custom-card-bg: #f6efe7;

}

html[data-theme="BlueDark"] {
    --filled-input-bg: #172033;
    --custom-card-bg: #172235;
}

html[data-theme="BlackDark"] {
    --filled-input-bg: #181818;
    --custom-card-bg: #1b1b1b;

}

html[data-theme="GraphiteDark"] {
    --filled-input-bg: #24272b;
    --custom-card-bg: #25282d;

}

html[data-theme="EmeraldDark"] {
    --filled-input-bg: #16302b;
    --custom-card-bg: #15302a;

}

html[data-theme="MidnightPurple"] {
    --filled-input-bg: #211a33;
    --custom-card-bg: #211a34;

}

html[data-theme="HighContrast"] {
    --filled-input-bg: #000;
    --custom-card-bg: #000;

}

.mud-input-filled {
    background-color: var(--filled-input-bg) !important;
}

.custom-card {
    background-color: var(--custom-card-bg) !important;
    padding: 10px;
    border-radius: 10px !important;
}