@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*============= Info Style ============*/

/*------------------------------
1. General Styling
2. Module & Function
3. Button & Form
4. Profile Page
5. Form Apply
-------------------------------*/


/*=====================================*/
/*========== General Styling ==========*/
/*=====================================*/


:root {
  --main-font-color: #333333;
  --sub-font-color: #059c8a;
  --main-bg-color: #fff;
  --grey-bg-color: #F8F8F8;
  --blue-bg-color: #DFF4FF;
  --green-bg-color: #059c8a;

  --md-container : 920px;
  --sm-container : 780px;

  --swiper-theme-color : #ffffff;
}

html,
body {
    font-family: 'Roboto', sans-serif;
    color: var(--main-font-color);
}

a:hover { text-decoration: none; }

h1 {}
h2 { font-weight: bold; font-size: 1.6rem; margin-bottom: 2rem; }
h3 { font-weight: bold; font-size: 1.1rem; margin-bottom: 1.2rem; }

.bshadow {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
}

.flex-center {
    display: flex;
    justify-content: center;
}

highlight {
    background-color: yellow;
    padding: 1px;
}


.uk-slider-container { padding: 10px; }

@media screen and (max-width: 991px) {

    h1 {}
    h2 { font-size: 1.2rem; margin-bottom: 1rem; }
    h3 { font-size: 1rem; margin-bottom: 1rem; }
    h2.text-center, p.text-center { text-align: left !important; }

}

/*----- Nav & Header -----*/

nav.navbar { padding: .8rem 1rem; }

nav.navbar .dropdown-menu { border: none; margin-top: 10px;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
    padding: 15px; border-radius: 8px;
}
nav.navbar .dropdown-menu:before {content: ""; width: 0; height: 0; position: absolute; top: -12px; z-index: -1;
    border-style: solid; border-width: 0 15px 15px 15px; border-color: transparent transparent #fff transparent;
    -webkit-filter: drop-shadow(0 0 8px rgba(0,0,0,.3));
    filter: drop-shadow(0 0 8px rgba(0,0,0,.3));
}

