/* sdi.css — subset CSS tema legacy SDI yang masih dirujuk view/vue staging dan tidak ada di Cube.
   Dibangkitkan otomatis (rencana/sdi-staging.md §3d). Saat kelas `.main-box`/`.project-box` sudah
   dikonversi ke `.card` Cube (S5), rule terkait boleh dihapus. */

/* ---- tambahan manual ---- */
.input-group-append, .input-group-prepend { display: flex; }
.input-group-append > .btn, .input-group-prepend > .btn { border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; }
.text-justify { text-align: justify; }
.label { display: inline-block; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; }
.label-default { background-color: #777; }
.help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; font-size: .875em; }
.map-content { width: 100%; height: 500px; }
#capture { height: 360px; width: 480px; overflow: hidden; float: left; background-color: #ECECFB; border: thin solid #333; border-left: none; }
.custom-control { position: relative; display: block; min-height: 1.5rem; padding-left: 1.5rem; }
.custom-control-input { position: absolute; left: 0; z-index: -1; width: 1rem; height: 1.25rem; opacity: 0; }
.custom-control-label { position: relative; margin-bottom: 0; vertical-align: top; }

/* ---- kotak konfirmasi hapus <sdi-formfield> (#10844) ----
   Markup .md-modal/.md-content (warisan ModalEffects) tidak punya ancestor .modal, sedangkan
   Bootstrap 5 mendeklarasikan --bs-modal-* pada selector .modal. Akibatnya padding .modal-body
   dan .modal-footer di dalamnya invalid at computed-value time -> jatuh ke 0. Di Bootstrap 4
   nilainya masih literal (1rem) sehingga markup yang sama tampil normal. Deklarasikan ulang
   variabel yang dipakai kedua kelas itu di sini, tanpa menyentuh markup yang dipakai semua MVC. */
.md-content {
  --bs-modal-padding: 1rem;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: var(--bs-border-width);
  --bs-modal-inner-border-radius: 3px; /* samakan dengan border-radius .md-content */
}

/* ---- breadcrumb horizontal: sdi-konteks.vue (wilayah konteks halaman) & ren-breadcrumb.vue (jalur pohon tabel).
   Meniru gov2navbreadcrumb Cube (chevron #5b4fb9); sengaja TIDAK memakai .breadcrumb Bootstrap karena
   theme_styles.css Cube menimpanya (uppercase + glyph FontAwesome). ---- */
