hubl/src/styles/layout/circle/circle-edit.scss

#circle-edit,
#admin-circle-list {

  .table-header {
    background: $color-228-25-79;
    color: white;
    display: flex;
    font-size: 1.6rem;
    font-weight: 600;
    justify-content: space-around;
    text-align: center;

    >*{
      border-right: 1px solid white;
      flex: 1;
      padding: 1rem;
      width: 50%;
    }

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

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

  .table-body.test>div>sib-display>div {
    border-bottom: 1px solid $color-228-25-79;
    display: flex;
    justify-content: space-around;

    >* {
      flex: 1;
      border-left: 1px solid $color-228-25-79;
      text-align: center;
    }

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

    >sib-display-value[name='name'] {
      color: #3C3F57;
      font-weight: 600;
    }

    >sib-set-default[name='own'] {
      display: grid;
      grid-column-gap: 1.6rem;
      grid-template-columns: 7vh auto;
      grid-template-rows: repeat(2, 5.2vh);

      >[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'] {
          font-weight: 600;
          margin-right: 1rem;
        }
      }

      >[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: '@';
            
          }
        }
      }
    }
  }

  .table-body div team-template-edit {
    display: flex;
    justify-content: space-between;

    >* {
      border-bottom: 1px solid $color-228-25-79;
      flex: 1;
      width: 50%;
    }

    sib-display {
      border-left: 1px solid $color-228-25-79;
      padding: 0 2.2rem;
    }

    sib-ac-checker {
      align-items: center;
      border-left: 1px solid $color-228-25-79;
      border-right: 1px solid $color-228-25-79;
      display: flex;
      justify-content: flex-end;
      padding: 2.7rem 2.2rem;

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

  .member-select.color {

    .ss-main {
      color: $color-233-18-29;
    }
  }

  sib-multiple[widget='team-template-edit'] {

    label {
      display: none;
    }

    >div>team-template-edit>sib-display>div {
      display: grid;
      grid-column-gap: 1.6rem;
      grid-template-columns: 7vh auto;
      grid-template-rows: repeat(2, 5.2vh);

      >[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'] {
          font-weight: 600;
          margin-right: 1rem;
        }

        sib-multiple {
          display: flex;

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

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

        >[name$='profile.city']:not(:empty) {
          @include mdi('atom');
          align-items: center;
          display: flex;

          &::before {
            color: $color-43-100-50;
            margin-right: 0.50rem;
          }
        }
      }
    }
  }
}