/*globals.css*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Inter:var(--body-base-font-weight),var(--single-line-body-base-font-weight)|Alice:400|Alegreya:700|Karla:300,italic|Junge:400|Gurajada:400|Joan:400");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
/*styleguide.css*/
:root {
  --single-line-body-base-font-family: "Inter", Helvetica;
  --single-line-body-base-font-weight: 400;
  --single-line-body-base-font-size: 16px;
  --single-line-body-base-letter-spacing: 0px;
  --single-line-body-base-line-height: 100%;
  --single-line-body-base-font-style: normal;
  --body-base-font-family: "Inter", Helvetica;
  --body-base-font-weight: 400;
  --body-base-font-size: 16px;
  --body-base-letter-spacing: 0px;
  --body-base-line-height: 139.9999976158142%;
  --body-base-font-style: normal;
}

/*style.css*/
.alert {
  display: none;  /* Mulai dengan disembunyikan */
  opacity: 0;
  transition: opacity 0.5s ease; /* Efek transisi */
}
.alert.show {
  display: block;
  opacity: 1; /* Menampilkan alert dengan opacity penuh */
}

.is-invalid {
  border-color: red;  /* Mengubah warna border menjadi merah jika ada error */
}

.invalid-feedback {
  color: red;  /* Menampilkan pesan kesalahan dengan warna merah */
  font-size: 0.875em;  /* Ukuran font sedikit lebih kecil */
  margin-top: 5px;  /* Memberi jarak antara input dan pesan kesalahan */
}

.smart-layers-pointers,
.smart-layers-pointers * {
  pointer-events: auto;
  visibility: visible;
}
.login-PPDB {
  background-color: #ffffff;
  margin: 0px;
  position: relative;
  overflow-x: hidden;
  display: flex;
  width: 100%;
}

.login-PPDB .overlap-wrapper {
  background-color: #ffffff;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.login-PPDB .overlap {
  width: 100%;
  height: 1032px;
  top: 0px;
}

.login-PPDB .group {
  position: absolute;
  width: 495px;
  height: 701px;
  top: 225px;
  left: 654px;
}

.login-PPDB .button-group {
  width: 455px;
  gap: 16px;
  position: absolute;
  top: 587px;
  left: 0;
  display: flex;
  align-items: center;
}

.login-PPDB .button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid;
  border-color: transparent;
}

.login-PPDB .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--single-line-body-base-font-family);
  font-weight: var(--single-line-body-base-font-weight);
  color: transparent;
  font-size: var(--single-line-body-base-font-size);
  letter-spacing: var(--single-line-body-base-letter-spacing);
  line-height: var(--single-line-body-base-line-height);
  white-space: nowrap;
  font-style: var(--single-line-body-base-font-style);
  animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  display: block;
  opacity: 0;
}

.login-PPDB .div {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--size-space-300);
  position: relative;
  align-self: stretch;
  max-width: 100%;
  width: 100%;
  flex: 0 0 auto;
}

.login-PPDB .checkbox-and-label {
  position: absolute;
  width: 100%;
  top: 70%;
  left: 5%;
  gap: var(--size-space-300);
}

.login-PPDB .text-wrapper-2 {
  position: absolute;
  width: 455px;
  top: -2px;
  left: 24px;
  font-family: var(--body-base-font-family);
  font-weight: var(--body-base-font-weight);
  color: transparent;
  font-size: var(--body-base-font-size);
  letter-spacing: var(--body-base-letter-spacing);
  line-height: var(--body-base-line-height);
  font-style: var(--body-base-font-style);
  animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  display: block;
  opacity: 0;
}

.login-PPDB .password {
  display: flex;
  flex-direction: column;
  width: 455px;
  align-items: flex-start;
  gap: 8px;
  position: absolute;
  top: 405px;
  left: 0;
}

.login-PPDB .text-wrapper-3 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--body-base-font-family);
  font-weight: var(--body-base-font-weight);
  color: transparent;
  font-size: var(--body-base-font-size);
  letter-spacing: var(--body-base-letter-spacing);
  line-height: var(--body-base-line-height);
  font-style: var(--body-base-font-style);
  animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  display: block;
  opacity: 0;
}

