@import "https://fonts.googleapis.com/css2?family=Roboto&display=swap";
:root {--scoped: 1;--size: 16px;--font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;--font-icon: "Material Symbols Outlined";--speed1: 0.1s;--speed2: 0.2s;--speed3: 0.3s;--speed4: 0.4s;
}
:root,
body.light,
.myrp-ui .app.light {--primary: #00a3e1;--on-primary: #ffffff;--primary-container: #cbe6ff;--on-primary-container: #001e31;--secondary: #50606f;--on-secondary: #ffffff;--secondary-container: #d4e4f6;--on-secondary-container: #0d1d2a;--tertiary: #66587b;--on-tertiary: #ffffff;--tertiary-container: #ecdcff;--on-tertiary-container: #211534;--error: #ba1a1a;--on-error: #ffffff;--error-container: #ffdad6;--on-error-container: #410002;--background: #fcfcff;--on-background: #1a1c1e;--surface: var(--surface-container-high);--on-surface: #1a1c1e;--surface-variant: var(--surface-container-high);--on-surface-variant: #42474d;--outline: #72787e;--outline-variant: #c1c7ce;--shadow: #000000;--scrim: #000000;--inverse-surface: #2f3133;--inverse-on-surface: #f0f0f4;--inverse-primary: #90cdff;--surface-dim: #d9dadd;--surface-bright: #f9f9fc;--surface-container-lowest: #ffffff;--surface-container-low: #f3f3f6;--surface-container: #edeef1;--surface-container-high: #e8e8eb;--surface-container-highest: #e2e2e5;--fill: rgba(0, 0, 0, 0.025);--loader: rgba(255, 255, 255, 0.8);--warning: #ff8c00;--on-warning: #ffffff;--warning-container: #ffdcbe;--on-warning-container: #2c1600;--success: #00bf7f;--on-success: #ffffff;--success-container: #d0f0c0;--on-success-container: #002106;--overlay: rgb(0 0 0 / 0.5);--active: rgb(0 0 0 / 0.1);--elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);--elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);--elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
}
body.dark,
.myrp-ui .app.dark {--primary: #00a3e1;--on-primary: #ffffff;--primary-container: #004b72;--on-primary-container: #cbe6ff;--secondary: #b8c8d9;--on-secondary: #22323f;--secondary-container: #004b72;--on-secondary-container: #cbe6ff;--tertiary: #d1bfe7;--on-tertiary: #372b4a;--tertiary-container: #4e4162;--on-tertiary-container: #ecdcff;--error: #ffb4ab;--on-error: #690005;--error-container: #93000a;--on-error-container: #ffb4ab;--background: #1a1c1e;--on-background: #e2e2e5;--surface: #02253b;--on-surface: #e2e2e5;--surface-variant: #42474d;--on-surface-variant: #c1c7ce;--outline: #c1c7ce;--outline-variant: #72787e;--shadow: #000000;--scrim: #000000;--inverse-surface: #e2e2e5;--inverse-on-surface: #2f3133;--inverse-primary: #006496;--surface-dim: #111416;--surface-bright: #37393c;--surface-container-lowest: #0c0e11;--surface-container-low: #224257;--surface-container: #3d596b;--surface-container-high: #282a2d;--surface-container-highest: #3d596b;--fill: rgba(255, 255, 255, 0.05);--loader: rgba(0, 0, 0, 0.8);--warning: #ffdcbe;--on-warning: #4a2800;--warning-container: #dd571c;--on-warning-container: #ffdcbe;--success: #86d988;--on-success: #00390e;--success-container: #005319;--on-success-container: #a1f6a1;--overlay: rgb(0 0 0 / 0.5);--active: rgb(255 255 255 / 0.2);--elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);--elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);--elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
}
@font-face {font-family: "Material Symbols Outlined";font-style: normal;font-weight: 400;font-display: swap;src:url("material-symbols-outlined.woff2") format("woff2"),url("cdn/myrp.ui/material-symbols-outlined.woff2") format("woff2");
}
@font-face {font-family: "Material Symbols Rounded";font-style: normal;font-weight: 400;font-display: swap;src:url("material-symbols-rounded.woff2") format("woff2"),url("cdn/myrp.ui/material-symbols-rounded.woff2") format("woff2");
}
@font-face {font-family: "Material Symbols Sharp";font-style: normal;font-weight: 400;font-display: swap;src:url("material-symbols-sharp.woff2") format("woff2"),url("cdn/myrp.ui/material-symbols-sharp.woff2") format("woff2");
}
.myrp-ui *,
.myrp-ui *::before,
.myrp-ui *::after {content: none;background: none;box-sizing: border-box;border-radius: inherit;box-shadow: none;width: auto;height: auto;line-height: normal;padding: 0;margin: 0;position: relative;float: none;transform: none;transition: none;opacity: 1;inset: unset;z-index: auto;-webkit-tap-highlight-color: transparent;vertical-align: middle;color: inherit;
}
body,
.myrp-ui .app,
body.light,
body.dark,
.myrp-ui .app.light,
.myrp-ui .app.dark {color: var(--on-surface);background-color: var(--surface);overflow: unset;font-weight: normal;font-size: 1rem;letter-spacing: normal;padding: 0;margin: 0;
}
.myrp-ui label,
.myrp-ui .label:not(.field) {font-size: 0.75rem;vertical-align: baseline;
}
.myrp-ui a,
.myrp-ui b,
.myrp-ui i,
.myrp-ui span,
.myrp-ui strong {vertical-align: bottom;
}
.myrp-ui a,
.myrp-ui button,
.myrp-ui .button {cursor: pointer;text-decoration: none;display: inline-flex;align-items: center;border: none;font-family: inherit;outline: inherit;justify-content: center;
}
.myrp-ui a,
.myrp-ui button,
.myrp-ui .button,
.myrp-ui i,
.myrp-ui label {user-select: none;
}
.myrp-ui pre,
.myrp-ui code {direction: ltr;
}
.myrp-ui :is(a, button, .button, .chip):focus-visible {outline: 0.125rem solid var(--primary);outline-offset: 0.25rem;
}
.myrp-ui .primary {background-color: var(--primary) !important;color: var(--on-primary) !important;
}
.myrp-ui .primary-text {color: var(--primary) !important;
}
.myrp-ui .primary-border {border-color: var(--primary) !important;
}
.myrp-ui .primary-container {background-color: var(--primary-container) !important;color: var(--on-primary-container) !important;
}
.myrp-ui .secondary {background-color: var(--secondary) !important;color: var(--on-secondary) !important;
}
.myrp-ui .secondary-text {color: var(--secondary) !important;
}
.myrp-ui .secondary-border {border-color: var(--secondary) !important;
}
.myrp-ui .secondary-container {background-color: var(--secondary-container) !important;color: var(--on-secondary-container) !important;
}
.myrp-ui .tertiary {background-color: var(--tertiary) !important;color: var(--on-tertiary) !important;
}
.myrp-ui .tertiary-text {color: var(--tertiary) !important;
}
.myrp-ui .tertiary-border {border-color: var(--tertiary) !important;
}
.myrp-ui .tertiary-container {background-color: var(--tertiary-container) !important;color: var(--on-tertiary-container) !important;
}
.myrp-ui .error {background-color: var(--error) !important;color: var(--on-error) !important;
}
.myrp-ui .error-text {color: var(--error) !important;
}
.myrp-ui .error-border {border-color: var(--error) !important;
}
.myrp-ui .error-container {background-color: var(--error-container) !important;color: var(--on-error-container) !important;
}
.myrp-ui .background {background-color: var(--background) !important;color: var(--on-background) !important;
}
.myrp-ui .surface,
.myrp-ui .surface-dim,
.myrp-ui .surface-bright,
.myrp-ui .surface-container-lowest,
.myrp-ui .surface-container-low,
.myrp-ui .surface-container,
.myrp-ui .surface-container-high,
.myrp-ui .surface-container-highest {background-color: var(--surface) !important;color: var(--on-surface) !important;
}
.myrp-ui .surface-variant {background-color: var(--surface-variant) !important;color: var(--on-surface-variant) !important;
}
.myrp-ui .inverse-surface {background-color: var(--inverse-surface);color: var(--inverse-on-surface);
}
.myrp-ui .inverse-primary {background-color: var(--inverse-primary);color: var(--primary);
}
.myrp-ui .inverse-primary-text {color: var(--inverse-primary) !important;
}
.myrp-ui .inverse-primary-border {border-color: var(--inverse-primary) !important;
}
.myrp-ui .surface-dim {background-color: var(--surface-dim) !important;
}
.myrp-ui .surface-bright {background-color: var(--surface-bright) !important;
}
.myrp-ui .surface-container-lowest {background-color: var(--surface-container-lowest) !important;
}
.myrp-ui .surface-container-low {background-color: var(--surface-container-low) !important;
}
.myrp-ui .surface-container {background-color: var(--surface-container) !important;
}
.myrp-ui .surface-container-high {background-color: var(--surface-container-high) !important;
}
.myrp-ui .surface-container-highest {background-color: var(--surface-container-highest) !important;
}
.myrp-ui .surface-container-low {background-color: var(--surface-container-low) !important;
}
.myrp-ui .black {background-color: #000 !important;
}
.myrp-ui .black-border {border-color: #000 !important;
}
.myrp-ui .black-text {color: #000 !important;
}
.myrp-ui .white {background-color: #fff !important;
}
.myrp-ui .white-border {border-color: #fff !important;
}
.myrp-ui .white-text {color: #fff !important;
}
.myrp-ui .transparent {background-color: transparent !important;box-shadow: none !important;color: inherit !important;
}
.myrp-ui .transparent-border {border-color: transparent !important;
}
.myrp-ui .transparent-text {color: transparent !important;
}
.myrp-ui .fill:not(i) {background-color: var(--fill) !important;color: var(--on-surface-variant) !important;
}
.myrp-ui .warning {background-color: var(--warning) !important;color: var(--on-warning) !important;
}
.myrp-ui .warning-container {background-color: var(--warning-container) !important;color: var(--on-warning-container) !important;
}
.myrp-ui .warning-text {color: var(--warning) !important;
}
.myrp-ui .warning-border {border-color: var(--warning) !important;
}
.myrp-ui .success {background-color: var(--success) !important;color: var(--on-success) !important;
}
.myrp-ui .success-container {background-color: var(--success-container) !important;color: var(--on-success-container) !important;
}
.myrp-ui .success-text {color: var(--success) !important;
}
.myrp-ui .success-border {border-color: var(--success) !important;
}
.myrp-ui .middle-align {display: flex;align-items: center !important;
}
.myrp-ui .bottom-align {display: flex;align-items: flex-end !important;
}
.myrp-ui .top-align {display: flex;align-items: flex-start !important;
}
.myrp-ui .left-align {text-align: start;justify-content: flex-start !important;
}
.myrp-ui .right-align {text-align: end;justify-content: flex-end !important;
}
.myrp-ui .center-align {text-align: center;justify-content: center !important;
}
.myrp-ui .red,
.myrp-ui .red6 {background-color: #f44336 !important;
}
.myrp-ui .red-border {border-color: #f44336 !important;
}
.myrp-ui .red-text {color: #f44336 !important;
}
.myrp-ui .red1 {background-color: #ffebee !important;
}
.myrp-ui .red2 {background-color: #ffcdd2 !important;
}
.myrp-ui .red3 {background-color: #ef9a9a !important;
}
.myrp-ui .red4 {background-color: #e57373 !important;
}
.myrp-ui .red5 {background-color: #ef5350 !important;
}
.myrp-ui .red7 {background-color: #e53935 !important;
}
.myrp-ui .red8 {background-color: #d32f2f !important;
}
.myrp-ui .red9 {background-color: #c62828 !important;
}
.myrp-ui .red10 {background-color: #b71c1c !important;
}
.myrp-ui .pink,
.myrp-ui .pink6 {background-color: #e91e63 !important;
}
.myrp-ui .pink-border {border-color: #e91e63 !important;
}
.myrp-ui .pink-text {color: #e91e63 !important;
}
.myrp-ui .pink1 {background-color: #fce4ec !important;
}
.myrp-ui .pink2 {background-color: #f8bbd0 !important;
}
.myrp-ui .pink3 {background-color: #f48fb1 !important;
}
.myrp-ui .pink4 {background-color: #f06292 !important;
}
.myrp-ui .pink5 {background-color: #ec407a !important;
}
.myrp-ui .pink7 {background-color: #d81b60 !important;
}
.myrp-ui .pink8 {background-color: #c2185b !important;
}
.myrp-ui .pink9 {background-color: #ad1457 !important;
}
.myrp-ui .pink10 {background-color: #880e4f !important;
}
.myrp-ui .purple,
.myrp-ui .purple6 {background-color: #9c27b0 !important;
}
.myrp-ui .purple-border {border-color: #9c27b0 !important;
}
.myrp-ui .purple-text {color: #9c27b0 !important;
}
.myrp-ui .purple1 {background-color: #f3e5f5 !important;
}
.myrp-ui .purple2 {background-color: #e1bee7 !important;
}
.myrp-ui .purple3 {background-color: #ce93d8 !important;
}
.myrp-ui .purple4 {background-color: #ba68c8 !important;
}
.myrp-ui .purple5 {background-color: #ab47bc !important;
}
.myrp-ui .purple7 {background-color: #8e24aa !important;
}
.myrp-ui .purple8 {background-color: #7b1fa2 !important;
}
.myrp-ui .purple9 {background-color: #6a1b9a !important;
}
.myrp-ui .purple10 {background-color: #4a148c !important;
}
.myrp-ui .deep-purple,
.myrp-ui .deep-purple6 {background-color: #673ab7 !important;
}
.myrp-ui .deep-purple-border {border-color: #673ab7 !important;
}
.myrp-ui .deep-purple-text {color: #673ab7 !important;
}
.myrp-ui .deep-purple1 {background-color: #ede7f6 !important;
}
.myrp-ui .deep-purple2 {background-color: #d1c4e9 !important;
}
.myrp-ui .deep-purple3 {background-color: #b39ddb !important;
}
.myrp-ui .deep-purple4 {background-color: #9575cd !important;
}
.myrp-ui .deep-purple5 {background-color: #7e57c2 !important;
}
.myrp-ui .deep-purple7 {background-color: #5e35b1 !important;
}
.myrp-ui .deep-purple8 {background-color: #512da8 !important;
}
.myrp-ui .deep-purple9 {background-color: #4527a0 !important;
}
.myrp-ui .deep-purple10 {background-color: #311b92 !important;
}
.myrp-ui .indigo,
.myrp-ui .indigo6 {background-color: #3f51b5 !important;
}
.myrp-ui .indigo-border {border-color: #3f51b5 !important;
}
.myrp-ui .indigo-text {color: #3f51b5 !important;
}
.myrp-ui .indigo1 {background-color: #e8eaf6 !important;
}
.myrp-ui .indigo2 {background-color: #c5cae9 !important;
}
.myrp-ui .indigo3 {background-color: #9fa8da !important;
}
.myrp-ui .indigo4 {background-color: #7986cb !important;
}
.myrp-ui .indigo5 {background-color: #5c6bc0 !important;
}
.myrp-ui .indigo7 {background-color: #3949ab !important;
}
.myrp-ui .indigo8 {background-color: #303f9f !important;
}
.myrp-ui .indigo9 {background-color: #283593 !important;
}
.myrp-ui .indigo10 {background-color: #1a237e !important;
}
.myrp-ui .blue,
.myrp-ui .blue6 {background-color: #2196f3 !important;
}
.myrp-ui .blue-border {border-color: #2196f3 !important;
}
.myrp-ui .blue-text {color: #2196f3 !important;
}
.myrp-ui .blue1 {background-color: #e3f2fd !important;
}
.myrp-ui .blue2 {background-color: #bbdefb !important;
}
.myrp-ui .blue3 {background-color: #90caf9 !important;
}
.myrp-ui .blue4 {background-color: #64b5f6 !important;
}
.myrp-ui .blue5 {background-color: #42a5f5 !important;
}
.myrp-ui .blue7 {background-color: #1e88e5 !important;
}
.myrp-ui .blue8 {background-color: #1976d2 !important;
}
.myrp-ui .blue9 {background-color: #1565c0 !important;
}
.myrp-ui .blue10 {background-color: #0d47a1 !important;
}
.myrp-ui .light-blue,
.myrp-ui .light-blue6 {background-color: #03a9f4 !important;
}
.myrp-ui .light-blue-border {border-color: #03a9f4 !important;
}
.myrp-ui .light-blue-text {color: #03a9f4 !important;
}
.myrp-ui .light-blue1 {background-color: #e1f5fe !important;
}
.myrp-ui .light-blue2 {background-color: #b3e5fc !important;
}
.myrp-ui .light-blue3 {background-color: #81d4fa !important;
}
.myrp-ui .light-blue4 {background-color: #4fc3f7 !important;
}
.myrp-ui .light-blue5 {background-color: #29b6f6 !important;
}
.myrp-ui .light-blue7 {background-color: #039be5 !important;
}
.myrp-ui .light-blue8 {background-color: #0288d1 !important;
}
.myrp-ui .light-blue9 {background-color: #0277bd !important;
}
.myrp-ui .light-blue10 {background-color: #01579b !important;
}
.myrp-ui .cyan,
.myrp-ui .cyan6 {background-color: #00bcd4 !important;
}
.myrp-ui .cyan-border {border-color: #00bcd4 !important;
}
.myrp-ui .cyan-text {color: #00bcd4 !important;
}
.myrp-ui .cyan1 {background-color: #e0f7fa !important;
}
.myrp-ui .cyan2 {background-color: #b2ebf2 !important;
}
.myrp-ui .cyan3 {background-color: #80deea !important;
}
.myrp-ui .cyan4 {background-color: #4dd0e1 !important;
}
.myrp-ui .cyan5 {background-color: #26c6da !important;
}
.myrp-ui .cyan7 {background-color: #00acc1 !important;
}
.myrp-ui .cyan8 {background-color: #0097a7 !important;
}
.myrp-ui .cyan9 {background-color: #00838f !important;
}
.myrp-ui .cyan10 {background-color: #006064 !important;
}
.myrp-ui .teal,
.myrp-ui .teal6 {background-color: #009688 !important;
}
.myrp-ui .teal-border {border-color: #009688 !important;
}
.myrp-ui .teal-text {color: #009688 !important;
}
.myrp-ui .teal1 {background-color: #e0f2f1 !important;
}
.myrp-ui .teal2 {background-color: #b2dfdb !important;
}
.myrp-ui .teal3 {background-color: #80cbc4 !important;
}
.myrp-ui .teal4 {background-color: #4db6ac !important;
}
.myrp-ui .teal5 {background-color: #26a69a !important;
}
.myrp-ui .teal7 {background-color: #00897b !important;
}
.myrp-ui .teal8 {background-color: #00796b !important;
}
.myrp-ui .teal9 {background-color: #00695c !important;
}
.myrp-ui .teal10 {background-color: #004d40 !important;
}
.myrp-ui .green,
.myrp-ui .green6 {background-color: #4caf50 !important;
}
.myrp-ui .green-border {border-color: #4caf50 !important;
}
.myrp-ui .green-text {color: #4caf50 !important;
}
.myrp-ui .green1 {background-color: #e8f5e9 !important;
}
.myrp-ui .green2 {background-color: #c8e6c9 !important;
}
.myrp-ui .green3 {background-color: #a5d6a7 !important;
}
.myrp-ui .green4 {background-color: #81c784 !important;
}
.myrp-ui .green5 {background-color: #66bb6a !important;
}
.myrp-ui .green7 {background-color: #43a047 !important;
}
.myrp-ui .green8 {background-color: #388e3c !important;
}
.myrp-ui .green9 {background-color: #2e7d32 !important;
}
.myrp-ui .green10 {background-color: #1b5e20 !important;
}
.myrp-ui .light-green,
.myrp-ui .light-green6 {background-color: #8bc34a !important;
}
.myrp-ui .light-green-border {border-color: #8bc34a !important;
}
.myrp-ui .light-green-text {color: #8bc34a !important;
}
.myrp-ui .light-green1 {background-color: #f1f8e9 !important;
}
.myrp-ui .light-green2 {background-color: #dcedc8 !important;
}
.myrp-ui .light-green3 {background-color: #c5e1a5 !important;
}
.myrp-ui .light-green4 {background-color: #aed581 !important;
}
.myrp-ui .light-green5 {background-color: #9ccc65 !important;
}
.myrp-ui .light-green7 {background-color: #7cb342 !important;
}
.myrp-ui .light-green8 {background-color: #689f38 !important;
}
.myrp-ui .light-green9 {background-color: #558b2f !important;
}
.myrp-ui .light-green10 {background-color: #33691e !important;
}
.myrp-ui .lime,
.myrp-ui .lime6 {background-color: #cddc39 !important;
}
.myrp-ui .lime-border {border-color: #cddc39 !important;
}
.myrp-ui .lime-text {color: #cddc39 !important;
}
.myrp-ui .lime1 {background-color: #f9fbe7 !important;
}
.myrp-ui .lime2 {background-color: #f0f4c3 !important;
}
.myrp-ui .lime3 {background-color: #e6ee9c !important;
}
.myrp-ui .lime4 {background-color: #dce775 !important;
}
.myrp-ui .lime5 {background-color: #d4e157 !important;
}
.myrp-ui .lime7 {background-color: #c0ca33 !important;
}
.myrp-ui .lime8 {background-color: #afb42b !important;
}
.myrp-ui .lime9 {background-color: #9e9d24 !important;
}
.myrp-ui .lime10 {background-color: #827717 !important;
}
.myrp-ui .yellow,
.myrp-ui .yellow6 {background-color: #ffeb3b !important;
}
.myrp-ui .yellow-border {border-color: #ffeb3b !important;
}
.myrp-ui .yellow-text {color: #ffeb3b !important;
}
.myrp-ui .yellow1 {background-color: #fffde7 !important;
}
.myrp-ui .yellow2 {background-color: #fff9c4 !important;
}
.myrp-ui .yellow3 {background-color: #fff59d !important;
}
.myrp-ui .yellow4 {background-color: #fff176 !important;
}
.myrp-ui .yellow5 {background-color: #ffee58 !important;
}
.myrp-ui .yellow7 {background-color: #fdd835 !important;
}
.myrp-ui .yellow8 {background-color: #fbc02d !important;
}
.myrp-ui .yellow9 {background-color: #f9a825 !important;
}
.myrp-ui .yellow10 {background-color: #f57f17 !important;
}
.myrp-ui .amber,
.myrp-ui .amber6 {background-color: #ffc107 !important;
}
.myrp-ui .amber-border {border-color: #ffc107 !important;
}
.myrp-ui .amber-text {color: #ffc107 !important;
}
.myrp-ui .amber1 {background-color: #fff8e1 !important;
}
.myrp-ui .amber2 {background-color: #ffecb3 !important;
}
.myrp-ui .amber3 {background-color: #ffe082 !important;
}
.myrp-ui .amber4 {background-color: #ffd54f !important;
}
.myrp-ui .amber5 {background-color: #ffca28 !important;
}
.myrp-ui .amber7 {background-color: #ffb300 !important;
}
.myrp-ui .amber8 {background-color: #ffa000 !important;
}
.myrp-ui .amber9 {background-color: #ff8f00 !important;
}
.myrp-ui .amber10 {background-color: #ff6f00 !important;
}
.myrp-ui .orange,
.myrp-ui .orange6 {background-color: #ff9800 !important;
}
.myrp-ui .orange-border {border-color: #ff9800 !important;
}
.myrp-ui .orange-text {color: #ff9800 !important;
}
.myrp-ui .orange1 {background-color: #fff3e0 !important;
}
.myrp-ui .orange2 {background-color: #ffe0b2 !important;
}
.myrp-ui .orange3 {background-color: #ffcc80 !important;
}
.myrp-ui .orange4 {background-color: #ffb74d !important;
}
.myrp-ui .orange5 {background-color: #ffa726 !important;
}
.myrp-ui .orange7 {background-color: #fb8c00 !important;
}
.myrp-ui .orange8 {background-color: #f57c00 !important;
}
.myrp-ui .orange9 {background-color: #ef6c00 !important;
}
.myrp-ui .orange10 {background-color: #e65100 !important;
}
.myrp-ui .deep-orange,
.myrp-ui .deep-orange6 {background-color: #ff5722 !important;
}
.myrp-ui .deep-orange-border {border-color: #ff5722 !important;
}
.myrp-ui .deep-orange-text {color: #ff5722 !important;
}
.myrp-ui .deep-orange1 {background-color: #fbe9e7 !important;
}
.myrp-ui .deep-orange2 {background-color: #ffccbc !important;
}
.myrp-ui .deep-orange3 {background-color: #ffab91 !important;
}
.myrp-ui .deep-orange4 {background-color: #ff8a65 !important;
}
.myrp-ui .deep-orange5 {background-color: #ff7043 !important;
}
.myrp-ui .deep-orange7 {background-color: #f4511e !important;
}
.myrp-ui .deep-orange8 {background-color: #e64a19 !important;
}
.myrp-ui .deep-orange9 {background-color: #d84315 !important;
}
.myrp-ui .deep-orange10 {background-color: #bf360c !important;
}
.myrp-ui .brown,
.myrp-ui .brown6 {background-color: #795548 !important;
}
.myrp-ui .brown-border {border-color: #795548 !important;
}
.myrp-ui .brown-text {color: #795548 !important;
}
.myrp-ui .brown1 {background-color: #efebe9 !important;
}
.myrp-ui .brown2 {background-color: #d7ccc8 !important;
}
.myrp-ui .brown3 {background-color: #bcaaa4 !important;
}
.myrp-ui .brown4 {background-color: #a1887f !important;
}
.myrp-ui .brown5 {background-color: #8d6e63 !important;
}
.myrp-ui .brown7 {background-color: #6d4c41 !important;
}
.myrp-ui .brown8 {background-color: #5d4037 !important;
}
.myrp-ui .brown9 {background-color: #4e342e !important;
}
.myrp-ui .brown10 {background-color: #3e2723 !important;
}
.myrp-ui .blue-grey,
.myrp-ui .blue-grey6 {background-color: #607d8b !important;
}
.myrp-ui .blue-grey-border {border-color: #607d8b !important;
}
.myrp-ui .blue-grey-text {color: #607d8b !important;
}
.myrp-ui .blue-grey1 {background-color: #eceff1 !important;
}
.myrp-ui .blue-grey2 {background-color: #cfd8dc !important;
}
.myrp-ui .blue-grey3 {background-color: #b0bec5 !important;
}
.myrp-ui .blue-grey4 {background-color: #90a4ae !important;
}
.myrp-ui .blue-grey5 {background-color: #78909c !important;
}
.myrp-ui .blue-grey7 {background-color: #546e7a !important;
}
.myrp-ui .blue-grey8 {background-color: #455a64 !important;
}
.myrp-ui .blue-grey9 {background-color: #37474f !important;
}
.myrp-ui .blue-grey10 {background-color: #263238 !important;
}
.myrp-ui .grey,
.myrp-ui .grey6 {background-color: #9e9e9e !important;
}
.myrp-ui .grey-border {border-color: #9e9e9e !important;
}
.myrp-ui .grey-text {color: #9e9e9e !important;
}
.myrp-ui .grey1 {background-color: #fafafa !important;
}
.myrp-ui .grey2 {background-color: #f5f5f5 !important;
}
.myrp-ui .grey3 {background-color: #eee !important;
}
.myrp-ui .grey4 {background-color: #e0e0e0 !important;
}
.myrp-ui .grey5 {background-color: #bdbdbd !important;
}
.myrp-ui .grey7 {background-color: #757575 !important;
}
.myrp-ui .grey8 {background-color: #616161 !important;
}
.myrp-ui .grey9 {background-color: #424242 !important;
}
.myrp-ui .grey10 {background-color: #212121 !important;
}
.myrp-ui .cursor-none {cursor: default;pointer-events: none;
}
.myrp-ui .cursor-pointer {cursor: pointer;
}
.myrp-ui .cursor-text {cursor: text;
}
.myrp-ui .horizontal {display: inline-flex;flex-direction: row !important;gap: 1rem;inline-size: auto !important;max-inline-size: none !important;
}
.myrp-ui .horizontal > * {margin-block: 0 !important;
}
.myrp-ui .vertical {display: flex;flex-direction: column !important;
}
.myrp-ui :is(a, button, .button, .chip).vertical {display: inline-flex;gap: 0.25rem;block-size: auto !important;max-block-size: none !important;padding-block: 0.5rem;
}
.myrp-ui .vertical > * {margin-inline: 0 !important;
}
.myrp-ui .vertical,
.myrp-ui .vertical.left-align {align-items: flex-start !important;
}
.myrp-ui .vertical.right-align {align-items: flex-end !important;
}
.myrp-ui .vertical.center-align {align-items: center !important;
}
.myrp-ui .vertical > :is([class*=divider]:not(.vertical), .max) {align-self: stretch;
}
.myrp-ui hr,
.myrp-ui .divider,
.myrp-ui .small-divider,
.myrp-ui .medium-divider,
.myrp-ui .large-divider {min-inline-size: 1.5rem;min-block-size: auto;block-size: 0.0625rem;background-color: var(--outline-variant);display: block;margin: 0 !important;border: 0;
}
.myrp-ui hr.medium,
.myrp-ui .medium-divider {margin: 1rem 0 !important;
}
.myrp-ui hr.large,
.myrp-ui .large-divider {margin: 1.5rem 0 !important;
}
hr.small
.myrp-ui .small-divider {margin: 0.5rem 0 !important;
}
.myrp-ui hr.vertical,
.myrp-ui .divider.vertical {min-inline-size: auto;min-block-size: 1.5rem;inline-size: 0.0625rem;
}
.myrp-ui .no-elevate {box-shadow: none !important;
}
.myrp-ui .small-elevate,
.myrp-ui .elevate {box-shadow: var(--elevate1) !important;
}
.myrp-ui .medium-elevate {box-shadow: var(--elevate2) !important;
}
.myrp-ui .large-elevate {box-shadow: var(--elevate3) !important;
}
.myrp-ui .round {border-radius: var(--_round);
}
.myrp-ui .small-round,
.myrp-ui .medium-round,
.myrp-ui .large-round {border-radius: var(--_round) !important;
}
.myrp-ui .top-round,
.myrp-ui .bottom-round,
.myrp-ui .left-round,
.myrp-ui .right-round,
.myrp-ui .round {--_round: 2rem;
}
.myrp-ui .small-round {--_round: 0.5rem;
}
.myrp-ui .medium-round {--_round: 0.75rem;
}
.myrp-ui .large-round {--_round: 3.5rem;
}
.myrp-ui .no-round,
.myrp-ui .square,
.myrp-ui .top-round,
.myrp-ui .bottom-round,
.myrp-ui .left-round,
.myrp-ui .right-round {border-radius: 0 !important;
}
.myrp-ui .top-round {border-start-start-radius: var(--_round) !important;border-start-end-radius: var(--_round) !important;
}
.myrp-ui .bottom-round {border-end-end-radius: var(--_round) !important;border-end-start-radius: var(--_round) !important;
}
.myrp-ui .left-round {border-start-start-radius: var(--_round) !important;border-end-start-radius: var(--_round) !important;
}
.myrp-ui .right-round {border-start-end-radius: var(--_round) !important;border-end-end-radius: var(--_round) !important;
}
.myrp-ui .circle {border-radius: 50%;
}
.myrp-ui :is(button, .button, .chip).circle {border-radius: 2.5rem;
}
.myrp-ui :is(.circle, .square):not(i, img, video, svg),
.myrp-ui :is(.circle, .square).chip.medium {block-size: 2.5rem;inline-size: 2.5rem;padding: 0;
}
.myrp-ui :is(.circle, .square) > span {display: none;
}
.myrp-ui :is(.circle, .square).small:not(i, img, video, svg),
.myrp-ui :is(.circle, .square).chip {block-size: 2rem;inline-size: 2rem;
}
.myrp-ui :is(.circle, .square).large:not(i, img, video, svg) {block-size: 3rem;inline-size: 3rem;
}
.myrp-ui :is(.circle, .square).extra:not(i, img, video, svg) {block-size: 3.5rem;inline-size: 3.5rem;
}
.myrp-ui :is(.circle, .square).round {border-radius: 1rem !important;
}
.myrp-ui .border:not(table, .field) {box-sizing: border-box;border: 0.0625rem solid var(--outline);background-color: transparent;box-shadow: none;
}
.myrp-ui .no-border {border-color: transparent !important;
}
.myrp-ui :is(nav, .row, dialog.max, header.fixed, footer.fixed, menu > a, menu.max, table, .tabs):not(.round) {border-radius: 0;
}
.myrp-ui .border:not(button, .button, table, .field) {border-color: var(--outline-variant);
}
.myrp-ui .no-gap {gap: 0;
}
.myrp-ui .auto-gap {gap: auto;
}
.myrp-ui .tiny-gap {gap: 0.25rem;
}
.myrp-ui .small-gap {gap: 0.5rem;
}
.myrp-ui .medium-gap {gap: 0.75rem;
}
.myrp-ui .gap {gap: 1rem;
}
.myrp-ui .large-gap {gap: 1.25rem;
}
.myrp-ui .extra-gap {gap: 1.5rem;
}
.myrp-ui :is(.no-margin, .auto-margin, .tiny-margin, .small-margin, .medium-margin, .margin, .large-margin, .extra-margin):not(.left-margin, .right-margin, .top-margin, .bottom-margin, .horizontal-margin, .vertical-margin) {margin: var(--_margin) !important;
}
.myrp-ui .no-margin,
.myrp-ui .auto-margin,
.myrp-ui .tiny-margin,
.myrp-ui .small-margin,
.myrp-ui .medium-margin,
.myrp-ui .margin,
.myrp-ui .large-margin,
.myrp-ui .extra-margin,
.myrp-ui .left-margin,
.myrp-ui .right-margin,
.myrp-ui .top-margin,
.myrp-ui .bottom-margin,
.myrp-ui .horizontal-margin,
.myrp-ui .vertical-margin {--_margin: 1rem;
}
.myrp-ui .no-margin {--_margin: 0;
}
.myrp-ui .auto-margin {--_margin: auto;
}
.myrp-ui .tiny-margin {--_margin: 0.25rem;
}
.myrp-ui .small-margin {--_margin: 0.5rem;
}
.myrp-ui .large-margin {--_margin: 1.5rem;
}
.myrp-ui .extra-margin {--_margin: 2rem;
}
.myrp-ui .left-margin,
.myrp-ui .horizontal-margin {margin-inline-start: var(--_margin) !important;
}
.myrp-ui .right-margin,
.myrp-ui .horizontal-margin {margin-inline-end: var(--_margin) !important;
}
.myrp-ui .top-margin,
.myrp-ui .vertical-margin {margin-block-start: var(--_margin) !important;
}
.myrp-ui .bottom-margin,
.myrp-ui .vertical-margin {margin-block-end: var(--_margin) !important;
}
.myrp-ui .no-opacity {opacity: 1 !important;
}
.myrp-ui .opacity {opacity: 0 !important;
}
.myrp-ui .small-opacity {opacity: 0.75 !important;
}
.myrp-ui .medium-opacity {opacity: 0.5 !important;
}
.myrp-ui .large-opacity {opacity: 0.25 !important;
}
.myrp-ui :is(.no-padding, .auto-padding, .tiny-padding, .small-padding, .medium-padding, .padding, .large-padding, .extra-padding):not(.left-padding, .right-padding, .top-padding, .bottom-padding, .horizontal-padding, .vertical-padding) {padding: var(--_padding) !important;
}
.myrp-ui .no-padding,
.myrp-ui .auto-padding,
.myrp-ui .tiny-padding,
.myrp-ui .small-padding,
.myrp-ui .medium-padding,
.myrp-ui .padding,
.myrp-ui .large-padding,
.myrp-ui .extra-padding,
.myrp-ui .left-padding,
.myrp-ui .right-padding,
.myrp-ui .top-padding,
.myrp-ui .bottom-padding,
.myrp-ui .horizontal-padding,
.myrp-ui .vertical-padding {--_padding: 1rem;
}
.myrp-ui .no-padding {--_padding: 0;
}
.myrp-ui .auto-padding {--_padding: auto;
}
.myrp-ui .tiny-padding {--_padding: 0.25rem;
}
.myrp-ui .small-padding {--_padding: 0.5rem;
}
.myrp-ui .medium-padding {--_padding: 0.75rem;
}
.myrp-ui .large-padding {--_padding: 1.5rem;
}
.myrp-ui .extra-padding {--_margin: 2rem;
}
.myrp-ui .left-padding,
.myrp-ui .horizontal-padding {padding-inline-start: var(--_padding) !important;
}
.myrp-ui .right-padding,
.myrp-ui .horizontal-padding {padding-inline-end: var(--_padding) !important;
}
.myrp-ui .top-padding,
.myrp-ui .vertical-padding {padding-block-start: var(--_padding) !important;
}
.myrp-ui .bottom-padding,
.myrp-ui .vertical-padding {padding-block-end: var(--_padding) !important;
}
.myrp-ui .front {z-index: 10 !important;
}
.myrp-ui .front-max {z-index: 100 !important;
}
.myrp-ui .back {z-index: -10 !important;
}
.myrp-ui .left {inset-inline-start: 0;
}
.myrp-ui .right {inset-inline-end: 0;
}
.myrp-ui .top {inset-block-start: 0;
}
.myrp-ui .bottom {inset-block-end: 0;
}
.myrp-ui .center {inset-inline-start: 50%;transform: translateX(-50%);
}
.myrp-ui [dir="rtl"] .center {transform: translateX(50%);
}
.myrp-ui .middle {inset-block-start: 50%;transform: translateY(-50%);
}
.myrp-ui .middle.center {transform: translate(-50%, -50%);
}
.myrp-ui [dir="rtl"] .middle.center {transform: translate(50%, -50%);
}
.myrp-ui :is(.left, .right) {float: none !important;
}
.myrp-ui .ripple {--_duration: 600ms;
}
.myrp-ui .fast-ripple {--_duration: 200ms;
}
.myrp-ui .slow-ripple {--_duration: 1800ms;
}
.myrp-ui .ripple-js {position: absolute;inset: 0;pointer-events: none;overflow: hidden;
}
.myrp-ui .ripple-js > div {position: absolute;border-radius: 50%;background: currentColor;opacity: 0.3;transform: scale(0);animation: to-ripple var(--_duration) linear;
}
@keyframes to-ripple {to {transform: scale(4);opacity: 0;}
}
.myrp-ui .scroll {overflow: auto;min-inline-size: 0;
}
.myrp-ui .no-scroll {overflow: hidden;
}
.myrp-ui .small-width {inline-size: 12rem !important;max-inline-size: 100%;
}
.myrp-ui .medium-width {inline-size: 24rem !important;max-inline-size: 100%;
}
.myrp-ui .large-width {inline-size: 36rem !important;max-inline-size: 100%;
}
.myrp-ui .small-height {block-size: 12rem !important;
}
.myrp-ui .medium-height {block-size: 24rem !important;
}
.myrp-ui .large-height {block-size: 36rem !important;
}
.myrp-ui .wrap {display: block;white-space: normal;
}
.myrp-ui .no-wrap:not(menu) {display: flex;white-space: nowrap;
}
.myrp-ui .tiny-space:not(nav, .row, .grid, table, .tooltip) {block-size: 0.5rem;
}
.myrp-ui :is(.space, .small-space):not(nav, .row, .grid, table, .tooltip) {block-size: 1rem;
}
.myrp-ui .medium-space:not(nav, .row, .grid, table, .tooltip) {block-size: 2rem;
}
.myrp-ui .large-space:not(nav, .row, .grid, table, .tooltip) {block-size: 3rem;
}
.myrp-ui .extra-space:not(nav, .row, .grid, table, .tooltip) {block-size: 4rem;
}
.myrp-ui .responsive {inline-size: -webkit-fill-available;inline-size: -moz-available;
}
@media only screen and (max-width: 600px) {.myrp-ui .m:not(.s),.myrp-ui .l:not(.s),.myrp-ui .m.l:not(.s) {display: none;}
}
@media only screen and (min-width: 601px) and (max-width: 992px) {.myrp-ui .s:not(.m),.myrp-ui .l:not(.m),.myrp-ui .s.l:not(.m) {display: none;}
}
@media only screen and (min-width: 993px) {.myrp-ui .m:not(.l),.myrp-ui .s:not(.l),.myrp-ui .m.s:not(.l) {display: none;}
}
html {font-size: var(--size);
}
body,
.myrp-ui .app {font-family: var(--font);font-size: 1rem;
}
.myrp-ui h1,
.myrp-ui h2,
.myrp-ui h3,
.myrp-ui h4,
.myrp-ui h5,
.myrp-ui h6 {--_size: 1;font-weight: 400;display: block;align-items: center;line-height: normal;font-size: calc(1rem * var(--_size));
}
.myrp-ui h1 {--_size: 3;
}
.myrp-ui h2 {--_size: 2.75;
}
.myrp-ui h3 {--_size: 2.5;
}
.myrp-ui h4 {--_size: 2;
}
.myrp-ui h5 {--_size: 1.75;
}
.myrp-ui h6 {--_size: 1.5;
}
.myrp-ui h1.small {--_size: 2.75;
}
.myrp-ui h2.small {--_size: 2.5;
}
.myrp-ui h3.small {--_size: 2;
}
.myrp-ui h4.small {--_size: 1.75;
}
.myrp-ui h5.small {--_size: 1.5;
}
.myrp-ui h6.small {--_size: 1.25;
}
.myrp-ui h1.large {--_size: 3.25;
}
.myrp-ui h2.large {--_size: 3;
}
.myrp-ui h3.large {--_size: 2.75;
}
.myrp-ui h4.large {--_size: 2.25;
}
.myrp-ui h5.large {--_size: 2
}
.myrp-ui h6.large {--_size: 1.75;
}
.myrp-ui .link {color: var(--primary) !important;
}
.myrp-ui .inverse-link {color: var(--inverse-primary) !important;
}
.myrp-ui .truncate {overflow: hidden;white-space: nowrap !important;text-overflow: ellipsis;flex: inherit;
}
.myrp-ui .truncate > * {white-space: nowrap !important;
}
.myrp-ui .tiny-text {font-size: 0.75rem;
}
.myrp-ui .small-text {font-size: 0.875rem;
}
.myrp-ui .medium-text {font-size: 1rem;
}
.myrp-ui .large-text {font-size: 1.125rem;
}
.myrp-ui .extra-text {font-size: 1.25rem;
}
.myrp-ui .upper {text-transform: uppercase;
}
.myrp-ui .lower {text-transform: lowercase;
}
.myrp-ui .capitalize {text-transform: capitalize;
}
.myrp-ui .bold {font-weight: bold;
}
.myrp-ui .overline {text-decoration: line-through;
}
.myrp-ui .underline {text-decoration: underline;
}
.myrp-ui .italic {font-style: italic;
}
.myrp-ui p {margin: 0.5rem 0;
}
.myrp-ui .no-line {line-height: normal;
}
.myrp-ui .tiny-line {line-height: 1.25rem;
}
.myrp-ui .small-line {line-height: 1.5rem;
}
.myrp-ui .medium-line {line-height: 1.75rem;
}
.myrp-ui .large-line {line-height: 2rem;
}
.myrp-ui .extra-line {line-height: 2.25rem;
}
.myrp-ui pre {border-radius: 0;background-color: var(--surface-container);white-space: pre-wrap;padding: 1rem;border-inline-start: 0.25rem solid var(--primary);font-family: inherit;
}
.myrp-ui blockquote {border-radius: 0;padding: 1rem;border-inline-start: 0.25rem solid var(--primary);font-family: inherit;
}
.myrp-ui code {border-radius: 0;background-color: var(--surface-container);white-space: pre-wrap;padding: 0.25rem;
}
.myrp-ui pre > code,
.myrp-ui blockquote > code {padding: 0;
}
.myrp-ui .scroll > code {white-space: pre;
}
.myrp-ui pre:has(> code){direction: ltr;text-align: start;
}
.myrp-ui :is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toggle > a):not(.slow-ripple, .ripple, .fast-ripple)::after {content: "";position: absolute;inset: 0;z-index: 1;border-radius: inherit;inline-size: 100%;block-size: 100%;background-position: center;background-image: radial-gradient(circle, currentColor 1%, transparent 1%);opacity: 0;transition: none;
}
.myrp-ui :is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toggle > a):not(.slow-ripple, .ripple, .fast-ripple):is(:focus-visible, :hover)::after {background-size: 15000%;opacity: 0.1;transition: background-size var(--speed2) linear;
}
.myrp-ui :is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toggle > a):not(.slow-ripple, .ripple, .fast-ripple):active::after {background-size: 5000%;opacity: 0;transition: none;
}
.myrp-ui .no-wave::after,
.myrp-ui .no-wave:is(:hover, :active)::after {display: none;
}
.myrp-ui .zoom,
.myrp-ui .tiny-zoom {zoom: 2;
}
.myrp-ui .small-zoom {zoom: 3;
}
.myrp-ui .medium-zoom {zoom: 4;
}
.myrp-ui .large-zoom {zoom: 5;
}
.myrp-ui .extra-zoom {zoom: 6;
}
.myrp-ui .badge {--_x: 0;--_y: -100%;display: inline-flex;align-items: center;justify-content: center;position: absolute;font-size: 0.6875rem;text-transform: none;z-index: 2;padding: 0 0.25rem;min-block-size: 1rem;min-inline-size: 1rem;background-color: var(--error);color: var(--on-error);line-height: normal;border-radius: 1rem;inset: 50% auto auto 50%;transform: translate(var(--_x, 50%), var(--_y, -50%));font-family: var(--font);
}
.myrp-ui .badge.top {--_y: -100%;
}
.myrp-ui .badge.bottom {--_y: 0;
}
.myrp-ui .badge.left {--_x: -100%;
}
.myrp-ui .badge.right {--_x: 0;
}
.myrp-ui .badge.border {border-color: var(--error);color: var(--error);background-color: var(--surface);
}
.myrp-ui .badge:is(.circle, .square) {text-align: center;inline-size: auto;block-size: auto;padding: 0 0.25rem;border-radius: 1rem;
}
.myrp-ui .badge.square {border-radius: 0;
}
.myrp-ui .badge.min > * {display: none;
}
.myrp-ui .badge.min {clip-path: circle(18.75% at 50% 50%);
}
.myrp-ui nav:is(.left, .right, .top, .bottom) > a > .badge,
.myrp-ui nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a > .badge {inset: 1rem auto auto 50%;
}
.myrp-ui .badge.none {inset: auto !important;transform: none;position: relative;margin: 0 0.125rem;
}
.myrp-ui :is(button, .button, .chip) > .badge.none {margin: 0 -0.5rem;
}
.myrp-ui header,
.myrp-ui footer {max-inline-size: 100vw;padding: 0 1rem;background-color: var(--surface-container);z-index: 99;
}
.myrp-ui :is(header, footer, menu > *).fixed {position: sticky;inset: 0;background-color: inherit;
}
.myrp-ui :is(dialog, menu, article) > :is(header, footer) {background-color: inherit;padding: 0;
}
.myrp-ui :is(main, header, footer, section).responsive {max-inline-size: min(100vw, 75rem);margin: 0 auto;
}
.myrp-ui :is(main, header, footer, section).responsive.max {max-inline-size: none;
}
.myrp-ui main :is(header, footer) {z-index: 12;
}
.myrp-ui footer.fixed {margin: auto 0 0 0;
}
.myrp-ui :is(dialog, .scroll) > header.fixed::before {content: '';position: absolute;background-color: inherit;inset: 0;transform: translateY(-100%);block-size: var(--_padding);
}
.myrp-ui :is(dialog, .scroll) > footer.fixed::before {content: '';position: absolute;background-color: inherit;inset: auto 0 0 0;transform: translateY(100%);block-size: var(--_padding);
}
.myrp-ui :is(dialog, menu, article) > header > :is(nav, .row) {min-block-size: auto;
}
.myrp-ui dialog:is(.left, .right, .top, .bottom, .max) > footer.fixed {border-block-start: 1px solid var(--outline-variant);
}
.myrp-ui nav > header {padding: 0;background-color: inherit;block-size: 4rem;
}
.myrp-ui nav:is(.drawer, .compact) > header {block-size: 4.5rem;align-self: start;
}
.myrp-ui nav:is(.drawer, .compact):not(.rail, .left, .right) > header {align-self: stretch;
}
.myrp-ui .button,
.myrp-ui button {box-sizing: content-box;display: inline-flex;align-items: center;justify-content: center;block-size: 2.5rem;min-inline-size: 2.5rem;font-size: 0.875rem;font-weight: 400;color: var(--on-primary);padding: 0 1.5rem;background-color: var(--primary);margin: 0 0.5rem;border-radius: 0.25rem;transition: var(--speed3) transform, var(--speed3) border-radius,var(--speed3) padding;user-select: none;gap: 1rem;line-height: normal;text-transform: uppercase;
}
.myrp-ui :is(button, .button).tiny {block-size: 1.5rem;min-inline-size: 1.5rem;padding: 0 1rem;
}
.myrp-ui :is(button, .button).small {block-size: 2rem;min-inline-size: 2rem;font-size: 0.875rem;
}
.myrp-ui :is(button, .button).large {block-size: 3rem;min-inline-size: 3rem;
}
.myrp-ui :is(.button, button):is(.extra, .extend) {block-size: 3.5rem;min-inline-size: 3.5rem;font-size: 1rem;
}
.myrp-ui :is(button, .button).border {border-color: var(--primary);color: var(--primary);
}
.myrp-ui .extend > span {display: none;
}
.myrp-ui .extend:is(:hover, .active) {inline-size: auto;padding: 0 1.5rem;
}
.myrp-ui .extend:is(:hover, .active) > i + span {display: inherit;margin-inline-start: 1.5rem;
}
.myrp-ui .extend:is(:hover, .active) > :is(img, svg) + span {display: inherit;margin-inline-start: 2.5rem;
}
.myrp-ui :is(.button, button):is([disabled]) {opacity: 0.5;cursor: not-allowed;
}
.myrp-ui :is(.button):is([disabled]) {pointer-events: none;
}
.myrp-ui :is(.button, button):is([disabled])::before,
.myrp-ui :is(.button, button):is([disabled])::after {display: none;
}
.myrp-ui :is(.button, button).fill {background-color: var(--secondary-container) !important;color: var(--on-secondary-container) !important;
}
.myrp-ui :is(button, .button):not(.chip).transparent {color: var(--primary) !important;
}
.myrp-ui :is(.large-text, .medium-text, .small-text) > :is(button, .button) {font-size: inherit;
}
.myrp-ui article {--_padding: 1.5rem;box-shadow: none;background-color: var(--surface-container-low);color: var(--on-surface);padding: var(--_padding);border-radius: 0.75rem;display: block;transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
}
.myrp-ui * + article {margin-block-start: 1rem;
}
.myrp-ui article.small {block-size: 12rem;
}
.myrp-ui article.medium {block-size: 20rem;
}
.myrp-ui article.large {block-size: 32rem;
}
.myrp-ui article.max {block-size: 100%;
}
.myrp-ui article.scroll {display: flex;flex-direction: column;
}
.myrp-ui .chip {box-sizing: content-box;display: inline-flex;align-items: center;justify-content: center;block-size: 2rem;min-inline-size: 2rem;font-size: 0.875rem;font-weight: 500;background-color: transparent;border: 0.0625rem solid var(--outline-variant);color: var(--on-surface-variant);padding: 0 1rem;margin: 0 0.5rem;text-transform: none;border-radius: 2rem;transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;user-select: none;gap: 1rem;line-height: normal;
}
.myrp-ui .chip.small {block-size: 1.5rem;min-inline-size: 1.5rem;
}
.myrp-ui .chip.medium {block-size: 2.5rem;min-inline-size: 2.5rem;
}
.myrp-ui .chip.large {block-size: 3rem;min-inline-size: 3rem;
}
.myrp-ui .chip.fill {background-color: var(--secondary-container) !important;border-color: transparent;
}
.myrp-ui .chip.border {border-color: var(--outline);
}
.myrp-ui .app {display: grid;grid-template-columns: auto 1fr auto;grid-template-rows: auto auto 1fr auto auto;grid-template-areas:"left top right""left header right""left main right""left footer right""left bottom right";min-block-size: 100dvh;box-sizing: border-box;background-color: var(--surface);overflow: unset;
}
.myrp-ui nav.left {grid-area: left;
}
.myrp-ui nav.right {grid-area: right;
}
.myrp-ui nav.top {grid-area: top;
}
.myrp-ui nav.bottom {grid-area: bottom;
}
.myrp-ui header {grid-area: header;
}
.myrp-ui footer {grid-area: footer;
}
.myrp-ui main {--_padding: 0.5rem;grid-area: main;padding: var(--_padding);overflow: hidden;
}
.myrp-ui aside {z-index: 1;
}
.myrp-ui aside:not(.fixed, .absolute).right {float: right;
}
.myrp-ui aside:not(.fixed, .absolute).left {float: left;
}
.myrp-ui dialog {--_padding: 1.5rem;display: flex;flex-direction: column;border: none;opacity: 0;visibility: hidden;position: fixed;box-shadow: var(--elevate2);color: var(--on-surface);background-color: var(--surface-container-high);padding: var(--_padding);z-index: 100;inset: 10% auto auto 50%;min-inline-size: 20rem;max-inline-size: 100%;max-block-size: 80%;overflow-x: hidden;overflow-y: auto;transition: var(--speed3) all, 0s background-color;border-radius: 1.75rem;transform: translate(-50%, -4rem);outline: none;
}
.myrp-ui [dir="rtl"] dialog {transform: translate(50%, -4rem);
}
.myrp-ui dialog::backdrop {display: none;
}
.myrp-ui dialog.small {inline-size: 25%;block-size: 25%;
}
.myrp-ui dialog.medium {inline-size: 50%;block-size: 50%;
}
.myrp-ui dialog.large {inline-size: 75%;block-size: 75%;
}
.myrp-ui dialog:is(.active, [open]) {opacity: 1;visibility: visible;transform: translate(-50%, 0);
}
.myrp-ui [dir="rtl"] dialog:is(.active, [open]) {transform: translate(50%, 0);
}
.myrp-ui dialog:is(.active, [open]):is(.left, .right, .top, .bottom, .max),
.myrp-ui [dir="rtl"] dialog:is(.active, [open]):is(.left, .right, .top, .bottom, .max) {transform: translate(0, 0);
}
.myrp-ui dialog.top {opacity: 1;inset: 0 auto auto 0;block-size: auto;inline-size: 100vw;min-inline-size: auto;max-block-size: 100vh;transform: translateY(-100%);border-radius: 0 0 1rem 1rem;
}
.myrp-ui dialog.left {opacity: 1;inset: 0 auto auto 0;inline-size: auto;block-size: 100vh;max-block-size: 100vh;border-radius: 0 1rem 1rem 0;background-color: var(--surface);transform: translateX(-100%);
}
.myrp-ui [dir="rtl"] dialog.left {transform: translateX(100%);
}
.myrp-ui dialog.right {opacity: 1;inset: 0 0 auto auto;inline-size: auto;block-size: 100vh;max-block-size: 100vh;border-radius: 1rem 0 0 1rem;background-color: var(--surface);transform: translateX(100%);
}
.myrp-ui [dir="rtl"] dialog.right {transform: translateX(-100%);
}
.myrp-ui dialog.bottom {opacity: 1;inset: auto auto 0 0;block-size: auto;inline-size: 100vw;min-inline-size: auto;max-block-size: 100vh;transform: translateY(100%);border-radius: 1rem 1rem 0 0;
}
.myrp-ui dialog.max {inset: 0 auto auto 0;inline-size: 100%;block-size: 100%;max-inline-size: 100%;max-block-size: 100%;transform: translateY(4rem);background-color: var(--surface);
}
.myrp-ui dialog.small:is(.left, .right) {inline-size: 20rem;
}
.myrp-ui dialog.medium:is(.left, .right) {inline-size: 32rem;
}
.myrp-ui dialog.large:is(.left, .right) {inline-size: 44rem;
}
.myrp-ui dialog.small:is(.top, .bottom) {block-size: 16rem;
}
.myrp-ui dialog.medium:is(.top, .bottom) {block-size: 24rem;
}
.myrp-ui dialog.large:is(.top, .bottom) {block-size: 32rem;
}
.myrp-ui dialog > a.row:is(:hover, .active) {background-color: var(--secondary-container);
}
.myrp-ui dialog > .row {padding: 0.75rem;
}
@media (pointer: coarse) {.myrp-ui body:has(dialog[open], dialog.active) {overflow: hidden;}
}
.myrp-ui summary,
.myrp-ui summary:focus {list-style-type: none;cursor: pointer;outline: none;
}
.myrp-ui summary::-webkit-details-marker {display: none;
}
.myrp-ui details > .page.active {animation: none;
}
.myrp-ui details[open] > .page.active {animation: var(--speed4) to-page ease;
}
.myrp-ui .field {block-size: 3rem;margin-block-end: 2rem;
}
.myrp-ui *:not(.field) + .field {margin-block-start: 1rem;
}
.myrp-ui .grid > * > .field {margin-block-end: 1rem;
}
.myrp-ui .grid > * > .field + .field {margin-block-start: 2rem;
}
.myrp-ui .grid.no-space > * > .field + .field {margin-block-start: 1rem;
}
.myrp-ui .grid.medium-space > * > .field + .field {margin-block-start: 2.5rem;
}
.myrp-ui .grid.large-space > * > .field + .field {margin-block-start: 3rem;
}
.myrp-ui .field.small {block-size: 2.5rem;
}
.myrp-ui .field.large {block-size: 3.5rem;
}
.myrp-ui .field.extra {block-size: 4rem;
}
.myrp-ui .field {border-radius: 0.25rem 0.25rem 0 0;
}
.myrp-ui .field.border {border-radius: 0.25rem;
}
.myrp-ui .field.round.small {border-radius: 1.25rem;
}
.myrp-ui .field.round {border-radius: 1.5rem;
}
.myrp-ui .field.round.large {border-radius: 1.75rem;
}
.myrp-ui .field.round.extra {border-radius: 2rem;
}
.myrp-ui .field::before {content: "";position: absolute;inset: 0;border-radius: inherit;background-color: inherit;
}
.myrp-ui .field.fill::before {background-color: var(--fill);color: var(--on-surface-variant);
}

