.mdc-form.inline {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: start;
    align-items: start;
}

.mdc-text-area, .mdc-text-field {
    --border-size: 1px;
    --focus-border-size: 2px;
    --border-color: var(--foreground-color);

    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    flex-direction: column;
    margin-bottom: 1rem;
    width: 17.5rem;
    max-width: 100%;
}

.mdc-text-area.outlined, .mdc-text-field.outlined {
    margin-top: 0.5rem;
}

.mdc-form.inline .mdc-text-area,
.mdc-form.inline .mdc-text-field {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: start;
    align-items: start;
}

.mdc-text-area {
    --number-of-lines: 4;
}

.mdc-text-field.full-width,
.mdc-text-area.full-width {
    width: 100%;
}

.mdc-text-field > .input,
.mdc-text-area > .input {
    text-decoration: inherit;
    text-transform: inherit;
    width: 100%;
    -ms-flex-item-align: end;
    align-self: flex-end;
    position: relative;
    line-height: 0;
    font-size: 0;
    background-color: rgba(var(--foreground-color), var(--opacity-hover));
    border-radius: 0.25rem 0.25rem 0 0;
    will-change: background-color;
    border-bottom: var(--border-size) solid rgba(var(--foreground-color), var(--opacity-hint));

    -webkit-transition: background-color 0.15s cubic-bezier(0.4,0,.2,1);
    -o-transition: background-color 0.15s cubic-bezier(0.4,0,.2,1);
    transition: background-color 0.15s cubic-bezier(0.4,0,.2,1);
}

.mdc-text-area > .input {
    padding: 1.5rem 0 0;
    cursor: text;
}

.mdc-text-field:not(.active) > .icon,
.mdc-text-area:not(.active) > .icon,
.mdc-text-field:not(.active) > .input,
.mdc-text-area:not(.active) > .input,
.mdc-text-field:not(.active) > .label,
.mdc-text-area:not(.active) > .label,
.mdc-text-field > .input.disabled,
.mdc-text-area > .input.disabled,
.mdc-text-field > .input.disabled + .label,
.mdc-text-area > .input.disabled + .label {
    --foreground-color: var(--initial-foreground-color);
}

.mdc-text-field > .input.disabled,
.mdc-text-area > .input.disabled {
    cursor: default;
}

