@charset "utf-8";
/* CSS Document */
body {
	margin-top: 4.5em;	
}
/*@media (min-width: 1200px) {
	.container {
		width: 870px;
	}
}*/
.nav-item a {
	font-size: 0.9em;
	color: #000000 !important;
	text-align: center;
	font-weight: bold;
}
.nav-item a:hover {
	color: #003654 !important;
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;	
}
.bgNavbar {
	background-color: #F1F1F1;	
	color: #ffdf28 !important;
	box-shadow: 0px 7px 14px -9px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0px 7px 14px -9px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 7px 14px -9px rgba(0,0,0,0.75);
}
.bgKompetisi, .bgSponsor {
	background-color: #f0f0f0;	
}
.bgHadiah {
	background-color: #ffbb19;	
}
.bgFooter {
	background-color: #07304a;	
}
.btnDaftar, .btnDownload, .btnUpload {
	border-radius: 0.75em !important;
	font-weight: bold;
	padding: 0.3em 1em;	
}
.roundTimeline {
	padding: 0.8em 1em;
	background-color: #ffffff;
	-webkit-box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.26);
	-moz-box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.26);
	box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.26);
}
p .roundTimeline .active {
	border-bottom: 0.5em solid #ffbb19;
}
.btnBelajar {
	border-radius: 1em !important;	
	font-size: 0.95em;
	font-weight: bold;
}
.btnMulai {
	border-radius: 1.2em !important; padding-left: 2em; padding-right: 2em;	
}
.bgBanner {
	background: url("../images/Probonds_ORI022.jpg?v1") center center no-repeat;
	/*background-color: #2f76d1;*/
	background-color: #fff;
	background-size: contain;
	height: 90vh;
}
.bgBanner_sm {
	background: url("../images/Probonds_ORI022_sm.jpg?v1") center center no-repeat;
	/*background-color: #2f76d1;*/
	background-color: #fff;
	background-size: contain;
	height: 110vh;
}
.bgSatu {
	background-color: #fff;
	padding: 2.5em;
}
.bgSatu h3, .bgEmpat h3 {
	font-weight: bold !important;
}
.bgSatu p {
	font-size: 0.95em;
}
.bgUngu {
	background-color: #F458AC;
	padding: 2.5em;
	color: #fff;
}
.bgUngu h3 {
	font-weight: bold !important;
}
.bgAbuSR021 {
	background-color: #6980BD;
	padding: 2.5em;
	color: #fff;
}
.bgAbuSR021 h3 {
	font-weight: bold !important;
}
.bgDua {
	padding: 2.5em;
}
.bgTiga {
	background-color: #2F76D1;
	padding: 2.5em;
	color: white;
}
.bgAbu {
	background-color: #f8f8f8;
	padding: 2.5em;
}
.contHadiah {
	background: url("../images/hadiah_banner_des.jpg?v2") center center no-repeat;
	background-color: #2f76d1;
	background-size: contain;
	height: 500px;
}
.contHadiah_sm {
	background: url("../images/hadiah_banner_des_sm.jpg?v2") center center no-repeat;
	background-color: #2f76d1;
	background-size: contain;
	height: 500px;
}
#nav-nasabah {
	background-color: #388BD9; color: white;
}
#nav-nonnasabah {
	background-color: #388BD9; color: white;
}

#nav-registrasi, #nav-pemesanan {
	background-color: #d8eeff; color: #002553;
	background: rgb(216,238,255);
	background: -moz-linear-gradient(180deg, rgba(216,238,255,1) 0%, rgba(186,206,236,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(216,238,255,1) 0%, rgba(186,206,236,1) 100%);
	background: linear-gradient(180deg, rgba(216,238,255,1) 0%, rgba(186,206,236,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d8eeff",endColorstr="#baceec",GradientType=1);
}
#nav-registrasi-tab, #nav-pemesanan-tab {
	background-color: #fff; 
	color: #002553;
	/*border-top: 1px solid #d8eeff;
	border-left: 1px solid #d8eeff;
	border-right: 1px solid #d8eeff;
	border-bottom: none;*/
}
#nav-registrasi-tab.active, #nav-pemesanan-tab.active {
	background-color: #d8eeff; color: #002553;
	border: none;
}

