:root {
    --block-height: 160px;
    --input-width: 310px;
    --input-height: 50px;
    --radio-input-size: 16px;
}

.address-data-container {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-extra-large);
}

.address-data {
    display: flex;
    flex-direction: column;
}

.address-data~.address-data {
    margin-left: calc(2 * var(--spacing-large));
}

.address-data__value {
    font-size: var(--text-large-size);
}

select {
    height: var(--input-height);
    padding: var(--spacing-small);
    min-width: var(--input-width);
}

.help-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.form-section, .announcement {
    box-sizing: border-box;
    padding: var(--spacing-extra-large);
}

.form-section {
    min-height: var(--block-height);
    background-color: #FAF8F2;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.form-section--radio {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.form-control-group {
    display: flex;
    flex-direction: column;
    width: var(--input-width);
}

.form-control-group--row {
    flex-direction: row;
    align-items: center;
    width: auto;
    margin: var(--spacing-large) 0;
}

.form-control-container {
    display: flex;
    flex-direction: column;
}

.radio-control-group {
    display: flex;
    flex-direction: column;
}

.question-help-btn {
    text-align: left;
    margin-left: var(--spacing-large);
}

.announcement {
    min-height: var(--block-height);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    background-color: #FAF8F2;
}

.announcement--primary {
    background-color: var(--primary-color);
}

#announcement-strengthened {
    flex-direction: column;
    align-items: flex-start;
}

label {
    margin-bottom: 5px;
}

#announcement-sufficiently-insulated {
    background-color: var(--light-green);
    color: var(--green);
}

#announcement-tenant {
    background-color: #DFEFFF;
    color: #0380F9;
}

#situation-select-section {
    display: none;
}

#strengthened-radio-section {
    display: none;
}

#account-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px;
    border: 1px solid var(--secondary-color);
}

.account-section-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-large);
}

.account-section-header__text {
    display: flex;
    flex-direction: column;
}

#account-section .form-control-group--column~.form-control-group--column {
    margin: 0 var(--spacing-default);
}

#account-section .input__text {
    padding: var(--spacing-default);
    box-sizing: border-box;
    width: var(--input-width);
    height: var(--input-height);
    &:focus {
        outline: none;
    }
}

#account-section .input__checkbox {
    box-sizing: border-box;
    width: 21px;
    height: 21px;
    margin-right: var(--spacing-default);
    flex-shrink: 0;
}

#registration-email:invalid {
    border: 1px solid red;
}

.account-section__btn {
    width: 200px;
    margin-top: var(--spacing-large);
}

.question-img {
    width: 60px;
    margin-right: var(--spacing-extra-large);
}

.form-control-container--radio {
    flex-direction: row;
    align-items: center;
}

.radio-control-container {
    position: relative;
}

.radio-control-container~.radio-control-container {
    margin-left: 15px;
}


.radio-control-container__label {
    margin: 0;
}

.radio-control-container__label-text {
    margin-left: calc(var(--radio-input-size) + 5px);
}

.radio-control-container__input {
    margin: 0;
    cursor: pointer;
    position: absolute;
    opacity: 0;
}

/* Create a custom radio button */
.radio-control-container__checkmark {
  position: absolute;
  top: calc(var(--radio-input-size)/4);
  left: 0;

  box-sizing: border-box;
  width: var(--radio-input-size);
  height: var(--radio-input-size);
  border: 1px solid var(--secondary-color);
  border-radius: 50%;

  background-color: var(--shaded-background-color);
}

/* Show the indicator (dot/circle) when checked */
.radio-control-container__input:checked ~ .radio-control-container__checkmark:after {
    display: block;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-control-container__checkmark:after {
    content: "";

    position: absolute;
    top: 2px;
    left: 2px;

    display: none;

    width: 10px;
    height: 10px;
    border-radius: 50%;

    background: var(--secondary-color);
}

.input-container__checkmark--disabled:after {
    background: var(--wct-stui-radio-input-color-indicator-disabled, var(--wct-stui-radio-input-color-indicator-disabled-default));
}

.input-container__checkmark--disabled {
    border: 1px solid var(--wct-stui-radio-input-color-border-disabled, var(--wct-stui-radio-input-color-border-disabled-default));
    background-color: var(--wct-stui-radio-input-background-color-disabled, var(--wct-stui-radio-input-background-color-disabled-default));
}

.ncg-logo {
    width: 200px;
}

.expected-subsidy-container {
    display: flex;
    flex-direction: column;
}

.expected-subsidy-img {
    align-self: flex-start;
}

#income-eligible-for-subsidy-input {
    display: none;
}

#expected-subsidy--overruled {
    display: none;
}

#continue-anyway-input {
    display: none;
}

@media only screen and (max-width: 1000px) {
    .question-img {
        width: 40px;
        margin-right: var(--spacing-default);
    }
    .question-help-btn {
        text-align: left;
        margin-left: 0;
    }
}