.myrp-ui .field > :is(i, img, svg, progress, a:not(.helper, .error), .prefix, .suffix) {position: absolute;inset: 50% auto auto auto;transform: translateY(-50%);cursor: pointer;z-index: 0;inline-size: 1.5rem;block-size: 1.5rem;
}
.myrp-ui .field > :is(i, img, svg, progress, a:not(.helper, .error), .prefix, .suffix),
.myrp-ui [dir="rtl"] .field > :is(i, a:not(.helper, .error)):first-child {inset: 50% 1rem auto auto;
}
.myrp-ui .field > :is(i, img, svg, progress, a:not(.helper, .error), .prefix, .suffix ):first-child,
.myrp-ui [dir="rtl"] .field > :is(i, a:not(.helper, .error)) {inset: 50% auto auto 1rem;
}
.myrp-ui .field.invalid > i {color: var(--error);
}
.myrp-ui .field > progress.circle {inset-block-start: calc(50% - 0.75rem) !important;border-width: 0.1875rem;
}
.myrp-ui .field > a:not(.helper, .error) {z-index: 10;
}
.myrp-ui .field > a > :is(i, img, svg, progress, a:not(.helper, .error)) {inline-size: 1.5rem;block-size: 1.5rem;
}

.myrp-ui .field > :is(input, textarea, select, div.chip-container) {appearance: none;border: 0.0625rem solid transparent;padding: 0 0.9375rem;font-family: inherit;font-size: 1rem;inline-size: 100%;block-size: 100%;outline: none;z-index: 1;background: none;resize: none;
}
.myrp-ui .field > :is(input, textarea, select, div.chip-container):focus {border: 0.125rem solid transparent;padding: 0 0.875rem;
}
.myrp-ui input[type="file"],
.myrp-ui input[type="color"],
.myrp-ui :not(.field) > input[type^="date"],
.myrp-ui :not(.field) > input[type^="time"],
.myrp-ui input::-webkit-inner-spin-button,
.myrp-ui input::-webkit-outer-spin-button,
.myrp-ui input::-webkit-calendar-picker-indicator {opacity: 0;position: absolute;inset: 0;inline-size: 100%;block-size: 100%;margin: 0;padding: 0;border: 0;outline: 0;z-index: 2 !important;
}
.myrp-ui input::-webkit-search-decoration,
.myrp-ui input::-webkit-search-cancel-button,
.myrp-ui input::-webkit-search-results-button,
.myrp-ui input::-webkit-search-results-decoration {display: none;
}
.myrp-ui .field.border > :is(input, textarea, select) {border-color: var(--outline);
}
.myrp-ui .field.border > :is(input, textarea, select):focus {border-color: var(--primary);
}
.myrp-ui .field.round > :is(input, textarea, select) {padding-inline: 1.4376rem;
}
.myrp-ui .field.round > :is(input, textarea, select):focus {padding-inline: 1.375rem;
}
.myrp-ui .field.prefix > :is(input, textarea, select, div.chip-container) {padding-inline-start: 2.9375rem;
}
.myrp-ui .field.prefix > .slider {margin-inline-start: 3.5rem;
}
.myrp-ui .field.prefix > :is(input, textarea, select, div.chip-container):focus {padding-inline-start: 2.875rem;
}
.myrp-ui .field.suffix > :is(input, textarea, select, div.chip-container) {padding-inline-end: 2.9375rem;
}
.myrp-ui .field.suffix > .slider {margin-inline-end: 3.5rem;
}
.myrp-ui .field.suffix > :is(input, textarea, select, div.chip-container):focus {padding-inline-end: 2.875rem;
}
.myrp-ui .field:not(.border, .round) > :is(input, textarea, select) {border-block-end-color: var(--outline);
}
.myrp-ui .field:not(.border, .round) > :is(input, textarea, select):focus {border-block-end-color: var(--primary);
}
.myrp-ui .field.round:not(.border, .fill) > :is(input, textarea, select),
.myrp-ui .field.round:not(.border) > :is(input, textarea, select):focus {box-shadow: var(--elevate1);
}
.myrp-ui .field.round:not(.border, .fill) > :is(input, textarea, select):focus {box-shadow: var(--elevate2);
}
.myrp-ui .field.invalid:not(.border, .round) > :is(input, textarea, select),
.myrp-ui .field.invalid:not(.border, .round) > :is(input, textarea, select):focus {border-block-end-color: var(--error);
}
.myrp-ui .field.invalid.border > :is(input, textarea, select),
.myrp-ui .field.invalid.border > :is(input, textarea, select):focus {border-color: var(--error);
}
.myrp-ui .field:has(> :focus) > i {color: var(--primary) !important;
}
.myrp-ui .field.invalid > i {color: var(--error) !important;
}
.myrp-ui .field:has(> :disabled) {opacity: 0.5;cursor: not-allowed;
}
.myrp-ui .field > :disabled {cursor: not-allowed;
}
.myrp-ui .field > select > option {background-color: var(--surface-container);color: var(--on-surface);
}
.myrp-ui .field.label > :is(input, select, div.chip-container) {padding-block-start: 1rem;
}
.myrp-ui .field.label.border:not(.fill) > :is(input, select) {padding-block-start: 0;
}
.myrp-ui .field.label.small > textarea {padding-block-start: 1.125rem;
}
.myrp-ui .field.label > textarea {padding-block-start: 1.375rem;
}
.myrp-ui .field.label.large > textarea {padding-block-start: 1.625rem;
}
.myrp-ui .field.label.extra > textarea {padding-block-start: 1.875rem;
}
.myrp-ui .field.small > textarea,
.myrp-ui .field.small:not(.label) > textarea:focus,
.myrp-ui .field.small.border:not(.fill) > textarea {padding-block-start: 0.625rem;
}
.myrp-ui .field > textarea,
.myrp-ui .field:not(.label) > textarea:focus,
.myrp-ui .field.border:not(.fill) > textarea {padding-block-start: 0.875rem;
}
.myrp-ui .field.large > textarea,
.myrp-ui .field.large:not(.label) > textarea:focus,
.myrp-ui .field.large.border:not(.fill) > textarea {padding-block-start: 1.125rem;
}
.myrp-ui .field.extra > textarea,
.myrp-ui .field.extra:not(.label) > textarea:focus,
.myrp-ui .field.extra.border:not(.fill) > textarea {padding-block-start: 1.375rem;
}
.myrp-ui .field.small.border:not(.fill) > textarea:focus {padding-block-start: 0.5625rem !important;
}
.myrp-ui .field.border:not(.fill) > textarea:focus {padding-block-start: 0.8125rem !important;
}
.myrp-ui .field.large.border:not(.fill) > textarea:focus {padding-block-start: 1.0625rem !important;
}
.myrp-ui .field.extra.border:not(.fill) > textarea:focus {padding-block-start: 1.3125rem !important;
}
.myrp-ui :is(input, select, textarea) {position: relative !important;box-sizing: border-box !important;box-shadow: none !important;transform: none !important;transition: none !important;display: block;
}
.myrp-ui :is(input, select, textarea)::placeholder {color: var(--outline);
}

