@font-face {
    font-family: 'Titillium Web';
    src: url('../fonts/TitilliumWeb-Bold.eot');
    src: url('../fonts/TitilliumWeb-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TitilliumWeb-Bold.woff2') format('woff2'),
    url('../fonts/TitilliumWeb-Bold.woff') format('woff'),
    url('../fonts/TitilliumWeb-Bold.svg#TitilliumWeb-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('../fonts/TitilliumWeb-Black.eot');
    src: url('../fonts/TitilliumWeb-Black.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TitilliumWeb-Black.woff2') format('woff2'),
    url('../fonts/TitilliumWeb-Black.woff') format('woff'),
    url('../fonts/TitilliumWeb-Black.svg#TitilliumWeb-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('../fonts/TitilliumWeb-BoldItalic.eot');
    src: url('../fonts/TitilliumWeb-BoldItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TitilliumWeb-BoldItalic.woff2') format('woff2'),
    url('../fonts/TitilliumWeb-BoldItalic.woff') format('woff'),
    url('../fonts/TitilliumWeb-BoldItalic.svg#TitilliumWeb-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('../fonts/TitilliumWeb-ExtraLight.eot');
    src: url('../fonts/TitilliumWeb-ExtraLight.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TitilliumWeb-ExtraLight.woff2') format('woff2'),
    url('../fonts/TitilliumWeb-ExtraLight.woff') format('woff'),
    url('../fonts/TitilliumWeb-ExtraLight.svg#TitilliumWeb-ExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('../fonts/TitilliumWeb-ExtraLightItalic.eot');
    src: url('../fonts/TitilliumWeb-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TitilliumWeb-ExtraLightItalic.woff2') format('woff2'),
    url('../fonts/TitilliumWeb-ExtraLightItalic.woff') format('woff'),
    url('../fonts/TitilliumWeb-ExtraLightItalic.svg#TitilliumWeb-ExtraLightItalic') format('svg');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('../fonts/TitilliumWeb-Italic.eot');
    src: url('../fonts/TitilliumWeb-Italic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TitilliumWeb-Italic.woff2') format('woff2'),
    url('../fonts/TitilliumWeb-Italic.woff') format('woff'),
    url('../fonts/TitilliumWeb-Italic.svg#TitilliumWeb-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('../fonts/TitilliumWeb-Light.eot');
    src: url('../fonts/TitilliumWeb-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TitilliumWeb-Light.woff2') format('woff2'),
    url('../fonts/TitilliumWeb-Light.woff') format('woff'),
    url('../fonts/TitilliumWeb-Light.svg#TitilliumWeb-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('../fonts/TitilliumWeb-LightItalic.eot');
    src: url('../fonts/TitilliumWeb-LightItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TitilliumWeb-LightItalic.woff2') format('woff2'),
    url('../fonts/TitilliumWeb-LightItalic.woff') format('woff'),
    url('../fonts/TitilliumWeb-LightItalic.svg#TitilliumWeb-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('../fonts/TitilliumWeb-Regular.eot');
    src: url('../fonts/TitilliumWeb-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TitilliumWeb-Regular.woff2') format('woff2'),
    url('../fonts/TitilliumWeb-Regular.woff') format('woff'),
    url('../fonts/TitilliumWeb-Regular.svg#TitilliumWeb-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('../fonts/TitilliumWeb-SemiBold.eot');
    src: url('../fonts/TitilliumWeb-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TitilliumWeb-SemiBold.woff2') format('woff2'),
    url('../fonts/TitilliumWeb-SemiBold.woff') format('woff'),
    url('../fonts/TitilliumWeb-SemiBold.svg#TitilliumWeb-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('../fonts/TitilliumWeb-SemiBoldItalic.eot');
    src: url('../fonts/TitilliumWeb-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TitilliumWeb-SemiBoldItalic.woff2') format('woff2'),
    url('../fonts/TitilliumWeb-SemiBoldItalic.woff') format('woff'),
    url('../fonts/TitilliumWeb-SemiBoldItalic.svg#TitilliumWeb-SemiBoldItalic') format('svg');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

#delupay {
    font-family: "Titillium Web", Helvetica, Arial, sans-serif;
    width: 100%;
}

.content-payment {
    margin: 24px;
/ / padding: 26 px;
    border-radius: 12px;
    box-shadow: rgb(0 0 0 / 10%) 0px 4px 24px 0px;
}

.payment-header {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(133, 133, 151, 0.15);
    padding: 26px 26px 15px 26px;
}

.payment-body {
    text-align: center;
    padding: 5px;
}

.payment-body .regenerate {
    display: flex;
    text-align: left;
    justify-content: space-between;
    padding: 26px;
}

.payment-body .regenerate .refresh-btn {
    display: flex;
}

.left-part {
    overflow: hidden;
    margin-right: 24px;
}

.right-part {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: center;

}

.payment-header .right-part {
    text-align: right;
}

.reference {
    color: #1D1D28;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 31px;
    margin-bottom: 10px;
}

.amount {
    color: #1D1D28;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
}

.amount span {
    font-weight: 600;
}

.info {
    color: #1D1D28;
    font-size: 17px;
    letter-spacing: 0;
    line-height: 26px;
    margin-bottom: 12px;
}

.date {
    color: #1D1D28;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 21px;
    margin-bottom: 12px;
}

.state {
    color: #1D1D28;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 21px;
    width: 108px;
    border-radius: 4px;
    background-color: rgba(133, 133, 151, 0.15);
    margin: auto;
    padding: 5px;
}

.state span {
    color: #1D1D28;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 21px;
    text-align: center;
}

.qr-code {
    margin-top: 20px;
    background-image: url('../images/pattern.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 50px 0;
}

.number {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 24px;
    padding-top: 10px;
    display: block;
}

.show-qrcode {
    margin-top: 15px;
    display: block;
    color: #1D1D28;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 24px;
    position: relative;
}

.show-qrcode::after {
    border-style: solid;
    border-width: 2px 2px 0 0;
    content: '';
    display: inline-block;
    height: 8px;
    margin-left: 7px;
    position: absolute;
    margin-top: 7px;
    transform: rotate(135deg);
    width: 8px;
    border-color: #87859A;
}

.show-qrcode.hide::after {
    transform: rotate(315deg);
    margin-top: 11px;
}

.payment-footer {
    margin-top: 50px;
    color: #1D1D28;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 21px;
    border-top: 1px solid rgba(133, 133, 151, 0.15);
    padding: 24px 26px 26px 26px;
}

.payment-footer p {
    color: #1D1D28;
    margin: 0;
}

.payment-footer a {
    color: #420DC4 !important;
}

.refresh-btn {
/ / margin: auto;
}

.mobile-pay {
    text-align: center;
}

.refresh-btn button, .mobile-pay a {
    display: inline-block;
    padding: 14px 0px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: 12px;
    background: linear-gradient(38.6deg, #420DC4 0%, #972EDE 100%);
}

.refresh-btn button {
    padding: 14px 46px;
}

.refresh-btn button span, .mobile-pay a span {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    font-family: "Titillium Web", Helvetica, Arial, sans-serif;
}

.mobile-pay {
    margin-bottom: 15px;
}

.mobile-pay a span {
    padding: 10px 70px;
    height: auto;
}

.account p {
    text-align: center;
}

.account p a {
    margin-top: 10px;
    display: block;
}

.delupay-logo {
    max-width: 100%;
}

@media (max-width: 700px) {
    .left-part {
        margin-right: 0px;
        text-align: center;
        border-bottom: 1px solid rgba(133, 133, 151, 0.15);
    }

    .payment-header, .payment-body {
        flex-direction: column;
        align-items: center;
    }

    .payment-header {
        padding: 5px 0px 10px 0px;
    }

    .payment-header .right-part {
        margin-top: 10px;
        text-align: center;
    }

    .delupay-logo {
        width: 55%;
    }

    .payment-footer {
        text-align: center;
        margin-top: 15px;
    }

    .payment-body .regenerate {
        display: inherit;
        text-align: center;
    }

    .payment-body .regenerate .refresh-btn {
        display: inherit;
    }
}