/* ===========================================
   DESKTOP BESAR (Monitor 2K / 27")
=========================================== */
@media (min-width: 1600px) {
}

/* ===========================================
   DESKTOP (1920px - 1599px)
=========================================== */
@media (max-width: 1599px) {
}

/* ===========================================
   LAPTOP BESAR (1366px - 1440px)
=========================================== */
@media (max-width: 1400px) {
}

/* ===========================================
   LAPTOP (1024px - 1365px)
=========================================== */
@media (max-width: 1200px) {
  .sidebar {
    width: 240px;
  }

  .main {
    margin-left: 240px;
  }
}

/* ===========================================
   TABLET LANDSCAPE
=========================================== */
@media (max-width: 992px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.show {
    transform: translateX(0);
  }
  .main {
    margin-left: 0;
    width: 100%;
  }
  .sidebar-overlay.show {
    opacity: 1;

    visibility: visible;
  }
}
/* ===========================================
   TABLET PORTRAIT
=========================================== */
@media (max-width: 768px) {
  .main {
    padding: 20px;
  }
  .topbar h1 {
    font-size: 32px;
  }
  .topbar p {
    font-size: 15px;
  }
  .logo {
    gap: 14px;
  }
  .logo-image {
    width: 62px;
    height: 62px;
  }
  .logo-image img {
    width: 48px;
    height: 48px;
  }
}
/* ===========================================
   MOBILE BESAR
=========================================== */
@media (max-width: 576px) {
  .top-action {
    display: none;
  }
  .menu-toggle {
    width: 50px;
    height: 50px;
  }
}
/* ===========================================
   MOBILE KECIL
=========================================== */
@media (max-width: 400px) {
}