:root {
  --red-color: #f31212;
  --black-color: #353935; 
  --white-color:  #ffffff;
  --light-gray-color:rgb(0 0 0 / 5%);
  --medium-gray-color:rgb(0 0 0 / 75%);
  --dark-gray-color: rgb(0 0 0 / 55%);  
  --news-color:#f31212;
  --ameera-color:#c5a5b0;
  --sport-color:#fa5400;
  --sharia-color:#2b4c59;
  --khazanah-color:#7ea310;
  --islam-digest-color:#c47530;
  --internasional-color:#429ebd;
  --ekonomi-color:#159947;
  --tekno-color:#41b885;
  --rejabar-color: #00a0de;
  --rejogja-color:#e9001d;
  --ihram-color:#2a99d6;
}
 
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/static/Inter-Light.ttf'); 
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/static/Inter-Thin.ttf'); 
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/static/Inter-Regular.ttf'); 
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/static/Inter-Medium.ttf'); 
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/static/Inter-SemiBold.ttf'); 
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/static/Inter-Bold.ttf'); 
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/static/Inter-ExtraBold.ttf'); 
}
 

body{
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 0.835rem; 
  line-height: 1.35;
  letter-spacing: -.015rem;
}

img{
    color: #00000080 !important;
    font-size: 0.65rem;
    text-align: center;
    width: 100%;
    height: auto;
}

.mobile-header {
  padding: .5rem 0 0 !important;
  line-height: 1;
  background: #ffffff;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
}
  
.mobile-header-logo:hover {
  text-decoration: none;
}
  
.mobile-header .row.flex-nowrap.justify-content-between.align-items-center {
    padding-bottom: .5em;
}

.bg-logo {
    background: url(../images/logo-republika.png);
    height: 30px;
    margin: 0 auto;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
}

.blank-header-space{
  padding-top: 0rem;
}

.row{
    margin-right: calc(var(--bs-gutter-x) * -.55);
    margin-left: calc(var(--bs-gutter-x) * -.55);
}

.container{
  max-width: 768px; 
}

/*
 *Text
 */
h1, h2, h3, h4, h5, h6 { 
  margin-bottom: 0;
  font-weight: 700;
  line-height: 1.35; 
  
}
.h1, h1, .h3, h3 {
  font-size: 1.25rem;
  font-weight: 700;  
  
}
.h2, h2 {
    font-size: 1rem;
}
 

a{
  text-decoration: none;
  color: var(--black-color);
}
a:hover{
  color: var(--black-color);
}
.small, small {
    font-size:.75rem; 
}
.text-primary{
  color:var(--red-color) !important;
}
.text-muted{
  color:var(--medium-gray-color) !important;
}
.display-4 {
  font-size: 2.5rem;
}



/*
 *Link
 */
.link-primary{
  color: var(--red-color);
}
.btn{ 
  color: #ffffff;  
  border: 0 !important; 
  font-weight: 800 !important;
} 

 
.btn-check:focus+.btn, .btn:focus {
    outline: 0;
    box-shadow: none;
}

button.btn.btn-mode {
    margin: 0;
    padding: 0;
    color: var(--black-color);
    background: transparent;
}

.btn.btn-mode span {
    font-size: .8rem;
    text-align: center;
    line-height: 1;
    font-weight: 700;
}

.btn-outline-red {
    color: #dc3545;
    border-color: #dc3545;
    font-size: .875rem;
}
.btn-outline-red:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}
.btn-red {
    color: #fff;
    background-color: var(--red-color); 
}
.btn-gray{
    color: #000;
    background-color: rgb(0 0 0 / 5%);
    border-color: rgb(0 0 0 / 10%);
    font-size: .75rem;
    margin-left: .5rem;
    margin-right: 0rem;
}
.btn-blue{
    color: #fff;
    background-color: #084298; 
    font-size: .75rem;
}
.btn-light-blue{
    color: #fff;
    background-color: #3498db;
    border-color:#3498db;
    font-size: .75rem;
}

.btn-check:focus+.btn-red, .btn-red:focus {
    color: #fff; 
    box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 10%);
}
.btn-circle {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50% !important;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 500;
    color: #fff !important;
    line-height: 1.5 !important;
    float: right;
}
/*
 *Navigation
 */
#navbarSideburger {
    font-size: 12px;
    padding: 0.25rem 0.4rem;
}
#navbarSideburger .btn-close{
    background: url("../images/icon/icon-close.svg");
}
button#navbarSideCollapse {
    padding: 0;
    color: #fff !important;
    background: #f31212;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}
button#navbarSideCollapse:focus{
  outline:0;
  box-shadow: none;
}
button#btn-search {
    background: transparent;
    margin-right: -0.85rem;
    margin-top: -0.25rem;
    float: right;
    padding: 0;
}
.nav-scroller {
  position: relative;
  z-index: 2; 
  overflow-y: hidden;
  padding: 0 1em;
  margin-left: -1em;
  margin-right: -1em;
  background: linear-gradient(15deg, rgb(243 18 18) 0%, rgb(203 0 6) 100%);
}
/*.nav-scroller::after {
    content: " ";
    background: linear-gradient(270deg, rgba(203,0,6,1) 0%, rgba(243,18,18,0) 100%);
    position: absolute;
    z-index: 9;
    top: 0;
    right: 0;
    width: 50px;
    height: 40px;
}*/
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap; 
  margin: .5rem 0;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-scroller .nav a{
  padding: .25rem; 
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff; 
  margin-right: 0.5rem;
}




