/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://powertoperuse.com/twenty-seventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-seventeen-child
*/


/* Suppress Page Titles */
#post-4 .entry-header,  /* From Front page */
#post-21 .entry-header, /* From Calculator page */
#post-8522 .entry-header, /* From TOU Calculator page */
#post-2481 .entry-header,   /* From How To Shop page */
#post-4128 .entry-header,   /* From How To Compare page */
#post-8193 .entry-header,   /* From Timing page */
#post-7462 .entry-header,   /* From Unlock page */
#post-126 .entry-header,   /* From Thank-You page */
#post-111 .entry-header,   /* From Purchase page */
#post-14587 .entry-header,   /* From Paid page */
#post-9300 .entry-header {  /* From Solar Analysis page [not really, that's 9301 */
	display: none;
}


/* Reduce white space around page titles - Not currently used
.site-content {
    padding-top: 30px;
}
.page-header {
    padding-bottom: 0;
} */

/* Nope: I can't set this or the mobile menu doesn't pull open
.site-header {
	height: 55px;  
} */



/* 240223 temp FIX for top menu disappearing in desktop view */
@media screen and (min-width: 48em) {
    .navigation-top {
        position: relative;
    }
}
    

/* Shrink top padding above Page Title for mobile/tablet */
.panel-content .wrap {	
	padding-top: 15px;
}

@media screen and (min-width: 48em) {
    .page.page-one-column .entry-header, 
    .twentyseventeen-front-page.page-one-column .entry-header, 
    .archive.page-one-column:not(.has-sidebar) .page-header {
	margin-bottom: 0;   /* Removes extra margin below Page Title on desktop sized pages */
    }
    .panel-content .wrap {
		/* padding-top: 110px;  240223 FIX removed this for making too much space */
	}
}


/* Define green action buttons */
#ct-green-button {
	background-color: #57AD57;
	color: #FFF;
	letter-spacing: 0.5px;
	font-size: 1.5em;
	padding: 0.3em 0.5em;
}

