:root {
  --primary-base-color: #008BA9;
  --primary-darken-color: #006A82;
  --secondary-base-color: #D08E0D;
  --secondary-darken-color: #946200;
  --accent-base-color: #00BA88;
  --accent-darken-color: #00966D;
}


/* ===== Perapian tampilan beranda OpenSID (tambahan responsif) ===== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, video, iframe, embed, object {
  max-width: 100%;
}
img {
  height: auto;
}
.container, .container-fluid {
  box-sizing: border-box;
}
.content, .content-wrapper, .main-content, .page-content {
  min-width: 0;
  box-sizing: border-box;
}
.content-wrapper .content {
  padding: 20px 15px;
}
.box, .small-box, .info-box, .panel, .card {
  max-width: 100%;
  overflow-wrap: anywhere;
}
h1, h2, h3, h4, h5, h6, p, a, label, td, th {
  overflow-wrap: break-word;
}
table {
  max-width: 100%;
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
input, select, textarea, button {
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .content-wrapper .content {
    padding: 12px 8px;
  }
  .container, .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }
  .row {
    margin-left: -5px;
    margin-right: -5px;
  }
  .row > [class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 12px;
  }
  .box, .small-box, .info-box, .panel, .card {
    margin-bottom: 12px;
  }
  .small-box h3 {
    font-size: 22px;
    line-height: 1.25;
    white-space: normal;
  }
  .small-box p {
    white-space: normal;
  }
  .navbar, .navbar-nav {
    max-width: 100%;
  }
  .table-responsive table {
    min-width: 560px;
  }
}