Box-shadow to selected card

src/app/create-committee/create-committee.component.html

@@ -3,13 +3,14 @@
 </header>
 
 <section>
-    <li *ngFor="let committee of committees" (click)='committee.isActive = !committee.isActive'>
+    <li *ngFor="let committee of committees" (click)='committee.isActive = !committee.isActive'
+        [ngClass]="{'isActive':committee.isActive === true }">
         <img src="../../assets/images/Investigator.jpg" alt="">
         <div class="upfold">
             <h6>{{committee.name}}</h6>
             <span>{{committee.designation}}</span>
         </div>
-        <div class="check-box" [ngClass]="{'isActive':committee.isActive === true }"></div>
+        <div class="check-box"></div>
     </li>
 </section>
 

src/app/create-committee/create-committee.component.scss

@@ -16,46 +16,21 @@ section {
         cursor: pointer;
         background-color: var(--shadow-grey);
         filter: brightness(115%);
-        
-        .upfold {
-            width: 20rem;
-            padding-left: 2rem;
-
-            h6 {
-                font-size: 1.6rem;
-                color: var(--primary);
-                padding: 0.3rem 0;
-            }
-            span {
-                font-size: 1.4rem;
-                color: var(--primary);
-            }
-        }
-
-        img {
-            width: 5rem;
-            height: 5rem;
-            border-radius: 50%;
-            margin-left: 1rem;   
-        }
 
-        .check-box { 
-            width: 1.8rem;
+        &.isActive {
             background-color: white;
-            height: 1.8rem;
-            margin: 0 auto;
-            border-radius: 0.4rem;
-            box-shadow: inset 0px 1px 4px 0px var(--dark-grey);
-
-                    
-            &.isActive {
+            border: 1px solid var(--shadow-grey);
+            box-shadow: 0rem 0rem 0.5rem 0.5rem var(--shadow-grey);
+            filter: brightness(110%);
+            
+            .check-box{
                 position: relative;
                 display: inline-block;
                 width:  1.8rem;
                 height:  1.8rem;
                 background-color: var(--success);
                 box-shadow: none;
-
+                
                 &::before {
                     content: "";
                     position: absolute;
@@ -67,7 +42,7 @@ section {
                     transform: translateX(10px) rotate(-45deg);
                     transform-origin: left bottom;
                 }
-
+                
                 &::after {
                     content: "";
                     position: absolute;
@@ -78,19 +53,52 @@ section {
                     background-color: white;
                     transform: translateX(10px) rotate(-45deg);
                     transform-origin: left bottom;
-
                 }
             }
         }
+        
+        .upfold {
+            width: 20rem;
+            padding-left: 2rem;
+
+            h6 {
+                font-size: 1.6rem;
+                color: var(--primary);
+                padding: 0.3rem 0;
+            }
+            span {
+                font-size: 1.4rem;
+                color: var(--primary);
+            }
+        }
+
+        img {
+            width: 5rem;
+            height: 5rem;
+            border-radius: 50%;
+            margin-left: 1rem;   
+        }
+
+        .check-box { 
+            width: 1.8rem;
+            background-color: white;
+            height: 1.8rem;
+            margin: 0 auto;
+            border-radius: 0.4rem;
+            box-shadow: inset 0px 1px 4px 0px var(--dark-grey);
+
+        }
+                    
     }
 }
 
+
 .user-action {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 10rem;
-
+    
     button {
         width: 15rem;
         margin: 0 1rem;