app.css

@charset "UTF-8";

*,
:after,
:before {
  box-sizing: border-box
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent
}

@-ms-viewport {
  width: device-width
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block
}

body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-size: 1rem;
  font-weight: 400;
  text-align: left
}

[tabindex="-1"]:focus {
  outline: none !important
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: .5rem
}

p {
  margin-top: 0;
  margin-bottom: 1rem
}

abbr[data-original-title],
abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0
}

address {
  font-style: normal;
  line-height: inherit
}

address,
dl,
ol,
ul {
  margin-bottom: 1rem
}

dl,
ol,
ul {
  margin-top: 0
}

ol ol,
ol ul,
ul ol,
ul ul {
  margin-bottom: 0
}

dt {
  font-weight: 700
}

dd {
  margin-bottom: .5rem;
  margin-left: 0
}

blockquote {
  margin: 0 0 1rem
}

dfn {
  font-style: italic
}

b,
strong {
  font-weight: 700
}

small {
  font-size: 80%
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

a {
  color: #007bff;
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

a:hover {
  color: #0056b3;
  text-decoration: underline
}

a:not([href]):not([tabindex]),
a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
  color: inherit;
  text-decoration: none
}

a:not([href]):not([tabindex]):focus {
  outline: 0
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar
}

figure {
  margin: 0 0 1rem
}

img {
  border-style: none
}

svg:not(:root) {
  overflow: hidden
}

[role=button],
a,
area,
button,
input:not([type=range]),
label,
select,
summary,
textarea {
  -ms-touch-action: manipulation;
  touch-action: manipulation
}

table {
  border-collapse: collapse
}

caption {
  padding-top: .75rem;
  padding-bottom: .75rem;
  color: #868e96;
  text-align: left;
  caption-side: bottom
}

th {
  text-align: inherit
}

label {
  margin-bottom: .5rem
}

button {
  border-radius: 0
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

[type=reset],
[type=submit],
button,
html [type=button] {
  -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border-style: none
}

input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  padding: 0
}

input[type=date],
input[type=datetime-local],
input[type=month],
input[type=time] {
  -webkit-appearance: listbox
}

textarea {
  overflow: auto
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal
}

progress {
  vertical-align: baseline
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: none
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button
}

output {
  display: inline-block
}

summary {
  display: list-item
}

template {
  display: none
}

[hidden] {
  display: none !important
}

html {
  box-sizing: border-box
}

*,
:after,
:before {
  box-sizing: inherit;
  min-width: 0;
  min-height: 0
}

html {
  font-size: 62.5%;
  font-size: .625em
}

body {
  margin: 0;
  font-size: 1.4rem;
  background-color: #fff;
  color: #212529;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
  line-height: 1.5
}

@media (min-width:576px) {
  body {
    font-size: 1.6rem
  }
}

a {
  color: #effb41;
  text-decoration: none
}

a:active,
a:focus,
a:hover {
  color: #dceb05;
  text-decoration: underline
}

.h1-like,
h1 {
  font-size: 2.8rem;
  font-family: sans-serif;
  font-weight: 500
}

@media (min-width:576px) {

  .h1-like,
  h1 {
    font-size: 3.2rem
  }
}

.h2-like,
h2 {
  font-size: 2.4rem;
  font-family: sans-serif;
  font-weight: 500
}

@media (min-width:576px) {

  .h2-like,
  h2 {
    font-size: 2.8rem
  }
}

.h3-like,
h3 {
  font-size: 2rem;
  font-weight: 500
}

@media (min-width:576px) {

  .h3-like,
  h3 {
    font-size: 2.4rem
  }
}

.h4-like,
h4 {
  font-size: 1.8rem;
  font-weight: 500
}

@media (min-width:576px) {

  .h4-like,
  h4 {
    font-size: 2rem
  }
}

.h5-like,
h5 {
  font-size: 1.6rem;
  font-weight: 500
}

@media (min-width:576px) {

  .h5-like,
  h5 {
    font-size: 1.8rem
  }
}

.h6-like,
h6 {
  font-size: 1.4rem;
  font-weight: 500
}

@media (min-width:576px) {

  .h6-like,
  h6 {
    font-size: 1.6rem
  }
}

dd,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: .5rem
}

address,
blockquote,
dl,
ol,
p,
pre,
ul {
  margin-top: 0;
  margin-bottom: 1rem
}

li .p-like,
li ol,
li p,
li ul,
ol ol,
ul ul {
  margin-top: 0;
  margin-bottom: 0
}

blockquote,
code,
img,
input,
pre,
svg,
table,
td,
textarea,
video {
  max-width: 100%
}

img {
  height: auto
}

ol,
ul {
  padding-left: 2em
}

img {
  vertical-align: middle
}

.italic,
address,
cite,
em,
i,
var {
  font-style: italic
}

code,
kbd,
mark {
  border-radius: 2px
}

kbd {
  padding: 0 2px;
  border: 1px solid #999
}

pre {
  tab-size: 2
}

code {
  padding: 2px 4px;
  background: rgba(0, 0, 0, .04);
  color: #b11
}

pre code {
  padding: 0;
  background: none;
  color: inherit;
  border-radius: 0
}

mark {
  padding: 2px 4px
}

sub,
sup {
  vertical-align: 0
}

sup {
  bottom: 1ex
}

sub {
  top: .5ex
}

blockquote {
  position: relative;
  padding-left: 3em;
  min-height: 2em
}

blockquote:before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: 0;
  font-family: georgia, serif;
  font-size: 5em;
  height: .4em;
  line-height: .9;
  color: #e7e9ed
}

blockquote>footer {
  margin-top: .75em;
  font-size: .9em;
  color: rgba(0, 0, 0, .7)
}

blockquote>footer:before {
  content: "\2014 \0020"
}

q {
  font-style: normal
}

.q,
q {
  quotes: "“" "”" "‘" "’"
}

.q:lang(fr),
q:lang(fr) {
  quotes: "«\00a0" "\00a0»" "“" "”"
}

hr {
  display: block;
  clear: both;
  height: 1px;
  margin: 1em 0 2em;
  padding: 0;
  border: 0;
  color: #ccc;
  background-color: #ccc
}

blockquote,
figure {
  margin-left: 0;
  margin-right: 0
}

code,
kbd,
pre,
samp {
  white-space: pre-wrap;
  font-family: consolas, courier, monospace;
  line-height: normal
}

@media print {
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important
  }

  body {
    width: auto;
    margin: auto;
    font-family: serif;
    font-size: 12pt
  }

  .h1-like,
  .h2-like,
  .h3-like,
  .h4-like,
  .h5-like,
  .h6-like,
  .p-like,
  blockquote,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  label,
  ol,
  p,
  ul {
    color: #000;
    margin: auto
  }

  .print {
    display: block
  }

  .no-print {
    display: none
  }

  .p-like,
  blockquote,
  p {
    orphans: 3;
    widows: 3
  }

  blockquote,
  ol,
  ul {
    page-break-inside: avoid
  }

  .h1-like,
  .h2-like,
  .h3-like,
  caption,
  h1,
  h2,
  h3 {
    page-break-after: avoid
  }

  a {
    color: #000
  }

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: ""
  }
}

.d-flex,
.flex-column,
.flex-column-reverse,
.flex-container,
.flex-container--column,
.flex-container--column-reverse,
.flex-container--row,
.flex-container--row-reverse,
.flex-row,
.flex-row-reverse {
  display: flex;
  flex-wrap: wrap
}

.flex-container--row,
.flex-row {
  flex-direction: row
}

.flex-column,
.flex-container--column {
  flex-direction: column
}

.flex-container--row-reverse,
.flex-row-reverse {
  flex-direction: row-reverse;
  justify-content: flex-end
}

.flex-column-reverse,
.flex-container--column-reverse {
  flex-direction: column-reverse;
  justify-content: flex-end
}

.flex-item-fluid,
.item-fluid {
  flex: 1 1 0%
}

.flex-item-first,
.item-first {
  order: -1
}

.flex-item-medium,
.item-medium {
  order: 0
}

.flex-item-last,
.item-last {
  order: 1
}

.flex-item-center,
.item-center,
.mr-auto {
  margin: auto
}

.u-bold {
  font-weight: 700
}

.u-italic {
  font-style: italic
}

.u-normal {
  font-weight: 400;
  font-style: normal
}

.u-uppercase {
  text-transform: uppercase
}

.u-lowercase {
  text-transform: lowercase
}

.u-smaller {
  font-size: .6em
}

.u-small {
  font-size: .8em
}

.u-big {
  font-size: 1.2em
}

.u-bigger {
  font-size: 1.5em
}

.u-biggest {
  font-size: 2em
}

.u-txt-wrap {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto
}

.u-txt-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis
}

.txtleft,
.u-txt-left {
  text-align: left
}

.txtright,
.u-txt-right {
  text-align: right
}

.txtcenter,
.u-txt-center {
  text-align: center
}

.clear,
.u-clear {
  clear: both
}

.clearfix:after,
.u-clearfix:after {
  content: "";
  display: table;
  clear: both;
  border-collapse: collapse
}

.left .u-left {
  margin-right: auto
}

.right,
.u-right {
  margin-left: auto
}

.center,
.u-center {
  margin-left: auto;
  margin-right: auto
}

.bfc,
.mod,
.u-bfc,
.u-mod {
  overflow: hidden
}

.fl,
.u-fl {
  float: left
}

img.fl,
img.u-fl {
  margin-right: 1rem
}

