* {
          margin:0;
          padding:0; 
        }
        body {
          font-size:62.5%;
		  background-image: url('img/fondo_1.png'); 
          /*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;
      padding: 20px;
      margin: auto;
      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 */
    }

	.popup-box {
      height: 640px;
      border-radius: 15pt;
      overflow: hidden;      
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: opacity 0.5s ease-in-out; /* add smooth transition effect */
    }

    /* 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;
      
      /*overflow-y:scroll;*/
      overflow-y:auto;
      min-height:250px;
      max-height:600px;
    }
    
    /* 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(102, 55, 102);
          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:18;
          font-weight:900;
          color:#FFFFFF;
          background-color: rgb(137, 168, 149);
        }
        .button-blue:hover {
          background-color: rgb(168, 213, 186) !important;
        }

        .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/1pi.png');
		  background-position: center top;
		  background-repeat: no-repeat;
		  background-size: auto 27px;
          background-color: rgb(137, 168, 149);	
          color:#FFFFFF;		  
		  /* #FFFFFF no-repeat top center; */
          border:1px solid rgb(102, 55, 102);
          padding:25px 8px 0px 8px;
          border-radius: 10px;
        }
		.button-consumption-1:hover {
          background-color: rgb(168, 213, 186);
        }
        .button-consumption-2 {
          background:url('img/2pi.png');
		  background-position: center top;
		  background-repeat: no-repeat;
		  background-size: auto 27px;		  
          background-color: rgb(137, 168, 149);		  
          color:#FFFFFF;		  
          border:1px solid rgb(102, 55, 102);
          padding:25px 8px 0px 8px;
          border-radius: 10px;
        }
		.button-consumption-2:hover {
          background-color: rgb(168, 213, 186);
        }
        .button-consumption-3 {
          background:url('img/3pi.png');
		  background-position: center top;
		  background-repeat: no-repeat;
		  background-size: auto 27px;		  
          background-color: rgb(137, 168, 149);		  
          color:#FFFFFF;		  
          border:1px solid rgb(102, 55, 102);
          padding:25px 8px 0px 8px;
          border-radius: 10px;
        }
		.button-consumption-3:hover {
          background-color: rgb(168, 213, 186);
        }
        .button-consumption-4 {
          background:url('img/4pi.png'); 
		  background-position: center top;
		  background-repeat: no-repeat;
		  background-size: auto 27px;		  
          background-color: rgb(137, 168, 149);		  
          color:#FFFFFF;		  
          border:1px solid rgb(102, 55, 102);
          padding:25px 8px 0px 8px;
          border-radius: 10px;
        }
		.button-consumption-4:hover {
          background-color: rgb(168, 213, 186);
        }
        .button-consumption-5 {
          background:url('img/5pi.png');
		  background-position: center top;
		  background-repeat: no-repeat;
		  background-size: auto 27px;		  
          background-color: rgb(137, 168, 149);		  
          color:#FFFFFF;		  
          border:1px solid rgb(102, 55, 102);
          padding:25px 8px 0px 8px;
          border-radius: 10px;
        }
		.button-consumption-5:hover {
          background-color: rgb(168, 213, 186);
        }

        #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;*/
		  box-shadow: 0px 0px 10px 0px rgba(83,83,83, 0.3);
		  background-color: #FFFFFF;
          border-radius: 4px;
          padding: .25em;
          margin:0em 0em 25px 0em;
        }

        .blue-bg {
          background-color: rgb(30, 162, 177);
          border:none !important;
          padding:1em;
        }
        .white-area{
          border:none !important;
          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-s { 
            font-family: EONBrixSans, Arial, Geneva, Helvetica, sans-serif;
            font-weight: 400;
            position: relative;
            margin:0 auto;
            width: 80%;
            min-height: 24px;
            line-height: 18px;
            padding-top: 3px;
            padding-bottom: 3px;
            padding-left: 6px;
            font-size: 12px;
            display: block;
            border: 1px solid rgb(102, 55, 102);
            box-shadow: 0 0px 0 2px var(--borderColor);
            border-radius: 6px;
            background: #FFFFFF;
        }

        .eon-input { 
            font-family: EONBrixSans, Arial, Geneva, Helvetica, sans-serif;
            font-weight: 400;
            position: relative;
            margin:0 auto;
            width: 80%;
            min-height: 34px;
            line-height: 22px;
            padding-top: 6px;
            padding-bottom: 6px;
            padding-left: 12px;
            font-size: 18px;
            display: block;
            border: 1px solid rgb(102, 55, 102);
            box-shadow: 0 0px 0 2px var(--borderColor);
            border-radius: 6px;
            background: #FFFFFF;
        }

        .eon-input-80w {
          width:80% !important;
          line-height: 5px !important;
          margin-bottom:10px !important;
        }
		
        .eon-input-20w {
          line-height: 5px !important;
        }
        .eon-input-30w {
          width:30% !important;
          /* line-height: 5px !important; */
		  height: 34px;
          /* margin-bottom:10px !important; */
        }
        .eon-input-40w {
          width:40% !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;
        }

.slidecontainer {
  width: 100%;
  position: relative;
}
/* The slider itself */
.slider {
  /*-webkit-appearance: none;   Override default CSS styles */
  /*appearance: none;
  width: 100%; /* Full-width */
  height: 5px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  /*outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;  Override default look */
  /*appearance: none;
  /*width: 25px;  Set a specific slider handle width */
  /*height: 25px;  Slider handle height */
  background: rgb(234, 27, 10); /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
   /*width: 25px; Set a specific slider handle width */
   /*height: 25px; Slider handle height */
  background: rgb(234, 27, 10); /* Green background */
  cursor: pointer; /* Cursor on hover */
}


        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;
      margin-bottom:15px;
    }
    .checkbox-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    .checkbox-item label {
      margin-left: 10px;
      font-size:14px !important;
    }
    .offer {margin-top:.25em; padding: 1em; text-align:left !important;}

    a {color:rgb(102, 55, 102);}

    .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/1pi.png') rgb(250, 173, 102) no-repeat top center;
  color:#FFFFFF;
}
.average-consumption input[type=radio]:checked + label.bg2, .Checked + label.bg2 {
  background:url('img/2pi.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/3pi.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/4pi.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/5pi') rgb(234, 27, 10) no-repeat top center;
  color:#FFFFFF;
}

.average-consumption label.bg1 {
  background:url('img/1pi.png') #FFFFFF no-repeat top center;
  background-color: rgb(250,173,102);
  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/2pi.png') #FFFFFF no-repeat top center;
  background-color: rgb(250,173,102);
  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/3pi.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/4pi.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/5pi.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;
}

select:required:invalid {
  color: gray;
}
option[value=][disabled] {
  display: none;
}
option {
  color: black;
}

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

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

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

input:checked + .sliderred {
  background-color: rgb(234,27,10);
}

input:focus + .sliderred {
  box-shadow: 0 0 1px rgb(234,27,10);
}

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

/* Rounded sliders */
.sliderred.round {
  border-radius: 17px;
}

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

        /* 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;}

        }