/* Generic across the world */
body  {
  margin: 0;
  
  --normal-blue: rgb(185, 182, 250);
  --normal-blue-pale: rgb(195, 192, 250);
  --normal-green: rgb(137, 216, 147);
  --highlight-red: rgb(255, 128, 128);
  --highlight-red-pale: rgb(245, 192, 192);
  --grey:  rgb(200, 200, 200);
  --table-border: 0.5rem;
  
  --primary-pale: #dbe5fd;
  --secondary-pale: #e9eaed;
  --success-pale: #a5ecc4;
  --warning-pale: #fef7e6;
  --dark-pale: #7e7e7e;
  --danger-pale: #ffe4e6;
  --info-pale: #9cd4dd;
  
  --primary-vpale: #e7efff;
  --secondary-vpale: #ededed;
  --success-vpale: #baecd0;
  --warning-vpale: #fefaf0;
  --dark-vpale: #9a9a9a;
  --danger-vpale: #ffeeef;
  
  --electricity: #ffbb42;
  --water: #3147d5;
  --gas: #30abe3;
  --ac-hours: #fcda39; 
  --diesel: #fc9634; 
  --lpg:  #9e7fe9;
  
  --pharos-blue: #1d2451;
}
.bg-electricity {
	background-color: var(--electricity) !important;
}
.border-electricity {
	border: 1px solid var(--electricity) !important;
}
.bg-water {
	background-color: var(--water) !important;
}
.border-water {
	border: 1px solid var(--water) !important;
}
.bg-gas {
	background-color: var(--gas) !important;
}
.border-gas {
	border: 1px solid var(--gas) !important;
}
.bg-ac-hours {
	background-color: var(--ac-hours) !important;
}
.border-ac-hours {
	border: 1px solid var(--ac-hours) !important;
}
.bg-diesel {
	background-color: var(--diesel) !important;
}
.border-diesel {
	border: 1px solid var(--diesel) !important;
}
.bg-lpg {
	background-color: var(--lpg) !important;
}
.border-lpg {
	border: 1px solid var(--lpg) !important;
}

.bg-primary-pale {
	background-color: var(--primary-pale) !important;
}
.border-primary-pale {
	border: 1px solid var(--primary-pale);
}
.bg-primary-vpale {
	background-color: var(--primary-vpale) !important;
}
.bg-secondary-pale {
	background-color: var(--secondary-pale) !important;
}
.bg-success-pale {
	background-color: var(--success-pale) !important;
}
.bg-warning-pale {
	background-color: var(--warning-pale) !important;
}
.bg-dark-pale {
	background-color: var(--dark-pale) !important;
}
.bg-danger-pale {
	background-color: var(--danger-pale) !important;
}
.bg-info-pale {
	background-color: var(--info-pale) !important;
}

div.container {
	padding: 1rem;
}

.etable {
	border-collapse: collapse;
	background-color: var(--normal-blue);
	border-radius: var(--table-border);
}
.etable td:first-child,
.etable th:first-child {
	padding-left: var(--table-border);
}
.etable td:last-child,
.etable th:last-child {
	padding-right: var(--table-border);
}
.etable thead th {
	padding-top: var(--table-border);
}
.etable tfoot tr {
	background-color: var(--normal-green);
}
.etable tfoot td {
	padding-bottom: var(--table-border);
}
.etable thead th a {
	font-size: 0.8rem;
	text-decoration: none; 
	color: #000;
}

.etable.egrid th {
	font-size: 0.8rem;
}

.etable tbody tr:nth-child(odd) td {
	background: var(--normal-blue-pale);
}

.etable input[name$=sbmdirtych] {
	display: none;
}
.etable tr:has(input[name$=sbmdirtych]:checked) {
	background-color: var(--highlight-red);
}
.etable tr:has(input[name$=sbmdirtych]:checked) td input[type=text],
.etable tr:has(input[name$=sbmdirtych]:checked) td select {
	background-color: var(--highlight-red-pale);
}
.etable td:has(> input[type=checkbox]) {
	text-align: center;
}

.etable td > div.rotext {
	font-family: Arial;
	font-size: 0.8rem;
	box-sizing: border-box;
	padding-block: 1px;
	padding-inline: 2px;
	border-width: 2px;
	border-style: inset;
	background: #eeeeee;
	margin: 1px;
}


