@charset "utf-8";

/* Elements */

body {
    font-family: Mark Offc For MC, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
    min-width: 1000px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a {
    color: #cf4500;
}

img {
    max-width: 100%;
}

a .accordion-toggle {
    text-decoration: none;
}

.custom_dl {
    padding: 0 2px;
    display: flex;
    flex-direction: column;
}

.custom_dd {
    clear: right;
    margin: 0 0 30px 0;
    padding-top: 15px;
}

.custom_dt {
    clear: left;
    float: left;
    font-weight: bold;
    padding-top: 15px;
    font-size: 18px;
    line-height: 24px;
}

h1 {
    font-size: 36px;
    font-weight: 400;
    line-height: 43.2px;
    margin: 0 0 25px 0;
    padding-bottom: 4px;
}

h2 {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    margin-top: 23px;
}

h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin-top: 18px;
}

h4 {
    font-size: 14px;
    font-weight: 600;
    margin-top: 16px;
}

hr {
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-top: 1px solid #ddd;
    color: #ddd;
}

i .fa {
    font-size: 14px;
    margin-left: -6px;
    margin-right: 4px;
    padding: 2px;
    vertical-align: middle;
    width: 14px;
}

li {
    margin: 6px 0;
}

span .more {
    font-size: 13px;
    margin-left: 1em;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #ddd;
    font-size: 13px;
    margin-left: 0;
    max-width: 100%;
}

table.overflowwrap {
    overflow-wrap: anywhere;
}

td {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 15px;
}

th {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    overflow-wrap: normal;
    padding: 15px;
    vertical-align: text-top;
}

th .hide {
    background-color: #fff;
    border: none;
}

th .left {
    text-align: left;
}

ul {
    margin: 0 0 0 20px;
    padding: 0;
}

select {
    border-color: #ccc;
    border-radius: 2px;
    color: #444;
    padding: 2px 4px;
}

/* Classes */

.aboutMethods span {
    color: #444340;
    font-size: 14px;
    font-style: normal;
    line-height: 20px;
}

.aboutMethods span::before {
    content: ", ";
}

.aboutMethods span:first-child::before {
    content: "";
}

.aboutPaymentMethod {
    color: #333;
    font-style: normal;
    line-height: 24px;
    margin: 5px 0;
    padding: 0;
}

.actionButtonPair {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0;
    width: 84%;
}

.adminPerm {
    background-size: contain;
    background: url(images/adminIcon.png) no-repeat scroll top right;
    color: #34789a;
    font-weight: normal;
    margin: 20px;
    padding: 20px;
    text-align: right;
}

.apiParameterOverview > .leaf {
    padding-left: 20px;
}

.backToTop {
    clear: right;
    display: block;
    height: 2em;
}

.backToTop a {
    float: right;
    margin-left: 8px;
}

.bannerContainer {
    background: #faf7f5;
    border-bottom: 1px solid #b1ada6;
    display: flex;
    justify-content: space-between;
}

.bannerContent {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    margin: 40px 0 40px 40px;
    width: 50%;
}

.bannerImage {
    background: url('images/gateway-docs-banner-img.png') no-repeat;
    padding: 10px;
    width: 354px;
}

