/* * MDC varibles * must before import */ /* font color */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } .mdc-floating-label { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1rem; line-height: 1.75rem; font-weight: 400; letter-spacing: 0.00937em; text-decoration: inherit; text-transform: inherit; position: absolute; /* @noflip */ left: 0; /* @noflip */ -webkit-transform-origin: left top; transform-origin: left top; -webkit-transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1); /* @alternate */ line-height: 1.15rem; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: text; overflow: hidden; will-change: transform; } [dir="rtl"] .mdc-floating-label, .mdc-floating-label[dir="rtl"] { /* @noflip */ right: 0; /* @noflip */ left: auto; /* @noflip */ -webkit-transform-origin: right top; transform-origin: right top; /* @noflip */ text-align: right; } .mdc-floating-label--float-above { cursor: auto; } .mdc-floating-label--float-above { -webkit-transform: translateY(-50%) scale(0.75); transform: translateY(-50%) scale(0.75); } .mdc-floating-label--shake { -webkit-animation: mdc-floating-label-shake-float-above-standard 250ms 1; animation: mdc-floating-label-shake-float-above-standard 250ms 1; } @-webkit-keyframes mdc-floating-label-shake-float-above-standard { 0% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75); transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 0%)) translateY(-50%) scale(0.75); transform: translateX(calc(4% - 0%)) translateY(-50%) scale(0.75); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 0%)) translateY(-50%) scale(0.75); transform: translateX(calc(-4% - 0%)) translateY(-50%) scale(0.75); } 100% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75); transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75); } } @keyframes mdc-floating-label-shake-float-above-standard { 0% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75); transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 0%)) translateY(-50%) scale(0.75); transform: translateX(calc(4% - 0%)) translateY(-50%) scale(0.75); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 0%)) translateY(-50%) scale(0.75); transform: translateX(calc(-4% - 0%)) translateY(-50%) scale(0.75); } 100% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75); transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75); } } .mdc-line-ripple { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; z-index: 2; } .mdc-line-ripple--active { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; } .mdc-line-ripple--deactivating { opacity: 0; } .mdc-notched-outline { display: -webkit-box; display: flex; position: absolute; right: 0; left: 0; box-sizing: border-box; width: 100%; max-width: 100%; height: 100%; /* @noflip */ text-align: left; pointer-events: none; } [dir="rtl"] .mdc-notched-outline, .mdc-notched-outline[dir="rtl"] { /* @noflip */ text-align: right; } .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing { box-sizing: border-box; height: 100%; -webkit-transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1); border-top: 1px solid; border-bottom: 1px solid; pointer-events: none; } .mdc-notched-outline__leading { /* @noflip */ border-left: 1px solid; /* @noflip */ border-right: none; width: 12px; } [dir="rtl"] .mdc-notched-outline__leading, .mdc-notched-outline__leading[dir="rtl"] { /* @noflip */ border-left: none; /* @noflip */ border-right: 1px solid; } .mdc-notched-outline__trailing { /* @noflip */ border-left: none; /* @noflip */ border-right: 1px solid; -webkit-box-flex: 1; flex-grow: 1; } [dir="rtl"] .mdc-notched-outline__trailing, .mdc-notched-outline__trailing[dir="rtl"] { /* @noflip */ border-left: 1px solid; /* @noflip */ border-right: none; } .mdc-notched-outline__notch { -webkit-box-flex: 0; flex: 0 0 auto; width: auto; max-width: calc(100% - 12px * 2); } .mdc-notched-outline .mdc-floating-label { display: inline-block; position: relative; top: 17px; bottom: auto; max-width: 100%; } .mdc-notched-outline .mdc-floating-label--float-above { text-overflow: clip; } .mdc-notched-outline--upgraded .mdc-floating-label--float-above { max-width: calc(100% / .75); } .mdc-notched-outline--notched .mdc-notched-outline__notch { /* @noflip */ padding-left: 0; /* @noflip */ padding-right: 8px; border-top: none; } [dir="rtl"] .mdc-notched-outline--notched .mdc-notched-outline__notch, .mdc-notched-outline--notched .mdc-notched-outline__notch[dir="rtl"] { /* @noflip */ padding-left: 8px; /* @noflip */ padding-right: 0; } .mdc-notched-outline--no-label .mdc-notched-outline__notch { padding: 0; } @-webkit-keyframes mdc-ripple-fg-radius-in { from { -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); } to { -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } } @keyframes mdc-ripple-fg-radius-in { from { -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); } to { -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } } @-webkit-keyframes mdc-ripple-fg-opacity-in { from { -webkit-animation-timing-function: linear; animation-timing-function: linear; opacity: 0; } to { opacity: var(--mdc-ripple-fg-opacity, 0); } } @keyframes mdc-ripple-fg-opacity-in { from { -webkit-animation-timing-function: linear; animation-timing-function: linear; opacity: 0; } to { opacity: var(--mdc-ripple-fg-opacity, 0); } } @-webkit-keyframes mdc-ripple-fg-opacity-out { from { -webkit-animation-timing-function: linear; animation-timing-function: linear; opacity: var(--mdc-ripple-fg-opacity, 0); } to { opacity: 0; } } @keyframes mdc-ripple-fg-opacity-out { from { -webkit-animation-timing-function: linear; animation-timing-function: linear; opacity: var(--mdc-ripple-fg-opacity, 0); } to { opacity: 0; } } .mdc-ripple-surface--test-edge-var-bug { --mdc-ripple-surface-test-edge-var: 1px solid #000; visibility: hidden; } .mdc-ripple-surface--test-edge-var-bug::before { border: var(--mdc-ripple-surface-test-edge-var); } .mdc-text-field-helper-text { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 0.75rem; line-height: 1.25rem; font-weight: 400; letter-spacing: 0.03333em; text-decoration: inherit; text-transform: inherit; display: block; margin-top: 0; /* @alternate */ line-height: normal; margin: 0; -webkit-transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; will-change: opacity; } .mdc-text-field-helper-text::before { display: inline-block; width: 0; height: 16px; content: ""; vertical-align: 0; } .mdc-text-field-helper-text--persistent { -webkit-transition: none; transition: none; opacity: 1; will-change: initial; } .mdc-text-field-character-counter { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 0.75rem; line-height: 1.25rem; font-weight: 400; letter-spacing: 0.03333em; text-decoration: inherit; text-transform: inherit; display: block; margin-top: 0; /* @alternate */ line-height: normal; /* @noflip */ margin-left: auto; /* @noflip */ margin-right: 0; /* @noflip */ padding-left: 16px; /* @noflip */ padding-right: 0; white-space: nowrap; } .mdc-text-field-character-counter::before { display: inline-block; width: 0; height: 16px; content: ""; vertical-align: 0; } [dir="rtl"] .mdc-text-field-character-counter, .mdc-text-field-character-counter[dir="rtl"] { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: auto; } [dir="rtl"] .mdc-text-field-character-counter, .mdc-text-field-character-counter[dir="rtl"] { /* @noflip */ padding-left: 0; /* @noflip */ padding-right: 16px; } .mdc-text-field--with-leading-icon .mdc-text-field__icon, .mdc-text-field--with-trailing-icon .mdc-text-field__icon { position: absolute; bottom: 16px; cursor: pointer; } .mdc-text-field__icon:not([tabindex]), .mdc-text-field__icon[tabindex="-1"] { cursor: default; pointer-events: none; } .mdc-text-field { --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); border-radius: 4px 4px 0 0; display: -webkit-inline-box; display: inline-flex; position: relative; box-sizing: border-box; height: 56px; overflow: hidden; /* @alternate */ will-change: opacity, transform, color; } .mdc-text-field::before, .mdc-text-field::after { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; content: ""; } .mdc-text-field::before { -webkit-transition: opacity 15ms linear, background-color 15ms linear; transition: opacity 15ms linear, background-color 15ms linear; z-index: 1; } .mdc-text-field.mdc-ripple-upgraded::before { -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1)); transform: scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-text-field.mdc-ripple-upgraded::after { top: 0; /* @noflip */ left: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: center center; transform-origin: center center; } .mdc-text-field.mdc-ripple-upgraded--unbounded::after { top: var(--mdc-ripple-top, 0); /* @noflip */ left: var(--mdc-ripple-left, 0); } .mdc-text-field.mdc-ripple-upgraded--foreground-activation::after { -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; } .mdc-text-field.mdc-ripple-upgraded--foreground-deactivation::after { -webkit-animation: mdc-ripple-fg-opacity-out 150ms; animation: mdc-ripple-fg-opacity-out 150ms; -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-text-field::before, .mdc-text-field::after { background-color: rgba(0, 0, 0, 0.87); } .mdc-text-field:hover::before { opacity: 0.04; } .mdc-text-field:not(.mdc-ripple-upgraded):focus::before, .mdc-text-field.mdc-ripple-upgraded--background-focused::before { -webkit-transition-duration: 75ms; transition-duration: 75ms; opacity: 0.12; } .mdc-text-field::before, .mdc-text-field::after { top: calc(50% - 100%); /* @noflip */ left: calc(50% - 100%); width: 200%; height: 200%; } .mdc-text-field.mdc-ripple-upgraded::after { width: var(--mdc-ripple-fg-size, 100%); height: var(--mdc-ripple-fg-size, 100%); } .mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label { color: rgba(0, 0, 0, 0.6); } .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input { color: rgba(0, 0, 0, 0.87); } .mdc-text-field .mdc-text-field__input { caret-color: #fcb8ab; /* @alternate */ caret-color: var(--mdc-theme-primary, #fcb8ab); } .mdc-text-field:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mdc-text-field__input { border-bottom-color: rgba(0, 0, 0, 0.42); } .mdc-text-field:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mdc-text-field__input:hover { border-bottom-color: rgba(0, 0, 0, 0.87); } .mdc-text-field .mdc-line-ripple { background-color: #fcb8ab; /* @alternate */ background-color: var(--mdc-theme-primary, #fcb8ab); } .mdc-text-field:not(.mdc-text-field--disabled):not(.mdc-text-field--textarea) { border-bottom-color: rgba(0, 0, 0, 0.12); } .mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text { color: rgba(0, 0, 0, 0.6); } .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter, .mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-character-counter { color: rgba(0, 0, 0, 0.6); } .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon { color: rgba(0, 0, 0, 0.54); } .mdc-text-field:not(.mdc-text-field--disabled) { background-color: whitesmoke; } .mdc-text-field .mdc-floating-label { /* @noflip */ left: 16px; /* @noflip */ right: initial; top: 18px; pointer-events: none; } [dir="rtl"] .mdc-text-field .mdc-floating-label, .mdc-text-field .mdc-floating-label[dir="rtl"] { /* @noflip */ left: initial; /* @noflip */ right: 16px; } .mdc-text-field--textarea .mdc-floating-label { /* @noflip */ left: 4px; /* @noflip */ right: initial; } [dir="rtl"] .mdc-text-field--textarea .mdc-floating-label, .mdc-text-field--textarea .mdc-floating-label[dir="rtl"] { /* @noflip */ left: initial; /* @noflip */ right: 4px; } .mdc-text-field--outlined .mdc-floating-label { /* @noflip */ left: 4px; /* @noflip */ right: initial; top: 17px; } [dir="rtl"] .mdc-text-field--outlined .mdc-floating-label, .mdc-text-field--outlined .mdc-floating-label[dir="rtl"] { /* @noflip */ left: initial; /* @noflip */ right: 4px; } .mdc-text-field--outlined--with-leading-icon .mdc-floating-label { /* @noflip */ left: 36px; /* @noflip */ right: initial; } [dir="rtl"] .mdc-text-field--outlined--with-leading-icon .mdc-floating-label, .mdc-text-field--outlined--with-leading-icon .mdc-floating-label[dir="rtl"] { /* @noflip */ left: initial; /* @noflip */ right: 36px; } .mdc-text-field--outlined--with-leading-icon .mdc-floating-label--float-above { /* @noflip */ left: 40px; /* @noflip */ right: initial; } [dir="rtl"] .mdc-text-field--outlined--with-leading-icon .mdc-floating-label--float-above, .mdc-text-field--outlined--with-leading-icon .mdc-floating-label--float-above[dir="rtl"] { /* @noflip */ left: initial; /* @noflip */ right: 40px; } .mdc-text-field__input { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1rem; line-height: 1.75rem; font-weight: 400; letter-spacing: 0.00937em; text-decoration: inherit; text-transform: inherit; align-self: flex-end; box-sizing: border-box; width: 100%; height: 100%; padding: 20px 16px 6px; -webkit-transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); border: none; border-bottom: 1px solid; border-radius: 0; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .mdc-text-field__input::-webkit-input-placeholder { -webkit-transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; color: rgba(0, 0, 0, 0.54); } .mdc-text-field__input::-moz-placeholder { -moz-transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; color: rgba(0, 0, 0, 0.54); } .mdc-text-field__input:-ms-input-placeholder { -ms-transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; color: rgba(0, 0, 0, 0.54); } .mdc-text-field__input::-ms-input-placeholder { -ms-transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; color: rgba(0, 0, 0, 0.54); } .mdc-text-field__input::placeholder { -webkit-transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; color: rgba(0, 0, 0, 0.54); } .mdc-text-field__input:-ms-input-placeholder { color: rgba(0, 0, 0, 0.54) !important; } .mdc-text-field--fullwidth .mdc-text-field__input::-webkit-input-placeholder, .mdc-text-field--no-label .mdc-text-field__input::-webkit-input-placeholder, .mdc-text-field--focused .mdc-text-field__input::-webkit-input-placeholder { -webkit-transition-delay: 40ms; transition-delay: 40ms; -webkit-transition-duration: 110ms; transition-duration: 110ms; opacity: 1; } .mdc-text-field--fullwidth .mdc-text-field__input::-moz-placeholder, .mdc-text-field--no-label .mdc-text-field__input::-moz-placeholder, .mdc-text-field--focused .mdc-text-field__input::-moz-placeholder { transition-delay: 40ms; transition-duration: 110ms; opacity: 1; } .mdc-text-field--fullwidth .mdc-text-field__input:-ms-input-placeholder, .mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder, .mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder { transition-delay: 40ms; transition-duration: 110ms; opacity: 1; } .mdc-text-field--fullwidth .mdc-text-field__input::-ms-input-placeholder, .mdc-text-field--no-label .mdc-text-field__input::-ms-input-placeholder, .mdc-text-field--focused .mdc-text-field__input::-ms-input-placeholder { transition-delay: 40ms; transition-duration: 110ms; opacity: 1; } .mdc-text-field--fullwidth .mdc-text-field__input::placeholder, .mdc-text-field--no-label .mdc-text-field__input::placeholder, .mdc-text-field--focused .mdc-text-field__input::placeholder { -webkit-transition-delay: 40ms; transition-delay: 40ms; -webkit-transition-duration: 110ms; transition-duration: 110ms; opacity: 1; } .mdc-text-field__input:focus { outline: none; } .mdc-text-field__input:invalid { box-shadow: none; } .mdc-text-field__input:-webkit-autofill { z-index: auto !important; } .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mdc-text-field__input { padding-top: 16px; padding-bottom: 16px; } .mdc-text-field__input:-webkit-autofill + .mdc-floating-label { -webkit-transform: translateY(-50%) scale(0.75); transform: translateY(-50%) scale(0.75); cursor: auto; } .mdc-text-field--outlined { border: none; overflow: visible; } .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing { border-color: rgba(0, 0, 0, 0.38); } .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__input:hover ~ .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__input:hover ~ .mdc-notched-outline .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__input:hover ~ .mdc-notched-outline .mdc-notched-outline__trailing, .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__icon:hover ~ .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__icon:hover ~ .mdc-notched-outline .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__icon:hover ~ .mdc-notched-outline .mdc-notched-outline__trailing { border-color: rgba(0, 0, 0, 0.87); } .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing { border-color: #fcb8ab; /* @alternate */ border-color: var(--mdc-theme-primary, #fcb8ab); } .mdc-text-field--outlined .mdc-floating-label--shake { -webkit-animation: mdc-floating-label-shake-float-above-text-field-outlined 250ms 1; animation: mdc-floating-label-shake-float-above-text-field-outlined 250ms 1; } .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading { /* @noflip */ border-radius: 4px 0 0 4px; } [dir="rtl"] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir="rtl"] { /* @noflip */ border-radius: 0 4px 4px 0; } .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing { /* @noflip */ border-radius: 0 4px 4px 0; } [dir="rtl"] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing, .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir="rtl"] { /* @noflip */ border-radius: 4px 0 0 4px; } .mdc-text-field--outlined .mdc-floating-label--float-above { -webkit-transform: translateY(-144%) scale(1); transform: translateY(-144%) scale(1); } .mdc-text-field--outlined .mdc-floating-label--float-above { font-size: 0.75rem; } .mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above { -webkit-transform: translateY(-130%) scale(0.75); transform: translateY(-130%) scale(0.75); } .mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above { font-size: 1rem; } .mdc-text-field--outlined::before, .mdc-text-field--outlined::after { content: none; } .mdc-text-field--outlined:not(.mdc-text-field--disabled) { background-color: transparent; } .mdc-text-field--outlined .mdc-text-field__input { display: -webkit-box; display: flex; padding: 12px 16px 14px; border: none !important; background-color: transparent; z-index: 1; } .mdc-text-field--outlined .mdc-text-field__icon { z-index: 2; } .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__leading, .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__notch, .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__trailing { border-width: 2px; } .mdc-text-field--outlined.mdc-text-field--disabled { background-color: transparent; } .mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline__leading, .mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline__notch, .mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline__trailing { border-color: rgba(0, 0, 0, 0.06); } .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input { border-bottom: none; } .mdc-text-field--outlined.mdc-text-field--dense { height: 48px; } .mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label--float-above { -webkit-transform: translateY(-134%) scale(1); transform: translateY(-134%) scale(1); } .mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label--float-above { font-size: 0.8rem; } .mdc-text-field--outlined.mdc-text-field--dense.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--outlined.mdc-text-field--dense .mdc-notched-outline--upgraded .mdc-floating-label--float-above { -webkit-transform: translateY(-120%) scale(0.8); transform: translateY(-120%) scale(0.8); } .mdc-text-field--outlined.mdc-text-field--dense.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--outlined.mdc-text-field--dense .mdc-notched-outline--upgraded .mdc-floating-label--float-above { font-size: 1rem; } .mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label--shake { -webkit-animation: mdc-floating-label-shake-float-above-text-field-outlined-dense 250ms 1; animation: mdc-floating-label-shake-float-above-text-field-outlined-dense 250ms 1; } .mdc-text-field--outlined.mdc-text-field--dense .mdc-text-field__input { padding: 12px 12px 7px; } .mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label { top: 14px; } .mdc-text-field--outlined.mdc-text-field--dense .mdc-text-field__icon { top: 12px; } .mdc-text-field--with-leading-icon .mdc-text-field__icon { /* @noflip */ left: 16px; /* @noflip */ right: initial; } [dir="rtl"] .mdc-text-field--with-leading-icon .mdc-text-field__icon, .mdc-text-field--with-leading-icon .mdc-text-field__icon[dir="rtl"] { /* @noflip */ left: initial; /* @noflip */ right: 16px; } .mdc-text-field--with-leading-icon .mdc-text-field__input { /* @noflip */ padding-left: 48px; /* @noflip */ padding-right: 16px; } [dir="rtl"] .mdc-text-field--with-leading-icon .mdc-text-field__input, .mdc-text-field--with-leading-icon .mdc-text-field__input[dir="rtl"] { /* @noflip */ padding-left: 16px; /* @noflip */ padding-right: 48px; } .mdc-text-field--with-leading-icon .mdc-floating-label { /* @noflip */ left: 48px; /* @noflip */ right: initial; } [dir="rtl"] .mdc-text-field--with-leading-icon .mdc-floating-label, .mdc-text-field--with-leading-icon .mdc-floating-label[dir="rtl"] { /* @noflip */ left: initial; /* @noflip */ right: 48px; } .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-text-field__icon { /* @noflip */ left: 16px; /* @noflip */ right: initial; } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-text-field__icon, .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-text-field__icon[dir="rtl"] { /* @noflip */ left: initial; /* @noflip */ right: 16px; } .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-text-field__input { /* @noflip */ padding-left: 48px; /* @noflip */ padding-right: 16px; } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-text-field__input, .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-text-field__input[dir="rtl"] { /* @noflip */ padding-left: 16px; /* @noflip */ padding-right: 48px; } .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above { -webkit-transform: translateY(-144%) translateX(-32px) scale(1); transform: translateY(-144%) translateX(-32px) scale(1); } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above, .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above[dir="rtl"] { -webkit-transform: translateY(-144%) translateX(32px) scale(1); transform: translateY(-144%) translateX(32px) scale(1); } .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above { font-size: 0.75rem; } .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above { -webkit-transform: translateY(-130%) translateX(-32px) scale(0.75); transform: translateY(-130%) translateX(-32px) scale(0.75); } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir="rtl"], [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir="rtl"] { -webkit-transform: translateY(-130%) translateX(32px) scale(0.75); transform: translateY(-130%) translateX(32px) scale(0.75); } .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above { font-size: 1rem; } .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake { -webkit-animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1; animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1; } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake, .mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir="rtl"] .mdc-floating-label--shake { -webkit-animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl 250ms 1; animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl 250ms 1; } .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label { /* @noflip */ left: 36px; /* @noflip */ right: initial; } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label, .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label[dir="rtl"] { /* @noflip */ left: initial; /* @noflip */ right: 36px; } .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label--float-above { -webkit-transform: translateY(-134%) translateX(-21px) scale(1); transform: translateY(-134%) translateX(-21px) scale(1); } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label--float-above, .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label--float-above[dir="rtl"] { -webkit-transform: translateY(-134%) translateX(21px) scale(1); transform: translateY(-134%) translateX(21px) scale(1); } .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label--float-above { font-size: 0.8rem; } .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense .mdc-notched-outline--upgraded .mdc-floating-label--float-above { -webkit-transform: translateY(-120%) translateX(-21px) scale(0.8); transform: translateY(-120%) translateX(-21px) scale(0.8); } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir="rtl"], [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense .mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir="rtl"] { -webkit-transform: translateY(-120%) translateX(21px) scale(0.8); transform: translateY(-120%) translateX(21px) scale(0.8); } .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense .mdc-notched-outline--upgraded .mdc-floating-label--float-above { font-size: 1rem; } .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label--shake { -webkit-animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-dense 250ms 1; animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-dense 250ms 1; } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label--shake, .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense[dir="rtl"] .mdc-floating-label--shake { -webkit-animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-dense-rtl 250ms 1; animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-dense-rtl 250ms 1; } .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label { /* @noflip */ left: 32px; /* @noflip */ right: initial; } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label, .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense .mdc-floating-label[dir="rtl"] { /* @noflip */ left: initial; /* @noflip */ right: 32px; } .mdc-text-field--with-trailing-icon .mdc-text-field__icon { /* @noflip */ left: initial; /* @noflip */ right: 12px; } [dir="rtl"] .mdc-text-field--with-trailing-icon .mdc-text-field__icon, .mdc-text-field--with-trailing-icon .mdc-text-field__icon[dir="rtl"] { /* @noflip */ left: 12px; /* @noflip */ right: initial; } .mdc-text-field--with-trailing-icon .mdc-text-field__input { /* @noflip */ padding-left: 16px; /* @noflip */ padding-right: 48px; } [dir="rtl"] .mdc-text-field--with-trailing-icon .mdc-text-field__input, .mdc-text-field--with-trailing-icon .mdc-text-field__input[dir="rtl"] { /* @noflip */ padding-left: 48px; /* @noflip */ padding-right: 16px; } .mdc-text-field--with-trailing-icon.mdc-text-field--outlined .mdc-text-field__icon { /* @noflip */ left: initial; /* @noflip */ right: 16px; } [dir="rtl"] .mdc-text-field--with-trailing-icon.mdc-text-field--outlined .mdc-text-field__icon, .mdc-text-field--with-trailing-icon.mdc-text-field--outlined .mdc-text-field__icon[dir="rtl"] { /* @noflip */ left: 16px; /* @noflip */ right: initial; } .mdc-text-field--with-trailing-icon.mdc-text-field--outlined .mdc-text-field__input { /* @noflip */ padding-left: 16px; /* @noflip */ padding-right: 48px; } [dir="rtl"] .mdc-text-field--with-trailing-icon.mdc-text-field--outlined .mdc-text-field__input, .mdc-text-field--with-trailing-icon.mdc-text-field--outlined .mdc-text-field__input[dir="rtl"] { /* @noflip */ padding-left: 48px; /* @noflip */ padding-right: 16px; } .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon .mdc-text-field__icon { /* @noflip */ left: 16px; /* @noflip */ right: auto; } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon .mdc-text-field__icon, .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon .mdc-text-field__icon[dir="rtl"] { /* @noflip */ left: auto; /* @noflip */ right: 16px; } .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon .mdc-text-field__icon ~ .mdc-text-field__icon { /* @noflip */ right: 12px; /* @noflip */ left: auto; } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon .mdc-text-field__icon ~ .mdc-text-field__icon, .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon .mdc-text-field__icon ~ .mdc-text-field__icon[dir="rtl"] { /* @noflip */ right: auto; /* @noflip */ left: 12px; } .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon .mdc-text-field__input { /* @noflip */ padding-left: 48px; /* @noflip */ padding-right: 48px; } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon .mdc-text-field__input, .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon .mdc-text-field__input[dir="rtl"] { /* @noflip */ padding-left: 48px; /* @noflip */ padding-right: 48px; } .mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__icon, .mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__icon { bottom: 16px; -webkit-transform: scale(0.8); transform: scale(0.8); } .mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__icon { /* @noflip */ left: 12px; /* @noflip */ right: initial; } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__icon, .mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__icon[dir="rtl"] { /* @noflip */ left: initial; /* @noflip */ right: 12px; } .mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__input { /* @noflip */ padding-left: 44px; /* @noflip */ padding-right: 16px; } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__input, .mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__input[dir="rtl"] { /* @noflip */ padding-left: 16px; /* @noflip */ padding-right: 44px; } .mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-floating-label { /* @noflip */ left: 44px; /* @noflip */ right: initial; } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-floating-label, .mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-floating-label[dir="rtl"] { /* @noflip */ left: initial; /* @noflip */ right: 44px; } .mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__icon { /* @noflip */ left: initial; /* @noflip */ right: 12px; } [dir="rtl"] .mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__icon, .mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__icon[dir="rtl"] { /* @noflip */ left: 12px; /* @noflip */ right: initial; } .mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__input { /* @noflip */ padding-left: 16px; /* @noflip */ padding-right: 44px; } [dir="rtl"] .mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__input, .mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__input[dir="rtl"] { /* @noflip */ padding-left: 44px; /* @noflip */ padding-right: 16px; } .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__icon { /* @noflip */ left: 12px; /* @noflip */ right: auto; } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__icon, .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__icon[dir="rtl"] { /* @noflip */ left: auto; /* @noflip */ right: 12px; } .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__icon ~ .mdc-text-field__icon { /* @noflip */ right: 12px; /* @noflip */ left: auto; } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__icon ~ .mdc-text-field__icon, .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__icon ~ .mdc-text-field__icon[dir="rtl"] { /* @noflip */ right: auto; /* @noflip */ left: 12px; } .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__input { /* @noflip */ padding-left: 44px; /* @noflip */ padding-right: 44px; } [dir="rtl"] .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__input, .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__input[dir="rtl"] { /* @noflip */ padding-left: 44px; /* @noflip */ padding-right: 44px; } .mdc-text-field--dense .mdc-floating-label--float-above { -webkit-transform: translateY(-70%) scale(0.8); transform: translateY(-70%) scale(0.8); } .mdc-text-field--dense .mdc-floating-label--shake { -webkit-animation: mdc-floating-label-shake-float-above-text-field-dense 250ms 1; animation: mdc-floating-label-shake-float-above-text-field-dense 250ms 1; } .mdc-text-field--dense .mdc-text-field__input { padding: 12px 12px 0; } .mdc-text-field--dense .mdc-floating-label { font-size: .813rem; } .mdc-text-field--dense .mdc-floating-label--float-above { font-size: .813rem; } .mdc-text-field__input:required ~ .mdc-floating-label::after, .mdc-text-field__input:required ~ .mdc-notched-outline .mdc-floating-label::after { margin-left: 1px; content: "*"; } .mdc-text-field--textarea { display: -webkit-inline-box; display: inline-flex; width: auto; height: auto; -webkit-transition: none; transition: none; overflow: visible; } .mdc-text-field--textarea:not(.mdc-text-field--disabled) .mdc-notched-outline__leading, .mdc-text-field--textarea:not(.mdc-text-field--disabled) .mdc-notched-outline__notch, .mdc-text-field--textarea:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing { border-color: rgba(0, 0, 0, 0.38); } .mdc-text-field--textarea:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__input:hover ~ .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--textarea:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__input:hover ~ .mdc-notched-outline .mdc-notched-outline__notch, .mdc-text-field--textarea:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__input:hover ~ .mdc-notched-outline .mdc-notched-outline__trailing, .mdc-text-field--textarea:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__icon:hover ~ .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--textarea:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__icon:hover ~ .mdc-notched-outline .mdc-notched-outline__notch, .mdc-text-field--textarea:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__icon:hover ~ .mdc-notched-outline .mdc-notched-outline__trailing { border-color: rgba(0, 0, 0, 0.87); } .mdc-text-field--textarea:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading, .mdc-text-field--textarea:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch, .mdc-text-field--textarea:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing { border-color: #fcb8ab; /* @alternate */ border-color: var(--mdc-theme-primary, #fcb8ab); } .mdc-text-field--textarea .mdc-floating-label--shake { -webkit-animation: mdc-floating-label-shake-float-above-text-field-outlined 250ms 1; animation: mdc-floating-label-shake-float-above-text-field-outlined 250ms 1; } .mdc-text-field--textarea .mdc-notched-outline .mdc-notched-outline__leading { /* @noflip */ border-radius: 4px 0 0 4px; } [dir="rtl"] .mdc-text-field--textarea .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--textarea .mdc-notched-outline .mdc-notched-outline__leading[dir="rtl"] { /* @noflip */ border-radius: 0 4px 4px 0; } .mdc-text-field--textarea .mdc-notched-outline .mdc-notched-outline__trailing { /* @noflip */ border-radius: 0 4px 4px 0; } [dir="rtl"] .mdc-text-field--textarea .mdc-notched-outline .mdc-notched-outline__trailing, .mdc-text-field--textarea .mdc-notched-outline .mdc-notched-outline__trailing[dir="rtl"] { /* @noflip */ border-radius: 4px 0 0 4px; } .mdc-text-field--textarea::before, .mdc-text-field--textarea::after { content: none; } .mdc-text-field--textarea:not(.mdc-text-field--disabled) { background-color: transparent; } .mdc-text-field--textarea .mdc-floating-label--float-above { -webkit-transform: translateY(-144%) scale(1); transform: translateY(-144%) scale(1); } .mdc-text-field--textarea .mdc-floating-label--float-above { font-size: 0.75rem; } .mdc-text-field--textarea.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--textarea .mdc-notched-outline--upgraded .mdc-floating-label--float-above { -webkit-transform: translateY(-130%) scale(0.75); transform: translateY(-130%) scale(0.75); } .mdc-text-field--textarea.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--textarea .mdc-notched-outline--upgraded .mdc-floating-label--float-above { font-size: 1rem; } .mdc-text-field--textarea .mdc-text-field-character-counter { /* @noflip */ left: initial; /* @noflip */ right: 16px; position: absolute; bottom: 13px; } [dir="rtl"] .mdc-text-field--textarea .mdc-text-field-character-counter, .mdc-text-field--textarea .mdc-text-field-character-counter[dir="rtl"] { /* @noflip */ left: 16px; /* @noflip */ right: initial; } .mdc-text-field--textarea .mdc-text-field__input { align-self: auto; box-sizing: border-box; height: auto; margin: 8px 1px 1px 0; padding: 0 16px 16px; border: none; } .mdc-text-field--textarea .mdc-text-field-character-counter + .mdc-text-field__input { margin-bottom: 28px; padding-bottom: 0; } .mdc-text-field--textarea .mdc-floating-label { top: 17px; bottom: auto; width: auto; pointer-events: none; } .mdc-text-field--textarea.mdc-text-field--focused .mdc-notched-outline__leading, .mdc-text-field--textarea.mdc-text-field--focused .mdc-notched-outline__notch, .mdc-text-field--textarea.mdc-text-field--focused .mdc-notched-outline__trailing { border-width: 2px; } .mdc-text-field--fullwidth { width: 100%; } .mdc-text-field--fullwidth:not(.mdc-text-field--textarea) { display: block; } .mdc-text-field--fullwidth:not(.mdc-text-field--textarea)::before, .mdc-text-field--fullwidth:not(.mdc-text-field--textarea)::after { content: none; } .mdc-text-field--fullwidth:not(.mdc-text-field--textarea):not(.mdc-text-field--disabled) { background-color: transparent; } .mdc-text-field--fullwidth:not(.mdc-text-field--textarea) .mdc-text-field__input { padding: 0; } .mdc-text-field--fullwidth.mdc-text-field--textarea .mdc-text-field__input { resize: vertical; } .mdc-text-field--fullwidth.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--textarea) { border-bottom-color: #b00020; /* @alternate */ border-bottom-color: var(--mdc-theme-error, #b00020); } .mdc-text-field-helper-line { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; box-sizing: border-box; } .mdc-text-field--dense + .mdc-text-field-helper-line { margin-bottom: 4px; } .mdc-text-field + .mdc-text-field-helper-line { padding-right: 16px; padding-left: 16px; } .mdc-form-field > .mdc-text-field + label { align-self: flex-start; } .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label { color: rgba(252, 184, 171, 0.87); } .mdc-text-field--focused .mdc-text-field__input:required ~ .mdc-floating-label::after, .mdc-text-field--focused .mdc-text-field__input:required ~ .mdc-notched-outline .mdc-floating-label::after { color: rgba(252, 184, 171, 0.87); } .mdc-text-field--focused + .mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg) { opacity: 1; } .mdc-text-field--textarea.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-notched-outline__leading, .mdc-text-field--textarea.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-notched-outline__notch, .mdc-text-field--textarea.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing { border-color: #fcb8ab; /* @alternate */ border-color: var(--mdc-theme-primary, #fcb8ab); } .mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mdc-text-field__input { border-bottom-color: #b00020; /* @alternate */ border-bottom-color: var(--mdc-theme-error, #b00020); } .mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mdc-text-field__input:hover { border-bottom-color: #b00020; /* @alternate */ border-bottom-color: var(--mdc-theme-error, #b00020); } .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple { background-color: #b00020; /* @alternate */ background-color: var(--mdc-theme-error, #b00020); } .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label { color: #b00020; /* @alternate */ color: var(--mdc-theme-error, #b00020); } .mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg { color: #b00020; /* @alternate */ color: var(--mdc-theme-error, #b00020); } .mdc-text-field--invalid .mdc-text-field__input { caret-color: #b00020; /* @alternate */ caret-color: var(--mdc-theme-error, #b00020); } .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input:required ~ .mdc-floating-label::after, .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input:required ~ .mdc-notched-outline .mdc-floating-label::after { color: #b00020; /* @alternate */ color: var(--mdc-theme-error, #b00020); } .mdc-text-field--invalid.mdc-text-field--with-trailing-icon:not(.mdc-text-field--with-leading-icon):not(.mdc-text-field--disabled) .mdc-text-field__icon { color: #b00020; /* @alternate */ color: var(--mdc-theme-error, #b00020); } .mdc-text-field--invalid.mdc-text-field--with-trailing-icon.mdc-text-field--with-leading-icon:not(.mdc-text-field--disabled) .mdc-text-field__icon ~ .mdc-text-field__icon { color: #b00020; /* @alternate */ color: var(--mdc-theme-error, #b00020); } .mdc-text-field--invalid + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg { opacity: 1; } .mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading, .mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch, .mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing { border-color: #b00020; /* @alternate */ border-color: var(--mdc-theme-error, #b00020); } .mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__input:hover ~ .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__input:hover ~ .mdc-notched-outline .mdc-notched-outline__notch, .mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__input:hover ~ .mdc-notched-outline .mdc-notched-outline__trailing, .mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__icon:hover ~ .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__icon:hover ~ .mdc-notched-outline .mdc-notched-outline__notch, .mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__icon:hover ~ .mdc-notched-outline .mdc-notched-outline__trailing { border-color: #b00020; /* @alternate */ border-color: var(--mdc-theme-error, #b00020); } .mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading, .mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch, .mdc-text-field--textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing { border-color: #b00020; /* @alternate */ border-color: var(--mdc-theme-error, #b00020); } .mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading, .mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch, .mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing { border-color: #b00020; /* @alternate */ border-color: var(--mdc-theme-error, #b00020); } .mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__input:hover ~ .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__input:hover ~ .mdc-notched-outline .mdc-notched-outline__notch, .mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__input:hover ~ .mdc-notched-outline .mdc-notched-outline__trailing, .mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__icon:hover ~ .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__icon:hover ~ .mdc-notched-outline .mdc-notched-outline__notch, .mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-text-field__icon:hover ~ .mdc-notched-outline .mdc-notched-outline__trailing { border-color: #b00020; /* @alternate */ border-color: var(--mdc-theme-error, #b00020); } .mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading, .mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch, .mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing { border-color: #b00020; /* @alternate */ border-color: var(--mdc-theme-error, #b00020); } .mdc-text-field--disabled { background-color: #fafafa; border-bottom: none; pointer-events: none; } .mdc-text-field--disabled .mdc-text-field__input { border-bottom-color: rgba(0, 0, 0, 0.06); } .mdc-text-field--disabled .mdc-text-field__input { color: rgba(0, 0, 0, 0.37); } .mdc-text-field--disabled .mdc-floating-label { color: rgba(0, 0, 0, 0.37); } .mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-helper-text { color: rgba(0, 0, 0, 0.37); } .mdc-text-field--disabled .mdc-text-field-character-counter, .mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-character-counter { color: rgba(0, 0, 0, 0.37); } .mdc-text-field--disabled .mdc-text-field__icon { color: rgba(0, 0, 0, 0.3); } .mdc-text-field--disabled:not(.mdc-text-field--textarea) { border-bottom-color: rgba(0, 0, 0, 0.12); } .mdc-text-field--disabled .mdc-floating-label { cursor: default; } .mdc-text-field--textarea.mdc-text-field--disabled { background-color: transparent; /* @alternate */ background-color: #f9f9f9; } .mdc-text-field--textarea.mdc-text-field--disabled .mdc-notched-outline__leading, .mdc-text-field--textarea.mdc-text-field--disabled .mdc-notched-outline__notch, .mdc-text-field--textarea.mdc-text-field--disabled .mdc-notched-outline__trailing { border-color: rgba(0, 0, 0, 0.06); } .mdc-text-field--textarea.mdc-text-field--disabled .mdc-text-field__input { border-bottom: none; } @-webkit-keyframes mdc-floating-label-shake-float-above-text-field-dense { 0% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-70%) scale(0.8); transform: translateX(calc(0 - 0%)) translateY(-70%) scale(0.8); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 0%)) translateY(-70%) scale(0.8); transform: translateX(calc(4% - 0%)) translateY(-70%) scale(0.8); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 0%)) translateY(-70%) scale(0.8); transform: translateX(calc(-4% - 0%)) translateY(-70%) scale(0.8); } 100% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-70%) scale(0.8); transform: translateX(calc(0 - 0%)) translateY(-70%) scale(0.8); } } @keyframes mdc-floating-label-shake-float-above-text-field-dense { 0% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-70%) scale(0.8); transform: translateX(calc(0 - 0%)) translateY(-70%) scale(0.8); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 0%)) translateY(-70%) scale(0.8); transform: translateX(calc(4% - 0%)) translateY(-70%) scale(0.8); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 0%)) translateY(-70%) scale(0.8); transform: translateX(calc(-4% - 0%)) translateY(-70%) scale(0.8); } 100% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-70%) scale(0.8); transform: translateX(calc(0 - 0%)) translateY(-70%) scale(0.8); } } @-webkit-keyframes mdc-floating-label-shake-float-above-text-field-outlined { 0% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(4% - 0%)) translateY(-130%) scale(0.75); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(-4% - 0%)) translateY(-130%) scale(0.75); } 100% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); } } @keyframes mdc-floating-label-shake-float-above-text-field-outlined { 0% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(4% - 0%)) translateY(-130%) scale(0.75); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(-4% - 0%)) translateY(-130%) scale(0.75); } 100% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); } } @-webkit-keyframes mdc-floating-label-shake-float-above-text-field-outlined-dense { 0% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-120%) scale(0.8); transform: translateX(calc(0 - 0%)) translateY(-120%) scale(0.8); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 0%)) translateY(-120%) scale(0.8); transform: translateX(calc(4% - 0%)) translateY(-120%) scale(0.8); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 0%)) translateY(-120%) scale(0.8); transform: translateX(calc(-4% - 0%)) translateY(-120%) scale(0.8); } 100% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-120%) scale(0.8); transform: translateX(calc(0 - 0%)) translateY(-120%) scale(0.8); } } @keyframes mdc-floating-label-shake-float-above-text-field-outlined-dense { 0% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-120%) scale(0.8); transform: translateX(calc(0 - 0%)) translateY(-120%) scale(0.8); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 0%)) translateY(-120%) scale(0.8); transform: translateX(calc(4% - 0%)) translateY(-120%) scale(0.8); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 0%)) translateY(-120%) scale(0.8); transform: translateX(calc(-4% - 0%)) translateY(-120%) scale(0.8); } 100% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-120%) scale(0.8); transform: translateX(calc(0 - 0%)) translateY(-120%) scale(0.8); } } @-webkit-keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon { 0% { -webkit-transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(4% - 0)) translateY(-130%) scale(0.75); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(-4% - 0)) translateY(-130%) scale(0.75); } 100% { -webkit-transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); } } @keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon { 0% { -webkit-transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(4% - 0)) translateY(-130%) scale(0.75); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(-4% - 0)) translateY(-130%) scale(0.75); } 100% { -webkit-transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); } } @-webkit-keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-dense { 0% { -webkit-transform: translateX(calc(0 - 21px)) translateY(-120%) scale(0.8); transform: translateX(calc(0 - 21px)) translateY(-120%) scale(0.8); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 21px)) translateY(-120%) scale(0.8); transform: translateX(calc(4% - 21px)) translateY(-120%) scale(0.8); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 21px)) translateY(-120%) scale(0.8); transform: translateX(calc(-4% - 21px)) translateY(-120%) scale(0.8); } 100% { -webkit-transform: translateX(calc(0 - 21px)) translateY(-120%) scale(0.8); transform: translateX(calc(0 - 21px)) translateY(-120%) scale(0.8); } } @keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-dense { 0% { -webkit-transform: translateX(calc(0 - 21px)) translateY(-120%) scale(0.8); transform: translateX(calc(0 - 21px)) translateY(-120%) scale(0.8); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 21px)) translateY(-120%) scale(0.8); transform: translateX(calc(4% - 21px)) translateY(-120%) scale(0.8); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 21px)) translateY(-120%) scale(0.8); transform: translateX(calc(-4% - 21px)) translateY(-120%) scale(0.8); } 100% { -webkit-transform: translateX(calc(0 - 21px)) translateY(-120%) scale(0.8); transform: translateX(calc(0 - 21px)) translateY(-120%) scale(0.8); } } @-webkit-keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl { 0% { -webkit-transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(4% - 0)) translateY(-130%) scale(0.75); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(-4% - 0)) translateY(-130%) scale(0.75); } 100% { -webkit-transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); } } @keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl { 0% { -webkit-transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(4% - 0)) translateY(-130%) scale(0.75); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(-4% - 0)) translateY(-130%) scale(0.75); } 100% { -webkit-transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0)) translateY(-130%) scale(0.75); } } @-webkit-keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-dense-rtl { 0% { -webkit-transform: translateX(calc(0 - -21px)) translateY(-120%) scale(0.8); transform: translateX(calc(0 - -21px)) translateY(-120%) scale(0.8); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - -21px)) translateY(-120%) scale(0.8); transform: translateX(calc(4% - -21px)) translateY(-120%) scale(0.8); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - -21px)) translateY(-120%) scale(0.8); transform: translateX(calc(-4% - -21px)) translateY(-120%) scale(0.8); } 100% { -webkit-transform: translateX(calc(0 - -21px)) translateY(-120%) scale(0.8); transform: translateX(calc(0 - -21px)) translateY(-120%) scale(0.8); } } @keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-dense-rtl { 0% { -webkit-transform: translateX(calc(0 - -21px)) translateY(-120%) scale(0.8); transform: translateX(calc(0 - -21px)) translateY(-120%) scale(0.8); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - -21px)) translateY(-120%) scale(0.8); transform: translateX(calc(4% - -21px)) translateY(-120%) scale(0.8); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - -21px)) translateY(-120%) scale(0.8); transform: translateX(calc(-4% - -21px)) translateY(-120%) scale(0.8); } 100% { -webkit-transform: translateX(calc(0 - -21px)) translateY(-120%) scale(0.8); transform: translateX(calc(0 - -21px)) translateY(-120%) scale(0.8); } } @-webkit-keyframes mdc-floating-label-shake-float-above-textarea { 0% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(4% - 0%)) translateY(-130%) scale(0.75); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(-4% - 0%)) translateY(-130%) scale(0.75); } 100% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); } } @keyframes mdc-floating-label-shake-float-above-textarea { 0% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); } 33% { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); -webkit-transform: translateX(calc(4% - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(4% - 0%)) translateY(-130%) scale(0.75); } 66% { -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); -webkit-transform: translateX(calc(-4% - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(-4% - 0%)) translateY(-130%) scale(0.75); } 100% { -webkit-transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); transform: translateX(calc(0 - 0%)) translateY(-130%) scale(0.75); } } /** * Copyright 2019 Mashiro * @description header * @author Mashiro * @license MIT */ .mdc-top-app-bar { background-color: #fcb8ab; /* @alternate */ background-color: var(--mdc-theme-primary, #fcb8ab); color: rgba(0, 0, 0, 0.87); display: -webkit-box; display: flex; position: fixed; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: justify; 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: #442b2d; /* @alternate */ color: var(--mdc-theme-on-primary, #442b2d); } .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: #442b2d; } @supports not (-ms-ime-align: auto) { .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 { /* @alternate */ background-color: var(--mdc-theme-on-primary, #442b2d); } } .mdc-top-app-bar .mdc-top-app-bar__action-item:hover::before, .mdc-top-app-bar .mdc-top-app-bar__navigation-icon:hover::before { opacity: 0.04; } .mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):focus::before, .mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded--background-focused::before, .mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):focus::before, .mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded--background-focused::before { -webkit-transition-duration: 75ms; transition-duration: 75ms; 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 { -webkit-transition: opacity 150ms linear; 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 { -webkit-transition-duration: 75ms; transition-duration: 75ms; 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: 0.12; } .mdc-top-app-bar__row { display: -webkit-box; display: flex; position: relative; box-sizing: border-box; width: 100%; height: 64px; } .mdc-top-app-bar__section { display: -webkit-inline-box; display: inline-flex; -webkit-box-flex: 1; flex: 1 1 auto; -webkit-box-align: center; align-items: center; min-width: 0; padding: 8px 12px; z-index: 1; } .mdc-top-app-bar__section--align-start { -webkit-box-pack: start; justify-content: flex-start; -webkit-box-ordinal-group: 0; order: -1; } .mdc-top-app-bar__section--align-end { -webkit-box-pack: end; justify-content: flex-end; -webkit-box-ordinal-group: 2; order: 1; } .mdc-top-app-bar__title { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1.25rem; line-height: 2rem; font-weight: 500; letter-spacing: 0.0125em; text-decoration: inherit; text-transform: inherit; /* @noflip */ padding-left: 20px; /* @noflip */ 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"] { /* @noflip */ padding-left: 0; /* @noflip */ padding-right: 20px; } .mdc-top-app-bar--short-collapsed { /* @noflip */ border-radius: 0 0 24px 0; } [dir="rtl"] .mdc-top-app-bar--short-collapsed, .mdc-top-app-bar--short-collapsed[dir="rtl"] { /* @noflip */ border-radius: 0 0 0 24px; } .mdc-top-app-bar--short { top: 0; /* @noflip */ right: auto; /* @noflip */ left: 0; width: 100%; -webkit-transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1); 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"] { /* @noflip */ right: 0; /* @noflip */ left: auto; } .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 { -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; } .mdc-top-app-bar--short-collapsed { 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; -webkit-transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1); 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 { -webkit-transition: padding 150ms cubic-bezier(0.4, 0, 0.2, 1); 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 */ padding-left: 0; /* @noflip */ 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"] { /* @noflip */ padding-left: 12px; /* @noflip */ padding-right: 0; } .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 */ padding-left: 12px; /* @noflip */ 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"] { /* @noflip */ padding-left: 0; /* @noflip */ padding-right: 12px; } .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 { -webkit-transition: box-shadow 200ms linear; transition: box-shadow 200ms linear; } .mdc-top-app-bar--fixed-scrolled { 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); -webkit-transition: box-shadow 200ms linear; 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 */ padding-left: 20px; /* @noflip */ 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"] { /* @noflip */ padding-left: 0; /* @noflip */ padding-right: 20px; } .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 { -webkit-transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1); } .mdc-top-app-bar--short-collapsed { -webkit-transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1); 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 */ padding-left: 0; /* @noflip */ 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"] { /* @noflip */ padding-left: 12px; /* @noflip */ padding-right: 0; } .mdc-top-app-bar--prominent .mdc-top-app-bar__title { padding-bottom: 6px; } .mdc-top-app-bar--fixed-adjust { padding-top: 56px; } } .mdc-icon-button { width: 48px; height: 48px; padding: 12px; font-size: 24px; 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; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mdc-icon-button svg, .mdc-icon-button img { width: 24px; height: 24px; } .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)); cursor: default; pointer-events: none; } .mdc-icon-button__icon { display: inline-block; } .mdc-icon-button__icon.mdc-icon-button__icon--on { display: none; } .mdc-icon-button--on .mdc-icon-button__icon { display: none; } .mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on { display: inline-block; } .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); } .mdc-icon-button::before, .mdc-icon-button::after { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; content: ""; } .mdc-icon-button::before { -webkit-transition: opacity 15ms linear, background-color 15ms linear; transition: opacity 15ms linear, background-color 15ms linear; z-index: 1; } .mdc-icon-button.mdc-ripple-upgraded::before { -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1)); transform: scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-icon-button.mdc-ripple-upgraded::after { top: 0; /* @noflip */ left: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: center center; transform-origin: center center; } .mdc-icon-button.mdc-ripple-upgraded--unbounded::after { top: var(--mdc-ripple-top, 0); /* @noflip */ left: var(--mdc-ripple-left, 0); } .mdc-icon-button.mdc-ripple-upgraded--foreground-activation::after { -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; } .mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation::after { -webkit-animation: mdc-ripple-fg-opacity-out 150ms; animation: mdc-ripple-fg-opacity-out 150ms; -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-icon-button::before, .mdc-icon-button::after { top: calc(50% - 50%); /* @noflip */ left: calc(50% - 50%); width: 100%; height: 100%; } .mdc-icon-button.mdc-ripple-upgraded::before, .mdc-icon-button.mdc-ripple-upgraded::after { top: var(--mdc-ripple-top, calc(50% - 50%)); /* @noflip */ left: var(--mdc-ripple-left, calc(50% - 50%)); width: var(--mdc-ripple-fg-size, 100%); height: var(--mdc-ripple-fg-size, 100%); } .mdc-icon-button.mdc-ripple-upgraded::after { width: var(--mdc-ripple-fg-size, 100%); height: var(--mdc-ripple-fg-size, 100%); } .mdc-icon-button::before, .mdc-icon-button::after { background-color: #000; } .mdc-icon-button:hover::before { opacity: 0.04; } .mdc-icon-button:not(.mdc-ripple-upgraded):focus::before, .mdc-icon-button.mdc-ripple-upgraded--background-focused::before { -webkit-transition-duration: 75ms; transition-duration: 75ms; opacity: 0.12; } .mdc-icon-button:not(.mdc-ripple-upgraded)::after { -webkit-transition: opacity 150ms linear; transition: opacity 150ms linear; } .mdc-icon-button:not(.mdc-ripple-upgraded):active::after { -webkit-transition-duration: 75ms; transition-duration: 75ms; opacity: 0.12; } .mdc-icon-button.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: 0.12; } /** * @description homepage cover image * @author Mashiro * @since 19/11/1 */ .header-top { position: fixed; width: 100%; height: 100%; } .header-top figure { width: 100%; margin: 0; overflow: hidden; } #header-top-after { width: 100%; } /** * Copyright 2019 Mashiro * @description site content * @author Mashiro * @license MIT */ .page-content { position: relative; background: white; display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row nowrap; -webkit-box-pack: justify; justify-content: space-between; } .page-content .main-center { height: 100%; width: 800px; background: #9acd3220; } .page-content .side-bar-left { width: 100px; } .page-content .side-bar-right { width: 100px; } .mdc-card { border-radius: 4px; background-color: #fff; /* @alternate */ background-color: var(--mdc-theme-surface, #fff); box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; box-sizing: border-box; } .mdc-card--outlined { 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); border-width: 1px; border-style: solid; border-color: #e0e0e0; } .mdc-card__media { position: relative; box-sizing: border-box; background-repeat: no-repeat; background-position: center; background-size: cover; } .mdc-card__media::before { display: block; content: ""; } .mdc-card__media:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } .mdc-card__media:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .mdc-card__media--square::before { margin-top: 100%; } .mdc-card__media--16-9::before { margin-top: 56.25%; } .mdc-card__media-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .mdc-card__primary-action { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; box-sizing: border-box; position: relative; outline: none; color: inherit; text-decoration: none; cursor: pointer; overflow: hidden; } .mdc-card__primary-action:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } .mdc-card__primary-action:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .mdc-card__actions { display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-box-align: center; align-items: center; box-sizing: border-box; min-height: 52px; padding: 8px; } .mdc-card__actions--full-bleed { padding: 0; } .mdc-card__action-buttons, .mdc-card__action-icons { display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-box-align: center; align-items: center; box-sizing: border-box; } .mdc-card__action-icons { color: rgba(0, 0, 0, 0.6); -webkit-box-flex: 1; flex-grow: 1; -webkit-box-pack: end; justify-content: flex-end; } .mdc-card__action-buttons + .mdc-card__action-icons { /* @noflip */ margin-left: 16px; /* @noflip */ margin-right: 0; } [dir="rtl"] .mdc-card__action-buttons + .mdc-card__action-icons, .mdc-card__action-buttons + .mdc-card__action-icons[dir="rtl"] { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: 16px; } .mdc-card__action { display: -webkit-inline-box; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-box-align: center; align-items: center; box-sizing: border-box; -webkit-box-pack: center; justify-content: center; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mdc-card__action:focus { outline: none; } .mdc-card__action--button { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: 8px; padding: 0 8px; } [dir="rtl"] .mdc-card__action--button, .mdc-card__action--button[dir="rtl"] { /* @noflip */ margin-left: 8px; /* @noflip */ margin-right: 0; } .mdc-card__action--button:last-child { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: 0; } [dir="rtl"] .mdc-card__action--button:last-child, .mdc-card__action--button:last-child[dir="rtl"] { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: 0; } .mdc-card__actions--full-bleed .mdc-card__action--button { -webkit-box-pack: justify; justify-content: space-between; width: 100%; height: auto; max-height: none; margin: 0; padding: 8px 16px; /* @noflip */ text-align: left; } [dir="rtl"] .mdc-card__actions--full-bleed .mdc-card__action--button, .mdc-card__actions--full-bleed .mdc-card__action--button[dir="rtl"] { /* @noflip */ text-align: right; } .mdc-card__action--icon { margin: -6px 0; padding: 12px; } .mdc-card__action--icon:not(:disabled) { color: rgba(0, 0, 0, 0.6); } .mdc-card__primary-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-card__primary-action::before, .mdc-card__primary-action::after { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; content: ""; } .mdc-card__primary-action::before { -webkit-transition: opacity 15ms linear, background-color 15ms linear; transition: opacity 15ms linear, background-color 15ms linear; z-index: 1; } .mdc-card__primary-action.mdc-ripple-upgraded::before { -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1)); transform: scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-card__primary-action.mdc-ripple-upgraded::after { top: 0; /* @noflip */ left: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: center center; transform-origin: center center; } .mdc-card__primary-action.mdc-ripple-upgraded--unbounded::after { top: var(--mdc-ripple-top, 0); /* @noflip */ left: var(--mdc-ripple-left, 0); } .mdc-card__primary-action.mdc-ripple-upgraded--foreground-activation::after { -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; } .mdc-card__primary-action.mdc-ripple-upgraded--foreground-deactivation::after { -webkit-animation: mdc-ripple-fg-opacity-out 150ms; animation: mdc-ripple-fg-opacity-out 150ms; -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-card__primary-action::before, .mdc-card__primary-action::after { top: calc(50% - 100%); /* @noflip */ left: calc(50% - 100%); width: 200%; height: 200%; } .mdc-card__primary-action.mdc-ripple-upgraded::after { width: var(--mdc-ripple-fg-size, 100%); height: var(--mdc-ripple-fg-size, 100%); } .mdc-card__primary-action::before, .mdc-card__primary-action::after { background-color: #000; } .mdc-card__primary-action:hover::before { opacity: 0.04; } .mdc-card__primary-action:not(.mdc-ripple-upgraded):focus::before, .mdc-card__primary-action.mdc-ripple-upgraded--background-focused::before { -webkit-transition-duration: 75ms; transition-duration: 75ms; opacity: 0.12; } .mdc-card__primary-action:not(.mdc-ripple-upgraded)::after { -webkit-transition: opacity 150ms linear; transition: opacity 150ms linear; } .mdc-card__primary-action:not(.mdc-ripple-upgraded):active::after { -webkit-transition-duration: 75ms; transition-duration: 75ms; opacity: 0.12; } .mdc-card__primary-action.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: 0.12; } .mdc-button { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 0.875rem; line-height: 2.25rem; font-weight: 500; letter-spacing: 0.08929em; text-decoration: none; text-transform: uppercase; padding: 0 8px 0 8px; display: -webkit-inline-box; display: inline-flex; position: relative; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; box-sizing: border-box; min-width: 64px; height: 36px; border: none; outline: none; /* @alternate */ line-height: inherit; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-appearance: none; overflow: hidden; vertical-align: middle; border-radius: 4px; } .mdc-button::-moz-focus-inner { padding: 0; border: 0; } .mdc-button:active { outline: none; } .mdc-button:hover { cursor: pointer; } .mdc-button:disabled { background-color: transparent; color: rgba(0, 0, 0, 0.37); cursor: default; pointer-events: none; } .mdc-button.mdc-button--dense { border-radius: 4px; } .mdc-button:not(:disabled) { background-color: transparent; } .mdc-button .mdc-button__icon { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: 8px; display: inline-block; width: 18px; height: 18px; font-size: 18px; vertical-align: top; } [dir="rtl"] .mdc-button .mdc-button__icon, .mdc-button .mdc-button__icon[dir="rtl"] { /* @noflip */ margin-left: 8px; /* @noflip */ margin-right: 0; } .mdc-button:not(:disabled) { color: #fcb8ab; /* @alternate */ color: var(--mdc-theme-primary, #fcb8ab); } .mdc-button__label + .mdc-button__icon { /* @noflip */ margin-left: 8px; /* @noflip */ margin-right: 0; } [dir="rtl"] .mdc-button__label + .mdc-button__icon, .mdc-button__label + .mdc-button__icon[dir="rtl"] { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: 8px; } svg.mdc-button__icon { fill: currentColor; } .mdc-button--raised .mdc-button__icon, .mdc-button--unelevated .mdc-button__icon, .mdc-button--outlined .mdc-button__icon { /* @noflip */ margin-left: -4px; /* @noflip */ margin-right: 8px; } [dir="rtl"] .mdc-button--raised .mdc-button__icon, .mdc-button--raised .mdc-button__icon[dir="rtl"], [dir="rtl"] .mdc-button--unelevated .mdc-button__icon, .mdc-button--unelevated .mdc-button__icon[dir="rtl"], [dir="rtl"] .mdc-button--outlined .mdc-button__icon, .mdc-button--outlined .mdc-button__icon[dir="rtl"] { /* @noflip */ margin-left: 8px; /* @noflip */ margin-right: -4px; } .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 */ margin-left: 8px; /* @noflip */ margin-right: -4px; } [dir="rtl"] .mdc-button--raised .mdc-button__label + .mdc-button__icon, .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir="rtl"], [dir="rtl"] .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir="rtl"], [dir="rtl"] .mdc-button--outlined .mdc-button__label + .mdc-button__icon, .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir="rtl"] { /* @noflip */ margin-left: -4px; /* @noflip */ margin-right: 8px; } .mdc-button--raised, .mdc-button--unelevated { padding: 0 16px 0 16px; } .mdc-button--raised:disabled, .mdc-button--unelevated:disabled { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.37); } .mdc-button--raised:not(:disabled), .mdc-button--unelevated:not(:disabled) { background-color: #fcb8ab; } @supports not (-ms-ime-align: auto) { .mdc-button--raised:not(:disabled), .mdc-button--unelevated:not(:disabled) { /* @alternate */ background-color: var(--mdc-theme-primary, #fcb8ab); } } .mdc-button--raised:not(:disabled), .mdc-button--unelevated:not(:disabled) { color: #442b2d; /* @alternate */ color: var(--mdc-theme-on-primary, #442b2d); } .mdc-button--raised { 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); -webkit-transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); } .mdc-button--raised:hover, .mdc-button--raised: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); } .mdc-button--raised: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); } .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); } .mdc-button--outlined { border-style: solid; padding: 0 15px 0 15px; border-width: 1px; } .mdc-button--outlined:disabled { border-color: rgba(0, 0, 0, 0.37); } .mdc-button--outlined:not(:disabled) { border-color: #fcb8ab; /* @alternate */ border-color: var(--mdc-theme-primary, #fcb8ab); } .mdc-button--dense { height: 32px; font-size: .8125rem; } .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); } .mdc-button::before, .mdc-button::after { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; content: ""; } .mdc-button::before { -webkit-transition: opacity 15ms linear, background-color 15ms linear; transition: opacity 15ms linear, background-color 15ms linear; z-index: 1; } .mdc-button.mdc-ripple-upgraded::before { -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1)); transform: scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-button.mdc-ripple-upgraded::after { top: 0; /* @noflip */ left: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: center center; transform-origin: center center; } .mdc-button.mdc-ripple-upgraded--unbounded::after { top: var(--mdc-ripple-top, 0); /* @noflip */ left: var(--mdc-ripple-left, 0); } .mdc-button.mdc-ripple-upgraded--foreground-activation::after { -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; } .mdc-button.mdc-ripple-upgraded--foreground-deactivation::after { -webkit-animation: mdc-ripple-fg-opacity-out 150ms; animation: mdc-ripple-fg-opacity-out 150ms; -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-button::before, .mdc-button::after { top: calc(50% - 100%); /* @noflip */ left: calc(50% - 100%); width: 200%; height: 200%; } .mdc-button.mdc-ripple-upgraded::after { width: var(--mdc-ripple-fg-size, 100%); height: var(--mdc-ripple-fg-size, 100%); } .mdc-button::before, .mdc-button::after { background-color: #fcb8ab; } @supports not (-ms-ime-align: auto) { .mdc-button::before, .mdc-button::after { /* @alternate */ background-color: var(--mdc-theme-primary, #fcb8ab); } } .mdc-button:hover::before { opacity: 0.08; } .mdc-button:not(.mdc-ripple-upgraded):focus::before, .mdc-button.mdc-ripple-upgraded--background-focused::before { -webkit-transition-duration: 75ms; transition-duration: 75ms; opacity: 0.24; } .mdc-button:not(.mdc-ripple-upgraded)::after { -webkit-transition: opacity 150ms linear; transition: opacity 150ms linear; } .mdc-button:not(.mdc-ripple-upgraded):active::after { -webkit-transition-duration: 75ms; transition-duration: 75ms; opacity: 0.24; } .mdc-button.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: 0.24; } .mdc-button--raised::before, .mdc-button--raised::after, .mdc-button--unelevated::before, .mdc-button--unelevated::after { background-color: #442b2d; } @supports not (-ms-ime-align: auto) { .mdc-button--raised::before, .mdc-button--raised::after, .mdc-button--unelevated::before, .mdc-button--unelevated::after { /* @alternate */ background-color: var(--mdc-theme-on-primary, #442b2d); } } .mdc-button--raised:hover::before, .mdc-button--unelevated:hover::before { opacity: 0.04; } .mdc-button--raised:not(.mdc-ripple-upgraded):focus::before, .mdc-button--raised.mdc-ripple-upgraded--background-focused::before, .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus::before, .mdc-button--unelevated.mdc-ripple-upgraded--background-focused::before { -webkit-transition-duration: 75ms; transition-duration: 75ms; opacity: 0.12; } .mdc-button--raised:not(.mdc-ripple-upgraded)::after, .mdc-button--unelevated:not(.mdc-ripple-upgraded)::after { -webkit-transition: opacity 150ms linear; transition: opacity 150ms linear; } .mdc-button--raised:not(.mdc-ripple-upgraded):active::after, .mdc-button--unelevated:not(.mdc-ripple-upgraded):active::after { -webkit-transition-duration: 75ms; transition-duration: 75ms; opacity: 0.12; } .mdc-button--raised.mdc-ripple-upgraded, .mdc-button--unelevated.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: 0.12; } .mdc-typography { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .mdc-typography--headline1 { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 6rem; line-height: 6rem; font-weight: 300; letter-spacing: -0.01563em; text-decoration: inherit; text-transform: inherit; } .mdc-typography--headline2 { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 3.75rem; line-height: 3.75rem; font-weight: 300; letter-spacing: -0.00833em; text-decoration: inherit; text-transform: inherit; } .mdc-typography--headline3 { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 3rem; line-height: 3.125rem; font-weight: 400; letter-spacing: normal; text-decoration: inherit; text-transform: inherit; } .mdc-typography--headline4 { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 2.125rem; line-height: 2.5rem; font-weight: 400; letter-spacing: 0.00735em; text-decoration: inherit; text-transform: inherit; } .mdc-typography--headline5 { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1.5rem; line-height: 2rem; font-weight: 400; letter-spacing: normal; text-decoration: inherit; text-transform: inherit; } .mdc-typography--headline6 { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1.25rem; line-height: 2rem; font-weight: 500; letter-spacing: 0.0125em; text-decoration: inherit; text-transform: inherit; } .mdc-typography--subtitle1 { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1rem; line-height: 1.75rem; font-weight: 400; letter-spacing: 0.00937em; text-decoration: inherit; text-transform: inherit; } .mdc-typography--subtitle2 { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 0.875rem; line-height: 1.375rem; font-weight: 500; letter-spacing: 0.00714em; text-decoration: inherit; text-transform: inherit; } .mdc-typography--body1 { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1rem; line-height: 1.5rem; font-weight: 400; letter-spacing: 0.03125em; text-decoration: inherit; text-transform: inherit; } .mdc-typography--body2 { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; letter-spacing: 0.01786em; text-decoration: inherit; text-transform: inherit; } .mdc-typography--caption { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 0.75rem; line-height: 1.25rem; font-weight: 400; letter-spacing: 0.03333em; text-decoration: inherit; text-transform: inherit; } .mdc-typography--button { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 0.875rem; line-height: 2.25rem; font-weight: 500; letter-spacing: 0.08929em; text-decoration: none; text-transform: uppercase; } .mdc-typography--overline { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 0.75rem; line-height: 2rem; font-weight: 500; letter-spacing: 0.16667em; text-decoration: none; text-transform: uppercase; } .post-thumb-item { height: 300px; margin: 10px; } .post-thumb-item .primary-action { height: 100%; } .post-thumb-item .primary-action .content { height: 100%; width: 100%; display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row nowrap; -webkit-box-pack: justify; justify-content: space-between; } .post-thumb-item .primary-action .content .post-info { width: 45%; height: 100%; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-flow: column nowrap; -webkit-box-pack: justify; justify-content: space-between; } .post-thumb-item .primary-action .content .post-info .text { margin: 30px; } .post-thumb-item .primary-action .content .post-info .text .post-title { margin: 0; color: #504e4e; } .post-thumb-item .primary-action .content .post-info .text .post-date, .post-thumb-item .primary-action .content .post-info .text .post-meta { margin: 0; color: #888; font-size: 12px; } .post-thumb-item .primary-action .content .post-info .text .post-date i, .post-thumb-item .primary-action .content .post-info .text .post-meta i { font-size: 12px; } .post-thumb-item .primary-action .content .post-info .text .post-abstract { margin: 20px 0; color: #888; } .post-thumb-item .primary-action .content .post-info .btn--align-left { margin: auto auto 30px 30px; } .post-thumb-item .primary-action .content .post-info .btn--align-right { margin: auto 30px 30px auto; } .post-thumb-item .primary-action .content .post-thumb { width: 55%; overflow: hidden; } .post-thumb-item .primary-action .content .post-thumb .thumb-img-box { height: 100%; width: 100%; } .post-thumb-item .primary-action .content .post-thumb .thumb-img-box img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all .6s; transition: all .6s; } .post-thumb-item .primary-action .content .post-thumb .thumb-img-box img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); }