.title {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin: 40px 0;
}

.title span {
    margin: 0px 15px;
    font-size: 25px;
    opacity: 0;
    animation: fadeInPic 1.8s ease forwards;
}

.circle.first,
.circle.second {
    transform: translate(0, -40px);
    animation: drop 1.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Form container */

form {
    display: flex;
    flex-direction: column;
    padding: 10px 40px;
    color: #fff;
    opacity: 0;
    animation: fadeInEase 2.5s 1s forwards;
    margin: 10px 0px;
}

form .formContainer {
    display: flex;
    flex-direction: column;
    position: relative;
}

form input {
    border: none;
    border-bottom: 2px solid #707070;
    outline: none;
    background-color: transparent;
    padding: 10px;
    color: #fff;
}


form input::placeholder {
    font-family: "Kanit";
    color: #fff;
    text-transform: capitalize;
    opacity: 0.8;
    padding: 0px 10px;
}

form input:autofill {
    box-shadow: 0 0 0 1000px var(--containerBody-BackgroundColor) inset !important;
    -webkit-text-fill-color: #fff !important;
}



form i {
    color: #fff;
    position: absolute;
    bottom: 8px;
    right: 0;
}


/* Submit of form && Show info user btn*/

form .sub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

form .sub .btn {
    display: flex;
    align-items: center;
    gap: 20px;
}

form .sub .btn input {
    font-family: "Kanit";
    border: 1px solid transparent;
    min-width: 100px;
    cursor: pointer;
    border-radius: 15px;
}


form .sub .btn :first-child,
main section.user-info .extra-user-info .actions :first-child {
    color: #fff;
    background-color: #000;
    transition: 0.4s ease;
}

form .sub .btn :first-child:hover,
main section.user-info .extra-user-info .actions :first-child:hover {
    color: #000;
    background-color: #fff;
    transition: 0.4s ease;
}


form .sub .btn :first-child:hover + :last-child,
main section.user-info .extra-user-info .actions :first-child:hover + :last-child {
    color: #fff;
    background-color: #000;
    transition: 0.4s ease;
}

form .sub .btn :last-child,
main section.user-info .extra-user-info .actions :last-child {
    color: #000;
    background-color: #fff;
    transition: 0.4s;
}

form .sub .btn :last-child:hover,
main section.user-info .extra-user-info .actions :last-child:hover {
    color: #000;
    background-color: #fff;
    transition: 0.4s;
}