.login-PPDB .input {
  display: flex;
  min-width: 240px;
  align-items: center;
  padding: 12px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: -1px;
  margin-left: -1px;
  margin-right: -1px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid;
  border-color: transparent;
}

.login-PPDB .text-wrapper-4 {
  position: relative;
  flex: 1;
  margin-top: -0.5px;
  font-family: var(--single-line-body-base-font-family);
  font-weight: var(--single-line-body-base-font-weight);
  color: transparent;
  font-size: var(--single-line-body-base-font-size);
  letter-spacing: var(--single-line-body-base-letter-spacing);
  line-height: var(--single-line-body-base-line-height);
  font-style: var(--single-line-body-base-font-style);
  animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  display: block;
  opacity: 0;
}

.login-PPDB .email {
  display: flex;
  flex-direction: column;
  width: 455px;
  align-items: flex-start;
  gap: 8px;
  position: absolute;
  top: 260px;
  left: 0;
}

.login-PPDB .email-2 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--body-base-font-family);
  font-weight: var(--body-base-font-weight);
  color: transparent;
  font-size: var(--body-base-font-size);
  letter-spacing: var(--body-base-letter-spacing);
  line-height: var(--body-base-line-height);
  font-style: var(--body-base-font-style);
  background: transparent;
  border: none;
  padding: 0;
}

.login-PPDB .input-2 {
  min-width: 240px;
  padding: 12px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  margin-bottom: -1px;
  margin-left: -1px;
  margin-right: -1px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid;
  border-color: transparent;
  background: none;
  flex: 1;
  margin-top: -0.5px;
  font-family: var(--single-line-body-base-font-family);
  font-weight: var(--single-line-body-base-font-weight);
  color: transparent;
  font-size: var(--single-line-body-base-font-size);
  letter-spacing: var(--single-line-body-base-letter-spacing);
  line-height: var(--single-line-body-base-line-height);
  font-style: var(--single-line-body-base-font-style);
}

.login-PPDB .register-nama {
  display: flex;
  flex-direction: column;
  width: 455px;
  align-items: flex-start;
  gap: 8px;
  position: absolute;
  top: 144px;
  left: 0;
}

.login-PPDB .selamat-datang-di {
  position: absolute;
  width: 437px;
  height: 69px;
  top: 0;
  left: 11px;
}

.login-PPDB .p {
  top: -1px;
  left: -17px;
  font-family: "Alegreya", Helvetica;
  font-weight: 700;
  color: transparent;
  font-size: 26px;
  text-align: center;
  letter-spacing: 0;
  line-height: 36.4px;
  text-decoration: underline;
  position: absolute;
  width: 437px;
}

.login-PPDB .text-wrapper-5 {
  position: absolute;
  width: 509px;
  top: 480px;
  left: 137px;
  transition: all 0.3s ease;
  font-family: "Karla", Helvetica;
  font-weight: 300;
  font-style: italic;
  color: #ffffff;
  font-size: 24px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  opacity: 0;
  transform: translate(0, 25px);
  animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  display: block;
  opacity: 0;
}

.login-PPDB .text-wrapper-6 {
  position: absolute;
  width: 509px;
  top: 517px;
  left: 137px;
  font-family: "Junge", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 36px;
  text-align: center;
  letter-spacing: -2.52px;
  line-height: 43.7px;
  text-decoration: underline;
  white-space: nowrap;
  opacity: 0;
  transform: translate(0, 25px);
  animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  display: block;
  opacity: 0;
}

.login-PPDB .bg-ppdb {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0px;
}

.login-PPDB .group-2 {
  position: absolute;
  width: 30%;
  height: 466px;
  top: 315px;
  left: 114px;
  background-color: #d9d9d94f;
  border-radius: 23px;
  backdrop-filter: blur(4px) brightness(100%);
  -webkit-backdrop-filter: blur(4px) brightness(100%);
  animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  display: block;
  opacity: 0;
}

.login-PPDB .element {
  position: absolute;
  height: 35%;
  top: 50%;
  left: 2%;
  object-fit: cover;
}

.login-PPDB .LOGO-TKR {
  position: absolute;
  width: 29.2%;
  height: 29%;
  top: 53%;
  left: 36%;
  object-fit: cover;
}

