/* ----------------------------------------------
* Variables
* ----------------------------------------------
*/

:root {
	/* Dark */
	--ColorGrey0: #25313f;
	--ColorGrey1: #25313f;
	--ColorGrey2: #2b3034;
	--ColorGrey3: #3b4146;
	/* Light */
	--ColorGrey4: #c1c5c8;
	--ColorGrey5: #d2d5d7;
	--ColorGrey6: #ebeef0;
	--ColorGrey7: #ffffff;
	--ColorDeco1: #dc8f00;
	--ColorDeco2: #7e3555;
	--ColorDeco3: #3d6398;
	--ColorDeco4: #ffd483;
	--ColorDeco5: #dc8f00;
	--ColorDeco6: #dc8f00;
	--ColorDeco7: #dc8f00;
	--ColorFalse: #c03002;
	--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: 1vh;
	--Radius3: 1.5vh;
	--Radius4: 0;
	--Radius5: 0;
	--Line1: 1px solid var(--ColorGrey4);
	--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: 20vh;
	--HeightFooter: 20vh;
	--SizeLoader: 100px;
	--KeyboardOffset: -200px;
	--PageInnerWidth: 80vw;
	--KeyboardWidth: 80%;
	--ButtonWidth1: 12vh;
	--ButtonHeight1: 12vh;
	--BoxShadow1: 6px 6px 10px 0 rgba(0, 0, 0, 0.2);
	--TransitionSpeed1: 0.3s;
	--IconArrowLeft: "0";
	--IconArrowRight: "1";
	--BadgeWidth: calc(85mm * 1.5);
	--BadgeHeight: calc(55mm * 1.5);
}

@media screen and (orientation: portrait) {
	:root {
		--FontSize1: 1vw;
		--FontSize2: 2vw;
		--FontSize3: 3vw;
		--FontSize4: 4vw;
		--FontSize5: 5vw;
		--FontSize6: 6vw;
		--FontSize7: 7vw;
		--FontSize8: 8vw;
		--FontSize9: 9vw;
		--Radius0: 0;
		--Radius1: 100%;
		--Radius2: 1vw;
		--Radius3: 1.5vw;
		--Radius4: 0;
		--Radius5: 0;
		--Space05: 0.5vw;
		--Space1: 1vw;
		--Space2: 2vw;
		--Space3: 3vw;
		--Space4: 4vw;
		--Space5: 5vw;
		--Space6: 6vw;
		--Space7: 7vw;
		--Space8: 8vw;
		--Space10: 10vw;
		--Space15: 15vw;
		--HeightHeader: 20vw;
		--HeightFooter: 20vw;
		--ButtonWidth1: 12vw;
		--ButtonHeight1: 12vw;
	}
}

/* ----------------------------------------------
 * 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: var(--PageWidth);
	height: var(--PageHeight);
	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);
	-ms-transform: scale(1.5);
	transform-origin: top right;
	-ms-transform-origin: top right;
	border: 3px solid var(--ColorGrey3);
}

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;
	-webkit-transition: all 300ms ease;

	transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	width: var(--PageWidth) !important;
	height: var(--PageHeight) !important;
	will-change: transform;
}

body.open article {
	transform: translate3d(0, var(--KeyboardOffset), 0);
	-ms-transform: translate3d(0, var(--KeyboardOffset), 0);
}

header {
	height: var(--HeightHeader);
	padding: var(--Space3) var(--Space10);
	transition: transform 1s ease, opacity 0.6s ease;
	position: relative;
}

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

header time {
	font-size: var(--FontSize6);
	font-family: var(--Font1);
}

footer {
	height: var(--HeightFooter);
	background-color: var(--ColorGrey7);
	padding: var(--Space3) var(--Space10);
	border-top: var(--Line1);
	opacity: 0;
}

footer.ghost {
	background-color: var(--ColorTransparent);
	border-top: none;
}

main {
	padding: var(--Space2) 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;
}*/

div.offline {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background-color: red;
	line-height: 100px;
	height: 100px;
	color: var(--ColorGrey7);
	width: 100%;
	text-align: center;
	transform: translateX(-50%);
}

div.offline>* {
	color: #FFFFFF;
}

div.offline[offline="true"] {
	display: block;
}

div.offline[offline="true"] p {
	color: var(--ColorGrey7);
}

main>section {
	padding: var(--Space5);
}

main>section {
	height: 100%;
	max-width: var(--PageInnerWidth);
	margin: auto;
}