.bannerTextActions {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.bannerTextHeading {
    border-bottom: #b1ada6;
    color: #111;
    font-size: 48px;
    font-weight: 350;
    line-height: 56px;
    margin-bottom: 16px;
    padding: 0;
    word-wrap: break-word;
}

.bannerTextSubHeading {
    color: #111;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 24px;
}

.batch {
    background: url('images/batch.svg') no-repeat;
    height: 72px;
    width: 72px;
}

.btn {
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -webkit-user-select: none;
    background-image: none;
    border-radius: 30px;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}

.btn-primary {
    background-color: #cf4500;
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
    background-color: #913000;
    color: #fff;
}

.chip_section {
    display: flex;
}

.chip_section > a, .chip_section > p > a {
    border: 2px solid;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    padding: 4px 24px;
    text-decoration: none;
}

.chip_section > a:not(:first-child),.chip_section > p > a {
    margin-left: .8rem;
}

.chip_section > p {
    margin: 0;
}

.chip_section + hr {
    margin: 36px 0;
}

.clear {
    clear: both;
    float: none;
}

.container {
    display: flex;
}

.collapsedView::before {
    content: "\f054";
    font-family: 'FontAwesome';
    font-size: 10px;
    padding-left: 8px;
}

.collapsedView + a, .expandedView + a {
    width: 100%;
}

.custom_x_expand {
    background: transparent;
    border: none;
}

.directPayment {
    background: url('images/directAPI.svg') no-repeat;
    height: 72px;
    width: 72px;
}

.downloads_ordered_list {
    padding-left: 1.25rem;
}

.exploreApi {
    align-items: center;
    border: 0.18px solid #f37338;
    display: flex;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    height: 40px;
    justify-content: center;
    line-height: 15px;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 153px;
}

.faqSection {
    border-radius: 6px;
    border: 1px solid #B1ADA6;
    margin-bottom: 10px;
}

.filter_headline {
    margin: 0 !important; /* BBVA compatibility */
}

.getStarted {
    align-items: center;
    border: #cf4500;
    display: flex;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    height: 40px;
    justify-content: center;
    line-height: 15px;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 153px;
}

.glossary_Section {
    background-color: #eeeef33 !important; /* background has been over ridden for all the brands due to the new filter design for glossary */
    color: #000000;
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    padding: 5px 10px;
    border-radius: 4px;
}

.horiz-scroll {
    overflow-x: scroll;
    transform: rotateX(180deg);
}

.horiz-scroll > * {
    transform: rotateX(180deg);
}

.hostedCheckout {
    background: url('images/HostedCheckout.svg') no-repeat;
    height: 72px;
    width: 72px;
}

.hostedSession {
    background: url('images/HostedSession.svg') no-repeat;
    height: 72px;
    width: 72px;
}

.integrationDetails {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 80%
}

.integrationDetails h3 {
    margin: 8px;
}

.integrationDetails h3 {
    color: #222221;
    font-size: 18px;
    font-style: normal;
    line-height: normal;
    margin: 0;
}

.integrationDetails p.aboutIntegrationType {
    color: #444340;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

.integrationDetailsHeadingAbout {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.integrationImages {
    width: 20%;
}

.integrationMethod {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.integrationSolution {
    display: flex;
    gap: 20px;
    padding: 12px 8px;
    width: 45%;
}

.integrationTypes {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.integrationWays {
    display: flex;
    flex: 50%;
    margin-top: 16px;
}

.integrationWays .methodDetails {
    flex: 100%;
}

.menu {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: fit-content;
    margin: 16px 16px 0 16px;
}

.methodDetails h3 {
    margin: 8px;
}

.methodDetails h3 {
    color: #222221;
    font-size: 18px;
    font-style: normal;
    line-height: normal;
    margin: 0;
}

.methodDetails p.aboutMethods {
    color: #444340;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 4px 0 0 0;
}

.integrationDetails .actionsButton {
    font-size: 14px;
    font-style: normal;
    font-weight: 450;
    line-height: normal;
    text-decoration: none;
}

.integrationTypesHeading {
    align-self: stretch;
    color: #111;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    margin: 0;
    padding: 0;
}

.integrationMethodHeading {
    color: #111;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    margin: 0;
    padding: 0;
}

.landingGroup {
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: 15px;
    margin-left: 20px !important; /* Citi & ARCPay compatibility */
    margin-right: 20px !important; /* Citi compatibility */
    margin-top: 30px;
    padding-bottom: 15px;
}

.landingGroup:last-of-type {
    border-bottom: none;
}

.landingGroup h2 {
    border: none;
    margin-top: 8px;
    padding-left: 0;
}

.landingGroup h2 a {
    color: #333;
    font-weight: bold;
    text-decoration: none;
}

.landingGroup h2 a:hover {
    color: #0088cc;
    text-decoration: underline;
}

.link-icon {
    display: inline-block;
    padding-left: 8px;
    position: relative;
    cursor: pointer;
}

.link-icon .tooltiptext {
    background-color: #141413;
    border-radius: 6px;
    top: 100%;
    left: 50%;
    color: #fff;
    font-family: Mark Offc For MC, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
    font-size: 14px;
    margin-left: -75px;
    opacity: 0;
    padding: 5px;
    position: absolute;
    text-align: center;
    transition: opacity 0.3s;
    width: 140px;
    z-index: 2;
}

.hide-tooltip {
    display: none;
}

.toolTipTextVisible {
    display: block;
    -webkit-animation: tooltipAnimation 1s forwards;
    animation: tooltipAnimation 1s forwards;
}

@keyframes tooltipAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0; display: none;}
}
@-webkit-keyframes tooltipAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0; display: none;}
}

.link-icon svg:hover path{
    fill: #141413;
}

.link-selected{
    fill: #141413;
}

.listalpha {
    list-style-type: lower-alpha;
}

.merchantPerm {
    background-size: contain;
    background: url(images/merchantIcon.png) no-repeat scroll top right;
    color: #34789a;
    font-weight: normal;
    margin: 20px;
    padding: 20px;
    text-align: right;
}

.msgImportant {
    background-color: #fef7f7;
    background-image: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(%23clip0_986_27461)'><path fill-rule='evenodd' clip-rule='evenodd' d='M10 1.53846C5.32682 1.53846 1.53846 5.32682 1.53846 10C1.53846 14.6732 5.32682 18.4615 10 18.4615C14.6732 18.4615 18.4615 14.6732 18.4615 10C18.4615 5.32682 14.6732 1.53846 10 1.53846ZM0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM9.23077 6.15385C9.23077 5.72901 9.57517 5.38462 10 5.38462H10.0077C10.4325 5.38462 10.7769 5.72901 10.7769 6.15385V6.16154C10.7769 6.58637 10.4325 6.93077 10.0077 6.93077H10C9.57517 6.93077 9.23077 6.58637 9.23077 6.16154V6.15385ZM8.92931 8.52147C10.1049 7.93366 11.4286 8.9955 11.1099 10.2706L10.3827 13.1794L10.4252 13.1581C10.8052 12.9681 11.2673 13.1222 11.4572 13.5021C11.6472 13.8821 11.4932 14.3442 11.1133 14.5342L11.0707 14.5554C9.89507 15.1433 8.57135 14.0814 8.89014 12.8063L9.61733 9.89751L9.57478 9.91879C9.1948 10.1088 8.73274 9.95476 8.54275 9.57478C8.35276 9.1948 8.50678 8.73274 8.88676 8.54275L8.92931 8.52147Z' fill='%23A82226'/></g><defs><clipPath id='clip0_986_27461'><rect width='20' height='20' fill='white'/></clipPath></defs></svg>") ;
    background-position: 16px;
    background-repeat: no-repeat;
    border-left: 4px solid #a82226;
    color: #000;
    font-family: MarkForMCNrw, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
    margin: 10px;
    padding: 16px 16px 16px 52px;
}

.msgTip {
    background-color: #fef7ed;
    background-image: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(%23clip0_986_27461)'><path fill-rule='evenodd' clip-rule='evenodd' d='M10 1.53846C5.32682 1.53846 1.53846 5.32682 1.53846 10C1.53846 14.6732 5.32682 18.4615 10 18.4615C14.6732 18.4615 18.4615 14.6732 18.4615 10C18.4615 5.32682 14.6732 1.53846 10 1.53846ZM0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM9.23077 6.15385C9.23077 5.72901 9.57517 5.38462 10 5.38462H10.0077C10.4325 5.38462 10.7769 5.72901 10.7769 6.15385V6.16154C10.7769 6.58637 10.4325 6.93077 10.0077 6.93077H10C9.57517 6.93077 9.23077 6.58637 9.23077 6.16154V6.15385ZM8.92931 8.52147C10.1049 7.93366 11.4286 8.9955 11.1099 10.2706L10.3827 13.1794L10.4252 13.1581C10.8052 12.9681 11.2673 13.1222 11.4572 13.5021C11.6472 13.8821 11.4932 14.3442 11.1133 14.5342L11.0707 14.5554C9.89507 15.1433 8.57135 14.0814 8.89014 12.8063L9.61733 9.89751L9.57478 9.91879C9.1948 10.1088 8.73274 9.95476 8.54275 9.57478C8.35276 9.1948 8.50678 8.73274 8.88676 8.54275L8.92931 8.52147Z' fill='%23f38b00'/></g><defs><clipPath id='clip0_986_27461'><rect width='20' height='20' fill='white'/></clipPath></defs></svg>") ;
    background-position: 16px;
    background-repeat: no-repeat;
    border-left: 4px solid #f38b00;
    color: #000;
    font-family: MarkForMCNrw, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
    margin: 10px;
    padding: 16px 16px 16px 52px;
}

.nav-horiz {
    height: 37px;
    list-style: none;
    margin: 0;
    padding-left: 2px;
}

.nav-horiz li {
    display: block;
    float: left;
    list-style: none outside;
    margin: 0 0 0 2px;
    position: relative;
}

.nav-horiz li a {
    background-color: #f9f9f9;
    border-bottom-color: #ddd;
    border-radius: 4px 4px 0 0;
    color: #555;
    cursor: default;
    display: block;
    padding: 10px 15px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}

.nav-horiz li a:hover {
    background-color: #eee;
    cursor: pointer;
}

.nav-horiz > li.active > a {
    background-color: #fff;
    border-bottom-color: transparent;
    border: 1px solid #ddd;
    color: #555;
    cursor: default;
    font-weight: 500;
}

.nav-horiz > li.active > a:hover {
    background-color: #fff;
    cursor: default;
}

.operatorPerm {
    background-size: contain;
    background: url(images/operatorIcon.png) no-repeat scroll top right;
    color: #34789a;
    font-weight: normal;
    margin: 20px;
    padding: 20px;
    text-align: right;
}

.padding-bottom-rem {
    padding-bottom: 1rem;
}

.padding-bottom-rem:last-child {
    padding-bottom: 2.5rem;
}

.pageHeader {
    clip: auto;
    margin: 10px;
    padding: 2px;
}

.pageHeader div {
    display: inline;
    font-size: 80%;
    margin: 5px;
}

.panel-action-bar {
    margin-top: 15px;
    position: relative;
    text-align: right;
    width: 100%;
}

.protocol_section {
    display: flex;
    padding-bottom: 1rem;
}

.protocol_section > div:first-child {
    width: 50%;
}

.protocol_section * p {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 1.8px;
    padding-bottom: 16px;
}

.referenceContainer {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    padding: 48px 40px 0;
}

.referenceContent {
    padding: 10px;
    width: 60%;
}

.referenceImage {
    align-items: center;
    background: url('images/reference.png') no-repeat;
    color: #fcfbfa;
    display: flex;
    flex-shrink: 0;
    height: 300px;
    padding: 45px 40px;
    width: 300px;
    width: 40%;
}

.referenceTextHeading {
    border-bottom-color: white;
    color: #111;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}

.referenceTextSubHeading {
    color: #333;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.referenceTextActions {
    display: flex;
    flex-direction: row;
    gap: 24px;
    margin-top: 24px;
}

.sampleCodeSource {
    background-color: #666;
    color: #fff;
    float: right;
    font-size: 80%;
    margin: 0 0 10px 0;
    padding: 5px;
    text-align: right;
}

.selectedInterfaceLanguage {
    font-size: 16px;
}

.sidebar-label {
    color: #555250;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 1.8px;
    margin: 0;
    padding: 20px 0 0 12px;
    text-transform: uppercase;
}

.subMenu {
    display: none;
    margin: 0;
}

.subMenu > li > ul {
  margin-left: 8px;
}

.subMenu > .sidebar-label {
    margin-left: 0;
}

.switch {
    font-size: 0.8em;
    margin-bottom: 5px;
    text-align: right;
}

.tab2 li a span {
    text-decoration: none;
}

.tab2 li a:active {
    color: #0058A9;
    text-decoration: none;
}

.tab2 li a {
    color: #2D3A53;
    text-decoration: none;
}

.toggle-panel {
    display: flex;
    margin-left: 0;
    justify-content: space-between;
}

.toggle-panel + ul {
    display: none;
}

.viewDocs {
    align-items: center;
    border: 2px solid #cf4500;
    display: flex;
    flex-shrink: 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    height: 40px;
    justify-content: center;
    line-height: 24px;
    padding: 10px 24px;
    text-align: center;
}

.x_collapse {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid #ddd;
    padding: 10px;
}

.x_collapsed {
    display: none;
    padding: 10px;
}

.x_collapsed > p {
    margin: 0;
}

.x_expand {
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #ddd;
    color: #111111;
    font-size: 18px;
    font-weight: 500;
    margin-top: 10px;
    padding: 10px;
    text-decoration: none;
}

.x_expand:before {
    border-color: #000000 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    width: 0;
}

.x_expand:first-child {
    margin-top: 0;
}

.x_expand a {
    display: block;
    padding-right: 30px;
    text-decoration: none;
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.x_expand a:link, .expand a:visited {
    border-width: 1px;
    background: url(images/new-arrow-down.svg) no-repeat;
    background-position: 100% 50%;
}

.x_expand.nonLeaf a:link {
    background: url(images/new-arrow-down.svg) no-repeat;
    background-position: 100% 50%;
}

.x_expand a.open:link, .expand a.open:visited {
    background: url(images/new-arrow-up.svg) no-repeat;
    background-position: 100% 50%;
}

.x_expand.nonLeaf a.open:link {
    background: url(images/new-arrow-up.svg) no-repeat;
    background-position: 100% 50%;
}

/* IDs */

#bodycontent {
    margin-left: 0 !important; /* ARCPay compatibility */
    padding: 0;
}

#breadcrumbs {
    font-size: 12px;
    margin-bottom: 10px;
    margin-top: 16px;
    line-height: 20px;
    word-wrap: break-word;
}

#breadcrumbs a {
    text-decoration: none;
}

