@import url('//fonts.googleapis.com/css?family=Varela');
@import url('//fonts.googleapis.com/css?family=Raleway');

html, body {
	height: 100%;
}

body {
	padding: 0px;
	margin: 0px;
	min-width: 320px;
	font-size: 100%;
	font-family: 'Raleway', sans-serif;
}

a {
	color: #8A288E;
}

h1 {
	margin: 0;
}

h2 {
	color: #8A288E;
}

.left h2 {
	margin: 10px 0 5px 10px;
}

input, select {
    font-size: 100%;
	font-family: inherit;
}

fieldset {
    border-top: 30px solid #8A288E !important;
    border: 0;
    margin-bottom: 50px;
}

legend {
	background: #8A288E;
	color: #fff;
	height: 30px;
	line-height: 30px;
}

section {
	width: 100%;
	padding: 20px 0 20px 0;	
}

#header {
	position: relative;
	height: 60px;
	background: #8A288E;
	color: #fff;
}

#header  a {
	text-decoration: none;
	display: inline-block;
}

#header a#strapline {
	color: #fff;
	background-image: url(/assets/img/touchtopupweb_logo.svg);
	background-repeat: no-repeat;
	background-position: 10px 10px;
	font-family: 'Varela',sans-serif;
	font-size: 35px;
	padding: 7px 0 0 105px;
}

#header a#menu-button {
	float: right;
	margin: 15px 25px 0 0;
	width: 22px;
	padding: 5px;
	height: auto;
	line-height: normal;
	background: #8A288E; /* Old browsers */
	background: -moz-linear-gradient(top,  #8A288E 5%, #68066c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#8A288E), color-stop(100%,#68066c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #8A288E 5%,#68066c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #8A288E 5%,#68066c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #8A288E 5%,#68066c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #8A288E 5%,#68066c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8A288E', endColorstr='#68066c',GradientType=0 ); /* IE6-9 */
	border: 1px solid #68066c;
	text-shadow: 1px 1px 0 #240228;
	box-shadow: 0 1px 0 0 #9b399f inset;
	color: #fff;
	display: none;
}

#header #navigation {
	position: absolute;
	top: 22px;
	right: 10px;
}

#header #navigation ul {
	list-style: none;
	display: inline;
	margin: 0;
	padding: 0;
}

#header #navigation ul li {
	display: inline;
	margin-right: 15px;
}

#header #navigation ul li a {
	color: #fff;
}

#container {
	min-height: 100%;
	/* equal to footer height */
	margin-bottom: -70px;
}
#container:after {
	content: "";
	display: table;
	/* equal to footer height */
	height: 70px; 
}

#footer {
	width: 100%;
	height: 70px;
	overflow: hidden;
	background: #333;
	color: #fff;
	position: absolute;
}

#footer #footer-logo {
	display: inline;
	margin: 10px;
	float: left;
}

#footer #footer-links {
	margin: 10px;
	padding: 0;
	line-height: 50px;
	list-style: none;
	float: left;
}

#footer #footer-links li {
	padding: 0 10px;
	display: inline-block;
}

#footer #footer-links li a {
	color: #fff;
}

#flashmessage {	
	background: #000;
	color: #fff;
	font-weight: bold;
	padding: 5px;	
}

#flashmessage p {
	border: 3px solid #54BA00;
	background-color: #48A100;
	text-align: center;
	padding: 10px;	
	margin: 0;
}

#flashmessage p.reset_error {
	border: 3px solid #ff0000;
	background-color: #ff4444;
}

.separator {
	height: 0px;
	border: none;
	background: none;
	max-width: 1000px;
	border-bottom: 1px dashed #ccc;
}

.section-padding {
	margin-left: auto;
	margin-right: auto;
	min-height: 300px;
	max-width: 1000px;
	box-sizing: border-box;
}

.main-section {
	position: relative;
	
	background-position: left top;
	background-size: 35%;
	background-repeat: no-repeat;
	width: 100%;
	min-height: 500px;
}