#nav-nasabah-tab {
	background-color: #fbfbfb; color: #000000;
	border-top: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #ebebeb;
	border-bottom: none;
}
#nav-nasabah-tab.active {
	background-color: #388BD9; color: white;
	border: none;
}
#nav-nonnasabah-tab {
	background-color: #fbfbfb; color: #000000;
	border-top: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #ebebeb;
	border-bottom: none;
}
#nav-nonnasabah-tab.active {
	background-color: #388BD9; color: white;
	border: none;
}

#nav-carikode, #nav-tekateki, #nav-tebakbeda, #nav-subsreksa, #nav-smartstart, #nav-tebakjumlah {
	background-color: #388BD9; color: white;
}
#nav-carikode-tab, #nav-tekateki-tab, #nav-tebakbeda-tab, #nav-subsreksa-tab, #nav-smartstart-tab, #nav-tebakjumlah-tab {
	background-color: #fbfbfb; color: #000000;
	border-top: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #ebebeb;
	border-bottom: none;
}
#nav-carikode-tab.active, #nav-tekateki-tab.active, #nav-tebakbeda-tab.active, #nav-subsreksa-tab.active, #nav-smartstart-tab.active, #nav-tebakjumlah-tab.active {
	background-color: #388BD9; color: white;
	border: none;
}

.nav-tabs .nav-link {
	border: 1px solid #ffffff;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	border: none;
}
.tab-pane {
	padding: 2em 2em 2em 0.5em; text-align: justify;
}
ol ol, ol ul, ul ol, ul ul {
	margin-left: -1.2em;
}
.rowshare a {
	font-size: 1.8em !important;
}
.rowfollow a {
	font-size: 1.8em;
}
.bgSyarat {
	background-color: #003654;
}
.banner_title, .banner_subtitle {
	color: #1B3D6B;
}
.banner_title, .banner_title_white {
	font-weight: bold;
}
.banner_title_white, .banner_subtitle_white {
	color: #FFFFFF;
}
.txtWhite { color: #ffffff; }
.bgFooter .container a {
	text-decoration: none;
	color: #ffffff;
	font-size: 0.9em;	
}
.bgFooter .container a:hover {
	color: #003654;
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;
}
.bgFooter .container .active a {
	color: #003654;	
}
.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 0.5em;
    right: 0.5em;
    display:none;
	font-size: 3em;
	color: #003654;
}
#floating-wa {
	position: fixed;
    bottom: 0.15em;
    left: 0.3em;
    z-index: 1000;
	text-align: center;
	vertical-align: middle;
	font-size: 3.7em;
	display:none;
}
#floating-wa:hover {
	text-decoration: none;
	transform: scale(1.2);
    transition: transform 0.2s;
}
.collapse {
	padding-bottom: 1em;	
}
table.dataTable thead th {
  	vertical-align: middle;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  	background: none;
  	color: #007bff!important;
  	border-radius: 4px;
  	border: none;/*1px solid #007bff;*/
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  	background: none;
  	color: #007bff!important;
} 
.dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 0 !important;	
}
.dataTables_wrapper { font-size: 0.9em; }
.page-link:focus {
	box-shadow: none;	
}

.tooltip-inner {
    max-width: 200px;
    padding: 0.8em !important;
    color: #fff;
    text-align: center;
    background-color: #003654 !important;
    border-radius: .25rem;
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 5px 5px 0;
    border-top-color: #003654 !important;
}

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
    margin-top: -3px;
    content: "";
    border-width: 5px 5px 5px 0;
    border-right-color: #003654 !important;
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 0 5px 5px;
    border-bottom-color: #003654 !important;
}

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    right: 0;
    margin-top: -3px;
    content: "";
    border-width: 5px 0 5px 5px;
    border-left-color: #003654 !important;
}

.navbar-toggler {
	background-color: #96c9e7 !important;
}

.callout {
	background-color: #ffffff;
	padding: 2em 1.5em 1.8em 1.5em;
	-webkit-box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.26);
	-moz-box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.26);
	box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.26);
}

