/* ----------------------------------------------
 * Reset
 * ----------------------------------------------
*/

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
}

body,
html {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

ul,
li {
	list-style: none;
}

printer {
	display: none;
}

printer[inline='true'] {
	display: block;
	width: 85mm;
	height: 55mm;
	background-color: var(--ColorGrey7);
	transform: scale(1.5);
	transform-origin: top right;
	border: 3px solid #002948;
}

printer[inline='true'] .card-structure {
	width: 100%;
}

/* ----------------------------------------------
 * Structure
 * ----------------------------------------------
*/

article {
	background-image: url('../images/background.jpg');
	background-size: cover;
	background-position: 0 0;
	transition: all 300ms ease;
	transform: translateY(0);
	-ms-transform: translateY(0);
	width: 100% !important;
	height: 100% !important;
	user-select: none;
	will-change: transform;
}

body.open article {
	transform: translateY(calc(-1 * 24vh));
	-ms-transform: translateY(calc(-1 * 24vh));
}

header {
	height: 24vh;
	padding: 3vh 10vh;
	transition: transform 1s ease, opacity 0.6s ease;
	position: relative;
}

header .logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

header time {
	font-size: 6vh;
	font-family: 'TouchwayLight', arial, sans-serif;
}

footer {
	height: 15vh;
	background-color: var(--ColorGrey7);
	padding: 3vh 10vh;
	border-top: 1px solid #002948;
	opacity: 0;
}

footer.ghost {
	background-color: transparent;
	border-top: none;
}

main {
	padding: 2vh 0;
	overflow: auto;
	opacity: 0;
}

/* Header before and after */
article header .title {
	visibility: hidden;
}

article.in>header .title {
	visibility: visible;
	animation: headerIn 1s forwards ease;
}

article.out>header .title {
	visibility: visible;
	animation: headerOut 1s forwards ease;
	animation-fill-mode: both;
}

article main {
	visibility: hidden;
}

article.in>main {
	z-index: 2;
	visibility: visible;
	animation: fadeIn 1.5s forwards ease;
}

article.out>main {
	visibility: visible;
	animation: fadeOut 1s forwards ease;
	animation-fill-mode: both;
}

article>footer {
	visibility: hidden;
}

article.in>footer {
	visibility: visible;
	animation: fadeIn 1s forwards ease;
}

article.out>footer {
	visibility: visible;
	animation: fadeOut 1s forwards ease;
	animation-fill-mode: both;
}

/*article.in main {
	z-index: 2;
	animation-name: fadeIn;
	animation-duration: 1s;
	transition-timing-function: linear;
	animation-fill-mode: forwards;
}

article.out main {
	animation-name: fadeOut;
	animation-duration: 1s;
	transition-timing-function: linear;
	animation-fill-mode: both;
}
article > header .title {
	transform: translate3d(0, -10%, 0);
	opacity: 0;
}

article.in > header .title {
	animation-name: headerIn;
	animation-duration: 1s;
	transition-timing-function: linear;
	animation-fill-mode: both;
}
article > header {
	animation-name: fadeIn;
	animation-duration: 1s;
	animation-delay: 300ms;
	transition-timing-function: linear;
	animation-fill-mode: both;
}

article > footer {
	opacity: 0;
}

article.in > footer {
	animation-name: footerIn;
	animation-duration: 1s;
	animation-delay: 300ms;
	transition-timing-function: linear;
	animation-fill-mode: both;
}

article.out > footer {
	animation-name: footerOut;
	animation-duration: 1s;
	transition-timing-function: linear;
	animation-fill-mode: both;
}

article.out > header {
	animation-name: fadeOut;
	animation-duration: 1s;
	transition-timing-function: linear;
	animation-fill-mode: both;
}

article.out header .title {
	animation-name: headerOut;
	animation-duration: 1s;
	transition-timing-function: linear;
	animation-fill-mode: both;
}*/

main>section {
	padding: 5vh;
}

main>section {
	height: 100%;
	max-width: 90vw;
	margin: auto;
}

main[type='box']>section {
	background-color: #eeeeee;
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
	overflow: auto;
	height: 100%;
}

main[type='stage']>section {
	background-color: transparent;
	overflow: auto;
	height: 100%;
	box-shadow: none;
	padding: 0;
}

main[type='flow'] {
	padding: 5vh 5vh 0 5vh;
}

main[type='flow']>section {
	height: auto;
}

main[type='flow-box']>section {
	background-color: #eeeeee;
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
	height: auto;
}

main[type='box-overflow']>section {
	overflow: visible;
}

section-header {
	padding-bottom: 2vh;
	border-bottom: 1px solid #002948;
}

section-body {
	padding: 2vh 0;
	overflow: hidden;
}

section-body>form {
	height: 100%;
}

search {
	max-width: 33%;
}

search>input {
	margin-left: 2vh;
}

#Reload {
	display: inline-block;
	z-index: 10;
	font-size: 6vh;
	position: absolute;
	bottom: calc(24vh + 2vh);
	left: 2vh;
	color: #d2d5d7;
	transition: all 0.3s ease;
}

body.open #Reload {
	bottom: calc(24vh + 15vh + 2vh);
}

/* ----------------------------------------------
* Scroll container & helpers
* ----------------------------------------------
*/

.scroller {
	overflow: hidden !important;
	position: relative;
	/*scroll-behavior: smooth;*/
	height: 100%;
}

/* ----------------------------------------------
* Terminal Slider
* ----------------------------------------------
*/

#terminal-slider-wrapper {
	position: relative;
}

#terminal-slider {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

terminal-slide {
	user-select: none;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 0;
	transition: opacity ease-in-out 0.3s;
}

terminal-slide.in {
	z-index: 2;
}

.animation.ng-enter {
	/* transition: 300ms ease all; */
	/* opacity: 0; */
}

.animation.ng-enter.ng-enter-active {
	/* opacity: 1; */
}

/* ----------------------------------------------
 * Skeleton
 * ----------------------------------------------
*/

.rows,
.cols,
[rows],
[cols] {
	display: -webkit-box !important;
	display: -moz-box !important;
	display: -ms-flexbox !important;
	display: -webkit-flex !important;
	display: flex !important;
}

.cols,
[cols] {
	width: 100%;
	flex-direction: row !important;
}

.rows,
[rows] {
	height: 100%;
	flex-direction: column !important;
}

.wrap,
[wrap] {
	flex-wrap: wrap;
	justify-content: space-between;
}

.wide,
[wide] {
	flex-basis: 70%;
}

.thin,
[thin] {
	flex-basis: 30%;
}

.medium,
[medium] {
	flex-basis: 40%;
}


.spacer,
spacer,
[spacer] {
	flex-basis: 4vh;
	flex-grow: 0;
	flex-shrink: 0;
}

.auto,
[auto] {
	flex-basis: auto;
}

.full,
[full] {
	flex-basis: 100%;
}

.flex,
[flex] {
	flex: 1;
}

.x2 {
	flex-basis: 50%;
}

.x3 {
	flex-basis: 33.33333333333%;
}

.x4 {
	flex-basis: 25%;
}

.x5 {
	flex-basis: 20%;
}

.x6 {
	flex-basis: 16.66666666666%;
}

.x7 {
	flex-basis: 14.28571428571429%;
}

.x8 {
	flex-basis: 12.5%;
}

.x9 {
	flex-basis: 11.11111111111111%;
}

.x10 {
	flex-basis: 10%;
}

