/* 

    Main overrides

*/

body:not(.with-promo-banner) main#main-content,
body.header-promo-closed main#main-content,
body.promo-closed main#main-content {
    margin-top: 72px;
}

@media (min-width: 992px) {
    body:not(.header-promo-closed) main#main-content {
        margin-top: 72px;
    }
}

/* 

Preferred language modal 

*/

.multipurpose-modal {
    background: rgba(0, 0, 0, .4);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.multipurpose-modal.closed {
    display: none;
}

.multipurpose-modal .multipurpose-modal-content {
    border-top: 8px solid #0176d3;
    border-radius: 8px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: auto;
    text-align: center;
    background: white;
    padding: 60px 40px 40px;
    max-width: 600px;
    z-index: 100;
    width: calc(100% - 20px);
}

.multipurpose-modal .multipurpose-modal-content h2,
.multipurpose-modal .multipurpose-modal-content p.title {
    font-size: 22px;
    line-height: 32px;
    color: #181818;
    font-family: "ITC Avant Garde", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.multipurpose-modal .multipurpose-modal-content p {
    margin-top: 20px;
    color: #181818;
    font-family: "Salesforce Sans", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.multipurpose-modal .multipurpose-modal-content span.multipurpose-modal-close {
    transform: rotate(45deg);
    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 2em;
    color: #8a8a8a;
    display: block;
    cursor: pointer;
}

.multipurpose-modal .multipurpose-modal-content a.multipurpose-modal-close {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 16px;
}

.multipurpose-modal .multipurpose-modal-content a.multipurpose-modal-link {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 28px;
    min-width: initial !important;
    margin-right: 15px;
    min-height: 44px;
    display: inline-block;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    background: #0176d3;
    border: 2px solid #0176d3;
    color: #fff;
    font-family: "Salesforce Sans", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 700;
}

.multipurpose-modal .multipurpose-modal-content a.multipurpose-modal-link:hover {
    background: #032d60;
    border: 2px solid #032d60;
    color: #fff;
}


/* 

Onetrust Styles 

*/


.skip-link.visually-hidden {
    display: none;
}

[tabindex="0"]:focus {
    outline: none;
}

.ot-sdk-show-settings {
    display: inline-block !important;
}

/* After exchange has the new version, migrate the content from onetrust-mulesoft stylesheet and remove the styles below*/

#onetrust-consent-sdk #onetrust-pc-sdk button {
    float: none;
}

#onetrust-consent-sdk div#onetrust-pc-sdk .category-host-list-handler {
    float: left;
    text-transform: none;
}

#onetrust-consent-sdk #onetrust-pc-sdk button.ot-link-btn.ot-host-expand {
    text-transform: none;
}

body #onetrust-pc-sdk button.ot-host-box,
body #onetrust-pc-sdk button.ot-host-box:hover {
    width: 100% !important;

}

@media screen and (max-width: 992px) {

    body #onetrust-pc-sdk .ot-sdk-four.ot-sdk-columns,
    body #onetrust-pc-sdk .ot-sdk-eight.ot-sdk-columns {
        width: auto !important;
        position: static !important;
    }

    body #onetrust-pc-sdk.otPcTab .save-preference-btn-handler,
    body #onetrust-pc-sdk.otPcTab #accept-recommended-btn-handler {
        width: 200px !important;
    }
}

@media screen and (max-width: 650px) {

    body #onetrust-pc-sdk.otPcTab .save-preference-btn-handler,
    body #onetrust-pc-sdk.otPcTab #accept-recommended-btn-handler {
        width: 100% !important;
    }

}


/************** HOMEPAGE CSS OVERRIDES **************/


/**************

Marquee

**************/


div[data-blade-id="1727892035090_1aa4"] .blade__background-image {
    display: none;
}

div[data-blade-id="1727892035090_1aa4"] .background__contour--overlap {
    bottom: -1px;
}

@media screen and (min-width: 1024px) {
    div[data-blade-id="1727892035090_1aa4"] .blade__background-image {
        display: block;
    }
}


/**************

Sided patterns

**************/

section#\31 723485270320_y47 .container {
    background-image: url('https://wp.sfdcdigital.com/mulesoft/en-us/wp-content/uploads/sites/40/2024/10/image_large_tile_pattern_tablet.svg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto;
}

@media screen and (min-width:1024px) {
    section#\31 723485270320_y47 .container {
        background-image: none;
    }
}

/**************

Pattern behind image

**************/

div[data-blade-id="1722972806800_ddc"] .image__wrapper,
div[data-blade-id="1723042405049_amu"] .image__wrapper {
    position: relative;
    overflow: visible;
}

div[data-blade-id="1722972806800_ddc"] .image__wrapper img,
div[data-blade-id="1723042405049_amu"] .image__wrapper img{
    z-index: 1;
}

div[data-blade-id="1722972806800_ddc"] .image__wrapper::before,
div[data-blade-id="1723042405049_amu"] .image__wrapper::before{
    content: '';
    display: block;
    position: absolute;
    background-image: url('https://wp.sfdcdigital.com/mulesoft/en-us/wp-content/uploads/sites/40/2024/10/image_dev_section_pattern_desktop.webp');
    background-size: contain;
    overflow: visible;
    background-repeat: no-repeat;
    left: -12px;
    top: -5%;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
}
div[data-blade-id="1722972806800_ddc"] .image__wrapper::before{
    top: 20px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
}