#breadcrumbs p {
    display: inline;
}

#breadcrumbs a:not([href]) {
    color: #111111;
}

#codeSelector {
    background-color: #eee;
    border: 1px dotted #999;
    padding: 0 1em 1em 1em;
}

#containerBody {
    flex: 1 1 0;
    padding: 10px 10px 0 30px;
}

#ContainerContent {
    flex: 1 1 0;
    margin: 0 !important; /* Citi & ARCPay compatibility */
    overflow-y: auto !important; /* Citi compatibility */
    padding: 0 !important; /* Citi compatibility */
    position: static !important; /* BBVA compatiility */
}

#ContainerFooter {
    position: relative;
    font-weight: 500;
    padding: 40px 36px;
}

#ContainerFooter h2 {
    font-size: medium;
}

#ContainerHeader {
    background-color: #fff;
    flex: 0 1 auto;
    margin: 0;
    position: relative !important; /* ARCPay compatibility */
    border-bottom: 1px solid #d8d8d8;
}

#ContainerMain {
    background-color: #fff;
    display: flex;
    flex-flow: column;
    margin: 0 !important; /* ARCPay compatibility */
}

#ContainerOuterBorder {
    margin: auto;
}

#copyToClipboard {
    background: url("copyToClipboard.png") no-repeat left top;
}

