body
{
	font-family: 'Work Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
	background-color:#2b2b2b;
	background: none #2b2b2b;
	height:100%;
}

#vjs_container
{
	min-height:100%;
	position:relative;
}
#vjs_header
{
}
#vjs_body
{
	padding-bottom:180px;   /* Height of the footer */
}
#vjs_footer
{
	position:absolute;
	bottom:0;
	width:100%;
	height:180px;   /* Height of the footer */
}



.atDate,.created
{
	width:150px;
}

.atAmount
{
	width:70px;
}

.atBalance
{
	width: 80px;
}

.atComment
{
}

.row
{
}

.warning
{
	color: #cc0000;
}

.warning.serious
{
	font-weight: bold;
}

#accountDetails
{
	margin: 15px 0 10px 0;
	font-size: 18px;
}

.accountSummary
{
	/*color: #999;*/
}

.navbar
{
	margin-bottom:0px;
}
/* 20150127 VJS capnav is usually with <a> elements that don't have href in them so no browser link text*/
.capnav
{
	cursor: pointer;
}
.capnav:hover
{
	color:#f6658e;
}


.detailBlock
{
	background-color:white;
	color: #343434;	/*#5e87b0;*/
	font-weight:200;
	margin-bottom:30px;
}

.detailBlock .symbols
{
	color: #f6658e;
	font-size:58%;
}


.panelBlock
{
border: 1px red solid;
	height:150px;
	width:100%;
	margin:10px;
	padding:10px;
/*	background-color:#e5e5e5;*/
}
.panel
{
	background-color:transparent;
}

#s_consumption
{
	/*height: auto;*/
}

.row.panel
{
	height:225px;
}

.detailHeading
{
	margin:0px;
	width: 100%;
	height: 50px;
	background-color: #f6658e;
	display: inline-block;
	position: relative;
	line-height: 50px;
	padding-left: 20px;
	font-size: 14px;
	color: white;
}

.orange
{
	background-color: #ff880f;
}


.panelBlock.detailHeading
{
	font-size: 16px;
}

.detailText
{
	font-size: 120px;
	position: relative;
	line-height:220px;
	height:220px;
	text-align:center;	
	margin:0px;

/*	min-width:580px;*/
}

