.login-form {
  background: var(--primary-clr);
  width: 100%;
  /* max-width: 30rem; */
  margin: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  border-radius: 1rem;
  /* max-height: 30rem; */
  height: 100%;

  min-width: 50%;
width: max-content;
}

.form-header {
  font-size: x-large;
  margin-block: 1.5rem;
}

.form-selector {
  display: flex;
  flex-direction: row;
  margin-block-end: 1.5rem;
}

.form-selector a {
  padding: 0.5rem;
  background: var(--secondary-clr);
}

.form-selector a:first-child,
.input-container label {
  border-radius: 0.25em 0 0 0.25rem;
}

.form-selector a:last-child,
.input-container input {
  border-radius: 0 0.25em 0.25em 0;
}

.form-selector a:hover,
.form-selector a:focus {
  color: var(--hover-color);
  background: var(--secondary-clr-dark);

  /* width: 77%; */
max-width: 100%;
}

.form-inputs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* max-width: 20rem; */
  margin-block-end: 2rem;
}

.input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: 0.5rem;
  height: 2rem;
  width: 100%;
max-width: 20rem;
}

.input-container input,
.input-container label {
  height: 100%;
  width: 100%;
  border: none;
}

.input-container input {
  background: var(--secondary-clr);
  padding-inline: 0.5em;
}

.input-container input::placeholder {
  color: var(--secondary-clr-dark);
}

.input-container label {
  background: var(--secondary-clr-dark);
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-container label ion-icon {
  color: var(--bg);
}

.form-extras a {
  text-decoration: underline;
}

.form-extras a:hover,
.form-extras a:focus {
  color: var(--hover-color);
}

a.active {
  background: var(--secondary-clr-dark);
  color: var(--hover-color);
}


.input-sections {
  display: flex;
  flex-direction: row;
  gap: var(--gap, 1em);
  width: max-content
}

select {
  border: 0px solid var(--primary-clr);
border-radius: 0 0.25em 0.25em 0;
cursor: pointer;
padding: 0.5em;
margin-inline-start: 0;
background: var(--secondary-clr);
margin: 0;
height: 100%;
}

label {
  aspect-ratio: 1;
}

@media only screen and (max-width: 36em) {
  .input-sections {
    flex-direction: column;

  }
}

p.header {
  margin-block: 1em;
  text-align: center;
}

label.custom-label {
  /* aspect-ratio:unset; */
  width: max-content;
  height: 100%;
  background: var(--secondary-clr);
  border-radius: 0;
  padding: 0.5em;
  white-space: nowrap;
  font-size: 0.8em;
}

.page-content {
  height: auto;
}