#crumbs {
    display: none;
}

#expandableContent {
    margin-right: 0 !important; /* Citi compatibility */
}

#expandableContent > h1 {
    margin: 0;
    padding: 14px 0 4px 0;
    border: none;
}

#expandableContent > p{
    margin: 0 0 32px 0;
}

#Footer1 {
    display: none;
}

#Footer2 {
    background-image: none !important; /* Override all brands */
    display: flex !important; /* Override all brands */
    height: auto !important; /* BBVA compatibility */
    padding: 0 !important; /* CBA compatibility */
    position: static !important; /* ARCPay compatibility */
}

#Footer2 > div {
    width: 33.33%;
}

#Footer2 p {
    color: #333333;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin: 0 0 16px;
    padding: 0 !important; /* ARCPay compatibility */
    position: inherit !important; /* BBVA compatibility */
}

#Footer2 #copyright p {
    color: #555250;
    font-family: MarkForMCNrw, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    white-space: nowrap;
}

#Footer2 div > a {
    display: block;
    font-size: 14px;
    line-height: 28px;
    text-decoration: none;
    width: fit-content;
}

#Footer3 {
    display: none;
}

#footerLinks {
    text-align: left;
    padding: 0;
}

#glossary_description {
    margin: 8px 8px 0 0;
}

