@import url(https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined&display=swap);
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap);

.ubo-info :root {
    --primary: #6750A4;
    --on-primary: #FFFFFF;
    --primary-container: #EADDFF;
    --on-primary-container: #21005E;
    --secondary: #625B71;
    --on-secondary: #FFFFFF;
    --secondary-container: #E8DEF8;
    --on-secondary-container: #1E192B;
    --tertiary: #7D5260;
    --on-tertiary: #FFFFFF;
    --tertiary-container: #FFD8E4;
    --on-tertiary-container: #370B1E;
    --error: #B3261E;
    --on-error: #FFFFFF;
    --error-container: #F9DEDC;
    --on-error-container: #370B1E;
    --background: #FFFBFE;
    --on-background: #1C1B1F;
    --surface: #FFFBFE;
    --on-surface: #1C1B1F;
    --outline: #79747E;
    --surface-variant: #E7E0EC;
    --on-surface-variant: #49454E;
    --inverse-surface: #313033;
    --inverse-on-surface: #F4EFF4;
    --overlay: rgba(0, 0, 0, .5);
    --active: rgba(0, 0, 0, .1);
    --shadow1: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);
    --shadow2: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .3);
    --shadow3: 0 10px 16px 0 rgba(0, 0, 0, .14), 0 1px 31px 0 rgba(0, 0, 0, .12), 0 3px 9px 0px rgba(0, 0, 0, .4);
    --size: 1px;
    --font: "Roboto", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    --speed1: .1s;
    --speed2: .2s;
    --speed3: .3s;
    --speed4: .4s
}

.ubo-info .is-dark {
    --primary: #D0BCFF;
    --on-primary: #371E73;
    --primary-container: #4F378B;
    --on-primary-container: #EADDFF;
    --secondary: #CCC2DC;
    --on-secondary: #332D41;
    --secondary-container: #4A4458;
    --on-secondary-container: #E8DEF8;
    --tertiary: #EFB8C8;
    --on-tertiary: #492532;
    --tertiary-container: #633B48;
    --on-tertiary-container: #FFD8E4;
    --error: #F2B8B5;
    --on-error: #601410;
    --error-container: #8C1D18;
    --on-error-container: #F9DEDC;
    --background: #1C1B1F;
    --on-background: #E6E1E5;
    --surface: #1C1B1F;
    --on-surface: #E6E1E5;
    --outline: #938F99;
    --surface-variant: #49454F;
    --on-surface-variant: #CAC4D0;
    --inverse-surface: #E6E1E5;
    --inverse-on-surface: #313033;
    --overlay: rgba(0, 0, 0, .5);
    --active: rgba(255, 255, 255, .2);
    --shadow1: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);
    --shadow2: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .3);
    --shadow3: 0 10px 16px 0 rgba(0, 0, 0, .14), 0 1px 31px 0 rgba(0, 0, 0, .12), 0 3px 9px 0px rgba(0, 0, 0, .4);
    --size: 1px;
    --font: "Roboto", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    --speed1: .1s;
    --speed2: .2s;
    --speed3: .3s;
    --speed4: .4s
}

.ubo-info * {
    -webkit-tap-highlight-color: transparent;
    position: relative;
    vertical-align: middle;
    color: inherit
}

.ubo-info body {
    color: var(--on-background);
    background-color: var(--background);
    margin: 0;
    overflow-x: hidden
}

.ubo-info label {
    font-size: 12px;
    vertical-align: baseline
}

.ubo-info a,
.ubo-info b,
.ubo-info i,
.ubo-info span {
    vertical-align: bottom
}

.ubo-info .button,
.ubo-info a,
.ubo-info button {
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    border: none;
    font-family: inherit;
    outline: inherit;
    justify-content: center
}

.ubo-info .transparent {
    background-color: transparent !important
}

.ubo-info .transparent-border {
    border-color: transparent !important
}

.ubo-info .transparent-text {
    color: transparent !important
}

.ubo-info .black {
    background-color: #000 !important
}

.ubo-info .black-border {
    border-color: #000 !important
}

.ubo-info .black-text {
    color: #000 !important
}

.ubo-info .white {
    background-color: #fff !important
}

.ubo-info .white-border {
    border-color: #fff !important
}

.ubo-info .white-text {
    color: #fff !important
}

.ubo-info .red,
.ubo-info .red6 {
    background-color: #f44336 !important
}

.ubo-info .red-border {
    border-color: #f44336 !important
}

.ubo-info .red-text {
    color: #f44336 !important
}

.ubo-info .red1 {
    background-color: #ffebee !important
}

.ubo-info .red2 {
    background-color: #ffcdd2 !important
}

.ubo-info .red3 {
    background-color: #ef9a9a !important
}

.ubo-info .red4 {
    background-color: #e57373 !important
}

.ubo-info .red5 {
    background-color: #ef5350 !important
}

.ubo-info .red7 {
    background-color: #e53935 !important
}

.ubo-info .red8 {
    background-color: #d32f2f !important
}

.ubo-info .red9 {
    background-color: #c62828 !important
}

.ubo-info .red10 {
    background-color: #b71c1c !important
}

.ubo-info .pink,
.ubo-info .pink6 {
    background-color: #e91e63 !important
}

.ubo-info .pink-border {
    border-color: #e91e63 !important
}

.ubo-info .pink-text {
    color: #e91e63 !important
}

.ubo-info .pink1 {
    background-color: #fce4ec !important
}

.ubo-info .pink2 {
    background-color: #f8bbd0 !important
}

.ubo-info .pink3 {
    background-color: #f48fb1 !important
}

.ubo-info .pink4 {
    background-color: #f06292 !important
}

.ubo-info .pink5 {
    background-color: #ec407a !important
}

.ubo-info .pink7 {
    background-color: #d81b60 !important
}

.ubo-info .pink8 {
    background-color: #c2185b !important
}

.ubo-info .pink9 {
    background-color: #ad1457 !important
}

.ubo-info .pink10 {
    background-color: #880e4f !important
}

.ubo-info .purple,
.ubo-info .purple6 {
    background-color: #9c27b0 !important
}

.ubo-info .purple-border {
    border-color: #9c27b0 !important
}

.ubo-info .purple-text {
    color: #9c27b0 !important
}

.ubo-info .purple1 {
    background-color: #f3e5f5 !important
}

.ubo-info .purple2 {
    background-color: #e1bee7 !important
}

.ubo-info .purple3 {
    background-color: #ce93d8 !important
}

.ubo-info .purple4 {
    background-color: #ba68c8 !important
}

.ubo-info .purple5 {
    background-color: #ab47bc !important
}

.ubo-info .purple7 {
    background-color: #8e24aa !important
}

.ubo-info .purple8 {
    background-color: #7b1fa2 !important
}

.ubo-info .purple9 {
    background-color: #6a1b9a !important
}

.ubo-info .purple10 {
    background-color: #4a148c !important
}

.ubo-info .deep-purple,
.ubo-info .deep-purple6 {
    background-color: #673ab7 !important
}

.ubo-info .deep-purple-border {
    border-color: #673ab7 !important
}

.ubo-info .deep-purple-text {
    color: #673ab7 !important
}

.ubo-info .deep-purple1 {
    background-color: #ede7f6 !important
}

.ubo-info .deep-purple2 {
    background-color: #d1c4e9 !important
}

.ubo-info .deep-purple3 {
    background-color: #b39ddb !important
}

.ubo-info .deep-purple4 {
    background-color: #9575cd !important
}

.ubo-info .deep-purple5 {
    background-color: #7e57c2 !important
}

.ubo-info .deep-purple7 {
    background-color: #5e35b1 !important
}

.ubo-info .deep-purple8 {
    background-color: #512da8 !important
}

.ubo-info .deep-purple9 {
    background-color: #4527a0 !important
}

.ubo-info .deep-purple10 {
    background-color: #311b92 !important
}

.ubo-info .indigo,
.ubo-info .indigo6 {
    background-color: #3f51b5 !important
}

.ubo-info .indigo-border {
    border-color: #3f51b5 !important
}

.ubo-info .indigo-text {
    color: #3f51b5 !important
}

.ubo-info .indigo1 {
    background-color: #e8eaf6 !important
}

.ubo-info .indigo2 {
    background-color: #c5cae9 !important
}

.ubo-info .indigo3 {
    background-color: #9fa8da !important
}

.ubo-info .indigo4 {
    background-color: #7986cb !important
}

.ubo-info .indigo5 {
    background-color: #5c6bc0 !important
}

.ubo-info .indigo7 {
    background-color: #3949ab !important
}

.ubo-info .indigo8 {
    background-color: #303f9f !important
}

.ubo-info .indigo9 {
    background-color: #283593 !important
}

.ubo-info .indigo10 {
    background-color: #1a237e !important
}

.ubo-info .blue,
.ubo-info .blue6 {
    background-color: #2196f3 !important
}

.ubo-info .blue-border {
    border-color: #2196f3 !important
}

.ubo-info .blue-text {
    color: #2196f3 !important
}

.ubo-info .blue1 {
    background-color: #e3f2fd !important
}

.ubo-info .blue2 {
    background-color: #bbdefb !important
}

.ubo-info .blue3 {
    background-color: #90caf9 !important
}

.ubo-info .blue4 {
    background-color: #64b5f6 !important
}

.ubo-info .blue5 {
    background-color: #42a5f5 !important
}

.ubo-info .blue7 {
    background-color: #1e88e5 !important
}

.ubo-info .blue8 {
    background-color: #1976d2 !important
}

.ubo-info .blue9 {
    background-color: #1565c0 !important
}

.ubo-info .blue10 {
    background-color: #0d47a1 !important
}

.ubo-info .light-blue,
.ubo-info .light-blue6 {
    background-color: #03a9f4 !important
}

.ubo-info .light-blue-border {
    border-color: #03a9f4 !important
}

.ubo-info .light-blue-text {
    color: #03a9f4 !important
}

.ubo-info .light-blue1 {
    background-color: #e1f5fe !important
}

.ubo-info .light-blue2 {
    background-color: #b3e5fc !important
}

.ubo-info .light-blue3 {
    background-color: #81d4fa !important
}

.ubo-info .light-blue4 {
    background-color: #4fc3f7 !important
}

.ubo-info .light-blue5 {
    background-color: #29b6f6 !important
}

.ubo-info .light-blue7 {
    background-color: #039be5 !important
}

.ubo-info .light-blue8 {
    background-color: #0288d1 !important
}

.ubo-info .light-blue9 {
    background-color: #0277bd !important
}

.ubo-info .light-blue10 {
    background-color: #01579b !important
}

.ubo-info .cyan,
.ubo-info .cyan6 {
    background-color: #00bcd4 !important
}

.ubo-info .cyan-border {
    border-color: #00bcd4 !important
}

.ubo-info .cyan-text {
    color: #00bcd4 !important
}

.ubo-info .cyan1 {
    background-color: #e0f7fa !important
}

.ubo-info .cyan2 {
    background-color: #b2ebf2 !important
}

.ubo-info .cyan3 {
    background-color: #80deea !important
}

.ubo-info .cyan4 {
    background-color: #4dd0e1 !important
}

.ubo-info .cyan5 {
    background-color: #26c6da !important
}

.ubo-info .cyan7 {
    background-color: #00acc1 !important
}

.ubo-info .cyan8 {
    background-color: #0097a7 !important
}

.ubo-info .cyan9 {
    background-color: #00838f !important
}

.ubo-info .cyan10 {
    background-color: #006064 !important
}

.ubo-info .teal,
.ubo-info .teal6 {
    background-color: #009688 !important
}