.sdi-crumbs { display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.15rem; min-height: 2rem; font-size: 0.875rem; line-height: 1.6; }
.sdi-crumbs-icon { color: #5b4fb9; font-size: 1rem; margin-right: 0.5rem; }
.sdi-crumbs-sep { color: #5b4fb9; font-size: 0.7rem; margin: 0 0.35rem; }
.sdi-crumbs-item { color: #5b4fb9; text-decoration: none; white-space: nowrap; border-radius: 0.25rem; padding: 0.1rem 0.35rem; }
a.sdi-crumbs-item:hover, a.sdi-crumbs-item:focus-visible { color: #4a3fa0; background: rgba(91, 79, 185, 0.08); text-decoration: none; }
.sdi-crumbs-item.active { color: var(--bs-body-color, #212529); font-weight: 600; }
.sdi-crumbs-lvl { color: var(--bs-secondary-color, #6c757d); font-weight: 400; font-size: 0.78em; margin-right: 0.3rem; }
.sdi-crumbs-item.pick { color: var(--bs-secondary-color, #6c757d); font-style: italic; border: 1px dashed rgba(91, 79, 185, 0.45); }
.sdi-crumbs-item.pick:hover, .sdi-crumbs-item.pick:focus-visible { color: #5b4fb9; background: rgba(91, 79, 185, 0.06); }
.sdi-crumbs .dropdown-menu { min-width: 16rem; }
.sdi-crumbs-list { max-height: 18rem; overflow-y: auto; }
.sdi-crumbs .dropdown-item { white-space: normal; }
/* ren-breadcrumb di halaman pohon dibungkus .main-box (kartu putih) oleh view → beri ruang di dalam kartu */
.main-box > .sdi-crumbs { padding: 0.5rem 1rem; margin-bottom: 0; }

/* ---- dari contoh/css/custom.css (8 rule) ---- */
.col-md-12 .main-box-body { overflow:auto; }
.block-header .block-title { font-size: 20px; font-weight: 500; margin: 10px 0px; }
.bg-black .row span.judul { font-size: 36px; }
.krisna2020 { font-size: 30px; }
@media(max-width:768px) {
.selamat .judul span { font-size: 30px !important; }
.selamat .desc { font-size: 20px !important; }
.selamat { padding-left: 0 !important; }
}
.selamat { padding-left: 240px; position: relative; }

/* ---- dari contoh/css/theme_keuangan.css (9 rule) ---- */
body.theme-keuangan .main-box .pagecallout.pagecallout-info { border-left-color: rgb(7, 161, 7); }
.selamat { padding-left: 0; position: relative; }
body.theme-keuangan #content-wrapper .main-box .block .alert-info { background-color: rgb(251, 255, 251); }
body.theme-keuangan .breadcrumb-info { color: rgb(0,0,0) !important; }
body.theme-keuangan a.breadcrumb-info:hover, body.theme-keuangan a.breadcrumb-info:active { color: rgb(0,0,0) !important; }
body.theme-keuangan .breadcrumb-info .breadcrumb-link { color: rgb(0,0,0); }
body.theme-keuangan .judul { font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
.logo-container { display: flex; justify-content: flex-end; align-items: center; }
.img-right { margin: 0; }

/* ---- dari contoh/css/nifty-component.css (42 rule) ---- */
.md-modal { position: fixed; top: 50%; left: 50%; width: 50%; max-width: 630px; min-width: 320px; height: auto; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
.md-show { visibility: visible; }
.md-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: rgba(0,0,0,0.7); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.md-show ~ .md-overlay { opacity: 1; visibility: visible; }
.md-content { color: #344644; background: #fff; position: relative; border-radius: 3px; margin: 0 auto; }
.md-effect-1 .md-content { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.md-show.md-effect-1 .md-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }
.md-effect-2 .md-content { -webkit-transform: translateX(20%); -moz-transform: translateX(20%); -ms-transform: translateX(20%); transform: translateX(20%); opacity: 0; -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); }
.md-show.md-effect-2 .md-content { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; }
.md-effect-3 .md-content { -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.md-show.md-effect-3 .md-content { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; }
.md-effect-4 .md-content { -webkit-transform: scale(0) rotate(720deg); -moz-transform: scale(0) rotate(720deg); -ms-transform: scale(0) rotate(720deg); transform: scale(0) rotate(720deg); opacity: 0; }
.md-show.md-effect-4 ~ .md-overlay, .md-effect-4 .md-content { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.md-show.md-effect-4 .md-content { -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; }
.md-effect-5.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; }
.md-effect-5 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(600px) rotateX(20deg); -moz-transform: translateZ(600px) rotateX(20deg); -ms-transform: translateZ(600px) rotateX(20deg); transform: translateZ(600px) rotateX(20deg); opacity: 0; }
.md-show.md-effect-5 .md-content { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform: translateZ(0px) rotateX(0deg); -moz-transform: translateZ(0px) rotateX(0deg); -ms-transform: translateZ(0px) rotateX(0deg); transform: translateZ(0px) rotateX(0deg); opacity: 1; }
.md-effect-6.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; }
.md-effect-6 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate(30%) translateZ(600px) rotate(10deg); -moz-transform: translate(30%) translateZ(600px) rotate(10deg); -ms-transform: translate(30%) translateZ(600px) rotate(10deg); transform: translate(30%) translateZ(600px) rotate(10deg); opacity: 0; }
.md-show.md-effect-6 .md-content { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform: translate(0%) translateZ(0) rotate(0deg); -moz-transform: translate(0%) translateZ(0) rotate(0deg); -ms-transform: translate(0%) translateZ(0) rotate(0deg); transform: translate(0%) translateZ(0) rotate(0deg); opacity: 1; }
.md-effect-7 .md-content { -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; opacity: 0; }
.md-show.md-effect-7 .md-content { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); border-radius: 0 0 3px 3px; opacity: 1; }
.md-effect-8.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; }
.md-effect-8 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-70deg); -moz-transform: rotateY(-70deg); -ms-transform: rotateY(-70deg); transform: rotateY(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; }
.md-show.md-effect-8 .md-content { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }
.md-effect-9.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; }
.md-effect-9 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-70deg); -moz-transform: rotateX(-70deg); -ms-transform: rotateX(-70deg); transform: rotateX(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; }
.md-show.md-effect-9 .md-content { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
.md-effect-10.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; }
.md-effect-10 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-60deg); -moz-transform: rotateX(-60deg); -ms-transform: rotateX(-60deg); transform: rotateX(-60deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.md-show.md-effect-10 .md-content { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
.md-effect-11 .md-content { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.md-show.md-effect-11 .md-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }
.md-effect-13.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; }
.md-effect-13 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-3000px) rotateY(90deg); -moz-transform: translateZ(-3000px) rotateY(90deg); -ms-transform: translateZ(-3000px) rotateY(90deg); transform: translateZ(-3000px) rotateY(90deg); opacity: 0; }
.md-show.md-effect-13 .md-content { -webkit-animation: slit .7s forwards ease-out; -moz-animation: slit .7s forwards ease-out; animation: slit .7s forwards ease-out; }
.md-effect-14.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; }
.md-effect-14 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateY(100%) rotateX(90deg); -moz-transform: translateY(100%) rotateX(90deg); -ms-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.md-show.md-effect-14 .md-content { -webkit-transform: translateY(0%) rotateX(0deg); -moz-transform: translateY(0%) rotateX(0deg); -ms-transform: translateY(0%) rotateX(0deg); transform: translateY(0%) rotateX(0deg); opacity: 1; }
.md-effect-15.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; }
.md-effect-15 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg); transform: translateZ(100px) translateX(-30%) rotateY(90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.md-show.md-effect-15 .md-content { -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg); -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg); -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg); transform: translateZ(0px) translateX(0%) rotateY(0deg); opacity: 1; }