#glossary_heading {
    border-bottom: none;
    margin: 32px 0 0;
}

#glossaryLinks {
    align-items: center;
    background: #ffffff;
    border: none;
    clear: both;
    display: flex;
    gap: 12px;
    float: none;
    font-size: 0.8em;
    justify-content: center;
    margin: 0;
    padding: 36px 0;
    position: sticky;
    top: -0.7rem;
    width: 100%;
}

#glossaryLinks li {
    display: inline;
}

#glossaryLinks a {
    background-color: #ffffff;
    border-radius: 0;
    border: none;
    display: block;
    margin: 0;
    padding: 0;
    font-weight: 700;
    font-size: 16px;
    font-family: "Mark Offc For MC";
    letter-spacing: 1.8px;
    text-decoration: none;
}

#glossaryLinks a:hover {
    background-color: #ffffff;
    text-decoration: none;
    scale:1.2;
}

.glossary-filter {
    color: #000000;
}

#backToTop {
    position: absolute;
    bottom: 20px;
    text-decoration: none;
    border: 1px solid;
    padding: 0.3rem 0.9rem;
    border-radius: 4px;
    font-size: 12px;
    background: #ffffff;
}

#backToTop > span:before {
    content: '/f062';
    font-family: 'FontAwesome';
    font-size: 18px;
}