.ubo-info .teal-border {
    border-color: #009688 !important
}

.ubo-info .teal-text {
    color: #009688 !important
}

.ubo-info .teal1 {
    background-color: #e0f2f1 !important
}

.ubo-info .teal2 {
    background-color: #b2dfdb !important
}

.ubo-info .teal3 {
    background-color: #80cbc4 !important
}

.ubo-info .teal4 {
    background-color: #4db6ac !important
}

.ubo-info .teal5 {
    background-color: #26a69a !important
}

.ubo-info .teal7 {
    background-color: #00897b !important
}

.ubo-info .teal8 {
    background-color: #00796b !important
}

.ubo-info .teal9 {
    background-color: #00695c !important
}

.ubo-info .teal10 {
    background-color: #004d40 !important
}

.ubo-info .green,
.ubo-info .green6 {
    background-color: #4caf50 !important
}

.ubo-info .green-border {
    border-color: #4caf50 !important
}

.ubo-info .green-text {
    color: #4caf50 !important
}

.ubo-info .green1 {
    background-color: #e8f5e9 !important
}

.ubo-info .green2 {
    background-color: #c8e6c9 !important
}

.ubo-info .green3 {
    background-color: #a5d6a7 !important
}

.ubo-info .green4 {
    background-color: #81c784 !important
}

.ubo-info .green5 {
    background-color: #66bb6a !important
}

.ubo-info .green7 {
    background-color: #43a047 !important
}

.ubo-info .green8 {
    background-color: #388e3c !important
}

.ubo-info .green9 {
    background-color: #2e7d32 !important
}

.ubo-info .green10 {
    background-color: #1b5e20 !important
}

.ubo-info .light-green,
.ubo-info .light-green6 {
    background-color: #8bc34a !important
}

.ubo-info .light-green-border {
    border-color: #8bc34a !important
}

.ubo-info .light-green-text {
    color: #8bc34a !important
}

.ubo-info .light-green1 {
    background-color: #f1f8e9 !important
}

.ubo-info .light-green2 {
    background-color: #dcedc8 !important
}

.ubo-info .light-green3 {
    background-color: #c5e1a5 !important
}

.ubo-info .light-green4 {
    background-color: #aed581 !important
}

.ubo-info .light-green5 {
    background-color: #9ccc65 !important
}

.ubo-info .light-green7 {
    background-color: #7cb342 !important
}

.ubo-info .light-green8 {
    background-color: #689f38 !important
}

.ubo-info .light-green9 {
    background-color: #558b2f !important
}

.ubo-info .light-green10 {
    background-color: #33691e !important
}

.ubo-info .lime,
.ubo-info .lime6 {
    background-color: #cddc39 !important
}

.ubo-info .lime-border {
    border-color: #cddc39 !important
}

.ubo-info .lime-text {
    color: #cddc39 !important
}

.ubo-info .lime1 {
    background-color: #f9fbe7 !important
}

.ubo-info .lime2 {
    background-color: #f0f4c3 !important
}

.ubo-info .lime3 {
    background-color: #e6ee9c !important
}

.ubo-info .lime4 {
    background-color: #dce775 !important
}

.ubo-info .lime5 {
    background-color: #d4e157 !important
}

.ubo-info .lime7 {
    background-color: #c0ca33 !important
}

.ubo-info .lime8 {
    background-color: #afb42b !important
}

.ubo-info .lime9 {
    background-color: #9e9d24 !important
}

.ubo-info .lime10 {
    background-color: #827717 !important
}

.ubo-info .yellow,
.ubo-info .yellow6 {
    background-color: #ffeb3b !important
}

.ubo-info .yellow-border {
    border-color: #ffeb3b !important
}

.ubo-info .yellow-text {
    color: #ffeb3b !important
}

.ubo-info .yellow1 {
    background-color: #fffde7 !important
}

.ubo-info .yellow2 {
    background-color: #fff9c4 !important
}

.ubo-info .yellow3 {
    background-color: #fff59d !important
}

.ubo-info .yellow4 {
    background-color: #fff176 !important
}

.ubo-info .yellow5 {
    background-color: #ffee58 !important
}

.ubo-info .yellow7 {
    background-color: #fdd835 !important
}

.ubo-info .yellow8 {
    background-color: #fbc02d !important
}

.ubo-info .yellow9 {
    background-color: #f9a825 !important
}

.ubo-info .yellow10 {
    background-color: #f57f17 !important
}

.ubo-info .amber,
.ubo-info .amber6 {
    background-color: #ffc107 !important
}

.ubo-info .amber-border {
    border-color: #ffc107 !important
}

.ubo-info .amber-text {
    color: #ffc107 !important
}

.ubo-info .amber1 {
    background-color: #fff8e1 !important
}

.ubo-info .amber2 {
    background-color: #ffecb3 !important
}

.ubo-info .amber3 {
    background-color: #ffe082 !important
}

.ubo-info .amber4 {
    background-color: #ffd54f !important
}

.ubo-info .amber5 {
    background-color: #ffca28 !important
}

.ubo-info .amber7 {
    background-color: #ffb300 !important
}

.ubo-info .amber8 {
    background-color: #ffa000 !important
}

.ubo-info .amber9 {
    background-color: #ff8f00 !important
}

.ubo-info .amber10 {
    background-color: #ff6f00 !important
}

.ubo-info .orange,
.ubo-info .orange6 {
    background-color: #ff9800 !important
}

.ubo-info .orange-border {
    border-color: #ff9800 !important
}

.ubo-info .orange-text {
    color: #ff9800 !important
}

.ubo-info .orange1 {
    background-color: #fff3e0 !important
}

.ubo-info .orange2 {
    background-color: #ffe0b2 !important
}

.ubo-info .orange3 {
    background-color: #ffcc80 !important
}

.ubo-info .orange4 {
    background-color: #ffb74d !important
}

.ubo-info .orange5 {
    background-color: #ffa726 !important
}

.ubo-info .orange7 {
    background-color: #fb8c00 !important
}

.ubo-info .orange8 {
    background-color: #f57c00 !important
}

.ubo-info .orange9 {
    background-color: #ef6c00 !important
}

.ubo-info .orange10 {
    background-color: #e65100 !important
}

.ubo-info .deep-orange,
.ubo-info .deep-orange6 {
    background-color: #ff5722 !important
}

.ubo-info .deep-orange-border {
    border-color: #ff5722 !important
}

.ubo-info .deep-orange-text {
    color: #ff5722 !important
}

.ubo-info .deep-orange1 {
    background-color: #fbe9e7 !important
}

.ubo-info .deep-orange2 {
    background-color: #ffccbc !important
}

.ubo-info .deep-orange3 {
    background-color: #ffab91 !important
}

.ubo-info .deep-orange4 {
    background-color: #ff8a65 !important
}

.ubo-info .deep-orange5 {
    background-color: #ff7043 !important
}

.ubo-info .deep-orange7 {
    background-color: #f4511e !important
}

.ubo-info .deep-orange8 {
    background-color: #e64a19 !important
}

.ubo-info .deep-orange9 {
    background-color: #d84315 !important
}

.ubo-info .deep-orange10 {
    background-color: #bf360c !important
}

.ubo-info .brown,
.ubo-info .brown6 {
    background-color: #795548 !important
}

.ubo-info .brown-border {
    border-color: #795548 !important
}

.ubo-info .brown-text {
    color: #795548 !important
}

.ubo-info .brown1 {
    background-color: #efebe9 !important
}

.ubo-info .brown2 {
    background-color: #d7ccc8 !important
}

.ubo-info .brown3 {
    background-color: #bcaaa4 !important
}

.ubo-info .brown4 {
    background-color: #a1887f !important
}

.ubo-info .brown5 {
    background-color: #8d6e63 !important
}

.ubo-info .brown7 {
    background-color: #6d4c41 !important
}

.ubo-info .brown8 {
    background-color: #5d4037 !important
}

.ubo-info .brown9 {
    background-color: #4e342e !important
}

.ubo-info .brown10 {
    background-color: #3e2723 !important
}

.ubo-info .blue-grey,
.ubo-info .blue-grey6 {
    background-color: #607d8b !important
}

.ubo-info .blue-grey-border {
    border-color: #607d8b !important
}

.ubo-info .blue-grey-text {
    color: #607d8b !important
}

.ubo-info .blue-grey1 {
    background-color: #eceff1 !important
}

.ubo-info .blue-grey2 {
    background-color: #cfd8dc !important
}

.ubo-info .blue-grey3 {
    background-color: #b0bec5 !important
}

.ubo-info .blue-grey4 {
    background-color: #90a4ae !important
}

.ubo-info .blue-grey5 {
    background-color: #78909c !important
}

.ubo-info .blue-grey7 {
    background-color: #546e7a !important
}

.ubo-info .blue-grey8 {
    background-color: #455a64 !important
}

.ubo-info .blue-grey9 {
    background-color: #37474f !important
}

.ubo-info .blue-grey10 {
    background-color: #263238 !important
}

.ubo-info .grey,
.ubo-info .grey6 {
    background-color: #9e9e9e !important
}

.ubo-info .grey-border {
    border-color: #9e9e9e !important
}

.ubo-info .grey-text {
    color: #9e9e9e !important
}

.ubo-info .grey1 {
    background-color: #fafafa !important
}

.ubo-info .grey2 {
    background-color: #f5f5f5 !important
}

.ubo-info .grey3 {
    background-color: #eee !important
}

.ubo-info .grey4 {
    background-color: #e0e0e0 !important
}

.ubo-info .grey5 {
    background-color: #bdbdbd !important
}

.ubo-info .grey7 {
    background-color: #757575 !important
}

.ubo-info .grey8 {
    background-color: #616161 !important
}

.ubo-info .grey9 {
    background-color: #424242 !important
}

.ubo-info .grey10 {
    background-color: #212121 !important
}

.ubo-info .primary {
    background-color: var(--primary) !important;
    color: var(--on-primary) !important
}

.ubo-info .primary-container {
    background-color: var(--primary-container) !important;
    color: var(--on-primary-container) !important
}

.ubo-info .secondary {
    background-color: var(--secondary) !important;
    color: var(--on-secondary) !important
}

.ubo-info .secondary-container {
    background-color: var(--secondary-container) !important;
    color: var(--on-secondary-container) !important
}

.ubo-info .tertiary {
    background-color: var(--tertiary) !important;
    color: var(--on-tertiary) !important
}

.ubo-info .tertiary-container {
    background-color: var(--tertiary-container) !important;
    color: var(--on-tertiary-container) !important
}

.ubo-info .error {
    background-color: var(--error) !important;
    color: var(--on-error) !important
}

.ubo-info .error-container {
    background-color: var(--error-container) !important;
    color: var(--on-error-container) !important
}

.ubo-info .background {
    background-color: var(--background) !important;
    color: var(--on-background) !important
}

.ubo-info .surface {
    background-color: var(--surface) !important;
    color: var(--on-surface) !important
}

.ubo-info .surface-variant {
    background-color: var(--surface-variant) !important;
    color: var(--on-surface-variant) !important
}

.ubo-info .inverse-surface {
    background-color: var(--inverse-surface);
    color: var(--inverse-on-surface)
}

.ubo-info .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    font-size: 10px;
    text-transform: none;
    z-index: 1;
    padding: 0 6px;
    background-color: var(--error);
    color: var(--on-error);
    top: 0;
    left: auto;
    bottom: auto;
    right: 0;
    transform: translate(50%, -100%);
    width: 16px;
    height: 16px
}