.mdc-text-field > .input .input-element,
.mdc-text-area > .input .input-element {
    font-size: 1rem;
    line-height: 2.25rem;
    min-height: 3.5rem;
    height: 3.5rem;
    font-weight: 400;
    letter-spacing: 0.009375em;
    text-decoration: inherit;
    text-transform: inherit;
    padding: 1.25rem 0.75rem 0;
    min-width: 100%;
    width: 100%;
    border: none;
    background: none;
    color: rgba(var(--initial-foreground-color), var(--opacity-primary));

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.mdc-text-area > .input .input-element {
    line-height: 1.75rem;
    min-height: 7rem;
    height: calc(1.75rem * var(--number-of-lines) + var(--border-size)); /*1.75 * LINES_NUMBER + .0625 rem*/
    padding: 0 0.75rem;
    resize: none;
}

.mdc-text-field > .input:hover,
.mdc-text-area > .input:hover {
    background-color: rgba(var(--foreground-color), var(--opacity-hover));
    border-bottom-color: rgba(var(--foreground-color), var(--opacity-secondary));
}

.mdc-text-field.active > .input,
.mdc-text-area.active > .input {
    background-color: rgba(var(--foreground-color), var(--opacity-focus));
}

.mdc-text-field > .input::after,
.mdc-text-area > .input::after {
    content: '';
    position: absolute;
    bottom: calc(var(--border-size) * -1);
    left: 0;
    width: 100%;
    height: var(--focus-border-size);
    background-color: rgba(var(--border-color));
    will-change: transform;

    transform: scale(0);
    transition: transform 0.15s cubic-bezier(0.4,0,.2,1);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
}

.mdc-text-field.active > .input::after,
.mdc-text-area.active > .input::after {
    transform: scale(1);
}

.mdc-text-field.has-error,
.mdc-text-area.has-error {
    --foreground-color: var(--error-color);
    --border-color: var(--error-color);
}

@-webkit-keyframes autofill {
    to {
        background: transparent !important;
    }
}

@keyframes autofill {
    to {
        background: transparent !important;
    }
}

.mdc-text-field > .input .input-element:-webkit-autofill,
.mdc-text-area > .input .input-element:-webkit-autofill {
    -webkit-text-fill-color: rgba(var(--initial-foreground-color), var(--opacity-primary)) !important;
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
    animation-name: autofill;
    animation-fill-mode: both;
}

.mdc-text-field.active > .input,
.mdc-text-area.active > .input {
    background-color: rgba(var(--foreground-color), var(--opacity-hover));
}

.mdc-text-field > .input .input-element {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.mdc-text-field > .label,
.mdc-text-area > .label {
    font-size: 1rem;
    letter-spacing: 0.03125rem;
    text-decoration: inherit;
    text-transform: inherit;
    position: absolute;
    top: 1.25rem;
    left: 0.75rem;
    right: auto;
    cursor: text;
    width: calc(100% - 1.5rem);
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    overflow: hidden;
    line-height: 1.15rem;
    color: rgba(var(--foreground-color), var(--opacity-secondary));

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;

    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    will-change: transform;

    transition: transform 0.15s cubic-bezier(0.4,0,.2,1), color 0.15s cubic-bezier(0.4,0,.2,1);
}

html[dir="ltr"] .mdc-text-field > .label,
html[dir="ltr"] .mdc-text-area > .label,
html[dir] *[dir="ltr"] .mdc-text-field > .label,
html[dir] *[dir="ltr"] .mdc-text-area > .label,
html[dir] * .mdc-text-field[dir="ltr"] > .label,
html[dir] * .mdc-text-area[dir="ltr"] > .label {
    left: 0.75rem;
    right: auto;

    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
}

html[dir="rtl"] .mdc-text-field > .label,
html[dir="rtl"] .mdc-text-area > .label,
html[dir] *[dir="rtl"] .mdc-text-field > .label,
html[dir] *[dir="rtl"] .mdc-text-area > .label,
html[dir] * .mdc-text-field[dir="rtl"] > .label,
html[dir] * .mdc-text-area[dir="rtl"] > .label {
    left: auto;
    right: 0.75rem;

    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top;
}

.mdc-text-field.active > .label,
.mdc-text-area.active > .label {
    color: rgba(var(--foreground-color), var(--opacity-primary));
    transform: translateY(-50%) scale(0.75);
}

.mdc-text-field.focus > .label,
.mdc-text-area.focus > .label {
    transform: translateY(-50%) scale(0.75);
}

.mdc-text-field > .input.disabled,
.mdc-text-area > .input.disabled {
    background-color: rgba(var(--foreground-color), var(--opacity-disabled));
}

.mdc-text-field > .input.disabled .input-element {
    color: rgba(var(--foreground-color), var(--opacity-secondary));
    border-bottom-color: rgba(var(--foreground-color), var(--opacity-divider));
}

.mdc-text-field > .input.disabled + .label,
.mdc-text-area > .input.disabled + .label {
    color: rgba(var(--foreground-color), var(--opacity-hint));
}

.mdc-text-field > .icon {
    position: absolute;
    top: 1rem;
    left: 0.75rem;
    right: auto;
    height: 1.5rem;
    width: 1.5rem;
    color: rgba(var(--foreground-color), var(--opacity-secondary));
    cursor: default;
    pointer-events: none;
    z-index: 9;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;
}

.mdc-text-field > a.icon, .mdc-text-field > button.icon {
    margin: 0;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
    pointer-events: all;
}

html[dir="ltr"] .mdc-text-field > .icon,
html[dir] *[dir="ltr"] .mdc-text-field > .icon,
html[dir] * .mdc-text-field[dir="ltr"] > .icon {
    left: 0.75rem;
    right: auto;
}

html[dir="rtl"] .mdc-text-field > .icon,
html[dir] *[dir="rtl"] .mdc-text-field > .icon,
html[dir] * .mdc-text-field[dir="rtl"] > .icon {
    left: auto;
    right: 0.75rem;
}

.mdc-text-field > .icon + .input .input-element,
.mdc-text-field > .icon + .input .input-element {
    padding: 1.25rem 0.75rem 0 3rem;
}

.mdc-text-field > .icon + .input + .label {
    left: 3rem;
    right: auto;
    width: calc(100% - 3.75rem);
}

html[dir="ltr"] .mdc-text-field > .icon + .input + .label,
html[dir] *[dir="ltr"] .mdc-text-field > .icon + .input + .label,
html[dir] * .mdc-text-field[dir="ltr"] > .icon + .input + .label {
    left: 3rem;
    right: auto;
}

html[dir="rtl"] .mdc-text-field > .icon + .input + .label,
html[dir] *[dir="rtl"] .mdc-text-field > .icon + .input + .label,
html[dir] * .mdc-text-field[dir="rtl"] > .icon + .input + .label {
    left: auto;
    right: 3rem;
}

.mdc-text-field > .icon.trailing {
    left: auto;
    right: 0.75rem;
}

html[dir="rtl"] .mdc-text-field > .icon + .input .input-element,
html[dir] *[dir="rtl"] .mdc-text-field > .icon + .input .input-element,
html[dir] * .mdc-text-field[dir="rtl"] > .icon + .input .input-element,
.mdc-text-field > .icon.trailing + .input .input-element,
html[dir="ltr"] .mdc-text-field > .icon.trailing + .input .input-element,
html[dir] *[dir="ltr"] .mdc-text-field > .icon.trailing + .input .input-element,
html[dir] * .mdc-text-field[dir="ltr"] > .icon.trailing + .input .input-element {
    padding: 1.25rem 3rem 0 0.75rem;
}

html[dir="ltr"] .mdc-text-field > .icon + .input .input-element,
html[dir] *[dir="ltr"] .mdc-text-field > .icon + .input .input-element,
html[dir] * .mdc-text-field[dir="ltr"] > .icon + .input .input-element,
html[dir="rtl"] .mdc-text-field > .icon.trailing + .input .input-element,
html[dir] *[dir="rtl"] .mdc-text-field > .icon.trailing + .input .input-element,
html[dir] * .mdc-text-field[dir="rtl"] > .icon.trailing + .input .input-element {
    padding: 1.25rem 0.75rem 0 3rem;
}

.mdc-text-field > .icon.trailing + .input + .label {
    left: 0.75rem;
    right: auto;
}

html[dir="rtl"] .mdc-text-field > .icon.trailing,
html[dir] *[dir="rtl"] .mdc-text-field > .icon.trailing,
html[dir] * .mdc-text-field[dir="rtl"] > .icon.trailing,
html[dir="ltr"] .mdc-text-field > .icon.trailing + .input + .label,
html[dir] *[dir="ltr"] .mdc-text-field > .icon.trailing + .input + .label,
html[dir] * .mdc-text-field[dir="ltr"] > .icon.trailing + .input + .label {
    left: 0.75rem;
    right: auto;
}

html[dir="ltr"] .mdc-text-field > .icon.trailing,
html[dir] *[dir="ltr"] .mdc-text-field > .icon.trailing,
html[dir] * .mdc-text-field[dir="ltr"] > .icon.trailing,
html[dir="rtl"] .mdc-text-field > .icon.trailing + .input + .label,
html[dir] *[dir="rtl"] .mdc-text-field > .icon.trailing + .input + .label,
html[dir] * .mdc-text-field[dir="rtl"] > .icon.trailing + .input + .label {
    left: auto;
    right: 0.75rem;
}

.mdc-text-field > .hint-block,
.mdc-text-area > .hint-block,
.mdc-text-field > .help-block,
.mdc-text-area > .help-block {
    padding: 0.0625rem 0.75rem 0;
    font-size: 0.75rem;
    line-height: 1.25rem;
    letter-spacing: 0.033333em;
    color: rgba(var(--initial-foreground-color), var(--opacity-hint));
    cursor: default;
    pointer-events: none;
    word-break: break-word;
    display: block;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;
}

.mdc-text-field.has-error > .hint-block,
.mdc-text-area.has-error > .hint-block,
.mdc-text-field.has-error > .help-block,
.mdc-text-area.has-error > .help-block {
    color: rgb(var(--error-color));
}

.mdc-text-field.standard > .input,
.mdc-text-area.standard > .input {
    background-color: transparent;
    border-radius: 0;
}

.mdc-text-field.standard > .input .input-element,
.mdc-text-area.standard > .input .input-element {
    padding-left: 0;
    padding-right: 0;
}

.mdc-text-field.standard > .label {
    top: 1.625rem;
    right: auto;
    left: auto;
}

html[dir="ltr"] .mdc-text-field.standard > .label,
html[dir] *[dir="ltr"] .mdc-text-field.standard > .label,
html[dir] * .mdc-text-field.standard[dir="ltr"] > .label,
html[dir="rtl"] .mdc-text-field.standard > .label,
html[dir] *[dir="rtl"] .mdc-text-field.standard > .label,
html[dir] * .mdc-text-field.standard[dir="rtl"] > .label,
html[dir="ltr"] .mdc-text-area.standard > .label,
html[dir] *[dir="ltr"] .mdc-text-area.standard > .label,
html[dir] * .mdc-text-area.standard[dir="ltr"] > .label,
html[dir="rtl"] .mdc-text-area.standard > .label,
html[dir] *[dir="rtl"] .mdc-text-area.standard > .label,
html[dir] * .mdc-text-area.standard[dir="rtl"] > .label {
    right: auto;
    left: auto;
}

.mdc-text-field.standard.active > .label,
.mdc-text-field.standard.focus > .label {
    transform: translateY(-100%) scale(0.75);
}

.mdc-text-area.standard.active > .label,
.mdc-text-area.standard.focus > .label {
    transform: translateY(-68%) scale(0.75);
}

.mdc-text-field.standard > .icon {
    top: 1.4375rem;
    left: 0;
    right: auto;
}

html[dir="ltr"] .mdc-text-field.standard > .icon,
html[dir] *[dir="ltr"] .mdc-text-field.standard > .icon,
html[dir] * .mdc-text-field.standard[dir="ltr"] > .icon {
    left: 0;
    right: auto;
}

html[dir="rtl"] .mdc-text-field.standard > .icon,
html[dir] *[dir="rtl"] .mdc-text-field.standard > .icon,
html[dir] * .mdc-text-field.standard[dir="rtl"] > .icon {
    left: auto;
    right: 0;
}

.mdc-text-field.standard > .icon + .input .input-element {
    padding: 1.25rem 0 0 2.25rem;
}

.mdc-text-field.standard > .icon + .input + .label {
    left: 2.25rem;
    right: auto;
    width: calc(100% - 2.25rem);
}

html[dir="ltr"] .mdc-text-field.standard > .icon + .input + .label,
html[dir] *[dir="ltr"] .mdc-text-field.standard > .icon + .input + .label,
html[dir] * .mdc-text-field.standard[dir="ltr"] > .icon + .input + .label {
    left: 2.25rem;
    right: auto;
}

html[dir="rtl"] .mdc-text-field.standard > .icon + .input + .label,
html[dir] *[dir="rtl"] .mdc-text-field.standard > .icon + .input + .label,
html[dir] * .mdc-text-field.standard[dir="rtl"] > .icon + .input + .label {
    left: auto;
    right: 2.25rem;
}

.mdc-text-field.standard > .icon.trailing {
    left: auto;
    right: 0;
}

html[dir="rtl"] .mdc-text-field.standard > .icon + .input .input-element,
html[dir] *[dir="rtl"] .mdc-text-field.standard > .icon + .input .input-element,
html[dir] * .mdc-text-field.standard[dir="rtl"] > .icon + .input .input-element,
.mdc-text-field.standard > .icon.trailing + .input .input-element,
html[dir="ltr"] .mdc-text-field.standard > .icon.trailing + .input .input-element,
html[dir] *[dir="ltr"] .mdc-text-field.standard > .icon.trailing + .input .input-element,
html[dir] * .mdc-text-field.standard[dir="ltr"] > .icon.trailing + .input .input-element {
    padding: 1.25rem 2.25rem 0 0;
}

html[dir="ltr"] .mdc-text-field.standard > .icon + .input .input-element,
html[dir] *[dir="ltr"] .mdc-text-field.standard > .icon + .input .input-element,
html[dir] * .mdc-text-field.standard[dir="ltr"] > .icon + .input .input-element,
html[dir="rtl"] .mdc-text-field.standard > .icon.trailing + .input .input-element,
html[dir] *[dir="rtl"] .mdc-text-field.standard > .icon.trailing + .input .input-element,
html[dir] * .mdc-text-field.standard[dir="rtl"] > .icon.trailing + .input .input-element {
    padding: 1.25rem 0 0 2.25rem;
}

.mdc-text-field.standard > .icon.trailing + .input + .label {
    left: 0;
    right: auto;
}

html[dir="rtl"] .mdc-text-field.standard > .icon.trailing,
html[dir] *[dir="rtl"] .mdc-text-field.standard > .icon.trailing,
html[dir] * .mdc-text-field.standard[dir="rtl"] > .icon.trailing,
html[dir="ltr"] .mdc-text-field.standard > .icon.trailing + .input + .label,
html[dir] *[dir="ltr"] .mdc-text-field.standard > .icon.trailing + .input + .label,
html[dir] * .mdc-text-field.standard[dir="ltr"] > .icon.trailing + .input + .label {
    left: 0;
    right: auto;
}

html[dir="ltr"] .mdc-text-field.standard > .icon.trailing,
html[dir] *[dir="ltr"] .mdc-text-field.standard > .icon.trailing,
html[dir] * .mdc-text-field.standard[dir="ltr"] > .icon.trailing,
html[dir="rtl"] .mdc-text-field.standard > .icon.trailing + .input + .label,
html[dir] *[dir="rtl"] .mdc-text-field.standard > .icon.trailing + .input + .label,
html[dir] * .mdc-text-field.standard[dir="rtl"] > .icon.trailing + .input + .label {
    left: auto;
    right: 0;
}

.mdc-text-field.standard > .hint-block,
.mdc-text-field.standard > .help-block,
.mdc-text-area.standard > .hint-block,
.mdc-text-area.standard > .help-block {
    padding: 0.0625rem 0 0;
}

.mdc-text-field.outlined > .input::after,
.mdc-text-area.outlined > .input::after {
    display: none;
}

.mdc-text-field.outlined > .input,
.mdc-text-area.outlined > .input {
    background-color: transparent;
    border: var(--border-size) solid rgba(var(--foreground-color), var(--opacity-hint));
    border-radius: 0.25rem;
    will-change: border-color;
    transition: border-color 0.15s cubic-bezier(0.4,0,.2,1);
}

.mdc-text-area.outlined > .input {
    padding: 0.75rem 0 0;
}

.mdc-text-field.outlined > .input .input-element {
    line-height: 2rem;
    padding: 0.75rem 0.8125rem;
}

.mdc-text-area.outlined > .input .input-element {
    padding: 0 0.8125rem 0.75rem;
}

.mdc-text-field.outlined > .icon + .input .input-element,
html[dir="ltr"] .mdc-text-field.outlined > .icon + .input .input-element,
html[dir] *[dir="ltr"] .mdc-text-field.outlined > .icon + .input .input-element,
html[dir] * .mdc-text-field.outlined[dir="ltr"] > .icon + .input .input-element,
html[dir="rtl"] .mdc-text-field.outlined > .icon.trailing + .input .input-element,
html[dir] *[dir="rtl"] .mdc-text-field.outlined > .icon.trailing + .input .input-element,
html[dir] * .mdc-text-field.outlined[dir="rtl"] > .icon.trailing + .input .input-element {
    padding: 0.75rem 0.75rem 0.75rem 2.9375rem;
}

html[dir="rtl"] .mdc-text-field.outlined > .icon + .input .input-element,
html[dir] *[dir="rtl"] .mdc-text-field.outlined > .icon + .input .input-element,
html[dir] * .mdc-text-field.outlined[dir="rtl"] > .icon + .input .input-element,
.mdc-text-field.outlined > .icon.trailing + .input .input-element,
html[dir="ltr"] .mdc-text-field.outlined > .icon.trailing + .input .input-element,
html[dir] *[dir="ltr"] .mdc-text-field.outlined > .icon.trailing + .input .input-element,
html[dir] * .mdc-text-field.outlined[dir="ltr"] > .icon.trailing + .input .input-element {
    padding: 0.75rem 2.9375rem 0.75rem 0.75rem;
}

.mdc-text-field.outlined > .input:hover,
.mdc-text-area.outlined > .input:hover {
    border-color: rgba(var(--foreground-color), var(--opacity-secondary));
}

.mdc-text-field.outlined.active > .input,
.mdc-text-field.outlined.focus > .input,
.mdc-text-area.outlined.active > .input,
.mdc-text-area.outlined.focus > .input {
    border-color: transparent;
}

.mdc-text-field.outlined > .label,
.mdc-text-area.outlined > .label {
    width: auto;
    max-width: calc(100% - 1.625rem);
    left: 0.8125rem;
    right: auto;
    will-change: transform, color, left, right;
    transition: transform 0.15s cubic-bezier(0.4,0,.2,1), color 0.15s cubic-bezier(0.4,0,.2,1), left 0.15s, right 0.15s;
}

.mdc-text-field.outlined > .icon + .input + .label {
    width: auto;
}

html[dir="ltr"] .mdc-text-field.outlined > .label,
html[dir] *[dir="ltr"] .mdc-text-field.outlined > .label,
html[dir] * .mdc-text-field.outlined[dir="ltr"] > .label,
.mdc-text-field.outlined.active > .icon + .input + .label,
html[dir="ltr"] .mdc-text-field.outlined.active > .icon + .input + .label,
html[dir] *[dir="ltr"] .mdc-text-field.outlined.active > .icon + .input + .label,
html[dir] * .mdc-text-field.outlined.active[dir="ltr"] > .icon + .input + .label,
.mdc-text-field.outlined.focus > .icon + .input + .label,
html[dir="ltr"] .mdc-text-field.outlined.focus > .icon + .input + .label,
html[dir] *[dir="ltr"] .mdc-text-field.outlined.focus > .icon + .input + .label,
html[dir] * .mdc-text-field.outlined.focus[dir="ltr"] > .icon + .input + .label,
.mdc-text-field.outlined > .icon.trailing + .input + .label,
html[dir="ltr"] .mdc-text-field.outlined > .icon.trailing + .input + .label,
html[dir] *[dir="ltr"] .mdc-text-field.outlined > .icon.trailing + .input + .label,
html[dir] * .mdc-text-field.outlined[dir="ltr"] > .icon.trailing + .input + .label,
html[dir="ltr"] .mdc-text-area.outlined > .label,
html[dir] *[dir="ltr"] .mdc-text-area.outlined > .label,
html[dir] * .mdc-text-area.outlined[dir="ltr"] > .label {
    left: calc(0.8rem + var(--focus-border-size));
    right: auto;
}

html[dir="rtl"] .mdc-text-field.outlined > .label,
html[dir] *[dir="rtl"] .mdc-text-field.outlined > .label,
html[dir] * .mdc-text-field.outlined[dir="rtl"] > .label,
html[dir="rtl"] .mdc-text-field.outlined.active > .icon + .input + .label,
html[dir] *[dir="rtl"] .mdc-text-field.outlined.active > .icon + .input + .label,
html[dir] * .mdc-text-field.outlined.active[dir="rtl"] > .icon + .input + .label,
html[dir="rtl"] .mdc-text-field.outlined.focus > .icon + .input + .label,
html[dir] *[dir="rtl"] .mdc-text-field.outlined.focus > .icon + .input + .label,
html[dir] * .mdc-text-field.outlined.focus[dir="rtl"] > .icon + .input + .label,
html[dir="rtl"] .mdc-text-field.outlined > .icon.trailing + .input + .label,
html[dir] *[dir="rtl"] .mdc-text-field.outlined > .icon.trailing + .input + .label,
html[dir] * .mdc-text-field.outlined[dir="rtl"] > .icon.trailing + .input + .label,
html[dir="rtl"] .mdc-text-area.outlined > .label,
html[dir] *[dir="rtl"] .mdc-text-area.outlined > .label,
html[dir] * .mdc-text-area.outlined[dir="rtl"] > .label {
    left: auto;
    right: calc(0.8rem + var(--focus-border-size));
}

.mdc-text-field.outlined.active > .label,
.mdc-text-field.outlined.focus > .label,
.mdc-text-area.outlined.active > .label,
.mdc-text-area.outlined.focus > .label {
    transform: translateY(-140%) scale(0.75);
}

.mdc-text-field.outlined > .input > .outline,
.mdc-text-area.outlined > .input > .outline {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--border-size);
    right: var(--border-size);
    margin: 0 0.5rem;
    pointer-events: none;
    opacity: 0;
    will-change: opacity;
    transition: opacity 0.15s cubic-bezier(0.4,0,.2,1);
    border-bottom: solid var(--border-size) rgba(var(--foreground-color), var(--opacity-hint));
}

.mdc-text-field.outlined.active > .input > .outline,
.mdc-text-area.outlined.active > .input > .outline {
    top: calc(var(--border-size) * -1);
    bottom: calc(var(--border-size) * -1);
    left: calc(var(--border-size) * -1);
    right: calc(var(--border-size) * -1);
    margin: 0 calc(0.5rem + var(--focus-border-size));
    border-bottom: solid var(--focus-border-size) rgba(var(--foreground-color), var(--opacity-hint));
    opacity: 1;
}

.mdc-text-field.outlined.focus > .input > .outline,
.mdc-text-area.outlined.focus > .input > .outline {
    opacity: 1;
}

.mdc-text-field.outlined > .input > .outline::before,
.mdc-text-area.outlined > .input > .outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -0.5rem;
    bottom: calc(var(--border-size) * -1);
    width: 0.4375rem;
    border-radius: 0.25rem 0 0 0.25rem;
    border: solid var(--border-size) rgba(var(--foreground-color), var(--opacity-hint));
    border-right: none;
}

