.accordion > .header {
  cursor: pointer;
}

.accordion > .content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms;
  transform-origin: top;
}

.accordion > .content.active {
  grid-template-rows: 1fr;
  transform-origin: bottom;
}

.accordion > .content > div {
  overflow: hidden;
}

.autocomplete {
  position: relative;
  width: max-content;
}

.autocomplete > ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  visibility: hidden;
  background-color: inherit;
}

.autocomplete.active > ul {
  visibility: visible;
}

.autocomplete.active > ul > li {
  display: none;
}

.autocomplete.active > ul > li.active {
  display: block;
}

.button {
  background: none;
  border-width: 1px;
  border-style: solid;
  font-family: inherit;
  outline: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-block: 0;
  position: relative;
  overflow: hidden;
  transition: background 400ms;
  cursor: pointer;
}

.button > span.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  background-color: rgba(0, 0, 0, 0.7);
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.button > span.icon {
  margin-top: -2px;
}

.dropdown {
  position: relative;
  width: max-content;
}

.dropdown > .items {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  visibility: hidden;
  background-color: inherit;
}

.dropdown.active > .items {
  visibility: visible;
}

.input-text {
  position: relative;
}

.input-text label {
  position: absolute;
  top: 0;
  left: 0;
}

.input-text input::placeholder {
  opacity: 0;
}

.input-text input:focus + label,
.input-text input:not(:placeholder-shown) + label {
  top: -50%;
  left: 12px;
  font-size: 75%;
  background: #fff;
}

.modal {
  position: fixed;
  top: 0;
  transform: translateY(100vh);
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  transition: all 300ms ease;
}

.modal.active {
  transform: translateY(0);
}

.modal.active > .dialog > .footer {
  position: fixed;
  bottom: 0;
}

.modal > .dialog {
  max-height: 100%;
  position: relative;
}

.modal > .dialog > .header {
  display: flex;
  align-items: center;
}

.modal > .dialog > .body {
  overflow-y: auto;
}

.modal > .dialog > .footer {
  display: flex;
  align-items: center;
  width: 100%;
}

.stepper ul.steps {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.stepper ul.steps > li {
  display: none;
}

.stepper ul.steps > li.active {
  display: initial;
}

.tabs ul.links,
.tabs ul.contents {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.tabs ul.links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: inherit;
  cursor: pointer;
}

.tabs ul.links > li.active {
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: inherit;
}

.tabs ul.contents > li {
  display: none;
}

.tabs ul.contents > li.active {
  display: initial;
}

input {
  font-family: inherit;
  font-size: inherit;
}
/*# sourceMappingURL=utils.css.map */