/* 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;
}