/* Define green action button to mimic Bootstrap btn-success */
.btn-bs-success {
    color: #FFF !important; /* FIX THIS */
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    background-color: #5bb75b;
    background-image: -webkit-(linear,0 0,0 100%,from(#62c462),to(#51a351));
    background-image: -webkit-linear-(top,#62c462,#51a351);
    background-image: -o-linear-(top,#62c462,#51a351);
    background-image: linear-(to bottom,#62c462,#51a351);
    background-image: -moz-linear-(top,#62c462,#51a351);
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    padding: 9px 14px;
    font-size: 1.5em;
    line-height: normal;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.btn-bs-success:hover {
    background-color: #51a351;
    text-decoration: none;
}

/* Define short buttons */
.btn-tpg-short {
    display: inline-block;
    color: #FFF !important; /* FIX THIS */
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    background-color: #5bb75b;
    background-image: -webkit-(linear,0 0,0 100%,from(#62c462),to(#51a351));
    background-image: -webkit-linear-(top,#62c462,#51a351);
    background-image: -o-linear-(top,#62c462,#51a351);
    background-image: linear-(to bottom,#62c462,#51a351);
    background-image: -moz-linear-(top,#62c462,#51a351);
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    padding: 4px 14px;
    margin: 10px 20px 5px;
/*  font-size: 1.5em; */
    line-height: normal;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

/* Narrow button margins on mobile screens */
@media screen and (max-width: 30em) {
    .btn-tpg-short {
        margin: 10px 8px 5px;
    }
}

.btn-tpg-short:hover {
    background-color: #51a351;
    text-decoration: none;
}

/* Fix thumbnail on Calculator page - Not currently used
#attachment_1005 {
 	float: right;
 	margin-left: 10px;
} */

/* Format Benchmarks table */
#benchmarks {
/*  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; */
    float: right;
    margin: 0 0 10px 15px;
    border-collapse: collapse;
    border: 2px solid #5b79d9;
    width: 30%;
}

#benchmarks tbody td, #benchmarks tbody th {
    text-align: center;
    border: 1px solid #ddd;
    padding: 0;
}

#benchmarks th {
    background-color: #5b79d9;
    color: white;
}

#benchmarks tfoot tr {
    border: none;
}
    
#benchmarks tfoot td {    
    padding-top: 0;
    padding-bottom: 1px;
    text-align: left;
    font-style: italic;
    font-size: 10px;
    padding-left: 8px;
}

/* Indent lists on main content boxes, but not in menus */
.entry-content li {
    margin-left: 1em;
}

/* Format logo to left of top menu */
.tpg-image-box {
    display: inline;
    float: left;
    width: 230px;
    height: 50px;
    margin-left: 5px;
    padding-top: 1px;
    padding-bottom: 1px;
}


/* Allow heading to flow around images */
.TPGreflow {
    clear: none;
    padding-top: 0;
}

.tpg-resp-image {
    width: 488px;
    padding-top: 10px;
    padding-bottom: 10px;
}
@media screen and (max-width: 48em) {
    .tpg-resp-image {
        width: 100%;
    }
}

.tpg-resp-image-b {
    width: 50%;
    padding-top: 10px;
    padding-bottom: 10px;
}
@media screen and (max-width: 48em) {
    .tpg-resp-image-b {
        width: 100%;
    }
}

.tpg-inset-left {
    float: left;
    padding-right: 20px;
    padding-bottom: 10px;
    font-style: italic;
    font-size: 13px;
    color: hsl( 247, 50%, 40% );
    text-align: center;
}
@media screen and (max-width: 36em) {
    .tpg-inset-left {
        width: 50%;
    }
}

.tpg-inset-right {
    float: right;
    padding-left: 20px;
    padding-bottom: 10px;
    font-style: italic;
    font-size: 13px;
    color: hsl( 247, 50%, 40% );
    text-align: center;
}
@media screen and (max-width: 36em) {
    .tpg-inset-right {
        width: 50%;
    }
}

.tpg-resp-right {
    float: right;
    max-width: 300px;
    padding-left: 20px;
    padding-bottom: 10px;
    font-style: italic;
    font-size: 13px;
    color: hsl( 247, 50%, 40% );
    text-align: center;
}
@media screen and (max-width: 36em) {
    .tpg-resp-right {
        float: none;
        max-width: 100%;
    }
}

/* Display a picture while loading the embedded Excel file (no longer used)
.holds-the-iframe {
    background: url("images/Loading_RateGrinder.png") center top no-repeat;
} */

/* Display Pluggy image behind home page content 
#post-4 .entry-content {
    background-image: url("images/Pluggy_50.png"), url("images/Peruse_your_plan.png");
    background-position: right top, right bottom;
    background-repeat: no-repeat;
    background-size: 44%, 28%;
    background-color: rgba(255,255,255,0.6);	
    background-blend-mode: lighten;
} */

/* Keep Google Chart tooltips from breaking to second line */
.google-visualization-tooltip {
  white-space: nowrap;
}

/* Horizontal toggle switch with labels */
.switch {
  position: relative;
  display: inline-block;
  width: 135px;
  height: 34px;
  margin: 0 10px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #6699ff;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #6699ff;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(101px);
  -ms-transform: translateX(101px);
  transform: translateX(101px);
}

.on
{
  display: none;
}

.on, .off
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+ .slider .on
{display: block;}

input:checked + .slider .off
{display: none;}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;}


/* Center PayPal dropdown and button */
#buy-calculator {
    text-align: center;
    margin-bottom: 20px;
}

img.about-logo {
    margin: 0;
}

/* Make body wider for RateGrinder Online page */
.page.page-one-column.page-id-21 #primary {
    max-width: 100vw;
}
@media screen and (min-width: 48em) {
    .page-id-21 .wrap {
        max-width: 1064px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Make body wider for EmbdExcelTest page */
.page.page-one-column.page-id-1238 #primary {
    max-width: 100vw;
}
@media screen and (min-width: 48em) {
    .page-id-1238 .wrap {
        max-width: 1064px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Make body wider for Home page - prior to calculator addition */
@media screen and (min-width: 30em) {
    .page-one-column .panel-content .wrap {
        max-width: 1064px;
    }
}

/* Make body wider for Home page */
.page.page-one-column.page-id-4 #primary {
    max-width: 100vw;
}
@media screen and (min-width: 48em) {
    .page-id-4 .wrap {
        max-width: 1064px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Make body wider for Test page */
.page.page-one-column.page-id-10453 #primary,  /* ...for Buyback plans page */
.page.page-one-column.page-id-407 #primary {  /* ...for Test page */
    max-width: 100vw;
}
@media screen and (min-width: 48em) {
    .page-id-10453 .wrap,
    .page-id-407 .wrap {
        max-width: 1064px;
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* Reduce whitespace below iframe */
embed,
iframe,
object {
	margin-bottom: 0;
}

/* .site-content-contain { */
/* .panel-content {  */
/* Color the background sides */
/* .panel-content {
    background: #AAAAAA;
    background: linear-(to right, #002868, #FFFFFF 10%, #FFFFFF 90%, #002868);
} */
@media screen and (min-width: 48em) {
  .site-content {
/*      background: #002868; /* For browsers that do not support gradients */
/*      background-origin: content-box;
      background-size: 50% 50%;
      background-repeat: no-repeat; */
/*      background: -webkit-linear-gradient(to right, #C0C0C0, #C0C0C0 15%, #FFFFFF 15%, #FFFFFF 85%, #C0C0C0 85%, #C0C0C0); /* Safari 5.1-6.0 */
/*      background: -o-linear-gradient(to right, #C0C0C0, #C0C0C0 15%, #FFFFFF 15%, #FFFFFF 85%, #C0C0C0 85%, #C0C0C0); /* Opera 11.1-12 */
/*      background: -moz-linear-gradient(to right, #C0C0C0, #C0C0C0 15%, #FFFFFF 15%, #FFFFFF 85%, #C0C0C0 85%, #C0C0C0); /* Firefox 3.6-15 */
/*      background: linear-gradient(to right, #C0C0C0, #C0C0C0 15%, #FFFFFF 15%, #FFFFFF 85%, #C0C0C0 85%, #C0C0C0); /* Standard syntax */
  }
}
.wrap {
    background-color: #FFFFFF;
}

/* Chalkboard */
@import url(https://fonts.googleapis.com/css?family=Walter+Turncoat);
#chalkboard {
  /* font-size: 1.3em;*/
  color: #E8E8E8;
  font-family: "Walter Turncoat", sans-serif;
  /*text-transform: uppercase;*/
  display: block;
  max-width: 550px;
  margin: 20px auto;
  background-color: #497959;
  padding: 15px 30px;
  overflow-y: auto;
  box-shadow: -1px 2px 2px 0px #555, inset 0 0 10px 0 #555;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  border: #B78240 solid 10px;
}
@media screen and (min-width: 48em) {
    #chalkboard {
        font-size: 1.3em;
    }
}

#chalkboard a {
  color: #E8E8E8;
  font-family: "Walter Turncoat", sans-serif;
  box-shadow: none;
}

/* Mimic SMS chat format */

.text-sim {
	max-width: 720px;
	margin: auto;
}

.clear {clear: both}
.from-me {
	position:relative;
	padding:10px 20px;
	color:white; 
	background:#0B93F6;
	border-radius:25px;
	text-align: right;
	float: right;
		
	&:before {
		content:"";
		position:absolute;
		z-index:-1;
		bottom:-2px;
		right:-7px;
		height:20px;
		border-right:20px solid #0B93F6;
		border-bottom-left-radius: 16px 14px;
		-webkit-transform:translate(0, -2px);
	}

	&:after {
		content:"";
		position:absolute;
		z-index:1;
		bottom:-2px;
		right:-56px;
		width:26px;
		height:20px;
		background:white;
		border-bottom-left-radius: 10px;
		-webkit-transform:translate(-30px, -2px);
	}
}
.from-them {
	position:relative;
	padding:10px 20px;
	background:#E5E5EA;
	border-radius:25px;
	color: black;
    float: left;
		
	&:before {
		content:"";
		position:absolute;
		z-index:2;
		bottom:-2px;
		left:-7px;
		height:20px;
		border-left:20px solid #E5E5EA;
		border-bottom-right-radius: 16px 14px;
		-webkit-transform:translate(0, -2px);
	}

	&:after {
		content:"";
		position:absolute;
		z-index:3;
		bottom:-2px;
		left:4px;
		width:26px;
		height:20px;
		background:white;
		border-bottom-right-radius: 10px;
		-webkit-transform:translate(-30px, -2px);
	}
}

.from-me .tooltiptext2,
.from-them .tooltiptext2,
.TPG-first .tooltiptext2 {
    visibility: hidden;
    width: 100%;
    background-color: #444;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    left: 10%;
    bottom: 90%;
    z-index: 1;
}

.from-me:hover .tooltiptext2,
.from-them:hover .tooltiptext2,
.TPG-first:hover .tooltiptext2 {
    visibility: visible;
}


/*Pop Effect*/

.popsentence {
       display: inline;
       font-weight: bold;
       font-size: 125%;
       margin-bottom: 0;
}
.popEffect{
	display: inline;
	text-indent: 4px;
}
.popEffect span{
        display: inline;
	animation: pop 15s linear infinite 0s;
	-ms-animation: pop 15s linear infinite 0s;
	-webkit-animation: pop 15s linear infinite 0s;
	color: #00abe9;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.popEffect span:nth-child(2){
	animation-delay: 3s;
	-ms-animation-delay: 3s;
	-webkit-animation-delay: 3s;
}
.popEffect span:nth-child(3){
	animation-delay: 6s;
	-ms-animation-delay: 6s;
	-webkit-animation-delay: 6s;
}
.popEffect span:nth-child(4){
	animation-delay: 9s;
	-ms-animation-delay: 9s;
	-webkit-animation-delay: 9s;
}
.popEffect span:nth-child(5){
	animation-delay: 12s;
	-ms-animation-delay: 12s;
	-webkit-animation-delay: 12s;
}

/*Pop Effect Animation*/
@keyframes pop{
	0% { opacity: 0; }
	5% { opacity: 0; transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);}
	10% { opacity: 1; max-width: 200px; transform: translateY(0px); }
	25% { opacity: 1; transform: translateY(0px); }
	30% { opacity: 0; transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0;}
}

.TPGanchor:target {padding-top: 90px;}


/* Testimonial Formatting */
.testimonial {
    display: inline-block;
    vertical-align: middle;	
    padding: 10px;
    margin-bottom: 2em;
}
@media screen and (min-width: 48em) {
    .testimonial {
        width: 32%;
    }
}

/* TDU price formatting */
.TDU-price {
    display: inline-block;
    text-align: center;
    color: #FFFFFF;
    vertical-align: middle;
    border-radius: 25px;
    background: #73AD21;
    padding: 20px; 
    padding: 10px;
    margin: 10px 20px 30px;
}
/* @media screen and (min-width: 48em) {
    .TDU-price {
        width: 40%;
    }
} */


/* Keep medium-sized images from floating left when display narrows */
img.alignright.size-medium {
    float: right;
    margin-left: 1.5em;
}

/* DEBUG: Show borders for all elements 
* { 
  border: 1px solid rgba(0, 0, 0, 0.3);
}
*/

/* Pure CSS Accordion FAQ */ - WIP

#accordion-FAQ {
  box-sizing: content-box;
}  
#accordion-FAQ h4 {
  display: block;
  cursor: pointer;
  padding-top: 0;
  margin-bottom: 4px;
}
#accordion-FAQ p {
  overflow: hidden;
  margin-bottom: 0;
}
#accordion-FAQ ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#accordion-FAQ ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 10px;
  border-top: 1px dotted #dce7eb;
}
#accordion-FAQ ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 9px;
  right: 0;
}
#accordion-FAQ ul li i:before,
#accordion-FAQ ul li i:after {
  content: "";
  position: absolute;
  background-color: #000;
  width: 3px;
  height: 16px;
}
#accordion-FAQ ul li i:before {
  transform: translate(2px, 0) rotate(45deg);
}
#accordion-FAQ ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
#accordion-FAQ ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
#accordion-FAQ ul li input[type=checkbox]:checked ~ p {
  max-height: 0;
}
#accordion-FAQ ul li input[type=checkbox]:checked ~ i:before {
  margin-top: 9px;
  height: 9px;
  transform: translate(2px, 0) rotate(45deg);
}
#accordion-FAQ ul li input[type=checkbox]:checked ~ i:after {
  margin-top: 9px;
  height: 9px;
  transform: translate(-2px, 0) rotate(-45deg);
}

