form#MemNet--register-user,
form#MemNet--login-user {
  display: flex;
  flex-direction: column;
  transition: 0.25s;
}
form#MemNet--register-user input,
form#MemNet--login-user input {
  margin-bottom: 15px;
  margin-left: 15px;
}
form#MemNet--login-user label {
  margin-bottom: 15px;
  width: 90px;
  display: inline-block;
}
form#MemNet--register-user button,
form#MemNet--login-user button {
  margin-top: 10px;
}
form#MemNet--login-user p.login-status {
  display: none;
}

.memnet-login-shortcode p.login-status.active {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid #f2ddb2 !important;
  background-color: #fcf9f4 !important;
  border-radius: 5px;
}
.memnet-login-shortcode p.login-status.error {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid red !important;
  background-color: #ffcccb !important;
  border-radius: 5px;
}

.user-registration-form .status-error {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid red !important;
  background-color: #ffcccb !important;
  border-radius: 5px;
}

.user-registration-form .status-success {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid #1ec71e !important;
  background-color: #d2f8d2 !important;
  border-radius: 5px;
}


form#MemNet--login-user.processing {
  pointer-events: none !important;
  opacity: 0.4;
  transition: 0.25s;
}

form#MemNet--register-user label {
  min-width: 140px;
  display: inline-block;
}
form#MemNet--register-user input {
  min-width: 280px;
}

/*
 Tool tips helpers
*/
.memnettooltip {
  display:inline-block;
  position:relative;
  border-bottom:1px dotted #666;
  text-align:left;
}

.memnettooltip .top {
  min-width:200px; 
  top:-20px;
  left:50%;
  transform:translate(-50%, -100%);
  padding:10px 20px;
  color:#444444;
  background-color:#EEEEEE;
  font-weight:normal;
  font-size:13px;
  border-radius:8px;
  position:absolute;
  z-index:99999999;
  box-sizing:border-box;
  box-shadow:0 1px 8px #666666;
  visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.memnettooltip:hover .top {
  visibility:visible; opacity:1;
}

.memnettooltip .top i {
  position:absolute;
  top:100%;
  left:50%;
  margin-left:-12px;
  width:24px;
  height:12px;
  overflow:hidden;
}

.memnettooltip .top i::after {
  content:'';
  position:absolute;
  width:12px;
  height:12px;
  left:50%;
  transform:translate(-50%,-50%) rotate(45deg);
  background-color:#EEEEEE;
  box-shadow:0 1px 8px #666666;
}