.bwizard-steps {
    display: inline-block;
	margin: 0; 
	padding: 0;
	background: #fff; 
}

.bwizard-steps .active {
	color: #fff;
	background: #007ACC; 
}

.bwizard-steps .active:after {
	border-left-color: #007ACC; 
}
	
.bwizard-steps .active a {
	color: #fff;
	cursor: default;
}
	
.bwizard-steps .label {
	position: relative;
	top: -1px;
	margin: 0 5px 0 0; 
	padding: 1px 5px 2px; 
}
	
.bwizard-steps .active .label {
	background-color: #333;
}
	
.bwizard-steps li {
	display: inline-block; 
	position: relative;
	margin-right: 5px;
	padding: 12px 17px 10px 30px;
	*display: inline;
	*padding-left: 17px;
	background: #efefef;
	line-height: 18px;
	list-style: none;
	zoom: 1; 
}
	
.bwizard-steps li:first-child {
	padding-left: 12px;
	-moz-border-radius: 4px 0 0 4px;
	-webkit-border-radius: 4px 0 0 4px;
	border-radius: 4px 0 0 4px; 
}
	
.bwizard-steps li:first-child:before {
	border: none;
}
	
.bwizard-steps li:last-child {
	margin-right: 0;
	-moz-border-radius: 0 4px 4px 0;
	-webkit-border-radius: 0 4px 4px 0;
	border-radius: 0 4px 4px 0; 
}
	
.bwizard-steps li:last-child:after {
	border: none;
}
	
.bwizard-steps li:before {
	position: absolute;
	left: 0; top: 0;
	height: 0; width: 0;
	border-bottom: 20px inset transparent;
	border-left: 20px solid #fff;
	border-top: 20px inset transparent;
	content: "";
}
	
.bwizard-steps li:after {
	position: absolute;
	right: -20px; top: 0;
	height: 0; width: 0;
	border-bottom: 20px inset transparent;
	border-left: 20px solid #efefef;
	border-top: 20px inset transparent;
	content: "";
	z-index: 2; 
}
	
.bwizard-steps a {
	color: #333; 
}
	
.bwizard-steps a:hover {
	text-decoration: none;
}

.bwizard-steps.clickable li:not(.active) {
	cursor: pointer;
}

.bwizard-steps.clickable li:hover:not(.active) {
	background: #ccc;
}

.bwizard-steps.clickable li:hover:not(.active):after {
	border-left-color: #ccc; 
}

.bwizard-steps.clickable li:hover:not(.active) a {
	color: #08c; 
}

/* Tombol buka/tutup sidebar di mobile — ditaruh di header, di luar
   sidebar, karena di layar <=991px sidebar berada off-canvas (left:-280px)
   sampai class is-open di-toggle lewat tombol ini (lihat fragments/header.html). */
.mobile-menu-toggle {
	display: none;
	float: left;
	background: none;
	border: none;
	font-size: 17px;
	height: 65px;
	line-height: 65px;
	padding: 0 15px;
	margin: 0;
	color: #72777a;
	cursor: pointer;
	vertical-align: top;
}

