.login{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0px 16px;
  background-color: #4a404005;
  width: 100%;
  min-height: 100%;
  gap: 32px;
}
grid2Col{
  grid-template-columns: calc(50% - 8px) calc(50% - 8px);
  gap: 16px;
}
.scrollingBg {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-image: url('../assets/backgrounds/login_bg.jpg');
  mix-blend-mode: multiply;
  background-repeat: repeat;
  background-size: 1720px;
  opacity: 0.072;
  z-index: -1;
}
body.darkmode .scrollingBg{
  opacity: 0.16;
}
.form_info{
  display: flex;
}
.headers .title{
  color: var(--button-bg);
  font-weight: 700;
  font-size: 32px;
  text-align: center;
}
.headers .subtitle{
  margin-top: 16px;
  color: var(--button-bg);
  font-size: 14px;
  text-align: center;
}
body.darkmode .headers .title,
body.darkmode .headers .subtitle{
  color: #fff;
}
#logo{
  position: relative;
  height: 44px;
  width: 100%;
  max-width: 360px;
  border-radius: 6px;
  background-image: url('../../assets/logos/optipet_alt_color_1.svg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 8vh;
  flex-shrink: 0;
}
body.darkmode #logo{
  background-image: url('../../assets/logos/optipet_alt_color_2.svg');
}
#logo a{
  position: absolute;
  height: 42px;
  width: 42px;
  background-image: url('../assets/icons/chevron_left.svg');
  background-position: center;
  background-size: 36px;
  background-repeat: no-repeat;
  opacity: 0.5;
}
body.darkmode #logo a{
  filter: invert(1);
}
#darkMode_track{
  position: absolute;
  height: 44px;
  width: 44px;
  right: 0px;
  border-radius: 6px;
  overflow: hidden;
}
.darkMode_btn{
  justify-content: center;
  width: 100%;
  max-width: 44px;
  background-color: transparent !important;
  padding: none;
  border: none !important;
  transition: 150ms;
  border-radius: 0;
  z-index: 1;
}
.darkMode_btn img{
  margin: 0 !important;
  filter: invert(43%) sepia(0%) saturate(0%) hue-rotate(359deg) brightness(99%) contrast(92%);
}
.darkMode_btn.light img{
  filter: invert(88%) sepia(19%) saturate(1148%) hue-rotate(181deg) brightness(100%) contrast(108%);
}
.loginBox{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 340px;
  border: 1px solid #D0D0D0;
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.04);
  transition: 500ms;
  border-radius: 6px;
  flex-shrink: 0;
  padding: 24px;
  margin: 0 16px;
  opacity: 0;
  overflow: hidden;
  gap: 16px;
}
body.darkmode .loginBox{
  border: 1px solid var(--box-border);
  background-color: var(--box-bg);
}
.loginBox.stage_0{
  max-width: 640px;
}
.loginBox p{
  text-align: center;
  font-size: 14px;
}
.loginBox .company_logo{
  height: 100px;
  width: 100%;
  max-width: 290px;
  border-radius: 6px;
  background-image: url('../assets/images/noLogo.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 6px;
  overflow: hidden;
}
body.darkmode .loginBox .company_logo{
  filter: brightness(1000%);
}
.headers{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
}
.bubble{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  content: '';
  top: -6px;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(1px);
  z-index: 99;
}
.bubbleText{
  position: relative;
  height: fit-content;
  width: fit-content;
  background-color: #fff;
  border: 1px solid #C65959;
  color: #C65959;
  padding: 14px;
  padding-left: calc(24px + 24px);
  text-align: left !important;
  font-size: 14px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 16px 5px 0px rgba(0,0,0,0.16);
  -moz-box-shadow: 0px 16px 5px 0px rgba(0,0,0,0.16);
  box-shadow: 0px 16px 5px 0px rgba(0,0,0,0.16);
}
body.darkmode .bubbleText{
  background-color: #C65959;
  border: none;
  color: #fff;
}
.bubbleText::after{
  position: absolute;
  content: '';
  height: 24px;
  width: 24px;
  top: 10px;
  left: 16px;
  filter: invert(46%) sepia(15%) saturate(1878%) hue-rotate(312deg) brightness(94%) contrast(94%);
  background-image: url('../assets/icons/info.svg');
  z-index: 99;
}
body.darkmode .bubbleText::after{
  filter: invert(1);
}
#header_activate_account,
#header_reset_pass,
#header_forgot_pin,
#header_forgot_pass,
#header_0,
#header_1,
#header_2{
  position: absolute;
  height: 0;
  transition: 500ms;
  width: 100%;
  opacity: 0;
}
#header_activate_account.active,
#header_reset_pass.active,
#header_forgot_pin.active,
#header_forgot_pass.active,
#header_0.active,
#header_1.active,
#header_2.active{
  position: relative;
  height: auto;
  opacity: 1;
}
.stage_container{
  position: relative;
  display: flex;
  transition: 500ms;
  width: 100%;
}
#stage_activate_account,
#stage_forgot_pin,
#stage_forgot_pass,
#stage_0,
#stage_1,
#stage_2,
#stage_reset_pass{
  position: absolute;
  content: '';
  pointer-events: none;
  transition: 500ms;
  width: 100%;
  opacity: 0;
}
.loginBox.stage_forgot_pin .stage_container,
.loginBox.stage_forgot_pass .stage_container{
  height: calc(28px + 16px);
}
.loginBox .stage_buttons button{
  position: absolute !important;
  content: '';
  top: 0;
  pointer-events: none;
  opacity: 0;
}
#links_stage_activate_account,
#links_stage_forgot_pin,
#links_stage_forgot_pass,
#links_stage_0,
#links_stage_1,
#links_stage_2,
#links_stage_reset_pass{
  height: 0px;
  position: absolute;
  pointer-events: none;
  width: 100%;
  opacity: 0;
}
#btn_activate_account,
#btn_reset_pass,
#btn_forgot_pin,
#btn_forgot_pass,
#btn_register,
#btn_continue,
#btn_enter{
  pointer-events: none;
  opacity: 0;
}
.stage_links,
.stage_links div{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

.loginBox.stage_0 .stage_container{
  height: calc(571px + 16px);
}
.loginBox.stage_0 .stage_links{
  height: 20px;
}
.loginBox.stage_0 .stage_container #stage_0{
  height: auto;
}
.loginBox.stage_0 .stage_container #stage_0,
.loginBox.stage_0 .stage_links #links_stage_0,
.loginBox.stage_0 .stage_buttons #btn_register{
  pointer-events: all;
  opacity: 1;
}

