@font-face {
    font-family: "OpenSans";
    src: url("../fonts/OpenSans-Light.ttf") format("truetype"), url("../fonts/OpenSans-Italic.ttf") format("truetype")
}

body{
    font-family: "OpenSans";
    font-size: .88rem;
}

hr{
    border-top: 1px dashed;
}

/* Hide sidebar footer globally */
.sidenav-footer {
    display: none !important;
}
/* PWA: Show sidebar footer for logout button */
body.pwa-standalone .sidenav-footer {
    display: block !important;
}

.form-control.border::placeholder {
    color: #fff;
    opacity: 1;
}
.form-control.border::-webkit-input-placeholder {
    color: #fff;
}
.form-control.border::-moz-placeholder {
    color: #fff;
}
.form-control.border:-ms-input-placeholder {
    color: #fff;
}

/* Page banner sticky blur effect */
.page-banner.position-sticky {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.page-banner.position-sticky {
    opacity: .9;
}
/* .page-banner.position-sticky.welcome {
    background: rgba(236, 240, 241, 0.7) !important;
} */
.page-banner.position-sticky.berry {
    opacity: .9;
}
.welcome-banner.position-sticky {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: linear-gradient(135deg, rgba(236,240,241,0.75) 0%, rgba(233,232,232,0.7) 50%, rgba(255,255,255,0.65) 100%) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}
.card.shadow-xs.border.r-trx
{
    min-height: 480px;
}
.paging-r-trx{
    position: absolute !important;
    bottom: 0;
}

/* h3.mb-1.welcome{
    color: #ffff;
} */

p.mb-1.text-uppercase.welcome,
p.mb-0.welcome {
    color: #2c3e50;
}

.navbar-vertical .navbar-nav>.nav-item .nav-link.active{
        background-color: #1e293b73;
}

nav img.bg-right,.lte-bg-right,
.statistics-card-1 .card-body .img-bg {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.card-header.card-header-search{
    padding: 0;
}

.card-body.card-table {
    max-height: 500px !important;
    overflow-x: hidden;
    overflow-y: scroll !important;
}

.card.visa-card {
    background: #305f73;
    background: linear-gradient(90deg, rgb(5, 5, 5) 0%, rgba(40, 59, 66, 1) 50%, rgba(38, 42, 43, 1) 100%);
    min-height: 12rem;
    border-radius: .5rem;
    box-shadow: 0 0.125rem 5px -0.0625rem rgba(12, 26, 36, 0.1), 0 0.0625rem 0.0625rem 0 rgba(12, 26, 36, 0.04) !important;
}

.visa-card.visa-m {
    min-height: 8rem;
}

.visa-card.visa-primary{
        background: linear-gradient(320deg, rgba(201, 253, 245, .7) 0, rgba(255, 255, 255, 0.7) 70%)!important;
}
/* .btn.btn-success, */
.text-bg-success,
.visa-card.visa-success{
        background: linear-gradient(320deg, rgba(201, 253, 245, .7) 0, rgba(127, 190, 185, 0.651) 70%)!important;
}

.visa-card.visa-warning{
        background: linear-gradient(320deg, rgba(253, 201, 225, 0.7) 0, rgba(216, 197, 157, 0.651) 70%)!important;
}

.visa-card.visa-warning{
        background: linear-gradient(320deg, rgba(253, 201, 225, 0.7) 0, rgba(216, 197, 157, 0.651) 70%)!important;
}


.card.visa-card .img-bg{
    z-index: 1 !important;
}

.card.visa-card .bg-gradient-gold{
    background-image: linear-gradient(to right, #8f7144 0, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #8f7144 100%);
}

.card.visa-card .bg-gradient-silver{
    background-image: linear-gradient(
	to right,
	#9f9b9b 0,
       	#dbdbdb 22%, 
	#f7f7f7 45%,
	#dfded2 50%,
	#f7f7f7 55%,
	#dfded2 78%,
	#9f9b9b 100%
	);
}

.card.visa-card .text-gold{
   /* transform: translate(-50%,-50%);  */
   /* font-family: 'Times New Roman',serif; */
    /* font-size: 150px; */
   letter-spacing: 5px;
   font-weight: bold;
   background-image: linear-gradient(to right, #8f7144 0, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #8f7144 100%);
   /* background-image: linear-gradient(
	to right,
	#462523 0,
       	#cb9b51 22%, 
	#f6e27a 45%,
	#f6f2c0 50%,
	#f6e27a 55%,
	#cb9b51 78%,
	#462523 100%
	); */
   color:transparent;
   -webkit-background-clip:text;

}

th.text-secondary.font-weight-semibold {
    font-size: 0.8rem;
    font-weight: bold !important;
}

th.text-secondary.font-weight-semibold.opacity-7 {
    font-size: 0.8rem;
    color: #ffff !important;
    font-weight: bold !important;
}

.table th, .table td{
    border-top: 0;
    border-bottom-style:dashed;
}

/* .text-shadow{
    text-shadow: 2px 2px 1px rgba(0,0,0,0.29);
} */
.badge-info {
    color: #3498db;
    background-color: #3498db;
}

.card.visa-card .badge.bg-info {
    background: rgb(69 132 197 / 68%) !important;
}

.bg-success {
    background-color: #11998e !important;
}

.btn-inner--text,
.btn{
    transition: all .5s ease-in-out;
}

.btn-lemon {
    --bs-btn-color: #000;
    --bs-btn-bg: rgba(255, 234, 167, 0.7);
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: white;
    --bs-btn-hover-border-color: white;
    --bs-btn-focus-shadow-rgb: 217, 217, 217;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: white;
    --bs-btn-active-border-color: white;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #fff;
}

button#changePassword,
button#saveprofile {
    border: solid 1px #ecf0f1;
    height: 48px;
}
i.fas.fa-lock.me-2,
i.fas.fa-user-edit.me-2 {
    position: absolute;
    right: 0;
    top: -10px;
    width: 58px;
    height: 58px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #ffff;
}

.gradient-grey {
        background: linear-gradient(135deg, #ecf0f1 0%, #e9e8e8 50%, #ffff 100%);
}

.gradient-green {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.gradient-blue
 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);    
}

.gradient-yarrow
 {
    background: linear-gradient(135deg, #fdcb6e 0%, #ffeaa7 100%);    
}

.gradient-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-orange {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* .card.visa-card .btn:hover{
    background-image: linear-gradient(to right, #8f7144 0, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #8f7144 100%);
    color: #ffff;
}

 */

 .card.visa-card .btn:hover .btn-inner--text{
    color: #0e0e0e;
}

.text-primary{
    color: rgb(255,121,27) !important;
}

.text-silver,
.card.visa-card .text-silver{
   letter-spacing: .23rem;
   font-weight: bold;
   background-image: linear-gradient(
	to right,
	#9f9b9b 0,
       	#dbdbdb 22%, 
	#f7f7f7 45%,
	#dfded2 50%,
	#f7f7f7 55%,
	#dfded2 78%,
	#9f9b9b 100%
	);
   color:transparent !important;
   -webkit-background-clip:text;

}

.fa-solid::before {
    --fa-style: 900;
}
.fa-microchip::before {
    --fa: "\f2db";
}

.card.visa-card .text-success{
   letter-spacing: 5px;
   font-weight: bold;
   background-image: linear-gradient(
	to right,
	#55efc4  0,
       	#81ecec  22%, 
	#55efc4 45%,
	#adfafa 50%,
	#55efc4 55%,
	#81ecec 78%,
	#55efc4  100%
	);
   color:transparent !important;
   -webkit-background-clip:text;

}

.bg-clip-noted{
        background: linear-gradient(320deg, rgba(251, 197, 49,.7) 0, rgba(245, 219, 152, 0.7) 70%)!important;
        box-shadow: 0 0.125rem 5px -0.0625rem rgba(12, 26, 36, 0.1), 0 0.0625rem 0.0625rem 0 rgba(12, 26, 36, 0.04) !important;
        max-height: 45rem;
        overflow: hidden;
}

.bg-clip-noted.noted-white{
    background: linear-gradient(320deg, rgb(219 218 214 / 70%) 0, rgb(255 255 255 / 70%) 70%) !important;
}

.bg-clip-noted p {
    margin-bottom: .2rem;
}

.card-snapbridge .form-switch .form-check-input:after {
    top: -.5px;
}

.modal-title{
    font-family: 'OpenSans' !important;
    font-size: 1rem;
    font-weight: 400;
}
.modal-dialog{
    box-shadow: none;    
}

.modal-content{
    box-shadow: 0 0.125rem 5px -0.0625rem rgba(12, 26, 36, 0.1), 0 0.0625rem 0.0625rem 0 rgba(12, 26, 36, 0.04) !important;
}

.modal-header, .modal-footer{
    background: transparent;
    border: none;
}

img.img-fluid.img-bg.clip-noted {
    position: absolute;
    opacity: .3;
    max-width: 92%;
    height: 100%;
    /* max-height: 29.5rem; */
}

.card-invoice img.img-fluid.img-bg.clip-noted {
    max-width: 100%;
    z-index: -1;
}

img.visa-logo {
    width: 4rem;
    height: 1rem;
}

.widget-content .widget-content-right .widget-heading {
    opacity: .8;
    font-weight: bold;
}

.card.card-invoice {
    min-height: 25rem;
    /*max-height: 2.5rem;*/
    overflow: hidden;
}

.card-invoice button.btn {
    opacity: .5;
}

.tooltip {
  --bs-tooltip-bg: rgba(43, 43, 43, 0.5);
}

.tooltip.custom-tooltip {
  --bs-tooltip-bg: rgba(43, 43, 43, 0.5);
}

.tooltip.custom-tooltip .tooltip-inner {
  font-family: 'OpenSans' !important;
  font-size: 10px;
  color: #fff;
}
.highlight.position-relative{
    border: .5px solid #dde0e5 !important;
    box-shadow: 0 0.125rem 5px -0.0625rem rgba(12, 26, 36, 0.1), 0 0.0625rem 0.0625rem 0 rgba(12, 26, 36, 0.04) !important;
} 

pre.highlight.pre-scroll
 {
    max-height: 55rem;
    /* background: #272822; */
    /* 
    color: #f8f8f2; */
}

a.btn-clipboard {
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 5px;
    font-weight: 600;
}

.btn-warning,
.btn-white{ 
    height: 45px; 
}

.btn-outline-dark{
    --bs-btn-border-color: #f1f1f1;
}
a.btn.btn-sm.btn-outline-dark.btn-icon.d-flex.align-items-center.mb-0 {
    border-color: #f1f1f1;
    height: 45px;
}

.bd-clipboard
 {
    position: absolute;
    right: 30px;
    display: block;
}

.highlight img.img-fluid.img-bg.clip-noted {
    max-width: 94%;
    opacity: .1;
}

.bg-left{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

img.bg-left.mirror{
    transform: scaleX(-1);
}


.progress-bar {
    height: 3px;
    border-radius: 0.375rem;
}

.card.border.statistics-card-1.card-trx {
    overflow: hidden;
}

main.main-dark {
    background: linear-gradient(90deg, rgb(5, 5, 5) 0%, rgb(37, 38, 39) 50%, rgb(0 0 0 / 94%) 100%);
}

/* main.main-dark {
        background: linear-gradient(90deg, rgb(5, 5, 5) 0%, rgb(37 38 39 / 75%) 50%, rgb(0 0 0 / 94%) 100%);
} */

.video-background{
    position: fixed;
    top: -10%;
    z-index: -1;
}

.h-90{
    height: 90%;
}

.h-80{
    height: 80%;
}

.h-70{
    height: 70%;
}

.h-60{
    height: 60%;
}

/* .login-banner-space
 {
    background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255 255 255) 50%, rgb(255 255 255 / 94%) 100%);
    
    box-shadow: -6px 0px 9px -2px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: -6px 0px 9px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -6px 0px 9px -2px rgba(0,0,0,0.75);
} */

.z-index-sticky{
    overflow: hidden;
}

a.btn.btn-outline-white.btn-blur.btn-icon.d-flex.align-items-center.mb-0 {
    width: 11rem;
}

.btn.btn-white:hover {
    border-color: #dde0e5;
}

.btn-white{
    z-index: 1;
}

.btn-close{
    transition: all .5s ease-in-out;
    opacity: .2;
}

.text-bg-success {
    color: #ffff !important;
    background-color: #00cec9 !important;
}

.bg-primary {
    background-color: #9b59b6 !important;
}

#trx-body{
    font-family: 'OpenSans' !important;
}

.avatar.lottie-washer{
    height: 54px;
    width: 50px;
}

.footer .footer-top{
    padding-top: 30px;
}

.footer .copyright{
    padding: 15px 0;
}

.max-100{
    width: 100%;
    height: 100%;
}

.form-control{
    transition: all .5s ease-in-out;
    border: none;    
}


.form-control.border{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-bottom-width: 1px !important;
    border-bottom-style: dashed !important;
    border-bottom-color: #e3e4e4 !important;
    border-radius: 0 !important;
}

.form-control.border:focus, .form-control.border:hover:focus{
    background: transparent !important;
    box-shadow: none !important;
    border-color: #bdc3c7 !important;
}


.form-control.search{
    border:none !important;
}

/* .form-control:focus,
.form-control:hover:focus{
    border-color:#ecf0f1;
    box-shadow: 0 0.125rem 5px -0.0625rem rgba(12, 26, 36, 0.1), 0 0.0625rem 0.0625rem 0 rgba(12, 26, 36, 0.04) !important;
} */

.pagination-sm .page-item .page-link, .pagination-sm .page-item span{
    height: 40px;
    width: 40px;
}

.input-group .form-control:focus{
    border-left: 1px solid #dde0e5 !important;
    border-right: 1px solid #dde0e5 !important;
    border-color: #dde0e5 !important;
}

.page-banner .input-group .form-control:focus{
    border-left: 0 !important;
    border-right: 0 !important;
    /* border-color: #dde0e5 !important; */
}

input#displayName,input#outletName,input#mobilePhone,
input#userSearch,input#devSearch,#devStatusFilter,
input#currentPassword,input#newPassword,input#confirmPassword,
#userRoleFilter,input#outletSearch,input#stSearch,input#spSearch,
input#trxSearch,input#trxStartDate,input#ptSearch,input#pfSearch,
input.form-control.form-control-sm.input,input#wdSearch,
input#trxEndDate {
    height: 48px;
}

button#clearEndDate,
button#clearStartDate {
    border: 1px solid transparent;
    background: #e9ecef;
}

.btn:hover:not(.btn-icon-only){
    box-shadow: none;
}
.navbar-vertical.navbar-expand-xs .navbar-collapse{
    height: calc(100vh - 120px);
}

sidebar collapse (custom)
#sidenav-main.collapsed {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
#sidenav-main {
  transition: transform 0.3s ease;
}

#sidenav-collapse-main {
    margin-top: 2.4rem;
}

.sidenav .navbar-brand {
    padding: 2.5rem 2.5rem .5rem 2.5rem;
}

.bg-slate-900 {
    background-color: #06080c !important;
}

.navbar-vertical.bg-slate-900 .sidenav-footer .card{
    background: #0e121a;
    opacity: .7;
}

.flatpickr-calendar .flatpickr-day.today, .flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.startRange, .flatpickr-calendar .flatpickr-day.endRange{
    background: #11998e !important;
}

span.flatpickr-day.today:not(.selected):hover, 
span.flatpickr-day.prevMonthDay.today:not(.selected):hover, 
span.flatpickr-day.nextMonthDay.today:not(.selected):hover{
    border: 1px solid #16afa2;
}

.btn-outline-casava{background: #ffff;}
.btn-outline-casava:hover{
    background: linear-gradient(135deg, #8e44ad 0%, #e84393 50%, #fd79a8 100%);
}
.btn-circle.lemon{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.75rem;}
.pagination .page-link { border-radius: 8px; margin: 0 2px; font-size: 0.8rem; font-weight: 500; }
.pagination .page-item.active .page-link { background: #11998e; border-color: #16afa2; }
.pagination.maggo .page-item.active .page-link{background: #ffdd59;border-color:#f0d053;}
.pagination.apple .page-item.active .page-link{background: #d63031;border-color:#c92c2c;}
.pagination.lemon .page-item.active .page-link{background: #ffeaa7;border-color:#ffeaa7;color: #06080c;}
.pagination.robin .page-item.active .page-link{background: #00cec9;border-color:#ffeaa7;color: #ffff;}
.profile .col-lg-7{
    transition: all .5s ease-in-out;
}

.filter-section {
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 1rem 1.5rem 0;
}

.bank-header {
    background: linear-gradient(135deg, #9b59b6 0%, #9b59b6 50%, #ffff 100%);
    border-radius: 20px;
    padding: 2rem 2.5rem;
    color: white;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.bank-header::before { content: ''; position: absolute; top: -50%; right: -10%; width: 250px; height: 250px; background: rgba(255,255,255,0.03); border-radius: 50%; }

.page-banner {     
    transition: all .5s ease-in-out;
    background: linear-gradient(135deg, #ecf0f1 0%, #e9e8e8 50%, #ffff 100%);
    border-radius: 20px;
    padding: 2rem 2.5rem;
    color: white;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden; }

.page-banner.lemon {
    background: linear-gradient(135deg, #ffeaa7 0%, #ffeaa7 50%, #ffff 100%);
}
.page-banner.weed {
    background: linear-gradient(135deg, #11998e 0%, #11998e 50%, #ffff 100%);
}
.page-banner.manggo {
    background: linear-gradient(135deg, #ffdd59 0%, #ffdd59 50%, #ffff 100%);
}
.page-banner.berry {
        background: linear-gradient(135deg, #8e44ad 0%, #8e44ad 50%, #8e44ad85 100%);
}
.page-banner.robin{
    background: linear-gradient(135deg, #00cec9 0%, #11998e 50%, #81ecec 100%); 
}
.page-banner.casava{
    background: linear-gradient(135deg, #8e44ad 0%, #e84393 50%, #fd79a8 100%); 
}

.form-select,
.form-select:focus{
    border: none;
}

.form-control.border:disabled, .form-control.border[readonly]
 {
    background-color: transparent !important;
    opacity: 1;
}

.badge-icon{
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:50%;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
    position: absolute;
    right: 0;
}

.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]:after,
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]:after{
    color: #ffff !important;
}

.card-modern{border:none;border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card-modern .card-header{background:transparent;border-bottom:1px dashed #f1f5f9;padding:1.25rem 1.5rem}
.wallet-card{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:10px;padding:2rem;color:#fff;position:relative;overflow:hidden;min-height:200px;}
.wallet-card::before{content:'';position:absolute;top:-40%;right:-15%;width:250px;height:250px;background:rgba(255,255,255,0.05);border-radius:50%;}
.wallet-card::after{content:'';position:absolute;bottom:-30%;left:50%;width:180px;height:180px;background:rgba(255,255,255,0.03);border-radius:50%;}
.wallet-balance{font-size:2.2rem;font-weight:800;letter-spacing:-1px;}
.wallet-label{font-size:0.7rem;text-transform:uppercase;letter-spacing:1px;opacity:0.6;}
.wd-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;padding:.75rem 1rem;}
.wd-table td{padding:.75rem 1rem;vertical-align:middle;}
.badge-wd-pending{background:#fef3c7;color:#92400e;font-weight:600;font-size:.65rem;padding:4px 8px;border-radius:6px;}
.badge-wd-approved{background:#dcfce7;color:#166534;font-weight:600;font-size:.65rem;padding:4px 8px;border-radius:6px;}
.badge-wd-rejected{background:#fee2e2;color:#991b1b;font-weight:600;font-size:.65rem;padding:4px 8px;border-radius:6px;}
.stat-mini{background:#f8fafc;border-radius:12px;padding:1rem;text-align:center;}
.stat-mini .stat-val{font-size:1.3rem;font-weight:700;color:#1e293b;}
.stat-mini .stat-lbl{font-size:0.7rem;color:#64748b;text-transform:uppercase;}

.bg-transparant {
    background: transparent;
    box-shadow: none !important;
}

.area-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

.area-item { border-left: 4px solid #667eea66; border-radius: 12px; padding: 0.75rem 1rem; background: #f8fafc; margin-bottom: 0.5rem; transition: background 0.2s; box-shadow: 0 0.125rem 5px -0.0625rem rgba(12, 26, 36, 0.1), 0 0.0625rem 0.0625rem 0 rgba(12, 26, 36, 0.04) !important;}
.area-item:hover { background: #eef2ff; }

.outlet-arrow { width: 28px; height: 28px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.outlet-item:hover .outlet-arrow{
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff !important;
}


/* ═══ Wizard Steps Indicator ═══ */
.wizard-steps {
  /* background: #f8fafc; */
  border-radius: 12px;
  /* padding: 1.25rem 2rem; */
  gap: 0;
}
.wizard-steps .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.wizard-steps .step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  background: #e2e8f0;
  color: #94a3b8;
  transition: all 0.3s ease;
}
.wizard-steps .step.active .step-circle {
  background: #11998e;
  color: #fff;
  box-shadow: 0 2px 8px rgba(17, 153, 142, 0.3);
}
.wizard-steps .step.completed .step-circle {
  background: #16a34a;
  color: #fff;
}
.wizard-steps .step-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
  max-width: 70px;
}
.wizard-steps .step.active .step-label {
  color: #11998e;
}
.wizard-steps .step.completed .step-label {
  color: #16a34a;
}
.wizard-steps .step-connector {
  width: 40px;
  height: 3px;
  background: #e2e8f0;
  border-radius: 2px;
  margin: 0 8px;
  margin-bottom: 20px;
  transition: background 0.3s ease;
}
.wizard-steps .step-connector.active {
  background: #16a34a;
}

@media (max-width: 576px) {
  .wizard-steps {
    padding: 1rem;
  }
  .wizard-steps .step-circle {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
  }
  .wizard-steps .step-connector {
    width: 24px;
    margin: 0 4px;
  }
  .wizard-steps .step-label {
    font-size: 0.6rem;
    max-width: 55px;
  }
}

button#btnAdvanceMilestone {
    height: 45px;
}


.engraved {
    font-size: 100px;
    font-family: Futura;
    background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(245,245,245,0.5) 3px 5px 1px;
 }

.embossed{
  color: #f0f0f0;
  font-size: 100px;
  font-family: Futura;
  background-color: #666666;
  text-shadow: 1px 4px 4px #555;
  text-align: center;
  -webkit-background-clip: text;
    -moz-background-clip: text;

}

/* ══════════════════════════════════════════════
   PWA NATIVE BUTTON STYLES
   Tombol terlihat lebih native di mode standalone
   ══════════════════════════════════════════════ */
body.pwa-standalone .btn {
  min-height: 44px;
  border-radius: 12px !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
body.pwa-standalone .btn:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
body.pwa-standalone .btn-sm {
  min-height: 38px;
  border-radius: 10px !important;
}
body.pwa-standalone .btn-dark,
body.pwa-standalone .btn-primary {
  box-shadow: 0 4px 12px rgba(30,41,59,0.3);
}
body.pwa-standalone .btn-outline-danger,
body.pwa-standalone .btn-outline-secondary {
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
body.pwa-standalone .modal-footer .btn,
body.pwa-standalone .withdraw-sidebar .btn {
  min-height: 44px;
  font-size: 0.85rem;
}

/* ══════════════════════════════════════════════
   PWA: FORCE REMOVE ALL GAPS BETWEEN HEADER AND CONTENT
   ══════════════════════════════════════════════ */
body.pwa-standalone .container-fluid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.pwa-standalone .container-fluid > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.pwa-standalone .page-banner {
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}
body.pwa-standalone .card,
body.pwa-standalone .card-modern {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}
body.pwa-standalone .row.g-3,
body.pwa-standalone .row.mb-4,
body.pwa-standalone .mb-4,
body.pwa-standalone .mb-3,
body.pwa-standalone .mt-4,
body.pwa-standalone .mt-3,
body.pwa-standalone .py-4,
body.pwa-standalone .pt-4 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}

/* ══════════════════════════════════════════════
   PWA: PAGE-SPECIFIC TWEAKS
   ══════════════════════════════════════════════ */
/* Wallet: wallet-card spacing */
body.pwa-standalone .wallet-card {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
/* Profile: border-radius on profile-card */
body.pwa-standalone .profile-card {
  border-radius: 16px !important;
}
/* Bank Account: margin-top on bank-header */
body.pwa-standalone .bank-header {
  margin-top: 12px !important;
}
/* Transaksi: table header styling */
body.pwa-standalone .trx-table thead tr {
  background: #f8f9fa !important;
}
body.pwa-standalone .trx-table thead th {
  color: #64748b !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  opacity: 1 !important;
  border-radius: 0 !important;
}

/* PWA: Transaksi table header sticky + no border-radius */
body.pwa-standalone .trx-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}
body.pwa-standalone .trx-table thead th {
  border-radius: 0 !important;
}
/* PWA: Bank Account bank-header margin-top */
body.pwa-standalone .bank-header {
  margin-top: 16px !important;
}
/* PWA: Copyright margin-top on all pages */
body.pwa-standalone .copyright {
  margin-top: 2rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* PWA: dashboard_salesadmin & dashboard_project card spacing */
body.pwa-standalone .dashboard-container .card,
body.pwa-standalone .dashboard-container .card-modern,
body.pwa-standalone .dashboard-container .stat-card {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
/* PWA: Footer copyright margin-top (override previous rules) */
body.pwa-standalone .footer,
body.pwa-standalone .footer .copyright {
  margin-top: 2rem !important;
  padding-top: 1rem !important;
}

/* PWA: Transaksi table header - remove all border-radius */
body.pwa-standalone .trx-table thead tr,
body.pwa-standalone .trx-table thead th,
body.pwa-standalone .trx-table thead {
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
body.pwa-standalone .trx-table {
  border-radius: 0 !important;
}
body.pwa-standalone .table-responsive {
  border-radius: 0 !important;
}
/* PWA: Bank Account bank-header margin-top (stronger) */
body.pwa-standalone .bank-header {
  margin-top: 16px !important;
  padding-top: 8px !important;
}

/* PWA: Transaksi page card - force no border-radius */
body.pwa-standalone .container-fluid.transaction .card,
body.pwa-standalone .container-fluid.transaction .card-modern {
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
/* PWA: Bank Account - stronger spacing between bank-header and main header */
body.pwa-standalone .bank-header {
  margin-top: 20px !important;
}

/* PWA: Dashboard cards - margin left/right */
body.pwa-standalone .dashboard-container .card,
body.pwa-standalone .dashboard-container .card-modern {
  margin-left: 4px !important;
  margin-right: 4px !important;
}
/* PWA: dashboard_project & dashboard_sales - stat-card all margins */
body.pwa-standalone .dashboard-container .card.stat-card {
  margin: 8px 4px !important;
}
/* PWA: Transaksi - FORCE remove all border-radius on card and children */
body.pwa-standalone .container-fluid.transaction .card,
body.pwa-standalone .container-fluid.transaction .card *,
body.pwa-standalone .container-fluid.transaction .card-modern,
body.pwa-standalone .container-fluid.transaction .card-modern *,
body.pwa-standalone .container-fluid.transaction .table-responsive,
body.pwa-standalone .container-fluid.transaction table {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-radius: 0 !important;
}

/* PWA: Transaksi - nuclear option to kill border-radius */
body.pwa-standalone .container-fluid.transaction .card,
body.pwa-standalone .container-fluid.transaction .card-body,
body.pwa-standalone .container-fluid.transaction .table-responsive {
  overflow: visible !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}
/* PWA: Dashboard Sales Admin - vertical gap between stat cards */
body.pwa-standalone .dashboard-container .row.mb-4 .col-lg-2,
body.pwa-standalone .dashboard-container .row.mb-4 .col-md-4,
body.pwa-standalone .dashboard-container .row.mb-4 .col-6 {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}