.mysp_payment_table_wrap {
	width:100%;
	overflow-x:auto;
	overflow-y:hidden;
}
.mysp_payment_table_wrap{
	cursor:grab;
	user-select:none;
}

.mysp_payment_table_wrap.dragging{
	cursor:grabbing;
}

/*MODAL NEW TRANSACTION*/
#mysp_payment_modal {

	display:none;

	position:fixed;

	top:50%;
	left:50%;

	transform:translate(-50%,-50%);

	background:#fff;

	padding:25px;

	width:400px;

	border:1px solid #ddd;

	border-radius:8px;

	box-shadow:0 5px 20px rgba(0,0,0,.3);

	z-index:99999;

}


#mysp_payment_modal h3 {

	margin-top:0;

	margin-bottom:20px;

	font-size:18px;

}


#mysp_payment_modal p {

	margin-bottom:15px;

}


#mysp_payment_modal input,
#mysp_payment_modal textarea {

	width:100%;

	padding:8px 10px;

	border:1px solid #ddd;

	border-radius:5px;

	box-sizing:border-box;

}


#mysp_payment_modal textarea {

	height:80px;

	resize:vertical;

}

/*TABLE*/
/* Border tabel DataTables */
#mysp_payment_table {

	border-collapse: collapse;

}


#mysp_payment_table th,
#mysp_payment_table td {

	border:1px solid #ddd;

}


#mysp_payment_table th {

	background:#f8f9fa;

	font-weight:600;

}

/*FILTER TABLE*/
/* Payment filter table */

.mysp_payment_filter_table {

	width:100%;

	border-collapse:collapse;

	border:1px solid #ddd;

}


.mysp_payment_filter_table th,
.mysp_payment_filter_table td {

	border:1px solid #ddd;

	padding:10px;

}


.mysp_payment_filter_table th {

	width:150px;

	background:#f8f9fa;

	font-weight:600;

	text-align:left;

}

.mysp_payment_filter_table select {

	width:100%;

	padding:8px 10px;

	border:1px solid #ccc;

	border-radius:5px;

	background:#fff;

	box-sizing:border-box;

}

/*PAYMENT STATUS*/
.mysp_payment_badge{
	display:inline-block;
	padding:4px 10px;
	font-size:11px;
	font-weight:600;
	text-transform:uppercase;
	line-height:1.2;
}


.mysp_payment_badge_belum{

	background:#ffe5e5;

	color:#b71c1c;

}


.mysp_payment_badge_lunas{

	background:#e8f5e9;

	color:#2e7d32;

}


.mysp_payment_badge_angsuran{

	background:#fff3cd;

	color:#856404;

}

/*BUTTON*/
.mysp_payment_btn{

	display:inline-block;

	padding:8px 18px;

	border:none;

	border-radius:6px;

	font-size:13px;

	font-weight:600;

	cursor:pointer;

	text-decoration:none;

	transition:.2s;

}

.mysp_payment_btn:disabled{
	opacity:0.5;
	cursor:not-allowed;
}

.mysp_payment_btn:hover{
	opacity:.9;
}

.mysp_payment_btn_pay{
	background:#0d6efd !important;
	color:#fff;
}

.mysp_payment_btn_save{
	background:#198754 !important;
	color:#fff;
}

.mysp_payment_btn_edit{
	background:#f39c12 !important;
	border:1px solid #d68910;
	color:#fff;
	margin-top:5px;
}

.mysp_payment_btn_edit:hover{
	background:#d68910;
	color:#fff;
}


.mysp_payment_btn_delete{
	background:#dc3545 !important;
	color:#fff;
}

.mysp_payment_btn_close{
	background:#6c757d !important;
	color:#fff;
}

.mysp_payment_edit_trx{
	background:#f59e0b;
	color:#fff;
}

/*MODAL EDIT TRANSACTION*/
#mysp_payment_edit_trx_modal {

	display:none;

	position:fixed;

	top:50%;
	left:50%;

	transform:translate(-50%,-50%);

	background:#fff;

	padding:25px;

	width:400px;

	border:1px solid #ddd;

	border-radius:8px;

	box-shadow:0 5px 20px rgba(0,0,0,.3);

	z-index:99999;

}


#mysp_payment_edit_trx_modal h3 {

	margin-top:0;

	margin-bottom:20px;

	font-size:18px;

}


#mysp_payment_edit_trx_modal p {

	margin-bottom:15px;

}


#mysp_payment_edit_trx_modal input,
#mysp_payment_edit_trx_modal textarea {

	width:100%;

	padding:8px 10px;

	border:1px solid #ddd;

	border-radius:5px;

	box-sizing:border-box;

}


#mysp_payment_edit_trx_modal textarea {

	height:80px;

	resize:vertical;

}

/*MODAL EDIT PAYMENT TAGIHAN*/
#mysp_payment_edit_modal {

	display:none;

	position:fixed;

	top:50%;
	left:50%;

	transform:translate(-50%,-50%);

	background:#fff;

	padding:25px;

	width:400px;

	border:1px solid #ddd;

	border-radius:8px;

	box-shadow:0 5px 20px rgba(0,0,0,.3);

	z-index:99999;

}