/* Texas flag-colored frame */
.TPGframe {
  border: 10px solid transparent;
  border-image: linear-gradient(to bottom right, #003878 0%, #003878 65%, #bf0a30 70%, #bf0a30 100%);
  border-image-slice: 1;
  border-image-outset: 10px 20px;
  margin-bottom: 3em;
}


@media screen and (min-width: 30em) {
  .how-it-works-frame {
    background-image: url("images/TexasPowerGuide_icon-300x300.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 23%;
  }
  .text-sim {
	margin: 0 auto 0 25%;
  }
}

/* Slideshow */

* {box-sizing:border-box}


/* TPG-flex-box */
.TPG-flex-box {
    display: flex;
    flex-wrap: wrap;
}
@media screen and (max-width: 48em) {
    .TPG-flex-box {
        flex-direction: column;
    }
}

/* TPG-flex-box-2 */
.TPG-flex-box-2 {
    display: flex;
    flex-wrap: wrap;
}
@media screen and (max-width: 36em) {
    .TPG-flex-box-2 {
        flex-direction: column;
    }
}

/* Intro container */
.TPG-intro {
    flex: 50%;
    padding-right: 20px;
}
@media screen and (max-width: 48em) {
    .TPG-intro {
        padding-right: 0;
    }
}

/* TPG sidebar comment */
@media screen and (max-width: 1500px) {
    .TPG-sidebar {
        visibility: hidden;
    }
}

/* Slideshow container */
.slideshow-container {
  flex: 50%;
  max-width: 450px;
}

/* Hide Electric Plan Help sign on mobile screens */
@media screen and (max-width: 48em) {
    .slideshow-container {
        max-width: 550px;
        margin: auto;
    }
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


/* Dropdown submenu tabs */
/* Style the tab */
#tpg-submenu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

/* Style the buttons inside the tab */
#tpg-submenu button {
    flex: 1;
    color: #444;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
#tpg-submenu button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
#tpg-submenu button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* Style the close button */
.topright {
    float: right;
    cursor: pointer;
    font-size: 28px;
}

.topright:hover {color: red;}

.tpg-inset {
    float: right;
    max-width: 32%;
    margin-left: 20px;
}
/* Hide on mobile screens */
@media screen and (max-width: 30em) {
    .tpg-inset {
        display: none;
    }
}

/* Remove underlines from social sharing icons - DOESN'T WORK */
.dvk-social-sharing a {
    box-shadow: none;    
}

/* Style tooltips */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 2px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  font-weight: normal;
  font-size: 0.7em;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Tooltips with image plus text */
.itooltip {
  text-decoration:none;
  position:relative;
}
 
.itooltip span {
  display:none;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:black;
  background:white; 
}
 
.itooltip span img {
  float:left;
  height: 75px;
  padding:0px 8px 0 0;
}
 
.itooltip:hover span {
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:1000;
/*  width:auto;*/
  width:320px;
/*  min-height:128px;*/
  border:1px solid black;
  margin-top:12px;
  margin-left:32px;
  overflow:hidden;
  padding:8px;
}

/* Indent lists on TPG bullet points */
.TPG-first {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
    -webkit-column-gap: 5px; /* Chrome, Safari, Opera */
    -moz-column-gap: 5px; /* Firefox */
    column-gap: 5px;
}
@media screen and (min-width: 34em) {
    .TPG-first {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    }
}
@media screen and (min-width: 54em) {
    .TPG-first {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    }
}

/* Center image captions */
#caption-attachment-10694, /* On Gotchas post image */
#caption-attachment-10957 { /* On Solar Report example image */
    text-align: center;
}

/* Gravity Forms */
/* Hide max upload size guidance */
div.ginput_container_fileupload span.gform_fileupload_rules{
	display:none;
}

/* Make all fields consistent height */
.gfield .large {
	height: 36px;
}

/* Gray out first dropdown select choice */
.gf_placeholder, 
.gfield .large::-webkit-input-placeholder {
    color: #999;
}

/* Convert address search results to initial caps -- Superseded by database INITCAP function
#field_6_76 .ginput_container,
#input_6_76-ts-dropdown {
    text-transform: capitalize;
}
*/

/* Override extra space pushing input box to second line (GF/GP bug?) */
#input_6_76-ts-control {
    min-width: 1rem;
}

/* Display on LH side */
#field_1_10, #field_1_30, #field_1_36, #field_1_37, #field_1_48, #field_1_51,
#field_6_52 {
	grid-column: 1 / 7;
}

