Add edit buttons in mapping table

Issue-ID: CCSDK-2795

Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: Ife3dc443881f4853dfbed969b5f6594358e94174

7 files changed, 73 insertions, 15 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
index 4566f34d7..34644c42c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
@@ -123,8 +123,18 @@
 
 
                     </div>
+                    
                 </div>
+                
                 <div id="mapping-table" [hidden]="resourceDictionaryRes?.length == 0" class="mapping-table mx-4 my-2">
+                    <div class="btn-group mapping-editBar" role="group">
+                          <div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom">
+                            <input type="checkbox" class="custom-control-input" id="customCheck1" checked>
+                            <label class="custom-control-label" for="customCheck1"></label>
+                          </div>
+                        <button type="button" class="btn" tooltip="Re-mapping" placement="bottom"><i class="icon-autoMap"></i></button>
+                        <button type="button" class="btn" tooltip="Remove" placement="bottom"><i class="icon-delete-sm"></i></button>
+                      </div>
                     <table datatable [dtOptions]="initDtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
                         <thead>
                             <tr>
@@ -141,8 +151,14 @@
                         </thead>
                         <tbody>
                             <tr *ngFor="let dict of resourceDictionaryRes">
-                                <td><input type="checkbox" [checked]="selectedProps.has(dict.name)"
-                                        (click)="selectProp(dict.name)"></td>
+                                <td>
+                                <div class="custom-control custom-checkbox" tooltip="Select" placement="bottom">
+                            <input type="checkbox" class="custom-control-input" id="customCheck2" [checked]="selectedProps.has(dict.name)"
+                                        (click)="selectProp(dict.name)">
+                            <label class="custom-control-label" for="customCheck2"></label>
+                          </div>
+                                <!-- <input type="checkbox" [checked]="selectedProps.has(dict.name)"
+                                        (click)="selectProp(dict.name)"></td> -->
                                 <td>
                                     <img *ngIf="dict.definition?.property?.required"
                                         src="/assets/img/icon-required-yes.svg">
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
index 0ef083807..6a503aa78 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
index d5bbb8308..41bd25626 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
@@ -17,6 +17,7 @@
 <glyph unicode="&#xe907;" glyph-name="icon-enrich" horiz-adv-x="723" d="M643.818 562.272h-240.316l20.882 363.431c1.945 33.821-43.138 47.578-60.352 18.306l-312.986-532.253c-12.694-21.586 2.893-48.888 27.965-48.888h240.317l-20.884-363.431c-1.945-33.823 43.14-47.574 60.352-18.306l312.986 532.251c12.692 21.589-2.895 48.89-27.965 48.89zM370.919 129.754l15.154 263.697c1.069 18.617-13.757 34.301-32.389 34.301h-217.964l216.186 367.635-15.152-263.698c-1.069-18.617 13.757-34.301 32.389-34.301h217.962l-216.186-367.633zM67.885 180.705l-56.849-56.849c-12.669-12.669-12.669-33.209 0-45.878 12.667-12.669 33.209-12.671 45.878 0l56.849 56.849c12.669 12.669 12.669 33.209 0 45.878-12.667 12.671-33.209 12.671-45.878 0zM67.885 714.493c12.667-12.669 33.209-12.671 45.878 0 12.669 12.669 12.669 33.209 0 45.878l-56.849 56.849c-12.667 12.669-33.209 12.669-45.878 0s-12.669-33.209 0-45.878l56.849-56.849zM654.942 180.705c-12.667 12.669-33.209 12.669-45.878 0s-12.669-33.209 0-45.878l56.849-56.849c12.667-12.669 33.209-12.671 45.878 0 12.669 12.669 12.669 33.209 0 45.878l-56.849 56.849zM654.942 714.493l56.849 56.849c12.669 12.669 12.669 33.209 0 45.878-12.667 12.669-33.209 12.669-45.878 0l-56.849-56.849c-12.669-12.669-12.669-33.209 0-45.878 12.665-12.667 33.209-12.669 45.878 0z" />
 <glyph unicode="&#xe908;" glyph-name="icon-get_started" d="M1003.008 959.872c-199.893 3.584-427.861-100.907-572.16-262.997-137.899-2.603-272.171-59.136-371.029-157.995-5.76-5.675-7.808-14.165-5.291-21.845 2.56-7.723 9.216-13.312 17.237-14.464l164.437-23.552-20.309-22.741c-7.552-8.448-7.168-21.291 0.853-29.312l274.219-274.219c4.139-4.139 9.6-6.229 15.104-6.229 5.077 0 10.155 1.792 14.208 5.419l22.741 20.309 23.552-164.437c1.152-8.021 7.467-13.909 15.104-16.469 1.963-0.64 4.011-0.939 6.101-0.939 6.059 0 12.245 2.645 16.512 6.869 97.493 97.493 154.027 231.765 156.629 369.664 162.261 144.597 267.605 372.48 262.955 572.117-0.299 11.349-9.472 20.523-20.864 20.821zM806.4 591.573c-20.779-20.779-48.085-31.189-75.435-31.189s-54.656 10.411-75.435 31.189c-41.557 41.6-41.557 109.269 0 150.869 41.6 41.6 109.269 41.6 150.869 0s41.6-109.312 0-150.869zM116.224 238.72c-45.653-45.653-108.331-251.904-115.328-275.243-2.261-7.509-0.171-15.659 5.333-21.205 4.096-4.096 9.515-6.272 15.104-6.272 2.048 0 4.096 0.299 6.144 0.896 23.339 6.997 229.589 69.675 275.243 115.328 51.413 51.413 51.413 135.083 0 186.496-51.456 51.413-135.083 51.371-186.496 0z" />
 <glyph unicode="&#xe909;" glyph-name="icon-user_guide" d="M182.318 221.526v738.474h-49.18c-72.456 0-131.404-58.948-131.404-131.404v-648.796c30.102 25.97 69.248 41.728 112.030 41.728h68.554zM795.95 450.1c6.458 0 12.862-0.236 19.214-0.66v510.56h-572.956v-738.474h273.492c26.68 130.278 142.202 228.574 280.25 228.574zM423.968 783.658h200.44v-59.89h-200.44zM356.262 653.638h335.852v-59.89h-335.852zM549.012 19.818h-395.51v59.89h369.092c-8.198 26.514-12.636 54.66-12.688 83.818h-396.142c-62.73 0-113.764-51.034-113.764-113.762 0-62.73 51.034-113.764 113.764-113.764h509.716c-29.982 22.73-55.356 51.222-74.468 83.818zM795.95 392.1c-125.748 0-228.052-102.302-228.052-228.050s102.304-228.050 228.052-228.050c125.746 0 228.050 102.304 228.050 228.050 0 125.748-102.304 228.050-228.050 228.050zM795.928 300.576c16.818 0 29.272-13.746 30-30 0.726-16.202-14.308-30-30-30-16.818 0-29.272 13.746-30 30-0.726 16.202 14.308 30 30 30zM825.996 47.13h-60v153.598h60z" />