.dualDetailText
{
	height: 220px;
	text-align:center;
}
.dualDetailText:before
{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
.dualDetailText .inner
{
	display: inline-block;
	vertical-align: middle;
	padding: 0px;
	text-align:left;
}


.dualDetailText .big
{
	font-size:120px;
}

.dualDetailText .small
{
	font-size:20px;
}





.detailText .large
{
	height:109px;
	line-height:109px;
}

.detailText .small
{
	height:40px;
	line-height:20px;
	text-align:left;
}



div.detailText
{
	top:-5px;
}

.detailText .small
{
	font-size: 60px;
	position: relative;
	top:-35px;
	left:40px;
}



.detailImg 
{
}


.detailImg img
{
	width: 100%;
}


.subdetailBlock
{
	height:20px;
	font-size: 16px;
	position:relative;

	line-height:20px;
}

.subdetailBlock p
{
	display: inline-block;
	color: #666666;
	width:130px;
	text-align: right;
	margin:0;
}
.subdetailBlock  p .value
{
	display: inline-block;
	color: #00019f;	/*#5e87b0;*/
	text-align:left;
	width:auto;
}

.subdetailText
{
	display:inline-block;
	text-align:left;
	font-size: 14px;
	position: relative;
}

.detailTable
{
	height:220px;	
}
.detailTable table
{
	width:100%;
	margin:0 auto;
	height:220px;
}

.detailTable tbody
{
	width:100%;
}

.detailTable td
{
	width:50%;
}


.negative
{
	color:red;
}

.ycLabel
{
	border-right: 2px solid black;
}


.table > tbody > tr > td 
{
	color: #343434;
	font-weight:400;
	font-size:14px;
	padding-right:0px;
	padding-left:20px;
}




.ycData
{

}

.buttonBlock
{
	position:relative;
	height: 120px;
}
.paymentButton
{
	text-align: center;
	width: 150px;
	height: 30px;
	position:absolute;

	/* T R B L */
	margin: -15px 0px 0px -75px;
	left: 50%;
	top: 50%;

	color: white;/*#e5e5e5;*/
	background-color: #00019f;/*#5e87b0;*/
	padding:5px;	

	cursor: pointer;
}

.cash
{
	font-weight: bold;
}
.cash:before
{
	/*content: '£';*/
}


.negative
{
	color: #cc0000;
}


.error
{
	color: #cc0000;
	font-style: italic;
}


.comment
{
	font-style: italic;
}

#transactions td
{
	padding-right: 5px;
}

#messageTable td
{
	padding-right: 5px;
}

#messageTable .created
{
	color: #666666;
	padding-bottom:4px;
}

#messageTable .message
{
	color: #000000;
	font-weight: bold;
	vertical-align:top;
}

#messageTable
{
	line-height:14px;
}

.mSender
{
	font-size: 80%;
}
.mCreated
{
}



.box {
  clear: both;
  margin-top: 0px;
  margin-bottom: 25px;
  padding: 0px;
}
.box .box-title {
  margin-bottom: 15px;
  border-bottom: 1px solid #c4c4c4;
  min-height: 30px;
}
.box .box-title h4 {
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  margin-bottom: 7px;
  color: #555555;
}
.box .box-title h4 i {
  margin-right: 10px;
  color: #666;
}
.box .box-title .tools {
  display: inline-block;
  padding: 0;
  margin-bottom: 7px;
  float: right;
  clear: both;
  min-height: 30px;
}
.box .box-title .tools > a {
  display: inline-block;
  font-size: 14px;
  line-height: 24px;
  text-decoration: none;
  color: #c4c4c4;
  margin-right: 5px;
}
.box .box-title .tools > a :hover {
  color: #ababab;
}
.box .box-title .tools .label {
  margin-right: 5px;
}
.box .box-title .items {
  display: inline-block;
  padding: 0;
  margin-bottom: 7px;
  margin-top: 7px;
  float: right;
  width: 40%;
  clear: both;
}
.box .box-title .items .progress {
  height: 7px !important;
}
.box .toolbox {
  padding: 5px;
  background-color: #f4f4f4;
  border-bottom: 1px solid #c4c4c4;
}
.box .toolbox.bottom {
  padding: 5px;
  background-color: #f4f4f4;
  border-top: 1px solid #c4c4c4;
  border-radius: 0 0 4px 4px;
  border-bottom: none;
}
.box .box-body.bg {
  border-radius: 0 0 4px 4px;
  padding: 10px;
  background-color: #FFFFFF;
  border-left: 1px solid #c4c4c4;
  border-right: 1px solid #c4c4c4;
  border-bottom: 1px solid #c4c4c4;
  margin-top: -15px;
}
/* Sortable */
.box-placeholder {
  border: 1px dashed #c4c4c4;
  background-color: #eaeaea;
  border-radius: 4px;
}
/* Colors */
.box.border.orange {
  border: 1px solid #ff880f;
}
.box.border.orange > .box-title {
  color: #FFFFFF !important;
  background-color: #ff880f;
  border-bottom: 1px solid #ff880f;
}
.box.border.orange > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.orange > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.orange > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.orange > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.border.pink {
  border: 1px solid #d6497d;
}
.box.border.pink > .box-title {
  color: #FFFFFF !important;
  background-color: #db5e8c;
  border-bottom: 1px solid #d6497d;
}
.box.border.pink > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.pink > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.pink > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.pink > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.border.purple {
  border: 1px solid #9785c6;
}
.box.border.purple > .box-title {
  color: #FFFFFF !important;
  background-color: #a696ce;
  border-bottom: 1px solid #9785c6;
}
.box.border.purple > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.purple > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.purple > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.purple > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.border.inverse {
  border: 1px solid #484848;
}
.box.border.inverse > .box-title {
  color: #FFFFFF !important;
  background-color: #555555;
  border-bottom: 1px solid #484848;
}
.box.border.inverse > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.inverse > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.inverse > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.inverse > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.border.blue {
  border: 1px solid #5ea5bd;
}
.box.border.blue > .box-title {
  color: #FFFFFF !important;
  background-color: #70afc4;
  border-bottom: 1px solid #5ea5bd;
}
.box.border.blue > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.blue > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.blue > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.blue > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.border.red {
  border: 1px solid #d43f3a;
}
.box.border.red > .box-title {
  color: #FFFFFF !important;
  background-color: #d9534f;
  border-bottom: 1px solid #d43f3a;
}
.box.border.red > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.red > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.red > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.red > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.border.green {
  border: 1px solid #9db36a;
}
.box.border.green > .box-title {
  color: #FFFFFF !important;
  background-color: #a8bc7b;
  border-bottom: 1px solid #9db36a;
}
.box.border.green > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.green > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.green > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.green > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.border.primary {
  border: 1px solid #507aa4;
}
.box.border.primary > .box-title {
  color: #FFFFFF !important;
  background-color: #5e87b0;
  border-bottom: 1px solid #507aa4;
}
.box.border.primary > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.primary > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.primary > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.primary > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
/* Box border */
.box.border,
.box.solid {
  border: 1px solid #c4c4c4;
  border-radius: 4px;
}
.box.border > .box-title,
.box.solid > .box-title {
  padding: 8px 10px 2px;
  border-bottom: 1px solid #c4c4c4;
  min-height: 30px;
  background-color: #dbdbdb;
  /* border-radius: 4px 4px 0 0; */

  margin-bottom: 0;
}
.box.border > .box-title h4,
.box.solid > .box-title h4 {
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  margin-bottom: 7px;
}
.box.border > .box-title h4 i,
.box.solid > .box-title h4 i {
  margin-right: 10px;
  color: #666;
}
.box.border > .box-title .tools,
.box.solid > .box-title .tools {
  display: inline-block;
  padding: 0;
  margin-bottom: 7px;
  float: right;
  clear: both;
  min-height: 30px;
}
.box.border > .box-title .tools > a,
.box.solid > .box-title .tools > a {
  display: inline-block;
  font-size: 14px;
  line-height: 24px;
  text-decoration: none;
  color: #ababab;
  margin-right: 5px;
}
.box.border > .box-title .tools > a :hover,
.box.solid > .box-title .tools > a :hover {
  color: #919191;
}
.box.border .box-body,
.box.solid .box-body {
  border-radius: 0 0 4px 4px;
  padding: 10px;
  background-color: #FFFFFF;
}
.box.border .box-body.big,
.box.solid .box-body.big {
  padding: 30px;
}
.box.border .box-title.big,
.box.solid .box-title.big {
  padding: 15px 10px 7px;
}
.box.border .box-title.small,
.box.solid .box-title.small {
  padding: 5px 10px 3px;
}
.box.border .box-title.small h4,
.box.solid .box-title.small h4 {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 3px;
}
.box.border .box-title.small .tools > a,
.box.solid .box-title.small .tools > a {
  font-size: 12px;
  line-height: 12px;
}
.box.border.lite .box-title {
  background-color: #f4f4f4;
}
.box.border.lite .box-title h4 {
  color: #6f6f6f;
}
.box.solid.blue {
  border: 1px solid #507aa4;
}
.box.solid.blue .box-title {
  color: #FFFFFF !important;
  background-color: #5e87b0 !important;
  border-bottom: 1px solid #507aa4;
}
.box.solid.blue .box-title h4 {
  color: #FFFFFF !important;
}
.box.solid.blue .box-title h4 i {
  color: #FFFFFF !important;
}
.box.solid.blue .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.solid.blue .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.solid.blue .box-body {
  color: #FFFFFF;
  background-color: #5e87b0 !important;
}

.box.solid.grey {
  border: 1px solid #626262;
}
.box.solid.grey .box-title {
  color: #FFFFFF !important;
  background-color: #6f6f6f !important;
  border-bottom: 1px solid #626262;
}
.box.solid.grey .box-title h4 {
  color: #FFFFFF !important;
}
.box.solid.grey .box-title h4 i {
  color: #FFFFFF !important;
}
.box.solid.grey .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.solid.grey .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.solid.grey .box-body {
  color: #FFFFFF;
  background-color: #6f6f6f !important;
}

.box:after,
.box:before {
  display: table;
  color: "";
}
/* Misc */
.list-group-header {
  background-color: #F9F9F9;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  color: #6f6f6f;
}

.gcAxis,.gcHolder
{
	text-align:center;
	width: 100%;
}

.nothingToSee
{
	background-color: silver !important;
}

.disconnected
{
	background-color: red !important;
}

.sidebar-menu
{
	padding-left: 40px;
	font-family: 'Work Sans';
	font-size: 14px;
	font-weight:200;
	line-height:29px;
	letter-spacing: 1px;

}
.sidebar-menu .active
{
	color: #ff880f;
}




.footer
{
	position:absolute;
	bottom:0px;
	background-color: rgba(255, 255, 255, 0.1);
	height:180px;
	width:100%;
}
.obppng
{
	position:absolute;
	width:540px;
	height:auto;
	bottom:0px;
	z-index:-999999;
}


.chat
{
	width: 20px;
	height: 20px;
	object-fit: contain;
	background-color: #000000;
}

.wallet
{
	width: 20px;
	height: 20px;
	margin-right:10px;
	object-fit: contain;
	background-color: inherit;
}

.wallet.pink
{
	fill: #f6658e;
	background-color:inherit;
}

.chatMessage
{
	margin-left:10px;
	font-size:20px;
	font-weight:300;
}

.footer .logostrip
{
	position:absolute;
	right:50px;
	top:Calc(50% - 40px);
}

.footer .linkStrip
{
	position:absolute;
	left:-15px;
	top:90px;
}


.footer .info
{
	font-size:12px;
	font-weight:200;
	letter-spacing: 1px;
	margin-left:30px;
}


.footer .internalLink
{
	cursor:pointer;
}

.footer .internalLink:hover
{
	color: #f6658e;
}

.footer .glowstrip
{
	position:absolute;
	left:50px;
	top:Calc(50% - 40px);
}

.footer .glowLogo
{
	position:relative;
	display:inline-block;
	height:70px;
	width:auto;
}

.footer .poweredByGlow
{
	position:relative;
	display:inline-block;
	padding-left:10px;
	height:45px;
	width:auto;
}



.footer .logos
{
	position:relative;
	display:inline-block;
	height:80px;
	width:auto;
	cursor:pointer;
}


.svg
{
	position:relative;
	padding:16px;
}


#sidebar
{
	width:200px;
}

.addressBox
{
	float:left;
	display:inline-block;
	margin:0px;
	color: #fff;
	letter-spacing: 0;
	font-weight: 200;
	width:33.333%;
}

.landlordBox
{
	float:left;
	width: 33.333%;
	text-align:center;
}

.userBox
{
	float:right;
	display:inline-block;
	margin:0px;
	color: #fff;
	letter-spacing: 0;
	font-weight: 200;
	width:33.333%
}

.addressBox .address
{
	font-size: 35px;
	line-height:30px;
}
.addressBox .account
{
	font-size: 12px;
}

.landlord
{
	display:block;
	margin:0 auto;
}

.topBar
{
	padding-left:250px;
	display:inline-block;
	margin-top:30px;
	width:100%;
	position:relative;
}

.usernamex
{
	font-family:'Work Sans';
	font-weight:200;
	letter-spacing:1px;
}

.btnHolder
{
	position:relative;
	display:inline-block;
	left:50%;
	transform: translateX(-50%);
	height:60px;
	margin: 50px 0px 40px 0px;
}

.btnRange
{
	cursor:pointer;
	width:140px;
	height:60px;
	line-height:60px;
	text-align:center;
	border-radius:30px;
	overflow:hidden;
	display:inline-block;
	background-color:#1c1c1c;
	border:0px;
}

.btnRange.active
{
	color:#ff880f;
}

.btnRange:hover
{
	color:#f6658e;
}
.btnHolder.chatBox
{
	margin-top:0px;
}
.btnRange.chatBox
{
	margin-top: none;
	width:400px;
	pointer-events:none;
}

.chatBoxFader
{
	display:none;
}

#dTopUp
{
	background-color:white;
	border: 1px solid #f6658e;
	color:#f6658e;
	font-size:20px;
	width:190px;
}
#dTopUp:hover
{
	background-color:silver;
}

.btnHolder.tariffRateBox
{
	margin-top:0px;
}
.btnRange.tariffRateBox
{
	width:600px;
	pointer-events:none;
}



.tariffDetail
{
	margin: 0px 20px;
}


.detailBlock.login
{
	width:590px;
	position:relative;



	display:inline-block;
	left:50%;
	transform: translateX(-50%);
	margin: 150px 0px 0px 0px;



}

.login input
{
	font-size:20px;
	font-weight:400;
	padding-left:10px;
	width:260px;
	height:47px;
	border: solid 1px #bababa;




}

.login input::placeholder
{
	position:relative;
	top:-10px;
	color:#f6658e;
	font-size:12px;
}




.btnRange.login
{
	background-color:#f6658e;
	color:white;
	font-size:20px;
	width:270px;
	weight:300;	
}



@media (min-width: 992px)
{
.wideHide
{
	display:none;
}
}
/* --- VJS  narrow version -------------------- */
@media (max-width: 991px)
{
	body
	{
		/*background-color: #123456;*/
	}

	.footer
	{
		clear:both;
		position:relative;
		top:0px;
		height:375px;
	}

	#vjs_body
	{
		padding-bottom:375px;
	}
	#vjs_footer
	{
		height:375px;
	}



	#sidebar	/* Hide the sidebar */
	{
		display:none;
	}
	#main-content
	{		/* And move everything left */
		margin-left:0px;
	}
	.footer .glowstrip
	{
		position:relative;
		top:45px;
		left:Calc(50% - 82px);
	}
	.footer .logostrip
	{
		display:inline-block;
		position:relative;
		width:100%;
		left:0px;
		top:75px;	
	}
	.footer .appStrip
	{
		position:relative;
		left:Calc(50% - 203px);
		display:inline-block;
		top:0px;
		margin:0px 15px;
	}


	.footer .illumiaStrip
	{
		position:relative;
		top:100px;
		left:Calc(50% - 24px);
		display:inline-block;
	}
	.footer .linkStrip
	{
		position:relative;
		top:170px;
		left:Calc(50% - 250px);
		display:inline-block;

	}
	.footer .container
	{
		width:100%;
		height:100%;
	}
	.footer .logos
	{
		margin:-12px;
	}

	.svg
	{
		padding:13px;
	}

	.narrowHide
	{
		display:none !important;
	}
}