UNPKG

74.5 kBCSSView Raw
1/**
2 * @license
3 * Copyright Google LLC All Rights Reserved.
4 *
5 * Use of this source code is governed by an MIT-style license that can be
6 * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
7 */
8.mdc-floating-label {
9 -moz-osx-font-smoothing: grayscale;
10 -webkit-font-smoothing: antialiased;
11 font-family: Roboto, sans-serif;
12 /* @alternate */
13 font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
14 font-size: 1rem;
15 /* @alternate */
16 font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
17 font-weight: 400;
18 /* @alternate */
19 font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
20 letter-spacing: 0.009375em;
21 /* @alternate */
22 letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
23 text-decoration: inherit;
24 /* @alternate */
25 -webkit-text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
26 text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
27 text-transform: inherit;
28 /* @alternate */
29 text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
30 position: absolute;
31 /* @noflip */
32 /*rtl:ignore*/
33 left: 0;
34 /* @noflip */
35 /*rtl:ignore*/
36 -webkit-transform-origin: left top;
37 /* @noflip */
38 /*rtl:ignore*/
39 transform-origin: left top;
40 line-height: 1.15rem;
41 text-align: left;
42 text-overflow: ellipsis;
43 white-space: nowrap;
44 cursor: text;
45 overflow: hidden;
46 /* @alternate */
47 will-change: transform;
48 transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
49 transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
50 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);
51}
52[dir=rtl] .mdc-floating-label, .mdc-floating-label[dir=rtl] {
53 /*rtl:begin:ignore*/
54 /* @noflip */
55 /*rtl:ignore*/
56 right: 0;
57 /* @noflip */
58 /*rtl:ignore*/
59 left: auto;
60 /* @noflip */
61 /*rtl:ignore*/
62 -webkit-transform-origin: right top;
63 /* @noflip */
64 /*rtl:ignore*/
65 transform-origin: right top;
66 /* @noflip */
67 /*rtl:ignore*/
68 text-align: right;
69 /*rtl:end:ignore*/
70}
71
72.mdc-floating-label--float-above {
73 cursor: auto;
74}
75
76.mdc-floating-label--required::after {
77 /* @noflip */
78 /*rtl:ignore*/
79 margin-left: 1px;
80 /* @noflip */
81 /*rtl:ignore*/
82 margin-right: 0px;
83 content: "*";
84}
85[dir=rtl] .mdc-floating-label--required, .mdc-floating-label--required[dir=rtl] {
86 /*rtl:begin:ignore*/
87 /*rtl:end:ignore*/
88}
89[dir=rtl] .mdc-floating-label--required::after, .mdc-floating-label--required[dir=rtl]::after {
90 /* @noflip */
91 /*rtl:ignore*/
92 margin-left: 0;
93 /* @noflip */
94 /*rtl:ignore*/
95 margin-right: 1px;
96}
97
98.mdc-floating-label--float-above {
99 -webkit-transform: translateY(-106%) scale(0.75);
100 transform: translateY(-106%) scale(0.75);
101}
102
103.mdc-floating-label--shake {
104 -webkit-animation: mdc-floating-label-shake-float-above-standard 250ms 1;
105 animation: mdc-floating-label-shake-float-above-standard 250ms 1;
106}
107
108@-webkit-keyframes mdc-floating-label-shake-float-above-standard {
109 0% {
110 /* @noflip */
111 /*rtl:ignore*/
112 -webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
113 transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
114 }
115 33% {
116 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
117 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
118 /* @noflip */
119 /*rtl:ignore*/
120 -webkit-transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
121 transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
122 }
123 66% {
124 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
125 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
126 /* @noflip */
127 /*rtl:ignore*/
128 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
129 transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
130 }
131 100% {
132 /* @noflip */
133 /*rtl:ignore*/
134 -webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
135 transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
136 }
137}
138
139@keyframes mdc-floating-label-shake-float-above-standard {
140 0% {
141 /* @noflip */
142 /*rtl:ignore*/
143 -webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
144 transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
145 }
146 33% {
147 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
148 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
149 /* @noflip */
150 /*rtl:ignore*/
151 -webkit-transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
152 transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
153 }
154 66% {
155 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
156 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
157 /* @noflip */
158 /*rtl:ignore*/
159 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
160 transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
161 }
162 100% {
163 /* @noflip */
164 /*rtl:ignore*/
165 -webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
166 transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
167 }
168}
169.mdc-line-ripple::before, .mdc-line-ripple::after {
170 position: absolute;
171 bottom: 0;
172 left: 0;
173 width: 100%;
174 border-bottom-style: solid;
175 content: "";
176}
177.mdc-line-ripple::before {
178 border-bottom-width: 1px;
179}
180.mdc-line-ripple::before {
181 z-index: 1;
182}
183.mdc-line-ripple::after {
184 -webkit-transform: scaleX(0);
185 transform: scaleX(0);
186 border-bottom-width: 2px;
187 opacity: 0;
188 z-index: 2;
189}
190.mdc-line-ripple::after {
191 transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
192 transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
193 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);
194}
195
196.mdc-line-ripple--active::after {
197 -webkit-transform: scaleX(1);
198 transform: scaleX(1);
199 opacity: 1;
200}
201
202.mdc-line-ripple--deactivating::after {
203 opacity: 0;
204}
205
206.mdc-notched-outline {
207 display: flex;
208 position: absolute;
209 top: 0;
210 right: 0;
211 left: 0;
212 box-sizing: border-box;
213 width: 100%;
214 max-width: 100%;
215 height: 100%;
216 /* @noflip */
217 /*rtl:ignore*/
218 text-align: left;
219 pointer-events: none;
220}
221[dir=rtl] .mdc-notched-outline, .mdc-notched-outline[dir=rtl] {
222 /*rtl:begin:ignore*/
223 /* @noflip */
224 /*rtl:ignore*/
225 text-align: right;
226 /*rtl:end:ignore*/
227}
228
229.mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
230 box-sizing: border-box;
231 height: 100%;
232 border-top: 1px solid;
233 border-bottom: 1px solid;
234 pointer-events: none;
235}
236.mdc-notched-outline__leading {
237 /* @noflip */
238 /*rtl:ignore*/
239 border-left: 1px solid;
240 /* @noflip */
241 /*rtl:ignore*/
242 border-right: none;
243 width: 12px;
244}
245[dir=rtl] .mdc-notched-outline__leading, .mdc-notched-outline__leading[dir=rtl] {
246 /*rtl:begin:ignore*/
247 /* @noflip */
248 /*rtl:ignore*/
249 border-left: none;
250 /* @noflip */
251 /*rtl:ignore*/
252 border-right: 1px solid;
253 /*rtl:end:ignore*/
254}
255
256.mdc-notched-outline__trailing {
257 /* @noflip */
258 /*rtl:ignore*/
259 border-left: none;
260 /* @noflip */
261 /*rtl:ignore*/
262 border-right: 1px solid;
263 flex-grow: 1;
264}
265[dir=rtl] .mdc-notched-outline__trailing, .mdc-notched-outline__trailing[dir=rtl] {
266 /*rtl:begin:ignore*/
267 /* @noflip */
268 /*rtl:ignore*/
269 border-left: 1px solid;
270 /* @noflip */
271 /*rtl:ignore*/
272 border-right: none;
273 /*rtl:end:ignore*/
274}
275
276.mdc-notched-outline__notch {
277 flex: 0 0 auto;
278 width: auto;
279 max-width: calc(100% - 12px * 2);
280}
281.mdc-notched-outline .mdc-floating-label {
282 display: inline-block;
283 position: relative;
284 max-width: 100%;
285}
286.mdc-notched-outline .mdc-floating-label--float-above {
287 text-overflow: clip;
288}
289.mdc-notched-outline--upgraded .mdc-floating-label--float-above {
290 max-width: 133.3333333333%;
291}
292
293.mdc-notched-outline--notched .mdc-notched-outline__notch {
294 /* @noflip */
295 /*rtl:ignore*/
296 padding-left: 0;
297 /* @noflip */
298 /*rtl:ignore*/
299 padding-right: 8px;
300 border-top: none;
301}
302[dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch, .mdc-notched-outline--notched .mdc-notched-outline__notch[dir=rtl] {
303 /*rtl:begin:ignore*/
304 /* @noflip */
305 /*rtl:ignore*/
306 padding-left: 8px;
307 /* @noflip */
308 /*rtl:ignore*/
309 padding-right: 0;
310 /*rtl:end:ignore*/
311}
312
313.mdc-notched-outline--no-label .mdc-notched-outline__notch {
314 display: none;
315}
316
317@-webkit-keyframes mdc-ripple-fg-radius-in {
318 from {
319 -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
320 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
321 -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
322 transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
323 }
324 to {
325 -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
326 transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
327 }
328}
329
330@keyframes mdc-ripple-fg-radius-in {
331 from {
332 -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
333 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
334 -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
335 transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
336 }
337 to {
338 -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
339 transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
340 }
341}
342@-webkit-keyframes mdc-ripple-fg-opacity-in {
343 from {
344 -webkit-animation-timing-function: linear;
345 animation-timing-function: linear;
346 opacity: 0;
347 }
348 to {
349 opacity: var(--mdc-ripple-fg-opacity, 0);
350 }
351}
352@keyframes mdc-ripple-fg-opacity-in {
353 from {
354 -webkit-animation-timing-function: linear;
355 animation-timing-function: linear;
356 opacity: 0;
357 }
358 to {
359 opacity: var(--mdc-ripple-fg-opacity, 0);
360 }
361}
362@-webkit-keyframes mdc-ripple-fg-opacity-out {
363 from {
364 -webkit-animation-timing-function: linear;
365 animation-timing-function: linear;
366 opacity: var(--mdc-ripple-fg-opacity, 0);
367 }
368 to {
369 opacity: 0;
370 }
371}
372@keyframes mdc-ripple-fg-opacity-out {
373 from {
374 -webkit-animation-timing-function: linear;
375 animation-timing-function: linear;
376 opacity: var(--mdc-ripple-fg-opacity, 0);
377 }
378 to {
379 opacity: 0;
380 }
381}
382.mdc-text-field--filled {
383 --mdc-ripple-fg-size: 0;
384 --mdc-ripple-left: 0;
385 --mdc-ripple-top: 0;
386 --mdc-ripple-fg-scale: 1;
387 --mdc-ripple-fg-translate-end: 0;
388 --mdc-ripple-fg-translate-start: 0;
389 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
390 will-change: transform, opacity;
391}
392.mdc-text-field--filled .mdc-text-field__ripple::before,
393.mdc-text-field--filled .mdc-text-field__ripple::after {
394 position: absolute;
395 border-radius: 50%;
396 opacity: 0;
397 pointer-events: none;
398 content: "";
399}
400.mdc-text-field--filled .mdc-text-field__ripple::before {
401 transition: opacity 15ms linear, background-color 15ms linear;
402 z-index: 1;
403 /* @alternate */
404 z-index: var(--mdc-ripple-z-index, 1);
405}
406.mdc-text-field--filled .mdc-text-field__ripple::after {
407 z-index: 0;
408 /* @alternate */
409 z-index: var(--mdc-ripple-z-index, 0);
410}
411.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::before {
412 -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
413 transform: scale(var(--mdc-ripple-fg-scale, 1));
414}
415.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after {
416 top: 0;
417 /* @noflip */
418 /*rtl:ignore*/
419 left: 0;
420 -webkit-transform: scale(0);
421 transform: scale(0);
422 -webkit-transform-origin: center center;
423 transform-origin: center center;
424}
425.mdc-text-field--filled.mdc-ripple-upgraded--unbounded .mdc-text-field__ripple::after {
426 top: var(--mdc-ripple-top, 0);
427 /* @noflip */
428 /*rtl:ignore*/
429 left: var(--mdc-ripple-left, 0);
430}
431.mdc-text-field--filled.mdc-ripple-upgraded--foreground-activation .mdc-text-field__ripple::after {
432 -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
433 animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
434}
435.mdc-text-field--filled.mdc-ripple-upgraded--foreground-deactivation .mdc-text-field__ripple::after {
436 -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
437 animation: mdc-ripple-fg-opacity-out 150ms;
438 -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
439 transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
440}
441.mdc-text-field--filled .mdc-text-field__ripple::before,
442.mdc-text-field--filled .mdc-text-field__ripple::after {
443 top: calc(50% - 100%);
444 /* @noflip */
445 /*rtl:ignore*/
446 left: calc(50% - 100%);
447 width: 200%;
448 height: 200%;
449}
450.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after {
451 width: var(--mdc-ripple-fg-size, 100%);
452 height: var(--mdc-ripple-fg-size, 100%);
453}
454
455.mdc-text-field__ripple {
456 position: absolute;
457 top: 0;
458 left: 0;
459 width: 100%;
460 height: 100%;
461 pointer-events: none;
462}
463
464.mdc-text-field {
465 border-top-left-radius: 4px;
466 /* @alternate */
467 border-top-left-radius: var(--mdc-shape-small, 4px);
468 border-top-right-radius: 4px;
469 /* @alternate */
470 border-top-right-radius: var(--mdc-shape-small, 4px);
471 border-bottom-right-radius: 0;
472 border-bottom-left-radius: 0;
473 display: inline-flex;
474 align-items: baseline;
475 padding: 0 16px;
476 position: relative;
477 box-sizing: border-box;
478 overflow: hidden;
479 /* @alternate */
480 will-change: opacity, transform, color;
481}
482.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
483 color: rgba(0, 0, 0, 0.6);
484}
485.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
486 color: rgba(0, 0, 0, 0.87);
487}
488@media all {
489 .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::-webkit-input-placeholder {
490 color: rgba(0, 0, 0, 0.54);
491 }
492 .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder {
493 color: rgba(0, 0, 0, 0.54);
494 }
495 .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::-ms-input-placeholder {
496 color: rgba(0, 0, 0, 0.54);
497 }
498 .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder {
499 color: rgba(0, 0, 0, 0.54);
500 }
501}
502@media all {
503 .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder {
504 color: rgba(0, 0, 0, 0.54);
505 }
506}
507.mdc-text-field .mdc-text-field__input {
508 caret-color: #6200ee;
509 /* @alternate */
510 caret-color: var(--mdc-theme-primary, #6200ee);
511}
512.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text {
513 color: rgba(0, 0, 0, 0.6);
514}
515.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter,
516.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-character-counter {
517 color: rgba(0, 0, 0, 0.6);
518}
519.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading {
520 color: rgba(0, 0, 0, 0.54);
521}
522.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {
523 color: rgba(0, 0, 0, 0.54);
524}
525.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--prefix {
526 color: rgba(0, 0, 0, 0.6);
527}
528.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--suffix {
529 color: rgba(0, 0, 0, 0.6);
530}
531.mdc-text-field .mdc-floating-label {
532 top: 50%;
533 -webkit-transform: translateY(-50%);
534 transform: translateY(-50%);
535 pointer-events: none;
536}
537
538.mdc-text-field__input {
539 -moz-osx-font-smoothing: grayscale;
540 -webkit-font-smoothing: antialiased;
541 font-family: Roboto, sans-serif;
542 /* @alternate */
543 font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
544 font-size: 1rem;
545 /* @alternate */
546 font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
547 font-weight: 400;
548 /* @alternate */
549 font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
550 letter-spacing: 0.009375em;
551 /* @alternate */
552 letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
553 text-decoration: inherit;
554 /* @alternate */
555 -webkit-text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
556 text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
557 text-transform: inherit;
558 /* @alternate */
559 text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
560 height: 28px;
561 transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
562 width: 100%;
563 min-width: 0;
564 border: none;
565 border-radius: 0;
566 background: none;
567 -webkit-appearance: none;
568 -moz-appearance: none;
569 appearance: none;
570 padding: 0;
571}
572.mdc-text-field__input::-ms-clear {
573 display: none;
574}
575.mdc-text-field__input::-webkit-calendar-picker-indicator {
576 display: none;
577}
578.mdc-text-field__input:focus {
579 outline: none;
580}
581.mdc-text-field__input:invalid {
582 box-shadow: none;
583}
584@media all {
585 .mdc-text-field__input::-webkit-input-placeholder {
586 transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
587 opacity: 0;
588 }
589 .mdc-text-field__input:-ms-input-placeholder {
590 transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
591 opacity: 0;
592 }
593 .mdc-text-field__input::-ms-input-placeholder {
594 transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
595 opacity: 0;
596 }
597 .mdc-text-field__input::placeholder {
598 transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
599 opacity: 0;
600 }
601}
602@media all {
603 .mdc-text-field__input:-ms-input-placeholder {
604 transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
605 opacity: 0;
606 }
607}
608@media all {
609 .mdc-text-field--no-label .mdc-text-field__input::-webkit-input-placeholder, .mdc-text-field--focused .mdc-text-field__input::-webkit-input-placeholder {
610 transition-delay: 40ms;
611 transition-duration: 110ms;
612 opacity: 1;
613 }
614 .mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder, .mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder {
615 transition-delay: 40ms;
616 transition-duration: 110ms;
617 opacity: 1;
618 }
619 .mdc-text-field--no-label .mdc-text-field__input::-ms-input-placeholder, .mdc-text-field--focused .mdc-text-field__input::-ms-input-placeholder {
620 transition-delay: 40ms;
621 transition-duration: 110ms;
622 opacity: 1;
623 }
624 .mdc-text-field--no-label .mdc-text-field__input::placeholder, .mdc-text-field--focused .mdc-text-field__input::placeholder {
625 transition-delay: 40ms;
626 transition-duration: 110ms;
627 opacity: 1;
628 }
629}
630@media all {
631 .mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder, .mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder {
632 transition-delay: 40ms;
633 transition-duration: 110ms;
634 opacity: 1;
635 }
636}
637
638.mdc-text-field__affix {
639 -moz-osx-font-smoothing: grayscale;
640 -webkit-font-smoothing: antialiased;
641 font-family: Roboto, sans-serif;
642 /* @alternate */
643 font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
644 font-size: 1rem;
645 /* @alternate */
646 font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
647 font-weight: 400;
648 /* @alternate */
649 font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
650 letter-spacing: 0.009375em;
651 /* @alternate */
652 letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
653 text-decoration: inherit;
654 /* @alternate */
655 -webkit-text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
656 text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
657 text-transform: inherit;
658 /* @alternate */
659 text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
660 height: 28px;
661 transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
662 opacity: 0;
663 white-space: nowrap;
664}
665.mdc-text-field--label-floating .mdc-text-field__affix, .mdc-text-field--no-label .mdc-text-field__affix {
666 opacity: 1;
667}
668@supports (-webkit-hyphens: none) {
669 .mdc-text-field--outlined .mdc-text-field__affix {
670 align-items: center;
671 align-self: center;
672 display: inline-flex;
673 height: 100%;
674 }
675}
676
677.mdc-text-field__affix--prefix {
678 /* @noflip */
679 /*rtl:ignore*/
680 padding-left: 0;
681 /* @noflip */
682 /*rtl:ignore*/
683 padding-right: 2px;
684}
685[dir=rtl] .mdc-text-field__affix--prefix, .mdc-text-field__affix--prefix[dir=rtl] {
686 /*rtl:begin:ignore*/
687 /* @noflip */
688 /*rtl:ignore*/
689 padding-left: 2px;
690 /* @noflip */
691 /*rtl:ignore*/
692 padding-right: 0;
693 /*rtl:end:ignore*/
694}
695
696.mdc-text-field--end-aligned .mdc-text-field__affix--prefix {
697 /* @noflip */
698 /*rtl:ignore*/
699 padding-left: 0;
700 /* @noflip */
701 /*rtl:ignore*/
702 padding-right: 12px;
703}
704[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--prefix, .mdc-text-field--end-aligned .mdc-text-field__affix--prefix[dir=rtl] {
705 /*rtl:begin:ignore*/
706 /* @noflip */
707 /*rtl:ignore*/
708 padding-left: 12px;
709 /* @noflip */
710 /*rtl:ignore*/
711 padding-right: 0;
712 /*rtl:end:ignore*/
713}
714
715.mdc-text-field__affix--suffix {
716 /* @noflip */
717 /*rtl:ignore*/
718 padding-left: 12px;
719 /* @noflip */
720 /*rtl:ignore*/
721 padding-right: 0;
722}
723[dir=rtl] .mdc-text-field__affix--suffix, .mdc-text-field__affix--suffix[dir=rtl] {
724 /*rtl:begin:ignore*/
725 /* @noflip */
726 /*rtl:ignore*/
727 padding-left: 0;
728 /* @noflip */
729 /*rtl:ignore*/
730 padding-right: 12px;
731 /*rtl:end:ignore*/
732}
733
734.mdc-text-field--end-aligned .mdc-text-field__affix--suffix {
735 /* @noflip */
736 /*rtl:ignore*/
737 padding-left: 2px;
738 /* @noflip */
739 /*rtl:ignore*/
740 padding-right: 0;
741}
742[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--suffix, .mdc-text-field--end-aligned .mdc-text-field__affix--suffix[dir=rtl] {
743 /*rtl:begin:ignore*/
744 /* @noflip */
745 /*rtl:ignore*/
746 padding-left: 0;
747 /* @noflip */
748 /*rtl:ignore*/
749 padding-right: 2px;
750 /*rtl:end:ignore*/
751}
752
753.mdc-text-field--filled {
754 height: 56px;
755}
756.mdc-text-field--filled .mdc-text-field__ripple::before,
757.mdc-text-field--filled .mdc-text-field__ripple::after {
758 background-color: rgba(0, 0, 0, 0.87);
759 /* @alternate */
760 background-color: var(--mdc-ripple-color, rgba(0, 0, 0, 0.87));
761}
762.mdc-text-field--filled:hover .mdc-text-field__ripple::before, .mdc-text-field--filled.mdc-ripple-surface--hover .mdc-text-field__ripple::before {
763 opacity: 0.04;
764 /* @alternate */
765 opacity: var(--mdc-ripple-hover-opacity, 0.04);
766}
767.mdc-text-field--filled.mdc-ripple-upgraded--background-focused .mdc-text-field__ripple::before, .mdc-text-field--filled:not(.mdc-ripple-upgraded):focus .mdc-text-field__ripple::before {
768 transition-duration: 75ms;
769 opacity: 0.12;
770 /* @alternate */
771 opacity: var(--mdc-ripple-focus-opacity, 0.12);
772}
773.mdc-text-field--filled::before {
774 display: inline-block;
775 width: 0;
776 height: 40px;
777 content: "";
778 vertical-align: 0;
779}
780.mdc-text-field--filled:not(.mdc-text-field--disabled) {
781 background-color: whitesmoke;
782}
783.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
784 border-bottom-color: rgba(0, 0, 0, 0.42);
785}
786.mdc-text-field--filled:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {
787 border-bottom-color: rgba(0, 0, 0, 0.87);
788}
789.mdc-text-field--filled .mdc-line-ripple::after {
790 border-bottom-color: #6200ee;
791 /* @alternate */
792 border-bottom-color: var(--mdc-theme-primary, #6200ee);
793}
794.mdc-text-field--filled .mdc-floating-label {
795 /* @noflip */
796 /*rtl:ignore*/
797 left: 16px;
798 /* @noflip */
799 /*rtl:ignore*/
800 right: initial;
801}
802[dir=rtl] .mdc-text-field--filled .mdc-floating-label, .mdc-text-field--filled .mdc-floating-label[dir=rtl] {
803 /*rtl:begin:ignore*/
804 /* @noflip */
805 /*rtl:ignore*/
806 left: initial;
807 /* @noflip */
808 /*rtl:ignore*/
809 right: 16px;
810 /*rtl:end:ignore*/
811}
812
813.mdc-text-field--filled .mdc-floating-label--float-above {
814 -webkit-transform: translateY(-106%) scale(0.75);
815 transform: translateY(-106%) scale(0.75);
816}
817.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input {
818 height: 100%;
819}
820.mdc-text-field--filled.mdc-text-field--no-label .mdc-floating-label {
821 display: none;
822}
823.mdc-text-field--filled.mdc-text-field--no-label::before {
824 display: none;
825}
826@supports (-webkit-hyphens: none) {
827 .mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__affix {
828 align-items: center;
829 align-self: center;
830 display: inline-flex;
831 height: 100%;
832 }
833}
834
835.mdc-text-field--outlined {
836 height: 56px;
837 overflow: visible;
838}
839.mdc-text-field--outlined .mdc-floating-label--float-above {
840 -webkit-transform: translateY(-37.25px) scale(1);
841 transform: translateY(-37.25px) scale(1);
842}
843.mdc-text-field--outlined .mdc-floating-label--float-above {
844 font-size: 0.75rem;
845}
846.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
847.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
848 -webkit-transform: translateY(-34.75px) scale(0.75);
849 transform: translateY(-34.75px) scale(0.75);
850}
851.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
852.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
853 font-size: 1rem;
854}
855.mdc-text-field--outlined .mdc-floating-label--shake {
856 -webkit-animation: mdc-floating-label-shake-float-above-text-field-outlined 250ms 1;
857 animation: mdc-floating-label-shake-float-above-text-field-outlined 250ms 1;
858}
859@-webkit-keyframes mdc-floating-label-shake-float-above-text-field-outlined {
860 0% {
861 /* @noflip */
862 /*rtl:ignore*/
863 -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
864 transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
865 }
866 33% {
867 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
868 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
869 /* @noflip */
870 /*rtl:ignore*/
871 -webkit-transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
872 transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
873 }
874 66% {
875 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
876 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
877 /* @noflip */
878 /*rtl:ignore*/
879 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
880 transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
881 }
882 100% {
883 /* @noflip */
884 /*rtl:ignore*/
885 -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
886 transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
887 }
888}
889@keyframes mdc-floating-label-shake-float-above-text-field-outlined {
890 0% {
891 /* @noflip */
892 /*rtl:ignore*/
893 -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
894 transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
895 }
896 33% {
897 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
898 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
899 /* @noflip */
900 /*rtl:ignore*/
901 -webkit-transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
902 transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
903 }
904 66% {
905 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
906 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
907 /* @noflip */
908 /*rtl:ignore*/
909 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
910 transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
911 }
912 100% {
913 /* @noflip */
914 /*rtl:ignore*/
915 -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
916 transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
917 }
918}
919.mdc-text-field--outlined .mdc-text-field__input {
920 height: 100%;
921}
922.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
923.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
924.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
925 border-color: rgba(0, 0, 0, 0.38);
926}
927.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
928.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
929.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
930 border-color: rgba(0, 0, 0, 0.87);
931}
932.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
933.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
934.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
935 border-color: #6200ee;
936 /* @alternate */
937 border-color: var(--mdc-theme-primary, #6200ee);
938}
939.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
940 /* @noflip */
941 /*rtl:ignore*/
942 border-top-left-radius: 4px;
943 /* @alternate */
944 /* @noflip */
945 /*rtl:ignore*/
946 border-top-left-radius: var(--mdc-shape-small, 4px);
947 /* @noflip */
948 /*rtl:ignore*/
949 border-top-right-radius: 0;
950 /* @noflip */
951 /*rtl:ignore*/
952 border-bottom-right-radius: 0;
953 /* @noflip */
954 /*rtl:ignore*/
955 border-bottom-left-radius: 4px;
956 /* @alternate */
957 /* @noflip */
958 /*rtl:ignore*/
959 border-bottom-left-radius: var(--mdc-shape-small, 4px);
960}
961[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] {
962 /*rtl:begin:ignore*/
963 /* @noflip */
964 /*rtl:ignore*/
965 border-top-left-radius: 0;
966 /* @noflip */
967 /*rtl:ignore*/
968 border-top-right-radius: 4px;
969 /* @alternate */
970 /* @noflip */
971 /*rtl:ignore*/
972 border-top-right-radius: var(--mdc-shape-small, 4px);
973 /* @noflip */
974 /*rtl:ignore*/
975 border-bottom-right-radius: 4px;
976 /* @alternate */
977 /* @noflip */
978 /*rtl:ignore*/
979 border-bottom-right-radius: var(--mdc-shape-small, 4px);
980 /* @noflip */
981 /*rtl:ignore*/
982 border-bottom-left-radius: 0;
983 /*rtl:end:ignore*/
984}
985
986@supports (top: max(0%)) {
987 .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
988 width: max(12px, var(--mdc-shape-small, 4px));
989 }
990}
991@supports (top: max(0%)) {
992 .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
993 max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);
994 }
995}
996.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
997 /* @noflip */
998 /*rtl:ignore*/
999 border-top-left-radius: 0;
1000 /* @noflip */
1001 /*rtl:ignore*/
1002 border-top-right-radius: 4px;
1003 /* @alternate */
1004 /* @noflip */
1005 /*rtl:ignore*/
1006 border-top-right-radius: var(--mdc-shape-small, 4px);
1007 /* @noflip */
1008 /*rtl:ignore*/
1009 border-bottom-right-radius: 4px;
1010 /* @alternate */
1011 /* @noflip */
1012 /*rtl:ignore*/
1013 border-bottom-right-radius: var(--mdc-shape-small, 4px);
1014 /* @noflip */
1015 /*rtl:ignore*/
1016 border-bottom-left-radius: 0;
1017}
1018[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] {
1019 /*rtl:begin:ignore*/
1020 /* @noflip */
1021 /*rtl:ignore*/
1022 border-top-left-radius: 4px;
1023 /* @alternate */
1024 /* @noflip */
1025 /*rtl:ignore*/
1026 border-top-left-radius: var(--mdc-shape-small, 4px);
1027 /* @noflip */
1028 /*rtl:ignore*/
1029 border-top-right-radius: 0;
1030 /* @noflip */
1031 /*rtl:ignore*/
1032 border-bottom-right-radius: 0;
1033 /* @noflip */
1034 /*rtl:ignore*/
1035 border-bottom-left-radius: 4px;
1036 /* @alternate */
1037 /* @noflip */
1038 /*rtl:ignore*/
1039 border-bottom-left-radius: var(--mdc-shape-small, 4px);
1040 /*rtl:end:ignore*/
1041}
1042
1043@supports (top: max(0%)) {
1044 .mdc-text-field--outlined {
1045 /* @noflip */
1046 /*rtl:ignore*/
1047 padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
1048 }
1049}
1050@supports (top: max(0%)) {
1051 .mdc-text-field--outlined {
1052 /* @noflip */
1053 /*rtl:ignore*/
1054 padding-right: max(16px, var(--mdc-shape-small, 4px));
1055 }
1056}
1057@supports (top: max(0%)) {
1058 .mdc-text-field--outlined + .mdc-text-field-helper-line {
1059 /* @noflip */
1060 /*rtl:ignore*/
1061 padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
1062 }
1063}
1064@supports (top: max(0%)) {
1065 .mdc-text-field--outlined + .mdc-text-field-helper-line {
1066 /* @noflip */
1067 /*rtl:ignore*/
1068 padding-right: max(16px, var(--mdc-shape-small, 4px));
1069 }
1070}
1071.mdc-text-field--outlined.mdc-text-field--with-leading-icon {
1072 /* @noflip */
1073 /*rtl:ignore*/
1074 padding-left: 0;
1075}
1076@supports (top: max(0%)) {
1077 .mdc-text-field--outlined.mdc-text-field--with-leading-icon {
1078 /* @noflip */
1079 /*rtl:ignore*/
1080 padding-right: max(16px, var(--mdc-shape-small, 4px));
1081 }
1082}
1083[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon, .mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl] {
1084 /*rtl:begin:ignore*/
1085 /* @noflip */
1086 /*rtl:ignore*/
1087 padding-right: 0;
1088 /*rtl:end:ignore*/
1089}
1090@supports (top: max(0%)) {
1091 [dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon, .mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl] {
1092 /* @noflip */
1093 /*rtl:ignore*/
1094 padding-left: max(16px, var(--mdc-shape-small, 4px));
1095 }
1096}
1097
1098.mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
1099 /* @noflip */
1100 /*rtl:ignore*/
1101 padding-right: 0;
1102}
1103@supports (top: max(0%)) {
1104 .mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
1105 /* @noflip */
1106 /*rtl:ignore*/
1107 padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
1108 }
1109}
1110[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon, .mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl] {
1111 /*rtl:begin:ignore*/
1112 /* @noflip */
1113 /*rtl:ignore*/
1114 padding-left: 0;
1115 /*rtl:end:ignore*/
1116}
1117@supports (top: max(0%)) {
1118 [dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon, .mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl] {
1119 /* @noflip */
1120 /*rtl:ignore*/
1121 padding-right: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
1122 }
1123}
1124
1125.mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
1126 /* @noflip */
1127 /*rtl:ignore*/
1128 padding-left: 0;
1129 /* @noflip */
1130 /*rtl:ignore*/
1131 padding-right: 0;
1132}
1133.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
1134 padding-top: 1px;
1135}
1136.mdc-text-field--outlined .mdc-text-field__ripple::before,
1137.mdc-text-field--outlined .mdc-text-field__ripple::after {
1138 background-color: transparent;
1139 /* @alternate */
1140 background-color: var(--mdc-ripple-color, transparent);
1141}
1142.mdc-text-field--outlined .mdc-floating-label {
1143 /* @noflip */
1144 /*rtl:ignore*/
1145 left: 4px;
1146 /* @noflip */
1147 /*rtl:ignore*/
1148 right: initial;
1149}
1150[dir=rtl] .mdc-text-field--outlined .mdc-floating-label, .mdc-text-field--outlined .mdc-floating-label[dir=rtl] {
1151 /*rtl:begin:ignore*/
1152 /* @noflip */
1153 /*rtl:ignore*/
1154 left: initial;
1155 /* @noflip */
1156 /*rtl:ignore*/
1157 right: 4px;
1158 /*rtl:end:ignore*/
1159}
1160
1161.mdc-text-field--outlined .mdc-text-field__input {
1162 display: flex;
1163 border: none !important;
1164 background-color: transparent;
1165}
1166.mdc-text-field--outlined .mdc-notched-outline {
1167 z-index: 1;
1168}
1169
1170.mdc-text-field--textarea {
1171 flex-direction: column;
1172 align-items: center;
1173 width: auto;
1174 height: auto;
1175 padding: 0;
1176 transition: none;
1177}
1178.mdc-text-field--textarea .mdc-floating-label {
1179 top: 19px;
1180}
1181.mdc-text-field--textarea .mdc-floating-label:not(.mdc-floating-label--float-above) {
1182 -webkit-transform: none;
1183 transform: none;
1184}
1185.mdc-text-field--textarea .mdc-text-field__input {
1186 flex-grow: 1;
1187 height: auto;
1188 min-height: 1.5rem;
1189 overflow-x: hidden;
1190 overflow-y: auto;
1191 box-sizing: border-box;
1192 resize: none;
1193 padding: 0 16px;
1194 line-height: 1.5rem;
1195}
1196.mdc-text-field--textarea.mdc-text-field--filled::before {
1197 display: none;
1198}
1199.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--float-above {
1200 -webkit-transform: translateY(-10.25px) scale(0.75);
1201 transform: translateY(-10.25px) scale(0.75);
1202}
1203.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--shake {
1204 -webkit-animation: mdc-floating-label-shake-float-above-textarea-filled 250ms 1;
1205 animation: mdc-floating-label-shake-float-above-textarea-filled 250ms 1;
1206}
1207@-webkit-keyframes mdc-floating-label-shake-float-above-textarea-filled {
1208 0% {
1209 /* @noflip */
1210 /*rtl:ignore*/
1211 -webkit-transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1212 transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1213 }
1214 33% {
1215 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1216 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1217 /* @noflip */
1218 /*rtl:ignore*/
1219 -webkit-transform: translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75);
1220 transform: translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75);
1221 }
1222 66% {
1223 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1224 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1225 /* @noflip */
1226 /*rtl:ignore*/
1227 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75);
1228 transform: translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75);
1229 }
1230 100% {
1231 /* @noflip */
1232 /*rtl:ignore*/
1233 -webkit-transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1234 transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1235 }
1236}
1237@keyframes mdc-floating-label-shake-float-above-textarea-filled {
1238 0% {
1239 /* @noflip */
1240 /*rtl:ignore*/
1241 -webkit-transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1242 transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1243 }
1244 33% {
1245 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1246 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1247 /* @noflip */
1248 /*rtl:ignore*/
1249 -webkit-transform: translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75);
1250 transform: translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75);
1251 }
1252 66% {
1253 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1254 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1255 /* @noflip */
1256 /*rtl:ignore*/
1257 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75);
1258 transform: translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75);
1259 }
1260 100% {
1261 /* @noflip */
1262 /*rtl:ignore*/
1263 -webkit-transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1264 transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
1265 }
1266}
1267.mdc-text-field--textarea.mdc-text-field--filled .mdc-text-field__input {
1268 margin-top: 23px;
1269 margin-bottom: 9px;
1270}
1271.mdc-text-field--textarea.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input {
1272 margin-top: 16px;
1273 margin-bottom: 16px;
1274}
1275.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
1276 padding-top: 0;
1277}
1278.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {
1279 -webkit-transform: translateY(-27.25px) scale(1);
1280 transform: translateY(-27.25px) scale(1);
1281}
1282.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {
1283 font-size: 0.75rem;
1284}
1285.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
1286.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
1287 -webkit-transform: translateY(-24.75px) scale(0.75);
1288 transform: translateY(-24.75px) scale(0.75);
1289}
1290.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
1291.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
1292 font-size: 1rem;
1293}
1294.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--shake {
1295 -webkit-animation: mdc-floating-label-shake-float-above-textarea-outlined 250ms 1;
1296 animation: mdc-floating-label-shake-float-above-textarea-outlined 250ms 1;
1297}
1298@-webkit-keyframes mdc-floating-label-shake-float-above-textarea-outlined {
1299 0% {
1300 /* @noflip */
1301 /*rtl:ignore*/
1302 -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1303 transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1304 }
1305 33% {
1306 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1307 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1308 /* @noflip */
1309 /*rtl:ignore*/
1310 -webkit-transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
1311 transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
1312 }
1313 66% {
1314 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1315 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1316 /* @noflip */
1317 /*rtl:ignore*/
1318 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
1319 transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
1320 }
1321 100% {
1322 /* @noflip */
1323 /*rtl:ignore*/
1324 -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1325 transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1326 }
1327}
1328@keyframes mdc-floating-label-shake-float-above-textarea-outlined {
1329 0% {
1330 /* @noflip */
1331 /*rtl:ignore*/
1332 -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1333 transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1334 }
1335 33% {
1336 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1337 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1338 /* @noflip */
1339 /*rtl:ignore*/
1340 -webkit-transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
1341 transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
1342 }
1343 66% {
1344 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1345 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1346 /* @noflip */
1347 /*rtl:ignore*/
1348 -webkit-transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
1349 transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
1350 }
1351 100% {
1352 /* @noflip */
1353 /*rtl:ignore*/
1354 -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1355 transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
1356 }
1357}
1358.mdc-text-field--textarea.mdc-text-field--outlined .mdc-text-field__input {
1359 margin-top: 16px;
1360 margin-bottom: 16px;
1361}
1362.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label {
1363 top: 18px;
1364}
1365.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field__input {
1366 margin-bottom: 2px;
1367}
1368.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter {
1369 align-self: flex-end;
1370 padding: 0 16px;
1371}
1372.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::after {
1373 display: inline-block;
1374 width: 0;
1375 height: 16px;
1376 content: "";
1377 vertical-align: -16px;
1378}
1379.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::before {
1380 display: none;
1381}
1382
1383.mdc-text-field__resizer {
1384 align-self: stretch;
1385 display: inline-flex;
1386 flex-direction: column;
1387 flex-grow: 1;
1388 max-height: 100%;
1389 max-width: 100%;
1390 min-height: 56px;
1391 min-width: -webkit-fit-content;
1392 min-width: -moz-fit-content;
1393 min-width: fit-content;
1394 /* @alternate */
1395 min-width: -moz-available;
1396 /* @alternate */
1397 min-width: -webkit-fill-available;
1398 overflow: hidden;
1399 resize: both;
1400}
1401.mdc-text-field--filled .mdc-text-field__resizer {
1402 -webkit-transform: translateY(-1px);
1403 transform: translateY(-1px);
1404}
1405.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field__input,
1406.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field-character-counter {
1407 -webkit-transform: translateY(1px);
1408 transform: translateY(1px);
1409}
1410.mdc-text-field--outlined .mdc-text-field__resizer {
1411 /* @noflip */
1412 /*rtl:ignore*/
1413 -webkit-transform: translateX(-1px) translateY(-1px);
1414 transform: translateX(-1px) translateY(-1px);
1415}
1416[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer, .mdc-text-field--outlined .mdc-text-field__resizer[dir=rtl] {
1417 /*rtl:begin:ignore*/
1418 /* @noflip */
1419 /*rtl:ignore*/
1420 -webkit-transform: translateX(1px) translateY(-1px);
1421 transform: translateX(1px) translateY(-1px);
1422 /*rtl:end:ignore*/
1423}
1424
1425.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input,
1426.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter {
1427 /* @noflip */
1428 /*rtl:ignore*/
1429 -webkit-transform: translateX(1px) translateY(1px);
1430 transform: translateX(1px) translateY(1px);
1431}
1432[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input, [dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter, .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input[dir=rtl], .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter[dir=rtl] {
1433 /*rtl:begin:ignore*/
1434 /* @noflip */
1435 /*rtl:ignore*/
1436 -webkit-transform: translateX(-1px) translateY(1px);
1437 transform: translateX(-1px) translateY(1px);
1438 /*rtl:end:ignore*/
1439}
1440
1441.mdc-text-field--with-leading-icon {
1442 /* @noflip */
1443 /*rtl:ignore*/
1444 padding-left: 0;
1445 /* @noflip */
1446 /*rtl:ignore*/
1447 padding-right: 16px;
1448}
1449[dir=rtl] .mdc-text-field--with-leading-icon, .mdc-text-field--with-leading-icon[dir=rtl] {
1450 /*rtl:begin:ignore*/
1451 /* @noflip */
1452 /*rtl:ignore*/
1453 padding-left: 16px;
1454 /* @noflip */
1455 /*rtl:ignore*/
1456 padding-right: 0;
1457 /*rtl:end:ignore*/
1458}
1459
1460.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label {
1461 max-width: calc(100% - 48px);
1462 /* @noflip */
1463 /*rtl:ignore*/
1464 left: 48px;
1465 /* @noflip */
1466 /*rtl:ignore*/
1467 right: initial;
1468}
1469[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label, .mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label[dir=rtl] {
1470 /*rtl:begin:ignore*/
1471 /* @noflip */
1472 /*rtl:ignore*/
1473 left: initial;
1474 /* @noflip */
1475 /*rtl:ignore*/
1476 right: 48px;
1477 /*rtl:end:ignore*/
1478}
1479
1480.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label--float-above {
1481 max-width: calc(100% / 0.75 - 64px / 0.75);
1482}
1483.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label {
1484 /* @noflip */
1485 /*rtl:ignore*/
1486 left: 36px;
1487 /* @noflip */
1488 /*rtl:ignore*/
1489 right: initial;
1490}
1491[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] {
1492 /*rtl:begin:ignore*/
1493 /* @noflip */
1494 /*rtl:ignore*/
1495 left: initial;
1496 /* @noflip */
1497 /*rtl:ignore*/
1498 right: 36px;
1499 /*rtl:end:ignore*/
1500}
1501
1502.mdc-text-field--with-leading-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
1503 max-width: calc(100% - 60px);
1504}
1505.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
1506 /* @noflip */
1507 /*rtl:ignore*/
1508 -webkit-transform: translateY(-37.25px) translateX(-32px) scale(1);
1509 transform: translateY(-37.25px) translateX(-32px) scale(1);
1510}
1511[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] {
1512 /*rtl:begin:ignore*/
1513 /* @noflip */
1514 /*rtl:ignore*/
1515 -webkit-transform: translateY(-37.25px) translateX(32px) scale(1);
1516 transform: translateY(-37.25px) translateX(32px) scale(1);
1517 /*rtl:end:ignore*/
1518}
1519
1520.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
1521 font-size: 0.75rem;
1522}
1523.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
1524.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
1525 /* @noflip */
1526 /*rtl:ignore*/
1527 -webkit-transform: translateY(-34.75px) translateX(-32px) scale(0.75);
1528 transform: translateY(-34.75px) translateX(-32px) scale(0.75);
1529}
1530[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, [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], .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl] {
1531 /*rtl:begin:ignore*/
1532 /* @noflip */
1533 /*rtl:ignore*/
1534 -webkit-transform: translateY(-34.75px) translateX(32px) scale(0.75);
1535 transform: translateY(-34.75px) translateX(32px) scale(0.75);
1536 /*rtl:end:ignore*/
1537}
1538
1539.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
1540.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
1541 font-size: 1rem;
1542}
1543.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake {
1544 -webkit-animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1;
1545 animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1;
1546}
1547@-webkit-keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon {
1548 0% {
1549 /* @noflip */
1550 /*rtl:ignore*/
1551 -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1552 transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1553 }
1554 33% {
1555 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1556 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1557 /* @noflip */
1558 /*rtl:ignore*/
1559 -webkit-transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
1560 transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
1561 }
1562 66% {
1563 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1564 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1565 /* @noflip */
1566 /*rtl:ignore*/
1567 -webkit-transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
1568 transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
1569 }
1570 100% {
1571 /* @noflip */
1572 /*rtl:ignore*/
1573 -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1574 transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1575 }
1576}
1577@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon {
1578 0% {
1579 /* @noflip */
1580 /*rtl:ignore*/
1581 -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1582 transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1583 }
1584 33% {
1585 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1586 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1587 /* @noflip */
1588 /*rtl:ignore*/
1589 -webkit-transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
1590 transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
1591 }
1592 66% {
1593 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1594 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1595 /* @noflip */
1596 /*rtl:ignore*/
1597 -webkit-transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
1598 transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
1599 }
1600 100% {
1601 /* @noflip */
1602 /*rtl:ignore*/
1603 -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1604 transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
1605 }
1606}
1607[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined, .mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl] {
1608 /*rtl:begin:ignore*/
1609 /*rtl:end:ignore*/
1610}
1611[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 {
1612 -webkit-animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1;
1613 animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1;
1614}
1615
1616@-webkit-keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl {
1617 0% {
1618 /* @noflip */
1619 /*rtl:ignore*/
1620 -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1621 transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1622 }
1623 33% {
1624 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1625 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1626 /* @noflip */
1627 /*rtl:ignore*/
1628 -webkit-transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
1629 transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
1630 }
1631 66% {
1632 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1633 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1634 /* @noflip */
1635 /*rtl:ignore*/
1636 -webkit-transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
1637 transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
1638 }
1639 100% {
1640 /* @noflip */
1641 /*rtl:ignore*/
1642 -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1643 transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1644 }
1645}
1646
1647@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl {
1648 0% {
1649 /* @noflip */
1650 /*rtl:ignore*/
1651 -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1652 transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1653 }
1654 33% {
1655 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1656 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
1657 /* @noflip */
1658 /*rtl:ignore*/
1659 -webkit-transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
1660 transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
1661 }
1662 66% {
1663 -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1664 animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
1665 /* @noflip */
1666 /*rtl:ignore*/
1667 -webkit-transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
1668 transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
1669 }
1670 100% {
1671 /* @noflip */
1672 /*rtl:ignore*/
1673 -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1674 transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
1675 }
1676}
1677
1678.mdc-text-field--with-trailing-icon {
1679 /* @noflip */
1680 /*rtl:ignore*/
1681 padding-left: 16px;
1682 /* @noflip */
1683 /*rtl:ignore*/
1684 padding-right: 0;
1685}
1686[dir=rtl] .mdc-text-field--with-trailing-icon, .mdc-text-field--with-trailing-icon[dir=rtl] {
1687 /*rtl:begin:ignore*/
1688 /* @noflip */
1689 /*rtl:ignore*/
1690 padding-left: 0;
1691 /* @noflip */
1692 /*rtl:ignore*/
1693 padding-right: 16px;
1694 /*rtl:end:ignore*/
1695}
1696
1697.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label {
1698 max-width: calc(100% - 64px);
1699}
1700.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above {
1701 max-width: calc(100% / 0.75 - 64px / 0.75);
1702}
1703.mdc-text-field--with-trailing-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
1704 max-width: calc(100% - 60px);
1705}
1706
1707.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
1708 /* @noflip */
1709 /*rtl:ignore*/
1710 padding-left: 0;
1711 /* @noflip */
1712 /*rtl:ignore*/
1713 padding-right: 0;
1714}
1715.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label {
1716 max-width: calc(100% - 96px);
1717}
1718.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above {
1719 max-width: calc(100% / 0.75 - 96px / 0.75);
1720}
1721
1722.mdc-text-field-helper-line {
1723 display: flex;
1724 justify-content: space-between;
1725 box-sizing: border-box;
1726}
1727.mdc-text-field + .mdc-text-field-helper-line {
1728 padding-right: 16px;
1729 padding-left: 16px;
1730}
1731
1732.mdc-form-field > .mdc-text-field + label {
1733 align-self: flex-start;
1734}
1735
1736.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
1737 color: rgba(98, 0, 238, 0.87);
1738}
1739.mdc-text-field--focused .mdc-notched-outline__leading,
1740.mdc-text-field--focused .mdc-notched-outline__notch,
1741.mdc-text-field--focused .mdc-notched-outline__trailing {
1742 border-width: 2px;
1743}
1744.mdc-text-field--focused + .mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg) {
1745 opacity: 1;
1746}
1747.mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
1748 padding-top: 2px;
1749}
1750.mdc-text-field--focused.mdc-text-field--outlined.mdc-text-field--textarea .mdc-notched-outline--notched .mdc-notched-outline__notch {
1751 padding-top: 0;
1752}
1753
1754.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {
1755 border-bottom-color: #b00020;
1756 /* @alternate */
1757 border-bottom-color: var(--mdc-theme-error, #b00020);
1758}
1759.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
1760 border-bottom-color: #b00020;
1761 /* @alternate */
1762 border-bottom-color: var(--mdc-theme-error, #b00020);
1763}
1764.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label {
1765 color: #b00020;
1766 /* @alternate */
1767 color: var(--mdc-theme-error, #b00020);
1768}
1769.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 {
1770 color: #b00020;
1771 /* @alternate */
1772 color: var(--mdc-theme-error, #b00020);
1773}
1774.mdc-text-field--invalid .mdc-text-field__input {
1775 caret-color: #b00020;
1776 /* @alternate */
1777 caret-color: var(--mdc-theme-error, #b00020);
1778}
1779.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {
1780 color: #b00020;
1781 /* @alternate */
1782 color: var(--mdc-theme-error, #b00020);
1783}
1784.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
1785 border-bottom-color: #b00020;
1786 /* @alternate */
1787 border-bottom-color: var(--mdc-theme-error, #b00020);
1788}
1789.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
1790.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
1791.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
1792 border-color: #b00020;
1793 /* @alternate */
1794 border-color: var(--mdc-theme-error, #b00020);
1795}
1796.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
1797.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
1798.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
1799 border-color: #b00020;
1800 /* @alternate */
1801 border-color: var(--mdc-theme-error, #b00020);
1802}
1803.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
1804.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
1805.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
1806 border-color: #b00020;
1807 /* @alternate */
1808 border-color: var(--mdc-theme-error, #b00020);
1809}
1810.mdc-text-field--invalid + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
1811 opacity: 1;
1812}
1813
1814.mdc-text-field--disabled {
1815 pointer-events: none;
1816}
1817.mdc-text-field--disabled .mdc-text-field__input {
1818 color: rgba(0, 0, 0, 0.38);
1819}
1820@media all {
1821 .mdc-text-field--disabled .mdc-text-field__input::-webkit-input-placeholder {
1822 color: rgba(0, 0, 0, 0.38);
1823 }
1824 .mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {
1825 color: rgba(0, 0, 0, 0.38);
1826 }
1827 .mdc-text-field--disabled .mdc-text-field__input::-ms-input-placeholder {
1828 color: rgba(0, 0, 0, 0.38);
1829 }
1830 .mdc-text-field--disabled .mdc-text-field__input::placeholder {
1831 color: rgba(0, 0, 0, 0.38);
1832 }
1833}
1834@media all {
1835 .mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {
1836 color: rgba(0, 0, 0, 0.38);
1837 }
1838}
1839.mdc-text-field--disabled .mdc-floating-label {
1840 color: rgba(0, 0, 0, 0.38);
1841}
1842.mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-helper-text {
1843 color: rgba(0, 0, 0, 0.38);
1844}
1845.mdc-text-field--disabled .mdc-text-field-character-counter,
1846.mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-character-counter {
1847 color: rgba(0, 0, 0, 0.38);
1848}
1849.mdc-text-field--disabled .mdc-text-field__icon--leading {
1850 color: rgba(0, 0, 0, 0.3);
1851}
1852.mdc-text-field--disabled .mdc-text-field__icon--trailing {
1853 color: rgba(0, 0, 0, 0.3);
1854}
1855.mdc-text-field--disabled .mdc-text-field__affix--prefix {
1856 color: rgba(0, 0, 0, 0.38);
1857}
1858.mdc-text-field--disabled .mdc-text-field__affix--suffix {
1859 color: rgba(0, 0, 0, 0.38);
1860}
1861.mdc-text-field--disabled .mdc-line-ripple::before {
1862 border-bottom-color: rgba(0, 0, 0, 0.06);
1863}
1864.mdc-text-field--disabled .mdc-notched-outline__leading,
1865.mdc-text-field--disabled .mdc-notched-outline__notch,
1866.mdc-text-field--disabled .mdc-notched-outline__trailing {
1867 border-color: rgba(0, 0, 0, 0.06);
1868}
1869@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1870 .mdc-text-field--disabled .mdc-text-field__input::-webkit-input-placeholder {
1871 color: GrayText;
1872 }
1873 .mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {
1874 color: GrayText;
1875 }
1876 .mdc-text-field--disabled .mdc-text-field__input::-ms-input-placeholder {
1877 color: GrayText;
1878 }
1879 .mdc-text-field--disabled .mdc-text-field__input::placeholder {
1880 color: GrayText;
1881 }
1882}
1883@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1884 .mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {
1885 color: GrayText;
1886 }
1887}
1888@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1889 .mdc-text-field--disabled .mdc-floating-label {
1890 color: GrayText;
1891 }
1892}
1893@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1894 .mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-helper-text {
1895 color: GrayText;
1896 }
1897}
1898@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1899 .mdc-text-field--disabled .mdc-text-field-character-counter,
1900.mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-character-counter {
1901 color: GrayText;
1902 }
1903}
1904@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1905 .mdc-text-field--disabled .mdc-text-field__icon--leading {
1906 color: GrayText;
1907 }
1908}
1909@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1910 .mdc-text-field--disabled .mdc-text-field__icon--trailing {
1911 color: GrayText;
1912 }
1913}
1914@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1915 .mdc-text-field--disabled .mdc-text-field__affix--prefix {
1916 color: GrayText;
1917 }
1918}
1919@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1920 .mdc-text-field--disabled .mdc-text-field__affix--suffix {
1921 color: GrayText;
1922 }
1923}
1924@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1925 .mdc-text-field--disabled .mdc-line-ripple::before {
1926 border-bottom-color: GrayText;
1927 }
1928}
1929@media screen and (forced-colors: active), (-ms-high-contrast: active) {
1930 .mdc-text-field--disabled .mdc-notched-outline__leading,
1931.mdc-text-field--disabled .mdc-notched-outline__notch,
1932.mdc-text-field--disabled .mdc-notched-outline__trailing {
1933 border-color: GrayText;
1934 }
1935}
1936@media screen and (forced-colors: active) {
1937 .mdc-text-field--disabled .mdc-text-field__input {
1938 background-color: Window;
1939 }
1940 .mdc-text-field--disabled .mdc-floating-label {
1941 z-index: 1;
1942 }
1943}
1944.mdc-text-field--disabled .mdc-floating-label {
1945 cursor: default;
1946}
1947.mdc-text-field--disabled.mdc-text-field--filled {
1948 background-color: #fafafa;
1949}
1950.mdc-text-field--disabled.mdc-text-field--filled .mdc-text-field__ripple {
1951 display: none;
1952}
1953.mdc-text-field--disabled .mdc-text-field__input {
1954 pointer-events: auto;
1955}
1956
1957.mdc-text-field--end-aligned .mdc-text-field__input {
1958 /* @noflip */
1959 /*rtl:ignore*/
1960 text-align: right;
1961}
1962[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__input, .mdc-text-field--end-aligned .mdc-text-field__input[dir=rtl] {
1963 /*rtl:begin:ignore*/
1964 /* @noflip */
1965 /*rtl:ignore*/
1966 text-align: left;
1967 /*rtl:end:ignore*/
1968}
1969
1970[dir=rtl] .mdc-text-field--ltr-text, .mdc-text-field--ltr-text[dir=rtl] {
1971 /*rtl:begin:ignore*/
1972 /*rtl:end:ignore*/
1973}
1974[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input,
1975[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input,
1976.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix {
1977 /* @noflip */
1978 /*rtl:ignore*/
1979 direction: ltr;
1980}
1981[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix {
1982 /* @noflip */
1983 /*rtl:ignore*/
1984 padding-left: 0;
1985 /* @noflip */
1986 /*rtl:ignore*/
1987 padding-right: 2px;
1988}
1989[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix {
1990 /* @noflip */
1991 /*rtl:ignore*/
1992 padding-left: 12px;
1993 /* @noflip */
1994 /*rtl:ignore*/
1995 padding-right: 0;
1996}
1997[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--leading, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--leading {
1998 order: 1;
1999}
2000[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix {
2001 order: 2;
2002}
2003[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input {
2004 order: 3;
2005}
2006[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix {
2007 order: 4;
2008}
2009[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--trailing, .mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--trailing {
2010 order: 5;
2011}
2012
2013[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned, .mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] {
2014 /*rtl:begin:ignore*/
2015 /*rtl:end:ignore*/
2016}
2017[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__input, .mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__input {
2018 /* @noflip */
2019 /*rtl:ignore*/
2020 text-align: right;
2021}
2022[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--prefix, .mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--prefix {
2023 /* @noflip */
2024 /*rtl:ignore*/
2025 padding-right: 12px;
2026}
2027[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--suffix, .mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--suffix {
2028 /* @noflip */
2029 /*rtl:ignore*/
2030 padding-left: 2px;
2031}
2032
2033.mdc-text-field-helper-text {
2034 -moz-osx-font-smoothing: grayscale;
2035 -webkit-font-smoothing: antialiased;
2036 font-family: Roboto, sans-serif;
2037 /* @alternate */
2038 font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
2039 font-size: 0.75rem;
2040 /* @alternate */
2041 font-size: var(--mdc-typography-caption-font-size, 0.75rem);
2042 line-height: 1.25rem;
2043 /* @alternate */
2044 line-height: var(--mdc-typography-caption-line-height, 1.25rem);
2045 font-weight: 400;
2046 /* @alternate */
2047 font-weight: var(--mdc-typography-caption-font-weight, 400);
2048 letter-spacing: 0.0333333333em;
2049 /* @alternate */
2050 letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
2051 text-decoration: inherit;
2052 /* @alternate */
2053 -webkit-text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
2054 text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
2055 text-transform: inherit;
2056 /* @alternate */
2057 text-transform: var(--mdc-typography-caption-text-transform, inherit);
2058 display: block;
2059 margin-top: 0;
2060 /* @alternate */
2061 line-height: normal;
2062 margin: 0;
2063 opacity: 0;
2064 will-change: opacity;
2065 transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
2066}
2067.mdc-text-field-helper-text::before {
2068 display: inline-block;
2069 width: 0;
2070 height: 16px;
2071 content: "";
2072 vertical-align: 0;
2073}
2074
2075.mdc-text-field-helper-text--persistent {
2076 transition: none;
2077 opacity: 1;
2078 will-change: initial;
2079}
2080
2081.mdc-text-field-character-counter {
2082 -moz-osx-font-smoothing: grayscale;
2083 -webkit-font-smoothing: antialiased;
2084 font-family: Roboto, sans-serif;
2085 /* @alternate */
2086 font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
2087 font-size: 0.75rem;
2088 /* @alternate */
2089 font-size: var(--mdc-typography-caption-font-size, 0.75rem);
2090 line-height: 1.25rem;
2091 /* @alternate */
2092 line-height: var(--mdc-typography-caption-line-height, 1.25rem);
2093 font-weight: 400;
2094 /* @alternate */
2095 font-weight: var(--mdc-typography-caption-font-weight, 400);
2096 letter-spacing: 0.0333333333em;
2097 /* @alternate */
2098 letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
2099 text-decoration: inherit;
2100 /* @alternate */
2101 -webkit-text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
2102 text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
2103 text-transform: inherit;
2104 /* @alternate */
2105 text-transform: var(--mdc-typography-caption-text-transform, inherit);
2106 display: block;
2107 margin-top: 0;
2108 /* @alternate */
2109 line-height: normal;
2110 /* @noflip */
2111 /*rtl:ignore*/
2112 margin-left: auto;
2113 /* @noflip */
2114 /*rtl:ignore*/
2115 margin-right: 0;
2116 /* @noflip */
2117 /*rtl:ignore*/
2118 padding-left: 16px;
2119 /* @noflip */
2120 /*rtl:ignore*/
2121 padding-right: 0;
2122 white-space: nowrap;
2123}
2124.mdc-text-field-character-counter::before {
2125 display: inline-block;
2126 width: 0;
2127 height: 16px;
2128 content: "";
2129 vertical-align: 0;
2130}
2131[dir=rtl] .mdc-text-field-character-counter, .mdc-text-field-character-counter[dir=rtl] {
2132 /*rtl:begin:ignore*/
2133 /* @noflip */
2134 /*rtl:ignore*/
2135 margin-left: 0;
2136 /* @noflip */
2137 /*rtl:ignore*/
2138 margin-right: auto;
2139 /*rtl:end:ignore*/
2140}
2141
2142[dir=rtl] .mdc-text-field-character-counter, .mdc-text-field-character-counter[dir=rtl] {
2143 /*rtl:begin:ignore*/
2144 /* @noflip */
2145 /*rtl:ignore*/
2146 padding-left: 0;
2147 /* @noflip */
2148 /*rtl:ignore*/
2149 padding-right: 16px;
2150 /*rtl:end:ignore*/
2151}
2152
2153.mdc-text-field__icon {
2154 align-self: center;
2155 cursor: pointer;
2156}
2157.mdc-text-field__icon:not([tabindex]), .mdc-text-field__icon[tabindex="-1"] {
2158 cursor: default;
2159 pointer-events: none;
2160}
2161.mdc-text-field__icon svg {
2162 display: block;
2163}
2164
2165.mdc-text-field__icon--leading {
2166 /* @noflip */
2167 /*rtl:ignore*/
2168 margin-left: 16px;
2169 /* @noflip */
2170 /*rtl:ignore*/
2171 margin-right: 8px;
2172}
2173[dir=rtl] .mdc-text-field__icon--leading, .mdc-text-field__icon--leading[dir=rtl] {
2174 /*rtl:begin:ignore*/
2175 /* @noflip */
2176 /*rtl:ignore*/
2177 margin-left: 8px;
2178 /* @noflip */
2179 /*rtl:ignore*/
2180 margin-right: 16px;
2181 /*rtl:end:ignore*/
2182}
2183
2184.mdc-text-field__icon--trailing {
2185 padding: 12px;
2186 /* @noflip */
2187 /*rtl:ignore*/
2188 margin-left: 0px;
2189 /* @noflip */
2190 /*rtl:ignore*/
2191 margin-right: 0px;
2192}
2193[dir=rtl] .mdc-text-field__icon--trailing, .mdc-text-field__icon--trailing[dir=rtl] {
2194 /*rtl:begin:ignore*/
2195 /* @noflip */
2196 /*rtl:ignore*/
2197 margin-left: 0px;
2198 /* @noflip */
2199 /*rtl:ignore*/
2200 margin-right: 0px;
2201 /*rtl:end:ignore*/
2202}
2203
2204/*# sourceMappingURL=mdc.textfield.css.map*/
\No newline at end of file