.fr,
.u-fr {
  float: right
}

img.fr,
img.u-fr {
  margin-left: 1rem
}

img.fl,
img.fr,
img.u-fl,
img.u-fr {
  margin-bottom: .5rem
}

.inbl,
.u-inbl {
  display: inline-block;
  vertical-align: top
}

.is-hidden,
.js-hidden,
[hidden] {
  display: none
}

.visually-hidden {
  position: absolute !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important
}

.is-disabled,
.is-disabled~label,
.js-disabled,
[disabled],
[disabled]~label {
  opacity: .5;
  cursor: not-allowed !important;
  filter: grayscale(1)
}

ul.is-unstyled,
ul.unstyled {
  list-style: none;
  padding-left: 0
}

.color--inverse {
  color: #fff
}

.w100 {
  width: 100%
}

.w95 {
  width: 95%
}

.w90 {
  width: 90%
}

.w85 {
  width: 85%
}

.w80 {
  width: 80%
}

.w75 {
  width: 75%
}

.w70 {
  width: 70%
}

.w65 {
  width: 65%
}

.w60 {
  width: 60%
}

.w55 {
  width: 55%
}

.w50 {
  width: 50%
}

.w45 {
  width: 45%
}

.w40 {
  width: 40%
}

.w35 {
  width: 35%
}

.w30 {
  width: 30%
}

.w25 {
  width: 25%
}

.w20 {
  width: 20%
}

.w15 {
  width: 15%
}

.w10 {
  width: 10%
}

.w5 {
  width: 5%
}

.w66 {
  width: 66.66667%
}

.w33 {
  width: 33.33333%
}

.wauto {
  width: auto
}

.w960p {
  width: 960px
}

.mw960p {
  max-width: 960px
}

.w1140p {
  width: 1140px
}

.mw1140p {
  max-width: 1140px
}

.w1000p {
  width: 1000px
}

.w950p {
  width: 950px
}

.w900p {
  width: 900px
}

.w850p {
  width: 850px
}

.w800p {
  width: 800px
}

.w750p {
  width: 750px
}

.w700p {
  width: 700px
}

.w650p {
  width: 650px
}

.w600p {
  width: 600px
}

.w550p {
  width: 550px
}

.w500p {
  width: 500px
}

.w450p {
  width: 450px
}

.w400p {
  width: 400px
}

.w350p {
  width: 350px
}

.w300p {
  width: 300px
}

.w250p {
  width: 250px
}

.w200p {
  width: 200px
}

.w150p {
  width: 150px
}

.w100p {
  width: 100px
}

.w50p {
  width: 50px
}

.ma0,
.man {
  margin: 0
}

.pa0,
.pan {
  padding: 0
}

.mas {
  margin: 1rem
}

.mam {
  margin: 2rem
}

.mal {
  margin: 4rem
}

.pas {
  padding: 1rem
}

.pam {
  padding: 2rem
}

.pal {
  padding: 4rem
}

.mt0,
.mtn {
  margin-top: 0
}

.mts {
  margin-top: 1rem
}

.mtm {
  margin-top: 2rem
}

.mtl {
  margin-top: 4rem
}

.mr0,
.mrn {
  margin-right: 0
}

.mrs {
  margin-right: 1rem
}

.mrm {
  margin-right: 2rem
}

.mrl {
  margin-right: 4rem
}

.mb0,
.mbn {
  margin-bottom: 0
}

.mbs {
  margin-bottom: 1rem
}

.mbm {
  margin-bottom: 2rem
}

.mbl {
  margin-bottom: 4rem
}

.ml0,
.mln {
  margin-left: 0
}

.mls {
  margin-left: 1rem
}

.mlm {
  margin-left: 2rem
}

.mll {
  margin-left: 4rem
}

.mauto {
  margin: auto
}

.mtauto {
  margin-top: auto
}

.mrauto {
  margin-right: auto
}

.mbauto {
  margin-bottom: auto
}

.mlauto {
  margin-left: auto
}

.pt0,
.ptn {
  padding-top: 0
}

.pts {
  padding-top: 1rem
}

.ptm {
  padding-top: 2rem
}

.ptl {
  padding-top: 4rem
}

.pr0,
.prn {
  padding-right: 0
}

.prs {
  padding-right: 1rem
}

.prm {
  padding-right: 2rem
}

.prl {
  padding-right: 4rem
}

.pb0,
.pbn {
  padding-bottom: 0
}

.pbs {
  padding-bottom: 1rem
}

.pbm {
  padding-bottom: 2rem
}

.pbl {
  padding-bottom: 4rem
}

.pl0,
.pln {
  padding-left: 0
}

.pls {
  padding-left: 1rem
}

.plm {
  padding-left: 2rem
}

.pll {
  padding-left: 4rem
}

@media (min-width:480px) {

  [class*=" grid-"],
  [class^=grid-] {
    display: grid;
    grid-auto-flow: dense
  }

  [class*=" grid-"].has-gutter,
  [class^=grid-].has-gutter {
    grid-gap: 1rem
  }

  [class*=" grid-"].has-gutter-l,
  [class^=grid-].has-gutter-l {
    grid-gap: 2rem
  }

  [class*=" grid-"].has-gutter-xl,
  [class^=grid-].has-gutter-xl {
    grid-gap: 4rem
  }
}

@media (min-width:480px) {

  .autogrid,
  .grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr
  }

  .autogrid.has-gutter,
  .grid.has-gutter {
    grid-column-gap: 1rem
  }

  .autogrid.has-gutter-l,
  .grid.has-gutter-l {
    grid-column-gap: 2rem
  }

  .autogrid.has-gutter-xl,
  .grid.has-gutter-xl {
    grid-column-gap: 4rem
  }
}

[class*=grid-2] {
  grid-template-columns: repeat(2, 1fr)
}

[class*=grid-3] {
  grid-template-columns: repeat(3, 1fr)
}

[class*=grid-4] {
  grid-template-columns: repeat(4, 1fr)
}

[class*=grid-5] {
  grid-template-columns: repeat(5, 1fr)
}

[class*=grid-6] {
  grid-template-columns: repeat(6, 1fr)
}

[class*=grid-7] {
  grid-template-columns: repeat(7, 1fr)
}

[class*=grid-8] {
  grid-template-columns: repeat(8, 1fr)
}

[class*=grid-9] {
  grid-template-columns: repeat(9, 1fr)
}

[class*=grid-10] {
  grid-template-columns: repeat(10, 1fr)
}

[class*=grid-11] {
  grid-template-columns: repeat(11, 1fr)
}

[class*=grid-12] {
  grid-template-columns: repeat(12, 1fr)
}

[class*=grid-13] {
  grid-template-columns: repeat(13, 1fr)
}

[class*=grid-14] {
  grid-template-columns: repeat(14, 1fr)
}

[class*=grid-15] {
  grid-template-columns: repeat(15, 1fr)
}

[class*=grid-16] {
  grid-template-columns: repeat(16, 1fr)
}

[class*=grid-17] {
  grid-template-columns: repeat(17, 1fr)
}

[class*=grid-18] {
  grid-template-columns: repeat(18, 1fr)
}

[class*=grid-19] {
  grid-template-columns: repeat(19, 1fr)
}

[class*=grid-20] {
  grid-template-columns: repeat(20, 1fr)
}

[class*=grid-21] {
  grid-template-columns: repeat(21, 1fr)
}

[class*=grid-22] {
  grid-template-columns: repeat(22, 1fr)
}

[class*=grid-23] {
  grid-template-columns: repeat(23, 1fr)
}

[class*=grid-24] {
  grid-template-columns: repeat(24, 1fr)
}

[class*=grid-25] {
  grid-template-columns: repeat(25, 1fr)
}

[class*=grid-26] {
  grid-template-columns: repeat(26, 1fr)
}

[class*=grid-27] {
  grid-template-columns: repeat(27, 1fr)
}

[class*=grid-28] {
  grid-template-columns: repeat(28, 1fr)
}

[class*=grid-29] {
  grid-template-columns: repeat(29, 1fr)
}

[class*=grid-30] {
  grid-template-columns: repeat(30, 1fr)
}

[class*=col-1] {
  grid-column: auto/span 1
}

[class*=row-1] {
  grid-row: auto/span 1
}

[class*=col-2] {
  grid-column: auto/span 2
}

[class*=row-2] {
  grid-row: auto/span 2
}

[class*=col-3] {
  grid-column: auto/span 3
}

[class*=row-3] {
  grid-row: auto/span 3
}

[class*=col-4] {
  grid-column: auto/span 4
}

[class*=row-4] {
  grid-row: auto/span 4
}

[class*=col-5] {
  grid-column: auto/span 5
}

[class*=row-5] {
  grid-row: auto/span 5
}

[class*=col-6] {
  grid-column: auto/span 6
}

[class*=row-6] {
  grid-row: auto/span 6
}

[class*=col-7] {
  grid-column: auto/span 7
}

[class*=row-7] {
  grid-row: auto/span 7
}

[class*=col-8] {
  grid-column: auto/span 8
}

[class*=row-8] {
  grid-row: auto/span 8
}

[class*=col-9] {
  grid-column: auto/span 9
}

[class*=row-9] {
  grid-row: auto/span 9
}

[class*=col-10] {
  grid-column: auto/span 10
}

[class*=row-10] {
  grid-row: auto/span 10
}

[class*=col-11] {
  grid-column: auto/span 11
}

[class*=row-11] {
  grid-row: auto/span 11
}