main[type="box"]>section {
	background-color: var(--ColorGrey6);
	box-shadow: var(--BoxShadow1);
	overflow: auto;
	height: 100%;
}

main[type="stage"]>section {
	background-color: var(--ColorTransparent);
	overflow: auto;
	height: 100%;
	box-shadow: none;
	padding: 0;
}

main[type="flow"] {
	padding: var(--Space5) var(--Space5) 0 var(--Space5);
}

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

main[type="flow-box"]>section {
	background-color: var(--ColorGrey6);
	box-shadow: var(--BoxShadow1);
	height: auto;
}

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

section-header {
	padding-bottom: var(--Space2);
	border-bottom: var(--Line1);
}

section-body {
	padding: var(--Space2) 0;
	overflow: hidden;
}

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

search {
	max-width: 33%;
}

search>input {
	margin-left: var(--Space2);
}

#Reload {
	display: inline-block;
	z-index: 10;
	font-size: var(--FontSize6);
	position: absolute;
	bottom: calc(var(--HeightHeader) + var(--Space2));
	left: var(--Space2);
	color: var(--ColorGrey5);
	transition: all var(--TransitionSpeed1) ease;
}

body.open #Reload {
	bottom: calc(var(--HeightHeader) + var(--HeightFooter) + var(--Space2));
}

/* ----------------------------------------------
* 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 {
	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: var(--Space4);
	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: var(--Font3);
	font-size: var(--FontSize6);
	color: var(--ColorGrey0);
}

h2 {
	font-family: var(--Font1);
	font-size: var(--FontSize4);
}

h3 {
	font-family: var(--Font1);
	font-size: var(--FontSize3);
	text-align: left;
}

h3.caption {
	margin-bottom: var(--Space2);
}

h4 {
	font-family: var(--Font1);
	font-size: var(--FontSize2);
}

h5 {
	font-family: var(--Font1);
	font-size: var(--FontSize1);
}

a {
	font-family: var(--Font2);
	font-size: var(--FontSize3);
	text-decoration: none;
	color: var(--ColorDeco1);
	cursor: pointer;
}

a.inverted {
	color: var(--ColorGrey0);
}

a.inverted.selected {
	color: var(--ColorDeco1);
}

a:hover {
	color: var(--ColorDeco2);
}

p,
small,
strong {
	font-family: var(--Font1);
	font-size: var(--FontSize3);
	color: var(--ColorGrey0);
}

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

p.error,
p[error] {
	color: var(--ColorFalse);
}

p.small,
small {
	font-size: var(--FontSize2);
}


label,
.label {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	font-family: var(--Font1);
	font-size: var(--FontSize2);
	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: var(--ColorDeco1);
}

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

.hidden {
	display: none !important;
}

.relative {
	position: relative !important;
}

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

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

icon.big,
.icon.big,
i.big {
	font-size: var(--FontSize6);
}

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: var(--IconArrowRight);
	left: 5px;
}

.tw-arrow-left:before {
	content: var(--IconArrowLeft);
}

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

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

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

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

button,
.button {
	border: var(--Line2);
	padding: var(--Space2) var(--Space3);
	font-family: var(--Font1);
	font-size: var(--FontSize3);
	border-radius: var(--Radius2);
	background-color: var(--ColorDeco1);
	color: var(--ColorGrey7);
	cursor: pointer;
	transition: all 150ms ease;
	width: 100%;
	white-space: nowrap;
}

button.inverted,
.button.inverted {
	background-color: var(--ColorGrey0);
}

button.selected,
.button.selected {
	background-color: var(--ColorDeco1);
}

button:active,
.button:active {
	background-color: var(--ColorGrey0);
}

button:disabled,
.button:disabled {
	background-color: var(--ColorGrey0);
}

button.controls,
.button.controls {
	height: var(--ButtonHeight1);
	line-height: var(--ButtonHeight1);
	width: var(--ButtonWidth1);
	font-size: var(--FontSize6);
	padding: 0;
	position: relative;
	margin-left: var(--Space2);
}

button.controls i,
.button.controls i {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: var(--FontSize7);
	transform: translate3d(-50%, -50%, 0);
	-ms-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: var(--Font3);
	font-size: var(--FontSize3);
	border: var(--Line1);
	border-radius: var(--Radius2);
	line-height: var(--Space7);
	padding: 0 var(--Space3);
	outline: none;
}

input.fixed,
button.fixed,
.button.fixed {
	height: var(--Space7);
	padding: 0 var(--Space3);
	width: auto;
}

datepicker {
	position: relative;
	display: block;
}

datepicker i {
	position: absolute;
	right: var(--Space2);
	top: 50%;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	font-size: var(--FontSize4);
	color: var(--ColorGrey2);
	cursor: pointer;
}

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

input[type="checkbox"] {
	-webkit-appearance: none;
	background-color: var(--ColorGrey7);
	border: var(--Line1);
	padding: var(--Space2);
	border-radius: var(--Radius2);
	display: inline-block;
	position: relative;
	min-width: var(--Space6);
	max-width: var(--Space6);
	width: var(--Space6);
	height: var(--Space6);
	margin-right: var(--Space2);
	-webkit-touch-callout: none;
}

input[type="checkbox"]:checked {
	background-color: var(--ColorDeco1);
	border-color: var(--ColorDeco1);
}

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

input[type="checkbox"]+* {
	line-height: var(--FontSize4);
	white-space: nowrap;
	align-self: center;
}

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

input.ng-invalid.ng-touched,
input.error {
	border-color: var(--ColorFalse);
}

input.error {
	color: var(--ColorFalse);
}

form>.cols {
	margin-bottom: var(--Space2);
}

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

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

.list>li {
	padding: var(--Space2);
}

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

.list i {
	margin-right: var(--Space1);
}

.list.small>li {
	padding: var(--Space05);
}

.list.index p {
	font-weight: bold;
	font-size: var(--FontSize3);
}

.list button {
	font-size: var(--FontSize3);
	width: auto;
}

/* -- l1 -- */