@media screen and (orientation: portrait) {
	.pt-rows {
		height: 100%;
		flex-direction: column !important;
	}

	.pt-no-flex {
		flex: none;
	}

	.pt-x1 {
		flex-basis: 100%;
	}

	.pt-x2 {
		flex-basis: 50%;
	}

	.pt-x3 {
		flex-basis: 33.33333333333%;
	}

	.pt-x4 {
		flex-basis: 25%;
	}

	.pt-x5 {
		flex-basis: 20%;
	}

	.pt-x6 {
		flex-basis: 16.66666666666%;
	}

	.pt-x7 {
		flex-basis: 14.28571428571429%;
	}

	.pt-x8 {
		flex-basis: 12.5%;
	}

	.pt-x9 {
		flex-basis: 11.11111111111111%;
	}

	.pt-x10 {
		flex-basis: 10%;
	}

	.pt-align-1 {
		align-items: baseline;
	}

	.pt-align-2 {
		align-items: center;
		justify-content: center;
	}

	.pt-align-2-h {
		align-items: center;
	}

	.pt-align-3 {
		align-items: flex-end;
	}

	.pt-align-r {
		justify-content: flex-end;
	}
}

/* ----------------------------------------------
 * Font styles
 * ----------------------------------------------
*/

h1 {
	font-family: 'TouchwayRegular', arial, sans-serif;
	font-size: 6vh;
	color: #002948;
}

h2 {
	font-family: 'TouchwayLight', arial, sans-serif;
	font-size: 4vh;
}

h3 {
	font-family: 'TouchwayLight', arial, sans-serif;
	font-size: 3vh;
	text-align: left;
}

h3.caption {
	margin-bottom: 2vh;
}

h4 {
	font-family: 'TouchwayLight', arial, sans-serif;
	font-size: 2vh;
}

h5 {
	font-family: 'TouchwayLight', arial, sans-serif;
	font-size: 1vh;
}

a {
	font-family: 'TouchwayBold', arial, sans-serif;
	font-size: 3vh;
	text-decoration: none;
	color: #002948;
	cursor: pointer;
}

a.inverted {
	color: #002948;
}

a.inverted.selected {
	color: #002948;
}

a:hover {
	color: #002948;
}

p,
small,
strong {
	font-family: 'TouchwayLight', arial, sans-serif;
	font-size: 3vh;
	color: #002948;
}

p.strong,
strong {
	font-weight: bold;
}

p.error,
p[error] {
	color: #e2001a;
}

p.small,
small {
	font-size: 2vh;
}

p.medium,
medium {
	font-size: 3vh;
}

