body      { overflow-y:scroll; }
form > fieldset { margin:0; }
.space-right0 { margin-right:5px; }
form fieldset:first-child,
.no-last-keyline:last-child { border:none; }
.question { cursor:help; }
.square4 {
  width:40px;
  height:40px;
  }
 [data-tooltip] {
  cursor:pointer;
  position:relative;
  }
[data-tooltip]:after {
  content:attr(data-tooltip);
  position:absolute;
  background:#404040;
  color:#fff;
  border-radius:3px;
  bottom:20px;
  display:none;
  padding:0 10px;
  width:auto;
  min-width:75px;
  left:0;
  margin-left:-10px;
  font-size:12px;
  height:30px;
  line-height:30px;
  text-align:center;
  }
[data-tooltip]:before {
  content:'';
  display:block;
  border-left:5px solid transparent;
	border-right:5px solid transparent;
	border-top:5px solid #404040;
  display:none;
  position:absolute;
  bottom:15px;
  left:5px;
  }
  [data-tooltip]:hover:before,
  [data-tooltip]:hover:after {
    display:block;
    }
.min-containment {
  min-height:600px;
  }
.listing > *:last-child { border-bottom:none; }
.colfifths { width:20%; float:left; }
.text-alert { color:#f9886c; }

/* When rendering groups react requires elements
 * to be wrapped in containers which breaks default
 * pill class rules. This brings them back */
.pill .react > * {
  border-radius:0 0 0 0;
  border:0 solid white;
  border-left-width:1px;
  }
  .pill .react:first-of-type > * {
    border-radius:3px 0 0 3px;
    border-left-width:0;
    }
  .pill .react:last-of-type > * {
    border-radius:0 3px 3px 0;
    }
  .pill .react:only-child > * {
    border-radius:3px;
    }

.pill .set12:first-of-type > * {
  border-radius:3px 3px 0 0;
  }
.pill .set12:last-of-type > * {
  border-radius:0 0 3px 3px;
  }
.pill .set12 > * {
  text-align:left;
  width:100%;
  border-left-width:0;
  border-bottom-width:1px;
  }

.loading:before { background-color:rgba(0,0,0,0.25); }
.loading:before,
.loading:after { position:fixed; }

fieldset:target > input {
  border-color:#f9886c;
  }

nav.primary a {
  display:inline-block;
  margin-right:10px;
  box-shadow:inset 0 -3px 0 transparent;
  }
  nav.primary a:hover {
    box-shadow:inset 0 -3px 0 rgba(0,0,0,0.10);
    }
  nav.primary a.active {
    box-shadow:inset 0 -3px 0 #142736;
    }

.rounded-toggle label {
  cursor:pointer;
  vertical-align:top;
  display:inline-block;
  border-radius:16px;
  padding:3px 10px;
  font-size:12px;
  line-height:20px;
  }
  .rounded-toggle > span {
    padding:0;
    }

.error-console { word-wrap:break-word; }

/* react autosuggest */
.react-autosuggest__container {
  position:relative;
  }
.react-autosuggest__input {
  width:100%;
  height:40px;
  padding:10px;
  border:1px solid rgba(0,0,0,0.25);
  border-radius:3px;
  }
.react-autosuggest__input:focus {
  outline:none;
  }
.react-autosuggest__container--open .react-autosuggest__input {
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  }
.react-autosuggest__suggestions-container {
  position:absolute;
  top:41px;
  width:100%;
  margin:0;
  padding:0;
  list-style-type:none;
  border:1px solid rgba(0,0,0,0.25);
  background-color:#fff;
  border-bottom-left-radius:3px;
  border-bottom-right-radius:3px;
  z-index:2;
  }
.react-autosuggest__suggestion {
  cursor:pointer;
  padding:10px;
  }
.react-autosuggest__suggestion--focused {
  background-color:rgba(0,0,0,0.1);
  }


@media only screen and (max-width:640px) {
  .link a { padding:2.5px 0; }
  .pill:not(.mobile-cols) .react:first-of-type > * {
    border-radius:3px 3px 0 0;
    }
  .pill:not(.mobile-cols) .react:last-of-type > * {
    border-radius:0 0 3px 3px;
    }
  .pill:not(.mobile-cols) .react > * {
    width:100%;
    border-left-width:0;
    border-bottom-width:1px;
    }
}