<nav class="navbar navbar-expand-lg navbar-light  custom_style" style="z-index: 20;">

  <img src={{this.logo}} style="width:140px;padding-left: 10px;height: 50px;">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- <div [ngStyle]="{'background-color': style1 ? 'red' : (style2 ? 'blue' : null) }"> style="flex: 1;text-align: center;padding-left: 70px;"paddingLeft-->
  <div class="collapse navbar-collapse list_style" id="navbarSupportedContent">
    <div [ngClass]="paddingLeft?'changePadding1':'changePadding'">
     
    </div>
  </div>
  <div style=" float: left; padding-top: 10px; ">
    <p
      style="margin-top: 0px;margin-bottom:0 ;color: white;margin-left: 20px;border-radius: 20px;background: #fff;color: #212529; font-size: 14px;padding: 0px 5px;font-weight: 600;">
      {{fs}}</p>
  </div>
  <div style="width: 80px; float: right;">
    <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
      <div class="row" style="margin: 0; margin-bottom: 10px;">
        <div class="col-3" style="padding: 0;">
          <div style="text-align: center;">
            <img *ngIf="!ppSHOW" src="../../assets/userAccount.png" alt="UserImage" height="60" style="width: 100%;">
            <img *ngIf="ppSHOW" style="border-radius: 50%;" src="{{profilePic}}" alt="UserImage" height="60" width="60"
              crossorigin="anonymous">
          </div>
        </div>
        <div class="col-9" style="padding-left: 10px !important;font-size: 18px;font-weight: 400;">
          <div><span>{{fs}}</span><span style="padding-left: 5px;">{{ls}}</span></div>
          <p style="margin-bottom: 0;">{{mb}}</p>
          <div *ngIf="availaPointsFlag === true" title="Available Points" style="font-size: 15px;">
            <span> <i class="fas fa-coins" style="color: #cf6b05;font-size: 18px;"></i></span>
            <span style="margin-left: 15px;font-weight: 600;color: #656565;">{{pointCount}}</span>
          </div>
          <p>{{or}}</p>
        </div>
      </div>
      <div class="row" style="margin: 0;">
        <div class="col-6">
          <button type="reset" md-raised-button class="btn btn-default" style="background: #e2e2e2;"
            (click)="myaccount('myaccount')">{{'My Account' | translate}}</button>
        </div>
        <div class="col-6">
          <button *ngIf="dealer" md-raised-button class="w3-button w3-red" (click)="mydealer('mydealer')">{{'Dealer Account' | translate}}</button>
          <button *ngIf="sup_admin" md-raised-button class="w3-button w3-red" (click)="super_Admin('mydealer')">{{'Admin Account' | translate}}</button>
          <button *ngIf="logoutbut" md-raised-button class="btn btn btn-success" style="color:white"
            (click)="logout()">{{'Log Out' | translate}}</button>
        </div>
      </div>
    </md-menu>
    <button md-icon-button [mdMenuTriggerFor]="appMenu" style="float:right;outline:none;padding-top: 6px;">
      <i class="fas fa-user" style=" color: white; font-size: 20px;"></i>
    </button>
    <!-- <app-notification></app-notification> -->
  </div>
  <!-- <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:11%; margin-top: 3%;padding-left:0%">
          <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
            <h5>&nbsp;&nbsp;{{fs}} {{ls}}&nbsp;&nbsp;</h5>
            <h5>&nbsp;&nbsp;{{mb}}</h5>
            <h5>&nbsp;&nbsp;{{or}}</h5>
            <br> &nbsp;
            <button  type="reset" class="btn btn-default" (click)="myaccount('myaccount')">My Account</button>
            &nbsp;
            <button *ngIf="dealer" class="w3-button w3-red" (click)="mydealer('mydealer')">Dealer Account</button> &nbsp;
            <button *ngIf="sup_admin" class="w3-button w3-red" (click)="super_Admin('mydealer')">Admin Account</button> &nbsp;    
            <button *ngIf="logoutbut" class="btn btn btn-success" (click)="logout()">&nbsp;&nbsp;&nbsp;Log
              Out&nbsp;&nbsp;&nbsp;</button> &nbsp;
          </md-menu>
          <button md-icon-button [mdMenuTriggerFor]="appMenu" style="float:right;outline:none">
            <img src="../../assets/image/us.jpg" height=24px>
          </button>
          <app-notification></app-notification>
        </ul> -->


</nav>