body {
    background-color:WhiteSmoke;
}

.content-container {
    font-family: Montserrat, Veranda, sans-serif;
    max-width:1100px;
    padding-top:10px;
}

.app {
    
}

.tooltip-container {
    position: relative;
    display: inline-block;
  }
  
  .tooltip-icon {
    cursor: pointer;
  }
  
  .tooltip-text {
    visibility: hidden;
    opacity: 0;
    background-color: #333;
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    position: absolute;
    top: 130%; /* Now BELOW the icon */
    left: 50%;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-size: 14px;
    z-index: 20;
    width: 300px;
    max-width: 90vw;
    text-align: left;
    line-height: 1.4;
  }
  
  .tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(8px); /* Slide downward on hover */
  }
  
  .tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%; /* Arrow now on top of the tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #333 transparent; /* Arrow points up now */
  }
  
  /* Paragraph styling for readability */
  .tooltip-text p {
    margin: 0 0 8px 0;
  }
  .tooltip-text p:last-child {
    margin-bottom: 0;
  }
  
  

a {
    text-decoration:none;
    color:#fff;
}

a:hover {
    text-decoration:none;
    color:#fff;
}

a:visited {
    text-decoration:none;
    color:#fff;
}

:root {
    --forecast-bg-color: #39aa1a; /*site colors used as variables*/
    --household-bg-color: #c20000;
    --club-bg-color: #ffb401;
    --tips-bg-color: #014656;
    --devices-bg-color: #ea510e;
}

.navigation {
    list-style-type: none;
    margin:0;
    padding:0;
    overflow: hidden;
}

.navigation li {
    display:inline-block;
    width:25%;
    color:#fff;
    float:left;
    font-weight:bold;
    cursor:pointer;
}

.navigation li[name=forecast] div { background-color: var(--forecast-bg-color); }
.navigation li[name=household] div { background-color: var(--household-bg-color); }
.navigation li[name=club] div { background-color: var(--club-bg-color); }
.navigation li[name=tips] div { background-color: var(--tips-bg-color); }
.navigation li[name=devices] div { background-color: var(--devices-bg-color); }

.navigation li > div {
    height:50px;
    padding:5px;
    margin-right:8px;
    overflow: hidden;
}
.navigation .active { padding-bottom:13px }
.navigation li:last-child div { margin-right:0px; }

.block {
    margin-bottom:8px;
    overflow:hidden;
    transition: height linear 0.2s;
    text-align:center;
}

.block-tooltip {
    margin-bottom:8px;
    overflow:visible;
    transition: height linear 0.2s;
    text-align:center;
}

.block-title {
    padding:10px;
    /*height: 20px;*/
    font-weight:bold;
    text-align:left;
    color:#fff;
  }

.hideable-block {
    cursor:pointer;
}

.block-content {
    height:100%;
    background-color:#fff;
}

.navigation li div img {
    float:left;
    height:50px;
}

.nav-text {
    padding-top:6px;
}

.footer {
    padding: 10px;
    overflow: hidden;
    color: #fff;
    background-color: #014656;
    height:60px;
}

.box2 {
    width:50%;
    float:left;
    text-align:center;
}

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

.box4 {
    width:25%;
    float:left;
    text-align:center;
}

.box5 {
    width:20%;
    float:left;
    text-align:center;
}

.legend-label {
    padding-right:10px;
}

.legend-label-box {
    width:15px; height:15px;
    border: 1px solid #aaa;
    display:inline-block;
}

/*triangular wedge>>*/

.block-spacer { /*padding above wedge*/
    background-color: var(--household-bg-color);
    height: 100px;
    width: 100%;
    border-top: 8px solid #ffffff;
}

.no-padding { /*remove padding on container by adding class*/
    padding: 0;
    background-color:#fff; /*rgba(255,255,255,0.9);*/
    color:#000;
}

.triangle-wrapper {
    margin: 0;
}

.triangle-down { /*triangle wedge*/
    margin: 0;
    box-sizing: content-box;
    width: 50%;
    height: 0;
    padding-left:50%;
    padding-top: 5%;
    overflow: hidden;
}

.triangle-down-content { /*triangle wedge*/
    width: 0;
    height: 0;
    margin-left:-1000px;
    margin-top:-100px;
    border-left: 1000px solid transparent;
    border-right: 1000px solid transparent;
}

.triangle-forecast-bg {
    border-top: 100px solid #39aa1a;
}

.triangle-forecast2-bg {
    border-top: 100px solid #088400;
}

.triangle-topup-bg {
    border-top: 100px solid #005b0b;
}

