/* stylelint-disable alpha-value-notation */ /**
 * The default transition, used when the element is visible
 * since the beginning of the animation
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The enter transition, used when the element is not visible on the screen
 * since the beginning of the animation and become visible
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The leave transition, used when the element is visible on the screen
 * since the beginning of the animation and is removed
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The stand transition, used when the element is going to accelerate,
 * like movements from bottom to top
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The out transition, used when the element is going to deaccelerate,
 * like movements from top to bottom
 * ---
 * @access private
 * @type transition
 * @group transition
 */
.md-field::after {
  background-color: var(--md-outline);
}
.md-field::before {
  background-color: var(--md-primary);
}
.md-field .md-icon {
  color: var(--md-on-surface-medium);
}
.md-field .md-icon::after {
  background-color: var(--md-ouline);
}
.md-field .md-icon.md-primary {
  color: var(--md-primary);
}
.md-field .md-icon.md-accent {
  color: var(--md-secondary);
}
.md-field .md-helper-text,
.md-field .md-count,
.md-field .md-suffix,
.md-field .md-prefix,
.md-field label {
  color: var(--md-on-surface-medium);
}
.md-field .md-input,
.md-field .md-textarea {
  color: var(--md-on-surface);
}
.md-field .md-input::-input-placeholder,
.md-field .md-textarea::-input-placeholder {
  color: var(--md-on-surface-medium);
}
.md-field.md-has-textarea:not(.md-autogrow)::after {
  border-color: var(--md-outline);
}
.md-field.md-has-textarea:not(.md-autogrow)::before {
  border-color: var(--md-primary);
}
.md-field.md-disabled::after {
  background-image: linear-gradient(to right, var(--md-on-surface-disabled) 0%, var(--md-on-surface-disabled) 33%, transparent 0%);
}
.md-field.md-disabled label,
.md-field.md-disabled .md-input,
.md-field.md-disabled .md-textarea {
  color: var(--md-on-surface-disabled);
}
.md-field.md-invalid::after {
  background-color: var(--md-error);
}
.md-field.md-invalid.md-has-textarea:not(.md-autogrow)::before {
  border-color: var(--md-error);
}
.md-field.md-invalid label,
.md-field.md-invalid .md-error,
.md-field.md-invalid .md-date-icon {
  color: var(--md-error);
}
.md-field.md-focused label {
  color: var(--md-primary);
}