label,
.label {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	font-family: 'TouchwayLight', arial, sans-serif;
	font-size: 2vh;
	cursor: pointer;
	/* No select properties */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.active,
li.active * {
	color: #002948;
}

.disabled,
[disabled] {
	opacity: 0.1;
	user-select: none;
}

.hidden {
	display: none !important;
}

.relative {
	position: relative !important;
}

/* ----------------------------------------------
 * Icons
 * ----------------------------------------------
*/

icon,
.icon,
i {
	font-family: 'Touchway';
	line-height: 1;
	display: inline;
	vertical-align: middle;
	font-style: normal;
	text-decoration: none;
}

icon.big,
.icon.big,
i.big {
	font-size: 6vh;
}

icon:before,
i:before {
	position: relative;
}

.tw-save:before {
	content: 'u';
}

.tw-delete:before {
	content: '\0074';
}

.tw-user:before {
	content: 'U';
}

.tw-reload:before {
	content: 'O';
}

.tw-arrow-right:before {
	content: '1';
	left: 5px;
}

.tw-arrow-left:before {
	content: '0';
}

.tw-print:before {
	content: '\001F';
}

.tw-edit:before {
	content: '?';
}

.tw-arrow-right-big:before {
	content: '>';
}
.tw-arrow-left-big:before {
	content: '<';
}


.tw-clear:before,
.tw-close:before {
	content: 'X';
}

/* ----------------------------------------------
 * Buttons, Links
 * ----------------------------------------------
*/

button,
.button {
	border: 0px solid #c1c5c8;
	padding: 2vh 3vh;
	font-family: 'TouchwayLight', arial, sans-serif;
	font-size: 3vh;
	border-radius: 0;
	background-color: #002948;
	color: var(--ColorGrey7);
	cursor: pointer;
	transition: all 150ms ease;
	width: 100%;
	white-space: nowrap;
}

button.inverted,
.button.inverted {
	background-color: #002948;
}

button.light,
.button.light{
	background-color: #FFFFFF;
	color: #002948;
	border: 1px solid #c1c5c8;
	cursor: initial;
}

button.light:active,
.button.light:active{
	background-color:inherit;
	cursor: initial;
}

button.selected,
.button.selected {
	background-color: #002948;
}

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

button:disabled,
.button:disabled {
	background-color: #002948;
}

button.controls,
.button.controls {
	height: 10vh;
	line-height: 10vh;
	width: 10vh;
	font-size: 6vh;
	padding: 0;
	position: relative;
	margin-left: 2vh;
}

button.controls i,
.button.controls i {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 7vh;
	transform: translate3d(-50%, -50%, 0);
}

input[type='text'],
input[type='email'],
input[type='search'],
input[type='password'],
input[type='tel'],
input[type='url'],
input[type='date'],
textarea {
	width: 100%;
	font-family: 'TouchwayRegular', arial, sans-serif;
	font-size: 3vh;
	border: 1px solid #002948;
	border-radius: 0;
	line-height: 7vh;
	padding: 0 3vh;
	outline: none;
}

input.fixed,
button.fixed,
.button.fixed {
	height: 7vh;
	padding: 0 3vh;
	width: auto;
}

datepicker {
	position: relative;
	display: block;
}

datepicker i {
	position: absolute;
	right: 2vh;
	top: 50%;
	transform: translateY(-50%);
	font-size: 4vh;
	color: #000000;
	cursor: pointer;
}

textarea {
	vertical-align: top;
	height: 100%;
}

input[type='checkbox'] {
	-webkit-appearance: none;
	background-color: var(--ColorGrey7);
	border: 1px solid #002948;
	/* padding: 2vh; */
	border-radius: 0;
	display: inline-block;
	position: relative;
	min-width: 6vh;
	max-width: 6vh;
	width: 6vh;
	height: 6vh;
	margin-right: 2vh;
	-webkit-touch-callout: none;
}

input[type='checkbox']:checked {
	background-color: #002948;
	border-color: #002948;
}

input[type='checkbox']:checked:after {
	content: 'C';
	font-family: 'Touchway';
	font-size: 3vh;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	color: var(--ColorGrey7);
}

input[type='checkbox']+* {
	line-height: 4vh;
	white-space: nowrap;
	align-self: center;
}

footer input[type='checkbox']+* {
	white-space: normal;
}

input.ng-invalid.ng-touched,
input.error {
	border-color: #e2001a;
}

input.error {
	color: #e2001a;
}

form>.cols {
	margin-bottom: 2vh;
}

/* ----------------------------------------------
 * List  styles
 * ----------------------------------------------
*/

list {
	/*Component!!!*/
	display: block;
	height: 100%;
	width: 100%;
	position: relative;
}

.list>li {
	padding: 2vh;
}

.list.index>li:first-child {
	padding-top: 2vh;
	/*Index-list and normal list item start at the same height*/
}

.list i {
	margin-right: 1vh;
}

.list.small>li {
	padding: 0.5vh;
}

.list.index p {
	font-weight: bold;
	font-size: 3vh;
}

.list button {
	font-size: 3vh;
	width: auto;
}

/* -- l1 -- */

.list.l1>li>* {
	margin-right: 3vh;
}

.list.l1>li> :last-child {
	margin-right: 0;
}

.list.l1>li.active>*:nth-child(2) {
	font-weight: bold;
}

.list.l1>li {
	border-bottom: 1px solid #002948;
}

.list.l1>li:last-child {
	border-bottom: none;
}

/* -- l2 -- WITH BOTTOM BORDER */

.list.l2>li:last-child {
	border-bottom: none;
}

.list.l2>li {
	border-bottom: 1px solid #002948;
}

.list.l2>li>*:nth-child(2).active {
	font-weight: bold;
}

.list.l2>li>*:nth-child(5) {
	width: 210px;
}

.list.l2>li>*:nth-child(4),
.list.l2>li>*:nth-child(5) {
	margin-right: 0;
	margin-left: 3vh;
}

/* -- l3 -- */

.list.l3>li>*:nth-child(2) {
	font-weight: bold;
}

.list.l3>li>*:nth-child(3) {
	font-size: 1vh;
}

.list.l3>li {
	border-bottom: 1px solid #002948;
}

/* -- Language list -- */

language-selector a {
	color: #c1c5c8;
}

language-selector a.selected {
	color: #002948;
}

/* ----------------------------------------------
 * Grid styles
 * ----------------------------------------------
*/

.grid {
	flex-wrap: wrap;
	justify-content: space-between;
	height: 100%;
}

.grid>li {
	padding: 1vh;
	overflow: hidden;
}

.grid.r1>li {
	height: 100%;
}

.grid.r2>li {
	height: 50%;
}

.grid.r3>li {
	height: 33.33333333333333%;
}

.grid.r4>li {
	height: 25%;
}

.grid.x5>li {
	height: 20%;
}

.grid>li>.item {
	padding: 7vh 5vh;
	background-color: var(--ColorGrey7);
	text-align: center;
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
	display: block;
	height: 100%;
}

.grid>li:last-child {
	margin-right: auto;
}

/* ----------------------------------------------
 * Signature
 * ----------------------------------------------
*/

signature {
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
	background: #eeeeee;
}

signature p {
	position: absolute;
	pointer-events: none;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate3d(-50%, -50%, 0);
	color: #002948;
}

signature .pad {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	z-index: 2;
	width: 100%;
	display: block;
	background-color: rgba(255, 255, 255, 0.9);
	border: 1px solid #002948;
}

signature button {
	z-index: 3;
	width: auto;
	position: absolute;
	bottom: 20px;
	right: 20px;
}

/* ----------------------------------------------
 * Document
 * ----------------------------------------------
*/

.document {
	width: 100%;
	height: auto;
	opacity: 0;
	transition: opacity 1500ms ease, transform 1500ms ease;
	transform-origin: top center;
	transform: translateY(10px) scale(0.98);
}

.document.visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* ----------------------------------------------
 * Camera
 * ----------------------------------------------
*/

camera,
camera .flex,
camera video {
	width: auto;
	height: 100%;
	display: block;
	overflow: hidden;
	position: relative;
	float: right;
}

camera .placeholder {
	position: absolute;
	opacity: 0;
	height: 100%;
	width: 100%;
	border: 10px dashed var(--ColorGrey7) 7a;
	border-radius: 100%;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	transition: opacity 0.3s ease;
	-webkit-animation: rotate 120s linear infinite;
	-moz-animation: rotate 120s linear infinite;
	animation: rotate 120s linear infinite;
}

camera .placeholder.visible {
	opacity: 1;
}

@media screen and (orientation: portrait) {

	camera,
	camera .flex,
	camera video {
		width: 100%;
		height: auto;
	}
}

/* camera video {
    position: absolute;
    object-fit: cover;
} */

camera button {
	z-index: 10;
	position: absolute;
	width: auto;
	position: absolute;
	bottom: 20px;
	right: 20px;
}

camera img {
	z-index: 10;
}

camera .flash {
	z-index: 11;
	background-color: var(--ColorGrey7);
}

camera loader {
	top: 50%;
	transform: translate3d(0, -50%, 0);
	position: absolute;
}

/* ----------------------------------------------
 * Align helpers
 * ----------------------------------------------
*/

.align-1 {
	align-items: baseline;
}

.align-2 {
	align-items: center;
	justify-content: center;
}

.align-2-h {
	align-items: center;
}

.align-3 {
	align-items: flex-end;
}

.align-r {
	justify-content: flex-end;
}

/* ----------------------------------------------
 * CARD ENVELOPE
 * ----------------------------------------------
*/

.card-envelope {
	width: auto;
	height: auto;
	position: absolute;
	transform: rotate(10deg);
	padding: 20px;
	top: 2vh;
	right: 1vh;
	/* background: #002948; */
}

/* ----------------------------------------------
 * QR
 * ----------------------------------------------
*/

qr {
	max-width: 80%;
	height: auto;
	border-radius: 1vh;
	padding: 3vh;
	display: inline-block;
	background-color: var(--ColorGrey7);
	margin-right: 4vh;
}

qr img {
	width: 100%;
	height: 100%;
}

/* ----------------------------------------------
 * LINE
 * ----------------------------------------------
*/

.line {
	display: block;
	height: 0px;
	border-bottom: 1px solid #002948;
	margin: 4vh 0;
}

/* ----------------------------------------------
 * CARD
 * ----------------------------------------------
*/

.card {
	box-sizing: border-box;
	width: 30vw;
	height: 20vw;
	background: var(--ColorGrey7);
	position: relative;
	display: table;
	overflow: hidden;
}

.card .row {
	box-sizing: border-box;
	height: 12vw;
}

.card .imagearea {
	float: left;
}

.card .image {
	width: 9vw;
	height: 9vw;
	background-image: url('../images/DummyPortrait.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 2vh;
	left: 2vh;
}

.card .idarea {
	box-sizing: border-box;
	padding: 1vh;
	position: relative;
}

.card .idarea .logo {
	background-image: url('../images/logo.png');
	box-sizing: border-box;
	width: 5vw;
	height: 2vw;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	right: 1vw;
	top: 1vw;
}

.card .idarea .visitorid {
	box-sizing: border-box;
	font-size: 3vh;
	position: absolute;
	bottom: 3vw;
	padding: 0;
	right: 2vh;
}

.card .idarea .date {
	box-sizing: border-box;
	margin: 0;
	font-size: 2vh;
	display: block;
	position: absolute;
	bottom: 1vw;
	right: 2vh;
	white-space: nowrap;
}

.card .infoarea {
	box-sizing: border-box;
	padding: 1vh 2vh;
	background: #c1c5c8;
	height: 8vw;
}

.card .infoarea>table {
	box-sizing: border-box;
	padding: 0;
}

.card .infoarea>table td>* {
	padding-right: 1vh;
}

.card .infoarea strong,
.card .infoarea p {
	font-size: 2vh;
}

/* ----------------------------------------------
 * CUSTOM PER STEP
 * ----------------------------------------------
*/

[template="CheckinCheckout01"] .button {
	margin-bottom: var(--Space3);
	text-align: center;
}


@media screen and (orientation: portrait) {
	[template='WelcomeSelectionUnits01'] .grid {
		align-items: center;
		align-content: center;
	}

	[template='WelcomeSelectionUnits01'] .grid>li {
		height: auto;
	}

	[template='WelcomeVisitorList01'] .list p {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		-ms-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
}

[template='VisitorCodeEntry01'] .check-in {
	margin-left: 3vh;
}

[template='VisitorCodeEntry01'] .check-in p {
	white-space: nowrap;
	margin-right: 1vh;
}

[template='VisitorCodeEntry01'] .check-in input {
	max-width: 200px;
}

[template='VisitorCodeEntry01'] .check-in button {
	margin-left: 1vh;
}

[template="VisitorDataEntryForm01"] main[type="stage"] > section {
	padding-bottom:0;
}

/* -- VisitorTypeSelection01 -- */

[template='VisitorTypeSelection01'] section button {
	margin: 1vh auto;
	max-width: 60%;
	font-size: 5vh;
	text-transform: uppercase;
	text-align: left;
	line-height: calc(33% - 4vh);
}

@media screen and (orientation: portrait) {
	[template='VisitorTypeSelection01'] section button {
		max-height: 10vh;
		max-width: 80%;
	}
}

/* -- VisitorDataEntryForm01 -- */

[template='VisitorDataEntryForm01'] section .cols .thin {
	flex-basis: calc(10vh * 4);
}

[template='VisitorDataEntryForm01'] section .cols>.flex.cols>.flex:first-child {
	margin-right: 2vh;
}

[template='VisitorDataEntryForm01'] .suggestions {
	position: absolute;
	top: calc(100% - 1px);
	background: white;
	width: 100%;
	z-index: 5;
	border: 1px solid #002948;
	padding: 1vh 2vh;
	max-height: 15vh;
	overflow: auto;
}

[template='VisitorDataEntryForm01'] .has-suggestions {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* -- DeclarationSignature01 -- */

[template='DeclarationSignature01'] section {
	padding: 2vh;
}

@media screen and (orientation: portrait) {
	[template='DeclarationSignature01'] section {
		max-height: 33vh;
	}
}

/* -- CardPrintInstruction01 -- */

[template='CardPrintInstruction01'] section .flex:last-child {
	position: relative;
}

/* -- CardPrintProcess01 -- */

[template='CardPrintProcess01'] .printer-warning {
	position: absolute;
	top: 50%;
	height: auto;
	width: auto;
	left: 50%;
	transform: translate(-50%, -50%);
}

[template='CardPrintProcess01'] .printer-warning>h3 {
	text-align: center;
}

[template='CardPrintProcess01'] .printer-warning>p {
	margin-bottom: 5vh;
	text-align: center;
}

/* -- ContactSelectionList02 -- */

[template='ContactSelectionList02'] section>.rows .line {
	margin-bottom: 0;
}

[template='ContactSelectionList02'] section.rows :first-child>.rows p {
	margin-right: 2vh;
}

[template='ContactSelectionList02'] section.rows:first-child>.rows input[type='text'] {
	width: 300px;
}

/* -- FinalInstruction01 -- */

[template='FinalInstruction01'] section {
	padding: 0;
}

[template='FinalInstruction01'] section> :first-child {
	padding: 5vh;
	position: relative;
}

[template='FinalInstruction01'] section img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	display: block;
}

[template="FinalInstruction02"] section img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	display: block;
}

/* -- BadgeHandoverInstruction01 -- */

@media screen and (orientation: portrait) {
	[template='ContactInteractionQR01'] .qr-wrapper {
		order: 1;
		margin-top: 2vh;
	}
}

[template='BadgeHandoverInstruction01'] main {
	padding: 0;
	overflow: hidden;
}

[template='BadgeHandoverInstruction01'] section {
	position: relative;
}

[template='BadgeHandoverInstruction01'] section .badge-wrapper {
	position: absolute;
	top: 0;
	width: 66vw;
	right: -20vw;
	z-index: -1;
}

[template='BadgeHandoverInstruction01'] section .badge {
	width: 100%;
}

[template='BadgeHandoverInstruction01'] section .badge-number {
	position: absolute;
	font-size: 5vh;
	top: 60%;
	left: 36%;
	z-index: 1;
	transform: rotate(-10deg);
}

@media screen and (orientation: portrait) {
	[template='BadgeHandoverInstruction01'] section .badge-wrapper {
		width: 100vw;
	}

	[template='BadgeHandoverInstruction01'] section .badge-wrapper {
		top: 30%;
		transform: translateY(-50%);
	}
}

/* -- WelcomeVisitorListCheckin01 -- */

[template='WelcomeVisitorListCheckin01'] section .list.l2 li :nth-child(1) {
	width: 120px;
}

[template='WelcomeVisitorListCheckin01'] section .list.l2 li :last-child {
	width: auto;
}

[template='WelcomeVisitorListCheckin01'] section .list.l2>li>*:nth-child(3) {
	font-size: 2vh;
	background-color: #002948;
	margin-right: 0;
}

[template='WelcomeVisitorListCheckin01'] section .list.l1 button {
	width: auto;
}

/* -- VisitorPictureTake01 -- */

[template='VisitorPictureTake01'] section {
	padding: 0;
}

[template='VisitorPictureTake01'] section>.information {
	padding: 5vh;
}

/* -- WelcomeEventList01 -- */

[template='WelcomeEventList01'] section .list.l1 button {
	width: auto;
}

/* -- PermitForm01 -- */

[template='PermitForm01'] section input[type='checkbox']+* {
	white-space: normal;
}

[template='PermitForm01'] section label {
	margin-bottom: 2vh;
}

[template='PermitForm01'] block {
	margin-bottom: 2vh;
	border-bottom: 1px solid #002948;
	display: block;
	padding: 4vh 0;
}

[template='PermitForm01'] block:last-child {
	border-bottom: none;
}

[template='PermitForm01'] .other-activities {
	margin-top: 2vh;
}

/* ----------------------------------------------
 * PICKER
 * ----------------------------------------------
*/

/** * Note: the root picker element should *NOT* be styled more than what’s here. */

.picker {
	font-size: 2vh;
	font-family: 'TouchwayRegular', arial, sans-serif;
	text-align: left;
	line-height: 1.2;
	color: #002948;
	position: absolute;
	z-index: 10000;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/** * The picker input element. */

.picker__input {
	cursor: default;
}

/** * When the picker is opened, the input element is “activated”. */

.picker__input.picker__input--active {
	border-color: #002948;
}

/** * The holder is the only “scrollable” top-level container element. */

.picker__holder {
	width: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/*! * Classic picker styling for pickadate.js * Demo: http://amsul.github.io/pickadate.js */

/** * Note: the root picker element should *NOT* be styled more than what’s here. */

.picker {
	width: 100%;
}

/** * The holder is the base of the picker. */

.picker__holder {
	position: absolute;
	bottom: 0;
	background: var(--ColorGrey7);
	border: 1px solid #002948;
	border-top-width: 0;
	border-bottom-width: 0;
	border-radius: 0 0 1.5vh 1.5vh;
	box-sizing: border-box;
	min-width: 176px;
	max-width: 500px;
	max-height: 0;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	-webkit-transform: translateY(-1em) perspective(600px) rotateX(10deg);
	transform: translateY(-1em) perspective(600px) rotateX(10deg);
	transition: -webkit-transform 0.15s ease-out, opacity 0.15s ease-out,
		max-height 0s 0.15s, border-width 0s 0.15s;
	transition: transform 0.15s ease-out, opacity 0.15s ease-out,
		max-height 0s 0.15s, border-width 0s 0.15s;
	overflow: hidden;
}

.picker__holder.bottom {
	bottom: auto;
	top: 0;
}

/** * The frame and wrap work together to ensure that * clicks within the picker don’t reach the holder. */

.picker__frame {
	padding: 1px;
}

.picker__wrap {
	margin: -1px;
}

/** * When the picker opens... */

.picker--opened .picker__holder {
	max-height: none;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	border-top-width: 1px;
	border-bottom-width: 1px;
	-webkit-transform: translateY(0) perspective(600px) rotateX(0);
	transform: translateY(0) perspective(600px) rotateX(0);
	transition: -webkit-transform 0.15s ease-out, opacity 0.15s ease-out,
		max-height 0s, border-width 0s;
	transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s,
		border-width 0s;
	box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.12);
}

/* ========= $CLASSIC-DATE-PICKER ============= */

/** * The picker box. */

.picker__box {
	padding: var(--Space2);
}

/** * The header containing the month and year stuff. */

.picker__header {
	text-align: center;
	position: relative;
	margin-top: var(--Space2);
}

/** * The month and year labels. */

.picker__month,
.picker__year {
	font-size: 2vh;
	display: inline-block;
	margin-left: 0.25em;
	margin-right: 0.25em;
}

/** * The month and year selectors. */

.picker__select--month,
.picker__select--year {
	border: 1px solid #002948;
	height: 2em;
	padding: 0.5em;
	margin-left: 0.25em;
	margin-right: 0.25em;
}

@media (min-width: 24.5em) {

	.picker__select--month,
	.picker__select--year {
		margin-top: -0.5em;
	}
}

.picker__select--month {
	width: 35%;
}

.picker__select--year {
	width: 22.5%;
}

.picker__select--month:focus,
.picker__select--year:focus {
	border-color: #002948;
}

/** * The month navigation buttons. */

.picker__nav--prev,
.picker__nav--next {
	position: absolute;
	padding: 0.5em 1.25em;
	width: 1em;
	height: 1em;
	box-sizing: content-box;
	top: -0.25em;
	font-size: 1vh;
}

@media (min-width: 24.5em) {

	.picker__nav--prev,
	.picker__nav--next {
		top: -0.33em;
	}
}

.picker__nav--prev {
	left: -1em;
	padding-right: 1.25em;
}

@media (min-width: 24.5em) {
	.picker__nav--prev {
		padding-right: 1.5em;
	}
}

.picker__nav--next {
	right: -1em;
	padding-left: 1.25em;
}

@media (min-width: 24.5em) {
	.picker__nav--next {
		padding-left: 1.5em;
	}
}

.picker__nav--prev:before,
.picker__nav--next:before {
	content: ' ';
	border-top: 0.5em solid transparent;
	border-bottom: 0.5em solid transparent;
	border-right: 0.75em solid #002948;
	width: 0;
	height: 0;
	display: block;
	margin: 0 auto;
}

.picker__nav--next:before {
	border-right: 0;
	border-left: 0.75em solid #002948;
}

.picker__nav--prev:hover,
.picker__nav--next:hover {
	cursor: pointer;
	color: #002948;
	background: #dddddd;
}

.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
	cursor: default;
	background: none;
	border-right-color: #002948;
	border-left-color: #002948;
}

/** * The calendar table of dates */

.picker__table {
	text-align: center;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	font-size: inherit;
	width: 100%;
	margin-top: 0.75em;
	margin-bottom: 0.5em;
}

@media (min-height: 33.875em) {
	.picker__table {
		margin-bottom: 0.75em;
	}
}

.picker__table td {
	margin: 0;
	padding: 0;
}

/** * The weekday labels */

.picker__weekday {
	width: 14.285714286%;
	padding-bottom: 0.25em;
	color: #c1c5c8;
	/* Increase the spacing a tad */
}

@media (min-height: 33.875em) {
	.picker__weekday {
		padding-bottom: 0.5em;
	}
}

/** * The days on the calendar */

.picker__day {
	padding: 0.3125em 0;
	border: 1px solid transparent;
}

.picker__day--today {
	position: relative;
}

.picker__day--today:before {
	content: ' ';
	position: absolute;
	top: 2px;
	right: 2px;
	width: 0;
	height: 0;
	border-top: 0.5em solid #002948;
	border-left: 0.5em solid transparent;
}

.picker__day--disabled:before {
	border-top-color: var(--ColorGrey7);
}

.picker__day--outfocus {
	color: #eeeeee;
}

.picker__day--infocus:hover,
.picker__day--outfocus:hover {
	cursor: pointer;
	color: #002948;
	background: #dddddd;
}

.picker__day--highlighted {
	border-color: #002948;
}

.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
	cursor: pointer;
	color: #002948;
	background: #dddddd;
}

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
	background: #002948;
	color: var(--ColorGrey7);
}

