:root, :before, :after{
  --bg-2:#FFFFFF; 
  --bg-3:#F0F0F0;
  --color-border-dark:0 0 0;
  --color-border-light:255 255 255;
  --color-text-1:#757575; 
  --color-text-2:#212121; 
  --color-text-3:#86127f;
  --color-text-4:#F20077;
  --color-text-5:#FF630D;
  --color-fb:#1877f2;
  --color-ig:#F00073;
  --color-tw:#000000;
  --color-wa:#2bb240;
  --color-tg:#0088cc;
  --color-tk:#000000;
  --color-yt:#FF0000;
  --rounded-1:var(--size-1);
  --rounded-2:var(--size-3);
  --hover-opacity:0.55;
  --transition-default:all 0.34s;
  --shadow-default:0 8px 21px 0 rgba(0,0,0,.08);
  --shadow-neumorp:-2px -2px 4px rgba(255,255,255,.2), 2px 2px 12px rgba(0,0,0,.2);
  --shadow-inset:inset -2px -2px 4px rgba(255,255,255,.2), inset 2px 2px 12px rgba(0,0,0,.2);
}



body, html{color:var(--color-text-1);}
html{background-color:var(--bg-3);}
body.freeze-scroll{overflow:hidden;}
a, .btn, button, #btt{transition:var(--transition-default); cursor:pointer}
a, button{color:var(--color-text-3); fill:var(--color-text-3);}
a:hover, button:hover{color:var(--color-text-4); fill:var(--color-text-4);}
.btn, a.btn, button.btn{background-color:var(--color-text-3); color:var(--bg-2); fill:var(--bg-2); border-radius:var(--rounded-2);}
.btn:hover, a.btn:hover, button.btn:hover{background-color:var(--color-text-4);}
#btt{position:fixed; bottom:calc(var(--size-7) + var(--size-4)); right:var(--size-4); cursor:pointer; z-index:calc(var(--max-zindex) - 10000); fill:var(--color-text-1);}
#btt .svgicon{width:48px; height:auto;}
#btt:hover, #btt:focus{fill:var(--color-text-4);}
.flex_ori > img{opacity:0; transition:all 300ms;}
.flex_ori > img.lazyloaded{opacity:1;}
.thumb-loading:before{animation:skeleton-loading 0.5s linear infinite alternate; background-color:var(--color-text-2);}
@-webkit-keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}
@keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}



header{background-color:var(--bg-2); box-shadow:var(--shadow-default); border-color:var(--color-text-3);}
.header-logo:hover{opacity:var(--hover-opacity);}
.header-profile-frame{border-radius:50%; border-color:rgb(var(--color-border-dark) / 8%); overflow:hidden;}



.menu-curr{color:var(--color-text-5) !important; fill:var(--color-text-5) !important;}



.section-title{color:var(--color-text-1); fill:var(--color-text-1); text-transform:uppercase;}



.content-box, .tag-box, .biduan-box, .event-box, .event-end-container{border-radius:var(--rounded-2); background-color:var(--bg-2); box-shadow:var(--shadow-default);}
.content-thumb-frame{border-radius:50%;}
.content-info div{color:var(--color-text-1);}
.content-info-channel{border-color:rgb(var(--color-border-dark) / 21%);}



.biduan-head{background-color:var(--bg-2); box-shadow:var(--shadow-default);}
.biduan-head-photo-frame{border-radius:50%; box-shadow:0 8px 8px 0 rgb(0 0 0 / 21%);}
.biduan-head-name{color:var(--color-text-2);}
.biduan-head-label-button{background-color:rgb(var(--color-border-dark) / 13%); color:var(--color-text-1); border-radius:var(--rounded-1);}
.bhc-small-box{border-radius:var(--rounded-1); border-color:var(--bg-2); box-shadow:var(--shadow-default);}
.bhc-small-box:hover{border-color:var(--color-text-5);}
.bhc-small-curr{border-color:var(--color-text-4);}

