:root {
  --color-success:green;
  --color-primary:#0077ff;
  --color-danger:red;
  --color-warning:orange;
  --color-secondary:lightgrey;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scrollbar-color: #e4e4e4 #f4f4f4;
}

*:hover {
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    display: block;
}

*::-webkit-scrollbar-track {
    background: #e7e7e7;
}

*::-webkit-scrollbar-thumb {
    background: #b5b5b5;
    border-radius: 10px;
}

body .loginpage {
  position: relative;
  z-index: 1;
}

body .loginpage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0.1;
}
.content {
  display: grid;
  grid-template-columns: 250px 1fr;
  /* Tambahkan jarak (gap) antar kolom */
  gap: 20px;
  /* Tambahkan padding atau max-width sesuai kebutuhan */
  /* max-width: 1200px; */
}

aside {
  /* Membuat sidebar tetap di tempatnya saat halaman di-scroll */
  position: fixed;
  /* Atur di mana posisi fixed-nya */
  top: 20px; /* Jarak dari atas (sesuaikan dengan padding container) */
  left: auto; /* Dikelola oleh margin/padding global */

  /* Lebar harus didefinisikan secara eksplisit karena position: fixed */
  width: 250px;
  /* Sesuaikan tinggi agar mengisi viewport */
  height: calc(
    100vh - 40px
  ); /* 100% tinggi viewport dikurangi top dan bottom padding/margin */

  /* Styling lainnya */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* padding: 15px; */
  background-color: #f8f8f8;
  overflow-y: auto; /* Tambahkan scroll jika konten sidebar lebih panjang dari viewport */

  ol {
    list-style: none;
    padding: 0;
    margin: 0;
    --link-text-color: #333;
    li {
      padding: 10px;
      color: var(--link-text-color);
      > a {
        display: flex;
        align-items: center;
        gap: 5px;
        > i {
          width: 25px;
        }
      }
      a,
      a:link,
      a:visited,
      a:active,
      a:hover {
        text-decoration: none;
        color: var(--link-text-color);
      }
    }

    li:hover {
      background-color: #f0f0f0;
      cursor: pointer;
    }
  }
}

/* Styling untuk Main Content */
main {
  padding: 15px;
  background-color: #ffffff;
  /* Pastikan main content berada di kolom kedua */
  grid-column: 2 / 3;
}

.login {
  display: flex;
  grid-template-columns: 1fr 1fr;
  /* Tambahkan jarak (gap) antar kolom */
  gap: 20px;

  .login-area {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 40px);
    background-color: #f8f8f8;
  }

  .download-area {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    > div {
      width: 100%;
      text-align: center;
    }
  }
}

#loading.on {
  display: flex !important;
}

#loading {
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  inset: 0;
  z-index: 2001;
  color: rgba(0, 128, 255, 0.8);
  background-color: rgba(121, 159, 193, 0.6);
  display: none;
}

#loading .loader {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  pointer-events: auto;
  i {
    font-size: 4em;
  }
}

.img-square {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
}

.img-scale {
  width: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: var(--scale);
}

.fs-6em {
  font-size: 0.6em;
}

.fs-7em {
  font-size: 0.7em;
}

.fs-8em {
  font-size: 0.8em;
}

.fs-9em {
  font-size: 0.9em;
}

.fs-10em {
  font-size: 1em;
}

.fs-12em {
  font-size: 1.2em;
}

.fs-14em {
  font-size: 1.4em;
}

.fs-15em {
  font-size: 1.5em;
}

.fs-16em {
  font-size: 1.6em;
}

.fs-18em {
  font-size: 1.8em;
}

.fs-20em {
  font-size: 2em;
}

.fs-25em {
  font-size: 2.5em;
}

.fs-30em {
  font-size: 3em;
}

.fs-35em {
  font-size: 3.5em;
}

.fs-40em {
  font-size: 4em;
}

.fs-45em {
  font-size: 4.5em;
}

.fs-50em {
  font-size: 5em;
}

.cursor-pointer {
  cursor: pointer;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  justify-content: center;
}

.flex-around {
  display: flex;
  justify-content: space-around;
}

.modal {
  pointer-events: auto;
}

@media screen and (max-width: 768px) {
  .login {
    .login-area {
      display: none;
    }
    .download-area {
      width: 100%;
      height: calc(100vh-40px);
    }
  }
}