.ubo-info .badge.none {
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
    transform: none;
    position: relative;
    margin: 0 2px
}

.ubo-info .badge.top {
    top: 0;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -100%)
}

.ubo-info .badge.bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    right: auto;
    transform: translate(-50%, 100%)
}

.ubo-info .badge.left {
    top: 50%;
    left: 0;
    bottom: auto;
    right: auto;
    transform: translate(-100%, -50%)
}

.ubo-info .badge.right {
    top: 50%;
    left: auto;
    bottom: auto;
    right: 0;
    transform: translate(100%, -50%)
}

.ubo-info .badge.top.left {
    top: 0;
    left: 0;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -100%)
}

.ubo-info .badge.top.right {
    top: 0;
    left: auto;
    bottom: auto;
    right: 0;
    transform: translate(50%, -100%)
}

.ubo-info .badge.bottom.left {
    top: auto;
    left: 0;
    bottom: 0;
    right: auto;
    transform: translate(-50%, 100%)
}

.ubo-info .badge.bottom.right {
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
    transform: translate(50%, 100%)
}

.ubo-info .badge.border {
    border: 1px solid var(--error);
    background-color: transparent;
    color: var(--error)
}

.ubo-info .badge.round {
    border-radius: 8px
}

.ubo-info .badge.circle,
.ubo-info .badge.square {
    padding: 0;
    text-align: center;
    width: 16px;
    height: 16px;
    min-width: auto;
    min-height: auto;
    max-width: none;
    max-height: none
}

.ubo-info .badge.circle {
    border-radius: 50%
}

.ubo-info .badge.square {
    border-radius: 0
}

.ubo-info .button,
.ubo-info button {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow1);
    min-height: 40px;
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    color: var(--on-primary);
    padding: 0 16px;
    background-color: var(--primary);
    margin: 0 8px;
    border-radius: 4px;
    transition: 0.3s transform, 0.3s border-radius, 0.3s padding
}

.ubo-info .button>:not(.dropdown, .progress, .badge, .tooltip)+:not(.dropdown, .progress, .badge, .tooltip),
.ubo-info button>:not(.dropdown, .progress, .badge, .tooltip)+:not(.dropdown, .progress, .badge, .tooltip) {
    margin-left: 4px
}

.ubo-info .button.none,
.ubo-info button.none {
    box-shadow: none;
    width: auto;
    min-width: auto;
    height: auto;
    min-height: auto;
    color: var(--primary);
    padding: 0;
    background-color: transparent;
    margin: 0 8px
}

.ubo-info .button.small,
.ubo-info button.small {
    min-height: 32px !important;
    height: 32px;
    font-size: 14px
}

.ubo-info .button.medium,
.ubo-info button.medium {
    min-height: 40px !important;
    height: 40px
}

.ubo-info .button.large,
.ubo-info button.large {
    min-height: 48px !important;
    height: 48px
}

.ubo-info .button.extra,
.ubo-info button.extra {
    min-height: 56px !important;
    height: 56px;
    font-size: 16px
}

.ubo-info .button.border,
.ubo-info button.border {
    border: 1px solid var(--primary);
    background-color: transparent;
    color: var(--primary);
    box-shadow: none
}

.ubo-info .button.round,
.ubo-info button.round {
    transform: none;
    border-radius: 32px
}

.ubo-info .button.top-round,
.ubo-info button.top-round {
    border-radius: 32px 32px 4px 4px !important
}

.ubo-info .button.bottom-round,
.ubo-info button.bottom-round {
    border-radius: 4px 4px 32px 32px !important
}

.ubo-info .button.left-round,
.ubo-info button.left-round {
    border-radius: 32px 4px 4px 32px !important
}

.ubo-info .button.right-round,
.ubo-info button.right-round {
    border-radius: 4px 32px 32px 4px !important
}

.ubo-info .button.top-round.left-round,
.ubo-info button.top-round.left-round {
    border-radius: 32px 32px 4px 32px !important
}

.ubo-info .button.top-round.right-round,
.ubo-info button.top-round.right-round {
    border-radius: 32px 32px 32px 4px !important
}

.ubo-info .button.bottom-round.left-round,
.ubo-info button.bottom-round.left-round {
    border-radius: 32px 4px 32px 32px !important
}

.ubo-info .button.bottom-round.right-round,
.ubo-info button.bottom-round.right-round {
    border-radius: 4px 32px 32px 32px !important
}

.ubo-info .button.circle,
.ubo-info button.circle {
    transform: none;
    padding: 0;
    border-radius: 40px;
    padding: 0
}

.ubo-info .button.square,
.ubo-info button.square {
    transform: none;
    border-radius: 4px;
    padding: 0
}

.ubo-info .button.extend,
.ubo-info button.extend {
    min-height: 56px !important;
    min-width: 56px !important;
    padding: 0
}

.ubo-info .button.extend>span,
.ubo-info button.extend>span {
    display: none
}

.ubo-info .button.extend.active,
.ubo-info .button.extend:hover,
.ubo-info button.extend.active,
.ubo-info button.extend:hover {
    width: auto;
    max-width: none;
    min-width: auto;
    padding: 0 16px
}

.ubo-info .button.extend.active>i+span,
.ubo-info .button.extend:hover>i+span,
.ubo-info button.extend.active>i+span,
.ubo-info button.extend:hover>i+span {
    display: inherit;
    margin-left: 32px
}

.ubo-info .button.extend.active>img+span,
.ubo-info .button.extend:hover>img+span,
.ubo-info button.extend.active>img+span,
.ubo-info button.extend:hover>img+span {
    display: inherit;
    margin-left: 48px
}

.ubo-info .button.circle:not(.flat, .border),
.ubo-info .button.diamond:not(.flat, .border),
.ubo-info .button.square:not(.flat, .border),
.ubo-info button.circle:not(.flat, .border),
.ubo-info button.diamond:not(.flat, .border),
.ubo-info button.square:not(.flat, .border) {
    box-shadow: var(--shadow2)
}

.ubo-info .button[disabled],
.ubo-info button:disabled {
    opacity: .5;
    cursor: not-allowed
}

.ubo-info .button[disabled] {
    pointer-events: none
}

.ubo-info .button[disabled]::after,
.ubo-info .button[disabled]::before,
.ubo-info button:disabled::after,
.ubo-info button:disabled::before {
    display: none
}

.ubo-info .card,
.ubo-info article {
    box-shadow: var(--shadow1);
    background-color: var(--surface-variant);
    color: var(--on-surface-variant);
    padding: 16px;
    border-radius: 4px;
    display: block;
    transition: 0.3s transform, 0.3s border-radius, 0.3s padding
}

.ubo-info .card+.card,
.ubo-info article+article {
    margin-top: 16px
}

.ubo-info .row.medium-space>.col>.card+.card,
.ubo-info .row.medium-space>.col>article+article {
    margin-top: 24px
}

.ubo-info .row.large-space>.col>.card+.card,
.ubo-info .row.large-space>.col>article+article {
    margin-top: 32px
}

.ubo-info .card.small,
.ubo-info article.small {
    height: 192px
}

.ubo-info .card.medium,
.ubo-info article.medium {
    height: 320px
}

.ubo-info .card.large,
.ubo-info article.large {
    height: 512px
}

.ubo-info .card.border,
.ubo-info article.border {
    border: 1px solid var(--outline);
    box-shadow: none;
    background-color: transparent
}

.ubo-info .card.round,
.ubo-info article.round {
    border-radius: 24px
}

.ubo-info .chip {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    min-height: 40px;
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    color: var(--on-secondary);
    padding: 0 16px;
    background-color: var(--secondary);
    margin: 0 8px;
    text-transform: none;
    border-radius: 8px;
    transition: 0.3s transform, 0.3s border-radius, 0.3s padding
}

.ubo-info .chip>:not(.dropdown, .progress, .badge, .tooltip)+:not(.dropdown, .progress, .badge, .tooltip) {
    margin-left: 4px
}

.ubo-info .chip.small {
    min-height: 32px !important;
    height: 32px
}

.ubo-info .chip.medium {
    min-height: 40px !important;
    height: 40px
}

.ubo-info .chip.large {
    min-height: 48px !important;
    height: 48px
}

.ubo-info .chip.border {
    border: 1px solid var(--secondary);
    background-color: transparent;
    color: var(--secondary)
}

.ubo-info .chip.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: var(--active)
}

.ubo-info .chip.circle {
    transform: none;
    padding: 0;
    border-radius: 40px;
    padding: 0
}

.ubo-info .chip.square {
    transform: none;
    border-radius: 4px;
    padding: 0
}

.ubo-info .chip.round {
    border-radius: 24px
}

.ubo-info .container,
.ubo-info .container.min {
    margin: 0 auto;
    max-width: 992px;
    padding: 80px 88px;
    overflow-x: hidden
}

.ubo-info .container.max {
    max-width: 100%
}

@media only screen and (max-width:600px) {

    .container,
    .container.min {
        padding: 80px 8px
    }
}

.ubo-info .dropdown {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    box-shadow: var(--shadow2);
    background-color: var(--surface);
    box-sizing: border-box;
    z-index: 11;
    top: auto;
    bottom: 0;
    left: 0;
    right: auto;
    width: 100%;
    max-height: 320px;
    transform: translateY(100%);
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    color: var(--on-surface);
    line-height: normal;
    text-align: left
}

.ubo-info .dropdown.no-wrap {
    width: auto
}

.ubo-info .button:not([data-ui]):focus-within>.dropdown,
.ubo-info .dropdown.active,
.ubo-info .dropdown:not([data-ui]):active,
.ubo-info .field>:not([data-ui]):focus-within~.dropdown,
.ubo-info button:not([data-ui]):focus-within>.dropdown {
    opacity: 1;
    visibility: visible;
    max-width: none;
    animation: 0.1s dropdown-to-bottom
}

.ubo-info .dropdown.border {
    border: 1px solid var(--outline);
    box-shadow: none
}

.ubo-info .dropdown.round {
    border-radius: 24px
}

.ubo-info .dropdown.right {
    left: 0;
    right: auto
}

.ubo-info .dropdown.left {
    left: auto;
    right: 0
}

.ubo-info .dropdown>a {
    display: block;
    padding: 8px 16px
}

.ubo-info .dropdown>a.active,
.ubo-info .dropdown>a:focus,
.ubo-info .dropdown>a:hover {
    background-color: var(--active)
}

.ubo-info .dropdown.no-wrap>a {
    white-space: nowrap
}

.ubo-info .dropdown>a.row.no-wrap,
.ubo-info .dropdown>a.row.no-wrap+a.row.no-wrap {
    margin: 0 -8px
}

@keyframes dropdown-to-bottom {
    from {
        opacity: 0;
        transform: translateY(75%)
    }

    to {
        opacity: 1;
        transform: translateY(100%)
    }
}

.ubo-info details[open]>:not(summary) {
    animation: details-to-open 0.3s ease
}

.ubo-info summary.none {
    list-style-type: none
}

.ubo-info summary {
    cursor: pointer
}

.ubo-info summary:focus {
    outline: 0
}