.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
	background: #eeeeee;
	border-color: #eeeeee;
	color: #eeeeee;
	cursor: default;
}

.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
	background: #eeeeee;
}

/** * The footer containing the "today", "clear", and "close" buttons. */

.picker__footer {
	text-align: center;
	white-space: nowrap;
}

.picker__button--today,
.picker__button--clear,
.picker__button--close {
	cursor: pointer;
	margin: 0 1px;
	width: 33%;
	white-space: nowrap;
	transition: opacity 150ms ease;
	padding: var(--Space1) 0;
	font-size: var(--FontSize2);
}

.picker__button--today:last-child,
.picker__button--clear:last-child,
.picker__button--close:last-child {
	margin-right: 0px;
}

.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
	cursor: pointer;
}

.picker__button--today:focus,
.picker__button--clear:focus,
.picker__button--close:focus {
	outline: none;
}

.picker__button--clear:before {
	top: -0.25em;
	width: 0.66em;
	border-top: 3px solid #002948;
}

.picker__button--today[disabled],
.picker__button--today[disabled]:hover {
	background: #eeeeee;
	border-color: #eeeeee;
	color: #eeeeee;
	cursor: default;
}

.picker__button--today[disabled]:before {
	border-top-color: #eeeeee;
}

/* ----------------------------------------------
 * SPINNER
 * ----------------------------------------------
*/

