button.active,
.button.active {
  color: #fff;
  background-color: #888;
}

/* icons */
body > header nav > ul > li > a[href*="/new"]::before,
a.button[href*="/new"]::before {
  content: '+';
  font-size: 1.25rem;
  font-weight: bold;
  margin-right: .5rem;
  vertical-align: top;
}

table ul > li > form {
  display: inline-block;
}

.linegraph {
  outline: 1px solid black;
}
table .linegraph {
  display: block;
  min-width: 8rem;
  max-width: 100%;
}
table tbody th {
  text-align: inherit;
}

.longgraph {
  width: 100%;
}

.datalist {
  float:right;
  width: auto;
  height: 10%;
}

.clickable {
  cursor: pointer;
}

/* .lineTable {
  width: 20em;
  float: right;
} */

.colorx {
  color:#ff0000;
}
.colory {
  color:#007700;
}
.colorz {
  color:#000088;
}
.colorxalt {
  color:#ff7777;
}
.coloryalt {
  color:#33ff33;
}
.colorzalt {
  color:#7777ff;
}

/* action */
div.action {
  text-align: center;
  margin: 2rem 0;
}

.actions {
  display: flex;
  margin: 1rem 0;
}

a{
  color:#4ec5c4;
}
a.order {
  color: inherit;
  text-align: center;
  text-decoration: none;
  width: 1rem;
  height: 1.5rem;
  overflow: hidden;
}
a.order::before {
  display: block;
}
a.order.asc::before {
  content: '▼';
}
a.order.desc::before {
  content: '▲';
}

th a.order {
  float: right;
}

.actions > form, .actions > div > form, .actions > div {
  border: 0;
  background-color: transparent;
  padding: 0 1rem 0 0;
}

.testcontrols {
  justify-content: space-between;
}

.testcontrols > div {
  display: flex;
}

/* tab header */
.tabs > section > header {
  margin: 0;
}

table.cursor td,
table.cursor th {
   width: 50%;
}

.referencelines > h5 {
  display: inline-block;
  margin: 1rem 0;
}
.referencelines > ul {
  font-size: .875rem;
  display: inline-block;
  padding-left: .5rem;
  vertical-align: middle;
}
.referencelines > ul > li {
  display: inline-block;
}
.referencelines > ul > li > label {
  margin: 0; /* reset */
}
.referencelines > ul > li > label.button {
  min-width: 6rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.tooltip {
  display: none;
  position: absolute;
  z-index: 9001;
  border: 1px solid black;
  background-color: #ffffe6;
  pointer-events: none;
  padding: 1rem;
  width: 19rem;
}

.tooltip > dt {
  display: inline-block;
  width: 12rem;
}
.tooltip > dd {
  text-align: right;
  display: inline-block;
  width: 4rem;
}
li > form {
  border: 0;
  background-color: transparent;
  padding: 0 1rem 0 0;
}

.preview {
  margin: 1rem 0.93rem;
  width: 45%;

  padding: 0 1rem;

  border: 1px solid black;
  border-radius: 5px;
}

.preview > div > img {
  margin: 1rem 0;
}

.preview > embed {
  margin: 1rem;
}

h2.title {
  margin-bottom: 0;
}

h2.title+p.subtitle {
  margin-top: 0;
  font-size: 0.75rem;
}

#DPItestdiv {
  width: 1in;
  height: 1in;
  left: -100%;
  top: -100%;
  position: absolute;
}

.right {
  float: right;
}
.left {
  float: left;
}
.panel {
  max-width: 45%;
}

.package_overview {
  width: 49%;
  margin-bottom: 2rem;
}

.selected {
  font-weight: bold;
}

.storeIcon {
  margin: 1rem 0;
  max-width: 100%;
}

.package_overview.right {
  border-left: 1px solid black;
  padding-left: 1rem;
}

nav > ul > li > a > b.warning {
  color: rgb(232, 201, 42);
  margin-left: 0.25rem;
}

.image {
  max-width: 100%;
}

/*embed {
  border: 1px solid black;
}*/

.maxList {
  width: 16rem;
}

.maxList>dd {
  display: inline-block;
  width: 5rem;
  margin-left: 0;
}

.maxList>dt {
  display: inline-block;
  width: 10rem;
}

/* best */
div.best {
  margin: 1rem 0;
}
div.best > figure {
  margin: 0 1rem 1rem 0;
}

/* extremes */
div.extremes > svg {
  position: absolute;
}
div.extremes > svg text {
  font-family: sans-serif;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
}
div.extremes > svg > path.success,
div.extremes > svg > path.fail {
  opacity: .5;
}
div.extremes > svg > line.center {
  stroke: rgba(255, 255, 255, .5);
  /* stroke-dasharray: 1, 2; */
}
div.extremes > svg > path.target {
  stroke: rgba(255, 255, 255, .4);
  stroke-width: 2;
  stroke-dasharray: 4, 2;
}
div.extremes > svg > text.actual {
  font-size: 1.25rem;
}
div.extremes > svg > text.normal {
  opacity: .5;
}
div.extremes > svg > text.null {
  opacity: .5;
}

