.order-status-banner{
  padding: 0 rem-calc(10);

  ul:not(.dropdown-menu){

    li{
      padding: rem-calc(22) rem-calc(10);


      &.payment{

        i{
          margin-right: rem-calc(15);
          font-size: rem-calc(37);
          width: rem-calc(24);
          height: rem-calc(24);
          background-color: $color-white;
          border-radius: 50%;
          position: relative;

          &:before{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }

          &.icon-circle-check{
            color: $color-green-haze;
          }

          &.icon-circle-clock{
            color: $color-golden-grass;
          }

          &.icon-circle-warning{
            color: $color-pale-sky;
          }
        }
      }

      .payment-status-box{
        margin: 0;
        font-size: rem-calc(16);
        color: $color-outer-space;
        font-weight: 600;

        &.payment-info{
          margin-left: rem-calc(5);
          text-transform: lowercase;
        }

        .payment-status{
          margin: 0;
          margin-bottom: rem-calc(2);

          .payment-info {
            margin-left: rem-calc(4);
          }
        }
      }

      .payment-method{
        margin: 0;
        font-size: rem-calc(14);
        font-weight: 400;
        color: $color-bright-gray;
      }



      .onoffswitch{
        margin: 0 rem-calc(10);
      }
    }
  }

  .order-filters{
    @include breakpoint(md down){
      justify-content: center;
    }
  }

  .order-filters,
  .filter-group {
    @extend .flex-container;
    @extend .align-middle;

    padding-bottom: rem-calc(20);

    @include breakpoint(md){
      justify-content: flex-end;
      text-align: right;
      padding-bottom: 0;
    }

    .filter-control{
      padding: 0 rem-calc(5);
    }

    .filters{
      @extend .flex-container;
      @extend .align-middle;
      @extend .align-right;
    }

    .app-list{

      a{
        //@extend .btn-select;
      }
    }
  }

  &-paid{
    background-color: $color-frost;
    //box-shadow: 0 rem-calc(1) 0 0 #CAEAB7;
  }

  &-pending{
    background-color: $color-old-lace;
    //box-shadow: 0 rem-calc(1) 0 0 #F7E8C8;
  }

  &-canceled{
    background-color: $color-athens-gray;
    //box-shadow: 0 rem-calc(1) 0 0 #D1DAE3;
  }

  &-narrow{

    ul:not(.dropdown-menu) li{
      padding: rem-calc(28) rem-calc(10);

      .payment-status-box .payment-status{
        margin-bottom: 0;
      }
    }
  }

}