[class*=col-12] {
  grid-column: auto/span 12
}

[class*=row-12] {
  grid-row: auto/span 12
}

[class*=col-13] {
  grid-column: auto/span 13
}

[class*=row-13] {
  grid-row: auto/span 13
}

[class*=col-14] {
  grid-column: auto/span 14
}

[class*=row-14] {
  grid-row: auto/span 14
}

[class*=col-15] {
  grid-column: auto/span 15
}

[class*=row-15] {
  grid-row: auto/span 15
}

[class*=col-16] {
  grid-column: auto/span 16
}

[class*=row-16] {
  grid-row: auto/span 16
}

[class*=col-17] {
  grid-column: auto/span 17
}

[class*=row-17] {
  grid-row: auto/span 17
}

[class*=col-18] {
  grid-column: auto/span 18
}

[class*=row-18] {
  grid-row: auto/span 18
}

[class*=col-19] {
  grid-column: auto/span 19
}

[class*=row-19] {
  grid-row: auto/span 19
}

[class*=col-20] {
  grid-column: auto/span 20
}

[class*=row-20] {
  grid-row: auto/span 20
}

[class*=col-21] {
  grid-column: auto/span 21
}

[class*=row-21] {
  grid-row: auto/span 21
}

[class*=col-22] {
  grid-column: auto/span 22
}

[class*=row-22] {
  grid-row: auto/span 22
}

[class*=col-23] {
  grid-column: auto/span 23
}

[class*=row-23] {
  grid-row: auto/span 23
}

[class*=col-24] {
  grid-column: auto/span 24
}

[class*=row-24] {
  grid-row: auto/span 24
}

[class*=col-25] {
  grid-column: auto/span 25
}

[class*=row-25] {
  grid-row: auto/span 25
}

[class*=col-26] {
  grid-column: auto/span 26
}

[class*=row-26] {
  grid-row: auto/span 26
}

[class*=col-27] {
  grid-column: auto/span 27
}

[class*=row-27] {
  grid-row: auto/span 27
}

[class*=col-28] {
  grid-column: auto/span 28
}

[class*=row-28] {
  grid-row: auto/span 28
}

[class*=col-29] {
  grid-column: auto/span 29
}

[class*=row-29] {
  grid-row: auto/span 29
}

[class*=col-30] {
  grid-column: auto/span 30
}

[class*=row-30] {
  grid-row: auto/span 30
}

@media (min-width:480px) and (max-width:767px) {
  [class*=grid-][class*=-small-1] {
    grid-template-columns: repeat(1, 1fr)
  }

  [class*=col-][class*=-small-1] {
    grid-column: auto/span 1
  }

  [class*=grid-][class*=-small-2] {
    grid-template-columns: repeat(2, 1fr)
  }

  [class*=col-][class*=-small-2] {
    grid-column: auto/span 2
  }

  [class*=grid-][class*=-small-3] {
    grid-template-columns: repeat(3, 1fr)
  }

  [class*=col-][class*=-small-3] {
    grid-column: auto/span 3
  }

  [class*=grid-][class*=-small-4] {
    grid-template-columns: repeat(4, 1fr)
  }

  [class*=col-][class*=-small-4] {
    grid-column: auto/span 4
  }

  [class*=-small-all] {
    grid-column: 1/-1
  }
}

.item-first {
  order: -1
}

.item-last {
  order: 1
}

.grid-offset {
  visibility: hidden
}

.col-all {
  grid-column: 1/-1
}

.row-all {
  grid-row: 1/-1
}

.skip-links,
.skip-links a {
  position: absolute
}

.skip-links a {
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  padding: .5em;
  background: #000;
  color: #fff;
  text-decoration: none
}

.skip-links a:focus {
  position: static;
  overflow: visible;
  clip: auto
}

.table,
table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  vertical-align: top;
  margin-bottom: 2rem
}

.table {
  display: table;
  border: 1px solid #acb3c2;
  background: transparent
}

.table--zebra tbody tr:nth-child(odd) {
  background: #e7e9ed
}

.table caption {
  caption-side: bottom;
  padding: 1rem;
  color: #333;
  font-style: italic;
  text-align: right
}

.table td,
.table th {
  padding: .3rem .6rem;
  min-width: 2rem;
  vertical-align: top;
  border: 1px dotted #acb3c2;
  text-align: left;
  cursor: default
}

.table thead {
  color: #212529;
  background: transparent
}

.table--auto {
  table-layout: auto
}

fieldset,
form {
  border: none
}

fieldset {
  padding: 2rem
}

fieldset legend {
  padding: 0 .5rem;
  border: 0;
  white-space: normal
}

label {
  display: inline-block;
  cursor: pointer
}

[type=color],
[type=date],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=submit],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  border: 0;
  box-shadow: inset 0 0 0 1px #333;
  color: #212529;
  vertical-align: middle;
  padding: .5rem 1rem;
  margin: 0;
  transition: .25s;
  transition-property: box-shadow, background-color, color, border;
  appearance: none
}

[type=submit] {
  background-color: #333;
  color: #fff;
  cursor: pointer
}

input[readonly] {
  background-color: #e7e9ed
}

select {
  padding-right: 2rem;
  border-radius: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' style='isolation:isolate' width='20' height='20'%3E%3Cpath d='M9.96 11.966L3.523 5.589C2.464 4.627.495 6.842 1.505 7.771l6.989 6.992c.644.587 2.161.606 2.796 0l7.2-6.992c1.067-1.019-1.126-3.091-2.228-2.046L9.96 11.966z' fill='inherit'/%3E%3C/svg%3E");
  background-position: right .6rem center;
  background-repeat: no-repeat;
  background-size: 1.2rem
}

select::-ms-expand {
  display: none
}

