@font-face {
  font-family: 'Vijaya';
  src: url(font/vijaya.ttf);
}
body.dark-mode .gj-picker.gj-picker-bootstrap.datepicker {
	background: #000;}
.footer-heading {
    font-size: 16px;
    font-weight: 600;
    color: #fff;}
.no-att { text-decoration: none !important;}
.font-10 { font-size: 10px !important;}
.font-11 { font-size: 11px;}
.font-12 { font-size: 12px;}
.font-13 { font-size: 13px;}
.font-14 { font-size: 14px;}
.font-15 { font-size: 15px;}
.font-16 { font-size: 16px;}
.font-17 { font-size: 17px;}
.font-18 { font-size: 18px;}
.font-20 { font-size: 20px;}
.font-22 { font-size: 22px;}
.font-24 { font-size: 24px;}
.font-26 { font-size: 26px;}
.font-28 { font-size: 28px;}
.font-normal { font-weight: 400 !important; }
.p-10 { padding: 10px;}
.p-20 { padding: 20px;}
.p15-20 { padding: 15px 20px;}
.pl5 { padding-left: 5px !important; }
.pt0 { padding-top: 0px !important; }
.pb0 { padding-bottom: 0px !important; }
.w10 { width: 10px; }
.w20 { width: 20px; }
.w25 { width: 25px; }
.w30 { width: 30px; }
.w50 { width: 50px; }
.w60 { width: 60px; }
.w70 { width: 70px; }
.w80 { width: 80px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w120 { width: 120px; }
.w130 { width: 130px; }
.w140 { width: 140px; }
.w150 { width: 150px; }
.w160 { width: 160px; }
.w180 { width: 180px; }
.w200 { width: 200px; }
.w230 { width: 230px; }
.w250 { width: 250px; }
.w300 { width: 300px; }
.post-area {
    background-color: #fff;
    padding-top: 80px;
    padding-bottom: 60px;}
.cover-head {
    background: -webkit-linear-gradient(#000, #fff);
    background: -o-linear-gradient(#000, #fff);
    background: -moz-linear-gradient(#000, #fff);
    background: linear-gradient(#000, #fff);
}
.page-title{
  font-family: fantasy;}
.frontpage .container{
    padding-top: 150px;
    padding-bottom: 80px;}
.sticky {
    background-color: #2048a3;  /*#1a1a1a;*/
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;}

@media (min-width: 768px) {
  .hidden-exp {
    display: none !important;}
  .tablex td {
    font-size: 13px !important;}
  .tablet td {
    padding: 2px 8px !important;}
  .rpad5{
    padding-right:5px !important;}
  .rleft5{
    padding-left:5px !important;}
  .mbx-05 {margin-bottom: 0px !important;}
}

@media (max-width: 767.98px) {
  .mbx-05 { margin-bottom: 5px !important; }
  .mbx-010 { margin-bottom: 10px !important; }
  .cover-head .dropdown-item{
      color: #fff;}
  .dropdown-menu-right .dropdown-item{
      color: #1A1A1A !important;}
  .post-area {
      padding-top: 40px;
      padding-bottom: 30px;}
  .retro-layout .img-1 {
      height: 400px !important;
      position: relative;
      margin-bottom: 30px; }
  .frontpage .container{
      padding-top: 90px;
      padding-bottom: 60px;}

  .pcustom { padding: 0px 0px 2px !important; }
  .hidden-disp {
    display: none!important;}
  .tablex table {
    width: 100%;}
  .tablex thead th.column-primary {
    width: 100%;
    /*border-top-right-radius: 10px;
    border-top-left-radius: 10px;*/
    border: none;}
  .tablex thead th:not(.column-primary) {
    display:none;}
  th[scope="row"] {
    vertical-align: top;
    text-align: center;}
  .tablex td.undisp {
    display:none !important;}
  .tablex td.noborder{
    border: none;}
  .unproc {
    display:none !important;}
  .cust-header{
    padding: 5px 10px !important;
    font-size: 13px;
    background-color: #0893D8 !important;
    color: #ffffff;}
  .tablex td {
    display: block;
    width: auto;
    background-color: #e6e6e6;
    font-size: 13px !important;}
  .tablex thead th::before {
    content: attr(data-header);}
  .tablex thead th span {
    display: none;}
  .tablex td::before {
    display: block;
    white-space: pre;
    float: left;
    content: attr(data-header);}
  .inline-table {
    background-color: #FFFFFF !important;}
  .inline-table td {
    display: table-cell;
    border-bottom: 1px solid #EBEBEB;
    background-color: #FFFFFF;}
  .inline-table td.lnob{
    border-left: none !important;}
  .inline-table td.rnob{
    border-right: none !important;}
  .inline-table td.tnob{
    border-top: none !important;}
  .inline-table td.bnob{
    border-bottom: none !important;}
  .inline-table td.xnob{
    border: none !important;}
  .mbody {
    padding: 0px;}
  .mbody-10 {
    padding: 10px;}
  .mbody-15 {
    padding: 15px;}

}

.retro-layout .mb30 {
    margin-bottom: 30px; }

.retro-layout .hentry {
    display: block;
    position: relative;
    border-radius: 4px;
    overflow: hidden; }

.retro-layout .gradient {
    position: relative; }
    .retro-layout .gradient:before {
        z-index: 1;
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: -moz-linear-gradient(top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
        background: -webkit-linear-gradient(top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(18%, transparent), color-stop(99%, rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0.8)));
        background: -o-linear-gradient(top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
        background: linear-gradient(to bottom, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 ); }

.retro-layout .post-category {
    margin-left: 20px;
    margin-top: 10px; }

.retro-layout .v-height {
    height: 300px; }

.retro-layout .text {
    position: absolute;
    bottom: 0;
    z-index: 10;
    padding: 20px;
    max-width: 350px; }
    .retro-layout .text h2 {
        color: #fff;
        font-size: 26px; }
    .retro-layout .text span {
        color: rgba(255, 255, 255, 0.5); }
    .retro-layout .text.text-sm h2 {
        font-size: 18px;
        line-height: 1.5; }

.retro-layout .two-col > a {
    width: calc(50% - 15px);
    float: left; }
    @media (max-width: 767.98px) {
        .retro-layout .two-col > a {
            width: 100% !important;
            float: none !important;
            margin-bottom: 30px; } }

.retro-layout-2 .v-height {
    height: 200px; }

@media (max-width: 991.98px) {
    .retro-layout-2 .img-1 {
        height: 200px; } }

.retro-layout-2 .h-entry {
    display: block;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background-size: cover;
    background-position: center center; }
    .retro-layout-2 .h-entry .post-category {
        color: #fff; }
    .retro-layout-2 .h-entry.mb-30 {
        margin-bottom: 30px; }
    .retro-layout-2 .h-entry .date {
        font-size: 15px; }
    .retro-layout-2 .h-entry.gradient {
        position: relative; }
        .retro-layout-2 .h-entry.gradient:before {
            z-index: 1;
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: -moz-linear-gradient(top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
            background: -webkit-linear-gradient(top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
            background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(18%, transparent), color-stop(99%, rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0.8)));
            background: -o-linear-gradient(top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
            background: linear-gradient(to bottom, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 ); }

.retro-layout-2 .text {
    position: absolute;
    bottom: 0;
    z-index: 10;
    padding: 20px;
    max-width: 350px; }
    .retro-layout-2 .text h2 {
        color: #fff;
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 0; }
    .retro-layout-2 .text span {
        color: rgba(255, 255, 255, 0.8); }
    .retro-layout-2 .text.text-sm h2 {
        font-size: 18px;
        line-height: 1.5; }

.retro-layout-2 .gradient {
    position: relative; }
    .retro-layout-2 .gradient:before {
        z-index: 1;
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: -moz-linear-gradient(top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
        background: -webkit-linear-gradient(top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(18%, transparent), color-stop(99%, rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0.8)));
        background: -o-linear-gradient(top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
        background: linear-gradient(to bottom, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 ); }
.footer-area {
    background-color: #404146;}
.pull-right {
    float: right; }

.post-meta {
    font-size: 13px;
    color: #b3b3b3; }
.post-meta .float-left {
    float: left!important;
}

.post-sm-entry figure {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 110px;
    flex: 0 0 110px; }
    .post-sm-entry figure img {
        max-width: 100%;
        -webkit-transition: .3s all ease;
        -o-transition: .3s all ease;
        transition: .3s all ease; }

.post-sm-entry h2 {
    font-size: 1rem;
    line-height: 1.4;
    font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: #000; }

.post-sm-entry:hover img {
    opacity: .5; }

.post-category {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    letter-spacing: .2em;
    font-weight: 700;
    font-size: .6rem;
    text-transform: uppercase; }
.excerpt a:hover {
    text-decoration: none;}
.excerpt p {
    line-height: 1.7; }

.entry2 img {
    margin-bottom: 30px; }

.entry2 h2 {
    font-size: 24px;
    margin-bottom: 30px;
    line-height: inherit;
    min-height: 50px;
    font-weight: 600; }
    .entry2 h2 a {
        color: #000;
        text-decoration: none;}

.entry2 .excerpt {
    padding-left: 15px;
    padding-right: 15px; }

.entry2 .post-meta {
    color: #b3b3b3;
    font-size: 13px;
    width: 100%;
    display: block; }
    .entry2 .post-meta a {
        color: #000;}
    .entry2 .post-meta .author-figure img {
        width: 30px;
        border-radius: 50%; }

.custom-pagination span, .custom-pagination a {
    text-align: center;
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%; }

.site-cover {
    background-size: cover;
    background-position: top center;
    position: relative; }
    .site-cover.overlay:before {
        background: rgba(0, 0, 0, 0.6);
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; }
    .site-cover, .site-cover .same-height {
        padding: 7em 0; }
    .site-cover .post-entry .post-meta {
        color: #fff;
        font-size: 13px; }
        .site-cover .post-entry .post-meta .author-figure img {
            width: 30px;
            border-radius: 50%; }
    .site-cover .post-entry h2 {
        font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-size: 2rem;
        line-height: 1.2;
        color: #fff; }
        @media (min-width: 992px) {
            .site-cover .post-entry h2 {
                font-size: 3rem; } }
        .site-cover .post-entry h2 a {
            color: #fff; }
    .site-cover.single-page h1 {
        font-size: 2rem;
        color: #fff; }
        @media (min-width: 992px) {
            .site-cover.single-page h1 {
                font-size: 5rem; } }
        .site-cover.single-page h1 a {
            color: #fff; }

.site-section {
    padding: 2.5em 0; }
    @media (min-width: 768px) {
        .site-section {
            padding: 5em 0; } }
    .site-section.site-section-sm {
        padding: 4em 0; }

.section-heading h2 {
    font-weight: 700;
    color: #000; }
.blog-entries {
    line-height: 1.7;
    color: gray;
    font-weight: 300;
    font-size: 1rem;
}
.comment-list {
    padding: 0;
    margin: 0; }
    .comment-list .children {
        padding: 50px 0 0 40px;
        margin: 0;
        float: left;
        width: 100%; }
    .comment-list li {
        padding: 0;
        margin: 0 0 30px 0;
        float: left;
        width: 100%;
        clear: both;
        list-style: none; }
        .comment-list li .vcard {
            width: 80px;
            float: left; }
            .comment-list li .vcard img {
                width: 50px;
                border-radius: 50%; }
        .comment-body {
            width: calc(100% - 80px); }
            .comment-body h3 {
                font-size: 20px;
                color: #000; }
            .comment-body .meta {
                text-transform: uppercase;
                font-size: 13px;
                letter-spacing: .1em;
                color: #ccc; }
            .comment-body .reply {
                padding: 5px 10px;
                background: #e6e6e6;
                color: #000;
                text-transform: uppercase;
                font-size: 14px; }
                .comment-body .reply:hover {
                    color: #000;
                    background: #e3e3e3; }
        @media (max-width: 767.98px) {
            .comment-body {
                width: 100%; }
            .main-content, .sidebar {
                padding-left: 20px;
                padding-right: 20px;
            }

        }

.post-content-body h2 {
  font-size: 28px; }
.post-content-body img {
  border-radius: 5px; }

@media (min-width: 767.99px) {
  .sidebar {
    padding-left: 10px; }
  }

.config-area {
  padding-top: 120px;
  padding-bottom: 60px; }
  @media (max-width: 768px) {
    .config-area {
        padding: 80px 20px 30px; }
  }

.grecaptcha-badge{
  display: none !important;}

.table-custom td {
  padding: 8px 10px !important;}
table.dataTable td {
  font-size: 13px;}
.table th, .table td {
  padding: 0.5rem;}
.no-border-top {
  border-top: unset !important;}
.first-td-number {
  width: 10px;
  vertical-align: middle !important;}
.middle-align {
  vertical-align: middle !important;}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active,
[class*="sidebar-dark-"] .nav-sidebar > .nav-item.menu-open > .nav-link, [class*="sidebar-dark-"] .nav-sidebar > .nav-item:hover > .nav-link, [class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link:focus {
  background-color: #0063CC;}
.dropdown-toggle.no-arrow:after {
  display: none;}
.img-thumbnail{
  max-height: 100px;
  border:1px solid #DEDEDE;
  border-radius: 5px;
  width: auto;
  position:relative;
  vertical-align: -webkit-baseline-middle;}

.note-editable pre{
  background-color: aliceblue;
  border-radius: 10px;
  border: 1px solid #CCCCCC;}

/* ─── Responsive: konten artikel tidak keluar layar ─── */
.article-body img {
  max-width: 100%;
  height: auto;
}
.article-body pre,
.article-body code {
  white-space: pre-wrap;
  word-break: break-word;
}
.article-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.article-body iframe {
  max-width: 100%;
}

/* Pastikan semua gambar publik tidak meluap */
.entry2 img,
.post-content-body img {
  max-width: 100%;
  height: auto;
}

/* Share/action buttons wrap di mobile */
@media (max-width: 575.98px) {
  .entry2.d-flex figure {
    width: 100% !important;
  }
}

/* Blog detail: padding kiri-kanan di mobile */
@media (max-width: 767.98px) {
  .blog-details .container {
    padding-left: 25px;
    padding-right: 25px;
  }
}

/* Konten artikel: list color white + indentasi proper */
.blog__details__item__text ul,
.blog__details__item__text ol {
  padding-left: 1.6rem;
  margin-bottom: 1rem;
}
.blog__details__item__text ul li,
.blog__details__item__text ol li {
  color: #ffffff;
  font-size: inherit;
  line-height: inherit;
  list-style-position: outside;
}
.blog__details__item__text ul li::marker,
.blog__details__item__text ol li::marker {
  color: #e53637;
}

/* Sidebar: paksa link title tetap putih seperti CI3 */
.product__sidebar__comment__item__text h5 a,
.product__sidebar__comment__item__text h5.recent-title a {
  color: #ffffff !important;
}
.product__sidebar__comment__item__text h5 a:hover,
.product__sidebar__comment__item__text h5.recent-title a:hover {
  color: #e53637 !important;
}