.nav-scroller .nav a:first-child{
  padding-left: 0;
}

.nav-scroller .nav a.active {
    background: #f2f2f2;
    border-radius: 50px;
    color: var(--red-color) !important;
    padding: .25rem;
}

.nav-scroller .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
}

.card-img-right {
  height: 100%;
  border-radius: 0 3px 3px 0;
}

.flex-auto {
  flex: 0 0 auto;
}

.h-250 { height: 250px; }
 
.navbar-toggler {
    margin-left: -0.5em;
    background: url(../images/icon-sprite.svg);
    width: 40px;
    height: 40px;
    background-size: 175px;
    padding: 0;
}
.navbar-toggler:focus {outline:0; box-shadow: none;}

/*
 *Box
 */
.row.box-of-4 {
    clear: both;
}
.box-of-2 .card-title,  .box-of-4 .card-title{
  font-size: .85rem;
  font-weight: 600;
}

.box-of-2 .col-6 {
    padding: 0 1rem;
}
.box-of-2 .col-6:nth-child(even), .box-of-4 .col-6:nth-child(even) {
    padding-left: 0.45rem !important;
}
.box-of-2 .col-6:nth-child(odd), .box-of-4 .col-6:nth-child(odd) {
    padding-right: 0.45rem !important;
} 

.box-of-4 .card-title{
  margin: .35rem 0; 
  font-weight: 600;
}

.box-of-2 img, .box-of-4 img{ 
	border-radius: .25rem!important;
  width: 100%;
  height: auto;
}

.box-of-1 img {
    margin: 0 -1rem;
    width: auto;
    height: auto;
    height: calc(230 / 375 * 100vw);
    object-fit: fill;
}

.image-headline-wrap{ 
}

.images-small {
    position: relative; 
    margin-left: auto;
    max-width: 200px;
    height: 100px;
    overflow: hidden;
    border-radius: 5px;
}

.images-small img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box-title{
  color: var(--red-color);
  margin: .75rem 0;
  text-transform: capitalize;
}

.box-title h2{
  line-height: 1.85;
  font-weight: 700;
}
 
/* 
 *Card 
 */
.card{border: none; margin: 0.5rem 0; background-color: transparent;}

.card-body{padding: 0;}

.card-body .text-primary{
    text-transform: capitalize;
}

.card-title{ 
  font-weight: 500;
  margin-top: .75rem;
  margin-bottom: 0;
  font-size: 1rem; 
  line-height: 1.35; 
}
 
/* 
 *Pagination 
 */
.mobile-pagination {
  margin-bottom: 4rem;
}

.mobile-pagination > .btn {
  border-radius: 2rem;
}

.next-prev {
    text-align: center;
    margin: 1rem 0;
}
/*
 * Section
 */
section{
  margin-bottom: 1.5rem;
}

.section-headline h1{
  margin-top: .875rem;
}
 
 

ul.list-group span {
    display: none;
}

.section-hot-topics .list-group li {
    padding: 0.5rem 0.205rem;
    margin: 0; 
    border-radius: 0; 
    text-align: center;
    border: none; 
}

.section-hot-topics li a {
    font-weight: 700;
    letter-spacing: -.015rem;
    font-size: 1rem;
}

.list-group-item{
  background:transparent;
}

.section-terpopuler .col-5 {
	width: 50%;
  padding-right: 0;
  padding-left: 0.25rem !important;
  border-bottom: 1px solid var(--light-gray-color);
}

.section-terpopuler .col-6 {
    width: 41.66666667%;
}

.section-terpopuler .col-1 { 
  font-weight: 500;
  padding-right: 0 !important;
  text-align: center;
}

.section-terpopuler .card-title {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1rem; 
    font-weight: 700;
} 

.section-terpopuler .fs-4{
  font-size: 1.15rem;
}

.section-list .card-title {
    margin-top: 0;
}

.section-list a .card{
    border-radius: 0; 
    padding-bottom: 1rem;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--light-gray-color);
}

.article-item .card {
    border-radius: 0;
    border-bottom: 1px solid var(--light-gray-color);
    padding-bottom: 1rem;
    margin-bottom: 0 !important;
}

.article-item .card-title{
    font-size: 1rem;
    margin-top: 0;
}

.article-item .col-7{ 
    padding-right: 0 !important;
}

section.section-widget-1 {
    margin: 0 -1.05rem;
    padding: 0 1em;
}

section.section-widget-1 .card{
    background-color: transparent;
    margin-top: 0;
}

section.section-widget-1 .box-of-1, section.section-widget-1 .box-of-2{
    background: var(--red-color);
    padding-bottom: 1rem;
    clear:both;
}

section.section-widget-1 .box-of-2 .col-6 {
    padding-bottom: .5rem !important;
}

section.section-widget-1 .box-of-1 .card-body{
    text-align: center;
    padding:  1rem 0 0;
}

section.section-widget-1 a, section.section-widget-1 small.text-muted  {
    color: var(--white-color) !important;
}

.section-widget-2 {
    background: #f2f2f2;
    padding: .15rem .75rem .75rem;
    margin: 0 -.75rem;
}

