:root {
  --background-color: #fdfdfd;
  --font-basecolor: #757575;
  --font-link-primary: #9a1b1f;
  --font-link-secondary: #231f20;
  --font-link-tertiary: #ff9900;
  --font-link-quaternary: #ec1c4c;
  --shadow-base: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
  --shadow-inset: inset -2px -2px 4px rgba(255, 255, 255, 0.2),
    inset 2px 2px 12px rgba(0, 0, 0, 0.2);
}

a,
.btn,
#btt,
.search-button,
.schedule-icon,
.imageframe-info,
.viral-number-circle,
.viral-title {
  transition: all 0.25s;
  -moz-transition: all 0.25s;
  -webkit-transition: all 0.25s;
  -o-transition: all 0.25s;
}
a:hover,
#btt,
button:hover {
  cursor: pointer;
}
a:hover {
  color: var(--font-link-secondary);
}
.topic-title:hover {
  background-color: var(--font-link-primary);
  color: var(--background-color);
}
.btn:hover,
.pagination a.btn:hover,
.search-button:hover,
.al-network:hover {
  opacity: 1;
  background-color: var(--font-link-secondary);
  color: var(--background-color);
}
a.ali-title:hover {
  color: var(--font-link-primary);
}
.faf-icon:hover {
  opacity: 1;
  color: #fff;
}
.presenter-list-box:hover {
  background-color: #eee;
}
.header-logo:hover,
.footer-all-follow a:hover,
.alt-link:hover,
.stories-thumb:hover,
.presenter-list-box:hover {
  opacity: 0.5;
}
.loading-bar-line {
  -webkit-animation: loading-bar 0.8s linear 0s infinite;
  -moz-animation: loading-bar 0.8s linear 0s infinite;
  -o-animation: loading-bar 0.8s linear 0s infinite;
  animation: loading-bar 0.8s linear 0s infinite;
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: 16px 10px;
  background-color: #eee;
  background-image: -webkit-linear-gradient(
    315deg,
    transparent,
    transparent 33%,
    rgba(0, 0, 0, 0.12) 33%,
    rgba(0, 0, 0, 0.12) 66%,
    transparent 66%,
    transparent
  );
  background-image: -moz-linear-gradient(
    315deg,
    transparent,
    transparent 33%,
    rgba(0, 0, 0, 0.12) 33%,
    rgba(0, 0, 0, 0.12) 66%,
    transparent 66%,
    transparent
  );
  background-image: -ms-linear-gradient(
    315deg,
    transparent,
    transparent 33%,
    rgba(0, 0, 0, 0.12) 33%,
    rgba(0, 0, 0, 0.12) 66%,
    transparent 66%,
    transparent
  );
  background-image: -o-linear-gradient(
    315deg,
    transparent,
    transparent 33%,
    rgba(0, 0, 0, 0.12) 33%,
    rgba(0, 0, 0, 0.12) 66%,
    transparent 66%,
    transparent
  );
  background-image: linear-gradient(
    315deg,
    transparent,
    transparent 33%,
    rgba(0, 0, 0, 0.12) 33%,
    rgba(0, 0, 0, 0.12) 66%,
    transparent 66%,
    transparent
  );
}
@-webkit-keyframes loading-bar {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 16px 0;
  }
}
@-moz-keyframes loading-bar {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 16px 0;
  }
}
@-o-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;
  }
}

.title-network-jagodangdut {
  background-color: #86127f;
}
.title-network-vivacoid {
  background-color: #cc0000;
}
.title-network-vlix {
  background-color: #2cb0ff;
}
.title-network-100kpj {
  background-color: #000000;
}
.title-network-intipseleb {
  background-color: #ff3a85;
}
.title-network-sahijab {
  background-color: #75b11e;
}

.sl-fb {
  color: #4867aa;
}
.sl-tw {
  color: #00acec;
}
.sl-ml {
  color: #ff7300;
}
.sl-wa {
  color: #2bb240;
}
.sl-li {
  color: #41c106;
}
.sl-ot {
  color: #212121;
}

