body {
  background-color: var(--color-primary-dark);
}

#login_background {
  position: fixed;
  z-index: -1;
}

#login_bg_lay1 {
  position: fixed;
  left: 10%;
  top: -45%;
  width: 719.84px;
  height: 688.157px;
  transform: rotate(-128.064deg);
  flex-shrink: 0;
  border-radius: 719.84px;
  background: var(--Brand-Brand-600, #76E9F4);
  mix-blend-mode: hard-light;
  filter: blur(200px);
}

#login_bg_lay2 {
  position: fixed;
  left: 40%;
  top: 10%;
  width: 1287.926px;
  height: 1179.276px;
  flex-shrink: 0;
  border-radius: 719.84px;
  background: linear-gradient(#76E9F4, #006380);
  opacity: 0.38;
  mix-blend-mode: hard-light;
  filter: blur(200px);
}

#login_bg_lay3 {
  position: fixed;
  left: -8%;
  top: 40%;
  width: 952.054px;
  height: 1026.673px;
  transform: rotate(42.54deg);
  flex-shrink: 0;
  border-radius: 1026.673px;
  opacity: 0.38;
  background: #00239F;
  mix-blend-mode: hard-light;
  filter: blur(200px);
}

#login_bg_lay4 {
  position: fixed;
  left: 35%;
  top: 75%;
  width: 1859.785px;
  height: 1221.297px;
  flex-shrink: 0;
  border-radius: 1859.785px;
  background: var(--Brand-Brand-600, #76E9F4);
  mix-blend-mode: hard-light;
  filter: blur(200px);
}


#login_logo {
  width: 215px;
  height: 33px;
  margin-left: 32px;
  margin-top: 36.2px;
}

#login_container {
  z-index: 1;
  height: 100vh; /* Full viewport height */
  display: flex;
  justify-content: center;
  align-items: center; /* Center items vertically */
}

#login_page {
  z-index: 1;
  display: flex;
  flex-direction: row;
  padding: 0px 50px;
  gap: 146.2px;
  min-width: 200px;
}

#login_info {
  display: flex;
  flex-direction: column;
  gap: 72px;
  margin-top: 44px;
}

#login_txt {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#login_title {
  width: 547px;
  color: var(--font-light);
  font-family: var(--main-font-family);
  font-size: 69px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -1.38px;
}

#login_pin_info {
  color: var(--font-light);
  font-family: var(--main-font-family);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#login_pin {
  display: flex;
  gap: 6.88px;
}

.login_pin_box {
  display: flex;
  width: 106.554px;
  height: 116.158px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  justify-content: center;
  align-items: center;
}

.login_pin_dot {
  visibility: hidden;
  display: flex;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: var(--font-light);
}
  
#login_numpad {
  display: flex;
}

#login_numpad_column {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.login_numpad_row{
  display: flex;
  gap: 30px;
}

.login_field {
  display: flex;
  width: 116px;
  height: 116px;
}

.login_field.long {
  width: 262px;
}

.num_pad {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color-tertiary);
  color: var(--font-dark);
  font-family: var(--main-font-family);
  font-size: 48px;
  font-weight: 500;
  justify-content: center;
  align-items: center;
}

.num_pad:hover {
  background-color: var(--color-tertiary-dark);
}

.num_pad.long {
  border-radius: 100px;
}

#scope_dropdown_arrow {
  display: flex;
  width: 42.09px;
  height: 40.814px;
  justify-content: center;
  align-items: center;
}