@keyframes details-to-open {
    0% {
        opacity: 0;
        transform: translateY(-8px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.ubo-info .field {
    height: 48px;
    margin-bottom: 8px;
    border: none !important
}

.ubo-info .field.small {
    height: 40px
}

.ubo-info .field.medium {
    height: 48px
}

.ubo-info .field.large {
    height: 56px
}

.ubo-info .field.extra {
    height: 64px
}

.ubo-info .field+.field {
    margin-top: 24px
}

.ubo-info .row.medium-space>.col>.field+.field {
    margin-top: 32px
}

.ubo-info .row.large-space>.col>.field+.field {
    margin-top: 40px
}

.ubo-info .field::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background-color: inherit;
    color: inherit
}

.ubo-info .field.fill::before {
    background-color: var(--surface-variant);
    color: var(--on-surface-variant)
}

.ubo-info .field>i,
.ubo-info .field>img {
    position: absolute;
    top: 50%;
    left: auto;
    right: 16px;
    transform: translateY(-50%);
    cursor: pointer;
    color: inherit;
    z-index: 0
}

.ubo-info .field.border>i,
.ubo-info .field.border>img,
.ubo-info .field.fill>i,
.ubo-info .field.fill>img,
.ubo-info .field.round>i,
.ubo-info .field.round>img {
    left: auto;
    right: 16px
}

.ubo-info .field>i:first-child,
.ubo-info .field>img:first-child {
    left: 16px;
    right: auto
}

.ubo-info .field.border>i:first-child,
.ubo-info .field.border>img:first-child,
.ubo-info .field.fill>i:first-child,
.ubo-info .field.fill>img:first-child,
.ubo-info .field.round>i:first-child,
.ubo-info .field.round>img:first-child {
    left: 16px;
    right: auto
}

.ubo-info .field.invalid>i {
    color: var(--error) !important
}

.ubo-info .field>select,
.ubo-info input[type^=date],
.ubo-info input[type^=time] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer
}

.ubo-info input[type^=date]::-webkit-calendar-picker-indicator,
.ubo-info input[type^=date]::-webkit-inner-spin-button,
.ubo-info input[type^=time]::-webkit-calendar-picker-indicator,
.ubo-info input[type^=time]::-webkit-inner-spin-button {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    padding: 0;
    margin: 0;
    cursor: pointer
}

.ubo-info input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    cursor: pointer
}

.ubo-info .field>input,
.ubo-info .field>select,
.ubo-info .field>textarea {
    border: 1px solid transparent;
    padding: 0 15px;
    font-family: inherit;
    font-size: 16px;
    width: 100%;
    height: 100%;
    outline: 0;
    z-index: 1;
    color: inherit;
    background: 0 0;
    box-sizing: border-box;
    resize: none;
    border-radius: inherit
}

.ubo-info .field>input:focus,
.ubo-info .field>select:focus,
.ubo-info .field>textarea:focus {
    border: 2px solid transparent;
    padding: 0 14px
}

.ubo-info .field.border>input,
.ubo-info .field.border>select,
.ubo-info .field.border>textarea {
    border-color: var(--outline);
    box-shadow: none !important
}

.ubo-info .field.border>input:focus,
.ubo-info .field.border>select:focus,
.ubo-info .field.border>textarea:focus {
    border-color: var(--primary)
}

.ubo-info .field.round>input,
.ubo-info .field.round>select,
.ubo-info .field.round>textarea {
    box-shadow: var(--shadow1);
    padding-left: 23px;
    padding-right: 23px
}

.ubo-info .field.round>input:focus,
.ubo-info .field.round>select:focus,
.ubo-info .field.round>textarea:focus {
    padding-left: 22px;
    padding-right: 22px
}

.ubo-info .field.prefix>input,
.ubo-info .field.prefix>select,
.ubo-info .field.prefix>textarea {
    padding-left: 47px
}

.ubo-info .field.prefix>input:focus,
.ubo-info .field.prefix>select:focus,
.ubo-info .field.prefix>textarea:focus {
    padding-left: 46px
}

.ubo-info .field.suffix>input,
.ubo-info .field.suffix>select,
.ubo-info .field.suffix>textarea {
    padding-right: 47px
}

.ubo-info .field.suffix>input:focus,
.ubo-info .field.suffix>select:focus,
.ubo-info .field.suffix>textarea:focus {
    padding-right: 46px
}

.ubo-info .field:not(.border, .flat, .round)>input,
.ubo-info .field:not(.border, .flat, .round)>select,
.ubo-info .field:not(.border, .flat, .round)>textarea {
    border-bottom-color: var(--outline)
}

.ubo-info .field:not(.border, .flat, .round)>input:focus,
.ubo-info .field:not(.border, .flat, .round)>select:focus,
.ubo-info .field:not(.border, .flat, .round)>textarea:focus {
    border-bottom-color: var(--primary)
}

.ubo-info .field {
    border-radius: 8px 8px 0 0
}

.ubo-info .field.border {
    border-radius: 8px
}

.ubo-info .field.round {
    border-radius: 32px
}

.ubo-info .field.round.textarea {
    border-radius: 24px
}

.ubo-info .field.fill>input,
.ubo-info .field.fill>select,
.ubo-info .field.fill>textarea {
    box-shadow: none
}

.ubo-info .field.flat>input,
.ubo-info .field.flat>select,
.ubo-info .field.flat>textarea {
    border-color: transparent !important;
    box-shadow: none !important
}

.ubo-info .field.flat>input:focus,
.ubo-info .field.flat>select:focus,
.ubo-info .field.flat>textarea:focus {
    box-shadow: var(--shadow1) !important
}

.ubo-info .field.invalid:not(.border, .round, .flat)>input,
.ubo-info .field.invalid:not(.border, .round, .flat)>input:focus,
.ubo-info .field.invalid:not(.border, .round, .flat)>select,
.ubo-info .field.invalid:not(.border, .round, .flat)>select:focus,
.ubo-info .field.invalid:not(.border, .round, .flat)>textarea,
.ubo-info .field.invalid:not(.border, .round, .flat)>textarea:focus {
    border-bottom-color: var(--error)
}

.ubo-info .field.invalid.border>input,
.ubo-info .field.invalid.border>input:focus,
.ubo-info .field.invalid.border>select,
.ubo-info .field.invalid.border>select:focus,
.ubo-info .field.invalid.border>textarea,
.ubo-info .field.invalid.border>textarea:focus {
    border-color: var(--error)
}

.ubo-info .field>:disabled {
    opacity: .5;
    cursor: not-allowed
}

.ubo-info .field.small.textarea {
    height: 72px
}

.ubo-info .field.medium.textarea,
.ubo-info .field.textarea {
    height: 88px
}

.ubo-info .field.large.textarea {
    height: 104px
}

.ubo-info .field.extra.textarea {
    height: 120px
}

.ubo-info .field>select>option {
    background-color: var(--surface);
    color: var(--on-surface)
}

.ubo-info .field.label>input,
.ubo-info .field.label>select {
    padding-top: 16px
}

.ubo-info .field.label.border:not(.fill)>input,
.ubo-info .field.label.border:not(.fill)>select {
    padding-top: 0
}

.ubo-info .field.label.small>textarea {
    padding-top: 18px
}

.ubo-info .field.label.medium>textarea,
.ubo-info .field.label>textarea {
    padding-top: 22px
}

.ubo-info .field.label.large>textarea {
    padding-top: 26px
}

.ubo-info .field.label.extra>textarea {
    padding-top: 30px
}

.ubo-info .field.small.border:not(.fill)>textarea,
.ubo-info .field.small:not(.label)>textarea {
    padding-top: 10px
}

.ubo-info .field.border:not(.fill)>textarea,
.ubo-info .field.medium.border:not(.fill)>textarea,
.ubo-info .field.medium:not(.label)>textarea,
.ubo-info .field:not(.label)>textarea {
    padding-top: 14px
}

.ubo-info .field.large.border:not(.fill)>textarea,
.ubo-info .field.large:not(.label)>textarea {
    padding-top: 18px
}

.ubo-info .field.extra.border:not(.fill)>textarea,
.ubo-info .field.extra:not(.label)>textarea {
    padding-top: 22px
}

.ubo-info .field.label>label {
    will-change: top, left;
    position: absolute;
    top: 50%;
    left: 16px;
    font-size: 16px;
    transform: translateY(-50%);
    transition: all 0.1s;
    z-index: 10;
    color: inherit
}

.ubo-info .field.label.textarea.small>label {
    top: 20px
}

.ubo-info .field.label.textarea.medium>label,
.ubo-info .field.label.textarea>label {
    top: 24px
}

.ubo-info .field.label.textarea.large>label {
    top: 28px
}

.ubo-info .field.label.textarea.extra>label {
    top: 32px
}

.ubo-info .field.label.round>label {
    left: 24px
}

.ubo-info .field.label.prefix>label {
    left: 48px
}

.ubo-info .field.label>[placeholder]:focus~label,
.ubo-info .field.label>[placeholder]:not(:placeholder-shown)~label,
.ubo-info .field.label>label.active {
    font-size: 12px;
    transform: translateY(-120%)
}

.ubo-info .field.label.border:not(.fill)>[placeholder]:focus~label,
.ubo-info .field.label.border:not(.fill)>[placeholder]:not(:placeholder-shown)~label,
.ubo-info .field.label.border:not(.fill)>label.active {
    font-size: 12px;
    top: 0;
    left: 16px;
    transform: translateY(-50%)
}

.ubo-info .field.label.border.round:not(.fill)>[placeholder]:focus~label,
.ubo-info .field.label.border.round:not(.fill)>[placeholder]:not(:placeholder-shown)~label,
.ubo-info .field.label.border.round:not(.fill)>label.active {
    left: 24px
}

.ubo-info .field.label>:focus~label {
    color: var(--primary)
}

.ubo-info .field.invalid>label {
    color: var(--error) !important
}

.ubo-info .field.required>label:after,
.ubo-info .field>label.required:after {
    content: " * "
}

.ubo-info .field>.error,
.ubo-info .field>.helper {
    position: absolute;
    /* left: 16px; */
    bottom: 0;
    /* transform: translateY(100%); */
    font-size: 12px;
    background: 0 0 !important;
    padding-top: 2px
}

.ubo-info a.helper {
    color: var(--primary)
}

.ubo-info .field>.error {
    color: var(--error) !important
}

.ubo-info .field.round>.error,
.ubo-info .field.round>.helper {
    left: 24px
}

.ubo-info .field.invalid>.helper {
    display: none
}

.ubo-info table td>.field {
    max-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0
}

.ubo-info i {
    font-family: "Material Icons";
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    width: 24px;
    margin: 0 auto;
    color: var(--on-background)
}

.ubo-info i.outlined {
    font-family: "Material Icons Outlined"
}

.ubo-info i.small {
    font-size: 16px;
    width: 16px
}

.ubo-info i.medium {
    font-size: 24px;
    width: 24px
}

.ubo-info i.large {
    font-size: 32px;
    width: 32px
}

.ubo-info i.extra {
    font-size: 48px;
    width: 48px
}

.ubo-info .circle>i {
    vertical-align: unset
}

.ubo-info .absolute {
    position: absolute
}

.ubo-info .fixed {
    position: fixed
}

.ubo-info .absolute,
.ubo-info .fixed {
    border-radius: inherit;
    float: none
}

.ubo-info .absolute.round,
.ubo-info .fixed.round {
    border-radius: 24px
}

.ubo-info .absolute.border,
.ubo-info .fixed.border {
    border: 1px solid var(--outline)
}

.ubo-info .absolute.left.right,
.ubo-info .fixed.left.right {
    width: auto
}

.ubo-info .absolute.left.right.small,
.ubo-info .fixed.left.right.small {
    height: 320px
}

.ubo-info .absolute.left.right.medium,
.ubo-info .fixed.left.right.medium {
    height: 448px
}

.ubo-info .absolute.left.right.large,
.ubo-info .fixed.left.right.large {
    height: 704px
}

.ubo-info .absolute.top.bottom.small,
.ubo-info .fixed.top.bottom.small {
    width: 320px
}