.biduan-box{overflow:hidden; background-color:var(--color-text-5); color:var(--bg-2);}
div.biduan-box{background-color:var(--color-text-1) !important;}
.biduan-button{border-radius:0;}
.biduan-box:hover{background-color:var(--color-text-4); color:var(--bg-2);}

.bsl-box{color:var(--color-text-2);}
.bsl-date{background-color:var(--color-text-3); border-radius:var(--rounded-1);}
.bsl-date *{color:var(--bg-2);}
.bsl-loc{color:var(--color-text-1); fill:var(--color-text-1);}

.hero-frame:before{background:linear-gradient(to bottom,rgb(var(--color-border-dark) / 0%) 75%,rgb(var(--color-border-dark) / 100%) 100%);}

.embed-single{border-radius:var(--size-3); overflow:hidden; color:var(--bg-2);
background:linear-gradient(135deg,var(--color-text-3) 0%,var(--color-text-5) 100%);}



.article-title{color:var(--color-text-2);}

.detail-content{color:var(--color-text-2); background-color:var(--bg-2); box-shadow:var(--shadow-default);}
.detail-content b, .detail-content strong{color:var(--color-text-2);}
.detail-content-image, .embedsocmed-yt{border-radius:var(--rounded-1); overflow:hidden;}



.hero-image{box-shadow:var(--shadow-default);}
.hero-info{background-color:rgb(var(--color-border-dark) / 100%); color:var(--bg-1);}
.hero-info .author-name{color:var(--bg-2);}

/* cms embed image */
.ap-mainimage{border-radius:var(--rounded-1); overflow:hidden;}
.flex_thumb:before{background:linear-gradient(to bottom,rgb(var(--color-border-dark) / 0%) 75%,rgb(var(--color-border-dark) / 100%) 100%);}
.ap-mainimage-info{background-color:rgb(var(--color-border-dark) / 100%); color:var(--bg-1);}
/* cms embed image */


.share-box{background-color:var(--bg-2); box-shadow:var(--shadow-default);}
.share-fb, .biduan-fb{fill:var(--color-fb);}
.share-tw, .biduan-tw{fill:var(--color-tw);}
.share-wa, .biduan-wa{fill:var(--color-wa);}
.share-ig, .biduan-ig{fill:var(--color-ig);}
.share-tk, .biduan-tk{fill:var(--color-tk);}
.share-yt, .biduan-yt{fill:var(--color-yt);}
.share-lk, .biduan-lk{fill:var(--color-text-3);}
.share-button:hover{fill:var(--color-text-2);}



.pagination{display:flex; flex-wrap:wrap; justify-content:flex-end;}
.pagination-link{margin:var(--size-1); padding:var(--size-2) var(--size-3); background-color:var(--color-text-3); color:var(--bg-2); 
border:1px solid var(--color-text-3); border-radius:var(--rounded-1);}
.pagination-link:last-child{margin-right:0;}
a.pagination-link{background-color:transparent; color:var(--color-text-2); border-color:rgb(var(--color-border-dark) / 13%);}
a.pagination-link:hover{background-color:var(--color-text-2); color:var(--bg-2); border-color:var(--color-text-2);}



.next-page{display:grid; grid-gap:var(--size-1); padding:var(--size-3); color:var(--bg-2);
background-color:var(--color-text-3); border-radius:var(--size-3); box-shadow:var(--shadow-default);}
.next-page:hover{background-color:var(--color-text-2); color:var(--bg-2);}
.next-label{font-weight:normal; color:rgb(var(--color-border-light) / 89%);}
.next-title{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}



.tag-hash{border-color:rgb(var(--color-border-dark) / 8%);}
.tag-info{color:var(--color-text-1);}
.tag-info-view{border-color:rgb(var(--color-border-dark) / 13%);}

.read-alternative:before{background-color:var(--color-text-2); border-radius:var(--size-3);}

.widget-vlix{--rounded-normal:var(--size-1);}