#Header1 {
    display: none;
}

#Header2 {
    position: relative;
}

#Header3 {
    display: none;
}

#igHome .switch {
    display: none;
}

#igHome #breadcrumbs {
    display: none;
}

#igHome #containerBody {
    padding: 0;
}

#igLanding #containerBody {
    overflow-x: hidden;
}

#igLanding .switch {
    display: none;
}

#integrationMethodContainer {
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 48px;
    margin: 48px 40px 0;
}

#integrationTypesContainer {
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 48px;
    margin: 48px 40px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

#localeSelectorInHeader select {
    border: none;
    outline: none;
    padding: 0;
    font: inherit;
}

#nav-horiz-header {
    background-color: white;
    border-radius: 10px 10px 0 0;
    bottom: 0;
    height: 55px;
    position: absolute;
    right: 20px;
}

#nav-horiz-header li {
    display: block;
    float: left;
    line-height: 24px;
    list-style: none outside;
    margin-bottom: 0;
    margin-top: 0;
    padding: 10px 10px 0 10px;
}

#nav-horiz-header li a {
    border-bottom: 2px solid;
    margin-bottom: -2px;
    cursor: default;
    display: block;
    font-weight: 600;
    padding-bottom: 5px;
    text-decoration: none;
    white-space: nowrap;
}

#nav-horiz-header li a:hover {
    cursor: pointer;
}

#nav-horiz-header > li.active > a {
    background-color: #fff;
    border-bottom: 3px solid;
    margin-bottom: -3px;
    color: #555;
    cursor: default;
    font-weight: bold;
}

#nav-horiz-header > li.active > a:hover {
    background-color: #fff;
    cursor: default;
}

#navcontainer {
    display: flex;
    flex: 1 1 auto;
    height: 100%;
}

#navigation {
    border-right: 1px solid #d8d8d8;
    font-family: MarkForMCNrw, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
    font-weight: 400;
    overflow-wrap: break-word;
    overflow-y: auto;
    width: 300px;
}

#navigation a {
    align-items: center;
    display: flex;
    line-height: 28px;
    padding: 0 0 0 12px;
    text-decoration: none;
}

#navigation .active-link {
    border-left: 2px solid;
    cursor: default;
    font-weight: 600;
    margin-left: -2px;
    pointer-events: none;
}

#navigation :not(:is(:hover,.active-link)) {
    color: #111111;
}

#navigation li {
    line-height: 24px;
    margin: 4px 0;
    width: 100%;
}

#navigation ul {
    list-style-type: none;
}

#navigation .category-heading {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

#navigation #anchor-back {
    align-items: flex-start;
    color: #111;
    display: none;
    flex-direction: column;
    font-style: normal;
    font-weight: 600;
    gap: 24px;
    line-height: 22px;
    padding: 32px 16px 0;
}

#navigation #anchor-back > span::before {
    content: "\f053";
    font-family: 'FontAwesome';
    font-size: 10px;
    margin-right: 8px;
}

#pageNavigation {
    align-items: flex-start;
    display: none;
    flex-direction: column;
    max-height: fit-content;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

#pageNavigation a {
    align-items: flex-start;
    display: flex;
    font-family: MarkForMCNrw, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
    font-size: 13px;
    font-weight: 450;
    gap: 10px;
    line-height: 19.5px;
    padding-left: 8px;
    text-decoration: none;
    width: 180px;
}

