.turbolinks-progress-bar {
  background-color: #f36e21;
}

.contact-centre main {
  grid-template-columns: [ff-start] 1rem [full-start] minmax(1em, 1fr) [main-start] minmax(0, 5em) [narrow-start] minmax(0, 2.5em) [verynarrow-start] minmax(10em, 15em) [verynarrow-end] minmax(0, 2.5em) [narrow-end] minmax(0, 5em) [main-end] minmax(1em, 1fr) [full-end] 1rem [ff-end];
}
.contact-centre h1 {
  font-size: 2em;
}
header {
  display: flex;
  justify-content: space-between;
  margin-left: 1rem;
  margin-right: 1rem;
}

h3.dev-environment {
  color: #f36e21;
}

main.dev-environment {
  background-image: linear-gradient(white, #DDDDDD);
}

.cancel {
  background: #999;
}

.smaller {
  font-size: 0.9em;
}

.button.inline-button {
  display: inline;
  width: inherit;
}

.button.hyperlink-button.disabled {
  background: none;
  color: #eee;
}
.button.hyperlink-button.disabled:hover {
  background: none;
}
.button:disabled, .button.disabled {
  background: #eee;
}
.button:disabled:hover, .button.disabled:hover {
  background: #eee;
  cursor: default;
}
.button div {
  display: inline;
}

button.loading {
  background: #eee;
}

nav ul.tabs {
  margin-top: 1rem;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0.8rem 0 0.2rem;
}

fieldset.grouping-fieldset {
  margin: 0;
}

main > *, main > form {
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari */
  page-break-inside: avoid;
  /* Theoretically FF 20+ */
  break-inside: avoid-column;
}

h1 {
  grid-column: full;
}

td h2 {
  margin: 0;
}
td label {
  margin: 0;
  padding: 0;
}
td label .input[type=checkbox], td label .input[type=checkbox] {
  display: block;
  width: 2em;
  height: 2em;
  line-height: 2em;
}

.individual-view h2:first-of-type {
  grid-column: full;
  margin: 0;
}
.individual-view .tabs a {
  padding: 1rem 0.5rem;
}

form.columns {
  display: block;
}
form.columns fieldset {
  display: block;
  page-break-inside: avoid;
  /* For Firefox. */
  -webkit-column-break-inside: avoid;
  /* For Chrome & friends. */
  break-inside: avoid;
  /* For standard browsers like IE. :-) */
}

.date-field-month, .date-field-day {
  width: 2.2em;
  margin-right: 0.3em;
}

.date-field-year {
  width: 2.8em;
}

.listing thead {
  display: none;
}
.listing td {
  line-height: 2em;
  max-width: 500px;
}
.listing td:nth-child(1) {
  font-weight: bold;
  text-align: right;
}
.justified {
  justify-content: center;
}

div.border-row td {
  border-top: 1px solid grey;
}

div.email-preview {
  width: 100%;
  height: 400px;
  margin-top: 15px;
  overflow-y: scroll;
  border: 2px solid grey;
}

.email-preview iframe {
  width: 100%;
  height: 98%;
}

.cc-errors {
  background: #ff7575;
  color: white;
}

/*# sourceMappingURL=theme.css.map */

:root {
  --red:#ff3860;--red-dark:#ff1443;--red-light:#ff5c7c;--blue:#498afb;--blue-dark:#2674fa;--blue-light:#6ca0fc;--orange:#fa8142;--orange-dark:#f96a1f;--orange-light:#fb9865;--green:#09c372;--green-dark:#07a15e;--green-light:#0be586;--purple:#9166cc;--purple-dark:#7d4bc3;--purple-light:#a481d5;--yellow:#ffdd57;--yellow-dark:#ffd633;--yellow-light:#ffe47a;--pink:#ff4088;--pink-dark:#ff1c72;--pink-light:#ff649e;--gray0:#f8f8f8;--gray1:#dbe1e8;--gray2:#b2becd;--gray3:#6c7983;--gray4:#454e56;--gray5:#2a2e35;--gray6:#12181b;--nav-width:4em;--font-body:"sofia-pro",sans-serif;--font-head:"sofia-pro",sans-serif;--font-code:"attribute-mono",monospace;--font-size:20px;--max-width-bp:768px;--orange-pink:linear-gradient(to bottom right,var(--orange-light),var(--orange-dark) 85%);--green-grad:linear-gradient(to bottom right,var(--green-light),var(--green-dark) 85%);--background:var(--gray6);--text-color:var(--gray2);--h-color:#fff;--nav-shadow:4px 0 10px -3px #010101;--card-shadow:0 4px 8px rgba(0,0,0,0.38);--toc-shadow:rgba(0,0,0,0.7) 0px 10px 20px 0px;--nav-bg:var(--gray5);--tag-bg:var(--gray4);--code-bg:#22262f;--card-bg:var(--gray5);--overlay-bg:rgba(0,0,0,0.9);--h-border:2px dashed var(--nav-bg);--nav-border:2px dashed var(--text-color);--card-radius:0.25em;transition: all .3s ease
}

.tag {
  display: inline-block;
  border-radius: 3px;
  padding: .1em .5em .1em;
  border-radius: 2px;
  background: var(--tag-bg);
  color: var(--text-color);
  font-weight: 200;
  margin: .25em .1em
}

h1.tag {
  margin-left: 0;
  margin-right: 0
}

.tag-sm {
  font-size: .7em;
  display: inline-block;
  letter-spacing: .15ch;
  font-weight: 400
}

.tag-lg {
  font-size: 1.2em;
  border-radius: 4px
}

.tag-bg {
  background: var(--background)
}

.tag-green,.tag-pro {
  background: var(--green);
  color: #fff
}

.tag-purple {
  background: var(--purple);
  color: #fff
}

.tag-contrast {
  background: var(--text-color);
  color: var(--background)
}

.tag-negative {
  background: #dc0530;
  color: #fff
}