/*-----    forgot password?  ------*/
/* --- in addition to style.css----*/
.text-field {
    position: relative;
    margin-bottom: 24px;
}

.text-field  input {
    font-family: var(--fontfamily-lato);
    display: inline-block;
    border: thin solid var(--linecolor-pink);
    color: var(--fontcolor-secondary);
    font-weight: 700;
    font-size: 14px;
    background-color: var(--bgcolor-lightpink);
    padding: 14px 10px 14px 20px; 
    border-radius: 10px;
    width:100%;
}

.text-field input:focus {
    border: thin solid var(--linecolor-pink);
}

.text-field label {
    font-family: var(--fontfamily-lato);
    color: var(--fontcolor-secondary);
    position: absolute;
    pointer-events: none;
    left: 16px;
    top: 14px;
    transition: 0.3s;
    font-weight: 400 !important;
}

.text-field input:focus ~ label, input:valid ~ label {
    top: -10px;
    left: 15px;
    font-size: small;
    font-weight: 400;
    color: white; 
    background-color: var(--bgcolor-primary);
    padding: 0 12px 0 12px;
    border-radius: 4px;
}

.text-field #mobile_error, #password_error {
    #last_name_error, 
    #mobile_no_error,
    #password_error,
    #email_error {
    font-size: 12px;
    font-weight: 400;
    color: var(--fontcolor-secondary);
    height: 18px;
    text-align: center;
    position: absolute;
    background-color: #FFFF75;
    bottom: 0;
    right: 0;
    margin-bottom: 1px;
    margin-right: 16px;
    border-radius: 2px;
    line-height: 1.8;
    font-style: italic;
}

.kidz-footer {
    display : none;
}

.text-field input[type="number"]::-webkit-inner-spin-button,
.text-field input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.text-field input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}