.login-PPDB .LOGO-TKJ {
  position: absolute;
  width: 26.7%;
  height: 28%;
  top: 54%;
  left: 70%;
  object-fit: cover;
}

.login-PPDB .logo-PK {
  position: absolute;
  height: 50%;
  top: 7%;
  left: 15%;
  object-fit: cover;
}

.login-PPDB .overlap-group-wrapper {
  position: absolute;
  width: 100%;
  height: 39px;
  top: 0;
  left: 0;
}

.login-PPDB .overlap-group {
  position: relative;
  width: 100%;
  height: 39px;
  left: 0;
}

.login-PPDB .rectangle {
	position: absolute;
    width: 100%;
    height: 25px;
    top: 7px;
    left: 0;
    background-color: #2a9f5f87;
    border: 1px solid;
    border-color: #000000;
}

.login-PPDB .email-3 {
  position: absolute;
  width: 19.40%;
  height: 39px;
  top: 0;
  left: 80%;
  transition: all 0.2s ease;
  opacity: 1000;
  transform: translate(25px, 0);
}

.login-PPDB .smkmuloajanan-gmail {
  position: absolute;
  top: 0;
  left: 13%;
  font-family: "Gurajada", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.2rem;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  background: transparent;
  border: none;
  padding: 0;
}

.login-PPDB .pngegg {
  position: absolute;
  height: 17px;
  top: 11px;
  left: 2%;
  object-fit: cover;
}

.login-PPDB .maps {
  position: absolute;
  width: 20%;
  height: 39px;
  top: 0;
  left: 60%;
  transition: all 0.2s ease;
  opacity: 1000;
  transform: translate(25px, 0);
}

.login-PPDB .text-wrapper-7 {
  position: absolute;
  top: 0;
  left: 26px;
  font-family: "Gurajada", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.2rem;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  opacity: 100;
}

.login-PPDB .pngwing-com {
  position: absolute;
  height: 22px;
  top: 8px;
  left: 0;
  object-fit: cover;
}

.login-PPDB .klik-disini {
  position: absolute;
  height: 753px;
  top: 193px;
  left: 54%;
  background-color: white;
  border-radius: var(--size-radius-200);
  border: 3px solid;
  border-color: var(--color-border-positive-tertiary);
  box-shadow: 0px 4px 4px #00000040;
  gap: var(--size-space-600);
  animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  display: block;
  opacity: 0;
  right: 5%;
  width: 437px;
}

.login-PPDB .button-group-2 {
  display: flex;
  width: 90%;
  align-items: center;
  gap: var(--size-space-400);
  position: absolute;
  top: 80%;
  left: 5%;
}

.login-PPDB .button-2 {
  all: unset;
  box-sizing: border-box;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: #2c2c2c;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid;
  border-color: #2c2c2c;
  display: flex;
  align-items: center;
	top: 485px;
}

.login-PPDB .text-wrapper-8 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--single-line-body-base-font-family);
  font-weight: var(--single-line-body-base-font-weight);
  color: #FFF5F5;
  font-size: var(--single-line-body-base-font-size);
  letter-spacing: var(--single-line-body-base-letter-spacing);
  line-height: var(--single-line-body-base-line-height);
  white-space: nowrap;
  font-style: var(--single-line-body-base-font-style);
  animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  display: block;
  opacity: 0;
}

.login-PPDB .checkbox-field {
  display: flex;
  flex-direction: column;
  width: 455px;
  align-items: flex-start;
  position: absolute;
  top: 566px;
  left: 44px;
}