loader {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	visibility: hidden;
	opacity: 0;
}

loader[type='full'] {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background-color: transparent;
	transition: all 0.3s ease;
	transform: translate3d(0, -2%, 0);
	/*animation: 0s linear 0.5s forwards fadeInLoader;*/
}

loader.transparent {
	background-color: transparent;
}

loader.visible {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
	transform: translate3d(0, 0, 0);
}

loader p {
	text-align: center;
	position: absolute;
	top: calc(50% + 50px + 3vh);
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
}

loader .spinner.sk-fading-circle {
	display: block;
	margin: auto;
	width: 50px;
	height: 50px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate3d(-50%, -50%, 0);
}

loader .spinner.sk-fading-circle .sk-circle {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

loader .spinner.sk-fading-circle .sk-circle:before {
	content: '';
	display: block;
	margin: 0 auto;
	width: 15%;
	height: 15%;
	background-color: #000000;
	border-radius: 100%;
	-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
	animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}

loader .spinner.sk-fading-circle .sk-circle2 {
	-webkit-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);
}

loader .spinner.sk-fading-circle .sk-circle3 {
	-webkit-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	transform: rotate(60deg);
}

loader .spinner.sk-fading-circle .sk-circle4 {
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

loader .spinner.sk-fading-circle .sk-circle5 {
	-webkit-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
}

loader .spinner.sk-fading-circle .sk-circle6 {
	-webkit-transform: rotate(150deg);
	-ms-transform: rotate(150deg);
	transform: rotate(150deg);
}

loader .spinner.sk-fading-circle .sk-circle7 {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

loader .spinner.sk-fading-circle .sk-circle8 {
	-webkit-transform: rotate(210deg);
	-ms-transform: rotate(210deg);
	transform: rotate(210deg);
}

loader .spinner.sk-fading-circle .sk-circle9 {
	-webkit-transform: rotate(240deg);
	-ms-transform: rotate(240deg);
	transform: rotate(240deg);
}

loader .spinner.sk-fading-circle .sk-circle10 {
	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
}

loader .spinner.sk-fading-circle .sk-circle11 {
	-webkit-transform: rotate(300deg);
	-ms-transform: rotate(300deg);
	transform: rotate(300deg);
}

loader .spinner.sk-fading-circle .sk-circle12 {
	-webkit-transform: rotate(330deg);
	-ms-transform: rotate(330deg);
	transform: rotate(330deg);
}

loader .spinner.sk-fading-circle .sk-circle2:before {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}

loader .spinner.sk-fading-circle .sk-circle3:before {
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}

loader .spinner.sk-fading-circle .sk-circle4:before {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

loader .spinner.sk-fading-circle .sk-circle5:before {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

loader .spinner.sk-fading-circle .sk-circle6:before {
	-webkit-animation-delay: -0.7s;
	animation-delay: -0.7s;
}

loader .spinner.sk-fading-circle .sk-circle7:before {
	-webkit-animation-delay: -0.6s;
	animation-delay: -0.6s;
}

loader .spinner.sk-fading-circle .sk-circle8:before {
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5s;
}

loader .spinner.sk-fading-circle .sk-circle9:before {
	-webkit-animation-delay: -0.4s;
	animation-delay: -0.4s;
}

loader .spinner.sk-fading-circle .sk-circle10:before {
	-webkit-animation-delay: -0.3s;
	animation-delay: -0.3s;
}

loader .spinner.sk-fading-circle .sk-circle11:before {
	-webkit-animation-delay: -0.2s;
	animation-delay: -0.2s;
}

loader .spinner.sk-fading-circle .sk-circle12:before {
	-webkit-animation-delay: -0.1s;
	animation-delay: -0.1s;
}

/* ------------------------------------------------------------- 
/* DEBUG 
/* ------------------------------------------------------------- */

debug {
	position: fixed;
	top: 0;
	left: -100%;
	width: 5vh;
	height: 100%;
	background-color: #0098ca;
	z-index: 9999999999999999;
	transition: all 0.3s ease;
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
}

debug.active {
	display: block;
	left: 0;
}

debug a {
	display: block;
	width: 5vh;
	text-align: center;
	height: 5vh;
	line-height: 50px;
	color: var(--ColorGrey7);
	transition: all 0.3s ease;
}

debug a.css {
	font-size: 1vh;
}

debug a:hover {
	background-color: #25313f;
	color: var(--ColorGrey7);
}

/* ==========================================================================
TW-KEYBOARD
========================================================================== */

#TWKeyboard-wrapper {
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 999999;
}

#TWKeyboard {
	background-color: var(--ColorGrey0);
	padding: 1vh;
	width: 100%;
	height: calc(24vh + 15vh);
	display: block;
	padding-left: 2vh;
	display: block;
	position: absolute;
	/* bottom: calc(-1 * (8vh + 24vh + 15vh)); */
	bottom: 0;
	left: 0;
	transition: transform 0.5s ease 0s;
	-webkit-transition: transform 0.5s ease 0s;
	box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.25);
	border: 1px solid black;
	transform: translate3d(0, calc(100% + 8vh), 0);
	-ms-transform: translateY(0, calc(100% + 8vh), 0);
	will-change: transform;
}

#TWKeyboard .wrapper {
	position: absolute;
	left: 50%;
	top: 50%;
	width: auto;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	transform: translate3d(-50%, -50%, 0);
	-ms-transform: translate3d(-50%, -50%, 0);
}

