.firstName {
    display: inline-block;
    height: 25px;
    margin-top: 10px;
    text-align: flex-start;
    font-size: 16px;
}

.lastName {
    height: 25px;
    text-align: flex-start;
    font-size: 12px;
    font-weight: 400;
    color: #718096;
}

.container {
    margin-bottom: 15px;
}
.avatarImage {
    left: 20;
    vertical-align: top;
}
.spaceStyle {
    left: 15;
}
.div {
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
    width: 100%;
    padding: 10px; // Add padding to make the hover area more noticeable
    border: 1px solid transparent; // Optional: Add a border to see the hover effect clearly
    &:hover {
        background-color: #f0f0f0; // Change this to your desired hover color
        border-color: #d9d9d9; // Optional: Change border color on hover
    }
}

.divLog {
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    padding: 10px; // Add padding to make the hover area more noticeable
    border: 1px solid transparent; // Optional: Add a border to see the hover effect clearly
    &:hover {
        background-color: #f0f0f0; // Change this to your desired hover color
        border-color: #d9d9d9; // Optional: Change border color on hover
    }
}

.space {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.f11Text {
    margin-left: 0px;
    text-align: right;
}

.valid {
    color: green;
}

.valid:before {
    position: relative;
    left: -35px;
    content: '✔';
}
/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
    color: #a94442;
}

.invalid:before {
    position: relative;
    left: -35px;
    content: '✖';
}
.validatemssageCom {
    margin-left: 20px;
}