.homepage {
	background-image: url(/assets/img/background-money.png);
}

.home-section {
	box-sizing: border-box;
	width: 100%;
	min-height: 450px;
	margin: 0 auto;
	background: #111;
	opacity: 0.9;
}
.home-section:after { content: ""; display:table; clear: both; }

.home-text {				
	box-sizing: border-box;
	position: relative;
	width: 80%;
	padding: 20px 0;
	margin: 0 auto;
	color: #fff;
	max-width: 800px;
	line-height: 1.4;
}
.home-text:after { content: ""; display:table; clear: both; }

.login-box {
	position: relative;
	width: 80%;
	padding: 50px 0;
	margin-left: auto;
	margin-right: auto;
	color: #333;
	font-size: 16px;
}
.login-box:after { content: ""; display:table; clear: both; }

.login-box #login {
	position: relative;
	max-width: 300px;
	width: 40%;
	float: left;
}

.login-box #registering {
	position: relative;
	max-width: 450px;
	width: 52%;
	float: left;
	margin: 0 0 0 8%;
	line-height: 1.4;
}

.login-box h3 {
	margin: 0;
}

.login-box label {
	display: block;
	padding: 5px 0;
	margin-top: 20px;
}

.login-box input {
	padding: 5px;
	width: 100%;
	line-height: 18px;
	border: 1px solid #888;
	border-radius: 3px;
	vertical-align: middle;
	box-sizing: border-box;
	font-size: inherit;
}

.login-box input[type="submit"] {
	margin: 20px 0;
}

.login-box .error, .signup-section .error  {
	font-size: 0.875em;
	color: #f00;
}

#forgotpassword{
	text-decoration: none;
	font-size: 11pt;
}

#forgotpassword img{
	margin-right: 5px;
	margin-bottom: -1px;
}

.signup-section {
	margin-left: auto;
	margin-right: auto;
	color: #333;
}

.signup-section fieldset {
	margin-bottom: 20px;
}

.signup-section h1 {
	margin-bottom: 20px;
}

.signup-section label {
	width: 50%;
	display: block;
	padding: 5px 0;
	margin-top: 10px;
}

.signup-section input, .signup-section select {
	padding: 5px;
	width: 100%;
	line-height: 18px;
	border: 1px solid #888;
	border-radius: 3px;
	vertical-align: middle;
	box-sizing: border-box;
	font-size: inherit;
}

.signup-section select {
	width: 40%;
}

.signup-section input[type="submit"] {
	margin: 20px 0;
}

#link-account-section {
	display: none;
}

#link-account-section fieldset {
    border-top: 30px solid #8A288E !important;
    border: 0;
}

#link-account-section legend {
	background: #8A288E;
    margin: 0;
    color: #fff;
    font-weight:  bold;
    border: 5px solid #8A288E;
}

input#linkkey {
	font-family: monospace;
}

#payments-topup-section {
	display: none;
}

#payments-topup-section .paymentamt {
	font-size: 130%;
	cursor: pointer;
	margin-right: 20px;
}

#payments-topup-section input.paymentamt {
	cursor: text;
	margin-right: 0px;
}

#payments-topup-section .paymenttype img, #payments-topup-section  .paymenttype input {
	vertical-align: middle;
	cursor: pointer;
}

label.paymenttype  {
	display: block;
}

label.paymenttype input[type=radio] {
	float: left;
}

.transaction-item { 
	cursor: pointer;
}

.transaction-item:hover td {
	background-color: #ccc !important;
}

