/*  view css  */
.view
{
    width: 100%;
    text-align: center;
    padding: 2rem 1rem 2rem 4rem;
    box-sizing: border-box;
}
@media (max-width: 40rem) {
    .view { padding: 0.5rem 0.5rem; }
}


.view > .header,
.view > form > .header,
.view > .footer,
.view > form > .footer
{
    position: relative;
    display: flex;
    overflow: visible;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
}
.view > .header,
.view > form > .header
{
    justify-content: flex-start;
}
.view > .footer,
.view > form > .footer
{
    justify-content: flex-end;
}


.view > .header > *,
.view > form > .header > *,
.view > .footer > *,
.view > form > .footer > *
{
    flex: 0 0 auto;
    margin: 0 0 0.5rem 0;
}
.view > .header > *:not(:last-child),
.view > form > .header > *:not(:last-child)
{
    margin-right: 0.5rem;
}
.view > .footer > *:not(:first-child),
.view > form > .footer > *:not(:first-child)
{
    margin-left: 0.5rem;
}

.view > .main,
.view > form > .main
{
    position: relative;
    display: block;
    overflow: visible;
    margin: 0 0 0.5rem 0;
}
.view > .main:after,
.view > form > .main:after
{
    content: '';
    clear: both;
    display: block;
    width: 100%;
    height: 0;
}