.login-PPDB .div-2 {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.login-PPDB .text-wrapper-9 {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: var(--body-base-font-family);
  font-weight: var(--body-base-font-weight);
  color: #1e1e1e;
  font-size: var(--body-base-font-size);
  letter-spacing: var(--body-base-letter-spacing);
  line-height: var(--body-base-line-height);
  font-style: var(--body-base-font-style);
  animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  display: block;
  opacity: 0;
}

.login-PPDB .space {
  position: relative;
  width: 16px;
  height: 16px;
}

.login-PPDB .selamat-datang-di-wrapper {
  top: 7%;
  left: 9%;
  position: absolute;
  width: 82%;
}

.login-PPDB .selamat-datang-di-2 {
  top: -1px;
  left: 0%;
  font-family: "Alegreya", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 26px;
  text-align: center;
  letter-spacing: 0;
  line-height: 36.4px;
  text-decoration: underline;
  position: absolute;
  width: 100%;
}

.login-PPDB .email-4 {
  display: flex;
  flex-direction: column;
  width: 90%;
  align-items: flex-start;
  gap: var(--size-space-200);
  position: absolute;
  top: 40%;
  left: 5%;
}

.login-PPDB .email-5 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--body-base-font-family);
  font-weight: var(--body-base-font-weight);
  color: #1e1e1e;
  font-size: var(--body-base-font-size);
  letter-spacing: var(--body-base-letter-spacing);
  line-height: var(--body-base-line-height);
  font-style: var(--body-base-font-style);
  background: transparent;
  border: none;
  padding: 0;
}

.login-PPDB .input-3 {
  min-width: 240px;
  padding: 12px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  margin-bottom: -1px;
  margin-left: -1px;
  margin-right: -1px;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid;
  border-color: #d9d9d9;
  flex: 1;
  margin-top: -0.5px;
  font-family: var(--single-line-body-base-font-family);
  font-weight: var(--single-line-body-base-font-weight);
  color: #020202;
  font-size: var(--single-line-body-base-font-size);
  letter-spacing: var(--single-line-body-base-letter-spacing);
  line-height: var(--single-line-body-base-line-height);
  font-style: var(--single-line-body-base-font-style);
}

.login-PPDB .password-2 {
  display: flex;
  flex-direction: column;
  width: 90%;
  align-items: flex-start;
  gap: var(--size-space-200);
  position: absolute;
  top: 56%;
  left: 5%;
}

.login-PPDB .text-wrapper-10 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--body-base-font-family);
  font-weight: var(--body-base-font-weight);
  color: #020202;
  font-size: var(--body-base-font-size);
  letter-spacing: var(--body-base-letter-spacing);
  line-height: var(--body-base-line-height);
  font-style: var(--body-base-font-style);
}

.login-PPDB .div-wrapper {
  display: flex;
  min-width: 240px;
  align-items: center;
  padding: 12px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: -1px;
  margin-left: -1px;
  margin-right: -1px;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid;
  border-color: #d9d9d9;
}

.login-PPDB .text-wrapper-11 {
  position: relative;
  flex: 1;
  margin-top: -0.5px;
  font-family: var(--single-line-body-base-font-family);
  font-weight: var(--single-line-body-base-font-weight);
  color: #b3b3b3;
  font-size: var(--single-line-body-base-font-size);
  letter-spacing: var(--single-line-body-base-letter-spacing);
  line-height: var(--single-line-body-base-line-height);
  font-style: var(--single-line-body-base-font-style);
}

.login-PPDB .sudah-punya-akun {
  position: absolute;
  width: 138px;
  height: 44px;
  top: 689px;
  left: 182px;
}

.login-PPDB .klik-disini-2 {
  color: #00a5ff;
  position: absolute;
  width: 32%;
  top: 31%;
  left: 15%;
  font-family: "Alice", Helvetica;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: 19.6px;
}
.login-PPDB .klik-disini-5 {
  color: #00a5ff;
  position: absolute;
  width: 25%;
  top: 165%;
  left: 34%;
  font-family: "Alice", Helvetica;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: 19.6px;
  opacity: 100%;
}

.login-PPDB .centang-tampilkan {
  position: absolute;
  width: 56px;
  height: 14px;
  top: 570px;
  left: 4px;
}

.login-PPDB .check-box-outline {
  position: absolute;
  width: 16px;
  height: 15px;
  top: -1px;
  left: 17px;
}

.login-PPDB .navbar-wrapper {
	position: absolute;
    width: 100%;
    height: 81px;
    top: 33px;
    left: 0;
}

.login-PPDB .navbar {
    position: relative;
    width: 100%;
    height: 85px;
    top: -2px;
    left: -2px;
    background-color: #008080;
    border: 2px solid;
    border-color: #000000;
    box-shadow: inset 0px 4px 4px #00000040;
}

.login-PPDB .overlap-group-2 {
  position: absolute;
  width: 350px;
  height: 70px;
  top: 10px;
  left: 5%;
}