@media screen and (orientation: portrait) {
	#TWKeyboard .wrapper {
		width: 100%;
		padding: 0 2vh;
	}
}

#TWKeyboard.open {
	transition: transform 0.5s ease 0s;
	-webkit-transition: transform 0.5s ease 0s;
	transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
}

#TWKeyboard:after {
	content: '.';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#TWKeyboardHeader {
	position: absolute;
	top: calc(-1 * 8vh);
	right: 0;
}

#TWKeyboardHeader div {
	color: var(--ColorGrey7);
	background-color: #000000;
	position: absolute;
	cursor: pointer;
	right: -1px;
	top: -100%;
	width: 8vh;
	line-height: 8vh;
	text-align: center;
	font-size: 6vh;
}

.closex {
	font-family: 'Touchway';
	font-size: 6vh;
	color: var(--ColorGrey7);
}

#TWKeyboard .button {
	width: 5vw;
	text-align: center;
	height: calc((39vh) / 5.5);
	line-height: calc((39vh) / 5.5);
	position: relative;
	margin-right: 0.5vw;
	margin-left: 0.5vw;
	cursor: pointer;
	padding: 0;
	font-size: 4vh;
	/* box-shadow: 0px 1px 3px #002948; */
	border-radius: 0;
	background-color: var(--ColorGrey6);
	/* background: linear-gradient(to bottom, var(--ColorGrey7) 0%, #c1c5c8 100%); */
	color: #002948;
}

#TWKeyboard .button:active {
	background-color: var(--ColorGrey5);
	/* background: linear-gradient(to bottom, #c1c5c8 0%, #eeeeee 100%); */
}

#TWKeyboard .key {
	width: 100%;
	height: 100%;
	text-align: center;
	user-select: none;
}

#TWKeyboard .key-row {
	padding: 0.5vh 0;
}

#TWKeyboard .buttonDown {
	background: none;
	background-color: var(--ColorGrey5);
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

#TWKeyboard .button_a {
	margin-left: 26px;
}

#TWKeyboard .button_dash {
	margin-left: 26px;
}

#TWKeyboard .button_underscore {
	margin-left: 26px;
}

#TWKeyboard .button.button_del,
#TWKeyboard .button_enter {
	width: auto !important;
	padding: 0 1vh !important;
}

#TWKeyboard #TWKeyboardNumber .button_capitalletterleft,
#TWKeyboard #TWKeyboardSymbols .button_capitalletterleft {
	width: 10vw;
}

#TWKeyboard .button_capitalletterright {
	width: 10vw;
}

#TWKeyboard .button_numberleft {
	width: 10vw;
}

#TWKeyboard #TWKeyboardSymbols .button_numberleft {
	width: 10vw;
	margin-left: 0;
}

#TWKeyboard .button_numberright {
	width: 10vw;
}

#TWKeyboard .button_space {
	width: 40vw;
}

#TWKeyboard .button_symbolsright {
	width: 10vw;
}

/* ICONS */
#TWKeyboard .key_arrow_right:before {
	font-family: 'Touchway';
	content: '\0028';
}

#TWKeyboard .key_smallletter:before {
	font-family: 'Touchway';
	content: '\0021';
}

#TWKeyboard .key_capitalletterleft:before {
	font-family: 'Touchway';
	content: '\0023';
}

#TWKeyboard .key_arrow_left:before {
	font-family: 'Touchway';
	content: '\0026';
}

#TWKeyboard .key.number.key_capitalletterleft:before,
#TWKeyboard .key.symbols.key_capitalletterleft:before {
	display: none;
}

#TWKeyboard .key.key_enter:before {
	font-family: 'Touchway';
	content: '\0024';
}

#TWKeyboard .key.key_del:before {
	font-family: 'Touchway';
	content: '\0022';
}

#TWKeyboard .key_arrow_right:before,
#TWKeyboard .key_smallletter:before,
#TWKeyboard .key_capitalletterleft:before,
#TWKeyboard .key_arrow_left:before,
#TWKeyboard .key.key_enter:before,
#TWKeyboard .key.key_del:before {
	font-size: 7vh;
}

