.question {
    margin: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);
    padding: 10px 15px 5px 15px;
}

.question label {
    font-weight: bold;
    font-size: 0.875rem;
}

.actual_value {
    color: var(--footnote-color);
    text-align: center;
    display: block;
}

h1 {
    font-size: 2rem;
    line-height: 2.2rem;
    margin: 27px;
}

p {
    font-size: 1.125rem;
    margin: 27px;
}

h2 {
    font-size: 1.23rem;
    color: var(--text-color2);
}

label {
    display: block;
    margin-bottom: 4px;
    margin-left: 4px;
}

.privacynotice {
    margin-top: 1.3rem;
}

input[type=checkbox] {
    margin-left: -3px;
}

label[for=privacy]{
    margin: 1rem 0 0.8rem 0;
}

.sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }

/* Form */

#signup {
    max-width: 100%;
    background-color: var(--background-gray);
    padding-top: 22px;
}

fieldset {
    border: none;
}

fieldset label, fieldset input {
    display: inline;
}

#signup h2 {
    margin: 3px 11px;
}

.error-message {
    color: var(--text-error);
    margin-left: 0.2rem;
}

input[type=text], input[type=email], input[type=tel] {
    border: 1px solid #495057;
    background-color: var(--background-yellow);
    padding: .5rem 1rem;
    font-family: var(--font-family);
    font-size: 1rem;
    border-radius: 5px;
}

input[type=text], input[type=email], input[type=tel] {
    box-sizing: border-box;
    width: 100%;
}  

.form-group {
    margin-bottom: 10px;
}

.privacynotice {
    font-size: 0.94rem;
}
.privacycontainer {
    margin-bottom: 1rem;
}

.colored-button {
    background-color: var(--text-color);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-color3);
    font-family: var(--font-family);
    font-size: 1.1rem;
    padding: 8px 20px 8px 20px;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    margin: 5px 3px;
}

a.colored-button {
    text-decoration: none;
}


select {
    width: 100%;
    height: 35px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(144, 144, 144, 1);
    padding: 7px;
    margin-bottom: 15px;
}

legend {
    font-weight: bold;
    font-size: 0.875rem;
}


/* INPUT RANGE */

input[type=range] {
  cursor: pointer;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 15rem;
  width: 100%;
  margin: 17px 0;
}

input[type="range"]::-webkit-slider-runnable-track {
  background-color: var(--text-color2);
  height: 13px;
  border-radius: 13px;
}

input[type="range"]::-moz-range-track {
  background-color: #2AB20B;
  height: 13px;
  border-radius: 13px;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  margin-top: -6px;
  background-color: #F2F2F2;
  border: 1px solid #8a8a8a;
  height: 25px;
  width: 25px;
  border-radius: 53px;
}

input[type="range"]::-moz-range-thumb {
  appearance: none;
  margin-top: -6px;
  background-color: #F2F2F2;
  border: 1px solid #8a8a8a;
  height: 25px;
  width: 25px;
  border-radius: 53px;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]:focus::-webkit-slider-thumb {
  border: 1px solid #053a5f;
  outline: 2px solid #053a5f;
  outline-offset: 0.125rem;
}

input[type="range"]:focus::-moz-range-thumb {
  border: 1px solid #053a5f;
  outline: 2px solid #053a5f;
  outline-offset: 0.125rem;
}
 

  .house {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas:
        'consumo_anual'
        'porcentaje_consumo'
        'provincia'
        'orientacion_tejado';
    gap: 2px;
  }

  .personal_data {
    background-color: var(--background-yellow);
    padding: 27px 27px 50px 27px;
    margin-top: 13px;
  }

  .personal_data h2 {
    color: var(--text-color);
  }

  .results {
    background-color: var(--background-gray);
    padding-top: 5px;
    padding-bottom: 20px;
  }

  .results h2 {
    font-size: 2rem;
    text-align: center;
    margin: 27px;
  }

  .results h3 {
    max-width: 325px;
    margin: auto;
    margin-top: 22px;
    margin-bottom: 22px;
    text-align: center;
    color: var(--text-color2);
    font-size: 1.13rem;
  }


