.mdc-touch-target-wrapper { display: inline; } .mdc-elevation-overlay { position: absolute; border-radius: inherit; pointer-events: none; opacity: 0; /* @alternate */ opacity: var(--mdc-elevation-overlay-opacity, 0); transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); background-color: #fff; /* @alternate */ background-color: var(--mdc-elevation-overlay-color, #fff); } .mdc-button { /* @alternate */ position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 64px; border: none; outline: none; /* @alternate */ line-height: inherit; user-select: none; -webkit-appearance: none; overflow: visible; vertical-align: middle; background: transparent; } .mdc-button .mdc-elevation-overlay { width: 100%; height: 100%; top: 0; /* @noflip */ /*rtl:ignore*/ left: 0; } .mdc-button::-moz-focus-inner { padding: 0; border: 0; } .mdc-button:active { outline: none; } .mdc-button:hover { cursor: pointer; } .mdc-button:disabled { cursor: default; pointer-events: none; } .mdc-button .mdc-button__icon { /* @noflip */ /*rtl:ignore*/ margin-left: 0; /* @noflip */ /*rtl:ignore*/ margin-right: 8px; display: inline-block; position: relative; vertical-align: top; } [dir=rtl] .mdc-button .mdc-button__icon, .mdc-button .mdc-button__icon[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 8px; /* @noflip */ /*rtl:ignore*/ margin-right: 0; /*rtl:end:ignore*/ } .mdc-button .mdc-button__label { position: relative; } .mdc-button .mdc-button__touch { position: absolute; top: 50%; height: 48px; left: 0; right: 0; transform: translateY(-50%); } .mdc-button__label + .mdc-button__icon { /* @noflip */ /*rtl:ignore*/ margin-left: 8px; /* @noflip */ /*rtl:ignore*/ margin-right: 0; } [dir=rtl] .mdc-button__label + .mdc-button__icon, .mdc-button__label + .mdc-button__icon[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 0; /* @noflip */ /*rtl:ignore*/ margin-right: 8px; /*rtl:end:ignore*/ } svg.mdc-button__icon { fill: currentColor; } .mdc-button--touch { margin-top: 6px; margin-bottom: 6px; } .mdc-button { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); text-decoration: none; /* @alternate */ text-decoration: var(--mdc-typography-button-text-decoration, none); } .mdc-button { padding: 0 8px 0 8px; } .mdc-button--unelevated { transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); padding: 0 16px 0 16px; } .mdc-button--unelevated.mdc-button--icon-trailing { padding: 0 12px 0 16px; } .mdc-button--unelevated.mdc-button--icon-leading { padding: 0 16px 0 12px; } .mdc-button--raised { transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); padding: 0 16px 0 16px; } .mdc-button--raised.mdc-button--icon-trailing { padding: 0 12px 0 16px; } .mdc-button--raised.mdc-button--icon-leading { padding: 0 16px 0 12px; } .mdc-button--outlined { border-style: solid; transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1); } .mdc-button--outlined .mdc-button__ripple { border-style: solid; border-color: transparent; } @keyframes mdc-ripple-fg-radius-in { from { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); } to { transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } } @keyframes mdc-ripple-fg-opacity-in { from { animation-timing-function: linear; opacity: 0; } to { opacity: var(--mdc-ripple-fg-opacity, 0); } } @keyframes mdc-ripple-fg-opacity-out { from { animation-timing-function: linear; opacity: var(--mdc-ripple-fg-opacity, 0); } to { opacity: 0; } } .mdc-button { --mdc-ripple-fg-size: 0; --mdc-ripple-left: 0; --mdc-ripple-top: 0; --mdc-ripple-fg-scale: 1; --mdc-ripple-fg-translate-end: 0; --mdc-ripple-fg-translate-start: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); will-change: transform, opacity; } .mdc-button .mdc-button__ripple::before, .mdc-button .mdc-button__ripple::after { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; content: ""; } .mdc-button .mdc-button__ripple::before { transition: opacity 15ms linear, background-color 15ms linear; z-index: 1; /* @alternate */ z-index: var(--mdc-ripple-z-index, 1); } .mdc-button .mdc-button__ripple::after { z-index: 0; /* @alternate */ z-index: var(--mdc-ripple-z-index, 0); } .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { transform: scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { top: 0; /* @noflip */ /*rtl:ignore*/ left: 0; transform: scale(0); transform-origin: center center; } .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { top: var(--mdc-ripple-top, 0); /* @noflip */ /*rtl:ignore*/ left: var(--mdc-ripple-left, 0); } .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; } .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { animation: mdc-ripple-fg-opacity-out 150ms; transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-button .mdc-button__ripple::before, .mdc-button .mdc-button__ripple::after { top: calc(50% - 100%); /* @noflip */ /*rtl:ignore*/ left: calc(50% - 100%); width: 200%; height: 200%; } .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { width: var(--mdc-ripple-fg-size, 100%); height: var(--mdc-ripple-fg-size, 100%); } .mdc-button .mdc-button__ripple { position: absolute; box-sizing: content-box; width: 100%; height: 100%; overflow: hidden; z-index: 0; } .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { top: 0; left: 0; } .mdc-button { font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-text-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif))); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-text-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem)); letter-spacing: 0.0892857143em; /* @alternate */ letter-spacing: var(--mdc-text-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em)); font-weight: 500; /* @alternate */ font-weight: var(--mdc-text-button-label-text-weight, var(--mdc-typography-button-font-weight, 500)); text-transform: uppercase; /* @alternate */ text-transform: var(--mdc-text-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase)); height: 36px; /* @alternate */ height: var(--mdc-text-button-container-height, 36px); border-radius: 4px; /* @alternate */ border-radius: var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px)); } .mdc-button:not(:disabled) { color: #ff6e40; /* @alternate */ color: var(--mdc-text-button-label-text-color, var(--mdc-theme-primary, #ff6e40)); } .mdc-button:disabled { color: rgba(0, 0, 0, 0.38); /* @alternate */ color: var(--mdc-text-button-disabled-label-text-color, rgba(0, 0, 0, 0.38)); } .mdc-button .mdc-button__icon { font-size: 1.125rem; /* @alternate */ font-size: var(--mdc-text-button-with-icon-icon-size, 1.125rem); width: 1.125rem; /* @alternate */ width: var(--mdc-text-button-with-icon-icon-size, 1.125rem); height: 1.125rem; /* @alternate */ height: var(--mdc-text-button-with-icon-icon-size, 1.125rem); } .mdc-button .mdc-button__ripple::before, .mdc-button .mdc-button__ripple::after { background-color: #ff6e40; /* @alternate */ background-color: var(--mdc-text-button-hover-state-layer-color, var(--mdc-theme-primary, #ff6e40)); } .mdc-button:hover .mdc-button__ripple::before, .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { opacity: 0.04; /* @alternate */ opacity: var(--mdc-text-button-hover-state-layer-opacity, 0.04); } .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-text-button-focus-state-layer-opacity, 0.12); } .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { transition: opacity 150ms linear; } .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-text-button-pressed-state-layer-opacity, 0.12); } .mdc-button.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-text-button-pressed-state-layer-opacity, 0.12); } .mdc-button .mdc-button__ripple { border-radius: 4px; /* @alternate */ border-radius: var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px)); } .mdc-button--unelevated { font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-filled-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif))); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-filled-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem)); letter-spacing: 0.0892857143em; /* @alternate */ letter-spacing: var(--mdc-filled-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em)); font-weight: 500; /* @alternate */ font-weight: var(--mdc-filled-button-label-text-weight, var(--mdc-typography-button-font-weight, 500)); text-transform: uppercase; /* @alternate */ text-transform: var(--mdc-filled-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase)); height: 36px; /* @alternate */ height: var(--mdc-filled-button-container-height, 36px); border-radius: 4px; /* @alternate */ border-radius: var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px)); } .mdc-button--unelevated:not(:disabled) { background-color: #ff6e40; /* @alternate */ background-color: var(--mdc-filled-button-container-color, var(--mdc-theme-primary, #ff6e40)); } .mdc-button--unelevated:disabled { background-color: rgba(0, 0, 0, 0.12); /* @alternate */ background-color: var(--mdc-filled-button-disabled-container-color, rgba(0, 0, 0, 0.12)); } .mdc-button--unelevated:not(:disabled) { color: #263238; /* @alternate */ color: var(--mdc-filled-button-label-text-color, var(--mdc-theme-on-primary, #263238)); } .mdc-button--unelevated:disabled { color: rgba(0, 0, 0, 0.38); /* @alternate */ color: var(--mdc-filled-button-disabled-label-text-color, rgba(0, 0, 0, 0.38)); } .mdc-button--unelevated .mdc-button__icon { font-size: 1.125rem; /* @alternate */ font-size: var(--mdc-filled-button-with-icon-icon-size, 1.125rem); width: 1.125rem; /* @alternate */ width: var(--mdc-filled-button-with-icon-icon-size, 1.125rem); height: 1.125rem; /* @alternate */ height: var(--mdc-filled-button-with-icon-icon-size, 1.125rem); } .mdc-button--unelevated .mdc-button__ripple::before, .mdc-button--unelevated .mdc-button__ripple::after { background-color: #263238; /* @alternate */ background-color: var(--mdc-filled-button-hover-state-layer-color, var(--mdc-theme-on-primary, #263238)); } .mdc-button--unelevated:hover .mdc-button__ripple::before, .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { opacity: 0.08; /* @alternate */ opacity: var(--mdc-filled-button-hover-state-layer-opacity, 0.08); } .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { transition-duration: 75ms; opacity: 0.24; /* @alternate */ opacity: var(--mdc-filled-button-focus-state-layer-opacity, 0.24); } .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { transition: opacity 150ms linear; } .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { transition-duration: 75ms; opacity: 0.24; /* @alternate */ opacity: var(--mdc-filled-button-pressed-state-layer-opacity, 0.24); } .mdc-button--unelevated.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-filled-button-pressed-state-layer-opacity, 0.24); } .mdc-button--unelevated .mdc-button__ripple { border-radius: 4px; /* @alternate */ border-radius: var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px)); } .mdc-button--raised { font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-protected-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif))); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-protected-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem)); letter-spacing: 0.0892857143em; /* @alternate */ letter-spacing: var(--mdc-protected-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em)); font-weight: 500; /* @alternate */ font-weight: var(--mdc-protected-button-label-text-weight, var(--mdc-typography-button-font-weight, 500)); text-transform: uppercase; /* @alternate */ text-transform: var(--mdc-protected-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase)); height: 36px; /* @alternate */ height: var(--mdc-protected-button-container-height, 36px); border-radius: 4px; /* @alternate */ border-radius: var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px)); box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); /* @alternate */ box-shadow: var(--mdc-protected-button-container-elevation, var(--mdc-elevation-box-shadow-for-gss)); --mdc-elevation-box-shadow-for-gss: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .mdc-button--raised:not(:disabled) { background-color: #ff6e40; /* @alternate */ background-color: var(--mdc-protected-button-container-color, var(--mdc-theme-primary, #ff6e40)); } .mdc-button--raised:disabled { background-color: rgba(0, 0, 0, 0.12); /* @alternate */ background-color: var(--mdc-protected-button-disabled-container-color, rgba(0, 0, 0, 0.12)); } .mdc-button--raised:not(:disabled) { color: #263238; /* @alternate */ color: var(--mdc-protected-button-label-text-color, var(--mdc-theme-on-primary, #263238)); } .mdc-button--raised:disabled { color: rgba(0, 0, 0, 0.38); /* @alternate */ color: var(--mdc-protected-button-disabled-label-text-color, rgba(0, 0, 0, 0.38)); } .mdc-button--raised .mdc-button__icon { font-size: 1.125rem; /* @alternate */ font-size: var(--mdc-protected-button-with-icon-icon-size, 1.125rem); width: 1.125rem; /* @alternate */ width: var(--mdc-protected-button-with-icon-icon-size, 1.125rem); height: 1.125rem; /* @alternate */ height: var(--mdc-protected-button-with-icon-icon-size, 1.125rem); } .mdc-button--raised .mdc-button__ripple::before, .mdc-button--raised .mdc-button__ripple::after { background-color: #263238; /* @alternate */ background-color: var(--mdc-protected-button-hover-state-layer-color, var(--mdc-theme-on-primary, #263238)); } .mdc-button--raised:hover .mdc-button__ripple::before, .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before { opacity: 0.08; /* @alternate */ opacity: var(--mdc-protected-button-hover-state-layer-opacity, 0.08); } .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { transition-duration: 75ms; opacity: 0.24; /* @alternate */ opacity: var(--mdc-protected-button-focus-state-layer-opacity, 0.24); } .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { transition: opacity 150ms linear; } .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { transition-duration: 75ms; opacity: 0.24; /* @alternate */ opacity: var(--mdc-protected-button-pressed-state-layer-opacity, 0.24); } .mdc-button--raised.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-protected-button-pressed-state-layer-opacity, 0.24); } .mdc-button--raised .mdc-button__ripple { border-radius: 4px; /* @alternate */ border-radius: var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px)); } .mdc-button--raised.mdc-ripple-upgraded--background-focused, .mdc-button--raised:not(.mdc-ripple-upgraded):focus { box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); /* @alternate */ box-shadow: var(--mdc-protected-button-focus-container-elevation, var(--mdc-elevation-box-shadow-for-gss)); --mdc-elevation-box-shadow-for-gss: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } .mdc-button--raised:hover { box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); /* @alternate */ box-shadow: var(--mdc-protected-button-hover-container-elevation, var(--mdc-elevation-box-shadow-for-gss)); --mdc-elevation-box-shadow-for-gss: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } .mdc-button--raised:not(:disabled):active { box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); /* @alternate */ box-shadow: var(--mdc-protected-button-pressed-container-elevation, var(--mdc-elevation-box-shadow-for-gss)); --mdc-elevation-box-shadow-for-gss: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } .mdc-button--raised:disabled { box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); /* @alternate */ box-shadow: var(--mdc-protected-button-disabled-container-elevation, var(--mdc-elevation-box-shadow-for-gss)); --mdc-elevation-box-shadow-for-gss: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); } .mdc-button--outlined { font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-outlined-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif))); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-outlined-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem)); letter-spacing: 0.0892857143em; /* @alternate */ letter-spacing: var(--mdc-outlined-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em)); font-weight: 500; /* @alternate */ font-weight: var(--mdc-outlined-button-label-text-weight, var(--mdc-typography-button-font-weight, 500)); text-transform: uppercase; /* @alternate */ text-transform: var(--mdc-outlined-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase)); height: 36px; /* @alternate */ height: var(--mdc-outlined-button-container-height, 36px); border-radius: 4px; /* @alternate */ border-radius: var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px)); padding: 0 15px 0 15px; border-width: 1px; /* @alternate */ border-width: var(--mdc-outlined-button-outline-width, 1px); } .mdc-button--outlined:not(:disabled) { color: #ff6e40; /* @alternate */ color: var(--mdc-outlined-button-label-text-color, var(--mdc-theme-primary, #ff6e40)); } .mdc-button--outlined:disabled { color: rgba(0, 0, 0, 0.38); /* @alternate */ color: var(--mdc-outlined-button-disabled-label-text-color, rgba(0, 0, 0, 0.38)); } .mdc-button--outlined .mdc-button__icon { font-size: 1.125rem; /* @alternate */ font-size: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem); width: 1.125rem; /* @alternate */ width: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem); height: 1.125rem; /* @alternate */ height: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem); } .mdc-button--outlined .mdc-button__ripple::before, .mdc-button--outlined .mdc-button__ripple::after { background-color: #ff6e40; /* @alternate */ background-color: var(--mdc-outlined-button-hover-state-layer-color, var(--mdc-theme-primary, #ff6e40)); } .mdc-button--outlined:hover .mdc-button__ripple::before, .mdc-button--outlined.mdc-ripple-surface--hover .mdc-button__ripple::before { opacity: 0.04; /* @alternate */ opacity: var(--mdc-outlined-button-hover-state-layer-opacity, 0.04); } .mdc-button--outlined.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--outlined:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-outlined-button-focus-state-layer-opacity, 0.12); } .mdc-button--outlined:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { transition: opacity 150ms linear; } .mdc-button--outlined:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12); } .mdc-button--outlined.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12); } .mdc-button--outlined .mdc-button__ripple { border-radius: 4px; /* @alternate */ border-radius: var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px)); } .mdc-button--outlined:not(:disabled) { border-color: rgba(0, 0, 0, 0.12); /* @alternate */ border-color: var(--mdc-outlined-button-outline-color, rgba(0, 0, 0, 0.12)); } .mdc-button--outlined:disabled { border-color: rgba(0, 0, 0, 0.12); /* @alternate */ border-color: var(--mdc-outlined-button-disabled-outline-color, rgba(0, 0, 0, 0.12)); } .mdc-button--outlined.mdc-button--icon-trailing { padding: 0 11px 0 15px; } .mdc-button--outlined.mdc-button--icon-leading { padding: 0 15px 0 11px; } .mdc-button--outlined .mdc-button__ripple { top: calc(-1 * 1px); /* @alternate */ top: calc(-1 * var(--mdc-outlined-button-outline-width, 1px)); left: calc(-1 * 1px); /* @alternate */ left: calc(-1 * var(--mdc-outlined-button-outline-width, 1px)); border-width: 1px; /* @alternate */ border-width: var(--mdc-outlined-button-outline-width, 1px); } .mdc-button--outlined .mdc-button__touch { left: calc(-1 * 1px); /* @alternate */ left: calc(-1 * var(--mdc-outlined-button-outline-width, 1px)); width: calc(100% + 2 * 1px); /* @alternate */ width: calc(100% + 2 * var(--mdc-outlined-button-outline-width, 1px)); } .mdc-button--raised .mdc-button__icon, .mdc-button--unelevated .mdc-button__icon, .mdc-button--outlined .mdc-button__icon { /* @noflip */ /*rtl:ignore*/ margin-left: -4px; /* @noflip */ /*rtl:ignore*/ margin-right: 8px; } [dir=rtl] .mdc-button--raised .mdc-button__icon, [dir=rtl] .mdc-button--unelevated .mdc-button__icon, [dir=rtl] .mdc-button--outlined .mdc-button__icon, .mdc-button--raised .mdc-button__icon[dir=rtl], .mdc-button--unelevated .mdc-button__icon[dir=rtl], .mdc-button--outlined .mdc-button__icon[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 8px; /* @noflip */ /*rtl:ignore*/ margin-right: -4px; /*rtl:end:ignore*/ } .mdc-button--raised .mdc-button__label + .mdc-button__icon, .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, .mdc-button--outlined .mdc-button__label + .mdc-button__icon { /* @noflip */ /*rtl:ignore*/ margin-left: 8px; /* @noflip */ /*rtl:ignore*/ margin-right: -4px; } [dir=rtl] .mdc-button--raised .mdc-button__label + .mdc-button__icon, [dir=rtl] .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, [dir=rtl] .mdc-button--outlined .mdc-button__label + .mdc-button__icon, .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: -4px; /* @noflip */ /*rtl:ignore*/ margin-right: 8px; /*rtl:end:ignore*/ } .mdc-evolution-chip, .mdc-evolution-chip__cell, .mdc-evolution-chip__action { display: inline-flex; align-items: center; } .mdc-evolution-chip { position: relative; max-width: 100%; } .mdc-evolution-chip .mdc-elevation-overlay { width: 100%; height: 100%; top: 0; /* @noflip */ /*rtl:ignore*/ left: 0; } .mdc-evolution-chip__cell, .mdc-evolution-chip__action { height: 100%; } .mdc-evolution-chip__cell--primary { overflow-x: hidden; } .mdc-evolution-chip__cell--trailing { flex: 1 0 auto; } .mdc-evolution-chip__action { align-items: center; background: none; border: none; box-sizing: content-box; cursor: pointer; display: inline-flex; justify-content: center; outline: none; padding: 0; text-decoration: none; color: inherit; } .mdc-evolution-chip__action--presentational { cursor: auto; } .mdc-evolution-chip--disabled, .mdc-evolution-chip__action:disabled { pointer-events: none; } .mdc-evolution-chip__action--primary { overflow-x: hidden; } .mdc-evolution-chip__action--trailing { position: relative; } .mdc-evolution-chip__action--primary:before { box-sizing: border-box; content: ""; height: 100%; left: 0; position: absolute; pointer-events: none; top: 0; width: 100%; z-index: 1; } .mdc-evolution-chip--touch { margin-top: 8px; margin-bottom: 8px; } .mdc-evolution-chip__action-touch { position: absolute; top: 50%; height: 48px; left: 0; right: 0; transform: translateY(-50%); } .mdc-evolution-chip__text-label { white-space: nowrap; user-select: none; text-overflow: ellipsis; overflow: hidden; } .mdc-evolution-chip__graphic { align-items: center; display: inline-flex; justify-content: center; overflow: hidden; pointer-events: none; position: relative; flex: 1 0 auto; } .mdc-evolution-chip__checkmark { position: absolute; opacity: 0; top: 50%; /* @noflip */ /*rtl:ignore*/ left: 50%; } .mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic { width: 0; } .mdc-evolution-chip__checkmark-background { opacity: 0; } .mdc-evolution-chip__checkmark-svg { display: block; } .mdc-evolution-chip__checkmark-path { stroke-width: 2px; stroke-dasharray: 29.7833385; stroke-dashoffset: 29.7833385; stroke: currentColor; } .mdc-evolution-chip--selecting .mdc-evolution-chip__graphic { transition: width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1); } .mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark { transition: transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1); transform: translate(-75%, -50%); } .mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path { transition: stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1); } .mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic { transition: width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1); } .mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark { transition: opacity 50ms 0ms linear, transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1); transform: translate(-75%, -50%); } .mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path { stroke-dashoffset: 0; } .mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary { transition: opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1); } .mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path { transition: stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1); } .mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary { transition: opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1); } .mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark { transition: opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1); transform: translate(-50%, -50%); } .mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path { stroke-dashoffset: 0; } .mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary { opacity: 0; } .mdc-evolution-chip--selected .mdc-evolution-chip__checkmark { transform: translate(-50%, -50%); opacity: 1; } .mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path { stroke-dashoffset: 0; } @keyframes mdc-evolution-chip-enter { from { transform: scale(0.8); opacity: 0.4; } to { transform: scale(1); opacity: 1; } } .mdc-evolution-chip--enter { animation: mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1); } @keyframes mdc-evolution-chip-exit { from { opacity: 1; } to { opacity: 0; } } .mdc-evolution-chip--exit { animation: mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1); } .mdc-evolution-chip--hidden { opacity: 0; pointer-events: none; transition: width 150ms 0ms cubic-bezier(0.4, 0, 1, 1); } .mdc-evolution-chip { height: 32px; border-radius: 16px; background-color: #e0e0e0; } .mdc-evolution-chip .mdc-evolution-chip__ripple { border-radius: 16px; } .mdc-evolution-chip .mdc-evolution-chip__action--primary:before, .mdc-evolution-chip .mdc-evolution-chip__action--primary:after { border-radius: 16px; } .mdc-evolution-chip .mdc-evolution-chip__icon--primary { border-radius: 16px; } .mdc-evolution-chip .mdc-evolution-chip__action--primary { /* @noflip */ /*rtl:ignore*/ padding-left: 12px; /* @noflip */ /*rtl:ignore*/ padding-right: 12px; } [dir=rtl] .mdc-evolution-chip .mdc-evolution-chip__action--primary, .mdc-evolution-chip .mdc-evolution-chip__action--primary[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 12px; /* @noflip */ /*rtl:ignore*/ padding-right: 12px; /*rtl:end:ignore*/ } .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic { /* @noflip */ /*rtl:ignore*/ padding-left: 6px; /* @noflip */ /*rtl:ignore*/ padding-right: 6px; } [dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic, .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 6px; /* @noflip */ /*rtl:ignore*/ padding-right: 6px; /*rtl:end:ignore*/ } .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary { /* @noflip */ /*rtl:ignore*/ padding-left: 0; /* @noflip */ /*rtl:ignore*/ padding-right: 12px; } [dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary, .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 12px; /* @noflip */ /*rtl:ignore*/ padding-right: 0; /*rtl:end:ignore*/ } .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing { /* @noflip */ /*rtl:ignore*/ padding-left: 8px; /* @noflip */ /*rtl:ignore*/ padding-right: 8px; } [dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing, .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 8px; /* @noflip */ /*rtl:ignore*/ padding-right: 8px; /*rtl:end:ignore*/ } .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing { /* @noflip */ /*rtl:ignore*/ left: 8px; /* @noflip */ /*rtl:ignore*/ right: initial; } [dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing, .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ left: initial; /* @noflip */ /*rtl:ignore*/ right: 8px; /*rtl:end:ignore*/ } .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing:after { /* @noflip */ /*rtl:ignore*/ left: 8px; /* @noflip */ /*rtl:ignore*/ right: initial; } [dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing:after, .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing:after[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ left: initial; /* @noflip */ /*rtl:ignore*/ right: 8px; /*rtl:end:ignore*/ } .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary { /* @noflip */ /*rtl:ignore*/ padding-left: 12px; /* @noflip */ /*rtl:ignore*/ padding-right: 0; } [dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary, .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 0; /* @noflip */ /*rtl:ignore*/ padding-right: 12px; /*rtl:end:ignore*/ } .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic { /* @noflip */ /*rtl:ignore*/ padding-left: 6px; /* @noflip */ /*rtl:ignore*/ padding-right: 6px; } [dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic, .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 6px; /* @noflip */ /*rtl:ignore*/ padding-right: 6px; /*rtl:end:ignore*/ } .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing { /* @noflip */ /*rtl:ignore*/ padding-left: 8px; /* @noflip */ /*rtl:ignore*/ padding-right: 8px; } [dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing, .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 8px; /* @noflip */ /*rtl:ignore*/ padding-right: 8px; /*rtl:end:ignore*/ } .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing { /* @noflip */ /*rtl:ignore*/ left: 8px; /* @noflip */ /*rtl:ignore*/ right: initial; } [dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing, .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ left: initial; /* @noflip */ /*rtl:ignore*/ right: 8px; /*rtl:end:ignore*/ } .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing:after { /* @noflip */ /*rtl:ignore*/ left: 8px; /* @noflip */ /*rtl:ignore*/ right: initial; } [dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing:after, .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing:after[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ left: initial; /* @noflip */ /*rtl:ignore*/ right: 8px; /*rtl:end:ignore*/ } .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary { /* @noflip */ /*rtl:ignore*/ padding-left: 0; /* @noflip */ /*rtl:ignore*/ padding-right: 0; } [dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary, .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 0; /* @noflip */ /*rtl:ignore*/ padding-right: 0; /*rtl:end:ignore*/ } .mdc-evolution-chip .mdc-evolution-chip__text-label { color: rgba(0, 0, 0, 0.87); } .mdc-evolution-chip .mdc-evolution-chip__icon--primary { color: rgba(0, 0, 0, 0.87); } .mdc-evolution-chip .mdc-evolution-chip__checkmark { color: rgba(0, 0, 0, 0.87); } .mdc-evolution-chip .mdc-evolution-chip__icon--trailing { color: rgba(0, 0, 0, 0.87); } .mdc-evolution-chip .mdc-evolution-chip__text-label { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-typography-body2-font-size, 0.875rem); line-height: 1.25rem; /* @alternate */ line-height: var(--mdc-typography-body2-line-height, 1.25rem); font-weight: 400; /* @alternate */ font-weight: var(--mdc-typography-body2-font-weight, 400); letter-spacing: 0.0178571429em; /* @alternate */ letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em); text-decoration: inherit; /* @alternate */ text-decoration: var(--mdc-typography-body2-text-decoration, inherit); text-transform: inherit; /* @alternate */ text-transform: var(--mdc-typography-body2-text-transform, inherit); } .mdc-evolution-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon) { --mdc-chip-graphic-selected-width: 20px; } .mdc-evolution-chip .mdc-evolution-chip__graphic { height: 20px; width: 20px; font-size: 20px; } .mdc-evolution-chip .mdc-evolution-chip__icon--primary { height: 20px; width: 20px; font-size: 20px; } .mdc-evolution-chip .mdc-evolution-chip__checkmark { height: 20px; width: 20px; } .mdc-evolution-chip .mdc-evolution-chip__icon--trailing, .mdc-evolution-chip .mdc-evolution-chip__action--trailing:after { height: 18px; width: 18px; font-size: 18px; } @media screen and (forced-colors: active), (-ms-high-contrast: active) { .mdc-evolution-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before { border-color: GrayText; } .mdc-evolution-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label { color: GrayText; } .mdc-evolution-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--primary { color: GrayText; } .mdc-evolution-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark { color: GrayText; } .mdc-evolution-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing { color: GrayText; } } .mdc-evolution-chip .mdc-evolution-chip__action:after { position: absolute; content: ""; border: 0px solid transparent; pointer-events: none; box-sizing: border-box; z-index: 1; } .mdc-evolution-chip .mdc-evolution-chip__action:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused:after, .mdc-evolution-chip .mdc-evolution-chip__action:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus:after { border-width: 5px; border-style: double; } .mdc-evolution-chip .mdc-evolution-chip__action--primary:after { height: 100%; width: 100%; top: 50%; /* @noflip */ /*rtl:ignore*/ left: 50%; transform: translate(-50%, -50%); } .mdc-evolution-chip .mdc-evolution-chip__action--trailing:after { top: 50%; transform: translateY(-50%); border-radius: 50%; } .mdc-evolution-chip--filter.mdc-evolution-chip--selected { background-color: #cecece; } .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic { /* @noflip */ /*rtl:ignore*/ padding-left: 4px; /* @noflip */ /*rtl:ignore*/ padding-right: 8px; } [dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic, .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 8px; /* @noflip */ /*rtl:ignore*/ padding-right: 4px; /*rtl:end:ignore*/ } .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary { /* @noflip */ /*rtl:ignore*/ padding-left: 0; /* @noflip */ /*rtl:ignore*/ padding-right: 12px; } [dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary, .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 12px; /* @noflip */ /*rtl:ignore*/ padding-right: 0; /*rtl:end:ignore*/ } .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic { /* @noflip */ /*rtl:ignore*/ padding-left: 4px; /* @noflip */ /*rtl:ignore*/ padding-right: 8px; } [dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic, .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 8px; /* @noflip */ /*rtl:ignore*/ padding-right: 4px; /*rtl:end:ignore*/ } .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing { /* @noflip */ /*rtl:ignore*/ padding-left: 8px; /* @noflip */ /*rtl:ignore*/ padding-right: 8px; } [dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing, .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 8px; /* @noflip */ /*rtl:ignore*/ padding-right: 8px; /*rtl:end:ignore*/ } .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing { /* @noflip */ /*rtl:ignore*/ left: 8px; /* @noflip */ /*rtl:ignore*/ right: initial; } [dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing, .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ left: initial; /* @noflip */ /*rtl:ignore*/ right: 8px; /*rtl:end:ignore*/ } .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing:after { /* @noflip */ /*rtl:ignore*/ left: 8px; /* @noflip */ /*rtl:ignore*/ right: initial; } [dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing:after, .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing:after[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ left: initial; /* @noflip */ /*rtl:ignore*/ right: 8px; /*rtl:end:ignore*/ } .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary { /* @noflip */ /*rtl:ignore*/ padding-left: 0; /* @noflip */ /*rtl:ignore*/ padding-right: 0; } [dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary, .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 0; /* @noflip */ /*rtl:ignore*/ padding-right: 0; /*rtl:end:ignore*/ } .mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon) { --mdc-chip-graphic-selected-width: 24px; } .mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic { height: 24px; width: 24px; font-size: 24px; } .mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary { height: 24px; width: 24px; font-size: 24px; } .mdc-evolution-chip__action--primary .mdc-evolution-chip__ripple::before, .mdc-evolution-chip__action--primary .mdc-evolution-chip__ripple::after { background-color: #000; /* @alternate */ background-color: var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000)); } .mdc-evolution-chip__action--primary:hover .mdc-evolution-chip__ripple::before, .mdc-evolution-chip__action--primary.mdc-ripple-surface--hover .mdc-evolution-chip__ripple::before { opacity: 0.04; /* @alternate */ opacity: var(--mdc-ripple-hover-opacity, 0.04); } .mdc-evolution-chip__action--primary.mdc-ripple-upgraded--background-focused .mdc-evolution-chip__ripple::before, .mdc-evolution-chip__action--primary:not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__ripple::before { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-focus-opacity, 0.12); } .mdc-evolution-chip__action--primary:not(.mdc-ripple-upgraded) .mdc-evolution-chip__ripple::after { transition: opacity 150ms linear; } .mdc-evolution-chip__action--primary:not(.mdc-ripple-upgraded):active .mdc-evolution-chip__ripple::after { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-evolution-chip__action--primary.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-evolution-chip__action--trailing .mdc-evolution-chip__ripple::before, .mdc-evolution-chip__action--trailing .mdc-evolution-chip__ripple::after { background-color: #000; /* @alternate */ background-color: var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000)); } .mdc-evolution-chip__action--trailing:hover .mdc-evolution-chip__ripple::before, .mdc-evolution-chip__action--trailing.mdc-ripple-surface--hover .mdc-evolution-chip__ripple::before { opacity: 0.04; /* @alternate */ opacity: var(--mdc-ripple-hover-opacity, 0.04); } .mdc-evolution-chip__action--trailing.mdc-ripple-upgraded--background-focused .mdc-evolution-chip__ripple::before, .mdc-evolution-chip__action--trailing:not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__ripple::before { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-focus-opacity, 0.12); } .mdc-evolution-chip__action--trailing:not(.mdc-ripple-upgraded) .mdc-evolution-chip__ripple::after { transition: opacity 150ms linear; } .mdc-evolution-chip__action--trailing:not(.mdc-ripple-upgraded):active .mdc-evolution-chip__ripple::after { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-evolution-chip__action--trailing.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-evolution-chip__ripple--trailing { height: 18px; width: 18px; } .mdc-evolution-chip__action { --mdc-ripple-fg-size: 0; --mdc-ripple-left: 0; --mdc-ripple-top: 0; --mdc-ripple-fg-scale: 1; --mdc-ripple-fg-translate-end: 0; --mdc-ripple-fg-translate-start: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .mdc-evolution-chip__action .mdc-evolution-chip__ripple::before, .mdc-evolution-chip__action .mdc-evolution-chip__ripple::after { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; content: ""; } .mdc-evolution-chip__action .mdc-evolution-chip__ripple::before { transition: opacity 15ms linear, background-color 15ms linear; z-index: 1; /* @alternate */ z-index: var(--mdc-ripple-z-index, 1); } .mdc-evolution-chip__action .mdc-evolution-chip__ripple::after { z-index: 0; /* @alternate */ z-index: var(--mdc-ripple-z-index, 0); } .mdc-evolution-chip__action.mdc-ripple-upgraded .mdc-evolution-chip__ripple::before { transform: scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-evolution-chip__action.mdc-ripple-upgraded .mdc-evolution-chip__ripple::after { top: 0; /* @noflip */ /*rtl:ignore*/ left: 0; transform: scale(0); transform-origin: center center; } .mdc-evolution-chip__action.mdc-ripple-upgraded--unbounded .mdc-evolution-chip__ripple::after { top: var(--mdc-ripple-top, 0); /* @noflip */ /*rtl:ignore*/ left: var(--mdc-ripple-left, 0); } .mdc-evolution-chip__action.mdc-ripple-upgraded--foreground-activation .mdc-evolution-chip__ripple::after { animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; } .mdc-evolution-chip__action.mdc-ripple-upgraded--foreground-deactivation .mdc-evolution-chip__ripple::after { animation: mdc-ripple-fg-opacity-out 150ms; transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-evolution-chip__action .mdc-evolution-chip__ripple::before, .mdc-evolution-chip__action .mdc-evolution-chip__ripple::after { top: calc(50% - 100%); /* @noflip */ /*rtl:ignore*/ left: calc(50% - 100%); width: 200%; height: 200%; } .mdc-evolution-chip__action.mdc-ripple-upgraded .mdc-evolution-chip__ripple::after { width: var(--mdc-ripple-fg-size, 100%); height: var(--mdc-ripple-fg-size, 100%); } .mdc-evolution-chip__ripple { position: absolute; box-sizing: content-box; overflow: hidden; pointer-events: none; } .mdc-evolution-chip__ripple--primary { height: 100%; width: 100%; top: 0; /* @noflip */ /*rtl:ignore*/ left: 0; } .mdc-evolution-chip__ripple--trailing { top: 50%; transform: translateY(-50%); } .mdc-evolution-chip-set { display: flex; } .mdc-evolution-chip-set:focus { outline: none; } .mdc-evolution-chip-set__chips { display: flex; flex-flow: wrap; min-width: 0; } .mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips { flex-flow: nowrap; } .mdc-evolution-chip-set .mdc-evolution-chip-set__chips { /* @noflip */ /*rtl:ignore*/ margin-left: -8px; /* @noflip */ /*rtl:ignore*/ margin-right: 0; } [dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips, .mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 0; /* @noflip */ /*rtl:ignore*/ margin-right: -8px; /*rtl:end:ignore*/ } .mdc-evolution-chip-set .mdc-evolution-chip { /* @noflip */ /*rtl:ignore*/ margin-left: 8px; /* @noflip */ /*rtl:ignore*/ margin-right: 0; } [dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip, .mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 0; /* @noflip */ /*rtl:ignore*/ margin-right: 8px; /*rtl:end:ignore*/ } .mdc-evolution-chip-set .mdc-evolution-chip { margin-top: 4px; margin-bottom: 4px; } .mdc-top-app-bar { background-color: #ff6e40; /* @alternate */ background-color: var(--mdc-theme-primary, #ff6e40); color: rgba(0, 0, 0, 0.87); display: flex; position: fixed; flex-direction: column; justify-content: space-between; box-sizing: border-box; width: 100%; z-index: 4; } .mdc-top-app-bar .mdc-top-app-bar__action-item, .mdc-top-app-bar .mdc-top-app-bar__navigation-icon { color: #263238; /* @alternate */ color: var(--mdc-theme-on-primary, #263238); } .mdc-top-app-bar .mdc-top-app-bar__action-item::before, .mdc-top-app-bar .mdc-top-app-bar__action-item::after, .mdc-top-app-bar .mdc-top-app-bar__navigation-icon::before, .mdc-top-app-bar .mdc-top-app-bar__navigation-icon::after { background-color: #263238; /* @alternate */ background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #263238)); } .mdc-top-app-bar .mdc-top-app-bar__action-item:hover::before, .mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-surface--hover::before, .mdc-top-app-bar .mdc-top-app-bar__navigation-icon:hover::before, .mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-surface--hover::before { opacity: 0.04; /* @alternate */ opacity: var(--mdc-ripple-hover-opacity, 0.04); } .mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded--background-focused::before, .mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):focus::before, .mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded--background-focused::before, .mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):focus::before { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-focus-opacity, 0.12); } .mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded)::after, .mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded)::after { transition: opacity 150ms linear; } .mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):active::after, .mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):active::after { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded, .mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-top-app-bar__row { display: flex; position: relative; box-sizing: border-box; width: 100%; height: 64px; } .mdc-top-app-bar__section { display: inline-flex; flex: 1 1 auto; align-items: center; min-width: 0; padding: 8px 12px; z-index: 1; } .mdc-top-app-bar__section--align-start { justify-content: flex-start; order: -1; } .mdc-top-app-bar__section--align-end { justify-content: flex-end; order: 1; } .mdc-top-app-bar__title { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 1.25rem; /* @alternate */ font-size: var(--mdc-typography-headline6-font-size, 1.25rem); line-height: 2rem; /* @alternate */ line-height: var(--mdc-typography-headline6-line-height, 2rem); font-weight: 500; /* @alternate */ font-weight: var(--mdc-typography-headline6-font-weight, 500); letter-spacing: 0.0125em; /* @alternate */ letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em); text-decoration: inherit; /* @alternate */ text-decoration: var(--mdc-typography-headline6-text-decoration, inherit); text-transform: inherit; /* @alternate */ text-transform: var(--mdc-typography-headline6-text-transform, inherit); /* @noflip */ /*rtl:ignore*/ padding-left: 20px; /* @noflip */ /*rtl:ignore*/ padding-right: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; z-index: 1; } [dir=rtl] .mdc-top-app-bar__title, .mdc-top-app-bar__title[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 0; /* @noflip */ /*rtl:ignore*/ padding-right: 20px; /*rtl:end:ignore*/ } .mdc-top-app-bar--short-collapsed { /* @noflip */ /*rtl:ignore*/ border-top-left-radius: 0; /* @noflip */ /*rtl:ignore*/ border-top-right-radius: 0; /* @noflip */ /*rtl:ignore*/ border-bottom-right-radius: 24px; /* @noflip */ /*rtl:ignore*/ border-bottom-left-radius: 0; } [dir=rtl] .mdc-top-app-bar--short-collapsed, .mdc-top-app-bar--short-collapsed[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ border-top-left-radius: 0; /* @noflip */ /*rtl:ignore*/ border-top-right-radius: 0; /* @noflip */ /*rtl:ignore*/ border-bottom-right-radius: 0; /* @noflip */ /*rtl:ignore*/ border-bottom-left-radius: 24px; /*rtl:end:ignore*/ } .mdc-top-app-bar--short { top: 0; /* @noflip */ /*rtl:ignore*/ right: auto; /* @noflip */ /*rtl:ignore*/ left: 0; width: 100%; transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1); } [dir=rtl] .mdc-top-app-bar--short, .mdc-top-app-bar--short[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ right: 0; /* @noflip */ /*rtl:ignore*/ left: auto; /*rtl:end:ignore*/ } .mdc-top-app-bar--short .mdc-top-app-bar__row { height: 56px; } .mdc-top-app-bar--short .mdc-top-app-bar__section { padding: 4px; } .mdc-top-app-bar--short .mdc-top-app-bar__title { transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; } .mdc-top-app-bar--short-collapsed { /* @alternate */ box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); width: 56px; transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1); } .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__title { display: none; } .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__action-item { transition: padding 150ms cubic-bezier(0.4, 0, 0.2, 1); } .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item { width: 112px; } .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end { /* @noflip */ /*rtl:ignore*/ padding-left: 0; /* @noflip */ /*rtl:ignore*/ padding-right: 12px; } [dir=rtl] .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end, .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 12px; /* @noflip */ /*rtl:ignore*/ padding-right: 0; /*rtl:end:ignore*/ } .mdc-top-app-bar--dense .mdc-top-app-bar__row { height: 48px; } .mdc-top-app-bar--dense .mdc-top-app-bar__section { padding: 0 4px; } .mdc-top-app-bar--dense .mdc-top-app-bar__title { /* @noflip */ /*rtl:ignore*/ padding-left: 12px; /* @noflip */ /*rtl:ignore*/ padding-right: 0; } [dir=rtl] .mdc-top-app-bar--dense .mdc-top-app-bar__title, .mdc-top-app-bar--dense .mdc-top-app-bar__title[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 0; /* @noflip */ /*rtl:ignore*/ padding-right: 12px; /*rtl:end:ignore*/ } .mdc-top-app-bar--prominent .mdc-top-app-bar__row { height: 128px; } .mdc-top-app-bar--prominent .mdc-top-app-bar__title { align-self: flex-end; padding-bottom: 2px; } .mdc-top-app-bar--prominent .mdc-top-app-bar__action-item, .mdc-top-app-bar--prominent .mdc-top-app-bar__navigation-icon { align-self: flex-start; } .mdc-top-app-bar--fixed { transition: box-shadow 200ms linear; } .mdc-top-app-bar--fixed-scrolled { /* @alternate */ box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); transition: box-shadow 200ms linear; } .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__row { height: 96px; } .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__section { padding: 0 12px; } .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title { /* @noflip */ /*rtl:ignore*/ padding-left: 20px; /* @noflip */ /*rtl:ignore*/ padding-right: 0; padding-bottom: 9px; } [dir=rtl] .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title, .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 0; /* @noflip */ /*rtl:ignore*/ padding-right: 20px; /*rtl:end:ignore*/ } .mdc-top-app-bar--fixed-adjust { padding-top: 64px; } .mdc-top-app-bar--dense-fixed-adjust { padding-top: 48px; } .mdc-top-app-bar--short-fixed-adjust { padding-top: 56px; } .mdc-top-app-bar--prominent-fixed-adjust { padding-top: 128px; } .mdc-top-app-bar--dense-prominent-fixed-adjust { padding-top: 96px; } @media (max-width: 599px) { .mdc-top-app-bar__row { height: 56px; } .mdc-top-app-bar__section { padding: 4px; } .mdc-top-app-bar--short { transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1); } .mdc-top-app-bar--short-collapsed { transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1); } .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end { /* @noflip */ /*rtl:ignore*/ padding-left: 0; /* @noflip */ /*rtl:ignore*/ padding-right: 12px; } [dir=rtl] .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end, .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 12px; /* @noflip */ /*rtl:ignore*/ padding-right: 0; /*rtl:end:ignore*/ } .mdc-top-app-bar--prominent .mdc-top-app-bar__title { padding-bottom: 6px; } .mdc-top-app-bar--fixed-adjust { padding-top: 56px; } } .mdc-typography { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-font-family, Roboto, sans-serif); } .mdc-typography--headline1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-headline1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 6rem; /* @alternate */ font-size: var(--mdc-typography-headline1-font-size, 6rem); line-height: 6rem; /* @alternate */ line-height: var(--mdc-typography-headline1-line-height, 6rem); font-weight: 300; /* @alternate */ font-weight: var(--mdc-typography-headline1-font-weight, 300); letter-spacing: -0.015625em; /* @alternate */ letter-spacing: var(--mdc-typography-headline1-letter-spacing, -0.015625em); text-decoration: inherit; /* @alternate */ text-decoration: var(--mdc-typography-headline1-text-decoration, inherit); text-transform: inherit; /* @alternate */ text-transform: var(--mdc-typography-headline1-text-transform, inherit); } .mdc-typography--headline2 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-headline2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 3.75rem; /* @alternate */ font-size: var(--mdc-typography-headline2-font-size, 3.75rem); line-height: 3.75rem; /* @alternate */ line-height: var(--mdc-typography-headline2-line-height, 3.75rem); font-weight: 300; /* @alternate */ font-weight: var(--mdc-typography-headline2-font-weight, 300); letter-spacing: -0.0083333333em; /* @alternate */ letter-spacing: var(--mdc-typography-headline2-letter-spacing, -0.0083333333em); text-decoration: inherit; /* @alternate */ text-decoration: var(--mdc-typography-headline2-text-decoration, inherit); text-transform: inherit; /* @alternate */ text-transform: var(--mdc-typography-headline2-text-transform, inherit); } .mdc-typography--headline3 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-headline3-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 3rem; /* @alternate */ font-size: var(--mdc-typography-headline3-font-size, 3rem); line-height: 3.125rem; /* @alternate */ line-height: var(--mdc-typography-headline3-line-height, 3.125rem); font-weight: 400; /* @alternate */ font-weight: var(--mdc-typography-headline3-font-weight, 400); letter-spacing: normal; /* @alternate */ letter-spacing: var(--mdc-typography-headline3-letter-spacing, normal); text-decoration: inherit; /* @alternate */ text-decoration: var(--mdc-typography-headline3-text-decoration, inherit); text-transform: inherit; /* @alternate */ text-transform: var(--mdc-typography-headline3-text-transform, inherit); } .mdc-typography--headline4 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-headline4-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 2.125rem; /* @alternate */ font-size: var(--mdc-typography-headline4-font-size, 2.125rem); line-height: 2.5rem; /* @alternate */ line-height: var(--mdc-typography-headline4-line-height, 2.5rem); font-weight: 400; /* @alternate */ font-weight: var(--mdc-typography-headline4-font-weight, 400); letter-spacing: 0.0073529412em; /* @alternate */ letter-spacing: var(--mdc-typography-headline4-letter-spacing, 0.0073529412em); text-decoration: inherit; /* @alternate */ text-decoration: var(--mdc-typography-headline4-text-decoration, inherit); text-transform: inherit; /* @alternate */ text-transform: var(--mdc-typography-headline4-text-transform, inherit); } .mdc-typography--headline5 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-headline5-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 1.5rem; /* @alternate */ font-size: var(--mdc-typography-headline5-font-size, 1.5rem); line-height: 2rem; /* @alternate */ line-height: var(--mdc-typography-headline5-line-height, 2rem); font-weight: 400; /* @alternate */ font-weight: var(--mdc-typography-headline5-font-weight, 400); letter-spacing: normal; /* @alternate */ letter-spacing: var(--mdc-typography-headline5-letter-spacing, normal); text-decoration: inherit; /* @alternate */ text-decoration: var(--mdc-typography-headline5-text-decoration, inherit); text-transform: inherit; /* @alternate */ text-transform: var(--mdc-typography-headline5-text-transform, inherit); } .mdc-typography--headline6 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 1.25rem; /* @alternate */ font-size: var(--mdc-typography-headline6-font-size, 1.25rem); line-height: 2rem; /* @alternate */ line-height: var(--mdc-typography-headline6-line-height, 2rem); font-weight: 500; /* @alternate */ font-weight: var(--mdc-typography-headline6-font-weight, 500); letter-spacing: 0.0125em; /* @alternate */ letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em); text-decoration: inherit; /* @alternate */ text-decoration: var(--mdc-typography-headline6-text-decoration, inherit); text-transform: inherit; /* @alternate */ text-transform: var(--mdc-typography-headline6-text-transform, inherit); } .mdc-typography--subtitle1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 1rem; /* @alternate */ font-size: var(--mdc-typography-subtitle1-font-size, 1rem); line-height: 1.75rem; /* @alternate */ line-height: var(--mdc-typography-subtitle1-line-height, 1.75rem); font-weight: 400; /* @alternate */ font-weight: var(--mdc-typography-subtitle1-font-weight, 400); letter-spacing: 0.009375em; /* @alternate */ letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em); text-decoration: inherit; /* @alternate */ text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit); text-transform: inherit; /* @alternate */ text-transform: var(--mdc-typography-subtitle1-text-transform, inherit); } .mdc-typography--subtitle2 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-typography-subtitle2-font-size, 0.875rem); line-height: 1.375rem; /* @alternate */ line-height: var(--mdc-typography-subtitle2-line-height, 1.375rem); font-weight: 500; /* @alternate */ font-weight: var(--mdc-typography-subtitle2-font-weight, 500); letter-spacing: 0.0071428571em; /* @alternate */ letter-spacing: var(--mdc-typography-subtitle2-letter-spacing, 0.0071428571em); text-decoration: inherit; /* @alternate */ text-decoration: var(--mdc-typography-subtitle2-text-decoration, inherit); text-transform: inherit; /* @alternate */ text-transform: var(--mdc-typography-subtitle2-text-transform, inherit); } .mdc-typography--body1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 1rem; /* @alternate */ font-size: var(--mdc-typography-body1-font-size, 1rem); line-height: 1.5rem; /* @alternate */ line-height: var(--mdc-typography-body1-line-height, 1.5rem); font-weight: 400; /* @alternate */ font-weight: var(--mdc-typography-body1-font-weight, 400); letter-spacing: 0.03125em; /* @alternate */ letter-spacing: var(--mdc-typography-body1-letter-spacing, 0.03125em); text-decoration: inherit; /* @alternate */ text-decoration: var(--mdc-typography-body1-text-decoration, inherit); text-transform: inherit; /* @alternate */ text-transform: var(--mdc-typography-body1-text-transform, inherit); } .mdc-typography--body2 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-typography-body2-font-size, 0.875rem); line-height: 1.25rem; /* @alternate */ line-height: var(--mdc-typography-body2-line-height, 1.25rem); font-weight: 400; /* @alternate */ font-weight: var(--mdc-typography-body2-font-weight, 400); letter-spacing: 0.0178571429em; /* @alternate */ letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em); text-decoration: inherit; /* @alternate */ text-decoration: var(--mdc-typography-body2-text-decoration, inherit); text-transform: inherit; /* @alternate */ text-transform: var(--mdc-typography-body2-text-transform, inherit); } .mdc-typography--caption { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 0.75rem; /* @alternate */ font-size: var(--mdc-typography-caption-font-size, 0.75rem); line-height: 1.25rem; /* @alternate */ line-height: var(--mdc-typography-caption-line-height, 1.25rem); font-weight: 400; /* @alternate */ font-weight: var(--mdc-typography-caption-font-weight, 400); letter-spacing: 0.0333333333em; /* @alternate */ letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em); text-decoration: inherit; /* @alternate */ text-decoration: var(--mdc-typography-caption-text-decoration, inherit); text-transform: inherit; /* @alternate */ text-transform: var(--mdc-typography-caption-text-transform, inherit); } .mdc-typography--button { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-typography-button-font-size, 0.875rem); line-height: 2.25rem; /* @alternate */ line-height: var(--mdc-typography-button-line-height, 2.25rem); font-weight: 500; /* @alternate */ font-weight: var(--mdc-typography-button-font-weight, 500); letter-spacing: 0.0892857143em; /* @alternate */ letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); text-decoration: none; /* @alternate */ text-decoration: var(--mdc-typography-button-text-decoration, none); text-transform: uppercase; /* @alternate */ text-transform: var(--mdc-typography-button-text-transform, uppercase); } .mdc-typography--overline { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-overline-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 0.75rem; /* @alternate */ font-size: var(--mdc-typography-overline-font-size, 0.75rem); line-height: 2rem; /* @alternate */ line-height: var(--mdc-typography-overline-line-height, 2rem); font-weight: 500; /* @alternate */ font-weight: var(--mdc-typography-overline-font-weight, 500); letter-spacing: 0.1666666667em; /* @alternate */ letter-spacing: var(--mdc-typography-overline-letter-spacing, 0.1666666667em); text-decoration: none; /* @alternate */ text-decoration: var(--mdc-typography-overline-text-decoration, none); text-transform: uppercase; /* @alternate */ text-transform: var(--mdc-typography-overline-text-transform, uppercase); } html, body { height: 100vh; margin: 0; padding: 0; } body { display: flex; flex-direction: column; } body .mdc-icon-button { font-size: 24px; width: 48px; height: 48px; padding: 12px; } body .mdc-icon-button.mdc-icon-button--reduced-size { width: 40px; height: 40px; padding: 8px; } body .mdc-icon-button.mdc-icon-button--reduced-size.mdc-icon-button--touch { margin-top: 4px; margin-bottom: 4px; margin-right: 4px; margin-left: 4px; } body .mdc-icon-button .mdc-icon-button__touch { position: absolute; top: 50%; height: 48px; /* @noflip */ /*rtl:ignore*/ left: 50%; width: 48px; transform: translate(-50%, -50%); } body .mdc-icon-button:disabled { color: rgba(0, 0, 0, 0.38); /* @alternate */ color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38)); } body .mdc-icon-button svg, body .mdc-icon-button img { width: 24px; height: 24px; } body .mdc-icon-button { display: inline-block; position: relative; box-sizing: border-box; border: none; outline: none; background-color: transparent; fill: currentColor; color: inherit; text-decoration: none; cursor: pointer; user-select: none; overflow: visible; } body .mdc-icon-button .mdc-icon-button__touch { position: absolute; top: 50%; height: 48px; /* @noflip */ /*rtl:ignore*/ left: 50%; width: 48px; transform: translate(-50%, -50%); } body .mdc-icon-button:disabled { cursor: default; pointer-events: none; } body .mdc-icon-button--display-flex { align-items: center; display: inline-flex; justify-content: center; } body .mdc-icon-button__icon { display: inline-block; } body .mdc-icon-button__icon.mdc-icon-button__icon--on { display: none; } body .mdc-icon-button--touch { margin-top: 0px; margin-bottom: 0px; } body .mdc-icon-button--on .mdc-icon-button__icon { display: none; } body .mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on { display: inline-block; } body .mdc-icon-button { --mdc-ripple-fg-size: 0; --mdc-ripple-left: 0; --mdc-ripple-top: 0; --mdc-ripple-fg-scale: 1; --mdc-ripple-fg-translate-end: 0; --mdc-ripple-fg-translate-start: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); will-change: transform, opacity; } body .mdc-icon-button .mdc-icon-button__ripple::before, body .mdc-icon-button .mdc-icon-button__ripple::after { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; content: ""; } body .mdc-icon-button .mdc-icon-button__ripple::before { transition: opacity 15ms linear, background-color 15ms linear; z-index: 1; /* @alternate */ z-index: var(--mdc-ripple-z-index, 1); } body .mdc-icon-button .mdc-icon-button__ripple::after { z-index: 0; /* @alternate */ z-index: var(--mdc-ripple-z-index, 0); } body .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before { transform: scale(var(--mdc-ripple-fg-scale, 1)); } body .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after { top: 0; /* @noflip */ /*rtl:ignore*/ left: 0; transform: scale(0); transform-origin: center center; } body .mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple::after { top: var(--mdc-ripple-top, 0); /* @noflip */ /*rtl:ignore*/ left: var(--mdc-ripple-left, 0); } body .mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple::after { animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; } body .mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation .mdc-icon-button__ripple::after { animation: mdc-ripple-fg-opacity-out 150ms; transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } body .mdc-icon-button .mdc-icon-button__ripple::before, body .mdc-icon-button .mdc-icon-button__ripple::after { top: calc(50% - 50%); /* @noflip */ /*rtl:ignore*/ left: calc(50% - 50%); width: 100%; height: 100%; } body .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before, body .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after { top: var(--mdc-ripple-top, calc(50% - 50%)); /* @noflip */ /*rtl:ignore*/ left: var(--mdc-ripple-left, calc(50% - 50%)); width: var(--mdc-ripple-fg-size, 100%); height: var(--mdc-ripple-fg-size, 100%); } body .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after { width: var(--mdc-ripple-fg-size, 100%); height: var(--mdc-ripple-fg-size, 100%); } body .mdc-icon-button .mdc-icon-button__ripple::before, body .mdc-icon-button .mdc-icon-button__ripple::after { background-color: #000; /* @alternate */ background-color: var(--mdc-ripple-color, #000); } body .mdc-icon-button:hover .mdc-icon-button__ripple::before, body .mdc-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple::before { opacity: 0.04; /* @alternate */ opacity: var(--mdc-ripple-hover-opacity, 0.04); } body .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before, body .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-focus-opacity, 0.12); } body .mdc-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after { transition: opacity 150ms linear; } body .mdc-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-press-opacity, 0.12); } body .mdc-icon-button.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); } body .mdc-icon-button .mdc-icon-button__ripple { pointer-events: none; z-index: 1; } body main { display: flex; flex: 1; flex-direction: column; padding: 1rem; } @keyframes mdc-linear-progress-primary-indeterminate-translate { 0% { transform: translateX(0); } 20% { animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819); transform: translateX(0); } 59.15% { animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352); transform: translateX(83.67142%); /* @alternate */ transform: translateX(var(--mdc-linear-progress-primary-half, 83.67142%)); } 100% { transform: translateX(200.611057%); /* @alternate */ transform: translateX(var(--mdc-linear-progress-primary-full, 200.611057%)); } } @keyframes mdc-linear-progress-primary-indeterminate-scale { 0% { transform: scaleX(0.08); } 36.65% { animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1); transform: scaleX(0.08); } 69.15% { animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1); transform: scaleX(0.661479); } 100% { transform: scaleX(0.08); } } @keyframes mdc-linear-progress-secondary-indeterminate-translate { 0% { animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685); transform: translateX(0); } 25% { animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712); transform: translateX(37.651913%); /* @alternate */ transform: translateX(var(--mdc-linear-progress-secondary-quarter, 37.651913%)); } 48.35% { animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026); transform: translateX(84.386165%); /* @alternate */ transform: translateX(var(--mdc-linear-progress-secondary-half, 84.386165%)); } 100% { transform: translateX(160.277782%); /* @alternate */ transform: translateX(var(--mdc-linear-progress-secondary-full, 160.277782%)); } } @keyframes mdc-linear-progress-secondary-indeterminate-scale { 0% { animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971); transform: scaleX(0.08); } 19.15% { animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315); transform: scaleX(0.457104); } 44.15% { animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179); transform: scaleX(0.72796); } 100% { transform: scaleX(0.08); } } @keyframes mdc-linear-progress-buffering { from { transform: rotate(180deg) translateX(-10px); } } @keyframes mdc-linear-progress-primary-indeterminate-translate-reverse { 0% { transform: translateX(0); } 20% { animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819); transform: translateX(0); } 59.15% { animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352); transform: translateX(-83.67142%); /* @alternate */ transform: translateX(var(--mdc-linear-progress-primary-half-neg, -83.67142%)); } 100% { transform: translateX(-200.611057%); /* @alternate */ transform: translateX(var(--mdc-linear-progress-primary-full-neg, -200.611057%)); } } @keyframes mdc-linear-progress-secondary-indeterminate-translate-reverse { 0% { animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685); transform: translateX(0); } 25% { animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712); transform: translateX(-37.651913%); /* @alternate */ transform: translateX(var(--mdc-linear-progress-secondary-quarter-neg, -37.651913%)); } 48.35% { animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026); transform: translateX(-84.386165%); /* @alternate */ transform: translateX(var(--mdc-linear-progress-secondary-half-neg, -84.386165%)); } 100% { transform: translateX(-160.277782%); /* @alternate */ transform: translateX(var(--mdc-linear-progress-secondary-full-neg, -160.277782%)); } } @keyframes mdc-linear-progress-buffering-reverse { from { transform: translateX(-10px); } } body main .mdc-linear-progress { position: relative; width: 100%; height: 4px; transform: translateZ(0); outline: 1px solid transparent; overflow: hidden; transition: opacity 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1); } body main .mdc-linear-progress__bar { position: absolute; width: 100%; height: 100%; animation: none; transform-origin: top left; transition: transform 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1); } body main .mdc-linear-progress__bar-inner { display: inline-block; position: absolute; width: 100%; animation: none; border-top: 4px solid; } body main .mdc-linear-progress__buffer { display: flex; position: absolute; width: 100%; height: 100%; } body main .mdc-linear-progress__buffer-dots { background-repeat: repeat-x; background-size: 10px 4px; flex: auto; transform: rotate(180deg); animation: mdc-linear-progress-buffering 250ms infinite linear; } body main .mdc-linear-progress__buffer-bar { flex: 0 1 100%; transition: flex-basis 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1); } body main .mdc-linear-progress__primary-bar { transform: scaleX(0); } body main .mdc-linear-progress__secondary-bar { display: none; } body main .mdc-linear-progress--indeterminate .mdc-linear-progress__bar { transition: none; } body main .mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar { left: -145.166611%; } body main .mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar { left: -54.888891%; display: block; } body main .mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar { animation: mdc-linear-progress-primary-indeterminate-translate 2s infinite linear; } body main .mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar > .mdc-linear-progress__bar-inner { animation: mdc-linear-progress-primary-indeterminate-scale 2s infinite linear; } body main .mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar { animation: mdc-linear-progress-secondary-indeterminate-translate 2s infinite linear; } body main .mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar > .mdc-linear-progress__bar-inner { animation: mdc-linear-progress-secondary-indeterminate-scale 2s infinite linear; } [dir=rtl] body main .mdc-linear-progress, body main .mdc-linear-progress[dir=rtl] { /*rtl:begin:ignore*/ /*rtl:end:ignore*/ } [dir=rtl] body main .mdc-linear-progress:not([dir=ltr]) .mdc-linear-progress__bar, body main .mdc-linear-progress[dir=rtl]:not([dir=ltr]) .mdc-linear-progress__bar { /* @noflip */ /*rtl:ignore*/ right: 0; /* @noflip */ /*rtl:ignore*/ -webkit-transform-origin: center right; /* @noflip */ /*rtl:ignore*/ transform-origin: center right; } [dir=rtl] body main .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar, body main .mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar { animation-name: mdc-linear-progress-primary-indeterminate-translate-reverse; } [dir=rtl] body main .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar, body main .mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar { animation-name: mdc-linear-progress-secondary-indeterminate-translate-reverse; } [dir=rtl] body main .mdc-linear-progress:not([dir=ltr]) .mdc-linear-progress__buffer-dots, body main .mdc-linear-progress[dir=rtl]:not([dir=ltr]) .mdc-linear-progress__buffer-dots { animation: mdc-linear-progress-buffering-reverse 250ms infinite linear; transform: rotate(0); } [dir=rtl] body main .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar, body main .mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar { /* @noflip */ /*rtl:ignore*/ right: -145.166611%; /* @noflip */ /*rtl:ignore*/ left: auto; } [dir=rtl] body main .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar, body main .mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar { /* @noflip */ /*rtl:ignore*/ right: -54.888891%; /* @noflip */ /*rtl:ignore*/ left: auto; } body main .mdc-linear-progress--closed { opacity: 0; } body main .mdc-linear-progress--closed-animation-off .mdc-linear-progress__buffer-dots { animation: none; } body main .mdc-linear-progress--closed-animation-off.mdc-linear-progress--indeterminate .mdc-linear-progress__bar, body main .mdc-linear-progress--closed-animation-off.mdc-linear-progress--indeterminate .mdc-linear-progress__bar .mdc-linear-progress__bar-inner { animation: none; } .mdc-linear-progress__bar-inner { border-color: #ff6e40; /* @alternate */ border-color: var(--mdc-theme-primary, #ff6e40); } .mdc-linear-progress__buffer-dots { background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e6e6e6'/%3E%3C/svg%3E"); } .mdc-linear-progress__buffer-bar { background-color: #e6e6e6; } body main header ul { align-content: center; display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; } body main header ul li { margin: 0 0.25em; } body main header ul li button.active-set:not(:disabled) { background-color: #263238; } body main header ul li button.active-set:not(:disabled) { color: white; /* @alternate */ color: var(--mdc-theme-text-primary-on-dark, white); } body main header ul li button.active-set .mdc-button__ripple::before, body main header ul li button.active-set .mdc-button__ripple::after { background-color: white; /* @alternate */ background-color: var(--mdc-ripple-color, var(--mdc-theme-text-primary-on-dark, white)); } body main header ul li button.active-set:hover .mdc-button__ripple::before, body main header ul li button.active-set.mdc-ripple-surface--hover .mdc-button__ripple::before { opacity: 0.08; /* @alternate */ opacity: var(--mdc-ripple-hover-opacity, 0.08); } body main header ul li button.active-set.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, body main header ul li button.active-set:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { transition-duration: 75ms; opacity: 0.24; /* @alternate */ opacity: var(--mdc-ripple-focus-opacity, 0.24); } body main header ul li button.active-set:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { transition: opacity 150ms linear; } body main header ul li button.active-set:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { transition-duration: 75ms; opacity: 0.24; /* @alternate */ opacity: var(--mdc-ripple-press-opacity, 0.24); } body main header ul li button.active-set.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); } body main article { display: flex; flex: 1; text-align: center; } body main article #play_space { margin: 2em auto; position: relative; } body main article #play_space .cel-image { visibility: hidden; position: absolute; } body main .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } body main .visually-hidden:focus + label { outline: thin dotted; } body main .visually-hidden:focus-within + label { outline: thin dotted; } body footer { background-color: #ff6e40; font-size: smaller; text-align: center; }