html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
max-width: 100vw;
overflow-x: clip;
}
a, .btn-link {
color: #006bb7;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
padding-top: 1.1rem;
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
.glass-card {
background: rgba(255, 255, 255, 0.15) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.glass-panel {
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 24px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}
.bg-top1 {
background-color: #75E4FF !important;
}
.bg-top2 {
background-color: #B8F1FF !important;
}
.bg-top3 {
background-color: #E6FAFF !important;
}
/* !important: app.css loads before MudBlazor.min.css in App.razor's , and MudBlazor's own
.mud-typography-body2 rule sets font-size at the same specificity — on an equal-specificity tie
the later stylesheet wins, so without this these were being silently overridden back to 14px. */
.rank-text-1 {
font-size: 1.5em !important;
}
.rank-text-2 {
font-size: 1.3em !important;
}
.rank-text-3 {
font-size: 1.1em !important;
}
body, html {
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
code, pre, kbd, samp, .font-mono, .mud-code-content {
font-family: 'Geist Mono', SFMono-Regular, Consolas, monospace !important;
}
.pac-container {
z-index: 20000 !important;
}
.stage-card-clickable {
cursor: pointer;
/* !important: app.css loads before MudBlazor.min.css in App.razor's , and MudBlazor's
own .mud-paper rule sets "transition: box-shadow 300ms ..." at the same specificity — on
an equal-specificity tie the later stylesheet wins, so without this the 200ms all-property
transition below gets silently replaced by MudBlazor's 300ms box-shadow-only one. */
transition: all 0.2s ease-in-out !important;
container-type: inline-size;
}
.stage-card-clickable:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
/* MudNumericField has no Color parameter in the installed MudBlazor version (only
AdornmentColor), and its disabled state hard-codes text/label color to
--mud-palette-text-disabled regardless — so the read-only "Konversi ke Gas" fields need a
direct override to show warning-colored text. Global (not scoped .razor.css): MudNumericField
renders its own internal markup, which never receives the component's CSS-isolation scope
attribute, so a scoped selector can't reach it. */
.conversion-field-warning .mud-input.mud-disabled,
.conversion-field-warning .mud-input-label-inputcontrol.mud-disabled {
color: var(--mud-palette-warning) !important;
}
/* ExampleInfoTooltip: MudTooltip's default look (dark bubble, 4px/8px padding) is meant for
short one-line text — override it to match ExampleInfoBox's light-blue card style instead. */
.mud-tooltip.example-info-tooltip {
background-color: #D4E8FF !important;
border: 1px solid var(--mud-palette-primary-lighten);
border-radius: var(--mud-default-borderradius);
padding: 12px !important;
}
/* MaskedTextField's "Disabled" state is implemented via ReadOnly, not MudTextField's own Disabled
param — Disabled would grey out AND disable the visibility-toggle adornment button, making it
unusable in read-only views like the jury inspect dialog. This reproduces the disabled look by
hand (global, not scoped .razor.css, since MudInput renders outside this component's own CSS
scope) while leaving the adornment button itself fully interactive. */
.masked-field-disabled .mud-input-slot,
.masked-field-disabled .mud-input-label-inputcontrol {
color: var(--mud-palette-text-disabled) !important;
-webkit-text-fill-color: var(--mud-palette-text-disabled);
}
.masked-field-disabled .mud-input-slot {
cursor: default;
}
.masked-field-disabled .mud-input-outlined-border {
border-color: var(--mud-palette-lines-inputs) !important;
}
.table-head-bordered th {
padding: 12px 16px;
border: 1px solid var(--mud-palette-table-lines);
}
/* Grand Prize section: two reward cards where hovering one brings it into focus (full size/clarity)
and pushes the other out of focus (shrunk + blurred), rather than showing both at equal weight. */
.grand-prize-focus-row {
display: flex;
align-items: stretch;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
max-width: 100%;
}
.grand-prize-card {
display: flex;
flex: 1 1 320px;
/* Flex items default to min-width:auto, which refuses to shrink below the content's own
intrinsic width — with the accordion gallery and body text inside, that was wider than the
shrunk (unfocused) share of the row, so the row overflowed sideways instead of compressing. */
min-width: 0;
max-width: 620px;
transition: flex-grow 0.5s ease, filter 0.5s ease, transform 0.5s ease, opacity 0.5s ease;
transform-origin: center;
}
/* .grand-prize-card is itself a flex container around its one child (the card's content) — once
flex-grow gives it more width than that content needs, the leftover space defaults to sitting on
the right (flex-start). Hadiah Sales sits on the LEFT of the row, so that leftover space showed
up as a gap between its visible content and Hadiah Area next to it — flex-end closes that gap. */
.grand-prize-card--sales {
justify-content: flex-end;
}
.grand-prize-card--focused {
/* flex-grow: 1.75;*/
filter: none;
transform: scale(1);
opacity: 1;
z-index: 1;
}
.grand-prize-card--unfocused {
/* flex-grow: 0.8;*/
filter: blur(2.5px);
transform: scale(0.94);
opacity: 0.8;
}
.grand-prize-subcard {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 900px) {
.grand-prize-card,
.grand-prize-card--focused,
.grand-prize-card--unfocused {
flex-grow: 1;
filter: none;
transform: none;
opacity: 1;
}
}