.page-wrapper {
  .commonTableElements {
    .table {
      display: table;
      width: 100%;
      text-align: center;

      @media (max-width: 500px) {
        text-align: left;
      }

      .project_name-cell {
        text-align: left;
      }

      &.left,
      .left {
        text-align: left !important;
      }

      &.red,
      .red {
        color: var(--Red);
      }

      .trigger {
        display: inline-flex;
        align-items: center;
        cursor: pointer;

        svg {
          transition: 0.2s;
        }

        &.open {
          svg {
            transform: rotate(180deg);
          }
        }
      }
    }

    .table--p-present {
      .table__cell {
        border-bottom: 1px solid var(--Stroke);
        padding: 10px 5px;
        color: var(--Main1);
        vertical-align: middle;
        text-align: center;
        display: table-cell;
        word-break: keep-all;

        @media (max-width: 768px) {
          display: none;
        }

        &:last-child {
          width: 10%;

          @media (max-width: 768px) {
            display: none;
          }
        }

        a {
          color: var(--Main2);
          transition: 0.2s;

          &:hover {
            color: var(--Subsidiary);
          }
        }

        &-hidden {
          display: none;
          border: 1px solid var(--Stroke);
          padding: 10px;

          @media (max-width: 768px) {
            display: block;
            margin-bottom: 10px;
          }
        }

        &.UserInvitationStatus {
          &:nth-child(1) {
            width: 54px !important;
          }
        }

        &.project_name-cell {
          word-break: break-word;
          text-align: center;

          span {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -moz-box;
            -moz-box-orient: vertical;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-clamp: 2;
            box-orient: vertical;
          }
        }

        &.red {
          color: var(--Red);
        }

        &.clickable {
          cursor: pointer;
        }
      }

      .table__row {
        display: table-row;
        transition: 0.2s;

        &:nth-child(1) {
          @media (max-width: 768px) {
            display: none;
          }
        }

        &.disabled {
          * {
            color: var(--Stroke) !important;
          }
        }

        &:not(.header) {
          .table__cell {
            word-break: break-word;
          }
        }

        &--header,
        &.header {
          background: var(--Bg2);
          min-height: 40px;

          .table__cell {
            border: none !important;
            color: var(--Subsidiary) !important;
            font-weight: bold;
            min-height: 40px;

            &:first-child {
              border-radius: 4px 0 0 4px;
            }

            &:last-child {
              border-radius: 0 4px 4px 0;
            }
          }
        }
      }

      .table__row_group {
        display: table-row-group;
        transition: 0.2s;

        .table__cell {
          word-break: break-word;
        }

        .table__row {
          &:first-child {
            .table__cell {
              font-weight: bold;
            }
          }
        }
      }

      .background-grey {
        background: var(--Disabled);
      }

      .toggle-group-trigger {
        svg {
          transition: 0.2s;
        }

        &.open {
          svg {
            transform: rotate(180deg);
          }
        }
      }
    }

    .project-present {
      &__table {
        .table--p-present {
          .table-cell {
            @media (max-width: 768px) {
              display: table-cell;
            }

            &-hidden {
              display: none;
              border: 1px solid var(--Stroke);
              padding: 10px;

              @media (max-width: 768px) {
                display: block;
                margin-bottom: 10px;
              }
            }
          }
        }
      }

      &__pagination {
        padding-bottom: 60px;
      }

      &__mob {
        &-title {
          font-size: 14px;
          opacity: 0.8;
          font-weight: 700;
          line-height: 1;
          padding: 15px 0 0;

          &--main {
            display: none;

            @media (max-width: 768px) {
              display: block;
            }
          }
        }
      }
    }

    .table-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--TooltipBG);
      border-radius: 4px;
      width: 32px;
      min-width: 32px;
      height: 32px;

      &.disabled {
        background: var(--Disabled);
      }
    }

    .btn-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: auto !important;
      height: auto !important;
      border: none !important;
      border-radius: 4px;
      margin: 0 4px;
      cursor: pointer;
    }
  }
}