/* CURSOR */
#TWCursor {
	animation: blinker 1s linear infinite;
	-webkit-animation: blinker 1s linear infinite;
	transform: translateY(0%) translateX(-1px) scale(0.5);
	-ms-transform: translateY(0%) translateX(-1px) scale(0.5);

	transform-origin: center center;
	position: absolute;
	user-select: none;
	z-index: 99999;
}

#TWCursor.hidden {
	display: none;
}

@keyframes blinker {
	50% {
		opacity: 0;
	}
}

@-moz-keyframes blinker {
	50% {
		opacity: 0;
	}
}

/* ==========================================================================
ANIMATIONS
========================================================================== */
@-webkit-keyframes sk-circleFadeDelay {

	0%,
	39%,
	100% {
		opacity: 0;
	}

	40% {
		opacity: 1;
	}
}

@keyframes sk-circleFadeDelay {

	0%,
	39%,
	100% {
		opacity: 0;
	}

	40% {
		opacity: 1;
	}
}

@keyframes fadeInLoader {
	to {
		visibility: visible;
	}
}

@keyframes footerIn {
	0% {
		opacity: 0;
		display: none;
	}

	100% {
		opacity: 1;
		display: block;
	}
}

@keyframes headerIn {
	0% {
		transform: translate3d(0, -10%, 0);
		-ms-transform: translate3d(0, -10%, 0);
		opacity: 0;
	}

	100% {
		transform: none;
		-ms-transform: none;
		opacity: 1;
	}
}

@keyframes headerOut {
	0% {
		transform: none;
		-ms-transform: none;
		display: block;
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate3d(0, -10%, 0);
		-ms-transform: translate3d(0, -10%, 0);
		display: none;
	}
}

@keyframes footerOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		display: none;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		/* transform: translate3d(20%, 0, 0); */
		display: none;
	}

	100% {
		opacity: 1;
		/* transform: none; */
		display: block;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
		/* transform: none; */
		display: block;
	}

	100% {
		opacity: 0;
		/* transform: translate3d(0, -10%, 0); */
		display: none;
	}
}

@-moz-keyframes rotate {
	0% {
		-moz-transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		-moz-transform: translate(-50%, -50%) rotate(360deg);
	}
}

@-webkit-keyframes rotate {
	0% {
		-webkit-transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		-webkit-transform: translate(-50%, -50%) rotate(360deg);
	}
}

