/*color code for leaves*/
/*color code for employee*/
/*background color codes*/
.page-wrapper {
  min-width: 0;
}
.page_login-content .content,
.page_forgetpassword-content .content,
.page_manualinvitation-content .content,
.page_clientEngagement-content .content,
.page_resetpassword-content .content {
  width: 100%;
  margin-left: 0;
}
.page_login-content .login__logo,
.page_forgetpassword-content .login__logo,
.page_manualinvitation-content .login__logo,
.page_clientEngagement-content .login__logo,
.page_resetpassword-content .login__logo {
  text-align: center;
}
.page_login-content .login__logo img,
.page_forgetpassword-content .login__logo img,
.page_manualinvitation-content .login__logo img,
.page_clientEngagement-content .login__logo img,
.page_resetpassword-content .login__logo img {
  max-width: 100%;
}
.page_login-content h2,
.page_forgetpassword-content h2,
.page_manualinvitation-content h2,
.page_clientEngagement-content h2,
.page_resetpassword-content h2 {
  color: #f4f8fa;
  margin-bottom: 25px;
  text-align: center;
}
.page_login-content .login,
.page_forgetpassword-content .login,
.page_manualinvitation-content .login,
.page_clientEngagement-content .login,
.page_resetpassword-content .login,
.page_login-content .forgetpassword,
.page_forgetpassword-content .forgetpassword,
.page_manualinvitation-content .forgetpassword,
.page_clientEngagement-content .forgetpassword,
.page_resetpassword-content .forgetpassword,
.page_login-content .manual-invite,
.page_forgetpassword-content .manual-invite,
.page_manualinvitation-content .manual-invite,
.page_clientEngagement-content .manual-invite,
.page_resetpassword-content .manual-invite,
.page_login-content .resetpassword,
.page_forgetpassword-content .resetpassword,
.page_manualinvitation-content .resetpassword,
.page_clientEngagement-content .resetpassword,
.page_resetpassword-content .resetpassword {
  margin-top: 122px;
}
.page_login-content .login__logo,
.page_forgetpassword-content .login__logo,
.page_manualinvitation-content .login__logo,
.page_clientEngagement-content .login__logo,
.page_resetpassword-content .login__logo,
.page_login-content .forgetpassword__logo,
.page_forgetpassword-content .forgetpassword__logo,
.page_manualinvitation-content .forgetpassword__logo,
.page_clientEngagement-content .forgetpassword__logo,
.page_resetpassword-content .forgetpassword__logo,
.page_login-content .manual-invite__logo,
.page_forgetpassword-content .manual-invite__logo,
.page_manualinvitation-content .manual-invite__logo,
.page_clientEngagement-content .manual-invite__logo,
.page_resetpassword-content .manual-invite__logo,
.page_login-content .resetpassword__logo,
.page_forgetpassword-content .resetpassword__logo,
.page_manualinvitation-content .resetpassword__logo,
.page_clientEngagement-content .resetpassword__logo,
.page_resetpassword-content .resetpassword__logo {
  text-align: center;
}
.page_login-content .login__input,
.page_forgetpassword-content .login__input,
.page_manualinvitation-content .login__input,
.page_clientEngagement-content .login__input,
.page_resetpassword-content .login__input,
.page_login-content .forgetpassword__input,
.page_forgetpassword-content .forgetpassword__input,
.page_manualinvitation-content .forgetpassword__input,
.page_clientEngagement-content .forgetpassword__input,
.page_resetpassword-content .forgetpassword__input,
.page_login-content .manual-invite__input,
.page_forgetpassword-content .manual-invite__input,
.page_manualinvitation-content .manual-invite__input,
.page_clientEngagement-content .manual-invite__input,
.page_resetpassword-content .manual-invite__input,
.page_login-content .resetpassword__input,
.page_forgetpassword-content .resetpassword__input,
.page_manualinvitation-content .resetpassword__input,
.page_clientEngagement-content .resetpassword__input,
.page_resetpassword-content .resetpassword__input {
  margin-bottom: 20px;
}
.page_login-content__forgot-password a,
.page_forgetpassword-content__forgot-password a,
.page_manualinvitation-content__forgot-password a,
.page_clientEngagement-content__forgot-password a,
.page_resetpassword-content__forgot-password a {
  border-bottom: 1px solid #dbdee2;
  color: #244e70;
}
.page_login-content .email-failed,
.page_forgetpassword-content .email-failed,
.page_manualinvitation-content .email-failed,
.page_clientEngagement-content .email-failed,
.page_resetpassword-content .email-failed {
  width: 600px;
  margin: 0 auto;
  text-align: center;
}
.page_login-content .email-failed h3,
.page_forgetpassword-content .email-failed h3,
.page_manualinvitation-content .email-failed h3,
.page_clientEngagement-content .email-failed h3,
.page_resetpassword-content .email-failed h3 {
  color: #fff;
  text-align: center;
}
.page_login-content .email-failed .email-failed__value,
.page_forgetpassword-content .email-failed .email-failed__value,
.page_manualinvitation-content .email-failed .email-failed__value,
.page_clientEngagement-content .email-failed .email-failed__value,
.page_resetpassword-content .email-failed .email-failed__value {
  color: #fff;
  display: inline-block;
}
.lanternContainer {
  position: absolute;
  height: 176px;
  width: 100px;
  margin: auto;
  animation: bob 3s infinite;
}
.lanternContainer:hover {
  animation-play-state: running;
}
.lanternContainer .Lantern {
  position: relative;
  height: 176px;
  width: 100px;
  margin: auto;
  animation: sway 4s infinite;
}
.lanternContainer .Lantern:hover {
  animation-play-state: running;
}
.lanternContainer .Glow {
  height: 75px;
  width: 50px;
  position: absolute;
  top: 57px;
  left: 21px;
  box-shadow: 0 0 300px #efc259;
  animation: flicker 0.2s infinite;
}
.lanternContainer .Bottom {
  fill: url(#bottomGradient1);
  position: absolute;
  width: 51px;
  height: 52px;
  bottom: 0px;
  left: 20px;
}
.lanternContainer .Top {
  fill: url(#topGradient1);
  position: absolute;
  width: 51px;
  height: 73px;
  left: 20px;
}
.lanternContainer .lanternMain {
  fill: url(#lanternGradient1);
  position: absolute;
  width: 90px;
  height: 100px;
  top: 43px;
}
.lanternContainer .Ridges {
  opacity: 0.4;
  fill: url(#Ridges1);
  position: absolute;
  width: 86px;
  height: 100px;
  top: 43px;
  left: 2px;
}
.lanternContainer .leftSeam {
  opacity: 0.35;
  fill: #a60000;
  position: absolute;
  width: 12px;
  height: 100px;
  top: 43px;
  left: 15px;
}
.lanternContainer .middleSeam {
  opacity: 0.35;
  fill: #9b0000;
  position: absolute;
  width: 10.px;
  height: 100px;
  top: 43px;
  left: 44px;
}
.lanternContainer .rightSeam {
  opacity: 0.35;
  fill: #a60000;
  position: absolute;
  width: 30px;
  height: 100px;
  top: 43px;
  right: 15px;
}
body,
html {
  margin: 0;
  padding: 0;
  font-family: 'Inter', Arial, sans-serif;
  height: 100%;
  min-height: 100vh;
}
.login-bg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(ellipse at 30% 30%, #b7e0f9 0%, #d2e3ff 60%, #c9d1ff 100%);
  filter: blur(2px) brightness(1.07);
  z-index: 0;
}
.login-bg.dark-bg {
  background: radial-gradient(ellipse at 50% 40%, #27345a 0%, #16213e 60%, #174547 100%);
}
.login-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.login-container label {
  font-size: 1em;
  color: #26426d;
  font-weight: 500;
  margin-bottom: 5px;
  letter-spacing: 0.01em;
  padding-left: 2px;
}
.login-container .login-card {
  background: rgba(255, 255, 255, 0.63);
  box-shadow: 0 6px 28px 0 rgba(38, 50, 56, 0.09), 0 4px 8px 0 rgba(38, 50, 56, 0.08);
  backdrop-filter: blur(16px);
  border-radius: 15px;
  padding: 2.3rem 2.8rem 2.2rem 2.8rem;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-container .login-card.two-column {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  max-width: 670px;
  padding: 0;
}
.login-container .login-card.two-column form {
  flex: 1 1 55%;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 0 15px 15px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px 32px;
  min-width: 0;
}
.login-container .login-card .login-branding {
  flex: 1 1 45%;
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 15px 0 0 15px;
  padding: 42px 28px;
  min-width: 0;
}
.login-container .login-card .login-branding img {
  max-width: 100%;
}
.login-container .login-logo {
  margin-bottom: 0.5rem;
}
.login-container .login-title {
  font-size: 1.2rem;
  color: #20304d;
  margin-bottom: 2rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  text-align: center;
}
.login-container .input-row {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 1.2em;
  background: rgba(240, 248, 255, 0.62);
  border-radius: 7px;
  border: 1px solid #dde6eb;
  padding: 0 0.7em 0 0.6em;
  box-sizing: border-box;
  position: relative;
}
.login-container .input-icon {
  font-size: 1.09rem;
  color: #8797ad;
  margin-right: 5px;
  user-select: none;
}
.login-container .input-row input {
  border: none;
  background: transparent;
  font-size: 1rem;
  flex: 1;
  outline: none;
  padding: 1em 0 1em 0;
  color: #26326d;
}
.login-container .toggle-password {
  background: none;
  border: none;
  color: #3c7edb;
  font-size: 0.91em;
  cursor: pointer;
  outline: none;
  margin-left: 6px;
  font-family: inherit;
}
.login-container .login-button {
  width: 100%;
  padding: 0.87em 0;
  border: none;
  background: linear-gradient(90deg, #3e7fd5, #253e7c 90%);
  color: #fff;
  font-size: 1.06rem;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 0.5em;
  margin-bottom: 1.4em;
  box-shadow: 0 1px 3px 0 rgba(39, 61, 110, 0.09);
  transition: background 0.2s;
}
.login-container .login-button:hover {
  background: linear-gradient(90deg, #2859a8 60%, #101c44 100%);
}
.login-container .login-links {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 0.97em;
  color: #5a6b89;
  margin-bottom: 0.8em;
}
.login-container .login-links a {
  color: #3e7fd5;
  text-decoration: none;
}
.login-container .signup-suggestion {
  font-size: 0.92em;
  color: #8193b2;
  text-align: center;
  margin-top: 0.6em;
}
.login-container .signup-suggestion a {
  color: #2859a8;
  font-weight: 600;
  text-decoration: none;
}
.login-container .error-message {
  background: #ffe0e0;
  color: #b82323;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 12px;
  font-size: 0.95em;
  text-align: center;
}
@media (max-width: 540px) {
  .login-container .login-card {
    padding: 1.1rem 0.7rem 1.5rem 0.7rem;
    max-width: 95vw;
  }
  .login-container .login-title {
    font-size: 1.15rem;
  }
}
@media (max-width: 640px) {
  .login-container .login-card.two-column {
    flex-direction: column;
    max-width: 95vw;
    border-radius: 14px;
  }
  .login-container .login-branding,
  .login-container .login-card.two-column form {
    border-radius: 14px 14px 0 0;
    min-width: 0;
    padding: 33px 14px;
  }
}
@keyframes flicker {
  50% {
    opacity: 0.95;
  }
}
@keyframes sway {
  0% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}
@keyframes bob {
  0% {
    top: 20px;
  }
  50% {
    top: 50px;
  }
  100% {
    top: 20px;
  }
}