/******************************
COLOR
******************************/
/*OLD*/
/******************************
BASE COLOR
******************************/
/******************************
FONT
******************************/
/**/
/**/
/**/
/**/
/* 24px */
/* 20px */
/* 16px */
/**/
/* 14px */
/* 12px */
/******************************
BREAKPOINT
******************************/
/******************************
FONTS
******************************/
/******************************
SPACING
******************************/
/******************************
GRID
******************************/
/******************************
MIXIN - FONT
******************************/
/******************************
MIXIN - mxWidth
******************************/
/******************************
RESET
******************************/
body {
  background-color: #f7f3f6;
}

.pageLogin {
  display: flex;
  justify-content: center;
  position: relative;
}
.pageLogin .welcomeMsg {
  color: #343a40;
}
.pageLogin .remarks {
  font-size: 0.875rem;
  letter-spacing: 0.03125rem;
  line-height: 1.25rem;
  color: #495057;
}
.pageLogin .remarks a {
  text-decoration: underline;
  white-space: nowrap;
}
.isWeb .pageLogin .remarks a:hover {
  text-decoration: none;
}

#loginForm {
  max-width: 540px;
  margin: 48px 20px;
  padding: 48px 32px;
  position: relative;
  background-color: #ffffff;
  border-radius: 8px;
}
@media (min-width:768px) {
  #loginForm {
    padding-left: 80px;
    padding-right: 80px;
  }
}
@media (min-width:1024px) {
  #loginForm {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
#loginForm > div {
  margin-top: 16px;
}
#loginForm > div:first-child {
  margin-top: 0;
}
#loginForm > div.remarks {
  margin-top: 24px;
}
#loginForm #continueBtn,
#loginForm button[type=submit] {
  width: 100%;
}
#loginForm .error {
  font-size: 0.75rem;
  letter-spacing: 0.03125rem;
  line-height: 1.333rem;
  color: #cd242b;
}
#loginForm .loginError {
  font-size: 0.75rem;
  letter-spacing: 0.03125rem;
  line-height: 1.333rem;
  color: #cd242b;
}
#loginForm .langSwitch {
  margin: 0;
  position: absolute;
}
@media (max-width:1023px) {
  #loginForm .langSwitch {
    right: 8px;
    top: 8px;
  }
}
@media (min-width:1024px) {
  #loginForm .langSwitch {
    right: 16px;
    top: 16px;
  }
}
#loginForm .langSwitch .langBtn {
  display: flex;
  position: relative;
  cursor: pointer;
}
#loginForm .langSwitch .langBtn .text {
  font-size: 0.875rem;
  letter-spacing: 0.03125rem;
  line-height: 1.25rem;
  display: block;
  align-self: center;
  padding-left: 4px;
  color: #adb5bd;
}
@media (max-width:1023px) {
  #loginForm .langSwitch .langBtn .text {
    color: #a63593;
    font-weight: 700;
  }
}
#loginForm .langSwitch .langBtn .langMenu {
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 0 0 8px 8px;
}
#loginForm .langSwitch .langBtn .langMenu button {
  font-size: 0.875rem;
  letter-spacing: 0.03125rem;
  line-height: 1.25rem;
  padding: 2px 4px;
  color: #adb5bd;
}
@media (max-width:1023px) {
  #loginForm .langSwitch .langBtn .langMenu {
    display: block;
    padding: 0 0 0 8px;
    position: relative;
  }
}
@media (min-width:1024px) {
  #loginForm .langSwitch .langBtn .langMenu {
    display: none;
    padding: 4px 4px 0;
    position: absolute;
    top: 24px;
    right: -8px;
  }
}
@media (min-width:1024px) {
  #loginForm .langSwitch .langBtn:hover .langMenu {
    display: flex;
  }
}
#loginForm input:disabled {
  background-color: #dee2e6 !important;
}