.icon {
  background-size: contain !important;
  display: inline-block;
  height: 50px;
  width: 50px }

.icon.average-drk { background: url(/site/templates/img/solar/icon_average-drk.svg) center 6px no-repeat; }
.icon.best-drk { background: url(/site/templates/img/solar/icon_best-drk.svg) center 6px no-repeat; }
.icon.day-drk { background: url(/site/templates/img/solar/icon_day-drk.svg) center 6px no-repeat; }
.icon.driven { background: url(/site/templates/img/solar/icon_driven.svg) center 6px no-repeat; }
.icon.emissions { background: url(/site/templates/img/solar/icon_emissions.svg) center 6px no-repeat; }
.icon.energy { background: url(/site/templates/img/solar/icon_energy.svg) center 6px no-repeat; }
.icon.household { background: url(/site/templates/img/solar/icon_household.svg) center 6px no-repeat; }
.icon.month-drk { background: url(/site/templates/img/solar/icon_month-drk.svg) center 6px no-repeat; }
.icon.planted { background: url(/site/templates/img/solar/icon_planted.svg) center 6px no-repeat; }
.icon.vehicles { background: url(/site/templates/img/solar/icon_vehicles.svg) center 6px no-repeat; }

.solar {
  background-image: linear-gradient(135deg,#1a6eab,#3b8635);
  border-bottom: 5px solid #eee;
  color: #fff;
  padding: 25px 30px }

.solar article h1 {
  border-bottom-color: #145888;
  padding-top: 15px }

.solar .dashboard {
  margin: 0 auto;
  max-width: 1300px;
  padding-bottom: 15px }

.solar .dashboard h3 {
  font-size: 1.5em;
  margin: 15px auto 30px;
  max-width: 1150px }

.solar .dashboard h4 {
  font-size: 1.25em;
  margin: 15px auto;
  max-width: 1150px }

.solar .dashboard ul {
  margin-bottom: 0 }

.solar .dashboard .fr-tabs--is-ready .fr-tabs__tab {
  font-size: 1.25em;
  font-weight: bold;
  padding: .75em 2em }

.solar .dashboard .fr-tabs__panel {
  background: rgba(33,33,33,0.2);
  border-radius: 0 0 30px 30px;
  border-top: none;
  color: #fff;
  padding: 30px 30px 45px }

.solar .dashboard .fr-tabs--is-ready .fr-tabs__tab {
  background-color: rgba(33,33,33,0.4) }

.solar .dashboard .fr-tabs--is-ready .fr-tabs__tab:not([tabindex="0"]):focus,
.solar .dashboard .fr-tabs--is-ready .fr-tabs__tab:not([tabindex="0"]):hover,
.solar .dashboard .fr-tabs--is-ready .fr-tabs__tab[tabindex="0"] {
  background: rgba(33,33,33,0.2) }

.solar .dashboard .prodnotes {
  max-width: 720px; }

.solar .dashboard .prodnotes h4 {
  font-size: .9375em;
  margin-bottom: 0; }

.solar .dashboard .prodnotes p {
  font-size: .875em;
  margin: 0; }

.solar .event .button.cta {
  background: #1a6eab;
  border: 2px solid #145888;
  color: #fff;
  margin: 0 5px 5px 0 }

.solar .event .button.cta:focus, .solar .event .button.cta:hover {
  background: #3b8635;
  border-color: #2f6b2a; }

.solar .reading a {
  color: #c1d72f; }

.solar .reading a:focus, .solar .reading a:hover {
  border-bottom-color: #9aac25;
  color: #9aac25; }

.solar .sublegend {
  border-top: 2px dashed #002b54;
  display: inline-block;
  font-size: 0.875em;
  padding-top: 2px }

.solar .sublegend.light {
  border-color: #b4a7d6 }

.triad {
  max-width: 1140px }

.trio { 
  margin: 0 auto; }

.trio div:first-of-type {
  padding-right: 15px }

.trio div:last-of-type {
  padding-top: 4px }


/* Main Page
  -------- */

.trio div.overcard {
  margin: 0 auto 30px auto;
  max-width: 90%;
  padding: 0 !important;
}


/* Dark Mode
  -------- */

.dark .solar {
  border-bottom-color: #265651 }


/* SPLIDE.js Overwrites
  -------- */

.splide canvas { 
  height: auto !important;
  width: 100% !important }

.splide__pagination li {
  margin: 0 .5em }

.splide__pagination__page.is-active {
  background: #fff200;
  height: 10px;
  opacity: 1; 
  width: 10px }

.splide__track {
  margin: 0 auto;
  width: 93% }


/* Media Queries
   -------- */

@media (max-width:599px){
  .solar .dashboard ul {
    border-bottom: 4px solid rgba(0,0,0,0.4);
    padding-left: 0 }
  
  .solar .dashboard ul.splide__list, .solar {
    border: 0 }
  
  .solar .dashboard ul.splide__pagination {
    display: none }
  
  .splide__arrow--next {
    right: -1.5em }
  
  .splide__arrow--prev {
    left: -1.5em }
  
  .statistics .triad {
    padding: 0 30px }
}

@media (min-width:600px){
	.calendar {
		padding: 15px 30px 60px }
  
  .solar .dashboard .fr-tabs__panel {
    border-radius: 30px }
  
  .solar .dashboard .prodnotes {
    margin-left: 60px }
  
  .splide__arrow {
    height: 3em; 
    width: 3em; }
  
  .splide__arrow--next {
    right: -.5em }
  
  .splide__arrow--prev {
    left: -.5em }
  
  .splide__pagination {
    bottom: -1.7em;
    display: block !important;
    text-align: center }
  
  .splide__track {
    margin-bottom: 1em }
  
	.triad { 
    display: flex }
	
	.trio {
    flex-grow: 1;
		margin: 0 30px 15px 0;
    overflow-wrap: break-word;
		width: 33%; }
  
  .trio:nth-of-type(3){
    margin: 0 0 15px; }
  
  .trio div.overcard {
    margin: 0 !important;
    max-width: 100%; }
}