.valid {
    color: red;
    padding-left: 2px;
}

.label_up_field {
    position: relative;
    margin-bottom: 24px;
}

.label_up_field label {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 16px;
    color: rgb(99, 102, 102);
    /* background-color: gold; */
    background-color: #fff;
    transition: all .2s ease;
    padding: 0 4px;
    cursor: text;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    border-radius: 4px;
}

.label_up_field.active label {
    color: #80868b;
    transform: scale(0.85) translate3d(0px, -32px, 0);
}

.label_up_field input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 2px solid #c6c6c6;
    outline: none;
    border-radius: 8px;
    font-size: 18px;
    color: #000;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.label_up_field.active input {
    padding-right: 24px;
}


.label_up_field input:placeholder-shown+label {
    background-color: transparent;
}

.label_up_field input:focus+label {
    background-color: #fff;
    color: var(--main-primary-color);
    font-weight: 600;
    transform: scale(0.85) translate3d(0, -32px, 0);
    border-radius: 8px;
}

.label_up_field input:hover,
.label_up_field input:focus {
    border-color: var(--main-primary-color);
}


.label_up_field input::placeholder {
    color: #999;
}

.label_up_field input:disabled {
    background-color: #dbdbdb;
    border-color: #dbdbdb;
}

.label_up_field .error_message {
    position: absolute;
    bottom: -14px;
    right: 16px;
    font-size: 13px;
    color: red;
    display: none;
}

.label_up_field.error .error_message {
    display: block;
}

.label_up_field.error input {
    border: 2px solid red;
}

.label_up_field.error input:disabled {
    border-color: #dbdbdb;
}

/* placeholder的位置 輸入時 label的顏色*/
.label_up_field.error input:placeholder-shown+label {
    color: #999;
    font-size: 16px;
}

.label_up_field.error label,
.label_up_field.error input:focus+label {
    color: red;
    font-weight: 600;
}

.label_up_field .delete-button {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    cursor: pointer;
    display: none;
}

.password_field .delete-button {
    right: 40px;
}