.transactions-section {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.transactions-section .left {
	position: relative;
	float: left;
	width: 30%;
}

.transactions-section .right {
	position: relative;
	float: left;
	width: 70%;
}

.date-picker {
	padding: 10px;
}

.date-picker input {
	text-decoration: underline;
	cursor: pointer;
	border: none;
}

.date-picker h4 {
	margin: 0;
}

.date-picker li {
	padding: 10px 10px 10px 0;
	margin: 10px;
}

.date-picker img {
	position: relative;
	top: 2px;
	padding-right: 6px;
}


.ui-datepicker-trigger {
	height: 1px;
	width: 1px;
}

/*.date-picker span {
	position: absolute;
	right: 0;
	margin-right: 20px;
}

.date-picker {
	list-style: none;
	margin: 0 0 20px 0;
	padding: 0;
}*/

.period-shortcuts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.period-shortcuts .periodbuttons {
	position: relative;
	margin-right: 20px;
	padding: 0;
}
.period-shortcuts .periodbuttons:first-child {
}

.period-shortcuts .periodbuttons h4 {
	margin: 0px;
	display: block;
	width: 100%;
	height: 100%;
}

.period-shortcuts .periodbuttons h4 a {
	color: #8A288E;
	background-color: #fff;
	text-decoration: none;
	display: block;
	width: auto;
	height: auto;
	padding: 10px;
}

.period-shortcuts .periodbuttons h4 a:hover {
	color: #fff;
	background: #8A288E;
}

.period-shortcuts .periodbuttons strong {
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: #333;
}
/*
.period-shortcuts .periodbuttons:hover strong {
	color: #fff;
}*/

.payment-section {
	background-image: url(/assets/img/wallet.jpg);
	margin-left: auto;
	margin-right: auto;
}

.loader {
    color: #333;
	background: #FEFEFE;
	text-align: center;
	padding: 5px 0px;
	position: absolute;
	width: 100%;
}

/* Swiper main container */
.swiper-container
{
	width:100%;
	height: 250px;
	background: #000;
	text-align:center;
	background: #45484d; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  #45484d 0%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  #45484d 0%,#000000 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  #45484d 0%,#000000 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  #45484d 0%,#000000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/* Pagination */
.pagination
{
	position:relative;
	z-index:20;
	bottom:20px;
}

.swiper-pagination-switch
{
	display:inline-block;
	width:8px;
	height:8px;
	border-radius:8px;
	background:#555;
	margin-right:5px;
	opacity:0.8;
	border:1px solid #fff;
	cursor:pointer;
}

.swiper-active-switch{background:#fff;}

/* Swiper slide container */
.swiper-slide
{
	cursor: grab;
	cursor: -webkit-grab;
	padding: 20px;
	box-sizing: border-box;
	opacity: 0.7;
	transform: scale(0.8);
}

.swiper-slide-active
{
	opacity: 1;
	transform: scale(1);
}

/* Swiper slide content */
.swiper-slide .slide-content
{
	position: relative;
	min-width: 280px;
	width: auto;
	height: 100%;
	color: #fff;
	font-size: 14px;
	text-align: left;
	background: url("/assets/img/gloss.png") repeat scroll 100% 100%;
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 6px;
	box-sizing: border-box;
	padding: 60px 10px 10px;
	transition: all 300ms ease 0s;
	max-width: 360px;
	max-height: 200px;
	margin: 0 auto;
	overflow: hidden;
}

.swiper-slide .slide-branded
{
	background: url("/assets/img/gloss.png") repeat scroll 100% 100%, url("/assets/img/icrtouchlogo.svg") no-repeat scroll 5px 5px #000 !important;
}

.slide-content .companyname
{
    font-size: 22px;
}

.slide-content .balance
{
    font-size: 32px;
    text-align: right;
	position: absolute;
    bottom: 10px;
	right: 10px;
}

.slide-content .last-update {
	text-align: right;
	position: absolute;
	right: 10px;
	bottom: 45px;
	font-size: 12px;
}

.balance small.not-available {
	font-size: 20px;
}

.swiper-slide .slide-content .topup { display: none; }
.swiper-slide-active .slide-content .topup { display: block; }

.button
{
    background: #77d42a; /* Old browsers */
	background: -moz-linear-gradient(top,  #77d42a 5%, #5cb811 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#77d42a), color-stop(100%,#5cb811)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #77d42a 5%,#5cb811 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #77d42a 5%,#5cb811 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #77d42a 5%,#5cb811 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #77d42a 5%,#5cb811 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77d42a', endColorstr='#5cb811',GradientType=0 ); /* IE6-9 */
	border: 1px solid #268a16;
    border-radius: 6px;
    box-shadow: 0 1px 0 0 #caefab inset;
    color: #306108;
    display: inline-block;
    font-family: Arial;
    font-size: 15px;
    font-style: normal;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    text-shadow: 1px 1px 0 #aade7c;
	-webkit-appearance: none;
	cursor: pointer;
}

.button:hover
{
	background: #66c319; /* Old browsers */
	background: -moz-linear-gradient(top,  #66c319 5%, #4ba700 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#66c319), color-stop(100%,#4ba700)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #66c319 5%,#4ba700 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #66c319 5%,#4ba700 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #66c319 5%,#4ba700 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #66c319 5%,#4ba700 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66c319', endColorstr='#4ba700',GradientType=0 ); /* IE6-9 */
	color: #205007;
}

.slide-content .topup
{
    position: absolute;
    bottom: 10px;
}

.add-customer
{
    text-align: center !important;
    vertical-align: middle;
}

.add-customer span
{
    background: none repeat scroll 0 0 #333;
    border: 3px solid #ffffff;
    border-radius: 100px;
    color: #ffffff;
    display: inline-block;
    font-size: 150px;
    height: 100px;
    line-height: 105px;
    position: relative;
    text-align: center;
    top: -10px;
    vertical-align: middle;
    width: 100px;
}

.add-customer p
{
    position: relative;
    top: -15px;
}

.transactions-table {
	color: #333;
	width: 100%;
	border-spacing: 0; 
	font-size: 14px;
}

.transactions-table td, .transactions-table th { 
	border-collapse: collapse;
	border: 1px solid transparent; /* No more visible border */
	height: 30px; 
	transition: all 0.3s;  /* Simple transition for hover effect */
}

.transactions-table th {
	background: #8A288E;  /* Darken header a bit */
	color: #fff;
	font-weight: bold;
}

.transactions-table td {
	background: #FAFAFA;
	text-align: center;
}
/* transaction id */
#payments td:nth-child(3) {
	word-break: break-all;
}

/* Cells in even rows (2,4,6...) are one color */ 
.transactions-table tr:nth-child(even) td { 
	background: #F1F1F1;
}

/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */ 
.transactions-table tr:nth-child(odd) td { 
	background: #FEFEFE; 
}

.transactions-table .load-more-td a {
	color: #8A288E;
}

.transactions-table .month-td {
	background: #79177d;
}

.transactions-toolbar {
	margin-left: auto;
	margin-right: auto;	
	width: 50%;
	padding-top: 20px;
	text-align: center;
}
.wallets-table {
	color: #333;
	width: 100%;
	border-spacing: 0; 
	font-size: 14px;
	margin-bottom: 30px;
}

.wallets-table td, .wallets-table th { 
	border-collapse: collapse;
	border: 1px solid transparent; /* No more visible border */
	height: 30px; 
	transition: all 0.3s;  /* Simple transition for hover effect */
}
.wallets-table th {
	background: #8A288E;  /* Darken header a bit */
	color: #fff;
	font-weight: bold;
}
.wallets-table td {
	background: #FAFAFA;
	text-align: center;
}
/* Cells in even rows (2,4,6...) are one color */ 
.wallets-table tr:nth-child(even) td { 
	background: #F1F1F1;
}

/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */ 
.wallets-table tr:nth-child(odd) td { 
	background: #FEFEFE; 
}

table#wallet-info {
		width:100%;
}

#wallet-info th:nth-child(1){
	text-align:left;
	width:70%;
}

#wallet-info th:nth-child(2){
	text-align:right;
	width:30%;
}

.wallets-table th.wallet-subhead{	
	background:#79177d;
}

.wallet-but{
	line-height:30px;
	height:30px;
}

table.wallet-charge,table.wallet-payment-history,table.wallet-charge-history {
	width:100%;
}

.toggles {
	padding: 10px;
	text-align: center;
}

.toggles .button{
	width: 90%;
	height: auto;
}

.toggles a img {
	position:relative;
	top:2px;
	padding-right:6px;
}

#payments, #wallets {
	display: none;
}