#mysp_payment_edit_modal h3 {

	margin-top:0;

	margin-bottom:20px;

	font-size:18px;

}


#mysp_payment_edit_modal p {

	margin-bottom:15px;

}


#mysp_payment_edit_modal input,
#mysp_payment_edit_modal textarea {

	width:100%;

	padding:8px 10px;

	border:1px solid #ddd;

	border-radius:5px;

	box-sizing:border-box;

}


#mysp_payment_edit_modal textarea {

	height:80px;

	resize:vertical;

}

/*TOAST*/
#mysp_payment_message{

	position:fixed;

	top:50%;
	left:50%;

	transform:translate(-50%, -50%);

	z-index:99999999;

	display:none;

	padding:15px 25px;

	border-radius:8px;

	font-size:16px;

	font-weight:600;

	box-shadow:0 5px 20px rgba(0,0,0,.3);

	text-align:center;

	min-width:250px;

}


.mysp_payment_success{

	background:#198754;

	color:#fff;

}


.mysp_payment_error{

	background:#dc3545;

	color:#fff;

}

/*BUTTON VIEW*/
.mysp_payment_action{

	display:flex;

	gap:10px;

	margin:15px 0;

}


.mysp_payment_btn_view{

	padding:10px 18px;

	border:0;

	border-radius:6px;

	background:#2b7de9;

	color:#fff;

	font-weight:600;

	cursor:pointer;

}


.mysp_payment_btn_view:hover{

	background:#1d5fb8;

}


/*MODAL VIEW TUNGGAKAN*/
#mysp_payment_summary_modal{

	display:none;

	position:fixed;

	top:0;
	left:0;

	width:100%;
	height:100%;

	background:rgba(0,0,0,.5);

	z-index:999999;

}


/* BOX UTAMA */

.mysp_payment_summary_box{

	position:absolute;

	top:50%;
	left:50%;

	transform:translate(-50%,-50%);


	background:#fff;

	width:90%;

	max-width:1000px;


	border-radius:10px;

	overflow:hidden;


	display:flex;

	flex-direction:column;


	max-height:85vh;

}


/* HEADER */

.mysp_payment_summary_header{

	padding:20px;

	border-bottom:1px solid #ddd;

	background:#fff;

}


.mysp_payment_summary_header h3{

	margin:0;

	font-weight:700;

}



/* BODY SCROLL */

.mysp_payment_summary_body{

	padding:20px;

	overflow:auto;

	flex:1;

	min-height:0;

}



/* FOOTER STICKY */

.mysp_payment_summary_footer{


	padding:15px 20px;


	border-top:1px solid #ddd;


	background:#fff;


	display:flex;

	justify-content:flex-end;

	gap:10px;


	position:sticky;

	bottom:0;


}



/* SUBTOTAL */

.mysp_payment_subtotal{

	background:#f3f4f6;

	font-weight:600;

}



/* BUTTON */

.mysp_payment_btn{

	padding:10px 18px;

	border:0;

	border-radius:6px;

	cursor:pointer;

	background:#2b7de9;

	color:#fff;

	font-weight:600;

}


.mysp_payment_btn_close{

	background:#6b7280;

}


/*=========================================================
=            PAYMENT PRINT
=========================================================*/
.mysp_payment_print_header{

	text-align:center;

	margin-bottom:25px;

	padding-bottom:15px;

	border-bottom:2px solid #111827;

}



.mysp_payment_print_logo{

	width:80px;

	height:80px;

	object-fit:contain;

	margin-bottom:10px;

}



.mysp_payment_print_header h2{
	margin:0;
	font-weight:700;
	color:#111827;
	text-transform:uppercase;
}



.mysp_payment_print_header h3{
	margin:8px 0 5px;
	font-weight:700;
	color:#374151;
	text-transform:uppercase;
}



.mysp_payment_print_header h4{
	margin:0;
	font-weight:600;
	color:#4b5563;
}

#mysp_payment_print_area{

	display:none;

}



@media print{


	body *{

		visibility:hidden;

	}



	#mysp_payment_print_area,
	#mysp_payment_print_area *{

		visibility:visible;

	}



	#mysp_payment_print_area{


		display:block;


		position:absolute;


		top:0;


		left:0;


		width:100%;


		background:#fff;


	}



	.mysp_payment_print_table{


		width:100%;


		border-collapse:collapse;


		font-size:12px;


	}



	.mysp_payment_print_table th,
	.mysp_payment_print_table td{


		border:1px solid #999;


		padding:6px;


		text-align:left;


	}



	.mysp_payment_print_table thead{


		display:table-header-group;


	}



	.mysp_payment_print_table tr{


		page-break-inside:avoid;


	}



	.mysp_payment_print_subtotal td{


		background:#f3f4f6 !important;


		font-weight:700;


	}



	.mysp_payment_print_total td{


		background:#dbeafe !important;


		font-weight:700;


	}


}