.btn-reset {
  background-color: transparent;
  border: none;
}
.btn {
  font-family: "Syne", Sans-Serif;
  padding: 0 20px;
  font-size: 0.7em;
  border-radius: 20px;
}
.btn-regular {
  background-color: var(--alt-bg-color);
  color: var(--alt-text-color);
}

.btn-negative {
  outline: 1px solid var(--gray-700);
  background-color: transparent;
  color: var(--main-text-color);
}

.btn-negative-outline {
  background-color: transparent;
  outline: 1px solid var(--alt-bg-color);
}

.btn:hover {
  transform: scale(0.97);
}

.btn-short {
  height: 25px;
}

.btn-avg {
  height: 40px;
}

.btn-tall {
  height: 50px;
}

.btn-width-100px {
  width: 100px;
}

.btn-width-120px {
  width: 120px;
}

.btn-width-150px {
  width: 150px;
}

.mg-left {
  margin-left: auto;
}

.field {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  gap: 5px;
}

.field:has([for="password"]) {
  gap: 10px;
}

.red {
  color: red;
}

.green {
  color: green;
}

.inline-flex {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.hidden {
  display: none;
}
.error-icon {
  width: 10px !important;
  height: 10px !important;
}
.flex-start {
  align-self: flex-start;
}
.flex-end {
  align-self: flex-end;
}
.ovf-hidden {
  overflow: hidden;
}