.smart-terms {
  border: 1px solid #e1e5e9;
  padding: 2rem;
  border-radius: .5rem;
  background-color: #fff;
  color: #2c3e50;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 1200px;
  margin: 2rem auto;

  & header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e2e8f0;

    & h1 {
      font-size: 2rem;
      font-weight: 600;
      color: #1a202c;
      margin-bottom: 0;
      border-bottom: none;
    }

    & x-revision {
      font-size: .95rem;
      color: #718096;
      margin: 0;
      text-align: center;
      display: block;
    }
  }

  & h1:first-of-type:not(header h1) {
    display: none;
  }

  & h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #1a202c;
    text-align: center;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: .75rem;
  }

  & h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.5rem 0 1rem;
    color: #2d3748;
  }

  & h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1.25rem 0 .75rem;
    color: #4a5568;
  }

  & p {
    margin-bottom: 1rem;
    font-size: .95rem;
    text-align: justify;
  }

  & strong {
    font-weight: 600;
    color: #2d3748;
  }

  & em {
    color: #718096;
    font-style: italic;
  }

  & ul, & ol {
    margin: 1rem 0;
    padding-left: 1.5rem;

    & li {
      margin-bottom: .5rem;
      font-size: .95rem;
    }
  }

  & ul {
    list-style-type: disc;
  }

  & ol {
    list-style-type: decimal;
  }
}

bux-input-checkbox {
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: unset;
  grid-template-rows: unset;
  gap: unset;

  & > input {
    height: 1em;
    width: 1em;
    border-radius: .25em;
    border: 1px solid #000;
    background-color: #fff;
    align-self: baseline;
    display: inline-block;
    position: relative;
    margin-top: .1rem;
  }

  & > input:invalid {
    background-color: #ffb6c1;
  }

  & > label {
    display: inline-block;
    padding-left: .5rem;
    text-align: left;
  }

  & > input + label {
    padding-left: .5rem;
  }

  & > .bux-help {
    width: 100%;
    font-style: italic;
    font-size: 95%;
    font-weight: 350;
  }
}

:root {
  --fw-enabled-a-color: #084298;
  --fw-complete-a-bg-color: #90ee90;
  --fw-complete-a-bg-image: none;
  --fw-complete-a-border-color: #82d682;
  --fw-complete-a-color: #084298;
}

form.bux-form-wizard {
  & > header {
    margin-bottom: 2rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1rem;

    & h1 {
      text-align: center;
      font-size: 20pt;
      margin-bottom: 0;
    }

    & p {
      text-align: center;
      margin-top: .5rem;
      margin-bottom: 0;
    }

    & ul {
      display: grid;
      gap: .75rem;
      margin-bottom: 1rem;
      list-style: none;
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 12px;
      padding: .75rem;

      @media (width >= 768px) {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      }

      & li {
        & a {
          display: flex;
          align-items: center;
          gap: .5rem;
          padding: .375rem .75rem;
          text-decoration: none;
          border-radius: .375rem;
          font-weight: 500;
          font-size: .875rem;

          @media (width >= 768px) {
            justify-content: center;
            white-space: nowrap;
          }

          &:before {
            content: "";
            font-family: "Font Awesome 5 Free";
            font-weight: 400;
            font-size: 14pt;
          }
        }

        & a {
          background: #e9ecef;
          border: 1px solid #e9ecef;
          color: #696969;
          cursor: not-allowed;
        }

        &.x-enabled a {
          background: #fff;
          color: var(--fw-enabled-a-color);
          cursor: pointer;
          border: 1px solid #d2d4d7;
        }

        &.x-complete a {
          background: var(--fw-complete-a-bg-color);
          background-image: var(--fw-complete-a-bg-image);
          border-color: var(--fw-complete-a-border-color);
          color: var(--fw-complete-a-color);

          &:before {
            content: "";
            font-family: "Font Awesome 5 Free";
            font-weight: 400;
          }
        }

        &.x-selected a {
          background: linear-gradient(0deg, #084298 0%, #2155a2 50%, #3968ad 100%);
          color: #fff;
          border: 1px solid #084298;

          &:before {
            color: #fff;
          }
        }

        &.x-error a {
          background: #ffb6c1;
          color: #000;
          border: 1px solid #dc3545;

          &:before {
            color: #dc3545;
          }
        }
      }
    }

    counter-reset: step-counter;

    & hr {
      margin-top: 1.5rem;
      border: none;
      border-top: 1px solid #e9ecef;
    }
  }

  & > error {
    display: block;
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: .25rem;
    padding: .75rem;
    margin-bottom: 1rem;

    &:empty {
      display: none;
    }
  }

  & > content {
    display: block;

    & dl {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: .5rem 1rem;
      margin-bottom: 1.5rem;

      & dt {
        font-weight: 600;
        color: #495057;
      }

      & dd {
        margin: 0;
        color: #6c757d;
      }
    }
  }

  & > div.x-disabled-content {
    text-align: center;
    font-size: 16pt;
    display: block;
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: .25rem;
    padding: .75rem;
    margin-bottom: 1rem;
  }

  & > footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    margin-top: 2rem;
    border-top: 1px solid #ddd;

    & > * {
      flex-shrink: 0;
    }
  }
}

bux-input-text-string {
  margin: 0 0 1rem;
  display: block;

  & > label {
    margin-bottom: .5rem;
    font-weight: bold;
    display: inline-block;
  }

  & > input {
    padding: .375rem .75rem;
    width: 100%;
    text-align: left;
    display: block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #f0f8ff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    box-shadow: 0 0 10px #0000001a;
  }

  & > input:invalid {
    background-color: #ffb6c1;
    border-color: red;
  }

  & div.help-text {
    margin-top: .5rem;
    font-size: .875em;
  }
}