html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

.settings-table .contextual-setting input[type="text"], .create-setting-form input, .create-setting-form textarea, .settings-grid table, input[name="search-settings"] {
  width: 100%;
  min-width: 100%; }

/*
http://www.phase2technology.com/blog/exploring-maps-in-sass-3-3/
*/
html.js [js-hidden] {
  display: none; }

body {
  margin: 0;
  font-family: sans-serif; }
  body > header {
    padding: 0 1em; }

.settings-table {
  background: #f2f2f2; }
  .settings-table label {
    display: block; }
  .settings-table td, .settings-table th {
    padding: 0.2em 0.4em; }
  .settings-table thead {
    font-weight: bold;
    background: #e0e0e0; }
    .settings-table thead > tr > th {
      border: 1px solid #c8c8c8; }
  .settings-table tbody > tr > td {
    border: 1px solid #c8c8c8; }
  .settings-table tbody > tr:nth-of-type(4n-1) {
    background: rgba(40, 40, 40, 0.1); }
  .settings-table tbody > tr.open + .contextual-setting, .settings-table tbody > tr:focus + .contextual-setting {
    display: table-row !important;
    /* display the setting form for open rows */ }
  .settings-table tbody > tr:focus html.no-js {
    background: #F2F2C5;
    /* highlight focused setting for no-js users */ }
  .settings-table .contextual-setting {
    text-align: center; }
    html.js .settings-table .contextual-setting {
      background: #F2F2C5; }
    .settings-table .contextual-setting input[type="text"] {
      line-height: 1.4em; }
    .settings-table .contextual-setting > td {
      padding: 2em; }
      .settings-table .contextual-setting > td > div h1, .settings-table .contextual-setting > td > div h2, .settings-table .contextual-setting > td > div h3, .settings-table .contextual-setting > td > div h4, .settings-table .contextual-setting > td > div h5, .settings-table .contextual-setting > td > div h6 {
        margin-top: 0; }

.create-setting-module {
  margin-bottom: 1em; }

.create-setting-form {
  margin-bottom: 1em; }
  @media screen and (min-width: 641px) {
    .create-setting-form > fieldset > div {
      display: flex;
      flex-wrap: wrap; }
      .create-setting-form > fieldset > div > * {
        flex: 1 0 16em;
        padding-right: .5em;
        margin-bottom: .5em; } }
  .create-setting-form label {
    display: block; }
  .create-setting-form footer {
    text-align: center; }
    .create-setting-form footer > div {
      text-align: left;
      margin: 1em 0; }
    .create-setting-form footer button {
      margin-left: auto;
      margin-right: auto; }

.settings-grid {
  display: flex;
  flex-wrap: wrap;
  align-content: center; }
  .settings-grid > * {
    flex: 1 1 24em; }
    @media screen and (min-width: 641px) {
      .settings-grid > * {
        padding-left: 1rem;
        padding-right: 1rem; } }
  .settings-grid h2 {
    text-align: center; }
  .settings-grid form {
    text-align: center; }
    .settings-grid form table, .settings-grid form footer {
      margin-left: auto;
      margin-right: auto; }
  .settings-grid footer p {
    text-align: center; }

form.search-settings {
  font-size: 1.1em; }
  @media screen and (min-width: 641px) {
    form.search-settings {
      display: flex; } }
  form.search-settings > label {
    flex-grow: 1;
    max-width: 50vw;
    margin-right: .5em; }
  @media screen and (max-width: 640px) {
    form.search-settings button {
      display: block;
      margin-bottom: 0.5em; } }
  form.search-settings input, form.search-settings button {
    font-size: inherit; }

input[name="search-settings"] {
  margin-bottom: 1em; }

label[for="filter-by"] {
  text-align: right; }