.mdc-text-field.outlined.active > .input > .outline::before,
.mdc-text-area.outlined.active > .input > .outline::before {
    left: calc(-0.5rem - var(--focus-border-size));
    bottom: calc(var(--focus-border-size) * -1);
    width: 0.5rem;
    border: solid var(--focus-border-size) rgba(var(--foreground-color), var(--opacity-hint));
    border-right: none;
}

.mdc-text-field.outlined > .input > .outline::after,
.mdc-text-area.outlined > .input > .outline::after {
    content: '';
    position: absolute;
    top: 0;
    right: -0.5rem;
    bottom: calc(var(--border-size) * -1);
    width: 0.4375rem;
    border-radius: 0 0.25rem 0.25rem 0;
    border: solid var(--border-size) rgba(var(--foreground-color), var(--opacity-hint));
    border-left: none;
}

.mdc-text-field.outlined.active > .input > .outline::after,
.mdc-text-area.outlined.active > .input > .outline::after {
    right: calc(-0.5rem - var(--focus-border-size));
    bottom: calc(var(--focus-border-size) * -1);
    width: 0.5rem;
    border: solid var(--focus-border-size) rgba(var(--foreground-color), var(--opacity-hint));
    border-left: none;
}

.mdc-text-field.outlined > .input > .outline > .top,
.mdc-text-area.outlined > .input > .outline > .top {
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    width: 100%;
    border-top: solid var(--border-size) rgba(var(--foreground-color), var(--opacity-hint));
}