#pageNavigation .h2_menu_li a:not(:hover) {
    color: #111111;
}

#pageNavigation li {
    list-style-type: none;
    margin: 8px 0;
}

#pageNavigation .h2_menu_li_selected a {
    border-left: 2px solid;
    font-weight: 600;
    margin-left: -2px;
}

#pageNavigationLabel {
    color: #555250;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin: 18px 0 4px 0;
    padding-left: 20px;
    text-transform: uppercase;
}

#pageNotFound {
    padding: 250px 280px;
    text-align: left;
    user-select: none;
    vertical-align: middle;
    white-space: normal;
}

#pageNotFound a {
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    line-height: normal;
    padding-top: 5px;
    text-decoration: none;
}

#pageNotFound h1:first-child {
    color: #666666;
}

#processNav.step1 li#step1 a, #processNav.step2 li#step2 a, #processNav.step3 li#step3 a, #processNav.step4 li#step4 a, #processNav.step5 li#step5 a, #processNav.step6 li#step6 a {
    background-color: #666;
    color: white;
    text-decoration: none;
}

#processNavPanel {
    background-color: #f9f9f9;
    border-radius: 4px;
    border: 1px solid #ddd;
    display: none;
    float: right;
    margin: 0 0 20px 10px;
    max-width: 238px;
    padding: 20px 10px;
}

#processNavPanel ol, #processNavPanel ul, #processNavPanel li, #productProcessNavPanel ul, #productProcessNavPanel ol, #productProcessNavPanel li {
    -webkit-padding-start: 0;
    list-style-type: none;
    margin: 0;
}

#processNavPanel li a {
    padding: 0 5px 0 5px;
}

#processNavPanel h3 {
    margin-top: 0;
}

#productProcessNavPanel {
    background-color: #f9f9f9;
    border-radius: 4px;
    border: 1px solid #ddd;
    clear: both;
    display: none;
    float: left;
    margin: 0 0 20px 10px;
    max-width: 238px;
    padding: 20px 10px;
}

#searchbar {
    display: none;
    position: relative;
}

#searchbar_input {
    border: 1px solid #555250;
    box-sizing: border-box;
    font: inherit;
    margin: 1px;
    padding: 2px 21px 2px 5px;
    width: 100%;
}

#searchbar_input:focus {
    border: 2px solid #555250;
    margin: 0;
}

#searchbar_input::placeholder {
    font-family: 'FontAwesome';
}

#searchbar_input:placeholder-shown + #searchbar_reset {
    display: none;
}

#searchbar_reset {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 24px;
    height: 24px;
    line-height: 24px;
    margin: 4px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.1s;
    width: 24px;
}

#searchbar_results {
    display: none;
    margin: 0;
}

#searchBar_notfound {
    padding-left: 12px;
}

/* Fonts */

@font-face {
    font-family: MarkForMCNrw;
    font-weight: 400;
    src: url(/api/style/mark-for-mc-narrow/fonts/MarkForMCNarrowW00-Regular.ttf);
}

@font-face {
    font-family: MarkForMCNrw;
    font-weight: 500;
    src: url(/api/style/mark-for-mc-narrow/fonts/MarkForMCNrw-Medium.ttf);
}

@font-face {
    font-family: Mark Offc For MC;
    font-weight: 400;
    src: url(/api/style/mark-for-mc/fonts/MarkForMC.ttf);
}

@font-face {
    font-family: Mark Offc For MC;
    font-weight: 500;
    src: url(/api/style/mark-for-mc/fonts/MarkForMC-Med.ttf);
}

/* Media */

@media screen and (max-width: 1200px) {
    .apiNavigationProtocolDestination {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 120px;
    }

    .spanwrap {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        max-width: 200px;
    }
}

@media screen and (max-width: 900px) {
    .spanwrap {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }
}

@media screen and (max-width: 768px) {
    .bannerContainer {
        flex-direction: column;
    }

    .bannerContent {
        order: 1;
        flex: 100%;
    }

    .bannerImage {
        order: 2;
        flex: 100%;
    }

    .integrationSolution, .integrationWays {
        flex: 100%;
    }

    .referenceContainer {
        flex-direction: column;
    }

    .referenceContent {
        order: 1;
        flex: 100%;
    }

    .referenceImage {
        order: 2;
        flex: 100%;
    }
}