#login{ display:flex; flex: none; align-items: center; justify-content: center; width: 100%; height: 100%;}
#login in{ 
    display:flex; flex: none; align-items: stretch; justify-content: center; 
    background: #fff; border: 2px solid #ccc; border-radius: 1em; box-shadow: 0 0 8em #cccb;
}
#login in section:first-child{ border-right: 2px solid #ccc; }
#login in section{ padding: 0 2em 2em; }
#login in section form{ display:flex; flex: none; flex-direction: column; justify-content: center; width: 25vw; min-width: 25em; }
#login nav{ margin: 2em 0 1em; }
#login .clc nav{ text-align: center; }
#login .cta{ margin-left: 0; }

.error{ color: var(--reverse-text); background: var(--pay-cancel); font-size: 1.5em; padding: 1em; text-align: center;  }

.soon{ color: var(--reverse-text); background: var(--sec-color); font-size: 1.5em; padding: 1em; text-align: center; }

.flexpack{ display:flex; flex: none; align-items: center; }
.flexpack div{ flex: 1; }
.flexpack div:first-child input{ border-radius: 0.5em 0 0 0.5em; }
.flexpack div:last-child input{ border-radius: 0 0.5em 0.5em 0; }

.famillyaccount{ 
    display: flex; flex: none; align-items: center; margin-bottom: 2em;
    color: var(--sec-color); background: var(--reverse-text); border: 3px solid var(--sec-color); 
    box-shadow: 0 0 4em var(--sec-color-grad2) inset; border-radius: 0.5em;
}
.famillyaccount h1{ flex: 1; padding: 0 1em; text-align: center; font-size: 1.5em; }
.famillyaccount .pic{ 
    align-self: flex-end; width: 40%; aspect-ratio: 1/1; margin: 0 -5% 0 1em; 
    background: url(images/oneaccount.svg) bottom center no-repeat; background-size: contain;
}