body {
    font-family:  "roboto",  sans-serif;
    color:  #555555;
}
ul  {
    padding-left:  0px;
    list-style:  none;
    display:  flex;
}
ul li {
    padding-right:  5px;
}
a  {
    color:  #30302f;
    outline:  none;
    text-decoration:  none;
}
.flickity-page-dots .dot  {
    width:  8px !important;
    height:  8px !important;
    margin:  0px 2px !important;
}
.btn-share:hover  {
    cursor:  pointer;
}
.top-statistik-count {
    position:  absolute;
    top:  85%;
    margin-left:  5px;
}
.top-statistik-count li {
    margin-right:  10px;
}
.top-statistik-count li span {
    font-size:  12px;
    color:  #fff;
}
.statistik-count span {
    font-size:  12px;
}
@media (min-width:320px)  {
    .menu-sidebar {
    top:  40px;
    left:  -560px;
    position:  fixed;
    width:  100%;
    max-width:  400px;
    height:  100%;
    max-height:  400px;
    padding:  0 10px;
    transition:  all .5s ease;
    overflow-y:  auto;
    z-index:  2005;
}
.gallery-cell  {
    width:  66%;
    height:  200px;
    margin-right:  10px;
    background:  #8C8;
    counter-increment:  gallery-cell;
}
.clear-icon  {
    position:  absolute;
    top:  10px;
    right:  60px;
    width:  10px;
    cursor:  pointer;
    visibility:  hidden;
}
.headline-items {
    position:  absolute;
    top:  53%;
    padding:  5px;
    color:  white;
    min-height:  96px;
    width:  100%;
    background-image:  linear-gradient(to bottom,  rgba(0, 0, 0, 0),  rgba(0, 0, 0, 1));
}
.headline-kanal {
    position:  absolute;
    top:  55%;
    padding:  5px;
    color:  white;
    min-height:  80px;
    width:  100%;
    background-image:  linear-gradient(to bottom,  rgba(0, 0, 0, 0),  rgba(0, 0, 0, 1));
}
.btn-share:hover  {
    cursor:  pointer;
}
}
@media (min-width:480px)  {
    .menu-sidebar {
    top:  40px;
    left:  -450px;
    position:  fixed;
    width:  450px;
    height:  100%;
    max-height:  400px;
    padding:  0 10px;
    transition:  all .5s ease;
    overflow-y:  auto;
    z-index:  2005;
}
.gallery-cell  {
    width:  50%;
    height:  400px;
    margin-right:  10px;
    background:  #8C8;
    counter-increment:  gallery-cell;
}
.clear-icon  {
    position:  absolute;
    top:  10px;
    right:  110px;
    width:  10px;
    cursor:  pointer;
    visibility:  hidden;
}
.statistik-count  {
    position:  absolute;
    top:  232px;
}
.headline-items {
    position:  absolute;
    top:  70%;
    padding:  5px;
    color:  white;
    min-height:  85px;
    width:  100%;
    background-image:  linear-gradient(to bottom,  rgba(0, 0, 0, 0),  rgba(0, 0, 0, 1));
}
.headline-kanal {
    position:  absolute;
    top:  85%;
    padding:  5px;
    color:  white;
    min-height:  80px;
    width:  100%;
    background-image:  linear-gradient(to bottom,  rgba(0, 0, 0, 0),  rgba(0, 0, 0, 1));
}
}
@media (min-width:600px)  {
}
@media (min-width:801px)  {
}
@media (min-width:1025px)  {
}
@media (min-width:1281px)  {
}
}
.main-title {
    font-family:  "Roboto", Arial, Tahoma;
    font-size:  28px;
    font-weight:  700;
    color:  rgba(43, 43, 43, 0.9);
    margin-top:  12px;
}
.menu-sidebar header {
    font-size:  22px;
    text-align:  center;
    line-height:  44px;
    user-select:  none;
    background-color:  white;
    font-weight:  500;
}
.slidemenu-top {
    padding-left:  20px;
}
.menu-sidebar ul {
    display:  flex;
    list-style:  none;
    flex-flow:  row wrap;
    align-content:  flex-start;
    justify-content:  space-between;
    padding:  0;
}
.menu-sidebar ul > li  {
    width:  50%;
    padding:  0;
    margin:  0 0 0px 0;
}
.menu-sidebar ul li  {
    position:  static;
    margin:  0;
}
.sahabat_menu_icon  {
    width:  23px;
    height:  23px;
    display:  inline-block;
    vertical-align:  top;
    text-align:  center;
    margin-right:  5px;
}
.sahabat_menu_icon img  {
    vertical-align:  top;
    height:  23px;
}
.menu-sidebar ul > li a  {
    text-decoration:  none;
    color:  #555;
    font:  600 12px/24px "Roboto", sans-serif;
    font-weight:  600;
    font-weight:  normal;
    color:  #6a6a6a;
    display:  block;
    position:  relative;
}
.menu-sidebar ul li a:hover  {
    background-color:  #f8f8f8;
}
#chkmenu {
    display:  none;
}
label #btn,  label #cancel {
    position:  relative;
    cursor:  pointer;
}
label #btn {
    display:  inline-block;
    visibility:  visible;
    font-size:  12px;
}
label #btn i,  label #cancel i {
    padding:  5px;
    font-size:  10px;
    width:  20px;
    height:  20px;
    color:  #fff;
    background-color:  #9bcca8;
    font-weight:  bold;
    border-radius:  50%;
    text-align:  center;
}
label #cancel {
    display:  none;
    visibility:  hidden;
    font-size:  0px;
}
#chkmenu:checked ~ .menu-sidebar {
    left:  0;
}
#chkmenu:checked ~ label #btn {
    display:  none;
    visibility:  hidden;
    pointer-events:  none;
    font-size:  0px;
}
#chkmenu:checked ~ label #cancel {
    display:  inline-block;
    visibility:  visible;
    font-size:  12px;
}
.sahabat-top {
    display:  block;
    clear:  both;
    overflow:  hidden;
}
.wrapper  {
    position:  relative;
    display:  flex;
    max-width:  400px;
}
.search-icon  {
    position:  absolute;
    top:  8px;
    left:  8px;
    width:  14px;
}
.search  {
    border:  1px solid #dcdedc;
    border-radius:  10px;
    width:  100%;
    min-width:  300px;
    padding:  2px 23px 2px 30px;
    outline:  0;
    background-color:  #f5f5f5;
}
.search:hover,  .search:focus  {
    border:  1.5px solid #009688;
    background-color:  white;
}
.navbar-sahabat {
    background:  rgb(9, 174, 156);
    !important;
}
ul.mobile-menu {
    width:  100%;
    overflow:  auto;
    white-space: nowrap;
    margin:  0 !important;
}
ul.mobile-menu li {
    display:  inline-block;
    clear:  both;
    padding:  5px;
}
ul.mobile-menu li a  {
    text-decoration:  none;
    color:  #fff;
    font-size:  14px;
    font-weight:  600;
    transition:  all 0.5s ease-in-out;
    position:  relative;
}
ul.mobile-menu li a::before  {
    content:  attr(data-item);
    transition:  0.5s;
    color:  #8254ff;
    position:  absolute;
    top:  0;
    bottom:  0;
    left:  0;
    right:  0;
    width:  0;
    overflow:  hidden;
}
ul.mobile-menu li.active {
    background-color:  rgb(255, 255, 255);
    !important;
}
ul.mobile-menu li.active a {
    color:  rgb(9, 174, 156);
    !important;
}
*  {
    -webkit-box-sizing:  border-box;
    box-sizing:  border-box;
}
.gallery  {
    background:  #EEE;
}
ul.livesearch li {
    width:  100px;
}
ul.livesearch li a.nav-link {
    background-color:  #cd1f43;
    border-radius:  3px;
    padding:  4px;
    margin:  auto;
    color:  #fff !important;
    font-size:  18px;
    font-weight:  bold;
}
.live-box {
    text-align:  center;
    padding:  2px;
}
.live-box span {
    display:  block;
}
.live-box span::before {
    content:  "";
    width:  10px;
    height:  10px;
    border-radius:  50px;
    display:  inline-block;
    background:  #fff;
    margin-right:  5px;
    animation:  blink 1.5s ease-in-out infinite;
}
@keyframes blink  {
    0%,  100% {
    opacity:  0;
}
40%,  70% {
    opacity:  1;
}
}
.flickity-button {
    display:  none !important;
    visibility: hidden !important;
}
.text-utama {
    font-size:  1.1rem !important;
    line-height:  1.6rem;
}
.kanal-utama {
    position:  absolute;
    top:  5px;
}
.roboto-14 {
    font-family:  "roboto",  sans-serif;
    font-size:  12px;
    line-height:  1.2rem;
}
.roboto-12 {
    font-family:  "roboto",  sans-serif;
    font-size:  12px;
}
.back-to-top  {
    position:  fixed;
    display:  none;
    right:  30px;
    bottom:  30px;
    z-index:  99;
}
.kanal-utama,  .lbl-text {
    background:  rgb(9, 174, 156);
    color:  #fff;
    font-size:  12px;
    text-transform:  uppercase;
    font-weight:  600;
    padding:  2px 10px;
    margin-left:  5px;
    border-radius:  5px;
}
.lblTitle  {
    font-size:  20px;
    font-weight:  500;
    letter-spacing:  0;
    line-height:  1.5em;
    padding-bottom:  15px;
    position:  relative;
}
.lblTitle:before  {
    content:  "";
    position:  absolute;
    left:  0;
    bottom:  0;
    height:  5px;
    width:  30%;
    background-color:  #09ae9c;
}
.lblTitle:after  {
    content:  "";
    position:  absolute;
    left:  0;
    bottom:  2px;
    height:  1px;
    width:  100%;
    background-color:  #145369;
}
.socialShareLinks a  {
    display:  inline-block;
    text-decoration:  none;
    padding:  7px;
}
.socialShareLinks a.facebook {
    color:  #4267B2;
}
.socialShareLinks a.twitter {
    color:  #1DA1F2;
}
.socialShareLinks a.linkedin {
    color:  #0072b1;
}
.socialShareLinks a.mail {
    color:  #d34836;
}
.socialShareLinks a.wa {
    color:  #25D366;
}
.socialShareLinks a i:hover {
    color:  black;
}
.carousel-cell  {
    width:  45%;
    margin-right:  10px;
    border-radius:  5px;
    counter-increment:  carousel-cell;
}
.carousel-indicators  {
    margin-right:  1% !important;
    margin-bottom:  1rem;
    margin-left:  1% !important;
}
.video-slider .flickity-page-dots {
    display:  none !important;
    visibility:  hidden !important;
}
.video-time {
    position:  absolute;
    font-size:  0.75rem;
    top:  3%;
    right:  15%;
    padding:  2px;
    color:  white;
    background-color:  #454545;
}
.video-desc .video-title {
    font-size:  1.2rem;
    line-height:  2.6rem;
    font-weight:  500;
    white-space:  normal;
    color:  #555;
}
.text-judul-kedua {
    font-size:  14px;
    font-weight:  550;
    line-height:  1.5 !important;
    overflow:  hidden;
    -webkit-line-clamp:  3;
    display:  -webkit-box;
    -webkit-box-orient:  vertical;
}
.no-urut {
    font-size:  20px;
    font-weight:  600;
    color:  #999999 }
.item-bg {
    background-color:  #E7E7E7;
    border-radius:  9999px;
    display:  inline-block;
    margin-bottom:  0.75rem;
    margin-right:  0.75rem;
    padding:  0.25rem 1.5rem;
}
.socialShareLinks a  {
    display:  inline-block;
    text-decoration:  none;
    padding:  7px;
}
.socialShareLinks a.facebook {
    color:  #4267B2;
}
.socialShareLinks a.twitter {
    color:  #1DA1F2;
}
.socialShareLinks a.linkedin {
    color:  #0072b1;
}
.socialShareLinks a.mail {
    color:  #d34836;
}
.socialShareLinks a.wa {
    color:  #25D366;
}
.socialShareLinks a i:hover {
    color:  black;
}
#social-links ul li  {
    display:  inline-block;
}
#social-links ul li a  {
    border-radius:  5px;
    font-size:  20px;
}
#social-links .fa-facebook {
    color:  #0d6efd;
}
#social-links .fa-twitter {
    color:  deepskyblue;
}
#social-links .fa-linkedin {
    color:  #0e76a8;
}
#social-links .fa-whatsapp {
    color:  #25D366 }
