:root {
  /* Dark */
  --ColorGrey0: #002948;
  --ColorGrey1: #000000;
  --ColorGrey2: #000000;
  --ColorGrey3: #002948;
  /* Light */
  --ColorGrey4: #c1c5c8;
  --ColorGrey5: #d2d5d7;
  --ColorGrey6: #eeeeee;
  --ColorGrey7: #ffffff;
  --ColorDeco1: #002948;
  --ColorDeco2: #002948;
  --ColorDeco3: #002948;
  --ColorDeco4: #dddddd;
  --ColorDeco5: #002948;
  --ColorDeco6: #002948;
  --ColorDeco7: #dc8f00;
  --ColorFalse: #e2001a;
  --ColorTrue: #87ab23;
  --ColorTransparent: transparent;
  --Font1: "HelveticaLight", arial, sans-serif;
  --Font2: "HelveticaBold", arial, sans-serif;
  --Font3: "UniversRegular", arial, sans-serif;
  --Font4: "Helvetica", arial, sans-serif;
  --Font5: "Helvetica", arial, sans-serif;
  --Font6: "Helvetica", arial, sans-serif;
  --FontIcons: "Touchway";
  --FontSize1: 1vh;
  --FontSize2: 2vh;
  --FontSize3: 3vh;
  --FontSize4: 4vh;
  --FontSize5: 5vh;
  --FontSize6: 6vh;
  --FontSize7: 7vh;
  --FontSize8: 8vh;
  --FontSize9: 9vh;
  --Radius0: 0;
  --Radius1: 100%;
  --Radius2: 0;
  --Radius3: 1.5vh;
  --Radius4: 0;
  --Radius5: 0;
  --Line1: 1px solid var(--ColorGrey0);
  --Line2: 0px solid var(--ColorGrey4);
  --Line3: 1px solid var(--ColorGrey4);
  --Contour1: none;
  --Contour2: none;
  --Contour3: none;
  --Space05: 0.5vh;
  --Space1: 1vh;
  --Space2: 2vh;
  --Space3: 3vh;
  --Space4: 4vh;
  --Space5: 5vh;
  --Space6: 6vh;
  --Space7: 7vh;
  --Space8: 8vh;
  --Space10: 10vh;
  --Space15: 15vh;
  --PageWidth: 100%;
  --PageHeight: 100%;
  --HeightHeader: 15vh;
  --HeightFooter: 15vh;
  --SizeLoader: 100px;
  --KeyboardOffset: -200px;
  --PageInnerWidth: 90vw;
  --KeyboardWidth: 80%;
  --ButtonWidth1: 12vh;
  --ButtonHeight1: 12vh;
  --BoxShadow1: none rgba(0, 0, 0, 0.2);
  --TransitionSpeed1: 0.3s;
  --IconArrowLeft: "0";
  --IconArrowRight: "1";
}

main > section {
  padding: 0;
}

main[type="stage"] > section {
  background-color: var(--ColorGrey7);
  padding: var(--Space5);
}

main[type="box-overflow"] > section {
  background: var(--ColorGrey7);
  padding: var(--Space5);
}

main[type="box"] > section {
  background-color: var(--ColorGrey7);
  padding: var(--Space5);
}

main[type="flow-box"] > section {
  background-color: var(--ColorGrey7);
}

signature {
  background: var(--ColorGrey7);
}

header time {
  color: var(--ColorGrey0);
}

h3 {
  color: var(--ColorGrey2);
}

p,
small,
strong {
  color: var(--ColorGrey2);
}

.active,
li.active * {
  color: var(--ColorFalse);
}

.card-envelope {
  padding: 3px;
}

#TWKeyboard {
  background-color: var(--ColorGrey0);
}

#TWKeyboardHeader div {
  color: var(--ColorGrey0);
  background-color: var(--ColorGrey0);
}

article {
  background-size: contain;
  background-repeat: no-repeat;
}

header {
  padding-top: 0;
  padding-bottom: 0;
}

header .title {
  align-self: center;
}

.logo {
  align-self: baseline;
  justify-self: flex-end;
}

[template="VisitorTypeSelection01"] section button {
  max-height: 15vh;
}

[template="WelcomeVisitorList01"] .list-col-0 {
  flex-basis: 150px;
}

[template="VisitorDataEntryForm01"] span.required{
  padding-right:var(--Space2);
  color: var(--ColorFalse);
}

[template="FinalInstruction02"] p, [template="FinalInstruction01"] p, [template="CardPrintInstruction01"] p{
  line-height:1.5;
  padding-right: var(--Space4);
}