@media screen and (max-width: 991px) {
	.mobile-menu-toggle {
		display: inline-block;
	}

	/* Default tema: .sidebar { left: -280px } alias off-canvas di <=991px.
	   Class is-open dipasang oleh handler di fragments/header.html.
	   Specificity .sidebar.is-open (0,2,0) menang atas .sidebar (0,1,0)
	   dari style bawaan tema yang di-inject bundle.js. */
	.sidebar.is-open {
		left: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Simulator Remit (templates/simulator/remit.html), 17 Sep 2026: tombol aksi
   berjajar di desktop, tumpuk full-width di HP supaya tidak terpotong. */
.simulator-actions .btn {
	margin: 0 6px 6px 0;
}

/* Transfer (uang sungguhan) dijauhkan dari tombol cek yang hanya membaca. */
.simulator-actions .simulator-transfer {
	margin-left: 24px;
}

@media (max-width: 767px) {
	.simulator-actions .btn {
		display: block;
		width: 100%;
		margin: 0 0 8px 0;
	}
	.simulator-actions .simulator-transfer {
		margin: 16px 0 8px 0;
	}
}

/* Tombol hapus di halaman detail diberi jarak dari Edit/Back supaya tidak salah tekan. */
.textcenter .btn-danger[role="button"] {
	margin-left: 24px;
}

@media (max-width: 480px) {
	/* badges only on small screens */
	.bwizard-steps li:after,
	.bwizard-steps li:before {
		border: none; 
	}
	
	.bwizard-steps li,
	.bwizard-steps li.active,
	.bwizard-steps li:first-child,
	.bwizard-steps li:last-child {
		margin-right: 0;
		padding: 0;
		background-color: transparent; 
	}
}

.containerAdvisory{
    border-top-width: 1px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #EBEBEB;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 0px;
    margin-left: 20px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
}

.textSmall{
    font-size: 11px;
}



/* ---------- Chip user & tombol logout di header (2 Okt 2026) ----------
   Gaya disamakan dengan back office Ulosuis, markup identik dengan va-web. Bedanya: trf-web
   selalu gelap (darkmode-vscode.css), jadi warnanya memakai variabel palet VS Code Dark+ dari
   file itu (fallback hex kalau variabelnya tidak ada). Selector sengaja panjang supaya menang atas
   gaya tema yang di-inject bundle.js (line-height 65px, padding 0 15px) dan aturan "a { color }"
   di darkmode-vscode.css. */
.header .header-container .nav-right > li.user-who,
.header .header-container .nav-right > li.user-logout {
	display: flex;
	align-items: center;
	height: 65px;
}
/* Jarak tombol logout ke tepi kanan layar: 24px - tidak mentok, tidak menggantung. */
.header .header-container .nav-right > li.user-logout {
	padding-right: 24px;
}

/* Header tanpa garis & selebar layar (2 Okt 2026, permintaan user).
   Tema mengatur header position:fixed dari left:0 dengan lebar 100% - 70px (atau 100% - 280px),
   sehingga ujung kanannya berhenti 70px sebelum tepi layar dan chip user + logout tampak
   menggantung di tengah. Sidebar (z-index lebih tinggi) tetap menutupi bagian kiri header, jadi
   melebarkan header ke 100% tidak menggeser apa pun. .header.navbar dipakai supaya menang atas
   aturan .header dari bundle.js; border di-nol-kan dengan !important karena darkmode-vscode.css
   memaksa border-color pada .header. */
.header.navbar {
	width: 100%;
	border: 0 !important;
}
/* Kotak logo di pojok kiri atas sidebar ikut tanpa garis. */
.sidebar .sidebar-logo {
	border-bottom: 0 !important;
	border-right: 0 !important;
}
.header .header-container .nav-right > li.user-who > .user-chip,
.header .header-container .nav-right > li.user-logout > .user-icon-btn {
	line-height: 1.15;
	min-height: 0;
}
.header .header-container .nav-right > li > .user-chip {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 4px 12px 4px 4px;
	margin-right: 8px;
	border: 1px solid var(--vsc-border-light, #454545);
	border-radius: 999px;
	background: var(--vsc-bg-lighter, #2d2d2d);
	color: var(--vsc-fg, #d4d4d4);
	text-decoration: none;
	transition: border-color .15s;
}
.header .header-container .nav-right > li > a.user-chip:hover,
.header .header-container .nav-right > li.open > a.user-chip {
	border-color: var(--vsc-fg-muted, #969696);
	color: var(--vsc-fg, #d4d4d4);
}
.user-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--vsc-accent, #007acc);
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
}
.user-who-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.user-who-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--vsc-fg, #d4d4d4);
}
.user-who-role {
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vsc-fg-muted, #969696);
}
.user-chip-caret {
	font-size: 10px;
	color: var(--vsc-fg-muted, #969696);
}
.header .header-container .nav-right > li > .user-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--vsc-border-light, #454545);
	border-radius: 50%;
	background: var(--vsc-bg-lighter, #2d2d2d);
	color: var(--vsc-fg-muted, #969696);
	transition: color .15s, border-color .15s;
}
.header .header-container .nav-right > li > .user-icon-btn:hover {
	color: #f48771;
	border-color: var(--vsc-fg-muted, #969696);
}
.user-icon-btn svg {
	width: 17px;
	height: 17px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Di HP cukup avatar (seperti Ulosuis): teks nama/role & panah disembunyikan. */
@media screen and (max-width: 767px) {
	.user-who-text,
	.user-chip-caret {
		display: none;
	}
	.header .header-container .nav-right > li > .user-chip {
		padding: 3px;
	}
}

/* T219 - data panjang (email, URL di pesan error bank, referensi tanpa spasi) tidak boleh
   melebarkan halaman. Uji: harness /break-ui 11 Okt 2026, data terburuk vs demo. */
.viewtable td {
	overflow-wrap: anywhere;
}
/* Kolom teks bebas di tabel daftar (referensi, remark, email, deskripsi): boleh patah di mana saja,
   tapi tidak lebih sempit dari 140px. Nominal, nomor rekening/VA, dan tanggal tidak memakai kelas ini. */
table.dataTable td.cell-wrap {
	overflow-wrap: anywhere;
	min-width: 140px;
}
/* Nama dan role yang panjang tidak melebarkan chip; teks lengkap ada di tooltip (title). */
.user-who-text {
	min-width: 0;
	max-width: 260px;
}
.user-who-name,
.user-who-role {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Nama menu yang panjang dipotong dengan "..." (teks lengkap di tooltip), bukan terpotong di tengah kata. */
.sidebar-menu li a {
	overflow: hidden;
	text-overflow: ellipsis;
}
.sidebar-menu li a .title {
	max-width: calc(100% - 60px);
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}
/* Saldo minus. */
.amount-negative {
	color: #c62828;
}
/* Kartu dashboard: di layar xl (4 kartu sejajar) nominal 13 digit turun ke bawah ikon dan tinggi
   kartu jadi tidak rata. Di layar lebih kecil kartunya dua per baris dan cukup lebar. */
@media screen and (min-width: 1200px) {
	.topDashboardContent {
		flex-wrap: nowrap;
	}
	.topDashboardContentData {
		min-width: 0;
		white-space: nowrap;
		font-size: 16px;
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
}

/* T220 - /mobile-native: perilaku di HP. */
/* iOS men-zoom halaman kalau font input di bawah 16px dan tidak zoom out lagi. Desktop tetap 14px. */
@media (pointer: coarse) {
	input,
	select,
	textarea,
	.form-control {
		font-size: 16px;
	}
}
/* Tema memberi menu tinggi 100vh - 65px; di HP 100vh = tinggi saat bar URL tersembunyi, jadi menu paling
   bawah tertutup bar URL. dvh mengikuti area yang terlihat. Selektor dua kelas supaya menang atas CSS
   tema yang disuntik bundle.js sesudah file ini. */
.sidebar-inner .sidebar-menu {
	height: calc(100vh - 65px);
	height: calc(100dvh - 65px);
	overscroll-behavior: contain;
}
.sidebar.is-open {
	overscroll-behavior: contain;
}
/* Jeda tap +-300ms di sebagian elemen iOS. */
a,
button,
.btn,
[role="button"] {
	touch-action: manipulation;
}
/* Kilatan tap bawaan dimatikan hanya di elemen yang sudah punya efek tekan/hover sendiri. */
.btn,
.sidebar-menu a,
.user-chip,
.user-icon-btn {
	-webkit-tap-highlight-color: transparent;
}