div.extremes {
  display: inline-block;
  background-color: #000;
  overflow: hidden;
}
div.extremes#rotation > svg {
  margin-top: 3rem;
  margin-bottom: -3rem;
}
div.extremes#flexionandextension > canvas,
div.extremes#flexionandextension > svg {
  margin-left: -3rem;
  margin-right: 3rem;
}
div.extremes#lateralflexion > canvas,
div.extremes#lateralflexion > svg {
  margin-top: 3rem;
  margin-bottom: -3rem;
}

/* long graph */
#playButton {
  font-weight: bold;
}

/* QR code */
#qrcode {
  display: inline-block;
}

/* label[for^="modaltoggle"]::after {
  content: '▶';
  font-size: .75rem;
  margin-left: .5rem;
} */

.modal > aside {
  max-width: 32rem;
}
.modal > aside > div.scrollable {
  margin: 1rem 0;
}
section > div > div.scrollable {
  margin-bottom: 2rem;
}
.modal > aside > label.button {
  max-width: none; /* reset */
  border-radius: 0; /* reset */
}

input[type="text"]#code {
  font-family: monospace, monospace;
}
input.primary,
a.button.primary{
  background-color:#4ec5c4;
}

button.reset {
  /* width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  padding: 0; */
  overflow: hidden;
  min-width: auto; /* reset */
}
/* button.reset::before {
  content: '×';
  font-size: 1rem;
  text-align: center;
  display: block;
} */

td.step,
th.step {
  width: 9rem;
}
td.time,
th.time {
  width: 6rem;
}
table button.reset {
  margin-top: 1rem;
}
table tr:not(.selection) button.reset {
  display: none;
}

body{
  font-family: 'Muli', sans-serif;
  font-weight: 300;
}


body#page_welkom main {
  font-size: 1.375rem;
  line-height: 1.25;
}

body main h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.875rem;
  color: #4ec5c4;
  text-transform: uppercase;
}
body main h2 {
  font-family: 'Muli', sans-serif;
  font-size: 1.625rem;
  font-weight: 300;
  margin-top: -1rem;
}
body main a,
body main a:focus,
body main a:hover {
  color: #4ec5c4;
  text-decoration: none;
}
body main a:focus,
body main a:hover {
  text-decoration: underline;
}

body.invite form {
  padding: 0;
  border: 0;
  background-color: transparent;
}
body.invite form > div > label {
  color: #fff;
}
body.invite form > div > input,
body.invite form > div > textarea {
  border-radius: 0;
}
body.invite form > [type="submit"] {
  font-size: 1.5rem;
  color: #4ec5c4;
  letter-spacing: .1em;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 0;
  background-color: #fff;
}
body main video{
  width:100%;
}

body > header {
  text-align: center;
  position: relative;
  max-height: none;
  border-bottom: 0;
}
body > header label{
  color:#fff;
}
body.invite > header {
  height: 27.5rem;
  background: url('/static/images/invite/arjen_trip_begeleidt_oefening2.jpg') bottom / cover;
}
body > header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#50a9c9+0,4ec5c4+100 */
  background: #50a9c9; /* Old browsers */
  background: -moz-linear-gradient(left, #50a9c9 0%, #4ec5c4 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #50a9c9 0%,#4ec5c4 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #50a9c9 0%,#4ec5c4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50a9c9', endColorstr='#4ec5c4',GradientType=1 ); /* IE6-9 */
  z-index: -1;
}
body.invite > header::before {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#50a9c9+0,4ec5c4+100&0.55+0,0.45+100 */
  background: -moz-linear-gradient(left, rgba(80,169,201,0.55) 0%, rgba(78,197,196,0.45) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(80,169,201,0.55) 0%,rgba(78,197,196,0.45) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(80,169,201,0.55) 0%,rgba(78,197,196,0.45) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c50a9c9', endColorstr='#734ec5c4',GradientType=1 ); /* IE6-9 */
  background-color: rgba(78, 197, 196, 0.8);
}
body.invite > header div.logo {
  color: #fff;
  float: none;
  width: 100%;
  max-width: 24rem;
  margin-top: 7rem;
  display: inline-block;
}
body > header div.logo > a {
  width: 100%;
  max-width: 24rem;
  color: #fff;
}

body > header form input.primary{
  background-color:#fff;
  color:#395b69;
}

body > header div.logo > a:focus,
body > header div.logo > a:hover {
  text-shadow: none;
}
body > header div.logo > p {
  font-size: 1.125rem;
  text-align: right;
  letter-spacing: .1em;
  width: 14rem;
  margin-left: auto;
}
body > header nav > ul:not(.external) > li > a, body > header nav > ul:not(.external) > li > button{
  background-color:#364b59;
}
body > header nav > ul:not(.external) > li > a:hover,
body > header nav > ul:not(.external) > li > button:hover{
  background-color:#395b69;
}
body.invite main {
  padding-top: 0;
}

body.invite main > div > section,
body#page_uitleg-over main > div > section,
body#page_welkom main > div > section {
  max-width: 100%;
  padding: 3rem 12%;
}