@media screen and (min-width: 1024px) {
    div[data-blade-id="1722972806800_ddc"] .image__wrapper::before,
    div[data-blade-id="1723042405049_amu"] .image__wrapper::before {
        left: -25px;
        top: -5%;
        width: calc(100% + 56px);
        height: 500px;
    }
    div[data-blade-id="1722972806800_ddc"] .image__wrapper::before{
        left: -25px;
        top: 5%;
        width: calc(100% + 48px);
        height: 600px;
    }
}
@media screen and (min-width: 1440px) {
    div[data-blade-id="1722972806800_ddc"] .image__wrapper::before,
    div[data-blade-id="1723042405049_amu"] .image__wrapper::before {
        left: -25px;
        top: -5%;
        width: calc(100% + 56px);
        height: 500px;
    }
    div[data-blade-id="1722972806800_ddc"] .image__wrapper::before{
        left: -90px;
        top: -5%;
        width: calc(100% + 160px);
        height: 5530px;
    }
}

/**************

Developer section

**************/


section#\31 723042405049_amu {
    background-color: #032d60;
}
section#\31 723042481381_x2s .background__gradient {
    background-image: linear-gradient(180deg, #032d60 0%, #032d60 100%) !important;
}
section#\31 723042405049_amu p,
section#\31 723042405049_amu .oneup__blade-heading .headline,
section#\31 723042405049_amu .oneup--blade .blade__description,
section#\31 723042481381_x2s p,
section#\31 723042481381_x2s h3,
section#\31 723042481381_x2s .cta_button{
    color: #fff !important;
}

section#\31 723042481381_x2s .cta_button:focus{
    background: transparent;
}

section#\31 723042405049_amu  .cta_button{
    background-color: #fff;
    color: #0176d3;
    border-color: #fff;
}

section#\31 723042405049_amu  .cta_button:hover{
    background-color: #eaf5fe;
    border-color: #eaf5fe;
    color: #0176d3;
}

section#\31 723042405049_amu {
    background-image: url('https://wp.sfdcdigital.com/mulesoft/en-us/wp-content/uploads/sites/40/2024/10/image_dev_section_circle.png');
    background-position: calc(100% + 24px) bottom;
    background-size: 175px 375px;
    background-repeat: no-repeat;
}

@media screen and (min-width: 768px) {
    section#\31 723042405049_amu {
        background-image: url('https://wp.sfdcdigital.com/mulesoft/en-us/wp-content/uploads/sites/40/2024/10/image_dev_section_circle.png');
        background-position: right bottom;
        background-size: auto 500px;
        background-repeat: no-repeat;
    }
}

@media screen and (min-width: 1024px) {
    section#\31 723042405049_amu {
        background-image: url('https://wp.sfdcdigital.com/mulesoft/en-us/wp-content/uploads/sites/40/2024/10/developer-section-top-background.webp'),
        url('https://wp.sfdcdigital.com/mulesoft/en-us/wp-content/uploads/sites/40/2024/10/image_dev_section_circle_desktop.webp');
        background-position: left top, right top;
        background-size: 100%, 428px 400px;
        background-repeat: no-repeat;
    }
}

@media screen and (min-width: 1024px) {
    section#\31 723042481381_x2s {
        background-image: url('https://wp.sfdcdigital.com/mulesoft/en-us/wp-content/uploads/sites/40/2024/10/developers_bottom_cloud.webp');
        /* top: 0; */
        /* left: 0; */
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: right top;
    }
}

/**************

Color Backgrounds

**************/

div[data-blade-id="1722972008691_fvd"],
div[data-blade-id="1722972312934_15a9"],
div[data-blade-id="1722972377028_tl"],
div[data-blade-id="1728415409050_ci9"],
section#\31 722970549156_r2m,
section#\31 722971028790_16fr,
section#\31 722971545954_1c4z {
    background: #eaf5fe;
}
div[data-blade-id="1722972420778_xd0"] .background__gradient {
    background-image: linear-gradient(180deg, #eaf5fe 0%, #eaf5fe 100%) !important;
}


section[id="1722969001266_12cl"] {
    background-image: linear-gradient(180deg, transparent 70%, #eaf5fe 30%);
}

@media screen and (min-width: 1024px) {
    div[data-blade-id="1722969001266_12cl"] {
        overflow-x: clip;
    }

    section[id="1722969001266_12cl"]::before, section[id="1722969001266_12cl"]::after {
        background-image: url('https://wp.sfdcdigital.com/mulesoft/en-us/wp-content/uploads/sites/40/2024/10/image_large_tile_pattern_left_desktop.svg');
        background-repeat: no-repeat;
        content: '';
        position: absolute;
        display: block;
        width: 985px;
        height: 985px;
        z-index: 1;
        transform: translateX(-143%);
        top: 64px;
        left: 50%;
        pointer-events: none;
    }

    section[id="1722969001266_12cl"]::after {
        background-image: url('https://wp.sfdcdigital.com/mulesoft/en-us/wp-content/uploads/sites/40/2024/10/image_large_tile_pattern_right_desktop.svg');
        right: 50%;
        transform: translateX(143%);
        overflow: visible;
        left: auto;
    }
    section[id="1722969001266_12cl"] .container {
        z-index: 2;
        position: relative;
    }
}


/*

    HOT FIX PROMO BANNER BUTTON - REMOVE AFTER DEPLOY

*/

.ms-com-content-header-with-banner .promotion-banner .promotion-banner-inside .cross {
    background: transparent;
    border: none;
}