/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

.loginBox.stage_1 .stage_container{
  height: calc(142px + 16px);
}
.loginBox.stage_1 .stage_links{
  height: 46px;
}
.loginBox.stage_1 .stage_container #stage_1{
  height: auto;
}

.loginBox.stage_1 .stage_container #stage_1,
.loginBox.stage_1 .stage_links #links_stage_1,
.loginBox.stage_1 .stage_buttons #btn_continue{
  pointer-events: all;
  opacity: 1;
}

/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

.loginBox.stage_2 .stage_container{
  height: calc(315px + 16px);
}
.loginBox.stage_2 grid2col{
  row-gap: 32px;
}
#stage_2 grid2col .span{
  display: flex;
  justify-content: center;
}

.loginBox.stage_2 .stage_links{
  height: 20px;
}
.loginBox.stage_2 .stage_container #stage_2{
  height: auto;
}

.loginBox.stage_2 .stage_container #stage_2,
.loginBox.stage_2 .stage_links #links_stage_2,
.loginBox.stage_2 .stage_buttons #btn_enter{
  pointer-events: all;
  opacity: 1;
}

/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

.loginBox.stage_forgot_pin .stage_links{
  height: 20px;
}
.loginBox.stage_forgot_pin .stage_container #stage_forgot_pin{
  height: auto;
}
.loginBox.stage_forgot_pin .stage_container #stage_forgot_pin,
.loginBox.stage_forgot_pin .stage_links #links_stage_forgot_pin,
.loginBox.stage_forgot_pin .stage_buttons #btn_forgot_pin{
  pointer-events: all;
  opacity: 1;
}