@keyframes rotate {
	0% {
		-webkit-transform: translate(-50%, -50%) rotate(0deg);
		transform: translate(-50%, -50%) rotate(0deg);
		-ms-transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		-webkit-transform: translate(-50%, -50%) rotate(360deg);
		transform: translate(-50%, -50%) rotate(360deg);
		-ms-transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* ==========================================================================
ALERTIFY
========================================================================== */
.alertify,
.alertify-show,
.alertify-log {
	-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	/* easeOutBack */
}

.alertify-hide {
	-webkit-transition: all 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	-moz-transition: all 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	-ms-transition: all 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	-o-transition: all 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	transition: all 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	/* easeInBack */
}

.alertify-log-hide {
	-webkit-transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	-moz-transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	-ms-transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	-o-transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	/* easeInBack */
}

.alertify-cover {
	position: fixed;
	z-index: 99999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: white;
	filter: alpha(opacity=0);
	opacity: 0;
}

.alertify-cover-hidden {
	display: none;
}

.alertify {
	position: fixed;
	z-index: 99999;
	top: 50px;
	left: 50%;
	margin-left: -275px;
	opacity: 1;
}

.alertify-hidden {
	-webkit-transform: translate(0, -150px);
	-moz-transform: translate(0, -150px);
	-ms-transform: translate(0, -150px);
	-o-transform: translate(0, -150px);
	transform: translate(0, -150px);
	opacity: 0;
	display: none;
}

/* overwrite display: none; for everything except IE6-8 */
.alertify-logs {
	position: fixed;
	z-index: 9999999999999;
	bottom: 2vh;
	right: 2vh;
	padding: 2vh;
}

@media screen and (orientation: portrait) {
	.alertify-logs {
		bottom: initial;
		top: 2vh;
	}
}

.alertify-logs-hidden {
	display: none;
}

.alertify-log {
	display: block;
	margin-top: 10px;
	position: relative;
	right: -300px;
	opacity: 0;
}

.alertify-log-show {
	right: 0;
	opacity: 1;
}

.alertify-log-hide {
	-webkit-transform: translate(300px, 0);
	-moz-transform: translate(300px, 0);
	-ms-transform: translate(300px, 0);
	-o-transform: translate(300px, 0);
	transform: translate(300px, 0);
	opacity: 0;
}

.alertify-dialog {
	padding: 25px;
}

.alertify-resetFocus {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;

	padding: 0;
	position: absolute;
	width: 1px;
}

.alertify-inner {
	text-align: center;
}

.alertify-text {
	margin-bottom: 15px;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	font-size: 100%;
}

.alertify-button,
.alertify-button:hover,
.alertify-button:active,
.alertify-button:visited {
	background: none;
	text-decoration: none;
	border: none;
	/* line-height and font-size for input button */
	line-height: 1.5;
	font-size: 100%;
	display: inline-block;
	cursor: pointer;
	margin-left: 5px;
}

@media only screen and (max-width: 680px) {

	.alertify,
	.alertify-logs {
		width: 90%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.alertify {
		left: 5%;
		margin: 0;
	}
}

/* *
 * Default Look and Feel */
.alertify,
.alertify-log {
	font-family: sans-serif;
}

.alertify {
	background: #fff;
	border: 10px solid #333;
	/* browsers that don't support rgba */
	border: 10px solid rgba(0, 0, 0, 0.7);
	border-radius: 100%;
	-webkit-background-clip: padding;
	/* Safari 4? Chrome 6? */
	-moz-background-clip: padding;
	/* Firefox 3.6 */
	background-clip: padding-box;
	/* Firefox 4, Safari 5, Opera 10, IE 9 */
}

.alertify-text {
	border: 1px solid #002948;
	padding: 1vh;
	border-radius: 100%;
}

.alertify-button {
	border-radius: 4px;
	color: #fff;
	font-weight: bold;
	padding: 6px 15px;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
	background-image: -webkit-linear-gradient(top,
		rgba(255, 255, 255, 0.3),
		rgba(255, 255, 255, 0));
	background-image: -moz-linear-gradient(top,
		rgba(255, 255, 255, 0.3),
		rgba(255, 255, 255, 0));
	background-image: -ms-linear-gradient(top,
		rgba(255, 255, 255, 0.3),
		rgba(255, 255, 255, 0));
	background-image: -o-linear-gradient(top,
		rgba(255, 255, 255, 0.3),
		rgba(255, 255, 255, 0));
	background-image: linear-gradient(top,
		rgba(255, 255, 255, 0.3),
		rgba(255, 255, 255, 0));
}

.alertify-button:hover,
.alertify-button:focus {
	outline: none;
	background-image: -webkit-linear-gradient(top,
		rgba(0, 0, 0, 0.1),
		rgba(0, 0, 0, 0));
	background-image: -moz-linear-gradient(top,
		rgba(0, 0, 0, 0.1),
		rgba(0, 0, 0, 0));
	background-image: -ms-linear-gradient(top,
		rgba(0, 0, 0, 0.1),
		rgba(0, 0, 0, 0));
	background-image: -o-linear-gradient(top,
		rgba(0, 0, 0, 0.1),
		rgba(0, 0, 0, 0));
	background-image: linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}

.alertify-button:focus {
	box-shadow: 0 0 15px #2b72d5;
}

.alertify-button:active {
	position: relative;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.alertify-button-cancel,
.alertify-button-cancel:hover,
.alertify-button-cancel:focus {
	background-color: #fe1a00;
	border: 1px solid #d83526;
}

.alertify-button-ok,
.alertify-button-ok:hover,
.alertify-button-ok:focus {
	background-color: #5cb811;
	border: 1px solid #3b7808;
}

.alertify-log {
	background: #e2001a;
	padding: 2vh;
	border-radius: 0;
	color: var(--ColorGrey7);
	font-family: 'TouchwayLight', arial, sans-serif;
	font-size: 3vh;
}

.alertify-log-error {
	background-color: #e2001a;
}

.alertify-log-success {
	background-color: #87ab23;
}

@font-face {
	font-family: 'TouchwayBold';
	src: url('../fonts/Bold.eot');
	src: url('../fonts/Bold.ttf') format('truetype'),
		url('../fonts/Bold.eot#iefix') format('embedded-opentype'),
		url('../fonts/Bold.svg') format('svg'),
		url('../fonts/Bold.woff') format('woff');
	font-weight: '300';
	font-style: 'normal';
}

@font-face {
	font-family: 'TouchwayRegular';
	src: url('../fonts/Regular.eot');
	src: url('../fonts/Regular.ttf') format('truetype'),
		url('../fonts/Regular.eot#iefix') format('embedded-opentype'),
		url('../fonts/Regular.svg') format('svg'),
		url('../fonts/Regular.woff') format('woff');
	font-weight: '300';
	font-style: 'normal';
}

@font-face {
	font-family: 'TouchwayLight';
	src: url('../fonts/Regular.eot');
	src: url('../fonts/Regular.ttf') format('truetype'),
		url('../fonts/Regular.eot#iefix') format('embedded-opentype'),
		url('../fonts/Regular.svg') format('svg'),
		url('../fonts/Regular.woff') format('woff');
	font-weight: '300';
	font-style: 'normal';
}

:root {
	/* Dark */
	--ColorGrey0: #002948;
	--ColorGrey1: #000000;
	--ColorGrey2: #000000;
	--ColorGrey3: #002948;
	/* Light */
	--ColorGrey4: #c1c5c8;
	--ColorGrey5: #d2d5d7;
	--ColorGrey6: #eeeeee;
	--ColorGrey7: var(--ColorGrey7);
	--ColorDeco1: #002948;
	--ColorDeco2: #002948;
	--ColorDeco3: #002948;
	--ColorDeco4: #dddddd;
	--ColorDeco5: #002948;
	--ColorDeco6: #002948;
	--ColorDeco7: #dc8f00;
	--ColorFalse: #e2001a;
	--ColorTrue: #87ab23;
	--ColorTransparent: transparent;
	--Font1: 'TouchwayLight', arial, sans-serif;
	--Font2: 'TouchwayBold', arial, sans-serif;
	--Font3: 'TouchwayRegular', arial, sans-serif;
	--Font4: 'TouchwayRegular', arial, sans-serif;
	--Font5: 'TouchwayRegular', arial, sans-serif;
	--Font6: 'TouchwayRegular', 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 #002948;
	--Line2: 0px solid #c1c5c8;
	--Line3: 1px solid #c1c5c8;
	--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: 24vh;
	--HeightFooter: 15vh;
	--SizeLoader: 50px;
	--KeyboardOffset: calc(-1 * 24vh);
	--PageInnerWidth: 90vw;
	--KeyboardWidth: 80%;
	--ButtonWidth1: 10vh;
	--ButtonHeight1: 10vh;
	--BoxShadow1: 0px 10px 30px rgba(0, 0, 0, 0.5);
	--TransitionSpeed1: 0.3s;
	--IconArrowLeft: '0';
	--IconArrowRight: '1';
}

header {
	position: relative;
	padding: 0 4vh;
	max-width: 90vw;
	margin: auto;
}

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

footer {
	max-width: 90vw;
	margin: auto;
	border-top: none;
	padding: 3vh 4vh;
}

.logo {
	width: 20%;
	height: 50%;
}

header .logo img {
	object-position: top right;
}

header .title {
	align-self: flex-end;
	background-color: #002948;
	color: var(--ColorGrey7);
	position: absolute;
	bottom: 0;
	width: 90vw;
	padding: 2vh 4vh;
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
}

main {
	padding: 0;
	border-bottom: 1px solid #002948;
}

main[type='stage']>section {
	padding: 4vh;
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
}

main[type='box-overflow']>section {
	padding: 4vh;
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
}

main[type='box']>section {
	padding: 4vh;
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
}

section {
	background-color: var(--ColorGrey7) !important;
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
}

main>section {
	padding: 0;
}

[template='FinalInstruction01'] section> :first-child {
	padding: 0;
}

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

header time {
	color: #002948;
}

h1 {
	font-size: 4vh;
	color: var(--ColorGrey7);
}

h3 {
	color: #000000;
}

p,
small,
strong {
	color: #000000;
	font-size: 4vh;
}

.active,
li.active * {
	color: #e2001a;
}

.card-envelope {
	padding: 3px;
}

#TWKeyboard {
	background-color: #002948;
}

#TWKeyboardHeader div {
	color: #002948;
	background-color: #002948;
}

.list>li {
	padding: 2vh 4vh;
}

.list>li:first-child {
	padding-top: 0;
}

.list.l1>li>* {
	margin-right: 5vh;
}

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

header .title {
	align-self: center;
}

.logo {
	align-self: baseline;
}

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

[template='VisitorTypeSelection01'] main[type='stage']>section {
	background-color: transparent;
}

input[type='text'],
input[type='email'],
input[type='search'],
input[type='password'],
input[type='tel'],
input[type='url'],
input[type='date'],
textarea {
	line-height: 6vh;
}

.card .idarea .logo {
	box-sizing: border-box;
	width: 13vw;
	height: 8vw;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	right: 1vw;
	top: 0;
	background-position: 0 0;
}

article[controller='LoginCtrl']>main {
	height: 100%;
}

article[controller='LoginCtrl']>main>section {
	padding: 4vh;
}

main .list li {
	padding-left: 0;
	padding-right: 0;
}

language-selector a {
	color: var(--ColorGrey7);
	background-color: #c1c5c8;
	display: block;
	height: 100%;
	padding: 1vh 2vh;

	margin-right: 2vh;
}

language-selector a.selected {
	color: var(--ColorGrey7);
	background-color: #002948;
}

language-selector .list li {
	padding: 0;
}

#Reload {
	bottom: 4vh;
}

/* ----------------------------------------------
 * CSS TEMPLATE PRINTING
 * ---------------------------------------------- */
@page {
	size: 85mm 55mm;
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

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

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

print .card-structure {
	height: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border: none;
}

print .logo {
	width: auto;
	height: auto;
	max-width: 38mm;
	max-height: 20mm;
	float: right;
	padding: 0;
	margin: 0;
}

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

print .card-structure .card-body {
	height: auto;
	vertical-align: middle;
	text-align: left;
}

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

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

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

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

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: 'TouchwayRegular', arial, sans-serif;
	line-height: 14pt;
}

print p.visitor-name {
	font-size: 18pt;
	line-height: 20pt;
	font-family: 'TouchwayRegular', arial, sans-serif;
}

print p.visitor-company {
	font-size: 12pt;
	line-height: 14pt;
	font-family: 'TouchwayRegular', arial, sans-serif;
}