#social-links .fa-reddit {
    color:  #FF4500;
    ;
}
#social-links .fa-telegram {
    color:  #0088cc;
}
.carousel-indicators li  {
    width:  50%;
    height:  100%;
    opacity:  0.8;
}
.carousel-indicators button[data-bs-target] {
    width:  95%;
}
.carousel-indicators button[data-bs-target]:not(.active) {
    opacity:  0.8;
}
.carousel-indicators  {
    position:  static;
}
.carousel-indicators li img {
    width:  100%;
}
.konten-kanal {
    height:  auto !important;
    padding-bottom:  0px !important;
}
.info-kanal {
    display:  inline-block;
    float:  left;
}
.nama-kanal {
    font-size:  13px;
    padding-left:  5px;
    margin-right:  10px;
    margin-bottom:  5px;
    color:  #282828;
    opacity:  0.9;
}
.tanggal-kanal {
    font-size:  12px;
    line-height:  19px;
    margin-bottom:  5px;
    color:  #9d9d9d;
}
.sport {
    border-left:  5px solid #80c178;
}
.finance {
    border-left:  5px solid #0005C1;
}
.bisnis {
    border-left:  5px solid #00aeef;
}
.news {
    border-left:  5px solid #d2232a;
}
.showbiz {
    border-left:  5px solid #d2232a;
}
.lifestyle {
    border-left:  5px solid #93c889;
}
.tekno {
    border-left:  5px solid #25408f;
}
.otomotif {
    border-left:  5px solid #fcb965;
}
.bola {
    border-left:  5px solid #41ad49;
}
.kamutau {
    border-left:  5px solid #949698;
}
.nusantara {
    border-left:  5px solid #fdb717;
}
.comment-thread  {
    width:  700px;
    max-width:  100%;
    margin:  auto;
    padding:  0 30px;
    background-color:  #fff;
    border:  1px solid transparent;
}
.blog_details {
    font-size:  16px;
    line-height:  1.7;
    color:  #282828;
    margin-top:  12px;
}
.blog_details img {
    width:  100%;
}
.blog_details iframe  {
    width:  100%;
    height:  100%;
}
.m-0  {
    margin:  0;
}
.sr-only  {
    position:  absolute;
    left:  -10000px;
    top:  auto;
    width:  1px;
    height:  1px;
    overflow:  hidden;
}
button  {
    -moz-appearance:  none;
    -webkit-appearance:  none;
    appearance:  none;
    font-size:  14px;
    padding:  4px 8px;
    color:  rgba(0,  0,  0,  0.85);
    background-color:  #fff;
    border:  1px solid rgba(0,  0,  0,  0.2);
    border-radius:  4px;
}
button:hover,  button:focus,  button:active  {
    cursor:  pointer;
    background:  rgb(9, 174, 156);
}
.comment-thread  {
    max-width:  100%;
    margin:  auto;
    padding:  0 30px;
    background-color:  #fff;
    border:  1px solid transparent;
}
.comment-thread input:hover {
    color: #000;
}
.m-0  {
    margin:  0;
}
.sr-only  {
    position:  absolute;
    left:  -10000px;
    top:  auto;
    width:  1px;
    height:  1px;
    overflow:  hidden;
}
.comment  {
    position:  relative;
    margin:  20px auto;
}
.comment-heading  {
    display:  flex;
    align-items:  center;
    height:  50px;
    font-size:  14px;
}
.comment-voting  {
    width:  30px;
    height:  30px;
    font-size:  10px;
}
.comment-voting button  {
    display:  block;
    width:  100%;
    height:  50%;
    padding:  0;
    border:  0;
    font-size:  10px;
}
.comment-info  {
    color:  rgba(0,  0,  0,  0.5);
    margin-left:  10px;
}
.comment-author  {
    color:  rgba(0,  0,  0,  0.85);
    font-weight:  bold;
    text-decoration:  none;
    font-size:  12px;
}
.comment-info p {
    font-size:  12px;
}
.comment-author:hover  {
    text-decoration:  underline;
}
.replies  {
    margin-left:  20px;
}
.comment-border-link  {
    display:  block;
    position:  absolute;
    top:  50px;
    left:  0;
    width:  12px;
    height:  calc(100% - 50px);
    border-left:  4px solid transparent;
    border-right:  4px solid transparent;
    background-color:  rgba(0,  0,  0,  0.1);
    background-clip:  padding-box;
}
.comment-border-link:hover  {
    background-color:  rgba(0,  0,  0,  0.3);
}
.comment-body  {
    padding:  0 20px;
    padding-left:  28px;
}
.replies  {
    margin-left:  28px;
}
details.comment summary  {
    position:  relative;
    list-style:  none;
    cursor:  pointer;
}
details.comment summary::-webkit-details-marker  {
    display:  none;
}
details.comment:not([open]) .comment-heading  {
    border-bottom:  1px solid rgba(0,  0,  0,  0.2);
}
.comment-heading::after  {
    display:  inline-block;
    position:  absolute;
    right:  5px;
    align-self:  center;
    font-size:  12px;
    color:  rgba(0,  0,  0,  0.55);
}
details.comment[open] .comment-heading::after  {
    content:  "Sembunyikan";
}
details.comment:not([open]) .comment-heading::after  {
    content:  "Tampilkan";
}
@media screen and (-ms-high-contrast: active),  (-ms-high-contrast: none)  {
    .comment-heading  {
    cursor:  default;
}
details.comment[open] .comment-heading::after,  details.comment:not([open]) .comment-heading::after  {
    content:  " ";
}
}
.footer-section {
    color:  rgb(9, 174, 156);
    !important;
    background:  #fefefe;
    border-top:  1px solid rgba(9, 174, 156, 0.15);
    padding-bottom:  50px !important;
    padding-top:  30px !important;
    box-sizing:  border-box;
    width:  100%;
    text-align:  left;
    clear:  both;
    overflow:  hidden;
}
.footer-distributed a {
    text-decoration:  none;
    color:  rgb(9, 174, 156);
    !important;
    text-align:  left;
    padding:  5px;
    display:  block;
    font-size:  12px;
    text-transform:  capitalize;
}
.footer-distributed .footer-center i {
    background-color:  #33383b;
    color:  rgb(9, 174, 156);
    !important;
    font-size:  10px;
    width:  18px;
    height:  18px;
    border-radius:  50%;
    text-align:  center;
    line-height:  18px;
    vertical-align:  middle;
}
#social-links ul li  {
    display:  inline-block;
}
#social-links ul li a  {
    font-size:  24px !important;
    padding:  8px;
}
#social-links .fa-facebook {
    color:  #0d6efd;
}
#social-links .fa-twitter {
    color:  deepskyblue;
}
#social-links .fa-linkedin {
    color:  #0e76a8;
}
#social-links .fa-whatsapp {
    color:  #25D366 }
