.wrapper {
    display: grid;
    grid-template-columns: 50% 50%;
}
/** margin-left **/
.ml1 {
    margin-left: 1rem;
}
.ml1_5 {
    margin-left: 1.5rem;
}
.ml2 {
    margin-left: 2rem;
}
.ml2_5 {
    margin-left: 2.5rem;
}
.ml3 {
    margin-left: 3rem;
}
/** margin-top **/
.mt1 {
    margin-top: 1rem;
}
.mt2 {
    margin-top: 2rem;
}
.mt3 {
    margin-top: 3rem;
}
.mt4 {
    margin-top: 4rem;
}
.mt5 {
    margin-top: 5rem;
}
.mt10 {
    margin-top: 10rem;
}
/** margin-bottom **/
.mb1 {
    margin-bottom: 1rem;
}
.mb2 {
    margin-bottom: 2rem;
}
.mb3 {
    margin-bottom: 3rem;
}
.mb4 {
    margin-bottom: 4rem;
}
.mb5 {
    margin-bottom: 5rem;
}
.mb10 {
    margin-bottom: 10rem;
}
/** text-align **/
.center {
    text-align: center;
}
.right {
    text-align: right;
}
/** message box **/
div #message {
    margin: 0;
    padding: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
div #success {
    margin: 1rem;
    padding: 1rem;
    min-height: 3rem;
    width: 50%;
    text-align: center;
    align-items: center;
    justify-content: center;
}
div #failed {
    margin: 1rem;
    padding: 1rem;
    min-height: 3rem;
    width: 50%;
    text-align: center;
    align-items: center;
    justify-content: center;
}
div #notice {
    margin: 1rem;
    padding: 1rem;
    min-height: 3rem;
    width: 50%;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.field {
    margin: 1px;
    padding: 1px;
}
div .invalid {
    background-color: #ffdddd;
}
div .invalid {
    border: 5px solid #c00000;
}
div .invalid {
    color: #c00000;
}
div .valid {
    background-color: #ddffdd;
}
div .valid {
    border: 5px solid #99ff99;
}
div .valid {
    color: #228b22;
}
div .caution {
    color: #228b22;
}