@font-face {
  font-family: "Open Sans";
  src: url("/assets/OpenSans/OpenSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  src: url("/assets/OpenSans/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  src: url("/assets/OpenSans/OpenSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  src: url("/assets/OpenSans/OpenSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  src: url("/assets/OpenSans/OpenSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}



.header {
  height: 55px;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  position: relative;
  background-color: white;
}

.header h1 {
  font-size: 20px;
  text-transform: uppercase;
  margin: 0;
  padding: 10px 0;
}

.qr-reader-container {
  width: 100%;
  height: calc(var(--app-height) - 55px - 55px);
  background-color: black;
  position: relative;
  display: block;
}

.qr-reader-container .qr-reader-overlay-status {
  position: absolute;
  width: calc(100% - 30px);
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100%);
  min-height: 100px;
  color: white;
  z-index: 99;
  padding: 15px;
}

.qr-reader-container .qr-reader-overlay-ticket {
  position: absolute;
  width: calc(100% - 30px);
  top: 0;
  left: 0;
  min-height: 100px;
  height: 100%;
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 1px 1px 6px black;
  z-index: 99;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s;
  z-index: 100;
}

.qr-reader-container .qr-reader-overlay-ticket.gescand::after {
  content: "Tik om door te gaan";
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
}

.qr-reader-container .qr-reader-overlay-ticket .inner {
  text-align: center;
  opacity: 0;
  transition: all .3s;
}

.qr-reader-container .qr-reader-overlay-ticket.gescand.gereed {
  background-color: rgba(61, 221, 151, 0.6);
}

.qr-reader-container .qr-reader-overlay-ticket.gescand.fout {
  background-color: rgba(221, 61, 61, 0.6);
}

.qr-reader-container .qr-reader-overlay-ticket.gescand .inner {
  opacity: 1;
}

.qr-reader-container #qr-reader {
  display: flex;
  justify-content: center;
  align-items: center;
}

.qr-reader-container #qr-reader::after {
  content: "";
  height: 50vw;
  width: 50vw;
  left: 25vw;
  top: calc(50% - 25vw);
  border: 2px solid red;
  opacity: .3;
  position: absolute;
  z-index: 9;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
}

.qr-reader-container #qr-reader video,
.qr-reader-container #qr-reader canvas {
  width: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
}




.buttons-container {
  height: 55px;
  display: flex;
  background-color: white;
  z-index: 100;
  position: relative;
}

.buttons-container button {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 30px;
  width: 100%;
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
  background-color: transparent;
  box-shadow: none;
  border: none;
  color: black;
  font-weight: 600;
  margin: 0;
}

.buttons-container button:nth-of-type(1) {
  border-right: 1px solid black;
}

.buttons-container button:nth-of-type(2) {
  border-left: 1px solid black;
}












/*------------------------------- INDEX -------------------------------
    1.   ALGEMEEN                                                15
    2.   HEADER                                                  90
    3.   HOME                                                   135
    4.   INLOGGEN + UITLOGGEN                                   235
    5.   GEBRUIKERS                                             320
    6.   ACCOUNT                                                355
----------------------------------------------------------------------*/




/*--------------------------- 1. ALGEMEEN ----------------------------*/

body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  display: flex;
  justify-content: center;
  background-color: darkgrey;
}

main {
  width: 600px;
  max-width: 100%;
  position: relative;
  background-color: white;
  padding: 25px 15px;
}

.home main {
  padding: 0;
}

input {
  font-family: 'Open Sans', sans-serif;
  border: none;
  border: 1px solid #707078;
  border-radius: 5px;
}

table {
  width: 100%;
}

h1 {
  font-family: system-ui, 'Open Sans', sans-serif;
  font-weight: 600;
  margin: 0 0 .75em 0;
  font-size: 1.65em;
  text-transform: uppercase;
  float: left;
}

textarea,
input.text,
input[type="text"],
input[type="number"],
input[type="button"],
input[type="submit"],
input[type="password"],
input[type="new-password"],
.input-checkbox {
  -webkit-appearance: none;
  border-radius: 0;
}

