/****************************************************
  *  project: pardot form ajax handler                *
  *  description: demo style                          *
  *  author: horans@gmail.com                         *
  *  url: github.com/horans/pardot-form-ajax-handler  *
  *  update: 170629                                   *
  ****************************************************/
  
  main {
      background-color: #f9f9f9;
      /* min-height: 100vh; */
  }
  
  nav,
  section {
      margin: 0 auto;
      max-width: 1000px;
  }
  
  hr {
      margin-top: 2rem;
      opacity: .5;
  }
  
  small {
      color: gray;
      font-weight: normal;
  }
  
  samp {
      font-family: sans-serif;
  }
  
  .demo {
      margin: 0 auto;
      /*   max-width: 385px; */
  }
  
  .demo-wide {
      max-width: 508px;
  }
  
  .black {
      background: #1c1c1c;
  }
  
  .mint-green {
      background: rgb(205 237 173);
  }
  
  .cat {
      margin: 0 4px 0 0;
      /* background-color: #104068; */
      border-radius: 4px;
      /* border: 1px solid #fff; */
      overflow: hidden;
      float: left;
  }
  
  .cat label {
      float: left;
      line-height: 3.0em;
      border: 2px solid #77786c;
      /* border: 2px solid rgba(209, 213, 219, 1); */
      width: auto;
      height: 3.0em;
      cursor: pointer;
  }
  
  .cat label span {
      text-align: center;
      /* padding: 3px 0; */
      padding: 0;
      /* background: #ffffff; */
      display: block;
  }
  
  .cat label input {
      position: absolute;
      display: none;
      color: #fff !important;
  }
  /* selects all of the text within the input element and changes the color of the text */
  
  .cat label input+span {
      color: #000000;
      padding: 0 10px;
  }
  /* This will declare how a selected input will look giving generic properties */
  
  .cat input:checked+span {
      color: #ffffff;
      /* text-shadow: 0 0 6px rgba(0, 0, 0, 0.8); */
  }
  
  .cat input:checked+span {
      background-color: #635e51;
  }
  
  .flex {
      display: flex;
      gap: 5px;
  }
  
  h3 {
      font-size: 1rem;
  }
  
  .error input,
  .error select,
  .error textarea {
      border: 2px solid red;
  }