.myrp-ui .field.label > label {position: absolute;inset: -0.5rem auto auto 1rem;display: flex;inline-size: calc(100% - 5rem);block-size: 4rem;line-height: 4rem;font-size: 1rem;transition: all 0.2s;gap: 0.25rem;white-space: nowrap;border-radius: 0;
}
.myrp-ui .field.label.small > label {block-size: 3.5rem;line-height: 3.5rem;
}
.myrp-ui .field.label.large > label {block-size: 4.5rem;line-height: 4.5rem;
}
.myrp-ui .field.label.extra > label {block-size: 5rem;line-height: 5rem;
}
.myrp-ui .field.label.border.prefix:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {inset-inline-start: 1rem;
}
.myrp-ui .field.label.round > label,
.myrp-ui .field.label.border.prefix.round:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {inset-inline-start: 1.5rem;
}
.myrp-ui .field.label.prefix > label {inset-inline-start: 3rem;
}
.myrp-ui .field.label > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label, div:has(> .chip) + input + label) {block-size: 2.5rem;line-height: 2.5rem;font-size: 0.75rem;
}
.myrp-ui .field.label.border:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {block-size: 1rem;line-height: 1rem;
}
.myrp-ui .field.label.border:not(.fill) > label::after {content: "";display: block;margin-block-start: 0.5rem;border-block-start: 0.0625rem solid var(--outline);block-size: 1rem;transition: none;flex: auto;
}
.myrp-ui .field.label.border:not(.fill) > :focus + label::after {border-block-start: 0.125rem solid var(--primary);
}
.myrp-ui .field.label.border:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
.myrp-ui .field.label.border:not(.fill) > select {clip-path: polygon(-2% -2%,0.75rem -2%,0.75rem 0.5rem,calc(100% - 5rem) 0.5rem,calc(100% - 5rem) -2%,102% -2%,102% 102%,-2% 102%);
}
.myrp-ui label > * {align-self: center;vertical-align: baseline;
}
.myrp-ui [dir="rtl"] .field.label.border:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
.myrp-ui [dir="rtl"] .field.label.border:not(.fill) > select {clip-path: polygon(-2% -2%,5rem -2%,5rem 0.5rem,calc(100% - 0.75rem) 0.5rem,calc(100% - 0.75rem) -2%,102% -2%,102% 102%,-2% 102%);
}
.myrp-ui .field.label.border.round:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
.myrp-ui .field.label.border.round:not(.fill) > select {clip-path: polygon(-2% -2%,1.25rem -2%,1.25rem 0.5rem,calc(100% - 5rem) 0.5rem,calc(100% - 5rem) -2%,102% -2%,102% 102%,-2% 102%);
}
.myrp-ui [dir="rtl"] .field.label.border.round:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
.myrp-ui [dir="rtl"] .field.label.border.round:not(.fill) > select {clip-path: polygon(-2% -2%,5rem -2%,5rem 0.5rem,calc(100% - 1.25rem) 0.5rem,calc(100% - 1.25rem) -2%,102% -2%,102% 102%,-2% 102%);
}
.myrp-ui .field.label > :focus + label {color: var(--primary) !important;
}
.myrp-ui .field.label.invalid > label,
.myrp-ui .field.label.invalid > label::after {color: var(--error) !important;border-color: var(--error) !important;
}
.myrp-ui .field.label > label > a {block-size: inherit;line-height: inherit;inline-size: 1rem;
}
.myrp-ui .field.label > label > a > :is(i, img, svg) {block-size: 1rem;line-height: 1rem;inline-size: 1rem;font-size: 1rem;
}
.myrp-ui label::after {opacity: 1 !important;position: relative !important;inset: unset !important;
}
.myrp-ui .field.label > label > i,
.myrp-ui .field.label > label > .front > i,
.myrp-ui .field.label > label > a > i {--_size: 1rem;
}

