
.mapbender-element-result-table {

  > .dataTables_wrapper {
    position: relative;

    > table[role="grid"] {
      > thead > tr > th {
        background-color: $buttonFirstColor;
        cursor: pointer;
        user-select: none;
        border: 1px solid $buttonSecondColor;
        color: #ffffff;
        font-weight: normal;
        font-size: $uiFontSize;
        padding: 3px 15px 3px 6px;

        @include transition(all, 0.3s, ease-in-out);
        &:focus {
          box-shadow: 0 0 5px $buttonFirstActiveColor;
        }
        &:hover{
          background-color: $buttonSecondColor;
        }

        &.sorting_asc, &.sorting_desc {
          background-color: $buttonFirstActiveColor;
        }
        &.buttons.sorting_disabled {
          cursor: default;
        }
        &:after {
          clear: both;
          display: inline-block;
          float: right;
          width: 0px;
          white-space: normal;
          font-family: FontAwesome;
        }
        &.sorting:after {
          content: "\f0dc";
        }
        &.sorting_asc:after {
          content: "\f160";
        }
        &.sorting_desc:after {
          content: "\f161";
        }
      }
      > tbody > tr {
        cursor: pointer;

        &.odd {
          background-color: #F8F8F8;
        }

        &.even {
          background-color: #EBEBEB;;
        }

        &.warning{
          background-color: lighten($selectColor,10%);
        }

        &:hover{
          background-color: $selectColor;
        }
        > td {
          background: transparent;
          vertical-align: middle;
          padding-top: 4px;
          padding-bottom: 4px;

          &.selection {
            vertical-align: middle;
          }

          &.buttons {
            text-align: center;
            padding: 0px;
            > div.button-navigation {
              white-space: nowrap;
              float: right;
              padding: 0px;
              transition: opacity 0.5s ease-in-out 0s;
              > button {
                margin-right: -1px;
                font-size: 0;
                padding: 0px;
                &:first-child {
                  margin-left: 0px;
                }
                &:before {
                  display: inline-block;
                  font-size: $uiFontSize;
                  vertical-align: bottom;
                  padding: 3px 3px 2px 4px;
                }
              }
            }
          }

          font-size: $uiFontSize;
          &.selection {
            padding-top: 0;
            > input[type="checkbox"] {
              margin: 0 auto;
              line-height: auto;
              vertical-align: middle;
            }
          }

          cursor: default;
        }
      }
      margin-bottom: 0px;
    }

    > .dataTables_info {
      font-size: $uiFontSize;
      margin-top: 8px;
      text-align: center;
      border-radius: 7px;
      margin-bottom: 10px;
      padding: 5px;
      border: 1px solid #6FB536;
      right: 0;
    }

    > .paging_simple_numbers {

      text-align: left;

      > span {
        float: left;
        display: inline-block;
        a.paginate_button {
          margin-left: -1px;
        }
        > span {
          padding-right: 5px;
        }
      }

      a {
//        @extend .btn;
        @extend .button;
        margin-right: 0px;
        display: inline-block;

        &.previous {
          float: left;
          font-size: 0;
          &:before{
            @include buttonFAIcon("\f177");
          }
        }

        &.next {
          margin-right: 0;
          float: right;
          font-size: 0;
          &:after{
            @include buttonFAIcon("\f178");
          }
        }

        &.current {
          background-color: $buttonFirstActiveColor !important;
        }

        &.disabled {
          opacity: 0.7;
          display: none;
        }
      }
    }
  }
}
