/**
 * Mageuni_GetnetErrorMessage
 * Styling for the payment error modal (modalClass: payment-error-popup).
 */

/* Center the modal vertically and horizontally. */
.modal-popup.payment-error-popup._show {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/*
 * Neutralize the theme's old "left: 50% / margin-left: -400px" centering, which
 * fights the flex centering above and pushes the modal off-screen to the right.
 */
.modal-popup.payment-error-popup .modal-inner-wrap {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    margin: auto !important;
    max-height: 90%;
    overflow-y: auto;
}

/* Inner spacing: 3rem left/right/top on header, content and footer. */
.modal-popup.payment-error-popup .modal-header,
.modal-popup.payment-error-popup .modal-content,
.modal-popup.payment-error-popup .modal-footer {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
    padding-top: 3rem !important;
}

/* Title font size. */
.modal-popup.payment-error-popup .modal-title {
    font-size: 18px !important;
}

/* Error message: no border, larger text, drop the default 20px padding. */
.modal-popup.payment-error-popup .modal-content {
    border: 0 !important;
    font-size: 18px !important;
    padding-bottom: 0 !important;
}

/* Keep the close "X" inside the modal, top-right corner, at half the size. */
.modal-popup.payment-error-popup .modal-header {
    position: relative;
}

.modal-popup.payment-error-popup .modal-header .action-close,
.modal-popup.payment-error-popup .action-close {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    min-width: 0 !important;
    z-index: 2;
}

.modal-popup.payment-error-popup .modal-header .action-close:before,
.modal-popup.payment-error-popup .action-close:before {
    font-size: 18px !important;
    line-height: 30px !important;
    color: #fff !important;
}

/* Close "X" button color. */
.modal-popup.payment-error-popup .modal-header .action-close,
.modal-popup.payment-error-popup .action-close {
    background-color: #a8014d !important;
    border-color: #a8014d !important;
}

.modal-popup.payment-error-popup .modal-header .action-close:hover,
.modal-popup.payment-error-popup .action-close:hover,
.modal-popup.payment-error-popup .modal-header .action-close:focus,
.modal-popup.payment-error-popup .action-close:focus {
    background-color: #8a0140 !important;
    border-color: #8a0140 !important;
}

/* "Confirmar" button color. */
.modal-popup.payment-error-popup .modal-footer .action-primary,
.modal-popup.payment-error-popup .action-primary.action-accept {
    background-color: #a8014d !important;
    border-color: #a8014d !important;
    color: #fff !important;
}

.modal-popup.payment-error-popup .modal-footer .action-primary:hover,
.modal-popup.payment-error-popup .modal-footer .action-primary:focus,
.modal-popup.payment-error-popup .action-primary.action-accept:hover,
.modal-popup.payment-error-popup .action-primary.action-accept:focus {
    background-color: #8a0140 !important;
    border-color: #8a0140 !important;
    color: #fff !important;
}