/* body login */
body {
  /* background-color: #e9768f; */
  background-image: url("/asset/images/background-main-2.png");
  background-size: cover;
}

/* container pada login */
.container {
  /* display dalam bentuk flex */
  display: flex;
  /* align gambar tengah */
  align: center;
}

/* gambar disamping login */
.image {
  /* margin kanan 2 piksel */
  margin-right: 2px;
  bacground: none;
}

/* gambar pada kelas gambar */
.image img {
  /* margin atas 12% */
  margin-top: 12%;
  /* margin kiri 5% */
  margin-left: 5%;
  /* lebar 80% */
  width: 80%;
}

/* kelas untuk login card */
.cardLogin {
  /* box shadow untuk kelas */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  /* lebar card */
  width: 100vh;
  /* tinggi card */
  height: 50vh;
  /* margin card */
  margin-top: 12%;
  margin-right: 5%;
  /* padding dari card */
  padding: 18px;
  /* justify dari konten tengah */
  justify-content: center;
  /* align dari card yaitu tengah */
  align-items: center;
  /* align dari text yaitu tengah */
  text-align: center;
  /* index card yaitu 1 */
  z-index: 1;
  /* warna bg putih */
  background-color: white;
  /* border radius 10px */
  border-radius: 10px;
}

/* untuk title login */
.titleLogin {
  /* warna teks coklat */
  color: darkblue;
  /* opacity text 60 % */
  opacity: 70%;
  /* ukuran font 12 piksel */
  font-size: 16px;
}

/* untuk title card */
.titleCard {
  /* warna konten coklat */
  color: darkblue;
  /* opacity dari konten 80% */
  opacity: 80%;
  /* ukuran dari font 14 point */
  font-size: 14pt;
  /* margin bawah 20 piksel */
  margin-bottom: 20px;
}

/* kode untuk kelas login form */
.login-form {
  /* margin atas form */
  margin-top: 10px;
}

/* kode untuk sub form */
.sub-form {
  /* display model flex */
  display: flex;
  /* margin bawah 4 piksel */
  margin-bottom: 4px;
  /* margin kiri 6 piksel */
  margin-left: 6px;
}

/* kode untuk kolom input */
input {
  /* warna background dengan keterangan penting */
  background-color: #eee !important;
  /* opacity object 80% */
  opacity: 80%;
}

/* kode untuk password container */
.passwordContainer {
  /* posisi container relative */
  position: relative;
}

/* kode untuk password toggle */
.passwordToggle {
  /* posisi password ketika di aktifkan absolute */
  position: absolute;
  /* posisi kanan 10 piksel */
  right: 10px;
  /* posisi atas 70% */
  top: 70%;
  /* transform translate Y sebanyak -50% */
  transform: translateY(-50%);
  /* mengubah cursor menjadi pointer */
  cursor: pointer;
}

/* kode kelas formSelect */
.form-select {
  /* lebar dari kelas formSelect 34 vh */
  width: 34vh;
  /* mengubah cursor menjadi pointer */
  cursor: pointer;
}

/* kode untuk button siswa */
.btn-siswa {
  /* mengubah warna background menjadi gredient linear */
  background-image: linear-gradient(to right, #e9768f, #1d1c1c);
  /* border radius 15 piksel */
  border-radius: 15px;
  /* margin 20 piksel dikali 0 piksel */
  margin: 20px 0px;
  /* tinggi baris 35 piksel */
  line-height: 35px;
  /* lebar 100% */
  width: 100%;
  /* warna button putih */
  color: white;
  /* border kosong */
  border: none;
  /* semua item yang di button siswa selama 0.3 detik  */
  transition: all 0.3s ease;
}

/* tombol btn siswa saat di hover */
.btn-siswa:hover {
  /* mengubah gambar background menjadi linear */
  background-image: linear-gradient(to left, #e9768f, #1d1c1c);
}

/* kode tombol btn Guru */

.btn-guru {
  /* border radius 10 piksel */
  border-radius: 10px;
  /* padding 6 piksel dikali 70 piksel */
  padding: 6px;
  /* padding kiri ukuran 31.4 vh */
  padding-left: 15px;
  /* padding kanan ukuran 31.4 vh */
  padding-right: 15px;
  /* border 2 piksel solid */
  border: #e9768f 2px solid;
  /* margin bawah 20 piksel */
  margin-bottom: 20px;
  /* warna */
  color: #e9768f;
  /* text dekorasi kosong */
  text-decoration: none;
  /* semua transisi  ease selama 0.3 detik */
  transition: all 0.3s ease;
}

/* button hover guru */

.btn-guru:hover {
  /* bacground warna gradient linear */
  background-color: #e9768f;
  /* warna putih */
  color: white;
}

/* kode untuk button daftar */
.btn-daftar {
  /* background dengan warna gradient linear */
  background-image: linear-gradient(to right, #e9768f, #1d1c1c);
  /* border radius 10 piksel */
  border-radius: 10px;
  /* margin */
  margin: 20px;
  /* tinggi baris */
  line-height: 35px;
  /* lebar btn */
  width: 55%;
  /* border kosong */
  border: none;
  /* warna kontent putih */
  color: #fff;
  /* transisi ease selama 0.3 detik */
  transition: all 0.3s ease;
}

/* kode btn daftar hover */
.btn-daftar:hover {
  /* background gradient linear */
  background-image: linear-gradient(to left, #e9768f, #1d1c1c);
}

/* kode centerline */
.centerline {
  color: #1d1c1c;
  padding: 0 16px;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin: 0px;
}

/* kode baris */
.line {
  width: 100%;
  height: 1px;
  border-bottom: 2px dashed #b4b4b4;
  margin: 10px 0px;
}