/*===== FORM =====*/
/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");
/*===== VARIABLES CSS =====*/
:root {
  /*===== Colores =====*/
  --first-color: #1A73E8;
  --input-color: #80868B;
  --border-color: #DADCE0;
  /*===== Fuente y tipografia =====*/
  --body-font: "Roboto", sans-serif;
  --normal-font-size: 1rem;
  --small-font-size: .75rem;
}

/*===== BASE =====*/
*, ::before, ::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
    background-color: #f5f5f5;
}  
      
header {
    padding: 20px;
    background-color: #0160b0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
} 
      
      
 .logo img {
    height: 75px;
} 
 
      
.secure {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-radius: 5px;
    background-color: #ffffff;
    border: 1px solid #00800038;
}      
      
.secure img {
    height: 25px;
  	margin-left: 7px;
} 
      
.secure p {
    margin-right: 7px;
    font-weight: 500;
    padding: 0;
    margin: 0;
  	color: #000;
  font-size: 15px;
}     
      
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 700px;
    margin: 0 auto;
}      
      
      
      
        /* Basic styling for the form steps */
        .step {
            display: none;
        }
        .step.active {
            display: block;
        }

        #error-message {
color: #ff0000;
    display: none;
    top: -20px;
    position: relative;
    font-size: 15px;
        }
      

.form-heading h1 {
  text-align: center;
    margin-top: 60px;
    font-size: 50px;
  	margin-bottom: 0;
}
      
.form-heading h2 {
    text-align: center;
    font-size: 24px;
    font-weight: 300;
    margin: 0px auto;
    margin-top: 5px;
}     
      

 form {
width: 600px;
    max-width: 600px;
    margin: 0 auto;
    padding: 25px;
    border: 1px solid #ccc;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
    background-color: #fff;
}     
      
/*===== FORM =====*/
.l-form {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 45px;
}

.form {
  width: 860px;
  padding: 3rem 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(92, 99, 105, 0.2);
}
.form__title {
  font-weight: 500;
  margin-bottom: 2.5rem;
}
.form__div {
  position: relative;
  height: 70px;
  margin-bottom: 1.5rem;
}
.form__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: var(--normal-font-size);
  border: 2px solid var(--border-color);
  border-radius: 0.5rem;
  outline: none;
  padding: 1rem;
  background: none;
  z-index: 1;
}
.form__label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: 0 0.25rem;
  background-color: #fff;
  color: var(--input-color);
  font-size: 29px;
  transition: 0.3s;
}
.form__button {
  display: block;
  margin-left: auto;
  padding: 0.75rem 2rem;
  outline: none;
  border: none;
  background-color: var(--first-color);
  color: #fff;
  font-size: var(--normal-font-size);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: 0.3s;
}
.form__button:hover {
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.15);
}

/*Input focus move up label*/
.form__input:focus + .form__label {
  top: -0.5rem;
  left: 0.8rem;
  color: var(--first-color);
  font-size: var(--small-font-size);
  font-weight: 500;
  z-index: 10;
}

/*Input focus sticky top label*/
.form__input:not(:placeholder-shown).form__input:not(:focus) + .form__label {
  top: -0.5rem;
  left: 0.8rem;
  z-index: 10;
  font-size: var(--small-font-size);
  font-weight: 500;
}

/*Input focus*/
.form__input:focus {
  border: 2px solid var(--first-color);
}
      
.next-btn {
    padding: 20px;
    font-size: 25px;
    width: 100%;
    border: 0;
    background-color: #0160B0;
    color: #fff;
    border-radius: 0.4rem;
} 
      
.next-btn:hover {
    padding: 20px;
    font-size: 25px;
    width: 100%;
    border: 0;
    background-color: #034781;
    color: #fff;
    border-radius: 0.4rem;
} 
      
      
div#slider-output {
    letter-spacing: 3px;
    font-size: 32px;
    text-align: center;
    color: #0160b0;
    font-weight: 500;
}
      
      
div#step-2 h2 {
    text-align: center;
}
      
      
input#power-bill {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
} 
      
      
   
        #homeowner-error {
            color: red;
            display: none;
          	margin-top: 10px;
        }
      
        #slider-output {
            margin: 10px 0;
            font-weight: bold;
        }
        .homeowner-btn {
            width: 100px;
            cursor: pointer;
          	display: flex;
            flex-direction: column;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            align-items: center;
            padding: 0px;
            width: 100%;
            height: 190px;
            background-color: unset;
            border: 1px solid #cecece;
            border-radius: 5px;
          	font-size: 20px;
            text-transform: uppercase;
            font-weight: 500;
        }
      	.homeowner-btn:hover {
          	border: 2px solid #034781;
		}
      
        .homeowner-btn.selected {
              background-color: #0347811a;
              color: #000000;
              border: 2px solid #034781;
        }      
      
.box-homeowner {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  	margin-bottom: 15px;
} 
      
