/* paths */
/* We can't use absolute paths here, because those are dependent on Django's
STATIC_URL setting. However, django-compressor consistently places the compiled
CSS into ${STATIC_URL}/CACHE/css/ regardless of compilation mode, so we can
reliably use relative paths to get back to STATIC_URL. */
/* grid settings */
/* screen breakpoints */
/* 800px */
/* 900px */
/* 1200px */
/* 1600px */
/* colours */
/* darker to lighter */
/* misc sizing */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }
  .visuallyhidden:active, .visuallyhidden:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto; }

.visuallyvisible {
  clip: none;
  height: auto;
  width: auto;
  margin: auto;
  overflow: visible;
  position: initial; }

/* Utility variable - you should never need to modify this */
/* Ensure grid columns are set to border-boxes. This is essential */
/* Our row container */
/* Our column container */
/* Push adds left padding */
/* Pull adds right padding */
/* only used in places where padding not applied to same elements as row or row-flush
 * most of the time this class should be applied directly to the html elements */
section {
  border-top: 1px solid #d9d9d9;
  margin-top: 2em;
  padding: 0 0 2em 0; }
  section > h2:first-child {
    margin: 0;
    font-size: 1em;
    background: #e6e6e6;
    padding: 1em;
    margin-bottom: 1em; }

#palette:before, #palette:after {
  content: " ";
  display: table; }
#palette:after {
  clear: both; }
#palette ul:before, #palette ul:after {
  content: " ";
  display: table; }
#palette ul:after {
  clear: both; }
#palette ul, #palette ul ul, #palette ul li {
  list-style-type: none;
  font-style: normal; }
#palette ul, #palette ul ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0; }
#palette li {
  float: left;
  width: 100px;
  height: 100px;
  padding: 10px;
  color: black; }
#palette .color-teal {
  background-color: #43b1b0; }
#palette .color-teal-darker {
  background-color: #358c8b; }
#palette .color-teal-dark {
  background-color: #246060; }
#palette .color-red {
  background-color: #cd3238; }
#palette .color-orange {
  background-color: #e9b04d; }
#palette .color-green {
  background-color: #189370; }
#palette .color-blue {
  background-color: #71b2d4; }
#palette .color-grey-1 {
  background-color: #333333; }
#palette .color-grey-1-1 {
  background-color: #404040; }
#palette .color-grey-2 {
  background-color: #666666; }
#palette .color-grey-3 {
  background-color: #d9d9d9; }
#palette .color-grey-4 {
  background-color: #e6e6e6; }
#palette .color-grey-5 {
  background-color: #fafafa; }
#palette .color-salmon {
  background-color: #f37e77; }
#palette .color-salmon-light {
  background-color: #fcf2f2; }

#icons :before, #icons :after {
  font-size: 2em; }
#icons ul {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3; }
#icons li {
  margin-bottom: 1em; }
#icons .spinner {
  position: relative; }
#icons .icon-spinner:after {
  position: absolute; }

.timepicker {
  height: 150px; }
