.user {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .userOperation {
    display: flex;
    justify-content: flex-end;
  }

  .userBtns {
    padding: 10px 0 20px;
    margin: 0 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .userBtnsLeft {
      display: flex;
      align-items: center;

      >button {
        margin-right: 22px;
      }

      .userBtnsDel {
        background-color: #3A1457;
        box-shadow: none;
        color: white;

        &:hover {
          background-color: lighten(#3A1457, 5%) !important;
          color: white;
        }

        &:active {
          background-color: darken(#3A1457, 5%) !important;
          color: white;
        }
      }
    }

    .userBtnsRight {
      display: flex;
      align-items: center;

      >button {
        margin-left: 20px;
      }
    }
  }

  .userContent {
    flex-grow: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;

    .userContentTable {
      position: absolute;
      width: calc(100% - 40px);
      flex-grow: 1;
      top: 20px;
      height: 76vh;
    }

    .userContentPagination {
      position: absolute;
      bottom: 20px;
      width: calc(100% - 40px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;

      >span {
        color: #8B8787;
        font-size: 16px;
      }
    }
  }
}

.addUserModal {
  >div {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    >span {
      flex-shrink: 0;
      color: #EEEEEE;
      width: 70px;
      text-align: right;
    }
  }
}

.signInUserModal {
  max-height: 60vh;
  display: flex;
  flex-direction: column;

  >div:nth-child(1) {
    flex-grow: 1;
    overflow-y: auto;
  }

  >div:nth-child(2) {
    flex-shrink: 0;
  }
}