.result_box_large_grid {
    display: grid;
    grid-template-columns: 1fr 40px;
    grid-template-areas: 
        'result icon-info'
        'footnote footnote'
        'moreinfo moreinfo'
    ;
}

.result_box_large {
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 30px;
    background-color: var(--background-top-menu);
    max-width: 325px;
    margin:auto;
  }

.result_box_large .strong_result {
    font-weight: bold;
    color: var(--text-color2);
    font-size: 3rem;
}

.result_box_large>* {
    text-align: center;
}

.result_box_large .footnote {
    color: var(--footnote-color);
    font-weight: bold;
    font-size: 0.875rem;
}

.result_box_large .ahorro_anual_esperado p {
    text-align: left;
    margin: 1rem;
}

.results4 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    max-width: 340px;
    margin:auto;
  } 

.result_box_small {
    background-color: var(--background-yellow);
    border-radius: 30px;
    padding: 27px;
    width: 100px;
    font-size: 0.75rem;
  }

.result_box_small>* {
    text-align: center;
}

.results p {
    max-width: 510px;
    margin: auto;
    text-align: center;
    padding-left: 9px;
    padding-right: 9px;
}

.result_box_small .strong_result {
    font-weight: bold;
    font-size: 2.25rem;
  }

.questiongrid {
    display: grid;
    grid-template-columns: 1fr 20px;
    grid-template-areas:
    'questiongrid_label questiongrid_icon'
    'questiongrid_input questiongrid_input'
    'questiongrid_output questiongrid_output'
    'questiongrid_explaination questiongrid_explaination'
    ;
    column-gap: 5px;
    align-content: baseline;
}

.infobox p {
    font-size: 1rem;
    margin: 16px 0;
}


/* RADIO BUTTONS */

input[type="radio"] {
    height: 1rem;
    width: 1rem;
    vertical-align: middle;
}
     
.custom-radio {
    appearance: none;
    -webkit-appearance: none;
    border: 0.2rem solid #fff;
    background-color: var(--bg-color);
    border-radius: 50%;
}

.custom-radio:focus-visible {
    outline-offset: 0;
}

.custom-radio {
    outline: 1px solid var(--color);
}

.custom-radio:hover {
    outline-color: var(--checked-color);
}

.custom-radio:checked {
    outline-color: var(--checked-color);
    background-color: var(--checked-color);
    animation: outline-checked;
    animation-duration: 0.1s;
    animation-iteration-count: 4;
    animation-direction: alternate;
    animation-timing-function: linear;
}

@keyframes outline-checked {
    0% {
        outline-offset: 0;
    }

    100% {
        outline-offset: -0.2rem;
    }
}

.pointing {
    color: var(--checked-color)
}

/* CARDINAL */

#top_tejado {
    display: grid;
    grid-template-columns: 1fr 20px;
    grid-template-areas:
        'tejado_legend tejado_infoicon'
        ;
}

#botom_tejado {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: 
    'cardinal-container'
    'north-alert'
    'cardinal-image'
    ;
    justify-content: center;
}

#img-orientacion-tejado {
    width: 100%;
    height: auto;
}

@media screen and (min-width: 480px) {
    #botom_tejado {
        grid-template-columns: 5fr 5fr;
        grid-template-areas: 
        'cardinal-image cardinal-container'
        'north-alert north-alert'
        ;
        justify-content:space-evenly;
        align-items: center;
    }
}

@media screen and (min-width: 620px) {
    #botom_tejado {
        justify-content: center;
    }

    #img-orientacion-tejado {
        width: 80%;
    }

}

@media screen and (min-width: 813px) {
    #botom_tejado {
        grid-template-columns: auto;
        grid-template-areas: 
        'cardinal-container'
        'north-alert'
        'cardinal-image'
        ;
        justify-content: center;
    }
}

#botom_tejado > img {
    margin: auto;
}

#botom_tejado .error p {
    font-size: 0.8rem;
}

#cardinal-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: auto;
}

.cardinal {
    position: absolute;
    height: 80px;
    justify-content: center;
    display: flex;
    align-items: center;
    margin-top: 1rem;
}

.cardinal label {
    font-weight: bold;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}