.content-more{margin-top:var(--size-3);}
.content-more-button{border-radius:var(--size-5);}



.event-frame{border-radius:var(--size-3);}
.event-frame:hover{filter:grayscale(50%);}
.event-calendar-icon{background-color:var(--bg-2); border-radius:0 var(--size-3) 0 var(--size-3); overflow:hidden;}
.event-calendar-icon:hover{background-color:var(--color-text-4);}
.event-info{color:var(--color-text-2);}
.event-price{color:var(--color-text-1);}
.event-cate{color:var(--bg-2); border-radius:var(--size-4);}
.event-date, .event-loc{color:var(--color-text-1);}
.event-box-offline .event-cate, .event-detail-offline .event-cate{background-color:var(--color-text-3);}
.event-box-online .event-cate, .event-detail-online .event-cate{background-color:var(--color-text-5);}
.event-box-end .event-cate, .event-detail-end .event-cate{background-color:#BDBDBD;}
.event-box-end .event-frame img{filter: grayscale(100%);}

.event-end-container{padding: var(--size-3) var(--size-2);}
.content-event-end{max-width: 320px;}
.content-event-end .event-catedate{display: flex; justify-content: space-between; padding: 0 var(--size-1);}
.event-end-container .event-box{box-shadow: none; border: none; padding: 0; grid-template-rows: auto;}
.event-end-slide{display: grid; grid-template-columns: 123px 1fr;}
.icon-slide-toggle{display: flex; gap: var(--size-2);}
.icon-slide-toggle .icon-slide-event svg path{fill: var(--color-text-3);}
.icon-slide-toggle .prev-event svg{transform: rotate(90deg);}
.icon-slide-toggle .next-event svg{transform: rotate(-90deg);}

.event-list-empty{background-color:rgb(var(--color-border-dark) / 5%); border-radius:var(--rounded-2);}

.event-detail-reminder{color:#4285F4;}
.event-detail-title{color:var(--color-text-2);}
.event-tab-link{color:var(--color-text-2);}
.event-tab-curr{border-color:var(--color-text-3) !important; color:var(--color-text-3) !important;}
.edi-icon .svgicon{fill:var(--color-text-5);}
.edi-icon .svgicon-location{fill:var(--color-text-4);}



.sticky-bottom-event{background-color:var(--color-text-2); color:var(--bg-2);}
.sbe-title{color:var(--color-text-5);}



footer{margin-top:var(--size-5);}



.show-sticky{fill:#FF8469 !important;}
.rancak-popup, .rancak-popup > *{top:0; right:0; width:100%; height:100%;}
.rancak-popup{position:fixed; z-index:var(--max-zindex);}
.rancak-popup > *{position:absolute;}
.rancak-popup > .rancak-popup-overlay{z-index:1; background-color:rgb(var(--color-border-dark) / 55%)}
.rancak-popup > .rancak-popup-close{z-index:1000; width:var(--size-6); height:var(--size-6); fill:var(--bg-2);}
.rancak-popup > .rancak-popup-close:hover{fill:var(--color-text-5);}
.rancak-popup > .rancak-popup-close .svgicon{width:auto; height:var(--size-5);}
.rancak-popup > .rancak-popup-container{padding:var(--size-6);}
.rancak-popup-box{position:relative; z-index:2000; padding:var(--size-4); max-width:610px;
background-color:var(--bg-4); border-radius:var(--rounded-1);}

.popup-copied{position:fixed; z-index:var(--max-zindex); top:calc(var(--size-6) + var(--size-2)); left:0; width:100%; text-align:center;}
.popup-copied-alert{display:inline-flex; margin:0 auto; padding:var(--size-3) var(--size-4); background-color:var(--color-text-3); color:var(--bg-2);
border-radius:var(--rounded-1); box-shadow:var(--shadow-default); font-size:16px;}

.rancak-popup .search-box{border-radius:var(--rounded-2); box-shadow:var(--shadow-default); overflow:hidden;}



.popup-search, .popup-search .search-box{height:auto;}
.popup-search{position:-webkit-sticky; position:sticky; padding:var(--size-4); top:var(--size-6);}
.popup-search .search-box{position:relative; max-width:var(--site-container); margin-left:auto; margin-right:auto;}
.popup-search .search-field{width:100%;}


.slotiklan:before{position:absolute; z-index:-1; top:0; left:0; bottom:0; right:0; margin:auto; padding:10px; box-sizing:border-box;
display:flex; justify-content:center; align-items:center; content:'Campaign with us sales@viva.co.id'; line-height:150%; text-align:center;}
.slotiklan-300x250:before{width:300px; height:250px;}
.slotiklan-320x50:before, .slotiklan-320x100:before{width:320px; height:50px;}
.slotiklan-728x90:before, .slotiklan-topdesktop:before{width:728px; height:90px;}
.slotiklan-970x200:before{width:970px; height:200px;}
.slotiklan-160x600:before{opacity:0;}
.slotiklan-728x90:before, .slotiklan-topdesktop:before, .slotiklan-970x200:before,
.giant-banner .slotiklan:before{content:'Promote your products or services here. We work with Impressions/ Install / Click / Sessions / Leads etc. Campaign with us sales@viva.co.id'; padding:15px;}
.iklan-bigretangle:before{background-color:transparent;}

.pad-bottom-50 {
  padding-bottom: calc(50px + 20px);
}

.pad-bottom-100 {
  padding-bottom: calc(100px + 20px);
}

@media screen and (min-width:0px) and (max-width:1023px){
  .menu-main{position:-webkit-sticky; position:sticky; z-index:calc(var(--max-zindex) - 6000); top:var(--size-6);
  background-color:var(--bg-2); box-shadow:var(--shadow-default);}
  .menu-main .width-max{position:static;}
  .menu-link{justify-content:flex-start; padding:var(--size-4);}
  .menu-link:not(:last-child){border-bottom:1px dashed rgb(var(--color-border-dark) / 8%);}
  
  .content-event-end .event-date{width: fit-content !important;}
  
  .content-more-button{width:100%;}
  
  
  
  .section-main-below .share-box{border-radius:var(--rounded-2);}
  
  
  
  footer{padding-left:var(--size-4); padding-right:var(--size-4); padding-top:var(--size-4) !important;}
}





@media screen and (min-width:680px){
  .content-event-end{max-width: 662px;}
}
@media screen and (min-width:1024px){
  .hero-image, .detail-content{border-radius:var(--rounded-2); overflow:hidden;}
  
  
  
  .content-full-button{width:100%;}
  
  
  
  .share-box{border-radius:var(--rounded-2);}
  
  
  
  .popup-search{padding-bottom:0;}

  
  .biduan-head{border-radius:var(--rounded-2); overflow:hidden;}
}

.slotiklan:before{position:absolute; z-index:-1; top:0; left:0; bottom:0; right:0; margin:auto; padding:10px; box-sizing:border-box;display:flex; justify-content:center; align-items:center; content:'Campaign with us sales@vdvc.id'; line-height:150%; text-align:center;}
.slotiklan-300x250:before{width:300px; height:250px;}
.slotiklan-320x50:before, .slotiklan-320x100:before{width:320px; height:50px;}
.slotiklan-728x90:before, .slotiklan-topdesktop:before{width:728px; height:90px;}
.slotiklan-970x200:before{width:970px; height:200px;}
.slotiklan-160x600:before{opacity:0;}
.slotiklan-728x90:before, .slotiklan-topdesktop:before, .slotiklan-970x200:before,
.giant-banner .slotiklan:before{content:'Promote your products or services here. We work with Impressions/ Install / Click / Sessions / Leads etc. Campaign with us sales@vdvc.id'; padding:15px;}
.iklan-bigretangle:before{background-color:transparent;}

.pad-bottom-50 {
  padding-bottom: calc(50px + 20px);
}

.pad-bottom-100 {
  padding-bottom: calc(100px + 20px);
}