.table_select button {
	padding: 0.5rem;
	margin-right: 1rem;
}
.table_select button a {
	text-decoration: none;
}
textarea {
	font-family: inherit;
	width: 20rem;
	height: 3rem;
}

.sbmobject {
	display: inline-block;
}

.sbmobject > div {
	text-align: center;
    background: var(--normal-blue);
    padding: 1.2em;
	border-radius: 1rem;
}
.sbmobject > div:nth-child(2) {
	display: grid;
    grid-template-columns: [labels] auto [controls] 1fr;
    grid-auto-flow: row;
    grid-gap: .8em;
    background: var(--normal-green);
    padding: 1.2em;
	border-radius: 1rem;
	text-align: left;
}
.sbmobject > div > label  {
    grid-column: labels;
    grid-row: auto;
}
.sbmobject > div > input,
.sbmobject > div > textarea,
.sbmobject > div > select,
.sbmobject > div > div.editfield {
    grid-column: controls;
    grid-row: auto;
    border: none;
    padding: 0.5rem;
}
.sbmobject > div > div.editfield {
	background-color: #ddd;
}
.sbmobject > div:nth-child(1) > input[type=submit] {
    width: auto;
	border-radius: 1rem;
	border: 1px solid #fff;
}
.sbmobject > div:nth-child(1) > input[type=submit]:hover {
	background-color: var(--highlight-red-pale);
	border: 1px solid #999;
}

/* Datatables editor simple form styling */
dd.phcheckbox {
	visibility: hidden;
}
dd.phcheckbox[data-editor-value="1"]:after {
	content: 'Yes'; 
	visibility: visible;
	display: inline;
	position: absolute;
}
dd.phcheckbox[data-editor-value="0"]:after {
	content: 'No'; 
	visibility: visible;
	display: inline;
	position: absolute;
}

