<div class="dropdown pb-lg-1 pb-md-1 pb-sm-0 pb-0" dropdown (onHidden)="updateSelections(allowSwitchView)" [insideClick]="true">
  <button id="dropdownLabel" class="dropdown-toggle btn btn-icon btn-link text-primary" dropdownToggle
    aria-controls="dropdownMenu">
    <i class="fa fa-md fa-table mr-1 mt-lg-0 mt-md-0 mt-sm-2 mt-2"></i>
    <span class="pl-1 d-lg-inline-flex d-md-inline-flex d-sm-none d-none">{{'COMMON.EDIT_LAYOUT' | translate }}</span>
  </button>
  <div id="dropdownMenu" *dropdownMenu class="dropdown-menu overflow-auto scrollbar py-0 pl-3"
    aria-labelledby="dropdownLabel">
    <span *ngFor="let item of (menuItems$ | async) as items; let i = index" class="dropdown-item pb-0">
      <div class="ml-2">
        <input class="form-check-input checkbox" type="checkbox" [checked]="item.isSelected"
          (change)="handleCheckbox(item)" value="item?.id" [id]="item?.id">
        <label class="form-check-label" [class.font-weight-bold]="item.isSelected" (click)="handleCheckbox(item)"
          for="item?.id">{{item?.label}}</label>
        <span class="float-right" *ngIf="item.isSelected">
          <i class="fas fa-arrow-up" (click)="moveItemUp(items, i)" aria-hidden="true"></i>
          <i class="pl-2 fas fa-arrow-down" (click)="moveItemDown(items, i)" aria-hidden="true"></i>
        </span>
      </div>
    </span>
    <div class="navbar border-0 p-0">
      <div class="custom-control custom-checkbox p-1">
        <label class="px-1" [ngClass]="!allowSwitchView ? 'active': 'inactive'">{{'COMMON.DEFAULT_VIEW' | translate
          }}</label>
        <label class="switch">
          <input type="checkbox" class="custom-control-input small" [id]="'select-all-' +allowSwitchView"
            [disabled]="isGuest" [checked]="allowSwitchView" (click)="switchView($event)">
          <span class="slider round"></span>
        </label>
        <label [ngClass]="isGuest? 'disabled': allowSwitchView? 'active': 'inactive'" class="px-1">{{'COMMON.MY_VIEW' |
          translate }}</label>
      </div>
      <div *ngIf="allowSwitchView" class="pr-2 py-1">
        <button class="btn btn-raised py-0 pl-0 pr-2" type="button" [ladda]="loading" data-style="zoom-in"
          data-spinner-color="black">
          <i class="fa fa-floppy-o fa-lg" (click)="saveUserView()" aria-hidden="true"></i>
        </button>
      </div>
    </div>
  </div>
</div>

./line-item-menu.component.scss

.dropdown-menu>span:hover {
  background-color: rgb(195, 230, 203);

  div.ml-2 {
    span.float-right {
      i.fas {
        color: rgb(0, 0, 0);
      }
    }
  }
}

i.fas {
  color: rgb(255, 255, 255);
}

.dropdown-menu {
  min-width: 15rem;
  max-height: 17rem;
}

button {
  font-size: medium;
}

.dropdown-menu {
   transform: translateX(-50%) !important;
  .dropdown-item {
    line-height: 1.6;
  }
}


  ::-webkit-scrollbar {
    width: 0.375rem !important;
    height: 0.375rem !important;
    background: #fff !important;
  }

  ::-webkit-scrollbar-thumb {
    background: #A8B2BB !important;
    border-radius: 0.25rem !important;
  }