/* Display on RH side */
#field_1_25, #field_1_26, #field_1_27, #field_1_29 {
	grid-column: 7 / 13;
}

/* Embed Units of Measure */
#input_1_29, #input_6_73 {
  display: inline-block;
	border-style: none;
}
.gform_wrapper.gravity-theme .gf_solar_power_input .ginput_container input {
	padding-right: 40px;
	text-align: center;
}
.gform_wrapper.gravity-theme .gf_solar_power_input .ginput_container::after {
	margin-left: -40px;
	content: " kW";
}
#input_1_41, #input_6_41 {
	padding-right: 50px;
	text-align: center;
}
#field_1_41 .ginput_container::after, #field_6_41 .ginput_container::after {
	margin-left: -50px;
	content: " kWh";
}

/* Hide number field range prompts */
#gfield_instruction_1_41,
#gfield_instruction_6_41,
.gform_wrapper.gravity-theme .gf_solar_power_input .instruction {
	  display: none;
}

/* De-bold solar power input labels */
#gform_fields_6 .gf_solar_power_input .gfield_label,
#field_6_81 .gfield_label {
    font-weight: 400;    
}

/* Right-justify 'Total' text */
#field_1_48, #field_6_74 {
	display: flex;
	justify-content: right;
	align-items: center;
}

/* Error validation */
/* #gform_wrapper_1 .gform_body .gform_fields .gfield_error .ginput_container {
	border: 1px solid blue;
	background-color: #F2DEDE;	
} */

/* Add shadow on focus */
.ginput_container .large:focus {
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

/* For small screens... */
@media screen and (max-width: 641px) {
  .btn-tpg-short {
    margin: 10px 8px 5px;
	}
	/* Set to full width */
	#field_1_10, #field_1_51,
	#field_6_52 {
		grid-column: 1 / 13;
	}
  /* Shift 'Share My Data' below 'Meter #' */
	#field_1_11 {
		grid-row-start: 11;
	}
	/* Two fields per row for select fields */
	#gform_fields_6 .gf_solar_power_input, #field_6_74, #field_6_81 {
	    grid-column-end: auto;
	    grid-column-start: span 6;
	}
}
/* END of Gravity Forms */