section.section-widget-2 .card.card-horizontal .col-5{
  padding-right: .4rem;
  width: 50%;
}

section.section-widget-2 .card.card-horizontal .col-7{
  padding-left: .4rem;
  width: 50%;
} 

section.section-widget-2 .card.card-horizontal .col-7 img { 
    width: 100%;
    height: auto;
}

section.section-widget-2 .card.card-horizontal .col-7 img {
    border-radius: 0 .25rem .25rem 0 !important;
    object-fit: cover;
    height: 100%;
}

section.section-widget-2 .card-horizontal .card-body{
   padding: .75rem 0 .75rem .75rem;
}

section.section-widget-2 .card-horizontal .card-body .text-muted{
  color: var(--white-color) !important; 
}

section.section-widget-2 .card.card-horizontal h3 {
    font-size: 1rem;
    
    font-weight: 700;
    color: #ffffff;
}

section.section-widget-2.retizen .card.card-horizontal,
section.section-widget-2.retizen button.btn.btn-blue.btn-circle{
    background: #ffec00;
}
section.section-widget-2.retizen .btn-blue, 
section.section-widget-2.retizen .card.card-horizontal h3,
section.section-widget-2.retizen .card-horizontal .card-body .text-muted{
    color: var(--black-color) !important;
}
section.section-widget-2.ihram .card.card-horizontal{
    background: #3498db;
}

section.section-widget-2.ihram button.btn.btn-blue.btn-circle, .ihram .btn-light-blue{
  background: #3498db;
  border-color: #3498db;
}

section.section-widget-2.rep-jogja .card.card-horizontal{
    background: #be2026;
}

section.section-widget-2.rep-jogja button.btn.btn-blue.btn-circle, .rep-jogja .btn-light-blue{
  background: #be2026;
  border-color: #be2026;
}

section.section-widget-2.rep-jabar .card.card-horizontal{
    background: #009fd9;
}

section.section-widget-2.rep-jabar button.btn.btn-blue.btn-circle, 
.rep-jabar .btn-light-blue   
{
  background: #009fd9;
  border-color: #009fd9;
}


section.section-headline p, section.section-article p , 
section.section-article span, section.section-article p span,
section.section-article article div{
  font-family: Arial, Helvetica, Verdana, sans-serif;
  font-size: 1.085rem !important;
  line-height: 1.65rem; 
  letter-spacing: normal;
}

section.section-article a {
    color: var(--red-color);
    font-weight: bold;
}


/*
 *Detail Page
 */

.hot-topics-detail .hot-topics-title{ 
  font-weight: bold;
  font-size: .85rem;
  color: #ffffff;
  padding-left: 1.5em; 
  line-height: 1.85;
}

.hot-topics-detail a{
  text-transform: capitalize !important;
}

.nav-scroller.hot-topics-detail {
    padding: .25rem 0;
    border-top: 1px solid #dee2e6!important; 
}
.nav-scroller.hot-topics-detail .btn {
    border-radius: 10px !important;
    line-height: 1.85;
    background: rgba(0,0,0,.25);
}
.detail .section-headline {
  margin-bottom: 0;
}

.detail .section-headline .card .card-body{
    padding: 0 .875rem .5rem;
}

.detail .section-headline h1 {
    margin: 1rem 0 .35rem;
    font-size: 1.85rem;
    font-weight: 700;
    
}

.detail .section-headline .card .card-body p {
    line-height: 1.25;
}
 
.wrapper-detail-image {
    margin: 0 -.25rem;
}

.wrapper-detail-image img {
    width: 100%;
    height: calc(250 / 375 * 100vw);
    margin: 0 auto;
    object-fit: fill;
    background: #000000;
}

.block-caption {
    font-size: .65rem;
    margin: .5rem 0;
}
.date{
  float: right;
  font-size: .75rem;
}

.prop-name{
  font-size: .85rem;
  font-weight: 500;
  flex-wrap: wrap;
  margin: .85rem 0 .5rem; 
  padding-bottom: 0 !important;
}
.prop-name b{
  font-weight: normal !important;
}

.prop-name span{
  color: var(--red-color);
  font-weight: bold;
}
.pb-2.ps-2 {
    padding: 0 !important;
}

.prop-name div:first-child {
  padding-right: 1rem;
}

.prop-name div:last-child {
    padding-left: 0 !important;
}

.breadcrumb{
  padding-bottom: 0;
  margin-bottom: 0; 
}

.breadcrumb-item {
    font-size: .75rem;
}

.breadcrumb li:last-child{
 margin-left: auto;
}

.breadcrumb-item.active{
    color: var(--red-color);  
}

.baca-juga a{ 
  font-weight: bold;
  color: var(--red-color);
  margin-top: .5rem;
}

.tagging ul{
  list-style-type: none;
  padding: 0;
}

.tagging ul li {
    display: inline-block;
    line-height: 0;
    padding: .85em!important;
    margin: .5em 0;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 10px;
}
.tagging ul li a{
  color: var(--bs-gray);
  font-size: .85rem;
  font-weight: 500;
}

.vuukle-powerbar {
    margin: 0 auto;
}

p.baca-juga {
    margin: 0;
}

article strong a {
    font-family: Arial, Helvetica, Verdana, sans-serif !important;
    font-size: 1.085rem;
} 

article video.body-video {
    width: 100%;
    height: auto;
}

