#mail>:is(form, div) {
    display       : flex;
    flex-direction: column;
}

#mail .exit {
    margin-top: 25px;
}

#mail p {
    margin : 0;
    display: flex;
}

#mail p>span {
    margin-left: auto;
}

#mail>form>input:is([type=text], [type=password]) {
    margin-bottom: 12px;
}

#mail>form>input:last-child {
    margin-bottom: unset;
}

#mail>form>.submit {
    margin-top   : 6px;
    margin-bottom: 10px;
    display      : flex;
}

#mail>form>.submit>label {
    padding      : 10px 20px;
    border       : unset;
    border-radius: 3px 0 0 3px;
}

#mail>form>.submit>input {
    padding      : 10px 20px;
    flex-grow    : 1;
    border       : unset;
    border-radius: 0 3px 3px 0;
}


#mail>form>input[type=submit].registration {
    padding         : 7px 20px;
    background-color: #86781C;
}

#mail>form>input[type=submit].registration:hover {
    background-color: #9e8d20;
}

#mail>form>input[type=submit].registration:is(:active, :focus) {
    background-color: #776b19;
}

#mail>form>ul.errors {
    margin-top      : 18px;
    margin-bottom   : 0px;
    padding         : 10px;
    text-align      : center;
    list-style      : none;
    background-color: #ae8f8f;
}

#account {
    display           : grid;
    grid-template-rows: auto auto;
}

#account>button#login {
    z-index : 1500;
    grid-row: 2;
}

#account>section.tab {
    z-index         : 1000;
    position        : relative;
    bottom          : -100%;
    padding         : 1.5rem 10%;
    display         : flex;
    flex-direction  : column;
    align-self      : end;
    text-align      : center;
    gap             : .8rem;
    background-color: var(--background-light-2);
    transition      : .2s ease-in;
}

#account>button.active+section.tab {
    bottom: 0%;
}

#account>section.tab h3:first-of-type {
    margin-bottom: 0.5rem;
}

#account>section.tab>* {
    margin: unset;
}

#account>section#mail.tab {
    grid-row          : 1;
    display           : grid;
    grid-template-rows: auto auto;
}

#account>section#mail.tab>#profile {
    grid-row          : 1;
    display           : grid;
    grid-template-rows: auto auto;
}

#account>section#mail.tab>input[type=mail] {
    grid-row          : 2;
}