nav.navbar .dropdown-menu:after { content: ""; width: 80%; height: 20px; position: absolute; top: 0; left: 10%; background: #fff }

.logo-brand {
    margin-right: auto;
}

.logo-brand .show-d{ display: block; }
.logo-brand .show-m{ display: none; }

@media screen and (max-width: 991px) {
    .logo-brand .show-d{display: none;}
    .logo-brand .show-m{display: block;}
}

.icon-bars-header {
    margin-right: 1rem;
    border: none; background: none; font-size: 20px;
}

.icon-bars-header:focus { outline: none; }

.icon-bars-header i {
    color: #2c4098 !important;
}

.tkb-widget {
    font-size: 13px;
    color: #059C8A;
    font-weight: 700;
    padding-top: 6px; padding-left: 10px;
}
.tkb-widget span { cursor: pointer; }

.tkb-widget .dropdown-menu { width: 280px; font-weight: normal; font-size: .9rem; left: -80%; margin-top: 18px !important; }
.tkb-widget .dropdown-menu:before { right: 68px;}

.navbar-custom-link li {
    padding: 0px 12px; display: flex; align-items: center;
}

.navbar-custom-link li a {
    font-size: 15px;
    font-weight: 500;
}

.navbar-custom-link .btn-primary { padding: .4rem 1.5rem !important; }

.navbar-custom-link .dropdown-menu { width: 320px;}
.navbar-custom-link .dropdown-menu:before { left: 72px;}
.navbar-custom-link li.dropdown .dropdown-toggle span { font-size: 12px; margin-left: 2px; top: -2px; position: relative; }
.navbar-custom-link li.dropdown .dropdown-toggle::after { display: none; }

.navbar-custom-link .nav-item-logged { background: #f2f2f2; border-radius: 40px; padding: 0 8px 0 0; }
.navbar-custom-link .nav-item-logged .nav-link { padding: 0 .2rem; }

@media screen and (max-width: 991px) {
    nav.navbar div.navbar-collapse { display: none !important; }
    .tkb-widget {}
    .tkb-widget .dropdown-menu { right: 0; left: auto; }
    .tkb-widget .dropdown-menu:before { right: 40px; }
}



/*----- Slide Nav -----*/
#slide-nav.uk-offcanvas-overlay::before {background: rgba(0, 0, 0, 0.5);}

.slide-nav-menu.uk-offcanvas-bar { background: #fff; padding: 0; }
.slide-nav-menu .uk-offcanvas-close { background: none; border: none; outline: none; }
.slide-nav-menu .uk-offcanvas-close svg line {stroke: #2c4098 }
.slide-nav-menu .section { padding: 14px 20px; border-bottom: solid 1px #e5e5e5}
.slide-nav-menu .section h6 { font-size: 12px; margin-bottom: 16px; color: var(--sub-font-color);}

.slide-nav-menu .section.user {}
    .slide-nav-menu .section.user .user-pic { width: 64px; margin-right: 10px; }
    .slide-nav-menu .section.user .user-name { font-weight: bold; font-size: 1.2rem; font-weight: 500}
    .slide-nav-menu .section.user .user-mail { color: var(--sub-font-color); font-size: .9rem; }

.slide-nav-menu .section.menu {}
    ul.menu-list { list-style: none; margin: 0; padding: 0; }
    ul.menu-list a { font-weight: 500; color: #000; font-size: 15px; line-height: 22px; }
    ul.menu-list li:first-child { padding-top: 0 !important; }
    ul.menu-list li:last-child { padding-bottom: 0 !important; }
    ul.menu-list.menu-icon li { display: flex; align-items: center; padding: 8px 0;}
    ul.menu-list.menu-text li { padding: 8px 0; }

    ul.menu-list.menu-icon li.go-instant:before { background-position: -42px 0; }
    ul.menu-list.menu-icon li.go-reg:before { background-position: -42px -42px; }
    ul.menu-list.menu-icon li.go-pro:before { background-position: -84px 0; }
    ul.menu-list.menu-icon li.go-comm:before { background-position: -84px -42px; }
    ul.menu-list.menu-icon li.go-search:before { background-position: -126px 0; }
    ul.menu-list.menu-icon li.go-fund:before { background-position: -126px -42px; }
    ul.menu-list.menu-icon li.go-inv:before { background-position: -168px 0; }
    ul.menu-list.menu-icon li.go-coop:before { background-position: -168px -42px; }
    ul.menu-list.menu-icon li.go-tunas:before { background-position: 0 -84px; }

ul.menu-list.menu-icon li:before, .col-icons:before { content: ""; width: 42px; height: 42px; margin-right: 10px; display: block; background: url(../img/icon/icons.png) top left no-repeat;
    flex: 0 0 42px;
}


/*----- Closer -----*/

.about-foot-section { background-color: var(--grey-bg-color); padding-top: 2.5rem; padding-bottom: 2.5rem;  }
.about-foot-section p:last-child { margin-bottom: 0; }

/*----- Footer -----*/
.footer-section {
    background-color: #10152A;
    padding: 60px 0;
    color: white;
}

.description-widget-logo {
    margin-top: 25px;
    font-size: 14px;
}

.description-logo-soc ul,
.wrapper-link-foot ul,
.detail-phone {
    padding: 0;
    margin-top: 10px;
}

.detail-phone li {
    display: inline-block;
    padding: 0px 15px;
}

.detail-phone li:first-child {
    padding: 0;
}

.description-logo-soc ul li {
    display: inline-block;
    width: 55px;
    height: auto;
    font-size: 22px;
}

.description-logo-soc ul {
    margin-top: 50px; margin-bottom: 0;
}

.description-logo-soc ul li a,
.wrapper-link-foot ul li a {
    color: white;
}

.wrapper-link-foot ul {
    margin-top: 0; margin-bottom: 0;
}

.wrapper-link-foot ul li {
    list-style-type: none;
    font-size: 14px;
    padding: 3px 0;
}

.wrapper-link-foot ul li.spacer { height: 15px; }

.logo-pengawas {
    padding: 0;
    margin: 5px auto;
}

.pengawasan-section {
    padding: 2% 0;
}

.logo-pengawas li {
    list-style-type: none;
    display: inline-block;
}

.pengawas-title {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 20px;
}

.copyright-section {
    border-top: 1px solid #eaeaea;
    padding: 1% 0;
    font-size: 12px;
    padding-bottom: 0;
}

@media screen and (max-width: 991px) {
    .pengawasan-section.text-center { text-align: left !important; padding: 1rem 0; }
    .detail-phone { margin-bottom: 2rem; }
}


/*----- Section Mod -----*/
.section-block { padding-top: 4rem; padding-bottom: 4rem; position: relative;}
.section-top { padding-top: 0 }
.section-top-banner { padding-top: calc(10% + 4rem); }
.section-border { border-top: solid 1px #ebeced;}

.section-stripe { position: relative; }
.section-stripe .uk-breadcrumb { margin-top: -5%; margin-bottom: 2.5rem; }
.section-stripe:before, .section-block.section-stripe:after { content: ""; position: absolute; width: 50%; height: 100%; z-index: -1; }
.section-stripe:before { top: 0; left: 0; background: var(--main-bg-color) }
.section-stripe:after { top: 0; right: 0; background: var(--blue-bg-color) }


@media screen and (min-width: 992px) {

    .section-stripe .container > .row > .col:nth-child(odd) { padding-right: 2.5rem; }
    .section-stripe .container > .row > .col:nth-child(even) {padding-left: 2.5rem;}
}


@media screen and (max-width: 991px) {
    .section-top-banner { padding-top: calc(15% + 2rem) !important; }
    .section-top-banner.section-stripe.section-block { padding-bottom: 0; }

    .section-stripe:before, .section-stripe:after { display: none; }
    .section-stripe .container > .row > .col { flex-basis: auto }

    .col-intro-form { background: var(--blue-bg-color); padding-top: 4rem; padding-bottom: 4rem;  }

    .section-block { padding-top: 25px; padding-bottom: 25px; }
    .section-block .mt-5 { margin-top: 15px !important; }

}

/*----- Page Condition -----*/
body.page-product {}
@media screen and (max-width: 991px) {
    body.page-product .section-border, body.page-product .col-intro-form { position: relative; padding-top: 40px; }
    body.page-product .section-border:before, body.page-product .col-intro-form:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; background: #f8f8f8; height: 15px;}

    /* body.page-product .section-testimoni .video-play { display: none; } */
}

body.page-profile {}
@media screen and (max-width: 991px) {
    body.page-profile .uk-breadcrumb { display: none; }
}


/*=======================================*/
/*========== Module & Function ==========*/
/*=======================================*/

/*----- Section Slider -----*/
.section-slider { position: relative; z-index: 10; margin-bottom: -10%}
.section-slider.title-banner { background: #059c8a url(../img/banner/banner-title.png) center bottom no-repeat; background-size: 100%; margin-bottom: 0; }

.slider-wrapper { position: relative; z-index: 10;}
.section-slider img.banner-desktop { width: 100%; height: auto; }
.section-slider img.logo-slider { height: 36px; width: auto; margin-bottom: 1rem; }

.slider-caption { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; padding-bottom: 8%;}
.section-slider.title-banner .slider-caption { position: relative; padding-top: 2.8rem; padding-bottom: 7.5%}

.slider-widget { color: #fff; }
.slider-widget h1 {
    font-weight: bold;
    font-size: 3rem;
    margin-bottom: .8rem;
    letter-spacing: .05rem;
}

.slider-widget h1.sm { font-size: 1.3rem; font-weight: 500; margin-bottom: 0;}
.slider-widget small {
    display: block;
    width: 30rem;
    max-width: 100%;
    font-size: 1.5rem;
    line-height: 1.8rem;
    font-weight: 300;
}
.section-slider.title-banner .slider-widget small { width: auto; }
.section-slider.title-banner .slider-widget .icon-wave { position: relative; top: -8px; }

.yellow-slider {
    height: 473.16px;
    width: 1156px;
    background-color: #B0E800;
}

.section-slider .swiper-container-horizontal>.swiper-pagination-bullets { bottom: .8%; }

.section-slider .search {
    width: 100%;
    position: relative;
    display: flex;
}

.section-slider .search .search-term {
    width: 100%;
    border: 3px solid #2C4098;
    border-right: none;
    padding: 5px;
    height: 2.25rem;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: #3e5a8e;
  }

  .section-slider .search .search-term:focus{
    color: #3e5a8e;
  }

  .section-slider .search .search-button {
    width: 40px;
    height: 36px;
    border: 1px solid #2C4098;
    background: #2C4098;
    text-align: center;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 20px;
  }

@media screen and (max-width: 991px) {
    .section-slider {  margin-bottom: -15%;}
    .section-slider:before { content:""; position: absolute; top: 0; left: 0; right: 0; bottom: 60%; background: #059c8a;}
    .section-slider.contact-us:before { content:""; position: absolute; top: 0; left: 0; right: 0; bottom: 60%; background: #FFF;}

    .section-slider.title-banner { margin-bottom: 5% }

    .slider-widget h1 { font-size: 1.5rem; }
    .slider-widget small { width: auto; font-size: 1rem; line-height: 1.4rem; font-weight: 500; }

    img.banner-desktop { display: none; }
    img.banner-mobile { display: block !important; }

    .section-slider .swiper-button-next, .section-slider .swiper-button-prev { display: none; }
    .section-slider .swiper-container-horizontal>.swiper-pagination-bullets { bottom: 12%; }
}

/* @media screen and (max-width: 991px) {
    .section-slider {  margin-bottom: -15%;}
    .section-slider:before { content:""; position: absolute; top: 0; left: 0; right: 0; bottom: 60%; background: #059c8a;}

    .section-slider.title-banner { margin-bottom: 5% }

    .slider-widget h1 { font-size: 1.5rem; }
    .slider-widget small { width: auto; font-size: 1rem; line-height: 1.4rem; font-weight: 500; }
    .section-slider img.logo-slider { display: none;}

    img.banner-desktop { display: none; }
    .section-slider.contact-us {background: url(../img/banner/banner-contact-us-mobile.png) center bottom no-repeat;  background-size: 100%;}
    .section-slider {background: url(../img/banner/banner-general-mobile.png) center bottom no-repeat;  background-size: 100%;}
    .slider-caption { position: relative; padding: 10% 0 20%; }

    .section-slider .swiper-button-next, .section-slider .swiper-button-prev { display: none; }
    .section-slider .swiper-container-horizontal>.swiper-pagination-bullets { bottom: 12%; }

    .title-min-m { background: none; }
    .title-min-m:before { display: none; }
    .title-min-m .slider-widget { color: #000; }
    .title-min-m .slider-widget h1 { letter-spacing: normal; font-size: 1.2rem; font-weight: 500 }
    .title-min-m .slider-caption { padding: 1.2rem 0 }

    .title-hide-m { display: none; }
} */

@media screen and (max-width: 419px) {
    .section-slider:before { bottom: 35%}
}

@media screen and (max-width: 219px) {
    .section-slider:before { bottom: 20%}
}

/*----- Section Page Title -----*/
.page-title { position: relative; padding: 1rem 0 0;}
    .page-title:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px;
        background: rgb(0,0,0);
        background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(255,255,255,0) 90%);
    }
    .page-title h1 { font-size: 1.8rem; font-weight: bold; text-align: center; margin: 1rem 0 0; }

.page-title-overlay { position: absolute; width: 100%; height: auto; z-index: 100 }

/*----- Breadcrumb -----*/
.uk-breadcrumb > * > * { font-size: 12px; }
.uk-breadcrumb a { color: #2c4098 }
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
    display: inline-block;
    margin: 0 8px;
    font-size: 10px;
    color: #2c4098;
    content: "\f054";
    font-family: FontAwesome;

}

/*----- Section Calculator -----*/

.section-calculator {
    height: 100%;
    background-color: var(--blue-bg-color);
}

.section-calculator label { font-size: .9rem; margin-bottom: .4rem; font-weight: bold; }

.calculator-widget {
    margin-bottom: 1.5rem;
}

@media screen and (max-width: 991px) {
    .calculator-widget { margin-bottom: 0; }
}


/*----- Result Recommendation -----*/
.card-recommendation {overflow: hidden;margin-bottom: 5%;}
    .card-recommendation .card-title { display: flex; align-items: center;}
    .card-recommendation .card-title img { width: 3.5rem; height: auto; padding-right: 1rem;  }
    .card-recommendation .card-title h3 { margin: 0; font-size: 1rem}
    .card-recommendation .card-info * { display: block; }
    .card-recommendation .card-info label { margin-bottom: 0; }
    .card-recommendation .card-info big { color: var(--sub-font-color); font-weight: bold; margin-bottom: .5rem; }
    .card-recommendation .card-info small { min-height: 2.5rem; margin-bottom: .5rem; }
    .card-recommendation .card-info a { font-weight: bold; font-size: .9rem; color: #2C4098}

    .card-recommendation .card-footer { padding: 0; text-align: center;}
    .card-recommendation .card-footer a { display: block; padding: .75rem 1.25rem; background: #2C4098; color: #fff; }

/*----- Calc Result -----*/
.calculator-result {}
    .calculator-result label { display: block; font-weight: bold; margin: 0 0 -8px; }
    .calculator-result big { display: block; font-size: 2rem; font-weight: bold; margin-bottom: .5rem; }

.info-sim { font-size: .8rem; margin: 1.2rem 0; }
.info-sim:before {content: "\f05a"; font-family: FontAwesome; color: #2c4098}
.info-sim.center { text-align: center; }
.info-sim.center:before { display: inline; }
.info-sim.left { padding-left: 16px; position: relative;}
.info-sim.left:before { position: absolute; top: 0; left: 0; }


/*----- Section Instant Menu -----*/
.section-instant-menu {}

.section-instant-menu .col { flex-basis: auto; padding-left: 0; padding-right: 0;}

.menu-instant-box { display: flex; margin-left: -.8rem; margin-right: -.8rem}
.menu-instant-box a { color: inherit; }
.menu-instant-box .flex-wrap { width: 100%; }
.menu-instant-box .card-body {
    padding: .3rem;
}

.menu-instant-card {
    padding: .5rem .8rem; display: flex;
}
.menu-instant-card .card { width: 100%; min-height: 110px; padding: 0 10px; border: none;}
.menu-instant-card img { width: 45px; margin: .5rem auto 5px; }
.menu-instant-card p { margin: 0; line-height: 1.1rem; font-size: .9rem;}

.col.col-student { width: 60%; padding-right: .8rem}
    .col.col-student .menu-instant-card { width: 33.3333%; }
.col.col-institution { width: 40%; padding-left: .8rem;}
    .col.col-institution .menu-instant-card { width: 50%; }

@media screen and (max-width: 991px) {
    .col.col-student, .col.col-institution { width: 100%; padding: 0 20px; }
    .col.col-student { margin-bottom: 1rem; }
    .menu-instant-box { margin-right: -8px; margin-left: -8px; }
    .col.col-student .menu-instant-card, .col.col-institution .menu-instant-card { width: 33.3333%; padding: 8px; }
}



/*----- Section Panel Top -----*/
.section-panel-top {}
    .section-panel-top { margin-top: -5%; margin-bottom: 0; position: relative; z-index: 10 }



/*----- FAQ Box Jumper -----*/
.panel-jumper {}
    .panel-jumper img { width: 80px; height: auto; }
    .panel-jumper div { font-weight: bold; padding: 0 1rem;}
    .panel-jumper button { margin-left: auto; }
    .panel-jumper a { margin-left: auto; }
    .panel-jumper h2 { margin-bottom: 0; font-size: 1.2rem; }

@media screen and (max-width: 991px) {
    .panel-jumper .d-flex { display: block !important; }
    .panel-jumper .d-flex:after { content: ""; display: table; clear: both; }
    .panel-jumper div { padding: 0; }
    .panel-jumper img { float: left; margin-right: 1rem;  }
    .panel-jumper button { float: right; margin-top: 5px; }
    .panel-jumper a { float: right; margin-top: 5px; }
}

/*----- Ribbon -----*/
.ribbon {
    width: 121px;
    height: 100px;
    overflow: hidden;
    position: absolute;
}

.ribbon::before,
.ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #2980b9;
}

.ribbon span {
    position: absolute;
    display: block;
    width: 200px;
    padding: 2px 0;
    background-color: #FFAC2F;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-transform: uppercase;
    text-align: center;
}

.ribbon-top-right {
    top: -2px;
    right: -2px;
}

.ribbon-top-right::before,
.ribbon-top-right::after {
    border-top-color: transparent;
    border-right-color: transparent;
    display: none;
}

.ribbon-top-right::before {
    top: 0;
    left: 0;
}

.ribbon-top-right::after {
    bottom: 0;
    right: 0;
}

.ribbon-top-right span {
    left: -5px;
    top: 15px;
    transform: rotate(45deg);
}

.slider-button-chevron {
    border-radius: 50%;
    width: 35px;
    text-align: center;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, .1);

}

.uk-position-center-left {
    left: -24px !important;
}

.uk-position-center-right {
    right: -24px !important;
}


.title-before-widget {
    margin-bottom: 30px;
}

.title-before-widget h3 {
    font-weight: 500;
}

.description-box {
    font-size: 14px;
}

.uk-grid-small { margin-left: -15px !important }

@media screen and (max-width: 991px) {
    .slider-m-mod { margin-left: -15px !important; margin-right: -15px !important; }
    .slider-m-mod .uk-slidenav { display: none; }
    .slider-m-mod .uk-slider-container { padding-left: 14px; }

}

@media screen and (max-width: 767px) {
    .slider-m-break .uk-slider-items.uk-grid { transform: none !important; flex-wrap: wrap; }
    .slider-m-break .uk-slider-items.uk-grid li { width: 100%; margin-bottom: 20px; }
    .slider-m-break .uk-slider-container { padding: 0; }
    .slider-m-break .uk-slidenav { display: none; }
}

/*========================================*/
/*========== Section Collection ==========*/
/*========================================*/

/*----- Section Product Intro -----*/
.section-product-intro {}

.intro-icon {margin-bottom: 2rem;}
    .intro-icon .col * { display: block; }
    .intro-icon .col img { width: 48px; }
    .intro-icon .col label { font-size: .9rem; font-weight: bold; margin: .5rem 0 0}
    .intro-icon .col span { color: var(--sub-font-color); font-size: 1.6rem; font-weight: bold; }
    .intro-icon .col span small { color: var(--main-font-color); font-size: 1rem; }
    .intro-icon .col:nth-child(1):before { background-position: -42px -84px;}
    .intro-icon .col:nth-child(2):before { background-position: -84px -84px;}
    .intro-icon .col:nth-child(3):before { background-position: 0 -126px;}

.intro-info { margin-bottom: 2rem; }

@media screen and (max-width: 991px) {

    .intro-icon .col span { font-size: 1.4rem; }

    .intro-info { padding-top: 2rem; border-top: solid 1px #ebeced; }
    .intro-info.top { border: none; padding-top: 0; }
}


/*----- Section Product Desc -----*/
.section-product-desc {}

.product-info { margin-bottom: 2rem; }
    .product-info div { padding-top: 4px;  padding-left: 60px; font-size: 1rem; line-height: 1.4rem; }
    .product-info small { display: block; font-weight: bold }
    .product-info:before { float: left; }
    .product-info.int:before { background-position: -126px -84px; }
    .product-info.cost:before { background-position: -168px -84px; }
    .product-info.doc:before { background-position: -42px -126px; }
    .product-info.date:before { background-position: -84px -84px; }
    .product-info.imb:before { background-position: 0 -126px;; }

.product-table { font-size: .8rem; font-weight: bold; }
.product-table.card { overflow: hidden; max-width: 400px;}

.product-table .table {table-layout: fixed; word-wrap: break-word; }
.product-table .table td:nth-child(2) { text-align: right; }
.product-table .table-sm td { padding: .3rem .5rem; }
.product-table .table-striped tbody tr:nth-of-type(odd) { background: #fff; }
.product-table .table-striped tbody tr:nth-of-type(even) {background: var(--grey-bg-color)}
.product-table .table-bordered { border: none; margin-bottom: 0; }
.product-table .table-bordered tr:first-child td { border-top: 0; }
.product-table .table-bordered tr:last-child td { border-bottom: 0; }
.product-table .table-bordered td:first-child { border-left: 0; }
.product-table .table-bordered td:last-child { border-right: 0; }

@media screen and (max-width: 991px) {
    .product-info { margin-bottom: 0 }
    .section-product-desc .col { flex-basis: auto; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: solid 1px #ebeced  }
    .section-product-desc .col:last-child { margin-bottom: 0; border: none; }
}

/*----- Section Product Process -----*/
.section-product-process {}
    .section-product-process .col-image { display: flex; align-items: center; background: url(../img/bg-process.jpg) center no-repeat; background-size: cover;
        font-size: 2.2rem; line-height: 3.2rem; font-weight: 500; padding: 10%; color: #fff;
    }
    .section-product-process .col-content { padding: 4rem 3rem; }

.list-process { list-style: none; margin: 0; padding: 0; counter-reset: process-counter;}
    .list-process li, .list-process .item { counter-increment: process-counter;}
    .list-process li { display: flex; position: relative; align-items: center; padding-bottom: 2rem;}
    .list-process li:after { content: ""; position: absolute; z-index: 0; width: 1px; height: 100%; bottom: 0; left: 36px; background-color: var(--blue-bg-color);}
    .list-process li:last-child:after { display: none; }
    .list-process .icon { width: 72px; height: 72px; flex: 0 0 72px; position: relative; z-index: 1; border-radius: 50%; background-color: var(--blue-bg-color); margin-right: 1.2rem; }
    .list-process .icon img { width: 100%; height: auto; }
    .list-process .icon:before {content: counter(process-counter); position: absolute; top:-5px; left: -5px;
        width: 24px; height: 24px; border-radius: 50%; color: #fff; background: #059c8a;
        line-height: 24px; text-align: center; font-size: .7rem; font-weight: bold;
    }
    .list-process .content {font-weight: 600; font-size: 1.2rem; flex:1;}

    .list-process.column-process .item { margin: 2rem 0; }
    .list-process.column-process .item .icon, .list-process.column-process .item .content { display: block; margin: 0; }
    .list-process.column-process .item h4 { font-size: 1.1rem; margin: 1.2rem 0 .8rem; font-weight: bold; }
    .list-process.column-process .item p { font-size: .9rem; font-weight: normal; }





@media screen and (max-width: 991px) {
    .section-product-process .col-image { display: none; }
    .section-product-process .col-content { padding: 2rem 20px; }

    ul.list-process .content { font-weight: normal; font-size: 1rem; }
}

/*----- Section Product tnC -----*/

.section-product-tnc { line-height: 1.8rem; }
    .section-product-tnc .tnc-content { padding: 1.2rem 0; }
    .section-product-tnc .tnc-content ul { margin: 0; padding: 0 0 0 18px; }
    .section-product-tnc .tnc-content ul li { margin-bottom: .5rem; }

.table-tnc { font-size: .8rem; line-height: 1.2rem; margin: 1rem 0; }
    .table-tnc thead th { background: #059c8a; color: #fff; }
    .table-tnc li { margin-bottom: 0 !important; }

/*----- Section Product Form -----*/
.section-product-form { background-color: var(--blue-bg-color); }


/*----- Section FAQ -----*/
.section-faq {}
@media screen and (min-width: 992px) {
    .section-faq .container { width: var(--sm-container);}
}

.cs-container {
    height: 100px;
    position: relative;
}

.cs-content {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.header-faq {
    background-color: rgba(255, 255, 255, 0.9); position: relative;
}

.header-faq button:focus { outline: none !important; box-shadow: none }
.header-faq button:after { content: "\f107";
    color: #2c4098; font-size: 1.2rem;
    top: 50%; margin-top: -14px;
    right: 15px;
    position: absolute;
    font-family: "FontAwesome"
}
.header-faq button[aria-expanded="true"]:after {
    content: "\f106";
}

.title-faq {
    font-size: 18px;
    letter-spacing: 0;
    line-height: 24px;
    color: #333333;
}

.body-faq {
    background-color: rgba(0, 0, 0, .03);
}

.header-faq button {
    color: #062238 !important;
    font-weight: 600;
}

.search-faq { background-color: var(--green-bg-color); padding: 1rem 0; margin-bottom: 1.5rem  }
    .search-faq .form-control, .search-faq .input-group-text { padding: 10px 15px; height: auto; border: none; }
    .search-faq .form-control { font-size: 14px;}
    .search-faq .input-group-text { background: #fff; color: var(--main-font-color);  }



.video-play {}
.video-play .card {
    background: transparent;
    border: none; width: 100%;
}
.video-play .card-body { width: 100%; display: flex; align-items: center; justify-content: center; }
.video-play span {
    width: 92px; height: 92px; display: block;
    background: url("../img/icon/play.png") center no-repeat;
}

.display-video {
    border-top: calc(.25rem - 1px);
    border-bottom: calc(.25rem - 1px);
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    z-index: -100;
}

/*----- Section Promo -----*/
.section-promo {}

.detail-promo-button {
    text-align: center;
    font-weight: 600;
    padding-top: .6334em;
    padding-bottom: .6334em;
    border: 1px solid #EBECED;
}


/*----- Section Recommendation -----*/
.section-recommendation {background-color: var(--grey-bg-color);}

.section-recommendation .thumb { float: left; padding-right: 10px; width: 72px; }
.section-recommendation .content { }
.section-recommendation .info { clear: both; padding-top: 10px;}

.section-recommendation .school-title {
    color: #062238;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 22px;
    margin-bottom: 8px;
}

.section-recommendation .school-address {
    color: #062238;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 18px;
    margin-bottom: 0;
}

.section-recommendation .school-desc {
    font-size: 12px;
    line-height: 18px;
}

.section-recommendation .school-price {
    font-weight: bold;
    color: #059C8A;
}

.section-recommendation .school-footer {
    background-color: transparent !important;
    text-align: center;
}

.section-recommendation .school-footer a {
    color: #2C4098;
    font-size: 14px;
    font-weight: bold;
}

/*----- Section Flash Info -----*/
.section-info {
    background-image: url('../img/bg_simulasi.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: #fff;
}

.menu-info-card {
    margin-top: 3rem !important;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.menu-info-card .card {
    background: transparent;
    color: white;
    border: none;
}

.menu-info-card .card-text {
    width: auto;
    padding: 0px;
    margin: 0px;
}

.menu-info-card img { width: 42px; }

.info-desc {
    font-size: 12px;
    color: #dbdbdb;
    min-height: 2.5rem;
}

.info-total {
    position: relative;
    margin-top: auto;
    font-weight: bold;
    font-size: 14px;
}

@media screen and (max-width: 991px) {
    .menu-info-card {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media screen and (max-width: 767px) {
    .menu-info-card {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media screen and (max-width: 359px) {
    .menu-info-card {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*----- Section Testimoni -----*/
.section-testimoni {
    background-color: var(--blue-bg-color);
}

.testimoni-img { border-radius: 50%; overflow: hidden; width: 80px; height: 80px; margin-bottom: 1rem;}
.testimoni-img img { object-fit: cover; width: 80px; height: 80px;}

.testimoni-name {
    color: #062238;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 22px;
}

.testimoni-title {
    color: #062238;
    font-size: .9rem;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.1rem;
    margin-bottom: .5rem;
}

.testimoni-desc {
    font-size: .8rem;
    line-height: 1rem;
    margin-bottom: 1.2rem !important
}

/* .section-testimoni .video-play .card-body { background: url(../img/testimoni/testimoni-2x.png) center no-repeat; background-size: cover; } */

.section-testimoni .uk-slider .card-body { padding: 1rem 1.5rem; position: relative;}
.section-testimoni .uk-slider .card-body:before { content: "\0022"; position: absolute; top: 0; right: 1.5rem; font-size: 4rem; color: #2b4098; font-style: italic; font-weight: bold; }

@media screen and (max-width: 991px) {
    .section-testimoni .video-play { margin-bottom: .5rem; }
    .section-testimoni .video-play .card-body { padding: 0}
}

/*----- Section Partner -----*/
.section-partner {}

.section-partner .tab-content { margin: 2.5rem 0; 1rem }

.menu-partner {
    border: 0;
    padding: .7rem;
    margin-left: 1rem;
    margin-bottom: -20px;
    background-color: #2bbbad;
    z-index: 1;
    position: relative;
    border-radius: .25rem;
}

.nav-partner {
    color: #2C4098;
    font-size: 14px;
    font-weight: bold;
    border-right: 1px solid rgba(0, 0, 0, .1);
    background-color: white;
}

.nav-pills .nav-link { border-radius: 0; }

@media screen and (min-width: 992px) {

    ul.nav-pills li:first-child .nav-partner {
        -webkit-border-top-left-radius: .25rem;
        -webkit-border-bottom-left-radius: .25rem;
        -moz-border-radius-topleft: .25rem;
        -moz-border-radius-bottomleft: .25rem;
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem;
    }


    ul.nav-pills li:last-child .nav-partner {
        -webkit-border-top-right-radius: .25rem;
        -webkit-border-bottom-right-radius: .25rem;
        -moz-border-radius-topright: .25rem;
        -moz-border-radius-bottomright: .25rem;
        border-top-right-radius: .25rem;
        border-bottom-right-radius: .25rem;
    }

}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: white !important;
    background-color: #2C4098 !important;
}

.tab-pinjaman .nav-link.active,
.tab-pinjaman .show>.nav-link {
    background-color: white !important;
    color: #2C4098 !important;
}

.nav-tabs { width: 100%; border: none; }
.nav-tabs .nav-item { font-size: 14px; color: var(--main-font-color); }
.nav-tabs .nav-item {  }

ul.list-partner { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex-wrap: wrap;}
    ul.list-partner li { width: 20%; padding: 1rem 1.5rem; margin: 15px 0; text-align: center;}
    ul.list-partner li img { max-width: 120px; height: auto; }
    ul.list-partner.sm li { width: 16.667%; padding: 1.2rem; }
    ul.list-partner.bg li { width: 33.333%; padding: 1.2rem; }


@media screen and (max-width: 991px) {
    ul.list-partner li, ul.list-partner.sm li { width: 33.3333% }

    ul.nav-pills { display: block; }
    ul.nav-pills li { width: 33.3333%; float: left; text-align: center; }
}

@media screen and (max-width: 767px) {
    ul.nav-pills li { width: 50%; float: left; text-align: center; }
}

@media screen and (max-width: 514px) {
    ul.list-partner li, ul.list-partner.sm li { width: 50% }
}

/*----- Section Gallery -----*/
.section-gallery {
    background-color: var(--main-bg-color);
}

/*----- Section Artikel -----*/
.section-artikel {
    background-color: var(--grey-bg-color);
}

.section-artikel h5.card-title { font-size: 1rem; margin-bottom: .25rem }
.section-artikel .card-text:last-child { font-size: .8rem; }


/*----- Section Intitusion Apply -----*/
.institusi-form {
    height: 100%;
    padding: 5%;
}

/*----- Section Team -----*/
.section-team { text-align: center; }
    .section-team .team-image { width: 120px; height: 120px; overflow: hidden; border-radius: 50%; margin: .5rem auto }
    .section-team .team-name { font-weight: bold; margin: 1rem 0;}
    .section-team .team-name label { display: block; font-size: 1.2rem; line-height: 1.4rem; margin: 0; }
    .section-team .team-name span { display: block; font-size: .9rem;}

/*----- Section Benefit -----*/
.section-benefit {}
    .section-benefit .card {}
    .section-benefit .card-header { padding: 0; border: none; background: #fff; position: relative;}
    .section-benefit .card-header h4 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.2rem; margin-bottom: 0; padding-bottom: 1.2rem;
    }
    ul.list-benefit { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
    ul.list-benefit li { margin-bottom: 1rem; position: relative; padding-left: 2rem;}
    ul.list-benefit li:before { content: ""; color: var(--sub-font-color); content: "\f00c"; font-family: FontAwesome;
        position: absolute; top: 50%; margin-top: -12px; left: 0;
    }

/*----- Section Check -----*/
.section-check {}
    .section-check h4 { position: relative; padding-left: 50px; font-size: 1.1rem; font-weight: bold; padding-top: 10px; margin-bottom: 1.8rem  }
    .section-check h4:before { position: absolute; left: 0; top: 0;}
    .section-check .benefit h4:before {background-position: -84px -126px;}
    .section-check .responsible h4:before {background-position: -126px -126px;}
    .section-check .terms h4:before {background-position: -42px -126px;}
    .section-check ul.list-benefit { padding-left: 15px; }
    .section-check ul.list-benefit li { padding-left: 35px; margin-bottom: .5rem; }
    .section-check ul.list-benefit li:before { top: 0; margin-top: 0; }



/*----- Section Loan Display -----*/
.section-loan-display {}

.panel-loan {}
    .panel-loan .card-body { padding: 1.5rem; }
    .panel-loan .card-body img {width: 80px; height: auto;}
    .panel-loan .card-body div.info { padding: 0 1.5rem; width: 50%;}
    .panel-loan .card-body div.info h2 {margin-bottom: .2rem; font-size: 1.2rem;}
    .panel-loan .card-body button { margin-left: auto; }


.panel-loan-block {  }

    .panel-loan-block .card-body { position: relative; }
    .panel-loan-block .card-body:before { content: ""; position: absolute; width: 1px; height: 100%; top: 0; left: 50%; background: #e5e5e5 }

    .panel-loan-block .card-footer { border: none; font-size: .8rem; display: flex; align-items: center; }
        .panel-loan-block .card-footer.waiting { background-color: #ffedde; }
        .panel-loan-block .card-footer.action { background-color: #ffe5e5; }
    .panel-loan-block .card-footer span { flex: 0 0 75% }
    .panel-loan-block .card-footer button { margin-left: auto; width: 100%; }

    .panel-loan-block .card-footer span:before {font-family: FontAwesome; margin-right: .6rem;}
        .panel-loan-block .card-footer.waiting span:before { content: "\f05a"; color: #ff7000}
        .panel-loan-block .card-footer.action span:before { content:"\f06a"; color: #ff0000 }


    .panel-loan-block .column-product { display: flex; }
        .panel-loan-block .column-product .product-icon { align-items: center; justify-content: center; flex: 0 0 42px; display: flex;}
        .panel-loan-block .column-product .product-desc { padding-left: 1rem; }
        .panel-loan-block .column-product .product-desc .product-name { font-weight: bold; font-size: 1.1rem; }

    .panel-loan-block .column-info {}

    .panel-loan-block .field {}
        .panel-loan-block .field { font-size: .8rem; line-height: 1.3rem; }
        .panel-loan-block .field label { color: #a6a6a6; margin: 0; }
        .panel-loan-block .field span {color: #333333}
        .panel-loan-block .field.block { margin-bottom: .9rem; }
        .panel-loan-block .field.block label { display: block; }
        .panel-loan-block .field.block span { display: block; font-size: .9rem; font-weight: bold; }

    .panel-loan-block .btn-area { display: flex; margin-top: 8px; margin-right: -20px; margin-left: -15px; margin-bottom: -20px;}
    .panel-loan-block .btn-area .btn { border-radius: 0; width: 100%; font-size: .9rem; font-weight: 500;}
    .panel-loan-block .btn-area.split .btn.btn-cancel { flex: 0 0 33.3333% }

    .panel-loan-block .status { margin: .5rem 0 0 }
        .panel-loan-block .status span { display: inline-block; padding: 3px 15px; border-radius: 10px; font-size: .7rem;}
        .panel-loan-block .status span.onprogress { background: #ffedde; color: #ff780e; }
        .panel-loan-block .status span.done { background: #dff2f0; color: #39b0a2; }
        .panel-loan-block .status span.cancel { background: #e1e1e1; color: #666666; }

    .panel-bill-block { margin-bottom: 2rem;}
        .panel-bill-block .card-body { padding: 1.5rem; }
        .panel-bill-block .card-body img {width: 60px; height: auto;}
        .panel-bill-block .card-body div.info { padding: 0 1.5rem; width: 50%; font-size: .8rem; color: #6b6b6b}
        .panel-bill-block .card-body div.info h4 {margin-bottom: .2rem; font-size: 1rem; color: #000;}
        .panel-bill-block .card-body button { margin-left: auto; width: auto; padding: .3rem 1.5rem; }



ul.nav-loan { list-style: none; margin: 0; padding: 0; display: flex; border-bottom: solid 1px #dddddd}
    ul.nav-loan li { width: 100%; text-align: center;}
    ul.nav-loan li a { display: block; padding: 12px 0; position: relative; color: #9f9f9f }
    ul.nav-loan li.active a { color: #2b4098; font-weight: bold; }
    ul.nav-loan li.active a:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;
        background: #2b4098;
    }

.nav-loan-sub { display: block; margin: 2rem 0; }
    .nav-loan-sub ul { display: inline-block; list-style: none; margin: 0; padding: 0; border-radius: 100px; border: solid 2px #ebeced; padding: 3px;}
    .nav-loan-sub ul li { display: inline-block; font-size: .8rem; font-weight: 500;}
    .nav-loan-sub ul li a { display: block; padding: 4px 25px; border-radius: 100px; color: #5262a9; background: #ebeced }
    .nav-loan-sub ul li.active a { background-color: #2c4098; color: #fff; }
    .nav-loan-sub button { width: 36px; height: 36px; background: none; border: solid 1px #ebeced; border-radius: 50%; padding: 5px;}

.loan-result { margin: 0; }
    .loan-result .panel-loan-block {margin-bottom: 2rem}

.loan-empty { width: 400px; max-width: 100%; margin: 2rem auto; text-align: center; }
    .loan-empty img.icon { width: 120px; height: auto; margin-bottom: 1rem; }

/*----- Section School Browse -----*/

.school-browse {}
    .school-browse .item.search-box { padding: 1.5rem 1rem; display: block;}
    .school-browse .search-box input { background: #f8f8f8; border: none;}
    .school-browse .search-box svg line, .school-browse .search-box svg circle {stroke: #2b4098}
    .school-browse .search-box .btn-filter { display: none; border: none; background: none; outline: none; }

    @media screen and (max-width: 991px) {
        .school-browse .item.search-box { display: flex; }
        .school-browse .search-box .input-addon { width: 100%; }
        .school-browse .item.search-box .btn-filter { display: block; flex: 0 0 40px; margin-left: auto;}
    }

    .school-list .item { display: flex; position: relative;}
    .school-list .item.partner:before { content: ""; width: 60px; height: 12px; background: url(../img/icon/icon-partner-label.png) center no-repeat; background-size: cover;
        position: absolute; top: 22px; right: 20px;
    }
    .school-list .logo { flex: 0 0 100px; }
    .school-list .content { padding-left: 1rem; width: 100%; }
    .school-list .content h4 { font-size: 1.2rem; margin: 0; padding-right: 100px;}
    .school-list .content label {  font-size: 1rem}
    .school-list .content p { color: #666666; font-size: .9rem; margin: 0;}

.school-detail { background-size: 100% !important; padding-top: 10rem;}
    .school-detail .school-banner { width: 100%; height: 40%; position: absolute; top: 0; }
    .school-detail .school-banner img { width: 100%; height: 100%; object-fit: cover; object-position: top}
    .school-detail .school-banner:before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
        background: rgb(255,255,255);
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    }
    .school-detail .school-title { display: flex; align-items: center; padding-right: 2.5rem; margin-bottom: 1.5rem; position: relative;}
    .school-detail .school-title img { flex: 0 0 72px; }
    .school-detail .school-title h1 { padding-left: 1rem; font-size: 1.6rem; margin: 0; }
    .school-detail .school-title .share { position: absolute; top: 0; right: 0; color: #2c4098; font-size: 1.5rem; cursor: pointer; }

    .school-detail .school-info { position: relative; display: flex; align-items: center; font-size: .9rem; margin-bottom: 1rem;}
    .school-detail .school-info:before {font-family: FontAwesome; flex: 0 0 36px; font-size: 1.2rem; color: #2c4098;}
    .school-detail .school-info.address:before {content: "\f3c5";}
    .school-detail .school-info.phone:before {content: "\f879";}
    .school-detail .school-info.web:before {content: "\f0ac";}
    .school-detail .school-info.web a { color: #2c4098; font-weight: bold; }
    .school-detail .link-social { list-style: none; margin: 0; padding: 0;}
    .school-detail .link-social li { display: inline-block; margin-right: .8rem; width: 24px; }
    .school-detail .btn-download { position: relative; width: 320px; max-width: 100%; display: block; margin: auto; color: #2c4098;}
    .school-detail .btn-download:after {font-family: FontAwesome; content: "\f019"; position: absolute; right: 10px;}

    .school-stat { margin: 1rem 0; }
    .school-stat .item { margin: 1rem 0; }
    .school-stat .item label { color: var(--sub-font-color); margin: 0; font-size: .8rem;}
    .school-stat .item div { font-size: 1rem; }

.school-table {background-color: var(--grey-bg-color);}
    .school-table table { background: #fff; }


.school-form {background-color: var(--blue-bg-color);}


i.pop-info { color: #2c4098; cursor: pointer; }
.card-list {}
    .card-list .item { padding: 1rem; border-bottom: solid 1px #e5e5e5 }


    /*----- Section Work at Pintek -----*/
    .section-values-block { padding: 80px 0; }
    .section-values-block h3 { font-weight: bold; font-size: 24px; margin-bottom: 0; }
    .section-values-block .row {display: flex; align-items: center; margin-bottom: 25px;}

    @media screen and (min-width: 992px) {
        .section-values-block .row:nth-child(odd) { text-align: right; flex-flow: row-reverse;}
        .section-values-block .row:nth-child(odd) p { float: right; }
    }

    .section-values-block .thumb { position: relative; border-radius: 10px; overflow: hidden; width: 100%; padding-top: 55%; margin-bottom: 8px;}
    .section-values-block .thumb .wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; }
    .section-values-block .thumb img { width: 100%; height: auto;}
    .section-values-block .thumb:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1}
    .section-values-block .thumb:after { content: ""; width: 6px; height: 35%; position: absolute; left: 20px; bottom: calc(15% + 30px); background: #fff; z-index: 2 }
    .section-values-block .thumb .caption { position: absolute; bottom: 0; padding: 20px; color: #fff; font-size: 20px; font-weight: bold; align-self: flex-start; z-index: 10 }

    .section-values-block.minov {}
    .section-values-block.minov .thumb:before, .section-values-block.minov .thumb:after { display: none; }

    @media screen and (max-width: 511px) {
        .section-values-block .thumb:after { display: none; }
    }

    .section-values-block.value-about .thumb.p1:before { background: #6d6acc; opacity: .5 }
    .section-values-block.value-about .thumb.p2:before { background: #284098; opacity: .45 }
    .section-values-block.value-about .thumb.p3:before { background: #059c8a; opacity: .45 }

    .section-values-block.community-program p { width: 500px; max-width: 100%; }
    .section-values-block.community-program .thumb.p1:before { background: #6d6acc; opacity: .5 }
    .section-values-block.community-program .thumb.p2:before { background: #284098; opacity: .45 }
    .section-values-block.community-program .thumb.p3:before { background: #059c8a; opacity: .45 }
    .section-values-block.community-program .thumb.p4:before { background: #6d6acc; opacity: .45 }
    .section-values-block.community-program .thumb.p5:before { background: #284098; opacity: .45 }


/*=============================================*/
/*========== Button & Forms Elements ==========*/
/*=============================================*/

/*--- Button Elements ---*/

.btn-primary {
    background-color: #2c4098 !important;
    color: white !important;
    border-color: #2c4098;
}

.btn-primary.disabled, .btn-primary:disabled {color: #fff !important; background-color: #cccccc !important; border-color: #cccccc;}

.btn-cancel {
    background-color: #f8f8f8;
    color: #ff6666;
    border-color: #e5e5e5;
}

.btn-primary.btn-loan { padding: .5rem; width: 240px; max-width: 100%; font-size: .8rem; font-weight: 500; }

.btn-outline-primary {
    background-color: white !important;
    color: #2c4098 !important;
}

.btn-info {
    font-size: 16px;
    text-align: center;
    color: #FFFFFF;
    border-radius: 4px;
    background-color: #14A1FA;
    font-weight: bold;
    border-color: #14A1FA;
}

.btn-info:hover {
    background-color: #188ed8;
    border-color: #188ed8;
}

.btn-wide { width: 300px; max-width: 100%; }

.slider-button {
    text-align: center;
    font-weight: normal;
    font-size: 1.4rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
    width: 160px;
}

@media screen and (max-width: 991px) {
    .slider-button {
        font-size: 1.2rem;
        padding-top: .2rem;
        padding-bottom: .2rem;
        width: auto;
    }
}

.btn-area-top-m { display: none; }

@media screen and (max-width: 991px) {
    .btn-area-top-m { position: absolute; top: 0; right: 15px; display: block; }
        .btn-area-top-m a { font-size: .9rem; color: #2c4098; font-weight: bold; }
        .btn-area-top-m a .fas { font-size: .8rem; margin-left: .3rem; }
}


/*----- Form Basic -----*/
.form-pintek-basic {}
.form-pintek-basic label { font-size: 14px;  font-weight: 600;  display: block;}
.form-pintek-basic label.form-check-label { font-weight: normal; }

.form-pintek-basic input, .form-pintek-basic select, .form-pintek-basic option::after {
    color: black;
    font-weight: 400;
}

.form-pintek-basic .form-group { margin-bottom: 1.8rem }

@media screen and (max-width: 991px) {
    .form-pintek-basic .form-group { margin-bottom: 15px; }
}


.input-addon { position: relative; }
    .input-addon .form-control { padding-left: 45px; }
    .input-addon .form-control:focus { outline: none; }
    .input-addon span { position: absolute; top: 0; left: 10px; bottom: 0; display: flex; align-items: center; }

.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem 1.75rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: #fff url('https://api.iconify.design/el-chevron-down.svg') no-repeat right .75rem center/10px 12px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    content: "f078";
}

.custom-select:before {
    content: "f078";
}

.custom-radio-inline { background: #fff; border-radius: .25rem; border: 1px solid #ced4da; }
    .custom-radio-inline .form-check-inline { border: none; }

.btn-group-filter { display: flex; }
    .btn-group-filter.wrap { flex-wrap: wrap; }
    .btn-group-filter .btn { margin-right: 5px; margin-bottom: 5px; background: #fff; border: solid 1px #e5e5e5;}
    .btn-group-filter .btn.active { margin-right: 5px; background: #2C4098; border: solid 1px #2C4098; color: #fff;}
    .btn-group-filter .btn.active:before { content: ""; display: inline-block; margin-right: 2px; content: "\f00c"; font-family: FontAwesome;}

.btn-group-select { display: flex; }
    .btn-group-select .btn { background: #fff; border: solid 1px #e5e5e5; flex-grow: 1}
    .btn-group-select .btn.active { margin-right: 5px; background: #2C4098; border: solid 1px #2C4098; color: #fff;}

.btn-group-radio { display: flex; }
    .btn-group-radio.wrap { flex-wrap: wrap; }
    .btn-group-radio .btn { margin-right: 5px; margin-bottom: 5px; background: #fff; border: solid 1px #e5e5e5;}
    .btn-group-radio .btn:before {font-family: FontAwesome; content: "\f10c";}
    .btn-group-radio .btn.active { margin-right: 5px; background: #2C4098; border: solid 1px #2C4098; color: #fff;}
    .btn-group-radio .btn.active:before { display: inline-block; margin-right: 2px; content: "\f192"; }

/*----- Custom Range Slider -----*/
.range-field {
    position: relative;
}

.range-field input[type=range] {
    cursor: pointer;
    position: relative;
    background-color: transparent;
    border: none;
    outline: none;
    width: 100%;
    margin: 15px 0px;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.range-field input[type=range]:focus {
    outline: none;
}

.range-field input[type=range]+.thumb {
    position: absolute;
    border: none;
    height: 0;
    width: 0;
    border-radius: 50%;
    background-color: #2C4098;
    top: 10px;
    margin-left: -6px;
    transform-origin: 50% 50%;
    transform: rotate(-45deg);
}

.range-field input[type=range]+.thumb .value {
    display: block;
    width: 30px;
    text-align: center;
    color: #2C4098;
    font-size: 0;
    transform: rotate(45deg);
}

.range-field input[type=range]+.thumb.active {
    border-radius: 50% 50% 50% 0;
}

.range-field input[type=range]+.thumb.active .value {
    color: #fff;
    margin-left: -1px;
    margin-top: 8px;
    font-size: 10px;
}

.range-field input[type=range]::-webkit-slider-runnable-track {
    height: 3px;
    background: #2C4098;
    border: none;
}

.range-field input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #2C4098;
    transform-origin: 50% 50%;
    margin: -9px 0 0 0;
    transition: 0.3s;
}

.range-field input[type=range]:focus::-webkit-slider-runnable-track {
    background: #2C4098;
}

.range-field input[type=range]::-moz-range-track {
    height: 3px;
    background: #2C4098;
    border: none;
}

.range-field input[type=range]::-moz-range-thumb {
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #2C4098;
    margin-top: -9px;
}

.range-field input[type=range]:-moz-focusring {
    outline: 1px solid #fff;
    outline-offset: -1px;
}

.range-field input[type=range]:focus::-moz-range-track {
    background: #2C4098;
}

.range-field input[type=range]::-ms-track {
    height: 3px;
    background: transparent;
    border-color: transparent;
    border-width: 6px 0;
    color: transparent;
}

.range-field input[type=range]::-ms-fill-lower {
    background: #2C4098;
}

.range-field input[type=range]::-ms-fill-upper {
    background: #2C4098;
}

.range-field input[type=range]::-ms-thumb {
    border: none;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #2C4098;
}

.range-field input[type=range]:focus::-ms-fill-lower {
    background: #2C4098;
}

.range-field input[type=range]:focus::-ms-fill-upper {
    background: #2C4098;
}

.range-slider .irs--round .irs-handle { background: #2C4098; cursor: pointer; width: 20px; height: 20px; border: none; top: 28px;  }
.range-slider .irs--round .irs-handle:hover; .range-slider .irs--round .irs-handle:focus { background: #2C4098 !important; }
.range-slider .irs--round .irs-from, .range-slider .irs--round .irs-to, .range-slider .irs--round .irs-single {background: #2C4098;}
.range-slider .irs--round .irs-from:before, .range-slider .irs--round .irs-to:before, .range-slider .irs--round .irs-single:before {border-top-color: #2C4098;}
.range-slider .irs--round .irs-bar {background: #2C4098;}

/*--- Box Filter ---*/
.box-filter { margin-bottom: 1rem; border: none;}
.box-filter .item { padding: 1.2rem 1rem; border-bottom: solid 1px #e5e5e5 }
.box-filter .form-pintek-basic .form-group {}
.box-filter .form-group { margin-bottom: 0; font-size: 1rem; }
.box-filter .form-group > label { font-size: 1.2rem; }
.box-filter .form-check { margin-bottom: .5rem; }
.box-filter .form-check label {font-size: 1rem;}

.box-filter .btn-area { display: none;}

@media screen and (max-width: 991px) {
    .box-filter .btn-area { display: flex; overflow: hidden;
        -webkit-border-bottom-right-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-bottomright: 5px;
        -moz-border-radius-bottomleft: 5px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    .box-filter .btn-area .btn { width: 50%; border-radius: 0; }
}

/*--- Modals ---*/
.pop-modal .close { position: absolute; z-index: 10; right: 30px; top: 35px; display: none; }
@media screen and (max-width: 991px) {
    .pop-modal { padding: 15px; }
    .pop-modal .close { display: block; }
}

.modal-backdrop.show { opacity: .8; }
.modal-content { border-radius: 15px; }

.modal-login {
    background-color: #2C4098;
}

.modal-login .modal-header{
    border-bottom: 1px solid rgba(246, 246, 246, 0.183);
}

.modal-header .close { opacity: .8; }
.modal-header .close.uk-icon svg line {stroke: #fff}

.modal-login .col-form-label { font-size: .8rem; }

.form-pintek-login {
    color: white;
    border-radius: 4px;
    background-color: #233379;
    background-clip: padding-box;
    border-color: #233379;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-pintek-login:focus {
    background-color: #233379;
    color: white;
    background-clip: padding-box;
    border-color: #233379;
}
.input-group-text {
    color: white;
    background-color: #233379;
    border: 1px solid #233379;
}

.modal-footer-pintek {
    border-top: none; margin-top: -.5rem;
}
.modal-footer-pintek .btn-outline-primary {
    width: 100%;
}

.modal-privacy .modal-title {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 24px;
    text-align: center;
}

.tabs-privacy{
    background: white;
    color: black;
}
.tabs-privacy h6.section-title{
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 24px;
    text-align: center;
    padding-top: 5%;
}

.tabs-privacy .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #2C4098!important;
    background-color: transparent;
    border-color: transparent transparent #2C4098;
    border-bottom: 4px solid !important;
    font-size: 14px;
    font-weight: bold;
}
.tabs-privacy .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: #999999;
    font-size: 14px;
}

.tabs-privacy .title-content-privacy {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 22px;
    color: #333333;
}
.tabs-privacy .desc-content-privacy {
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 30px;
    color: #333333;
}

.shadow-modal-privacy {
    z-index: 100;
    -webkit-box-shadow: 0px -2px 8px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px -2px 8px 0px rgba(0,0,0,0.2);
    box-shadow: 0px -2px 8px 0px rgba(0,0,0,0.2);
}
.label-privacy {
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 24px;
}
.label-privacy span {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 24px;
    color: #2C4098;
}
.button-privacy {
    background-color: #2C4098;
    text-align: center;
}
.dropdown-custom {
    width: 225px;
}

.dropdown-custom a {
    align-items: center;
    display: flex;
}

.dropdown-custom a span {
    padding-right: 15px;
}
.btn-signout {
    padding: 2%;
    color: #EA5C77;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 20px;
    box-sizing: border-box;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    background-color: #FFFFFF;
}

.btn-signout:hover {
    color: #FFFFFF;
    background-color: #EA5C77;
}

.text-primary {
    color: #2c4098 !important;
    opacity: 1 !important;
}

.modal-otp {}
    .modal-otp h6.section-title { font-weight: bold; font-size: 1.2rem; margin: 0; }
    .modal-otp p { margin-top: 1.2rem; margin-bottom: 1.2rem; font-size: 1rem; }
    .modal-otp .expired p { color: #ababab }
    .modal-otp a { font-size: .8rem; }
    .modal-otp .success { padding-top: 2rem; padding-bottom: 2.5rem; }


.digit-group { text-align: center; margin-top: 1.5rem; }

.digit-group  input {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background-color: var(--grey-bg-color);
    border: none;
    line-height: 42px;
    text-align: center;
    font-size: 20px;
    font-weight: 200;
    color: #000;
    margin: 0 2px;
}

.digit-group  .splitter {
    padding: 0 5px;
    color: white;
    font-size: 24px;
}


/*--- Form Apply ---*/
.form-check-inline {
    display: -ms-inline-flexbox;
    border: 1px solid #DDDDDD;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    padding-left: .75rem;
    padding-right: 5rem;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 9px;
    margin-right: .75rem;
}

.institusi-form label, .institusi-form p {
    font-size:14px;
}

/* ############### Profile Page ############### */

/*--- Section Profile ---*/
.section-profile {
    height: 100%;
    padding: 5%;
    background-color: #fff;
}

.section-profile .header-profile {
    background-color:#2B4098;
    color:white; position: relative;
    border: none;
    padding: 22px 15px;
}

.section-profile .header-profile:before, .section-profile .header-profile:after { content: ""; position: absolute; }
.section-profile .header-profile:before { background: url(../img/bg-profile-02.png) no-repeat; height: 100%; top: 0; left: 0; width: 100%;
    background-size: auto 100%; background-position: left center; z-index: 1;
}
.section-profile .header-profile:after { background: url(../img/bg-profile-01.png) no-repeat; height: 100%; bottom: 0; right: 0; width: 100%;
    background-size: auto; background-position: right bottom; z-index: 0;
}
.section-profile .header-profile .bd-highlight { position: relative; z-index: 10 }

.section-profile span.name {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
}
.section-profile span.email {
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 20px;
}

.body-profile {
    padding-top: 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: .50rem;
}

.body-profile .fa {
    color:#059c8a;
}

@media screen and (max-width: 419px) {
    .section-profile .profile-pic { display: none; }
}

/* ############### Contact Us Page ############### */
/*--- Section Contact Us ---*/
.section-hubungi-pintek .card .card-body {
    min-height: 8rem;
}
.section-hubungi-pintek .card .highlight-text {
    color: #2C4098;
    font-size: 0.9rem;
    margin-bottom: 0;
    font-weight: bold;
    display: block;
}

/* ############### Apply Page ############### */
/*--- Step ---*/
.wizzard-apply {
    background-color: #2B4098;
    width: 100%;
    padding: .75rem 7%;
}

.wizzard-apply .dot {
    height: 25px;
    width: 25px;
    text-align: center;
    color: #2B4098;
    background-color: rgba(255, 255, 255, 0.489);
    border-radius: 50%;
    display: inline-block;
}
.wizzard-apply .dot.active {
    height: 25px;
    width: 25px;
    text-align: center;
    font-weight: 600;
    color: #2B4098;
    background-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
}

@media (min-width: 576px) {
    .modal-sm {
        max-width: 360px;
    }
}

.institution_search_box {
    position: relative;
}

.list-dropdown-instituion {
    position: relative;
    border-bottom: 1px solid #dddddd;
}

.dropdown-partner {
    position: absolute;
    color: var(--sub-font-color);
    font-size:11px;
    top: 25%;
    right: 0%;
}

.dropdown-partner img {
    width: 18%;
}

.dropdown-item:hover {
    background-color: transparent;
}

.list-dropdown-instituion:hover {
    background-color: #dddddd;
}

.dropddown-institution {
    padding: 2% 1% 2% 0;
    font-size: 14px;
    cursor: pointer;
}

.modal-reg-tnc {
    background-color: #fff;
}

.tab-modal-tnc .nav-item {
    color: #000 !important;
    background-color: #fff!important;
    font-size: 12px;
}

.tab-modal-tnc .nav-item.active {
    color: #2C4098 !important;
    background-color: #fff!important;
    border-bottom: 1px solid #2C4098;
}

.tnc-modals, .privacy-policy-modals, .tnc-signature-modals{
    font-size: 12px;
    padding-top: 1rem;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 54vh;
}

@media (max-width: 640px) {
    .tnc-modals, .privacy-policy-modals, .tnc-signature-modals{
        font-size: 12px;
        padding-top: 5%;
        overflow: scroll;
    }

    .btn-desktop {
        display: none;
    }

    .btn-desktop {
        display: none;
    }

}

.tnc-modals .section-title ,
.tnc-modals .small-title,
.privacy-policy-modals .section-title ,
.privacy-policy-modals .small-title
{
    font-size: 14px;
    text-align: left;
    margin-bottom: 5% !important;
}

.tnc-modals .responsive-table,
.privacy-policy-modals .responsive-table
{
    overflow-x: scroll !important;
}


.vertical .nav-item.active{
	color: #2C4096 !important;
    border-right:4px solid #2C4096 !important;
    border-bottom: none !important;
	background-color: #FFF !important;
    font-weight: bold !important;
}
.vertical .nav-item{
    font-weight: 700 !important;
    font-size: 16px;
    text-align: right;
	border-right: 4px solid #ffff;
    border-bottom: none !important;
	background-color: #FFF !important;
	border-radius: 0 !important;
	color: #999999 !important;
    padding: 0px 10px 0px 20px !important;
    height: 118px;
}

.vertical .nav-item span{
    height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 576px) {
    #step_tnc .modal-dialog {
        max-width: 1107px;
        margin: 4vh auto;
        max-height: 726px;
    }
    /* .tab-modal-tnc{
        display: none;
    } */
}

@media (max-width: 575px) {
    /* .tab-pinjaman.vertical{
        display: none;
    } */
}

#step_tnc .tab-pinjaman-content{
    border: 2px solid #E4EAEC;
    border-radius: 10px;
    height: 55vh;
}

/* The progress bar (scroll indicator) */
.progress-bar {
    background: #87E18A;
    width: 0%;
    height: 36px;
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: .25rem;
}
#step_tnc .tnc-title{
    margin: 25px 0px;
}

#step_tnc .btn-light{
    background-color: #B9B9B9;
    color: white;
    position: relative;
}


.vertical .nav-item.active{
	color: #2C4096 !important;
    border-right:4px solid #2C4096 !important;
    border-bottom: none !important;
	background-color: #FFF !important;
    font-weight: bold !important;
}
.vertical .nav-item{
    font-weight: 700 !important;
    font-size: 16px;
    text-align: right;
	border-right: 4px solid #ffff;
    border-bottom: none !important;
	background-color: #FFF !important;
	border-radius: 0 !important;
	color: #999999 !important;
    padding: 0px 10px 0px 20px !important;
    height: 118px;
}

.vertical .nav-item span{
    height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 576px) {
    #step_tnc .modal-dialog {
        max-width: 1107px;
        margin: 4vh auto;
        max-height: 726px;
    }
    /* .tab-modal-tnc{
        display: none;
    } */
}

@media (max-width: 575px) {
    /* .tab-pinjaman.vertical{
        display: none;
    } */
}

#step_tnc .tab-pinjaman-content{
    border: 2px solid #E4EAEC;
    border-radius: 10px;
    height: 55vh;
}

/* The progress bar (scroll indicator) */
.progress-bar {
    background: #87E18A;
    width: 0%;
    height: 36px;
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: .25rem;
}
#step_tnc .tnc-title{
    margin: 25px 0px;
}

#step_tnc .btn-light{
    background-color: #B9B9B9;
    color: white;
    position: relative;
}

.tnc-text{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}


.overlay-scroll-down{
    opacity: .5;
    color: #2F61A7;
    text-align: center;
    position: absolute;
    display: inline-block;
    top: 30%;
    left: 40%;
}

.overlay-scroll-down .text{
    font-size: 13px;
    font-weight: 700;
}

.overlay-scroll-down .fas{
    font-size: 130px;
}

@media screen and (max-width: 514px) {
    .overlay-scroll-down{
        top: 30%;
        left: 36%;
    }
}

/* Sticky Bar */
.stickybar { position: fixed; bottom: 0; width: 100%; background: #16a5f8; color: #fff; text-align: center; z-index: 99; padding: 5px 15px; font-size: 14px;}
  .stickybar .btn { border-radius: 20px; color: #fff; background: #284398; margin: 0 10px; padding: 4px 20px; font-size: 14px; }