#circle-information,
#circle-edit,
#admin-circle-list,
#admin-circle-create,
#admin-project-list,
#admin-project-create {

  .content-box__info {
    @extend %padding-block;
    display: flex;
    flex-direction: column;

    .backlink {
      text-align: right;
      display: block;
    }
  }

  .table {

    .table-header {
      display: flex;
      flex: 1;
      font-size: 1.6rem;
      font-weight: 600;
      justify-content: space-around;
      text-align: center;

      &.grey-color {
        background: $color-228-25-79;
        color: white;
      }

      >* {
        border-right: 1px solid white;
        flex: 1;
        padding: 2.1rem 0;
        text-align: center;
      }

      >*:last-of-type {
        border-right: 1px solid $color-228-25-79;
      }
    }

    .table-body {

      >div:first-of-type>sib-display>div,
      team-template-edit[name='members'] {
        display: flex;
        border-left: 1px solid $color-228-25-79;
      }
      
      .border {
        border-bottom: 1px solid $color-228-25-79;
        border-right: 1px solid $color-228-25-79;
      }
      
      .cell {
        text-align: center;
        word-wrap: break-word;
      }
      
      .w25 {
        width: 25%;
      }
      
      .w33 {
        width: 33.3333%;
      }

      .w50 {
        width: 50%;
      }

      .hashtag::before {
        content: '#';
      }
    }

    .cell-with-name {
      color: $color-233-18-29;
      font-weight: 600;
      padding-top: 2.5rem;
    }

    .cell-with-id-card>div, /* for the table in circle-edit */
    .cell-with-id-card>sib-display>div,
    project-captain[name='user']>sib-display>div { /* for the captain's cell in project-admin */
      display: grid;
      grid-column-gap: 1.6rem;
      grid-template-columns: 7vh auto;
      grid-template-rows: repeat(2, 5.2vh);
      padding: 0 2.2rem;

      >[name$='account.picture'] {
        align-items: center;
        align-self: center;
        background-color: $color-213-20-91;
        border-radius: 50%;
        display: flex;
        grid-column: 1 / span 1;
        grid-row: 1 / span 2;
        height: 7vh;
        justify-content: center;
        overflow: hidden;
        position: relative;
        width: 7vh;

        img {
          background-color: white;
          height: 100%;
          left: 0;
          object-fit: cover;
          position: absolute;
          top: 0;
          width: 100%;
        }

        object {
          height: 45%;
          width: 45%;
        }
      }

      >[name='sup'] {
        align-self: end;
        display: flex;
        grid-column: 2 / span 1;
        grid-row: 1 / span 1;
        margin-bottom: 0.50rem;

        [name$='name'] {
          color: #7A7F85;
          font-weight: 600;
          margin-right: 1rem;
        }

        sib-multiple>div {
          display: flex;

          [name='groups'] {
            @extend %tag-role;
          }
        }
      }

      >[name='sub'] {
        align-self: start;
        grid-column: 2 / span 1;
        grid-row: 2 / span 1;
        margin-top: 0.50rem;

        >[name$='username']:not(:empty) {
          align-items: center;
          display: flex;

          &::before {
            content: '@';

          }
        }
      }
    }

    .cell-with-buttons {
      align-items: center;
      display: flex;
      justify-content: center;
      
      [name='button'] {
        
        input[type='submit'] {
          @extend .button,
          .text-bold,
          .text-uppercase,
          .reversed,
          .button-blue,
          .bordered,
          .btn-margin-left;
        }
      }
    }

    sib-ac-checker {
      align-items: center;
      display: flex;
      justify-content: center;
    }
  }
}