/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

.loginBox.stage_forgot_pass .stage_links{
  height: 20px;
}
.loginBox.stage_forgot_pass .stage_container #stage_forgot_pass{
  height: auto;
}
.loginBox.stage_forgot_pass .stage_container #stage_forgot_pass,
.loginBox.stage_forgot_pass .stage_links #links_stage_forgot_pass,
.loginBox.stage_forgot_pass .stage_buttons #btn_forgot_pass{
  pointer-events: all;
  opacity: 1;
}

/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

.loginBox.stage_reset_pass .stage_container{
  height: calc(87px + 16px);
}
.loginBox.stage_reset_pass .stage_links{
  height: 20px;
}
.loginBox.stage_reset_pass .stage_links #links_stage_reset_pass,
.loginBox.stage_reset_pass .stage_buttons #btn_reset_pass{
  pointer-events: all;
  opacity: 1;
}
.loginBox.stage_reset_pass .stage_container #stage_reset_pass,
.loginBox.stage_reset_pass .stage_links #links_stage_reset_pass,
.loginBox.stage_reset_pass .stage_buttons #btn_reset_pass{
  pointer-events: all;
  opacity: 1;
}

/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

.loginBox.stage_activate_account .stage_container{
  height: calc(26px + 16px);
}
.loginBox.stage_activate_account .stage_links{
  height: 20px;
}
.loginBox.stage_activate_account .stage_links #links_stage_activate_account,
.loginBox.stage_activate_account .stage_buttons #btn_activate_account{
  pointer-events: all;
  opacity: 1;
}
.loginBox.stage_activate_account .stage_container #stage_activate_account,
.loginBox.stage_activate_account .stage_links #links_stage_activate_account,
.loginBox.stage_activate_account .stage_buttons #btn_activate_account{
  pointer-events: all;
  opacity: 1;
}

/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

.btn_back{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  width: 100%;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  color: #1c1c1c;
}
.btn_back::after{
  position: absolute;
  content: '';
  height: 24px;
  width: 24px;
  background-color: rgba(0, 0, 0, 0);
  background-image: url('../assets/icons/chevron_left.svg');
  background-repeat: no-repeat;
  opacity: 0.64;
  left: 10px;
}
.btn_back:hover{
  background-color: rgba(0, 0, 0, 0.016);
}
body.darkmode .btn_back::after{
  filter: invert(1);
}

.loginBox .stage_buttons{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 44px;
}
.loginBox a{
  text-align: center;
}
.loginBox a:hover{
  text-decoration: underline;
}
@keyframes scrollBg {
  from {
    transform: rotate(45deg) translateX(0) translateY(0);
  }
  to {
    transform: rotate(45deg) translateX(-50%) translateY(-50%);
  }
}
#stage_2 .span{
  align-items: center;
}
footer{
  max-width: 340px;
  text-align: center;
  font-size: 14px;
  opacity: 0.5;
  margin-bottom: 64px;
}
body.darkmode footer{
  color: #fff;
}

@media only all and (max-width: 1366px) {
  grid2Col{
    display: grid;
    grid-template-columns: calc(50% - 8px) calc(50% - 8px) !important;
  }
}
@media only all and (max-width: 620px) {
  .loginBox .stage_buttons{
    height: 52px !important;
  }
  #logo{
    height: 124px;
    margin-top: 44px;
  }
  .loginBox.stage_activate_account .stage_container {
    height: calc(35px + 16px);
  }
  .loginBox.stage_0 .stage_container {
    height: calc(987px + 16px);
  }
  .loginBox.stage_1 .stage_container {
    height: calc(172px + 16px);
  }
  grid2Col{
    display: flex;
    flex-direction: column;
  }
}