textarea {
  min-height: 5em;
  vertical-align: top;
  resize: vertical;
  white-space: pre-wrap
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration,
[type=search]::-webkit-search-results-button,
[type=search]::-webkit-search-results-decoration {
  display: none
}

::-webkit-input-placeholder {
  color: #777
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #777
}

input::placeholder,
textarea::placeholder {
  color: #777
}

progress {
  width: 100%;
  vertical-align: middle
}

.btn,
.btn--danger,
.btn--ghost,
.btn--info,
.btn--inverse,
.btn--primary,
.btn--success,
.btn--warning,
.button,
.button--danger,
.button--ghost,
.button--info,
.button--inverse,
.button--primary,
.button--success,
.button--warning,
[type=button],
button {
  display: inline-block;
  padding: 1rem 1.5rem;
  cursor: pointer;
  user-select: none;
  transition: .25s;
  transition-property: box-shadow, background-color, color, border;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
  color: #212529;
  border: none;
  border-radius: 0;
  background-color: #e7e9ed;
  font-family: inherit;
  font-size: inherit;
  line-height: 1
}

.btn:focus,
.button:focus,
[type=button]:focus,
button:focus {
  -webkit-tap-highlight-color: transparent
}

.btn--primary,
.button--primary {
  background-color: #0275d8;
  color: #fff;
  box-shadow: none
}

.btn--primary:active,
.btn--primary:focus,
.btn--primary:hover,
.button--primary:active,
.button--primary:focus,
.button--primary:hover {
  background-color: #025aa5
}

.btn--success,
.button--success {
  background-color: #5cb85c;
  color: #fff;
  box-shadow: none
}

.btn--success:active,
.btn--success:focus,
.btn--success:hover,
.button--success:active,
.button--success:focus,
.button--success:hover {
  background-color: #449d44
}

.btn--info,
.button--info {
  background-color: #5bc0de;
  color: #000;
  box-shadow: none
}

.btn--info:active,
.btn--info:focus,
.btn--info:hover,
.button--info:active,
.button--info:focus,
.button--info:hover {
  background-color: #31b0d5
}

.btn--warning,
.button--warning {
  background-color: #f0ad4e;
  color: #000;
  box-shadow: none
}

.btn--warning:active,
.btn--warning:focus,
.btn--warning:hover,
.button--warning:active,
.button--warning:focus,
.button--warning:hover {
  background-color: #ec971f
}

.btn--danger,
.button--danger {
  background-color: #d9534f;
  color: #fff;
  box-shadow: none
}

.btn--danger:active,
.btn--danger:focus,
.btn--danger:hover,
.button--danger:active,
.button--danger:focus,
.button--danger:hover {
  background-color: #c9302c
}

.btn--inverse,
.button--inverse {
  background-color: #333;
  color: #fff;
  box-shadow: none
}

.btn--inverse:active,
.btn--inverse:focus,
.btn--inverse:hover,
.button--inverse:active,
.button--inverse:focus,
.button--inverse:hover {
  background-color: #1a1a1a
}

.btn--ghost,
.button--ghost {
  color: #fff;
  box-shadow: inset 0 0 0 1px #fff
}

.btn--ghost,
.btn--ghost:active,
.btn--ghost:focus,
.btn--ghost:hover,
.button--ghost,
.button--ghost:active,
.button--ghost:focus,
.button--ghost:hover {
  background-color: transparent
}

.btn--small,
.button--small {
  padding: .7rem 1rem;
  font-size: .8em
}

.btn--big,
.button--big {
  padding: 1.5rem 2rem;
  font-size: 1.4em
}

.btn--block,
.button--block {
  width: 100% !important;
  display: block
}

.btn--unstyled,
.button--unstyled {
  padding: 0;
  border: none;
  text-align: left;
  background: none;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

.btn--unstyled:focus,
.button--unstyled:focus {
  box-shadow: none;
  outline: none
}

.nav-button {
  outline: 0;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.nav-button,
.nav-button>* {
  padding: 0;
  background-color: transparent
}

.nav-button>* {
  display: inline-flex;
  vertical-align: top;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  height: 2.6rem;
  width: 2.6rem;
  background-image: linear-gradient(#333, #333);
  background-position: 50%;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-size: 100% 5px;
  transition: .25s;
  transition-property: transform, background;
  will-change: transform, background
}

.nav-button>:after,
.nav-button>:before {
  content: "";
  height: 5px;
  background: #333;
  transition: .25s;
  transition-property: transform, top;
  will-change: transform, top
}

.nav-button:hover>* {
  background-color: transparent
}

.nav-button:focus {
  outline: 0
}

.nav-button.is-active>* {
  background-image: none;
  justify-content: center
}

.nav-button.is-active>:before {
  transform: translateY(50%) rotate(45deg)
}

.nav-button.is-active>:after {
  transform: translateY(-50%) rotate(-45deg)
}

.checkbox {
  border-radius: 4px
}

.switch {
  border-radius: 3em
}

.radio {
  border-radius: 50%
}

.checkbox,
.radio,
.switch {
  appearance: none;
  vertical-align: text-bottom;
  outline: 0;
  cursor: pointer
}

.checkbox~label,
.radio~label,
.switch~label {
  cursor: pointer
}

.checkbox::-ms-check,
.radio::-ms-check,
.switch::-ms-check {
  display: none
}

.switch {
  width: 4rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 70%;
  box-shadow: inset -2rem 0 0 #333, inset 0 0 0 1px #333;
  transition: box-shadow .15s;
  background-color: #fff
}

.switch:after,
.switch:before {
  font-weight: 700;
  color: #fff
}

.switch:before {
  content: "✕";
  float: right;
  margin-right: .66667rem
}

.switch:checked {
  box-shadow: inset 2rem 0 0 #5cb85c, inset 0 0 0 1px #5cb85c
}

.switch:checked:before {
  content: "✓";
  float: left;
  margin-left: .66667rem
}

.checkbox {
  width: 2rem;
  height: 2rem;
  box-shadow: inset 0 0 0 1px #333;
  background-color: #fff;
  transition: background-color .15s
}

.checkbox:checked {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23FFF' d='M6.4 1l-.7.7-2.8 2.8-.8-.8-.7-.7L0 4.4l.7.7 1.5 1.5.7.7.7-.7 3.5-3.5.7-.7L6.4 1z'/%3E%3C/svg%3E");
  background-size: 60% 60%;
  background-position: 50%;
  background-repeat: no-repeat;
  background-color: #333
}

.radio {
  width: 2rem;
  height: 2rem;
  background-size: 0 0;
  transition: background-size .15s;
  box-shadow: inset 0 0 0 1px #333;
  background-color: #fff
}

.radio:checked {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='24' fill='%23333'/%3E%3C/svg%3E");
  background-size: 90% 90%;
  background-position: 50%;
  background-repeat: no-repeat;
  background-color: #fff
}

.alert,
.alert--danger,
.alert--ghost,
.alert--info,
.alert--inverse,
.alert--primary,
.alert--success,
.alert--warning {
  padding: 1rem;
  margin-top: .75em;
  margin-bottom: 0;
  color: #212529;
  border-radius: 0;
  background-color: #e7e9ed
}

.alert--danger a,
.alert--ghost a,
.alert--info a,
.alert--inverse a,
.alert--primary a,
.alert--success a,
.alert--warning a,
.alert a {
  color: inherit;
  text-decoration: underline
}

.alert--primary {
  background-color: #0275d8;
  color: #fff;
  box-shadow: none
}

.alert--success {
  background-color: #5cb85c;
  color: #fff;
  box-shadow: none
}

.alert--info {
  background-color: #5bc0de;
  color: #000;
  box-shadow: none
}

.alert--warning {
  background-color: #f0ad4e;
  color: #000;
  box-shadow: none
}

.alert--danger {
  background-color: #d9534f;
  color: #fff;
  box-shadow: none
}

.alert--inverse {
  background-color: #333;
  color: #fff;
  box-shadow: none
}

.alert--ghost {
  background-color: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px #fff
}

.alert--small {
  font-size: 1.2rem
}

.alert--big {
  font-size: 2rem
}

.alert--block {
  width: 100% !important;
  display: block
}

.alert--disabled,
.alert.disabled,
.disabled.alert--danger,
.disabled.alert--ghost,
.disabled.alert--info,
.disabled.alert--inverse,
.disabled.alert--primary,
.disabled.alert--success,
.disabled.alert--warning {
  opacity: .5;
  cursor: not-allowed
}

.alert--danger:empty,
.alert--ghost:empty,
.alert--info:empty,
.alert--inverse:empty,
.alert--primary:empty,
.alert--success:empty,
.alert--warning:empty,
.alert:empty {
  display: none
}

@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 400;
  src: url(fonts/Lato.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}

@font-face {
  font-family: Digital\ 7;
  src: url(fonts/digital-7.ttf) format("truetype");
  font-display: swap;
}

.Icon {
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 30px 30px;
  height: 30px;
  width: 30px;
  display: inline-block
}

.Intensity {
  background-image: url(img/intensity.svg) !important
}

.Color {
  background-image: url(img/color.svg) !important
}

.Fx {
  background-image: url(img/fx.svg) !important
}

.Iris {
  background-image: url(img/iris.svg) !important
}

.Pan {
  background-image: url(img/pan.svg) !important
}

.Prism {
  background-image: url(img/prism.svg) !important
}

.Wheel {
  background-image: url(img/wheel.svg) !important
}

@media screen {
  body {
    font-family: Lato, sans-serif;
    background-color: #333;
    overflow: hidden
  }

  body>div>* {
    min-height: calc(100vh - 70px)
  }

  header {
    background-color: #262626;
    height: 70px;
    line-height: 70px;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .25);
    color: #fff;
    font-size: 150%;
    font-weight: 700;
    width: 100%
  }

  header img {
    margin: 5px;
    object-fit: contain;
    max-height: 60px
  }

  header span em {
    font-size: 50%;
    font-weight: lighter;
    position: absolute;
    top: 50px;
    line-height: normal;
    left: 91px
  }

  header #iconbox {
    position: absolute;
    right: 5px;
    top: 0
  }

  header #iconbox a {
    width: 40px;
    display: inline-block
  }

  nav {
    position: absolute;
    right: 0;
    background-color: #262626;
    box-shadow: -5px 4px 4px 1px rgba(0, 0, 0, .25);
    color: #fff;
    z-index: 20
  }

  nav ul {
    margin-bottom: 0
  }

  nav a svg {
    width: 5rem;
    height: 5rem;
    padding: .5rem;
    fill: #fff;
    transition: fill .5s, stroke .5s
  }

  nav a:hover svg {
    fill: #effb41
  }

  nav#Infos a svg {
    stroke: #fff;
    fill: transparent
  }

  nav#Infos a:hover svg {
    stroke: #effb41 !important;
    fill: #effb41 !important
  }

  nav .heading {
    color: #4df7ff;
    font-size: 1.2em;
    margin-bottom: .5em;
    margin-top: .2em
  }

  nav p {
    font-size: .8em;
    margin: .2em
  }

  aside {
    z-index: 10;
    width: 100px;
    background-color: #262626
  }

  aside fieldset>button {
    display: none
  }

  aside fieldset>.label,
  aside fieldset>label {
    color: #727e96;
    fill: #727e96;
    cursor: pointer;
    margin-bottom: 2rem;
    vertical-align: middle
  }

  aside fieldset>.label>input,
  aside fieldset>label>input {
    width: 100px;
    height: 100px;
    opacity: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    z-index: 1
  }

  aside fieldset>.label.active>svg,
  aside fieldset>.label.dragover>svg,
  aside fieldset>.label:focus>svg,
  aside fieldset>.label:hover>svg,
  aside fieldset>label.active>svg,
  aside fieldset>label.dragover>svg,
  aside fieldset>label:focus>svg,
  aside fieldset>label:hover>svg {
    transform: scale(.95)
  }

  aside fieldset>.label.active>span,
  aside fieldset>.label.dragover>span,
  aside fieldset>.label:focus>span,
  aside fieldset>.label:hover>span,
  aside fieldset>label.active>span,
  aside fieldset>label.dragover>span,
  aside fieldset>label:focus>span,
  aside fieldset>label:hover>span {
    margin-top: 100px;
    transform: rotate(0deg);
    left: 0
  }

  aside fieldset>.label.active[for=PatchXML],
  aside fieldset>.label.dragover[for=PatchXML],
  aside fieldset>.label:focus[for=PatchXML],
  aside fieldset>.label:hover[for=PatchXML],
  aside fieldset>label.active[for=PatchXML],
  aside fieldset>label.dragover[for=PatchXML],
  aside fieldset>label:focus[for=PatchXML],
  aside fieldset>label:hover[for=PatchXML] {
    color: #5ac8fa;
    fill: #5ac8fa
  }

  aside fieldset>.label.active[for=FixtureGroupXML],
  aside fieldset>.label.dragover[for=FixtureGroupXML],
  aside fieldset>.label:focus[for=FixtureGroupXML],
  aside fieldset>.label:hover[for=FixtureGroupXML],
  aside fieldset>label.active[for=FixtureGroupXML],
  aside fieldset>label.dragover[for=FixtureGroupXML],
  aside fieldset>label:focus[for=FixtureGroupXML],
  aside fieldset>label:hover[for=FixtureGroupXML] {
    color: #d4aa08;
    fill: #d4aa08
  }

  aside fieldset>.label.active[for=PresetXML],
  aside fieldset>.label.dragover[for=PresetXML],
  aside fieldset>.label:focus[for=PresetXML],
  aside fieldset>.label:hover[for=PresetXML],
  aside fieldset>label.active[for=PresetXML],
  aside fieldset>label.dragover[for=PresetXML],
  aside fieldset>label:focus[for=PresetXML],
  aside fieldset>label:hover[for=PresetXML] {
    color: #3a791d;
    fill: #3a791d
  }

  aside fieldset>.label.active[for=CuelistXML],
  aside fieldset>.label.active[for=PlaybackXML],
  aside fieldset>.label.dragover[for=CuelistXML],
  aside fieldset>.label.dragover[for=PlaybackXML],
  aside fieldset>.label:focus[for=CuelistXML],
  aside fieldset>.label:focus[for=PlaybackXML],
  aside fieldset>.label:hover[for=CuelistXML],
  aside fieldset>.label:hover[for=PlaybackXML],
  aside fieldset>label.active[for=CuelistXML],
  aside fieldset>label.active[for=PlaybackXML],
  aside fieldset>label.dragover[for=CuelistXML],
  aside fieldset>label.dragover[for=PlaybackXML],
  aside fieldset>label:focus[for=CuelistXML],
  aside fieldset>label:focus[for=PlaybackXML],
  aside fieldset>label:hover[for=CuelistXML],
  aside fieldset>label:hover[for=PlaybackXML] {
    color: #ff2d55;
    fill: #ff2d55
  }

  aside fieldset>.label.loaded,
  aside fieldset>label.loaded {
    color: #fff;
    fill: #fff
  }

  aside fieldset>.label>span,
  aside fieldset>label>span {
    transform: rotate(-90deg) translateY(-150%) translateX(-35%);
    position: absolute;
    width: 100px;
    text-align: center;
    transition: .25s ease-in-out
  }

  aside fieldset>.label>svg,
  aside fieldset>label>svg {
    width: 100%;
    transform: scale(.5);
    transition: .25s ease-in-out
  }

  footer {
    position: fixed;
    top: 0;
    margin: 4px;
    right: 0;
    opacity: 0;
    transition: .25s ease-in-out !important
  }

  footer.fade {
    opacity: 1;
    z-index: 1000
  }

  ::-webkit-scrollbar {
    width: 10px
  }

  ::-webkit-scrollbar-track {
    background-color: #262626
  }

  ::-webkit-scrollbar-thumb {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(51, 51, 51, .75) !important
  }

  .pop-in,
  article form,
  nav {
    animation: fadeIn .5s
  }

  article {
    color: #fff;
    opacity: 0;
    width: calc(100% - 100px);
    height: calc(100% - 70px);
    transition: .5s ease-in-out !important;
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    left: -100%;
    font-size: 80%;
    z-index: 8
  }

  article label {
    margin-bottom: 0
  }

  article#default {
    line-height: 400px
  }

  article#default>svg {
    height: 400px;
    fill: #fff;
    float: left
  }

  article.fade {
    z-index: 9;
    left: 100px;
    opacity: 1
  }

  article.noanim {
    transition: none !important
  }

  article .Patch_MultiPart .Patch_ID {
    text-align: right
  }

  article .overflow {
    height: calc(100% - 70px);
    display: block;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 3px
  }

  article [data-type] table thead th {
    top: 2.7em
  }

  article table,
  article table.cuelist {
    width: 100%
  }

  article table thead th {
    position: sticky;
    top: 0;
    background-color: #262626;
    z-index: 1
  }

  article table thead td {
    font-weight: 700
  }

  article table tr {
    border-bottom: 1px solid #727e96
  }

  article table tbody tr:last-child {
    border-bottom: none
  }

  article table td {
    padding: 0 .5em
  }

  article table td[rowspan] {
    vertical-align: top
  }

  article table td,
  article table th {
    vertical-align: top;
    min-width: 1rem
  }

  article#FixtureGroup h2,
  article#Patch h2 {
    color: #5ac8fa
  }

  article#FixtureGroup h2 {
    color: #d4aa08
  }

  article#Preset h2 {
    color: #3a791d
  }

  article#Cuelist h2,
  article#Playback h2 {
    color: #ff2d55
  }

  article#Cuelist h3,
  article#Playback h3 {
    margin: 0;
    font-size: 1.2em;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .5em
  }

  article#Cuelist h3 span,
  article#Playback h3 span {
    display: none
  }

  .pop-in {
    position: absolute;
    z-index: 1000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #333;
    overflow-y: scroll;
    overflow-x: hidden
  }

  .pop-in table {
    width: 100% !important
  }

  .pop-in img {
    width: 120px;
    height: 60px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1001;
    background-color: #262626
  }

  .pop-in p {
    margin: .5em;
    font-size: .9em;
    column-count: 2
  }

  .square {
    width: 1em;
    height: 1em;
    display: inline-flex;
    margin-right: .2em
  }

  .Type-Cuelist,
  [data-type=Cuelist] h3 {
    background-image: linear-gradient(#781b18, #320b0a)
  }

  .Type-Submaster,
  [data-type=Submaster] h3 {
    background-image: linear-gradient(#1f4603, #0d1e01)
  }

  .Type-Chase,
  [data-type=Chase] h3 {
    background-image: linear-gradient(#28486f, #111f30)
  }

  .Type-Groupmaster,
  .Type-Inhibitive,
  [data-type=Groupmaster] h3,
  [data-type=Inhibitive] h3 {
    background-image: linear-gradient(#926d01, #3e2f00)
  }

  .Type-Override,
  [data-type=Override] h3 {
    background-image: linear-gradient(#3e2c41, #1b131c)
  }

  .Type-Timecode,
  [data-type=Timecode] h3 {
    background-image: linear-gradient(#640935, #2b0316)
  }

  .Patch h1,
  .Patch h2 {
    color: #5ac8fa
  }

  .Patch:focus svg,
  .Patch:hover svg {
    fill: #5ac8fa
  }

  #Patch ::-webkit-scrollbar-thumb {
    background-color: #5ac8fa
  }

  #Patch button i {
    background-image: linear-gradient(#5ac8fa, #5ac8fa) !important
  }

  #Patch button i:after,
  #Patch button i:before {
    background-color: #5ac8fa !important
  }

  .FixtureGroup h1,
  .FixtureGroup h2 {
    color: #d4aa08
  }

  .FixtureGroup:focus svg,
  .FixtureGroup:hover svg {
    fill: #d4aa08
  }

  #FixtureGroup ::-webkit-scrollbar-thumb {
    background-color: #d4aa08
  }

  #FixtureGroup button i {
    background-image: linear-gradient(#d4aa08, #d4aa08) !important
  }

  #FixtureGroup button i:after,
  #FixtureGroup button i:before {
    background-color: #d4aa08 !important
  }

  .Preset h1,
  .Preset h2 {
    color: #3a791d
  }

  .Preset:focus svg,
  .Preset:hover svg {
    fill: #3a791d
  }

  #Preset ::-webkit-scrollbar-thumb {
    background-color: #3a791d
  }

  #Preset button i {
    background-image: linear-gradient(#3a791d, #3a791d) !important
  }

  #Preset button i:after,
  #Preset button i:before {
    background-color: #3a791d !important
  }

  .Cuelist h1,
  .Cuelist h2,
  .Playback h1,
  .Playback h2 {
    color: #ff2d55
  }

  .Cuelist:focus svg,
  .Cuelist:hover svg,
  .Playback:focus svg,
  .Playback:hover svg {
    fill: #ff2d55
  }

  #Cuelist ::-webkit-scrollbar-thumb,
  #Playback ::-webkit-scrollbar-thumb {
    background-color: #ff2d55
  }

  #Cuelist button i,
  #Playback button i {
    background-image: linear-gradient(#ff2d55, #ff2d55) !important
  }

  #Cuelist button i:after,
  #Cuelist button i:before,
  #Playback button i:after,
  #Playback button i:before {
    background-color: #ff2d55 !important
  }

  #Cuelist button.is-active i,
  #FixtureGroup button.is-active i,
  #Patch button.is-active i,
  #Playback button.is-active i,
  #Preset button.is-active i {
    background-image: none !important
  }

  span[data-title] {
    position: relative;
    border-bottom: .5px dotted #727e96;
    z-index: 0;
    cursor: help
  }

  span[data-title]:focus,
  span[data-title]:hover {
    color: #dceb05;
    border-color: transparent;
    z-index: 2
  }

  span[data-title]:focus:after,
  span[data-title]:hover:after {
    content: attr(data-title);
    position: absolute;
    background-color: #262626;
    top: -2em;
    padding: 1%;
    left: 50%;
    transform: translateX(-85%);
    white-space: nowrap;
    border: 1px;
    border-radius: 1em
  }

  .hide,
  .hideButPrint {
    display: none !important
  }

  .rowspan {
    visibility: hidden
  }

  .checkbox,
  .radio,
  .switch {
    -moz-appearance: none;
    -webkit-appearance: none
  }

  .Group_ID,
  .Patch_FullAddress,
  .Patch_ID,
  .Preset_Position,
  .Preset_Type,
  .Preset_Usage {
    width: 6rem
  }

  .Patch_Invert {
    width: 3.8rem
  }

  .Patch_Fixture,
  .Preset_UnUsedBy,
  .Preset_UsedBy {
    min-width: 10rem
  }

  .success {
    color: #5cb85c
  }

  .primary {
    color: #0275d8
  }

  .warning {
    color: #f0ad4e
  }

  .danger {
    color: #d9534f
  }

  @keyframes fadeIn {
    0% {
      opacity: 0
    }

    to {
      opacity: 1
    }
  }

  @keyframes infinite-spinning {
    0% {
      fill: #fff;
      transform: rotateY(0deg)
    }

    to {
      fill: inherit;
      transform: rotateY(1turn)
    }
  }

  .working svg {
    animation: infinite-spinning 1.5s steps(1000) infinite alternate
  }

  .M1HD h2 em,
  .M-Play h2 em,
  .M-Touch h2 em {
    font-size: .6em
  }

  .M1HD svg,
  .M-Play svg,
  .M-Touch svg {
    display: initial;
    height: 42vw;
    color: transparent;
    text-shadow: 1px 1px 10px rgba(38, 38, 38, .5)
  }

  .M1HD svg .BankSelector .minus,
  .M1HD svg .BankSelector .plus,
  .M-Play svg .BankSelector .minus,
  .M-Play svg .BankSelector .plus,
  .M-Touch svg .BankSelector .minus,
  .M-Touch svg .BankSelector .plus {
    cursor: pointer
  }

  .M1HD svg h2 em,
  .M-Play svg h2 em,
  .M-Touch svg h2 em {
    font-size: .8em
  }

  .M1HD svg a,
  .M-Play svg a,
  .M-Touch svg a {
    color: inherit;
    text-decoration: none
  }

  .M1HD svg .FaderLed,
  .M-Play svg .FaderLed,
  .M-Touch svg .FaderLed {
    fill: currentColor
  }

  .M1HD svg .Cuelist-Box,
  .M-Play svg .Cuelist-Box,
  .M-Touch svg .Cuelist-Box {
    font-size: 8.25px;
    line-height: 100%;
    fill-opacity: 1
  }

  .M1HD svg .Cuelist-Box tspan,
  .M-Play svg .Cuelist-Box tspan,
  .M-Touch svg .Cuelist-Box tspan {
    text-align: center;
    text-anchor: middle
  }

  .M1HD svg .Cuelist-Line,
  .M-Play svg .Cuelist-Line,
  .M-Touch svg .Cuelist-Line {
    text-align: center;
    text-anchor: middle;
    stroke-width: .20902258px
  }

  .M1HD svg .BlackAverageButton,
  .M1HD svg .BlackLargeButton,
  .M1HD svg .BlackSquare,
  .M1HD svg .EncoderFader,
  .M1HD svg .GreyButton,
  .M-Play svg .BlackAverageButton,
  .M-Play svg .BlackLargeButton,
  .M-Play svg .BlackSquare,
  .M-Play svg .EncoderFader,
  .M-Play svg .GreyButton,
  .M-Touch svg .BlackAverageButton,
  .M-Touch svg .BlackLargeButton,
  .M-Touch svg .BlackSquare,
  .M-Touch svg .EncoderFader,
  .M-Touch svg .GreyButton {
    opacity: 1;
    stroke-linejoin: round;
    stroke-opacity: 1;
    fill-opacity: 1;
    stroke: #000;
    stroke-miterlimit: 4;
    stroke-dasharray: none;
    stroke-width: 1;
    fill: #000
  }

  .M1HD svg .GreyButton,
  .M-Play svg .GreyButton,
  .M-Touch svg .GreyButton {
    stroke-dashoffset: 0;
    stroke: currentColor;
    stroke-linecap: butt;
    fill: #eaeaea
  }

  .Type-Cuelist {
    color: #cd2e29
  }

  .Type-Groupmaster,
  .Type-Inhibitive {
    color: #f7b902
  }

  .Type-Override {
    color: #78557e
  }

  .Type-Submaster {
    color: #4aa807
  }

  .Type-Timecode {
    color: #c21167
  }

  .Type-Chase {
    color: #4379ba
  }

  .Bank,
  .BankSub {
    font-family: Digital\ 7
  }

  .M1HD svg {
    color: #000;
    height: 50vw
  }

  .M1HD svg .Cuelist-Box {
    font-size: 2px
  }
}