/* Meter tree styling */
span.meterName {
	box-sizing: border-box;
	display: inline-block;
	width: 300px;
}
span.advance {
	opacity: 0.8;
	box-sizing: border-box;
	display: inline-block;
	width: 100px;
	text-align: center;
	padding: 0px;
	font-size: 0.8em;
	margin: 0px 5px;
	color: #666666;
	background-image: linear-gradient(58deg, #ccffcc 0, #ddffdd 100%);
    border-radius: 3px;
}
span.advance.sum {
	background-image: linear-gradient(58deg, #ccccff 0, #ddddff 100%);
}
span.advance.diff {
	background-image: linear-gradient(58deg, #ffcccc 0, #ffdddd 100%);
}
span.advance.nodiff {
	background-color: #ffffff;
}
span.advance.key {
	line-height: 24px; 
}

/* Extra ul options for css3 */
ul.two-column {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;	
}
.xp-chart-label li {
	margin: 0 15px;
	text-align: left;
}

/* Make tooltips able to be a bit wider */
.tooltip-inner {
	max-width: 320px;
}

/* Fudge to do the double pie */
.pie_case {
	position: relative;
	height: 320px;
	width: 320px;
	display: inline-block;
}
.pie_case > div.ct-chart {
	top: 0;
	left: 0;
	position: absolute;
	width: 320px;
	height: 100%;
}
.pie_case > div.ct-chart.innerpie {
	position: absolute;
	left: 32px;
	top: 32px;
	width: 256px;
	height: 256px;
}

/* Colour sequence for charts */
body {
	--color1: #20c997;
	--color2: #6610f2;
	--color3: #fd7e14;
	--color4: #d63384;
	--color5: #ffc107;
	--color6: #0dcaf0;
	--color7: #198754;
	--color8: #0d6efd;
	--color9: #ffcccc;
	--color10: #ff4444;
}
/* Colour sequence for pie charts */
.stroke-color1,
.ct-series.stroke-color1 .ct-slice-donut  {
	stroke: var(--color1);
	color: var(--color1);
}
.stroke-color2,
.ct-series.stroke-color2 .ct-slice-donut  {
	stroke: var(--color2);
	color: var(--color2);
}
.stroke-color3,
.ct-series.stroke-color3 .ct-slice-donut  {
	stroke: var(--color3);
	color: var(--color3);
}
.stroke-color4,
.ct-series.stroke-color4 .ct-slice-donut  {
	stroke: var(--color4);
	color: var(--color4);
}
.stroke-color5,
.ct-series.stroke-color5 .ct-slice-donut  {
	stroke: var(--color5);
	color: var(--color5);
}
.stroke-color6,
.ct-series.stroke-color6 .ct-slice-donut  {
	stroke: var(--color6);
	color: var(--color6);
}
.stroke-color7
.ct-series.stroke-color7 .ct-slice-donut  {
	stroke: var(--color7);
	color: var(--color7);
}
.stroke-color8,
.ct-series.stroke-color8 .ct-slice-donut  {
	stroke: var(--color8);
	color: var(--color8);
}
.stroke-color9,
.ct-series.stroke-color9 .ct-slice-donut  {
	stroke: var(--color9);
	color: var(--color9);
}
.stroke-color10,
.ct-series.stroke-color10 .ct-slice-donut  {
	stroke: var(--color10);
	color: var(--color10);
}
.badge-pill.stroke-color1 {
	background-color: var(--color1);
	color: #ffffff;
}
.badge-pill.stroke-color2 {
	background-color: var(--color2);
	color: #ffffff;
}
.badge-pill.stroke-color3 {
	background-color: var(--color3);
	color: #ffffff;
}
.badge-pill.stroke-color4 {
	background-color: var(--color4);
	color: #ffffff;
}
.badge-pill.stroke-color5 {
	background-color: var(--color5);
	color: #ffffff;
}
.badge-pill.stroke-color6 {
	background-color: var(--color6);
	color: #ffffff;
}
.badge-pill.stroke-color7 {
	background-color: var(--color7);
	color: #ffffff;
}
.badge-pill.stroke-color8 {
	background-color: var(--color8);
	color: #ffffff;
}
.badge-pill.stroke-color9 {
	background-color: var(--color9);
	color: #ffffff;
}
.badge-pill.stroke-color10 {
	background-color: var(--color10);
	color: #ffffff;
}



/* Extra bootstrap stuff for chartist */
.stroke-primary,
.ct-series.stroke-primary .ct-slice-donut  {
	stroke: var(--primary);
	color: var(--primary);
}
.stroke_secondary,
.ct-series.stroke-secondary .ct-slice-donut  {
	stroke: var(--secondary);
	color: var(--secondary);
}
.stroke-info,
.ct-series.stroke-info .ct-slice-donut  {
	stroke: var(--info);
	color: var(--info);
}
.stroke-warning,
.ct-series.stroke-warning .ct-slice-donut  {
	stroke: var(--warning);
	color: var(--warning);
}
.stroke-danger,
.ct-series.stroke-danger .ct-slice-donut  {
	stroke: var(--danger);
	color: var(--danger);
}
.stroke-success,
.ct-series.stroke-success .ct-slice-donut  {
	stroke: var(--success);
	color: var(--success);
}

/* 12 Month Rolling report graph colouring */
#rolling_total_usage .ct-series-a .ct-line,
#rolling_total_usage .ct-series-a .ct-point {
	stroke: var(--secondary);
}
#rolling_total_usage .ct-series-b .ct-line,
#rolling_total_usage .ct-series-b .ct-point {
	stroke: var(--primary);
}
#rolling_total_usage .ct-series-c .ct-line,
#rolling_total_usage .ct-series-c .ct-point {
	stroke: #2bcd72;
}

#rolling_cumulative_residual_difference .ct-series-a .ct-line,
#rolling_cumulative_residual_difference .ct-series-a .ct-point {
	stroke: var(--info);
}
#rolling_cumulative_residual_difference .ct-series-b .ct-line,
#rolling_cumulative_residual_difference .ct-series-b .ct-point {
	stroke: var(--primary);
}

.data-table {
	font-size: 0.5em;
}
.data-table-med {
	font-size: 0.75em;
}

.font-shrink {
	font-size: 0.8em;
}