.payment-form-section form .form-field {
	display: flex;
	flex-direction: row;
	margin: 0.5em;
	align-content: center;
}

.payment-form-section form label {
	flex: none;
	display: block;
	width: 125px;
	font-weight: bold;
	font-size: 1em;
	padding: 0.25em;
}

.payment-form-section form input {
	flex: 1 1 auto;
	display: block;
	margin-bottom: 10px;
	margin-right: 8px;
	padding: 4px;
	margin-top: -4px;
}

.validation-errors {
	border-bottom: 2px solid red;
	padding-bottom: 0.5em;	
}

.validation-errors h4 {
	color: red;
}

.submit-payment:disabled, .submit-payment[disabled] {
	filter: grayscale(100%);
	background-color: gray;
}

#icrPaymentFormCountryB {
	width: 100%;
}

@media only screen and (max-width : 680px) { 
	#header nav {
		display: none;
	}
	
	#header a#menu-button {
		font-size: 14px;
		margin: 17px 5px 0 0;
		display: block;
	}

	.popup-menu {
		position: absolute;
		top: 60px !important;
		width: 300px;
		z-index: 99;	
		box-shadow: 0 1px 0 0 #9b399f inset;
		/*display: block !important;*/
		background: #eee;
	}

	.popup-menu ul {
	}

	.popup-menu ul li {
		display: list-item !important;
		border-bottom: 1px solid #ccc;
		background: #eee;
		width: 100%;
	}

	.popup-menu ul li:hover {
		background: #ddd;
	}

	.popup-menu ul li a {
		color: #333 !important;
		width: 100%;
		padding: 10px 0 10px 10px;
	}	
	
	.homepage {
		background-image: url(/assets/img/background-money.png);
		background-position: left top;
		background-size: 70%;
	}
}

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

	.balance small.not-available {
		font-size: 60%;
	}
	
	.section-padding {
		padding: 0 5px 0 5px;
	}

	.login-box {
		padding: 20px 0;
	}
	
	.login-box, .home-text {
		width: 90%;
	}
	
	.login-box #login {
		position: relative;
		max-width: 100%;
		width: 100%;
		float: none;
	}

	.login-box #registering {
		width: 100%;
		float: none;
		margin: 1% 0 0 0;
	}

	.left h2 {
		display: none;
	}

	.period-shortcuts {
		display: none;
	}

	.transactions-section {
		min-height: inherit;	
		background: none;
	}

	.transactions-section .left {
		float: none;
		width: inherit;
	}

	.transactions-section .left .toggles {
		margin-bottom: 15px;
		padding: 0px;
	}

	.transactions-section .right {
		float: none;
		width: inherit;
	}

	.transactions-table th {
		width: inherit !important;
	}

	.swiper-container {
		padding: 0px 0 2px 0;
	}
	
	.loader {
		width: 100%;
		padding: 0;
	}

	.signup-section label {
		width: inherit;
	}

	.summary-section {
		height: inherit;
		padding: 5px 0 2px 0;
	}

	#container {
		/* equal to footer height */
		margin-bottom: -140px;
	}
	
	#footer, #container:after {
		height: 140px;
	}
	
	#footer #footer-logo {
		width: auto;
		margin-right: 0;
	}
	
	#footer #footer-links {
		width: 100%;
		margin: 0 0 10px 10px;
		line-height: 40px;
	}
}

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

	#header {
		height: 48px;
	}
	
	#header a#strapline {
		background-size: 63px 30px;
		height: 30px;
		font-size: 26px;
		padding: 10px 0 0 78px;
	}

	#header a#menu-button {
		font-size: 14px;
		margin: 12px 5px 0 0;
		display: block;
	}		

	.popup-menu {
		width: 100%;
		top: 48px !important;
		border-top: 1px solid #333;
	}

	.popup-menu ul li {
		padding: 0 0 0 10px;
	}

}