+<glyph unicode="&#xe90a;" glyph-name="icon-autoMap" horiz-adv-x="904" d="M865.588 451.765c0-65.786-53.332-119.118-119.118-119.118s-119.118 53.332-119.118 119.118c0 65.786 53.332 119.118 119.118 119.118s119.118-53.332 119.118-119.118zM19.853 940.147h230.294v-230.294h-230.294zM19.853 193.676h230.294v-230.294h-230.294zM19.853 566.912h230.294v-230.294h-230.294zM885.441 451.765c0 76.628-62.343 138.971-138.971 138.971s-138.971-62.343-138.971-138.971c0-76.628 62.343-138.971 138.971-138.971s138.971 62.343 138.971 138.971zM746.471 352.5c-54.735 0-99.265 44.53-99.265 99.265s44.53 99.265 99.265 99.265c54.735 0 99.265-44.53 99.265-99.265s-44.53-99.265-99.265-99.265zM250.147 960h-230.294c-10.966 0-19.853-8.887-19.853-19.853v-230.294c0-10.966 8.887-19.853 19.853-19.853h230.294c10.966 0 19.853 8.887 19.853 19.853v230.294c0 10.966-8.887 19.853-19.853 19.853zM230.294 729.706h-190.588v190.588h190.588v-190.588zM250.147 213.529h-230.294c-10.966 0-19.853-8.887-19.853-19.853v-230.294c0-10.966 8.887-19.853 19.853-19.853h230.294c10.966 0 19.853 8.887 19.853 19.853v230.294c0 10.966-8.887 19.853-19.853 19.853zM230.294-16.765h-190.588v190.588h190.588v-190.588zM250.147 586.765h-230.294c-10.966 0-19.853-8.887-19.853-19.853v-230.294c0-10.966 8.887-19.853 19.853-19.853h230.294c10.966 0 19.853 8.887 19.853 19.853v230.294c0 10.966-8.887 19.853-19.853 19.853zM230.294 356.471h-190.588v190.588h190.588v-190.588zM329.559 431.912h138.971l-31.765-23.824c-8.771-6.576-10.547-19.023-3.971-27.794 3.901-5.196 9.864-7.941 15.898-7.941 4.149 0 8.321 1.295 11.896 3.971l79.412 59.559c0.101 0.070 7.941 5.956 7.941 15.882 0 6.126-3.017 12.214-7.941 15.882l-79.412 59.559c-8.771 6.584-21.218 4.8-27.794-3.971s-4.8-21.218 3.971-27.794l31.765-23.824h-138.971c-10.966 0-19.853-8.887-19.853-19.853s8.887-19.853 19.853-19.853zM329.559 805.147h168.463l138.971-138.971h-49.345c-10.966 0-19.853-8.887-19.853-19.853s8.887-19.853 19.853-19.853h99.265c12.726 0 22.621 13.215 19.062 25.413l-27.794 95.294c-3.071 10.524-14.099 16.58-24.622 13.502-10.524-3.071-16.565-14.091-13.494-24.622l6.91-23.699-126.687 126.687c-3.722 3.715-8.771 5.809-14.037 5.809h-176.691c-10.966 0-19.853-8.887-19.853-19.853s8.887-19.853 19.853-19.853zM686.912 273.088h-99.265c-10.966 0-19.853-8.887-19.853-19.853s8.887-19.853 19.853-19.853h49.345l-138.971-138.971h-168.463c-10.966 0-19.853-8.887-19.853-19.853s8.887-19.853 19.853-19.853h176.691c5.266 0 10.314 2.094 14.037 5.816l126.687 126.687-6.918-23.707c-3.071-10.531 2.978-21.551 13.502-24.615 1.861-0.543 3.73-0.807 5.568-0.807 8.6 0 16.518 5.638 19.054 14.3 0 0 27.662 94.86 27.794 95.294 3.552 12.206-6.39 25.413-19.062 25.413v0z" />
 <glyph unicode="&#xe915;" glyph-name="icon-add" d="M512 960c-282.785 0-512-229.215-512-512s229.215-512 512-512c282.785 0 512 229.249 512 512s-229.215 512-512 512zM512 0c-247.425 0-448 200.575-448 448s200.575 448 448 448c247.425 0 448-200.575 448-448s-200.575-448-448-448zM704 480h-160v160c0 17.664-14.336 32-32 32s-32-14.336-32-32v-160h-160c-17.664 0-32-14.336-32-32s14.336-32 32-32h160v-160c0-17.664 14.336-32 32-32s32 14.336 32 32v160h160c17.664 0 32 14.336 32 32s-14.336 32-32 32z" />
 <glyph unicode="&#xe952;" glyph-name="icon-archive-sm" d="M943.405 684.258h-864.783c-10.653 0-19.867-3.887-27.644-11.668-7.781-7.777-11.668-16.991-11.668-27.637v-589.626c0-10.644 3.887-19.863 11.668-27.637 7.777-7.781 16.991-11.677 27.644-11.677h864.783c10.647 0 19.854 3.896 27.637 11.677 7.775 7.773 11.662 16.991 11.662 27.637v589.626c0 10.653-3.872 19.858-11.662 27.637-7.775 7.781-16.991 11.668-27.637 11.668zM617.255 499.387c-7.773-7.779-16.991-11.668-27.637-11.668h-157.233c-10.64 0-19.854 3.892-27.637 11.668-7.777 7.781-11.668 16.991-11.668 27.644 0 10.644 3.892 19.858 11.668 27.637 7.781 7.781 16.995 11.673 27.637 11.673h157.249c10.638 0 19.85-3.892 27.637-11.673 7.775-7.777 11.662-16.991 11.662-27.637 0-10.651-3.896-19.863-11.677-27.644zM1010.357 947.749c-7.783 7.781-16.991 11.668-27.639 11.668h-943.409c-10.644 0-19.858-3.887-27.637-11.668-7.779-7.777-11.671-16.991-11.671-27.637v-157.233c0-10.644 3.892-19.854 11.673-27.637 7.779-7.781 16.991-11.668 27.637-11.668h943.394c10.644 0 19.863 3.887 27.652 11.668 7.773 7.781 11.66 16.991 11.66 27.637v157.233c0 10.653-3.887 19.86-11.66 27.637z" />
 <glyph unicode="&#xe953;" glyph-name="icon-btn-card-config" d="M971.283 561.778h-95.801c-15.398 0-28.084 8.476-33.982 22.699s-2.901 29.203 7.964 40.088l67.736 67.717c9.956 9.956 15.436 23.211 15.436 37.281 0 14.089-5.48 27.326-15.436 37.3l-86.338 86.338c-19.911 19.911-54.632 19.949-74.581 0l-67.717-67.717c-10.885-10.866-25.903-13.9-40.088-7.983-14.222 5.897-22.699 18.584-22.699 33.982v95.801c0 29.070-23.647 52.717-52.717 52.717h-122.121c-29.070 0-52.717-23.647-52.717-52.717v-95.801c0-15.398-8.476-28.084-22.699-33.982-14.184-5.935-29.203-2.882-40.088 7.983l-67.717 67.717c-19.949 19.949-54.67 19.911-74.581 0l-86.338-86.338c-9.956-9.956-15.436-23.211-15.436-37.3 0-14.071 5.48-27.307 15.436-37.281l67.736-67.717c10.866-10.885 13.843-25.865 7.964-40.088s-18.584-22.699-33.982-22.699h-95.801c-29.070 0-52.717-23.647-52.717-52.717v-122.103c0-29.089 23.647-52.736 52.717-52.736h95.801c15.398 0 28.084-8.476 33.982-22.699s2.901-29.203-7.964-40.088l-67.736-67.717c-9.956-9.956-15.436-23.211-15.436-37.281 0-14.089 5.48-27.326 15.436-37.3l86.338-86.338c19.93-19.93 54.632-19.968 74.581 0l67.717 67.736c10.885 10.866 25.847 13.862 40.088 7.964 14.222-5.897 22.699-18.584 22.699-33.982v-95.801c0-29.070 23.647-52.717 52.717-52.717h122.103c29.070 0 52.717 23.647 52.717 52.717v95.801c0 15.398 8.476 28.084 22.699 33.982 14.241 5.916 29.203 2.901 40.088-7.964l67.717-67.736c19.949-19.949 54.67-19.911 74.581 0l86.338 86.338c9.956 9.956 15.436 23.211 15.436 37.3 0 14.071-5.48 27.307-15.436 37.281l-67.736 67.717c-10.866 10.885-13.843 25.865-7.964 40.088s18.603 22.699 34.001 22.699h95.801c29.070 0 52.717 23.647 52.717 52.717v122.121c0 29.070-23.647 52.717-52.717 52.717zM986.074 386.939c0-8.154-6.637-14.791-14.791-14.791h-95.801c-30.796 0-57.249-17.673-69.025-46.118-11.795-28.444-5.594-59.657 16.194-81.427l67.736-67.717c5.784-5.784 5.784-15.17 0-20.935l-86.338-86.338c-5.765-5.765-15.151-5.803-20.935 0l-67.717 67.736c-21.788 21.788-52.983 27.951-81.427 16.194-28.444-11.776-46.118-38.229-46.118-69.025v-95.801c0-8.154-6.637-14.791-14.791-14.791h-122.121c-8.154 0-14.791 6.637-14.791 14.791v95.801c0 30.796-17.673 57.249-46.118 69.025-9.538 3.963-19.361 5.897-29.070 5.897-19.228 0-37.869-7.585-52.357-22.073l-67.717-67.736c-5.803-5.803-15.189-5.765-20.935 0l-86.338 86.338c-5.784 5.784-5.784 15.17 0 20.935l67.736 67.717c21.769 21.769 27.989 52.983 16.194 81.427-11.776 28.425-38.229 46.099-69.025 46.099h-95.801c-8.154 0-14.791 6.637-14.791 14.791v122.121c0 8.154 6.637 14.791 14.791 14.791h95.801c30.796 0 57.249 17.673 69.025 46.118 11.795 28.444 5.594 59.657-16.194 81.427l-67.736 67.717c-5.784 5.784-5.784 15.17 0 20.935l86.338 86.338c5.765 5.784 15.151 5.784 20.935 0l67.717-67.717c21.751-21.751 52.945-27.989 81.427-16.194 28.444 11.757 46.118 38.21 46.118 69.006v95.801c0 8.154 6.637 14.791 14.791 14.791h122.103c8.173 0 14.81-6.637 14.81-14.791v-95.801c0-30.796 17.673-57.249 46.118-69.025 28.482-11.795 59.657-5.575 81.427 16.194l67.717 67.717c5.803 5.784 15.189 5.784 20.935 0l86.338-86.338c5.784-5.784 5.784-15.17 0-20.935l-67.736-67.717c-21.769-21.769-27.989-52.983-16.194-81.427 11.776-28.444 38.229-46.118 69.025-46.118h95.801c8.154 0.019 14.791-6.618 14.791-14.772v-122.121zM512 618.667c-94.113 0-170.667-76.553-170.667-170.667s76.553-170.667 170.667-170.667c94.113 0 170.667 76.553 170.667 170.667s-76.553 170.667-170.667 170.667zM512 315.259c-73.178 0-132.741 59.563-132.741 132.741s59.563 132.741 132.741 132.741c73.178 0 132.741-59.563 132.741-132.741s-59.563-132.741-132.741-132.741z" />
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
index ea6de579c..84ebbe486 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
index 5cb900050..27c38068e 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
diff --git a/cds-ui/designer-client/src/assets/icomoon/style.css b/cds-ui/designer-client/src/assets/icomoon/style.css
index 130115635..9b17c06f9 100755
--- a/cds-ui/designer-client/src/assets/icomoon/style.css
+++ b/cds-ui/designer-client/src/assets/icomoon/style.css
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?pqs8r8');
-  src:  url('fonts/icomoon.eot?pqs8r8#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?pqs8r8') format('truetype'),
-    url('fonts/icomoon.woff?pqs8r8') format('woff'),
-    url('fonts/icomoon.svg?pqs8r8#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?pg9o1c');
+  src:  url('fonts/icomoon.eot?pg9o1c#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?pg9o1c') format('truetype'),
+    url('fonts/icomoon.woff?pg9o1c') format('woff'),
+    url('fonts/icomoon.svg?pg9o1c#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -35,6 +35,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-autoMap:before {
+  content: "\e90a";
+}
 .icon-get_started:before {
   content: "\e908";
 }
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 1ea1616c9..2d7e23094 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -18,6 +18,9 @@ body{
   transition: 0.3s !important;
 }
 /*Bootstrap*/