/* ---- dari contoh/css/theme_styles.css (118 rule) ---- */
.main-box { background: #FFFFFF; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); margin-bottom: 16px; border-radius: 3px; }
@media (max-width: 767px) {
.main-box { margin-bottom: 10px; }
}
.main-box h2 { font-size: 1.3em; line-height: 29px; margin: 0; padding: 0; }
@media (max-width: 419px) {
.main-box h2 { margin-bottom: 5px; }
}
.main-box.no-header { padding-top: 20px; }
.main-box .main-box-header { min-height: 50px; padding: 10px 20px; }
.main-box .main-box-header.with-border { border-bottom: 1px solid #ecf0f1; }
.main-box .main-box-body { padding: 0 20px 20px 20px; }
.emerald-bg { background-color: #03a9f4 !important; }
.red-bg { background-color: #e84e40 !important; }
.yellow-bg { background-color: #ffc107 !important; }
.green-bg { background-color: #8bc34a !important; }
.purple-bg { background-color: #9c27b0 !important; }
.gray-bg { background-color: #90a4ae !important; }
.red { color: #e84e40 !important; }
.gray { color: #90a4ae !important; }
.badge.badge-large { font-size: 1em; padding: 0.4em 0.8em 0.5em; }
.main-box .tabs-header { min-height: 50px; padding: 10px 20px; }
.main-box .tab-content-body { padding: 0 20px 20px 20px; margin-bottom: 0; }
.main-box-body table.footable-editing-no-delete tbody td.footable-editing, .main-box-body table.footable-editing-no-edit tbody td.footable-editing, .main-box-body table.footable-editing-no-view tbody td.footable-editing { width: 90px; max-width: 90px; }
.main-box-body table.footable-editing-no-delete tbody td.footable-editing .fooicon, .main-box-body table.footable-editing-no-edit tbody td.footable-editing .fooicon, .main-box-body table.footable-editing-no-view tbody td.footable-editing .fooicon { top: 1px; padding: 6px; font-size: 1.125em; }
.main-box table.dataTable tr.group td { background-color: #e7ebee; font-size: 1em; padding-top: 8px; padding-bottom: 8px; }
.main-box table.dataTable tbody > tr.selected, .main-box table.dataTable tbody > tr > .selected, .main-box table.dataTable.order-column tbody > tr.selected > .sorting_1, .main-box table.dataTable.order-column tbody > tr.selected > .sorting_2, .main-box table.dataTable.order-column tbody > tr.selected > .sorting_3, .main-box table.dataTable.order-column tbody > tr > .selected, .main-box table.dataTable.display tbody > tr.selected > .sorting_1, .main-box table.dataTable.display tbody > tr.selected > .sorting_2, .main-box table.dataTable.display tbody > tr.selected > .sorting_3, .main-box table.dataTable.display tbody > tr > .selected, .main-box table.dataTable.stripe tbody > tr.odd.selected, .main-box table.dataTable.stripe tbody > tr.odd > .selected, .main-box table.dataTable.display tbody > tr.odd.selected, .main-box table.dataTable.display tbody > tr.odd > .selected, .main-box table.dataTable.display tbody > tr.odd.selected > .sorting_1, .main-box table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_1, .main-box table.dataTable.display tbody > tr.even.selected > .sorting_1, .main-box table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_1, .main-box table.dataTable.hover tbody > tr.selected:hover, .main-box table.dataTable.hover tbody > tr > .selected:hover, .main-box table.dataTable.display tbody > tr.selected:hover, .main-box table.dataTable.display tbody > tr > .selected:hover { background-color: #90a4ae !important; }
.has-error .form-control { border-color: #e84e40; }
.has-error .help-block, .has-error .control-label { color: #dd191d; }
.has-error .form-control:focus { border-color: #dd191d; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dd191d; }
.has-error .input-group-prepend { color: #e84e40; background-color: #f2dede; border-color: #e84e40; }
#newsfeed .map-content { width: 100%; height: 200px; }
.infographic-box { padding: 20px; }
.infographic-box i { font-size: 2.4em; display: block; float: left; margin-right: 15px; width: 60px; height: 60px; line-height: 60px; text-align: center; border-radius: 50%; color: #fff; }
.infographic-box .headline { display: block; font-size: 1.2em; font-weight: 300; text-align: right; }
.infographic-box .value { font-size: 2.1em; font-weight: 600; margin-top: -5px; display: block; text-align: right; }
.infographic-box.merged { border-top: 2px solid #e7ebee; border-right: 2px solid #e7ebee; width: 50%; }
@media (max-width: 767px) {
.infographic-box.merged { width: 100%; border-right: none; }
}
.infographic-box.merged .headline { text-align: left; font-size: 0.8em; margin-top: -2px; text-transform: uppercase; font-weight: 600; }
.infographic-box.merged .value { text-align: left; font-size: 1.8em; font-weight: 400; margin-top: 2px; }
.infographic-box.merged.merged-top { border-top: none; }
.infographic-box.merged.merged-right { border-right: none; }
@media (max-width: 767px) {
.infographic-box.merged.merged-top.merged-right { border-top: 1px solid #e7ebee; }
}
.infographic-box.colored { color: #fff; border: 0 !important; }
.infographic-box.colored i { font-size: 4.6em; margin-left: 7px; color: #fff; }
.infographic-box.colored .headline { font-size: 1em; font-weight: 600; margin-bottom: 4px; }
.small-graph-box { padding: 20px; color: #fff; border: 0 !important; }
.small-graph-box .headline { display: block; font-size: 0.875em; font-weight: 400; margin-top: -5px; padding-bottom: 5px; text-transform: uppercase; }
.small-graph-box .value { display: block; font-size: 1.9em; font-weight: 600; margin-top: -5px; }
.small-graph-box .progress { background: rgba(0, 0, 0, 0.2); height: 5px; margin-bottom: 5px; margin-top: 10px; }
.small-graph-box .progress .progress-bar { background-color: #fff; }
.small-graph-box .subinfo { display: block; font-size: 0.8em; padding-top: 5px; }
.small-graph-box .subinfo i { font-size: 1.2em; }
.chart-small .headline { font-weight: 600; font-size: 0.75em; padding: 0 20px; margin-bottom: -5px; }
.profile-box .main-box-body { padding: 0; }
.profile-box-menu .main-box-body { padding: 0; }
.profile-box-stats .main-box-body { padding: 0; }
.profile-box-contact .main-box-body { padding: 0; }
.weather-box .main-box-body { padding: 0; }
.weather-box-large .main-box-body { padding: 0; }
.project-box .main-box-body { padding: 0; }
.project-box .project-box-header { border-radius: 3px 3px 0 0; }
.project-box .project-box-header .name a { color: #fff; display: block; font-size: 1.4em; font-weight: 300; padding: 16px 15px; border-radius: 3px 3px 0 0; transition: background-color 0.1s ease-in-out 0s; }
.project-box .project-box-header .name a:hover { text-decoration: none; }
.project-box .project-box-header.green-bg .name a:hover { background: #689f38; }
.project-box .project-box-content { padding: 30px 20px 5px; text-align: center; }
.project-box .project-box-content .chart { position: relative; text-align: center; font-weight: 300; font-size: 1em; width: 130px; height: 130px; display: block; margin: 0 auto; padding-top: 37px; }
.project-box .project-box-content .chart canvas { position: absolute; top: 0; left: 0; }
.project-box .project-box-content .chart .percent { font-size: 2.1em; font-weight: 600; }
.project-box .project-box-content .chart .lbl { display: block; font-size: 0.875em; margin-top: -7px; }
.project-box .project-box-footer { border-radius: 0 0 3px 3px; }
.project-box .project-box-footer a { border-right: 1px solid #eee; color: #212121; display: block; float: left; margin: 20px 0; padding: 5px 10px; text-align: center; width: 33.33%; }
.project-box .project-box-footer a:last-child { border: none; }
.project-box .project-box-footer a:hover { text-decoration: none; }
.project-box .project-box-footer .value { display: block; font-size: 1.8em; font-weight: 300; }
.project-box .project-box-footer .badge { display: block; font-size: 0.875em; font-weight: 300; color: #212121; }
.project-box .project-box-ultrafooter { background: #f7fafa; border-top: 1px solid #e9eef0; padding: 8px 15px; border-radius: 0 0 3px 3px; }
.project-box .project-box-ultrafooter .project-img-owner { border-radius: 50%; display: block; float: left; height: 33px; margin-right: 5px; overflow: hidden; width: 33px; }
.project-box .project-box-ultrafooter .link { margin-top: 6px; color: #c1c5c6; }
.project-box.emerald-box .project-box-footer a:hover { color: #03a9f4; }
.project-box.red-box .project-box-footer a:hover { color: #e84e40; }
.project-box.yellow-box .project-box-footer a:hover { color: #ffc107; }
.project-box.green-box .project-box-footer a:hover { color: #8bc34a; }
.project-box.purple-box .project-box-footer a:hover { color: #9c27b0; }
.project-box.gray-box .project-box-footer a:hover { color: #90a4ae; }
.main-box-header .daterange-filter { margin-top: 7px; margin-bottom: 7px; }
.filter-block { margin-top: 7px; }
@media only screen and (max-width: 440px) {
.filter-block { float: none !important; clear: both; }
}
.filter-block .form-group { margin-right: 10px; position: relative; }
@media only screen and (max-width: 440px) {
.filter-block .form-group { float: none !important; margin-right: 0; }
}
.filter-block .form-group .form-control { height: 34px; }
.filter-block .form-group .search-icon { position: absolute; color: #707070; right: 8px; top: 11px; }
.filter-block .btn { margin-left: 5px; }
@media only screen and (max-width: 440px) {
.filter-block .btn { display: block; float: none !important; margin-bottom: 15px; margin-left: 0; }
}
.main-box .pagecallout { padding: 20px; margin: 15px 0; border: 1px solid #e7ebee; border-left-width: 5px; border-radius: 3px; }
.main-box .pagecallout.pagecallout-info { border-left-color: #03a9f4; }
.editableform .has-error .editable-error-block { padding-left: 7px; }
#email-detail-attachments #email-attachments-header .headline { float: left; font-size: 0.875em; }
#email-detail-attachments #email-attachments-header .headline > span { font-weight: 600; }
#email-detail-attachments #email-attachments-header .headline > b { font-weight: 600; }
.rtl .infographic-box i { float: right; margin-right: 0; margin-left: 15px; }
.rtl .infographic-box .headline { text-align: left; }
.rtl .infographic-box .value { text-align: left; }
.rtl .filter-block .form-group { margin-right: 0; margin-left: 10px; }
.rtl .filter-block .btn { margin-right: 5px; margin-left: 0; }
.rtl .filter-block .form-group .search-icon { left: 8px; right: auto; }
.rtl #email-detail-attachments #email-attachments-header .headline { float: right; }
.rtl .project-box .project-box-ultrafooter .project-img-owner { float: right; margin-left: 5px; margin-right: 0; }
.rtl .main-box { box-shadow: -1px 1px 2px 0 #cccccc; }
body.theme-amethyst .main-box .pagecallout.pagecallout-info { border-left-color: #9c27b0; }
body.theme-red .main-box .pagecallout.pagecallout-info { border-left-color: #e84e40; }
body.theme-blue-gradient .red-bg { background: #e84e40 !important; background: -moz-linear-gradient(top, #e84e40 0%, #dd191d 100%) !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e84e40), color-stop(100%, #dd191d)) !important; background: -webkit-linear-gradient(top, #e84e40 0%, #dd191d 100%) !important; background: -o-linear-gradient(top, #e84e40 0%, #dd191d 100%) !important; background: -ms-linear-gradient(top, #e84e40 0%, #dd191d 100%) !important; background: linear-gradient(to bottom, #e84e40 0%, #dd191d 100%) !important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$red-color', endColorstr='$red-color-dark',GradientType=0 ) !important; }
body.theme-blue-gradient .emerald-bg { background: #03a9f4 !important; background: -moz-linear-gradient(top, #03a9f4 0%, #2980b9 100%) !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #03a9f4), color-stop(100%, #2980b9)) !important; background: -webkit-linear-gradient(top, #03a9f4 0%, #2980b9 100%) !important; background: -o-linear-gradient(top, #03a9f4 0%, #2980b9 100%) !important; background: -ms-linear-gradient(top, #03a9f4 0%, #2980b9 100%) !important; background: linear-gradient(to bottom, #03a9f4 0%, #2980b9 100%) !important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$primary-color', endColorstr='#2980b9',GradientType=0 ) !important; }
body.theme-blue-gradient .yellow-bg { background: #ffc107 !important; background: -moz-linear-gradient(top, #ffc107 0%, #ffa000 100%) !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffc107), color-stop(100%, #ffa000)) !important; background: -webkit-linear-gradient(top, #ffc107 0%, #ffa000 100%) !important; background: -o-linear-gradient(top, #ffc107 0%, #ffa000 100%) !important; background: -ms-linear-gradient(top, #ffc107 0%, #ffa000 100%) !important; background: linear-gradient(to bottom, #ffc107 0%, #ffa000 100%) !important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$yellow-color', endColorstr='$yellow-color-dark',GradientType=0 ) !important; }
body.theme-blue-gradient .green-bg { background: #8bc34a !important; background: -moz-linear-gradient(top, #8bc34a 0%, #689f38 100%) !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8bc34a), color-stop(100%, #689f38)) !important; background: -webkit-linear-gradient(top, #8bc34a 0%, #689f38 100%) !important; background: -o-linear-gradient(top, #8bc34a 0%, #689f38 100%) !important; background: -ms-linear-gradient(top, #8bc34a 0%, #689f38 100%) !important; background: linear-gradient(to bottom, #8bc34a 0%, #689f38 100%) !important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$green-color', endColorstr='$green-color-dark',GradientType=0 ) !important; }
body.theme-blue-gradient .purple-bg { background: #9c27b0 !important; background: -moz-linear-gradient(top, #9c27b0 0%, #7b1fa2 100%) !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9c27b0), color-stop(100%, #7b1fa2)) !important; background: -webkit-linear-gradient(top, #9c27b0 0%, #7b1fa2 100%) !important; background: -o-linear-gradient(top, #9c27b0 0%, #7b1fa2 100%) !important; background: -ms-linear-gradient(top, #9c27b0 0%, #7b1fa2 100%) !important; background: linear-gradient(to bottom, #9c27b0 0%, #7b1fa2 100%) !important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$purple-color', endColorstr='$purple-color-dark',GradientType=0 ) !important; }
body.theme-blue-gradient .gray-bg { background: #90a4ae !important; background: -moz-linear-gradient(top, #90a4ae 0%, #607d8b 100%) !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #90a4ae), color-stop(100%, #607d8b)) !important; background: -webkit-linear-gradient(top, #90a4ae 0%, #607d8b 100%) !important; background: -o-linear-gradient(top, #90a4ae 0%, #607d8b 100%) !important; background: -ms-linear-gradient(top, #90a4ae 0%, #607d8b 100%) !important; background: linear-gradient(to bottom, #90a4ae 0%, #607d8b 100%) !important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gray-color', endColorstr='$gray-color-dark',GradientType=0 ) !important; }
body.theme-white .main-box { border: 1px solid #e7ebee; }
body.theme-white .main-box .pagecallout.pagecallout-info { border-left-color: #8bc34a; }
body.theme-whbl .main-box { border: 1px solid #e7ebee; }
body.theme-turquoise .main-box { border: 1px solid #e7ebee; }
body.theme-turquoise .main-box .pagecallout.pagecallout-info { border-left-color: #1abc9c; }

/* ---- Select2 dropdown di dalam modal Form (#bug metadata: Urusan/Sifat/Satuan di belakang modal) ----
   .select2-dropdown bawaan select2.min.css z-index 1051; .modal Bootstrap 5 (--bs-modal-zindex) = 1055.
   Akibatnya dropdown <select2 modal-id="modal-tall"> di field-sifat-data/field-ref-satuan/field-ref-urusan/
   field-opd/field-puskesmas/dll. (semua gov2component) tampil di belakang modal. Naikkan ke 1060 agar di atas .modal
   namun masih di bawah .toast/notifikasi portal (>= 1080). */
.select2-container { z-index: 1060; }
.select2-container .select2-dropdown { z-index: 1060; }

/* Lebar container Select2 di form metadata dll. (#fieldSelect2-shrink): class col-lg-12 yang dipasang
   di <select2> masuk ke <select> (display:none setelah Select2 init), bukan ke container visible
   yang default inline-block auto-fit konten. Paksa 100% agar penuh satu baris form-group. */
.form-group > .select2-container,
.input-group > .select2-container { width: 100% !important; }