:root{
  --rounded-normal:10px;
  --color-border:#E0E0E0;
  --color-link-primary:#243163;
  --color-link-secondary:#FFFFFF;
  --color-link-tertiary:#7eb53f;
  --color-link-quarternary:#212121;
  --color-hover:var(--color-link-primary);
  --shadow-default:0 1px 6px 0 rgba(32,33,36,.28);
  --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);
}

.site-container{background: var(--color-link-secondary);}
#sekilas-info{display:none !important; visibility:hidden; content-visibility:hidden;}
a, .btn, #btt, .slick-next, .slick-prev, .slb-thumb, .lvf-eye{
transition:all 0.25s; -moz-transition:all 0.25s; -webkit-transition:all 0.25s; -o-transition:all 0.25s;}
a, .btn, #btt{cursor:pointer}
a{color:var(--color-link-quarternary);}
a:hover{color:var(--color-hover);}
a:focus{opacity:0.6;}
.btn, a.btn{border-radius:var(--rounded-normal); color:var(--color-background); background-color:var(--color-link-primary);}
.btn:hover, a.btn:hover, .topic-link:hover{background-color:var(--color-link-tertiary);}
.btn-more{margin-top:var(--section-space-small); width:100%;}
.btn-more > span{display:flex;}
.btn-more > span > *{margin:0 3px;}
.btn-more .fas{position:relative; height:16px;}
.btn-more .fa-angle-right{width:7px; font-size:16px;}
.btn-more .fa-angle-double-right{width:12px; font-size:17px;}
#btt{position:fixed; bottom:calc(100px + var(--section-space-normal)); right:0; padding-right: 30px; padding-left: 21px; border-radius: 50px 0 0 50px; z-index:calc(var(--max-zindex) - 10000); font-size:18px; width:36px; height:36px; color:var(--color-link-primary); border:2px solid rgba(0,0,0,0.1);}
#btt:hover, #btt:focus{background-color:var(--color-link-primary); border-color:var(--color-link-primary); color:var(--color-background);}
#btt.btt-ramadan{bottom:calc(100px + var(--section-space-normal) + var(--size-6));}
.header-logo:hover, .article-list-thumb-link:hover,
.article-list-title:hover{opacity:0.5;}
.flex_ori > img{opacity:0; transition:opacity 1000ms;}
.flex_ori > img.lazyloaded{opacity:1;}
.label-advertorial{color:var(--color-link-secondary);}
.section-title{color:#7d7d7d;}
.section-title .titlebold{display: block; font-weight: 700; color: var(--color-link-primary); font-size: 24px;}
.section-title .block-title{max-height: 100%; height: 60px; width: 2px; background: #80B840; background: linear-gradient(180deg,rgba(128, 184, 64, 1) 0%, rgba(74, 107, 71, 1) 50%, rgba(36, 49, 99, 1) 100%); border-radius: 8px;}
.section-title:before{background-color:var(--color-link-primary);
background:linear-gradient(to bottom, var(--color-link-tertiary) 0%, var(--color-link-primary) 100%); border-radius:var(--rounded-normal);}

.loading-bar-line{animation:loading-bar .8s linear 0s infinite;background-position:0 0;background-repeat:repeat-x;background-size:16px 10px;background-image:-webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,.12) 33%,rgba(0,0,0,.12) 66%,transparent 66%,transparent);background-image:-moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,.12) 33%,rgba(0,0,0,.12) 66%,transparent 66%,transparent);background-image:-ms-linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,.12) 33%,rgba(0,0,0,.12) 66%,transparent 66%,transparent);background-image:-o-linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,.12) 33%,rgba(0,0,0,.12) 66%,transparent 66%,transparent);background-image:linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,.12) 33%,rgba(0,0,0,.12) 66%,transparent 66%,transparent)}@-webkit-keyframes loading-bar{0%{background-position:0 0}100%{background-position:16px 0}}@keyframes loading-bar{0%{background-position:0 0}100%{background-position:16px 0}}
.btn:focus{animation:buttonloading 1s linear infinite;}
@-webkit-keyframes buttonloading{0%{opacity:1}50%{opacity:.6}100%{opacity:1}}
@keyframes buttonloading{0%{opacity:1}50%{opacity:.6}100%{opacity:1}}
.thumb-loading:before{content:''; display:block; position:absolute; top:0; left:0; width:100%; z-index:1; background-size:650px auto; animation:loading-image .5s linear 0s infinite;}
@-webkit-keyframes loading-image{0%{background-position:0 0}100%{background-position:650px 0}}
@keyframes loading-image{0%{background-position:0 0}100%{background-position:650px 0}}

header{background-color:var(--color-link-secondary);}
header .show-sticky{fill:hsl(var(--color-link-secondary) / 100%);}
.menu-link { position: relative; z-index: 2; display: flex ; }