.btn:focus,
.search-button:focus,
.topic-title:focus {
  -webkit-animation: buttonloading 1s linear infinite;
  -moz-animation: buttonloading 1s linear infinite;
  -ms-animation: buttonloading 1s linear infinite;
  -o-animation: buttonloading 1s linear infinite;
  animation: buttonloading 1s linear infinite;
}
@-webkit-keyframes buttonloading {
  0% {
    background-color: rgba(0, 0, 0, 0.25);
  }
  50% {
    background-color: rgba(0, 0, 0, 1);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.25);
  }
}
@keyframes buttonloading {
  0% {
    background-color: rgba(0, 0, 0, 0.5);
  }
  50% {
    background-color: rgba(0, 0, 0, 1);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.footer-all {
  margin-top: 20px;
}
#btt {
  position: fixed;
  bottom: calc(100px + var(--size-7));
  right: var(--size-2);
  z-index: 97;
  font-size: 18px;
  margin: 10px 0;
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.5);
  color: var(--font-link-primary);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  outline: 1px solid #9a1b1f;
}
#btt:hover {
  color: var(--font-link-tertiary);
}

.mpb-thumb {
  border-radius: 50%;
  overflow: hidden;
}

.article-list-thumb:before,
.stories-thumb:before,
.video-frame:before,
.imageframe-default:before,
.imageframe-stories > span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0) 90%
  );
  background-size: 650px auto;
  -webkit-animation: loading-image 0.5s linear 0s infinite;
  -moz-animation: loading-image 0.5s linear 0s infinite;
  -o-animation: loading-image 0.5s linear 0s infinite;
  animation: loading-image 0.5s linear 0s infinite;
}
@-webkit-keyframes loading-image {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 650px 0;
  }
}
@-moz-keyframes loading-image {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 650px 0;
  }
}
@-o-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;
  }
}

