.login-page,
.login-page * {
  box-sizing: border-box;
}
.login-page {
  background: radial-gradient(
      closest-side,
      rgba(219, 234, 254, 1) 0%,
      rgba(239, 246, 255, 1) 34.99999940395355%,
      rgba(248, 251, 255, 1) 69.9999988079071%,
      rgba(227, 239, 255, 1) 100%
    ),
    linear-gradient(to left, #ffffff, #ffffff);
  padding: 80px 56px 80px 56px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  height: 982px;
  position: relative;
  overflow: hidden;
}
.ambient-glow-in-top-right-as-requested {
  background: radial-gradient(
    closest-side,
    rgba(96, 165, 250, 0.4) 0%,
    rgba(191, 219, 254, 0.2) 50%,
    rgba(191, 219, 254, 0) 75%
  );
  flex-shrink: 0;
  width: 580px;
  height: 580px;
  position: absolute;
  right: -100px;
  top: -120px;
  filter: blur(27.5px);
}
.gradient-blur {
  background: radial-gradient(
    closest-side,
    rgba(147, 197, 253, 0.25) 0%,
    rgba(224, 242, 254, 0.1) 60.00000238418579%,
    rgba(224, 242, 254, 0) 80.0000011920929%
  );
  flex-shrink: 0;
  width: 37.5%;
  height: 480px;
  position: absolute;
  right: 52.5%;
  left: 10%;
  bottom: 0px;
  filter: blur(30px);
}
.main-dual-column-container {
  width: 100%;
  flex-shrink: 0;
  display: grid;
  gap: 40px;
  max-width: 1240px;
  min-height: 820px;
  position: relative;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 820px;
}
.section-left-column-branded-3-d-glass-panel {
  background: linear-gradient(
    154.13deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(240, 247, 255, 0.9) 60.00000238418579%,
    rgba(224, 239, 255, 0.82) 100%
  );
  border-radius: 44px;
  min-height: 680px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  grid-column: 1 / span 6;
  grid-row: 1 / span 1;
}
.section-left-column-branded-3-d-glass-panel-shadow {
  background: rgba(255, 255, 255, 0);
  border-radius: 44px;
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 0px;
  top: 0px;
  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.9),
    0px 25px 60px -15px rgba(37, 99, 235, 0.14);
}
.top-left-kelas-ku-logo-and-wordmark {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  right: 56px;
  left: 56px;
  top: 56px;
}
.rounded-blue-glass-square-with-open-book-icon {
  border-radius: 16px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.4);
  border-width: 1px;
  padding: 2px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  position: relative;
}
.rounded-blue-glass-square-with-open-book-icon-shadow {
  background: rgba(255, 255, 255, 0);
  border-radius: 16px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  position: absolute;
  left: 0px;
  top: 50%;
  translate: 0 -50%;
  box-shadow: 0px 4px 6px -4px rgba(59, 130, 246, 0.25),
    0px 10px 15px -3px rgba(59, 130, 246, 0.25);
}
.paragraph {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-2 {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.kelas {
  color: #14233f;
  text-align: left;
  font-family: "WorkSans-ExtraBold", sans-serif;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.6px;
  font-weight: 800;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.ku {
  color: #3a8cf3;
  text-align: left;
  font-family: "WorkSans-ExtraBold", sans-serif;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.6px;
  font-weight: 800;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.text {
  margin: -0.25px 0 0 0;
  color: #2563eb;
  text-align: left;
  font-family: "OpenSans-SemiBold", sans-serif;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 0.55px;
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.bottom-bold-heading-short-subtext-margin {
  padding: 16px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  right: 56px;
  left: 56px;
  top: 593.3px;
}
.bottom-bold-heading-short-subtext {
  border-style: solid;
  border-color: rgba(219, 234, 254, 0.6);
  border-width: 1px 0px 0px 0px;
  padding: 16px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.heading-2 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.monitoring-kelas-dan-peminjaman-barang {
  color: #14233f;
  text-align: left;
  font-family: "WorkSans-ExtraBold", sans-serif;
  font-size: 34px;
  line-height: 42.5px;
  font-weight: 800;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.container {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  flex-shrink: 0;
  max-width: 512px;
  position: relative;
}
.audit-kelas-ajukan-peminjaman-dan-laporkan-kerusakan-dalam-satu-aplikasi {
  color: #5b6b86;
  text-align: left;
  font-family: "OpenSans-Regular", sans-serif;
  font-size: 15px;
  line-height: 24.38px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.center-floating-3-d-style-illustration-composition-margin {
  padding: 24px 0px 24px 0px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  height: 388px;
  position: absolute;
  right: 56px;
  left: 56px;
  top: 150.9px;
}
.center-floating-3-d-style-illustration-composition {
  padding: 106px 204px 122px 156px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 340px;
  position: relative;
}
.svg-background-organic-polygon-blob-bright-blue {
  opacity: 0.9;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 290px;
  height: 290px;
  position: absolute;
  left: 91px;
  top: 25px;
  box-shadow: 0px 20px 30px 0px rgba(37, 99, 235, 0.28);
  overflow: hidden;
}
.svg {
  flex: 1;
  width: 290px;
  height: auto;
  position: relative;
  overflow: visible;
}
.glossy-light-blue-donut-ring-torus-3-d-shape {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  position: absolute;
  right: 19.13px;
  top: -22.42px;
  transform-origin: 0 0;
  transform: rotate(12deg) scale(1, 1);
}
.svg2 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex: 1;
  position: relative;
  box-shadow: 0px 20px 13px 0px rgba(0, 0, 0, 0.03),
    0px 8px 5px 0px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.svg3 {
  align-self: stretch;
  flex: 1;
  height: auto;
  position: relative;
  overflow: visible;
}
.translucent-blue-pyramid-1-left-background-svg {
  opacity: 0.85;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 78px;
  height: 85px;
  position: absolute;
  left: 8.02px;
  top: 49.03px;
  box-shadow: 0px 10px 8px 0px rgba(0, 0, 0, 0.04),
    0px 4px 3px 0px rgba(0, 0, 0, 0.1);
  transform-origin: 0 0;
  transform: rotate(-12deg) scale(1, 1);
  overflow: hidden;
}
.svg4 {
  flex: 1;
  width: 77.99px;
  height: auto;
  position: relative;
  overflow: visible;
}
.frosted-glass-rounded-square-with-white-letter-k-4-corner-dots {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(219, 234, 254, 0.5) 100%
  );
  border-radius: 24px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.95);
  border-width: 1px;
  padding: 12px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  position: relative;
  backdrop-filter: blur(8px);
}
.frosted-glass-rounded-square-with-white-letter-k-4-corner-dots-shadow {
  background: rgba(255, 255, 255, 0);
  border-radius: 24px;
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  box-shadow: inset 0px 2px 2px 1px rgba(255, 255, 255, 1),
    0px 18px 36px -6px rgba(29, 78, 216, 0.18);
}
._4-corner-dots {
  background: rgba(37, 99, 235, 0.7);
  border-radius: 9999px;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  position: absolute;
  left: 11px;
  top: 11px;
}
.overlay {
  background: rgba(37, 99, 235, 0.7);
  border-radius: 9999px;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  position: absolute;
  right: 11px;
  top: 11px;
}
.overlay2 {
  background: rgba(37, 99, 235, 0.7);
  border-radius: 9999px;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  position: absolute;
  left: 11px;
  bottom: 11px;
}
.overlay3 {
  background: rgba(37, 99, 235, 0.7);
  border-radius: 9999px;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  position: absolute;
  right: 11px;
  bottom: 11px;
}
.white-letter-k {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0px 2px 10px 0px rgba(30, 64, 175, 0.4);
}
.text2 {
  color: #ffffff;
  text-align: left;
  font-family: "WorkSans-ExtraBold", sans-serif;
  font-size: 48px;
  line-height: 48px;
  font-weight: 800;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.translucent-blue-pyramid-2-right-foreground {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: absolute;
  right: 15.88px;
  bottom: 31.55px;
  transform-origin: 0 0;
  transform: rotate(45deg) scale(1, 1);
}
.svg5 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 60px;
  height: 66px;
  position: relative;
  box-shadow: 0px 20px 13px 0px rgba(0, 0, 0, 0.03),
    0px 8px 5px 0px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.svg6 {
  flex: 1;
  width: 60px;
  height: auto;
  position: relative;
  overflow: visible;
}
.floating-white-glass-card-with-two-light-blue-lines {
  background: linear-gradient(
    113.59deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(240, 247, 255, 0.75) 100%
  );
  border-radius: 16px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 176px;
  position: absolute;
  left: 38.08px;
  bottom: 11.35px;
  transform-origin: 0 0;
  transform: rotate(-3deg) scale(1, 1);
  backdrop-filter: blur(10px);
}
.floating-white-glass-card-with-two-light-blue-lines-shadow {
  background: rgba(255, 255, 255, 0);
  border-radius: 16px;
  flex-shrink: 0;
  width: 176px;
  position: absolute;
  left: 0px;
  bottom: -0.01px;
  top: 0px;
  box-shadow: inset 0px 1px 1px 1px rgba(255, 255, 255, 0.9),
    0px 20px 40px -8px rgba(37, 99, 235, 0.18);
}
.container2 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.background-shadow {
  background: #3b82f6;
  border-radius: 9999px;
  flex-shrink: 0;
  width: 12.01px;
  height: 12px;
  position: relative;
  box-shadow: 0px 1px 2px 0px rgba(96, 165, 250, 1);
}
.background {
  background: #dbeafe;
  border-radius: 9999px;
  flex-shrink: 0;
  width: 64px;
  height: 8px;
  position: relative;
}
.two-light-blue-lines {
  background: linear-gradient(
    90deg,
    rgba(147, 197, 253, 1) 0%,
    rgba(191, 219, 254, 1) 100%
  );
  border-radius: 9999px;
  align-self: stretch;
  flex-shrink: 0;
  height: 10px;
  position: relative;
}
.gradient {
  background: linear-gradient(
    90deg,
    rgba(191, 219, 254, 1) 0%,
    rgba(219, 234, 254, 1) 100%
  );
  border-radius: 9999px;
  flex-shrink: 0;
  width: 116.8px;
  height: 9.99px;
  position: relative;
}
.section-right-column-liquid-glass-login-card {
  padding: 16px 0px 16px 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: center;
  height: 820px;
  position: relative;
  grid-column: 7 / span 6;
  grid-row: 1 / span 1;
}
.background-border-overlay-blur {
  background: linear-gradient(
    143.59deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.72) 100%
  );
  border-radius: 36px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.85);
  border-width: 1px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex: 1;
  max-width: 490px;
  position: relative;
  backdrop-filter: blur(18px);
}
.overlay-shadow {
  background: rgba(255, 255, 255, 0);
  border-radius: 36px;
  flex-shrink: 0;
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 0.25px;
  top: 0px;
  box-shadow: inset 0px -1px 2px 1px rgba(96, 165, 250, 0.15),
    inset 0px 1.5px 0.5px 1px rgba(255, 255, 255, 1),
    0px 10px 20px -5px rgba(96, 165, 250, 0.12),
    0px 24px 50px -10px rgba(29, 78, 216, 0.15);
}
.header-heading-subtext-margin {
  padding: 0px 0px 28px 0px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.header-heading-subtext {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.heading-1 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.masuk {
  color: #14233f;
  text-align: left;
  font-family: "WorkSans-Bold", sans-serif;
  font-size: 38px;
  line-height: 38px;
  letter-spacing: -0.95px;
  font-weight: 700;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.container3 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.akses-monitoring-kelas-peminjaman-barang-dan-laporan-kerusakan {
  color: #5b6b86;
  text-align: left;
  font-family: "OpenSans-Regular", sans-serif;
  font-size: 15px;
  line-height: 24.38px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.form-elements {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.username-input-pill-shaped-54-px {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.label {
  padding: 0px 0px 0px 16px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.identitas-pengguna {
  color: #14233f;
  text-align: left;
  font-family: "OpenSans-SemiBold", sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.6px;
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.background-border-shadow {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(240, 247, 255, 0.92) 100%
  );
  border-radius: 9999px;
  border-style: solid;
  border-color: rgba(147, 197, 253, 0.55);
  border-width: 1px;
  padding: 0px 20px 0px 20px;
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 54px;
  position: relative;
  box-shadow: 0px 2px 6px 0px rgba(96, 165, 250, 0.06),
    inset 0px 2px 4px 1px rgba(20, 35, 63, 0.03);
}
.svg-user-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
}
.input {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.container4 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: auto;
}
._2024108892 {
  color: #14233f;
  text-align: left;
  font-family: "OpenSans-Regular", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.password-input-pill-shaped-54-px {
  padding: 4px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.kata-sandi {
  color: #14233f;
  text-align: left;
  font-family: "OpenSans-SemiBold", sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.6px;
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.svg-lock-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
}
.div {
  color: #14233f;
  text-align: left;
  font-family: "OpenSans-Regular", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.button-tampilkan-atau-sembunyikan-kata-sandi {
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.svg7 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
}
.options-row-ingat-saya-lupa-password {
  padding: 4px 8px 0px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.label2 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.input2 {
  background: linear-gradient(
    135deg,
    rgba(96, 165, 250, 1) 0%,
    rgba(29, 78, 216, 1) 100%
  );
  border-radius: 6px;
  border-style: solid;
  border-color: #1d4ed8;
  border-width: 1px;
  padding: 1.98px 2.69px 4.12px 3.41px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  position: relative;
}
.border {
  border-style: solid;
  border-color: #ffffff;
  border-width: 0px 2px 2px 0px;
  flex-shrink: 0;
  width: 5px;
  height: 9px;
  position: relative;
  transform-origin: 0 0;
  transform: rotate(45deg) scale(1, 1);
}
.container5 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.text3 {
  color: #5b6b86;
  text-align: left;
  font-family: "OpenSans-Regular", sans-serif;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.link {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.text4 {
  color: #1d4ed8;
  text-align: left;
  font-family: "OpenSans-SemiBold", sans-serif;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.buttons-group {
  padding: 12px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.full-width-pill-masuk-button-with-glowing-blue-gradient {
  background: linear-gradient(
    97.69deg,
    rgba(96, 165, 250, 1) 0%,
    rgba(37, 99, 235, 1) 55.000001192092896%,
    rgba(29, 78, 216, 1) 100%
  );
  border-radius: 9999px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 54px;
  position: relative;
}
.full-width-pill-masuk-button-with-glowing-blue-gradient-shadow {
  background: rgba(255, 255, 255, 0);
  border-radius: 9999px;
  flex-shrink: 0;
  height: 54px;
  position: absolute;
  right: 0px;
  left: 0px;
  top: 0px;
  box-shadow: inset 0px 1.5px 1px 0px rgba(255, 255, 255, 0.5),
    0px 4px 12px 0px rgba(37, 99, 235, 0.3),
    0px 12px 28px -5px rgba(29, 78, 216, 0.46);
}
.container6 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.text5 {
  color: #ffffff;
  text-align: center;
  font-family: "WorkSans-Bold", sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.4px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svg8 {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
  overflow: visible;
}
.white-glossy-pill-button-hubungi-admin {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(245, 249, 255, 1) 100%
  );
  border-radius: 9999px;
  border-style: solid;
  border-color: rgba(191, 219, 254, 0.7);
  border-width: 1px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 52px;
  position: relative;
  box-shadow: inset 0px 1px 0px 1px rgba(255, 255, 255, 1),
    0px 4px 14px 0px rgba(30, 64, 175, 0.07);
}
.svg9 {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
  overflow: visible;
}
.text6 {
  color: #1d4ed8;
  text-align: center;
  font-family: "WorkSans-SemiBold", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.small-footer-text-margin {
  padding: 28px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.small-footer-text {
  border-style: solid;
  border-color: rgba(219, 234, 254, 0.7);
  border-width: 1px 0px 0px 0px;
  padding: 16px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.akun-dibuat-oleh-admin-peran-terdeteksi-otomatis-dari-akun {
  color: #2b3b57;
  text-align: center;
  font-family: "OpenSans-Regular", sans-serif;
  font-size: 12px;
  line-height: 19.5px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container7 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.background2 {
  background: #10b981;
  border-radius: 9999px;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  position: relative;
}
.container8 {
  flex-shrink: 0;
  width: 182.38px;
  height: 16.5px;
  position: relative;
}
.server-operasional-kampus-online {
  color: #2b3b57;
  text-align: center;
  font-family: "OpenSans-Regular", sans-serif;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 400;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
}