#social-links .fa-reddit {
    color:  #FF4500;
    ;
}
#social-links .fa-telegram {
    color:  #0088cc;
}
#social-links .fa-youtube {
    color:  #ff0000;
}
#social-links .fa-linkedin-in {
    color:  #0e76a8;
}
ul.sosmedlink li a {
    width: 40px;
    height: 40px;
    display: block;
    text-align: center;
    border-radius:  50% !important;
    margin:  0 5px;
    padding:  6px 0;
    font-size:  16px !important;
    box-sizing:  border-box;
    text-decoration: none;
    box-shadow:  0 10px 15px rgba(0, 0, 0, 0.3);
    background:  linear-gradient(0deg,  #ddd,  #fff);
    transition:  .5s;
}
.popup {
    top:  0;
    width:  100%;
    height:  100%;
    background-color:  rgba(0, 0, 0, .3);
    position:  fixed;
    opacity:  0;
    transition:  all .2s ease-in;
    z-index:  10000;
}
.popup__content {
    width:  300px;
    text-align:  center;
    position:  relative;
    margin:  20vh auto;
}
.popup__image {
    width:  100%;
    margin-bottom:  15px;
}
.popup__dismiss {
    position:  absolute;
    top:  0;
    right:  0;
    width:  25px;
}
.popup--show {
    opacity:  1;
}
.popup--close {
    display:  none;
    transition:  all .2s ease-out;
}
.beritautama {
    width: 100%;
    padding:  2%;
    margin: 0px auto;
}
.slick-arrow {
    visibility:  hidden;
    display:  none;
}
.slick-dots  {
    text-align:  center;
    margin:  10px;
    position:  absolute;
}
.slick-dots li  {
    display:  inline-block;
}
.slick-dots button  {
    text-indent:  -100000px;
    height:  8px;
    width:  8px;
    border:  0;
    padding:  0;
    margin-right:  10px;
    cursor:  pointer;
    border-radius:  50%;
    background:  #d6d6d6;
}
.slider-active .slick-dots button  {
    text-indent:  -100000px;
    height:  10px;
    width:  10px;
    border:  0;
    padding:  0;
    margin-right:  10px;
    cursor:  pointer;
    border-radius:  50%;
    margin-bottom:  84px;
}
.slick-list  {
    margin-left:  -15px;
    margin-right:  -15px;
}
.slick-active button  {
    background:  #28a745;
    height:  9px;
    width:  38px;
    border-radius:  10px;
}
.isiberita {
    position:  relative;
    overflow:  hidden;
}
.isiberita-title  {
    position:  absolute;
    z-index:  2;
    bottom:  0;
    left:  0;
    background:  rgba(0,  0,  0,  0.4);
    color:  #fff;
    width:  100%;
    min-height:  20%;
    padding:  0 5px;
    font-weight:  500;
    line-height:  22px;
}
.waktuberita {
    display:  block;
    position:  relative;
    color:  rgb(222,  222,  222);
    line-height:  16px;
    font-weight:  400;
    font-size:  12px;
}
.reaction {
    display:  flex;
    flex:  1 1 0%;
    -moz-box-align:  center;
    align-items:  center;
    font-size:  12px;
}
.reaction {
    line-height: 16px !important;
}
.reaction_icon {
    display:  flex;
    background-color:  transparent;
    border:  medium none;
    padding:  0px;
    cursor:  pointer;
    -moz-box-align:  center;
    align-items:  center;
    margin-right:  4px;
    min-width:  40px;
}
.reaction_value {
    padding-left:  4px;
}
.thumbimage  {
    object-fit:  cover;
    overflow:  hidden;
    height:  15vh;
    width :  30vw;
}
.bacajuga {
    margin:  5px 20px;
    padding:  10px;
    border-left: 4px solid rgb(9, 174, 156);
}
.bacajuga a {
    color:  rgb(9, 174, 156);
}
.sahabat-paging a,  .page-item a {
    font-size:  11px !important;
}
.sahabat-paging a.next {
    display:  none;
}
.paging-area {
    background-color:  #efefef;
    padding:  5px 10px 0px 10px;
}
.page-item.active .page-link {
    z-index:  3;
    color:  #fff !important ;
    background-color:  rgb(9, 174, 156);
    !important;
    border-color:  #00ACD6 !important;
    border-radius:  50%;
    padding:  6px 12px;
}
.page-link {
    z-index:  3;
    color:  #00ACD6 !important;
    background-color:  #fff;
    border-color:  #007bff;
    border-radius:  50%;
    padding:  1px 8px !important;
}
.page-item:first-child .page-link {
    border-radius:  30% !important;
}
.page-item:last-child .page-link {
    border-radius:  30% !important;
}
.pagination li {
    padding:  3px;
}
.disabled .page-link {
    color:  #212529 !important;
    opacity:  0.5 !important;
}
/* Untuk Video Streaming */
.vs_display {
    background: #e9ecef !important
}

.vs_display h5 {
    color: #12133d;
    text-align: center;
    padding: 10px
}

.logo_grid {
    padding: 10px
}

.tvlain {
    padding: 10px !important;
    text-align: center !important;
    margin: 0 auto
}

.tvapp {
    margin: 0 auto
}
.ke-141 {
  background: rgba(255, 255, 255, .8) !important;
  box-shadow: 5px 5px 0 0 #dee2e6 !important;
  margin:10px;
}