.float-network-box{display:grid; grid-template-columns:1fr 1fr; grid-gap:1px; background-color:#E0E0E0;
border-radius:calc(var(--rounded-normal) * 2); box-shadow:var(--shadow-default); overflow:hidden;}
.float-network-link{padding:var(--section-space-normal); background-color:#FFF;}


.now-loading{margin-top:var(--section-space-normal);}
.now-loading .bar{width:100%; height:7px; margin-bottom:5px; border-radius:var(--rounded-normal); background-color:var(--color-link-primary);}
.now-loading .name{text-align:center; font-size:12px; font-style:italic;}

.article-list-thumb:before, .article-list-thumb-link{overflow:hidden;}
.article-list-thumb-link .video-icon{color:rgba(255,255,255,0.75);}
.article-list-title{display:block; color:var(--color-link-quarternary);}
.article-list-title:hover{color:var(--color-link-tertiary);}
.article-list-cate{color:var(--color-link-secondary);}
.article-list-cate:hover{background: var(--color-link-tertiary) !important; color: var(--color-link-secondary);}
.article-list-date{color:var(--color-default);}
.article-card .article-list-row{border-radius:var(--rounded-normal); overflow:hidden;}
.sorot-edition{background-color:rgba(0,0,0,0.6); color:#FFF;}
@supports(-webkit-backdrop-filter:none) or (backdrop-filter:none){
  .sorot-edition{-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); background-color:rgba(0,0,0,0.5);}
}


.side-trending{display:grid; grid-row-gap:var(--section-space-small);}
.side-trending-link{display:grid; grid-template-columns:48px 1fr; grid-column-gap:var(--section-space-small); color:var(--color-link-secondary);
padding-bottom:var(--section-space-small); border-bottom:1px dashed;}
.side-trending-link:hover{padding-left:var(--section-space-normal);}
.stl-number{font-size:36px; color:var(--color-link-primary); display: flex; align-items: center;}
.stl-number .round-icon{--round-icon-size:10px; border-radius: 50%; width: var(--round-icon-size); height: var(--round-icon-size); background: linear-gradient(180deg,rgba(128, 184, 64, 1) 0%, rgba(74, 107, 71, 1) 50%, rgba(36, 49, 99, 1) 100%); margin-right: 8px;}
.stl-info{display:flex; align-items:center;}
.stl-title{font-size:18px; line-height:140%; color: var(--color-link-tertiary);}
.stl-data{font-size:12px; line-height:24px; font-weight:normal; color:var(--color-default);}

.related-article-box{display:grid; grid-row-gap:8px;}
.rab-title{font-size:16px; line-height:150%; display:grid; grid-template-columns:10px 1fr; grid-column-gap:8px;}
.rab-title:before{content:'>'; display:block; font-size:24px; position:relative; transform:translate(0px,-2px); color:var(--color-default);}

.main-content-title{color:var(--color-link-quarternary); text-align: center;}
.main-content-image, .image-content{overflow:hidden;}
.main-infografik img{position:relative; width:100%; height:auto;}
.mci-arrow .far{filter:drop-shadow(0px 2px 1px rgba(0,0,0,0.25));}
.mci-arrow:hover{background-color:rgba(0,0,0,0.55); color:#FFF;}

.pagination{margin-top:5px; display:flex; flex-wrap:wrap;}
.pagination-button.btn{height:36px; border: 1px solid var(--color-link-primary); padding:10px 16px; margin-top:var(--section-space-small); margin-right:var(--section-space-small); font-family:Arial,sans-serif;
background-color:var(--color-background); color:var(--color-default);}
.pagination-button.btn:hover{border: 1px solid var(--color-link-tertiary) !important; background: none; color:var(--color-link-tertiary) !important;}
div.pagination-button{cursor:default; border: 1px solid var(--color-link-tertiary) !important; color:var(--color-link-tertiary) !important;}

.pagination-vivanews{display:flex; align-items:center; color:var(--color-background) !important; fill:var(--color-background) !important; background-color:#ED1C24 !important;}
.pagination-vivanews:hover{background-color:#1A1A1A !important;}
.pagination-vivanews-label{margin-right:8px; line-height:100%;}
.pagination-vivanews .svgicon{width:auto; height:14px;}
.pagination-vivanews .svgicon path{fill:inherit;}



.alert-box{overflow:hidden; border-radius:var(--rounded-normal); color:#FFF;}
.wpn-no{font-weight:normal; color:var(--color-default) !important;}

.search-field { border-color: #E0E0E0; overflow: hidden; padding: var(--size-3); border-top-left-radius: 50px; border-bottom-left-radius: 50px; }
.search-field::placeholder{color: var(--color-link-primary); font-weight: 600; padding-left: 21px;}
.search-button { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 50px; border-bottom-right-radius: 50px; }
.search-button .svgicon{width: 16px; height: 16px; fill: #FFFFFF;}
.float-search { z-index: calc(var(--max-zindex) - 4000); padding: var(--size-3); }
.float-bottom { position: fixed; top: calc(var(--body-padding) + 40px); width: 100%; }



.share-box{border-color: var(--color-link-primary);}
.share-list-link .svgicon path{fill: #82ba41;}
.share-list-link:hover .svgicon path{fill:#fa921b;}


.sticky-bottom-close, .sticky-bottom-video-close{color:#FFF;}



.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@uptodai.com'; 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-video-320x180:before{width: 320px; height: 180px;}
.slotiklan-video-320x180:before, .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@uptodai.com'; padding:15px;}
.iklan-bigretangle:before{background-color:transparent;}



a.comment-anchor-link{width:100%; margin:var(--section-space-normal) 0; display:block;
border:1px solid var(--color-link-primary); background-color:var(--color-background); color:var(--color-link-primary);}
a.comment-anchor-link:hover{border-color:var(--color-link-secondary); color:var(--color-background);}

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



.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;}



.thumb-loading:before{background-color:#E0E0E0 !important;
  background:linear-gradient(to right,rgba(255,255,255,0) 30%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 70%) 50% 50%;}


.live-button > b{color:#FFF; background-color:#D00;}

.profile-icon .flex_ori img{border-color:#BDBDBD;}

.now-loading .name{color:#9E9E9E;}
.loading-bar-line{background-color:#EEE;}

#btt{background-color:var(--color-link-primary); color: var(--color-link-secondary);}

.header-logo img{filter:drop-shadow(0px 1px 1px rgba(0,0,0,0.25));}

.article-list-row{border-bottom-color:rgba(0,0,0,0.1);}
.article-list-cate{background-color:var(--color-link-primary);}
.article-list-date .round-icon{--round-icon-size:8px; border-radius: 50%; width: var(--round-icon-size); height: var(--round-icon-size); background: linear-gradient(180deg,rgba(128, 184, 64, 1) 0%, rgba(74, 107, 71, 1) 50%, rgba(36, 49, 99, 1) 100%); margin-right: 8px;}
.article-card .article-list-row{background-color:rgba(255,255,255,0.75); border-color:#E0E0E0;}

.vlix-info{background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);}

.side-trending-link{border-bottom-color:#E0E0E0 !important;}

.main-content-image, .image-content{background-color:#FFF; border-color:#E0E0E0 !important;}
.main-content-detail{color:#424242;}

.pagination-button, .lvf-field{border:1px solid rgba(0,0,0,0.1);}

.lsb-link:hover{background-color:#212121 !important;}
.login-viva, .profile-gateway, .profile-gateway-link{border-color:rgba(0,0,0,0.1) !important;}
.profile-data-thumb .flex_ori{border-color:#FFF !important;}

.alert-box{background-color:#D00;}

.ibc-field{border-color:rgba(0,0,0,0.1) !important;}

.profile-related-link, .prl-thumb-frame{border-color:#E0E0E0 !important; background:#EEE;}

.slotiklan:before{background-color:#EEE;}


.footer-all { position: relative; z-index: 2; background: var(--color-footer); border-top: 4px solid #5f8e3e; font-size: 14px; padding: 20px; padding-bottom: calc(var(--body-padding) + 20px); padding-top: var(--size-5); letter-spacing: 1px; }
.footer-all-info, .footer-all-follow { margin: 10px 0 15px; padding: 5px 0; }
.fam-parent { text-align: center; margin-bottom: 5px; }
.fam-child .flex_ori { background-color: transparent; margin: 10px; }
.fam-child, .footer-all-info { display: flex; flex-wrap: wrap; justify-content: center; }
.fam-child * { line-height: 0; align-items: center; }
.fam-child img { position: relative; width: auto; height: 20px; }
.footer-all-follow, .footer-all-member, .footer-all-category { padding-top: 4px; }
.faf-label { text-align: center; margin-bottom: 3px; }
.faf-list { display: flex; justify-content: center; }
.faf-icon { line-height: 0; margin: 5px; display: block; }
.faf-icon .svgicon path{fill: #243163;}
.faf-icon:hover .svgicon path{fill: #1974bf;}
.faf-icon svg { width: 28px; height: 28px; }
.footer-all-info a { margin: 8px; }
.footer-all a, .footer-all a:hover { color: #f4f4f4; }
.footer-all-copyright { display: grid; justify-items: center;  color: #d3d3d3;}
.footer-all-copyright * { font-size: 14px; line-height: 22px; display: inline; text-align: center;}
.nav-footer-item{position: relative;}
.nav-footer-item:hover{color: #f4f4f4;}
.nav-footer-item:after { content: "."; position: absolute; top: -12px; right: -12px; font-size: 23px; font-weight: 400; }
.nav-footer-item:last-child::after{ content: ""; }



.faf-fb { fill: #4867aa; }
.faf-tw { fill: #000000; }
.faf-ig { fill: #a935af; }