.login-PPDB .logo-alt {
  position: absolute;
  cursor: pointer;
  pointer-events: auto;
  width: 64%;
  height: 59px;
  top: 0;
  left: 0;
  transition: all 0.2s ease;
  object-fit: cover;
  visibility: visible;
  animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  display: block;
  opacity: 0;
}

.login-PPDB .sddefault-removebg {
  position: absolute;
  width: auto;
  height: 39px;
  top: 31px;
  left: 42%;
  FONT-WEIGHT: 200;
}

.login-PPDB .text-wrapper-12 {
  position: absolute;
  top: 30%;
  left: 44%;
  transform: translateX(-50%);
  transition: all 0.2s ease;
  font-family: "Joan", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 1.5rem;
  text-align: right;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  width: auto;
}

.login-PPDB .text-wrapper-13 {
  position: absolute;
  top: 30%;
  left: 55%;
  transform: translateX(-50%);
  transition: all 0.2s ease;
  font-family: "Joan", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 1.5rem;
  text-align: right;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  width: auto;
  transition: all 0.2s ease;
}

.login-PPDB .text-wrapper-14 {
  position: absolute;
    top: 30%;
    left: 44%;
    transform: translateX(-50%);
    transition: all 0.2s ease;
    font-family: "Joan", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 1.5rem;
    text-align: right;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
    width: auto;
}

.login-PPDB .text-wrapper-15 {
  position: absolute;
    top: 30%;
    left: 55%;
    transform: translateX(-50%);
    transition: all 0.2s ease;
    font-family: "Joan", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 1.5rem;
    text-align: right;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
    width: auto;
    transition: all 0.2s ease;
}

.login-PPDB .text-wrapper-16 {
  position: absolute;
    top: 30%;
    left: 67%;
    transform: translateX(-50%);
    transition: all 0.2s ease;
    font-family: "Joan", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 1.5rem;
    text-align: right;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
    width: auto;
    transition: all 0.2s ease;
}

.login-PPDB .text-wrapper-17 {
  position: absolute;
    top: 30%;
    left: 72.5%;
    transform: translateX(-50%);
    transition: all 0.2s ease;
    font-family: "Joan", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 1.5rem;
    text-align: right;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
    width: auto;
    transition: all 0.2s ease;
}

.login-PPDB .check-box-outline-wrapper {
  position: absolute;
  width: 56px;
  height: 14px;
  top: 740px;
  left: 327px;
}

.login-PPDB .sudah-punya-akun-2 {
  position: absolute;
  width: 138px;
  height: 44px;
  top: 900px;
  left: 497px;
  animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  display: block;
  opacity: 0;
}

.login-PPDB .text-wrapper-18 {
  position: absolute;
    top: 30%;
    left: 79.5%;
    transform: translateX(-50%);
    transition: all 0.2s ease;
    font-family: "Joan", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 1.5rem;
    text-align: right;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
    width: auto;
    transition: all 0.2s ease;
}

.login-PPDB .text-wrapper-19 {
position: absolute;
top: 30%;
left: 90%;
transform: translateX(-50%);
transition: all 0.2s ease;
font-family: "Joan", Helvetica;
font-weight: 400;
color: #ffffff;
font-size: 1.5rem;
text-align: right;
line-height: normal;
-webkit-font-smoothing: antialiased;
animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
width: auto;
transition: all 0.2s ease;
}
.animate-enter6 {
  animation: animate-enter6-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  display: block;
  opacity: 0;
}
@keyframes animate-enter6-frames {
  from{opacity: 0;
}
to{opacity: 1;
}
}