.callout ul, .callout ol {
	margin-left: -1em;
}

.callout::before {
	content: "";
	width: 0px;
	height: 0px;
	border: 0.8em solid transparent;
	position: absolute;
}

.callout.top::before {
	left: 45%;
	bottom: -20px;
	border-top: 10px solid #444;
}

.callout.bottom::before {
	left: 45%;
	top: -20px;
	border-bottom: 10px solid #444;
}

.callout.bottom1::before {
	left: 12%;
	top: -2em;
	border-bottom: 1.5em solid #ffffff;
}
.callout.bottom11::before {
	left: 45%;
	top: -2em;
	border-bottom: 1.5em solid #ffffff;
}

.callout.bottom2::before {
	left: 37%;
	top: -2em;
	border-bottom: 1.5em solid #ffffff;
}
.callout.bottom21::before {
	left: 45%;
	top: -2em;
	border-bottom: 1.5em solid #ffffff;
}

.callout.bottom3::before {
	left: 62%;
	top: -2em;
	border-bottom: 1.5em solid #ffffff;
}
.callout.bottom31::before {
	left: 45%;
	top: -2em;
	border-bottom: 1.5em solid #ffffff;
}

.callout.bottom4::before {
	left: 87%;
	top: -2em;
	border-bottom: 1.5em solid #ffffff;
}
.callout.bottom41::before {
	left: 45%;
	top: -2em;
	border-bottom: 1.5em solid #ffffff;
}

.callout.left::before {
	right: -20px;
	top: 40%;
	border-left: 10px solid #444;
}

.callout.right::before {
	left: -20px;
	top: 40%;
	border-right: 10px solid #444;
}

.callout.top-left::before {
	left: 7px;
	bottom: -20px;
	border-top: 10px solid #444;
}

.callout.top-right::before {
	right: 7px;
	bottom: -20px;
	border-top: 10px solid #444;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
	background-color: #5a6268;
}

#v-pills-tabContent {
	color: #5a6268;
}

.bgPendaftaran a {
	font-weight: bold;
}
.bgPendaftaran a:active, .bgPendaftaran a:visited, .bgPendaftaran a:link {
	color: #5a6268;
}

a {
	color: #0f3c69;
}

a.linkinblue {
	color: #fff21c; font-weight: bold;
}
a.linkinblue:hover {
	color: #fff77d;
}

