/*
NOTE
Even though this file is "always imported", we must still manually import it into other .less files where we wish to use these variables.
That's because what "always imported" actually means is this:
    this file is imported into base_page.less
    base_page.css is loaded by base_page.new
    base_page.less is NOT imported by any other file
So yes, the css produced by this file is globally available in the browser, but the less code is not available to other .less files!
*/
.ih_pop {
  position: fixed;
  z-index: 9999;
  background: #ffffff;
  border: 1px solid #DEE2E6;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
  max-width: 280px;
  min-width: 180px;
  padding: 14px 16px 14px 16px;
}
.ih_pop::before,
.ih_pop::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: solid transparent;
}
.ih_arrow_left::before {
  right: 100%;
  border-width: 8px;
  border-right-color: #DEE2E6;
  margin-top: -8px;
}
.ih_arrow_left::after {
  right: calc(100% - 1px);
  border-width: 8px;
  border-right-color: #ffffff;
  margin-top: -8px;
}
.ih_arrow_right::before {
  left: 100%;
  border-width: 8px;
  border-left-color: #DEE2E6;
  margin-top: -8px;
}
.ih_arrow_right::after {
  left: calc(100% - 1px);
  border-width: 8px;
  border-left-color: #ffffff;
  margin-top: -8px;
}
.ih_pop_close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #ADB5BD;
  cursor: pointer;
  padding: 0 2px;
}
.ih_pop_close:hover {
  color: #343A40;
}
.ih_pop_body {
  font-size: 13px;
  color: #495057;
  line-height: 1.55;
  padding-right: 16px;
}
.ih_pop_body a {
  color: #0E6BDB;
  text-decoration: none;
  font-weight: 500;
}
.ih_pop_body a:hover {
  text-decoration: underline;
}
.ih_pop_body p {
  margin: 0;
}
.ih_pop_body p + p {
  margin-top: 8px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  font-family: 'Poppins', sans-serif;
}
.login_page {
  display: flex;
  min-height: 100vh;
}
.login_left {
  flex: 0 0 50%;
  min-width: 700px;
  max-width: 1250px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 32px;
}
.login_logo a {
  display: inline-block;
}
.login_logo img {
  height: 35px;
  display: block;
}
.login_form_wrap {
  flex: 1;
  max-width: 395px;
  margin: 0 auto;
  width: 100%;
  padding: 60px 0 120px;
}
.login_title {
  font-size: 26px;
  font-weight: 700;
  color: #212529;
  text-align: center;
}
.login_subtitle {
  text-align: center;
  font-size: 14px;
  color: #495057;
  margin-bottom: 42px;
  line-height: 1.5;
}
.login_field {
  margin-bottom: 20px;
}
.login_field label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #495057;
  margin-bottom: 6px;
}
.login_input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #DEE2E6;
  border-radius: 6px;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  color: #212529;
  background: #ffffff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login_input:focus {
  border-color: #0E6BDB;
  box-shadow: 0 0 0 3px rgba(14, 107, 219, 0.1);
}
.login_input::placeholder {
  color: #ADB5BD;
}
.login_2fa_input {
  margin-bottom: 20px;
}
.login_select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236C757D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
.login_meta_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.login_remember {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.login_remember input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: #0E6BDB;
  cursor: pointer;
  flex-shrink: 0;
}
.login_remember span {
  font-size: 14px;
  color: #495057;
  font-weight: 400;
}
.login_link {
  font-size: 14px;
  color: #0E6BDB;
  text-decoration: none;
  font-weight: 600;
}
.login_link:hover {
  text-decoration: underline;
}
.login_btn {
  width: 100%;
  height: 44px;
  background: #0E6BDB;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 20px;
}
.login_btn:hover {
  background: #044EB8;
}
.login_btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.login_register_prompt {
  font-size: 14px;
  color: #6C757D;
}
.login_page_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login_page_footer span {
  font-size: 14px;
  color: #6C757D;
}
.login_page_footer div {
  display: flex;
  gap: 16px;
}
.login_footer_link {
  font-size: 14px;
  color: #6C757D;
  text-decoration: none;
}
.login_footer_link:hover {
  text-decoration: underline;
}
.login_right {
  flex: 1;
  position: relative;
  background: #09AFB8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.login_deco_shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.login_deco_shape {
  position: absolute;
  top: 0;
  width: 30%;
  height: 125vh;
}
.s1 {
  left: -15%;
  top: 25%;
}
.s2 {
  left: -6%;
  width: 55%;
  top: 15%;
  height: unset;
}
.s3 {
  left: -5%;
  top: 45%;
  width: 55%;
  height: 120vh;
}
.s4 {
  left: 55%;
  width: 40%;
  top: 20%;
}
.s5 {
  left: 80%;
  top: -10%;
}
.login_right_inner {
  position: relative;
  z-index: 1;
  padding: 80px 56px 32px;
  width: 100%;
  flex-shrink: 0;
}
.login_mockup_area {
  position: relative;
  flex: 1;
  width: 100%;
  z-index: 1;
}
.login_right_headline {
  font-size: 26px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 16px;
}
.login_right_headline strong {
  font-weight: 700;
}
.login_right_body {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.65;
}
.login_mockup_bg,
.login_mockup_notice {
  position: absolute;
  border-radius: 12px;
  display: block;
  pointer-events: none;
}
.login_mockup_bg {
  width: 105%;
  top: 15px;
  left: 35%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  z-index: 2;
}
.login_confetti {
  position: absolute;
  width: 60%;
  left: 0px;
  top: 0px;
  z-index: 2;
  pointer-events: none;
  display: block;
}
.login_mockup_notice {
  width: 33%;
  top: 60px;
  left: 80px;
  box-shadow: 0 0 15px 3px rgba(33, 37, 41, 0.2), 0 0 22px 15px rgba(172, 172, 172, 0.25);
  z-index: 3;
}
.login-response:not(:empty) {
  margin-bottom: 16px;
}
.two_factor_authentication_message_wrapper {
  padding-right: 50px;
}
.two_factor_authentication_message_help_button {
  position: absolute;
  right: 0;
  margin-right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
@keyframes nwli_spin {
  to {
    transform: rotate(360deg);
  }
}
.page_loading_indicator {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  align-items: center;
  justify-content: center;
}
.page_loading_indicator.active {
  display: flex;
}
.nwli_spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 4px solid #AFDCFF;
  border-top-color: #0E6BDB;
  animation: nwli_spin 0.75s ease-in-out infinite;
}
@media (max-width: 900px) {
  .login_right {
    display: none;
  }
  .login_left {
    flex: 1;
    padding: 40px 32px;
  }
}