<section class="mSkill-dot-hover" #mSkillCard (mouseenter)='hoverActive(mSkillCard,true)' (mouseleave)='hoverActive(mSkillCard, false)' (click)="selectTheCard(mSkill)">
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
        <div *ngIf="!(mSkill.isSelected)">
            <app-avatar-pic [initials]="Initials(mSkill.pgSkillTrackMstr.skillTrackName)" [style.backgroundColor]="colors[color]" *ngIf="!didHover"></app-avatar-pic>
            <img src="{{imageUrl}}/assets/img/employee/profile/check_inactive.png" alt="forCheck" *ngIf="didHover " class="selectionimg">
        </div>
        <div *ngIf="(mSkill.isSelected)">
            <img src="{{imageUrl}}/assets/img/employee/profile/check_inactive.png" alt="forCheck" class="selectionimg">
            <img src="{{imageUrl}}/assets/img/employee/profile/check_active.png" alt="forCheck" class="imgselected">
            <!-- <input type="checkbox" style="visibility: hidden" value="mSkill.skillCategoryId" /> -->
        </div>
    </div>
    <div class="col-lg-10 col-md-10 col-sm-9 col-xs-8">
        <div class="mSkill-descp">{{mSkill.pgSkillTrackMstr.skillTrackName}}</div>
        <div class="skill_skills" *ngIf="mSkill.pgSkillTrackDtls"><span *ngFor="let ck of mSkill.pgSkillTrackDtls" class="cb_options">
            {{ck.skillTrackDtlsName}}
            </span>
        </div>
    </div>
</section>