.mj-gradient-bg {
    background: var(--mj-gradient-soft-overflow) !important;
}

.topic-card {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 16px;
    flex: 1 0 0;
    border-radius: 12px;
}

.topic-card > img {
    width: 56px;
    margin-bottom: 0;
}

.topic-card > label {
    flex: 1 1 auto;
}

.mj-accordion-detail.active {
    display: block;
}

.mj-tab-switch nav.flat {
    padding: 0;
    width: 100%;
    border: 0;
    border-radius: unset;
    border-bottom: 1px solid #d6d6d6;
    background: none;
}

.mj-tab-switch nav.flat .active {
    background: none;
    border: 0;
    border-radius: unset;
    box-shadow: unset;
    border-bottom: 3px solid;
    border-style: solid;
    border-image: linear-gradient(to right, #47BAB3, #A1CF7F) 1;
}

.mj-tab-switch nav.flat a {
    width: 25%;
}

/* PAGE STYLE */
.pg-media .mj-tab-switch-content {
    padding: 0;
}

.pg-media .ask {
    border-bottom: 1px solid #D6D6D6;
}

.pg-media .ask .mj-title-text.xs{
    font-size: 20px;
    color: #21928F;
}

.pg-media .mj-accordion {
    padding: 24px 0;
}

.pg-media .mj-accordion-detail {
    text-align: left;
    padding-bottom: 24px;
}

@media (max-width: 450px) {
    .mj-tab-switch nav.flat {
        overflow: auto;
        white-space: nowrap;
        justify-content: unset;
    }

    .mj-tab-switch nav.flat::-webkit-scrollbar{
        display: none;
    }

    .mj-tab-switch nav.flat a {
        width: 200px!important;
    }
}

.banner-title {
    position: absolute;
    display: flex;
    justify-content: center;
    color: #272A2A;
    font-size: 20px;
    font-weight: 600;
    top: 50%;
    left: 80px;
    transform: translateY(-50%);
}

.img-banner {
    border-radius: 8px;
    object-fit: cover;
    padding: 0px;
    width: 100%;
}

.container.banner {
    padding: 0;
    width: 100%;
    height: 240px;
}

.mj-slider-holder .mj-slider-control a {
    width: 40px;
    height: 40px;
}

.container.banner > .mj-slider-holder .mj-slider-control a.next {
    right: 32px;
}

.container.banner > .mj-slider-holder .mj-slider-control a.prev {
    left: 32px;
}

.img-banner.desktop {
    height: 240px;
}

.desktop {
    display: initial;
}

.mobile { 
    display: none;
}

.mj-text-line {
    display: flex;
    flex-direction: row;
}

.mj-text-line:before,
.mj-text-line:after {
     content: "";
     flex: 1 1;
     border-bottom: 1px solid #EEF0F0;
     margin: auto;
}   

.mj-text-line a {
    color: #21928F;
    padding:0 3rem; 
}

.mj-card-control span::after {
    content: "Lebih Banyak ";
}

.mj-card-control.rotated span::after {
    content: "Lebih Sedikit ";
}

.mj-card-control.rotated i {
    transform: rotate(180deg);
}

.mj-card-control.menu.rotated i {
    transform: rotate(90deg);
}

.flickity-page-dots {
    bottom: 8px;
    margin-left: 2.5em;
    text-align: left;
}

.flickity-page-dots .dot {
    background: #EEF0F0;
}

.flickity-page-dots .dot.is-selected {
    background: #04C99E;
}

.faq-question {
    display: flex;
    gap: 0.5em;
    justify-content: space-between;
}

.border-radius-0 {
    border-radius: 0px;
}

.container-search {
    margin-top: 40px;
}

.container-result {
    padding-top: 10px;
    padding-bottom: 35px;
    border-bottom: 1px solid #EEF0F0;
}

.result-title {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.result-category {
    color: #292929;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}   

.result-desc {
    color: #000;
    font-size: 14px;
    line-height: 20px;
}

#pagination-holder {
    display: flex;
    justify-content: center;
    overflow: visible;
    margin-top: 0 !important;
}

.paywall {
    position: absolute;
    padding: 24px;
    width: 100%;
    height: 50%;
    bottom: 0px;
    left: 0px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) -4.72%, #FFF 34.36%);
    text-align: center;
}

.paywall-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2em;
}


.paywall-content > .badge {
    background: #EAF8F7;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    text-align: center;
    display: table;
}

.paywall-content > .badge i {
    color: #21928F;
    width: 28px;
    height: 28px;
    display: table-cell;
    vertical-align: middle;
}

.paywall-content > p > a {
    color: #21928F;
    font-weight: 600;
}

.mj-hero-fit-top.article {
    margin-top: 1.5em;
}

#subs-menu-artikel > a {
    color: #585F5F;
}

#subs-menu-artikel > .active {
    color: #21928F!important;
    font-weight: 600;
}

.categories a.active {
    color: #21928F!important;
    font-weight: 600;
}

.img-slider {
    aspect-ratio: 16/9;
    object-fit: cover;
}

.line-clamp-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4; 
    -webkit-box-orient: vertical;
}

.duration-video {
    position: absolute;
    bottom: 1em;
    right:  1em;
    padding:  4px;
    color: #fff;
    background-color: #404545;
}

.breadcrumb-item > .active {
    font-weight: 700;
    color: var(--teal-800);
}


@media screen and (max-width: 768px) {
    .desktop {
        display: none;
    }

    .mobile {
        display: initial;
    }

    .img-banner.mobile {
        display: initial;	
        width: 100%;
        height: 112px;
    }

    .mj-slider-control { 
        display: none;
    }

    .container.banner {
        padding: 0;
        width: 100%;
        height: 112px;
    }

    .highlight-article {
        overflow: auto;
        flex-wrap: unset;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .highlight-article::-webkit-scrollbar {
        display: none;
    }

    .mj-gradient-bg {
        background: var(--mj-gradient-soft-linear-reverse) !important;
    }

    .flickity-page-dots {
        margin-left: 0px;
        text-align: center;
    }

    .container-search {
        margin-top: 0px;
    }

    .paywall-content { 
        gap: 0.5em;
    }

    .mj-hero-fit-top.article {
        margin-top: 0em;
    }

    .video-playlist {
        overflow: auto;
        flex-wrap: unset;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .video-playlist::-webkit-scrollbar {
        display: none;
    }
}

.mj-accordion.category {
    padding: 0;
    justify-content: unset;
    gap: 0.5em
}

.mj-accordion.category > i {
    padding: 0px;
    color: #000;
}

.mj-accordion.category.active > i {
    transform: rotate(90deg);
}

#content-detail img {
    width: -webkit-fill-available;
}

.image_resized {
    width: -webkit-fill-available;
}

ul.cat-video {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.cat-video li {
    cursor: pointer;
    width: 100%;
    padding: 8px;
}

.cat-video li a {
    width: 100%;
    color: #737373;
}

.cat-video li.active{
    background: #EAF8F7;
    font-weight: 600;
}

.cat-video li.active a {
    color: #000;
}

.mj-title-text.xxxs {
    font-size: 20px;
    line-height: 28px;
}