/************************************************************************/
/* BRAND COLOURS - True Power */
/************************************************************************/
/* Below used for: - homepage action boxes (primary on the bottom row, secondary top left and tertiary top right) - buttons (primary, secondary and tertiary all used for various buttons) - tab-style navigation on all inner screens (primary as background) - top bar icons (primary) - chat window theme (primary) - editable input field borders, e.g. readings (secondary) */
/* Orange */
/*Green */
/* Dark Orange */
/* Dark Green */
/* Darkest Green */
/* Light Green */
/* Blue */
/* Below used for: - notification badges - current page nav highlight - animated line on homepage action boxes - some links e.g. moving premises? - exclusive deals banner on Bolt-ons home action box - Pay Now button! */
/* Standard links and secondary links */
/* Number colours - may not need to change these */
/* only change this if a dark site header is required, i.e. the client logo must go on a dark background */
/* default text size of 18px */
/************************************************************************/
/* BRAND CONTENT - set the company address and logos here */
/************************************************************************/
/* Header logo - should be minimum 190px wide and can be in PNG, GIF, JPG or ideally SVG format For best results, size bitmap images to be exactly 190px wide or use SVG */
 header .logo, .login .logo {
	 /*background-image: url(/img/Brand/TruePower/true-power-logo.svg);*/
}
 header .logo {
	 width: 220px !important;
	/* manual override as 190 looked too small */
}
/* Footer logo - should be minimum 160px wide and can be in PNG, GIF, JPG or ideally SVG format For best results, size bitmap images to be exactly 160px wide or use SVG */
 footer .logo {
	 /*background-image: url(/img/Brand/TruePower/true-power-logo.svg);*/
}
 .currency:before {
	 font-weight: 300;
	 content: '$';
}
 .currency-small:after {
	 content: '¢';
}
/* overrides*/
/*input[type="text"]:not(.reading), input[type="password"]:not(.reading), select {
	 padding: 13px 12px 12px 12px !important;
	 border: solid 1px #CACFD6 !important;
}
 input[type="text"]:focus:not(.reading), input[type="password"]:focus:not(.reading), select:focus:not(.reading) {
	 border-color: $brand-highlight-color !important;
}
*/
/************************************************************************/
/* UTILITY COLOURS - may not need to change these. Defaults are gas=blue and electricity=yellow */
/************************************************************************/
/* Below used for: - graph and graph legend - readings badges - icons next to utility types - submit readings buttons (respectively) */
/************************************************************************/
/* General site config variables */
/* The following style shouldn't need to be altered to brand the portal */
/************************************************************************/
/* Bootstrap grid configuration */
/* FONTS */
/* overrides */
/* Border radii */
 html, body {
	 height: 100%;
}
 .ng-scrollbar-view {
	 transform: none !important;
}
 body {
	/* standard text color - used for all clients */
	 color: #373737;
	 font-family: museo-sans, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	 background: #f8f8f8;
	 font-weight: 300;
	 font-size: 1.125rem;
}
 p {
	 margin-bottom: 1.5rem;
}
 p.large {
	 font-size: 1.375rem;
	 color: #676767;
	 margin-bottom: 2rem;
}
 a {
	 color: #ec7518;
}
 a:hover {
	 color: #f09147;
}
 a.link--alt {
	 color: #5d892b;
}
 a.link--alt:hover {
	 text-decoration: none;
	 color: #ec7518;
}
/* Headers - mobile sizes */
 h1, .h1 {
	 font-weight: 500;
	 font-size: 1.75rem;
	 font-family: museo-sans, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	 letter-spacing: -0.75px;
}
 h2, .h2 {
	 font-weight: 400;
	 font-size: 1.6rem;
	 line-height: 1.2;
	 margin-bottom: 1.5rem;
	 font-family: museo-sans, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	 letter-spacing: -0.75px;
}
 h3, .h3 {
	 font-weight: 300;
	 font-size: 1.4rem;
	 font-family: museo-sans, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	 letter-spacing: -0.5px;
}
 h4, .h4 {
	 color: #373737;
	 font-weight: 400;
	 font-size: 1.3rem;
	 font-family: museo-sans, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
 h5, .h5 {
	 color: #373737;
	 font-weight: 400;
	 font-size: 1.25rem;
	 font-family: museo-sans, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	 margin-bottom: 6px;
}
 h6, .h6 {
	 font-weight: 500;
	 font-size: 1.1rem;
	 font-family: museo-sans, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* Headers - desktop sizes */
 @media (min-width: 992px) {
	 h1, .h1 {
		 font-size: 2rem;
	}
	 h2, .h2 {
		 font-size: 1.875rem;
	}
	 h3, .h3 {
		 font-size: 1.6rem;
	}
	 h4, .h4 {
		 font-size: 1.5rem;
	}
}
 .num1 {
	 font-size: 3rem;
	 font-weight: 400;
	 margin-bottom: 0.2rem;
	 line-height: 1.2;
	 letter-spacing: -0.2rem;
	 color: #777;
}
 .num1 span {
	 font-size: 1.5rem;
	 letter-spacing: -0.05rem;
	 color: #373737;
}
 .num2 {
	 font-size: 2.5rem;
	 font-weight: 400;
	 margin-bottom: 0.2rem;
	 line-height: 1.2;
	 letter-spacing: -0.15rem;
	 color: #777;
}
 .num2 + span {
	 font-size: 1.2rem;
	 letter-spacing: -0.05rem;
	 color: #373737;
	 padding-left: 5px;
	 line-height: 1;
}
 .num3 {
	 font-weight: 600;
	 color: #777;
}
 @media (min-width: 992px) {
	 .num1 {
		 font-size: 3.9rem;
	}
	 .num2 {
		 font-size: 3.1rem;
	}
}
 h6.register {
	 text-transform: uppercase;
	 font-size: 0.9rem;
	 font-weight: 600;
}
 .text-color-number-positive {
	 color: #5d892b;
}
 .text-color-number-negative {
	 color: #ec7518;
}
 .text-color-number-neutral {
	 color: #777;
}
 .text-color-number-unset {
	 color: #373737;
}
/* Utility colours */
 .text-color-utility-elec {
	 color: #f8941f;
}
 .block-color-utility-elec {
	 background: #f8941f;
}
 .graph-color-utility-elec rect {
	 fill: #f8941f;
}
 .graph-color-utility-predicted-elec rect {
	 fill: #d8d8d8;
}
 .graph-color-utility-gas rect {
	 fill: #5d892b;
}
 .graph-color-utility-predicted-gas rect {
	 fill: #c3c3c3;
}
 .badge {
	 font-weight: 400;
	 font-size: 100%;
	 padding: 0.3em 0.45em 0.2em;
}
 .badge.badge-elec {
	 color: #fff;
	 background: #5d892b;
}
 .badge.badge-account {
	 color: #fff;
	 background: #f8941f;
}
 .badge.badge-site {
	 color: #fff;
	 background: #74a140;
}
/* Pills */
 .pill {
	 text-transform: uppercase;
	 font-size: 13px;
	 margin: 0 3px 3px 0;
	 border-radius: 10px;
	 padding: 7px 10px;
	 background-color: #f8941f;
	 color: #fff;
}
 .pill.pill-primary {
	 background-color: #f8941f;
}
 .pill.pill-secondary {
	 background-color: #74a140;
}
 .pill.pill-warning {
	 background-color: #ec7518;
	 color: #fff;
}
 .pill.pill-info {
	 background-color: #fff;
	 color: #74a140;
	 border: solid 1px #74a140;
}
 .pill.pill-light {
	 background-color: #e9ecef;
}
 .icon-subtle {
	 color: #a2a7ad;
	 font-size: 2rem;
}
 .large {
	 font-size: 1.125rem;
}
 small, .small {
	 font-size: 0.9125rem;
}
 .mb-45 {
	 margin-bottom: 2.25rem !important;
}
/* Bootstrap overrides */
 .dropdown-menu {
	 color: #373737;
	 border-color: #e7e7e7;
	 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}
 .dropdown-menu .dropdown-item {
	 color: #373737;
	 font-weight: 300;
}
 .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus {
	 color: #fff;
	 background: #74a140;
}
 .dropdown-menu .dropdown-item.dropdown-item-message {
	 font-size: 14px;
	 line-height: 1.3;
	 white-space: normal;
	 padding-top: 0.5em;
	 padding-bottom: 0.5em;
}
 .dropdown-menu .dropdown-item.message-unread {
	 font-weight: 600;
}
 @media (min-width: 992px) {
	 .dropdown-menu.dropdown-menu-messages {
		 width: 17em;
	}
	 .dropdown-menu.dropdown-menu-messages .dropdown-item.dropdown-item-message {
		 padding-top: 0.35em;
		 padding-top: 0.35em;
	}
}
/* BUTTONS */
 .btn {
	/* primary */
	 border-radius: 14px;
	 color: #fff;
	 background: #f8941f;
	 margin-bottom: 5px;
	 font-family: 'Open Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	 text-transform: uppercase;
	 letter-spacing: -0.3px;
	 font-size: 15px;
	 font-weight: 600;
	 padding: 13px 21px;
	 line-height: 1em;
	 border: solid 1px #f8941f;
}
 .btn i {
	 padding-right: 5px;
}
 .btn:hover {
	 color: #fff;
	 background: #e78007;
}
 .btn:focus {
	 border-color: #f59f09 !important;
	 outline-color: #f59f09 !important;
	 box-shadow: none !important;
	 outline-style: auto !important;
	 outline-width: 1px !important;
	 outline-offset: -2px !important;
}
 .btn.btn-secondary {
	 background: #74a140;
	 border-color: #74a140;
}
 .btn.btn-secondary:hover {
	 background: #5f8434;
}
 .btn.btn-tertiary {
	 background: #fff;
	 border-color: #87b057;
	 color: #373737;
}
 .btn.btn-tertiary:hover {
	 background: #87b057;
	 color: #fff;
}
/* TABLES */
 .table {
	 font-size: 1.125rem;
}
 .table td, .table th {
	 padding: 0.8rem 1.4rem;
}
 .table.expanded td {
	 padding: 0.95rem 1.4rem;
}
 .table thead tr {
	 color: #373737;
	 background: #f8f8f8;
	 border-radius: 12px;
}
 .table thead th {
	 border: none;
}
 .table tbody th {
	 vertical-align: middle;
	 background: #f8f8f8;
	 text-align: center;
	 padding-left: 0.2rem;
	 padding-right: 0.2rem;
}
 .table tbody th i {
	 font-size: 1.5em;
	 color: #b7b7b7;
}
 .table td {
	 border-color: #f1f1f1;
	 vertical-align: bottom;
}
 .table td .meta {
	 font-size: 0.875rem;
}
 .table tbody tr:first-child td, .table tbody tr:first-child th {
	 border-top: none;
}
 .table-hover tbody tr:hover {
	 background-color: #fcfcfc;
}
/* Bootstrap overrides - container padding on just mobile */
 @media (max-width: 576px) {
	 .container {
		 padding-left: 15px;
		 padding-right: 15px;
	}
}
/* Bootstrap overrides - wider gutter option */
 .row.wide-gutter {
	 margin-left: -18px;
	 margin-right: -18px;
}
 .row.wide-gutter > .col-lg-12, .row.wide-gutter > .col-lg-11, .row.wide-gutter > .col-lg-10, .row.wide-gutter > .col-lg-9, .row.wide-gutter > .col-lg-8, .row.wide-gutter > .col-lg-7, .row.wide-gutter > .col-lg-6, .row.wide-gutter > .col-lg-5, .row.wide-gutter > .col-lg-4, .row.wide-gutter > .col-lg-3, .row.wide-gutter > .col-lg-2, .row.wide-gutter > .col-lg-1 {
	 padding-left: 18px;
	 padding-right: 18px;
}
 .row.row-line div:first-child {
	 padding-right: 2em;
	 border-right: solid 1px #e7e7e7;
}
 .row.row-line div:last-child {
	 padding-left: 2em;
}
/* BOXES */
 .content-box {
	 border-radius: 12px;
	 background: #f8f8f8;
	 padding: 15px 20px;
	 margin-bottom: 20px;
}
 .content-box .content-box__readings {
	 display: flex;
	 flex-direction: row;
	 justify-content: space-between;
	 margin: 20px 0 50px;
	 align-items: flex-end;
}
 .content-box .content-box__readings.content-box__readings--compact {
	 margin-bottom: 30px;
}
 .content-box .content-box__readings div {
	 flex: 1 1 auto;
	 height: 100%;
	 margin: 0 5px;
}
 .content-box .content-box__readings div i {
	 font-size: 6px;
}
 .content-box.content-box__alt {
	 background: #fff;
	 border: solid 1px #f1f1f1;
	 border-bottom-width: 4px;
	 margin-bottom: 16px;
}
 .content-box.content-box__invisible {
	 background: #fff;
	 border: none;
}
 .content-box .content-box {
	/* nested boxes */
	 background: #fff;
	 margin-bottom: 14px;
	 padding: 20px;
}
 .content-box .content-box:last-child {
	 margin-bottom: 0;
}
 @media (min-width: 576px) {
	 .content-box {
		 padding: 28px 30px;
		 margin-bottom: 32px;
	}
}
 .content-box__readings div:first-child {
	 margin-left: 0;
}
 .content-box__readings div:last-child {
	 margin-right: 0;
}


/* FORM FIELDS - default */
input[type='text'], input[type='password'], input[type='email'], select, textarea {
	border-radius: 14px;
	border: solid 1px #cacfd6;
	font-size: 1.125rem;
	display: block;
	width: 100%;
	text-align: left;
	/*line-height: 1.4;*/
	color: #373737;
	/*padding: 10px;*/
	font-weight: 400;
}
	input[type='text']:hover, input[type='password']:hover, input[type='email']:hover, select:hover, textarea:hover {
		border-color: #5a7d31;
	}
		input[type='text']:focus, input[type='password']:focus, input[type='email']:focus, select:focus, button:focus, textarea:focus, .custom-file-input:focus ~ .custom-file-label {
			border-color: #f8b239;
			outline: none;
			box-shadow: 0 0 0 2px #f8b239;
		}

input[type='text']:disabled, select:disabled {
	border: solid 1px #bfbfbf;
	background: #eee;
}
 select option:disabled {
	 color: #a2a7ad;
}
 input[type='text'].inactive, select.inactive {
	 color: #aaaaa7;
}
/* FORM FIELDS - readings */
 input[type='text'].reading {
	 border-radius: 14px;
	 border: solid 1px #74a140;
	 font-size: 2.25rem;
	 display: inline-block;
	 width: 100%;
	 text-align: center;
	 line-height: 1.5;
	 color: #373737;
	 padding: 0;
}
 input[type='text'].reading:focus {
	 border-color: #f8b239;
	 outline-color: #f8b239;
}
 input[type='text'].reading:disabled {
	 border: solid 1px #bfbfbf;
	 background: #eee;
}
 input[type='text'].reading.inactive {
	 color: #aaaaa7;
}
 .help-box {
	 border-radius: 12px;
	 background: transparent;
	 text-align: center;
	 padding: 15px 25px 13px 25px;
	 overflow: hidden;
	 position: relative;
	 font-size: 1.275rem;
	 letter-spacing: -0.5px;
}
 ng-scrollbar {
	 --scrollbar-size: 4px !important;
	 --scrollbar-hover-size: 12px !important;
	 --scrollbar-thumb-color: rgba(175, 175, 175, 0.5) !important;
	 --scrollbar-thumb-hover-color: gray !important;
	 --scrollbar-border-radius: 4px !important;
}




.box-login {
	position: relative;
	background: #FFFFFF;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.15);
	overflow: hidden;
	padding: 28px 28px 24px 28px;
	box-sizing: border-box;
	margin: 6vh auto 0 auto;
	width: 100%;
}

	.box-login .email-wrapper {
		margin-bottom: 10px;
	}

.contact {
	text-align: center;
}

.copyright {
	color: #595959;
	font-size: 11px;
	margin: 0 auto;
	text-align: center;
	padding: 30px 0;
	left: 0;
	width: 100%;
}

.remember {
	color: #595959;
	display: inline-block;
	position: relative;
	top: -5px;
}

.input-icon {
	position: relative;
}

.input-icon > input {
	padding-left: 1.9rem;
}

.input-icon > [class*="fa-"] {
	bottom: 0;
	color: #909090;
	display: inline-block;
	font-size: 15px;
	font-weight: 400;
	left: 7px;
	line-height: 40px;
	padding: 0 4px;
	position: absolute;
	top: 0;
	z-index: 2;
}

.login-icon {
    display: none;
}