@font-face{ 
	font-family: 'roboto-mono';
	src: url('/common/fonts/roboto-mono-v13-latin-regular.eot');
	src: url('/common/fonts/roboto-mono-v13-latin-regular.eot?#iefix') format('embedded-opentype'),
         url('/common/fonts/roboto-mono-v13-latin-regular.woff2') format('woff2'),
	     url('/common/fonts/roboto-mono-v13-latin-regular.woff') format('woff'),
	     url('/common/fonts/roboto-mono-v13-latin-regular.ttf') format('truetype'),
	     url('/common/fonts/roboto-mono-v13-latin-regular.svg#roboto-mono-v13-latin-regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	margin: 0;
	padding: 50px 0 0 0;
	background: url(../img/tw-blue-background.jpg) no-repeat top left;
	background-size: cover;
	background-attachment: fixed;
	font-family: "SourceSans3", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 140%;
	font-weight: normal;
	color: #222222;
	-webkit-text-size-adjust: 100%;
	}
	
button, input, select {
	font-family: "SourceSans3", Helvetica, Arial, sans-serif;
}

a, button { outline: none; border: 0; }

.wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	}
	
.content, .home .main .content {
	width: 100%;
	margin: 0 auto;
	padding: 20px 10px 70px;
	position: relative;
	box-sizing: border-box;
	}
	
.main .content { padding: 0 0 70px; }
.main.settings .content { padding: 10px 10px 80px; }
.details .main .content .row { margin-right: 0; margin-left: 0; }
	
.row {
	margin-right: -10px;
	margin-left: -10px;
	clear: both;
	}
	
.col {
	width: 100%;
	padding: 0 10px;
	float: left;
	position: relative;
	box-sizing: border-box;
	}
		
.content hr {
	height: 1px;
	clear: both;
	border: 0;
	margin: 0;
	background-color: transparent;
	}
	
.nobr, .nowrap { white-space: nowrap; }

	
/* Header bits */

.wrapper.header { background: rgba(0, 0, 0, 0.7); }

@media only screen and (max-width: 768px) { 
	body.shadow.home .wrapper.header a.logo {
		background: none;
	}
}

body.shadow div.title {
	background-color: red;
}

.home.shadow .wrapper.header:after {
	content: 'Shadowed User';
	color: white;
	font-weight: bold;	
	font-size: 24px;
	position: absolute;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 14px;
	height: 100%;
	top: 0px;
	left: 0px;
	background: red;
	pointer-events: none;
	user-select: none;
	box-sizing: border-box;
}

@media only screen and (min-width: 768px) { 
	body.shadow div.title {
		background-color: transparent;
	}

	body.shadow .wrapper.header:after {
		content: 'Shadowed User';
		color: white;
		font-weight: bold;	
		font-size: 24px;
		position: absolute;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 14px;
		height: 100%;
		top: 0px;
		left: 0px;
		background: red;
		pointer-events: none;
		user-select: none;
		box-sizing: border-box;
	}
}

.home .wrapper.header, .login .wrapper.header { 
	position: fixed;
	top: 0;
	z-index: 10;
	}
	
.header .content { padding: 0; }
	
.home .header .content, .login .header .content { height: 50px; }
	
.logo {
	width: 260px;
	height: 65px;
	margin: 0;
	padding: 0;
	background: url(../img/taxiworld-payments-logo.png) no-repeat top left;
	background-size: 260px 65px;
	font-size: 0.01em;
	text-indent: -10000em;
	position: relative;
	top: -7px;
	left: -8px;
	display: none;
	}
	
.home .header .logo, .login .header .logo { display: block }
	
.nav {
    width: 100%;
	height: 70px;
	padding: 0;
	margin: 0;
	background-color: rgba(0, 0, 0, 0.7);
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10;
	}

.nav.restricted {
	height: 0px;
	}
	
.nav li {
	box-sizing: border-box;
    width: 16.66%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    float: left;
	}
	
.nav a {
	box-sizing: border-box;
    width: 100%;
    height: 70px;
    font-weight: normal;
    font-size: 0.75em;
    line-height: 100%;
    color: #fff;
    padding: 52px 0 0;
    margin: 0;
    text-decoration: none;
    display: block;
	vertical-align: middle;
	position: relative;
	transition: color 0.25s;
	-webkit-transition: color 0.25s;
	}
	
.nav li a svg {
	display: block;
	padding: 0;
	margin: 0;
	fill: #ffffff;
	position: absolute;
	left: 50%;
	}
	
.nav li.nav-home a svg 		{ width: 34px; height: auto; top: 11px; margin-left: -17px; }
.nav li.nav-support a svg 	{ width: 39px; height: auto; top: 10px; margin-left: -19px; }
.nav li.nav-jobs a svg 		{ width: 34px; height: auto; top: 10px; margin-left: -16px; }
.nav li.nav-payments a svg 	{ width: 50px; height: auto; top: 10px; margin-left: -30px; }
.nav li.nav-messages a svg 	{ width: 38px; height: auto; top: 11px; margin-left: -19px; }
.nav li.nav-guide a svg 	{ width: 46px; height: auto; top: 11px; margin-left: -23px; }
.nav li.nav-paylink a svg 	{ width: 42px; height: auto; top: 13px; margin-left: -21px; }
.nav li.nav-account a svg 	{ width: 34px; height: auto; top: 11px; margin-left: -17px; }
	
.nav li a:hover, .home .nav li.nav-home a, .paylink .nav li.nav-paylink a, .guide .nav li.nav-guide a, .jobs .nav li.nav-jobs a, .payments .nav li.nav-payments a, .messages .nav li.nav-messages a, .account .nav li.nav-account a { 
	color: #ffffff; 
	}
	
.nav li a:hover svg, .home .nav li.nav-home a svg, .paylink .nav li.nav-paylink a svg, .guide .nav li.nav-guide a svg, .jobs .nav li.nav-jobs a svg, .payments .nav li.nav-payments a svg, .messages .nav li.nav-messages a svg, .account .nav li.nav-account a svg { 
	fill: #ffffff; 
	}
	
.nav li.nav-account {
	width: 60px;
	position: fixed;
	top: 0;
	right: 0;
	}
	
.nav li.nav-account a {
	height: 50px;
	padding: 0;
	font-size: 0.1em;
	text-indent: -10000px;
	}
	
.nav li.nav-account a svg 	{ width: 30px; height: auto; top: 10px; margin-left: -15px; }
	
	
/* Login bits */

.login .main .content { padding: 10px 10px 70px; }

.form-login fieldset {
	width: 345px;
	height: 345px;
	padding: 100px 10px 0;
	background: transparent;
	margin: 34px auto;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: relative;
	border: 0;
	box-sizing: border-box;
	text-align: center;
	}
	
.form-login label {
	display: none
	}
	
.form-login .form-item {
	border: 0;
	padding: 3px 0;
	}
	
.form-login .text-input {
	padding: 16px 4% 9px;
	}
	
.login .actions {
	text-align: center;
	}
	
.login fieldset .actions {
	padding: 4px 0;
	}
	
.form-login .btn.btn-lg {
	font-size: 1.875em;
	padding: 14px 65px 10px;
	}
	
.login-more p { 
	font-size: 1.0em;
	line-height: 100%;
	margin: 1.0em 0;
	}
	
.login-more p a.link { 
	font-weight: 600;
	color: #222222;
	display: inline-block;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.5);
	transition: border-bottom-color 0.25s;
	-webkit-transition: border-bottom-color 0.25s;
	}
	
.login-more p a.link:hover { 
	color: #000000;
	border-bottom: 1px solid #000000;
	}
	
.login .actions .btn2 { padding: 9px 15px 8px; }

.form-login fieldset.reset {
	text-align: left;
}
	
/* Homepage bits */

.top-content {
	max-width: 740px;
	margin: 0 auto;
	padding-bottom: 10px;
	}

.dash-bubble {
	width: 220px;
	height: 220px;
	background: rgba(255, 255, 255, 0.65);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: relative;
	left: 50%;
	top: 0px;
	margin-left: -170px;
	}

.dash-bubble.current {
	width: 240px;
	height: 240px;
	margin-left: -70px;
	}

.dash-bubble h2 {
	font-weight: 600;
    font-size: 1.375em;
    line-height: 100%;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    padding: 40px 20px 15px;
	}

.dash-bubble.current h2 { padding-bottom: 6px }

.dash-bubble p.pay {
	font-weight: normal;
    font-size: 3.25em;
    line-height: 120%;
    text-align: center;
    margin: 0;
	}

.dash-bubble p.pay span {
	font-weight: 600;
    font-size: 0.615em;
	}

.dash-bubble p.pay-date {
	font-weight: 600;
    font-size: 1.375em;
    line-height: 110%;
    text-align: center;
    margin: 0;
	}
	
.home h2 {
	margin-top: 0;
	}
	
	
/* Menu styles */

.menu {
	margin: 0;
	padding: 0 0px;
	}
	
.home .menu { 
	padding: 0; 
	margin-bottom: 80px; 
	}

.menu li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	border-bottom: 1px solid rgba(35, 55, 103, 0.15);
	}

.menu li.menu-paylink {
	padding: 12px 18px;
	border-radius: 30px;
	background: rgba(203, 235, 251, 0.70);
	margin-bottom: 15px;
	border-bottom: 0;
	transition: background 0.25s;
	-webkit-transition: background 0.25s;
}

.menu li.menu-paylink:hover { background: rgba(203, 235, 251, 0.9); }

.home .menu li.menu-paylink a {
	padding-top: 0px;
	padding-bottom: 10px;
}

.home .menu li.menu-paylink a svg.arrow { top: 11px; right: 0; }

.home .menu li.menu-paylink strong {
	display: block;
	font-size: 0.5714286em;
	font-weight: normal;
    line-height: 120%;
    margin: 26px 0 0;
    text-decoration: none;
    color: #222;
    width: calc(100% + 120px);
	position: relative;
	left: -100px;
	}
	
.menu li:last-of-type { border-bottom: 0; }

.support .menu li {
	border-top: 1px solid rgba(35, 55, 103, 0.15);
	border-bottom: 1px solid rgba(35, 55, 103, 0.15);
	}

.menu li a, .guide .menu-video a {
	font-weight: 600;
	font-size: 1.375em;
	line-height: 120%;
	text-decoration: none;
	margin: 0;
	padding: 15px 0 13px 60px;
	color: #222222;
	display: block;
	position: relative;
	transition: color 0.25s;
	-webkit-transition: color 0.25s;
	}
	
.menu li a:hover, .menu li.settings-account a:hover {
	color: #000000;
	}