button,
input[type="submit"],
a.button {
  /* float: right; */
  border: none;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: black;
  cursor: pointer;
  background-color: transparent;
  font-size: .9em;
  font-weight: bold;
  transition: color .2s ease-in-out;
  text-decoration: none;
  font-family: system-ui, 'Open Sans', sans-serif;
  margin: 0px 3px 10px 10px;
  padding: 3px 5px;
}

button:hover,
input[type="submit"]:hover,
a.button:hover {
  color: #35A7FF;
}

header button,
header input[type="submit"],
header a,
header a.button,
header p,
.header button,
.header input[type="submit"],
.header a,
.header a.button,
.header p {
  margin: 0 3px;
  color: blue;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
}

header p,
.header p {
  background-color: transparent;
  font-weight: bold;
  font-size: 1.65em;
  text-transform: uppercase;
  font-family: system-ui, 'Open Sans', sans-serif;
  display: block;
  padding: 3px;
  width: 100%;
  text-align: right;
}

/*--------------------------------------------------------------------*/





/*--------------------- 4. INLOGGEN + UITLOGGEN ----------------------*/

.inloggen form th {
  font-family: system-ui, 'Open Sans', sans-serif;
  font-weight: 400;
  padding: .5em 0 .1em;
  text-align: left;
  font-size: .8em;
  text-transform: uppercase;
  max-width: 14em;
}

.inloggen form td {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  padding: 0em;
  text-align: left;
  max-width: 14em;
}

.inloggen form td input {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 1em;
  max-width: 12em;
}

.inloggen div.inlog-error {
  position: relative;
  z-index: 3;
  display: flex;
  background-color: #707078;
  width: calc(100% + 40px);
  transform: translate(-20px, -20px);
  max-height: 0;
}

.inloggen div.inlog-error div {
  position: absolute;
  z-index: 3;
  display: flex;
  background-color: #707078;
  width: 100%;
  animation: inlog-error 4s linear;
  max-height: 0;
}

.inloggen div.inlog-error p {
  width: 100%;
  margin: .5em .5em;
  text-align: center;
  color: white;
  opacity: 0;
  transform: translateY(-500em);
  position: relative;
  animation: inlog-error-p 4s linear;
}

@keyframes inlog-error {
  0%   {max-height: 0;}
  15%  {max-height: 5em;}
  85%  {max-height: 5em;}
  100% {max-height: 0;}
}

@keyframes inlog-error-p {
  0%   {opacity: 0; transform: translateY(0em);}
  5%   {opacity: 0; transform: translateY(0em);}
  7%  {opacity: 1; transform: translateY(0em);}
  94%  {opacity: 1; transform: translateY(0em);}
  96% {opacity: 0; transform: translateY(0em);}
  100% {opacity: 0; transform: translateY(0em);}
}

/*--------------------------------------------------------------------*/




/*-------------------------- 5. GEBRUIKERS ---------------------------*/

.gebruikers form > a {
  margin-left: 0;
}

.gebruikers form td {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  padding: 0em;
  text-align: left;
  max-width: 14em;
}

.gebruikers form th {
  font-family: system-ui, 'Open Sans', sans-serif;
  font-weight: 400;
  padding: .5em 0 .1em;
  text-align: left;
  font-size: .8em;
  text-transform: uppercase;
  max-width: 14em;
}

.gebruikers form tbody h4 {
  margin-top: 30px;
  margin-bottom: 0px;
}

.gebruikers form tbody tr:nth-of-type(4) td {
  padding-bottom: 1.5em;
}

.gebruikers form td input {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 1em;
  max-width: 12em;
}

/*--------------------------------------------------------------------*/




/*--------------------------------------------------------------------*/


@media only screen and (max-width: 375px) {
  .inloggen form td,
  .inloggen form th,
  .account form td,
  .account form th,
  .gebruikers form th,
  .gebruikers form th {
    max-width: 11em;
  }
  .inloggen form td input,
  .account form td input,
  .gebruikers form td input {
    max-width: 10em;
  }
}