xpl3xqnde6mydqu38syq4qoawvssezpn.ui.nabu.casa
Open in
urlscan Pro
52.72.142.67
Public Scan
Submitted URL: https://xpl3xqnde6mydqu38syq4qoawvssezpn.ui.nabu.casa/
Effective URL: https://xpl3xqnde6mydqu38syq4qoawvssezpn.ui.nabu.casa/auth/authorize?response_type=code&redirect_uri=https%3A%2F%2Fxpl3xqnde6mydqu38syq4qoawvssezpn.ui...
Submission: On December 22 via api from US — Scanned from DE
Effective URL: https://xpl3xqnde6mydqu38syq4qoawvssezpn.ui.nabu.casa/auth/authorize?response_type=code&redirect_uri=https%3A%2F%2Fxpl3xqnde6mydqu38syq4qoawvssezpn.ui...
Submission: On December 22 via api from US — Scanned from DE
Form analysis 1 forms found in the DOM
<form><!--?lit$8834407684$--> <!--?lit$8834407684$-->
<h1> <!--?lit$8834407684$-->Welcome home! </h1> <!--?lit$8834407684$--> <!--?lit$8834407684$--><ha-auth-form><!---->
<style>
ha-auth-form .root>* {
display: block
}
ha-auth-form .root>:not([own-margin]):not(:last-child) {
margin-bottom: 24px
}
ha-auth-form ha-alert[own-margin] {
margin-bottom: 4px
}
</style> <!--?lit$8834407684$-->
<div class="root" part="root"> <!--?lit$8834407684$--> <!--?lit$8834407684$--><!----> <!--?lit$8834407684$--> <!--?lit$8834407684$--><ha-auth-form-string own-margin=""><!---->
<style>
ha-auth-form-string {
display: block;
position: relative
}
ha-auth-form-string[own-margin] {
margin-bottom: 5px
}
ha-auth-form-string ha-auth-textfield {
display: block !important
}
ha-auth-form-string ha-icon-button {
position: absolute;
top: 8px;
right: 8px;
inset-inline-start: initial;
inset-inline-end: 8px;
--mdc-icon-button-size: 40px;
--mdc-icon-size: 20px;
color: var(--secondary-text-color);
direction: var(--direction)
}
</style> <ha-auth-textfield helperpersistent="" autofocus="">
<style>
.mdc-floating-label {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: 1rem;
font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
font-weight: 400;
font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
letter-spacing: .009375em;
letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, .009375em);
text-decoration: inherit;
text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
text-transform: inherit;
text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
position: absolute;
left: 0;
-webkit-transform-origin: left top;
transform-origin: left top;
line-height: 1.15rem;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
cursor: text;
overflow: hidden;
will-change: transform;
transition: transform 150ms cubic-bezier(.4, 0, .2, 1), color 150ms cubic-bezier(.4, 0, .2, 1)
}
.mdc-floating-label[dir=rtl],
[dir=rtl] .mdc-floating-label {
right: 0;
left: auto;
-webkit-transform-origin: right top;
transform-origin: right top;
text-align: right
}
.mdc-floating-label--float-above {
cursor: auto
}
.mdc-floating-label--required::after {
margin-left: 1px;
margin-right: 0px;
content: "*"
}
.mdc-floating-label--required[dir=rtl]::after,
[dir=rtl] .mdc-floating-label--required::after {
margin-left: 0;
margin-right: 1px
}
.mdc-floating-label--float-above {
transform: translateY(-106%) scale(.75)
}
.mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-standard 250ms 1
}
@keyframes mdc-floating-label-shake-float-above-standard {
0% {
transform: translateX(calc(0 - 0%)) translateY(-106%) scale(.75)
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
transform: translateX(calc(4% - 0%)) translateY(-106%) scale(.75)
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(.75)
}
100% {
transform: translateX(calc(0 - 0%)) translateY(-106%) scale(.75)
}
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom-style: solid;
content: ""
}
.mdc-line-ripple::before {
border-bottom-width: 1px
}
.mdc-line-ripple::before {
z-index: 1
}
.mdc-line-ripple::after {
transform: scaleX(0);
border-bottom-width: 2px;
opacity: 0;
z-index: 2
}
.mdc-line-ripple::after {
transition: transform 180ms cubic-bezier(.4, 0, .2, 1), opacity 180ms cubic-bezier(.4, 0, .2, 1)
}
.mdc-line-ripple--active::after {
transform: scaleX(1);
opacity: 1
}
.mdc-line-ripple--deactivating::after {
opacity: 0
}
.mdc-notched-outline {
display: flex;
position: absolute;
top: 0;
right: 0;
left: 0;
box-sizing: border-box;
width: 100%;
max-width: 100%;
height: 100%;
text-align: left;
pointer-events: none
}
.mdc-notched-outline[dir=rtl],
[dir=rtl] .mdc-notched-outline {
text-align: right
}
.mdc-notched-outline__leading,
.mdc-notched-outline__notch,
.mdc-notched-outline__trailing {
box-sizing: border-box;
height: 100%;
border-top: 1px solid;
border-bottom: 1px solid;
pointer-events: none
}
.mdc-notched-outline__leading {
border-left: 1px solid;
border-right: none;
width: 12px
}
.mdc-notched-outline__leading[dir=rtl],
[dir=rtl] .mdc-notched-outline__leading {
border-left: none;
border-right: 1px solid
}
.mdc-notched-outline__trailing {
border-left: none;
border-right: 1px solid;
flex-grow: 1
}
.mdc-notched-outline__trailing[dir=rtl],
[dir=rtl] .mdc-notched-outline__trailing {
border-left: 1px solid;
border-right: none
}
.mdc-notched-outline__notch {
flex: 0 0 auto;
width: auto;
max-width: calc(100% - 12px * 2)
}
.mdc-notched-outline .mdc-floating-label {
display: inline-block;
position: relative;
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 {
padding-left: 0;
padding-right: 8px;
border-top: none
}
.mdc-notched-outline--notched .mdc-notched-outline__notch[dir=rtl],
[dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-left: 8px;
padding-right: 0
}
.mdc-notched-outline--no-label .mdc-notched-outline__notch {
display: none
}
@keyframes mdc-ripple-fg-radius-in {
from {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)
}
to {
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))
}
}
@keyframes mdc-ripple-fg-opacity-in {
from {
animation-timing-function: linear;
opacity: 0
}
to {
opacity: var(--mdc-ripple-fg-opacity, 0)
}
}
@keyframes mdc-ripple-fg-opacity-out {
from {
animation-timing-function: linear;
opacity: var(--mdc-ripple-fg-opacity, 0)
}
to {
opacity: 0
}
}
.mdc-text-field--filled {
--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: transparent;
will-change: transform, opacity
}
.mdc-text-field--filled .mdc-text-field__ripple::after,
.mdc-text-field--filled .mdc-text-field__ripple::before {
position: absolute;
border-radius: 50%;
opacity: 0;
pointer-events: none;
content: ""
}
.mdc-text-field--filled .mdc-text-field__ripple::before {
transition: opacity 15ms linear, background-color 15ms linear;
z-index: 1;
z-index: var(--mdc-ripple-z-index, 1)
}
.mdc-text-field--filled .mdc-text-field__ripple::after {
z-index: 0;
z-index: var(--mdc-ripple-z-index, 0)
}
.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::before {
transform: scale(var(--mdc-ripple-fg-scale, 1))
}
.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after {
top: 0;
left: 0;
transform: scale(0);
transform-origin: center center
}
.mdc-text-field--filled.mdc-ripple-upgraded--unbounded .mdc-text-field__ripple::after {
top: var(--mdc-ripple-top, 0);
left: var(--mdc-ripple-left, 0)
}
.mdc-text-field--filled.mdc-ripple-upgraded--foreground-activation .mdc-text-field__ripple::after {
animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards
}
.mdc-text-field--filled.mdc-ripple-upgraded--foreground-deactivation .mdc-text-field__ripple::after {
animation: mdc-ripple-fg-opacity-out 150ms;
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))
}
.mdc-text-field--filled .mdc-text-field__ripple::after,
.mdc-text-field--filled .mdc-text-field__ripple::before {
top: calc(50% - 100%);
left: calc(50% - 100%);
width: 200%;
height: 200%
}
.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after {
width: var(--mdc-ripple-fg-size, 100%);
height: var(--mdc-ripple-fg-size, 100%)
}
.mdc-text-field__ripple {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none
}
.mdc-text-field {
border-top-left-radius: 4px;
border-top-left-radius: var(--mdc-shape-small, 4px);
border-top-right-radius: 4px;
border-top-right-radius: var(--mdc-shape-small, 4px);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
display: inline-flex;
align-items: baseline;
padding: 0 16px;
position: relative;
box-sizing: border-box;
overflow: hidden;
will-change: opacity, transform, color
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
color: rgba(0, 0, 0, .6)
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
color: rgba(0, 0, 0, .87)
}
@media all {
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder {
color: rgba(0, 0, 0, .54)
}
}
@media all {
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder {
color: rgba(0, 0, 0, .54)
}
}
.mdc-text-field .mdc-text-field__input {
caret-color: #6200ee;
caret-color: var(--mdc-theme-primary, #6200ee)
}
.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text {
color: rgba(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, .6)
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading {
color: rgba(0, 0, 0, .54)
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {
color: rgba(0, 0, 0, .54)
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--prefix {
color: rgba(0, 0, 0, .6)
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--suffix {
color: rgba(0, 0, 0, .6)
}
.mdc-text-field .mdc-floating-label {
top: 50%;
transform: translateY(-50%);
pointer-events: none
}
.mdc-text-field__input {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: 1rem;
font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
font-weight: 400;
font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
letter-spacing: .009375em;
letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, .009375em);
text-decoration: inherit;
text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
text-transform: inherit;
text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
height: 28px;
transition: opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);
width: 100%;
min-width: 0;
border: none;
border-radius: 0;
background: 0 0;
appearance: none;
padding: 0
}
.mdc-text-field__input::-ms-clear {
display: none
}
.mdc-text-field__input::-webkit-calendar-picker-indicator {
display: none
}
.mdc-text-field__input:focus {
outline: 0
}
.mdc-text-field__input:invalid {
box-shadow: none
}
@media all {
.mdc-text-field__input::placeholder {
transition: opacity 67ms 0s cubic-bezier(.4, 0, .2, 1);
opacity: 0
}
}
@media all {
.mdc-text-field__input:-ms-input-placeholder {
transition: opacity 67ms 0s cubic-bezier(.4, 0, .2, 1);
opacity: 0
}
}
@media all {
.mdc-text-field--focused .mdc-text-field__input::placeholder,
.mdc-text-field--no-label .mdc-text-field__input::placeholder {
transition-delay: 40ms;
transition-duration: 110ms;
opacity: 1
}
}
@media all {
.mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder,
.mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder {
transition-delay: 40ms;
transition-duration: 110ms;
opacity: 1
}
}
.mdc-text-field__affix {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: 1rem;
font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
font-weight: 400;
font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
letter-spacing: .009375em;
letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, .009375em);
text-decoration: inherit;
text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
text-transform: inherit;
text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
height: 28px;
transition: opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);
opacity: 0;
white-space: nowrap
}
.mdc-text-field--label-floating .mdc-text-field__affix,
.mdc-text-field--no-label .mdc-text-field__affix {
opacity: 1
}
@supports(-webkit-hyphens:none) {
.mdc-text-field--outlined .mdc-text-field__affix {
align-items: center;
align-self: center;
display: inline-flex;
height: 100%
}
}
.mdc-text-field__affix--prefix {
padding-left: 0;
padding-right: 2px
}
.mdc-text-field__affix--prefix[dir=rtl],
[dir=rtl] .mdc-text-field__affix--prefix {
padding-left: 2px;
padding-right: 0
}
.mdc-text-field--end-aligned .mdc-text-field__affix--prefix {
padding-left: 0;
padding-right: 12px
}
.mdc-text-field--end-aligned .mdc-text-field__affix--prefix[dir=rtl],
[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--prefix {
padding-left: 12px;
padding-right: 0
}
.mdc-text-field__affix--suffix {
padding-left: 12px;
padding-right: 0
}
.mdc-text-field__affix--suffix[dir=rtl],
[dir=rtl] .mdc-text-field__affix--suffix {
padding-left: 0;
padding-right: 12px
}
.mdc-text-field--end-aligned .mdc-text-field__affix--suffix {
padding-left: 2px;
padding-right: 0
}
.mdc-text-field--end-aligned .mdc-text-field__affix--suffix[dir=rtl],
[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--suffix {
padding-left: 0;
padding-right: 2px
}
.mdc-text-field--filled {
height: 56px
}
.mdc-text-field--filled .mdc-text-field__ripple::after,
.mdc-text-field--filled .mdc-text-field__ripple::before {
background-color: rgba(0, 0, 0, .87);
background-color: var(--mdc-ripple-color, rgba(0, 0, 0, .87))
}
.mdc-text-field--filled.mdc-ripple-surface--hover .mdc-text-field__ripple::before,
.mdc-text-field--filled:hover .mdc-text-field__ripple::before {
opacity: .04;
opacity: var(--mdc-ripple-hover-opacity, .04)
}
.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 {
transition-duration: 75ms;
opacity: .12;
opacity: var(--mdc-ripple-focus-opacity, .12)
}
.mdc-text-field--filled::before {
display: inline-block;
width: 0;
height: 40px;
content: "";
vertical-align: 0
}
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
background-color: #f5f5f5
}
.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, .42)
}
.mdc-text-field--filled:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, .87)
}
.mdc-text-field--filled .mdc-line-ripple::after {
border-bottom-color: #6200ee;
border-bottom-color: var(--mdc-theme-primary, #6200ee)
}
.mdc-text-field--filled .mdc-floating-label {
left: 16px;
right: initial
}
.mdc-text-field--filled .mdc-floating-label[dir=rtl],
[dir=rtl] .mdc-text-field--filled .mdc-floating-label {
left: initial;
right: 16px
}
.mdc-text-field--filled .mdc-floating-label--float-above {
transform: translateY(-106%) scale(.75)
}
.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input {
height: 100%
}
.mdc-text-field--filled.mdc-text-field--no-label .mdc-floating-label {
display: none
}
.mdc-text-field--filled.mdc-text-field--no-label::before {
display: none
}
@supports(-webkit-hyphens:none) {
.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__affix {
align-items: center;
align-self: center;
display: inline-flex;
height: 100%
}
}
.mdc-text-field--outlined {
height: 56px;
overflow: visible
}
.mdc-text-field--outlined .mdc-floating-label--float-above {
transform: translateY(-37.25px) scale(1)
}
.mdc-text-field--outlined .mdc-floating-label--float-above {
font-size: .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 {
transform: translateY(-34.75px) scale(.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 .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-text-field-outlined 250ms 1
}
@keyframes mdc-floating-label-shake-float-above-text-field-outlined {
0% {
transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(.75)
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(.75)
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(.75)
}
100% {
transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(.75)
}
}
.mdc-text-field--outlined .mdc-text-field__input {
height: 100%
}
.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, .38)
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: rgba(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: #6200ee;
border-color: var(--mdc-theme-primary, #6200ee)
}
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
border-top-left-radius: 4px;
border-top-left-radius: var(--mdc-shape-small, 4px);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 4px;
border-bottom-left-radius: var(--mdc-shape-small, 4px)
}
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl],
[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
border-top-left-radius: 0;
border-top-right-radius: 4px;
border-top-right-radius: var(--mdc-shape-small, 4px);
border-bottom-right-radius: 4px;
border-bottom-right-radius: var(--mdc-shape-small, 4px);
border-bottom-left-radius: 0
}
@supports(top:max(0%)) {
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
width: max(12px, var(--mdc-shape-small, 4px))
}
}
@supports(top:max(0%)) {
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2)
}
}
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
border-top-left-radius: 0;
border-top-right-radius: 4px;
border-top-right-radius: var(--mdc-shape-small, 4px);
border-bottom-right-radius: 4px;
border-bottom-right-radius: var(--mdc-shape-small, 4px);
border-bottom-left-radius: 0
}
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl],
[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
border-top-left-radius: 4px;
border-top-left-radius: var(--mdc-shape-small, 4px);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 4px;
border-bottom-left-radius: var(--mdc-shape-small, 4px)
}
@supports(top:max(0%)) {
.mdc-text-field--outlined {
padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px))
}
}
@supports(top:max(0%)) {
.mdc-text-field--outlined {
padding-right: max(16px, var(--mdc-shape-small, 4px))
}
}
@supports(top:max(0%)) {
.mdc-text-field--outlined+.mdc-text-field-helper-line {
padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px))
}
}
@supports(top:max(0%)) {
.mdc-text-field--outlined+.mdc-text-field-helper-line {
padding-right: max(16px, var(--mdc-shape-small, 4px))
}
}
.mdc-text-field--outlined.mdc-text-field--with-leading-icon {
padding-left: 0
}
@supports(top:max(0%)) {
.mdc-text-field--outlined.mdc-text-field--with-leading-icon {
padding-right: max(16px, var(--mdc-shape-small, 4px))
}
}
.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl],
[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon {
padding-right: 0
}
@supports(top:max(0%)) {
.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl],
[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon {
padding-left: max(16px, var(--mdc-shape-small, 4px))
}
}
.mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
padding-right: 0
}
@supports(top:max(0%)) {
.mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px))
}
}
.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl],
[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
padding-left: 0
}
@supports(top:max(0%)) {
.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl],
[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
padding-right: max(16px, calc(var(--mdc-shape-small, 4px) + 4px))
}
}
.mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
padding-left: 0;
padding-right: 0
}
.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-top: 1px
}
.mdc-text-field--outlined .mdc-text-field__ripple::after,
.mdc-text-field--outlined .mdc-text-field__ripple::before {
background-color: transparent;
background-color: var(--mdc-ripple-color, transparent)
}
.mdc-text-field--outlined .mdc-floating-label {
left: 4px;
right: initial
}
.mdc-text-field--outlined .mdc-floating-label[dir=rtl],
[dir=rtl] .mdc-text-field--outlined .mdc-floating-label {
left: initial;
right: 4px
}
.mdc-text-field--outlined .mdc-text-field__input {
display: flex;
border: none !important;
background-color: transparent
}
.mdc-text-field--outlined .mdc-notched-outline {
z-index: 1
}
.mdc-text-field--textarea {
flex-direction: column;
align-items: center;
width: auto;
height: auto;
padding: 0;
transition: none
}
.mdc-text-field--textarea .mdc-floating-label {
top: 19px
}
.mdc-text-field--textarea .mdc-floating-label:not(.mdc-floating-label--float-above) {
transform: none
}
.mdc-text-field--textarea .mdc-text-field__input {
flex-grow: 1;
height: auto;
min-height: 1.5rem;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
resize: none;
padding: 0 16px;
line-height: 1.5rem
}
.mdc-text-field--textarea.mdc-text-field--filled::before {
display: none
}
.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--float-above {
transform: translateY(-10.25px) scale(.75)
}
.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-textarea-filled 250ms 1
}
@keyframes mdc-floating-label-shake-float-above-textarea-filled {
0% {
transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(.75)
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
transform: translateX(calc(4% - 0%)) translateY(-10.25px) scale(.75)
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(calc(-4% - 0%)) translateY(-10.25px) scale(.75)
}
100% {
transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(.75)
}
}
.mdc-text-field--textarea.mdc-text-field--filled .mdc-text-field__input {
margin-top: 23px;
margin-bottom: 9px
}
.mdc-text-field--textarea.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input {
margin-top: 16px;
margin-bottom: 16px
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-top: 0
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {
transform: translateY(-27.25px) scale(1)
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {
font-size: .75rem
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above {
transform: translateY(-24.75px) scale(.75)
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above {
font-size: 1rem
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-textarea-outlined 250ms 1
}
@keyframes mdc-floating-label-shake-float-above-textarea-outlined {
0% {
transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(.75)
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(.75)
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(.75)
}
100% {
transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(.75)
}
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-text-field__input {
margin-top: 16px;
margin-bottom: 16px
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label {
top: 18px
}
.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field__input {
margin-bottom: 2px
}
.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter {
align-self: flex-end;
padding: 0 16px
}
.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::after {
display: inline-block;
width: 0;
height: 16px;
content: "";
vertical-align: -16px
}
.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::before {
display: none
}
.mdc-text-field__resizer {
align-self: stretch;
display: inline-flex;
flex-direction: column;
flex-grow: 1;
max-height: 100%;
max-width: 100%;
min-height: 56px;
min-width: fit-content;
min-width: -moz-available;
min-width: -webkit-fill-available;
overflow: hidden;
resize: both
}
.mdc-text-field--filled .mdc-text-field__resizer {
transform: translateY(-1px)
}
.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field-character-counter,
.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field__input {
transform: translateY(1px)
}
.mdc-text-field--outlined .mdc-text-field__resizer {
transform: translateX(-1px) translateY(-1px)
}
.mdc-text-field--outlined .mdc-text-field__resizer[dir=rtl],
[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer {
transform: translateX(1px) translateY(-1px)
}
.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 {
transform: translateX(1px) translateY(1px)
}
.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter[dir=rtl],
.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input[dir=rtl],
[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter,
[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input {
transform: translateX(-1px) translateY(1px)
}
.mdc-text-field--with-leading-icon {
padding-left: 0;
padding-right: 16px
}
.mdc-text-field--with-leading-icon[dir=rtl],
[dir=rtl] .mdc-text-field--with-leading-icon {
padding-left: 16px;
padding-right: 0
}
.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label {
max-width: calc(100% - 48px);
left: 48px;
right: initial
}
.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label[dir=rtl],
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label {
left: initial;
right: 48px
}
.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label--float-above {
max-width: calc(100% / .75 - 64px / .75)
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label {
left: 36px;
right: initial
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label[dir=rtl],
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label {
left: initial;
right: 36px
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
max-width: calc(100% - 60px)
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
transform: translateY(-37.25px) translateX(-32px) scale(1)
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above[dir=rtl],
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
transform: translateY(-37.25px) translateX(32px) scale(1)
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
font-size: .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 {
transform: translateY(-34.75px) translateX(-32px) scale(.75)
}
.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],
[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 {
transform: translateY(-34.75px) translateX(32px) scale(.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 {
animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1
}
@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon {
0% {
transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(.75)
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(.75)
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(.75)
}
100% {
transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(.75)
}
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl] .mdc-floating-label--shake,
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1
}
@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl {
0% {
transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(.75)
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(.75)
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(.75)
}
100% {
transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(.75)
}
}
.mdc-text-field--with-trailing-icon {
padding-left: 16px;
padding-right: 0
}
.mdc-text-field--with-trailing-icon[dir=rtl],
[dir=rtl] .mdc-text-field--with-trailing-icon {
padding-left: 0;
padding-right: 16px
}
.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label {
max-width: calc(100% - 64px)
}
.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above {
max-width: calc(100% / .75 - 64px / .75)
}
.mdc-text-field--with-trailing-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
max-width: calc(100% - 60px)
}
.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
padding-left: 0;
padding-right: 0
}
.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label {
max-width: calc(100% - 96px)
}
.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above {
max-width: calc(100% / .75 - 96px / .75)
}
.mdc-text-field-helper-line {
display: flex;
justify-content: space-between;
box-sizing: border-box
}
.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(98, 0, 238, .87)
}
.mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--focused .mdc-notched-outline__trailing {
border-width: 2px
}
.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--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-top: 2px
}
.mdc-text-field--focused.mdc-text-field--outlined.mdc-text-field--textarea .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-top: 0
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {
border-bottom-color: #b00020;
border-bottom-color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
border-bottom-color: #b00020;
border-bottom-color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label {
color: #b00020;
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;
color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid .mdc-text-field__input {
caret-color: #b00020;
caret-color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {
color: #b00020;
color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
border-bottom-color: #b00020;
border-bottom-color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
border-color: #b00020;
border-color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: #b00020;
border-color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
border-color: #b00020;
border-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--disabled {
pointer-events: none
}
.mdc-text-field--disabled .mdc-text-field__input {
color: rgba(0, 0, 0, .38)
}
@media all {
.mdc-text-field--disabled .mdc-text-field__input::placeholder {
color: rgba(0, 0, 0, .38)
}
}
@media all {
.mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {
color: rgba(0, 0, 0, .38)
}
}
.mdc-text-field--disabled .mdc-floating-label {
color: rgba(0, 0, 0, .38)
}
.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text {
color: rgba(0, 0, 0, .38)
}
.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, .38)
}
.mdc-text-field--disabled .mdc-text-field__icon--leading {
color: rgba(0, 0, 0, .3)
}
.mdc-text-field--disabled .mdc-text-field__icon--trailing {
color: rgba(0, 0, 0, .3)
}
.mdc-text-field--disabled .mdc-text-field__affix--prefix {
color: rgba(0, 0, 0, .38)
}
.mdc-text-field--disabled .mdc-text-field__affix--suffix {
color: rgba(0, 0, 0, .38)
}
.mdc-text-field--disabled .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, .06)
}
.mdc-text-field--disabled .mdc-notched-outline__leading,
.mdc-text-field--disabled .mdc-notched-outline__notch,
.mdc-text-field--disabled .mdc-notched-outline__trailing {
border-color: rgba(0, 0, 0, .06)
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-text-field__input::placeholder {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-floating-label {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-text-field-character-counter,
.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-character-counter {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-text-field__icon--leading {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-text-field__icon--trailing {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-text-field__affix--prefix {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-text-field__affix--suffix {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-line-ripple::before {
border-bottom-color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-notched-outline__leading,
.mdc-text-field--disabled .mdc-notched-outline__notch,
.mdc-text-field--disabled .mdc-notched-outline__trailing {
border-color: GrayText
}
}
@media screen and (forced-colors:active) {
.mdc-text-field--disabled .mdc-text-field__input {
background-color: Window
}
.mdc-text-field--disabled .mdc-floating-label {
z-index: 1
}
}
.mdc-text-field--disabled .mdc-floating-label {
cursor: default
}
.mdc-text-field--disabled.mdc-text-field--filled {
background-color: #fafafa
}
.mdc-text-field--disabled.mdc-text-field--filled .mdc-text-field__ripple {
display: none
}
.mdc-text-field--disabled .mdc-text-field__input {
pointer-events: auto
}
.mdc-text-field--end-aligned .mdc-text-field__input {
text-align: right
}
.mdc-text-field--end-aligned .mdc-text-field__input[dir=rtl],
[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__input {
text-align: left
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix,
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input {
direction: ltr
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix {
padding-left: 0;
padding-right: 2px
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix {
padding-left: 12px;
padding-right: 0
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--leading,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--leading {
order: 1
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix {
order: 2
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input {
order: 3
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix {
order: 4
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--trailing,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--trailing {
order: 5
}
.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__input,
[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__input {
text-align: right
}
.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--prefix,
[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--prefix {
padding-right: 12px
}
.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--suffix,
[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--suffix {
padding-left: 2px
}
.mdc-text-field-helper-text {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: .75rem;
font-size: var(--mdc-typography-caption-font-size, .75rem);
line-height: 1.25rem;
line-height: var(--mdc-typography-caption-line-height, 1.25rem);
font-weight: 400;
font-weight: var(--mdc-typography-caption-font-weight, 400);
letter-spacing: .0333333333em;
letter-spacing: var(--mdc-typography-caption-letter-spacing, .0333333333em);
text-decoration: inherit;
text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
text-transform: inherit;
text-transform: var(--mdc-typography-caption-text-transform, inherit);
display: block;
margin-top: 0;
line-height: normal;
margin: 0;
opacity: 0;
will-change: opacity;
transition: opacity 150ms 0s cubic-bezier(.4, 0, .2, 1)
}
.mdc-text-field-helper-text::before {
display: inline-block;
width: 0;
height: 16px;
content: "";
vertical-align: 0
}
.mdc-text-field-helper-text--persistent {
transition: none;
opacity: 1;
will-change: initial
}
.mdc-text-field-character-counter {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: .75rem;
font-size: var(--mdc-typography-caption-font-size, .75rem);
line-height: 1.25rem;
line-height: var(--mdc-typography-caption-line-height, 1.25rem);
font-weight: 400;
font-weight: var(--mdc-typography-caption-font-weight, 400);
letter-spacing: .0333333333em;
letter-spacing: var(--mdc-typography-caption-letter-spacing, .0333333333em);
text-decoration: inherit;
text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
text-transform: inherit;
text-transform: var(--mdc-typography-caption-text-transform, inherit);
display: block;
margin-top: 0;
line-height: normal;
margin-left: auto;
margin-right: 0;
padding-left: 16px;
padding-right: 0;
white-space: nowrap
}
.mdc-text-field-character-counter::before {
display: inline-block;
width: 0;
height: 16px;
content: "";
vertical-align: 0
}
.mdc-text-field-character-counter[dir=rtl],
[dir=rtl] .mdc-text-field-character-counter {
margin-left: 0;
margin-right: auto
}
.mdc-text-field-character-counter[dir=rtl],
[dir=rtl] .mdc-text-field-character-counter {
padding-left: 0;
padding-right: 16px
}
.mdc-text-field__icon {
align-self: center;
cursor: pointer
}
.mdc-text-field__icon:not([tabindex]),
.mdc-text-field__icon[tabindex="-1"] {
cursor: default;
pointer-events: none
}
.mdc-text-field__icon svg {
display: block
}
.mdc-text-field__icon--leading {
margin-left: 16px;
margin-right: 8px
}
.mdc-text-field__icon--leading[dir=rtl],
[dir=rtl] .mdc-text-field__icon--leading {
margin-left: 8px;
margin-right: 16px
}
.mdc-text-field__icon--trailing {
padding: 12px;
margin-left: 0px;
margin-right: 0px
}
.mdc-text-field__icon--trailing[dir=rtl],
[dir=rtl] .mdc-text-field__icon--trailing {
margin-left: 0px;
margin-right: 0px
}
.material-icons {
font-family: var(--mdc-icon-font, "Material Icons");
font-weight: 400;
font-style: normal;
font-size: var(--mdc-icon-size, 24px);
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "liga"
}
:host {
display: inline-flex;
flex-direction: column;
outline: 0
}
.mdc-text-field {
width: 100%
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, .42);
border-bottom-color: var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, .42))
}
.mdc-text-field:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, .87);
border-bottom-color: var(--mdc-text-field-hover-line-color, rgba(0, 0, 0, .87))
}
.mdc-text-field.mdc-text-field--disabled .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, .06);
border-bottom-color: var(--mdc-text-field-disabled-line-color, rgba(0, 0, 0, .06))
}
.mdc-text-field.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
border-bottom-color: #b00020;
border-bottom-color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field__input {
direction: inherit
}
mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-outlined-idle-border-color, rgba(0, 0, 0, 0.38))
}
:host(:not([disabled]):hover) :not(.mdc-text-field--invalid):not(.mdc-text-field--focused) mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-outlined-hover-border-color, rgba(0, 0, 0, 0.87))
}
:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--outlined) {
background-color: var(--mdc-text-field-fill-color, #f5f5f5)
}
:host(:not([disabled])) .mdc-text-field.mdc-text-field--invalid mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-error-color, var(--mdc-theme-error, #b00020))
}
:host(:not([disabled])) .mdc-text-field.mdc-text-field--invalid .mdc-text-field__icon,
:host(:not([disabled])) .mdc-text-field.mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-character-counter {
color: var(--mdc-text-field-error-color, var(--mdc-theme-error, #b00020))
}
:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label,
:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label::after {
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, .6))
}
:host(:not([disabled])) .mdc-text-field.mdc-text-field--focused mwc-notched-outline {
--mdc-notched-outline-stroke-width: 2px
}
:host(:not([disabled])) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-focused-label-color, var(--mdc-theme-primary, rgba(98, 0, 238, 0.87)))
}
:host(:not([disabled])) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) .mdc-floating-label {
color: #6200ee;
color: var(--mdc-theme-primary, #6200ee)
}
:host(:not([disabled])) .mdc-text-field .mdc-text-field__input {
color: var(--mdc-text-field-ink-color, rgba(0, 0, 0, .87))
}
:host(:not([disabled])) .mdc-text-field .mdc-text-field__input::placeholder {
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, .6))
}
:host(:not([disabled])) .mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg),
:host(:not([disabled])) .mdc-text-field-helper-line:not(.mdc-text-field--invalid) .mdc-text-field-character-counter {
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, .6))
}
:host([disabled]) .mdc-text-field:not(.mdc-text-field--outlined) {
background-color: var(--mdc-text-field-disabled-fill-color, #fafafa)
}
:host([disabled]) .mdc-text-field.mdc-text-field--outlined mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-outlined-disabled-border-color, rgba(0, 0, 0, 0.06))
}
:host([disabled]) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label,
:host([disabled]) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label::after {
color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, .38))
}
:host([disabled]) .mdc-text-field .mdc-text-field__input,
:host([disabled]) .mdc-text-field .mdc-text-field__input::placeholder {
color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, .38))
}
:host([disabled]) .mdc-text-field-helper-line .mdc-text-field-character-counter,
:host([disabled]) .mdc-text-field-helper-line .mdc-text-field-helper-text {
color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, .38))
}
,
.mdc-text-field__input {
width: var(--ha-textfield-input-width, 100%)
}
.mdc-text-field:not(.mdc-text-field--with-leading-icon) {
padding: var(--text-field-padding, 0px 16px)
}
.mdc-text-field__affix--suffix {
padding-left: var(--text-field-suffix-padding-left, 12px);
padding-right: var(--text-field-suffix-padding-right, 0px);
padding-inline-start: var(--text-field-suffix-padding-left, 12px);
padding-inline-end: var(--text-field-suffix-padding-right, 0px);
direction: ltr
}
.mdc-text-field--with-leading-icon {
padding-inline-start: var(--text-field-suffix-padding-left, 0px);
padding-inline-end: var(--text-field-suffix-padding-right, 16px);
direction: var(--direction)
}
.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
padding-left: var(--text-field-suffix-padding-left, 0px);
padding-right: var(--text-field-suffix-padding-right, 0px);
padding-inline-start: var(--text-field-suffix-padding-left, 0px);
padding-inline-end: var(--text-field-suffix-padding-right, 0px)
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--suffix {
color: var(--secondary-text-color)
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon {
color: var(--secondary-text-color)
}
.mdc-text-field__icon--leading {
margin-inline-start: 16px;
margin-inline-end: 8px;
direction: var(--direction)
}
.mdc-text-field__icon--trailing {
padding: var(--textfield-icon-trailing-padding, 12px)
}
.mdc-floating-label:not(.mdc-floating-label--float-above) {
text-overflow: ellipsis;
width: inherit;
padding-right: 30px;
padding-inline-end: 30px;
padding-inline-start: initial;
box-sizing: border-box;
direction: var(--direction)
}
input {
text-align: var(--text-field-text-align, start)
}
::-ms-reveal {
display: none
}
:host([no-spinner]) input::-webkit-inner-spin-button,
:host([no-spinner]) input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}
:host([no-spinner]) input[type=number] {
-moz-appearance: textfield
}
.mdc-text-field__ripple {
overflow: hidden
}
.mdc-text-field {
overflow: var(--text-field-overflow)
}
.mdc-floating-label {
inset-inline-start: 16px !important;
inset-inline-end: initial !important;
transform-origin: var(--float-start);
direction: var(--direction);
text-align: var(--float-start)
}
.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label {
max-width: calc(100% - 48px - var(--text-field-suffix-padding-left, 0px));
inset-inline-start: calc(48px + var(--text-field-suffix-padding-left, 0px)) !important;
inset-inline-end: initial !important;
direction: var(--direction)
}
.mdc-text-field__input[type=number] {
direction: var(--direction)
}
.mdc-text-field__affix--prefix {
padding-right: var(--text-field-prefix-padding-right, 2px);
padding-inline-end: var(--text-field-prefix-padding-right, 2px);
padding-inline-start: initial
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--prefix {
color: var(--mdc-text-field-label-ink-color)
}
,
</style><!---->
<style>
ha-auth-textfield {
display: inline-flex;
flex-direction: column;
outline: 0
}
ha-auth-textfield:not([disabled]):hover :not(.mdc-text-field--invalid):not(.mdc-text-field--focused) mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-outlined-hover-border-color,
rgba(0, 0, 0, 0.87))
}
ha-auth-textfield:not([disabled]) .mdc-text-field:not(.mdc-text-field--outlined) {
background-color: var(--mdc-text-field-fill-color, #f5f5f5)
}
ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--invalid mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-error-color,
var(--mdc-theme-error, #b00020))
}
ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--invalid .mdc-text-field__icon,
ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-character-counter {
color: var(--mdc-text-field-error-color, var(--mdc-theme-error, #b00020))
}
ha-auth-textfield:not([disabled]) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label,
ha-auth-textfield:not([disabled]) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label::after {
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, .6))
}
ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--focused mwc-notched-outline {
--mdc-notched-outline-stroke-width: 2px
}
ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-focused-label-color,
var(--mdc-theme-primary, rgba(98, 0, 238, 0.87)))
}
ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) .mdc-floating-label {
color: #6200ee;
color: var(--mdc-theme-primary, #6200ee)
}
ha-auth-textfield:not([disabled]) .mdc-text-field .mdc-text-field__input {
color: var(--mdc-text-field-ink-color, rgba(0, 0, 0, .87))
}
ha-auth-textfield:not([disabled]) .mdc-text-field .mdc-text-field__input::placeholder {
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, .6))
}
ha-auth-textfield:not([disabled]) .mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg),
ha-auth-textfield:not([disabled]) .mdc-text-field-helper-line:not(.mdc-text-field--invalid) .mdc-text-field-character-counter {
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, .6))
}
ha-auth-textfield[disabled] .mdc-text-field:not(.mdc-text-field--outlined) {
background-color: var(--mdc-text-field-disabled-fill-color, #fafafa)
}
ha-auth-textfield[disabled] .mdc-text-field.mdc-text-field--outlined mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-outlined-disabled-border-color,
rgba(0, 0, 0, 0.06))
}
ha-auth-textfield[disabled] .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label,
ha-auth-textfield[disabled] .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label::after {
color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, .38))
}
ha-auth-textfield[disabled] .mdc-text-field .mdc-text-field__input,
ha-auth-textfield[disabled] .mdc-text-field .mdc-text-field__input::placeholder {
color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, .38))
}
ha-auth-textfield[disabled] .mdc-text-field-helper-line .mdc-text-field-character-counter,
ha-auth-textfield[disabled] .mdc-text-field-helper-line .mdc-text-field-helper-text {
color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, .38))
}
ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) .mdc-floating-label {
color: var(--mdc-theme-primary, #6200ee)
}
ha-auth-textfield[no-spinner] input::-webkit-inner-spin-button,
ha-auth-textfield[no-spinner] input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}
ha-auth-textfield[no-spinner] input[type=number] {
-moz-appearance: textfield
}
</style> <!--?lit$8834407684$--> <label class="mdc-text-field mdc-text-field--filled mdc-text-field--focused"> <!--?lit$8834407684$--> <span class="mdc-text-field__ripple"></span> <!--?lit$8834407684$--> <span class="mdc-floating-label"
id="username"><!--?lit$8834407684$-->Username</span> <!--?lit$8834407684$--> <!--?lit$8834407684$--> <!--?lit$8834407684$--><input class="mdc-text-field__input" aria-describedby="helper-text" type="text" placeholder="" required=""
name="username" autofocus="" autocomplete="username" aria-labelledby="username" aria-controls="helper-text"> <!--?lit$8834407684$--> <!--?lit$8834407684$--> <!--?lit$8834407684$--> <span
class="mdc-line-ripple mdc-line-ripple--active"></span> </label> <!--?lit$8834407684$-->
<div class="mdc-text-field-helper-line">
<div id="helper-text" class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent "><!--?lit$8834407684$--></div> <!--?lit$8834407684$-->
</div>
</ha-auth-textfield> <!--?lit$8834407684$-->
</ha-auth-form-string> <!----><!----> <!--?lit$8834407684$--> <!--?lit$8834407684$--><ha-auth-form-string own-margin=""><!---->
<style>
ha-auth-form-string {
display: block;
position: relative
}
ha-auth-form-string[own-margin] {
margin-bottom: 5px
}
ha-auth-form-string ha-auth-textfield {
display: block !important
}
ha-auth-form-string ha-icon-button {
position: absolute;
top: 8px;
right: 8px;
inset-inline-start: initial;
inset-inline-end: 8px;
--mdc-icon-button-size: 40px;
--mdc-icon-size: 20px;
color: var(--secondary-text-color);
direction: var(--direction)
}
</style> <ha-auth-textfield helperpersistent="">
<style>
.mdc-floating-label {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: 1rem;
font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
font-weight: 400;
font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
letter-spacing: .009375em;
letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, .009375em);
text-decoration: inherit;
text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
text-transform: inherit;
text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
position: absolute;
left: 0;
-webkit-transform-origin: left top;
transform-origin: left top;
line-height: 1.15rem;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
cursor: text;
overflow: hidden;
will-change: transform;
transition: transform 150ms cubic-bezier(.4, 0, .2, 1), color 150ms cubic-bezier(.4, 0, .2, 1)
}
.mdc-floating-label[dir=rtl],
[dir=rtl] .mdc-floating-label {
right: 0;
left: auto;
-webkit-transform-origin: right top;
transform-origin: right top;
text-align: right
}
.mdc-floating-label--float-above {
cursor: auto
}
.mdc-floating-label--required::after {
margin-left: 1px;
margin-right: 0px;
content: "*"
}
.mdc-floating-label--required[dir=rtl]::after,
[dir=rtl] .mdc-floating-label--required::after {
margin-left: 0;
margin-right: 1px
}
.mdc-floating-label--float-above {
transform: translateY(-106%) scale(.75)
}
.mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-standard 250ms 1
}
@keyframes mdc-floating-label-shake-float-above-standard {
0% {
transform: translateX(calc(0 - 0%)) translateY(-106%) scale(.75)
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
transform: translateX(calc(4% - 0%)) translateY(-106%) scale(.75)
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(.75)
}
100% {
transform: translateX(calc(0 - 0%)) translateY(-106%) scale(.75)
}
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom-style: solid;
content: ""
}
.mdc-line-ripple::before {
border-bottom-width: 1px
}
.mdc-line-ripple::before {
z-index: 1
}
.mdc-line-ripple::after {
transform: scaleX(0);
border-bottom-width: 2px;
opacity: 0;
z-index: 2
}
.mdc-line-ripple::after {
transition: transform 180ms cubic-bezier(.4, 0, .2, 1), opacity 180ms cubic-bezier(.4, 0, .2, 1)
}
.mdc-line-ripple--active::after {
transform: scaleX(1);
opacity: 1
}
.mdc-line-ripple--deactivating::after {
opacity: 0
}
.mdc-notched-outline {
display: flex;
position: absolute;
top: 0;
right: 0;
left: 0;
box-sizing: border-box;
width: 100%;
max-width: 100%;
height: 100%;
text-align: left;
pointer-events: none
}
.mdc-notched-outline[dir=rtl],
[dir=rtl] .mdc-notched-outline {
text-align: right
}
.mdc-notched-outline__leading,
.mdc-notched-outline__notch,
.mdc-notched-outline__trailing {
box-sizing: border-box;
height: 100%;
border-top: 1px solid;
border-bottom: 1px solid;
pointer-events: none
}
.mdc-notched-outline__leading {
border-left: 1px solid;
border-right: none;
width: 12px
}
.mdc-notched-outline__leading[dir=rtl],
[dir=rtl] .mdc-notched-outline__leading {
border-left: none;
border-right: 1px solid
}
.mdc-notched-outline__trailing {
border-left: none;
border-right: 1px solid;
flex-grow: 1
}
.mdc-notched-outline__trailing[dir=rtl],
[dir=rtl] .mdc-notched-outline__trailing {
border-left: 1px solid;
border-right: none
}
.mdc-notched-outline__notch {
flex: 0 0 auto;
width: auto;
max-width: calc(100% - 12px * 2)
}
.mdc-notched-outline .mdc-floating-label {
display: inline-block;
position: relative;
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 {
padding-left: 0;
padding-right: 8px;
border-top: none
}
.mdc-notched-outline--notched .mdc-notched-outline__notch[dir=rtl],
[dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-left: 8px;
padding-right: 0
}
.mdc-notched-outline--no-label .mdc-notched-outline__notch {
display: none
}
@keyframes mdc-ripple-fg-radius-in {
from {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)
}
to {
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))
}
}
@keyframes mdc-ripple-fg-opacity-in {
from {
animation-timing-function: linear;
opacity: 0
}
to {
opacity: var(--mdc-ripple-fg-opacity, 0)
}
}
@keyframes mdc-ripple-fg-opacity-out {
from {
animation-timing-function: linear;
opacity: var(--mdc-ripple-fg-opacity, 0)
}
to {
opacity: 0
}
}
.mdc-text-field--filled {
--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: transparent;
will-change: transform, opacity
}
.mdc-text-field--filled .mdc-text-field__ripple::after,
.mdc-text-field--filled .mdc-text-field__ripple::before {
position: absolute;
border-radius: 50%;
opacity: 0;
pointer-events: none;
content: ""
}
.mdc-text-field--filled .mdc-text-field__ripple::before {
transition: opacity 15ms linear, background-color 15ms linear;
z-index: 1;
z-index: var(--mdc-ripple-z-index, 1)
}
.mdc-text-field--filled .mdc-text-field__ripple::after {
z-index: 0;
z-index: var(--mdc-ripple-z-index, 0)
}
.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::before {
transform: scale(var(--mdc-ripple-fg-scale, 1))
}
.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after {
top: 0;
left: 0;
transform: scale(0);
transform-origin: center center
}
.mdc-text-field--filled.mdc-ripple-upgraded--unbounded .mdc-text-field__ripple::after {
top: var(--mdc-ripple-top, 0);
left: var(--mdc-ripple-left, 0)
}
.mdc-text-field--filled.mdc-ripple-upgraded--foreground-activation .mdc-text-field__ripple::after {
animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards
}
.mdc-text-field--filled.mdc-ripple-upgraded--foreground-deactivation .mdc-text-field__ripple::after {
animation: mdc-ripple-fg-opacity-out 150ms;
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))
}
.mdc-text-field--filled .mdc-text-field__ripple::after,
.mdc-text-field--filled .mdc-text-field__ripple::before {
top: calc(50% - 100%);
left: calc(50% - 100%);
width: 200%;
height: 200%
}
.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after {
width: var(--mdc-ripple-fg-size, 100%);
height: var(--mdc-ripple-fg-size, 100%)
}
.mdc-text-field__ripple {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none
}
.mdc-text-field {
border-top-left-radius: 4px;
border-top-left-radius: var(--mdc-shape-small, 4px);
border-top-right-radius: 4px;
border-top-right-radius: var(--mdc-shape-small, 4px);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
display: inline-flex;
align-items: baseline;
padding: 0 16px;
position: relative;
box-sizing: border-box;
overflow: hidden;
will-change: opacity, transform, color
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
color: rgba(0, 0, 0, .6)
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
color: rgba(0, 0, 0, .87)
}
@media all {
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder {
color: rgba(0, 0, 0, .54)
}
}
@media all {
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder {
color: rgba(0, 0, 0, .54)
}
}
.mdc-text-field .mdc-text-field__input {
caret-color: #6200ee;
caret-color: var(--mdc-theme-primary, #6200ee)
}
.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text {
color: rgba(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, .6)
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading {
color: rgba(0, 0, 0, .54)
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {
color: rgba(0, 0, 0, .54)
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--prefix {
color: rgba(0, 0, 0, .6)
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--suffix {
color: rgba(0, 0, 0, .6)
}
.mdc-text-field .mdc-floating-label {
top: 50%;
transform: translateY(-50%);
pointer-events: none
}
.mdc-text-field__input {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: 1rem;
font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
font-weight: 400;
font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
letter-spacing: .009375em;
letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, .009375em);
text-decoration: inherit;
text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
text-transform: inherit;
text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
height: 28px;
transition: opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);
width: 100%;
min-width: 0;
border: none;
border-radius: 0;
background: 0 0;
appearance: none;
padding: 0
}
.mdc-text-field__input::-ms-clear {
display: none
}
.mdc-text-field__input::-webkit-calendar-picker-indicator {
display: none
}
.mdc-text-field__input:focus {
outline: 0
}
.mdc-text-field__input:invalid {
box-shadow: none
}
@media all {
.mdc-text-field__input::placeholder {
transition: opacity 67ms 0s cubic-bezier(.4, 0, .2, 1);
opacity: 0
}
}
@media all {
.mdc-text-field__input:-ms-input-placeholder {
transition: opacity 67ms 0s cubic-bezier(.4, 0, .2, 1);
opacity: 0
}
}
@media all {
.mdc-text-field--focused .mdc-text-field__input::placeholder,
.mdc-text-field--no-label .mdc-text-field__input::placeholder {
transition-delay: 40ms;
transition-duration: 110ms;
opacity: 1
}
}
@media all {
.mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder,
.mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder {
transition-delay: 40ms;
transition-duration: 110ms;
opacity: 1
}
}
.mdc-text-field__affix {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: 1rem;
font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
font-weight: 400;
font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
letter-spacing: .009375em;
letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, .009375em);
text-decoration: inherit;
text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
text-transform: inherit;
text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
height: 28px;
transition: opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);
opacity: 0;
white-space: nowrap
}
.mdc-text-field--label-floating .mdc-text-field__affix,
.mdc-text-field--no-label .mdc-text-field__affix {
opacity: 1
}
@supports(-webkit-hyphens:none) {
.mdc-text-field--outlined .mdc-text-field__affix {
align-items: center;
align-self: center;
display: inline-flex;
height: 100%
}
}
.mdc-text-field__affix--prefix {
padding-left: 0;
padding-right: 2px
}
.mdc-text-field__affix--prefix[dir=rtl],
[dir=rtl] .mdc-text-field__affix--prefix {
padding-left: 2px;
padding-right: 0
}
.mdc-text-field--end-aligned .mdc-text-field__affix--prefix {
padding-left: 0;
padding-right: 12px
}
.mdc-text-field--end-aligned .mdc-text-field__affix--prefix[dir=rtl],
[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--prefix {
padding-left: 12px;
padding-right: 0
}
.mdc-text-field__affix--suffix {
padding-left: 12px;
padding-right: 0
}
.mdc-text-field__affix--suffix[dir=rtl],
[dir=rtl] .mdc-text-field__affix--suffix {
padding-left: 0;
padding-right: 12px
}
.mdc-text-field--end-aligned .mdc-text-field__affix--suffix {
padding-left: 2px;
padding-right: 0
}
.mdc-text-field--end-aligned .mdc-text-field__affix--suffix[dir=rtl],
[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--suffix {
padding-left: 0;
padding-right: 2px
}
.mdc-text-field--filled {
height: 56px
}
.mdc-text-field--filled .mdc-text-field__ripple::after,
.mdc-text-field--filled .mdc-text-field__ripple::before {
background-color: rgba(0, 0, 0, .87);
background-color: var(--mdc-ripple-color, rgba(0, 0, 0, .87))
}
.mdc-text-field--filled.mdc-ripple-surface--hover .mdc-text-field__ripple::before,
.mdc-text-field--filled:hover .mdc-text-field__ripple::before {
opacity: .04;
opacity: var(--mdc-ripple-hover-opacity, .04)
}
.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 {
transition-duration: 75ms;
opacity: .12;
opacity: var(--mdc-ripple-focus-opacity, .12)
}
.mdc-text-field--filled::before {
display: inline-block;
width: 0;
height: 40px;
content: "";
vertical-align: 0
}
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
background-color: #f5f5f5
}
.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, .42)
}
.mdc-text-field--filled:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, .87)
}
.mdc-text-field--filled .mdc-line-ripple::after {
border-bottom-color: #6200ee;
border-bottom-color: var(--mdc-theme-primary, #6200ee)
}
.mdc-text-field--filled .mdc-floating-label {
left: 16px;
right: initial
}
.mdc-text-field--filled .mdc-floating-label[dir=rtl],
[dir=rtl] .mdc-text-field--filled .mdc-floating-label {
left: initial;
right: 16px
}
.mdc-text-field--filled .mdc-floating-label--float-above {
transform: translateY(-106%) scale(.75)
}
.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input {
height: 100%
}
.mdc-text-field--filled.mdc-text-field--no-label .mdc-floating-label {
display: none
}
.mdc-text-field--filled.mdc-text-field--no-label::before {
display: none
}
@supports(-webkit-hyphens:none) {
.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__affix {
align-items: center;
align-self: center;
display: inline-flex;
height: 100%
}
}
.mdc-text-field--outlined {
height: 56px;
overflow: visible
}
.mdc-text-field--outlined .mdc-floating-label--float-above {
transform: translateY(-37.25px) scale(1)
}
.mdc-text-field--outlined .mdc-floating-label--float-above {
font-size: .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 {
transform: translateY(-34.75px) scale(.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 .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-text-field-outlined 250ms 1
}
@keyframes mdc-floating-label-shake-float-above-text-field-outlined {
0% {
transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(.75)
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(.75)
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(.75)
}
100% {
transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(.75)
}
}
.mdc-text-field--outlined .mdc-text-field__input {
height: 100%
}
.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, .38)
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: rgba(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: #6200ee;
border-color: var(--mdc-theme-primary, #6200ee)
}
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
border-top-left-radius: 4px;
border-top-left-radius: var(--mdc-shape-small, 4px);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 4px;
border-bottom-left-radius: var(--mdc-shape-small, 4px)
}
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl],
[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
border-top-left-radius: 0;
border-top-right-radius: 4px;
border-top-right-radius: var(--mdc-shape-small, 4px);
border-bottom-right-radius: 4px;
border-bottom-right-radius: var(--mdc-shape-small, 4px);
border-bottom-left-radius: 0
}
@supports(top:max(0%)) {
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
width: max(12px, var(--mdc-shape-small, 4px))
}
}
@supports(top:max(0%)) {
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2)
}
}
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
border-top-left-radius: 0;
border-top-right-radius: 4px;
border-top-right-radius: var(--mdc-shape-small, 4px);
border-bottom-right-radius: 4px;
border-bottom-right-radius: var(--mdc-shape-small, 4px);
border-bottom-left-radius: 0
}
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl],
[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
border-top-left-radius: 4px;
border-top-left-radius: var(--mdc-shape-small, 4px);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 4px;
border-bottom-left-radius: var(--mdc-shape-small, 4px)
}
@supports(top:max(0%)) {
.mdc-text-field--outlined {
padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px))
}
}
@supports(top:max(0%)) {
.mdc-text-field--outlined {
padding-right: max(16px, var(--mdc-shape-small, 4px))
}
}
@supports(top:max(0%)) {
.mdc-text-field--outlined+.mdc-text-field-helper-line {
padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px))
}
}
@supports(top:max(0%)) {
.mdc-text-field--outlined+.mdc-text-field-helper-line {
padding-right: max(16px, var(--mdc-shape-small, 4px))
}
}
.mdc-text-field--outlined.mdc-text-field--with-leading-icon {
padding-left: 0
}
@supports(top:max(0%)) {
.mdc-text-field--outlined.mdc-text-field--with-leading-icon {
padding-right: max(16px, var(--mdc-shape-small, 4px))
}
}
.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl],
[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon {
padding-right: 0
}
@supports(top:max(0%)) {
.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl],
[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon {
padding-left: max(16px, var(--mdc-shape-small, 4px))
}
}
.mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
padding-right: 0
}
@supports(top:max(0%)) {
.mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px))
}
}
.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl],
[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
padding-left: 0
}
@supports(top:max(0%)) {
.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl],
[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
padding-right: max(16px, calc(var(--mdc-shape-small, 4px) + 4px))
}
}
.mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
padding-left: 0;
padding-right: 0
}
.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-top: 1px
}
.mdc-text-field--outlined .mdc-text-field__ripple::after,
.mdc-text-field--outlined .mdc-text-field__ripple::before {
background-color: transparent;
background-color: var(--mdc-ripple-color, transparent)
}
.mdc-text-field--outlined .mdc-floating-label {
left: 4px;
right: initial
}
.mdc-text-field--outlined .mdc-floating-label[dir=rtl],
[dir=rtl] .mdc-text-field--outlined .mdc-floating-label {
left: initial;
right: 4px
}
.mdc-text-field--outlined .mdc-text-field__input {
display: flex;
border: none !important;
background-color: transparent
}
.mdc-text-field--outlined .mdc-notched-outline {
z-index: 1
}
.mdc-text-field--textarea {
flex-direction: column;
align-items: center;
width: auto;
height: auto;
padding: 0;
transition: none
}
.mdc-text-field--textarea .mdc-floating-label {
top: 19px
}
.mdc-text-field--textarea .mdc-floating-label:not(.mdc-floating-label--float-above) {
transform: none
}
.mdc-text-field--textarea .mdc-text-field__input {
flex-grow: 1;
height: auto;
min-height: 1.5rem;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
resize: none;
padding: 0 16px;
line-height: 1.5rem
}
.mdc-text-field--textarea.mdc-text-field--filled::before {
display: none
}
.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--float-above {
transform: translateY(-10.25px) scale(.75)
}
.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-textarea-filled 250ms 1
}
@keyframes mdc-floating-label-shake-float-above-textarea-filled {
0% {
transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(.75)
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
transform: translateX(calc(4% - 0%)) translateY(-10.25px) scale(.75)
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(calc(-4% - 0%)) translateY(-10.25px) scale(.75)
}
100% {
transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(.75)
}
}
.mdc-text-field--textarea.mdc-text-field--filled .mdc-text-field__input {
margin-top: 23px;
margin-bottom: 9px
}
.mdc-text-field--textarea.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input {
margin-top: 16px;
margin-bottom: 16px
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-top: 0
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {
transform: translateY(-27.25px) scale(1)
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {
font-size: .75rem
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above {
transform: translateY(-24.75px) scale(.75)
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above {
font-size: 1rem
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-textarea-outlined 250ms 1
}
@keyframes mdc-floating-label-shake-float-above-textarea-outlined {
0% {
transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(.75)
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(.75)
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(.75)
}
100% {
transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(.75)
}
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-text-field__input {
margin-top: 16px;
margin-bottom: 16px
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label {
top: 18px
}
.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field__input {
margin-bottom: 2px
}
.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter {
align-self: flex-end;
padding: 0 16px
}
.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::after {
display: inline-block;
width: 0;
height: 16px;
content: "";
vertical-align: -16px
}
.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::before {
display: none
}
.mdc-text-field__resizer {
align-self: stretch;
display: inline-flex;
flex-direction: column;
flex-grow: 1;
max-height: 100%;
max-width: 100%;
min-height: 56px;
min-width: fit-content;
min-width: -moz-available;
min-width: -webkit-fill-available;
overflow: hidden;
resize: both
}
.mdc-text-field--filled .mdc-text-field__resizer {
transform: translateY(-1px)
}
.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field-character-counter,
.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field__input {
transform: translateY(1px)
}
.mdc-text-field--outlined .mdc-text-field__resizer {
transform: translateX(-1px) translateY(-1px)
}
.mdc-text-field--outlined .mdc-text-field__resizer[dir=rtl],
[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer {
transform: translateX(1px) translateY(-1px)
}
.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 {
transform: translateX(1px) translateY(1px)
}
.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter[dir=rtl],
.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input[dir=rtl],
[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter,
[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input {
transform: translateX(-1px) translateY(1px)
}
.mdc-text-field--with-leading-icon {
padding-left: 0;
padding-right: 16px
}
.mdc-text-field--with-leading-icon[dir=rtl],
[dir=rtl] .mdc-text-field--with-leading-icon {
padding-left: 16px;
padding-right: 0
}
.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label {
max-width: calc(100% - 48px);
left: 48px;
right: initial
}
.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label[dir=rtl],
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label {
left: initial;
right: 48px
}
.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label--float-above {
max-width: calc(100% / .75 - 64px / .75)
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label {
left: 36px;
right: initial
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label[dir=rtl],
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label {
left: initial;
right: 36px
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
max-width: calc(100% - 60px)
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
transform: translateY(-37.25px) translateX(-32px) scale(1)
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above[dir=rtl],
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
transform: translateY(-37.25px) translateX(32px) scale(1)
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
font-size: .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 {
transform: translateY(-34.75px) translateX(-32px) scale(.75)
}
.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],
[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 {
transform: translateY(-34.75px) translateX(32px) scale(.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 {
animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1
}
@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon {
0% {
transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(.75)
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(.75)
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(.75)
}
100% {
transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(.75)
}
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl] .mdc-floating-label--shake,
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1
}
@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl {
0% {
transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(.75)
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(.75)
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(.75)
}
100% {
transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(.75)
}
}
.mdc-text-field--with-trailing-icon {
padding-left: 16px;
padding-right: 0
}
.mdc-text-field--with-trailing-icon[dir=rtl],
[dir=rtl] .mdc-text-field--with-trailing-icon {
padding-left: 0;
padding-right: 16px
}
.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label {
max-width: calc(100% - 64px)
}
.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above {
max-width: calc(100% / .75 - 64px / .75)
}
.mdc-text-field--with-trailing-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
max-width: calc(100% - 60px)
}
.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
padding-left: 0;
padding-right: 0
}
.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label {
max-width: calc(100% - 96px)
}
.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above {
max-width: calc(100% / .75 - 96px / .75)
}
.mdc-text-field-helper-line {
display: flex;
justify-content: space-between;
box-sizing: border-box
}
.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(98, 0, 238, .87)
}
.mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--focused .mdc-notched-outline__trailing {
border-width: 2px
}
.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--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-top: 2px
}
.mdc-text-field--focused.mdc-text-field--outlined.mdc-text-field--textarea .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-top: 0
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {
border-bottom-color: #b00020;
border-bottom-color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
border-bottom-color: #b00020;
border-bottom-color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label {
color: #b00020;
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;
color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid .mdc-text-field__input {
caret-color: #b00020;
caret-color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {
color: #b00020;
color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
border-bottom-color: #b00020;
border-bottom-color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
border-color: #b00020;
border-color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: #b00020;
border-color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
border-color: #b00020;
border-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--disabled {
pointer-events: none
}
.mdc-text-field--disabled .mdc-text-field__input {
color: rgba(0, 0, 0, .38)
}
@media all {
.mdc-text-field--disabled .mdc-text-field__input::placeholder {
color: rgba(0, 0, 0, .38)
}
}
@media all {
.mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {
color: rgba(0, 0, 0, .38)
}
}
.mdc-text-field--disabled .mdc-floating-label {
color: rgba(0, 0, 0, .38)
}
.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text {
color: rgba(0, 0, 0, .38)
}
.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, .38)
}
.mdc-text-field--disabled .mdc-text-field__icon--leading {
color: rgba(0, 0, 0, .3)
}
.mdc-text-field--disabled .mdc-text-field__icon--trailing {
color: rgba(0, 0, 0, .3)
}
.mdc-text-field--disabled .mdc-text-field__affix--prefix {
color: rgba(0, 0, 0, .38)
}
.mdc-text-field--disabled .mdc-text-field__affix--suffix {
color: rgba(0, 0, 0, .38)
}
.mdc-text-field--disabled .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, .06)
}
.mdc-text-field--disabled .mdc-notched-outline__leading,
.mdc-text-field--disabled .mdc-notched-outline__notch,
.mdc-text-field--disabled .mdc-notched-outline__trailing {
border-color: rgba(0, 0, 0, .06)
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-text-field__input::placeholder {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-floating-label {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-text-field-character-counter,
.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-character-counter {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-text-field__icon--leading {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-text-field__icon--trailing {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-text-field__affix--prefix {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-text-field__affix--suffix {
color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-line-ripple::before {
border-bottom-color: GrayText
}
}
@media screen and (forced-colors:active),
(-ms-high-contrast:active) {
.mdc-text-field--disabled .mdc-notched-outline__leading,
.mdc-text-field--disabled .mdc-notched-outline__notch,
.mdc-text-field--disabled .mdc-notched-outline__trailing {
border-color: GrayText
}
}
@media screen and (forced-colors:active) {
.mdc-text-field--disabled .mdc-text-field__input {
background-color: Window
}
.mdc-text-field--disabled .mdc-floating-label {
z-index: 1
}
}
.mdc-text-field--disabled .mdc-floating-label {
cursor: default
}
.mdc-text-field--disabled.mdc-text-field--filled {
background-color: #fafafa
}
.mdc-text-field--disabled.mdc-text-field--filled .mdc-text-field__ripple {
display: none
}
.mdc-text-field--disabled .mdc-text-field__input {
pointer-events: auto
}
.mdc-text-field--end-aligned .mdc-text-field__input {
text-align: right
}
.mdc-text-field--end-aligned .mdc-text-field__input[dir=rtl],
[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__input {
text-align: left
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix,
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input {
direction: ltr
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix {
padding-left: 0;
padding-right: 2px
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix {
padding-left: 12px;
padding-right: 0
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--leading,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--leading {
order: 1
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix {
order: 2
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input {
order: 3
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix {
order: 4
}
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--trailing,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--trailing {
order: 5
}
.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__input,
[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__input {
text-align: right
}
.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--prefix,
[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--prefix {
padding-right: 12px
}
.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--suffix,
[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--suffix {
padding-left: 2px
}
.mdc-text-field-helper-text {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: .75rem;
font-size: var(--mdc-typography-caption-font-size, .75rem);
line-height: 1.25rem;
line-height: var(--mdc-typography-caption-line-height, 1.25rem);
font-weight: 400;
font-weight: var(--mdc-typography-caption-font-weight, 400);
letter-spacing: .0333333333em;
letter-spacing: var(--mdc-typography-caption-letter-spacing, .0333333333em);
text-decoration: inherit;
text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
text-transform: inherit;
text-transform: var(--mdc-typography-caption-text-transform, inherit);
display: block;
margin-top: 0;
line-height: normal;
margin: 0;
opacity: 0;
will-change: opacity;
transition: opacity 150ms 0s cubic-bezier(.4, 0, .2, 1)
}
.mdc-text-field-helper-text::before {
display: inline-block;
width: 0;
height: 16px;
content: "";
vertical-align: 0
}
.mdc-text-field-helper-text--persistent {
transition: none;
opacity: 1;
will-change: initial
}
.mdc-text-field-character-counter {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: .75rem;
font-size: var(--mdc-typography-caption-font-size, .75rem);
line-height: 1.25rem;
line-height: var(--mdc-typography-caption-line-height, 1.25rem);
font-weight: 400;
font-weight: var(--mdc-typography-caption-font-weight, 400);
letter-spacing: .0333333333em;
letter-spacing: var(--mdc-typography-caption-letter-spacing, .0333333333em);
text-decoration: inherit;
text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
text-transform: inherit;
text-transform: var(--mdc-typography-caption-text-transform, inherit);
display: block;
margin-top: 0;
line-height: normal;
margin-left: auto;
margin-right: 0;
padding-left: 16px;
padding-right: 0;
white-space: nowrap
}
.mdc-text-field-character-counter::before {
display: inline-block;
width: 0;
height: 16px;
content: "";
vertical-align: 0
}
.mdc-text-field-character-counter[dir=rtl],
[dir=rtl] .mdc-text-field-character-counter {
margin-left: 0;
margin-right: auto
}
.mdc-text-field-character-counter[dir=rtl],
[dir=rtl] .mdc-text-field-character-counter {
padding-left: 0;
padding-right: 16px
}
.mdc-text-field__icon {
align-self: center;
cursor: pointer
}
.mdc-text-field__icon:not([tabindex]),
.mdc-text-field__icon[tabindex="-1"] {
cursor: default;
pointer-events: none
}
.mdc-text-field__icon svg {
display: block
}
.mdc-text-field__icon--leading {
margin-left: 16px;
margin-right: 8px
}
.mdc-text-field__icon--leading[dir=rtl],
[dir=rtl] .mdc-text-field__icon--leading {
margin-left: 8px;
margin-right: 16px
}
.mdc-text-field__icon--trailing {
padding: 12px;
margin-left: 0px;
margin-right: 0px
}
.mdc-text-field__icon--trailing[dir=rtl],
[dir=rtl] .mdc-text-field__icon--trailing {
margin-left: 0px;
margin-right: 0px
}
.material-icons {
font-family: var(--mdc-icon-font, "Material Icons");
font-weight: 400;
font-style: normal;
font-size: var(--mdc-icon-size, 24px);
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "liga"
}
:host {
display: inline-flex;
flex-direction: column;
outline: 0
}
.mdc-text-field {
width: 100%
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, .42);
border-bottom-color: var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, .42))
}
.mdc-text-field:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, .87);
border-bottom-color: var(--mdc-text-field-hover-line-color, rgba(0, 0, 0, .87))
}
.mdc-text-field.mdc-text-field--disabled .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, .06);
border-bottom-color: var(--mdc-text-field-disabled-line-color, rgba(0, 0, 0, .06))
}
.mdc-text-field.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
border-bottom-color: #b00020;
border-bottom-color: var(--mdc-theme-error, #b00020)
}
.mdc-text-field__input {
direction: inherit
}
mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-outlined-idle-border-color, rgba(0, 0, 0, 0.38))
}
:host(:not([disabled]):hover) :not(.mdc-text-field--invalid):not(.mdc-text-field--focused) mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-outlined-hover-border-color, rgba(0, 0, 0, 0.87))
}
:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--outlined) {
background-color: var(--mdc-text-field-fill-color, #f5f5f5)
}
:host(:not([disabled])) .mdc-text-field.mdc-text-field--invalid mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-error-color, var(--mdc-theme-error, #b00020))
}
:host(:not([disabled])) .mdc-text-field.mdc-text-field--invalid .mdc-text-field__icon,
:host(:not([disabled])) .mdc-text-field.mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-character-counter {
color: var(--mdc-text-field-error-color, var(--mdc-theme-error, #b00020))
}
:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label,
:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label::after {
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, .6))
}
:host(:not([disabled])) .mdc-text-field.mdc-text-field--focused mwc-notched-outline {
--mdc-notched-outline-stroke-width: 2px
}
:host(:not([disabled])) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-focused-label-color, var(--mdc-theme-primary, rgba(98, 0, 238, 0.87)))
}
:host(:not([disabled])) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) .mdc-floating-label {
color: #6200ee;
color: var(--mdc-theme-primary, #6200ee)
}
:host(:not([disabled])) .mdc-text-field .mdc-text-field__input {
color: var(--mdc-text-field-ink-color, rgba(0, 0, 0, .87))
}
:host(:not([disabled])) .mdc-text-field .mdc-text-field__input::placeholder {
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, .6))
}
:host(:not([disabled])) .mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg),
:host(:not([disabled])) .mdc-text-field-helper-line:not(.mdc-text-field--invalid) .mdc-text-field-character-counter {
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, .6))
}
:host([disabled]) .mdc-text-field:not(.mdc-text-field--outlined) {
background-color: var(--mdc-text-field-disabled-fill-color, #fafafa)
}
:host([disabled]) .mdc-text-field.mdc-text-field--outlined mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-outlined-disabled-border-color, rgba(0, 0, 0, 0.06))
}
:host([disabled]) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label,
:host([disabled]) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label::after {
color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, .38))
}
:host([disabled]) .mdc-text-field .mdc-text-field__input,
:host([disabled]) .mdc-text-field .mdc-text-field__input::placeholder {
color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, .38))
}
:host([disabled]) .mdc-text-field-helper-line .mdc-text-field-character-counter,
:host([disabled]) .mdc-text-field-helper-line .mdc-text-field-helper-text {
color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, .38))
}
,
.mdc-text-field__input {
width: var(--ha-textfield-input-width, 100%)
}
.mdc-text-field:not(.mdc-text-field--with-leading-icon) {
padding: var(--text-field-padding, 0px 16px)
}
.mdc-text-field__affix--suffix {
padding-left: var(--text-field-suffix-padding-left, 12px);
padding-right: var(--text-field-suffix-padding-right, 0px);
padding-inline-start: var(--text-field-suffix-padding-left, 12px);
padding-inline-end: var(--text-field-suffix-padding-right, 0px);
direction: ltr
}
.mdc-text-field--with-leading-icon {
padding-inline-start: var(--text-field-suffix-padding-left, 0px);
padding-inline-end: var(--text-field-suffix-padding-right, 16px);
direction: var(--direction)
}
.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
padding-left: var(--text-field-suffix-padding-left, 0px);
padding-right: var(--text-field-suffix-padding-right, 0px);
padding-inline-start: var(--text-field-suffix-padding-left, 0px);
padding-inline-end: var(--text-field-suffix-padding-right, 0px)
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--suffix {
color: var(--secondary-text-color)
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon {
color: var(--secondary-text-color)
}
.mdc-text-field__icon--leading {
margin-inline-start: 16px;
margin-inline-end: 8px;
direction: var(--direction)
}
.mdc-text-field__icon--trailing {
padding: var(--textfield-icon-trailing-padding, 12px)
}
.mdc-floating-label:not(.mdc-floating-label--float-above) {
text-overflow: ellipsis;
width: inherit;
padding-right: 30px;
padding-inline-end: 30px;
padding-inline-start: initial;
box-sizing: border-box;
direction: var(--direction)
}
input {
text-align: var(--text-field-text-align, start)
}
::-ms-reveal {
display: none
}
:host([no-spinner]) input::-webkit-inner-spin-button,
:host([no-spinner]) input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}
:host([no-spinner]) input[type=number] {
-moz-appearance: textfield
}
.mdc-text-field__ripple {
overflow: hidden
}
.mdc-text-field {
overflow: var(--text-field-overflow)
}
.mdc-floating-label {
inset-inline-start: 16px !important;
inset-inline-end: initial !important;
transform-origin: var(--float-start);
direction: var(--direction);
text-align: var(--float-start)
}
.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label {
max-width: calc(100% - 48px - var(--text-field-suffix-padding-left, 0px));
inset-inline-start: calc(48px + var(--text-field-suffix-padding-left, 0px)) !important;
inset-inline-end: initial !important;
direction: var(--direction)
}
.mdc-text-field__input[type=number] {
direction: var(--direction)
}
.mdc-text-field__affix--prefix {
padding-right: var(--text-field-prefix-padding-right, 2px);
padding-inline-end: var(--text-field-prefix-padding-right, 2px);
padding-inline-start: initial
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--prefix {
color: var(--mdc-text-field-label-ink-color)
}
,
</style><!---->
<style>
ha-auth-textfield {
display: inline-flex;
flex-direction: column;
outline: 0
}
ha-auth-textfield:not([disabled]):hover :not(.mdc-text-field--invalid):not(.mdc-text-field--focused) mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-outlined-hover-border-color,
rgba(0, 0, 0, 0.87))
}
ha-auth-textfield:not([disabled]) .mdc-text-field:not(.mdc-text-field--outlined) {
background-color: var(--mdc-text-field-fill-color, #f5f5f5)
}
ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--invalid mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-error-color,
var(--mdc-theme-error, #b00020))
}
ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--invalid .mdc-text-field__icon,
ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-character-counter {
color: var(--mdc-text-field-error-color, var(--mdc-theme-error, #b00020))
}
ha-auth-textfield:not([disabled]) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label,
ha-auth-textfield:not([disabled]) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label::after {
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, .6))
}
ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--focused mwc-notched-outline {
--mdc-notched-outline-stroke-width: 2px
}
ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-focused-label-color,
var(--mdc-theme-primary, rgba(98, 0, 238, 0.87)))
}
ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) .mdc-floating-label {
color: #6200ee;
color: var(--mdc-theme-primary, #6200ee)
}
ha-auth-textfield:not([disabled]) .mdc-text-field .mdc-text-field__input {
color: var(--mdc-text-field-ink-color, rgba(0, 0, 0, .87))
}
ha-auth-textfield:not([disabled]) .mdc-text-field .mdc-text-field__input::placeholder {
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, .6))
}
ha-auth-textfield:not([disabled]) .mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg),
ha-auth-textfield:not([disabled]) .mdc-text-field-helper-line:not(.mdc-text-field--invalid) .mdc-text-field-character-counter {
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, .6))
}
ha-auth-textfield[disabled] .mdc-text-field:not(.mdc-text-field--outlined) {
background-color: var(--mdc-text-field-disabled-fill-color, #fafafa)
}
ha-auth-textfield[disabled] .mdc-text-field.mdc-text-field--outlined mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-outlined-disabled-border-color,
rgba(0, 0, 0, 0.06))
}
ha-auth-textfield[disabled] .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label,
ha-auth-textfield[disabled] .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label::after {
color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, .38))
}
ha-auth-textfield[disabled] .mdc-text-field .mdc-text-field__input,
ha-auth-textfield[disabled] .mdc-text-field .mdc-text-field__input::placeholder {
color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, .38))
}
ha-auth-textfield[disabled] .mdc-text-field-helper-line .mdc-text-field-character-counter,
ha-auth-textfield[disabled] .mdc-text-field-helper-line .mdc-text-field-helper-text {
color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, .38))
}
ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) .mdc-floating-label {
color: var(--mdc-theme-primary, #6200ee)
}
ha-auth-textfield[no-spinner] input::-webkit-inner-spin-button,
ha-auth-textfield[no-spinner] input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}
ha-auth-textfield[no-spinner] input[type=number] {
-moz-appearance: textfield
}
</style> <!--?lit$8834407684$--> <label class="mdc-text-field mdc-text-field--filled"> <!--?lit$8834407684$--> <span class="mdc-text-field__ripple"></span> <!--?lit$8834407684$--> <span class="mdc-floating-label"
id="password"><!--?lit$8834407684$-->Password</span> <!--?lit$8834407684$--> <!--?lit$8834407684$--> <!--?lit$8834407684$--><input class="mdc-text-field__input" aria-describedby="helper-text" type="password" placeholder="" required=""
name="password" autocomplete="current-password" aria-labelledby="password" aria-controls="helper-text"> <!--?lit$8834407684$--><span class="mdc-text-field__affix mdc-text-field__affix--suffix "> <!--?lit$8834407684$-->
<div style="width:24px"></div>
</span> <!--?lit$8834407684$--> <!--?lit$8834407684$--> <span class="mdc-line-ripple"></span> </label> <!--?lit$8834407684$-->
<div class="mdc-text-field-helper-line">
<div id="helper-text" class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent "><!--?lit$8834407684$--></div> <!--?lit$8834407684$-->
</div>
</ha-auth-textfield> <!--?lit$8834407684$--> <ha-icon-button toggles=""></ha-icon-button>
</ha-auth-form-string> <!----> </div>
</ha-auth-form> <!--?lit$8834407684$-->
<div class="space-between"> <ha-formfield class="store-token"> <ha-checkbox name=""></ha-checkbox> </ha-formfield>
<a class="forgot-password" href="https://www.home-assistant.io/docs/locked_out/#forgot-password" target="_blank" rel="noreferrer noopener"><!--?lit$8834407684$-->Forgot password?</a> </div>
<div class="action"> <mwc-button raised=""> <!--?lit$8834407684$-->Log in </mwc-button> </div>
</form>Text Content
WELCOME HOME! Username Password Forgot password? Log in Help