@media only screen and (max-width:880px) {
  body {
    font-family: Lato, sans-serif;
    background-color: #333;
    overflow: hidden
  }

  body>div>* {
    min-height: calc(100vh - 50px)
  }

  header {
    background-color: #262626;
    height: 50px;
    line-height: 50px;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .25);
    color: #fff;
    font-size: 110%;
    font-weight: 700;
    width: 100%
  }

  header img {
    margin: 5px;
    object-fit: contain;
    max-height: 40px
  }

  header span em {
    font-size: 50%;
    font-weight: lighter;
    position: absolute;
    top: 35.71429px;
    line-height: normal;
    left: 65px
  }

  header #iconbox {
    position: absolute;
    right: 5px;
    top: 0
  }

  header #iconbox a {
    width: 40px;
    display: inline-block
  }

  nav {
    position: absolute;
    right: 0;
    background-color: #262626;
    box-shadow: -5px 4px 4px 1px rgba(0, 0, 0, .25);
    color: #fff;
    z-index: 20
  }

  nav ul {
    margin-bottom: 0
  }

  nav a svg {
    width: 5rem;
    height: 5rem;
    padding: .5rem;
    fill: #fff;
    transition: fill .5s, stroke .5s
  }

  nav a:hover svg {
    fill: #effb41
  }

  nav#Infos a svg {
    stroke: #fff;
    fill: transparent
  }

  nav#Infos a:hover svg {
    stroke: #effb41 !important;
    fill: #effb41 !important
  }

  nav .heading {
    color: #4df7ff;
    font-size: 1.2em;
    margin-bottom: .5em;
    margin-top: .2em
  }

  nav p {
    font-size: .8em;
    margin: .2em
  }

  aside {
    z-index: 10;
    width: 50px;
    background-color: #262626
  }

  aside fieldset>button {
    display: none
  }

  aside fieldset>.label,
  aside fieldset>label {
    color: #727e96;
    fill: #727e96;
    cursor: pointer;
    margin-bottom: 2rem;
    vertical-align: middle
  }

  aside fieldset>.label>input,
  aside fieldset>label>input {
    width: 50px;
    height: 50px;
    opacity: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    z-index: 1
  }

  aside fieldset>.label.active>svg,
  aside fieldset>.label.dragover>svg,
  aside fieldset>.label:focus>svg,
  aside fieldset>.label:hover>svg,
  aside fieldset>label.active>svg,
  aside fieldset>label.dragover>svg,
  aside fieldset>label:focus>svg,
  aside fieldset>label:hover>svg {
    transform: scale(.95)
  }

  aside fieldset>.label.active>span,
  aside fieldset>.label.dragover>span,
  aside fieldset>.label:focus>span,
  aside fieldset>.label:hover>span,
  aside fieldset>label.active>span,
  aside fieldset>label.dragover>span,
  aside fieldset>label:focus>span,
  aside fieldset>label:hover>span {
    margin-top: 50px;
    transform: rotate(0deg);
    left: 0
  }

  aside fieldset>.label.active[for=PatchXML],
  aside fieldset>.label.dragover[for=PatchXML],
  aside fieldset>.label:focus[for=PatchXML],
  aside fieldset>.label:hover[for=PatchXML],
  aside fieldset>label.active[for=PatchXML],
  aside fieldset>label.dragover[for=PatchXML],
  aside fieldset>label:focus[for=PatchXML],
  aside fieldset>label:hover[for=PatchXML] {
    color: #5ac8fa;
    fill: #5ac8fa
  }

  aside fieldset>.label.active[for=FixtureGroupXML],
  aside fieldset>.label.dragover[for=FixtureGroupXML],
  aside fieldset>.label:focus[for=FixtureGroupXML],
  aside fieldset>.label:hover[for=FixtureGroupXML],
  aside fieldset>label.active[for=FixtureGroupXML],
  aside fieldset>label.dragover[for=FixtureGroupXML],
  aside fieldset>label:focus[for=FixtureGroupXML],
  aside fieldset>label:hover[for=FixtureGroupXML] {
    color: #d4aa08;
    fill: #d4aa08
  }

  aside fieldset>.label.active[for=PresetXML],
  aside fieldset>.label.dragover[for=PresetXML],
  aside fieldset>.label:focus[for=PresetXML],
  aside fieldset>.label:hover[for=PresetXML],
  aside fieldset>label.active[for=PresetXML],
  aside fieldset>label.dragover[for=PresetXML],
  aside fieldset>label:focus[for=PresetXML],
  aside fieldset>label:hover[for=PresetXML] {
    color: #3a791d;
    fill: #3a791d
  }

  aside fieldset>.label.active[for=CuelistXML],
  aside fieldset>.label.active[for=PlaybackXML],
  aside fieldset>.label.dragover[for=CuelistXML],
  aside fieldset>.label.dragover[for=PlaybackXML],
  aside fieldset>.label:focus[for=CuelistXML],
  aside fieldset>.label:focus[for=PlaybackXML],
  aside fieldset>.label:hover[for=CuelistXML],
  aside fieldset>.label:hover[for=PlaybackXML],
  aside fieldset>label.active[for=CuelistXML],
  aside fieldset>label.active[for=PlaybackXML],
  aside fieldset>label.dragover[for=CuelistXML],
  aside fieldset>label.dragover[for=PlaybackXML],
  aside fieldset>label:focus[for=CuelistXML],
  aside fieldset>label:focus[for=PlaybackXML],
  aside fieldset>label:hover[for=CuelistXML],
  aside fieldset>label:hover[for=PlaybackXML] {
    color: #ff2d55;
    fill: #ff2d55
  }

  aside fieldset>.label.loaded,
  aside fieldset>label.loaded {
    color: #fff;
    fill: #fff
  }

  aside fieldset>.label>span,
  aside fieldset>label>span {
    transform: rotate(-90deg) translateY(-85%) translateX(-35%);
    position: absolute;
    width: 50px;
    text-align: center;
    transition: .25s ease-in-out
  }

  aside fieldset>.label>svg,
  aside fieldset>label>svg {
    width: 100%;
    transform: scale(.5);
    transition: .25s ease-in-out
  }

  footer {
    position: fixed;
    top: 0;
    margin: 4px;
    right: 0;
    opacity: 0;
    transition: .25s ease-in-out !important
  }

  footer.fade {
    opacity: 1;
    z-index: 1000
  }

  ::-webkit-scrollbar {
    width: 10px
  }

  ::-webkit-scrollbar-track {
    background-color: #262626
  }

  ::-webkit-scrollbar-thumb {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(51, 51, 51, .75) !important
  }

  .pop-in,
  article form,
  nav {
    animation: fadeIn .5s
  }

  article {
    color: #fff;
    opacity: 0;
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    transition: .5s ease-in-out !important;
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    left: -100%;
    font-size: 80%;
    z-index: 8
  }

  article label {
    margin-bottom: 0
  }

  article#default {
    line-height: 400px
  }

  article#default>svg {
    height: 400px;
    fill: #fff;
    float: left
  }

  article.fade {
    z-index: 9;
    left: 50px;
    opacity: 1
  }

  article.noanim {
    transition: none !important
  }

  article .Patch_MultiPart .Patch_ID {
    text-align: right
  }

  article .overflow {
    height: calc(100% - 50px);
    display: block;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 3px
  }

  article [data-type] table thead th {
    top: 2.7em
  }

  article table {
    width: auto
  }

  article table.cuelist {
    width: 100%
  }

  article table thead th {
    position: sticky;
    top: 0;
    background-color: #262626;
    z-index: 1
  }

  article table thead td {
    font-weight: 700
  }

  article table tr {
    border-bottom: 1px solid #727e96
  }

  article table tbody tr:last-child {
    border-bottom: none
  }

  article table td {
    padding: 0 .5em
  }

  article table td[rowspan] {
    vertical-align: top
  }

  article table td,
  article table th {
    vertical-align: top;
    min-width: 1rem
  }

  article#FixtureGroup h2,
  article#Patch h2 {
    color: #5ac8fa
  }

  article#FixtureGroup h2 {
    color: #d4aa08
  }

  article#Preset h2 {
    color: #3a791d
  }

  article#Cuelist h2,
  article#Playback h2 {
    color: #ff2d55
  }

  article#Cuelist h3,
  article#Playback h3 {
    margin: 0;
    font-size: 1.2em;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .5em
  }

  article#Cuelist h3 span,
  article#Playback h3 span {
    display: none
  }

  .pop-in {
    position: absolute;
    z-index: 1000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #333;
    overflow-y: scroll;
    overflow-x: hidden
  }

  .pop-in table {
    width: 100% !important
  }

  .pop-in img {
    width: 80px;
    height: 40px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1001;
    background-color: #262626
  }

  .pop-in p {
    margin: .5em;
    font-size: .9em;
    column-count: 2
  }

  .square {
    width: 1em;
    height: 1em;
    display: inline-flex;
    margin-right: .2em
  }

  .Type-Cuelist,
  [data-type=Cuelist] h3 {
    background-image: linear-gradient(#781b18, #320b0a)
  }

  .Type-Submaster,
  [data-type=Submaster] h3 {
    background-image: linear-gradient(#1f4603, #0d1e01)
  }

  .Type-Chase,
  [data-type=Chase] h3 {
    background-image: linear-gradient(#28486f, #111f30)
  }

  .Type-Groupmaster,
  .Type-Inhibitive,
  [data-type=Groupmaster] h3,
  [data-type=Inhibitive] h3 {
    background-image: linear-gradient(#926d01, #3e2f00)
  }

  .Type-Override,
  [data-type=Override] h3 {
    background-image: linear-gradient(#3e2c41, #1b131c)
  }

  .Type-Timecode,
  [data-type=Timecode] h3 {
    background-image: linear-gradient(#640935, #2b0316)
  }

  .Patch h1,
  .Patch h2 {
    color: #5ac8fa
  }

  .Patch:focus svg,
  .Patch:hover svg {
    fill: #5ac8fa
  }

  #Patch ::-webkit-scrollbar-thumb {
    background-color: #5ac8fa
  }

  #Patch button i {
    background-image: linear-gradient(#5ac8fa, #5ac8fa) !important
  }

  #Patch button i:after,
  #Patch button i:before {
    background-color: #5ac8fa !important
  }

  .FixtureGroup h1,
  .FixtureGroup h2 {
    color: #d4aa08
  }

  .FixtureGroup:focus svg,
  .FixtureGroup:hover svg {
    fill: #d4aa08
  }

  #FixtureGroup ::-webkit-scrollbar-thumb {
    background-color: #d4aa08
  }

  #FixtureGroup button i {
    background-image: linear-gradient(#d4aa08, #d4aa08) !important
  }

  #FixtureGroup button i:after,
  #FixtureGroup button i:before {
    background-color: #d4aa08 !important
  }

  .Preset h1,
  .Preset h2 {
    color: #3a791d
  }

  .Preset:focus svg,
  .Preset:hover svg {
    fill: #3a791d
  }

  #Preset ::-webkit-scrollbar-thumb {
    background-color: #3a791d
  }

  #Preset button i {
    background-image: linear-gradient(#3a791d, #3a791d) !important
  }

  #Preset button i:after,
  #Preset button i:before {
    background-color: #3a791d !important
  }

  .Cuelist h1,
  .Cuelist h2,
  .Playback h1,
  .Playback h2 {
    color: #ff2d55
  }

  .Cuelist:focus svg,
  .Cuelist:hover svg,
  .Playback:focus svg,
  .Playback:hover svg {
    fill: #ff2d55
  }

  #Cuelist ::-webkit-scrollbar-thumb,
  #Playback ::-webkit-scrollbar-thumb {
    background-color: #ff2d55
  }

  #Cuelist button i,
  #Playback button i {
    background-image: linear-gradient(#ff2d55, #ff2d55) !important
  }

  #Cuelist button i:after,
  #Cuelist button i:before,
  #Playback button i:after,
  #Playback button i:before {
    background-color: #ff2d55 !important
  }

  #Cuelist button.is-active i,
  #FixtureGroup button.is-active i,
  #Patch button.is-active i,
  #Playback button.is-active i,
  #Preset button.is-active i {
    background-image: none !important
  }

  span[data-title] {
    position: relative;
    border-bottom: .5px dotted #727e96;
    z-index: 0;
    cursor: help
  }

  span[data-title]:focus,
  span[data-title]:hover {
    color: #dceb05;
    border-color: transparent;
    z-index: 2
  }

  span[data-title]:focus:after,
  span[data-title]:hover:after {
    content: attr(data-title);
    position: absolute;
    background-color: #262626;
    top: -2em;
    padding: 1%;
    left: 50%;
    transform: translateX(-85%);
    white-space: nowrap;
    border: 1px;
    border-radius: 1em
  }

  .hide,
  .hideButPrint {
    display: none !important
  }

  .rowspan {
    visibility: hidden
  }

  .checkbox,
  .radio,
  .switch {
    -moz-appearance: none;
    -webkit-appearance: none
  }

  .Group_ID,
  .Patch_FullAddress,
  .Patch_ID,
  .Preset_Position,
  .Preset_Type,
  .Preset_Usage {
    width: 6rem
  }

  .Patch_Invert {
    width: 3.8rem
  }

  .Patch_Fixture,
  .Preset_UnUsedBy,
  .Preset_UsedBy {
    min-width: 10rem
  }

  .success {
    color: #5cb85c
  }

  .primary {
    color: #0275d8
  }

  .warning {
    color: #f0ad4e
  }

  .danger {
    color: #d9534f
  }

  @keyframes fadeIn {
    0% {
      opacity: 0
    }

    to {
      opacity: 1
    }
  }

  .M1HD h2 em,
  .M-Play h2 em,
  .M-Touch h2 em {
    font-size: .6em
  }

  .M1HD svg,
  .M-Play svg,
  .M-Touch svg {
    display: initial;
    height: 36vw;
    color: transparent;
    text-shadow: 1px 1px 10px rgba(38, 38, 38, .5)
  }

  .M1HD svg .BankSelector .minus,
  .M1HD svg .BankSelector .plus,
  .M-Play svg .BankSelector .minus,
  .M-Play svg .BankSelector .plus,
  .M-Touch svg .BankSelector .minus,
  .M-Touch svg .BankSelector .plus {
    cursor: pointer
  }

  .M1HD svg h2 em,
  .M-Play svg h2 em,
  .M-Touch svg h2 em {
    font-size: .8em
  }

  .M1HD svg a,
  .M-Play svg a,
  .M-Touch svg a {
    color: inherit;
    text-decoration: none
  }

  .M1HD svg .FaderLed,
  .M-Play svg .FaderLed,
  .M-Touch svg .FaderLed {
    fill: currentColor
  }

  .M1HD svg .Cuelist-Box,
  .M-Play svg .Cuelist-Box,
  .M-Touch svg .Cuelist-Box {
    font-size: 8.25px;
    line-height: 100%;
    fill-opacity: 1
  }

  .M1HD svg .Cuelist-Box tspan,
  .M-Play svg .Cuelist-Box tspan,
  .M-Touch svg .Cuelist-Box tspan {
    text-align: center;
    text-anchor: middle
  }

  .M1HD svg .Cuelist-Line,
  .M-Play svg .Cuelist-Line,
  .M-Touch svg .Cuelist-Line {
    text-align: center;
    text-anchor: middle;
    stroke-width: .20902258px
  }

  .M1HD svg .BlackAverageButton,
  .M1HD svg .BlackLargeButton,
  .M1HD svg .BlackSquare,
  .M1HD svg .EncoderFader,
  .M1HD svg .GreyButton,
  .M-Play svg .BlackAverageButton,
  .M-Play svg .BlackLargeButton,
  .M-Play svg .BlackSquare,
  .M-Play svg .EncoderFader,
  .M-Play svg .GreyButton,
  .M-Touch svg .BlackAverageButton,
  .M-Touch svg .BlackLargeButton,
  .M-Touch svg .BlackSquare,
  .M-Touch svg .EncoderFader,
  .M-Touch svg .GreyButton {
    opacity: 1;
    stroke-linejoin: round;
    stroke-opacity: 1;
    fill-opacity: 1;
    stroke: #000;
    stroke-miterlimit: 4;
    stroke-dasharray: none;
    stroke-width: 1;
    fill: #000
  }

  .M1HD svg .GreyButton,
  .M-Play svg .GreyButton,
  .M-Touch svg .GreyButton {
    stroke-dashoffset: 0;
    stroke: currentColor;
    stroke-linecap: butt;
    fill: #eaeaea
  }

  .Type-Cuelist {
    color: #cd2e29
  }

  .Type-Groupmaster,
  .Type-Inhibitive {
    color: #f7b902
  }

  .Type-Override {
    color: #78557e
  }

  .Type-Submaster {
    color: #4aa807
  }

  .Type-Timecode {
    color: #c21167
  }

  .Type-Chase {
    color: #4379ba
  }

  .Bank,
  .BankSub {
    font-family: Digital\ 7
  }

  .M1HD svg {
    color: #000;
    height: 44vw
  }

  .M1HD svg .Cuelist-Box {
    font-size: 2px
  }
}