+.custom-control-input:checked ~ .custom-control-label::before {
+  border-color: transparent !important;
+}
 .btn-outline-danger{
   background: #fff !important;
   border: solid 1px #ECEDF2 !important;
@@ -1926,6 +1929,7 @@ ul.package-contributers{
   color: #1B3E6F;
   content: attr(data-tooltip);
   font-size: 12px;
+  font-weight: bold !important;
   line-height: 1.2;
   border-radius: 3px;
 }
@@ -2082,22 +2086,26 @@ ul.package-contributers{
   color:#1B3E6F;
   background-color: #C3CDDB !important;
   border: solid 1px #C3CDDB;
-  border-radius: 3px !important;
-  border-top-left-radius: 0 !important;
+  border-radius: 1px !important;
+  /* border-top-left-radius: 0 !important; */
   font-size: 12px;
   opacity: 1.0 !important;
 } 
 
-.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
+.bs-tooltip-auto[x-placement^=top] .arrow::before, 
+.bs-tooltip-top .arrow::before {
   border-top-color: #C3CDDB !important;
 }
-.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
+.bs-tooltip-auto[x-placement^=right] .arrow::before, 
+.bs-tooltip-right .arrow::before {
   border-right-color: #C3CDDB !important;
 }
-.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
+.bs-tooltip-auto[x-placement^=bottom] .arrow::before, 
+.bs-tooltip-bottom .arrow::before {
   border-bottom-color: #C3CDDB !important;
 }
-.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
+.bs-tooltip-auto[x-placement^=left] .arrow::before, 
+.bs-tooltip-left .arrow::before {
   border-left-color: #C3CDDB !important;
 }
 
@@ -3009,6 +3017,36 @@ padding: 0 10px 0 0;
 .mapping-source-load.hover-disable:hover i{
   background: transparent;
 }
+.mapping-editBar{
+  margin-bottom: 1rem;
+}
+.mapping-editBar .custom-checkbox,
+.mapping-editBar .btn{
+  margin: 0 4px !important;
+  padding: 9px !important;
+  width: 36px;
+  height: 36px;
+  background: #F4F9FE;
+  border-radius: 50% !important;
+  text-align: center;
+  line-height: 14px;
+}
+.mapping-editBar .custom-checkbox{
+  margin-left: 0 !important;
+}
+.mapping-editBar .custom-control-label{
+  top: -2px;
+  left: 16px;
+}
+.mapping-editBar .btn i{
+  color: #1B3E6F;
+  font-size: 18px;
+  opacity: .5;
+}
+.mapping-editBar .custom-checkbox:hover,
+.mapping-editBar .btn:hover i{
+  opacity: 1;
+}
 .template-mapping-list{
   background: #F4F9FE;
   border: 1px solid #E9F3FF;
@@ -3172,8 +3210,8 @@ margin-right: 5px;
   font-size: 13px;
 }
 .template-mapping-action .btn-primary{
-  background:#5DBDBA !important ;
-  border-color:#5DBDBA !important ;
+  background:#66BB00 !important ;
+  border-color:#66BB00 !important ;
   color: #fff !important ;
 }
 .template-mapping-action .btn-outline-secondary{