.role-wrapper {
  background: #fafafa;
  padding: 10px 0px 10px 24px;
}

.workflow-users {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial;

  .role-name {
    font-weight: bold;
  }

  .workflow-title {
    text-transform: capitalize;
    font-weight: bold;
    color: #4078c0;
  }

  .workflow-flex {
    display: flex;
  }

  .workflow-wrapper {
    display: flex;
    flex: 1;
    vertical-align: top;
    margin-left: -4px;
  }

  .workflow-box {
    background: #fff;
    border-radius: 3px;
    border: 1px #e5e5e5 solid !important;
    margin: 5px 30px 5px 0px;
    padding: 5px;
    position: relative;
    width: 100%;
    height: 100%;
  }

  .icon-allowed {
    color: #6cc644;
  }
  .icon-not-allowed {
    color: #ee0701;
  }

  .workflow-actif {
    color: #767676;

    &:before {
      content: "-";
      margin-right: 6px;
    }
  }
  .workflow-inactif {
    text-decoration: line-through;
    color: #e5e5e5;
    &:before {
      content: "-";
      margin-right: 6px;
    }
  }

  .icon-reject {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translate(-24px, -10px);
    padding: 2px;
  }
  .icon-submit {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translate(21px, 10px);
  }
}

.panel-login {
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0px;
}

.login-footer .pull-right {
  margin-top: 5px;
}

.btn-logout {
  margin-top: 20px;
}

.user-list {
  .table .fa {
    cursor: pointer;
  }

  table {
    margin-bottom: 0px;
  }

  table .form-group {
    margin-bottom: 0px;
  }

  .table>tbody>tr>td.no-border {
    border: 0px;
  }

  .fa-eye,
  .fa-eye-slash {
    width: 15px;
    height: 15px;
  }

  .fa-eye:hover:before,
  .fa-eye-slash:hover:before {
    display: none;
  }

  .fa-eye:hover .fa-eye-slash:before,
  .fa-eye-slash:hover .fa-eye:before {
    display: inline;
  }

  .fa-eye .fa-eye-slash,
  .fa-eye-slash .fa-eye {
    position: absolute;
    left: 0px;
  }

  .fa-eye .fa-eye-slash:before,
  .fa-eye-slash .fa-eye:before {
    display: none;
  }

  .fa-pencil {
    width: 40px;
    height: 15px;
  }

  .editing .fa-pencil:before {
    display: none;
  }

  .editing .fa-pencil .fa-ok:before,
  .editing .fa-pencil .fa-remove:before {
    display: inline;
  }

  .fa-pencil .fa-ok {
    position: absolute;
    left: 0px;
  }
  .fa-pencil .fa-remove {
    position: absolute;
    left: 25px;
  }

  .fa-pencil .fa-ok:before,
  .fa-pencil .fa-remove:before {
    display: none;
  }

  .form-inline .form-group.wrapper-values {
    display: none;
  }

  .form-inline .editing .form-group.wrapper-values {
    display: inline-block;
  }

  .form-inline .editing .value {
    display: none;
  }
}