.mdc-text-field.outlined.active > .input > .outline > .top,
.mdc-text-area.outlined.active > .input > .outline > .top {
    border-top: solid var(--focus-border-size) rgba(var(--foreground-color), var(--opacity-hint));
}

html[dir="ltr"] .mdc-text-field.outlined > .input > .outline > .top,
html[dir] *[dir="ltr"] .mdc-text-field.outlined > .input > .outline > .top,
html[dir] * .mdc-text-field.outlined[dir="ltr"] > .input > .outline > .top,
html[dir="ltr"] .mdc-text-area.outlined > .input > .outline > .top,
html[dir] *[dir="ltr"] .mdc-text-area.outlined > .input > .outline > .top,
html[dir] * .mdc-text-area.outlined[dir="ltr"] > .input > .outline > .top {
    left: auto;
    right: 0;
}

html[dir="rtl"] .mdc-text-field.outlined > .input > .outline > .top,
html[dir] *[dir="rtl"] .mdc-text-field.outlined > .input > .outline > .top,
html[dir] * .mdc-text-field.outlined[dir="rtl"] > .input > .outline > .top,
html[dir="rtl"] .mdc-text-area.outlined > .input > .outline > .top,
html[dir] *[dir="rtl"] .mdc-text-area.outlined > .input > .outline > .top,
html[dir] * .mdc-text-area.outlined[dir="rtl"] > .input > .outline > .top {
    left: 0;
    right: auto;
}