.ubo-info .absolute.top.bottom.medium,
.ubo-info .fixed.top.bottom.medium {
    width: 448px
}

.ubo-info .absolute.top.bottom.large,
.ubo-info .fixed.top.bottom.large {
    width: 704px
}

footer.fixed,
.ubo-info header.fixed {
    position: sticky;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;
    background-color: inherit;
    padding: inherit;
    padding-left: 0;
    padding-right: 0
}

.ubo-info .card>header.fixed,
.ubo-info .medium-padding>header.fixed,
.ubo-info .modal>header.fixed,
.ubo-info .padding>header.fixed,
.ubo-info article>header.fixed {
    transform: translateY(-16px)
}

.ubo-info .card>footer.fixed,
.ubo-info .medium-padding>footer.fixed,
.ubo-info .modal>footer.fixed,
.ubo-info .padding>footer.fixed,
.ubo-info article>footer.fixed {
    transform: translateY(16px)
}

.ubo-info .no-padding>footer.fixed,
.ubo-info .no-padding>header.fixed {
    transform: none
}

.ubo-info .small-padding>header.fixed {
    transform: translateY(-8px)
}

.ubo-info .small-padding>footer.fixed {
    transform: translateY(8px)
}

.ubo-info .large-padding>header.fixed {
    transform: translateY(-24px)
}

.ubo-info .large-padding>footer.fixed {
    transform: translateY(24px)
}

.ubo-info .loader {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 4px solid var(--primary);
    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
    animation: 1.6s to-loader linear infinite;
    background: 0 0 !important
}

.ubo-info .loader.small {
    width: 24px;
    height: 24px;
    border-width: 3px
}

.ubo-info .loader.medium {
    width: 40px;
    height: 40px;
    border-width: 4px
}

.ubo-info .loader.large {
    width: 56px;
    height: 56px;
    border-width: 5px
}

.ubo-info .loader.red {
    border-color: #f44336 !important
}

.ubo-info .loader.pink {
    border-color: #e91e63 !important
}

.ubo-info .loader.purple {
    border-color: #9c27b0 !important
}

.ubo-info .loader.deep-purple {
    border-color: #673ab7 !important
}

.ubo-info .loader.indigo {
    border-color: #3f51b5 !important
}

.ubo-info .loader.blue {
    border-color: #2196f3 !important
}

.ubo-info .loader.light-blue {
    border-color: #03a9f4 !important
}

.ubo-info .loader.cyan {
    border-color: #00bcd4 !important
}

.ubo-info .loader.teal {
    border-color: #009688 !important
}

.ubo-info .loader.green {
    border-color: #4caf50 !important
}

.ubo-info .loader.light-green {
    border-color: #8bc34a !important
}

.ubo-info .loader.lime {
    border-color: #cddc39 !important
}

.ubo-info .loader.yellow {
    border-color: #ffeb3b !important
}

.ubo-info .loader.amber {
    border-color: #ffc107 !important
}

.ubo-info .loader.orange {
    border-color: #ff9800 !important
}

.ubo-info .loader.deep-orange {
    border-color: #ff5722 !important
}

.ubo-info .loader.brown {
    border-color: #795548 !important
}

.ubo-info .loader.blue-grey {
    border-color: #607d8b !important
}

.ubo-info .loader.grey {
    border-color: #9e9e9e !important
}

.ubo-info .loader.black {
    border-color: #000 !important
}

.ubo-info .loader.white {
    border-color: #fff !important
}

@keyframes to-loader {
    0% {
        transform: rotate(0);
        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% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%)
    }

    30% {
        clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%)
    }

    40% {
        clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%)
    }

    50% {
        clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%)
    }

    60% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%)
    }

    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%)
    }
}

.ubo-info img,
video {
    border-radius: inherit;
    margin: 0 auto
}

.ubo-info i.right,
.ubo-info img.right,
video.right {
    position: absolute;
    right: 0
}

.ubo-info i.left,
.ubo-info img.left,
video.left {
    position: absolute;
    left: 0
}

.ubo-info img.border,
.ubo-info img.circle,
.ubo-info img.extra,
.ubo-info img.large,
.ubo-info img.medium,
.ubo-info img.responsive,
.ubo-info img.round,
.ubo-info img.small,
.ubo-info img.tiny,
video.border,
video.circle,
video.extra,
video.large,
video.medium,
video.responsive,
video.round,
video.small,
video.tiny {
    object-fit: cover;
    object-position: center;
    transition: 0.3s transform, 0.3s border-radius, 0.3s padding
}

.ubo-info img.border,
video.border {
    border: 1px solid var(--outline)
}

.ubo-info img.round,
video.round {
    border-radius: 8px !important;
    height: 48px !important;
    width: 48px !important
}

.ubo-info img.circle,
video.circle {
    border-radius: 50% !important;
    height: 48px !important;
    width: 48px !important
}

.ubo-info img.tiny,
video.tiny {
    height: 32px !important;
    width: 32px !important
}

.ubo-info img.small,
video.small {
    height: 40px !important;
    width: 40px !important
}

.ubo-info img.medium,
video.medium {
    height: 48px !important;
    width: 48px !important
}

.ubo-info img.large,
video.large {
    height: 56px !important;
    width: 56px !important
}

.ubo-info img.extra,
video.extra {
    height: 64px !important;
    width: 64px !important
}

.ubo-info img.responsive,
video.responsive {
    width: 100% !important;
    height: 100% !important
}

.ubo-info .button>i,
.ubo-info .chip>i,
.ubo-info button>i {
    color: inherit
}

.ubo-info .button>img.responsive,
.ubo-info .chip>img.responsive,
.ubo-info button>img.responsive {
    width: 40px !important;
    border: 2px solid transparent;
    box-sizing: border-box
}

.ubo-info .button.small>img.responsive,
.ubo-info .chip.small>img.responsive,
.ubo-info button.small>img.responsive {
    width: 32px !important
}

.ubo-info .button.large>img.responsive,
.ubo-info .chip.large>img.responsive,
.ubo-info button.large>img.responsive {
    width: 48px !important
}

.ubo-info .button.extra>img.responsive,
.ubo-info .chip.extra>img.responsive,
.ubo-info button.extra>img.responsive {
    width: 56px !important
}

.ubo-info img.responsive.tiny,
video.responsive.tiny {
    width: 100% !important;
    height: 64px !important
}

.ubo-info img.responsive.small,
video.responsive.small {
    width: 100% !important;
    height: 128px !important
}

.ubo-info img.responsive.medium,
video.responsive.medium {
    width: 100% !important;
    height: 192px !important
}

.ubo-info img.responsive.large,
video.responsive.large {
    width: 100% !important;
    height: 256px !important
}

.ubo-info img.responsive.extra,
video.responsive.extra {
    width: 100% !important;
    height: 320px !important
}

.ubo-info img.empty-state,
video.empty-state {
    max-width: 100%;
    width: 384px
}

.ubo-info .button>img:not(.responsive, .tiny, .small, .medium, .large, .extra),
.ubo-info .chip>img:not(.responsive, .tiny, .small, .medium, .large, .extra),
.ubo-info .field>img:not(.responsive, .tiny, .small, .medium, .large, .extra),
.ubo-info .tabs>a>img:not(.responsive, .tiny, .small, .medium, .large, .extra),
.ubo-info button>img:not(.responsive, .tiny, .small, .medium, .large, .extra),
.ubo-info td img:not(.responsive, .tiny, .small, .medium, .large, .extra) {
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important
}

.ubo-info .button.circle>img,
.ubo-info .button.diamond>img,
.ubo-info .button.square>img,
.ubo-info button.circle>img,
.ubo-info button.diamond>img,
.ubo-info button.square>img {
    margin: 0 !important;
    padding: 0 !important
}

.ubo-info .button>img.responsive:first-child,
.ubo-info .chip>img.responsive:first-child,
.ubo-info button>img.responsive:first-child {
    margin-left: -16px
}

.ubo-info .button>img.responsive:last-child,
.ubo-info .chip>img.responsive:last-child,
.ubo-info button>img.responsive:last-child {
    margin-right: -16px
}

.ubo-info .button.extend>i:first-child,
.ubo-info .button.extend>img:first-child,
.ubo-info button.extend>i:first-child,
.ubo-info button.extend>img:first-child {
    position: absolute;
    left: 16px
}

.ubo-info .button.extend>i:last-child,
.ubo-info .button.extend>img:last-child,
.ubo-info button.extend>i:last-child,
.ubo-info button.extend>img:last-child {
    position: absolute;
    right: 16px
}

.ubo-info .button.extend>img.responsive:first-child,
.ubo-info button.extend>img.responsive:first-child {
    position: absolute;
    left: 0
}

.ubo-info .button.extend>img.responsive:last-child,
.ubo-info button.extend>img.responsive:last-child {
    position: absolute;
    right: 0
}

.ubo-info .menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 0;
    position: fixed;
    box-shadow: var(--shadow2);
    color: var(--on-surface-variant);
    background-color: var(--surface-variant);
    transform: none;
    box-sizing: border-box;
    z-index: 100;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    height: auto;
    width: auto;
    text-align: center
}

.ubo-info .menu.left,
.ubo-info .menu.right {
    width: 72px
}

.ubo-info .menu.bottom,
.ubo-info .menu.top {
    height: 64px
}

.ubo-info .menu::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: inherit;
    z-index: 1;
    top: 0;
    left: 0;
    border-radius: inherit
}

.ubo-info .menu.border {
    box-shadow: none;
    border: 1px solid var(--outline)
}

.ubo-info .menu.left.border {
    border-top: none;
    border-bottom: none;
    border-left: none
}

.ubo-info .menu.right.border {
    border-top: none;
    border-bottom: none;
    border-right: none
}

.ubo-info .menu.top.border {
    border-top: none;
    border-right: none;
    border-left: none
}

.ubo-info .menu.bottom.border {
    border-bottom: none;
    border-right: none;
    border-left: none
}

.ubo-info .menu.active {
    box-shadow: none
}

.ubo-info .menu.top {
    bottom: auto;
    justify-content: center;
    flex-direction: row
}

.ubo-info .menu.left {
    right: auto;
    justify-content: flex-start;
    flex-direction: column
}

.ubo-info .menu.right {
    left: auto;
    justify-content: flex-start;
    flex-direction: column
}

.ubo-info .menu.bottom {
    top: auto;
    justify-content: center;
    flex-direction: row
}

.ubo-info .menu.left-align,
.ubo-info .menu.top-align {
    align-items: center;
    justify-content: flex-start
}

.ubo-info .menu.bottom-align,
.ubo-info .menu.right-align {
    align-items: center;
    justify-content: flex-end
}

.ubo-info .menu.center-align,
.ubo-info .menu.middle-align {
    align-items: center;
    justify-content: center
}

.ubo-info .menu>.button,
.ubo-info .menu>.chip,
.ubo-info .menu>button,
.ubo-info .menu>img,
.ubo-info .menu>video {
    z-index: 1
}

.ubo-info .menu>a:not(button, .button, .chip) {
    border: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 12px;
    padding: 0;
    margin: 4px;
    text-decoration: none;
    color: inherit;
    text-align: center;
    z-index: 1;
    width: 56px;
    height: auto;
    min-height: 56px
}

.ubo-info .menu.no-space:not(.left, .right)>a:not(button, .button, .chip) {
    margin: 0
}

.ubo-info .menu.small-space:not(.left, .right)>a:not(button, .button, .chip),
.ubo-info .menu:not(.left, .right)>a:not(button, .button, .chip) {
    margin: 0 8px
}