.triangle-household-bg { border-top: 100px solid  var(--household-bg-color); }
.triangle-household2-bg { border-top: 100px solid #e62f31 }
.triangle-household3-bg { border-top: 100px solid #f47677 }

.triangle-club-bg {
    border-top: 100px solid  var(--club-bg-color);
}

.triangle-club2-bg {
    border-top: 100px solid #ff7900;
}

.triangle-dropdown {
    margin-top:5px;
    float:right;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #fff;
}

.triangle-pushup {
    margin-top:5px;
    float:right;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #fff;
}



.circle {
    margin: 0 auto;
	  border-radius: 50%;
	  width: 150px;
	  height: 150px;
}

.circle-inner {
	  color:#fff;
	  padding-top: 40px;
	  font-weight:bold;
}

.circle-small {
    margin: 0 auto;
	  border-radius: 50%;
	  width: 120px;
	  height: 120px;
}

.circle-small-inner {
	  color:#fff;
	  padding-top: 30px;
	  font-weight:bold;
}

.trafficlight-body {
	  border-radius: 10px;
	  background-color: rgba(0,0,0,0.1);
	  width:250px;
	  height:70px;
	  margin: 0 auto;
}

.trafficlight {
    margin: 10px auto 10px auto;
	  width: 50px;
	  height: 50px;
}

.trafficlight-inner {
	  color:#fff;
	  font-weight:bold;
}

.tl-green-on {
  background-image: url("../images/green.png");
  background-size: 50px 50px;
}
.tl-green-off {
  background-image: url("../images/green_off.png");
  background-size: 50px 50px;
}

.tl-amber-on {
  background-image: url("../images/yellow.png");
  background-size: 50px 50px;
}
.tl-amber-off {
  background-image: url("../images/yellow_off.png");
  background-size: 50px 50px;
}

.tl-red-on {
  background-image: url("../images/red.png");
  background-size: 50px 50px;
}
.tl-red-off {
  background-image: url("../images/red_off.png");
  background-size: 50px 50px;
}

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

.bg-generation { background-color: #29aae3; color:#fff; }
.bg-morning { background-color: #ffb401; color:#fff; }
.bg-midday { background-color: #4dac34; color:#fff; }
.bg-evening { background-color: #e6602b; color:#fff; }
.bg-overnight { background-color: #014c2d; color:#fff; }

.bg-forecast { background-color: #39aa1a; color:#fff; }
.bg-topup { background-color: #005b0b; color:#fff; }
.bg-tips { background-color: #014656; color:#fff; }

.bg-household { background-color: var(--household-bg-color); color:#fff; }
.bg-household2 { background-color: #e62f31; color:#fff; }
.bg-household3 { background-color: #f47677; color:#fff; }

.bg-club { background-color: var(--club-bg-color); color:#fff; }
.bg-club2 { background-color: #ff7900; color:#fff; }

.hide {
    display:none;
}

.togglelang {
    float: right;
}

.bound {
    max-width:500px;
    margin: 0 auto;
}

.key {
    width:25px;
    height:25px;
    border: 3px solid #eee;
}

.keytable td {
    padding-bottom:10px;
    padding-right:10px;
    vertical-align:top;
    font-size:14px;
}

/* --------------------------------------------------------------- */

.tips-appliance img {
    height: 250px;
}

.tips-appliance {
    padding: 30px;
    display: none;
    margin-top: 0;
}

.tips-appliance figcaption {
    display: block;
    margin: auto;
    width: 400px;
}

.show-fig {
    display: block;
}

.tips-arrow-outer-wrapper {
    display: block;
    width: 400px;
    height: 50px;
    margin: 0 auto 10px;
}

.tips-leftarrow {
    float: left;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid #fff;
}

.tips-rightarrow {
    float: right;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #fff;
}

.tips-directions {
    display: inline-block;
    line-height: 30px;
}

.tips-arrow-inner-wrapper {
    display: inline-block;
    width: 150px;
    padding: 10px;
    background-color: #336a77;
    cursor: pointer;
}

.tips-noshow {
    display: none;
}

.logout {
    float:right;
    font-weight:normal;
}


.visnav-block {
  float:right;
  margin-top:-10px;
  margin-right:10px;
}

.visnav-club {
  display:inline-block;
  border-left: 1px solid rgba(255,255,255,0.2);
  padding:10px;
  cursor:pointer;
  font-size:14px;

}

.visnav-club:hover {
  background-color:rgba(255,255,255,0.2);
}

.visnav-household {
  display:inline-block;
  border-left: 1px solid rgba(255,255,255,0.2);
  padding:10px;
  cursor:pointer;
  font-size:14px;
}

.visnav-household:hover {
  background-color:rgba(255,255,255,0.2);
}

.period-select {
  font-size:14px; 
  width:120px; 
  margin:4px 0px 0px 0px; 
  padding: 0px 10px; 
  height:30px; 
  background-color: rgba(255,255,255,0.2);
  color:#fff;
  font-weight:bold;
}

.period-select option {
background-color: #333;
}


.hrdiv {
  background-color:#eee;
  height:1px;
  margin-top:30px;
  display:none;
}

@media (max-width: 600px) {
    .tips-appliance img {
        height: 180px;
    }
    .tips-appliance {
        padding: 30px 0 30px 0;
    }
    .tips-appliance figcaption {
        width: 265px !important;
    }
    .tips-arrow-outer-wrapper {
        width: 200px !important;
    }
    .tips-arrow-inner-wrapper {
        width: 75px !important;
    }
    .tips-directions {
        display: none !important;
    }
    .tips-rightarrow,.tips-leftarrow {
        float: none;
        margin: 0 auto;
    }
}

@media (max-width: 400px) {
    .tips-appliance figcaption {
        width: 180px !important;
    }
}

/* --------------------------------------------------------------- */

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 0;
  font-size:18px;
  
  box-shadow: none;
  box-sizing: border-box; }
  
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }

/* --------------------------------------------------------------- */

.btn {
    text-align:center;
    height: 38px;
    padding:6px 10px;
    border: 0;
    font-weight:bold;
    font-size: 18px;
}

.btn:hover {
    /* background: rgb(61,191,246); */
    cursor:pointer;
}





/* pricing table layout style tariff list */
table.tariff .bg-info {
    background: #29aae3!important;
    border-color: #29AAE3;
}
table.tariff thead th:nth-child(2) {
    background: #269dd2;
}
table.tariff thead th:nth-child(3) {
    background: #d55928;
    color: #666; 
    background: #ececec;
}
table.tariff .bg-danger {
    background: #e6602b!important;
    border-color: #dee2e6;
}
table.tariff td:nth-child(n+2) {
    border-color: rgba(255,255,255,.3);
}
table.tariff th:nth-child(n+2) {
    border-color: rgba(255,255,255,.6);
}
table.tariff th:nth-child(n+2),
table.tariff td:nth-child(n+2) {
    color: white;
}
table.tariff [scope=col] {
    width: 19vw;
}
table.tariff th:nth-child(n+2),
table.tariff td:nth-child(n+2) {
    text-align: center;
    vertical-align: middle;
}
table.tariff tbody tr:hover > td, table.tariff tbody tr:hover > th {
    background: initial;
}
table.tariff tbody tr.current {
    background-color: rgba(0,0,0,.075);
}
table.tariff tbody tr.current th:first-child span:last-child::after{
    content: " ⚡"
}
.font-weight-light {
    font-weight: 300 !important;
}
.text-smaller-sm{
    font-size: .8em;
}
table.tariff {
    font-size: 1rem;
    color: #3d7b97;
}
table.tariff .text-midday {
    color: #ffb401;
}
table.tariff .text-overnight {
    color: #014c2d;
}
table.tariff .text-evening {
    color: #e6602b;
}
table.tariff .bg-midday {
    background-color: #ffb401;
}
table.tariff .bg-overnight {
    background-color: #014c2d;
}
table.tariff .bg-evening {
    background-color: #e6602b;
}
@media screen and (min-width:450px) {
    .d-xs-block {
        display: inline;
    }
}
@media screen and (min-width:576px) {
    .d-sm-inline {
        display: inline!important;
    }
    .text-smaller-sm{
        font-size: inherit;
    }
    table.tariff {
        font-size: 2.6vw;
    }
    table.tariff [scope=col] {
        width: 23vw;
        padding: .4em 0;
    }
    table.tariff tbody tr td,
    table.tariff tbody tr th {
        padding: 1.3vw;
    }
}
@media screen and (min-width:768px) {
    .d-sm-inline {
        display: inline!important;
    }
    table.tariff {
        font-size: 1.8vw;
    }
}
@media screen and (min-width: 992px) {
    .d-lg-inline{
        display: inline!important;
    }
    .d-lg-none{
        display: none!important;
    }
}
@media screen and (min-width: 1200px) {
    table.tariff {
        font-size: 20px;
    }
    table.tariff [scope=col] {
        width: 28%;
    }
    table.tariff tbody tr td,
    table.tariff tbody tr th {
        padding: .5em;
    }
}
/* end of tariff table styles */














/* --------------------------------------------------------------- */

@media (max-width: 650px) {
  .box2, .box3, .box4, .box5 { float:none; width:100%; margin-bottom:10px; }
  
  .hrdiv {
      display:none;
  }
  
  .content-container {
      padding:8px 5px 5px 5px;
  }
}

@media (max-width: 750px) {
  .nav-text {
      display:none;
  }

  .navigation .active { padding-bottom:10px }
  
  .block {
      margin-bottom:5px;
  }
  
  .navigation li > div {
      text-align:center;
      margin-right:5px;
  }
  
  .navigation li > div > img {
      float:none;
  }
  
  .content-container {
      padding:8px 5px 5px 5px;
  }

.visnav-block {
  float:none;
  margin-top:10px;
  margin-right:0px;
  text-align:center;
}

.visnav-club {
  padding-left:5.5%;
  padding-right:5.5%;
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  margin:0px;
}
}