.creator-lms-page {
    .creator-lms-student-profile {
        .student-profile-edit {
            .creator-lms-profile-cover {
                .hoverlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(3, 3, 3, 0.38);
                    border-radius: 14px;
                    padding: 16px;
                    display: flex;
                    flex-flow: row wrap;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    opacity: 0;
                    visibility: hidden;
                    transition: all 0.3s ease;

                    &:hover {
                        opacity: 1;
                        visibility: visible;
                    }

                    .cover-action-btn {
                        border-radius: 8px;
                        border: 1px solid #EBEBEF;
                        background: #FFF;
                        color: var(--creator-lms-heading-color);
                        font-size: 14px;
                        font-weight: 500;
                        letter-spacing: -0.14px;
                        text-decoration: none;
                        display: flex;
                        align-items: center;
                        gap: 6px;
                        padding: 4px 12px;
                        transition: all 0.3s ease;
                        cursor: pointer;
                        height: 30px;
                        text-transform: none;
    
                        &:hover {
                            background-color: #f6f6f6;
                        }
                    }
                }

                &:focus-within .hoverlay {
                    opacity: 1;
                    visibility: visible;
                }

                & > figure:focus + .hoverlay,
                & > figure:hover + .hoverlay {
                    opacity: 1;
                    visibility: visible;
                }
            }

            .creator-lms-profile-avatar {
                .edit-avatar {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: 100%;
                    background: #00000080;
                    padding: 10px;
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    gap: 10px;
                    cursor: pointer;
                    opacity: 0;
                    visibility: hidden;
                    transition: all 0.3s ease;

                    small {
                        color: #FFF;
                        text-align: center;
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 1.3;
                    }

                    &:focus-within,
                    &:focus {
                        outline: 2px solid #80a0eb;
                        outline-offset: -2px;
                    }
                }

                &:focus-within,
                &:focus,
                &:hover {
                    .edit-avatar {
                        opacity: 1;
                        visibility: visible;
                    }
                }
            }

            .required {
                color: #f66f6f;
            }

            .account-title {
                color: var(--creator-lms-heading-color);
                font-size: 18px;
                font-weight: 600;
                line-height: 1.2;
                letter-spacing: normal;
                margin: 0 0 15px;
                text-transform: none;
            }

            .creator-lms-student-account,
            .creator-lms-student-basic-info {
                border-radius: 8px;
                background-color: #FFF;
                box-shadow: 0px 1px 4px 0px #D3D6DD;
                padding: 21px 30px 24px;
            }

            .creator-lms-student-basic-info {
                margin-top: 65px;
                margin-bottom: 24px;
            }

            .creator-lms-form-group.bio textarea {
                min-height: 145px;
            }

            .creator-lms-form-group.interests textarea {
                min-height: 74px;
            }

            .creator-lms-password-strength {
                margin-top: 8px;
                display: none;
            }

        }
        
    }
}


@media screen and (max-width: 1199px) {
    .creator-lms-page .creator-lms-student-profile .student-profile-edit .creator-lms-student-account, 
    .creator-lms-page .creator-lms-student-profile .student-profile-edit .creator-lms-student-basic-info {
        border-radius: 10px;
        padding: 17px 20px 20px;
    }

    .creator-lms-page .creator-lms-student-profile .student-profile-edit .creator-lms-profile-cover .hoverlay {
        border-radius: 10px;
    }

}

@media screen and (max-width: 991px) {
    .creator-lms-page .creator-lms-student-profile .student-profile-edit .creator-lms-profile-avatar .edit-avatar small {
        font-size: 10px;
    }
    .creator-lms-page .creator-lms-student-profile .student-profile-edit .creator-lms-profile-cover .hoverlay {
        align-items: flex-start;
        justify-content: flex-end;
    }
    .creator-lms-page .creator-lms-student-profile .student-profile-edit .creator-lms-profile-cover .hoverlay {
        border-radius: 0;
    }

    .creator-lms-page .creator-lms-student-profile .student-profile-edit .creator-lms-student-account, 
    .creator-lms-page .creator-lms-student-profile .student-profile-edit .creator-lms-student-basic-info {
        padding: 14px 16px;
    }
    
    .creator-lms-page .creator-lms-student-profile .student-profile-edit .creator-lms-student-basic-info {
        margin-top: 56px;
        padding: 14px 16px;
    }

}


@media screen and (max-width: 767px) {
    .creator-lms-page .creator-lms-student-profile .student-profile-edit .creator-lms-form-group.bio textarea {
        min-height: 92px;
    }

}