.ubo-info .menu.medium-space:not(.left, .right)>a:not(button, .button, .chip) {
    margin: 0 12px
}

.ubo-info .menu.large-space:not(.left, .right)>a:not(button, .button, .chip) {
    margin: 0 16px
}

.ubo-info .menu.no-space:not(.top, .bottom)>a:not(button, .button, .chip) {
    margin: 0
}

.ubo-info .menu.small-space:not(.top, .bottom)>a:not(button, .button, .chip),
.ubo-info .menu:not(.top, .bottom)>a:not(button, .button, .chip) {
    margin: 4px 0
}

.ubo-info .menu.medium-space:not(.top, .bottom)>a:not(button, .button, .chip) {
    margin: 8px 0
}

.ubo-info .menu.large-space:not(.top, .bottom)>a:not(button, .button, .chip) {
    margin: 12px 0
}

.ubo-info .menu>a:not(button, .button, .chip)>i {
    margin-bottom: 4px;
    padding: 4px;
    border-radius: 32px;
    transition: 0.1s padding linear
}

.ubo-info .menu>a:not(button, .button, .chip).active>i,
.ubo-info .menu>a:not(button, .button, .chip):focus>i,
.ubo-info .menu>a:not(button, .button, .chip):hover>i {
    background-color: var(--primary);
    color: var(--on-primary);
    padding: 4px 16px
}

.ubo-info .menu>.row {
    z-index: 1
}

@media only screen and (max-width:600px) {
    .menu.bottom {
        justify-content: space-around
    }

    .menu.top {
        justify-content: space-around
    }

    .menu.bottom>.button,
    .menu.bottom>.chip,
    .menu.bottom>button,
    .menu.bottom>img,
    .menu.bottom>video,
    .menu.top>.button,
    .menu.top>.chip,
    .menu.top>button,
    .menu.top>img,
    .menu.top>video {
        margin: 0
    }
}

.ubo-info .modal {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    box-shadow: var(--shadow2);
    color: var(--on-surface-variant);
    background-color: var(--surface-variant);
    padding: 16px;
    box-sizing: border-box;
    z-index: 100;
    left: 50%;
    top: 10%;
    min-width: 320px;
    max-width: 100%;
    max-height: 80%;
    overflow-x: hidden;
    overflow-y: auto
}

.ubo-info .modal.border {
    border: 1px solid var(--outline);
    box-shadow: none
}

.ubo-info .modal.round {
    border-radius: 24px
}

.ubo-info .modal.bottom.round {
    border-radius: 24px 24px 0 0
}

.ubo-info .modal.top.round {
    border-radius: 0 0 24px 24px
}

.ubo-info .modal.left.round {
    border-radius: 0 24px 24px 0
}

.ubo-info .modal.right.round {
    border-radius: 24px 0 0 24px
}

.ubo-info .modal.small {
    width: 25%;
    height: 25%
}

.ubo-info .modal.medium {
    width: 50%;
    height: 50%
}

.ubo-info .modal.large {
    width: 75%;
    height: 75%
}

.ubo-info .modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    animation: 0.2s modal-to-center ease;
    display: block;
    height: auto;
}

.ubo-info .modal.active.left {
    transform: translate(0);
    animation: 0.2s modal-to-right ease
}

.ubo-info .modal.active.right {
    transform: translate(0);
    animation: 0.2s modal-to-left ease
}

.ubo-info .modal.active.top {
    transform: translate(0);
    animation: 0.2s modal-to-bottom ease
}

.ubo-info .modal.active.bottom {
    transform: translate(0);
    animation: 0.2s modal-to-top ease
}

.ubo-info .modal.top {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    height: auto;
    width: 100%;
    min-width: auto;
    max-height: 100%
}

.ubo-info .modal.left {
    float: none;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: auto;
    height: 100%;
    max-height: 100%
}

.ubo-info .modal.right {
    float: none;
    top: 0;
    left: auto;
    right: 0;
    bottom: auto;
    width: auto;
    height: 100%;
    max-height: 100%
}

.ubo-info .modal.bottom {
    top: auto;
    left: 0;
    right: auto;
    bottom: 0;
    height: auto;
    width: 100%;
    min-width: auto;
    max-height: 100%
}

.ubo-info .modal.left.small,
.ubo-info .modal.right.small {
    width: 320px
}

.ubo-info .modal.left.medium,
.ubo-info .modal.right.medium {
    width: 512px
}

.ubo-info .modal.left.large,
.ubo-info .modal.right.large {
    width: 704px
}

.ubo-info .modal.bottom.small,
.ubo-info .modal.top.small {
    height: 256px
}

.ubo-info .modal.bottom.medium,
.ubo-info .modal.top.medium {
    height: 384px
}

.ubo-info .modal.bottom.large,
.ubo-info .modal.top.large {
    height: 512px
}

.ubo-info .menu.left>.modal,
.ubo-info .menu>.modal {
    z-index: 0;
    text-align: left;
    padding: 16px 16px 16px 80px;
    overflow-y: auto;
    background-color: inherit
}

.ubo-info .menu.right>.modal {
    padding: 16px 80px 16px 16px
}

.ubo-info .menu.top>.modal {
    padding: 80px 48px 16px 48px
}

.ubo-info .menu.bottom>.modal {
    padding: 16px 48px 80px 48px
}

.ubo-info .modal>a:not(button, .button, .chip).active,
.ubo-info .modal>a:not(button, .button, .chip):hover {
    background-color: var(--active)
}

.ubo-info .modal>a.row {
    margin: 0 -8px
}

.ubo-info .modal>a:not(button, .button, .chip) {
    padding: 12px 0
}