@media print {
  @page portrait {
    size: A4 portrait
  }

  @page landscape {
    size: A4 landscape
  }

  body {
    -webkit-print-color-adjust: exact;
    color-adjust: exact
  }

  #default,
  .hide,
  .print_hide,
  aside,
  footer {
    display: none !important
  }

  header {
    height: 60px;
    line-height: 60px;
    text-align: right
  }

  header>a>img {
    filter: invert(1);
    position: absolute;
    top: 0;
    left: 0
  }

  table {
    font-size: 8.5pt
  }

  table thead th {
    position: sticky;
    top: 0;
    background-color: #262626
  }

  table thead td {
    font-weight: 700
  }

  table tr {
    border-bottom: 1px solid #727e96
  }

  table tr.masterpart {
    page-break-after: avoid
  }

  table tr.multipart {
    page-break-before: avoid
  }

  table tbody tr:last-child {
    border-bottom: none
  }

  table td {
    padding: 0 .5em
  }

  table td,
  table th {
    vertical-align: top;
    min-width: 1rem
  }

  .Group_ID,
  .Patch_FullAddress,
  .Patch_ID,
  .Preset_Position,
  .Preset_Type,
  .Preset_Usage {
    width: 6rem
  }

  .Patch_Invert {
    width: 3.8rem
  }

  .Patch_Fixture,
  .Preset_UnUsedBy,
  .Preset_UsedBy {
    min-width: 10rem
  }

  abbr[title] {
    text-decoration: none
  }

  a,
  a:active,
  a:focus,
  a:hover,
  a:visited {
    text-decoration: none;
    color: inherit
  }

  .d-flex,
  .flex-column,
  .flex-column-reverse,
  .flex-container,
  .flex-container--column,
  .flex-container--column-reverse,
  .flex-container--row,
  .flex-container--row-reverse,
  .flex-row,
  .flex-row-reverse {
    display: unset
  }

  header:after {
    content: "Report printed from https://Report.OnyxFixtureFinder.com \a Page left intentionally blank";
    margin-top: 10rem;
    display: block;
    text-align: center;
    font-weight: 700;
    white-space: pre
  }

  article {
    page: portrait;
    page-break-before: always
  }

  article#Playback {
    page: landscape
  }

  article#Playback>div>div>h2 {
    page-break-before: always
  }

  article#Playback>div>div .flex-column,
  article#Playback>div>div .flex-column-reverse,
  article#Playback>div>div .flex-container,
  article#Playback>div>div .flex-container--column,
  article#Playback>div>div .flex-container--column-reverse,
  article#Playback>div>div .flex-container--row,
  article#Playback>div>div .flex-container--row-reverse,
  article#Playback>div>div .flex-row,
  article#Playback>div>div .flex-row-reverse {
    display: flex
  }

  .success {
    color: #5cb85c
  }

  .primary {
    color: #0275d8
  }

  .warning {
    color: #f0ad4e
  }

  .danger {
    color: #d9534f
  }

  #FixtureGroup h2,
  #Patch h2 {
    color: #5ac8fa
  }

  #FixtureGroup h2 {
    color: #d4aa08
  }

  #Preset h2 {
    color: #3a791d
  }

  #Cuelist h2 {
    color: #ff2d55
  }

  #Cuelist h3 {
    font-size: 11pt
  }

  #Cuelist h3 span {
    font-size: 8pt;
    font-style: italic
  }

  .pop-in p {
    font-size: 8pt;
    column-count: 3
  }

  .M1HD h2 em,
  .M-Play h2 em,
  .M-Touch h2 em {
    font-size: .6em
  }

  .M1HD svg,
  .M-Play svg,
  .M-Touch svg {
    display: block;
    height: 48vw;
    color: transparent;
    text-shadow: 1px 1px 10px rgba(38, 38, 38, .5)
  }

  .M1HD svg .BankSelector .minus,
  .M1HD svg .BankSelector .plus,
  .M-Play svg .BankSelector .minus,
  .M-Play svg .BankSelector .plus,
  .M-Touch svg .BankSelector .minus,
  .M-Touch svg .BankSelector .plus {
    cursor: pointer
  }

  .M1HD svg h2 em,
  .M-Play svg h2 em,
  .M-Touch svg h2 em {
    font-size: .8em
  }

  .M1HD svg a,
  .M-Play svg a,
  .M-Touch svg a {
    color: inherit;
    text-decoration: none
  }

  .M1HD svg .FaderLed,
  .M-Play svg .FaderLed,
  .M-Touch svg .FaderLed {
    fill: currentColor
  }

  .M1HD svg .Cuelist-Box,
  .M-Play svg .Cuelist-Box,
  .M-Touch svg .Cuelist-Box {
    font-size: 8.25px;
    line-height: 100%;
    fill-opacity: 1
  }

  .M1HD svg .Cuelist-Box tspan,
  .M-Play svg .Cuelist-Box tspan,
  .M-Touch svg .Cuelist-Box tspan {
    text-align: center;
    text-anchor: middle
  }

  .M1HD svg .Cuelist-Line,
  .M-Play svg .Cuelist-Line,
  .M-Touch svg .Cuelist-Line {
    text-align: center;
    text-anchor: middle;
    stroke-width: .20902258px
  }

  .M1HD svg .BlackAverageButton,
  .M1HD svg .BlackLargeButton,
  .M1HD svg .BlackSquare,
  .M1HD svg .EncoderFader,
  .M1HD svg .GreyButton,
  .M-Play svg .BlackAverageButton,
  .M-Play svg .BlackLargeButton,
  .M-Play svg .BlackSquare,
  .M-Play svg .EncoderFader,
  .M-Play svg .GreyButton,
  .M-Touch svg .BlackAverageButton,
  .M-Touch svg .BlackLargeButton,
  .M-Touch svg .BlackSquare,
  .M-Touch svg .EncoderFader,
  .M-Touch svg .GreyButton {
    opacity: 1;
    stroke-linejoin: round;
    stroke-opacity: 1;
    fill-opacity: 1;
    stroke: #000;
    stroke-miterlimit: 4;
    stroke-dasharray: none;
    stroke-width: 1;
    fill: #000
  }

  .M1HD svg .GreyButton,
  .M-Play svg .GreyButton,
  .M-Touch svg .GreyButton {
    stroke-dashoffset: 0;
    stroke: currentColor;
    stroke-linecap: butt;
    fill: #eaeaea
  }

  .Type-Cuelist {
    color: #cd2e29
  }

  .Type-Groupmaster,
  .Type-Inhibitive {
    color: #f7b902
  }

  .Type-Override {
    color: #78557e
  }

  .Type-Submaster {
    color: #4aa807
  }

  .Type-Timecode {
    color: #c21167
  }

  .Type-Chase {
    color: #4379ba
  }

  .Bank,
  .BankSub {
    font-family: Digital\ 7
  }

  .M1HD svg {
    color: #000;
    height: 56vw
  }

  .M1HD svg .Cuelist-Box {
    font-size: 2px
  }
}