.sumo-pp-payment-status-wrap mark{font: 13px arial, sans-serif;text-align: center;display:table-cell;border-radius: 15px;padding:4px 6px 4px 6px;}
.sumo-pp-payment-status-wrap mark._sumo_pp_pending{background-color:#727272;color:white;}
.sumo-pp-payment-status-wrap mark._sumo_pp_await_aprvl{background-color:#FFFF00;color:000;}
.sumo-pp-payment-status-wrap mark._sumo_pp_await_cancl{background-color:#F2C779;color:000;}
.sumo-pp-payment-status-wrap mark._sumo_pp_completed{background-color:#1CBFED;color:white;}
.sumo-pp-payment-status-wrap mark._sumo_pp_in_progress{background-color:#008000;color:white;}
.sumo-pp-payment-status-wrap mark._sumo_pp_overdue{background-color:#1E1C00;color:white;}
.sumo-pp-payment-status-wrap mark._sumo_pp_cancelled{background-color:#EF381C;color:white;}
.sumo-pp-payment-status-wrap mark._sumo_pp_failed{background-color:#99270B;color:white;}
.sumo-pp-payment-status-wrap mark._sumo_pp_pendng_auth{background-color:#96588a;color:white;}

.sumo-pp-view-payment .payment_activities ._alert_box{border-radius:20px;font-family:Tahoma,Geneva,Arial,sans-serif;font-size:14px;padding:10px 10px 10px 20px;margin:20px;}
.sumo-pp-view-payment .payment_activities ._alert_box span {font-weight:bold;}
.sumo-pp-view-payment .payment_activities .error {background:#ffecec;border:2px solid #f5aca6;}
.sumo-pp-view-payment .payment_activities ._success {background:#e9ffd9;border:2px solid #a6ca8a;}
.sumo-pp-view-payment .payment_activities .warning {background:#fff8c4;border:2px solid #f2c779;}
.sumo-pp-view-payment .payment_activities .notice {background:#e3f7fc;border:2px solid #8ed9f6;}

._sumo_pp_modal{display: none;position: fixed;z-index: 999999999;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);}
._sumo_pp_modal ._sumo_pp_modal-wrapper{background-color: #fefefe;margin: 10% auto;width: 30%;position: relative;border-radius: 10px;}
._sumo_pp_modal ._sumo_pp_modal-close{float: right;cursor: pointer;}
._sumo_pp_modal .sumo_pp_modal-info{width:100%;}
@media only screen and ( max-width: 768px ) {._sumo_pp_modal ._sumo_pp_modal-wrapper {width: 70%;}}
@media only screen and ( max-width: 605px ) {._sumo_pp_modal ._sumo_pp_modal-wrapper {width: 90%;}}

/* My Account payment pages - mobile responsive (stack tables into readable cards). */
@media ( max-width: 768px ) {
	table.my_account_sumo_payments,
	table.my_account_sumo_payment_installments { display: block; width: 100%; max-width: 100%; border-top: 0; }
	table.my_account_sumo_payments thead,
	table.my_account_sumo_payment_installments thead { display: none; }
	table.my_account_sumo_payments tbody,
	table.my_account_sumo_payments tbody tr,
	table.my_account_sumo_payments tbody td,
	table.my_account_sumo_payment_installments tbody,
	table.my_account_sumo_payment_installments tbody tr,
	table.my_account_sumo_payment_installments tbody td { display: block; width: 100% !important; box-sizing: border-box; }
	table.my_account_sumo_payments tbody tr,
	table.my_account_sumo_payment_installments tbody tr { margin-bottom: 1.25em; border: 1px solid rgba( 0, 0, 0, 0.12 ); }
	table.my_account_sumo_payments tbody td,
	table.my_account_sumo_payment_installments tbody td { text-align: right; padding: 0.6em 0.9em; border-bottom: 1px solid rgba( 0, 0, 0, 0.06 ); word-break: break-word; overflow-wrap: anywhere; white-space: normal; }
	table.my_account_sumo_payments tbody td::before,
	table.my_account_sumo_payment_installments tbody td::before { content: attr( data-title ); float: left; font-weight: 600; padding-right: 0.75em; color: #555; }
	table.my_account_sumo_payments tbody td:last-child,
	table.my_account_sumo_payment_installments tbody td:last-child { border-bottom: 0; }
	table.my_account_sumo_payments td.sumo-payment-actions { text-align: center; }
	table.my_account_sumo_payments td.sumo-payment-actions::before { content: ""; }
	table.my_account_sumo_payments td.sumo-payment-actions .button { display: block; width: 100%; box-sizing: border-box; }
	table.payment_details { width: 100%; max-width: 100%; }
	table.payment_details td { word-break: break-word; overflow-wrap: anywhere; white-space: normal; }
	table.payment_details td:first-child { white-space: nowrap; }
	table.payment_activities,
	table.payment_activities td,
	.pay_installments,
	._alert_box { max-width: 100%; word-break: break-word; overflow-wrap: anywhere; }
}