@include exports('ng-grid') {
  .gridStyle {
    width: 100%;
    height: 100%;
    padding-right: 0;
    margin-top: 0;

    & > :nth-child(2) {
      overflow-x: hidden;
    }
  }

  .ngCellText,
  .ngHeaderText {
    &.colt0 {
      padding-left: 2rem;
    }
  }

  .colt0 {
    .ngCellText {
      padding-left: 2rem;
    }
  }

  .ngGrid {
    background-color: $md-white-100;
  }

  .ngGrid input[type='checkbox'] {
    padding: 0;
    margin: 0;
  }

  .ngGrid input {
    vertical-align: top;
  }

  .ngGrid.unselectable {
    user-select: none;
  }

  .ngViewport {
    width: 100% !important;
    overflow: hidden;
    font-family: $brand-font-cisco-TT-Light, sans-serif;
    font-size: 15px;
    color: $md-gray-90;
  }

  .ngViewport:focus {
    outline: none;
  }

  .ngCanvas {
    position: relative;
    width: 100% !important;
  }

  .ngVerticalBar {
    position: absolute;
    right: 0;
    width: 0;
  }

  .ngVerticalBarVisible {
    width: 1px;
    background-color: $md-gray-90;
    opacity: 0.1;
  }

  #testDataLength {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -100000;
  }

  .ngHeaderContainer {
    position: relative;
    overflow: hidden;
    font-family: $brand-font-cisco-TT-Light, sans-serif;
    font-size: 15px;
    font-weight: 750;
    color: $md-gray-90;
    background-color: $md-gray-10;
  }

  .ngHeaderCell {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: inherit;
  }

  .ngHeaderCell.pinned {
    z-index: 1;
  }

  .ngHeaderSortColumn {
    position: absolute;
    overflow: hidden;
  }

  .ngTopPanel {
    position: relative;
    z-index: 1;
    width: 100% !important;
    background-color: transparent;
    border-bottom: 1px solid $md-gray-10;
  }

  .ngSortButtonDown {
    position: absolute;
    top: 20px;
    right: 15px;
    left: auto;
    width: 0;
    height: 0;
    border-color: $gray transparent;
    border-style: solid;
    border-width: 0 5px 5px 5px;
  }

  .ngNoSort {
    cursor: default;
  }

  .ngHeaderButton {
    position: absolute;
    top: 8px;
    right: 2px;
    z-index: 1;
    width: 14px;
    height: 14px;
    cursor: pointer;
    background-color: $md-theme-20;
    border-radius: 50%;
  }

  .ngSortButtonUp {
    position: absolute;
    top: 20px;
    right: 15px;
    left: auto;
    width: 0;
    height: 0;
    border-color: $gray transparent;
    border-style: solid;
    border-width: 5px 5px 0 5px;
  }

  .ngHeaderScroller {
    position: absolute;
    background-color: inherit;
  }

  .ngSortPriority {
    position: absolute;
    top: -5px;
    left: 1px;
    font-size: 6pt;
    font-weight: 750;
  }

  .ngHeaderGrip {
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    background-color: transparent;
  }

  .ngHeaderText {
    padding: 10px 30px 10px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .ngHeaderButtonArrow {
    position: absolute;
    top: 4px;
    left: 3px;
    width: 0;
    height: 0;
    border-color: $md-gray-30 transparent transparent transparent;
    border-style: solid;
    border-width: 6.5px 4.5px 0 4.5px;
  }

  .ngPinnedIcon {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAmElEQVQoU33PQapBURjA8UtkwJuaWYGSgfQWYBMvczPmTCzAAGVuaA228BZhRCkDGSmE31FucuRfvzq3vr5zT/JSjSU7DsypEPXDkDVn2hSIytJhw4kWGaLCxgHh2gt/RBuLzNhz5caWPjnSqqw4EraFfwznf8qklWjwy4IRTerkiQoPGtPl40OehcEJvcfXl8LglLfBJLkDcMgbgHlHhK8AAAAASUVORK5CYII=);
    background-repeat: no-repeat;
  }

  .ngUnPinnedIcon {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAlElEQVQoU33PPQrCQBRF4fFnI2KfZVi5ARvdgo1l6mwmkCJVOgluwd5OwUoDtnoOxAei8cLXTN7cvEl/skCNDCMPfsUPO5zQwOHIDEvYtMURHe6wOVLgigvOePRyeDkyR4ln7wZ//7XfFBu8B23+aDJjrHGAwza7hjtHJvDmHg7b7Bru7AMjK7Rw2ObBVHDY5oGk9AKQNB2zy8MBTgAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
  }

  .ngColMenu {
    position: absolute;
    top: 25px;
    right: 2px;
    z-index: 1;
    padding: 5px;
    background-color: transparent;
    border: 2px solid $md-gray-10;
    border-radius: 3px;
  }

  .ngColListCheckbox {
    position: relative;
    top: 4px;
    right: 3px;
  }

  .ngColList {
    margin-top: 2px;
    margin-left: 8px;
    list-style-type: none;
  }

  .ngColListItem {
    white-space: nowrap;
  }

  .ngMenuText {
    position: relative;
    top: 2px;
    left: 2px;
  }

  .ngGroupPanel {
    overflow: hidden;
    background-color: transparent;
    border-bottom: 1px solid $md-gray-10;
  }

  .ngGroupPanelDescription {
    margin-top: 5px;
    margin-left: 5px;
  }

  .ngGroupList {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  .ngAggHeader {
    position: absolute;
    border: none;
  }

  .ngGroupElement {
    float: left;
    width: 100%;
    height: 100%;
  }

  .ngGroupIcon {
    position: absolute;
    top: 2px;
    right: -2px;
    width: 15px;
    height: 15px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAEFJREFUKFNjoAhISkr+h2J5JDZODNXGwGBsbPwfhIGAA8bGh6HaGBiAGhxAGJmND4M1gQCSM0adCsVQbcPcqQwMALWDGyDvWPefAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
  }

  .ngGroupedByIcon {
    position: absolute;
    top: 2px;
    right: -2px;
    width: 15px;
    height: 15px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAElJREFUKFNjoAhISkr+R8LyaHwMDNXGwGBsbPwfhoGAA5mPDUO1oWpE52PDYE0gALTFAYbR+dgwWBMIoPlh1I9ADNU2NPzIwAAAFQYI9E4OLvEAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
  }

  .ngGroupName {
    float: left;
    padding: 3px 10px;
    margin-top: 2px;
    margin-left: 0;
    font-weight: 750;
    background-color: transparent;
    border: 1px solid $md-gray-10;
    border-radius: 3px;
  }

  .ngGroupArrow {
    float: right;
    width: 0;
    height: 0;
    margin-top: 10px;
    margin-right: 5px;
    margin-left: 5px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid $md-gray-10;
  }

  .ngGroupingNumber {
    position: absolute;
    top: -2px;
    right: -10px;
  }

  .ngAggArrowCollapsed {
    position: absolute;
    bottom: 10px;
    left: 8px;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent $md-gray-10;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
  }

  .ngGroupItem {
    float: left;
  }

  .ngGroupItem:first-child {
    margin-left: 2px;
  }

  .ngRemoveGroup {
    width: 5px;
    margin-top: -1px;
    margin-left: 5px;
    opacity: 0.4;
  }

  .ngRemoveGroup:hover {
    color: $text-color;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.7;
  }

  .ngAggArrowExpanded {
    position: absolute;
    bottom: 10px;
    left: 8px;
    width: 0;
    height: 0;
    border-color: transparent transparent $md-gray-30 transparent;
    border-style: solid;
    border-width: 0 0 9px 9px;
  }

  .ngAggregate {
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background-color: transparent;
    border-bottom: 1px solid $md-gray-10;
  }

  .ngAggregateText {
    position: absolute;
    top: 5px;
    left: 27px;
    line-height: 20px;
    white-space: nowrap;
  }

  .ngRow {
    position: absolute;
    width: 100% !important;
    border-bottom: 1px solid $md-gray-10;

    &.odd {
      background-color: transparent;
    }

    &.even {
      background-color: transparent;
    }

    &:hover {
      background-color: $md-theme-20;
    }

    &.selected {
      color: $md-white-100;
      background-color: $md-theme-50;
      transition: none;
    }
  }

  .ngCell {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
    background-color: inherit;
  }

  .ngCell.pinned {
    z-index: 1;
  }

  .ngCellText {
    padding: 10px 20px 10px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .ngSelectionCell {
    margin-top: 9px;
    margin-left: 6px;
  }

  .ngSelectionHeader {
    position: absolute;
    top: 11px;
    left: 6px;
  }

  .ngCellElement:focus {
    background-color: $md-gray-90;
    outline: 0;
  }

  .ngRow.canSelect {
    cursor: pointer;
  }

  .ngSelectionCheckbox {
    margin-top: 9px;
    margin-left: 6px;
  }

  .ngFooterPanel {
    position: relative;
    padding: 0;
    background-color: transparent;
    border-top: 1px solid $md-gray-10;
  }

  .nglabel {
    display: block;
    float: left;
    padding-right: 5px;
    font-weight: 750;
  }

  .ngTotalSelectContainer {
    float: left;
    margin: 5px;
    margin-top: 7px;
  }

  .ngFooterSelectedItems {
    padding: 2px;
  }

  .ngFooterTotalItems.ngnoMultiSelect {
    padding: 0 !important;
  }

  .ngGridMaxPagesNumber {
    vertical-align: middle;
  }

  .ngPagerFirstBar {
    width: 10px;
    height: 12px;
    margin-top: -6px;
    margin-left: -3px;
    border-left: 2px solid $md-gray-10;
  }

  .ngPagerButton {
    height: 25px;
    min-width: 26px;
  }

  .ngPagerFirstTriangle {
    width: 0;
    height: 0;
    margin-left: 2px;
    border-color: transparent $md-gray-30 transparent transparent;
    border-style: solid;
    border-width: 5px 8.7px 5px 0;
  }

  .ngPagerNextTriangle {
    margin-left: 1px;
  }

  .ngPagerPrevTriangle {
    margin-left: 0;
  }

  .ngPagerLastTriangle {
    width: 0;
    height: 0;
    margin-left: -1px;
    border-color: transparent transparent transparent $md-gray-10;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
  }

  .ngPagerLastBar {
    width: 10px;
    height: 12px;
    margin-top: -6px;
    margin-left: 1px;
    border-left: 2px solid $md-gray-10;
  }

  .ngFooterTotalItems {
    padding: 2px;
  }

  .ngCell {
    .user-img {
      width: 35px;
      height: 35px;
      margin: 4px 5px 4px 30px;

      .icon {
        bottom: -5px;
        font-size: 30px;
        line-height: 35px;
      }
    }

    .dropdown-menu {
      top: 70%;
      right: 30px;
      left: auto;
    }

    .btn-icon {
      width: 100%;
      color: inherit;
      text-align: right;
      background: none;
      border: none;
      box-shadow: none;

      &:hover,
      &:focus,
      &.active:focus {
        border: none;
        outline: 0;
        box-shadow: none;
      }
    }

    .btn-actions {
      float: right;
      padding: 15px 30px;
      text-align: center;
    }
  }
}