:root {
  --memberIconColor: rgba(255, 22, 84, 1);

  --loginBg: #647457;
  --memberFontColor: #fff;
  --memberFontColorActive: #ff8900;
  --memberFontSize: 14px;
  --memberButtonColor: rgba(180, 141, 80, 1);
  --memberButtonColorActive: rgba(180, 141, 80, 0.5);
  --memberButtonColorLogout: rgba(150, 150, 150, 1);
  --memberButtonColorLogoutActive: rgba(150, 150, 150, 0.5);
  --memberFontColorError: rgba(248, 80, 50, 1);
  --memberFontColorSuccess: #fff;
}


.memberIcon {
  margin: 14px 12px 0 20px; position: fixed; z-index: 5; top: 0; right: 40px; cursor: pointer;
  transition: background 0.3s, margin 0.3s, transform 0.3s, opacity 0.3s;
}
.memberIcon:hover {
  transform: scale(1.3, 1.3); opacity: 0.5;
}
.topContent.hide > .mainMenu > .memberIcon {
  margin: 14px 12px 0 0;
}
.memberIcon img {
  height: 30px;
}
.memberIcon > .num {
  position: fixed; z-index: 6; width: 20px; height: 20px; line-height: 20px; text-align: center; color: #fff; border-radius: 50%; margin: 0 0 0 15px;
  background: var(--memberIconColor); transform: scale(1, 1); opacity: 1; transition: opacity 0.5s, transform 0.5s;
}
.memberIcon > .num.active {
  transform: scale(2.5, 2.5); opacity: 0;
}
.memberIcon > .num.disabled {
  transform: scale(1, 1); opacity: 0;
}
@media only screen and (max-width:1080px) {
  .topContent > .mainMenu > .memberIcon {
    margin: 14px 12px 0 0;
  }
}


.memberForm.formContent {
  width: 600px; max-width: 100%; margin: 60px auto 0 auto; padding: 40px; background-color: var(--loginBg); border-radius: 10px;
}
.memberForm.formContent > .title {
	color: var(--memberFontColor);
}
.memberForm.formContent > .field > div {
	color: var(--memberFontColor); font-size: var(--memberFontSize);
}
.memberForm.formContent > .field > div > .text {
	color: var(--memberFontColor); font-size: var(--memberFontSize);
}
.memberForm.formContent > .field > div input, .memberForm.formContent > .field > div textarea, .memberForm.formContent > .field > div select {
  color: var(--memberFontColor); font-size: var(--memberFontSize);
}
.memberForm.formContent > .field > div .error {
	position: absolute; right: 0; top: -30px; color: var(--memberFontColorError); font-size: var(--memberFontSize);
}
.memberForm.formContent > .field > div.forgot {
  text-align: right; margin: 0 0 0 0;
}
.memberForm.formContent > .field > div.forgot > a {
  color: var(--memberFontColor); font-size: var(--memberFontSize);
}
.memberForm.formContent > .field > div.forgot > a:hover, .memberForm.formContent > .field > div.forgot > a.active {
  color: var(--memberFontColorActive); text-decoration: underline; text-underline-offset: 3px;
}
.memberForm.formContent > .button > div {
	background: var(--memberButtonColor); border: var(--memberButtonColor) 3px solid;
}
.memberForm.formContent > .button > div:hover {
  background: var(--memberButtonColorActive);
}
.memberForm.formContent > .button > div.logout {
	background: var(--memberButtonColorLogout); border: var(--memberButtonColorLogout) 3px solid;
}
.memberForm.formContent > .button > div.logout:hover {
  background: var(--memberButtonColorLogoutActive);
}
.memberForm.formContent > .field > div input[type="button"] {
	background: var(--memberButtonColor); border: var(--memberButtonColor) 3px solid;
}
.memberForm.formContent > .field > div input[type="button"]:hover {
	background: var(--memberButtonColorActive);
}
.memberForm.formContent > .success {
	color: var(--memberFontColorSuccess); font-size: var(--memberFontSize);
}
.memberForm.formContent > .error {
	color: var(--memberFontColorError); font-size: var(--memberFontSize);
}