.homeowner-btn img {
    height: 34px;
    margin-bottom: 20px;
}      
      
      
div#step-3 h2 {
    text-align: center;
    margin-top: 5px;
} 
    
      
div#step-4 h2 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
}      
      
      
select#provider {
    width: 100%;
    height: 100%;
    font-size: 1.3rem;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    outline: none;
    padding: 1rem;
    margin-bottom: 25px;
}      
      
.box-shade {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  	margin-bottom: 15px;
}   
      
.shade-btn {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    padding: 0px;
    width: 100%;
    height: 190px;
    background-color: unset;
    border: 1px solid #cecece;
    border-radius: 5px;
    font-size: 20px;
    font-weight: 500;
}  
      
.shade-btn img {
    height: 50px;
    margin-bottom: 15px;
}      

      
  .shade-btn:hover {
  border: 2px solid #034781;
}
   
div#step-5 h2 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
}      
      
    
      
div#step-6 h2 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
} 
      
div#step-6 p {
    color: #2196F3;
    font-style: italic;
}      
      
      
.form2__div {
  position: relative;
  height: 70px;
  margin-bottom: 1.5rem;
}
.form2__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: var(--normal-font-size);
  border: 2px solid var(--border-color);
  border-radius: 0.5rem;
  outline: none;
  padding: 1rem;
  background: none;
  z-index: 1;
}
.form2__label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: 0 0.25rem;
  background-color: #fff;
  color: var(--input-color);
  font-size: 29px;
  transition: 0.3s;
}      
  
/*Input focus move up label*/
.form2__input:focus + .form2__label {
  top: -0.5rem;
  left: 0.8rem;
  color: var(--first-color);
  font-size: var(--small-font-size);
  font-weight: 500;
  z-index: 10;
}

/*Input focus sticky top label*/
.form2__input:not(:placeholder-shown).form2__input:not(:focus) + .form2__label {
  top: -0.5rem;
  left: 0.8rem;
  z-index: 10;
  font-size: var(--small-font-size);
  font-weight: 500;
}

/*Input focus*/
.form2__input:focus {
  border: 2px solid var(--first-color);
}      
      
  
      
      
.form3__div {
  position: relative;
  height: 70px;
  margin-bottom: 1.5rem;
}
.form3__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: var(--normal-font-size);
  border: 2px solid var(--border-color);
  border-radius: 0.5rem;
  outline: none;
  padding: 1rem;
  background: none;
  z-index: 1;
}
.form3__label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: 0 0.25rem;
  background-color: #fff;
  color: var(--input-color);
  font-size: 29px;
  transition: 0.3s;
}      
  
/*Input focus move up label*/
.form3__input:focus + .form3__label {
  top: -0.5rem;
  left: 0.8rem;
  color: var(--first-color);
  font-size: var(--small-font-size);
  font-weight: 500;
  z-index: 10;
}

/*Input focus sticky top label*/
.form3__input:not(:placeholder-shown).form3__input:not(:focus) + .form3__label {
  top: -0.5rem;
  left: 0.8rem;
  z-index: 10;
  font-size: var(--small-font-size);
  font-weight: 500;
}

/*Input focus*/
.form3__input:focus {
  border: 2px solid var(--first-color);
}   
      
      
      
div#step-7 h2 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
} 
      
div#step-7 p {
    color: #2196F3;
    text-align: center;
}   
      
      
div#step-8 h2 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
  	margin-bottom: 25px;
} 
      
div#step-8 p {
    color: #2196F3;
    text-align: center;
  	margin-bottom: 25px;
}       
    
      
      
div#step-9 h2 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
  	margin-bottom: 25px;
} 
      
div#step-9 p {
    color: #2196F3;
    text-align: center;
  	margin-bottom: 25px;
} 
      
      
      
div#step-10 .msg {
    margin-top: 20px;
    font-size: 13px;
    color: #b3b3b3ee;
}



.credit-options {
    display: grid;
    gap: 15px;
    margin-bottom: 40px;
    font-size: 20px;
}


.credit-options input[type="radio"] {
 	width: 20px;
    height: 20px;
    top: 3px;
    position: relative;
}

.final-message img {
height: 55px;
text-align: center;
}
      
      
footer {
    text-align: center;
    padding: 15px;
    margin-top: 30px;
font-size: 13px;
  	color: #555;	
}     
      
      
footer a {
    margin-left: 7px;
    color: #555;
    text-decoration: none;
}
      
      
      
   
     
      
          
      
      
@media (max-width: 750px) { 
  
  
  .box-shade {
    display: block;
  }
  
  .shade-btn {
    margin-bottom: 25px;
}

.form-heading h1 {
    text-align: center;
    margin-top: 30px;
    font-size: 40px;
    margin-bottom: 0;
}
 .l-form {
    padding: 15px;
   	margin-top: 25px;
} 
  
  
}