/* Solar report colouring */
#rolling_total_generated .ct-series-a .ct-line,
#rolling_total_generated .ct-series-a .ct-point {
	stroke: var(--info);
}
#rolling_total_generated .ct-series-b .ct-line,
#rolling_total_generated .ct-series-b .ct-point {
	stroke: var(--success);
}
#rolling_cumulative_read_difference .ct-series-a .ct-line,
#rolling_cumulative_read_difference .ct-series-a .ct-point {
	stroke: var(--info);
}
#rolling_solar_profit .ct-series-a .ct-bar,
#rolling_solar_profit .ct-series-a .ct-point {
	stroke: var(--info);
}
#rolling_solar_profit .ct-series-b .ct-bar,
#rolling_solar_profit .ct-series-b .ct-point {
	stroke: var(--warning);
}
#rolling_solar_profit .ct-series-c .ct-bar,
#rolling_solar_profit .ct-series-c .ct-point {
	stroke: var(--success);
}
#rolling_solar_actual_vs_predicted .ct-series-a .ct-line,
#rolling_solar_actual_vs_predicted .ct-series-a .ct-point {
	stroke: var(--success);
}
#rolling_solar_actual_vs_predicted .ct-series-b .ct-line,
#rolling_solar_actual_vs_predicted .ct-series-b .ct-point {
	stroke: var(--warning);
}
#rolling_solar_generated_vs_exported .ct-series-a .ct-bar,
#rolling_solar_generated_vs_exported .ct-series-a .ct-point {
	stroke: var(--success);
}
#rolling_solar_generated_vs_exported .ct-series-b .ct-bar,
#rolling_solar_generated_vs_exported .ct-series-b .ct-point {
	stroke: var(--warning);
}

#rolling_solar_cumulative_export .ct-series-a .ct-line,
#rolling_solar_cumulative_export .ct-series-a .ct-point {
	stroke: var(--warning);
}
#rolling_solar_cumulative_export .ct-series-b .ct-line,
#rolling_solar_cumulative_export .ct-series-b .ct-point {
	stroke: var(--danger);
}

#rolling_net_energy_co2 .ct-series-a .ct-line,
#rolling_net_energy_co2 .ct-series-a .ct-point {
	stroke: var(--success);
}

div[id^=utility_statement_cost_graph] .ct-series-a .ct-bar,
div[id^=utility_statement_cost_graph] .ct-series-a .ct-point {
	stroke: var(--success);
}
div[id^=utility_statement_co2_graph] .ct-series-a .ct-bar,
div[id^=utility_statement_co2_graph] .ct-series-a .ct-point {
	stroke: var(--success);
}

#rolling_net_energy_tenants_common_mj .ct-series-a .ct-bar,
#rolling_net_energy_tenants_common_mj .ct-series-a .ct-point,
#rolling_net_energy_tenants_common_co2 .ct-series-a .ct-bar,
#rolling_net_energy_tenants_common_co2 .ct-series-a .ct-point {
	stroke: var(--info);
}
#rolling_net_energy_tenants_common_mj .ct-series-b .ct-bar,
#rolling_net_energy_tenants_common_mj .ct-series-b .ct-point,
#rolling_net_energy_tenants_common_co2 .ct-series-b .ct-bar,
#rolling_net_energy_tenants_common_co2 .ct-series-b .ct-point {
	stroke: var(--primary);
}

#rolling_solar_profit .ct-bar,
#rolling_profit_vs_cost .ct-bar,
#rolling_net_energy_mj .ct-bar,
#rolling_net_energy_tenants_common_mj .ct-bar,
#rolling_net_energy_tenants_common_co2 .ct-bar,
#rolling_solar_generated_vs_exported .ct-bar,
div[id^=utility_statement_usage_graph] .ct-bar,
div[id^=utility_statement_cost_graph] .ct-bar,
div[id^=utility_statement_co2_graph] .ct-bar {
	stroke-width: 4%;
}

/* Service level highlighting */
.service_highlight_premium,
.service_highlight_enterprise,
.service_highlight_advantage {
	color: var(--dark);
	background-color: var(--success-pale);
}
.service_highlight_essentials {
	color: var(--primary);
	background-color: var(--primary-pale);
}
.service_highlight_select {
	color: var(--warning);
	background-color: var(--warning-pale);
}
.service_highlight_none {
	color: var(--dark);
	background-color: var(--dark-pale);
}

/* Projection report styles */
table.dataTable tbody tr.scenario_tariff_edited {
	background-color: var(--warning-pale);
}
table.dataTable tbody tr.scenario_tariff_custom {
	background-color: var(--primary-pale);
}

