#register-form {
    margin-top: var(--spacing-l);
}

#register-subtitle {
    display: none;
    color: var(--color-yellow);
    font-size: var(--fsize-s);
    font-weight: var(--fweight-regular);
    padding: var(--spacing-xxs) 0 var(--spacing-s);
}

#register-company {
    display: flex;
    flex-direction: column;
    margin: var(--spacing-m) 0 var(--spacing-l);
}

#register-company span {
    font-size: var(--fsize-xxs);
}

#register-company a {
    color: var(--color-red);
    text-decoration: underline;
    margin-inline: var(--spacing-m);
}

#register-type {
    display: block;
    text-align: center;
    margin-block: var(--spacing-l);
}

#register-type a {
    font-size: var(--fsize-m);
    opacity: .5;
    padding-inline: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    margin-inline: var(--spacing-xs);
}

#register-type a.active {
    opacity: 1;
    border-bottom: solid var(--color-lblue);
}

#register-form-form {
    margin-top: var(--spacing-l);
}

#register-form-user {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(10, auto);
    grid-column-gap: var(--spacing-xxl);
}


#label-fname {
    grid-area: 1 / 1 / 2 / 2;
}

#input-fname {
    grid-area: 2 / 1 / 3 / 2;
}

#label-lname {
    grid-area: 1 / 2 / 2 / 3;
}

#input-lname {
    grid-area: 2 / 2 / 3 / 3;
}

#label-mail {
    grid-area: 3 / 1 / 4 / 3;
}

#input-mail {
    grid-area: 4 / 1 / 5 / 3;
}

#label-phone {
    grid-area: 5 / 1 / 6 / 3;
}

#input-phone {
    grid-area: 6 / 1 / 7 / 3;
}

#label-password {
    grid-area: 7 / 1 / 8 / 3;
}

#input-password {
    grid-area: 8 / 1 / 9 / 3;
}

#label-cpassword {
    grid-area: 9 / 1 / 10 / 3;
}

#input-cpassword {
    grid-area: 10 / 1 / 11 / 3;
}

#register-form-address {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-column-gap: var(--spacing-xxl);
}

#register-form-address input,
#register-form-address select,
#register-form-address textarea {
    display: none;
}

#input-add-address {
    display: none;
}

#label-add-address {
    text-decoration: underline;
    cursor: pointer;
    display: block;
    margin-bottom: var(--spacing-m);
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#input-add-address:checked+#label-add-address {
    color: var(--color-red);
}

#register-form-address.open {
    display: grid;
}

#register-form-address.open input,
#register-form-address.open select,
#register-form-address.open textarea {
    display: block;
}

#label-street {
    grid-area: 1 / 1 / 2 / 3;
}

#input-street {
    grid-area: 2 / 1 / 3 / 3;
}

#label-postal-code {
    grid-area: 3 / 1 / 4 / 2;
}

#input-postal-code {
    grid-area: 4 / 1 / 5 / 2;
}

#label-city {
    grid-area: 3 / 2 / 4 / 3;
}

#input-city {
    grid-area: 4 / 2 / 5 / 3;
}

#label-country {
    grid-area: 5 / 1 / 6 / 3;
}

#input-country {
    grid-area: 6 / 1 / 7 / 3;
}

#register-form-company {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-column-gap: var(--spacing-xxl);
}

#label-cname {
    grid-area: 1 / 1 / 2 / 3;
}

#input-cname {
    grid-area: 2 / 1 / 3 / 3;
}

#label-ctype {
    grid-area: 3 / 1 / 4 / 3;
}

#select-ctype {
    grid-area: 4 / 1 / 5 / 3;
}

#label-kvk {
    grid-area: 5 / 1 / 6 / 2;
}

#input-kvk {
    grid-area: 6 / 1 / 7 / 2;
}

#label-vat {
    grid-area: 5 / 2 / 6 / 3;
}

#input-vat {
    grid-area: 6 / 2 / 7 / 3;
}


@media (max-width: 576px) {

    #register-form-company,
    #register-form-user,
    #register-form-address {
        grid-column-gap: var(--spacing-m);
    }
}