form {
    position: relative;
    display: block;
    max-width: 392px;
    width: 100%;
    margin: 12px auto 0;
}

.inputWrapper {
    position: relative;
    max-width: 392px;
    padding: 35px 16px 8px;
}

.inputArea {
    display: flex;
    align-items: center;
    position: relative;
}

input {
    min-width: 0;
    flex: 1;
    height: 40px;
    background-image: none;
    line-height: 24px;
    font-size: 18px;
    color: var(--teflon);
}

input:disabled {
    background-color: transparent;
}

.inputUnderline {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--gandalf);
    will-change: background-color;
    transition: background-color 300ms ease-out;
}

.inputArea.focus .inputUnderline {
    background-color: var(--light-orange);
}

.inputArea.typed.invalid .inputUnderline {
    background-color: var(--peach);
}

.inputLabel {
    position: absolute;
    left: 0;
    top: 8px;
    opacity: 0;
    font-size: 18px;
    color: var(--gandalf);
    transform-origin: left top;
    transition: color 200ms ease, transform 200ms ease;
    will-change: transform;
    pointer-events: none;
}

.inputArea.typed .inputLabel {
    opacity: 1;
    transform: translateY(-27px) scale(0.78);
}

.inputArea.focus .inputLabel {
    color: var(--light-orange);
}

.inputInfo {
    align-items: center;
    flex-direction: row-reverse;
    margin-left: 3px;
    display: none;
    cursor: default;
}

.inputArea.typed .inputInfo {
    display: flex;
}

.inputInfo .infoText {
    max-width: 128px;
    margin-left: 3px;
    line-height: 16px;
    font-size: 12px;
    color: var(--green);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.inputArea.typed.invalid .inputInfo .infoText {
    color: var(--peach);
}

.inputInfo .infoIcon {
    width: 16px;
    height: 12px;
    background-image: url(../img/icTick.svg);
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
}

.infoText:empty + .infoIcon {
    display: none;
}

.inputArea.typed.invalid .inputInfo .infoIcon {
    background-image: url(../img/icInvalid.svg);
}

.extraInfo {
    display: none;
    position: absolute;
    bottom: 4px;
    right: 0;
    max-width: 280px;
    transform: translateX(100%);
    font-family: Nanum, Helvetica, sans-serif;
    line-height: 19px;
    font-size: 16px;
    color: var(--teflon);
}

.inputArea.focus + .extraInfo,
.inputArea.suggested + .extraInfo {
    display: block;
}

#emailSuggestion:empty {
    display: none;
}

#emailSuggestion::after {
    content: " ?";
    color: #554d56;
    /* color: var(--teflon); */
}

.showPassword {
    display: none;
    align-items: center;
    padding: 5px 0 8px 4px;
    font-size: 12px;
    color: var(--gandalf);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.inputWrapper.password:hover .showPassword,
.inputWrapper.password .inputArea.typed > .showPassword,
#password:focus ~ .showPassword {
    display: flex;
    align-self: flex-end;
}

#password:disabled ~ .showPassword {
    display: none;
}

input[type="checkbox"] {
    display: none;
}

.checkbox {
    width: 16px;
    height: 16px;
    background-image: url(../img/checkBox.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

input[type="checkbox"]:checked + .checkbox {
    background-image: url(../img/checkBoxSelected.svg);
}

.checkboxLabel {
    margin-left: 4px;
}

.extraInfo span {
    font-family: Nanum, Helvetica, sans-serif;
    line-height: 19px;
    font-size: 16px;
    color: var(--teflon);
}

.extraInfo a {
    font-family: Nanum, Helvetica, sans-serif;
    line-height: 19px;
    font-size: 16px;
    color: var(--light-orange);
}

.inputArea.typed.invalid + .extraInfo {
    display: block;
}

.errorInfo {
    font-family: Nanum, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 19px;
    color: var(--peach);
    position: relative;
    top: -8px;
}

form button,
button[form] {
    width: calc(100% - 32px);
    margin: 8px 16px 12px;
    height: 60px;
    background-color: var(--light-orange);
    color: #fff;
}

form button:disabled,
button:disabled[form] {
    opacity: 0.6;
    background-color: var(--clooney);
}

form button:enabled:active,
button:enabled:active[form] {
    background-color: #fab036; /* blent color: peach-15pc and light-orange */
}

#loginForm button,
#registerForm button {
    height: 48px;
    border-radius: 2px;
    background-color: var(--cornflower-blue);
    margin-top: 16px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    display: none;
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
    animation-name: spin;
    animation-duration: 1s;
    animation-timing-function: steps(8, end);
    animation-iteration-count: infinite;
}

.spinner.checking {
    display: block;
}

.spinner.checking + .inputInfo {
    display: none;
}

@media screen and (max-width: 952px) {
    .inputArea.typed .inputLabel {
        transform: translateY(-23px) scale(0.778);
    }

    .extraInfo {
        position: static;
        width: 100%;
        margin-top: 4px;
        transform: none;
        line-height: 16px;
        font-size: 14px;
    }

    .extraInfo span,
    .extraInfo a {
        line-height: 16px;
        font-size: 14px;
    }
}

@media screen and (max-width: 392px) {
    .inputWrapper {
        padding: 27px 16px 4px;
    }

    input {
        height: 29px;
        line-height: 21px;
        font-size: 16px;
    }

    .showPassword {
        padding: 0 0 4px 4px;
    }

    .inputLabel {
        font-size: 16px;
    }

    .inputArea.typed .inputLabel {
        transform: translateY(-23px) scale(0.875);
    }

    .inputInfo {
        padding-bottom: 4px;
    }

    form button {
        height: 48px;
        margin: 12px 16px;
        font-size: 16px;
    }
}