/* Email preview */
#email_preview iframe {
	width: 100%;
	height: 600px;
}

/* Login errors */
p.login_errors {
	color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 1rem;
    border-radius: 4px;
}
p.login_errors:empty {
	display: none;
}

.hide_empty:empty,
.hide-empty:empty {
	display: none;
}

/* Allow less tall rows for some tables */
table.table.narrow-rows td,
table.table.narrow-rows th {
	padding-top: .5rem;
	padding-bottom: .5rem;
}


div.diagonal-label svg.ct-chart-bar, svg.ct-chart-line{
    overflow: visible;
}
div.diagonal-label .ct-label.ct-label.ct-horizontal.ct-end {
  position: relative;
  justify-content: flex-start;
  text-align: left;
  transform-origin: 0 0;
  transform: translate(0%) rotate(45deg);
  white-space:nowrap;
}
div.diagonal-label-bar .ct-label.ct-label.ct-horizontal.ct-end {
  position: relative;
  justify-content: flex-start;
  text-align: left;
  transform-origin: 0 0;
  transform: translate(50%) rotate(45deg);
  white-space:nowrap;
}

#xp-chartist-wem-gathered {
	height: 1000px;
}

img.force-square {
	object-fit: cover;
	aspect-ratio: 1;
}

/* Opening of sub categories */
input[type=checkbox].opensub {
	display: none;
}

/* Tweaks for specific edit fields */
#DTE_Field_content_html {
	height: 250px;
}
div.DTED_Lightbox_Background {
	z-index: 2061;
}
div.DTED_Lightbox_Wrapper {
	z-index: 2062;
}


/* Kludgy hacks */
#sof td:nth-child(4) input {
	width: 40rem;
}

/* Readonly checkbox is readonly */
input[type="checkbox"].readonly {
    pointer-events: none;
}

/* Display processing widgets when the parent div is processing */
div.processing_message {
	display: none;
}
div.processing div.processing_message {
	display: inline-block;
}

/* Bootstrap fixes */
.modal-header .close {
	margin: -1rem 0rem -1rem auto;
	z-index: 1000;
}

/* Print tweaking */
table.table td.colour-hack,
table.table th.colour-hack {
	padding: 0px;
	height: 1px;
}
table.table td > div.colour-hack,
table.table th > div.colour-hack {
	padding: 0.75rem 0.75rem;
	height: 100%;
}

table.table.narrow-rows td > div.colour-hack,
table.table.narrow-rows th > div.colour-hack {
	padding: 0.5rem 0.75rem;
	height: 100%;
}

.table-striped tbody tr:nth-of-type(odd) td > div.colour-hack,
.table-striped tbody tr:nth-of-type(odd) th > div.colour-hack {
	background-color: #f0f1f4;
}

/* Customer roles table specifics */
table.user_roles_table {
	border-collapse: separate;
	border-spacing: 1;
}

table.user_roles_table th {
	background-color: var(--info);
	color: white;
	padding: 1rem 0.2rem 1rem 0.2rem;
	text-align: center;
}

table.user_roles_table tbody td:nth-child(1) {
	background-color: var(--pharos-blue);
	color: white;
	padding: 1rem 0.5rem 1rem 0.5rem;
}
table.user_roles_table tbody td {
	color: var(--dark);
	border-bottom: 1px solid #333333;
}
table.user_roles_table tbody td.group_name:nth-child(1) {
	border-top: 1px solid white;
	border-bottom: none;
}
table.user_roles_table tbody td.section_name:nth-child(1) {
	color: var(--dark);
	background-color: transparent;
}
table.user_roles_table tbody td.et-logo {
	background-image: url(/images/ettick.png);
	background-size: auto 1.8rem;
	background-position: center;
	background-repeat: no-repeat;
}

.pharos-graph,
.avoid-page-break {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}
.page-break-after {
	
	page-break-after: always;
	break-after: always;
}
.pdf-page-break {
	page-break-before: always;
	break-before: always;
}
@media print {
	.noprint {
		display: none;
	}
	body {
		background-color: #ffffff;
	}
	div.card {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}
	a:not(.btn) {
		text-decoration: none;
	}
}