#video .dailymotion-cpe  {
    margin: 0 -.25rem;
    padding-bottom: 56%;
}

.wrapper-media iframe{
    width: 100% !important;  
    overflow: hidden;
}

.disclamer, .baca-juga-disclaimer{
    padding: .5rem 1rem;
    background: rgb(0 0 0 / 5%);
    margin: 1rem 0;
    border-radius: 5px;
    font-size: .85rem !important;
}

article a.inline-caption, article a.inline-caption span {
    font-size: .85rem !important;
    line-height: 1.2;
}

article h2{
  margin: 1rem 0;
}


/*
 * Search
 */
#btn-search.btn:focus, .form-control:focus{
  outline: none;
  box-shadow: none;
}
.link-primary:focus, .link-primary:hover{
  color: var(--red-color);
}
.form-control:focus{
  color: black;
  border: 1px solid var(--light-gray-color);
  border-radius: 0;
}
button#btn-search {
    margin-left: -1rem;
    color: #000000;
}
button#btn-search svg{ 
  transform: scale(1.15);
}
.search-box {
  z-index: 20!important;
  position: fixed!important;
  top: 45px!important;
  left: 0;
  overflow: hidden;
  background: rgba(0,0,0,.25);
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}
form.form-inline.frmSearchHead {
    background: var(--white-color);
}
input#index-search {
    font-size: .875rem;
    padding: .75rem .75rem .75rem 1rem;
    font-weight: 300;
    border: none !important;
    background: #f2f2f2;
    box-shadow: 5px 5px 5px 1px rgb(0 0 0 / 10%);
}

/*
 * Footer
 */
.mobile-footer {
  padding: 0;
  color: #727272; 
  background-color: #f9f9f9;
  border-top: .05rem solid #e5e5e5;
}
.mobile-footer p:last-child {
  margin-bottom: 0;
}

footer {
  background-color: rgba(0, 0, 0, 1);
  padding: 1em;
  letter-spacing: .05em;
  text-transform: capitalize;
}

footer .panel-footer {
  padding: 10px 0;
  background-color: rgba(0, 0, 0, .85);
}

footer .copy {
  padding: 1em 0;
  font-size: .65em;
}

footer .link-site {
  padding-bottom: 1em;
  font-size: .85em;
}

footer .list-navigation {
  padding: 1em 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

footer .list-navigation ul {
  column-count: 2;
  list-style-type: none;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

footer .list-navigation ul li {
  padding: .25em 0;
}

footer .list-navigation ul li a {
  font-size: .85rem;
  text-transform: uppercase;
  font-weight: 500;
  
  line-height: 1.5;
}

footer .list-miscellaneous {
  padding: .5em 0;
  font-size: .65em;
}

.share {
  margin: .5em auto .25em !important;
  text-align: center !important;
}
.share-fixed {
    background: #FFFFFF !important;
    padding: 0 !important;
    position: fixed !important;
    top: auto !important;
    bottom: 65px !important;
    width: auto !important;
    z-index: 10 !important;
    left: 25% !important;
    right: 25% !important;
    box-shadow: 0px 0px 5px 2px rgb(0 0 0 / 10%) !important;
    transition: ease-in 0.3s !important;
    border-radius: 50px !important;
}
.share i {
  font-size: 20px;
  padding-right: 1em;
  text-indent: -9999px;
}

.share .fa {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../images/icon-sprite.svg) no-repeat;
  background-size: 135px;
  border-radius: 50%;
}

.share .fa-twitter {
  background-position: -35px -34px;
  background-color: #55acee;
}

.share .fa-facebook {
  background-position: -4px -34px;
  background-color: #3a5a99;
}

.share .fa-whatsapp {
  background-position: -100px -35px;
  background-color: #25d366;
}

.share .fa-google {
  background-position: -34px -72px;
}

.share .fa-email {
  background-position: -119px -78px;
  background-color: #888
}

.share .fa-copy {
  background-position: -2px -91px;
  background-color: #b4ca35;
  background-size: 125px;
}

.share .fa-youtube {
  background-position: -68px -35px;
  background-color: #e52d27;
}

.share .fa-instagram {
  background-position: -68px -67px;
  background-color: #e81e44;
}

.share .fa-rss {
  background-position: -5px -77px;
  background-color: orange;
  background-size: 150px;
}

.share .fa-line {
  background-position: -37px -98px;
  background-color: #00b900;
}

.video .card{
  position: relative;
}

.thumbnail-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    border-radius: 50%;
    background: url(../images/icon-sprite.svg) no-repeat;
    background-size: 165px;
    background-color: rgb(0 0 0 / 65%);
    bottom: 63%;
}

.video .section-list .thumbnail-icon{
  bottom: 23%;
}

.thumbnail-icon.play {
    background-position: -82px -117px;
}

.thumbnail-text{
  position: absolute;
  left: 0; 
  padding: .35rem;    
  color: #ffffff;
  background-color: rgb(0 0 0 / 65%); 
}

/*
 * Carousel dan Modal Inpictures
 */
.detail-inpictures #widgetCarousel {
    margin: 0 -1.15rem;
}
 
.detail-inpictures .carousel-caption{
    position: static;
    color: var(--black-color);
    height: auto;
    padding: 1rem 2rem;
    background: var(--bs-gray-200);
}
 
.detail-inpictures .carousel-caption p{
    margin-top: .5rem;
    font-size: .875rem !important;
}
 