.md-field {
  width: 100%;
  min-height: 48px;
  margin: 4px 0 24px;
  padding-top: 16px;
  display: flex;
  position: relative;
  /* stylelint-disable-next-line */
}
.md-field::before, .md-field::after {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  transition: border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0s 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: border, opacity, transform;
  content: " ";
}
.md-field::after {
  height: 1px;
}
.md-field::before {
  height: 2px;
  z-index: 2;
  opacity: 0;
  transform: scaleX(0.12);
}
.md-field > .md-field-container {
  display: flex;
  flex: 1;
}
.md-field > .md-field-container > .md-icon {
  margin: 4px auto;
  font-size: 24px;
}
.md-field label {
  position: absolute;
  top: 23px;
  left: 0;
  pointer-events: none;
  transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 0.3s;
  font-size: 16px;
  line-height: 20px;
}
.md-field .md-icon + input + label {
  left: 24px;
}
.md-field .md-suffix {
  font-size: 16px;
  line-height: 32px;
  align-self: center;
  justify-self: center;
}
.md-field .md-prefix {
  display: none;
  padding-right: 4px;
  font-size: 16px;
  line-height: 32px;
  align-self: center;
  justify-self: center;
}
.md-field.md-focused .md-prefix, .md-field.md-has-value .md-prefix {
  display: block;
}
.md-field .md-input,
.md-field .md-textarea {
  height: 32px;
  padding: 0;
  display: block;
  flex: 1;
  border: none;
  background: none;
  transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-property: font-size, padding-top, color;
  font-size: 16px;
  line-height: 32px;
}
.md-field .md-input[type=date],
.md-field .md-textarea[type=date] {
  font-size: 16px;
}
.md-field .md-input[disabled],
.md-field .md-textarea[disabled] {
  cursor: default;
}
.md-field .md-input:focus,
.md-field .md-textarea:focus {
  outline: none;
}
.md-field .md-input::-input-placeholder,
.md-field .md-textarea::-input-placeholder {
  font-size: 16px;
  text-shadow: none;
  -webkit-text-fill-color: initial;
  transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-property: font-size, color;
}
.md-field .md-textarea {
  min-height: 32px;
  max-height: 230px;
  padding: 5px 0;
  resize: none;
  line-height: 1.3em;
}
.md-field .md-helper-text,
.md-field .md-error,
.md-field .md-count {
  height: 20px;
  position: absolute;
  bottom: -22px;
  font-size: 12px;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.md-field .md-error {
  display: block !important;
  left: 0;
  opacity: 0;
  transform: translate3d(0, -8px, 0);
}
.md-field .md-count {
  right: 0;
}
.md-field .md-input-action {
  width: 32px;
  min-width: 32px;
  height: 32px;
  margin: 0;
  position: absolute;
  top: 16px;
  right: 0;
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.md-field .md-input-action.md-input-action-enter, .md-field .md-input-action.md-input-action-leave.md-input-action-leave-active {
  opacity: 0;
}
.md-field .md-input-action.md-input-action-leave, .md-field .md-input-action.md-input-action-enter.md-input-action-enter-active {
  opacity: 1;
}
.md-field > .md-icon {
  margin: 4px auto;
  font-size: 24px;
  position: relative;
  z-index: 3;
  transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.md-field > .md-icon:first-child::after {
  width: 37px;
  height: 4px;
  position: absolute;
  left: -1px;
  bottom: -5px;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  content: "";
}
.md-field > .md-icon ~ label {
  left: 36px;
}
.md-field > .md-icon ~ .md-input,
.md-field > .md-icon ~ .md-textarea,
.md-field > .md-icon ~ .md-file {
  margin-left: 12px;
}
.md-field + .md-has-textarea:not(.md-autogrow) {
  margin-top: 36px;
}
.md-field.md-has-placeholder label {
  pointer-events: auto;
  top: 10px;
  opacity: 0;
  font-size: 12px;
}
.md-field.md-has-placeholder .md-input,
.md-field.md-has-placeholder .md-textarea {
  font-size: 16px;
}
.md-field.md-has-textarea:not(.md-autogrow)::before, .md-field.md-has-textarea:not(.md-autogrow)::after {
  height: auto;
  pointer-events: none;
  top: 0;
  bottom: 0;
  transform: none;
  background: none !important;
  border: 1px solid transparent;
  border-radius: 3px;
}
.md-field.md-has-textarea:not(.md-autogrow)::before {
  border-width: 2px;
}
.md-field.md-has-textarea:not(.md-autogrow) label {
  top: 16px;
  left: 16px;
}
.md-field.md-has-textarea:not(.md-autogrow) .md-textarea {
  min-height: 100px;
  padding: 0 16px;
  resize: vertical;
}
.md-field.md-has-textarea:not(.md-autogrow) > .md-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
}
.md-field.md-has-textarea:not(.md-autogrow) .md-count {
  right: 6px;
  bottom: 2px;
}
.md-field.md-has-textarea:not(.md-autogrow) .md-clear {
  top: 6px;
  right: 6px;
}
.md-field.md-has-textarea:not(.md-autogrow).md-focused label, .md-field.md-has-textarea:not(.md-autogrow).md-has-value label {
  top: 6px;
}
.md-field.md-has-textarea:not(.md-autogrow).md-focused .md-textarea, .md-field.md-has-textarea:not(.md-autogrow).md-has-value .md-textarea {
  margin-top: 10px;
}
.md-field.md-has-file::before, .md-field.md-has-file::after,
.md-field.md-has-file label {
  left: 36px;
}
.md-field.md-has-file .md-input {
  margin-left: 12px;
}
.md-field.md-focused::before, .md-field.md-highlight::before {
  opacity: 1;
  transform: scaleX(1);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: border, opacity, transform;
}
.md-field.md-focused label, .md-field.md-has-value label {
  pointer-events: auto;
  top: 0;
  opacity: 1;
  font-size: 12px;
}
.md-field.md-focused .md-input,
.md-field.md-focused .md-textarea, .md-field.md-has-value .md-input,
.md-field.md-has-value .md-textarea {
  font-size: 16px;
}
.md-field.md-inline label {
  pointer-events: none;
}
.md-field.md-inline.md-focused label {
  top: 23px;
  font-size: 16px;
}
.md-field.md-inline.md-has-value label {
  opacity: 0;
}
.md-field.md-disabled::after {
  background: bottom left repeat-x;
  background-size: 4px 1px;
}
.md-field.md-has-password .md-toggle-password {
  margin: 0;
  position: absolute;
  right: 0;
  bottom: -2px;
}
.md-field.md-has-password .md-toggle-password svg {
  width: 22px;
  height: 22px;
}
.md-field.md-clearable .md-input {
  padding-right: 30px;
}
@keyframes md-invalid-shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  30%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
.md-field.md-invalid.md-has-value label:not(:focus) {
  animation: md-invalid-shake 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
  backface-visibility: hidden;
  perspective: 1000px;
}
.md-field.md-invalid.md-has-textarea:not(.md-autogrow)::before {
  border-width: 2px;
}
.md-field.md-invalid .md-error {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.md-field.md-invalid .md-helper-text {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
}
.md-field.md-required label::after {
  position: absolute;
  top: 2px;
  right: 0;
  transform: translateX(calc(100% + 2px));
  content: "*";
  line-height: 1em;
  vertical-align: top;
}