.list.l1>li>* {
	margin-right: var(--Space3);
}

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

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

.list.l1>li {
	border-bottom: var(--Line1);
}

.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: var(--Line1);
}

.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: var(--Space3);
}

/* -- l3 -- */

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

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

.list.l3>li {
	border-bottom: var(--Line1);
}

/* -- Language list -- */

language-selector a {
	color: var(--ColorGrey4);
}

language-selector a.selected {
	color: var(--ColorGrey3);
}

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

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

.grid>li {
	padding: var(--Space1);
	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: var(--Space7) var(--Space5);
	background-color: var(--ColorGrey7);
	text-align: center;
	box-shadow: var(--BoxShadow1);
	display: block;
	height: 100%;
}

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

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

signature {
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
	background: var(--ColorGrey6);
}

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

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: var(--Line1);
}

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);
	-ms-transform: translateY(10px) scale(0.98);
}

.document.visible {
	opacity: 1;
	-ms-transform: translateY(0) scale(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 #ffffff7a;
	border-radius: 100%;
	transform: translate(-50%, -50%);
	-ms-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);
	-ms-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);
	-ms-transform: rotate(10deg);
	padding: 20px;
	top: var(--Space2);
	right: var(--Space1);
	/* background: var(--ColorGrey3); */
}

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

qr {
	max-width: 80%;
	height: auto;
	border-radius: var(--Space1);
	padding: var(--Space3);
	display: inline-block;
	background-color: var(--ColorGrey7);
	margin-right: var(--Space4);
}

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

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

.line {
	display: block;
	height: 0px;
	border-bottom: var(--Line1);
	margin: var(--Space4) 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: var(--Space2);
	left: var(--Space2);
}

.card .idarea {
	box-sizing: border-box;
	padding: var(--Space1);
	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: var(--FontSize3);
	position: absolute;
	bottom: 3vw;
	padding: 0;
	right: var(--Space2);
}

.card .idarea .date {
	box-sizing: border-box;
	margin: 0;
	font-size: var(--FontSize2);
	display: block;
	position: absolute;
	bottom: 1vw;
	right: var(--Space2);
	white-space: nowrap;
}

.card .infoarea {
	box-sizing: border-box;
	padding: var(--Space1) var(--Space2);
	background: var(--ColorGrey4);
	height: 8vw;
}

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

.card .infoarea>table td>* {
	padding-right: var(--Space1);
}

.card .infoarea strong,
.card .infoarea p {
	font-size: var(--FontSize2);
}

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


@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: var(--Space3);
}

[template="VisitorCodeEntry01"] .check-in p {
	white-space: nowrap;
	margin-right: var(--Space1);
}

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

[template="VisitorCodeEntry01"] .check-in button {
	margin-left: var(--Space1);
}


/* -- VisitorTypeSelection01 -- */

[template="VisitorTypeSelection01"] section button {
	margin: var(--Space1) auto;
	max-width: 60%;
	font-size: var(--FontSize5);
	text-transform: uppercase;
	text-align: left;
	line-height: calc(33% - var(--Space4));
}

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