.menu li a::before { 
	width: 40px;
	height: 40px;
	background: -moz-linear-gradient(180deg, rgba(17,98,136,1.0) 0%, rgba(21,101,144,1.0) 40%, rgba(18,88,130,1.0) 95%);
	background: -webkit-linear-gradient(180deg, rgba(17,98,136,1.0) 0%, rgba(21,101,144,1.0) 40%, rgba(18,88,130,1.0) 95%);
	background: linear-gradient(180deg, rgba(17,98,136,1.0) 0%, rgba(21,101,144,1.0) 40%, rgba(18,88,130,1.0) 95%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#15658f",endColorstr="#115681",GradientType=1);
	content: '';
	position: absolute;
	top: 8px;
	left: 0px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	transition: background-color 0.25s;
	-webkit-transition: background-color 0.25s;
	}
	
.menu li a:hover::before, .menu li.settings-account a:hover::before, .messages .menu li a:hover::before {
	background: -moz-linear-gradient(180deg, rgba(0,80,125,1.0) 0%, rgba(1,87,133,1.0) 40%, rgba(0,72,119,1.0) 95%);
	background: -webkit-linear-gradient(180deg, rgba(0,80,125,1.0) 0%, rgba(1,87,133,1.0) 40%, rgba(0,72,119,1.0) 95%);
	background: linear-gradient(180deg, rgba(0,80,125,1.0) 0%, rgba(1,87,133,1.0) 40%, rgba(0,72,119,1.0) 95%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#15658f",endColorstr="#115681",GradientType=1);
	}
	
.home .menu li a, .support .menu li a, .guide .menu-video a {
	padding: 21px 30px 22px 100px;
	font-weight: bold;
	font-size: 1.75em;
	line-height: 190%;
	}
	
.menu li.menu-video, .guide .menu-video {
	padding: 0;
	border-radius: 30px;
	background: #099999;
	margin-bottom: 15px;
	border-bottom: 0;
	transition: background 0.25s;
	-webkit-transition: background 0.25s;
	}
	
.guide .menu-video { margin: 0 10px 15px; }
	
.menu li.menu-video:hover, .guide .menu-video:hover { background: #0B8B8B; }
	
.home .menu li.menu-video a, .guide .menu-video a { 
	min-height: 78px;
	color: #ffffff;
	line-height: 130%;
	padding: 17px 28px 17px 98px;
	}
	
.video-inline { 
	width: 100%;
	padding: 0;
	overflow: hidden;
	border-radius: 30px;
	}
	
.video-inline video { 
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	object-fit: contain;
	}
	
.menu li.menu-video a::before { display: none; }
	
.menu li.menu-video svg, .guide .menu-video svg {
	width: 65px;
	height: 65px;
	position: absolute;
	left: 18px;
	top: 23px;
	}
	
.menu li.menu-video strong, .guide .menu-video strong {
	display: block;
	font-size: 0.5714286em;
	font-weight: 600;
    line-height: 115%;
    margin: 0;
	}
	
.guide .menu-video strong {
	font-size: 0.7142857em;
	font-weight: 700;
    line-height: 120%;
    position: absolute;
    top: 50%;
	transform: translateY(-50%);
	}
	
/* 
.home .menu li.menu-account a {
	padding: 31px 30px 31px 100px;
	}
 */
	
.num {
	width: 30px;
	height: 30px;
	padding-top: 6px;
	box-sizing: border-box;
	display: block;
	background-color: #db2020;
	color: #ffffff;
	font-size: 16px;
	line-height: 120%;
	text-align: center;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	top: 66px;
	left: 60px;
	}
	
img.img { display: block; width: 100%; }
	
.home .menu li a em {
	font-weight: 600;
	font-size: 0.572em;
	line-height: 120%;
	font-style: normal;
	display: block;
	clear: left;
	}
	
.home .menu li > a::before, .support .menu li > a::before { 
	width: 80px;
	height: 80px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
	}

.menu li.settings-logout { border-bottom: 0; }
.menu li.settings-account a { padding: 25px 0 20px 75px; }

.menu li.settings-account a::before { 
	width: 56px;
	height: 56px;
	top: 22px;
	}
	
.menu li a svg { 
	height: auto;
	position: absolute;
	left: 20px;
	fill: #fff;
	}
	
.menu li.settings-account a svg 	{ width: 28px; top: 36px; margin-left: -6px; }
.menu li.settings-bank a svg 		{ width: 26px; top: 17px; margin-left: -13px; }
.menu li.settings-payment a svg 	{ width: 28px; top: 15px; margin-left: -14px; }
.menu li.settings-change-pin a svg	{ width: 26px; top: 14px; margin-left: -13px; }
.menu li.settings-change-password a svg	{ width: 32px; top: 14px; margin-left: -16px; }
.menu li.settings-upload-id a svg	{ width: 26px; top: 15px; margin-left: -13px; }
.menu li.settings-chargebacks a svg	{ width: 28px; top: 15px; margin-left: -15px; }
.menu li.settings-strip a svg		{ width: 26px; top: 15px; margin-left: -13px; }
.menu li.settings-logout a svg		{ width: 29px; top: 16px; margin-left: -12px; transform: scaleX(-1); }
	
.menu li.menu-support a svg 	{ width: 48px; top: 25px; margin-left: -4px; }
.menu li.menu-jobs a svg 		{ width: 44px; top: 24px; margin-left: -1px; }
.menu li.menu-payments a svg 	{ width: 60px; top: 26px; margin-left: -11px; }
.menu li.menu-messages a svg 	{ width: 48px; top: 27px; margin-left: -4px; }
.menu li.menu-guide a svg		{ width: 56px; top: 27px; margin-left: -8px; }
.menu li.menu-paylink a svg		{ width: 52px; top: 30px; margin-left: -6px; }
.menu li.menu-account a svg		{ width: 41px; top: 26px; margin-left: -1px; }

.menu li a svg.arrow {
	width: 14px;
	height: auto;
	margin: 0;
	position: absolute;
	top: 15px;
	left: auto;
	right: 0;
	stroke: #222222;
	}
	
.home .menu li a svg.arrow, .support .menu li a svg.arrow {
	width: 17px;
	top: 32px;
	right: 10px;
	}
	
.menu li a:hover svg.arrow {
	stroke: #000000;
	}
	
.menu li.settings-account a svg.arrow {
	top: 25px;
	}

.menu li.settings-account a strong {
	font-weight: normal;
	font-size: 1.364em;
	}

.menu li.settings-account a span {
	font-size: 0.818em;
	display: block;
	}

.menu li.settings-account.pbl a span {
	font-size: 1em;
	}

.menu li.settings-account.pbl a span.smaller {
	font-size: 0.7em;
	}
	
.menu li.settings-account a span em { font-style: normal; }

.menu li.required {
	background-color: #E97A7A;
	margin: 0 -10px;
	padding: 0 10px;
	}

.menu li.required a {
	color: #fff;
	}

.menu li.required a::before {
	background: #D33A3A !important;
	}

.menu li.required a:hover::before {
	background-color: #b02424;
	}
	
.menu li.required a svg.arrow {
	stroke: #fff;
	}

.messages .menu {
	padding: 60px 0;
	text-align: center;
	}

.messages .menu li {
	border-bottom: none;
	display: inline-block;
	margin: 0 0 10px 0;
	vertical-align: top;
	}
	
.messages .menu li:last-of-type { margin-right: 0 }
	
.messages .menu li a {
	width: 220px;
	height: 70px;
	font-size: 1.25em;
	line-height: 110%;
	text-align: center;
	margin: 0;
	padding: 135px 0 0 0;
	color: #fff;
	display: block;
	}
	
.messages .menu li a::before { 
	width: 116px;
	height: 116px;
	background: -moz-linear-gradient(180deg, rgba(17,98,136,1.0) 0%, rgba(21,101,144,1.0) 40%, rgba(18,88,130,1.0) 95%);
	background: -webkit-linear-gradient(180deg, rgba(17,98,136,1.0) 0%, rgba(21,101,144,1.0) 40%, rgba(18,88,130,1.0) 95%);
	background: linear-gradient(180deg, rgba(17,98,136,1.0) 0%, rgba(21,101,144,1.0) 40%, rgba(18,88,130,1.0) 95%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#15658f",endColorstr="#115681",GradientType=1);
	top: 0;
	left: 50%;
	margin-left: -58px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: 0px 2px 5px rgba(25, 32, 51, 0.3);
	-moz-box-shadow: 0px 2px 5px rgba(25, 32, 51, 0.3);
	box-shadow: 0px 2px 5px rgba(25, 32, 51, 0.3);
	}

.messages .menu li.new-message a svg { 
	width: 56px; 
	left: 50%;
	top: 35px; 
	margin-left: -28px;
	}
	
.call-support {
	margin: 0px 0px;
	border-radius: 30px;
	background: rgba(203, 235, 251, 0.70);
	padding: 15px 20px 18px 90px;
	font-size: 1.125em;
	line-height: 130%;
	color: #233767;
	position: relative;
	display: none;
	}
	
.call-support h4 {
	margin: 6px 0;
	font-weight: 600;
	font-size: 0.875em;
	line-height: 100%;
	}
	
.call-support h2 {
	margin: 0;
	font-size: 2.0em;
	line-height: 100%;
	/*border-bottom: 1px solid rgba(35, 55, 103, 0.25);*/
	display: inline-block;
	}
	
.call-support a {
	text-decoration: none;
	color: #233767;
	}
	
.call-support svg {
	width: 48px;
	height: auto;
	position: absolute;
	top: 26px;
	left: 19px;
	}

.menu li.menu-call-support .call-support {
	display: block;
	margin-bottom: 15px;
}

.menu li.menu-call-support .call-support a {
	text-decoration: none;
	color: #233767;
	padding: 0px;
	border: 0px;
	font-size: 1em;
	line-height: 100%;
}

.menu li.menu-call-support .call-support a::before {
	display: none;
}
	
.h-menu {
	margin: 20px 10px;
	}
	
.h-menu h3 {
	font-weight: 600;
	font-size: 1.0em;
	padding-left: 20px;
	margin: 5px 0;
	}
	
.h-menu .g-menu {
	border-radius: 30px;
	background: rgba(203, 235, 251, 0.70);
	padding: 3px 10px;
	}
	
.h-menu .g-menu li { width: 100%; }
.h-menu .g-menu li:first-of-type { border-top: 0; }
.h-menu .g-menu li:last-of-type { border-bottom: 0; }

/* Account styles */

.account .panel { 
	padding: 10px;
	}
	
.account-item {
	border-top: 1px solid rgba(35, 55, 103, 0.3);
	margin: 0;
	padding: 6px 0;
	box-sizing: border-box;
	clear: both;
	position: relative;
	}
	
.account-item:first-of-type { border-top: 0; }
.account .panel.id-info p.note { border-top: 1px solid rgba(35, 55, 103, 0.3); padding-top: 1.0em; margin-top: 0; }
.account-item:last-of-type { border-bottom: 1px solid rgba(35, 55, 103, 0.3); }
	
.id-info p.intro { font-weight: 600; line-height: 130%; margin-bottom: 10px; margin-top: 5px; }

.account .account-item h3, .account .form-item h3, .account .panel label { 
	font-weight: bold;
	font-size: 1.125em;
	line-height: 140%;
	padding: 0;
	margin: 0.25em 0 0.25em;
	display: block;
	}

.change-password .form-item label { width: 100%; }
	
.account .panel p, .account .panel li { 
	font-size: 1.125em;
	}

.account-item p { 
	font-size: 1.25em;
	line-height: 120%;
	margin: 0 0 0;
	padding: 0 10px 5px;
	}
	
.id-info .account-item {
	padding: 6px 0 15px;
	}

.id-info .account-item p { 
	padding: 7px 10px 5px;
	}
	
.account-item .btn2 { 
	font-size: 1.0em;
	padding: 8px 12px 7px;
	border-width: 2px;
	position: absolute;
	right: 0px;
	bottom: 15px;
	}

.account-item.bank-success {
	text-align: center;
}

.account-item .message.msg-info .actions {
	width: 100%;
}

.account-item .message.msg-info .actions .btn2 {
	position: static;
	margin-bottom: 0px;
	max-width: 220px;
	min-width: 81px;
}
	
p.tip, .account-item p.tip {
	font-weight: 600;
	font-size: 0.9375em;
	line-height: 120%;
	padding: 6px;
	margin: 0.5em 0;
	background-color: rgba(0, 171, 171, 0.5);
	}
	
.account-item .status {
	float: right;
	text-transform: none;
	color: #058839;
	}
	
.account-item.pending .status, .account-item em.pending { color: #D65F39 }
.account-item.required .status, .account-item em.required, .account-item.reupload .status, .account-item em.reupload { color: #D22727 }
.account-item em.verified { color: #058839 }

.form-item p.success {
	margin-top: 10px;
	color: #058839;
}
	
.account .pin-confirm p { 
	font-weight: 600;
	font-size: 1.125em;
	margin: 0 0 15px;
	padding: 12px 0;
	border-top: 1px solid rgba(35, 55, 103, 0.15);
	}
	
.account .panel .form-item:first-of-type { border-top: 0; }
.account .panel .form-item:last-of-type { border-bottom: 1px solid rgba(35, 55, 103, 0.3); }


.account .panel .form-item span.pass-toggle {
	color: #222222;
	position: inline-block;
	float: right;
	margin: 6px 0px 0px 10px;
	cursor: pointer;
}

.account .panel .form-item span.pass-toggle.hidden {
	display: none;
}

.account .panel .form-item span.pass-toggle svg {
	height: 2em;
	width: 2em;
}

.account .panel .actions { padding: 15px 0 10px; }
.account .panel .actions .btn, .account .panel .actions .btn2 { width: 100%; text-align: center; }


/*  User guide styles  */

.col.ug-link {
	padding-top: 70px;
	padding-bottom: 50px;
	}

.g-menu, .g-submenu {
	margin: 0;
	padding: 0 10px;
	}
	
.support .g-menu { padding: 0; }

.g-menu li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	border-top: 1px solid rgba(35, 55, 103, 0.15);
	scroll-margin-top: 70px;
	}

.g-menu li:last-of-type { border-bottom: 1px solid rgba(35, 55, 103, 0.15); }
.g-submenu li:last-of-type { border-bottom: 0 }
	
.g-menu li a {
	font-weight: bold;
	font-size: 1.375em;
	line-height: 120%;
	text-decoration: none;
	margin: 0;
	padding: 15px 0 13px 10px;
	color: #192033;
	display: block;
	position: relative;
	transition: color 0.25s;
	-webkit-transition: color 0.25s;
	}
	
.g-submenu li a, .support .g-menu li a {
	font-size: 1.25em;
	line-height: 120%;
	padding: 16px 0 14px 10px;
	}
	
.g-menu li a svg, .support .menu li a svg.arrow {
	width: auto;
	height: 20px;
	position: absolute;
	top: 18px;
	right: 12px;
	stroke: #222222;
	stroke-width: 4;
	}
	
.support .menu li a svg.arrow { top: 38px; }
	
.g-menu li.show {
	background-color: rgba(180, 229, 255, 0.7);
	}
	
.g-menu li.show .g-submenu { display: block }
.g-menu li .g-submenu { display: none }
	
.g-menu li.show svg {
	transform: rotate(90deg);
	right: 13px;
	}
	
.g-nav {
	margin: 0;
	padding: 0;
	position: relative; 
	top: 16px;
	display: none;
	}

.g-nav li {
	margin: 0 5px 0 0;
	padding: 0;
	list-style-type: none;
	width: 40px;
	height: 40px;
	float: right;
	}

.g-nav li a {
	width: 40px;
	height: 40px;
	display: block;
	font-size: 0.01em;
	text-indent: -10000em;
	background-image: url(../img/g-nav-next.svg);
	background-repeat: no-repeat;
	background-position: center left 16px;
	background-size: auto 20px;
	background-color: #000;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	}

.g-nav li a.prev {
	transform: scaleX(-1);
	overflow: hidden;
	}
	
.g-crumb {
	width: 94%;
	margin: 0;
	padding: 0;
	position: relative;
	top: 0px;
	left: 10px;
	}

.g-crumb li {
	margin: 0;
	padding: 0;
	display: inline-block;
	list-style-type: none;
	}
	
.g-crumb li:last-of-type { display: none; }

.g-crumb li a, .g-crumb li strong {
	font-size: 1.0em;
	line-height: 120%;
	text-decoration: none;
	color: #233767;
	display: inline-block;
	padding: 7px 5px 7px 0;
	}
	
.guide .panel, .support .panel {
	margin-top: 0px;
	padding: 0px 10px 460px;
	overflow: hidden;
	}
	
.guide .panel.rss, .guide .panel.rpp { padding-bottom: 40px; }

.guide h1 a {
	color: inherit;
	text-decoration: none;
}
	
/* .support .panel { margin-top: 33px; } */
.support .panel { margin-top: 0; }
	
.guide .panel h1, .support .panel h1, .support .panel h2 {
	font-size: 1.5em;
	line-height: 120%;
	margin-top: 0em;
	}
	
.guide .panel h3 { text-transform: none; }

.support .panel h2 { margin-top: 1.5em; margin-bottom: 0.25em; }

.guide .more-pop {
	display: none;
}

.guide .btn2 {
	border: 1px solid #222222;
}
	
.guide .panel h2 {
	font-size: 1.63em;
	margin-top: 2.0em;
	padding-top: 1.5em;
	clear: both;
	scroll-margin-top: 49px;
	border-top: 1px solid rgba(35, 55, 103, 0.15);
	position: relative;
	z-index: 1;
}

.guide .panel h2:first-of-type {
	margin-top: 1.5em;
	padding-top: 0;
	border-top: 0;
}

.guide .panel p, .guide .panel li, .pop-panel p {
	font-size: 1.125em;
	margin: 0.5em 0 1.0em;
	line-height: 135%;
	}
	
.guide .panel li {
	margin: 0.5em 0
	}
	
.guide .panel ol {
	padding-left: 30px;
	}
	
.guide .panel ol li {
	padding-left: 5px;
	list-style-type: decimal;
	position: relative;
	}
	
ol li span.bull {
	background-color: #000000;
	width: 30px;
	height: 30px;
	display: inline-block;
	border-radius: 50%;
	text-align: center;
	font-weight: bold;
	font-size: 1.1112em;
	line-height: 160%;
	color: #ffffff;
	position: absolute;
	left: 2px;
	top: -3px;
	}
	
.guide .link {
	font-weight: bold;
	text-decoration: none;
	}
	
.guide .panel p.related, .guide .panel p.next-topic {
	font-weight: 600;
	font-size: 1.0em;
	}
	
.guide .panel p.next-topic { 
	font-size: 1.125em; 
	text-align: right; 
	margin: 40px 0 10px; 
	}
	
.related::before, .next-topic a::before {
	content: 'Related';
	color: #ede6e0;
	background-color: rgb(235, 117, 0);
	padding: 4px 4px 1px;
	margin: 0 8px 0 0;
	border-radius: 4px;
	font-size: 0.9375em;
	line-height: 100%;
	display: inline-block;
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
	}
	
.next-topic a::before {
	content: 'Next topic';
	color: #ffffff;
	background-color: #222222;
	font-size: 0.833em;
	padding-bottom: 2px;
	}
	
.related a, .next-topic a {
	color: #307899;
	text-decoration: none;
	transition: color 0.25s;
	-webkit-transition: color 0.25s;
	}
	
.next-topic a {
	display: inline-block;
	padding-right: 36px;
	position: relative;
	}
	
.next-topic a::after {
	width: 30px;
	height: 30px;
	content: '';
	display: inline-block;
	background-image: url(../img/g-nav-next.svg);
	background-repeat: no-repeat;
	background-position: center left 11px;
	background-size: auto 16px;
	background-color: #000;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	top: -4px;
	right: 0px;
	}
	
.related a:hover, .next-topic a:hover { color: #1e5773; }

.more-pop {
	width: 35px;
	height: 10px;
	display: inline-block;
	font-size: 0.01em;
	text-indent: -10000em;
	position: relative;
	}

.more-pop::after {
	width: 33px;
	height: 30px;
	display: block;
	content: '';
	background-image: url(../img/guide-more-info.png);
	background-repeat: no-repeat;
	background-position: center left;
	background-size: auto 30px;
	position: absolute;
	top: -20px;
	left: -2px;
	}
	
.more-pop.alt::after { top: -12px; }

.yes-btn {
	color: #3ed509;
	font-size: 1.25em;
	border: 2px solid #999999;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 8px;
	padding: 1px 6px 0px 7px;
	margin: 0 0 0 4px;
	}
	
.alert { color: #e40000 }

	
.guide .panel .col img.ss, img.g-img {
	display: block;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	border: 2px solid rgba(255, 255, 255, 0.75);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}
	
.mf .row.r4 img.ss, .ff .row.r3 img.ss { margin-bottom: 20px }
.rct .ani-wrapper, .rct .r3 img.img-mask { margin-bottom: 20px }
.rss .row.r1 .col:first-of-type { padding-top: 20px }
.rss .row.r1 .col:first-of-type, .rpp .row.r1 .col:first-of-type { padding-top: 20px }
.col.g-restart-ani { top: -40px }
.g-sc-rpp .g-ped-center { padding-top: 20px !important }
	
img.g-img { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border: 0; max-width: 400px; }
	
img.ss.ss-x {
	position: absolute;
	top: 0;
	}
	
img.img-mask {
	display: block;
	margin: 0 auto;
	width: 240px;
	box-sizing: border-box;
	border: 2px solid rgba(255, 255, 255, 0.75);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	}
	
img.img-tip {
	display: block;
	margin: -10px 0 40px;
	width: 210px;
	float: right;
	}

.img-pinpad {
	width: 139px;
	height: 275px;
	padding: 0;
	margin: 0;
	background-image: url(../img/guide-ped-blank.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 140px auto;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	border-radius: 14px;
	-webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
	position: relative;
	margin-bottom: 1em;
	}
	
.img-pinpad-screen, .ped-msg-present {
	width: 111px;
	height: 81px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	position: absolute;
	top: 54px;
	left: 15px;
	}
	
.ped-msg-present { 
	background-image: url(../img/guide-ped-screen-present.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	top: 0; 
	left: 0; 
	}
	
.guide .img-pinpad-screen p {
	color: #fff;
	padding: 4px 0px 0;
	margin: 0 -25px;
	font-family: "roboto-mono", Helvetica, Arial, sans-serif;
	font-size: 1.0em !important;
	line-height: 115% !important;
	letter-spacing: -0.04em;
	-webkit-transform: scale(0.65, 1);
	-moz-transform: scale(0.65, 1);
	transform: scale(0.65, 1);
	}
	
.img-pinpad-screen p.sm { font-size: 0.875em !important; }
	
.img-pinpad-screen .ped-msg-shutdown p, 
.img-pinpad-screen .ped-msg-start1 p, 
.img-pinpad-screen .ped-msg-start2 p, 
.img-pinpad-screen .ped-msg-start3 p { 
	font-size: 0.875em !important; 
	margin: 0 0 0 -30px; 
	width: 170px; 
	}
	
.img-pinpad-screen .ped-msg-present p { 
	text-align: center;
	margin-top: 32px;
	transform: scale(0.65, 0.8);
	line-height: 100% !important;
	}
	
.ped-green { color: #3ed509; }
.ped-red { color: #f16230; }

.img-pinpad-screen p.ped-actions {
	width: 154px;
	margin: 0;
	padding: 0 0px 5px;
	position: absolute;
	bottom: 0;
	left: -23px;
	}
	
.ped-actions .ped-green { float: right; }
.ped-actions .ped-green svg { margin-left: 3px; }

.img-hand-card {
	width: 290px;
	height: 272px;
	padding: 0;
	margin: 0;
	background-image: url(../img/guide-hand-card.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% auto;
	position: absolute;
	}

.img-hand-point, .img-hand-point2 {
	width: 204px;
	height: 270px;
	padding: 0;
	margin: 0;
	background-image: url(../img/guide-hand-point.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% auto;
	position: absolute;
	}
	
.img-phone {
	width: 200px;
	height: 374px;
	box-sizing: border-box;
	padding: 7px;
	padding-bottom: 37px;
	background-color: #fff;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
	-webkit-box-shadow: 0px 5px 27px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 5px 27px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 5px 27px 0px rgba(0, 0, 0, 0.3);
	position: relative;
	top: 0;
	left: 50%;
	margin-left: -100px;
	margin-bottom: 20px;
	}
	
.img-phone-screen {
	width: 100%;
	height: 100%;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 2px solid #e6e6e6;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	}
	
.img-phone::after {
	content: '';
	width: 30px;
	height: 30px;
	margin-left: -15px;
	background-color: #dcdcdc;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	bottom: 4px;
	left: 50%;
	}
	
.phone-content {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	}
	
.phone-content.img-banking-app { background-image: url(../img/guide-phone-banking-app-2040.jpg); }
.phone-content.img-banking-app-200 { background-image: url(../img/guide-phone-banking-app-200.jpg); }
.g-ff-pt .phone-content.img-banking-app, .g-ff-fft .phone-content.img-banking-app { background-image: url(../img/guide-phone-banking-app-200.jpg); }

.img-qr-container {
	width: 160px;
	height: 160px;
	margin: 50px auto 0;
	position: relative;
	}
	
.img-qrcode {
	width: 160px;
	height: 160px;
	background-image: url(../img/img-qrcode.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 140px 140px;
	margin: 0;
	}

.img-qr-container div.corner {
	width: 27px;
	height: 27px;
	position: absolute;
	}

.img-qr-container div.corner:nth-child(4n + 0) {
	border-top: 3px solid #404040;
	border-right: 3px solid #404040;
	top: 0;
	right: 0;
	}

.img-qr-container div.corner:nth-child(4n + 1) {
	border-bottom: 3px solid #404040;
	border-right: 3px solid #404040;
	bottom: 0;
	right: 0;
	}

.img-qr-container div.corner:nth-child(4n + 2) {
	border-bottom: 3px solid #404040;
	border-left: 3px solid #404040;
	bottom: 0;
	left: 0;
	}

.img-qr-container div.corner:nth-child(4n + 3) {
	border-top: 3px solid #404040;
	border-left: 3px solid #404040;
	top: 0;
	left: 0;
	}
	
.img-qr-container div.scanner {
	width: 165px;
	height: 4px;
	background-color: rgba(248, 43, 43, 1.0);
	border: 0;
	position: absolute;
	top: 64px;
	left: -2px;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(248, 43, 43, 1.0),  0px 0px 10px 0px rgba(248, 43, 43, 1.0);
	-moz-box-shadow: 0px 0px 20px 0px rgba(248, 43, 43, 1.0),  0px 0px 10px 0px rgba(248, 43, 43, 1.0);
	box-shadow: 0px 0px 20px 0px rgba(248, 43, 43, 1.0),  0px 0px 10px 0px rgba(248, 43, 43, 1.0);
	}
	
div.scanner span {
	width: 10px;
	height: 10px;
	background-color: rgba(248, 43, 43, 1.0);
	border: 0 !important;
	position: absolute;
	top: -3px;
	left: -5px;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(248, 43, 43, 1.0),  0px 0px 10px 0px rgba(248, 43, 43, 1.0);
	-moz-box-shadow: 0px 0px 20px 0px rgba(248, 43, 43, 1.0),  0px 0px 10px 0px rgba(248, 43, 43, 1.0);
	box-shadow: 0px 0px 20px 0px rgba(248, 43, 43, 1.0),  0px 0px 10px 0px rgba(248, 43, 43, 1.0);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}
	
div.scanner span:last-of-type {
	left: auto;
	right: -5px;
	}
	
.img-qr-container div.reader {
	width: 120px;
	height: 120px;
	background-color: rgba(62, 213, 9, 0.5);
	position: absolute;
	top: 20px;
	left: 20px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	}
	
.img-e-receipt {
	width: 100%;
	height: 100%;
	background-image: url(../img/e-receipt-sm.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	margin: 0;
	border-radius: 8px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	}

.g-dot-cross, .g-dot-tick {
	width: 60px;
	height: 60px;
	position: absolute;
	top: -20px;
	right: -20px;
	animation-name: g-dot-pulse;
	}
	
.g-dot-tick { top: -20px; right: 2px; }

.ani-wrapper {
	position: relative;
	display: inline-block;
	}
	
.g-ped-center .ani-wrapper, .g-ped-center .img-pinpad {
	margin: 0 0 1em -70px;
	top: 0px;
	left: 50%;
	}
	
.g-ped-center .ani-wrapper .img-pinpad { margin: 0; left: 0; }

/*   Animation: Processing card jobs   */

@keyframes img-hand-card {
  0%   { opacity: 0; top: 50%; left: 100%; }
  10%  { opacity: 0; top: 50%; left: 100%; }
  20%  { opacity: 1; top: 20%; left: 20%; }
  24%  { opacity: 1; top: 20%; left: 20%; }
  25%  { opacity: 1; top: 21%; left: 21%; }
  26%  { opacity: 1; top: 20%; left: 20%; }
  30%  { opacity: 1; top: 20%; left: 20%; }
  40%  { opacity: 0; top: 50%; left: 100%; }
  100% { opacity: 0; top: 50%; left: 100%; }
}

.img-hand-card {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	}

.img-hand-card { animation-name: img-hand-card; }


/*   Animation: Meter transactions   */
	
@keyframes img-hand-point-mt {
/*	0%   { opacity: 1; top: 76%; left:37%; } */
	
  0%   { opacity: 0; top: 110%; left: 60%; }
  15%  { opacity: 0; top: 110%; left: 60%; }
  30%  { opacity: 1; top: 76%; left: 37%; }
  36%  { opacity: 1; top: 76%; left: 37%; }
  37%  { opacity: 1; top: 77%; left: 37%; }
  38%  { opacity: 1; top: 76%; left: 37%; }
  45%  { opacity: 1; top: 76%; left: 37%; }
  60%  { opacity: 0; top: 110%; left: 60%; }
  100% { opacity: 0; top: 110%; left: 60%; } 
}

.g-mf-mt .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 7s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-mt;
	}


/*   Animation: Pulsing x or tick icon   */

@keyframes g-dot-pulse {
  0%   { opacity: 0.35; }
  50%  { opacity: 1; }
  100%  { opacity: 0.35; }
}

.g-dot-pulse {
	animation-duration: 2s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	}
	

/*   Animation: Pending transactions   */

.g-mf-pt .pending-phone, .g-ff-pt .pending-phone {
	width: 100%;
	position: absolute; 
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: pending-phone;
	}
	
@keyframes pending-phone {
  0%   { opacity: 1; }
  40%  { opacity: 1; }
  45%  { opacity: 0; }
  95%  { opacity: 0; }
  100% { opacity: 1; }
}

.g-mf-pt .pending-screen, .g-ff-pt .pending-screen {
	padding-top: 40px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: pending-screen;
	}

@keyframes pending-screen {
  0%   { opacity: 0; }
  45%  { opacity: 0; }
  50%  { opacity: 1; }
  90%  { opacity: 1; }
  95%  { opacity: 0; }
  100% { opacity: 0; }
}	

.pending-screen .g-dot-tick { top: 0px }


/*   Animation: Taking cash   */

.g-mf-tc .tc-meter01 {
	position: absolute; 
	padding-top: 40px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: tc-meter01;
	}
	
@keyframes tc-meter01 {
  0%   { opacity: 1; }
  30%  { opacity: 1; }
  31%  { opacity: 0; }
  95%  { opacity: 0; }
  100% { opacity: 1; }
}

.g-mf-tc .tc-meter02 {
	position: absolute; 
	padding-top: 40px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: tc-meter02;
	}

@keyframes tc-meter02 {
  0%   { opacity: 0; }
  28%  { opacity: 0; }
  30%  { opacity: 1; }
  50%  { opacity: 1; }
  55%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-mf-tc .tc-dashboard {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: tc-dashboard;
	}

@keyframes tc-dashboard {
  0%   { opacity: 0; }
  55%  { opacity: 0; }
  60%  { opacity: 1; }
  90%  { opacity: 1; }
  95%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes img-hand-point-tc {
/*  0%   { opacity: 1; top: 53%; left: 44.5%; } // clear meter button  */
 
  0%   { opacity: 0; top: 110%; left: 60%; }
  10%  { opacity: 0; top: 110%; left: 60%; }
  20%  { opacity: 1; top: 52.5%; left: 44.5%; }
  24%  { opacity: 1; top: 52.5%; left: 44.5%; }
  25%  { opacity: 1; top: 53.5%; left: 44.5%; }
  26%  { opacity: 1; top: 52.5%; left: 44.5%; }
  30%  { opacity: 1; top: 52.5%; left: 44.5%; }
  40%  { opacity: 0; top: 110%; left: 60%; }
  100% { opacity: 0; top: 110%; left: 60%; }

}

.g-mf-tc .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-tc;
	}


/*   Animation: Fixed fare jobs (£14.50 fare on tablet)   */
	
@keyframes img-finger-ff {
/*   0%  { opacity: 1; top: 22%; left: 79%; } // fixed fare button (dashboard)  */
/*
  0%   { top: 110%; left: 66%; opacity: 0; }
  5%   { top: 110%; left: 66%; opacity: 0; }
  
  10%  { top: 23%; left: 79%; opacity: 1; }
  12%  { top: 23%; left: 79%; }
  13%  { top: 24%; left: 79%; }
  14%  { top: 23%; left: 79%; }
  17%  { top: 23%; left: 79%; }
  
  23%  { top: 20%; left: 13%; } /* number 1 move to	
  27%  { top: 20%; left: 13%; } /* number 1	pause 	
  28%  { top: 21%; left: 13%; } /* number 1 press	
  29%  { top: 20%; left: 13%; } /* number 1	up 		
  31%  { top: 20%; left: 13%; } /* number 1	pause 	
  
  34%  { top: 38%; left: 13%; } /* number 4 move to	
  36%  { top: 38%; left: 13%; } /* number 4 pause	
  37%  { top: 39%; left: 13%; } /* number 4 press	
  38%  { top: 38%; left: 13%; } /* number 4	up		
  40%  { top: 38%; left: 13%; } /* number 4	pause   
  
  44%  { top: 73%; left: 36%; } /* number dot move to	
  46%  { top: 73%; left: 36%; } /* number dot pause	
  47%  { top: 74%; left: 36%; } /* number dot press	
  48%  { top: 73%; left: 36%; } /* number dot up		
  50%  { top: 73%; left: 36%; } /* number dot pause   
  
  54%  { top: 38%; left: 24%; } /* number 5 move to	
  56%  { top: 38%; left: 24%; } /* number 5 pause	
  57%  { top: 39%; left: 24%; } /* number 5 press	
  58%  { top: 38%; left: 24%; } /* number 5 up		
  60%  { top: 38%; left: 24%; } /* number 5 pause   
  
  64%  { top: 73%; left: 19%; } /* number 0 move to	
  66%  { top: 73%; left: 19%; } /* number 0 pause	
  67%  { top: 74%; left: 19%; } /* number 0 press	
  68%  { top: 73%; left: 19%; } /* number 0 up		
  70%  { top: 73%; left: 19%; } /* number 0 pause   
  
  74%  { top: 38%; left: 70%; } /* enter move to	
  76%  { top: 38%; left: 70%; } /* enter pause	
  77%  { top: 39%; left: 70%; } /* enter press	
  78%  { top: 38%; left: 70%; } /* enter up		
  83%  { top: 38%; left: 70%; opacity: 1; } /* enter pause   
  
  87%  { top: 110%; left: 66%; opacity: 0; } /* fade   
  100%  { top: 110%; left: 66%; opacity: 0; } /* fade   
*/
  0%   { top: 110%; left: 66%; opacity: 0; }
  5%   { top: 110%; left: 66%; opacity: 0; }
  
  15%  { top: 23%; left: 79%; opacity: 1; }
  18%  { top: 23%; left: 79%; }
  19%  { top: 24%; left: 79%; }
  20%  { top: 23%; left: 79%; }
  24%  { top: 23%; left: 79%; }
  
  30%  { top: 20%; left: 24%; } /* number 2 move to	*/
  34%  { top: 20%; left: 24%; } /* number 2	pause 	*/
  35%  { top: 21%; left: 24%; } /* number 2 press	*/
  36%  { top: 20%; left: 24%; } /* number 2	up 		*/
  38%  { top: 20%; left: 24%; } /* number 2	pause 	*/
  
  42%  { top: 73%; left: 19%; } /* number 0 move to	*/
  45%  { top: 73%; left: 19%; } /* number 0 pause	*/
  46%  { top: 74%; left: 19%; } /* number 0 press	*/
  47%  { top: 73%; left: 19%; } /* number 0	up		*/
  50%  { top: 73%; left: 19%; } /* number 0	pause   */
  
  51%  { top: 73%; left: 19%; } /* number 0 move to	*/
  52%  { top: 73%; left: 19%; } /* number 0 pause	*/
  53%  { top: 74%; left: 19%; } /* number 0 press	*/
  54%  { top: 73%; left: 19%; } /* number 0 up		*/
  58%  { top: 73%; left: 19%; } /* number 0 pause   */
  
  64%  { top: 38%; left: 70%; } /* enter move to	*/
  66%  { top: 38%; left: 70%; } /* enter pause	*/
  67%  { top: 39%; left: 70%; } /* enter press	*/
  68%  { top: 38%; left: 70%; } /* enter up		*/
  73%  { top: 38%; left: 70%; opacity: 1; } /* enter pause   */
  
  80%  { top: 110%; left: 66%; opacity: 0; } /* fade   */
  100%  { top: 110%; left: 66%; opacity: 0; } /* fade   */


}

.g-ff-tffj .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-finger-ff;
	}
	
@keyframes img-ss2-tffj {
  0%   { opacity: 0; }
  20%  { opacity: 0; }
  22%  { opacity: 1; }
  90%  { opacity: 1; }
  95%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-ff-tffj img.ss.ss-x {
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss2-tffj;
	}

@keyframes ff-fare {
  0%   { content: ' 0.00'; }
  36%  { content: ' 2.00'; }
  47%  { content: '20.00'; }
  54%  { content: '200.00'; }
  93%  { content: ''; }
}

.g-ff-tffj .ff-fare {
	position: absolute;
	left: 58%;
	top: 18.5%;
	text-align: right;
	width: 100px;
	height: 36px;
	animation: img-ss2-tffj 15s infinite;
	}

.g-ff-tffj .ff-fare:after {
	font-weight: normal;
	font-size: 32px;
	line-height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	content: ' 0.00';
	text-align: right;
	width: 100px;
	height: 36px;
	display: inline-block;
	animation: ff-fare steps(1,end) 15s infinite;
	content: '';
	overflow: visible;
	}
	
/*   Animation: taking-ff-jobs   */
	
@keyframes img-hand-point-fft {
/*	0%   { opacity: 1; top: 37%; left: 69%; } */
	
  0%   { opacity: 0; top: 110%; left: 60%; }
  10%  { opacity: 0; top: 110%; left: 60%; }
  20%  { opacity: 1; top: 37%; left: 69%; }
  24%  { opacity: 1; top: 37%; left: 69%; }
  25%  { opacity: 1; top: 38%; left: 69%; }
  26%  { opacity: 1; top: 37%; left: 69%; }
  30%  { opacity: 1; top: 37%; left: 69%; }
  40%  { opacity: 0; top: 110%; left: 60%; }
  100% { opacity: 0; top: 110%; left: 60%; }
}

.g-ff-fft .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-fft;
	}


/*   Animation: dealing with signatures (mf and ff )   */

@keyframes img-hand-point-dws {
  0%   { opacity: 0; top: 110%; left: 60%; }
  10%  { opacity: 0; top: 110%; left: 60%; }
  20%  { opacity: 1; top: 72%; left: 55%; }
  24%  { opacity: 1; top: 72%; left: 55%; }
  25%  { opacity: 1; top: 73%; left: 55%; }
  26%  { opacity: 1; top: 72%; left: 55%; }
  30%  { opacity: 1; top: 72%; left: 55%; }
  40%  { opacity: 0; top: 110%; left: 60%; }
  100% { opacity: 0; top: 110%; left: 60%; }
}

.g-mf-dws .img-hand-point, .g-ff-dws .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-dws;
	}


/*   Animation: How tipping works   */

@keyframes img-hand-point-gta {
  0%   { opacity: 0; top: 110%; left: 60%; }
  10%  { opacity: 0; top: 110%; left: 60%; }
  20%  { opacity: 1; top: 85%; left: 55%; }
  24%  { opacity: 1; top: 85%; left: 55%; }
  25%  { opacity: 1; top: 86%; left: 55%; }
  26%  { opacity: 1; top: 85%; left: 55%; }
  30%  { opacity: 1; top: 85%; left: 55%; }
  40%  { opacity: 0; top: 110%; left: 60%; }
  100% { opacity: 0; top: 110%; left: 60%; }
}

.g-ta .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-gta;
	}

@keyframes ped-msg-fare-gta {
  0%   { opacity: 1; }
  30%  { opacity: 1; }
  31%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes ped-msg-present-gta {
  0%   { opacity: 0; }
  30%  { opacity: 0; }
  31%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

.g-ta .ped-msg1 {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: ped-msg-fare-gta;
	}

.g-ta .ped-msg-present {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: ped-msg-present-gta;
	}
	
	
/*   Animation: How tipping works - fares   */

@keyframes ped-fare1 {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  26%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-ta .img-pinpad.fare1 {
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: ped-fare1;
	}

@keyframes ped-fare2 {
  0%   { opacity: 0; }
  32%  { opacity: 0; }
  36%  { opacity: 1; }
  60%  { opacity: 1; }
  64%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-ta .img-pinpad.fare2 {
	position: absolute;
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: ped-fare2;
	}

@keyframes ped-fare3 {
  0%   { opacity: 0; }
  66%  { opacity: 0; }
  70%  { opacity: 1; }
  94%  { opacity: 1; }
  98%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-ta .img-pinpad.fare3 {
	position: absolute;
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: ped-fare3;
	}
	
.tip-pop01, .tip-pop02, .tip-pop03 {
	width: 80px;
	height: 80px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 46px;
	right: -55px;position: absolute;
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	}
	
.tip-pop01 {
	background: url(../img/guide-tip-14-percent.png) no-repeat top left;
	background-size: 79px auto;
	animation-name: tip-pop1;
	}
	
.tip-pop02 {
	background: url(../img/guide-tip-10-percent.png) no-repeat top left;
	background-size: 74px auto;
	animation-name: tip-pop2;
	}
	
.tip-pop03 {
	background: url(../img/guide-tip-11-percent.png) no-repeat top left;
	background-size: 74px auto;
	animation-name: tip-pop3;
	}
	
@keyframes tip-pop1 {
  0%   { opacity: 0; }
  14%  { opacity: 0; }
  15%  { opacity: 1; }
  28%  { opacity: 1; }
  32%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes tip-pop2 {
  0%   { opacity: 0; }
  45%  { opacity: 0; }
  46%  { opacity: 1; }
  62%  { opacity: 1; }
  66%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes tip-pop3 {
  0%   { opacity: 0; }
  81%  { opacity: 0; }
  82%  { opacity: 1; }
  96%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes img-hand-point-fares {
  0%   { opacity: 0; top: 110%; left: 60%; }
  6%  { opacity: 0; top: 110%; left: 60%; }
  10%  { opacity: 1; top: 85%; left: 55%; }
  13%  { opacity: 1; top: 85%; left: 55%; }
  14%  { opacity: 1; top: 86%; left: 55%; }
  15%  { opacity: 1; top: 85%; left: 55%; }
  23%  { opacity: 1; top: 85%; left: 55%; }
  28%  { opacity: 0; top: 110%; left: 60%; }
  
  35%  { opacity: 0; top: 110%; left: 60%; }
  40%  { opacity: 1; top: 85%; left: 55%; }
  44%  { opacity: 1; top: 85%; left: 55%; }
  45%  { opacity: 1; top: 86%; left: 55%; }
  46%  { opacity: 1; top: 85%; left: 55%; }
  51%  { opacity: 1; top: 85%; left: 55%; }
  56%  { opacity: 0; top: 110%; left: 60%; }
  
  70%  { opacity: 0; top: 110%; left: 60%; }
  76%  { opacity: 1; top: 85%; left: 55%; }
  80%  { opacity: 1; top: 85%; left: 55%; }
  81%  { opacity: 1; top: 86%; left: 55%; }
  82%  { opacity: 1; top: 85%; left: 55%; }
  87%  { opacity: 1; top: 85%; left: 55%; }
  92%  { opacity: 0; top: 110%; left: 60%; }
  
  100% { opacity: 0; top: 110%; left: 60%; }
}

.g-ta .img-hand-point2 {
	width: 160px;
	height: 212px;
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-hand-point-fares;
	}
	
	
/*   Animation: Change tip   */
	
@keyframes finger-change-tip {
 
/*   0%   { opacity: 1; top: 88%; left: 7%; }  	/* x btn	*/
/*   0%   { opacity: 1; top: 58%; left: 37%; }	/* number 2	*/
/*   0%   { opacity: 1; top: 66%; left: 7%; }	/* number 4	*/
/*   0%   { opacity: 1; top: 83%; left: 37%; }	/* number 0	*/
/*   0%   { opacity: 1; top: 88%; left: 65%; }	/* tick btn	*/
   
   0%   { opacity: 0; top: 120%; left: 50%; } 
   10%  { opacity: 1; top: 88%; left: 7%; } /* x btn move to	*/
   15%  { opacity: 1; top: 88%; left: 7%; } /* x btn pause	*/
   16%  { opacity: 1; top: 88.5%; left: 7%; } /* x btn press	*/
   17%  { opacity: 1; top: 88%; left: 7%; } /* x btn up	*/
   25%  { opacity: 1; top: 88%; left: 7%; } /* x btn pause	*/
  
   30%  { opacity: 1; top: 58%; left: 65%; } /* number 3 move to	*/
   33%  { opacity: 1; top: 58%; left: 65%; } /* number 3 pause	*/
   34%  { opacity: 1; top: 58.5%; left: 65%; } /* number 3 press	*/
   35%  { opacity: 1; top: 58%; left: 65%; } /* number 3 up		*/
   36%  { opacity: 1; top: 58%; left: 65%; } /* number 3 pause   */
   
   40%  { opacity: 1; top: 83%; left: 37%; } /* number 0 move to	*/
   41%  { opacity: 1; top: 83%; left: 37%; } /* number 0 pause	*/
   43%  { opacity: 1; top: 83.5%; left: 37%; } /* number 0 press	*/
   44%  { opacity: 1; top: 83%; left: 37%; } /* number 0 up		*/
   45%  { opacity: 1; top: 83%; left: 37%; } /* number 0 pause   */
   
   50%  { opacity: 1; top: 83%; left: 37%; } /* number 0 move to	*/
   52%  { opacity: 1; top: 83%; left: 37%; } /* number 0 pause	*/
   53%  { opacity: 1; top: 83.5%; left: 37%; } /* number 0 press	*/
   54%  { opacity: 1; top: 83%; left: 37%; } /* number 0 up		*/
   55%  { opacity: 1; top: 83%; left: 37%; } /* number 0 pause   */
   
   60%  { opacity: 1; top: 88%; left: 65%; } /* tick btn move to	*/
   64%  { opacity: 1; top: 88%; left: 65%; } /* tick btn pause	*/
   65%  { opacity: 1; top: 88.5%; left: 65%; } /* tick btn press	*/
   66%  { opacity: 1; top: 88%; left: 65%; } /* tick btn up		*/
   72%  { opacity: 1; top: 88%; left: 65%; } /* tick btn pause   */
   
   85%  { opacity: 0; top: 120%; left: 50%; } /* fade   */
   100%  { opacity: 0; top: 120%; left: 50%; } /* fade   */
 }

.g-ctt .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: finger-change-tip;
	}
	
@keyframes ped-msg1-ctt {
  0%   { opacity: 1; }
  18%  { opacity: 1; }
  19%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-ctt .ped-msg1 {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: ped-msg1-ctt;
	}

@keyframes ped-msg-enter-tip-ctt {
  0%   { opacity: 0; }
  18%  { opacity: 0; }
  19%  { opacity: 1; }
  66%  { opacity: 1; }
  67% { opacity: 0; }
  100% { opacity: 0; }
}

.g-ctt .ped-msg-enter-tip {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: ped-msg-enter-tip-ctt;
	}

@keyframes ped-msg-present-ctt {
  0%   { opacity: 0; }
  66%   { opacity: 0; }
  67%  { opacity: 1; }
  90%  { opacity: 1; }
  95% { opacity: 0; }
  100% { opacity: 0; }
}

.g-ctt .ped-msg-present {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: ped-msg-present-ctt;
	}
	
@keyframes ctt-enter {
  0%   { content: ' 0.00'; }
  34%  { content: ' 0.03'; }
  43%  { content: ' 0.30'; }
  53%  { content: ' 3.00'; }
  95%  { content: ' 0.00'; }
}

.ped-msg-enter-tip p:after {
	font-weight: normal;
	font-size: 20px;
	line-height: 100%;
	position: absolute;
	right: 5px;
	top: 40px;
	content: ' 0.00';
	width: 80px;
	height: 20px;
	display: inline-block;
	animation: ctt-enter steps(1,end) 10s infinite; 
	overflow: visible;
	text-align: right;
	}
	
.ped-msg-present, .ped-msg-enter-tip { 
	width: 111px;
	height: 81px;
	position: absolute; 
	top: 0; 
	left: 0; 
	}
	
.ped-msg-present p { padding: 0 5px; }


/*   Animation: Cancel tip   */

@keyframes finger-cancel-tip {
/*   0%   { opacity: 1; top: 88%; left: 7%; }  	/* x btn	*/
/*   0%   { opacity: 1; top: 58%; left: 37%; }	/* number 2	*/
/*   0%   { opacity: 1; top: 66%; left: 7%; }	/* number 4	*/
/*   0%   { opacity: 1; top: 83%; left: 37%; }	/* number 0	*/
/*   0%   { opacity: 1; top: 88%; left: 65%; }	/* tick btn	*/
   
   0%   { opacity: 0; top: 120%; left: 50%; }
   15%  { opacity: 0; top: 120%; left: 50%; }
   30%  { opacity: 1; top: 88%; left: 7%; } /* x btn move to	*/
   35%  { opacity: 1; top: 88%; left: 7%; } /* x btn pause	*/
   36%  { opacity: 1; top: 89%; left: 7%; } /* x btn press	*/
   37%  { opacity: 1; top: 88%; left: 7%; } /* x btn up	*/
   45%  { opacity: 1; top: 88%; left: 7%; } /* x btn pause	*/
   
   60%  { opacity: 1; top: 88%; left: 7%; } /* x btn pause	*/
   62%  { opacity: 1; top: 89%; left: 7%; } /* x btn press	*/
   63%  { opacity: 1; top: 88%; left: 7%; } /* x btn up	*/
   70%  { opacity: 1; top: 88%; left: 7%; } /* x btn pause	*/
   
   85%  { opacity: 1; top: 120%; left: 50%; } /* fade   */
   95%  { opacity: 0; top: 120%; left: 50%; } /* fade   */
   100% { opacity: 0; top: 120%; left: 50%; } /* fade   */
 }
 
 .g-cltt .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 7s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: finger-cancel-tip;
	}
	
@keyframes ped-msg1-cltt {
  0%   { opacity: 1; }
  38%  { opacity: 1; }
  39%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-cltt .ped-msg1 {
	animation-duration: 7s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: ped-msg1-cltt;
	}

@keyframes ped-msg-enter-tip-cltt {
  0%   { opacity: 0; }
  38%  { opacity: 0; }
  39%  { opacity: 1; }
  63%  { opacity: 1; }
  64% { opacity: 0; }
  100% { opacity: 0; }
}

.g-cltt .ped-msg-enter-tip {
	animation-duration: 7s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: ped-msg-enter-tip-cltt;
	}

@keyframes ped-msg-present-cltt {
  0%   { opacity: 0; }
  63%   { opacity: 0; }
  64%  { opacity: 1; }
  90%  { opacity: 1; }
  95% { opacity: 0; }
  100% { opacity: 0; }
}

.g-cltt .ped-msg-present {
	animation-duration: 7s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: ped-msg-present-cltt;
	}
	
@keyframes cltt-enter {
  0%   { content: ' 0.00'; }
  100%   { content: ' 0.00'; }
}

.g-cltt .ped-msg-enter-tip p:after {
	animation: cltt-enter steps(1,end) 7s infinite; 
	}


/*   Animation: passenger e-receipts   */
	
.ped-msg-qr { 
	width: 111px;
	height: 81px;
	background: url(../img/ped-qrcode.png) no-repeat left top;
	background-size: 111px 81px;
	position: absolute; 
	top: 0; 
	left: 0; 
	}
	
.g-rper .g-ped-center .img-pinpad { margin-left: -130px; margin-bottom: 110px; }
	
.g-rper .img-phone {
	position: absolute;
	top: 20px;
	margin-left: -70px;
	}
	
@keyframes phone-scan {
  0%   { opacity: 0; margin-left: 130px; }
  7%  { opacity: 0; margin-left: 130px; top: 40px; }
  11%  { opacity: 1; }
  13%  { opacity: 1; margin-left: -70px; top: 20px; }
  93%  { opacity: 1; margin-left: -70px; top: 20px; }
  100% { opacity: 0; margin-left: 130px; top: 40px; }
}

.g-rper .img-phone {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
	animation-name: phone-scan;
	}
	
@keyframes qr-scope {
  0%   { opacity: 0; }
  7%  { opacity: 0; }
  11%  { opacity: 0; }
  27%  { opacity: 1; }
  64%  { opacity: 1; }
  100% { opacity: 0; }
}

.g-rper .img-qr-container {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
	animation-name: qr-scope;
	}
	
@keyframes ereceipt {
  0%   { opacity: 0; }
  48%  { opacity: 0; }
  52%  { opacity: 1; }
  100% { opacity: 1; }
}

.g-rper .img-e-receipt {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
	animation-name: ereceipt;
	}
	
@keyframes qr-focus {
  13%  { filter: blur(6px); }
  27%  { opacity: 1; filter: blur(0px); }
}

.g-rper .img-qrcode {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
	animation-name: qr-focus;
	}
	
@keyframes qr-scanner {
  7%  { opacity: 0; }
  26%  { opacity: 0; top: 10px; }
  30%  { opacity: 1; }
  40%  { opacity: 1; }
  42%  { top: 145px; }
  44%  { opacity: 0; }
  100%  { opacity: 0; top: 145px; }
}

.g-rper .scanner {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: qr-scanner;
	}
	
@keyframes qr-reader {
  7%  { opacity: 0; }
  24%  { opacity: 0; }
  32%  { opacity: 1; }
  34%  { opacity: 0; }
  35%  { opacity: 1; }
  36%  { opacity: 0; }
  37%  { opacity: 1; }
  42%  { opacity: 1; }
  45%  { opacity: 0; }
  100%  { opacity: 0; }
}

.g-rper .reader {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: qr-reader;
	}
	
/*   Animation: printing receipts   */
	
@keyframes img-hand-point-receipt {
  0%   { opacity: 0; top: 110%; left: 80%; }
  20%  { opacity: 0; top: 110%; left: 80%; }
  30%  { opacity: 1; top: 76%; left: 56%; }
  34%  { opacity: 1; top: 76%; left: 56%; }
  35%  { opacity: 1; top: 77%; left: 56%; }
  36%  { opacity: 1; top: 76%; left: 56%; }
  40%  { opacity: 1; top: 76%; left: 56%; }
  50%  { opacity: 0; top: 110%; left: 80%; }
  100% { opacity: 0; top: 110%; left: 80%; }
}

.g-r-pr .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-receipt;
	}
	
@keyframes img-hand-point-receipt2 {
  0%   { opacity: 0; top: 110%; left: 80%; }
  60%  { opacity: 0; top: 110%; left: 80%; }
  70%  { opacity: 1; top: 76%; left: 70%; }
  74%  { opacity: 1; top: 76%; left: 70%; }
  75%  { opacity: 1; top: 77%; left: 70%; }
  76%  { opacity: 1; top: 76%; left: 70%; }
  80%  { opacity: 1; top: 76%; left: 70%; }
  90%  { opacity: 0; top: 110%; left: 80%; }
  100% { opacity: 0; top: 110%; left: 80%; }
}

.g-r-pr .alt-row .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-receipt2;
	}


/*   Animation: print a cash receipt   */
	
@keyframes img-hand-point-pcr {
/*   0%  { opacity: 1; top: 63%; left: 56%; } // print receipt button (dashboard)  */

  0%   { opacity: 0; top: 110%; left: 66%; }
  10%  { opacity: 0; top: 110%; left: 66%; }
  20%  { opacity: 1; top: 62%; left: 56%; }
  24%  { opacity: 1; top: 62%; left: 56%; }
  25%  { opacity: 1; top: 63%; left: 56%; }
  26%  { opacity: 1; top: 62%; left: 56%; }
  30%  { opacity: 1; top: 62%; left: 56%; }
  35%  { opacity: 1; top: 85%; left: 62%; }
  40%  { opacity: 1; top: 85%; left: 62%; }
  45%  { opacity: 1; top: 62%; left: 56%; }
  50%  { opacity: 1; top: 62%; left: 56%; }
  51%  { opacity: 1; top: 63%; left: 56%; }
  52%  { opacity: 1; top: 62%; left: 56%; }
  57%  { opacity: 1; top: 62%; left: 56%; }
  67%  { opacity: 0; top: 110%; left: 66%; }
  100% { opacity: 0; top: 110%; left: 66%; }
}

.g-r-pcr .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-pcr;
	}
	
@keyframes img-ss2-pcr {
  0%   { opacity: 0; }
  33%  { opacity: 0; }
  37%  { opacity: 1; }
  95%  { opacity: 1; }
  100% { opacity: 0; }
}

.g-r-pcr img.ss.ss-x {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss2-pcr;
	}
	
	
/*   Animation: print a receipt from earlier   */
	
@keyframes img-hand-point-pre {
/*    0%  { opacity: 1; top: 23%; left: 9%; } // print receipt button (dashboard)   */
/*    0%  { opacity: 1; top: 15%; left: 9%; } // last 24 hours button   */
/*    0%  { opacity: 1; top: 41%; left: 83%; } // details button   */
/*    0%  { opacity: 1; top: 50%; left: 33%; } // print button   */

  0%   { opacity: 0; top: 110%; left: 66%; }
  5%   { opacity: 0; top: 110%; left: 66%; }
  10%  { opacity: 1; top: 23%; left: 9%; }
  12%  { top: 23%; left: 9%; }
  12.5%  { top: 24%; left: 9%; }
  13%  { top: 23%; left: 9%; }
  17%  { top: 23%; left: 9%; }
  
  20%  { top: 15%; left: 9%; }
  22%  { top: 15%; left: 9%; }
  22.5%  { top: 16%; left: 9%; }
  23%  { top: 15%; left: 9%; }
  26%  { top: 15%; left: 9%; }
  30%  { top: 15%; left: 9%; }
  
  40%  { top: 41%; left: 83%; }
  42%  { top: 41%; left: 83%; }
  42.5%  { top: 42%; left: 83%; }
  43%  { top: 41%; left: 83%; }
  46%  { top: 41%; left: 83%; }
  
  55%  { top: 50%; left: 33%; }
  57%  { top: 50%; left: 33%; }
  57.5%  { top: 51%; left: 33%; }
  58%  { top: 50%; left: 33%; }
  61%  { opacity: 1; top: 50%; left: 33%; }
  
  70%  { opacity: 0; top: 110%; left: 66%; }
  100% { opacity: 0; top: 110%; left: 66%; }	

}

.g-r-pre .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-pre;
	}
	
@keyframes img-ss2-pre {
  0%   { opacity: 0; }
  13%  { opacity: 0; }
  15%  { opacity: 1; }
  25%  { opacity: 1; }
  26%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-r-pre img.ss.ss-x {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss2-pre;
	}
	
@keyframes img-ss3-pre {
  0%   { opacity: 0; }
  23%  { opacity: 0; }
  25%  { opacity: 1; }
  45%  { opacity: 1; }
  46%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-r-pre img.ss.ss-x.ss-3 {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss3-pre;
	}
	
@keyframes img-ss4-pre {
  0%   { opacity: 0; }
  43%  { opacity: 0; }
  45%  { opacity: 1; }
  90%  { opacity: 1; }
  95%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-r-pre img.ss.ss-x.ss-4 {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss4-pre;
	}

/*   Animation: custom receipts   */
	
@keyframes img-hand-point-cr {
/*   0%  { opacity: 1; top: 63%; left: 56%; } // print receipt button (dashboard)  */
/*   0%  { opacity: 1; top: 77%; left: 59%; } // custom receipt button  */

  0%   { opacity: 0; top: 110%; left: 66%; }
  7%  { opacity: 0; top: 110%; left: 66%; }
  
  15%  { opacity: 1; top: 62%; left: 56%; }
  16%  { top: 62%; left: 56%; }
  17%  { top: 63%; left: 56%; }
  18%  { top: 62%; left: 56%; }
  20%  { top: 62%; left: 56%; }
  
  26%  { top: 77%; left: 59%; }
  28%  { top: 77%; left: 59%; }
  29%  { top: 78%; left: 59%; }
  30%  { top: 77%; left: 59%; }
  34%  { top: 77%; left: 59%; }
  
  40%  { top: 20%; left: 13%; } /* number 1 move to	*/
  42%  { top: 20%; left: 13%; } /* number 1	pause 	*/
  43%  { top: 21%; left: 13%; } /* number 1 press	*/
  44%  { top: 20%; left: 13%; } /* number 1	up 		*/
  45%  { top: 20%; left: 13%; } /* number 1	pause 	*/
  
  50%  { top: 38%; left: 24%; } /* number 5 move to	*/
  52%  { top: 38%; left: 24%; } /* number 5 pause	*/
  53%  { top: 39%; left: 24%; } /* number 5 press	*/
  54%  { top: 38%; left: 24%; } /* number 5	up		*/
  55%  { top: 38%; left: 24%; } /* number 5	pause   */
  
  63%  { top: 40%; left: 70%; } /* tip field move to	*/
  65%  { top: 40%; left: 70%; } /* tip field pause	*/
  66%  { top: 41%; left: 70%; } /* tip field press	*/
  67%  { top: 40%; left: 70%; } /* tip field up		*/
  69%  { top: 40%; left: 70%; } /* tip field pause   */
  
  74%  { top: 20%; left: 24%; } /* number 2 move to	*/
  76%  { top: 20%; left: 24%; } /* number 2	pause 	*/
  77%  { top: 21%; left: 24%; } /* number 2 press	*/
  78%  { top: 20%; left: 24%; } /* number 2	up 		*/
  80%  { top: 20%; left: 24%; } /* number 2	pause 	*/
  
  86%  { top: 73%; left: 70%; } /* enter move to	*/
  88%  { top: 73%; left: 70%; } /* enter pause	*/
  89%  { top: 74%; left: 70%; } /* enter press	*/
  90%  { top: 73%; left: 70%; } /* enter up		*/
  92%  { top: 73%; left: 70%; opacity: 1; } /* enter pause   */
  
  
  96%  { opacity: 0; top: 110%; left: 66%; }
  100% { opacity: 0; top: 110%; left: 66%; } 
}

.g-r-cr .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-cr;
	}
	
@keyframes img-ss2-cr {
  0%   { opacity: 0; }
  18%  { opacity: 0; }
  20%  { opacity: 1; }
  32%  { opacity: 1; }
  33%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-r-cr img.ss.ss-x {
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss2-cr;
	}
	
@keyframes img-ss3-cr {
  0%   { opacity: 0; }
  30%  { opacity: 0; }
  32%  { opacity: 1; }
  70%  { opacity: 1; }
  71%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-r-cr img.ss.ss-x.ss-3 {
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss3-cr;
	}
	
@keyframes img-ss4-cr {
  0%   { opacity: 0; }
  67%  { opacity: 0; }
  69%  { opacity: 1; }
  93%  { opacity: 1; }
  97%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-r-cr img.ss.ss-x.ss-4 {
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss4-cr;
	}
	
@keyframes cr-fare {
  0%   { content: ' 0.00'; }
  44%  { content: ' 1.00'; }
  54%  { content: '15.00'; }
  98%  { content: '0.00'; }
}
	
@keyframes cr-tip {
  0%   { content: ' 0.00'; }
  78%  { content: ' 2.00'; }
  98%  { content: '0.00'; }
}

@keyframes cr-fade {
  0%   { opacity: 0; }
  30%  { opacity: 0; }
  32%  { opacity: 1; }
  94%  { opacity: 1; }
  96%  { opacity: 0; }
  100% { opacity: 0; }
}

.guide .panel .cr-fare, .guide .panel .cr-tip {
	position: absolute;
	left: 62%;
	top: 18%;
	text-align: right;
	width: 80px;
	height: 36px;
	animation: cr-fade 15s infinite;
	}
	
.guide .panel .cr-tip {
	position: absolute;
	left: 62%;
	top: 36%;
	}

.guide .panel .cr-fare:after, .guide .panel .cr-tip:after {
	font-weight: normal;
	font-size: 32px;
	line-height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	content: ' 0.00';
	width: 80px;
	height: 36px;
	display: inline-block;
	content: '';
	overflow: visible;
	}
	
.guide .panel .cr-fare:after {
	animation: cr-fare steps(1,end) 15s infinite;
	}
	
.guide .panel .cr-tip:after {
	animation: cr-tip steps(1,end) 15s infinite;
	}
	
/*   Animation: view shift details   */
	
@keyframes img-hand-point-vsd {
/*    0%  { opacity: 1; top: 21%; left: 33%; } // shift details button (dashboard)  */

  0%   { opacity: 0; top: 110%; left: 66%; }
  10%  { opacity: 0; top: 110%; left: 66%; }
  20%  { opacity: 1; top: 21%; left: 33%; }
  24%  { opacity: 1; top: 21%; left: 33%; }
  25%  { opacity: 1; top: 22%; left: 33%; }
  26%  { opacity: 1; top: 21%; left: 33%; }
  30%  { opacity: 1; top: 21%; left: 33%; }
  40%  { opacity: 0; top: 110%; left: 66%; }
  100% { opacity: 0; top: 110%; left: 66%; }
}

.g-rp-vsd .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-vsd;
	}
	
@keyframes img-ss2-vsd {
  0%   { opacity: 0; }
  28%  { opacity: 0; }
  33%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

.g-rp-vsd img.ss.ss-x {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss2-vsd;
	}

/*   Animation: view your jobs   */

@keyframes img-hand-point-vyj {
/*    0%  { opacity: 1; top: 23%; left: 9%; } // print receipt button (dashboard)   */
/*    0%  { opacity: 1; top: 15%; left: 9%; } // last 24 hours button   */
/*    0%  { opacity: 1; top: 32%; left: 83%; } // details button   */

  0%   { opacity: 0; top: 110%; left: 66%; }
  5%   { opacity: 0; top: 110%; left: 66%; }
  10%  { opacity: 1; top: 23%; left: 9%; }
  12%  { top: 23%; left: 9%; }
  12.5%  { top: 24%; left: 9%; }
  13%  { top: 23%; left: 9%; }
  17%  { top: 23%; left: 9%; }
  
  20%  { top: 15%; left: 9%; }
  22%  { top: 15%; left: 9%; }
  22.5%  { top: 16%; left: 9%; }
  23%  { top: 15%; left: 9%; }
  26%  { top: 15%; left: 9%; }
  30%  { top: 15%; left: 9%; }
  
  40%  { top: 32%; left: 83%; }
  42%  { top: 32%; left: 83%; }
  42.5%  { top: 33%; left: 83%; }
  43%  { top: 32%; left: 83%; }
  46%  { top: 32%; left: 83%; opacity: 1; }
  
  60%  { top: 110%; left: 66%; opacity: 0; }
  100% { top: 110%; left: 66%; opacity: 0; }	

}

.g-rp-vyj .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-vyj;
	}
	
@keyframes img-ss2-vyj {
  0%   { opacity: 0; }
  13%  { opacity: 0; }
  15%  { opacity: 1; }
  25%  { opacity: 1; }
  26%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-rp-vyj img.ss.ss-x {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss2-vyj;
	}
	
@keyframes img-ss3-vyj {
  0%   { opacity: 0; }
  23%  { opacity: 0; }
  25%  { opacity: 1; }
  45%  { opacity: 1; }
  46%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-rp-vyj img.ss.ss-x.ss-3 {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss3-vyj;
	}
	
@keyframes img-ss4-vyj {
  0%   { opacity: 0; }
  43%  { opacity: 0; }
  45%  { opacity: 1; }
  90%  { opacity: 1; }
  95%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-rp-vyj img.ss.ss-x.ss-4 {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss4-vyj;
	}
	
/*   Animation: query a job   */

@keyframes img-hand-point-qj {
/*    0%  { opacity: 1; top: 23%; left: 9%; } // print receipt button (dashboard)   */
/*    0%  { opacity: 1; top: 15%; left: 9%; } // last 24 hours button   */
/*    0%  { opacity: 1; top: 32%; left: 83%; } // details button   */
/*    0%  { opacity: 1; top: 50%; left: 33%; } // print button   */

  0%   { opacity: 0; top: 110%; left: 66%; }
  5%   { opacity: 0; top: 110%; left: 66%; }
  10%  { opacity: 1; top: 23%; left: 9%; }
  12%  { top: 23%; left: 9%; }
  12.5%  { top: 24%; left: 9%; }
  13%  { top: 23%; left: 9%; }
  17%  { top: 23%; left: 9%; }
  
  20%  { top: 15%; left: 9%; }
  22%  { top: 15%; left: 9%; }
  22.5%  { top: 16%; left: 9%; }
  23%  { top: 15%; left: 9%; }
  26%  { top: 15%; left: 9%; }
  30%  { top: 15%; left: 9%; }
  
  40%  { top: 32%; left: 83%; }
  42%  { top: 32%; left: 83%; }
  42.5%  { top: 33%; left: 83%; }
  43%  { top: 32%; left: 83%; }
  46%  { top: 32%; left: 83%; }
  
  55%  { top: 65%; left: 33%; }
  57%  { top: 65%; left: 33%; }
  57.5%  { top: 66%; left: 33%; }
  58%  { top: 65%; left: 33%; }
  61%  { opacity: 1; top: 65%; left: 33%; }
  
  70%  { opacity: 0; top: 110%; left: 66%; }
  75%  { opacity: 0; top: 110%; left: 66%; }
  
  84%  { opacity: 1; top: 5%; left: 87%; }
  86%  { top: 5%; left: 87%; }
  86.5%  { top: 6%; left: 87%; }
  87%  { top: 5%; left: 87%; }
  90%  { opacity: 1; top: 5%; left: 87%; }
  
  95% { opacity: 0; top: 110%; left: 66%; }
  100% { opacity: 0; top: 110%; left: 66%; }	

}

.g-rp-qj .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-qj;
	}
	
@keyframes img-ss2-qj {
  0%   { opacity: 0; }
  13%  { opacity: 0; }
  15%  { opacity: 1; }
  25%  { opacity: 1; }
  26%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-rp-qj img.ss.ss-x {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss2-qj;
	}
	
@keyframes img-ss3-qj {
  0%   { opacity: 0; }
  23%  { opacity: 0; }
  25%  { opacity: 1; }
  45%  { opacity: 1; }
  46%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-rp-qj img.ss.ss-x.ss-3 {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss3-qj;
	}
	
@keyframes img-ss4-qj {
  0%   { opacity: 0; }
  43%  { opacity: 0; }
  45%  { opacity: 1; }
  90%  { opacity: 1; }
  95%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-rp-qj img.ss.ss-x.ss-4 {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss4-qj;
	}
	
@keyframes img-ss5-qj {
  0%   { opacity: 0; }
  58%  { opacity: 0; }
  60%  { opacity: 1; }
  90%  { opacity: 1; }
  95%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-rp-qj img.ss.ss-x.ss-5 {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss5-qj;
	}
	
@keyframes img-ss6-qj {
  0%   { opacity: 0; }
  70%  { opacity: 0; }
  75%  { opacity: 1; }
  94%  { opacity: 1; }
  99%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-rp-qj img.ss.ss-x.ss-6 {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss6-qj;
	}
	
/*   Animation: view your payments   */
	
@keyframes img-hand-point-vyp {
/*    0%  { opacity: 1; top: 23%; left: 56%; } // payments button (dashboard)   */
/*    0%  { opacity: 1; top: 27%; left: 85%; } // details button    */

  0%   { top: 110%; left: 66%; opacity: 0; }
  10%  { top: 110%; left: 66%; opacity: 0; }
  20%  { top: 23%; left: 56%; opacity: 1; }
  24%  { top: 23%; left: 56%; }
  25%  { top: 24%; left: 56%; }
  26%  { top: 23%; left: 56%; }
  34%  { top: 23%; left: 56%; }
  
  40%  { top: 27%; left: 85%; }
  44%  { top: 27%; left: 85%; }
  45%  { top: 28%; left: 85%; }
  46%  { top: 27%; left: 85%; }
  50%  { top: 27%; left: 85%; opacity: 1; }
  
  60%  { top: 110%; left: 66%; opacity: 0; }
  100% { top: 110%; left: 66%; opacity: 0; }	
}

.g-rp-vyp .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-vyp;
	}
	
@keyframes img-ss2-vyp {
  0%   { opacity: 0; }
  26%  { opacity: 0; }
  28%  { opacity: 1; }
  50%  { opacity: 1; }
  51%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-rp-vyp img.ss.ss-x {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss2-vyp;
	}
	
@keyframes img-ss3-vyp {
  0%   { opacity: 0; }
  46%  { opacity: 0; }
  48%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

.g-rp-vyp img.ss.ss-x.ss-3 {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss3-vyp;
	}
	
/*   Animation: query a payment   */

@keyframes img-hand-point-qp {
/*    0%  { opacity: 1; top: 23%; left: 56%; } // payments button (dashboard)   */
/*    0%  { opacity: 1; top: 27%; left: 85%; } // details button    */
/*    0%  { opacity: 1; top: 63%; left: 72%; } // query button   */

  0%   { top: 110%; left: 66%; opacity: 0; }
  5%   { top: 110%; left: 66%; opacity: 0; }
  10%  { top: 23%; left: 56%; opacity: 1; }
  12%  { top: 23%; left: 56%; }
  12.5%  { top: 24%; left: 56%; }
  13%  { top: 23%; left: 56%; }
  17%  { top: 23%; left: 56%; }
  
  23%  { top: 27%; left: 85%; }
  25%  { top: 27%; left: 85%; }
  25.5%  { top: 28%; left: 85%; }
  26%  { top: 27%; left: 85%; }
  28%  { top: 27%; left: 85%; }
  32%  { top: 27%; left: 85%; }
  
  38%  { top: 63%; left: 72%; }
  40%  { top: 63%; left: 72%; }
  40.5%  { top: 64%; left: 72%; }
  41%  { top: 63%; left: 72%; }
  44%  { top: 63%; left: 72%; opacity: 1; }
  
  60%  { top: 110%; left: 66%; opacity: 0; }
  65%  { top: 110%; left: 66%; opacity: 0; }
  
  74%  { opacity: 1; top: 5%; left: 87%; }
  76%  { top: 5%; left: 87%; }
  76.5%  { top: 6%; left: 87%; }
  77%  { top: 5%; left: 87%; }
  80%  { opacity: 1; top: 5%; left: 87%; }
  
  90% { opacity: 0; top: 110%; left: 66%; }
  100% { opacity: 0; top: 110%; left: 66%; }	

}

.g-rp-qp .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-qp;
	}
	
@keyframes img-ss2-qp {
  0%   { opacity: 0; }
  13%  { opacity: 0; }
  15%  { opacity: 1; }
  28%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-rp-qp img.ss.ss-x {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss2-qp;
	}
	
@keyframes img-ss3-qp {
  0%   { opacity: 0; }
  26%  { opacity: 0; }
  28%  { opacity: 1; }
  45%  { opacity: 1; }
  46%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-rp-qp img.ss.ss-x.ss-3 {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss3-qp;
	}
	
@keyframes img-ss4-qp {
  0%   { opacity: 0; }
  42%  { opacity: 0; }
  44%  { opacity: 1; }
  85%  { opacity: 1; }
  86%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-rp-qp img.ss.ss-x.ss-4 {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss4-qp;
	}
	
@keyframes img-ss5-qp {
  0%   { opacity: 0; }
  58%  { opacity: 0; }
  60%  { opacity: 1; }
  84%  { opacity: 1; }
  87%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-rp-qp img.ss.ss-x.ss-5 {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss5-qp;
	}
	
/*   Animation: payment frequency   */

.g-rp-pf .ani-wrapper { margin-bottom: 40px }

.cal-dot, .cal-pay {
	width: 20px;
	height: 20px;
	background-color: #FFC324;
	box-sizing: border-box;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	}
	
.cal-pay {
	width: 30px;
	height: 30px;
	padding-top: 5px;
	background-color: #ffffff;
	font-weight: bold;
	font-size: 1.75em;
	text-align: center;
	color: #058839;
	}
	
/*   Animation: payment frequency (Tue/Fri)   */

.cal-dot.fmf	{ top: 55px; left: 153px; animation-name: dot-fmf; }
.cal-dot.fms	{ top: 55px; left: 186px; animation-name: dot-fms; }
.cal-dot.fmsu	{ top: 55px; left: 219px; animation-name: dot-fmsu; }
.cal-dot.fmm	{ top: 88px; left: 21px; animation-name: dot-fmm; }
.cal-pay.fm		{ top: 83px; left: 49px; animation-name: dot-fm; }

.cal-dot.ttt	{ top: 55px; left: 54px; animation-name: dot-ttt; }
.cal-dot.ttw	{ top: 55px; left: 87px; animation-name: dot-ttw; }
.cal-dot.ttth	{ top: 55px; left: 120px; animation-name: dot-ttth; }
.cal-pay.tt		{ top: 50px; left: 148px; animation-name: dot-tt; }

@keyframes dot-fmf {
  0%   { opacity: 0; }
  5%   { opacity: 0; }
  10%  { opacity: 1; }
  50%  { opacity: 1; }
  55%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes dot-fms {
  0%   { opacity: 0; }
  10%  { opacity: 0; }
  15%  { opacity: 1; }
  50%  { opacity: 1; }
  55%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes dot-fmsu {
  0%   { opacity: 0; }
  15%  { opacity: 0; }
  20%  { opacity: 1; }
  50%  { opacity: 1; }
  55%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes dot-fmm {
  0%   { opacity: 0; }
  20%  { opacity: 0; }
  25%  { opacity: 1; }
  50%  { opacity: 1; }
  55%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes dot-fm {
  0%   { opacity: 0; }
  25%  { opacity: 0; }
  30%  { opacity: 1; }
  50%  { opacity: 1; }
  55%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes dot-ttt {
  0%   { opacity: 0; }
  60%   { opacity: 0; }
  65%  { opacity: 1; }
  95%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes dot-ttw {
  0%   { opacity: 0; }
  65%   { opacity: 0; }
  70%  { opacity: 1; }
  95%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes dot-ttth {
  0%   { opacity: 0; }
  70%   { opacity: 0; }
  75%  { opacity: 1; }
  95%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes dot-tt {
  0%   { opacity: 0; }
  75%   { opacity: 0; }
  80%  { opacity: 1; }
  95%  { opacity: 1; }
  100% { opacity: 0; }
}

/*   Animation: payment frequency (weekly)   */

.cal-dot.wt		{ top: 55px; left: 54px; animation-name: dot-wt; }
.cal-dot.ww		{ top: 55px; left: 87px; animation-name: dot-ww; }
.cal-dot.wth	{ top: 55px; left: 120px; animation-name: dot-wth; }
.cal-dot.wf		{ top: 55px; left: 153px; animation-name: dot-wf; }
.cal-dot.ws		{ top: 55px; left: 186px; animation-name: dot-ws; }
.cal-dot.wsu	{ top: 55px; left: 219px; animation-name: dot-wsu; }
.cal-dot.wm		{ top: 88px; left: 21px; animation-name: dot-wm; }
.cal-pay.wp		{ top: 83px; left: 49px; animation-name: dot-wp; }

@keyframes dot-wt {
  0%   { opacity: 0; }
  5%   { opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes dot-ww {
  0%   { opacity: 0; }
  10%  { opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes dot-wth {
  0%   { opacity: 0; }
  15%  { opacity: 0; }
  20%  { opacity: 1; }
  85%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes dot-wf {
  0%   { opacity: 0; }
  20%  { opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes dot-ws {
  0%   { opacity: 0; }
  25%  { opacity: 0; }
  30%  { opacity: 1; }
  85%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes dot-wsu {
  0%   { opacity: 0; }
  30%  { opacity: 0; }
  35%  { opacity: 1; }
  85%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes dot-wm {
  0%   { opacity: 0; }
  35%  { opacity: 0; }
  40%  { opacity: 1; }
  85%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes dot-wp {
  0%   { opacity: 0; }
  40%  { opacity: 0; }
  45%  { opacity: 1; }
  85%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}

/*   Animation: payment frequency (Mon-Fri)   */

.paymf .cal-dot, .paymf .cal-pay {
	animation-duration: 20s;
	}

.cal-dot.dm		{ top: 55px; left: 21px; animation-name: dot-dm; }
.cal-pay.dpt	{ top: 50px; left: 49px; animation-name: dot-dpt; }

.cal-dot.dt		{ top: 55px; left: 54px; animation-name: dot-dt; }
.cal-pay.dpw	{ top: 50px; left: 82px; animation-name: dot-dpw; }

.cal-dot.dw		{ top: 55px; left: 87px; animation-name: dot-dw; }
.cal-pay.dpth	{ top: 50px; left: 115px; animation-name: dot-dpth; }

.cal-dot.dth	{ top: 55px; left: 120px; animation-name: dot-dth; }
.cal-pay.dpf	{ top: 50px; left: 148px; animation-name: dot-dpf; }

.cal-dot.df		{ top: 55px; left: 153px; animation-name: dot-df; }
.cal-dot.ds		{ top: 55px; left: 186px; animation-name: dot-ds; }
.cal-dot.dsu	{ top: 55px; left: 219px; animation-name: dot-dsu; }
.cal-pay.dpm	{ top: 83px; left: 16px; animation-name: dot-dpm; }

@keyframes dot-dm {
  0%   	{ opacity: 0; }
  2.5%  { opacity: 0; }
  5%  	{ opacity: 1; }
  12.5% { opacity: 1; }
  15%  	{ opacity: 0; }
  100% 	{ opacity: 0; }
}

@keyframes dot-dpt {
  0%   	{ opacity: 0; }
  5%  	{ opacity: 0; }
  7.5%  { opacity: 1; }
  12.5% { opacity: 1; }
  15%  	{ opacity: 0; }
  100% 	{ opacity: 0; }
}

@keyframes dot-dt {
  0%   	{ opacity: 0; }
  17.5% { opacity: 0; }
  20%  	{ opacity: 1; }
  27.5% { opacity: 1; }
  30%  	{ opacity: 0; }
  100% 	{ opacity: 0; }
}

@keyframes dot-dpw {
  0%   	{ opacity: 0; }
  20%  	{ opacity: 0; }
  22.5% { opacity: 1; }
  27.5% { opacity: 1; }
  30%  	{ opacity: 0; }
  100% 	{ opacity: 0; }
}

@keyframes dot-dw {
  0%   	{ opacity: 0; }
  32.5% { opacity: 0; }
  35%  	{ opacity: 1; }
  42.5% { opacity: 1; }
  45%  	{ opacity: 0; }
  100% 	{ opacity: 0; }
}

@keyframes dot-dpth {
  0%   	{ opacity: 0; }
  35%  	{ opacity: 0; }
  37.5% { opacity: 1; }
  42.5% { opacity: 1; }
  45%  	{ opacity: 0; }
  100% 	{ opacity: 0; }
}

@keyframes dot-dth {
  0%   	{ opacity: 0; }
  47.5% { opacity: 0; }
  50%  	{ opacity: 1; }
  57.5% { opacity: 1; }
  60%  	{ opacity: 0; }
  100% 	{ opacity: 0; }
}

@keyframes dot-dpf {
  0%   	{ opacity: 0; }
  50%  	{ opacity: 0; }
  52.5% { opacity: 1; }
  57.5% { opacity: 1; }
  60%  	{ opacity: 0; }
  100% 	{ opacity: 0; }
}

@keyframes dot-df {
  0%   	{ opacity: 0; }
  62.5% { opacity: 0; }
  65%  	{ opacity: 1; }
  82.5% { opacity: 1; }
  85%  	{ opacity: 0; }
  100% 	{ opacity: 0; }
}

@keyframes dot-ds {
  0%   	{ opacity: 0; }
  65%  	{ opacity: 0; }
  67.5% { opacity: 1; }
  82.5% { opacity: 1; }
  85%  	{ opacity: 0; }
  100% 	{ opacity: 0; }
}

@keyframes dot-dsu {
  0%   	{ opacity: 0; }
  67.5% { opacity: 0; }
  70%  	{ opacity: 1; }
  82.5% { opacity: 1; }
  85%  	{ opacity: 0; }
  100% 	{ opacity: 0; }
}

@keyframes dot-dpm {
  0%   	{ opacity: 0; }
  70%  	{ opacity: 0; }
  72.5% { opacity: 1; }
  82.5% { opacity: 1; }
  85%  	{ opacity: 0; }
  100% 	{ opacity: 0; }
}


/*   Animation: restart system   */

.g-restart {
	width: 320px;
	height: auto;
	position: relative;
	right: -10px;
	margin-top: 100px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-restart;
	border-bottom: 2px solid #000000;
	}
	
@keyframes img-restart {
  0%   { opacity: 1; }
  85%  { opacity: 1; }
  90%  { opacity: 0; }
  95%  { opacity: 0; }
  100%  { opacity: 1; }
}
	
.img-hand-side {
	width: 300px;
	height: 134px;
	padding: 0;
	margin: 0;
	background-image: url(../img/guide-hand-side.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% auto;
	position: absolute;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-restart;
	}

@keyframes img-hand-restart {
/*    0%  { opacity: 1; top: 1%; left: -33px; } // finger over button   */

  0%   { top: 10%; right: -100%; opacity: 0; }
  5%   { top: 10%; right: -100%; opacity: 0; }
  15%  { top: 1%; right: -33%; opacity: 1; }
  19%  { top: 1%; right: -33%; }
  20%  { top: 2%; right: -33%; }
  40%  { top: 2%; right: -33%; }
  41%  { top: 1%; right: -33%; }
  45%  { top: 1%; right: -33%; opacity: 1; }
  50%   { top: 10%; right: -100%; opacity: 0; }	
  100%   { top: 10%; right: -100%; opacity: 0; }	
}

.g-restart-pop {
	width: 200px;
	height: auto;
	position: absolute;
	left: 95px;
	top: 185px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-restart-pop;
	}

@keyframes img-restart-pop {
  0%   { opacity: 0; }
  40%  { opacity: 0; }
  43%  { opacity: 1; }
  85%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}
	
@keyframes img-hand-point-rs {
/*    0%  { opacity: 1; top: 55%; left: 54%; } // restart button   */

  0%   { top: 110%; left: 66%; opacity: 0; }
  50%  { top: 110%; left: 66%; opacity: 0; }
  60%  { top: 55%; left: 54%; opacity: 1; }
  63%  { top: 55%; left: 54%; }
  64%  { top: 56%; left: 54%; }
  65%  { top: 55%; left: 54%; }
  70%  { top: 55%; left: 54%; opacity: 1; }
  
  80%  { top: 110%; left: 66%; opacity: 0; }
  100% { top: 110%; left: 66%; opacity: 0; }
}

.g-sc-rs .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-rs;
	}
	
.col.g-restart-ani { text-align: right; }


/*   Animation: restart PIN pad   */

@keyframes finger-restart-pin {
/*   0%   { opacity: 1; top: 88%; left: 7%; }  	/* x btn	*/
   
   0%   { opacity: 0; top: 120%; left: 50%; } 
   5%  { opacity: 0; top: 120%; left: 50%; } 
   9%  { opacity: 1; top: 88%; left: 7%; } /* x btn move to	*/
   11%  { opacity: 1; top: 88%; left: 7%; } /* x btn pause	*/
   12%  { opacity: 1; top: 88.5%; left: 7%; } /* x btn press	*/
   32%  { opacity: 1; top: 88.5%; left: 7%; } /* x btn press	*/
   33%  { opacity: 1; top: 88%; left: 7%; } /* x btn up	*/
   
   35%  { top: 100%; left: 30%; } /* move away   */
   39%  { top: 100%; left: 30%; } /* move away   */
   
   42%  { opacity: 1; top: 88%; left: 7%; } /* x btn move to	*/
   43%  { opacity: 1; top: 88%; left: 7%; } /* x btn pause	*/
   45%  { opacity: 1; top: 88.5%; left: 7%; } /* x btn press	*/
   46%  { opacity: 1; top: 88%; left: 7%; } /* x btn up	*/
   48%  { opacity: 1; top: 88%; left: 7%; } /* x btn pause	*/
 
   60%  { opacity: 0; top: 120%; left: 50%; } /* fade   */
   100%  { opacity: 0; top: 120%; left: 50%; } /* fade   */
 }

.g-sc-rpp .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: finger-restart-pin;
	}
	
@keyframes ped-msg1-rpp {
  0%   { opacity: 1; }
  19%  { opacity: 1; }
  21%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-sc-rpp .ped-msg1 {
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: ped-msg1-rpp;
	}
	
@keyframes ped-msg-shutdown {
  0%   { opacity: 0; }
  21%  { opacity: 0; }
  22%  { opacity: 1; }
  26%  { opacity: 1; }
  27%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-sc-rpp .ped-msg-shutdown {
	position: absolute;
	top: 3px;
	left: 5px;
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: ped-msg-shutdown;
	}
	
@keyframes ped-off {
  0%   { opacity: 0; }
  27%  { opacity: 0; }
  28%  { opacity: 1; }
  45%  { opacity: 1; }
  46%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-sc-rpp .ped-off {
	background-color: #000000;
	width: 111px;
	height: 81px;
	position: absolute;
	top: 0px;
	left: 0px;
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: ped-off;
	}
	
@keyframes ped-msg-start1 {
  0%   { opacity: 0; }
  46%  { opacity: 0; }
  47%  { opacity: 1; }
  56%  { opacity: 1; }
  57%  { opacity: 0; }
  64%  { opacity: 0; }
  65%  { opacity: 1; }
  75%  { opacity: 1; }
  76%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-sc-rpp .ped-msg-start1 {
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: ped-msg-start1;
	}
	
.g-sc-rpp .ped-msg-start1 img {
	width: 100px;
	height: 16px;
	margin: 20px 0 4px 4px;
	display: block;
	}
	
@keyframes ped-msg-start2 {
  0%   { opacity: 0; }
  56%  { opacity: 0; }
  57%  { opacity: 1; }
  64%  { opacity: 1; }
  65%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-sc-rpp .ped-msg-start2 {
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: ped-msg-start2;
	}
	
@keyframes ped-msg-welcome {
  0%   { opacity: 0; }
  76%  { opacity: 0; }
  77%  { opacity: 1; }
  97%  { opacity: 1; }
  99%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-sc-rpp .ped-msg-welcome {
	position: absolute;
	top: 3px;
	left: 5px;
	font-size: 1.125em !important;
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: ped-msg-welcome;
	}

	
/*   Animation: check your alerts   */
	
@keyframes img-hand-point-cya {
/*    0%  { opacity: 1; top: 76%; left: 9%; } // alerts button (dashboard)   */
/*    0%  { opacity: 1; top: 21%; left: 88%; } // arrow button    */

  0%   { top: 110%; left: 66%; opacity: 0; }
  10%  { top: 110%; left: 66%; opacity: 0; }
  20%  { top: 62%; left: 9%; opacity: 1; }
  24%  { top: 62%; left: 9%; }
  25%  { top: 63%; left: 9%; }
  26%  { top: 62%; left: 9%; }
  34%  { top: 62%; left: 9%; }
  
  50%  { top: 21%; left: 88%; }
  54%  { top: 21%; left: 88%; }
  55%  { top: 22%; left: 88%; }
  56%  { top: 21%; left: 88%; }
  60%  { top: 21%; left: 88%; opacity: 1; }
  
  70%  { top: 110%; left: 66%; opacity: 0; }
  100% { top: 110%; left: 66%; opacity: 0; }	
}

.g-sc-cya .img-hand-point {
	width: 160px;
	height: 212px;
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: img-hand-point-cya;
	}
	
@keyframes img-ss2-cya {
  0%   { opacity: 0; }
  27%  { opacity: 0; }
  29%  { opacity: 1; }
  58%  { opacity: 1; }
  59%  { opacity: 0; }
  100% { opacity: 0; }
}

.g-sc-cya img.ss.ss-x {
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss2-cya;
	}
	
@keyframes img-ss3-cya {
  0%   { opacity: 0; }
  56%  { opacity: 0; }
  57%  { opacity: 1; }
  95%  { opacity: 1; }
  100% { opacity: 0; }
}

.g-sc-cya img.ss.ss-x.ss-3 {
	animation-duration: 15s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: img-ss3-cya;
	}



/*  Onboarding bits  */

.create .main .content { padding: 0 0 10px; }

.create.account .header .nav { display: none }

/* .short-form label, .account .panel .short-form label { display: none } */

.form-item label em, .account .panel label em { 
	font-style: normal; 
	font-weight: 600;
	text-transform: none; 
	}

.create.account .panel h2 { 
	font-size: 1.45em; 
	margin: 0.5em 0 0.35em;
	}

.create.account .panel p.intro { 
	font-weight: 600;
	font-size: 1.125em; 
	line-height: 120%;
	margin: 0 0 0.75em;
	}
	
.create.account .panel .form-item.multi-input:last-of-type {
	border-bottom: 1px solid rgba(35, 55, 103, 0.3);
	padding-bottom: 6px;
	}
	
.create.account .panel .actions {
	padding: 12px 0 4px;
	}
	
.account .bank-account-norms label {
	width: 85%;
	display: block;
	text-transform: none !important;
}

.account .bank-account-norms input {
	margin-top: 17px;
}

.form-account h3 {
	text-transform: initial;
	font-size: 1.125em;
	margin-bottom: 0;
	}

@media only screen and (min-width: 768px) { 
	.terms-top {
	padding-top: 20px;
}
.account .form-item.bank-account-norms label { width: 93%; }
}

.create.account .panel fieldset { border-top: 1px solid rgba(35, 55, 103, 0.3); }
.create.account .panel fieldset.short-form { border-top: 0 }
.create.account .panel .form-item.multi-input { border-top: 1px solid rgba(35, 55, 103, 0.3); border-bottom: 0; }
.create.account .panel .form-item.multi-input:first-of-type { border-top: 0; }
.summary .account-item:first-of-type { border-top: 1px solid rgba(35, 55, 103, 0.3); }

.summary .account-item { 
	padding: 12px 0;
	border-bottom: 1px solid rgba(35, 55, 103, 0.3); 
	border-top: 0; 
	}
	
.account-item .btn2.edit { 
	bottom: auto;
	}
	
.create.account .summary .panel p.intro { margin-bottom: 1.0em }

.summary .account-item p {
	padding: 8px 0;
	margin: 0 10px;
	font-size: 1.125em;
	border-bottom: 1px solid rgba(35, 55, 103, 0.15);
	}
	
.summary .account-item p:first-of-type { padding-top: 3px }
.summary .account-item p:last-of-type { border-bottom: 0 }

.summary .account-item ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	}

.summary .account-item li {
	padding: 3px 0;
	margin: 0 10px;
	font-size: 1.125em;
	position: relative;
	}

.summary .account-item li em {
	font-weight: bold;
	font-style: normal;
	position: absolute;
	left: 50%;
	}
	
.summary h3 em {
	font-style: normal;
	text-transform: none;
	position: absolute;
	left: 50%;
	}

.create.account .dd-menu { width: 100%; margin-bottom: 10px; }

.create.account .panel .actions { padding: 15px 0 10px; }

.actions .skip {
	font-weight: bold;
	font-size: 1.375em;
	line-height: 100%;
	text-align: center;
	margin: 0.75em 0 0.5em;
	}

.actions .skip a {
	color: #222222;
	display: inline-block;
	text-decoration: none;
	border-bottom: 2px solid rgba(0, 0, 0, 0.5);
	transition: border-bottom-color 0.25s;
	-webkit-transition: border-bottom-color 0.25s;
	}
	
.actions .skip a:hover { 
	color: #000000;
	border-bottom: 2px solid #000000;
	}
	

	
/* Tab styles */

.tabs {
	margin: 0;
	padding: 6px 5px;
	text-align: center;
	}

.tabs li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: inline-block;
	vertical-align: top;
	width: 19%;
	}

.tabs li a {
	width: 66px;
	height: 66px;
	font-weight: bold;
	font-size: 0.9375em;
	line-height: 95%;
	text-decoration: none;
	text-transform: uppercase;
	vertical-align: middle;
	margin: 0 auto;
	padding: 17px 0;
	color: #222222;
	display: block;
	background: transparent;
	border: 2px solid #222222;
	box-sizing: border-box;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	border-radius: 35px;
	transition: border-color 0.25s, color 0.25s;
	-webkit-transition: border-color 0.25s, color 0.25s;
	}
	
.tabs li a:hover {
	color: #000000;
	border-color: #000000;
	}

.tabs li.single a { padding: 24px 0; }


.tabs li a.active, .tabs li a.active:hover {
	background-color: #222222;
	border-color: #222222;
	color: #ffffff;
	}
	
	
/* Table styles */
	
.trans-table.panel, .pay-table.panel {
	padding: 0 10px 20px;
	position: relative;
	}
	
table {
	width: 100%;
	border-collapse: collapse;
	box-sizing: border-box;
	}
	
th {
	font-weight: 600;
    font-size: 0.9375em;
    line-height: 100%;
    text-transform: uppercase;
    text-align: left;
    vertical-align: middle;
    padding: 16px 5px 10px;
	}
	
thead tr {
	border-bottom: 2px solid rgba(35, 55, 103, 0.3);
	}
	
tbody tr {
	border-bottom: 1px solid rgba(35, 55, 103, 0.15);
	}
	
td {
	font-weight: 600;
    font-size: 1.125em;
    line-height: 120%;
    padding: 8px 5px;
    position: relative;
	}
	
td span {
	font-weight: normal;
    font-size: 0.778em;
    line-height: 100%;
    display: block;
	}
	
.trans-table th:nth-of-type(4n + 2) { text-align: right; }
.trans-table th:nth-of-type(4n + 3) { text-align: center; }
	
.trans-table td:first-of-type {
    text-align: right;
    width: 23%;
	}
	
.trans-table td:nth-of-type(4n + 2) {
    text-align: right;
    width: 27%;
	}
	
.trans-table td:nth-of-type(4n + 3) {
    text-align: center;
    width: 33%;
	}

.trans-table td span {
	font-size: 0.94em;
}
	
.pay-table.panel { padding-top: 20px; margin-top: 20px; }

.pay-table tr { vertical-align: top }
 
.pay-table tbody td { font-size: 1.0em } 
.pay-table td:first-of-type { white-space: nowrap }
.pay-table th:nth-of-type(4n + 3), .pay-table td:nth-of-type(4n + 3) { text-align: right; padding-right: 10px; }
.pay-table th:nth-of-type(4n + 4), .pay-table td:nth-of-type(4n + 4) { text-align: right; padding-right: 10px; }

.pay-table-next { margin: 15px 0 25px; }
.pay-table-next td:nth-of-type(4n + 2) { text-align: right; }
.pay-table-next td:last-of-type { width: 13px }
.pay-table-next tr { border-top: 2px solid rgba(35, 55, 103, 0.5); border-bottom: 2px solid rgba(35, 55, 103, 0.5); }

.pay-table table.row-select td.empty { padding: 10px; }

.payments.details .panel .actions .btn2 {
	width: 100%;
	margin: 40px 0 0;
	}

.inbox thead { display: none; }
	
.inbox td:first-of-type {
    width: 100%;
    display: block;
    padding: 15px 5px 0 28px;
	}
	
.inbox td:nth-of-type(4n + 2) {
    width: 100%;
    display: block;
	font-weight: normal;
	padding: 2px 5px 15px 28px;
	}
	
.inbox td:nth-of-type(4n + 3) {
    text-align: right;
    width: 30%;
    vertical-align: top;
	padding-top: 17px;
	font-size: 0.9375em;
	}
	
.inbox td:nth-of-type(4n + 4) {
    width: 8%;
	}

.inbox tr.empty td {
	padding: 0px 0px 10px 0px;
}
	
.unread td:first-of-type::before {
    width: 12px;
	height: 12px;
	background-color: red;
	content: '';
	position: absolute;
	top: 18px;
	left: 8px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}

td.success { color: #1f8640; }
	
td.fail { color: #e62b3e; }

p.download {
	margin-bottom: 0;
	padding-top: 0.25em;
	}

.dhide {
	font-weight: 600;
	font-size: 0.9375em;
	padding-left: 4px;
	position: relative;
	top: 5px;
	}

.download .btn, .download button.btn {
	text-transform: none;
	font-size: 0.8125em;
	padding: 11px 12px 11px 26px;
	background-color: #222222;
	position: relative;
	}

.download button.btn {
	border: none;
	margin-top: 10px;
	padding: 11px 12px 11px 27px;
}
	
.download .btn svg {
	width: 14px;
	vertical-align: middle;
	position: absolute;
	top: 8px;
	left: 8px;
	stroke: #fff;
	}
	
a.sortable svg {
	fill: red;
	}
	


/* Row select styles (whole row becomes the <a>) */

.row-select tr { position: relative }
.row-select td:last-of-type { padding: 0; vertical-align: top; position: static; }

.row-select .next { 
	width: 100%; 
	height: 50px;
	top: auto;
	right: 0;
	}
	
.row-select .next svg { 
	width: auto; 
	height: 24px; 
	position: absolute; 
	top: 5px; 
	right: 10px; 
	stroke: #222222; 
	stroke-width: 3.5; 
	}
	
.trans-table .row-select a.next svg, .inbox .row-select a.next svg { top: 13px }

.inbox .row-select a.next { 
	height: 70px;
	}

#job_rows tr {
	display: none;
}

#job_rows .gross, #job_rows .tips, #job_rows .failed {
	display: none;
}

.trans-table.panel.jobs-payment {
	margin-top: 20px;
	padding-top: 20px;
}

/* General styles */

.mhide { display: none }

h1, h2, h3, h4 {
	font-size: 1.5em;
	margin: 0.5em 0 0.5em;
	}

.messages h2 {
	font-size: 1.5em;
	margin-bottom: 8px;
	padding-left: 10px;
	float: left;
	}
	
h2 {
	font-size: 1.875em;
	line-height: 110%;
	}
	
.settings h2 { font-size: 1.5em }
	
h3 {
	font-size: 1.375em;
	text-transform: uppercase;
	}
	
.payments h3 {
	font-size: 1.0em;
	margin: 0;
	}
	
h4 {
	font-size: 1.0em;
	}
	
h3 strike {
	padding: 0 4px;
	}
	
.mgn-top-double { margin-top: 2.0em }
	
p strong {
	font-style: normal;
	}
	
p.intro {
	font-size: 1.125em;
	line-height: 140%;
	padding-right: 10px;
	}
	
.small {
	font-size: 0.8em;
	color: #777;
	}
	
.note, .account .panel p.note {
	font-weight: 600;
	font-size: 0.9375em;
	line-height: 130%;
	}
	
.account .panel p.note {
	border-bottom: 0;
	padding: 0;
	margin: 1.0em 0 0;
	}
	
.btn {
	font-weight: bold;
	padding: 9px 16px;
	display: inline-block;
	font-size: 1.0em;
	line-height: 100%;
	color: #ffffff;
	text-decoration: none;
	background-color: #222222;
	vertical-align: middle;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	transition: background-color 0.25s;
	-webkit-transition: background-color 0.25s;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.5);
	-moz-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.5);
	box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.5);
	transition: box-shadow 0.5s;
	-webkit-transition: box-shadow 0.5s;
	cursor: pointer;
	box-sizing: border-box;
	box-shadow: none;
	-webkit-appearance: none;
	}

.btn:hover {
	background-color: #000000;color: #ffffff;
	-webkit-box-shadow: 0px 0px 25px 0px rgba(255, 255, 255, 0.8);
	-moz-box-shadow: 0px 0px 25px 0px rgba(255, 255, 255, 0.8);
	box-shadow: 0px 0px 25px 0px rgba(255, 255, 255, 0.8);
	cursor: pointer;
	}
	
.btn2 {
	font-weight: bold;
	padding: 16px 20px 14px;
	display: inline-block;
	font-size: 1.25em;
	line-height: 100%;
	color: #222222;
	text-align: center;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.5);
	border: 0;
	vertical-align: middle;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px; 
	transition: background-color 0.25s, color 0.25s;
	-webkit-transition: background-color 0.25s, color 0.25s;
	cursor: pointer;
	box-sizing: border-box;
	}
	
.btn2 svg { position: relative; top: 2px; left: 2px; }
	
.btn2:hover {
	background-color: rgba(255, 255, 255, 0.8);
	color: #000000;
	}
	
.btn2:hover svg { left: 3px; }
	
.btn2.btn-sm {
	padding: 14px 16px 12px;
	display: inline-block;
	font-size: 1.25em;
	border-width: 2px;
	}
	
.guide .btn2.btn-sm { font-size: 1.125em; }
	
.btn2.download{
    position:static;
}

.link_div p{
    display:inline-block;
}

.actions .btn-inline {
	color: red;
	}
	
.actions :hover.btn-inline {
	color: darkred;
	}

.account .actions .btn-inline {
	font-weight: bold;
	padding: 0;
	display: inline-block;
	font-size: 1.0em;
	text-transform: uppercase;
	line-height: 100%;
	color: #007CBD;
	text-decoration: none;
	transition: color 0.25s;
	-webkit-transition: color 0.25s;
	}

.account .actions .btn-inline {
	color: #222222;
	margin: 20px auto;
	text-decoration: none;
	display: block;
	text-align: center;
}
	
.btn.btn-lg {
	padding: 14px 0 13px;
	width: 100%;
	display: inline-block;
	font-size: 1.75em;
	line-height: 120%;
	text-align: center;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	}
	
.btn-right {
	position: absolute;
	top: 3px;
	right: 0;
	}
	
.messages .btn-right { right: 10px }
	
.msg-actions {
	padding: 4px 5px;
	text-align: right;
	}
	
.compose .msg-actions { display: none }
	
.back {
	height: 30px;
	display: block;
	padding: 0;
	text-decoration: none;
	position: absolute;
	top: 15px;
	left: 13px;
	cursor: pointer;
	transition: color 0.25s;
	-webkit-transition: color 0.25s;
	}
	
.next {
	width: 14px;
	height: 24px;
	display: block;
	padding: 0;
	text-decoration: none;
	position: absolute;
	top: 15px;
	right: 10px;
	font-size: 0.01em;
	text-indent: -10000px;
	cursor: pointer;
	}
	
.panel {
	background: rgba(255, 255, 255, 0.65);
	padding: 10px 10px 0;
	position: relative;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	}

.title {
	height: 50px;
	background: rgba(0, 0, 0, 0.7);
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
	}
	
.title h1, .title h2.dhide {
	font-size: 1.5em; 
	line-height: 110%;
	text-align: center;
	color: #ffffff;
	margin: 0;
	padding-top: 14px;
	padding-left: 0;
	}
	
.title h2.dhide { top: 0 }
	
.title .back { 
	width: 50px;
	height: 44px;
	font-weight: bold;
	font-size: 0.01em;
	text-indent: -10000px;
	margin: 0;
	padding: 0;
	color: #fff;
	top: 0; 
	left: 5px;
	z-index: 2;
	}
	
.title .back svg , .title .helpback svg {
	width: auto; 
	height: 29px; 
	position: absolute; 
	top: 10px; 
	left: 8px;
	stroke: #fff; 
	stroke-width: 3; 
	}
	
.stepper {
	font-weight: bold;
	font-size: 1.0em;
	text-align: center;
	width: 76px;
	height: 28px;
	margin: 0;
	padding: 3px 0 0;
	box-sizing: border-box;
	background: rgba(105, 189, 234, 0.7);
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	border-radius: 14px;
	position: absolute;
	right: 8px;
	top: 8px;
	}
	
.trip-summary, .payment-summary {
	padding: 18px 0;
	position: relative;
	text-align: center;
	}
	
.bubble {
	width: 130px;
	height: 130px;
	background: rgba(255, 255, 255, 0.65);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	}
	
.bubble h3 {
	font-weight: 600;
    font-size: 0.875em;
    line-height: 100%;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    padding: 25px 20px 5px;
	}
	
.bubble p.time {
	font-weight: normal;
    font-size: 2.5em;
    line-height: 100%;
    text-align: center;
    margin: 0;
    padding: 3px 0 1px;
	}
	
.bubble p.time span, .trip-stats p span {
	font-weight: 600;
    font-size: 0.5em;
    padding-left: 2px;
	}
	
.bubble p.pc {
	font-weight: 600;
    font-size: 1.25em;
    line-height: 100%;
    text-align: center;
    margin: 0;
	}
	
.payment-summary .bubble p.day {
	font-weight: 600;
	font-size: 2.25em;
	font-style: normal;
	line-height: 100%;
	text-align: center;
	margin: 28px 0 2px;
	}
	
.payment-summary .bubble p.year {
	font-weight: 600;
    font-size: 1.125em;
    line-height: 100%;
    padding: 0;
    margin: 3px 0;
	}
	
.payment-summary .bubble p.time {
	font-weight: 600;
    font-size: 1.5em;
    line-height: 100%;
    padding: 0;
    margin: 9px 0;
	}
	
.payment-summary.future .bubble.to p {
    font-style: italic;
    opacity: 0.5;
	}
	
.trip-stats, .summary-arrow {
	height: 130px;
    margin: 0;
    padding: 0;
    min-width: 90px;
    vertical-align: top;
	position: relative;
	}
	
.trip-stats svg, .summary-arrow svg {
	width: 80px;
	height: auto;
	position: absolute;
	top: 46px;
	left: 50%;
	margin-left: -40px;
	stroke: #222222;
	stroke-width: 4;
	} 
	
.future .summary-arrow svg {
	stroke-dasharray: 0,9.5;
	stroke-width: 5;
	margin-left: -43px;
	}
	
.trip-stats p {
	font-weight: normal;
    font-size: 2.25em;
    line-height: 100%;
    text-align: center;
    margin: 0;
	}
	
.trip-stats p.distance { padding-top: 7px; }
	
.trip-stats p.time { padding-top: 32px }

.trip-summary div, .payment-summary div { display: inline-block; }
	
.content dl {
	padding: 0;
	margin: 30px 0;
	font-weight: 600;
	font-size: 1.25em;
	line-height: 120%;
	}
	
.content dt, .content dd {
	float: left;
	clear: left;
	width: 65%;
	margin: 0;
	padding: 14px 5px;
	box-sizing: border-box;
	border-top: 1px solid rgba(35, 55, 103, 0.2);
	}
	
.content dd {
	float: right;
	clear: none;
	width: 35%;
	text-align: right;
	}
	
.content dt:first-of-type, .content dd:first-of-type { border-top: none }
	
.content dt.total {
	text-transform: uppercase;
	padding-top: 26px;
	width: 50%;
	border-top: 2px solid rgba(35, 55, 103, 0.4);
	}
	
.content dd.total {
	font-size: 1.875em;
	line-height: 100%;
	width: 50%;
	border-top: 2px solid rgba(35, 55, 103, 0.4);
	}

.content dl.payref dt
{
	width: 40%;
}

.content dl.payref dd
{
	width: 60%;
}
	
.details p.note {
	clear: left;
	font-size: 0.875em;
	padding-top: 10px;
	border-top: 1px solid rgba(35, 55, 103, 0.2);
	}
	
.details .content .btn {
	width: 100%;
	font-size: 1.5em;
	padding: 14px 16px;
	margin: 8px auto;
	text-align: center;
	border-radius: 26px;
	}
	
.message-head {
	padding: 15px 0px 15px;
	margin: 0 10px;
	border-bottom: 2px solid rgba(35, 55, 103, 0.3);
	position: relative;
	}
	
.message-body {	padding: 10px 10px 30px; }
	
.message-head p, .message-body p {
	font-weight: 600;
	font-size: 1.125em;
	line-height: 140%;
	}
	
.message-head p { margin: 0; }
.message-head p.subject { font-weight: bold }
.message-head p.date { position: absolute; right: 0; top: 15px; }
.message-body p { font-weight: normal; max-width: 670px; }

/* Summary panel styles */

.terms-panel {
	margin: 0 0 9px;
	padding: 12px 15px;
	color: #222222;
	text-decoration: none;
	background-color: rgba(255, 255, 255);
	display: block;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
	position: relative;
	top: 10px;
	}
	
.summary-panel {
	margin: 0 0 9px;
	padding: 12px 15px;
	color: #222222;
	text-decoration: none;
	background-color: rgba(255, 255, 255, 0.5);
	display: block;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
	position: relative;
	top: 10px;
	}
	
a.summary-panel {
	background-image: url(../img/msg-next-dark.svg);
	background-repeat: no-repeat;
	background-size: 17px 30px;
	background-position: center right 15px;
	}
	
.summary-panel dl {
	height: 50px;
	margin: 0;
	font-weight: 600;
	position: relative;
	}
	
.summary-panel dt, .summary-panel dd {
	font-size: 0.75em;
	text-transform: uppercase;
	width: 40%;
	border: 0;
	padding: 0;
	position: absolute;
	top: 0px;
	left: 40%;
	float: none;
	}
	
.summary-panel dd {
	font-size: 1.3em;
	text-transform: none;
	text-align: left;
	top: 25px;
	}
	
.summary-panel dt:first-of-type, .summary-panel dd:first-of-type { left: 0; }
.summary-panel dt:last-of-type, .summary-panel dd:last-of-type { width: 20%; left: 80%; }

.payments .summary-panel { margin: 0 10px; }
.payments .summary-panel dt, .payments .summary-panel dd { width: 50%; }
.payments .summary-panel dt:last-of-type, .payments .summary-panel dd:last-of-type { left: 52%; }

span.qtn {
	position: relative;
	padding-right: 30px;
	cursor: pointer;
	}
	
.qtn .btn {
	font-size: 14px;
	padding: 4px 0 0;
	width: 20px;
	height: 20px;
	text-align: center;
	position: absolute;
	top: -2px;
	left: 34px;
	}

.pop-bg {
	background-color: transparent;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	display: none;
	}
       
.tt-pop {
	width: 94%;
	padding: 0 10px;
	margin: 0 3%;
	position: absolute;
	left: 0px;
	top: 75px;
	background: rgba(34, 34, 34, 0.85);
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
	border-radius: 2px;
	box-sizing: border-box;
	z-index: 10;
	display: none;
	}
       
.tt-pop::before {
	content: "";
	width: 16px;
	height: 9px;
	background-image: url(../img/pop-pointer.svg);
	background-repeat: no-repeat;
	background-size: 16px 9px;
	background-position: center bottom;
	position: absolute;
	left: 52%;
	top: -9px;
	margin-left: 36px;
	}
       
.tt-pop p {
	color: #fff;
	font-weight: bold;
	font-size: 1.125em;
	line-height: 130%;
	}

/* Message styles */
	
.message {
	margin: 0 auto 6px;
	padding: 12px 15px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.125em;
	line-height: 130%;
	background-color: #41ade6;
	display: block;
	box-sizing: border-box;
	max-width: 740px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
	}
	
a.message {
	padding: 12px 40px 12px 15px;
	background: url(../img/msg-next.svg) no-repeat;
	background-size: 17px 30px;
	background-position: center right 10px;
	}

.message h3 {
	text-transform: uppercase;
	font-size: 0.889em;
	margin: 0.125em 0;
	}
	
.message ul { 
	margin: 0; 
	padding: 0; 
	}
	
.message p { margin: 0 }

.message li { 
	margin: 2px 0; 
	padding: 0 0 0 18px;
	position: relative;
	list-style-type: none;
	}
	
.message li::before {
	content: "";
	width: 7px;
	height: 7px;
	background: #ffffff;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	left: 4px;
	top: 7px;
	}
	
.message.msg-alert {
	background-color: #ffffff;
	color: #f93030;
	transition: color 0.25s;
	-webkit-transition: color 0.25s;
	}
	
a.message.msg-alert:hover {
	background-color: #ffffff;
	color: #db2020;
	}
	
a.message.msg-alert {
	background-image: url(../img/msg-alert-next.svg);
	}
	
.message.msg-success {
	background-color: #00a3a3;
	}
	
.message.msg-required {
	background-color: #e97a7a;
	}
	
.message.errors {
	background-color: #D22727;
	color: #fff;
	}
	
.message.errors p {
	color: #fff;
	}

.message.errors a {
	color: #000;
}

.message.msg-info {
	background-color: rgba(255, 230, 100, 0.9);
	background-image: url(../img/icon-info.svg);
	background-repeat: no-repeat;
	background-size: 54px 54px;
	background-position: 18px 18px;
	padding: 25px 20px 25px 58px;
	color: #87592e;
}

.message.msg-info strong.big {
	font-size: 30px;
	position: relative;
	top: 2px;
}

.message.msg-info h2 {
	font-size: 1.445em;
	padding: 0;
	margin-bottom: 0.25em;
}

.message.msg-info p {
	font-weight: 600;
}

.message.msg-info p.space {
	margin: 25px 0px 25px 0px;
}

.message.msg-info p.space .label {
	display: inline-block;
	width: 70px;
}

.message.msg-info p .btn-arrow {
	margin-left: 6px;
}
	
/*  Form styles  */
	
form, fieldset {
	padding: 0;
	margin: 0;
	border: 0;
	}
	
.col fieldset { border-bottom: 1px solid #e1deda; }

	
.text-input, .text-area, .select-input {
	width: 100%;
	font-family: "SourceSans3", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 1.125em;
	line-height: 120%;
	padding: 11px 2% 10px;
	margin: 0;
	color: #192033;
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.9);
	border: 0;
	vertical-align: middle;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	float: right;
	box-sizing: border-box;
	}
	
.text-input::placeholder, .text-area::placeholder { 
	color: #888888;
	opacity: 1; 
}

.text-input.pswd { 
	font-size: 2.0em; 
	line-height: 100%;
	text-align: center;
	letter-spacing: 0.5em;
	padding: 0;
	}

.text-input.pass-show-hide { 
	width: 87%;
	float: left;
	}

.select-input {
	font-weight: normal;
	padding: 5px 1% 4px;
	margin: 0;
	float: right;
	}

.file-input {
	font-family: "SourceSans3", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 1.0em;
	padding: 5px 0;
	}
	
.form-item {
	float: left;
	width: 100%;
	margin: 0;
	border-top: 1px solid rgba(35, 55, 103, 0.3);
	padding: 6px 0;
	box-sizing: border-box;
	}

.dob .select-input, .dob .text-input {
	float: left;
	margin-right: 5px;
	height: 45px;
}

.dob .text-input.day {
	width: 70px;
	padding-left: 12px;
	padding-right: 12px;
}

.dob .select-input.month {
	width: 120px;
}

.dob .text-input.year {
	width: 90px;
	padding-left: 12px;
	padding-right: 12px;
}

.form-item.no-split { border-top: 0px !important; }
	
.form-item.no-split { border-top: 0px; }

.form-item label, .form-item p {
	font-weight: bold;
	width: 90%;
	font-size: 1.125em;
	line-height: 120%;
	float: left;
	padding: 0 1% 8px 0;
	margin: 10px 0 0;
	}
	
.form-item p { margin: 0.25em 0; }

.multi-input .text-input { margin-bottom: 4px }
.multi-input .text-input:last-of-type { margin-bottom: 0 }
	
.disabled .text-input {
	border-color: #ddd;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	}
	
.disabled label {
	color: #ddd;
	}
	
.dd-menu {
	font-weight: 600;
	color: #222222;
	font-size: 1.125em;
	line-height: 100%;
	text-decoration: none;
	background-color: transparent;
	border: 2px solid #222222;
	background-image: url(../img/menu-arrow.svg);
	background-position: right 12px top 16px;
	background-repeat: no-repeat;
	background-size: 15px auto;
	padding: 12px 40px 10px 15px;
	margin: 0;
	display: inline-block;
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	border-radius: 22px;
	box-shadow: none;
	-webkit-appearance: none;
	}
	
.settings .dd-menu { width: 100% }
	
.custom-menus {
	padding: 0px 0 5px;
	border-bottom: 2px solid rgba(35, 55, 103, 0.5);
	text-align: center;
	}
	
.custom-menus fieldset, .custom-menus fieldset.actions {
	display: inline-block;
	padding: 3px 0;
	}
	
.custom-menus label {
	font-weight: 600;
	font-size: 1.0em;
	line-height: 100%;
	display: inline-block;
	min-width: 40px;
	padding-right: 4px;
	text-align: right;
	}
	
.custom-menus .dd-menu {
	font-size: 0.9375em;
	line-height: 100%;
	background-position: right 7px top 13px;
	background-size: 13px auto;
	padding: 9px 25px 8px 10px;
	}

.custom-menus .dd-menu {
	background-image: none;
	padding: 9px 15px 8px 10px;
}

.custom-menus .dd-menu::-webkit-calendar-picker-indicator {
    margin-left: 0px;
}

.custom-menus #searchbutton {
	margin-left: 20px;
}
	
.custom-menus .btn {
	border: 0;
	height: 36px;
	width: 278px;
	margin-left: 40px;
	}

	
input.checkbox {
	margin-right: 6px;
	vertical-align: middle;
	border: 0 !important;
	padding: 0 !important;
	width: auto !important;
	}
	
fieldset .checkbox-list label {
	width: 360px !important; 
	font-weight: normal;
	vertical-align: middle;
	display: inline-block;
	}
	
.form-item span.consent {
	font-size: 12px;
	line-height: 130%;
	display: block;
	position: relative;
	top: 2px;
	padding-left: 20px;
	margin-bottom: 2px;
	}
	
.form-item input#consent {
	float: left;
	position: relative;
	z-index: 1;
	}
	
.actions {
	padding: 35px 0 40px;
	clear: left;
	}
	
.details .panel .row .actions { padding: 35px 10px 40px; }
	
.details .panel .row .col .actions { padding: 25px 0 30px; }
	
	
/*  Compose form  */

.compose-message {
	padding: 20px 10px 10px;
	}

.compose-message .form-item.compose-to { border-top: 0 }
.compose-message .form-item label { display: none }
.compose-message .form-item.compose-to label { display: block; width: 10%; }
.compose-message .form-item.compose-to .text-input, .compose-message .form-item.compose-to .dd-menu { width: 89%; }
	
.compose-message .actions { padding: 0 0 20px 0; }
	
.compose-message .actions .btn {
	width: 100%;
	box-sizing: border-box;
	margin-top: 3px;
	}

	
	
/*  Error states  */
	
.file_upload_div.error {
	background-color: rgba(246, 200, 203, 0.7);
}

.form-item.error {
	background-color: transparent;
	}
	
.form-login.form-item.error {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	}
	
.form-item.error label {
	color: #de1c2a;
	padding-left: 1%;
	}
	
.form-item.error input.text-input, .form-item.error .text-area, .form-item.error .select-input {
	background-color: #fedfe1;
	border: 2px solid #f93030;
	width: 100%;
	margin-right: 0;
	}

.dob .form-item.error .text-input.day {
	width: 80px;
	margin-right: 5px;
	margin-left: 0px;
}

.dob .select-input.month {
	width: 120px;
	margin-right: 5px;
}

.dob .form-item.error .text-input.year {
	width: 100px;
	margin-right: 5px;
}

.form-item.error input.text-input.pass-show-hide { 
	width: 87%;
	float: left;
	}
	
.form-item.error input.text-input::placeholder, .form-item.error .text-area::placeholder {
	color: #f93030;
	}

.errors ul {
	margin: 0 0 1.0em;
	}

.errors li, .errors p {
	color: #de1c2a;
	font-size: 1.125em;
	font-weight: bold;
	}	

	
	
/*  Miscellaneous styles  */


div.sort-container {
	width: 79%;
	margin: 2px 0px 2px 0px;
	display: flex;
}

div.sort-container input.text-input {
	float: left;
	width: 3em;
	margin-right: 5px;
	padding-left: 15px;
	margin-bottom: 2px;
}

div.sort-container input.text-input:last-of-type {
	margin-bottom: 2px;
}

div.form-item.error div.sort-container input.text-input {
	float: left;
	width: 3em;
	margin-right: 5px;
	padding-left: 15px;
	margin-bottom: 2px;
}

div.form-item.error div.sort-container input.text-input:first-child {
	margin-left: 8px;
}

a.link { 
	color: #307899;
	transition: color 0.25s;
	-webkit-transition: color 0.25s;
	cursor: pointer;
	}
	
p a.link:hover, li a.link:hover {
	color: #1e5773;
	}
	
.btn-arrow {
	display: inline-block;
	font-size: 0.875em;
	text-decoration: none;
	color: #222222;
	background-color: rgba(255, 255, 255, 0.75);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	padding: 3px 20px 3px 10px;
	margin: -2px 0 0;
	transition: background-color 0.25s;
	-webkit-transition: background-color 0.25s;
	cursor: pointer;
	position: relative;
	top: 0;
	right: 0;
}
	
.btn-arrow svg {
	display: block !important;
	padding: 0;
	margin: 0;
	width: 8px;
	height: 11px;
	position: absolute;
	top: 9px;
	right: 8px;
	stroke: #222222;
}

.btn-arrow:hover {
	color: #000000;
	background-color: rgba(255, 255, 255, 1.0);
}

.btn-arrow:hover svg {
	stroke: #000000;
}


/* Overlay popup styles  */

.popup {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 10;
	display: none;
	}

.popup .overlay {
	width: 100%;
	height: 100%;
	display: block;
	top: 0px;
	left: 0px;
	background: #000;
	opacity: 0.75;
	position: fixed;
	}
	
.pop-panel {
	width: 320px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 120px;
	padding: 10px 60px 10px 30px;
	background-color: #c6eaff;
	box-sizing: border-box;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	position: relative;
	}
	
.pop-panel.video {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: transparent;
	box-sizing: border-box;
	}
	
.video-container {
	position: relative;
	width: 100%;
	height: 100vh;
	}
	
.video-container video {
	width: 100%;
	max-height: 100%;
	margin: 0 auto;
	}

.close-btn {
	width: 45px;
	height: 45px;
	content: '';
	display: block;
	background-color: #233767;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	top: 6px;
	right: 6px;
	}
	
.pop-panel.video .close-btn { 
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1; 
	}

.close-btn svg {
	width: 25px;
	height: 25px;
	position: relative;
	top: 10px;
	left: 10px;
	}
	
/*  Pay-by-link styles  */
	
.paylink .main .content { 
	padding: 10px 10px 80px; 
	max-width: 500px;
	}
	
.paylink .panel { 
	padding: 10px;
	min-height: 440px;
	}
	
.paylink .amount {
	margin: 15px 0 20px;
	text-align: right;
	}
	
.paylink .amount dl {
	margin: 0;
	font-size: 1.375em;
	font-weight: bold;
	text-align: left;
	}
	
.paylink .content dt, .paylink .content dd { 
	width: 50%; 
	padding: 10px 5px; 
	border-top: 0; 
	}
	
.paylink .content dd { 
	font-weight: 600;
	font-size: 1.365em;
	position: relative;
	top: -3px;
	}
	
.paylink .amount .price {
	font-size: 2.182em;
	top: -9px;
	}
	
.paylink .toptip::before {
	background: url(../img/icon-top-tip.svg) no-repeat top left;
	background-size: 54px 60px;
	content: '';
	width: 54px;
	height: 60px;
	position: absolute;
	top: -8px;
	right: 100px;
	}
	
.amount .btn {
	margin-right: 5px;
	}
	
.paylink .content .form-paylink-amount dt, .paylink .content .form-paylink-amount dd {
	padding: 5px 5px 10px;
	}
	
.paylink .form-paylink-amount .amount .price {
	top: -20px;
	}
	
.paylink .amount .price .text-input {
	font-size: 0.75em;
	text-align: right;
	padding: 5px 10px;
	width: 85%;
	}
	
.paylink .amount .price .text-input::placeholder {
	font-size: 0.65em;
	}
	
.paylink .amount .price span {
	text-align: left;
	font-size: 0.5em;
	padding: 20px 5px 0 0;
	display: inline-block;
	}
	
.paylink .actions {
	border-top: 1px solid rgba(35, 55, 103, 0.3);
	}
	
.paylink .form-paylink-amount .actions {
	border-top: 0;
	padding-top: 0;
	}
	
.paylink .actions p:first-of-type, .paylink .panel p:first-of-type, .paylink p.intro {
	font-weight: bold;
	font-size: 1.375em;
	line-height: 130%; 
	margin-top: 0;
	}
	
.paylink .panel p.intro { 
	margin: 1.0em 0 3.0em; 
	}
	
.paylink .actions.alt p:first-of-type {
	font-weight: 600;
	font-size: 1.25em;
	line-height: 130%;
	text-align: left;
	margin-top: 0;
	}
	
.form-paylink .actions, .paylink.fail .actions.alt {
	border-top: 0;
	padding-top: 10px;
	}
	
.paylink .actions.alt {
	padding: 30px 0 20px;
	text-align: center;
	}
	
.actions.alt .btn {
	font-size: 1.375em;
	padding: 15px 40px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	}
	
.qrcode-link {
	margin: 30px 0;
	text-align: center;
	}
	
.qrcode-link img {
	width: 270px;
	height: 270px;
	border: 0;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	}
	
.pay-status {
	padding: 15px 18px;
	margin: 20px 0;
	background-color: #20D8F8;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	}
	
.pay-status h2 {
	font-size: 1.25em;
	text-transform: uppercase;
	}
	
.paylink .panel .pay-status p {
	font-size: 2.625em;
	line-height: 100%;
	font-weight: bold;
	margin: 0.2em 0;
	}
	
.loader {
	margin: 40px 0;
	text-align: center;
	}
	
.loader span {
	width: 70px;
	height: 70px;
	display: inline-block;
	border-radius: 50%;
	position: relative;
	animation: rotate 1s linear infinite
	}

.loader span::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	inset: 0px;
	border-radius: 50%;
	border: 7px solid #17bff2;
	animation: prixClipFix 2s linear infinite ;
	}

@keyframes rotate {
	100%   {transform: rotate(360deg)}
	}

@keyframes prixClipFix {
	0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
	25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
	50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
	75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
	100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
	}
	
.paylink.success { background: rgba(42, 226, 62, 0.85); }
.paylink.fail { background: rgba(255, 54, 54, 0.85); }
.paylink.fail::before { background: yellow; content: ''; width: 100%; height: 100%; }

.success .pay-status { background-color: #3CE54E; }
.fail .pay-status { background-color: #F93030; }
.fail .pay-status h2, .fail .pay-status p { color: #ffffff; }

.paylink .tick {
	width: 82px;
	height: 77px;
	display: block;
	margin: 30px auto;
	fill: none;
	}
	
.payref { 
	font-weight: 600;
	font-size: 1.25em;
	border-top: 1px solid rgba(35, 55, 103, 0.3);
	padding-top: 15px;
	margin-bottom: 6px;
	}
	
.payref span { 
	float: right;
	}

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

	.menu li.settings-change-pin a span { display: none; }

}
	
	
@media only screen and (min-width: 768px) {

a.btn2.download{
    position:relative;
    right:20px;
    bottom:0px;
}

body {
	padding: 60px 0 0 0;
	background-position: top center;
	}
	
body.account { 

	}

.wrapper.header {
	position: fixed;
	top: 0;
	z-index: 10;
	}

.content, .main .content, .home .main .content {
	width: 748px;
	padding: 40px 10px;
	}
	
.home .main .content .row { margin-top: 20px; }

.two-col .col {
	width: 50%;
	}
	
.three-col .col {
	width: 33.33333333%;
	}
	
.col-33 {
	width: 33.33333333%;
	}
	
.col-66, .col.colspan2 {
	width: 66.66666666%;
	}
	
.three-col .col.colspan3 {
	width: 100%;
	}
	
.row.alt-row .col, .guide .panel .row.alt-row .col, .guide .panel .row.alt-row .col:first-of-type { float: right }
	
.header .content, .home .header .content, .login .header .content { height: 60px }

.mhide { display: block }
span.mhide { display: inline }

.logo { top: -3px; }

.header .logo { display: block }
	
a.nav-account span { display: none }
	
.nav .close, .nav li.nav-pop-only, .nav-toggle { display: none; }
	
.nav {
	width: 440px;
	height: 60px;
    text-align: right;
    background-color: transparent;
    position: absolute;
    left: auto;
    top: 0;
    right: 0;
	}

.nav.restricted {
	width: 144px;
	}
	
.nav li {
    width: 14.28%;
	}
	
.nav a, .nav li.nav-account a { 
	padding-top: 46px; 
	height: 60px;
	font-size: 0.75em;
    color: rgba(255, 255, 255, 0.65);
	}
	
.nav li.nav-account a:hover { color: #ffffff }
	
.nav li.nav-home a svg 		{ width: 33px; top: 8px; }
.nav li.nav-support a svg 	{ width: 38px; top: 7px; }
.nav li.nav-jobs a svg 		{ width: 32px; top: 7px; }
.nav li.nav-payments a svg 	{ width: 48px; top: 7px; }
.nav li.nav-messages a svg 	{ width: 36px; top: 9px; }
.nav li.nav-guide a svg 	{ width: 46px; top: 9px; }
.nav li.nav-paylink a svg 	{ width: 42px; top: 10px; }
.nav li.nav-account a svg 	{ width: 31px; top: 10px; }

.nav li.nav-account {
	width: 14.28%;
	position: relative;
	top: 0;
	right: 0;
	}
	
.nav li.nav-account a { text-indent: 0; }

.nav.restricted li.nav-account a { text-indent: -9px; }

.home .menu { max-width: 400px; }

.top-content h2 { padding-top: 20px; }

.dash-bubble {
	width: 320px;
	height: 320px;
	top: 70px;
	margin-left: -350px;
	position: absolute;
	}

.dash-bubble.current {
	width: 350px;
	height: 350px;
	top: 180px;
	margin-left: 0;
	}
	
.dash-bubble h2 {
    font-size: 1.75em;
    line-height: 100%;
    padding: 70px 20px 15px;
	}

.dash-bubble.current h2 { padding-bottom: 10px; }

.dash-bubble p.pay {
    font-size: 4.5em;
    line-height: 120%;
	}

.dash-bubble p.pay span {
    font-size: 0.615em;
	}

.dash-bubble p.pay-date {
    font-size: 1.5em;
    line-height: 110%;
	}
	
.jobs .main .content, .payments .main .content, .messages .main .content, .account .main .content, .guide .main .content, .support .main .content { padding-top: 20px }

.title { background: transparent; }

.title h1, .messages h2 {
	font-weight: 600;
	font-size: 2.0em; 
	line-height: 110%;
	margin: 0;
	padding-top: 0;
	padding-left: 0;
	position: relative;
	top: 2px;
	text-align: left;
	color: #222222;
	}
	
.dhide { display: none; padding-top: 0; }

.title .back { 
	width: auto;
	height: auto;
	font-size: 1.25em;
	text-indent: 0;
	margin: 0;
	padding: 5px 20px 2px 25px;
	color: #222222;
	top: 4px;
	left: 5px;
	}
	
.title .back svg , .title .helpback svg { top: 0; left: 0; stroke: #222222; }

.title .helpback svg { top: 4px; margin-right: 20px; position: relative;}

.title .back:hover svg , .title .helpback:hover svg { stroke: #000000; }


.tabs {
	text-align: left;
	padding: 12px 0 20px;
	}
	
.tabs li { width: auto; }

.tabs li a, .tabs li.single a {
	text-align: center;
	width: auto;
	height: 40px;
	font-size: 1.125em;
	line-height: 100%;
	padding: 10px 12px;
	}
	
.download .btn, .custom .download .btn {
	font-size: 1.125em;
	padding: 11px 24px 11px 35px;
	position: absolute;
	top: -60px;
	right: 0;
	}
	
.download .btn svg {
	top: 11px;
	left: 13px;
	}

.download button.btn {
	border: none;
	padding: 11px 18px 11px 33px;
	position: absolute;
	font-size: 1.125em;
	line-height: 100%;
	margin-top: 0px;
}

.download button.btn.custom {
	top: -115px;
}
	
.trans-table td:first-of-type {
	text-align: left;
	width: 27%;
	}
	
td  { padding: 15px 5px; }
	
.trans-table td span {
	font-weight: 600;
	line-height: 120%;
	position: absolute;
	left: 90px;
	top: 16px;
	}
	
.payments .summary-panel { margin: 0; }

.pay-table tbody td { font-size: 1.125em } 
.pay-table-next td:nth-of-type(4n + 3) { width: 80px }
.pay-table .row-select td:last-of-type { width: 40px }
.inbox .row-select a.next { height: 50px; }

.row-select .next svg, .pay-table .row-select .next svg { top: 13px; right: 55px; }
.inbox .row-select .next svg { right: 10px; }
.pay-table .row-select .next svg { right: 20px }
	
.jobs .trip-summary, .payment-summary { padding: 10px 0 30px; }

.title, .payments.details .title { 
	height: auto;
	border-bottom: 0;
	background: transparent;
	position: relative;
	top: 0;
	z-index: 1;
	}

.payments .title { height: 44px }
.btn-right { top: 22px; }
.messages .btn-right { right: 0 }
.msg-actions { margin: 0; padding-top: 0; height: 50px; }
.compose .msg-actions { display: block }

.inbox thead { display: table-header-group; }

.inbox th:nth-of-type(4n + 3) { text-align: right; }
	
.inbox td:first-of-type {
    width: 30%;
    display: table-cell;
    padding: 15px 5px;
	}
	
.inbox td:nth-of-type(4n + 2) {
    width: 42%;
    display: table-cell;
	font-weight: 600;
	padding: 15px 5px;
	}
	
.inbox td:nth-of-type(4n + 3) {
    text-align: right;
    width: 18%;
    display: table-cell;
    vertical-align: middle;
	font-size: 1.125em;
    padding: 15px 5px;
	}
	
.inbox td:nth-of-type(4n + 4) {
    width: 10%;
    display: table-cell;
	}
	
.inbox .unread td:first-of-type::before { left: -16px; }

.inbox tr.empty td {
	padding: 15px 5px;
}

.custom-menus .dd-menu { width: auto; }
.custom-menus label { min-width: 20px; }
.custom-menus .btn { width: auto; margin: 0; }

.custom-menus {
	text-align: left;
	padding: 0px 0 12px;
	margin-top: -7px;
	}

.bubble {
	width: 220px;
	height: 220px;
	}
	
.bubble h3 {
    font-size: 1.35em;
    padding: 45px 20px 12px;
	}
	
.bubble p.time {
    font-size: 3.5em;
    padding: 3px 0 6px;
	}
	
.bubble p.pc { font-size: 2.0em }
	
.trip-stats, .summary-arrow {
	min-width: 160px;
	height: 175px;
	margin-top: 20px;
	}
	
.trip-stats svg, .summary-arrow svg {
	width: 100px;
	top: 65px;
	margin-left: -50px;
	}
	
.future .summary-arrow svg { margin-left: -55px; }
	
.trip-stats p { font-size: 2.75em }
.trip-stats p.time { padding-top: 64px }

.payment-summary .bubble p.day { font-size: 3.5em; margin: 52px 0 2px; }
.payment-summary .bubble p.year { font-size: 1.75em }
.payment-summary .bubble p.time { font-size: 2.0em }
.payment-summary .bubble h3 { font-size: 1.5em; }

.payments.details .panel.future .row .col {
	float: none;
	margin: 0 auto;
	padding: 1px 0;
	}
	
.payments.details .panel.past .actions {
	width: 46%;
	padding: 0 2%;
	margin: 0;
	text-align: center;
	float: right;
	position: relative;
	top: -80px;
	}
	
.payments.details .panel.future .actions .btn2 {
	width: 50%;
	margin: 0 auto;
	position: relative;
	right: auto;
	top: 0;
	}

.panel { padding: 0 40px 40px; }
.support .panel { margin-top: 19px; }
.trans-table.panel { padding: 8px 40px 40px; }
.pay-table.panel { padding: 30px 40px 40px; margin-top: 20px; }
.inbox.panel { padding: 10px 40px 40px; }

.panel .row .col {
	padding: 0 2%;
	}

.panel .row .col:first-of-type { float: right }
.guide .panel .row .col:first-of-type, .support .panel .row .col:first-of-type { float: left }
.guide .panel .row .col { padding: 0 10px; }

.content dl { font-size: 1.125em; }

.jobs .panel .row .actions {
	padding: 15px 2% 40px 0;
	clear: none;
	width: 46%;
	float: right;
	}
	
.btn2 { font-size: 1.25em }


.message-head {	padding: 30px 0px 15px; margin: 0; }
.message-body {	padding: 10px 0px 30px; }
.message-head p.date { top: 30px }
	
	
.account .menu, .support .menu {
	padding: 0;
	margin: 0 -10px;
	}

.account .menu li, .menu li.settings-account {
	border-bottom: none;
	display: inline-block;
	margin: 0 8px 10px 0;
	vertical-align: top;
	}
	
.account .menu li:nth-child(5n + 5) { margin-right: 0 }

.account .menu li a, .menu li.settings-account a, .support .menu li a {
	width: 144px;
	height: 80px;
	font-size: 1.25em;
	line-height: 110%;
	text-align: center;
	margin: 0;
	padding: 135px 0 0 0;
	display: block;
	position: relative;
	}

/* 
.num {
	font-size: 18px;
	width: 36px;
	height: 36px;
	padding-top: 8px;
	top: 90px;
	bottom: auto;
	left: 105px;
	}
 */
	
.menu li.settings-account a strong {
	font-weight: 600;
	font-size: 1.0em;
	}
	
.menu li.settings-account a span em { display: none; }
	
.account .menu li a::before, .menu li.settings-account a::before, .support .menu li a::before { 
	width: 116px;
	height: 116px;
	background: rgba(35, 55, 103, 0.9);
	content: '';
	top: 0;
	left: 50%;
	margin-left: -58px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: 0px 2px 5px rgba(25, 32, 51, 0.3);
	-moz-box-shadow: 0px 2px 5px rgba(25, 32, 51, 0.3);
	box-shadow: 0px 2px 5px rgba(25, 32, 51, 0.3);
	}

.account .menu li a svg { 
	left: 50%;
	}
	
.menu li.settings-account a svg 	{ width: 54px; top: 30px; margin-left: -27px; }
.menu li.settings-bank a svg 		{ width: 60px; top: 32px; margin-left: -30px; }
.menu li.settings-payment a svg 	{ width: 68px; top: 27px; margin-left: -34px; }
.menu li.settings-change-pin a svg	{ width: 60px; top: 27px; margin-left: -30px; }
.menu li.settings-change-password a svg	{ width: 60px; top: 27px; margin-left: -30px; }
.menu li.settings-upload-id a svg	{ width: 56px; top: 30px; margin-left: -28px; }
.menu li.settings-chargebacks a svg	{ width: 64px; top: 29px; margin-left: -35px; }
.menu li.settings-strip a svg		{ width: 58px; top: 29px; margin-left: -29px; }
.menu li.settings-logout a svg		{ width: 63px; top: 31px; margin-left: -25px; }
.menu li.new-message a svg			{ width: 56px; top: 35px; margin-left: -28px; }

/* 
.menu li.menu-support a svg 	{ width: 64px; top: 27px; margin-left: -32px; }
.menu li.menu-jobs a svg 		{ width: 60px; top: 24px; margin-left: -30px; }
.menu li.menu-payments a svg 	{ width: 82px; top: 28px; margin-left: -42px; }
.menu li.menu-messages a svg 	{ width: 64px; top: 31px; margin-left: -32px; }
.menu li.menu-guide a svg		{ width: 76px; top: 31px; margin-left: -38px; }
.menu li.menu-account a svg		{ width: 56px; top: 28px; margin-left: -28px; }
 */

.account .menu li a svg.arrow { display: none }

.account .menu li a:hover::before, .menu li.settings-account a:hover::before { 
	background-color: rgba(35, 55, 103, 1.0);
	}

.account .menu li.required {
	background-color: transparent;
	padding: 0;
	}
	
.account .menu li.required a::before { left: 50%; top: 0; }
.account .menu li.required a { color: #BD1C13; }
	
.messages .menu {
	padding: 100px 0 70px;
	text-align: center;
	}
	
.messages .menu li a { width: 200px; }

.call-support h4 { font-size: 1.0em; }

.call-support svg {
	width: 50px;
	top: 26px;
	left: 25px;
	}


.account .panel { 
	background: rgba(180, 229, 255, 0.7); 
	padding: 25px 40px 40px;
	}
	
.account .title {
	height: 54px;
	}
	
.guide .title {
	height: 64px;
	}
	
.account .title h1 {
	text-align: center;
	}
	
.account .account-item, .account .panel .actions, .account .panel.id-info form { 
	width: 50%;
	margin: 0 auto;
	}

.account .panel .change-password .actions {
	width: 55%;
}
	
.account form .account-item { 
	width: 100%;
	margin: 0;
	float: left;
	}
	
.account .panel form .actions { padding-left: 21%; margin: 0; }
.account .panel form.change-password .actions { padding-left: 34%; }
.account .panel form .actions .btn { width: 260px; }

.account .panel form.change-pin .actions .btn { width: 200px; }
	
.account .form-item label, .account form .account-item h3 {
	font-size: 1.125em;
	line-height: 120%;
	text-transform: none;
	padding: 0 1% 8px 0;
	margin: 12px 0 0;
	float: left;
	}
	
.account form .account-item p {
	width: 78%;
	margin: 10px 0 0;
	padding: 0 10px 5px;
	float: right;
	}
	
.account .form-item label::after, .account form .account-item h3::after { content: ':'; }

.account .panel p.note { margin-left: 21%; max-width: 560px; }
.account .settings form .dd-menu { width: 50%; }
.form-account { background-color: transparent; }
form.change-pin, form.payment-settings { width: 50%; margin: 0 auto; }
form.change-pin .text-input.pswd, .account .settings form.payment-settings .dd-menu { width: 100%; }
.account form.payment-settings .form-item label { width: 100%; font-size: 1.0em; text-transform: uppercase; }
.account form.payment-settings label::after { content: ''; }
.account .panel form.change-pin .actions, .account .panel .pin-confirm .actions, .account .panel.id-info form .actions, .account form.payment-settings .actions { width: 100%; padding-left: 0; margin: 0 auto; }
.account .panel .pin-confirm .actions .btn, .account .panel.id-info form .actions .btn, .account form.payment-settings .actions .btn { width: 100% }
.pin-confirm { width: 50%; margin: 0 auto; }

.account .id-info .account-item h3 { text-transform: uppercase; float: none; }
.account .panel.id-info label { font-size: 1.125em }
.account .id-info .account-item p { padding: 7px 10px 5px; margin: 0; float: none; }
.account .id-info .account-item h3::after { content: ''; }
.account .id-info .account-item p { width: 50%; box-sizing: border-box; }
.account .id-info .account-item div.file_upload_div p { width:100%;}
.id-info p.intro { width: 50%; margin-right: auto; margin-left: auto; }
.account .panel.id-info p.note { width: 50%; margin: 0 auto; padding: 1.0em 0 0; clear: left; }
.account .panel.id-info form p.note { width: 100% }
.id-info .message { width: 50%; margin: 0 auto; }


.form-item label, .form-item p { display: block; width: 20%; padding: 0 1% 0 0; }
.text-input, .text-area, .select-input { width: 79% }

.change-password .form-item label, .change-password .form-item p { width: 24%; }
.change-password .text-input, .change-password .text-area { width: 70% }

.form-item.error input.text-input, .form-item.error .text-area { width: 79% }
.form-item.error .text-input.pswd { width: 100%; }

.change-password .form-item.error input.text-input { width: 62% }

.form-item.error label,  .form-item.error p, .compose-message .form-item.error label, .compose-message .form-item.error p { width: 19% }
.form-item span.consent { padding-left: 25%; }	
.form-item input#consent { margin-left: 22%; }
.errors li, .errors p { font-size: 1.125em }
.dob .select-input.month { width: 140px }

.form-login .form-item label { display: none; }	
.form-login .text-input { width: 100% }
.form-login .message.errors { max-width: 360px; margin: 0 auto; }

.compose-message { padding: 20px 0 10px; }
.compose-message .form-item label, .compose-message .form-item p, .compose-message .form-item.compose-to label { display: block; width: 20%; }
.compose-message .text-input, .compose-message .text-area, .compose-message .form-item.compose-to .text-input { width: 79%; }
.compose-message .form-item.compose-to .dd-menu { width: auto; min-width: 260px; }
.compose-message .actions { padding-left: 21%; }
.compose-message .actions .btn { width: 260px; }

.create.account .short-form label, .create.account .panel .short-form label { display: block }
.create.account .panel .actions { padding: 15px 0 20px 21%; }
.create.account .panel h2 { margin: 0.5em 0 0.65em; }
.create.account .file-input { padding: 8px 0 8px; }
.create.account label.tweak { font-size: 1.0em }
.stepper { font-size: 1.25em; width: 100px; height: 32px; padding-top: 6px; border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px; top: 1px; right: auto; left: 0; }
.create.account .form-item.multi-input label { padding: 0 1% 10px 0; }
.create.account .dd-menu { width: 79%; margin: 0; }
.actions .skip { text-align: left }
.create.account .summary .panel .actions { padding-left: 0 }

.change-password .form-item label, .change-password .form-item p { width: 30%; }
.change-password .text-input, .change-password .text-area { width: 62% }

.account .actions .btn-inline { margin: 14px 0 0 25px; }
.account .actions .btn-inline { display: inline-block; }

.tt-pop {
	width: 360px;
	margin: 0;
	left: 50%;
	top: 138px;
	}

.tt-pop::before {
	left: 54px;
	top: -9px;
	margin-left: 0;
	}

.unread td:first-of-type::before {
	top: 30px;
	}

.dob .form-item.error .text-input.day {
	margin-left: 8px;
}

.guide .menu-video { 
	width: 47%;
	margin: 0 0 15px; 
	}

.g-menu, .g-submenu {
	width: 50%;
	margin: 0px 0;
	padding: 0;
	position: relative;
	}

.top-content { margin: 0 auto 8px; }
.call-support { margin: 0 0px 20px; display: block; }
.menu li.menu-call-support .call-support { display: none; }

.h-menu {  
	margin: 0; 
	position: absolute;
	top: 15px;
	right: 10px;
	z-index: 1;
	}

.h-menu h3 { 
	display: none;
	width: 100px; 
	padding-left: 0;
	}

.h-menu .g-menu { 
	width: auto; 
	background: transparent;
	padding: 0;
	display: inline-block;
	}

.h-menu .g-menu li { 
	display: inline-block;
	width: 290px; 
	border-radius: 30px;
	border: 0;
	background: rgba(203, 235, 251, 0.70);
	padding: 1px 10px;
	}

.h-menu .g-menu li:first-of-type { 
	margin-right: 6px;
	}

.h-menu .g-menu li a { 
	font-size: 1.25em;
	}

.h-menu .g-menu li a svg { 
	top: 16px;
	}

.support .g-menu { width: 100%; max-width: 450px; }
	
.g-submenu {
	width: 100%;
	height: 386px;
	margin: 0;
	padding: 0 20px;
	box-sizing: border-box;
	background-color: rgba(180, 229, 255, 0.7);
	position: absolute;
	left: 100%;
	top: 0;
	}
	
.g-menu li.show svg { display: none }
	
.g-menu li { width: 95% }

.g-menu li.show {
	width: 100%;
	border-top: 1px solid rgba(35, 55, 103, 0.01);
	background: url(../img/g-select.svg) no-repeat top right;
	background-size: auto 100%;
	}
	
.g-submenu li, .g-submenu li:last-of-type { 
	width: 100%;
	border-top: 0;
	border-bottom: 1px solid rgba(35, 55, 103, 0.15);
	}
	
.g-submenu li a { 
	padding-right: 35px;
	background: url(../img/g-next.svg) no-repeat top 17px right 10px;
	background-size: auto 20px;
	}

.panel .row .col.ug-link { padding-top: 30px; }
.support .menu { text-align: center; }
.support .menu li { border-top: 0; border-bottom: 0; }
.support .panel h1 { font-size: 2.0em; margin-top: 1.0em; }
.support .panel .ug-link h2 { margin-top: 1.25em; }
	
.g-nav { top: -8px; }
	
.g-nav li {
	margin: 0 0 0 8px;
	width: 50px;
	height: 50px;
	}

.g-nav li a {
	width: 50px;
	height: 50px;
	background-position: center left 20px;
	background-size: auto 24px;
	}
	
.g-crumb {
	padding: 0 20px 0 10px;
	margin: 0 3%;
	border-bottom: 2px solid rgba(35, 55, 103, 0.15);
	box-sizing: border-box;
	position: absolute;
	left: 0px;
	top: 76px;
	z-index: 1;
	}

.g-crumb li {
	margin: 0 5px 0 0;
	padding: 0 10px 0 0;
	background-image: url(../img/g-crumb.svg);
	background-repeat: no-repeat;
	background-position: center right;
	background-size: auto 10px;
	}
	
.g-crumb li:last-of-type { display: inline-block; background-image: none; }
	
.guide .panel { 
	margin-top: 0; 
	padding: 30px 40px 40px;
	}
	
.support .panel { padding: 30px 40px 40px; }

.guide .panel h1 {
	font-size: 2.0em;
	margin-top: 1.5em;
	}
	
.guide .panel h2 {
	font-size: 2.0em;
	margin-top: 1.5em;
	}

.guide .panel h2:first-of-type {
	margin-top: 0.75em;
	}
	
.guide .panel p, .guide .panel li, .pop-panel p {
	font-size: 1.25em;
	line-height: 135%;
	}
	
.guide .panel .col p img {
	margin: 0;
	}
	
.pop-panel { width: 520px; }
	
ol li span.bull {
	font-size: 1.0em;
	top: -2px;
	}
	
.g-tip-tap .img-pinpad { left: 0; margin-left: 0; }

.mf .row.r2 .col:first-of-type p:first-of-type, 
.mf .row.r3 .col:first-of-type p:first-of-type, 
.mf .row.r6 .col:first-of-type p:first-of-type, 
.mf .row.r8 .col:first-of-type p:first-of-type, 
.mf .row.r10 .col:first-of-type p:first-of-type, 
.mf .row.r12 .col:first-of-type p:first-of-type, 
.mf .row.r13 .col:first-of-type p:first-of-type, 
.mf .row.r14 .col:first-of-type p:first-of-type { margin-top: 50px }

.mf .row.r5 .col:first-of-type p:first-of-type { margin: 20px 0 30px; max-width: 760px; }

.mf .row.r7 .col:first-of-type p:first-of-type, 
.mf .row.r9 .col:first-of-type p:first-of-type, 
.mf .row.r11 .col:first-of-type p:first-of-type { margin: 10px 0 40px; max-width: 760px; }

.ff .row.r2 .col:first-of-type p:first-of-type, 
.ff .row.r5 .col:first-of-type p:first-of-type, 
.ff .row.r7 .col:first-of-type p:first-of-type, 
.ff .row.r9 .col:first-of-type p:first-of-type, 
.ff .row.r11 .col:first-of-type p:first-of-type, 
.ff .row.r12 .col:first-of-type p:first-of-type, 
.ff .row.r13 .col:first-of-type p:first-of-type { margin-top: 50px }

.ff .row.r4 .col:first-of-type p:first-of-type { margin: 20px 0 30px; max-width: 760px; }

.ff .row.r6 .col:first-of-type p:first-of-type, 
.ff .row.r8 .col:first-of-type p:first-of-type, 
.ff .row.r10 .col:first-of-type p:first-of-type { margin: 10px 0 40px; max-width: 760px; }

.rct .ani-wrapper, .rct .r3 img.img-mask { margin-bottom: 0 }

.rct .row.r2 .col:first-of-type p:first-of-type, 
.rct .row.r4 .col:first-of-type p:first-of-type, 
.rct .row.r6 .col:first-of-type p:first-of-type { margin-top: 50px }

.rct .row.r3 .col:first-of-type p:first-of-type, 
.rct .row.r5 .col:first-of-type p:first-of-type, 
.rct .row.r7 .col:first-of-type p:first-of-type, 
.rct .row.r9 .col:first-of-type p:first-of-type, 
.rct .row.r11 .col:first-of-type p:first-of-type { margin-top: 90px }

.g-ta .row.alt-row .col.g-ped-center { padding-top: 20px !important }
.col.g-restart-ani { top: -80px; right: -30px; }
.rss .r2 .col { margin-top: -60px }
.guide .g-cltt .col.g-ped-center { padding-bottom: 220px; }


.paylink .main .content { 
	max-width: 540px; 
	padding-top: 20px;
	}
	
.paylink .panel { padding: 20px; }
	
.paylink .title { height: 54px; }
	
.paylink .title h1 { text-align: center; }
	
.paylink .form-item label { width: 99%; padding-bottom: 10px; }
.paylink .form-item .text-input { width: 100%; }

.back.restricted { display: none; }

}
	
@media only screen and (min-width: 992px) {

.content, .main .content, .home .main .content {
	width: 960px;
	padding: 40px 10px;
	}
	
.home .main .content .row { margin-top: 40px; }

.h-menu h3 { display: inline-block; }
	
a.nav-account {
	width: 105px;
	}
	
a.nav-account span { display: inline }
	
.nav {
	width: 480px;
	}

.nav.restricted {
	width: 260px;
	}

.nav.restricted li.nav-account a { text-indent: 0px; }
	
.tabs li a, .tabs li.single a {
	width: 140px;
	padding: 10px 0;
	}
	
.details .panel { padding: 0 80px 20px; }

.custom-menus .dd-menu { width: auto }
.custom-menus label { min-width: 40px; }

.account .menu li, .menu li.settings-bank, .menu li.settings-upload-id, .menu li.settings-change-pin { margin: 0 36px 10px 0; }

.account .menu li a, .support .menu li a {
	width: 160px;
	font-size: 1.5em;
	line-height: 120%;
	padding: 150px 0 0 0;
	}
	
.account .menu li a::before, .support .menu li a::before { 
	width: 130px;
	height: 130px;
	margin-left: -65px;
	}
	
.menu li.settings-account a svg 	{ width: 60px; top: 34px; margin-left: -30px; }
.menu li.settings-payment a svg 	{ width: 74px; top: 31px; margin-left: -36px; }
.menu li.settings-bank a svg 		{ width: 66px; top: 37px; margin-left: -33px; }
.menu li.settings-change-pin a svg	{ width: 66px; top: 31px; margin-left: -33px; }
.menu li.settings-change-password a svg	{ width: 86px; top: 28px; margin-left: -43px; }
.menu li.settings-upload-id a svg	{ width: 62px; top: 35px; margin-left: -31px; }
.menu li.settings-chargebacks a svg	{ width: 70px; top: 33px; margin-left: -38px; }
.menu li.settings-strip a svg		{ width: 64px; top: 34px; margin-left: -32px; }
.menu li.settings-logout a svg		{ width: 68px; top: 37px; margin-left: -29px; }
.menu li.new-message a svg			{ width: 56px; top: 35px; margin-left: -28px; }

/* 
.menu li.menu-support a svg 	{ width: 70px; top: 30px; margin-left: -35px; }
.menu li.menu-jobs a svg 		{ width: 66px; top: 28px; margin-left: -34px; }
.menu li.menu-payments a svg 	{ width: 92px; top: 31px; margin-left: -47px; }
.menu li.menu-messages a svg 	{ width: 72px; top: 33px; margin-left: -36px; }
.menu li.menu-guide a svg		{ width: 86px; top: 33px; margin-left: -43px; }
.menu li.menu-account a svg		{ width: 62px; top: 32px; margin-left: -31px; }
 */
	
.messages .menu li { margin-right: 40px; }

/* .num { top: 104px; left: 120px; } */

.trans-table td span {
	font-size: 1.0em;
}
	

a.btn2.download{
    right:70px;
}

}

.unread td:first-of-type::before {
	top: 18px;
	}

.account .panel form.change-pin .actions .btn { width: 260px; }
}


div.dash-option {
	background: blue;
	border: 5px solid blue;
	border-radius: 15px;
	margin-bottom: 30px;
	color: white;
	max-width: 400px;

}	

a.errorlink {
	color: black !important;
}

div.payment-actions {
	margin-bottom: 10px;
}

div.payment-actions a {
	margin-bottom: 10px;
	margin-left: 10px;
	border: 2px solid black;
}

button.animated-ellipsis:after {
	display: inline-block;
	animation: dotty steps(1,end) 1s infinite;
	content: '';
	width: 1px;
	overflow: visible;
}

@keyframes dotty {
        0%   { content: '    '; }
        25%  { content: ' .  '; }
        50%  { content: ' .. '; }
        75%  { content: ' ...'; }
        100% { content: '    '; }
}

.id-info .account-item p.banknote {
	padding-left: 0px;
	padding-right: 0px;
}

.summary-panel#fetching {
	display: none;
	font-size: 20px;
	font-weight: 600;
}

.summary-panel#fetching span.animated-ellipsis:after {
	display: inline-block;
	animation: dotty steps(1,end) 1s infinite;
	content: '';
	width: 1px;
	overflow: visible;
}

@media only screen and (max-width: 380px){
.account .link_div p{width:100%; padding-left:0px;}

.summary-panel dd { font-size: 1.2em; }

}

@media only screen and (max-width: 330px){
.account .link_div .status{width:100%; right:50%;}
}

.inc_tips{display:inline;}
.inc_tips.hide{display:none;}

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

    .text-input.pass-show-hide{width: calc(97% - 2em);}

    #job_filters{
        text-align:unset;
        display:flex;
        justify-content:space-around;
    }

    #job_filters a{
    text-align:center;
        height:55px;
        width: 55px;
        font-size: 0.7em;
    }

     td.range, th.range{
        display: none;
    }

    .bubble{
        width: 90px;
        height: 90px;
    }

    div.trip-summary .bubble p.time, .payment-summary .bubble p.day{
        font-size: 1.5EM;
    }

    .payment-summary .bubble p.day{
        margin-top:15px;
    }

    .payment-summary .bubble p.year {
        font-size: 0.9em;
    }

    .payment-summary .bubble p.time {
        font-size: 1.1em;
    }

    .content dl.payref dt.ref{
        width:30%;
    }

    .content dl.payref dd.ref{
        width:70%;
    }

    div.trip-summary p.distance,div.trip-summary p.time{
        font-size: 1.75EM;
    }

    .trip-stats svg, .summary-arrow svg {
        width: 70px;
        margin-left:-35px;
        top:37px;
    }

    .bubble h3 {
        font-size: 0.7em;
        padding-left:0px;
        padding-right:0px;
    }

    #job_filters{
        text-align:unset;
        display:flex;
        justify-content:space-around;
    }

    #job_filters a{
    text-align:center;
        height:55px;
        width: 55px;
        font-size: 0.7em;
    }

    .account .panel form.change-pin .actions .btn { width: 250px; margin-left: calc( 50% - 250px /2 )  }

    span.num{
        bottom: unset;
    }

    .inbox td.mrow{    
        display: block;
        width: 100%;
        text-align: left;
        padding-left: 28px;
        padding-top: 0px;
    }

    .summary-panel dt { font-size: 0.65em }
    #total_jobs, #total_fares, #total_tips {font-size:1.0em;}
    .inc_tips{display:none;}
    
    .trans-table .row-select a.next svg, .inbox .row-select a.next svg.jobs{top:23px;}

    .message-head p.date{
        top:37px;
        right:unset;
    }

    .content dd.total{font-size:1.25em; line-height:200%;}
    .content dt.total{padding-top:24px;}
    .content dl.payref dt{width:20%;}
    .content dl.payref dd{width:80%;}

    .menu li.settings-account a span#account_name{
        max-width: calc(100% - 25px);
    }

}

@media only screen and (max-width: 300px){
    #total_jobs, #total_fares, #total_tips {font-size:0.75em;}
    .menu li.settings-account a span#account_name strong{font-size:1.2em;}
}

body.paylink span#paylink_guid ,
body.paylink span#paylink_initial ,
body.paylink div#pay_status_holder ,
body.paylink form#change_amount_holder ,
body.paylink div#resend_or_speak_holder , 
body.paylink form#send_sms_holder ,
body.paylink p#sms_error ,
body.paylink form#send_email_holder ,
body.paylink p#email_error ,
body.paylink div#qr_holder,
body.paylink div#send_another_way_holder ,
body.paylink div#sent_holder ,
body.paylink dt#fare_label ,
body.paylink dd#fare_amount ,
body.paylink dt#tip_label ,
body.paylink dd#tip_amount ,
body.paylink audio#success_audio ,
body.paylink audio#failed_audio
{
	display: none;
}

body.paylink .panel p.error {
	border: 1px red;
	border-radius: 5px;
	background: pink;
	color: red;
	margin-top: 20px;
	padding: 5px;
	animation: pulsing 2s linear infinite;
	width: 100%;
	box-sizing: border-box;
}

@keyframes pulsing {
	0% { 
		opacity: 0.1;
	}

	50% { 
		opacity: 1.0;
	}

	100% { 
		opacity: 0.1;
	}
}