.norte {
    top: 0;
    left: calc(50% - 11px);
    flex-direction: column-reverse;
    width: 22px; 
    height: 63px;
    gap: 2px
}
.sur {
    bottom: 0;
    left: calc(50% - 11px);
    flex-direction: column;
    width: 22px;
    height: 63px;
    gap: 2px;
}

.este {
    right: 0;
    top: calc(50% - 29px);
    flex-direction: row;
    width: 72px;
    height: 35px;
    gap: 2px;
}

.oeste {
    left: 0;
    top: calc(50% - 29px);
    flex-direction: row-reverse;
    width: 72px;
    height: 35px;
    gap: 2px;
}

.plano {
    top: calc(50% - 24px);
    left: calc( 50% - 27px);
    flex-direction: column;
    width: 55px;
    height: 45px;
    gap: 2px;
}

.results-notes {
    width: 325px;
    margin: auto;
    margin-top: 1.8rem;
    margin-bottom: 2.5rem;
}

.results-notes p, .results-notes h3 {
    text-align: left;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.results-notes h3 {
    padding-left: 8px;
}


/* THANK YOU */

.thankyoubuttons a {
    text-decoration: none;
    color:var(--text-color2);
}

.thank-you-grid, .share-grid, .support-grid {
    display: none;
}

.thank-you-grid {
    display: grid;
    height: calc(100vh - 83px);
    align-items: center;
    justify-content: center;
}

.thank-you-grid>div {
    width: 320px;
    text-align: center;
}

.share-grid {
    display: grid;
    height: calc(100vh - 83px);
    align-items: center;
    justify-content: center;
}

.share-grid>div {
    width: 320px;
    text-align: center;
}

.support-grid{
    display: grid;
    height: calc(100vh - 83px);
    align-items: center;
    justify-content: center;
}

.support-grid>div {
    width: 320px;
    text-align: center;
}

.support-grid p {
    margin: 20px 0 30px 0;
}


/* MEDIA QUERIES */

  @media screen and (min-width: 813px) {

    body {
      background-color: var(--background-gray);
    }

    .house {
        grid-template-columns: 50% 50%;
        grid-template-areas:
            'consumo_anual orientacion_tejado'
            'porcentaje_consumo orientacion_tejado'
            'provincia orientacion_tejado';
        gap: 2px;
        margin: auto;
        max-width: 91vw;
        margin-bottom: 4vw;
    }

    #signup h2 {
      margin: 5px 5vw;
    }

    #signup .personal_data h2 {
        margin: 14px 0vw;
    }

    h1 {
        margin: 40px 5vw 5px 5vw;
    }

    p {
        margin: 27px 5vw;
    }

    .thank-you-grid p, .share-grid p {
        margin: 27px 0;
    }

    .personal_data {
        background-color: var(--background-top-menu);
        padding-left: 20vw;
        padding-right: 20vw;
    }

    input[type=text], input[type=email], input[type=tel] {
        background-color: var(--background-top-menu);
    }

  }

  @media screen and (min-width: 1024px) {

    h1 {
        max-width: 935px;
        margin: auto;
        margin-top: 45px;
        font-size: 2.25rem;
    }

    body {
        padding-bottom: 30px;
    }

    .lead {
        width: 935px;
        margin: auto;
        font-size: 1.5rem;
        margin-top: 27px;
    }

    #signup {
        max-width: 960px;
        margin: auto;
    }

    #signup h2 {
        margin: 16px;
    }

    .personal_data {
        padding-left: 0;
        padding-right: 0;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-areas: 
            'form_h2 form_h2'
            'form_first_name form_privacy_notice'
            'form_last_name form_privacy_notice'
            'form_email form_privacy'
            'form_phone form_button'

        ;
        column-gap: 8px;
        border-radius: 10px;
        margin: 8px;
    }

    .form-group {
        padding-left: 20px;
        padding-right: 20px;
    }

    .privacynotice {
        padding-right: 39px;
    }

    label[for=phone_number] {
        margin-top: 10px;
    }

    #signup .personal_data h2 {
        margin: 15px 24px;
    }

    .house {
        margin-bottom: 40px;
        column-gap: 30px;
        width: 960px;
    }

    .tejadoquestion {
        width: 404px;
    }

  }