.detail-inpictures .carousel-caption h5{
  font-size: 1rem;
  font-weight: bold;
 }
 
.detail-inpictures #widgetCarousel .carousel-indicators {
  position: static;
  margin-bottom: 10px;
  flex-flow: nowrap;
  overflow-x: scroll;
  justify-content:flex-start;
  max-width: 100%;
  margin: 0 2rem;
}

.detail-inpictures #widgetCarousel button{
  padding: 0;
}

.detail-inpictures .carousel-indicators [data-bs-target] {
    margin-right: 30px;
    margin-left: 15px;
}

.detail-inpictures #widgetCarousel .carousel-indicators>button {
    width: 100px;
    background: transparent;
    height: auto;
}

.detail-inpictures #widgetCarousel .carousel-indicators button img {
    display: block;
    width: 100px;
    height: auto;
    opacity: 0.5;
}

.detail-inpictures #widgetCarousel .carousel-indicators button.active img {
    opacity: 1;
}

.detail-inpictures #widgetCarousel .carousel-indicators button:hover img {
    opacity: 0.75;
}

.detail-inpictures .carousel-item img {
    width: 100%;
    height: auto;
    margin: 0 !important;
}
 
.detail-inpictures .carousel-control-next,
.detail-inpictures .carousel-control-prev{
    top: 15%;
    bottom: auto;
    margin: 0 1.5rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--red-color);
}

.detail-inpictures .carousel-control-next-icon, .carousel-control-prev-icon{
  width: 1rem;
  height: 1rem;
}

.detail-inpictures .modal{
  background: var(--black-color);
}

.detail-inpictures .modal-dialog{
  top: 10%;
  max-width: 100%;
}

.detail-inpictures .modal-dialog, .modal-content {
    padding: 0;
    margin: 0;
    background: transparent;
}

.detail-inpictures .modal-content {
  margin: auto;
  display: block; 
  max-width: 700px;
}

.detail-inpictures .modal-content .carousel-caption {
    background: rgb(0 0 0 / 50%);
    color: #ffffff; 
    margin: 0;
    width: 100%; 
}

.detail-inpictures .modal .carousel-control-next, .detail-inpictures .modal .carousel-control-prev {
    top: auto;
    bottom: 23%; 
    position: fixed;
}

.detail-inpictures .modal button.btn-close {
    padding: .25rem !important;
    background-color: #fff;
    font-size: 1rem;
    top: 1rem;
    right: 1rem;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
}

input[type=checkbox] {
  display: none;
}

.detail-inpictures .modal-content > .carousel-item img {
  transition: transform 0.5s ease;
  cursor: zoom-in;
  width: auto;
  height: 100%;
  touch-action: auto;

}

input[type=checkbox]:checked ~ label > img {
  transform: scale(2);
    cursor: zoom-out;
    width: auto;
    height: 100%;
    padding: 0;
    margin: 0;
    top: 0;
    position: fixed;
} 

