@import url("../../plugins/node/node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css");

/* General */
.content-heading { font-family: "Faustina"; font-size: 36px; line-height: 1.4; font-weight: 900; margin-bottom: 20px; }
.content-description { font-size: 18px; }
.head-text { margin-bottom: 15px; }
.top-text { margin-bottom: 20px; }
.bottom-text { font-family: 'Noto Sans'; font-size: 24px; font-weight: normal; }

/* Top Banner */
#top-banner .banner .banner-container { padding-top: 495px; padding-left: 90px; }

#top-banner .banner .banner-box {
    width: 715px;
    padding: 20px 23px 29px 20px;
    background-color: rgba(126, 3, 168, 0.8);
    font-family: "Faustina";
    font-size: 40px;
    line-height: 1.4;
    font-weight: 900;
    color: #fff;

    bottom: 0;
}

#top-banner .banner .banner-box .top-text {
    margin-bottom: 20px;
    color: #FDC527;
    font-size: 40px;
}

/* Section Panel */
#section-panel { margin-top: 250px; background-color: #FAE2DE; font-size: 18px; }
.ind-section-panel { margin-top: 339.6px !important; }
#section-panel .banner { padding: 30px 0; }

#section-panel .banner .panel-title { color: #E66C5C; font-weight: bold; font-family: "Faustina"; font-size: 32px; margin-bottom: 10px; }
#section-panel .banner .panel-subtitle { color: #000; font-family: 'Noto Sans'; font-size: 24px; margin-bottom: 30px; }

#section-panel .banner .panel-menu ul { list-style-type: none; margin: 0; padding: 0; }
#section-panel .banner .panel-menu li { display: inline-block; margin: 20px; }
#section-panel .banner .panel-menu li:first-child { margin-left: 0; }

#section-panel .banner .panel-menu li a { color: #F0A79D; text-decoration: none; }
#section-panel .banner .panel-menu li a.active { color: #E66C5C; }

/* Sub Topics */
#sub-topics { padding-top: 70px; }
#sub-topics .content-sub-heading { font-family: 'Noto Sans'; font-size: 18px; line-height: 1.4; margin-bottom: 20px; }
#sub-topics .topic-item { width: 430px; }
#sub-topics .box-item { background-color: #BCBAFB; }
#sub-topics .box-item:hover { cursor: pointer; background-color: #D7BAFB; }

#sub-topics .box-item-blue { background-color: #BCBAFB; }
#sub-topics .box-item-blue:hover { background-color: #D7BAFB; }

#sub-topics .box-item-orange { background-color: #FAE2DE; }
#sub-topics .box-item-orange:hover { background-color: #FACBDE; }

#sub-topics .box-item-yellow { background-color: #FFF3D4; }
#sub-topics .box-item-yellow:hover { background-color: #FFF3A6; }

#sub-topics .box-item-purple { background-color: #EDBCFE; }
#sub-topics .box-item-purple:hover { background-color: #ED98FE; }

#sub-topics .box-item .box-head {
    font-family: Faustina;
    font-size: 27px;
    color: rgb(13, 8, 135);
    margin-bottom: 20px;
}
#sub-topics .box-item .box-desc { font-size: 22px; margin-bottom: 30px; }
#sub-topics .box-item .box-more { text-align: right; font-size: 18px; }

/* Insight Popup */
.modal-insight { --bs-modal-width: 1100px !important; font-size: 18px; }
#insight-popup .modal-header { padding-bottom: 0; border-bottom: 0; }
#insight-popup .btn-close {
    width: 1px !important;
    height: 1px !important;
}

.mCSB_draggerRail { display: none; }

.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar
, .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar
, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar
, .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: rgba(0,0,0,.20);}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 9px; }
.mCSB_inside>.mCSB_container { margin-right: 58px; }
.mbar .mCSB_inside>.mCSB_container { margin-right: 40px; }

.popup-head { font-family: Faustina; font-size: 24px; color: rgb(204, 71, 120); font-weight: bold; }
.popup-share { position: relative; top: 30px; font-size: 20px; }
.popup-desc { margin-bottom: 2rem; }
.popup-image { margin-bottom: 2rem; }
.popup-foot { text-align: right; font-size: 14px; color: #595959; }
    .popup-foot a { color: #0000ff; text-decoration: underline; }
    .popup-foot a:hover { font-weight: bold; }

/* More On */
#more-on { margin-top: 70px; background-color: #FAE2DE; font-size: 18px; }
#more-on .banner { padding: 40px 0; }
#more-on .banner .panel-title { color: #E66C5C; font-weight: bold; font-family: "Faustina"; font-size: 32px; margin-bottom: 40px;  }
#more-on .banner .panel-description-eng { margin-bottom: 20px; padding: 0 180px; }
#more-on .banner .panel-description-idn { margin-bottom: 20px; padding: 0 250px; }
#more-on .banner .panel-button .btn-home-head {
    font-family: 'Noto Sans';
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 16px;
    --bs-btn-border-radius: 0;
    --bs-btn-padding-y: 12px;
}
#more-on .banner .panel-button .kata-data-logo { top: 8px; }

/* Citation */
#citation { margin-bottom: 30px; font-size: 18px; }
#citation .banner { padding: 40px 0; }
#citation .banner .panel-title { color: #E66C5C; font-weight: bold; font-family: "Faustina"; font-size: 32px; margin-bottom: 40px;  }
#citation .banner .panel-description-idn { margin-bottom: 20px; padding: 0 150px; }
#citation .banner .panel-description-eng { margin-bottom: 20px; padding: 0 290px; }
#citation .banner .panel-description a { color: #000; font-weight: bold; }
#citation .banner .panel-snippet {
    font-family: monospace,monospace;
    background-color: #f7f7f7;
    border: 1px solid #cc4778;
    color: #577291;
    padding: 16px 24px;
    text-align: left;
    line-height: 1.3333333333;
    display: flex;
    align-items: stretch;
    margin-top: 30px;
}
#citation .banner .panel-snippet .cite-text { margin: 0; flex: 1; word-break: break-word; white-space: pre-wrap; }
#citation .banner .panel-snippet .cite-button {
    position: relative;
    background: none;
    border: none;
    flex: 0 0 50px;
    max-height: 32px;
    text-align: right;
    color: #577291;
    cursor: pointer;
    top: 10px;
}
#citation .banner .panel-snippet .cite-button .copied { display: none; }
#citation .banner .panel-snippet .cite-button .copy-btn::before { font-weight: 400; }
#citation .banner .panel-snippet .cite-button:hover .copy-btn::before { font-weight: 900; }

/* Mobile Styles */
@media (max-width: 767px) {
    #top-banner { height: auto; }
    #top-banner .banner .banner-container { padding: 0; }
    #top-banner .banner .banner-box { min-width: 100%; max-width: 100%; font-size: 22px; padding-left: 20px; }
}

@media (max-width: 884px) {
    #sub-topics .topic-item { width: 100%; }
    #sub-topics { padding-top: 50px; padding-bottom: 50px; }
}

@media (max-width: 992px) {
    #insight-popup .panel { width: 90%; }
    #insight-popup .popup-share { top: 0; }
}

@media (max-width: 674px) {
    .bwm { display: none; }
}

@media (max-width: 576px) {
    #section-panel { margin-top: 60px; }
    .ind-section-panel { margin-top: 60px !important; }
    .panel-description-eng, .panel-description-idn { padding: 0 !important; }
}