/* Gaya Umum untuk Tampilan Desktop */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Header */
.navbar {
  background-color: #008080;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}
/* Gaya untuk Layar Laptop */
@media (max-width: 1360px) {
  .text-wrapper-17 {
    font-size: 1.1rem !important;
  }
  .text-wrapper-16 {
    font-size: 1.1rem !important;
  }
  .text-wrapper-15 {
    font-size: 1.1rem !important;
  }
  .text-wrapper-14 {
    font-size: 1.1rem !important;
  }
  .text-wrapper-13 {
    font-size: 1.1rem !important;
  }
  .text-wrapper-12 {
    font-size: 1.1rem !important;
  }
}
/* Gaya untuk Layar Tablet */
@media (max-width: 1000px) {
  .text-wrapper-17 {
    font-size: 0.8rem !important;
  }
  .text-wrapper-16 {
    font-size: 0.8rem !important;
  }
  .text-wrapper-15 {
    font-size: 0.8rem !important;
  }
  .text-wrapper-14 {
    font-size: 0.8rem !important;
  }
  .text-wrapper-13 {
    font-size: 0.8rem !important;
  }
  .text-wrapper-12 {
    font-size: 0.8rem !important;
  }
}
/* Gaya untuk Layar Tablet */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    text-align: center;
  }
  .login-PPDB {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }
  .button-group {
    width: 100%;
    flex-direction: column;
  }
  .text-wrapper-17 {
    font-size: 0.7rem !important;
  }
  .text-wrapper-16 {
    font-size: 0.7rem !important;
  }
  .text-wrapper-15 {
    font-size: 0.7rem !important;
  }
  .text-wrapper-14 {
    font-size: 0.7rem !important;
  }
  .text-wrapper-13 {
    font-size: 0.7rem !important;
  }
  .text-wrapper-12 {
    font-size: 0.7rem !important;
  }
}

/* Gaya untuk Layar Ponsel */
@media (max-width: 620px) {
  .login-PPDB {
    padding: 10px;
  }
  .text-wrapper-6 {
    font-size: 24px;
    text-align: center;
  }
  .login-PPDB .klik-disini {
    font-size: 12px;
    left: 5%;
    width: auto;
}
  .selamat-datang-di-2{
    width: 10%;
  }
  .text-wrapper-12{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 35% !important;
  }
  .text-wrapper-13{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 48% !important;
  }
  .text-wrapper-14{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 41% !important;
  }
  .text-wrapper-15{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 53% !important;
  }
  .text-wrapper-16{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 67% !important;
  }
  .text-wrapper-17{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 71% !important;
  }
  .text-wrapper-18{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 79% !important;
  }
  .text-wrapper-19{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 88% !important;
  }
  .maps{
    font-size: 10px !important;
    left: 20% !important;
    
  }
  .text-wrapper-7{
    font-size: 10px !important;
    top: 30% !important;
  }
  .login-PPDB .button-2{
    top:580px;
  }
  .email-3{
    font-size: 10px !important;
    left: 55% !important;
  }
  .smkmuloajanan-gmail{
    font-size: 10px !important;
    top: 30% !important;
    left: 35% !important;
  }
  .logo-alt{
    width: 40% !important;
    height: auto !important;
    left: -5% !important;
  }
  .sddefault-removebg{
    width: 15% !important;
    height: auto !important;
    left: 22% !important;
    top: 25% !important;
  }
}

/* Gaya untuk Layar Ponsel iphone 12 pro dan lainnya */
@media (max-width: 390px) {
  .login-PPDB {
    padding: 8px;
  }
  .text-wrapper-6 {
    font-size: 24px;
    text-align: center;
  }
  .button-group {
    gap: 10px;
    width: 100%;
  }
  .login-PPDB .klik-disini {
    font-size: 12px;
    left: 5%;
    width: auto;
}
  .selamat-datang-di-2{
    width: 10%;
  }
  .klik-disini-2{
    font-size: 1px;
    width: 2%;
  }
  .text-wrapper-12{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 35% !important;
  }
  .text-wrapper-13{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 48% !important;
  }
  .text-wrapper-14{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 38% !important;
  }
  .text-wrapper-15{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 51% !important;
  }
  .text-wrapper-16{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 66% !important;
  }
  .text-wrapper-17{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 70% !important;
  }
  .text-wrapper-18{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 78% !important;
  }
  .text-wrapper-19{
    padding: 10px;
    font-size: 0.5rem !important;
    left: 90% !important;
  }
  .login-PPDB .button-2{
    top:580px;
  }
  .logo-alt{
    width: 35% !important;
    height: auto !important;
    left: -6% !important;
  }
  .sddefault-removebg{
    width: 13% !important;
    height: auto !important;
    left: 16% !important;
    top: 25% !important;
  }
}