.bgBannerGradient {
	background: rgb(87,149,186);
	background: -moz-linear-gradient(120deg, rgba(87,149,186,1) 0%, rgba(227,241,252,1) 100%);
	background: -webkit-linear-gradient(120deg, rgba(87,149,186,1) 0%, rgba(227,241,252,1) 100%);
	background: linear-gradient(120deg, rgba(87,149,186,1) 0%, rgba(227,241,252,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5795ba",endColorstr="#e3f1fc",GradientType=1);
}

.contKarakteristik table {
	font-size: 0.85em !important;
	background-color: #fff;
}
.contKarakteristik table thead {
	background-color: #384E89; color: #fff; font-size: 1.3em; text-align: center;
}
.contKarakteristik table tfoot {
	background-color: #384E89; color: #fff; font-size: 1.3em; text-align: center;
}
.contKarakteristik td, .contKarakteristik th {
	border: 4px solid #fff; color: #fff; text-align: center;
}
.contKarakteristik .tr0 {
	background-color: #6980BD;
}
.contKarakteristik .tr1 {
	background-color: #384E89;
}


body { font-family: 'Poppins' !important; }
#nav-registrasi ol li, #nav-registrasi ul li, #nav-pemesanan ol li, #nav-pemesanan ul li {
	line-height: 2em;
}
.tabbable .nav-tabs {
	overflow-x: auto;
	overflow-y:hidden;
	flex-wrap: nowrap;
}
.tabbable .nav-tabs .nav-link {
	white-space: nowrap;
}

.stepper .line {
	width: 2px;
	background-color: #1f5caf !important;
}
.stepper .lead {
	font-size: 1.1rem;
}
.stepper .bg-primary {
	background-color: #1f5caf !important;
}

.bgAbu .card, .contKeuntungan .card {
	border-radius: 15px;
}
.bgAbu1 {
	background-color: #ccc;
}

.bgBannerGradient {
	padding-top: 3em;
}
.bgBannerGradient, .contBannerInstall .card {
	border-radius: 17px;
	border: none;
	overflow: hidden;
	color: #002553;
}
.bgBannerGradient a {
	text-decoration: none;
}
#div_txtUpdate, #div_txtInstall {font-size: 0.9em;}

.contFaq a { text-decoration: none; }
.contFaq #faq .card .card-header {
	border: 0;
	-webkit-box-shadow: 0 0 20px 0 rgba(213, 213, 213, 0.5);
	box-shadow: 0 0 20px 0 rgba(213, 213, 213, 0.5);
	border-radius: 15px !important;
	padding: 0;
}
.contFaq #faq .card .card-header .btn-header-link {
	display: block;
	text-align: left;
	background: #fff;
	color: #002553;
	padding: 20px;
}
.contFaq #faq .card .card-header .btn-header-link:after {
	content: "\f106";
	/*font-family: 'Font Awesome 5 Free';*/
	font-family: "FontAwesome";
	font-weight: 900;
	float: right;
}
.contFaq #faq .card .card-header .btn-header-link.collapsed {
	background: #fff;
	color: #002553;
}
.contFaq #faq .card .card-header .btn-header-link.collapsed:after {
	content: "\f107";
	align-content: flex-end;
}
.contFaq #faq .card .card-header .btn-header-link {
	border-radius: 15px;
}
.contFaq #faq .card .collapsing {
	/*background: #FFE472;*/
	line-height: 30px;
	color: gray;
	font-size: 0.95em;
}
.contFaq #faq .card .collapse {
	border: 0;
	font-size: 0.95em;
}
.contFaq #faq .card .collapse.show {
	/*background: #FFE472;*/
	line-height: 30px;
	color: gray;
	font-size: 0.95em;
}	
.contFaq .card {
	border: none;
}

#skModal .modal-header {
	background-color: #002553;
	color: #fff;
}
#skModal .modal-body ol {
	margin-left: -1em;
	line-height: 1.7em;
}
#skModalLabel {
	font-weight: bold;
}	
#skModal button.close {
	color: #fff;
}

.contKeuntungan .card {
	font-size: 0.9em !important; background-color: #6980BD !important; border: none; color: #fff;
}
.contKupon .card {
	background-color: #EEEED4 !important; border: none; border-radius: 15px;
}

.contCaraBayar a { text-decoration: none; }
.contCaraBayar #carabayar .card .card-header {
	border: 0;
	-webkit-box-shadow: 0 0 20px 0 rgba(213, 213, 213, 0.5);
	box-shadow: 0 0 20px 0 rgba(213, 213, 213, 0.5);
	border-radius: 15px !important;
	padding: 0;
}
.contCaraBayar #carabayar .card .card-header .btn-header-link {
	display: block;
	text-align: left;
	background: #fff;
	color: #002553;
	padding: 20px;
}
.contCaraBayar #carabayar .card .card-header .btn-header-link:after {
	content: "\f106";
	/*font-family: 'Font Awesome 5 Free';*/
	font-family: "FontAwesome";
	font-weight: 900;
	float: right;
}
.contCaraBayar #carabayar .card .card-header .btn-header-link.collapsed {
	background: #fff;
	color: #002553;
}
.contCaraBayar #carabayar .card .card-header .btn-header-link.collapsed:after {
	content: "\f107";
	align-content: flex-end;
}
.contCaraBayar #carabayar .card .card-header .btn-header-link {
	border-radius: 15px;
}
.contCaraBayar #carabayar .card .collapsing {
	/*background: #FFE472;*/
	line-height: 30px;
	color: gray;
	font-size: 0.95em;
}
.contCaraBayar #carabayar .card .collapse {
	border: 0;
	font-size: 0.95em;
}
.contCaraBayar #carabayar .card .collapse.show {
	/*background: #FFE472;*/
	line-height: 30px;
	color: gray;
	font-size: 0.95em;
}	
.contCaraBayar .card {
	border: none;
}