:root {
	--pay-ribbon-new-font-color: #212529;
}

.ribbon {
    background: linear-gradient(to right, rgba(13, 202, 240, 1) 0%, rgba(13, 202, 240, 0.80) 70%, rgba(13, 202, 240, 0.6) 100%)!important;
    color: #212529!important;
}

.ribbon.accepted, .ribbon.paid, .ribbon.resolved {
    background: linear-gradient(to right, rgba(25, 135, 84, 1) 0%, rgba(25, 135, 84, 0.80) 70%, rgba(25, 135, 84, 0.6) 100%)!important;
}

.ribbon.declined, .ribbon.failed, .ribbon.overdue, .ribbon.refund {
    background: linear-gradient(to right, rgba(220, 53, 69, 1) 0%, rgba(220, 53, 69, 0.80) 70%, rgba(220, 53, 69, 0.6) 100%)!important;
}

.ribbon.returned, .ribbon.void {
  background: linear-gradient(to right, rgba(78, 113, 135, 1) 0%, rgba(78, 113, 135, 0.80) 70%, rgba(78, 113, 135, 0.6) 100%)!important;
}

.ribbon.new {
  background: linear-gradient(to right, rgba(178, 225, 255, 1) 0%, rgba(178, 225, 255, 0.80) 70%, rgba(178, 225, 255, 0.6) 100%)!important;
}

.ribbon.pending, .ribbon.scheduled, .ribbon.queued {
  background: linear-gradient(to right, rgba(220, 88, 42, 1) 0%, rgba(220, 88, 42, 0.80) 70%, rgba(220, 88, 42, 0.6) 100%)!important;
}

.ribbon.canceled {
  background: linear-gradient(to right, rgba(108, 117, 125, 1) 0%, rgba(108, 117, 125, 0.80) 70%, rgba(108, 117, 125, 0.6) 100%)!important;
  color: #fff!important;
}

.content.paymentsContent.authTokenContent .table-container tr th, .content.myBillContent.authTokenContent .table-container tr th {
    padding: 0.75em 0.25em 1em 0.25em !important;
}

.paymentsContent.authTokenContent .table-container .ribbon-relative .ribbon-wrapper {
    position: relative !important;
    top: -5px !important;
    left: 0px !important;
    height: auto;
    width: 105px;
	clip-path: polygon(5% 50%, 0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}

.paymentsContent.authTokenContent .table-container .ribbon {
    top: auto;
    left: auto!important;
    line-height: normal!important;
    transform: none!important;
    width: auto;
    text-indent: initial!important;
    font-family: var(--pay-body-font-family);
    font-weight: 500!important;
    border-radius: 4px;
    text-align: center;
    padding-left: 6px !important;
    padding-right: 6px !important;
}


@media screen and (max-width: 1024px) {
    .ribbon {
        font-size: 1em !important;
    }
}