.live-button > div:before {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: blinking;
  animation-name: blinking;
}
@-webkit-keyframes blinking {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blinking {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

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

.float-search {
  position: fixed;
  z-index: 98;
}
.float-search .search-form {
  overflow: hidden;
  -moz-border-radius: var(--rounded-normal);
  -webkit-border-radius: var(--rounded-normal);
  border-radius: var(--rounded-normal);
  -moz-box-shadow: var(--shadow-base);
  -webkit-box-shadow: var(--shadow-base);
  box-shadow: var(--shadow-base);
}

.menu-search-show {
  color: var(--font-link-tertiary) !important;
}

.imageframe-stories img,
.imageframe-presenter img {
  position: relative;
  z-index: 2;
}
.imageframe-stories > span:before,
.imageframe-presenter > span:before {
  height: 100%;
}
.first-view-article:hover .imageframe-info,
.first-view-article:focus .imageframe-info {
  opacity: 1;
}

.ari-label,
.ari-link h2 {
  font-size: 16px;
  line-height: 140%;
}
.ari-label {
  color: var(--base-font-color);
}
.ari-list > li {
  position: relative;
  margin-top: 3px;
}
.ari-list > li:before {
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  font-size: 16px;
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}
.ari-link {
  display: block;
  padding: 3px 0 3px var(--section-space);
}

.pagination {
  margin: var(--size-2) 0;
}
.pagination .btn {
  float: left;
  margin-right: 5px;
  margin-top: 5px;
  height: 43px !important;
  background-color: #eee;
  border-color: #eee;
  color: var(--font-link-secondary);
}
.pagination div.btn {
  background-color: var(--font-link-primary) !important;
  border-color: var(--font-link-primary) !important;
  color: var(--background-color) !important;
}

.breadcrumb-step,
.detail-author a,
.detail-content a {
  color: var(--font-link-secondary);
}
.breadcrumb-step:hover,
.detail-author a:hover,
.detail-content a:hover {
  color: var(--font-link-primary);
}

.rancak-bacajuga {
  --icon-size: 12px;
  font-size: 14px;
  position: relative;
  margin: var(--size-4) 0;
  font-family: "Montserrat", serif;
}
.rbj-label {
  margin-bottom: 21px;
  padding-left: 18px;
  line-height: 100%;
  position: relative;
  font-size: 18px;
  color: #231f20;
  font-weight: 700;
}
.rbj-label:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: #cb0000;
  border-radius: var(--rounded-normal);
}
.rbj-list {
  display: grid;
  grid-gap: 13px;
}
.rbj-link {
  padding-left: calc(var(--icon-size) * 2);
}
.rbj-link:before {
  content: "";
  display: block;
  position: absolute;
  width: 13px;
  height: 13px;
  top: 3px;
  left: 0;
  background-color: #ffd401;
  border-radius: 50%;
}
.rbj-link {
  color: #231f20;
  position: relative;
  display: block;
  font-weight: 500 !important;
  line-height: 160%;
  font-size: 15px;
}
.rbj-link span {
  color: #cc0000;
  font-weight: 500;
}
.rbj-link:hover {
  color: var(--font-link-primary);
}
.rancak-related .rbj-label {
  margin-bottom: var(--size-3);
}
.rancak-related .rbj-link {
  padding-left: calc(var(--icon-size) * 2);
}
.rancak-related .rbj-link:before {
  content: "";
  display: block;
  position: absolute;
  background: none;
  top: 2px;
  left: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  border: 2px solid var(--font-link-primary);
  border-radius: 50%;
}

.tns-outer {
  position: relative;
}
.tns-controls {
  --button-size: 34px;
}
.tns-controls button {
  position: absolute;
  top: 0;
  z-index: 1000;
  height: 100%;
  font-size: var(--button-size);
  background-color: transparent;
  justify-content: center;
  align-items: center;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  padding: 0 var(--section-space);
  display: inline-flex;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 100%;
  color: var(--background-color);
  transition: all 0.25s;
}
.tns-controls button:hover {
  color: var(--font-link-primary);
}
.tns-controls button[data-controls="prev"] {
  left: 0;
}
.tns-controls button[data-controls="prev"]:before {
  content: "\f359";
}
.tns-controls button[data-controls="next"] {
  right: 0;
}
.tns-controls button[data-controls="next"]:before {
  content: "\f35a";
}

.next-page {
  border-radius: var(--rounded-normal);
  font-style: italic;
}
.next-page-label {
  color: rgba(255, 255, 255, 0.89);
}
.next-page-link,
.next-page-icon {
  color: var(--background-color);
}

.widget-kc-container {
  --wkcc-color-1: #ffffff;
  --wkcc-color-2: #0e1824;
  background-color: var(--wkcc-color-2);
  box-shadow: 0 8px 21px 0 rgba(0, 0, 0, 0.08);
  border-radius: var(--size-4);
  overflow: hidden;
}
.wkcc-head img {
  opacity: 0.89;
}
.wkcc-info {
  background: url("/appasset/responsive/img/widget-kc/catatan-kc-bg.jpg")
    no-repeat top center var(--wkcc-color-2);
}
.wkcc-thumb-border {
  background-color: var(--background-color);
}
.wkcc-thumb-border,
.wkcc-thumb-frame {
  border-radius: 50%;
  overflow: hidden;
}
.wkcc-chapter {
  color: var(--subdomain-background);
}
.wkcc-link {
  color: var(--wkcc-color-1);
  border-color: #424242;
}
.wkcc-link:hover {
  color: var(--font-link-tertiary);
}
.wkcc-date {
  color: var(--subdomain-background-2);
}
a.wkcc-button {
  border-radius: var(--size-4);
  background-color: transparent;
  border-color: var(--wkcc-color-1);
}
a.wkcc-button:hover {
  background-color: var(--font-link-tertiary);
  border-color: var(--font-link-tertiary);
}

.vivacomment {
  --color-theme-3: #9a1b1f;
}

.sticky-bottom-close,
.sticky-skin-right-close,
.sticky-skin-left-close,
.header-button-close,
.billboard-button-close,
.slot-iklan-close {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}