Design

src/app/search/components/output/output-by-family.component.css

 .selectbox {
-    max-height: 200px;
+    height: 200px;
     overflow-y: auto;
     border: 1px solid #ced4da;
     border-radius: .25rem;
@@ -8,3 +8,11 @@
 .anis-color {
     color: #7AC29A;
 }
+
+button:hover {
+    background-color: #F8F9FA;
+}
+
+button:focus {
+    box-shadow: none;
+}
\ No newline at end of file

src/app/search/components/output/output-by-family.component.html

 <div class="row">
-    <div *ngFor="let category of getCategoryByFamily(outputFamily.id)" class="col-12 col-md-6 text-center">
-        {{ category.label }}
-        <br />
+    <div *ngFor="let category of getCategoryByFamily(outputFamily.id)" class="col-12 col-md-6 my-3 text-center">
+        <p class="mb-3"><em>{{ category.label }}</em></p>
         <div class="selectbox py-1">
             <button (click)="toggleSelectAll()" class="btn btn-block text-left py-0 m-0">
                 <div *ngIf="isAllSelected; then selected else unselected"></div>

src/app/search/components/output/output-tabs.component.css

+.panel.card.custom-accordion .panel-heading.card-header .panel-title {
+    color: red;
+}
\ No newline at end of file

src/app/search/components/output/output-tabs.component.html

@@ -10,7 +10,7 @@
 </div>
 
 <accordion *ngIf="outputFamilyList.length > 1">
-    <accordion-group #ag *ngFor="let family of outputFamilyList" [panelClass]="'custom-accordion'" class="my-2"
+    <accordion-group #ag *ngFor="let family of outputFamilyList" [panelClass]="'custom-accordion-output'" class="my-2"
         [isOpen]="true">
         <button class="btn btn-link btn-block clearfix" accordion-heading>
             <div class="pull-left float-left">

src/styles.css

 /* You can add global styles to this file, and also import other style files */
+
+.custom-accordion-output .panel-body {
+    padding-top: 0;
+    padding-bottom: 0;
+}
\ No newline at end of file