.pdf-container {
            position: relative;
            width: 100%;
            padding-bottom: 75%; /* Rasio aspek, bisa disesuaikan */
            height: 0;
        }
        .pdf-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
/*MENU APLIKASI*/
:root,
[data-bs-theme="light"] {
  --gk-blue: #0d6efd;
  --gk-indigo: #6610f2;
  --gk-purple: #6f42c1;
  --gk-pink: #d63384;
  --gk-red: #dc3545;
  --gk-orange: #fd7e14;
  --gk-yellow: #ffc107;
  --gk-green: #198754;
  --gk-teal: #20c997;
  --gk-cyan: #0dcaf0;
  --gk-black: #000;
  --gk-gray: #475569;
  --gk-gray-dark: #1e293b;
  --gk-gray-black: #000;
  --gk-gray-100: #f1f5f9;
  --gk-gray-200: #e2e8f0;
  --gk-gray-300: #cbd5e1;
  --gk-gray-400: #94a3b8;
  --gk-gray-500: #64748b;
  --gk-gray-600: #475569;
  --gk-gray-700: #334155;
  --gk-gray-800: #1e293b;
  --gk-gray-900: #0f172a;
  --gk-gray-1000: #0b1324;
  --gk-gray-white: #fff;
  --gk-primary: #754ffe;
  --gk-secondary: #64748b;
  --gk-success: #38a169;
  --gk-info: #0ea5e9;
  --gk-warning: #f59e0b;
  --gk-danger: #dc2626;
  --gk-light: #f1f5f9;
  --gk-dark: #0f172a;
  --gk-white: #fff;
  --gk-light-primary: #ede9fe;
  --gk-light-danger: #fad9d8;
  --gk-light-info: #e1f6ff;
  --gk-light-warning: #ffeeda;
  --gk-light-secondary: #e4e3e9;
  --gk-light-success: #d1f5ea;
  --gk-light-dark: #d1cfd8;
  --gk-dark-primary: #593cc1;
  --gk-dark-warning: #c28135;
  --gk-dark-info: #51a0c2;
  --gk-dark-danger: #ae302e;
  --gk-dark-success: #139a74;
  --gk-dark-secondary: #5c596d;
  --gk-primary-rgb: 117, 79, 254;
  --gk-secondary-rgb: 100, 116, 139;
  --gk-success-rgb: 56, 161, 105;
  --gk-info-rgb: 14, 165, 233;
  --gk-warning-rgb: 245, 158, 11;
  --gk-danger-rgb: 220, 38, 38;
  --gk-light-rgb: 241, 245, 249;
  --gk-dark-rgb: 15, 23, 42;
  --gk-light-primary-rgb: 237, 233, 254;
  --gk-light-danger-rgb: 250, 217, 216;
  --gk-light-info-rgb: 225, 246, 255;
  --gk-light-warning-rgb: 255, 238, 218;
  --gk-light-secondary-rgb: 228, 227, 233;
  --gk-light-success-rgb: 209, 245, 234;
  --gk-light-dark-rgb: 209, 207, 216;
  --gk-dark-primary-rgb: 89, 60, 193;
  --gk-dark-warning-rgb: 194, 129, 53;
  --gk-dark-info-rgb: 81, 160, 194;
  --gk-dark-danger-rgb: 174, 48, 46;
  --gk-dark-success-rgb: 19, 154, 116;
  --gk-dark-secondary-rgb: 92, 89, 109;
  --gk-primary-text-emphasis: #2f2066;
  --gk-secondary-text-emphasis: #282e38;
  --gk-success-text-emphasis: #16402a;
  --gk-info-text-emphasis: #06425d;
  --gk-warning-text-emphasis: #623f04;
  --gk-danger-text-emphasis: #580f0f;
  --gk-light-text-emphasis: #334155;
  --gk-dark-text-emphasis: #334155;
  --gk-primary-bg-subtle: #e3dcff;
  --gk-secondary-bg-subtle: #e0e3e8;
  --gk-success-bg-subtle: #d7ece1;
  --gk-info-bg-subtle: #cfedfb;
  --gk-warning-bg-subtle: #fdecce;
  --gk-danger-bg-subtle: #f8d4d4;
  --gk-light-bg-subtle: #f8fafc;
  --gk-dark-bg-subtle: #94a3b8;
  --gk-primary-border-subtle: #c8b9ff;
  --gk-secondary-border-subtle: #c1c7d1;
  --gk-success-border-subtle: #afd9c3;
  --gk-info-border-subtle: #9fdbf6;
  --gk-warning-border-subtle: #fbd89d;
  --gk-danger-border-subtle: #f1a8a8;
  --gk-light-border-subtle: #e2e8f0;
  --gk-dark-border-subtle: #64748b;
  --gk-white-rgb: 255, 255, 255;
  --gk-black-rgb: 0, 0, 0;
  --gk-font-sans-serif: "Inter", sans-serif;
  --gk-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
  "Liberation Mono", "Courier New", monospace;
  --gk-gradient: linear-gradient(
    180deg,
    hsla(0, 0%, 100%, 0.15),
    hsla(0, 0%, 100%, 0)
    );
  --gk-body-font-family: "Inter", sans-serif;
  --gk-body-font-size: 0.938rem;
  --gk-body-font-weight: 400;
  --gk-body-line-height: 1.6;
  --gk-body-color: #334155;
  --gk-body-color-rgb: 51, 65, 85;
  --gk-body-bg: #f1f5f9;
  --gk-body-bg-rgb: 241, 245, 249;
  --gk-emphasis-color: #000;
  --gk-emphasis-color-rgb: 0, 0, 0;
  --gk-secondary-color: rgba(51, 65, 85, 0.75);
  --gk-secondary-color-rgb: 51, 65, 85;
  --gk-secondary-bg: #e2e8f0;
  --gk-secondary-bg-rgb: 226, 232, 240;
  --gk-tertiary-color: rgba(51, 65, 85, 0.5);
  --gk-tertiary-color-rgb: 51, 65, 85;
  --gk-tertiary-bg: #f1f5f9;
  --gk-tertiary-bg-rgb: 241, 245, 249;
  --gk-heading-color: var(--gk-gray-800);
  --gk-link-color: #754ffe;
  --gk-link-color-rgb: 117, 79, 254;
  --gk-link-decoration: none;
  --gk-link-hover-color: #5e3fcb;
  --gk-link-hover-color-rgb: 94, 63, 203;
  --gk-code-color: #d63384;
  --gk-highlight-color: #334155;
  --gk-highlight-bg: #fff3cd;
  --gk-border-width: 1px;
  --gk-border-style: solid;
  --gk-border-color: var(--gk-border-color);
  --gk-border-color-translucent: #cbd5e1;
  --gk-border-radius: 0.375rem;
  --gk-border-radius-sm: 0.25rem;
  --gk-border-radius-lg: 0.5rem;
  --gk-border-radius-xl: 0.75rem;
  --gk-border-radius-xxl: 2rem;
  --gk-border-radius-2xl: var(--gk-border-radius-xxl);
  --gk-border-radius-pill: 50rem;
  --gk-box-shadow: 0px 3px 6px rgba(17, 24, 39, 0.1);
  --gk-box-shadow-sm: 0px 1px 3px rgba(17, 24, 39, 0.09);
  --gk-box-shadow-lg: 0 6px 8px 0 rgba(17, 24, 39, 0.08),
  0 0 0 1px rgba(17, 24, 39, 0.04);
  --gk-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --gk-focus-ring-width: 0.25rem;
  --gk-focus-ring-opacity: 0.25;
  --gk-focus-ring-color: rgba(117, 79, 254, 0.25);
  --gk-form-valid-color: #38a169;
  --gk-form-valid-border-color: #38a169;
  --gk-form-invalid-color: #dc2626;
  --gk-form-invalid-border-color: #dc2626;
}
[data-bs-theme="dark"] {
  color-scheme: dark;
  --gk-body-color: #cbd5e1;
  --gk-body-color-rgb: 203, 213, 225;
  --gk-body-bg-rgb: 15, 23, 42;
  --gk-emphasis-color: #fff;
  --gk-emphasis-color-rgb: 255, 255, 255;
  --gk-secondary-color: rgba(203, 213, 225, 0.75);
  --gk-secondary-color-rgb: 203, 213, 225;
  --gk-secondary-bg: #1e293b;
  --gk-secondary-bg-rgb: 30, 41, 59;
  --gk-tertiary-color: rgba(203, 213, 225, 0.5);
  --gk-tertiary-color-rgb: 203, 213, 225;
  --gk-tertiary-bg: #172033;
  --gk-tertiary-bg-rgb: 23, 32, 51;
  --gk-primary-text-emphasis: #ac95fe;
  --gk-secondary-text-emphasis: #a2acb9;
  --gk-success-text-emphasis: #88c7a5;
  --gk-info-text-emphasis: #6ec9f2;
  --gk-warning-text-emphasis: #f9c56d;
  --gk-danger-text-emphasis: #ea7d7d;
  --gk-light-text-emphasis: #f1f5f9;
  --gk-dark-text-emphasis: #cbd5e1;
  --gk-primary-bg-subtle: #171033;
  --gk-secondary-bg-subtle: #14171c;
  --gk-success-bg-subtle: #0b2015;
  --gk-info-bg-subtle: #03212f;
  --gk-warning-bg-subtle: #312002;
  --gk-danger-bg-subtle: #2c0808;
  --gk-light-bg-subtle: #1e293b;
  --gk-dark-bg-subtle: #0f151e;
  --gk-primary-border-subtle: #462f98;
  --gk-secondary-border-subtle: #3c4653;
  --gk-success-border-subtle: #22613f;
  --gk-info-border-subtle: #08638c;
  --gk-warning-border-subtle: #935f07;
  --gk-danger-border-subtle: #841717;
  --gk-light-border-subtle: #334155;
  --gk-dark-border-subtle: #1e293b;
  --gk-heading-color: inherit;
  --gk-link-color: #ac95fe;
  --gk-link-hover-color: #bdaafe;
  --gk-link-color-rgb: 172, 149, 254;
  --gk-link-hover-color-rgb: 189, 170, 254;
  --gk-code-color: #e685b5;
  --gk-highlight-color: #cbd5e1;
  --gk-highlight-bg: #664d03;
  --gk-border-color-translucent: hsla(0, 0%, 100%, 0.15);
  --gk-form-valid-color: #75b798;
  --gk-form-valid-border-color: #75b798;
  --gk-form-invalid-color: #ea868f;
  --gk-form-invalid-border-color: #ea868f;
}
*,
:after,
:before {
  box-sizing: border-box;
}
.sidenav.navbar {
  align-items: start;
  background-color: transparent;
  border-radius: 0 !important;
  border-right: 2px dashed var(--gk-gray-300);
  box-shadow: none;
  height: 60%;
  min-width: 240px;
  overflow: auto;
  padding-top: 5rem;
  position: fixed;
  z-index: 1;
}
@media (max-width: 576px) {
  .sidenav.navbar {
    border-top: 1px solid var(--gk-gray-300);
    padding: 0.5rem 1.5rem;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .sidenav.navbar {
    border-top: 1px solid var(--gk-gray-300);
    padding: 0.5rem 1.5rem;
  }
}
@media (max-width: 990px) {
  .sidenav.navbar {
    align-items: center;
    background-color: var(--gk-gray-200);
    border-bottom: 1px dashed var(--gk-gray-200);
    border-right: 0;
    border-top: 1px dashed var(--gk-gray-400);
    height: auto;
    min-width: 0;
    padding-top: 0.75rem;
    position: absolute;
    top: 0px;
    width: 100%;
  }
}
.sidenav.navbar .navbar-header {
  color: var(--gk-gray-500);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 0.2rem;
  padding: 0.3rem 0.4rem;
  text-transform: uppercase;
}
.sidenav.navbar .navbar-nav {
  width: 100%;
}
.sidenav.navbar .navbar-nav .nav-item {
  margin-bottom: 0.125rem;
}
.sidenav.navbar .navbar-nav .nav-item .nav-link {
  align-items: center;
  background-color: transparent;
  border-bottom: 0;
  border-radius: 0.5rem;
  color: var(--gk-gray-600) !important;
  display: flex;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.3rem 0.7rem !important;
  position: relative;
}
.sidenav.navbar .navbar-nav .nav-item .nav-link .nav-icon {
  margin-right: 0.5rem;
  opacity: 1;
}
.sidenav.navbar .navbar-nav .nav-item .nav-link:hover {
  background-color: var(--gk-gray-300) !important;
  color: var(--gk-gray-700) !important;
}
.sidenav.navbar .navbar-nav .nav-item .nav-link:hover .nav-icon {
  opacity: 1;
}
.sidenav.navbar .navbar-nav .nav-item .nav-link.active {
  background-color: var(--gk-gray-300);
  border-radius: 0.5rem;
  color: var(--gk-gray-700) !important;
}
.sidenav.navbar .navbar-nav .nav-item.nav-collapse {
  margin-bottom: 0.125rem;
}
.sidenav.navbar .navbar-nav .nav-item.nav-collapse .nav-sub-link {
  align-items: center;
  background-color: transparent;
  border-bottom: 0;
  border-radius: 0.5rem;
  color: var(--gk-gray-600) !important;
  display: flex;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.3rem 0.7rem !important;
  position: relative;
}
.sidenav.navbar .navbar-nav .nav-item.nav-collapse .nav-sub-link:after {
  content: "\F282" !important;
  font-family: "bootstrap-icons" !important;
  font-size: 0.875rem;
  opacity: 0.5;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.sidenav.navbar .navbar-nav .nav-item.nav-collapse .nav-sub-link .nav-icon {
  margin-right: 0.5rem;
  opacity: 1;
}
.sidenav.navbar .navbar-nav .nav-item.nav-collapse .nav-sub-link:hover {
  background-color: var(--gk-gray-300) !important;
  color: var(--gk-gray-700) !important;
}
.sidenav.navbar
.navbar-nav
.nav-item.nav-collapse
.nav-sub-link:hover
.nav-icon {
  opacity: 1;
}
.sidenav.navbar
.navbar-nav
.nav-item.nav-collapse
.nav-sub-link
[aria-expanded="true"],
.sidenav.navbar .navbar-nav .nav-item.nav-collapse .nav-sub-link.active {
  background-color: var(--gk-gray-300);
  color: var(--gk-gray-700) !important;
}
.sidenav.navbar
.navbar-nav
.nav-item.nav-collapse
.nav-sub-link
[aria-expanded="true"]:after,
.sidenav.navbar .navbar-nav .nav-item.nav-collapse .nav-sub-link.active:after {
  content: "\e931";
}
.sidenav.navbar
.navbar-nav
.nav-item.nav-collapse
.collapse
.nav-item
.nav-link.active {
  background-color: var(--gk-gray-300);
  color: var(--gk-gray-700) !important;
}
.db-content {
  margin-left: 240px;
  padding: 88px 0;
}
@media (max-width: 990px) {
  .db-content {
    margin-left: 0;
    padding: 150px 0;
  }
}
/*MENU APLIKASI*/




.navbar .navbar-toggler .bottom-bar {
  background-color: #dc2626 !important;
}
.navbar .navbar-toggler .top-bar {
  background-color: #dc2626 !important;
}
.double-4 {
  color: inherit !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  text-transform: capitalize !important;
  white-space: normal !important;
}


.indicator-primary.indicator:before {
  -webkit-animation: blink 2s infinite;
  animation: blink 2s infinite;
}

.animation-blink {
  animation: blink 2s infinite;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.notif-blink {
  width: 10px;
  height: 10px;
  background: #d6293e;
  border-radius: 50%;
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 1;
}
.notif-shake {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  animation-name: shakeMe;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  color: #4caf50;
}

@keyframes shakeMe {
  2%, 18% {
    transform: translate3d(-5px, 0, 0);
    color: #e91e63;
  }

  4%, 16% {
    transform: translate3d(5px, 0, 0);
  }

  6%, 10%, 14% {
    transform: translate3d(-5px, 0, 0);
  }

  8%, 12% {
    transform: translate3d(5px, 0, 0);
  }

  18.1% {
    transform: translate3d(0px, 0, 0);
  }
}

.shake-n {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  animation-name: shakeMen;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes shakeMen {
  2%, 18% {
    transform: translate3d(-5px, 0, 0);
  }

  4%, 16% {
    transform: translate3d(5px, 0, 0);
  }

  6%, 10%, 14% {
    transform: translate3d(-5px, 0, 0);
  }

  8%, 12% {
    transform: translate3d(5px, 0, 0);
  }

  18.1% {
    transform: translate3d(0px, 0, 0);
  }
}



.pointer{transition: transform 0.3s ease-in-out;}
.pointer:hover {transform: scale(1.05);transform: scale(1.05);}
blockquote::before{
  position: absolute;
  content: "";
  top: 40px;
  left: 30px;
  z-index: -1;
  background-image: url(../images/quote.svg);
  background-repeat: no-repeat, repeat;
  width: 52px;
  height: 44px;
  transform: rotate(180deg);
  filter: grayscale(1);
}
blockquote{
  padding: 30px 30px 30px 100px;
  position: relative;
  font-size: 20px;
  line-height: 1.4;
  background: transparent;
  border-radius: 5px;
  margin: 30px 0;
  font-weight: 500;
  z-index: 1;
  border: 4px double #dde;
  box-shadow: 0 7px 9px rgba(17, 24, 39, .09) !important;
}


body.overlay-active {
  overflow: hidden;
}
.search-container {
  position: relative;
}
.search-icon {
  font-size: 24px;
  cursor: pointer;
}
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 10;
}
.search-bar {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 600px;
  background: white;
  padding: 15px;
  border-radius: 8px;
  display: none;
  z-index: 11;
}
.search-bar input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.search-bar .close-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}