.mdc-text-field.outlined > .input:hover > .outline,
.mdc-text-field.outlined > .input:hover > .outline > .top,
.mdc-text-field.outlined > .input:hover > .outline::before,
.mdc-text-field.outlined > .input:hover > .outline::after,
.mdc-text-area.outlined > .input:hover > .outline,
.mdc-text-area.outlined > .input:hover > .outline > .top,
.mdc-text-area.outlined > .input:hover > .outline::before,
.mdc-text-area.outlined > .input:hover > .outline::after {
    border-color: rgba(var(--foreground-color), var(--opacity-secondary));
}

.mdc-text-field.outlined.active > .input > .outline,
.mdc-text-field.outlined.active > .input > .outline > .top,
.mdc-text-field.outlined.active > .input > .outline::before,
.mdc-text-field.outlined.active > .input > .outline::after,
.mdc-text-area.outlined.active > .input > .outline,
.mdc-text-area.outlined.active > .input > .outline > .top,
.mdc-text-area.outlined.active > .input > .outline::before,
.mdc-text-area.outlined.active > .input > .outline::after {
    border-color: var(--bg-border) !important;
}

.mdc-text-field > .input.disabled,
.mdc-text-area > .input.disabled {
    border-color: rgba(var(--foreground-color), var(--opacity-divider)) !important;
}

.mdc-text-field > .input.disabled > .outline,
.mdc-text-area > .input.disabled > .outline {
    display: none;
}