:root {
    --defaultSectionPadding: 4% 0;
    --defaultRowWidth: 80%;
    --headerHeight: 120px;
}

:focus {
    outline: 3px dotted #008252;
    outline-offset: 1px;
}

.animated-cards-block:is(.dark,.green,.charcoal) :not(.bnpp-button) {
    color: var(--wp--preset--color--white)!important;
}
.animated-cards-block:is(.light) :not(.bnpp-button) {
    color: black!important;
}

main a[target="_blank"]:not([class]) {
    display: inline-block;
    font-family: BNPP Sans;
    line-height: 26px;
    letter-spacing: 0%;
    /* text-transform: capitalize; */
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    text-decoration-color: #008252;
    color: #008252;
}

main a[target="_blank"]:not([class])::after {
    content: "";
    background-image: url(../images/arrow-bis.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 30px;
    height: 20px;
    padding-right: 11px;
    margin-left: 2px;
}

main a[target="_blank"]:not([class]):hover {
    font-family: BNPP Sans;
    line-height: 26px;
    letter-spacing: 0%;
    /* text-transform: capitalize; */
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    text-decoration-color: #004E31;
    color: #004E31;
}
main a[target="_blank"]:not([class]):hover::after {
    background-image: url(../images/arrow-after.png);
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    padding-right: 15px;
    margin-left: 2px;
    position: relative;
    top: 0.15vh;
    left: 0;

}

main a:not([class]) {
    display: inline-block;
    font-family: BNPP Sans;
    line-height: 26px;
    letter-spacing: 0%;
    /* text-transform: capitalize; */
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    text-decoration-color: #008252;
    color: #008252;
}

main a:not([class]):hover {
    font-family: BNPP Sans;
    line-height: 26px;
    letter-spacing: 0%;
    /* text-transform: capitalize; */
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    text-decoration-color: #004E31;
    color: #004E31;
}

main .dark a[target="_blank"]:not([class]) {
    display: inline-block;
    font-family: BNPP Sans;
    line-height: 26px;
    letter-spacing: 0%;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    text-decoration-color: #7DCBBA;
    color: #7DCBBA;
}

main .dark a[target="_blank"]:not([class])::after {
    content: "";
    background-image: url(../images/arrow-bis.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 30px;
    height: 20px;
    padding-right: 11px;
    margin-left: 2px;
}

main .dark a[target="_blank"]:not([class]):hover {
    font-family: BNPP Sans;
    line-height: 26px;
    letter-spacing: 0%;
    /* text-transform: capitalize; */
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    text-decoration-color: #008252;
    color: #008252;
}
main .dark a[target="_blank"]:not([class]):hover::after {
    background-image: url(../images/arrow-after.png);
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    padding-right: 15px;
    margin-left: 2px;
    position: relative;
    top: 0.15vh;
    left: 0;

}

main .dark a:not([class]) {
    display: inline-block;
    font-family: BNPP Sans;
    line-height: 26px;
    letter-spacing: 0%;
    /* text-transform: capitalize; */
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    text-decoration-color: #7DCBBA;
    color: #FFFFFF;
}

main .dark a:not([class]):hover {
    font-family: BNPP Sans;
    line-height: 26px;
    letter-spacing: 0%;
    /* text-transform: capitalize; */
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    text-decoration-color: #7DCBBA;
    color: #7DCBBA;
}

main .dark a[target="_blank"]:not([class]) {
    text-decoration-color: #7DCBBA;
    color: #FFFFFF;
}

main .green a[target="_blank"]:not([class]):hover {
    text-decoration-color: #7DCBBA;
    color: #7DCBBA;
}


main .green a:not([class]) {
    text-decoration-color: #7DCBBA;
    color: #FFFFFF;
}

main .green a:not([class]):hover {
    text-decoration-color: #7DCBBA;
    color: #7DCBBA;
}


html {
    background-color: var(--wp--preset--color--white, #ffffff);
    color: var(--wp--preset--color--bnpp-black, #1D1D1B);
}

html.hidden {
    display: none;
}

.skip-link {
    position: absolute;
    top: 0;
    left: var(--wp--preset--spacing--60);
    background: var(--wp--preset--color--bnpp-green);
    color: var(--wp--preset--color--white);
    padding: var(--wp--preset--spacing--20);
    border-radius: 0 0 10px 10px;
    z-index: 999999;
    transition: 300ms;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0%);
}

.columns-block .bnpp-container {
	padding: 0 36px;
}

:is(header, footer, #main-content) .bnpp-container {
    max-width: var(--wp--style--global--wide-size);
    width: 80%;
    margin: 0 auto;
}

:is(p, a, h1, h2, h3, h4, h5, h6, span, div) {
    text-wrap: pretty;
}

/* Font weight fix for p tags inside a tags */
a:where(:not(.wp-element-button)) p {
    font-weight: 300;
}

/* Padding fix for legacy pages */
main.site-main > article > .entry-content.bnpp-container {
    padding: var(--wp--preset--spacing--80) 0;
}

:is(.single-post, .single-mediaroom) .entry-content.bnpp-container {
    margin-left: 0!important;
    width: 90% !important;
    padding: 0!important;
}

.bnpp-button {
    --buttonHoverColour: #0C2728;
    --buttonFocusColour: #B2D9CB;
    background-color: var(--wp--preset--color--bnpp-green);
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
    color: var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--medium);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: 300ms;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: var(--wp--preset--spacing--40);
    position: relative; 
    border-radius: 3px;

    &.secondary {
        --buttonHoverColour: #EDF5F2;
        --buttonFocusColour: #D9ECE5;
        background-color: #FFFFFF;
        color: #008252;
        border: 1px solid #008252;

        &:hover {
            border-color: var(--buttonHoverColour);
        }

        &:focus {
            color: #008252;
        }
    }

    &.tertiary {
        --buttonHoverColour: #FDC3001A;
        --buttonFocusColour: #F7F7F7;
        background-color: transparent;
        color: #1E1E1E;
        border: solid 1px #FDC300;

        &:hover {
            color: #1E1E1E;
        }

        /* &:focus {
            outline: solid 1px #F7F7F7;
        } */
    }

    &:hover {
        border-radius: 3px;
        background-color: var(--buttonHoverColour);
    }
    &:focus {
        background-color: var(--buttonFocusColour);
        color: #0C2728;

        span.button-icon {
			transform: translateX(5px);
		}
    }

	/* &:focus {
        outline: 3px dotted #008252;
        outline-offset: 1px;
    }

    &:focus-visible {
        outline: 3px dotted #008252;
        outline-offset: 1px;
    } */

    &[aria-disabled="true"] {
        pointer-events: none;
        opacity: 0.5;
        cursor: not-allowed;
    }

    span.button-icon {
        display: inline-block;
        --iconSize: 20px;
        width: var(--iconSize);
        background-color: currentColor;
        height: 2.3px;
        border-radius: 50px;
        transition: 300ms;

        &::before,
        &::after {
            content: "";
            position: absolute;
            width: calc(var(--iconSize) / 1.4);
            height: 3px;
            background: currentColor;
            border-radius: 50px;
            transform-origin: right;
        }

        &::before {
            transform: translateX(5.5px) translateY(0.5px) rotate(45deg);
        }

        &::after {
            transform: translateX(5.5px) translateY(-0.5px) rotate(-45deg);
        }
    }
}

.dark .bnpp-button, .green .bnpp-button {
    --buttonHoverColour: #FFFFFF;
    --buttonFocusColour: #B2D9CB;
    background-color: var(--wp--preset--color--bnpp-green);
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
    color: var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--medium);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: 300ms;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: var(--wp--preset--spacing--40);
    position: relative; 
    border-radius: 3px;

    &.secondary {
        --buttonHoverColour: transparent;
        --buttonFocusColour: transparent;
        background-color: #0C2728;
        color: #B2D9CB;
        border: 1px solid #B2D9CB;

        &:hover {
            color: #B2D9CB;
            background-color: #0C2728;
            box-shadow: 0 2px 2px 0 rgba(178, 217, 203, 0.50);
        }

        &:focus {
            border-color: #66B498;
            background-color: #66B498;
            color: #0C2728;
        }
    }

    &.tertiary {
        --buttonHoverColour: transparent;
        --buttonFocusColour: transparent;
        background-color: transparent;
        color: #FDC300;
        border: solid 1px #FDC300;

        &:hover {
            color: #FDC300;
            box-shadow: 0 2px 2px 0 rgba(253, 195, 0, 0.50);
        }

        &:focus {
            background: #333;
            color: #FDC300;
            /* outline: solid 1px #FDC300;             */
        }
    }

    &:hover {
        border-radius: 3px;
        background-color: var(--buttonHoverColour);
        color: #0C2728;
    }
    &:focus {
        background-color: var(--buttonFocusColour);
        color: #0C2728;

        span.button-icon {
			transform: translateX(5px);
		}
    }

	&:focus {
        outline: 3px dotted #008252;
        outline-offset: 1px;
    }

    &:focus-visible {
        outline: 3px dotted #008252;
        outline-offset: 1px;
    }

    &[aria-disabled="true"] {
        pointer-events: none;
        opacity: 0.5;
        cursor: not-allowed;
    }

    span.button-icon {
        display: inline-block;
        --iconSize: 20px;
        width: var(--iconSize);
        background-color: currentColor;
        height: 2.3px;
        border-radius: 50px;
        transition: 300ms;

        &::before,
        &::after {
            content: "";
            position: absolute;
            width: calc(var(--iconSize) / 1.4);
            height: 3px;
            background: currentColor;
            border-radius: 50px;
            transform-origin: right;
        }

        &::before {
            transform: translateX(5.5px) translateY(0.5px) rotate(45deg);
        }

        &::after {
            transform: translateX(5.5px) translateY(-0.5px) rotate(-45deg);
        }
    }
}

/* Blockquote styles */
:is(.accordion-module, .columns-block) blockquote {
    color: var(--wp--preset--color--bnpp-green);
    border-left: solid 3px var(--wp--preset--color--bnpp-green);
    margin: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
    width: auto;
    
    p {
        color: var(--wp--preset--color--bnpp-green);
        font-family: var(--wp--preset--font-family--bnpp-sans-condensed)!important;
        margin: 0;
        font-size: var(--wp--preset--font-size--heading-m);
        padding: var(--wp--preset--spacing--60);
        font-weight: 400;
    }
    
    &&::before,
    &&::after {
        content: none!important;
    }
}   

:is(.accordion-module, .columns-block) blockquote::before,
:is(.accordion-module, .columns-block) blockquote::after {
    content: none!important;
}

:is(.accordion-module, .columns-block) blockquote p {
    color: var(--wp--preset--color--bnpp-green);
    font-family: var(--wp--preset--font-family--bnpp-sans-condensed)!important;  
    margin: 0;
    font-size: var(--wp--preset--font-size--heading-m);
    padding: var(--wp--preset--spacing--60);
    font-weight: 400;
}

/* fundsearch styles */

#main-content #fundsearch.old {
    max-width: var(--wp--style--global--wide-size);
}