/*
 * Kanal Colour
 */

	/*ameera*/
	#ameera .nav-scroller, #ameera .btn-red, #ameera ul.pagination li.active
	{
		background: linear-gradient(15deg, rgba(244,159,149,1) 0%, rgba(197,165,176,1) 100%);
	}
	#ameera button#navbarSideCollapse
	{ 
	background-color: var(--ameera-color);
	}

  #ameera .box-title, #ameera .text-primary, 
  #ameera .nav-scroller .nav a.active, #ameera .breadcrumb-item.active, #ameera .prop-name span, 
  #ameera section.section-article a, #ameera .nav-scroller .nav a.active{
      color:var(--ameera-color) !important;
  }

	/*sport*/ 
	#sport .nav-scroller, #sport .btn-red, #sport ul.pagination li.active
	{ 	
		background: rgb(247,33,54);
		background: linear-gradient(150deg, rgb(247 157 33) 0%, rgba(250,84,0,1) 100%);
	} 
	#sport button#navbarSideCollapse 
	{ 
    background-color: var(--sport-color);
	}


  #sport .nav-scroller .nav a.active,
  #sport .box-title, #sport .text-primary, 
  #sport .nav-scroller .nav a.active, #sport .breadcrumb-item.active, #sport .prop-name span, 
  #sport section.section-article a, #sport .nav-scroller .nav a.active{
      color:var(--sport-color);
  }
	/*internasional*/
	#internasional .nav-scroller, #internasional .btn-red, #internasional ul.pagination li.active
	{
	background: linear-gradient(15deg, rgba(66,158,189,1) 0%, rgba(5,63,92,1) 100%);
	}
	#internasional button#navbarSideCollapse
	{
		background-color: var(--internasional-color);
	} 

  #internasional.nav-scroller .nav a.active,
  #internasional .box-title, #internasional .text-primary, 
  #internasional .nav-scroller .nav a.active, #internasional .breadcrumb-item.active, #internasional .prop-name span, 
  #internasional section.section-article a, #internasional .nav-scroller .nav a.active{
      color:var(--internasional-color) !important;
  }

	/*tekno*/ 
	#tekno .nav-scroller, #tekno .btn-red, #tekno ul.pagination li.active{
	background: rgb(0,255,91);
	background: linear-gradient(15deg, rgb(63 217 118) 0%, rgb(75 83 183) 100%);
	}

	#tekno button#navbarSideCollapse{
		background-color: var(--tekno-color);
	}


  #tekno.nav-scroller .nav a.active,
  #tekno .box-title, #tekno .text-primary, 
  #tekno .nav-scroller .nav a.active, #tekno .breadcrumb-item.active, #tekno .prop-name span, 
  #tekno section.section-article a, #tekno .nav-scroller .nav a.active{
      color:var(--tekno-color) !important;
  }

	/*ekonomi*/ 
	#ekonomi .nav-scroller, #ekonomi .btn-red, #ekonomi ul.pagination li.active{
		background: linear-gradient(15deg, rgb(21 153 71) 0%, rgb(73 178 101) 100%);
	}

	#ekonomi button#navbarSideCollapse{
		background-color: var(--ekonomi-color);
	}
    #ekonomi.nav-scroller .nav a.active,
    #ekonomi .box-title, #ekonomi .text-primary, 
    #ekonomi .nav-scroller .nav a.active, #ekonomi .breadcrumb-item.active, #ekonomi .prop-name span, 
    #ekonomi section.section-article a, #ekonomi .nav-scroller .nav a.active{
        color:var(--ekonomi-color) !important;
    }
	/*sharia*/ 
	#sharia .nav-scroller, #sharia .btn-red, #sharia ul.pagination li.active{
		background: rgb(43,76,89);
		background: linear-gradient(15deg, rgba(43,76,89,1) 0%, rgba(152,128,128,1) 100%);
	}

	#sharia button#navbarSideCollapse{
		background-color: var(--sharia-color);
	}

  #sharia.nav-scroller .nav a.active,
  #sharia .box-title, #sharia .text-primary, 
  #sharia .nav-scroller .nav a.active, #sharia .breadcrumb-item.active, #sharia .prop-name span, 
  #sharia section.section-article a, #sharia .nav-scroller .nav a.active{
      color:var(--sharia-color) !important;
  }

	/*khazanah*/ 
	#khazanah .nav-scroller, #khazanah .btn-red, #khazanah ul.pagination li.active{
		background: rgb(126,163,16);
		background: linear-gradient(15deg, rgba(126,163,16,1) 0%, rgba(223,230,103,1) 100%);
	}

	#khazanah button#navbarSideCollapse{
		background-color: var(--khazanah);
	}

  #khazanah.nav-scroller .nav a.active,
  #khazanah .box-title, #khazanah .text-primary, 
  #khazanah .nav-scroller .nav a.active, #khazanah .breadcrumb-item.active, #khazanah .prop-name span, 
  #khazanah section.section-article a, #khazanah .nav-scroller .nav a.active{
      color:var(--khazanah-color) !important;
  }
  
	/*islam-digest*/ 
	#islam-digest .nav-scroller, #islam-digest .btn-red, #islam-digest ul.pagination li.active{
		background: rgb(196,117,48);
		background: linear-gradient(15deg, rgba(196,117,48,1) 0%, rgba(250,197,133,1) 100%);
	}

	#islam-digest button#navbarSideCollapse{
		background-color: var(--islam-digest-color);
	}
  #islam-digest.nav-scroller .nav a.active,
  #islam-digest .box-title, #islam-digest .text-primary, 
  #islam-digest .nav-scroller .nav a.active, #islam-digest .breadcrumb-item.active, #islam-digest .prop-name span, 
  #islam-digest section.section-article a, #islam-digest .nav-scroller .nav a.active{
      color:var(--islam-digest-color) !important;
  }

  /*rejabar*/ 
  #rejabar .nav-scroller, #rejabar .btn-red, #rejabar ul.pagination li.active{
    background: var(--rejabar-color);
    background: linear-gradient(15deg, rgba(120,217,255,1) 0%, rgba(81,206,255,1) 100%);
  }

  #rejabar button#navbarSideCollapse{
    background-color: var(--rejabar-color);
  }
  #rejabar.nav-scroller .nav a.active,
  #rejabar .box-title, #rejabar .text-primary, 
  #rejabar .nav-scroller .nav a.active, #rejabar .breadcrumb-item.active, #rejabar .prop-name span, 
  #rejabar section.section-article a, #rejabar .nav-scroller .nav a.active{
      color:var(--rejabar-color) !important;
  }

   #rejabar .bg-logo {
    background: url(../images/logo-rejabar.png); 
  }
/*rejogja*/ 
  #rejogja .nav-scroller, #rejogja .btn-red, #rejogja ul.pagination li.active{
    background: var(--rejogja-color);
    background: linear-gradient(15deg, rgb(243 18 18) 0%, rgb(203 0 6) 100%);
  }

  #rejogja button#navbarSideCollapse{
    background-color: var(--rejogja-color);
  }
  #rejogja.nav-scroller .nav a.active,
  #rejogja .box-title, #rejogja .text-primary, 
  #rejogja .nav-scroller .nav a.active, #rejogja .breadcrumb-item.active, #rejogja .prop-name span, 
  #rejogja section.section-article a, #rejogja .nav-scroller .nav a.active{
      color:var(--rejogja-color) !important;
  }

  #rejogja .bg-logo {
    background: url(../images/logo-rejogja.png); 
    margin-top: 0.85em;
  }