.myrp-ui .field > :is(.helper, .error),
.myrp-ui .field + :is(.helper, .error) {position: absolute;inset: auto 1rem 0 1rem;transform: translateY(100%);font-size: 0.75rem;background: none !important;padding-block-start: 0.125rem;display: flex;gap: 0.25rem;
}
.myrp-ui .field + :is(.helper, .error) {inset: auto auto 0 1rem;transform: none;
}
.myrp-ui a.helper {color: var(--primary);
}
.myrp-ui .field > .error {color: var(--error) !important;display: flex;gap: 0.25rem;width: 100%;justify-content: flex-end;inset: auto auto 0 0;
}
.myrp-ui .field.round > :is(.helper, .error) {inset-inline-start: 1.5rem;
}
.myrp-ui .field.invalid > .helper {display: none;
}
.myrp-ui table td > .field {margin: 0;
}
.myrp-ui .grid {--_gap: 1rem;display: grid;grid-template-columns: repeat(12, calc(8.33% - var(--_gap) + (var(--_gap) / 12)));gap: var(--_gap);
}
.myrp-ui * + .grid {margin-block-start: 1rem;
}
.myrp-ui .grid.no-space {--_gap: 0rem;
}
.myrp-ui .grid.medium-space {--_gap: 1.5rem;
}
.myrp-ui .grid.large-space {--_gap: 2rem;
}
.myrp-ui .s1 {grid-area: auto/span 1;
}
.myrp-ui .s2 {grid-area: auto/span 2;
}
.myrp-ui .s3 {grid-area: auto/span 3;
}
.myrp-ui .s4 {grid-area: auto/span 4;
}
.myrp-ui .s5 {grid-area: auto/span 5;
}
.myrp-ui .s6 {grid-area: auto/span 6;
}
.myrp-ui .s7 {grid-area: auto/span 7;
}
.myrp-ui .s8 {grid-area: auto/span 8;
}
.myrp-ui .s9 {grid-area: auto/span 9;
}
.myrp-ui .s10 {grid-area: auto/span 10;
}
.myrp-ui .s11 {grid-area: auto/span 11;
}
.myrp-ui .s12 {grid-area: auto/span 12;
}
@media only screen and (min-width: 601px) {.myrp-ui .m1 {grid-area: auto/span 1;}.myrp-ui .m2 {grid-area: auto/span 2;}.myrp-ui .m3 {grid-area: auto/span 3;}.myrp-ui .m4 {grid-area: auto/span 4;}.myrp-ui .m5 {grid-area: auto/span 5;}.myrp-ui .m6 {grid-area: auto/span 6;}.myrp-ui .m7 {grid-area: auto/span 7;}.myrp-ui .m8 {grid-area: auto/span 8;}.myrp-ui .m9 {grid-area: auto/span 9;}.myrp-ui .m10 {grid-area: auto/span 10;}.myrp-ui .m11 {grid-area: auto/span 11;}.myrp-ui .m12 {grid-area: auto/span 12;}
}
@media only screen and (min-width: 993px) {.myrp-ui .l1 {grid-area: auto/span 1;}.myrp-ui .l2 {grid-area: auto/span 2;}.myrp-ui .l3 {grid-area: auto/span 3;}.myrp-ui .l4 {grid-area: auto/span 4;}.myrp-ui .l5 {grid-area: auto/span 5;}.myrp-ui .l6 {grid-area: auto/span 6;}.myrp-ui .l7 {grid-area: auto/span 7;}.myrp-ui .l8 {grid-area: auto/span 8;}.myrp-ui .l9 {grid-area: auto/span 9;}.myrp-ui .l10 {grid-area: auto/span 10;}.myrp-ui .l11 {grid-area: auto/span 11;}.myrp-ui .l12 {grid-area: auto/span 12;}
}
.myrp-ui i {--_size: 1.5rem;font-family: var(--font-icon);font-weight: normal;font-style: normal;font-size: var(--_size);letter-spacing: normal;text-transform: none;display: inline-flex;align-items: center;justify-content: center;white-space: nowrap;word-wrap: normal;direction: ltr;font-feature-settings: "liga";-webkit-font-smoothing: antialiased;vertical-align: middle;text-align: center;overflow: hidden;inline-size: var(--_size);min-inline-size: var(--_size);block-size: var(--_size);min-block-size: var(--_size);box-sizing: content-box;line-height: normal;
}
.myrp-ui i[class*="rotate"] {transition: transform 0.25s ease;
}
.myrp-ui *:is(:focus, :active, .active) ~ i.rotate,
.myrp-ui *:is(:focus, :active, .active) > i.rotate {transform: translateY(-10%) translateX(-25%) rotate(180deg) !important;
}
.myrp-ui *:is(:focus, :active, .active) ~ i.rotate-left,
.myrp-ui *:is(:focus, :active, .active) > i.rotate-left {transform: translateY(-50%) rotate(-90deg) !important;
}
.myrp-ui *:is(:focus, :active, .active) ~ i.rotate-right,
.myrp-ui *:is(:focus, :active, .active) > i.rotate-right {transform: translateY(-50%) rotate(90deg) !important;
}
.myrp-ui i:is(:focus, :active, .active) {color: var(--primary);
}
.myrp-ui .chip > i,
.myrp-ui i.tiny {--_size: 1rem;
}
.myrp-ui i.small {--_size: 1.25rem;
}
.myrp-ui i.medium {--_size: 1.5rem;
}
.myrp-ui i.large {--_size: 1.75rem;
}
.myrp-ui i.extra {--_size: 2rem;
}
.myrp-ui i.fill,
.myrp-ui a.row:is(:hover, :focus) > i,
.myrp-ui .transparent:is(:hover, :focus) > i {font-variation-settings: "FILL" 1;
}
.myrp-ui i > :is(img, svg) {inline-size: 100%;block-size: 100%;background-size: 100%;border-radius: inherit;position: absolute;inset: 0 auto auto 0;padding: inherit;
}
.myrp-ui i[class*="fa-"] {font-size: calc(var(--_size) * 0.85);line-height: normal;block-size: auto;min-block-size: auto;
}
.myrp-ui .absolute {position: absolute !important;
}
.myrp-ui .fixed {position: fixed;
}
.myrp-ui :is(.absolute, .fixed).left.right {inline-size: auto;
}
.myrp-ui :is(.absolute, .fixed).left.right.small {block-size: 20rem;
}
.myrp-ui :is(.absolute, .fixed).left.right.medium {block-size: 28rem;
}
.myrp-ui :is(.absolute, .fixed).left.right.large {block-size: 44rem;
}
.myrp-ui :is(.absolute, .fixed).top.bottom.small {inline-size: 20rem;
}
.myrp-ui :is(.absolute, .fixed).top.bottom.medium {inline-size: 28rem;
}
.myrp-ui :is(.absolute, .fixed).top.bottom.large {inline-size: 44rem;
}
.myrp-ui .list {display: flex;flex-direction: column;gap: 0.5rem;padding: 0;margin: 0;flex: 1;
}
.myrp-ui * + .list {margin-block-start: 1rem;
}
.myrp-ui .list > :is(nav, .row, li):not(.round) {border-radius: 0.5rem;padding: 0.75rem;border: 0.0625rem solid var(--outline-variant);margin: 0;
}
.myrp-ui table.list {display: table;flex-direction: initial;gap: 0.5rem;border-spacing: 0 0.5rem;border-collapse: separate;
}
.myrp-ui table.list > * > tr > td.signal + td,
.myrp-ui table.list > * > tr > td:not(.signal):first-child,
.myrp-ui table.list > * > tr > th:first-child {padding-left: 1rem;
}
.myrp-ui table.list > * > tr::before {content: '';position: absolute;inset: 0;border-radius: 0.5rem;border: 0.0625rem solid var(--outline-variant);
}
.myrp-ui table.list > :is(thead, tfoot) > tr::before,
.myrp-ui table.list > :is(thead, tfoot) > tr > :is(td, th) {border-radius: 0;border: 0;background-color: inherit;
}
.myrp-ui .list > li,
.myrp-ui .list > li > details > summary,
.myrp-ui .list > li > a:only-child {all: unset;box-sizing: border-box;position: relative;display: flex;align-items: center;align-self: normal;text-align: start;justify-content: flex-start;white-space: nowrap;gap: 1rem;min-block-size: 3.5rem;padding: 0.75rem;cursor: pointer;flex: 1;
}
.myrp-ui .list > li:has(ul, ol, details[open], a:only-child) {padding: 0;
}
.myrp-ui .list > li > .list {padding: 0 0 0 1rem;
}
.myrp-ui .list > li > *,
.myrp-ui .list > li > a:only-child > *,
.myrp-ui .list > li > details > summary > *{margin: 0;
}
.myrp-ui .list > li > :is(details, .max),
.myrp-ui .list > li > a:only-child > .max,
.myrp-ui .list > li > details > summary > .max {flex: 1;
}
.myrp-ui .list.border > li:not(:last-child)::before,
.myrp-ui .list.border > li > details[open] > summary::before {content: '';position: absolute;background-color: var(--outline-variant);inset: auto 0 0 0;block-size: 0.0625rem;inline-size: auto;
}
.myrp-ui .list.no-space > li,
.myrp-ui .list.no-space > li > details > summary {min-block-size: 2.5rem;
}
.myrp-ui .list.medium-space > li,
.myrp-ui .list.medium-space > li > details > summary {min-block-size: 4.5rem;
}
.myrp-ui .list.large-space > li,
.myrp-ui .list.large-space > li > details > summary {min-block-size: 5.5rem;
}
.myrp-ui .loader {opacity: 0;visibility: hidden;position: fixed;inset: 0 auto auto 0;inline-size: 100%;block-size: 100%;color: var(--on-surface);background-color: var(--loader);z-index: 9999;transition: var(--speed3) all, 0s background-color;
}
.myrp-ui .loader.active {opacity: 1;visibility: visible;
}
.myrp-ui svg {fill: currentColor;
}
.myrp-ui :is(img, svg, video):is(.small, .medium, .large, .tiny, .extra, .round, .circle, .responsive) {object-fit: cover;object-position: center;transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;block-size: 3rem;inline-size: 3rem;
}
.myrp-ui :is(img, svg, video).round {border-radius: 0.5rem;
}
.myrp-ui :is(img, svg, video).tiny {block-size: 2rem;inline-size: 2rem;
}
.myrp-ui :is(img, svg, video).small {block-size: 2.5rem;inline-size: 2.5rem;
}
.myrp-ui :is(img, svg, video).large {block-size: 3.5rem;inline-size: 3.5rem;
}
.myrp-ui :is(img, svg, video).extra {block-size: 4rem;inline-size: 4rem;
}
.myrp-ui :is(img, svg, video).responsive {inline-size: 100%;block-size: 100%;margin: 0 auto;
}
.myrp-ui :is(button, .button, .chip):not(.transparent) > .responsive {border: 0.25rem solid transparent;
}
.myrp-ui :is(button.small, .button.small, .chip) > .responsive {inline-size: 2rem;
}
.myrp-ui :is(button, .button, .chip.medium) > .responsive {inline-size: 2.5rem;
}
.myrp-ui :is(button, .button, .chip).large > .responsive {inline-size: 3rem;
}
.myrp-ui :is(button, .button, .chip).extra > .responsive {inline-size: 3.5rem;
}
.myrp-ui :is(img, svg, video).responsive.tiny {inline-size: 100%;block-size: 4rem;
}
.myrp-ui :is(img, svg, video).responsive.small {inline-size: 100%;block-size: 8rem;
}
.myrp-ui :is(img, svg, video).responsive.medium {inline-size: 100%;block-size: 12rem;
}
.myrp-ui :is(img, svg, video).responsive.large {inline-size: 100%;block-size: 16rem;
}
.myrp-ui :is(img, svg, video).responsive.extra {inline-size: 100%;block-size: 20rem;
}
.myrp-ui :is(img, svg, video).responsive.round {border-radius: 2rem;
}
.myrp-ui :is(img, svg, video).empty-state {max-inline-size: 100%;inline-size: 24rem;
}
.myrp-ui :is(button, .button, .chip, .field) > :is(img, svg):not(.responsive, .tiny, .small, .medium, .large, .extra),
.myrp-ui :is(.tabs) :is(img, svg):not(.responsive, .tiny, .small, .medium, .large, .extra) {min-inline-size: 1.5rem;max-inline-size: 1.5rem;min-block-size: 1.5rem;max-block-size: 1.5rem;
}
.myrp-ui :is(button, .button, .chip) > :is(i, img, svg),
.myrp-ui :is(button, .button, .chip) > .responsive {margin: 0 -0.5rem;
}
.myrp-ui :is(button, .button) > .responsive {margin-inline-start: -1.5rem;
}
.myrp-ui :is(button, .button) > span + .responsive {margin-inline-start: -0.5rem;margin-inline-end: -1.5rem;
}
.myrp-ui .chip > .responsive {margin-inline-start: -1rem;
}
.myrp-ui .chip > span + .responsive {margin-inline-start: -0.5rem;margin-inline-end: -1rem;
}
.myrp-ui :is(.circle, .square) > .responsive {margin: 0;
}
.myrp-ui .extend > :is(.responsive, i) {margin: 0;position: absolute;inset-inline: 1rem;z-index: 1;
}
.myrp-ui .extend > .responsive {inset-inline: 0;inline-size: 3.5rem;
}
.myrp-ui .extend.border > .responsive {inline-size: 3.375rem;
}
.myrp-ui menu {opacity: 0;visibility: hidden;position: absolute;box-shadow: var(--elevate2);background-color: var(--surface-container);z-index: 11;inset: auto auto 0 0;inline-size: 100%;max-block-size: 50vh;max-inline-size: none !important;overflow-x: hidden;overflow-y: auto;font-size: 0.875rem;font-weight: normal;text-transform: none;color: var(--on-surface);line-height: normal;text-align: start;border-radius: 0.25rem;transform: scale(0.8) translateY(120%);transition: all var(--speed2), 0s background-color;
}
.myrp-ui [dir=rtl] menu {inset: auto 0 0 auto;
}
.myrp-ui menu.no-wrap {inline-size: max-content;white-space: nowrap !important;
}
.myrp-ui menu.active,
.myrp-ui menu > li:hover > menu,
.myrp-ui menu > li > menu:hover {opacity: 1;visibility: visible;transform: scale(1) translateY(100%);
}
.myrp-ui menu.active.top,
.myrp-ui menu > li:hover > menu.top,
.myrp-ui menu > li > menu.top:hover {transform: scale(1) translateY(-100%);
}
.myrp-ui menu * {white-space: inherit !important;
}
.myrp-ui menu > li,
.myrp-ui menu > li > a:only-child {all: unset;box-sizing: border-box;position: relative;display: flex;align-items: center;align-self: normal;text-align: start;justify-content: flex-start;white-space: nowrap;gap: 1rem;padding: 0.5rem 1rem;min-block-size: 3rem;flex: 1;margin: 0 !important;cursor: pointer;
}
.myrp-ui menu > li:is(:hover, :focus, .active) {color: var(--primary);
}
.myrp-ui menu > li:is(:hover, :focus, .active)::before {content: '';position: absolute;inset: 0;background-color: currentColor;opacity: 0.1;
}
.myrp-ui menu > li > :is(.max, .field),
.myrp-ui menu > li > a:only-child > .max,
.myrp-ui menu > li:has(.field, a:only-child) {flex: 1;padding: 0;margin: 0;
}
.myrp-ui menu.min {inset: 0 0 auto 0;transform: none !important;background-color: var(--surface-variant) !important;color: var(--on-surface-variant) !important;
}
.myrp-ui [dir=rtl] menu.min.right,
.myrp-ui menu.min.left,
.myrp-ui menu.top.left {inset: 0 0 auto auto;
}
.myrp-ui [dir=rtl] menu.min.left,
.myrp-ui menu.min.right,
.myrp-ui menu.top {inset: 0 auto auto 0;
}
.myrp-ui menu.max {position: fixed;inset: 0;block-size: 100%;max-block-size: none;min-block-size: auto;z-index: 100;transform: none !important;background-color: var(--surface-variant) !important;color: var(--on-surface-variant) !important;border-radius: 0;
}
.myrp-ui menu.no-wrap:is(.min, .max) {min-inline-size: 16rem;
}
.myrp-ui [dir=rtl] menu.right,
.myrp-ui [dir=rtl] menu.top.min.right,
.myrp-ui menu.left,
.myrp-ui menu.top.min.left {inset: auto 0 0 auto;
}
.myrp-ui [dir=rtl] menu.left,
.myrp-ui [dir=rtl] menu.top.min.left,
.myrp-ui menu.right,
.myrp-ui menu.top.min {inset: auto auto 0 0;
}
.myrp-ui menu.top {transform: scale(0.8) translateY(-120%);
}
.myrp-ui menu:has(menu) {--_child: 1;--_type: 0;overflow: unset;white-space: nowrap;inline-size: auto;min-inline-size: 12rem;max-block-size: none;
}
.myrp-ui menu > li > :is(menu, menu.right),
.myrp-ui [dir=rtl] menu > li > menu.left {inset: auto auto calc(3rem * (var(--_child) - var(--_type))) 100%;
}
.myrp-ui [dir=rtl] menu > li > :is(menu, menu.right),
.myrp-ui menu > li > menu.left {inset: auto 100% calc(3rem * (var(--_child) - var(--_type))) auto;
}
.myrp-ui menu > li > :is(menu.top, menu.top.right),
.myrp-ui [dir=rtl] menu > li > menu.top.left {inset: calc(3rem * (var(--_child) - var(--_type))) auto auto 100%;
}
.myrp-ui [dir=rtl] menu > li > :is(menu.top, menu.top.right),
.myrp-ui menu > li > menu.top.left {inset: calc(3rem * (var(--_child) - var(--_type))) 100% auto auto;
}
.myrp-ui menu.no-space > li {min-block-size: 2.5rem;
}
.myrp-ui menu.medium-space > li {min-block-size: 3.5rem;
}
.myrp-ui menu.large-space > li {min-block-size: 4rem;
}
.myrp-ui menu.border > li:not(:last-child)::before {content: '';position: absolute;background-color: var(--outline-variant);inset: auto 0 0 0;block-size: 0.0625rem;inline-size: auto;
}
.myrp-ui menu > li:nth-last-child(2) {--_child: 2;
}
.myrp-ui menu > li:nth-last-child(3) {--_child: 3;
}
.myrp-ui menu > li:nth-last-child(4) {--_child: 4;
}
.myrp-ui menu > li:nth-last-child(5) {--_child: 5;
}
.myrp-ui menu > li:nth-last-child(6) {--_child: 6;
}
.myrp-ui menu > li:nth-last-child(7) {--_child: 7;
}
.myrp-ui menu > li:nth-last-child(8) {--_child: 8;
}
.myrp-ui menu > li:nth-last-child(9) {--_child: 9;
}
.myrp-ui menu > li:nth-last-child(10) {--_child: 10;
}
.myrp-ui menu > li:nth-last-child(11) {--_child: 11;
}
.myrp-ui menu > li:nth-last-of-type(2) {--_type: 1;
}
.myrp-ui menu > li:nth-last-of-type(3) {--_type: 2;
}
.myrp-ui menu > li:nth-last-of-type(4) {--_type: 3;
}
.myrp-ui menu > li:nth-last-of-type(5) {--_type: 4;
}
.myrp-ui menu > li:nth-last-of-type(6) {--_type: 5;
}
.myrp-ui menu > li:nth-last-of-type(7) {--_type: 6;
}
.myrp-ui menu > li:nth-last-of-type(8) {--_type: 7;
}
.myrp-ui menu > li:nth-last-of-type(9) {--_type: 8;
}
.myrp-ui menu > li:nth-last-of-type(10) {--_type: 9;
}
.myrp-ui menu > li:nth-last-of-type(11) {--_type: 10;
}
.myrp-ui nav,
.myrp-ui .row,
.myrp-ui nav:is(.drawer, .compact) > :is(a, label) {display: flex;align-items: center;align-self: normal;text-align: start;justify-content: flex-start;white-space: nowrap;gap: 1rem;min-inline-size: 0;
}
.myrp-ui * + :is(nav, .row) {margin-block-start: 1rem;
}
.myrp-ui :is(nav, .row) > *,
.myrp-ui :is(nav, .row) > :not(.tooltip, menu) > * {margin-block: 0;
}
.myrp-ui nav > *,
.myrp-ui .row > * {margin: 0 !important;white-space: normal;flex: none;
}
.myrp-ui :is(nav, .row).no-space {gap: 0;
}
.myrp-ui :is(nav, .row).no-space > .border + .border {border-inline-start: 0;
}
.myrp-ui :is(nav, .row).medium-space {gap: 1.5rem;
}
.myrp-ui :is(nav, .row).large-space {gap: 2rem;
}
.myrp-ui nav > .max,
.myrp-ui .row > .max,
.myrp-ui nav:is(.drawer, .compact) > :is(a, label) > .max {flex: auto;flex: 1;
}
.myrp-ui nav.wrap,
.myrp-ui .row.wrap {display: flex;flex-wrap: wrap;
}
.myrp-ui header > :is(nav, .row) {min-block-size: 4rem;
}
.myrp-ui footer > :is(nav, .row) {min-block-size: 4rem;
}
.myrp-ui nav > header > :is(nav, .row) {margin-block-start: -0.5rem !important;
}
.myrp-ui :is(nav, .row) > .border.no-margin + .border.no-margin {border-inline-start: 0;
}
.myrp-ui nav:is(.rail, .left, .right, .top, .bottom) {border: 0;position: sticky;inset: 0;color: var(--on-surface);transform: none;z-index: 100;block-size: auto;inline-size: auto;text-align: center;padding: 0.5rem 0;
}
.myrp-ui nav:is(.rail, .left, .right) {inline-size: 6.5rem;justify-content: flex-start;flex-direction: column;block-size: 100vh;
}
.myrp-ui nav.rail:is(.left, .right) {transition: width var(--speed4);background-color: var(--surface-container-low);
}
.myrp-ui nav:is(.top, .bottom) {block-size: 5rem;justify-content: center;flex-direction: row;background-color: var(--surface-container);
}
.myrp-ui nav.top {inset: 0 0 auto 0;
}
.myrp-ui nav.left,
.myrp-ui nav.rail {inset: 0 auto 0 0;
}
.myrp-ui nav.right {inset: 0 0 0 auto;
}
.myrp-ui nav.bottom {inset: auto 0 0 0;
}
.myrp-ui nav:is(.drawer, .compact) {flex-direction: column;align-items: normal;inline-size: 20rem;gap: 0;padding: 0.5rem 1rem;
}
.myrp-ui nav:is(.drawer, .compact):is(.min, .max) {inline-size: auto;
}
.myrp-ui nav:is(.drawer, .compact) > :is(a, label),
.myrp-ui a.row.wave {padding: 0.75rem;font-size: inherit;
}
.myrp-ui nav:is(.drawer, .compact) > a {border-radius: 2rem;
}
.myrp-ui nav:is(.drawer, .compact) > a:is(:hover, .active, :focus) {color: var(--primary);
}
.myrp-ui nav:is(.drawer, .compact) > a:is(:hover, .active, :focus)::before {content: '';position: absolute;inset: 0;border-radius: inherit;background-color: currentColor;opacity: 0.1;
}
.myrp-ui nav:is(.drawer, .compact) > a:is(:hover, :focus, .active) > i {font-variation-settings: "FILL" 1;
}
.myrp-ui nav:is(.rail, .left, .right, .top, .bottom):not(.drawer, .compact) > a:not(button, .button, .chip, img, video, svg) {text-align: center;display: flex;flex-direction: column;color: inherit;box-sizing: content-box;width: -webkit-fill-available;
}
.myrp-ui nav.rail > a:is(:hover, .active),
.myrp-ui nav.rail > a:is(:hover, .active) > * {color: var(--primary);
}
.myrp-ui nav.rail > a.active::before {content: '';position: absolute;inset: 0 auto 0 0;width: 0.25rem;background:var(--primary);margin-block: -0.5rem;
}
.myrp-ui nav.rail.small {width: 3.5rem;
}
.myrp-ui nav.rail.medium {width: 5rem;
}
.myrp-ui nav.rail.small > a > :not(i, .tooltip, menu, .badge) {display: none;
}
.myrp-ui nav:is(.top, .bottom):not(.drawer, .compact) > a:not(button, .button, .chip, img, video, svg) {inline-size: 3.5rem;
}
.myrp-ui nav:is(.rail, .left, .right, .top, .bottom):not(.drawer, .compact) > a:not(button, .button, .chip) > i {padding: 0.25rem 1rem;border-radius: 2rem;transition: var(--speed1) padding linear;margin: 0 auto;font-variation-settings: "FILL" 1;
}
.myrp-ui nav:is(.rail, .left, .right, .top, .bottom):not(.drawer, .compact) > a:not(button, .button, .chip):is(:hover, :focus, .active) > :is(i, span) {color: var(--primary);
}
.myrp-ui nav.left-align,
.myrp-ui nav.top-align {justify-content: flex-start;
}
.myrp-ui nav.right-align,
.myrp-ui nav.bottom-align {justify-content: flex-end;
}
.myrp-ui nav.center-align,
.myrp-ui nav.middle-align {justify-content: center;
}
.myrp-ui nav.between-align {justify-content: space-between;
}
.myrp-ui nav:not(.rail, .left, .right) > .space {inline-size: 0.5rem;
}
.myrp-ui nav:not(.rail, .left, .right) > .medium-space {inline-size: 1rem;
}
.myrp-ui nav:not(.rail, .left, .right) > .large-space {inline-size: 1.5rem;
}
.myrp-ui nav.compact > a {border-radius: 0.5rem;padding: 0.5rem;
}
.myrp-ui nav.compact > a > *:not(i) {display: block;white-space: normal;
}
.myrp-ui nav.compact {margin-inline: -0.5rem;width: auto;padding: 0;
}
.myrp-ui nav.rail:not(.left, .right, .top, .bottom) {position: relative;inset: unset;z-index: auto;
}
.myrp-ui nav.toggle {gap: 0;background-color: var(--secondary-container);padding: .25rem;border-radius: 0.5rem !important;block-size: 2.5rem;color: var(--primary);display: inline-flex;margin: auto 0 !important;width: auto;
}
.myrp-ui nav.toggle > a {display: flex;align-items: center;block-size: 100%;padding: 0 1rem;background-color: inherit;color: inherit;border-radius: 0.25rem;gap: 0.5rem;font-size: 0.875rem;
}
.myrp-ui nav.toggle > a.active {background-color: var(--primary);color: var(--on-primary);
}
.myrp-ui nav.filter {background-color: var(--surface-container-low);padding: 0 1rem;border-radius: 0.5rem !important;block-size: 4rem;align-items: center;
}
.myrp-ui nav.toggle > a:focus-visible {z-index: 1;
}
@media only screen and (max-width: 600px) {.myrp-ui nav.top,.myrp-ui nav.bottom {justify-content: space-around;}.myrp-ui nav.between-align {justify-content: space-between;}
}
.myrp-ui .overlay {opacity: 0;visibility: hidden;position: fixed;inset: 0 auto auto 0;inline-size: 100%;block-size: 100%;color: var(--on-surface);background-color: var(--overlay);z-index: 100;transition: var(--speed3) all, 0s background-color;
}
.myrp-ui nav > .overlay {z-index: 0;
}
.myrp-ui .overlay.active {opacity: 1;visibility: visible;
}
.myrp-ui .page,
.myrp-ui :is(.page, dialog):not(.active) .page.active {--_transform: translate(0, 0);opacity: 0;position: absolute;display: none;
}
.myrp-ui .page.active {opacity: 1;position: inherit;display: inherit;animation: var(--speed4) to-page ease;
}
.myrp-ui .page.active.top {--_transform: translate(0, -4rem);
}
.myrp-ui .page.active.bottom {--_transform: translate(0, 4rem);
}
.myrp-ui .page.active.left {--_transform: translate(-4rem, 0);
}
.myrp-ui [dir=rtl] .page.active.left {--_transform: translate(4rem, 0);
}
.myrp-ui .page.active.right {--_transform: translate(4rem, 0);
}
.myrp-ui [dir=rtl] .page.active.right {--_transform: translate(-4rem, 0);
}
@keyframes to-page {from {opacity: 0;transform: var(--_transform);}to {opacity: 1;transform: translate(0, 0);}
}
.myrp-ui .container-progress {display: flex;flex-direction: column;font-size: 20px;color: #fff;align-items: center;justify-content: center;
}
.myrp-ui progress {position: relative;inline-size: 100%;block-size: 0.5rem;color: var(--primary);background: var(--surface-container-highest);border-radius: 0;flex: none;border: none;
}
.myrp-ui progress.small {inline-size: 4rem;
}
.myrp-ui progress.medium {inline-size: 8rem;
}
.myrp-ui progress.large {inline-size: 12rem;
}
.myrp-ui progress:not(.circle, [value])::after {content: "";position: absolute;inset: 0;inline-size: 100%;block-size: 100%;clip-path: none;background: currentColor;animation: 1.6s to-linear ease infinite;
}
.myrp-ui progress:not(.circle, [value])::-moz-progress-bar {animation: 1.6s to-linear ease infinite;
}
.myrp-ui progress:not(.circle, [value])::-webkit-progress-value {animation: 1.6s to-linear ease infinite;
}
.myrp-ui progress::-webkit-progress-bar {background: none;
}
.myrp-ui progress::-webkit-progress-value {background: currentColor;
}
.myrp-ui progress::-moz-progress-bar {background: currentColor;
}
.myrp-ui progress.circle {display: inline-block;inline-size: 2.5rem;block-size: 2.5rem;border-radius: 50%;border-width: 0.3rem;border-style: solid;border-color: currentColor;animation: 1.6s to-circular linear infinite;background: none;flex: none;
}
.myrp-ui progress.circle::-moz-progress-bar {background: none;
}
.myrp-ui progress.circle.small {inline-size: 1.5rem;block-size: 1.5rem;border-width: 0.2rem;
}
.myrp-ui progress.circle.large {inline-size: 3.5rem;block-size: 3.5rem;border-width: 0.4rem;
}
.myrp-ui :is(nav, .row, .field) > progress:not(.circle, .small, .medium, .large) {flex: auto;
}
@keyframes to-linear {0% {margin-inline-start: 0%;inline-size: 0%;}50% {margin-inline-start: 10%;inline-size: 80%;}100% {margin-inline-start: 100%;inline-size: 0%;}
}
@keyframes to-circular {0% {transform: rotate(0deg);clip-path: polygon(50% 50%,0% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%);}20% {clip-path: polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%,100% 0%,100% 0%);}30% {clip-path: polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 50%,100% 50%,100% 50%,100% 50%,100% 50%);}40% {clip-path: polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 50%,100% 100%,100% 100%,100% 100%,100% 100%);}50% {clip-path: polygon(50% 50%,50% 0%,50% 0%,100% 0%,100% 50%,100% 100%,50% 100%,50% 100%,50% 100%);}60% {clip-path: polygon(50% 50%,100% 50%,100% 50%,100% 50%,100% 50%,100% 100%,50% 100%,0% 100%,0% 100%);}70% {clip-path: polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%,0% 50%);}80% {clip-path: polygon(50% 50%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,0% 50%);}90% {transform: rotate(360deg);clip-path: polygon(50% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%);}100% {clip-path: polygon(50% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%);}
}