body.invite main > div > section:nth-child(even),
body#page_welkom main > div > section:nth-child(even),
body#page_uitleg-over main > div > section:nth-child(even) {
  color: #fff;
  background: url('/static/images/invite/blocks.svg') right bottom / 16rem no-repeat, url('/static/images/invite/dark_bg_texture.jpg'), #364b59;
}

body.invite section#time {
  font-family: 'Open Sans', sans-serif;
}
body.invite section#time p.date,
body.invite section#time p.time {
  text-align: center;
  text-transform: uppercase;
}
body.invite section#time p.date {
  font-size: 4rem;
  letter-spacing: .05em;
}
body.invite section#time p.time {
  font-size: 3.5rem;
  letter-spacing: .2em;
}
body.invite section#time p.date + p.time {
  margin-top: -1em;
}

body.invite section#location {
  position: relative;
  padding-bottom: 0;
  overflow: hidden;
}
body.invite section#location #map {
  height: 23rem;
  margin-left: -16%;
  margin-right: -16%;
}
body.invite section#location address {
  font-style: normal;
  text-align: center;
  position: absolute;
  bottom: 3rem;
  left: 0;
  right: 0;
  line-height: 2.375rem;
  padding: 1.5rem;
  background-color: #fff;
  z-index: 1;
  box-shadow: 0 .125rem hsla(0, 0%, 0%, .1);
}
body.invite section#location address > div {
  text-align: left;
  display: inline-block;
}
body.invite section#location address a {
  font-size: 1.75rem;
}

body > footer {
  font-size: inherit;
  background-color: #fff;
}
body > footer nav > ul {
  line-height: 2rem;
  margin: 0;
}
body > footer nav > ul > li > a {
  color: inherit;
  display: inline-block;
  width: 16rem;
}
body > footer nav > ul > li > a:focus,
body > footer nav > ul > li > a:hover {
  text-shadow: none;
}
body > footer nav > ul > li > a::before {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-right: .5rem;
  background: center / contain no-repeat;
  vertical-align: top;
}
body > footer nav > ul > li:first-child > a::before {
  background-image: url('/static/images/block_aqua.svg');
}
body > footer nav > ul > li:last-child > a::before {
  background-image: url('/static/images/block_dark_aqua.svg');
}

body > footer > div {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
table tr:nth-child(even){
  background-color:rgba(34, 110, 110, 0.06);
}
table a{
  text-decoration:none;
  font-weight:600;
}
body#page_welkom main > div > section:nth-child(2n) td{
  color:#333;
}

@media screen and (max-width: 39.9375rem) {
  body.invite > header > div,
  body.invite main > div > section {
    padding-left: 6%;
    padding-right: 6%;
  }

  body.invite form > [type="submit"] {
    font-size: 1.3125rem;
  }

  body.invite section#time p.date {
    font-size: 2.375rem;
  }
  body.invite section#time p.time {
    font-size: 1.4375rem;
  }

  body.invite section#location #map {
    margin-left: -7%;
    margin-right: -7%;
  }
}

@media screen and (min-width: 40rem) {
  body > header nav > ul > li.new {
    margin-left: -.625rem;
    vertical-align: top;
  }
  body > header nav > ul > li.new > a {
    text-align: right;
    width: 2.3125rem;
    padding-left: 0;
    /* padding-right: .875rem; */
    border-left: 1px dotted rgba(255, 255, 255, .2);
    border-top-left-radius: 0;
    /* background-clip: padding-box; */
  }
  body > header nav > ul > li.new > a::before {
    display: block;
    height: 1.625rem;
    margin: 0;
  }

  body.invite main > div > section:nth-child(even) {
    color: #fff;
    background: url('/static/images/invite/side_element.svg') left / 2.75rem 100% no-repeat, url('/static/images/invite/blocks.svg') right bottom / 16rem no-repeat, url('/static/images/invite/dark_bg_texture.jpg'), #364b59;
  }

  body > header div.logo > a::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 1rem;
    width: 10rem;
    height: 6rem;
    background: url('/static/images/invite/logo.svg') center / contain no-repeat;
  }
  body > header div.logo > a::after {
    content: '';
    display: block;
    width: 100%;
    height: 6rem;
    background: url('/static/images/invite/logo_white.svg') bottom / contain no-repeat;
  }
  body > header div.logo > a{
    color: transparent;
  }

}

input[type=radio]#vrglasses_yes:checked ~ .vrglasses_address{
    display: none;
}

input[type=radio]#vrglasses_no:checked ~ .vrglasses_address{
    display: block;
}

.vrglasses_address, .hasglasses{
    display: none;
}

strong {
  font-weight: bold;
}


@media screen and (max-width: 59.9375rem) {
  body.invite > footer nav > ul > li > a {
    margin-top: .25rem;
    margin-bottom: .25rem;
  }
}

@media screen and (min-width: 40rem) and (max-width: 59.9375rem) {
  body.invite form > [type="submit"] {
    font-size: 1.375rem;
  }

  body.invite section#time p.time {
    font-size: 2.5rem;
  }
}