.members-page {
  width: 100%;
  .container {
    width: 100%;

    .create-member {
      width: 40%;
    }

    .members-list {
      display: inline-block;
      width: 60%;
    }

    .member-detail {
      display: inline-block;
      width: 40%;
      padding-left: 30px;
    }
  }

  .panel {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    overflow-x: auto;
    .pagination {
      table {
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid #dee2e6;
        width: 100%;
        th, td {
          border: 1px solid #dee2e6;
          border-right-width: 0;
        }
        thead > tr > th {
          color: #343a40;
          border-bottom: 1px solid #e9ecef;
          border-top: 0;
          font-weight: 700;
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          &:first-child {
            border-left-width: 0;
          }
        }
        tbody > tr {
          td {
            border-top-width: 0;
            padding: .75rem;
            vertical-align: top;
            &:first-child {
              border-left-width: 0;
            }
            &.text-center {
              text-align: center;
            }
            &.actions {
              text-align: center;
              button {
                display: inline-block;
                margin: 0 5px 0 5px;
              }
            }
          }
          &.selected td {
            background-color: #d0e6fd;
            color: #043364;
          }
          &:last-child > td {
            border-bottom-width: 0
          }
        }
      }
    }
  }
}


@media (max-width: 992px) {
  .members-page .container .create-member,
  .members-page .container .members-list,
  .members-page .container .member-detail {
    width: 100%;
    padding: 0;
    margin-bottom: 30px;
    .pagination table td.actions button {
      margin: 5px 0 !important;
    }
  }
}