form.default {
  display: grid;
  gap: 0em;
  padding: 2em;
  border-radius: 1em;
  margin: 1em 1em 0 0;
  font-family: var(--font-forms);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.25rem;
  width: 50%;
  min-width: 400px;
  background-color: hsl(from var(--color-base) h s 88%);
}

form.login-form,
form.register-form,
form.changepassword-form {
  background-color: #fff9;
}

  .form-sections {
    display: grid;
    gap: 2em;
  }

    .form-sections > .section {
      padding: 1.2em;
      border: 1px solid hsl(from var(--color-accent) h s calc(l + 50));
      border-radius: 12px;
      transition: all .3s;
      /*background: linear-gradient(to bottom, var(--color-field), hsl(from var(--color-field) h s calc(l - 8)));*/
      background: #fff7;
    }

      .form-sections > .section:last-of-type {
        margin: 0 0 25px 0;
      }

      .form-sections > .section .heading {
        font-family: var(--font-forms);
        font-weight: 600;
        font-size: 1.1rem;
        line-height: 1.2rem;
        margin-bottom: 1em;
        color: hsl(from var(--color-accent) h s 30%);
        line-height: 2.2em;
        transition: all .3s;
      }

      .form-sections > .section .icon {
        margin-right: 1ch;
        border-radius: 50%;
        width: 2.6em;
        height: 2.6em;
        padding: .56em;
        background-color: hsl(from var(--color-accent) h s 90% / .8);
        color: hsl(from var(--color-accent) h s calc(l + 5));
        border: 1px solid hsl(from var(--color-accent) h s calc(l + 40));
        transition: all .3s;
      }

      .form-sections > .section .icon svg {
        width: 20px;
        height: 20px;
      }

      .form-sections > .section:hover {
        /*background-color: hsl(from var(--color-field) h s calc(l - 10));*/
      }

        .form-sections > .section:hover .heading {
          color: hsl(from var(--color-accent) h s 20%);
        }

        .form-sections > .section:hover .icon {
          background-color: hsl(from var(--color-accent) h s calc(l + 20));
          color: hsl(from var(--color-accent) h s 100%);
          border: 1px solid hsl(from var(--color-accent) h s calc(l + 5));
        }

.form-group {
  display: grid;
  gap: 1em;
  margin-bottom: 0.3em;
  grid-template-columns: 3fr 7fr;
}

form.labelshort .form-group {
  grid-template-columns: 1fr 7fr;
}

form.labelhalf .form-group {
  grid-template-columns: 5fr 5fr;
}

    .form-group label,
    .form-group select,
    .form-group textarea,
    .form-group input {
      margin: auto 0;
    }

    .form-group:has(button) {
      grid-column: 1 / -1;
    }




  form.column2 {
    width: 60%;
  }

    form.column2 .fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 2em;
    }

    form.column2 .form-group {
      grid-template-columns: 1fr;
      gap: 0.2em;
      margin-right: 0;
    }



  @media (width < 100em) {
    form.default {
      width: 60%;
    }

    form.column2 {
      width: 70%;
    }
  }




  @media (width < 70em) {
    form.default {
      display: grid;
      grid-template-columns: 1fr;
      min-width: 240px;
      width: 70%;
    }

    form.column2 .fields {
      grid-template-columns: 1fr;
      min-width: 200px;
    }

    .form-sections {
      display: grid;
      grid-template-columns: 1fr;
    }
  }



  @media (width < 40em) {
    form.default {
      width: 100%;
    }

    form.column2 .fields {
      gap: 0.4em;
    }

    .form-group,
    form.column2 .form-group {
      grid-template-columns: 1fr;
      gap: 0;
      margin-bottom: 0;
    }

      .form-group label {
        padding-top: 0;
      }
  }







  form.default label {
    color: hsl(from var(--color-complement) h s calc(l - 20) / .7);
    text-align: left;
    -webkit-font-smoothing: antialiased;
  }

  form.default input,
  form.default textarea,
  form.default select {
    border-radius: 7px;
    font-weight: 300;
    height: calc(.6em + 1.3rem + 2px);
    padding: .1em .5rem;
    line-height: 1.5;
    font-family: var(--font-sans);
    font-size: .9em;
    width: 100%;
    background-color: hsl(from var(--color-accent) h s l / 4%);
    color: var(--color-field-content);
    border: 1px solid hsl(from var(--color-complement) h s 15% / .1);
  }

    form.default input:focus,
    form.default textarea:focus,
    form.default select:focus {
      outline: none;
      border: 1px solid hsl(from var(--color-complement) h s 15% / .4);
    }

  form.default textarea,
  form.large textarea {
    resize: both;
    min-height: calc(6em + 2rem + 2px);
  }
    /*form.default select
{
  padding: .3rem 0.4rem;
}

form.default input:active
{
  border: 1px solid #eee;
}*/

    form.default input::-webkit-input-placeholder,
    form.default textarea::-webkit-input-placeholder {
      font-size: 1em;
      font-style: italic;
      color: var(--color-accent);
      opacity: .5;
    }

  form.default .selected-text {
    background-color: #e0e0e0;
  }

  form.default .info {
    cursor: pointer;
    line-height: 14px;
    font-size: 0.7em;
    padding: 1px 6px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    color: #fff;
    background-color: #f663197e;
  }