#main-content #fundsearch.new {
    max-width: none;
}

/* Fundsheet styles */

#fundsheet .bnp-breadcrumb {
    display: none;
}

/* #fundsheet .public-websites-fundsheet > div > div:not(:has(#story-content)):not(:has([data-e2e="fundsheetHeader"])):not(:has(.fundsheet-navbar)) {
    width: var(--defaultRowWidth, 80%);
    max-width: var(--wp--style--global--wide-size, 1250px);
} */

#fundsheet .public-websites-fundsheet div:has(>.fundsheet-navbar) {
    padding: 0;
    margin-top: -30px;
}

#fundsheet .public-websites-fundsheet div:has(#story-content) {
    padding: 0;
}

.bnpvp-articles-disclaimer .disclaimer a {
    color: currentColor;
    font-weight: 300;
    text-decoration: underline;
    cursor: pointer;

    &:hover {
        text-decoration: none;
    }
}

/* Fundcomparison styles */

.page-template-template-fundcomparison div#bnp-article {
    padding-top: var(--wp--preset--spacing--60);

    & > :is(section, div) {
        max-width: var(--wp--style--global--wide-size);
        width: 80%;
        margin: 0 auto;
    }
}

/* Audioplayer */

.audioplayer {
    height: 2.5em;
   /* 40 */
    color: #000;
    position: relative;
    z-index: 1;
    background: #eee;
    padding:5px;
    border-radius: 25px;
    -moz-outline-radius: 25px;
    margin-bottom: var(--wp--preset--spacing--40);
}
.audioplayer-mini {
    width: 2.5em;
   /* 40 */
    margin: 0 auto;
}
.audioplayer > div {
    position: absolute;
}
.audioplayer-playpause {
    width: 2.5em;
   /* 40 */
    height: 100%;
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    top: 5px;
    left: 5px;
}
.audioplayer:not(.audioplayer-mini) .audioplayer-playpause {
    height: 30px;
    width: 30px;
    margin: 5px;
    background-color: #008252;
    border-radius: 50%;
    -webkit-border-radius:50%;
}
.audioplayer-mini .audioplayer-playpause {
    width: 100%;
}
.audioplayer-playpause:hover, .audioplayer-playpause:focus {
    background-color: rgba(0, 130, 82, 0.7);
}
.audioplayer-playpause a {
    display: block;
}
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a {
    width: 0;
    height: 0;
    border: 0.5em solid transparent;
   /* 8 */
    border-right: none;
    border-left-color: #fff;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.5em 0 0 -0.25em;
   /* 8 4 */
}
.audioplayer-playing .audioplayer-playpause a {
    width: 0.75em;
   /* 12 */
    height: 0.75em;
   /* 12 */
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.375em 0 0 -0.375em;
   /* 6 */
}
.audioplayer-playing .audioplayer-playpause a:before, .audioplayer-playing .audioplayer-playpause a:after {
    width: 40%;
    height: 100%;
    background-color: #fff;
    content: '';
    position: absolute;
    top: 0;
}
.audioplayer-playing .audioplayer-playpause a:before {
    left: 0;
}
.audioplayer-playing .audioplayer-playpause a:after {
    right: 0;
}
.audioplayer-time {
    width: 4.375em;
   /* 70 */
    height: 100%;
    line-height: 52px;
   /* 38 */
    text-align: left;
    padding-left:12px;
    z-index: 2;
    top: 0;
}
.audioplayer-time-current {
    left: 2.5em;
   /* 40 */
}
.audioplayer-time-duration {
    right: 1.5em;
   /* 40 */
}
.audioplayer-novolume .audioplayer-time-duration {
    border-right: 0;
    right: 0;
}
.audioplayer-bar {
    height: 3px;
   /* 14 */
    background-color: #ccc;
    cursor: pointer;
    z-index: 1;
    top: 30px;
    right: 6.875em;
   /* 110 */
    left: 6.875em;
   /* 110 */
    margin-top: -0.438em;
   /* 7 */
}
.audioplayer-novolume .audioplayer-bar {
    right: 4.375em;
   /* 70 */
}
.audioplayer-bar div {
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.audioplayer-bar-loaded {
    background-color: #aaa;
    z-index: 1;
}
.audioplayer-bar-played {
    background: #008252;
    background: -webkit-gradient( linear, left top, right top, from( #008252 ), to( #008252 ) );
    background: -webkit-linear-gradient( left, #008252, #008252);
    background: -moz-linear-gradient( left, #008252, #008252 );
    background: -ms-radial-gradient( left, #008252, #008252 );
    background: -o-linear-gradient( left, #008252 #008252 );
    background: linear-gradient( left, #008252, #008252 );
    z-index: 2;
}
.audioplayer-bar-played:after {
    width: 15px;
    height: 15px;
    content:" ";
    position: absolute;
    background: #008252;
    right: 0;
    top: -6px;
    border-radius: 50%;
}
.audioplayer-volume {
    width: 2.5em;
   /* 40 */
    height: 100%;
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    top:1px;
    right: 10px;
}
.audioplayer-volume:hover, .audioplayer-volume:focus {
   /* background-color: #222;
   */
}
.audioplayer-volume-button {
    width: 100%;
    height: 100%;
}
.audioplayer-volume-button a {
    width: 0.313em;
   /* 5 */
    height: 0.375em;
   /* 6 */
    background-color: #008252;
    display: block;
    position: relative;
    z-index: 1;
    top: 40%;
    left: 35%;
}
.audioplayer-volume-button a:before, .audioplayer-volume-button a:after {
    content: '';
    position: absolute;
}
.audioplayer-volume-button a:before {
    width: 0;
    height: 0;
    border: 0.5em solid transparent;
   /* 8 */
    border-left: none;
    border-right-color: #008252;
    z-index: 2;
    top: 50%;
    right: -0.25em;
    margin-top: -0.5em;
   /* 8 */
}
.audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after {
    width: 0.3em;
    height: 0.313em;
    border: 0.27em double #008252;
    border-width: 0.2em 0.2em 0 0;
    left: 0.563em;
    -webkit-border-radius: 0 0.938em 0 0;
   /* 15 */
    -moz-border-radius: 0 0.938em 0 0;
   /* 15 */
    border-radius: 0 0.938em 0 0;
   /* 15 */
    -webkit-transform: rotate( 45deg );
    -moz-transform: rotate( 45deg );
    -ms-transform: rotate( 45deg );
    -o-transform: rotate( 45deg );
    transform: rotate( 45deg );
}
.audioplayer-volume-adjust {
    height: 6.25em;
   /* 100 */
    cursor: default;
    position: absolute;
    left: 0;
    right: -1px;
    top: -9999px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.audioplayer-volume:not(:hover) .audioplayer-volume-adjust {
    opacity: 0;
}
.audioplayer-volume:hover .audioplayer-volume-adjust {
    top: auto;
    bottom: 100%;
}
.audioplayer-volume-adjust > div {
    width: 20%;
    height: 80%;
    background-color: rgba(230, 230, 230, 0.7);
    cursor: pointer;
    position: relative;
    z-index: 1;
    margin: 30% auto 0;
}
.audioplayer-volume-adjust div div {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 130, 82, 0.5);
    background: -webkit-gradient( linear, left bottom, left top, from( rgba(0, 130, 82, 0.7) ), to( rgba(0, 130, 82, 0.9)) );
    background: -webkit-linear-gradient( bottom, rgba(0, 130, 82, 0.7), rgba(0, 130, 82, 0.9));
    background: -moz-linear-gradient( bottom, rgba(0, 130, 82, 0.7), rgba(0, 130, 82, 0.9));
    background: -ms-radial-gradient( bottom, rgba(0, 130, 82, 0.7), rgba(0, 130, 82, 0.9));
    background: -o-linear-gradient( bottom, rgba(0, 130, 82, 0.7), rgba(0, 130, 82, 0.9));
    background: linear-gradient( bottom, rgba(0, 130, 82, 0.7), rgba(0, 130, 82, 0.9));
}
.audioplayer-novolume .audioplayer-volume {
    display: none;
}
.audioplayer-play, .audioplayer-pause, .audioplayer-volume a {
    -webkit-filter: drop-shadow( 1px 1px 0 #008252 );
    -moz-filter: drop-shadow( 1px 1px 0 #008252 );
    -ms-filter: drop-shadow( 1px 1px 0 #008252 );
    -o-filter: drop-shadow( 1px 1px 0 #008252 );
    filter: drop-shadow( 1px 1px 0 #008252 );
}
.audioplayer-bar, .audioplayer-bar div, .audioplayer-volume-adjust div {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.audioplayer *, .audioplayer *:before, .audioplayer *:after {
    -webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -o-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    transition: color .25s ease, background-color .25s ease, opacity .5s ease;
}

/* 2024 Theme legacy accordion support */
.bnpp-container .bnp-accordion-section {
    margin-bottom: 80px;
    
    .bnp-accordion-entry {
        margin-bottom: 15px;   

        .bnp-accordion-header {
            position: relative;
            padding: 1rem 0;
            cursor: pointer;
            width: 100%;
            background-color: transparent;
            border: none;
            border-bottom: solid 2px currentColor;

            &>img {
                width: 58px;
                float: left;
                display: none;
                margin: -16px 30px 0 0;
            }

            &::before,
            &::after {
                content: '';
                width: 20px;
                height: 2px;
                line-height: 0;
                background-color: var(--wp--preset--color--bnpp-black);
                position: absolute;
                right: 60px;
                top: 50%;
                transition: 300ms;
            }

            &::before {
                transform: translateX(32%) rotate(-45deg);
            }

            &::after {
                transform: translateX(-32%) rotate(45deg);
            }

            h3 {
                margin: 0;
            }

            .bnp-numbering {
                float: left;
                display: none;
                height: 58px;
                width: 58px;
                margin: -17px 20px 0 0;
                font-size: 1rem;
                font-family: "bnpbold";
                padding-top: 18px;
                text-align: center;
                border: 2px solid #fff;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                box-sizing: border-box;
            }
                
        }

        .bnp-accordion-content {
            display: none;
            background-color: #fff;
            -moz-box-shadow: -5px 0 15px 0 rgba(0,0,0,0.16);
            -webkit-box-shadow: -5px 0 15px 0 rgba(0,0,0,0.16);
            -o-box-shadow: -5px 0 15px 0 rgba(0,0,0,0.16);
            box-shadow: -5px 0 15px 0 rgba(0,0,0,0.16);

            &::after {
                content: "";
                display: table;
                clear: both;
            }

            h2 {
                font-size: 2rem;
                font-family: "bnpbold";
                color: #000;
                margin-bottom: 30px;
            }

            p {
                font-size: 1.25rem;
                color: #000;
                line-height: 28px;
            }

            .bnp-basic-content {
                padding: 2rem 3rem;

                &>img {
                    float: left;
                    margin: 0 30px 30px 0;
                    margin: -16px 30px 0 0;
                }
                
            }

            .bnp-document-section {
                margin: 12px auto 0px auto;
                padding: 82px 0 0 0;
                background-color: #dbf3ea;

                h2 {
                    text-align: center;
                }

                .bnp-document-entry {
                    float: none;
                    margin: 0 auto 20px auto;
                }
            }

            .bnp-accordion-table {
                background-color: #dbf3ea;

                .bnp-entry {
                    padding: 30px 0;
                    margin: 0;
                    border-top: 1px solid #919191;

                    &:first-child {
                        border: none
                    }

                    h2 {
                        margin-bottom: 0;
                    }

                    img {
                        width: 41px;
                    }

                    .bnp-button {
                        background: #fff;
                        color: #212121;
                    }

                    .bnp-grid-cell:first-child {
                        text-align: center;

                        &:nth-child(4) {
                            text-align: center;
                        }
                    }
                }
            }
            
                                    
        }

        &.active {
            
            .bnp-accordion-header {
                &::before {
                    transform: translateX(32%) rotate(45deg);
                }
    
                &::after {
                    transform: translateX(-32%) rotate(-45deg);
                }
            }
            
        }


    }
}

.bnpp-container .bnp-accordion-section.bnp-number .bnp-accordion-entry .bnp-accordion-header .bnp-numbering {
    display: inline-block
}

.bnpp-container .bnp-accordion-section.bnp-arrow .bnp-accordion-entry .bnp-accordion-header>img {
    display: inline-block
}

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50vw;
    height: 55vh;
    padding: 20px;
    background: #F6FBF9;
    box-shadow: 0 0 10px rgba(0 0 0 0.3);
    z-index: 10001;
    border-top: 3px solid #008252;
}
.popup h5 {
    font-family: BNPP Sans Condensed;
    font-size: 30px;
    font-weight: 400;
    line-height: 36px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #008252;
    margin-block-start: 0;
    margin-block-end: 0;
}
.popup button {
    color: #0C2728;
    border: none;
}

.popup .popupHeader {
    display: flex;
    justify-content:  space-between;
    align-items: center;
}

.popup .popupHeader a {
    text-decoration: none;
}

.popup .popup-body {
    font-family: BNPP Sans;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    overflow: auto;
    max-height: 90%;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.blurred{
  background: rgba(12, 39, 40, 0.70);
  backdrop-filter: blur(25px);
}

.bnp-loader{border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #0d864f;width:160px;height:160px;margin:30px auto;-webkit-animation:spin 2s ease infinite;animation:spin 2s ease infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
#bnp-hub{position:fixed;z-index:1000;top:0;left:0;height:100%;width:100%;padding:50px 0;background:rgba(0,0,0,0.7);box-sizing:border-box;overflow:auto}
.mid-display {width:80%;margin:0 auto;}

.tpldashboard 
{
	min-height: 500px!important;
	background-color: white!important;
	margin: auto!important;
	max-width:none!important;
}

/* Fix for SVGs with wrong Green */
svg path[style*="stroke: #00915a"] {
    stroke: var(--wp--preset--color--bnpp-green)!important;
}
p.bnpp-content-slider-module-text {
    font-size: 18px!important;
    font-family: NPP Sans Regular!important;
}
h3.bnpp-content-slider-module-title {
    font-size: 36px!important;
    font-family: BNPP Sans Condensed!important;
}

#onetrust-accept-btn-handler, #onetrust-pc-btn-handler, .onetrust-close-btn-handler, #onetrust-banner-sdk a[href] {
     &:focus {
        outline: 3px dotted #008252!important;
        outline-offset: 1px!important;
    }
}
.asisdisplay
{
	display:contents;
}
.unsetbackborder
{
    background: unset;
    border: unset;
}
.custom-margin-title {
    margin-top: 20px;
}

.custom-margin-component {
    h1,h2,h3,h4,h5,h6 {
        margin: 41px 50px 41px 50px;
    }

    ul {
        margin: 50px 10px 50px 0;
    }


    a {
        margin-right: 30px;
    }

    button {
        margin-right: 30px;
    }
}

.custom-columns-justify-component {
	justify-content: center !important;
    align-content: center !important;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

	h1,h2,h3,h4,h5 {
		width: 1250px;
	}
    div {
        width: 1250px;
    }
	
}
.gapbouton
{
	margin-right:20px;
	height:42px;
}
.fixedheight
{
	height:42px;
}