* {
          margin:0;
          padding:0;
        }
        body {
          font-size:62.5%;
          background:#FFFFFF;
          color:#000000;
          font-family: EONBrixSans, Arial, Geneva, Helvetica, sans-serif;
          margin:0;
        }
        .content {
          max-width: 960px;
          margin:0 auto;
          font-size:2.5em;
        }
/*ADDED */
/* Style for the popup overlay */
    .popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black background */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999; /* ensure the overlay is on top of other elements */
      opacity: 0;
      pointer-events: none; /* prevent clicking on elements below the overlay */
      transition: opacity 0.5s ease-in-out; /* add smooth transition effect */
      border-radius: 15px;
    }

    /* Style for the popup content */
    .popup-content {
      background-color: rgba(255, 255, 255, 1);
      padding: 20px;
      max-width: 500px;
      text-align: center;
      border-radius: 15px;
      transition: opacity 0.5s ease-in-out; /* add smooth transition effect */
    }

    /* Style for the close button */
    .popup-close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }
    
    .imgbtn{
    justify-content: center;
    align-items: center;
    }

	.imgbtn{
	    transition: transform .3s;
	    height:95px;
	    margin:0 auto;
	    border-radius: 10px;    
	    }
	
	.imgbtn:hover{
	    transform:scale(1.25);
	    }


        h1 {
          color:#f60;
          text-align: center;
          margin: 0.25em auto;
          font-size:2em;
        }

        h2 {
          color: rgb(90,90,90);
          text-align: center;
          margin-bottom: 1em;
          font-size:1em;
          font-family: EONBrixSans, Arial, Geneva, Helvetica, sans-serif;
          font-weight: 100;
        }
        .white-txt {color:#FFFFFF;}


        h3 {
          color: rgb(234, 27, 10);
          text-align: center;
          margin-bottom: 1em;
          font-size:1em;
          font-family: EONBrixSans, Arial, Geneva, Helvetica, sans-serif;
          font-weight: 900;
        }
        .white-txt {color:#FFFFFF;}

        header, nav, footer {
          background-color: #FFFFFF;
          margin: 0.5em auto;
          padding: 0.25em;
          text-align: center;
        }

        header .logo {
          float:right;
          width:100px;
          margin-right:1em;
        }
  .button-blue {
          border-radius: 15px;
          border:none;
          height: 44px;
          width: 200px;
          font-family:EONBrixSans;
          font-size:20;
          font-weight:900;
          color:#FFFFFF;
          background-color: rgb(30, 162, 177);
        }
        .button-blue:hover {
          background-color: rgb(15, 115, 138);
        }

        .button-red {
          margin: 0 auto;
          border-radius: 15px;
          border:none;
          height: 44px;
          width: 200px;
          font-family:EONBrixSans;
          font-size:20;
          font-weight:900;
          color:#FFFFFF;
          background-color: rgb(234, 27, 10);
        }
        .button-red:hover {
          background-color: rgb(176, 4, 2);
        }
        .button-consumption-1 {
          background:url('img/consumption-1.png') #FFFFFF no-repeat top center;
          border:1px solid rgb(234, 27, 10);
          padding:25px 8px 0px 8px;
          border-radius: 10px;
        }
         .button-consumption-2 {
          background:url('img/consumption-2.png') #FFFFFF no-repeat top center;
          border:1px solid rgb(234, 27, 10);
          padding:25px 8px 0px 8px;
          border-radius: 10px;
        }
        .button-consumption-3 {
          background:url('img/consumption-3.png') #FFFFFF no-repeat top center;
          border:1px solid rgb(234, 27, 10);
          padding:25px 8px 0px 8px;
          border-radius: 10px;
        }
        .button-consumption-4 {
          background:url('img/consumption-4.png') #FFFFFF no-repeat top center;
          border:1px solid rgb(234, 27, 10);
          padding:25px 8px 0px 8px;
          border-radius: 10px;
        }
        .button-consumption-5 {
          background:url('img/consumption-5.png') #FFFFFF no-repeat top center;
          border:1px solid rgb(234, 27, 10);
          padding:25px 8px 0px 8px;
          border-radius: 10px;
        }

        #content {
          margin: 0 auto;
          padding: 0;
          text-align: center;
          margin:2em 1em 0em 1em;
        }
        #principal {
          background-color: #ed4c62;
          border-radius: .5em;
          display: inline-block;
          margin: 0 auto;
          min-height: 200px;
          padding: .25em 0;
          text-align: center;
          vertical-align: top;
          width: 100%;
        }
        article {

          border: 1px solid #AAAAAA;
          padding: .25em;
          margin:0em 0em 25px 0em;
        }

        .blue-bg {
          background-color: rgb(30, 162, 177);
          border:none !important;
          padding:1em;
        }
        .white-area{

          background-color: #FFFFFF;
          border-radius: .5em;
          display: inline-block;
          margin: 0 auto;
          padding: 1em;
          text-align: center;
          vertical-align: top;
          width: 50%;
        }
        .white-area p {
          font-size:.75em;
          color:#000000;
        }
        .power {
          font-weight:900;
          color:rgb(234, 27, 10);
        }
        .eon-color-separator {
            width: 100%;
            height: 4px;
            position: relative;
            display: flex;
            margin:0 !important;
        }
        .eon-first-color {
            width: 60%;
            height: 100%;
            background-color: rgb(30, 162, 177);
        }
        .eon-second-color {
            width: 10%;
            height: 100%;
            background-color: rgb(227, 224, 0);
        }
        .eon-third-color {
            width: 30%;
            height: 100%;
            background-color: rgb(234, 27, 10);
        }

        .eon-input { 
            font-family: EONBrixSans, Arial, Geneva, Helvetica, sans-serif;
            font-weight: 400;
            position: relative;
            margin:0 auto;
            width: 80%;
            min-height: 44px;
            line-height: 22px;
            padding-top: 11px;
            padding-bottom: 11px;
            padding-left: 12px;
            font-size: 18px;
            display: block;
            border: 1px solid rgb(234, 27, 10);
            box-shadow: 0 0px 0 2px var(--borderColor);
            border-radius: 1px;
            background: #FFFFFF;
        }
        .eon-input-80w {
          width:80% !important;
          line-height: 5px !important;
          margin-bottom:10px !important;
        }
        .eon-input-50w {
          width:50% !important;
          line-height: 5px !important;
          margin-bottom:10px !important;
        }
        .eon-input-65w {
          width:65% !important;
          line-height: 5px !important;
          margin-bottom:10px !important;

        }


        fieldset {
          border:none;
          padding-top:35px;
        }

        form p {
          text-align: left;
          width: 80%;
        }

        #map {
          width:100%;
          height:400px;
          background-color:#DDDDDD;
        }
        .alert {background-color:rgb(227, 224, 0); font-size:16px; padding:15px; color:#B00402; font-weight:900}

        #pvtable {
          width:80%;
          margin:0 auto;
          text-align:center;
          margin-top:25px;
        }
        #pvtable {border:1; bordercolor:#0000FF; cellspacing:10; cellpadding:10;}
        #pvtable td, #pvtable th {padding:7px;}
        #pvtable td {color:#000000; border:1px solid #CCCCCC;}

        #pvtable th {color:white; background-color: rgb(234, 27, 10);}
        th.hidden {display:none;}
        td.hidden, td.td-total {border:none !important;}
        td.td-total {font-weight:bold; padding-top:30px !important;}

        #pvtable td.td1 {background-color: #E1EDED;}
        #pvtable td.td2 {background-color:  #B0DADE;}

        label {font-size:14px; color:#000000;}

        .apartment {margin:15px 0px;}
        .apartment p {width:50%; margin:0 auto; margin-bottom:5px; padding:5px; text-align:center; font-weight:900; color:rgb(234, 27, 10); font-size:14px; background-color:#E8E8E8;}

    .checkbox-container {
      display: flex;
      flex-direction: column;*/
      align-items: center;
      margin-bottom:15px;
    }
    .checkbox-item {
      display: flex;
      align-items: center;
      margin-left: 30px;
      margin-bottom: 10px;
    }
    
	.checkbox-item input[type=checkbox] {
	  margin-right: 10px;
	}
     
    .checkbox-item label {
      margin:0;
      margin-left: 10px;
      font-size:14px !important;
    }
    .offer {margin-top:.25em; padding: 1em; text-align:left !important;}

    a {color:rgb(234, 27, 10);}

    .saving-ammount {font-size:16px !important}

    .offer-aside {width:30%; float:left; padding:1em; background-color: #E1EDED; margin-right: 1em; font-size:14px;}

    .offer-main {padding: 1em;}

    .offer-main h3 {text-align:left !important;}
    .offer-main h3 span {color:#000000;}
    .offer-main p {font-size:14px !important;}

    .offer-info {margin-top:1em;}
    .offer-info tr td {background-color:#FFFEC6; padding: 1em; font-size:12px !important; text-align:left;}
    .offer-info tr th {background-color:#E3E000; padding: .50em; width:25%; font-size:12px !important; font-weight: 900; text-align: left;}

    .savings {margin-top: 1em;}

    .savings tr td {text-align:center; font-size:14px; padding:0px 6px 10px 6px;}

    .savings tr td.savings1 {color:#1EA2B1; background-color: #DDF1F3;}
    .savings tr td.savings1 hr {
      margin:10px 0px; 
      border: none;
      height: 1px;
      background-color: #1EA2B1;}
    .savings tr td.savings2 {color:#A5A300; background-color: #FFFFE4;}
    .savings tr td.savings2 hr {
      margin:10px 0px; 
      border: none;
      height: 1px;
      background-color: #A5A300;}
    .savings tr td.savings3 {color:#76020D; background-color: #EBD9DB;}
    .savings tr td.savings3 hr {
      margin:10px 0px; 
      border: none;
      height: 1px;
      background-color: #76020D;}

    .total-savings {background-color: rgb(234, 27, 10); padding:25px !important; color:white;}

    .clearer {clear:both;}

.apartment-buttons {
  width:400px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.average-consumption {
  list-style-type: none;
  margin: 15px 0 0 0;
  padding: 0;
}

.average-consumption li {
  float: left;
  margin: 0 5px 0 0;
  width: 75px;
  height: 60px;
  position: relative;
}
.average-consumption li p {
  font-family: EONBrixSans, Arial, Geneva, Helvetica, sans-serif;
  font-size:12px;
  width:100%;
  margin:0 auto;
  text-align:center;
}

.average-consumption label,
.average-consumption input {
  display: block;
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  bottom: 0;
}

.average-consumption input[type=radio] {
  opacity: 0.01;
  z-index: 100;

}

.average-consumption input[type=text] {
  height:40px;
  padding:10px;
  text-align:center;
  margin-top: 40px;

}

.average-consumption input[type=radio] {
  opacity: 0.01;
  z-index: 100;

}

.average-consumption input[type=text] {
  height:40px;
  padding:10px;
  text-align:center;
  margin-top: 40px;
  width:75px;

}


.average-consumption input[type=radio]:checked + label.bg1, .Checked + label.bg1 {
  background:url('img/consumption-1-hover.png') rgb(234, 27, 10) no-repeat top center;
  color:#FFFFFF;
}
.average-consumption input[type=radio]:checked + label.bg2, .Checked + label.bg2 {
  background:url('img/consumption-2-hover.png') rgb(234, 27, 10) no-repeat top center;
  color:#FFFFFF;
}
.average-consumption input[type=radio]:checked + label.bg3, .Checked + label.bg3 {
  background:url('img/consumption-3-hover.png') rgb(234, 27, 10) no-repeat top center;
  color:#FFFFFF;
}
.average-consumption input[type=radio]:checked + label.bg4, .Checked + label.bg4 {
  background:url('img/consumption-4-hover.png') rgb(234, 27, 10) no-repeat top center;
  color:#FFFFFF;
}
.average-consumption input[type=radio]:checked + label.bg5, .Checked + label.bg5 {
  background:url('img/consumption-5-hover.png') rgb(234, 27, 10) no-repeat top center;
  color:#FFFFFF;
}

.average-consumption label.bg1 {
  background:url('img/consumption-1.png') #FFFFFF no-repeat top center;
  border:1px solid rgb(234, 27, 10);
  padding:25px 8px 0px 8px;
  border-radius: 10px;
  z-index: 90;
}
.average-consumption label.bg2 {
  background:url('img/consumption-2.png') #FFFFFF no-repeat top center;
  border:1px solid rgb(234, 27, 10);
  padding:25px 8px 0px 8px;
  border-radius: 10px;
  z-index: 90;
}
.average-consumption label.bg3 {
  background:url('img/consumption-3.png') #FFFFFF no-repeat top center;
  border:1px solid rgb(234, 27, 10);
  padding:25px 8px 0px 8px;
  border-radius: 10px;
  z-index: 90;
}
.average-consumption label.bg4 {
  background:url('img/consumption-4.png') #FFFFFF no-repeat top center;
  border:1px solid rgb(234, 27, 10);
  padding:25px 8px 0px 8px;
  border-radius: 10px;
  z-index: 90;
}
.average-consumption label.bg5 {
  background:url('img/consumption-5.png') #FFFFFF no-repeat top center;
  border:1px solid rgb(234, 27, 10);
  padding:25px 8px 0px 8px;
  border-radius: 10px;
  z-index: 90;
}
.average-consumption label.bg5 {
  background:url('img/consumption-5.png') #FFFFFF no-repeat top center;
  border:1px solid rgb(234, 27, 10);
  padding:25px 8px 0px 8px;
  border-radius: 10px;
  z-index: 90;
}
.buttondelete {
  background:url('img/del.png');
  height:20px;
  width:20px;
}

        /* MEDIA QUERY */
        @media screen and (min-width: 44em) {
          h1 {
            font-size:2em;
          }
          #principal {
            width: 100%;
          }
        }

        /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
        @media only screen and (max-width: 580px) {

          table tr td, table tr th {font-size:12px;}
          .checkbox-item label {margin-left:15px; font-size:14px !important;}
          .offer-aside {width:100%; float:none; margin-right: none;}

        }