Untitled

.table-responsive {
  border: 0;
  @media screen and (max-width: $screen-xs-max) {
    border: 1px solid $table-border-color;
  }
}

.table-scroll-wrapper {
  .table-responsive {
    max-height:200px;
    overflow-y: scroll;
  }
}

.competition-table {
  > thead,
  > tbody {
    > tr {
      > th,
      td {
        border-top: 0;
        border-bottom: 0;
        text-align: right;
        font-family: $open-sans-bold;
      }
      > td {
        height: 90px;
        font-size: 1.6rem;
        vertical-align: middle;

        @media screen and (max-width: $screen-xs) {
          font-size: 1rem;
        }
      }
    }
  }

  &.table-bordered {
    > thead,
    > tbody {
      > tr {
        > th,
        td {
          border: 1px solid $green-dark;
        }
      }
    }

    > thead {
      > tr {
        > th {
          border: 1px solid $white;

          &:first-child {
            border-left: 1px solid $green-dark;
          }
          &:last-child {
            border-right: 1px solid $green-dark;
          }
        }
      }
    }
  }
}

.table-breakdown {
  font-family: $font-family-open-sans-bold;
  border: 1px solid $table-border-color;

  thead {
    .table-box-head {
      text-align: center;
    }
    > tr {
      > th {
        text-align: center;
        font-size: 20px;
        background-color: $main-orange;
        color: $white;
        min-width: 100px;
        margin: 20px;
        @media screen and (max-width: $screen-xs) {
          font-size: 12px;
          min-width: 190px;
          max-width: 50px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  tbody {
    tr {
      td {
        vertical-align: middle !important;
        max-width: 500px;
        min-width: 90px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        @media screen and (max-width: $screen-xs) {
          text-align: center;
          white-space: normal !important;
          font-size: 12px;
          max-width: 100%;
          min-width: 100%;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;

          &:first-child {
            padding-left: 0;
          }
        }
        .table-box {
          text-align: center;
          font-size: 1.5rem;
          margin: 0;
          padding: 5px;
          @media screen and (max-width: $screen-xs) {
            padding: 0;
          }
          p {
            margin: 0;
          }
        }
        &.box-green {
          .count-up-wrapper {
            color: $brand-success;
          }
        }
        &.box-orange {
          .count-up-wrapper {
            color: $brand-danger;
          }
        }
        &.box-gray {
          .count-up-wrapper {
            color: $brand-warning;
          }
        }
        &.box-white {
          .count-up-wrapper {
            color: $white;
          }
        }
      }
    }
  }
}
.table-breakdown-error {
  font-family: $font-family-open-sans-bold;
  border: 1px solid $table-border-color;

  thead {
    .table-box-head {
      text-align: center;
    }
    > tr {
      > th {
        text-align: center;
        font-size: 24px;
        background-color: $table-background;
        color: $white;

        @media screen and (max-width: $screen-xs) {
          font-size: 12px;
          max-width: 50px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  tbody {
    tr {
      td {
        vertical-align: middle !important;
        @media screen and (max-width: $screen-xs) {
          text-align: center;
          white-space: normal !important;
          font-size: 12px;
          max-width: 50px;
          overflow: hidden;
          text-overflow: ellipsis;

          &:first-child {
            padding-left: 0;
          }
        }
        .table-box {
          text-align: center;
          font-size: 1.5rem;
          margin: 0;
          padding: 5px;
          @media screen and (max-width: $screen-xs) {
            padding: 0;
          }
          p {
            margin: 0;
          }
        }
        &.box-green {
          .count-up-wrapper {
            color: $brand-success;
          }
        }
        &.box-orange {
          .count-up-wrapper {
            color: $brand-danger;
          }
        }
        &.box-gray {
          .count-up-wrapper {
            color: $brand-warning;
          }
        }
        &.box-white {
          .count-up-wrapper {
            color: $white;
          }
        }
      }
    }
  }
}


.table-breakdown-header {
  color: $gray;
}
.table-breakdown-row-odd {
  background-color: $soft-main-orange;
  text-align: center;
  color: $white;
  &:hover {
    background-color: $soft-main-orange !important;
  }
}

.table-breakdown-row-even {
  background-color: $light-orange;
  text-align: center;
  color: $white;
  &:hover {
    background-color: $light-orange !important;
  }
}

.social-breakdown {
  height: 75;
  vertical-align: middle;
}
.competition-breakdown-padding {
  padding: 10px;
}
.table-row {
  color: $gray;
  text-align: center;
  &-odd {
    background-color: $snow;
  }
  &-even {
    background-color: $white;
  }
}

.page-users {
  color: $gray;

  &:hover {
    color: $gray !important;
  }
}


.rect-table-click{
  cursor: pointer;
}