.myrp-ui .checkbox,
.myrp-ui .radio,
.myrp-ui .switch {direction: ltr;inline-size: auto;block-size: auto;line-height: normal;white-space: nowrap;cursor: pointer;display: inline-flex;align-items: center;
}
.myrp-ui :is(.checkbox, .radio) > input {inline-size: 1.5rem;block-size: 1.5rem;opacity: 0;
}
.myrp-ui .switch > input {inline-size: 3.25rem;block-size: 2rem;opacity: 0;
}
.myrp-ui :is(.checkbox, .radio, .switch) > span {display: inline-flex;align-items: center;color: var(--on-surface);font-size: 1rem;
}
.myrp-ui :is(.checkbox, .radio) > span:not(:empty) {padding-inline-start: 0.25rem;
}
.myrp-ui :is(.checkbox, .radio, .switch) > span::before,
.myrp-ui .icon > span > i {font-family: var(--font-icon);font-weight: normal;font-style: normal;font-size: 1.5rem;line-height: 1;letter-spacing: normal;text-transform: none;display: inline-block;white-space: nowrap;word-wrap: normal;direction: ltr;font-feature-settings: "liga";-webkit-font-smoothing: antialiased;vertical-align: middle;text-align: center;overflow: hidden;inline-size: 1.5rem;block-size: 1.5rem;box-sizing: border-box;margin: 0 auto;outline: none;position: absolute;inset: auto auto auto -1.5rem;background-color: transparent;border-radius: 50%;user-select: none;z-index: 1;box-shadow: 0 0 0 0 var(--active);
}
.myrp-ui .switch > span::before,
.myrp-ui .switch.icon > span > i {position: absolute;inset: 50% auto auto 0;display: inline-flex;align-items: center;justify-content: center;border-radius: 50%;transition: var(--speed2) all;font-size: 0.75rem;user-select: none;min-inline-size: auto;inline-size: 1.2rem;block-size: 1.2rem;content: "close";color: var(--surface-variant);background-color: var(--outline);
}
.myrp-ui .switch.icon > span > i,
.myrp-ui .switch > span::before {transform: translate(-2.9rem, -50%) scale(1);
}
.myrp-ui .checkbox > span::before {content: "check_box_outline_blank";
}
.myrp-ui .radio > span::before {content: "radio_button_unchecked";
}
.myrp-ui .checkbox > input:checked + span::before {content: "check_box";font-variation-settings: "FILL" 1;
}
.myrp-ui .radio > input:checked + span::before {content: "radio_button_checked";
}
.myrp-ui :is(.radio, .checkbox, .switch).icon > span::before {content: "" !important;font-variation-settings: unset !important;
}
.myrp-ui :is(.checkbox, .radio) > input:checked + span::before,
.myrp-ui :is(.checkbox, .radio).icon > input:checked + span > i {color: var(--primary);
}
.myrp-ui .icon > input:checked + span > i:first-child,
.myrp-ui .icon > span > i:last-child {opacity: 0;
}
.myrp-ui .icon > input:checked + span > i:last-child,
.myrp-ui .icon > span > i:first-child {opacity: 1;
}
.myrp-ui .switch > input:checked + span::after {border: none;background-color: var(--primary);
}
.myrp-ui .switch > input:checked + span::before,
.myrp-ui .switch.icon > input:checked + span > i {content: "check";color: var(--primary);background-color: var(--on-primary);
}
.myrp-ui .switch > input:checked + span::before,
.myrp-ui .switch.icon > input:checked + span > i {transform: translate(-1.75rem, -50%) scale(1);
}
.myrp-ui :is(.checkbox, .radio, .switch) > input:disabled + span {opacity: 0.5;cursor: not-allowed;
}
.myrp-ui .checkbox + .checkbox,
.myrp-ui .radio + .radio,
.myrp-ui .switch + .switch {margin-inline-start: 0.5rem;
}
.myrp-ui .switch > span::after {content: "";position: absolute;inset: 50% auto auto 0;border: 0.125rem solid var(--outline);box-sizing:box;inline-size: 3rem;block-size: 1.75rem;border-radius: 2rem;
}
.myrp-ui .switch > span::after {transform: translate(-3.25rem, -50%);
}
.myrp-ui .field > :is(nav, .row) {flex-grow: 1;padding: 0 1rem;
}
.myrp-ui .field.round > :is(nav, .row) {flex-grow: 1;padding: 0 1.5rem;
}
.myrp-ui .switch > :focus-visible + span::after {outline: 0.125rem solid var(--primary);outline-offset: 0.25rem;
}
.myrp-ui :is(.checkbox, .radio) > :focus-visible + span::before {outline: 0.125rem solid var(--primary);outline-offset: 0.375rem;
}
.myrp-ui .signal {position: absolute;inset: 0;background-color: var(--primary);z-index: 0;clip-path: polygon(0 0, 0.25rem 0, 0.25rem 100%, 0 100%);
}
.myrp-ui .signal.top {clip-path: polygon(0 0, 100% 0, 100% 0.25rem, 0 0.25rem);
}
.myrp-ui .signal.right {clip-path: polygon(calc(100% - 0.25rem) 0, 100% 0, 100% 100%, calc(100% - 0.25rem) 100%);
}
.myrp-ui .signal.bottom {clip-path: polygon(0 calc(100% - 0.25rem), 100% calc(100% - 0.25rem), 100% 100%, 0 100%);
}
.myrp-ui table.list > tbody > tr > td.signal {border-radius: 0.5rem;
}
.myrp-ui .slider {--_start: 0%;--_end: 0%;--_value1: "";--_value2: "";display: flex;align-items: center !important;inline-size: auto;block-size: 1.25rem;margin: 1.125rem;flex: none;
}
.myrp-ui .slider.vertical {flex-direction: row !important;margin: 0.5rem auto !important;padding: 50% 0;transform: rotate(-90deg);inline-size: 100%;
}
.myrp-ui .slider.small {inline-size: 4rem;
}
.myrp-ui .slider.medium {inline-size: 8rem;
}
.myrp-ui .slider.large {inline-size: 12rem;
}
.myrp-ui .slider > input {appearance: none;box-shadow: none;border: none;outline: none;pointer-events: none;inline-size: 100%;block-size: 0.25rem;background: none;z-index: 1;padding: 0;margin: 0;
}
.myrp-ui .slider > input:focus ~ .tooltip {visibility: visible;
}
.myrp-ui .slider > input:only-of-type {cursor: pointer;pointer-events: all;
}
.myrp-ui .slider > input + input {position: absolute;
}
.myrp-ui .slider > input::-webkit-slider-thumb {appearance: none;box-shadow: none;border: none;outline: none;pointer-events: all;block-size: 1.25rem;inline-size: 1.25rem;border-radius: 50%;background: var(--primary);transition: var(--speed1) all ease-out;cursor: pointer;
}
.myrp-ui .slider > input::-moz-range-thumb {appearance: none;box-shadow: none;border: none;outline: none;pointer-events: all;block-size: 1.25rem;inline-size: 1.25rem;border-radius: 50%;background: var(--primary);transition: var(--speed1) all ease-out;cursor: pointer;
}
.myrp-ui .slider > input:not(:disabled):is(:focus, :hover)::-webkit-slider-thumb {box-shadow: 0 0 0 0.625rem var(--active);
}
.myrp-ui .slider > input:not(:disabled):is(:focus, :hover)::-moz-range-thumb {box-shadow: 0 0 0 0.625rem var(--active);
}
.myrp-ui .slider > input:disabled {cursor: not-allowed;opacity: 1;
}
.myrp-ui .slider > input:disabled::-webkit-slider-thumb {background: #9E9E9E;cursor: not-allowed;
}
.myrp-ui .slider > input:disabled::-moz-range-thumb {background: #9E9E9E;cursor: not-allowed;
}
.myrp-ui .slider > input:disabled ~ :is(span, .tooltip) {background: #9E9E9E;
}
.myrp-ui .slider > span {position: absolute;block-size: 0.375rem;border-radius: 1rem;background: var(--primary);z-index: 0;inset: calc(50% - 0.1875rem) var(--_end) auto var(--_start);
}
.myrp-ui .field > .slider {inline-size: 100%;
}
.myrp-ui .slider::before {content: "";position: absolute;inline-size: 100%;block-size: 0.25rem;border-radius: 1rem;background: var(--active);
}
.myrp-ui .slider > .tooltip {opacity: 0;inset: 0.25rem auto auto calc(100% - var(--_end));inline-size: 1.75rem;block-size: 1.75rem;background-color: var(--primary);border-radius: 50% 50% 0;transition: var(--speed2) ease top, var(--speed2) ease opacity;transform: translate(-50%, -50%) rotate(45deg) !important;
}
.myrp-ui [dir=rtl] .slider > .tooltip {transform: translate(50%, -50%) rotate(45deg) !important;
}
.myrp-ui .slider > .tooltip + .tooltip {inset: 0.25rem calc(100% - var(--_start)) auto auto;transform: translate(50%, -50%) rotate(45deg) !important;
}
.myrp-ui [dir=rtl] .slider > .tooltip + .tooltip {transform: translate(-50%, -50%) rotate(45deg) !important;
}
.myrp-ui .slider > .tooltip::before {content: var(--_value1);transform: rotate(-45deg);
}
.myrp-ui .slider > .tooltip + .tooltip::before {content: var(--_value2);
}
.myrp-ui .slider:hover > .tooltip {inset-block-start: -0.25rem;opacity: 1;
}
.myrp-ui .slider.vertical > .tooltip {display: none;
}
.myrp-ui :is(nav, .row, .field) > .slider:not(.circle, .small, .medium, .large) {flex: auto;
}
.myrp-ui .snackbar {--_transform-start: translate(-50%, 1rem);--_transform-end: translate(-50%, 0);position: fixed;inset: auto auto 6rem 50%;inline-size: 80%;block-size: auto;z-index: 200;visibility: hidden;display: flex;box-shadow: var(--elevate2);color: var(--inverse-on-surface);background-color: var(--inverse-surface);padding: 1rem;opacity: 1;cursor: pointer;text-align: start;align-items: center;border-radius: 0.5rem;gap: 0.5rem;transform: var(--_transform-end);
}
.myrp-ui [dir="rtl"] .snackbar {--_transform-start: translate(50%, 1rem);--_transform-end: translate(50%, 0);
}
.myrp-ui .snackbar.top {inset: 6rem auto auto 50%;
}
.myrp-ui .snackbar.right {inset: 6rem auto auto 75%;
}
.myrp-ui .snackbar.left {inset: 6rem auto auto 25%;
}
.myrp-ui .snackbar.active {visibility: visible;animation: var(--speed2) to-snackbar;
}
.myrp-ui .snackbar.active.top {--_transform-end: translate(-50%, -1rem);
}
.myrp-ui [dir="rtl"] .snackbar.active.top {--_transform-end: translate(50%, -1rem);
}
.myrp-ui .snackbar > .max {flex: auto;
}
@keyframes to-snackbar {0% {opacity: 0;transform: var(--_transform-start);}100% {opacity: 1;transform: var(--_transform-end);}
}
@media only screen and (min-width: 993px) {.myrp-ui .snackbar {inline-size: 40%;}
}
.myrp-ui table {--_stripes: rgb(0 0 0 / 0.05);inline-size: 100%;border-spacing: 0;color: var(--on-surface);text-align: start;background-color: var(--surface);
}
.myrp-ui .dark table {--_stripes: rgb(255 255 255 / 0.05);
}
.myrp-ui table :is(thead, tbody, tfoot, tr, th) {background-color: inherit;
}
.myrp-ui :is(th, td) {inline-size: auto;max-inline-size: 1rem;text-align: inherit;padding: 0.75rem;
}
.myrp-ui :is(th, td) > * {vertical-align: middle;z-index: 0;
}
.myrp-ui table.border > tbody > tr:not(:last-child) > td,
.myrp-ui thead > tr > th {border-block-end: 0.0625rem solid var(--outline-variant);
}
.myrp-ui tfoot > tr > th {border-block-start: 0.0625rem solid var(--outline-variant);
}
.myrp-ui table.stripes > tbody > tr:nth-child(odd) {background-color: var(--_stripes);
}
.myrp-ui table.no-space :is(th, td) {padding: 0;
}
.myrp-ui table.medium-space :is(th, td) {padding: 0.75rem;
}
.myrp-ui table.large-space :is(th, td) {padding: 1rem;
}
.myrp-ui table > .fixed,
.myrp-ui th.fixed {position: sticky;z-index: 1;inset-block-start: 0;
}
.myrp-ui tfoot.fixed,
.myrp-ui tfoot th.fixed {inset-block-end: 0;
}
.myrp-ui :is(td, th).min {inline-size: 0;max-inline-size: 0%;white-space: nowrap;
}
.myrp-ui table > * > tr > th {font-weight: bold;
}
.myrp-ui table thead th {font-weight: normal;
}
.myrp-ui .tabs {display: flex;white-space: nowrap;border-block-end: 0.0625rem solid var(--outline-variant);
}
.myrp-ui .tabs.min {padding: 0 1rem;gap: 2rem;
}
.myrp-ui .tabs:not(.left-align, .right-align, .center-align) {justify-content: start;
}
.myrp-ui * + .tabs {margin-block-start: 1rem;
}
.myrp-ui .tabs > a {display: flex;font-size: 0.875rem;font-weight: 500;color: var(--on-surface-variant);padding: 0.5rem 1rem;border-block-end: 0.25rem solid transparent;text-align: center;min-block-size: 3rem;gap: 0.25rem;inline-size: auto;
}
.myrp-ui .tabs.min > a {inline-size: auto;padding: 0.5rem 0;
}
.myrp-ui .tabs.small > a {min-block-size: 2rem;
}
.myrp-ui .tabs.large > a {min-block-size: 4rem;
}
.myrp-ui .tabs > a.active {color: var(--primary);border-block-end: 0.25rem solid var(--primary);z-index: 1;
}
.myrp-ui .tabs > a.active > i {color: var(--primary);
}
.myrp-ui .tabs:is(.left-align, .center-align, .right-align) > a {inline-size: auto;
}
.myrp-ui .tabs > a:focus-visible {outline-width: 0.25rem;outline-offset: -0.25rem;z-index: 1;
}
.myrp-ui .tag {display: inline-flex !important;padding: 0.25rem 0.625rem;border-radius: 0.25rem;background-color: var(--surface-dim);color: var(--on-surface-dim);
}
.myrp-ui .tag.small {font-size: 0.8rem;padding: 0.25rem;
}
.myrp-ui .tag.active {background-color: var(--primary-container) !important;color: var(--primary) !important;
}
.myrp-ui .tag.invalid,
.myrp-ui .tag.error {background-color: var(--error-container) !important;color: var(--error) !important;
}
.myrp-ui .tag.warning {background-color: var(--warning-container) !important;color: var(--warning) !important;
}
.myrp-ui .tag.success {background-color: var(--success-container) !important;color: var(--success) !important;
}
.myrp-ui .tag.border {background-color: transparent !important;
}
.myrp-ui .tooltip {--_space: -0.5rem;visibility: hidden;display: flex;align-items: center;justify-content: center;gap: 0.5rem;background-color: var(--inverse-surface);color: var(--inverse-on-surface);font-size: 0.75rem;text-align: center;border-radius: 0.25rem;padding: 0.5rem;position: absolute;z-index: 3;inset: 0 auto auto 50%;inline-size: auto;white-space: nowrap;font-weight: 500;opacity: 0;transition: var(--speed2) all;line-height: normal;transform: translate(-50%, -100%) scale(0.9);text-transform: none;
}
.myrp-ui [dir=rtl] .tooltip {transform: translate(50%, -100%) scale(0.9);
}
.myrp-ui .tooltip.left {inset: 50% auto auto 0;transform: translate(-100%, -50%) scale(0.9);
}
.myrp-ui [dir=rtl] .tooltip.left {transform: translate(100%, -50%) scale(0.9);
}
.myrp-ui .tooltip.right {inset: 50% 0 auto auto;transform: translate(100%, -50%) scale(0.9);
}
.myrp-ui [dir=rtl] .tooltip.right {transform: translate(-100%, -50%) scale(0.9);
}
.myrp-ui .tooltip.bottom {inset: auto auto 0 50%;transform: translate(-50%, 100%) scale(0.9);
}
.myrp-ui [dir=rtl] .tooltip.bottom {transform: translate(50%, 100%) scale(0.9);
}
.myrp-ui .tooltip.small {inline-size: 8rem;white-space: normal;
}
.myrp-ui .tooltip.medium {inline-size: 12rem;white-space: normal;
}
.myrp-ui .tooltip.large {inline-size: 16rem;white-space: normal;
}
.myrp-ui :hover > .tooltip {visibility: visible;opacity: 1;transform: translate(-50%, -100%) scale(1);
}
.myrp-ui [dir=rtl] :hover > .tooltip {transform: translate(50%, -100%) scale(1);
}
.myrp-ui :hover > .tooltip.left {transform: translate(-100%, -50%) scale(1);
}
.myrp-ui [dir=rtl] :hover > .tooltip.left {transform: translate(100%, -50%) scale(1);
}
.myrp-ui :hover > .tooltip.right {transform: translate(100%, -50%) scale(1);
}
.myrp-ui [dir=rtl] :hover > .tooltip.right {transform: translate(-100%, -50%) scale(1);
}
.myrp-ui :hover > .tooltip.bottom {transform: translate(-50%, 100%) scale(1);
}
.myrp-ui [dir=rtl] :hover > .tooltip.bottom {transform: translate(50%, 100%) scale(1);
}
.myrp-ui .tooltip.no-space {--_space: 0;
}
.myrp-ui .tooltip.medium-space {--_space: -1rem;
}
.myrp-ui .tooltip.large-space {--_space: -1.5rem;
}
.myrp-ui .tooltip:not(.left, .right, .bottom) {margin-block-start: var(--_space) !important;
}
.myrp-ui .tooltip.left {margin-inline-start: var(--_space) !important;
}
.myrp-ui .tooltip.right {margin-inline-end: var(--_space) !important;
}
.myrp-ui .tooltip.bottom {margin-block-end: var(--_space) !important;
}
.myrp-ui menu:active ~ .tooltip,
.myrp-ui :is(button, .button):focus > menu ~ .tooltip,
.myrp-ui .field > :focus ~ menu ~ .tooltip {visibility: hidden;
}
.myrp-ui .slider > .tooltip {--_space: -1.25rem;
}
.myrp-ui .slider.vertical > .tooltip {--_space: -0.75rem;
}
.myrp-ui .slider.vertical > .tooltip:is(.left, .right) {--_space: -0.5rem;
}
.myrp-ui .tooltip.max {display: block;font-size: inherit;white-space: normal;text-align: start;inline-size: 20rem;border-radius: 0.5rem;padding: 1rem;box-shadow: var(--elevate2);
}
.myrp-ui :is(.blur, .small-blur, .medium-blur, .large-blur),
.myrp-ui :is(.blur, .small-blur, .medium-blur, .large-blur).light {--_blur: 1rem;-webkit-backdrop-filter: blur(var(--_blur));backdrop-filter: blur(var(--_blur));color: var(--on-surface);background-color: rgb(255 255 255 / 0.5);
}
.myrp-ui .dark :is(.blur, .small-blur, .medium-blur, .large-blur),
.myrp-ui :is(.blur, .small-blur, .medium-blur, .large-blur).dark {background-color: rgb(0 0 0 / 0.5);
}
.myrp-ui .small-blur {--_blur: 0.5rem;
}
.myrp-ui .large-blur {--_blur: 1.5rem;
}
.myrp-ui .shadow {background-color: #00000050;
}
.myrp-ui :is(.left-shadow, .right-shadow, .top-shadow, .bottom-shadow) {background-color: transparent !important;
}
.myrp-ui .left-shadow {background-image: linear-gradient(to right, black, transparent);
}
.myrp-ui .right-shadow {background-image: linear-gradient(to left, black, transparent);
}
.myrp-ui .bottom-shadow {background-image: linear-gradient(to top, black, transparent);
}
.myrp-ui .top-shadow {background-image: linear-gradient(to bottom, black, transparent);
}