/*
Mobile-first styling
 */
.mkpl-banner {
    width: 100%;
    margin-bottom: 20px;
}

.mkpl-banner-text p {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 0;
}

.mobile .mkpl-banner-text {
    margin-left: -35px;
    padding: 15px;
}

.mkpl-banner-text a {
    color: #54de62;
}

.mkpl-banner-text .button {
    background-color: #54de62;
    border: 1px solid #54de62;
    border-radius: 4px;
    color: #071A2B;
    width: 100%;
    padding: 8px 10px;
    margin: 10px 0 0;
    text-align: center;
    box-sizing: border-box;
    display: block;
}

.mkpl-banner-icon svg path {
    stroke-width: 3px;
}

.mkpl-banner-icon {
    margin-bottom: -5px;
}

.desktop {
    display: none;
    position: relative;
}

.mobile {
    display: flex;
    align-items: center;
    background-color: #071a2b;
}

.fixed-bg {
    background-image: none;
    margin-bottom: 20px;
    background-color: #071a2b;
}

svg.mobile {
    display: inline-block;
}

svg.tablet {
    display: none;
}

.mkpl-banner-icon svg.mobile {
    width: 125px;
}

.mkpl-banner-icon svg.tablet {
    width: 100px;
}

.mkpl-banner-text svg.mobile {
    max-width: 100px;
    display: block;
    margin-bottom: 5px;
}

/* Tweaks for affiliate dashboard version of banners */
.mkpl-banner.extended {
    margin-top: 0;
    align-items: center;
    width: 100%;
    background: #071a2b;
    justify-content: flex-start;
    display: flex;
}

.mkpl-banner.extended .mkpl-banner-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: 10px 10px 10px 0;
    margin-left: -20px;
}

.cont.for-alerts .alert .close {
    right: 0;
}

a.button.mkpl[disabled] {
    cursor: not-allowed;
    border-color: transparent;
}

a.button.mkpl[disabled]:hover {
    text-decoration: none;
}

a.button.mkpl.error {
    background: darkred;
    color: #fff;
}

#mkpl-banner-alert-error a {
    text-decoration: underline;
    color: darkred;
}

/* Button sizing fix for non-vertical smaller screens */
@media only screen and (min-device-width: 600px) {
    .mkpl-banner-text .button {
        margin-top: 10px;
        width: auto;
        display: inline-block;
        white-space: nowrap;
    }
}

/* Styling for tablet sizes */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

    .mobile .mkpl-banner-text {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        margin-left: 0;
    }

    .mkpl-banner-text .button {
        margin-top: 0;
        width: auto;
        display: inline-block;
        white-space: nowrap;
    }

    svg.tablet {
        display: inline-block;
    }

    svg.mobile {
        display: none;
    }

    .mkpl-banner-text svg.mobile {
        display: none;
    }

    .mkpl-banner-text {
        padding: 10px;
    }

    .mkpl-banner.extended {
        margin-top: 0px;
    }

    .mkpl-banner.extended .mkpl-banner-text {
        align-items: flex-start;
        margin-left: 10px;
    }

    .mkpl-banner.extended .mkpl-banner-text .button {
        margin-top: 10px;
    }
}

/* desktop styles */
@media only screen and (min-width: 1024px) {

    .mkpl-banner-text .button {
        display: inline-block;
    }

    .fixed-bg {
        background-repeat: no-repeat;
        background-position: top right;
        background-size: contain;
        background-attachment: fixed;
        background-image: url("data:image/svg+xml,%3Csvg width='930' height='1100' viewBox='0 0 930 1100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_440_699)'%3E%3Crect width='1465' height='1100' fill='%23071A2B'/%3E%3Cpath d='M802.612 780.425L1025.19 513.019C1062.88 467.855 1073.27 406.105 1053.07 351.087L933.026 24.7545C912.613 -30.4177 864.634 -70.4809 806.741 -80.3339L463.912 -139.416C406.02 -149.269 347.074 -127.679 309.75 -82.5726L86.9608 184.678C49.2684 229.842 38.8822 291.592 59.0826 346.61L179.336 673.097C199.749 728.27 247.727 768.333 305.62 778.186L648.449 837.268C706.187 847.334 765.133 825.744 802.612 780.425Z' fill='%235DE36A'/%3E%3Cpath d='M907.445 1221.27C850.088 1239.3 788.416 1238.15 731.772 1217.99C675.128 1197.82 626.601 1159.75 593.543 1109.52C560.485 1059.3 544.699 999.672 548.576 939.671C551.287 897.71 563.512 857.166 584.042 821M1097.63 1000.53C1106.99 941.138 1096.73 880.313 1068.41 827.273C1040.09 774.234 995.259 731.871 940.7 706.602C920.876 697.421 900.161 690.679 879 686.424' stroke='%231CB1F5' stroke-width='3'/%3E%3Cpath d='M584.042 821C592.868 805.452 603.229 790.713 615.028 777.018C654.274 731.468 707.299 699.952 766.066 687.245C803.48 679.156 841.924 678.971 879 686.425' stroke='white' stroke-width='3'/%3E%3Ccircle cx='582.729' cy='822.729' r='10.5' transform='rotate(-52.2834 582.729 822.729)' fill='white'/%3E%3Ccircle cx='876.729' cy='687.729' r='10.5' transform='rotate(-52.2834 876.729 687.729)' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_440_699'%3E%3Crect width='1465' height='1100' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
    }

    .mkpl-banner {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        margin-bottom: 0;
    }

    .mobile {
        display: none;
    }

    .desktop {
        display: flex;
        text-align: right;
        justify-content: flex-end;
        height: 100%;
        width: 100%;
    }

    .desktop > div:not(.fixed-bg) {
        padding: 150px 50px 50px;
    }

    svg.logo {
        max-width: 250px;
        margin-bottom: 30px;
    }

    .desktop > div > p {
        font-size: 30px;
        max-width: 400px;
        line-height: 1;
        color: #071a2b;
        margin-bottom: 10px;
        font-weight: 300;
    }

    .mkpl-banner.extended {
        margin-top: -10px;
    }

    .mkpl-banner.extended svg.tablet {
        display: inline-block;
    }

    .mkpl-banner.extended svg.mobile {
        display: none;
    }

    .mkpl-banner.extended .mkpl-banner-text {
        flex-direction: row;
        margin-left: 10px;
        align-items: center;
    }

    .mkpl-banner.extended .mkpl-banner-text .button {
        margin-top: 0;
    }
}

/* larger screen desktop style */
@media only screen and (min-width: 1200px) {
    .desktop > div > p {
        font-size: 35px;
        max-width: 500px;
    }
}