@keyframes modal-to-right {
    from {
        opacity: 0;
        transform: translate(-50%, 0)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes modal-to-left {
    from {
        opacity: 0;
        transform: translate(50%, 0)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes modal-to-bottom {
    from {
        opacity: 0;
        transform: translate(0, -50%)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes modal-to-top {
    from {
        opacity: 0;
        transform: translate(0, 50%)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes modal-to-center {
    from {
        opacity: 0;
        transform: translate(-50%, -64px)
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0)
    }
}

.ubo-info nav {
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin: 0 -8px
}

.ubo-info :not(.progress)+nav {
    margin-top: 16px
}

.ubo-info nav>:not(.dropdown, .badge) {
    margin: 0 8px
}

.ubo-info nav.wrap {
    display: block;
    white-space: normal
}

.ubo-info :not(.progress)+nav.wrap {
    margin: 8px -8px
}

.ubo-info nav.wrap>:not(.dropdown, .badge) {
    margin: 8px
}

.ubo-info .field.label>nav {
    margin-top: 20px
}

.ubo-info .overlay {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--on-background);
    background-color: var(--overlay);
    z-index: 100
}

.ubo-info .menu>.overlay {
    z-index: 0
}

.ubo-info .overlay.active {
    opacity: 1;
    visibility: visible;
    animation: 0.3s overlay-to-active
}

.ubo-info .overlay.active.bottom-align,
.ubo-info .overlay.active.middle-align,
.ubo-info .overlay.active.top-align {
    display: flex
}

@keyframes overlay-to-active {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.ubo-info .modal:not(.active) .page.active,
.ubo-info .page,
.ubo-info .page:not(.active) .page.active {
    opacity: 0;
    position: absolute;
    visibility: hidden;
    display: block
}

.ubo-info .page.active {
    opacity: 1;
    position: inherit;
    visibility: visible
}

.ubo-info .page.top.active {
    animation: 0.4s page-to-bottom ease
}

.ubo-info .page.bottom.active {
    animation: 0.4s page-to-top ease
}

.ubo-info .page.left.active {
    animation: 0.4s page-to-right ease
}

.ubo-info .page.right.active {
    animation: 0.4s page-to-left ease
}

@keyframes page-to-bottom {
    from {
        opacity: 0;
        transform: translateY(-64px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes page-to-top {
    from {
        opacity: 0;
        transform: translateY(64px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes page-to-left {
    from {
        opacity: 0;
        transform: translateX(64px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes page-to-right {
    from {
        opacity: 0;
        transform: translateX(-64px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.ubo-info .progress {
    position: absolute;
    background-color: var(--active);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: inherit;
    margin: 0 !important;
    padding: 0 !important;
    transition: 0.4s clip-path;
    clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%)
}

.ubo-info .progress.left {
    clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%)
}

.ubo-info .progress.right {
    clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%)
}

.ubo-info .progress.top {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)
}

.ubo-info .progress.bottom {
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)
}

.ubo-info .row {
    margin: 0 -8px;
    color: inherit;
    min-width: 100%
}

.ubo-info .row .row:not(.no-wrap) {
    margin-top: -8px
}

.ubo-info .row .row .row:not(.no-wrap) {
    margin-top: 8px
}

.ubo-info .row .row+.row,
.ubo-info .row+.row {
    margin-top: 16px
}

.ubo-info .row:after {
    content: "";
    display: table;
    clear: both
}

.ubo-info .row.no-space {
    height: auto;
    margin: 0
}

.ubo-info .row.small-space,
.ubo-info .row.space {
    height: auto;
    margin: 0 -8px
}

.ubo-info .row.medium-space {
    height: auto;
    margin: 0 -12px
}

.ubo-info .row.large-space {
    height: auto;
    margin: 0 -16px
}

.ubo-info .row>.col {
    float: left;
    text-align: left;
    box-sizing: border-box;
    width: min-content;
    padding: 8px;
    margin-left: auto;
    left: auto;
    right: auto
}

.ubo-info .row.no-space>.col {
    padding: 0
}

.ubo-info .row.small-space>.col,
.ubo-info .row.space>.col {
    padding: 8px
}

.ubo-info .row.medium-space>.col {
    padding: 12px
}

.ubo-info .row.large-space>.col {
    padding: 16px
}

.ubo-info .row.no-wrap {
    margin-top: 0;
    margin-bottom: 0;
    display: flex
}

.ubo-info .modal>.row.no-wrap:only-child {
    min-height: 100%;
    height: max-content
}

.ubo-info .row+.row {
    margin-top: 16px
}

.ubo-info .row.no-wrap>.col {
    float: none;
    flex: 1;
    padding-top: 0;
    padding-bottom: 0
}

.ubo-info .row.no-wrap>.col.min {
    flex: 0
}

.ubo-info .row .col.s1 {
    width: 8.3333333333%
}

.ubo-info .row .col.s2 {
    width: 16.6666666667%
}

.ubo-info .row .col.s3 {
    width: 25%
}

.ubo-info .row .col.s4 {
    width: 33.3333333333%
}

.ubo-info .row .col.s5 {
    width: 41.6666666667%
}

.ubo-info .row .col.s6 {
    width: 50%
}

.ubo-info .row .col.s7 {
    width: 58.3333333333%
}

.ubo-info .row .col.s8 {
    width: 66.6666666667%
}

.ubo-info .row .col.s9 {
    width: 75%
}

.ubo-info .row .col.s10 {
    width: 83.3333333333%
}

.ubo-info .row .col.s11 {
    width: 91.6666666667%
}

.ubo-info .row .col.s12 {
    width: 100%
}

@media only screen and (min-width:601px) {
    .row .col.m1 {
        width: 8.3333333333%
    }

    .row .col.m2 {
        width: 16.6666666667%
    }

    .row .col.m3 {
        width: 25%
    }

    .row .col.m4 {
        width: 33.3333333333%
    }

    .row .col.m5 {
        width: 41.6666666667%
    }

    .row .col.m6 {
        width: 50%
    }

    .row .col.m7 {
        width: 58.3333333333%
    }

    .row .col.m8 {
        width: 66.6666666667%
    }

    .row .col.m9 {
        width: 75%
    }

    .row .col.m10 {
        width: 83.3333333333%
    }

    .row .col.m11 {
        width: 91.6666666667%
    }

    .row .col.m12 {
        width: 100%
    }
}

@media only screen and (min-width:993px) {
    .row .col.l1 {
        width: 8.3333333333%
    }

    .row .col.l2 {
        width: 16.6666666667%
    }

    .row .col.l3 {
        width: 25%
    }

    .row .col.l4 {
        width: 33.3333333333%
    }

    .row .col.l5 {
        width: 41.6666666667%
    }

    .row .col.l6 {
        width: 50%
    }

    .row .col.l7 {
        width: 58.3333333333%
    }

    .row .col.l8 {
        width: 66.6666666667%
    }

    .row .col.l9 {
        width: 75%
    }

    .row .col.l10 {
        width: 83.3333333333%
    }

    .row .col.l11 {
        width: 91.6666666667%
    }

    .row .col.l12 {
        width: 100%
    }
}

.ubo-info .checkbox,
.ubo-info .radio,
.ubo-info .switch {
    width: auto;
    height: auto;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center
}

.ubo-info .checkbox>*,
.ubo-info .radio>*,
.ubo-info .switch>* {
    margin: 0;
    padding: 0
}

.ubo-info .checkbox>input,
.ubo-info .radio>input {
    width: 24px;
    height: 24px;
    opacity: 0
}

.ubo-info .checkbox>span,
.ubo-info .radio>span,
.ubo-info .switch>span {
    display: inline-flex;
    align-items: center;
    color: var(--on-background);
    font-size: 14px
}

.ubo-info .checkbox>span,
.ubo-info .radio>span {
    padding-left: 4px
}

.ubo-info .checkbox>input+span::before,
.ubo-info .radio>input+span::before {
    font-family: "Material Icons";
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    padding: 0;
    outline: 0;
    cursor: inherit;
    color: var(--primary);
    position: absolute;
    left: -24px;
    background-color: transparent;
    border-radius: 50%
}

.ubo-info .checkbox>input+span::before {
    content: "check_box_outline_blank"
}

.ubo-info .radio>input+span::before {
    content: "radio_button_unchecked"
}

.ubo-info .checkbox>input:not([disabled]):focus+span::before,
.ubo-info .checkbox>input:not([disabled]):hover+span::before,
.ubo-info .radio>input:not([disabled]):focus+span::before,
.ubo-info .radio>input:not([disabled]):hover+span::before {
    background-color: var(--active);
    box-shadow: 0 0 0 8px var(--active);
    animation: 0.1s to-checked ease-out
}

.ubo-info .checkbox>input:checked+span::before {
    color: var(--primary);
    content: "check_box"
}

.ubo-info .radio>input:checked+span::before {
    color: var(--primary);
    content: "radio_button_checked"
}

.ubo-info .checkbox+.checkbox,
.ubo-info .radio+.radio,
.ubo-info .switch+.switch {
    margin-left: 8px
}

.ubo-info .field>.checkbox,
.ubo-info .field>.radio,
.ubo-info .field>.switch {
    margin: 0 12px 0 4px
}

.ubo-info .field>nav>.checkbox,
.ubo-info .field>nav>.radio,
.ubo-info .field>nav>.switch {
    margin: 0 4px 0 12px
}

.ubo-info .checkbox>span:empty,
.ubo-info .radio>span:empty,
.ubo-info .switch>span:empty {
    padding: 0
}

.ubo-info .switch>input {
    width: 40px;
    height: 24px;
    opacity: 0
}

.ubo-info .switch>input+span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    background-color: var(--on-background);
    opacity: .6;
    width: 32px;
    height: 14px;
    border-radius: 8px;
    animation: none;
    transform: translate(-40px, -50%)
}

.ubo-info .switch>input:checked+span::before {
    background-color: var(--primary)
}

.ubo-info .switch>input+span::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background-color: #fff;
    box-shadow: var(--shadow1);
    left: 0;
    top: 50%;
    transition: 0.1s transform, 0.1s background-color;
    transform: translate(-44px, -50%)
}

.ubo-info .switch>input:checked+span::after {
    background-color: var(--primary);
    transform: translate(-24px, -50%)
}

.ubo-info .switch>input:not([disabled]):focus+span::after,
.ubo-info .switch>input:not([disabled]):hover+span::after {
    box-shadow: 0 0 0 8px var(--active)
}

.ubo-info .checkbox>input:disabled+span,
.ubo-info .radio>input:disabled+span,
.ubo-info .switch>input:disabled+span {
    opacity: .5;
    cursor: not-allowed
}

@keyframes to-checked {
    from {
        box-shadow: 0 0 0 0 var(--active)
    }

    to {
        box-shadow: 0 0 0 8px var(--active)
    }
}

.ubo-info table {
    width: 100%;
    border-spacing: 0;
    font-size: 14px;
    color: var(--on-background)
}

.ubo-info table th {
    width: 1%;
    font-weight: 500;
    text-align: left;
    padding: 8px 4px;
    margin: 0
}

.ubo-info table td {
    width: 1%;
    text-align: left;
    padding: 8px 4px;
    margin: 0
}

.ubo-info table.border td,
.ubo-info table.border th {
    border-bottom: 1px solid var(--outline)
}

.ubo-info table.small td,
.ubo-info table.small th {
    padding: 4px 4px
}

.ubo-info table.medium td,
.ubo-info table.medium th {
    padding: 8px 4px
}

.ubo-info table.large td,
.ubo-info table.large th {
    padding: 12px 4px
}

.ubo-info table.center-align td,
.ubo-info table.center-align th {
    text-align: center
}

.ubo-info table.left-align td,
.ubo-info table.left-align th {
    text-align: left
}

.ubo-info table.right-align td,
.ubo-info table.right-align th {
    text-align: right
}

.ubo-info td>.button,
.ubo-info td>.chip,
.ubo-info td>.none,
.ubo-info td>button,
.ubo-info td>nav>.button,
.ubo-info td>nav>.chip,
.ubo-info td>nav>.none,
.ubo-info td>nav>button {
    min-height: 24px;
    max-height: 24px;
    box-sizing: border-box
}

.ubo-info td>.circle:not(.tiny, .small, .medium, .large, .extra),
.ubo-info td>.diamond:not(.tiny, .small, .medium, .large, .extra),
.ubo-info td>.square:not(.tiny, .small, .medium, .large, .extra),
.ubo-info td>nav>.circle:not(.tiny, .small, .medium, .large, .extra),
.ubo-info td>nav>.diamond:not(.tiny, .small, .medium, .large, .extra),
.ubo-info td>nav>.square:not(.tiny, .small, .medium, .large, .extra) {
    min-width: 24px;
    max-width: 24px;
    min-height: 24px;
    max-height: 24px;
    box-sizing: border-box
}

.ubo-info .tabs {
    display: flex;
    justify-content: space-around;
    margin-top: 16px;
    white-space: nowrap;
    border-bottom: 1px solid var(--outline)
}

.ubo-info *>.tabs:first-child {
    margin-top: 0
}

.ubo-info .tabs>a {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--on-background);
    padding: 0 16px;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    text-align: center;
    min-height: 40px;
    width: 100%
}

.ubo-info .tabs>a>span {
    margin: 4px
}

.ubo-info .tabs.small>a {
    min-height: 32px
}

.ubo-info .tabs.medium>a {
    min-height: 40px
}

.ubo-info .tabs.large>a {
    min-height: 48px
}

.ubo-info .tabs>a.active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary)
}

.ubo-info .tabs>a.active>i {
    color: var(--primary)
}

.ubo-info .tabs>a>i,
.ubo-info .tabs>a>img {
    margin: 0
}

.ubo-info .tabs.center-align>a,
.ubo-info .tabs.left-align>a,
.ubo-info .tabs.right-align>a {
    width: auto
}

.ubo-info .toast {
    position: fixed;
    top: auto;
    bottom: 72px;
    left: 50%;
    right: auto;
    width: 80%;
    height: auto;
    z-index: 200;
    visibility: hidden;
    display: inline-block;
    box-shadow: var(--shadow2);
    color: var(--on-error);
    background-color: var(--error-background);
    padding: 16px;
    opacity: 1;
    margin: 0;
    cursor: pointer;
    transform: translate(-50%, 0);
    text-align: left;
    display: flex;
    align-items: center
}

.ubo-info .toast.top {
    top: 72px;
    bottom: auto
}

.ubo-info .toast.bottom {
    top: auto;
    bottom: 72px
}

.ubo-info .toast.active {
    visibility: visible;
    animation: 0.2s toast-to-top
}

.ubo-info .toast.active.top {
    visibility: visible;
    animation: 0.2s toast-to-bottom
}

.ubo-info .toast.small {
    padding: 8px
}

.ubo-info .toast.medium {
    padding: 16px
}

.ubo-info .toast.large {
    padding: 24px
}

.ubo-info .toast.round {
    border-radius: 24px
}

.ubo-info .toast>* {
    color: inherit;
    margin: 0;
    overflow: unset
}

.ubo-info .toast>*+* {
    margin-left: 8px
}

@keyframes toast-to-top {
    0% {
        opacity: 0;
        transform: translate(-50%, 16px)
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0)
    }
}

@keyframes toast-to-bottom {
    0% {
        opacity: 0;
        transform: translate(-50%, -16px)
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0)
    }
}

@media only screen and (min-width:993px) {
    .toast {
        width: 40%
    }
}

.ubo-info .tooltip {
    display: none;
    background-color: rgba(0, 0, 0, .9);
    color: #fff;
    font-size: 12px;
    text-align: center;
    border-radius: 4px;
    padding: 8px;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -100%);
    width: auto;
    white-space: nowrap;
    line-height: normal;
    text-transform: none;
    font-weight: 500
}

.ubo-info .tooltip.round {
    border-radius: 64px
}

.ubo-info .tooltip.border {
    border: 1px solid var(--outline)
}

.ubo-info .tooltip.left {
    left: 0;
    top: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-100%, -50%)
}

.ubo-info .tooltip.right {
    right: 0;
    top: 50%;
    bottom: auto;
    left: auto;
    transform: translate(100%, -50%)
}

.ubo-info .tooltip.top {
    top: 0;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -100%)
}

.ubo-info .tooltip.bottom {
    bottom: 0;
    left: 50%;
    top: auto;
    right: auto;
    transform: translate(-50%, 100%)
}

.ubo-info .tooltip.small {
    width: 128px;
    white-space: normal
}

.ubo-info .tooltip.medium {
    width: 192px;
    white-space: normal
}

.ubo-info .tooltip.large {
    width: 256px;
    white-space: normal
}

.ubo-info :hover>.tooltip {
    display: initial
}

.ubo-info .tooltip.large-margin,
.ubo-info .tooltip.margin,
.ubo-info .tooltip.medium-margin,
.ubo-info .tooltip.small-margin {
    max-width: none;
    max-height: none
}

.ubo-info .tooltip.small-margin {
    margin: -8px 0 !important
}

.ubo-info .tooltip.margin,
.ubo-info .tooltip.medium-margin {
    margin: -16px 0 !important
}

.ubo-info .tooltip.large-margin {
    margin: -24px 0 !important
}

.ubo-info .tooltip.left.small-margin,
.ubo-info .tooltip.right.small-margin {
    margin: 0 -8px !important
}

.ubo-info .tooltip.left.margin,
.ubo-info .tooltip.left.medium-margin,
.ubo-info .tooltip.right.margin,
.ubo-info .tooltip.right.medium-margin {
    margin: 0 -16px !important
}

.ubo-info .tooltip.left.large-margin,
.ubo-info .tooltip.right.large-margin {
    margin: 0 -24px !important
}

.ubo-info .button:focus>.dropdown~.tooltip,
.ubo-info .dropdown:active~.tooltip,
.ubo-info .field>:focus~.dropdown~.tooltip,
.ubo-info button:focus>.dropdown~.tooltip {
    display: none
}

.ubo-info .middle-align {
    display: flex !important;
    align-items: center
}

.ubo-info .bottom-align {
    display: flex !important;
    align-items: flex-end
}

.ubo-info .top-align {
    display: flex !important;
    align-items: flex-start
}

.ubo-info .left-align {
    text-align: left !important;
    justify-content: flex-start
}

.ubo-info .right-align {
    text-align: right !important;
    justify-content: flex-end
}

.ubo-info .center-align {
    text-align: center !important;
    justify-content: center
}

.ubo-info .divider,
.ubo-info .small-divider {
    border-bottom: 1px solid var(--outline);
    display: block;
    margin: 8px 0
}

.ubo-info .medium-divider {
    border-bottom: 1px solid var(--outline);
    display: block;
    margin: 16px 0
}

.ubo-info .large-divider {
    border-bottom: 1px solid var(--outline);
    display: block;
    margin: 24px 0
}

.ubo-info .row.divider,
.ubo-info .row.small-divider {
    margin: 0 -8px !important;
    padding: 8px 0
}

.ubo-info .row.medium-divider {
    margin: 0 -8px !important;
    padding: 16px 0
}

.ubo-info .row.large-divider {
    margin: 0 -8px !important;
    padding: 24px 0
}

.ubo-info .flat {
    box-shadow: none
}

.ubo-info .round {
    border-radius: 24px
}

.ubo-info .top-round {
    border-radius: 24px 24px 4px 4px !important
}

.ubo-info .bottom-round {
    border-radius: 4px 4px 24px 24px !important
}

.ubo-info .left-round {
    border-radius: 24px 4px 4px 24px !important
}

.ubo-info .right-round {
    border-radius: 4px 24px 24px 4px !important
}

.ubo-info .top-round.left-round {
    border-radius: 24px 24px 4px 24px !important
}

.ubo-info .top-round.right-round {
    border-radius: 24px 24px 24px 4px !important
}

.ubo-info .bottom-round.left-round {
    border-radius: 24px 4px 24px 24px !important
}

.ubo-info .bottom-round.right-round {
    border-radius: 4px 24px 24px 24px !important
}

.ubo-info .circle,
.ubo-info .diamond,
.ubo-info .square {
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    height: 40px
}

.ubo-info .circle>span,
.ubo-info .diamond>span,
.ubo-info .square>span {
    display: none
}

.ubo-info .circle.small,
.ubo-info .diamond.small,
.ubo-info .square.small {
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
    height: 32px
}

.ubo-info .circle.large,
.ubo-info .diamond.large,
.ubo-info .square.large {
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    height: 48px
}

.ubo-info .circle.extra,
.ubo-info .diamond.extra,
.ubo-info .square.extra {
    min-width: 56px;
    min-height: 56px;
    max-width: 56px;
    max-height: 56px;
    height: 56px
}

.ubo-info .diamond {
    transform: rotate(45deg);
    border-radius: 4px;
    padding: 0
}

.ubo-info .diamond>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    margin: 0;
    padding: 0
}

.ubo-info .circle.round,
.ubo-info .diamond.round,
.ubo-info .square.round {
    border-radius: 16px
}

.ubo-info .diamond.round {
    transform: rotate(45deg)
}

.ubo-info .no-margin {
    margin: 0 !important
}

.ubo-info .small-margin {
    margin: 8px !important
}

.ubo-info .margin,
.ubo-info .medium-margin {
    margin: 16px !important
}

.ubo-info .large-margin {
    margin: 24px !important
}

.ubo-info .no-opacity {
    opacity: 0
}

.ubo-info .opacity {
    opacity: 1
}

.ubo-info .no-padding {
    padding: 0 !important
}

.ubo-info .small-padding {
    padding: 8px !important
}

.ubo-info .medium-padding,
.ubo-info .padding {
    padding: 16px !important
}

.ubo-info .large-padding {
    padding: 24px !important
}

.ubo-info .front {
    z-index: 10 !important
}

.ubo-info .back {
    z-index: -10 !important
}

.ubo-info .left {
    left: 0
}

.ubo-info .right {
    right: 0
}

.ubo-info .top {
    top: 0
}

.ubo-info .bottom {
    bottom: 0
}

.ubo-info .center {
    left: 50%;
    transform: translateX(-50%)
}

.ubo-info .middle {
    top: 50%;
    transform: translateY(-50%)
}

.ubo-info .middle.center {
    transform: translate(-50%, -50%)
}

.ubo-info .scroll {
    overflow: auto;
    padding-bottom: 16px
}

.ubo-info .no-scroll {
    overflow: hidden
}

.ubo-info .shadow {
    background-color: #00000050 !important;
    box-shadow: none !important
}

.ubo-info .left-shadow {
    background-color: transparent !important;
    box-shadow: none !important;
    background-image: linear-gradient(to right, #000, transparent) !important
}

.ubo-info .right-shadow {
    background-color: transparent !important;
    box-shadow: none !important;
    background-image: linear-gradient(to left, #000, transparent) !important
}

.ubo-info .bottom-shadow {
    background-color: transparent !important;
    box-shadow: none !important;
    background-image: linear-gradient(to top, #000, transparent) !important
}

.ubo-info .top-shadow {
    background-color: transparent !important;
    box-shadow: none !important;
    background-image: linear-gradient(to bottom, #000, transparent) !important
}

.ubo-info .no-shadow {
    box-shadow: none !important
}

.ubo-info .small-shadow {
    box-shadow: var(--shadow1) !important
}

.ubo-info .medium-shadow {
    box-shadow: var(--shadow2) !important
}

.ubo-info .large-shadow {
    box-shadow: var(--shadow3) !important
}

.ubo-info .small-width {
    width: 192px !important;
    max-width: 100%
}

.ubo-info .medium-width {
    width: 384px !important;
    max-width: 100%
}

.ubo-info .large-width {
    width: 576px !important;
    max-width: 100%
}

.ubo-info .small-height {
    height: 192px !important
}

.ubo-info .medium-height {
    height: 384px !important
}

.ubo-info .large-height {
    height: 576px !important
}

.ubo-info .wrap {
    display: block
}

.ubo-info a.no-wrap {
    flex-direction: row
}

.ubo-info a.wrap {
    flex-direction: column
}

.ubo-info .small-space:not(.menu, nav, .row),
.ubo-info .space:not(.menu, nav, .row) {
    height: 16px;
    display: block
}

.ubo-info .medium-space:not(.menu, nav, .row) {
    height: 32px;
    display: block
}

.ubo-info .large-space:not(.menu, nav, .row) {
    height: 48px;
    display: block
}

.ubo-info .responsive {
    margin: 0;
    width: -webkit-fill-available;
    width: -moz-available
}

.ubo-info .responsive>i,
.ubo-info .responsive>img {
    margin: 0
}

@media only screen and (max-width:600px) {

    .l:not(.s),
    .large-device:not(.small-device),
    .m.l:not(.s),
    .m:not(.s),
    .medium-device.large-device:not(.small-device),
    .medium-device:not(.small-device) {
        display: none !important
    }
}

@media only screen and (min-width:601px) and (max-width:992px) {

    .l:not(.m),
    .large-device:not(.medium-device),
    .s.l:not(.m),
    .s:not(.m),
    .small-device.large-device:not(.medium-device),
    .small-device:not(.medium-device) {
        display: none !important
    }
}

@media only screen and (min-width:993px) {

    .m.s:not(.l),
    .m:not(.l),
    .medium-device.small-device:not(.large-device),
    .medium-device:not(.large-device),
    .s:not(.l),
    .small-device:not(.large-device) {
        display: none !important
    }
}

.ubo-info html {
    font-size: var(--size)
}

.ubo-info body {
    font-family: var(--font);
    font-size: 14px
}

.ubo-info h1,
.ubo-info h2,
.ubo-info h3,
.ubo-info h4,
.ubo-info h5,
.ubo-info h6 {
    font-weight: 400;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center
}

.ubo-info :not(.progress)+h1,
.ubo-info :not(.progress)+h2,
.ubo-info :not(.progress)+h3,
.ubo-info :not(.progress)+h4,
.ubo-info :not(.progress)+h5,
.ubo-info :not(.progress)+h6 {
    margin: 8px 0
}

.ubo-info h1 {
    font-size: 96px
}

.ubo-info h2 {
    font-size: 60px
}

.ubo-info h3 {
    font-size: 48px
}

.ubo-info h4 {
    font-size: 34px
}

.ubo-info h5 {
    font-size: 24px
}

.ubo-info h6 {
    font-size: 20px
}

.ubo-info .link {
    color: var(--primary)
}

.ubo-info .truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.ubo-info .small-text {
    font-size: 12px
}

.ubo-info .medium-text {
    font-size: 14px
}

.ubo-info .large-text {
    font-size: 16px
}

.ubo-info .upper {
    text-transform: uppercase
}

.ubo-info .lower {
    text-transform: lowercase
}

.ubo-info .capitalize {
    text-transform: capitalize
}

.ubo-info .bold {
    font-weight: 700
}

.ubo-info .overline {
    text-decoration: line-through
}

.ubo-info .underline {
    text-decoration: underline
}

.ubo-info .italic {
    font-style: italic
}

.ubo-info p {
    margin: 8px 0
}

.ubo-info .button::after,
.ubo-info .chip::after,
.ubo-info .wave.light::after,
.ubo-info .wave::after,
.ubo-info button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    background-position: center;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .4) 1%, transparent 1%);
    opacity: 0;
    transition: none;
    will-change: background-size
}

.ubo-info .button.border::after,
.ubo-info .button.none::after,
.ubo-info .chip.border::after,
.ubo-info .wave.dark::after,
.ubo-info button.border::after,
.ubo-info button.none::after {
    background-image: radial-gradient(circle, rgba(150, 150, 150, .2) 1%, transparent 1%)
}

.ubo-info .button.none::after,
.ubo-info .wave.none::after,
.ubo-info button.none::after {
    top: 0;
    left: -4px;
    padding: 0 4px
}

.ubo-info .button.none:not(.small, .medium, .large, .extra)::after,
.ubo-info .wave.none:not(.small, .medium, .large, .extra)::after,
.ubo-info button.none:not(.small, .medium, .large, .extra)::after {
    top: -4px;
    left: -4px;
    padding: 4px
}

.ubo-info .button:focus::after,
.ubo-info .button:hover::after,
.ubo-info .chip:focus::after,
.ubo-info .chip:hover::after,
.ubo-info .wave:focus::after,
.ubo-info .wave:hover::after,
.ubo-info button:focus::after,
.ubo-info button:hover::after {
    background-size: 15000%;
    opacity: 1;
    transition: 0.2s background-size linear
}

.ubo-info .button:active::after,
.ubo-info .chip:active::after,
.ubo-info .wave:active::after,
.ubo-info button:active::after {
    background-size: 5000%;
    opacity: 0;
    transition: none
}

.ubo-info .no-wave::after,
.ubo-info .no-wave:active::after,
.ubo-info .no-wave:hover::after {
    display: none
}