/*#circle-information,
#circle-edit,
#admin-circle-list,
#admin-circle-create,
#project-edit,
#admin-project-list,
#admin-project-create,
#admin-users-list*/

[widget="hubl-team-template-edit"]>div {
  flex: 1;
}

.table-wrapper {
  overflow: auto;
  position: relative;
  width: 100%;
  z-index: 1;

  .table {
    border-collapse: collapse;
    display: table;
    overflow: auto;
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
  }

  .table-header {
    display: table-header-group;
    text-align: center;
    vertical-align: middle;

    &>div {
      display: table-cell;
      white-space: nowrap;
    }
  }

  .table-body {
    display: table-row-group;

    &>div {
      display: contents;

      &>sib-display {
        display: table-row;

        &>div {
          display: contents;

          /*&>* {
            display: table-cell;
            see L107
          }*/
        }
      }
    }
  }
}

/* Styles of the tables */

.table-wrapper {

  .table {

    .table-header {
      font-size: 1.6rem;
      font-weight: 600;

      &.grey-color {
        background: var(--color-table-header-background);
        color: var(--color-table-header-text);
      }

      >* {
        border-right: 1px solid var(--color-table-border);
        padding: 2.1rem 0;
        text-align: center;
      }

      >*:last-of-type {
        border-right: 1px solid --color-table-header-background;
      }
    }

    .table-body {
      border-left: 1px solid var(--color-table-border);
      border-right: 1px solid var(--color-table-border);
    }

    .table-body,
    .table-header {

      /*>div:first-of-type>sib-display>div,
      hubl-team-template-edit[name='members'] {
        display: flex;
        border-left: 1px solid var(--color-table-border);
      }*/

      .border {
        border-bottom: 1px solid var(--color-table-border);
        border-right: 1px solid var(--color-table-border);
      }

      .cell,
      [name^="cell-"] {
        /*text-align: center;
        word-wrap: break-word;
        white-space: nowrap;*/
        display: table-cell;
      }

      .w75 {
        width: 280px;
      }

      .w25 {
        width: 70px;
      }

      .w33 {
        width: 256px;
      }

      /*.w25 {
        width: 25%;
      }

      .w33 {
        width: 33.3333%;
      }

      .w50 {
        width: 50%;
      }

      .w66 {
        width: 66.6666%;
      }

      .w75 {
        width: 75%;
      }*/

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

    .cell-with-buttons {
      text-align: center;
      vertical-align: middle;

      [name='button'] {

        input[type='submit'] {
          @extend
          .button,
          .text-bold,
          .text-uppercase,
          .reversed,
          .button-secondary,
          .bordered,
          .btn-margin-left;
        }
      }
    }

    .cell-with-name {
      color: var(--color-secondary);
      font-weight: 600;
      text-align: center;
      vertical-align: middle;
    }

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

    .user-thumb>div/* for the table in circle-edit and captain's cell in project-admin */,
    [name='user-thumb'] {
      @extend %user-thumb__grid;
      padding: 0 2.2rem;

      >.user-thumb__picture {
        @extend .user-thumb__picture;
      }

      >[name='sup'] {
        @extend %user-thumb__grid-sup;
      }

      >[name='sub'] {
        @extend %user-thumb__grid-inf;
      }
    }

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

    /*.w75 {
      min-width: 250px;
    }

    .w25 {
      min-width: 70px;
    }*/

    /*sib-display[fields="cell-1(user-thumb(account.picture, sup(name), sub(username))), actions"] {
      &>div {
        >sib-set-default {
          min-width: 250px;
        }

        hubl-sib-action-custom {
          min-width: 70px;
        }
      }
    }*/
  }
}









.circle-join {
  position: relative;
  width: 181px;
  margin: 0 auto;
  min-width: 181px;

  input {
    height: 29px;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 102%;
    padding-left: 14px !important;
  }

  &.button.with-icon::before {
    margin-left: 6px;
  }
}

.circle-leave {
  position: relative;
  width: 30%;
  min-width: 30%;
}

.circle-leave>button {
  position: absolute;
  width: 106%;
  left: 1px;
  /* background: antiquewhite; */
  height: 29px;
  top: -1px;
  padding-left: 13px;
}

.circle-leave.button.with-icon::before {
  font-size: 1.6rem;
  margin-right: 2rem;
  margin-left: -50px;
}