/* -- VisitorDataEntryForm01 -- */

[template="VisitorDataEntryForm01"] section .cols .thin {
	flex-basis: calc(var(--Space10) * 4);
}

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

[template="VisitorDataEntryForm01"] section .cols>.flex.cols>.flex:first-child {
	margin-right: var(--Space2);
}

[template="VisitorDataEntryForm01"] .suggestions {
	position: absolute;
	top: calc(100% - 1px);
	background: white;
	width: 100%;
	z-index: 5;
	border: var(--Line1);
	padding: var(--Space1) var(--Space2);
	max-height: 15vh;
	overflow: auto;
}

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

/* -- DeclarationSignature01 -- */

[template="DeclarationSignature01"] section {
	padding: var(--Space2);
}

@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%);
	-ms-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
}

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

[template="CardPrintProcess01"] .printer-warning>p {
	margin-bottom: var(--Space5);
	text-align: center;
}

/* -- ContactSelectionList02 -- */

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

[template="ContactSelectionList02"] section.rows :first-child>.rows p {
	margin-right: var(--Space2);
}

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

/* -- FinalInstruction01 -- */

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

[template="FinalInstruction01"] section> :first-child {
	padding: var(--Space5);
	position: relative;
}

[template="FinalInstruction01"] 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: var(--Space2);
	}
}

[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: var(--FontSize5);
	top: 60%;
	left: 36%;
	z-index: 1;
	transform: rotate(-10deg);
	-ms-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%);
		-ms-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: var(--FontSize2);
	background-color: var(--ColorGrey0);
	margin-right: 0;
}

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

/* -- VisitorPictureTake01 -- */

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

[template="VisitorPictureTake01"] section>.information {
	padding: var(--Space5);
}

