/* Common Code */
section.payment_success,
section.reset_password,
section.payment_failed {
    background: linear-gradient(213.61deg, #4c2963 0.33%, #aa277b 113.92%);
    min-height: 100vh;
}
section.payment_success .wrapper,
section.payment_failed .wrapper {
    gap: 10px;
    width: 80%;
}
section.payment_success .card,
section.payment_failed .card {
    box-shadow: none;
    width: inherit;
}
section.payment_success .card img,
section.payment_failed .card img {
    height: 400px;
}
section.payment_success .card .content .counter,
section.payment_failed .card .content .counter {
    text-align: left;
    font-weight: bold;
}
/* Forgot password page */
section.forgot_password .main_image {
    background: linear-gradient(213.61deg, #4c2963 0.33%, #aa277b 113.92%);
}
section.forgot_password button.show_passowrd {
    position: absolute;
    left: 0;
    top: 40px;
}
section.forgot_password form label.error {
    color: red;
}
section.forgot_password form button[type="submit"] {
    background: linear-gradient(213.61deg, #4c2963 0.33%, #aa277b 113.92%);
    font-size: 16px;
}
/* Transaction success */

section.payment_success .card .content .trans_number span:nth-child(1),
section.payment_success .card .content .amount span:nth-child(1) {
    flex-basis: 160px;
    font-weight: bold;
}
section.payment_success .card .content .trans_number span:nth-child(2),
section.payment_success .card .content .amount span:nth-child(2) {
    font-size: 20px;
}

/* Transaction failed */
section.payment_failed .wrapper .card .content p {
    font-size: 20px;
}
section.payment_failed .wrapper .card .content p span:nth-child(1) {
    font-weight: bold;
    font-size: 30px;
}
section.payment_failed .card .content .amount {
    gap: 10px;
}
section.payment_failed .card .content .amount span:nth-child(1),
section.payment_failed .card .content .amount span:nth-child(2) {
    font-weight: bold;
}
section.payment_failed .card .content a {
    background: linear-gradient(213.61deg, #4c2963 0.33%, #aa277b 113.92%);
    font-size: 18px;
}

@media (max-width: 575px) {
    section.payment_success .wrapper,
    section.payment_failed .wrapper {
        width: 100%;
    }
    section.payment_success .card .card-body {
        flex-direction: column;
    }
    section.payment_success .card .content .counter,
    section.payment_failed .card .content .counter {
        font-size: 12px;
    }
}
@media (max-width: 767px) {
    section.payment_success .card img,
    section.payment_failed .card img {
        height: 100%;
    }
}
@media (min-width: 576px) and (max-width: 991px) {
    section.payment_success .wrapper,
    section.payment_failed .wrapper {
        width: 90%;
    }
    section.payment_success .card .card-body {
        flex-direction: column;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    section.payment_success .card img,
    section.payment_failed .wrapper .card img {
        height: 300px;
    }
}