body {
	background-color:#000000;
	color:#2196f5;
	margin:0;
	font-family:Arial;
	font-size:16px;
}

a { color:white }
a:hover { text-decoration:underline; }
li { text-align:left; }

.textleft { text-align:left; }
.textcenter { text-align:center; }
.textright { text-align:right; }
.textbold { font-weight:bold; }
.linegaps { line-height:2em; }

.spinner { animation:spin 2s infinite linear; outline:none; border:none; display:inline-block; }
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.floater-outy { position: relative; }
.floater-inny { position: absolute; }
.floater-outy-container { position: relative;padding-right:1em }
.floater-outy-container.big { 
	font-size: 3em; 
}
.floater-outy-container.ourblue {
	color: #2196f5;
}
.floater-outy-container.center {
	text-align: center;
}
.widthmobile {
	width:100%;
	max-width:440px;
}

.row	{ width:100%; }
.row::after { clear:both; }

.banner {
	width:100%;
	background:rgba(0,0,0,1) url("/theme/1/images/banner_background.png?v=20231017") no-repeat top left;
	background-size:90%;
	background-position-x: center;
	text-align:center;
	min-height: 58px;
	padding-top:50px;
}
.banner_title {
	display:inline-block;
	width:calc(100% - 80px);
	font-size:20px;
}
.banner_subtitle {
	padding-top:5px;
	padding-bottom:20px;
	font-size:12px;
}