/* -- 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: var(--Space2);
}

[template="PermitForm01"] block {
	margin-bottom: var(--Space2);
	border-bottom: var(--Line1);
	display: block;
	padding: var(--Space4) 0;
}

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

[template="PermitForm01"] .other-activities {
	margin-top: var(--Space2);
}

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

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

.picker {
	font-size: var(--FontSize2);
	font-family: var(--Font3);
	text-align: left;
	line-height: 1.2;
	color: var(--ColorGrey0);
	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: var(--ColorGrey3);
}

/** * 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: var(--Line1);
	border-top-width: 0;
	border-bottom-width: 0;
	border-radius: 0 0 var(--Radius3) var(--Radius3);
	box-sizing: border-box;
	min-width: 176px;
	max-width: 466px;
	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);
	-ms-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: 10px 20px 20px 20px;
}

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

.picker__header {
	text-align: center;
	position: relative;
	margin-top: 0.75em;
}

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

.picker__month,
.picker__year {
	font-size: var(--FontSize2);
	display: inline-block;
	margin-left: 0.25em;
	margin-right: 0.25em;
}

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

.picker__select--month,
.picker__select--year {
	border: var(--Line1);
	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: var(--ColorGrey3);
}

/** * 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: var(--FontSize1);
}

@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 var(--ColorGrey0);
	width: 0;
	height: 0;
	display: block;
	margin: 0 auto;
}

.picker__nav--next:before {
	border-right: 0;
	border-left: 0.75em solid var(--ColorGrey0);
}

.picker__nav--prev:hover,
.picker__nav--next:hover {
	cursor: pointer;
	color: var(--ColorGrey0);
	background: var(--ColorDeco4);
}

.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
	cursor: default;
	background: none;
	border-right-color: var(--ColorGrey3);
	border-left-color: var(--ColorGrey3);
}

/** * 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%;
	font-size: var(--FontSize1);
	padding-bottom: 0.25em;
	color: var(--ColorGrey4);
	/* 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 var(--ColorGrey3);
	border-left: 0.5em solid transparent;
}

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

.picker__day--outfocus {
	color: var(--ColorGrey6);
}

.picker__day--infocus:hover,
.picker__day--outfocus:hover {
	cursor: pointer;
	color: var(--ColorGrey0);
	background: var(--ColorDeco4);
}

.picker__day--highlighted {
	border-color: var(--ColorDeco1);
}

.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
	cursor: pointer;
	color: var(--ColorGrey0);
	background: var(--ColorDeco4);
}

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

.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
	background: var(--ColorGrey6);
	border-color: var(--ColorGrey6);
	color: var(--ColorGrey6);
	cursor: default;
}

.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
	background: var(--ColorGrey6);
}

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

.picker__footer {
	text-align: center;
}

.picker__button--today,
.picker__button--clear,
.picker__button--close {
	font-size: var(--FontSize1);
	display: inline-block;
	line-height: var(--Space1);
	vertical-align: bottom;
	background: var(--ColorDeco1);
	color: var(--ColorGrey7);
	border: none;
	cursor: pointer;
	margin: 0 1px;
	width: auto;
	margin-right: 1px;
	white-space: nowrap;
	transition: opacity 150ms ease;
	padding: var(--Space2);
}

.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 var(--ColorDeco2);
}

.picker__button--today[disabled],
.picker__button--today[disabled]:hover {
	background: var(--ColorGrey6);
	border-color: var(--ColorGrey6);
	color: var(--ColorGrey6);
	cursor: default;
}

.picker__button--today[disabled]:before {
	border-top-color: var(--ColorGrey6);
}

/* ----------------------------------------------
 * 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: var(--ColorTransparent);
	transition: all 0.3s ease;
	transform: translate3d(0, -2%, 0);
	-ms-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);
	-ms-transform: translate3d(0, 0, 0);
}

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

loader .spinner.sk-fading-circle {
	display: block;
	margin: auto;
	width: var(--SizeLoader);
	height: var(--SizeLoader);
	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: var(--ColorGrey1);
	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: var(--Space5);
	height: 100%;
	background-color: #0098ca;
	z-index: 9999999999999999;
	transition: all 0.3s ease;
	box-shadow: var(--BoxShadow1);
}

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

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

debug a.css {
	font-size: var(--FontSize1);
}

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(--ColorGrey1);
	padding: var(--Space1);
	width: 100%;
	height: calc(var(--HeightHeader) + var(--HeightFooter));
	display: block;
	padding-left: var(--Space2);
	display: block;
	position: absolute;
	bottom: calc(-1 * (var(--Space8) + var(--HeightHeader) + var(--HeightFooter)));
	left: 0;
	transition: bottom 0.5s ease 0s;
	box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.25);
	border: 1px solid black;
}

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

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

#TWKeyboard.open {
	bottom: 0;
}

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

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

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

.closex {
	font-family: var(--FontIcons);
	font-size: var(--FontSize6);
	color: var(--ColorGrey7);
}

#TWKeyboard .button {
	width: 5vw;
	text-align: center;
	height: calc((var(--HeightHeader) + var(--HeightFooter)) / 5.5);
	line-height: calc((var(--HeightHeader) + var(--HeightFooter)) / 5.5);
	position: relative;
	margin-right: 0.5vw;
	margin-left: 0.5vw;
	cursor: pointer;
	padding: 0;
	font-size: var(--FontSize4);
	box-shadow: 0px 1px 3px var(--ColorGrey0);
	border-radius: var(--Radius2);
	background-color: var(--ColorGrey7);
	background: linear-gradient(to bottom, var(--ColorGrey7) 0%, var(--ColorGrey4) 100%);
	color: var(--ColorGrey0);
}

#TWKeyboard .button:active {
	background-color: var(--ColorGrey4);
	background: linear-gradient(to bottom, var(--ColorGrey4) 0%, var(--ColorGrey6) 100%);
}

#TWKeyboard .key {
	width: 100%;
	height: 100%;
	text-align: center;
	text-shadow: 0px 1px 1px var(--ColorGrey7);
	/* user-select: none;
	-ms-user-select: none; */
}

#TWKeyboard .key-row {
	padding: var(--Space05) 0;
}

#TWKeyboard .buttonDown {
	background: none;
	background-color: #c9cdd5;
	-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 var(--Space1) !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: var(--FontSize7);
}

/* CURSOR */

#TWCursor {
	animation: blinker 1s linear infinite;
	-webkit-animation: blinker 1s linear infinite;
	-moz-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;
	}
}

@-webkit-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);
	}

	100% {
		-webkit-transform: translate(-50%, -50%) rotate(360deg);
		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: var(--Space2);
	right: var(--Space2);
	padding: var(--Space2);
}

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

.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: var(--Radius1);
	-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: var(--Line1);
	padding: var(--Space1);
	border-radius: var(--Radius1);
}

.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: var(--ColorFalse);
	padding: var(--Space2);
	border-radius: var(--Radius2);
	color: var(--ColorGrey7);
	font-family: var(--Font1);
	font-size: var(--FontSize3);
}

.alertify-log-error {
	background-color: var(--ColorFalse);
}

.alertify-log-success {
	background-color: var(--ColorTrue);
}