/*ihram*/ 
  #ihram .nav-scroller, #ihram .btn-red, #ihram ul.pagination li.active{
    background: var(--ihram-color);
    background: linear-gradient(15deg, rgba(120,217,255,1) 0%, rgb(42 153 214) 100%);
  }

  #ihram button#navbarSideCollapse{
    background-color: var(--ihram-color);
  }
  #ihram.nav-scroller .nav a.active,
  #ihram .box-title, #ihram .text-primary, 
  #ihram .nav-scroller .nav a.active, #ihram .breadcrumb-item.active, #ihram .prop-name span, 
  #ihram section.section-article a, #ihram .nav-scroller .nav a.active{
      color:var(--ihram-color) !important;
  }

  #ihram .bg-logo {
    background: url(../images/logo-ihram.png); 
  }

  /*Sepakbola*/
  #sepakbola .box-title, #sepakbola .text-primary,  
  #sepakbola .nav-scroller .nav a.active,
  #sepakbola .breadcrumb-item.active,
  #sepakbola .prop-name span, #sepakbola section.section-article a 
  {
    color:#0db24b !important;
  }

  #sepakbola ul.pagination li.active, 
  #sepakbola ul.pagination li.active a, 
  #sepakbola .btn-red{
    background-color:#0db24b !important; 
    border-color: #0db24b !important;
    color: #ffffff !important;
  }

  /*khazanah*/
  #khazanah .box-title, #khazanah .text-primary,  
  #khazanah .nav-scroller .nav a.active,
  #khazanah .breadcrumb-item.active,
  #khazanah .prop-name span, #khazanah section.section-article a 
  {
    color:#7aa335;
  }

  #khazanah ul.pagination li.active, 
  #khazanah ul.pagination li.active a, 
  #khazanah .btn-red{ 
    color: #ffffff !important;
  }
 

  /*internasional*/ 

  #internasional .box-title, #internasional  .text-primary,  
  #internasional .nav-scroller .nav a.active,
  #internasional .breadcrumb-item.active,
  #internasional .prop-name span, #internasional section.section-article a 
  {
    color:#399fba;
  }

  #internasional ul.pagination li.active, 
  #internasional ul.pagination li.active a, 
  #internasional .btn-red{ 
    color: #ffffff !important;
  }

  /*ekonomi*/
  #ekonomi .box-title, #ekonomi .text-primary,  
  #ekonomi .nav-scroller .nav a.active,
  #ekonomi .breadcrumb-item.active,
  #ekonomi .prop-name span, #ekonomi section.section-article a 
  {
    color:#009952 !important;
  }

  #ekonomi ul.pagination li.active, 
  #ekonomi ul.pagination li.active a, 
  #ekonomi .btn-red{ 
    color: #ffffff !important;
  }


  /*kolom*/
  #kolom .box-title, #kolom .text-primary,  
  #kolom .nav-scroller .nav a.active,
  #kolom .breadcrumb-item.active,
  #kolom .prop-name span, #kolom section.section-article a 
  {
    color:#a80074;
  }

  #kolom ul.pagination li.active, 
  #kolom ul.pagination li.active a, 
  #kolom .btn-red{  
    color: #ffffff !important;
  }

  p.write-by {
      color: #a80074;
  }

  p.write-by span {
    line-height: 1.2;
  }

  .foto-kolumnis {
      border-radius: 50%;
      width: 100px !important;
      height: 100px !important;
      margin-right: 1rem;
      background: #a80074;
      overflow: hidden;
  }

  .foto-kolumnis img {
      width: 100% !important;
      height: 100%;
      object-fit: cover;
  }

  /*Leisure*/
  #leisure .box-title, #leisure .text-primary, 
  #leisure .nav-scroller .nav a.active,
  #leisure .breadcrumb-item.active, 
  #leisure .prop-name span, #leisure section.section-article a, 
  #leisure .hot-topics-title
  {
    color:#00adc1;
  }

  #leisure ul.pagination li.active, 
  #leisure ul.pagination li.active a,
  #leisure .btn-red{
    background-color:#00adc1 !important; 
    border-color: #00adc1 !important;
    color: #ffffff !important;
  }


  /*konsultasi*/
  #konsultasi .box-title, #konsultasi .text-primary, 
  #konsultasi .nav-scroller .nav a.active,
  #konsultasi .breadcrumb-item.active, 
  #konsultasi .prop-name span, #konsultasi section.section-article a, 
  #konsultasi .hot-topics-title
  {
    color: #2196f3;
  }

  #konsultasi ul.pagination li.active, #konsultasi ul.pagination li.active a{
    background-color: #2196f3 !important; 
    border-color: #2196f3 !important;
    color: #ffffff !important;
  }



/*
 * Pagination
 */
ul.pagination {
    margin: 1rem auto;
    font-weight: bold;
    justify-content: center;
}
 
li.hal-text {
    display: none;
}

ul.pagination li {
    padding: 0.5rem 1.15rem;
    background: #f2f2f2;
    white-space: nowrap;
    font-size: 1rem; 
    line-height: 2;
    border-radius: 10px;
    margin: 0 0.5rem 0.5rem;
}

ul.pagination li.active {
    background: var(--red-color);
}

ul.pagination li.active a, 
#ameera ul.pagination li.active a, 
#sport ul.pagination li.active a,
#news ul.pagination li.active a,
#sharia ul.pagination li.active a,
#khazanah ul.pagination li.active a,
#islam-digest ul.pagination li.active a,
#internasional ul.pagination li.active a,
#tekno ul.pagination li.active a,
#ekonomi ul.pagination li.active a
{
  color: var(--white-color) !important;
}