.banner .link	{ width:40px; display:inline-block; }
.banner .link a	{ color:#2196f5; font-size:20px; }
.banner .link_back		{ float:left; }
.banner .link_forward	{ float:right; }

.footer {
	width: calc(100% - 20px);
    height: auto; 
    position: fixed; 
    bottom: 0;
	background-color: #2b2e35;
	color: #2196f5;
	font-size: 15px;
	padding: 10px;
	text-align:center;
}
.footer a { color: #2196f5; padding:0 10px; }
.footer span { padding:0 10px; }
.footer a:hover { color: #d8d8d8; }
.footer .copyright { }


.panel {
	background-color:#2b2e35;
	color:white;
	border-radius:7px;
	margin:14px;
	text-align:left;
	min-height:162px;
}
.panel p, .panel td {
	color:#2196f5;
}
.panel.bubbled { margin-top:42px; }
.panel .header {
	display:flex;
	width:200px;
	text-align:center;
	position:relative;
	top:-29px;
	left:50%;
	margin-left:-100px;
	margin-bottom:-25px;
	vertical-align:middle;
}
.panel .header .bubble {
	background-color:white;
	color:#2196f5;
	font-size:20px;
	font-weight:bold;
	display:flex;
	margin:0 auto;
	min-width:50px;
	height:50px;
	text-align:center;
	vertical-align:middle;
	border:2px solid #2196f5;
	border-radius:50px;
	box-shadow:0 3px rgba(0, 0, 0, 0.15)
}
.panel .header .bubble .bubble_text { margin:auto; padding:0 2px; }

.panel-gap	{ padding:14px }
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5 { margin-top: 0; }
.panel h1 { color:#2196f5; font-size:32px; }
.panel h2 { color:#2196f5; font-size:24px; }
.panel h3 { color:#2196f5; font-size:19px; }
.panel h4 { color:#2196f5; font-size:18px; }
.panel h5, .panel h5 a { color:#2196f5; font-size:17px; margin-bottom:0.5em; }
 

.panel-buttons	{ display:flex; width:100%; min-height:3em; vertical-align:middle; }
.panel-button	{ text-align:center; vertical-align:middle; margin:auto; font-size:25px; font-weight:bold; padding: 10px 0; border:none; border-radius:7px; cursor:pointer; }
.panel-button::focus { }
.panel-button-size-1 { width: 100%; }
.panel-button-size-2 { width: 50%; }
.panel-button-size-3 { width: 33.33%; }
.panel-button-submit, .panel-button-cash, .panel-button-bank, .panel-button-continue , .panel-button-pay, .panel-button-receipt, .panel-button-generateQr { background-color:#2196f5; color:#ffffff; }
.panel-button-confirm, .panel-button-cashOut, .panel-button-payInRequest, .panel-button-addBank, .panel-button-makePayment, .panel-button-wallet-bank, .panel-button-cashout-confirm, 
.panel-button-breakDown, .panel-button-send-email, .panel-button-send-tel{ background-color:#2196f5; color:#ffffff; }
.panel-button-pay.panel-button-size-2  { width:70% }
.panel-button-cancel, .panel-button-back, .panel-button-refresh, .panel-button-change_amount, .panel-button-wallet-bank-back { background-color:#6d6e7c; color:#ffffff; margin-right:7px }
.panel-button.disabled { color:rgba(127,127,127,0.7); cursor:wait; }
.panel-button-keyboard-middle { margin: 0px 10px 20px 10px; }
.panel-button-cash { margin-right: .5em }
.panel-button-wallet-bank, .panel-button-wallet-bank-back, .panel-button-cashout-confirm, .panel-button-send-email, .panel-button-send-tel{ margin-top:1em }
.page-title {
    font-size: 2em;
    margin: 9px;
	font-weight: bold;
}

.box {
	text-align:center;
	background-color:#252527;
	margin-bottom:14px;
	border-bottom:2px solid #1d1d1f;
	color: white;
    border-radius: 7px;
}
.box-gap {
	padding:14px;
}
.box-tight-top .box-gap {
	padding-top:0 !important;
	padding-bottom:0 !important;
}

.box th, .box td {
	color: white;
}
.box-dark { background-color:#6d6e7c; }

@media only screen and (max-width: 500px) {
	body { 	font-size:15px; }
	.banner { 	padding-top:30px; }
	.banner_subtitle { 	padding-bottom:10px; }
	.panel { margin:7px; }
	.panel-gap { padding:7px }
	.box { margin-bottom:7px; }
	.box-gap { padding:7px; }
	.generate.amount { font-size:4em !important}
	.cashout.amount { font-size:4em !important}
}

@media only screen and (max-height: 750px) {

	.generate.paymentCode { font-size: 4em !important; }
}

@media (orientation: landscape) {
	.banner { background-size: 22%; }
}

@media only screen and (max-height: 667px) {
	.wallet.bank.dropdown { height: calc((105vh - 245px) *.8) !important;}
	.bookings.transaction.dropdown { height: calc((115vh - 222px) *.8) !important; }
	.cashout.transaction.dropdown { height: calc((101vh - 261px) *.8) !important; }
	.generate.keyboard button { margin: 0px 0px 15px 0px !important; }
	.generate.middle { margin: 0px 10px 15px 10px !important; }
	.generate.title { margin: 40px 0px 40px 0px !important; }
	.generate.amount { font-size:3em !important; }
	.generate.paymentCode { font-size: 3em !important; }
	.generate.qrCode { width: 65% !important; }
}

.error {
	border: 3px solid red;
	border-radius: 5px;
	padding: 10px 5px;
	font-weight: bold;
}

.ico {
	display: block;
	width: 24px;
	height: 24px;
	background-size: contain;
	background-position: top center;
	background-repeat: no-repeat;
}
.ico-date	{ background-image:url("/theme/1/images/location_icon.png"); }
.ico-firm	{ background-image:url("/theme/1/images/booking_id_icon.png"); }
.ico-status	{ background-image:url("/theme/1/images/booking_stage_icon.png"); }

.bank .pay-total h2 {	color:white; margin-bottom:0.2em;	}
.bank .pay-total h3 {	color:#757575; margin-bottom:0; font-size:24px; font-weight:normal;	}
.bank h4 {	margin-bottom:0.2em;	}
.bank select { 
	width:100%; 
	font-size:20px; 
	padding:0.3em 0.3em; 
	border:1px solid #707070;
	border-radius:5px;
    box-shadow: rgba(80,80,80,0.80) 0px 2px 10px;
 }

.bank input {
	width: 52%;
    font-size: 34px;
    padding: 0.3em 0.3em;
    border: 1px solid #707070;
    border-radius: 5px;
    box-shadow: rgb(80 80 80 / 80%) 0px 2px 10px;
    text-align: center;
    margin-top: 0.5em;
 }

.bank .pay-result h2 {	color:#2196f5; margin-bottom:0.2em;	}
.bank .pay-result h3 {	margin-bottom:0;	}

.generate { text-align: center; }
.generate.amount { font-size:5em; color: #2196f5; }
.generate.title { margin: 45px 0px 45px 0px; }
.generate.keyboard button { margin: 0px 0px 20px 0px; font-size: calc((25vh - 110px) *.7); background-color:#2B2E35; color:#2196f5; }
.generate.middle { margin: 0px 10px 20px 10px !important; }
.generate.qr { font-size: 3.5em !important }
.generate.qrCodeContainer { margin: 2em 0 0 0; display:none }
.generate.qrCode { width:80%; }
.generate.paymentCode { font-size: 6em; margin-top: 0.5em }
.generate.serviceChargeContainer { margin-top: -2em; margin-bottom: 1em; display:none }
.generate.paymentStage { display:none; margin-bottom: -2em; margin-top: 1em; }

.driverpayments { text-align: center; }
.driverpayments.background { background-color: #2b2e35; }
.driverpayments.cashoutamount { font-size:4em; }
.driverpayments.payinamount { font-size:4em; color:red; }
.driverpayments.payinamount.grace { color:#ff9000; }
.driverpayments.nothingtodo { font-size:3em; }
.driverpayments.title { font-size:1.5em; padding-top:1em; }
.driverpayments.cashoutpopup { margin-top: 1em; text-align: center; font-size:1.5em; color:#2196f5; }
.driverpayments.cashoutpopup span { color:white }
.driverpayments.cashoutpopup.amountinput { width: 5em; font-size: 1em; text-align: start; margin-top: -0.2em; color:white; outline: 0; border-width: 0 0 2px; border-color: black; background-color: transparent; }
.driverpayments.cashoutpopup.amountinput:focus { border-color: #2196f5; }
.driverpayments.cashoutpopup.bankselector { color:#2196f5; outline: 0; border-width: 0 0 2px; border-color: black; background-color: transparent; font-size:1em; }
.driverpayments.cashoutpopup.bankselector:focus { border-color: #2196f5; }
.driverpayments.payinmessage { color:white; font-weight:bold }
.driverpayments.breakdownpopup { margin-top: 1em; text-align: center; font-size:1.5em; color:#2196f5; }
.driverpayments.breakdownpopup span { color:white }
.driverpayments.breakdownpopup.amountinput { width: 5em; font-size: 1em; text-align: start; margin-top: -0.2em; color:white; outline: 0; border-width: 0 0 2px; border-color: black; background-color: transparent; }
.driverpayments.breakdownpopup.amountinput:focus { border-color: #2196f5; }

.cashout { text-align: center; }
.cashout.amount { font-size:5em; color: #2196f5; }
.cashout.title { margin: 50px 0px 0px 0px; }
.cashout.transaction { margin-bottom: 20px; padding: 10px 10px 0 10px }
.cashout.transaction.background { background-color: #2b2e35; }
.cashout.transaction.date { color: #2196f5; margin:0; text-align: start; }
.cashout.transaction.ref { margin:0; text-align: start; padding-bottom: 15px; }
.cashout.transaction.amount { margin-top: -71px; text-align: end; font-size: 1em !important; }
.cashout.transaction.dropdown { height: calc((101vh - 220px) *.8); overflow-y:scroll; padding: 10px 5px 0 5px; }
.cashout.transaction.destination { margin-top: -20px; text-align: end; font-size: 1em !important;  padding-bottom: 15px; }


.bookings { text-align: center; }
.bookings.title { margin: 50px 0px 0px 0px; }
.bookings.transaction { margin-bottom: 20px; padding: 10px 10px 0 10px }
.bookings.transaction.background { background-color: #2b2e35; }
.bookings.transaction.date { color: #2196f5; margin:0; text-align: start; }
.bookings.transaction.ref { margin: 10px 0 0 0; text-align: start; }
.bookings.transaction.amount { margin-top: -65px; text-align: end; font-size: 1em !important; padding-bottom: 54px; color: #2196f5; }
.bookings.transaction.stage { margin-top: -60px; text-align: end; font-size: 0.8em !important; padding-bottom: 9px; float:right; border-radius: 15px; background-color: red; }
.bookings.transaction.stage.COMPLETED { background-color: green !important; }
.bookings.transaction.dropdown { height: calc((115vh - 215px) *.8); overflow-y:scroll; padding: 10px 5px 0 5px; }

.wallet { text-align: center; }
.wallet.bank { margin-bottom: 20px; padding: 10px 10px 0 10px }
.wallet.bank.background { background-color: #2b2e35; }
.wallet.bank.dropdown { height: calc((105vh - 215px) *.8); overflow-y:scroll; padding: 10px 5px 0 5px; }
.wallet.bank.account { background-color: #2196f5; padding:1em; width:60%; border-radius: 10px; }
.wallet.background { background-color: #2b2e35; }
.wallet.addbankpopup { margin-top: 1em; text-align: center; font-size:1.5em; color:#2196f5; }
.wallet.addbankpopup.field { font-size: 1em; text-align: start; margin-top: -0.2em; outline: 0; border-width: 0 0 2px; border-color: black; background-color: transparent; }
.wallet.addbankpopup.field:focus { border-color: #2196f5; }
.wallet.fieldset { border-style: none; margin-left:-3em; color:white }
.wallet.edit { float: right; margin-top: -4.5em; }
.wallet.edit button { background-color: #848484; padding: 1.2em; border-style: none; color: white; border-radius: 10px; }
.wallet.editbankpopup { margin-top: 1em; text-align: center; font-size:1.5em; color:#2196f5; }
.wallet.editbankpopup.field { font-size: 1em; text-align: start; margin-top: -0.2em; outline: 0; border-width: 0 0 2px; border-color: black; background-color: transparent; }
.wallet.editbankpopup.field:focus { border-color: #2196f5; }

::placeholder {
	color:white;
}

.paymentActionPopup { text-align: center; }
.paymentActionPopup.content { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin:0; background-color: #2b2e35; border-radius: 20px; padding:2em }
.paymentActionPopup.text { font-size: 2em; color:white }
.areYouSurePopup { text-align: center; }
.areYouSurePopup.content { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin:0; background-color: #2b2e35; border-radius: 20px; padding:2em }
.areYouSurePopup.text { font-size: 1.5em; color:white }
.areYouSurePopup.buttons { margin-top:1em }
.areYouSurePopup.buttons button { border-style: none; color: white; border-radius: 10px; background-color: #848484; font-size: 1.5em; padding: .5em; }
.areYouSurePopup.yes { float:left }
.areYouSurePopup.no { float:right }
.popup { text-align: center; }
.popup.modal { z-index:2 }
.popup.content { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin:0; background-color: #2b2e35; border-radius: 20px; padding:2em }
.popup.text { font-size: 1em; color:white }

#sideMenuAppBody { background-color: #2b2e35; height: 100%; overflow: hidden; }

.delivery_option {
	background-color:#2196f5; color:#ffffff;margin: 1em 0 1em 0;font-size: 2.5em;
}

.hidden {
	display:none;
}

.center_image {
	display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    width: 50%;
}
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
  background-color: #2B2E35;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* Style the links inside the navigation bar */
.navbar a {
  float: left;
  display: block;
  text-align: center;
  padding: 9px 0px;
  text-decoration: none;
  width:25%;
  filter: grayscale(1);
}

.navbar img {
	width:40%;
}

/* Change the color of links on hover */
.navbar a:hover {
  filter: none
}

/* Add a color to the active/current link */
.navbar a.active {
  filter: none
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #6d6e7c;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 0px 20px 20px 20px;
  border: 1px solid #252527;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.confirm-buttons-bank {
	margin-top:1em;
}

.float-left {
	float:left;
}

.float-right {
	float:right;
}

.email-container, .tel-container {
	margin-top: 1em;
	text-align: center;
}

.email-label, .tel-label {
	font-size:1.5em
}

#email_address, #telephone_number {
	width: 85%;
	text-align: center;
	font-size: 1.5em;
	margin-top: 1em;
}

.booking-confirm-p {
	font-size: 1.2em;
}

.booking-confirm-p.white {
	color: white;
}

.big-header {
	font-size: 3em;
}

.span-red {
	color: red;
}

.span-orange {
	color: #ff9000
}

.span-white {
	color: white;
}

.consent-to-transaction-p {
	padding-top: 10px;
}

#error-message {
	margin-top:2em;
	margin-bottom:1em;
	color:#ffbb33;
}

.sub-heading {
	padding-top:10px;
}