/* General layout classes... */
form.fs-form            { margin: 0 auto; max-width: 960px; padding: 0 10px; clear: both}
.fs-group               { margin: 0; box-sizing: border-box; display: flex }
.fs-question            { margin: 0; padding: 5px; box-sizing: border-box }
.fs-group div           { display: inline-block; }

/* Hide all form elements other than active sections/pages */
.fs-form section,           .fs-form div.fs-page   { display: none }
.fs-form section.fs-active, .fs-form div.fs-active { display: block }

/* Non-input classes... */
.fs-notes               { font-size: 80%; margin-left: 4em; font-style: italic }

/* Input classes */
.fs-form input, .fs-form select, .fs-form textarea { display: inline-block }

/* Check/radio button arrays */

.fs-form ul.fs-checkbox     { padding-left: 0; box-sizing: border-box; list-style: none }
.fs-form .fs-checkbox  label { display: block; border-radius: 5px; padding: 5px; margin:8px 1%; box-sizing: border-box }
.fs-form .fs-checkbox  label                          { background-color: #eee }
.fs-form .fs-checkbox  label.fs-checked               { background-color: #ccf }
.fs-form .fs-checkbox  label input[type="checkbox"],
.fs-form .fs-checkbox  label input[type="radio"]      { display: none }             /* Hide the check box */
.fs-form .fs-columns-2 label                          { float: left; width: 48%     }
.fs-form .fs-columns-3 label                          { float: left; width: 31.33%  }
.fs-form .fs-columns-4 label                          { float: left; width: 23%     }
ul.fs-checkbox:after                                  { content: ""; clear: both; display: table; } /* Clear fix */

/* Normal input element */
.fs-form input:invalid        { background-color: #fee }

.fs-form input[type="text"], .fs-form input[type="email"], .fs-form input[type="url"], .fs-form select,
  .fs-form textarea           { font-size: 1em; border: 1px solid black; box-sizing: border-box; margin: 0;
                                border-radius: 5px; padding: 5px; width: 100%; margin-left: 0 }
.fs-form textarea { height: 8em }
.fs-form input:focus { padding: 5px } /* This fixes an on focus bug probably from core style ... */

/* Hide elements which are disabled by logic */
.fs-form .fs-hidden { display: none }

/* Navigation buttons at the bottom of the page */
.fs-buttons span    { width: 48%; border-radius: 5px; padding: 0.5em; margin: 6px;
                      box-sizing: border-box;  display: block; font-size: 1.2em; font-weight: bold}
.fs-prev            { float: left; background-color: #ccf  }
.fs-next            { float: right; background-color: #cfc; text-align: right }
.fs-prev:before     { content: '\00AB'; padding-right: 0.5em }  /* Double left arrow quote ... */
.fs-next:after      { content: '\00BB'; padding-left: 0.5em  }  /* Double right arrow quote ... */
.fs-buttons .fs-disabled   { display: none }
.fs-buttons .fs-pending    { color: #ccc }

/* This class gives a simple way of generating layout for the form, but you can over-ride it to
   match your site! Some examples are below: */

/* Put icons on the URL/Email input elements... */
/*
.fs-form input[type="email"], .fs-form input[type="url"] { width: 90% }
.fs-form label.fs-email span::after { padding-left: 10px; content: '\2709'; }
.fs-form label.fs-url   span::after { padding-left: 10px; content: '\1f310'; }
*/