/* ----------------------------------------------
 * CSS TEMPLATE PRINTING
 * ----------------------------------------------
*/
@media print {
  @page {
    size: 185mm 65mm;
    margin: 0mm;
    padding: 0mm;
  }

  print * {
    border-collapse: collapse !important;
    border-spacing: 0mm !important;
    padding: 0mm !important;
    page-break-inside: avoid;
    empty-cells: show !important;
  }
}

print {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  border: none;
  page-break-after: always;
  padding-left: 0mm;
  padding-right: 0mm;
  padding-top: 0mm;
  padding-bottom: 0mm;
}

print * {
  border-width: 0mm;
  padding: 0;
  margin: 0;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

print .card-back .card-holder {
}

print .card-wrapper {
  width: 185mm;
  height: 65mm;
  padding: 0;
  margin: 0;
  border-width: 0mm;
}
print .card-wrapper .card-spacer {
  width: 6.5mm;
  height: 64.5mm;
  border-width: 0mm;
  /* background-color: #333; */
}
print .card-wrapper .card-spacer-2 {
  width: 7mm;
}

print .card-wrapper .card {
  height: 64.5mm;
  width: 86mm;
}

print table.card-container {
  width: 100%;
  height: 100%;
}

print table.card-container .card-container-front,
print table.card-container .card-container-back {
  padding-top: 3mm;
}

print tr,
print td,
print th,
print tbody,
print thead,
print table {
  background-color: var(--ColorGrey7);
  border: none;
  padding: 0;
}

print .card-structure {
  height: 86mm;
  width: 55mm;
  border-collapse: collapse;
  border-spacing: 0;
  padding: 0mm;
  margin: 0mm;
}

print .logo {
  width: auto;
  height: auto;
  max-width: 45mm;
  max-height: 35mm;
  float: right;
  padding: 0mm;
  margin: 0mm;
  margin-right: -2mm;
}

print .photo {
  width: 20mm;
  height: 20mm;
  -o-object-fit: cover;
  object-fit: cover;
}

print .card-holder {
  margin-top: 4mm !important;
  width: 86mm;
  height: 55mm;
  background-color: white;
}

print .card-structure {
  width: 86mm;
  height: 55mm;
}
print .card-structure .card-body {
  height: auto;
  width: 100%;
  vertical-align: top;
  text-align: left;
  padding-left: 7mm !important;
  padding-right: 7mm !important;
  padding-top: 9mm !important;
}

print .card-structure .card-header {
  background-color: unset;
  background: none;
  border: none;
  padding-top: 0mm;
  padding-right: 0mm;
  padding-left: 0mm;
  height: 18.75mm;
  width: 100%;
}

print .card-structure .card-header > table {
  height: 100%;
  width: 100%;
}

print .card-structure .card-date {
  vertical-align: bottom;
  text-align: left;
  padding-bottom: 0mm;
  padding-left: 7mm;
  white-space: normal;
}

print .card-structure .card-logo {
  text-align: right;
  vertical-align: top;
  padding-top: 0;
  padding-right: 0;
}

print .card-structure .card-visitor-name {
  width: 100%;
  text-align: left;
}

print .card-structure .card-visitor-company {
  width: 100%;
  padding-top: 2mm !important;
  text-align: left;
}

print .card-structure .card-code {
  vertical-align: bottom;
  text-align: right;
  padding: 0;
}

print table > tbody > tr {
  background-color: initial;
}

print table > tbody > tr > td {
  border: none;
  border-right: none;
  line-height: 1em;
}

print table > tbody > tr {
  border-bottom: none;
  background-color: var(--ColorGrey7);
}

print table > tbody > tr:hover {
  background-color: var(--ColorGrey7);
}

print .card-body table tr td:first-child {
  width: 1%;
  font-weight: bold;
}

print p.visitor-date {
  font-size: 12pt;
  font-family: var(--Font3);
  line-height: 14pt;
  padding-left: 7mm !important;
}

print p.visitor-name {
  font-size: 18pt;
  white-space: normal;
  line-height: 20pt;
  font-family: var(--Font3);
}

print p.visitor-company {
  font-size: 12pt;
  line-height: 14pt;
  font-family: var(--Font3);
}

terminal-slide print td.card-container-back {
  display: none;
}
terminal-slide print td.card-container-front {
  padding-top: 0;
}
terminal-slide print .card-back {
  display: none;
}
terminal-slide print .card-holder {
  margin-top: 0 !important;
}
terminal-slide .card-spacer {
  display: none;
}
printer[inline="true"] {
  overflow: hidden;
}
terminal-slide .card-structure{
  margin-top:-5mm !important;
}
terminal-slide print p.visitor-date{
  margin-left:-7mm !important;
}

.document.visible{
  transform: translateY(0) scale(0.92)
}