/*
 * Mode Layar
 */
body.dark-mode, body.dark-mode header, body.dark-mode .offcanvas-collapse, 
body.dark-mode .accordion-item, 
body.dark-mode section.section-widget-2.retizen .card.card-horizontal, 
body.dark-mode .section-widget-2, 
body.dark-mode .detail-inpictures .carousel-caption,
body.dark-mode .mobile-footer
{
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  background-color: #181818;
  color: #FFF;
}

body.dark-mode .offcanvas-collapse .accordion-button,
body.dark-mode .navbar-collapse .card-header,
body.dark-mode .offcanvas-collapse button,
body.dark-mode section.section-widget-1 .box-of-1, 
body.dark-mode section.section-widget-1 .box-of-2,
body.dark-mode section.section-widget-2.retizen .card.card-horizontal,
body.dark-mode section.section-widget-2.ihram .card.card-horizontal ,
body.dark-mode section.section-widget-2.rep-jogja .card.card-horizontal,
body.dark-mode section.section-widget-2.rep-jabar .card.card-horizontal,
body.dark-mode .ads, 
body.dark-mode .section-hot-topics .list-group li
{
  background-color: #2a2a2a;
  color: #FFF;
}

body.dark-mode a, body.dark-mode .small-icon, body.dark-mode h1, body.dark-mode h3, 
body.dark-mode button, body.dark-mode .btn:hover, 
body.dark-mode .others span a, body.dark-mode .text-muted{
    color: #FFF !important;
}
 

body.dark-mode .border-bottom, body.dark-mode  .article-item .card, 
body.dark-mode .section-list a .card,
body.dark-mode .section-terpopuler .col-5, 
body.dark-mode .section-terpopuler .col-1{
    border-bottom: 1px solid #2a2a2a!important;
}

body.dark-mode .mobile-footer, 
body.dark-mode .nav-scroller.hot-topics-detail {
    border-top: 1px solid #2a2a2a!important;
}

body.dark-mode button.accordion-button.collapsed, 
body.dark-mode button.accordion-button:not(.collapsed){
  width: auto;
}

body.dark-mode .bg-logo {
    background: url(../images/logo-republika-putih.png);
}

body.dark-mode .btn-gray {
    background-color: rgb(255 255 255 / 25%);
    border-color: rgb(255 255 255 / 20%)
}

body.dark-mode ul.pagination li, body.dark-mode .tagging ul li{
    background-color: rgb(255 255 255 / 25%); 
}

body.dark-mode button.btn.btn-mode{
    background: transparent;
}
body.dark-mode .offcanvas-collapse .accordion-button {
    background: rgba(255,255,255,.5);
    border-radius: 50%;
    padding: 0.25em !important;
}
/*
 *ads
 */

.ads{
  background-color: #ffffff;
  margin: 1rem auto;
  text-align: center;
}

.ads-topframe {
    position: fixed;
    right: 0;
    left: 0; 
    top: unset !important;
    z-index: 1030;
}

.placeholderAds {
    align-items: center;
    background-color: lightgrey;
    display: flex;
    justify-content: center;
}

.topline-mobile_detail-news{
  width: 320px;
  height: 50px;
}

.topline-home, .center1-home, .center3-home, .center5-home, 
.topline-mobile_kanal-news , .center1-mobile_kanal-news, 
.below_foto-mobile_detail-khazanah
{
  width: 320px;
  height: auto;
}
.center2-home, .center4-home, .center2-mobile_kanal-news, .below_video-mobile_detail-news{
  width: 336px;
  height: auto;
}

._popIn_feed_root #_popIn_feed_mobile_container ._popIn_feed_small_module ._popIn_recommend_article {

    background: transparent !important;
}

/*card networks-home*/
.republika-networking{
  display: none !important;
}
section.card.networks-home {
    background: #121212;
    margin: 0 -1.05rem;
    padding: 0 1em;
    display: none;
}

.card-body a {
    display: inline-block; 
}

section.card.networks-home .card-header {
    font-weight: 700;
    font-size: 1.5em;
    padding: .5em 0;
    background: transparent;
    color: var(--color);
}

.section-widget-2.network  h2 img {
    border-bottom: none !important;
}
.section-widget-2.network {
    background: #f2f2f2 !important;
}
.section-widget-2.network .text-white, 
.section-widget-2.network .text-muted{
    color: var(--black-color) !important; 
}
.section-widget-2.network .bg-black {
    background: #e4e4e4 !important;
}
/*header*/
.mobile-header .col-7 {
    width: calc(175 / 375 * 100vw);
    margin-left: calc(-140 / 375 * 100vw);
}

.news-ticker{
	display: none;
}

@media (min-width: 320px) {
  .share-fixed{
    left: 20% !important;
    right: 20% !important;
  }
}

@media (min-width: 768px) {
  .h-md-250 { height: 250px; } 
  .display-4 {
    font-size: 3rem;
  }
  .mobile-header .col-7 { 
    margin-left: calc(-500 / 768 * 100vw); 
  }
}

@media (min-width: 1024px){
  .mobile-header .col-7 {
      margin-left: calc(-500 / 1024 * 100vw);
  }
}