/* Frontend styles */

.c-grid-content-container, .blockelement__draggable-element{
    --main-background-color: #FFFFFF;
    --title-size: 20px;
    --title-size-small: 16px;
    --title-weight: 600;
    --section-padding-top: 0;
    --section-padding-bottom: 1em;
    --text-size: var(--font-text-desktop);
    --title-padding-top: 1em;
    --title-padding-bottom: 1em;
    --title-padding-left: 0.75em;
    --title-padding-right: 0.75em;
    --title-color: #24599E;
    --text-color: var(--dark-grey, #4B4B4B);
    --button-color: white;
    --link-background-color: var(--section-btn-normal);
    --legend-size: 20px;

    overflow-wrap: anywhere;
    overflow: auto;

    .c-b-spacer-content{
        &.spacer-small{
            padding: 0.5em 0;
        }
        &.spacer-medium{
            padding: 1em 0;
        }
        &.spacer-large{
            padding: 2em 0;
        }
    }
    
    .pageGridSection .pageGridSection .pageGridFeatured-content .pageGridHeader-content{
        padding-left: 0;
        padding-right: 0;
    }

    .stay-connected-box{
        width: 100%;
    }

    .pageGridSection.section-white {
        background-color: #FFFFFF;
        --section-main-blue: var(--main-blue, #24599E);
        --section-dark-grey: var(--dark-grey, #4B4B4B);
        --section-grey: var(--grey, #707070);
        --section-btn-hover: var(--btn-hover, #2064BD);
        --section-btn-normal: var(--btn-normal, #24599E);
        --title-color: #24599E;
        --breadcrumb-color: var(--section-main-blue);
        --text-color: var(--section-dark-grey);
        --item-color: var(--section-dark-grey);
        --item-hover-color: var(--section-main-blue);
        --featured-border-color: var(--section-main-blue);
        --item-publish-date-color: var(--section-grey);
        --link-background-color: var(--section-btn-normal);
        --link-color: var(--section-main-blue);
        --button-color: white;
        --link-hover-background-color: var(--section-btn-hover);
        --pagination-active-background-color: var(--section-main-blue);
        --pagination-active-color: white;
        --pagination-active-border-color: var(--section-main-blue);
        --pagination-background-color: transparent;
        --pagination-color: var(--section-dark-grey);
        --pagination-border-color: var(--section-dark-grey);
        --pagination-hover-background-color: var(--section-btn-hover);
        --pagination-hover-color: white;
        --pagination-hover-border-color: var(--section-btn-hover);
        --link-visited-color: purple;
        --label-color: var(--section-main-blue);
        --input-border-color: var(--section-main-blue);
        --placeholder-color: var(--section-dark-grey);
        --border-title-color: var(--section-main-blue);
        --title-text-area-color: var(--dark-grey);
        --accordion-button-color: var(--section-main-blue);
        --section-focus-visible-color: var(--section-main-blue);
        --agenda-icon-color: var(--section-main-blue);
        --agenda-icon-hover-color: var(--btn-hover);
        --link-visited-color: purple;
        --link-color-anchor-text: var(--main-blue);

        .pageGridSection.section-light-blue .pageGridFeatured-item-content,
        .pageGridSection.section-dark-blue .pageGridFeatured-item-content{
            outline: 0;
            border: 0;
        }

    }
    
    .pageGridSection.section-light-blue {
        background-color: #E8F1FD;
        --title-color: #24599E;
        --section-main-blue: var(--main-blue, #24599E);
        --section-dark-grey: var(--dark-grey, #4B4B4B);
        --section-grey: var(--grey, #707070);
        --section-btn-hover: var(--btn-hover, #2064BD);
        --section-btn-normal: var(--btn-normal, #24599E);
        --breadcrumb-color: var(--section-main-blue);
        --text-color: var(--section-dark-grey);
        --item-color: var(--section-dark-grey);
        --item-hover-color: var(--section-main-blue);
        --featured-border-color: var(--section-main-blue);
        --item-publish-date-color: var(--section-grey);
        --link-background-color: var(--section-btn-normal);
        --link-color: var(--section-main-blue);
        --button-color: white;
        --link-hover-background-color: var(--section-btn-hover);
        --pagination-active-background-color: var(--section-main-blue);
        --pagination-active-color: white;
        --pagination-active-border-color: var(--section-main-blue);
        --pagination-background-color: transparent;
        --pagination-color: var(--section-dark-grey);
        --pagination-border-color: var(--section-dark-grey);
        --pagination-hover-background-color: var(--section-btn-hover);
        --pagination-hover-color: white;
        --pagination-hover-border-color: var(--section-btn-hover);
        --link-visited-color: purple;
        --label-color: var(--section-main-blue);
        --input-border-color: var(--section-main-blue);
        --placeholder-color: var(--section-dark-grey);
        --border-title-color: var(--section-main-blue);
        --title-text-area-color: var(--dark-grey);
        --accordion-button-color: var(--section-main-blue);
        --section-focus-visible-color: var(--section-main-blue);
        --agenda-icon-color: var(--section-main-blue);
        --agenda-icon-hover-color: var(--btn-hover);
        --link-visited-color: purple;
        --link-color-anchor-text: var(--main-blue);

        .pageGridSection.section-white .pageGridFeatured-item-content,
        .pageGridSection.section-dark-blue .pageGridFeatured-item-content{
            outline: 0;
            border: 0;
        }

    }
    
    .pageGridSection.section-dark-blue {
        background-color: #24599E;
        --accordion-button-color: white;
        --title-color: white;
        --breadcrumb-color: white;
        --text-color: white;
        --item-color: white;
        --item-hover-color: lightgrey;
        --featured-border-color: white;
        --item-publish-date-color: white;
        --link-background-color: white;
        --link-color: var(--btn-normal, #24599E);
        --button-color: var(--link-color);
        --link-hover-background-color: lightgrey;
        --breadcrumb-hover-color: lightgrey;
        --pagination-active-background-color: white;
        --pagination-active-color: var(--btn-normal, #24599E);
        --pagination-active-border-color: var(--btn-normal, #24599E);
        --pagination-background-color: transparent;
        --pagination-color: white;
        --pagination-border-color: white;
        --pagination-hover-background-color: transparent;
        --pagination-hover-color: lightgrey;
        --pagination-hover-border-color: lightgrey;
        --link-visited-color: purple;
        --link-reverse-background-color: #24599E;
        --link-reverse-color: white;
        --link-reverse-hover-background-color: white;
        --link-reverse-hover-color: var(--btn-normal, #24599E);
        --link-reverse-outline-color: white;
        --label-color: white;
        --input-border-color: white;
        --placeholder-color: white;
        --grid-link-color: white;
        --navigation-color: white;
        --border-title-color: white;
        --title-text-area-color: white;
        --section-focus-visible-color: white;
        --accordion-button-color: white;
        --agenda-icon-color: white;
        --agenda-icon-hover-color: var(--item-hover-color);
        --link-visited-color: white;
        --link-color-anchor-text: white;

        .pageGridSection.section-white .pageGridFeatured-item-content,
        .pageGridSection.section-light-blue .pageGridFeatured-item-content{
            outline: 0;
            border: 0;
        }

    }
  
    a:not(.breakcrumb-link, .c-downloadbutton, .pageGridNodeOverview-readmore-link, .pageGridAgenda-button-link):not(.pageGridNodeOverview-item a, .stay-connected-content-email-btn a, .pageGridFeatured-item-content a, .pageGridMedia-content a){
        &:visited,
        &.clicked{
            color: var(--link-visited-color, purple);
        }
    }
   
    .c-accordionFaq .fa-angle-down {
        color: var(--accordion-button-color, var(--text-color));
    }

    h1{
        color: var(--title-color);
    }

    h2, h3{
        color: var(--title-color);
        font-weight: var(--title-weight);
    }

    h2{
        font-size: var(--title-size);
    }

    h3{
        font-size: var(--title-size-small);
    }

    .pageGridAgenda-content,
    .pageGridNodeOverview-content{
        --title-size: 20px;
        --title-size-small: 20px;
    }

    .breakcrumb-link,
    .breadcrumb-item{
        color: var(--breadcrumb-color, var(--main-blue));
    }

    a.breakcrumb-link:hover{
        color: var(--breadcrumb-hover-color, var(--dark-blue));
    }

    .accordion-button,
    .accordion-item{
        background-color: transparent;
    }

    .c-text-container, .c-date-container, .umbraco-forms-field-wrapper p{
        color: var(--text-color, var(--dark-grey));
    }

    .c-text-container a{
        color: var(--link-color-anchor-text, var(--main-blue));
    }

    .pageGridFeatured-content{
        --title-size: 20px;
        --title-size-small: 18px;
    }

    .pageGridDocumentList-items{
        --title-color: var(--text-color, var(--dark-grey));
    }

    .pageGridNodeOverview-content{
        --title-size: 20px;
        --title-size-small: 16px;
    }

    .pageGridBanner-content.container-stay-connected{
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }

    .pageGridSection-body,
    .pageGridAgenda-content,
    .pageGridVideo-content,
    .pageGridAccordion-content,
    .pageGridMedia-content,
    .pageGridLinkList-content,
    .pageGridDocumentList-content,
    .pageGridNodeOverview-content,
    .pageGridBanner-content.container-stay-connected,
    .pageGridDownloadButton-content.c-downloadbutton-content,
    .pageGridBackToTop-content.c-backtop-content,
    .cBDate-content,
    .pageGridForm-content {
        padding-bottom: 1em;
    }

    .pageGridMedia-content > div {
        flex: 1 0 100px;
    }

    .pageGridSection-header,
    .pageGridSection-body {
        max-width: var(--normal);
        margin: 0 auto;
        display: flex;
        padding: var(--section-body-padding, var(--section-padding-top, 0) var(--padding-big-sides-desktop) var(--section-padding-bottom, 1em) var(--padding-big-sides-desktop));
    }

    .pageGridSection-header{
        padding-top: 1em;
        .c-title-container{
            padding-bottom: 0;
            padding-left: 0;
            padding-right: 0;
        }
        h2, h3{
            font-size: 20px;
            font-weight: 600;
        }
    }

    .pageGridSection-body:first-child{
        padding-top: 1em;
    }

    .pageGridLinkList-items{
        color: var(--text-color, var(--dark-grey));
        margin-bottom: 0;
    }

    .pageGridSection-body .umb-block-grid__area-container{
        width: 100%;
    }
    
    .pageGridSection-body .umb-block-grid__area-container .c-b-two-column-layout-content .umb-block-grid__area-container{
        padding: 0 !important;
    }

    .pageGridSection-body .c-title-container,
    .pageGridSection-body .c-text-container,
    .pageGridSection-body .c-image-container{
        padding: unset;
    }

    .pageGridHeader-content .share-link {
        padding: 0 0.5em;
        opacity: 0;
        transition: opacity 0.3s linear;
    }    

    .pageGridHeader-content .share-link {
        opacity: 1;
    }

    .pageGridHeader-content:focus-within .share-link {
        opacity: 1;
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
    
    .c-image-label-left,
    .c-image-label-right,
    .c-image-label-center{
        width: 100%;
    }
    
    .c-image-label-left{
        text-align: left;
    }
    
    .c-image-label-right{
        text-align: right;
    }
    
    .c-image-label-center{
        text-align: center;
    }
    
    .figure-wrapper {
        display: flex;
        flex-direction: column;
        width: var(--image-width-ratio, 100%);
        height: var(--image-height-ratio, 56.25%);
        margin: 0;
    
        img{
            width: 100%;
            height: 100%;
        }
    }
    
    .figure-wrapper[caption-position="top"]{
        flex-direction: column-reverse;
    }
    
    .figure-wrapper-left{
        align-items: flex-start;
    }
    
    .figure-wrapper-right{
        align-items: flex-end;
    }
    
    .figure-wrapper-center{
        align-items: center;
    }
    
    .pageGridFeatured-item-title-left,
    .pageGridFeatured-item-text-left{
        text-align: left;
    }
    
    .pageGridFeatured-item-title-right,
    .pageGridFeatured-item-text-right{
        text-align: right;
    }
    
    .pageGridFeatured-item-title-center,
    .pageGridFeatured-item-text-center{
        text-align: center;
    }
    
    .pageGridDocumentList-item,
    .pageGridMedia-item,
    .pageGridAgenda-item{
        display: flex;
        gap: 1rem;
        padding: 0.5rem 0;
        text-decoration: none !important;
        color: var(--item-color, var(--dark-grey));
    }

    .pageGridDocumentList-item,
    .pageGridAgenda-item{
        align-items: center;
    }

    .pageGridSection .pageGridDocumentList-item:hover,
    .pageGridSection .pageGridMedia-item:hover,
    .pageGridSection .pageGridAgenda-item:hover{
        color: var(--item-hover-color, var(--main-blue));

        h2, h3{
            color: var(--item-hover-color, var(--main-blue)) !important;
        }

        .pageGridDocumentList-item-date, .pageGridAgenda-item-date{
            color: var(--item-hover-color, var(--main-blue));
        }
    }

    .pageGridSection .pageGridAgenda-item:hover .pageGridAgenda-item-icon i{
        color: var(--agenda-icon-hover-color, var(--item-hover-color, var(--main-blue)));
    }

    .pageGridAgenda-item i{
        color: var(--agenda-icon-color, var(--item-color, var(--dark-grey)));
    }

    .pageGridDocumentList-item-date,
    .pageGridAgenda-item-date{
        font-size: 14px;
        color: var(--item-color, var(--grey));
    }

    .pageGridAgenda-button{
        padding: 0.5em 0.5em 0.5em 0.5em;
    }

    .pageGridFeatured-item-content{
        padding: 0.5em 0.5em 0.5em 0.5em;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--featured-border-color, var(--main-blue));
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        --title-padding-top: 0em;
        --title-padding-bottom: 0.5em;


        &.pageGridFeatured-item-content-without-image{
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }

        &.pageGridFeatured-item-content-with-image{
            border-top: 0;
        }
    }
    
    .pageGridNodeOverview-item a{
        text-decoration: none !important;
        color: var(--text-color, var(--dark-grey));
    }

    .pageGridNodeOverview-item a:hover{
        color: var(--item-hover-color, var(--main-blue));
        h1, h2, h3{
            color: var(--item-hover-color, var(--main-blue)) !important;
        }
        .pageGridNodeOverview-item-publish-date{
            color: var(--item-hover-color, var(--main-blue));
        }
    }

    .pageGridNodeOverview-item .pageGridNodeOverview-item-publish-date{
        font-size: 14px;
        color: var(--item-publish-date-color, var(--grey));
    }
    
    .c-text p,
    .c-text table,
    .pageGridAccordion-intro,
    .stay-connected-content-email-btn a{
        font-size: var(--text-size, 14px) !important;
    }

    .c-b-two-column-layout-content, .c-b-three-column-layout-content{
        --section-body-padding: 0.75em;
        --column-wrap-banner: wrap;
        --column-justify-content: center;
        --column-gap: 0.5em;

        padding-bottom: 1rem;

        .pageGridSection-body:has(.umb-block-grid__area-container .umb-block-grid__area .umb-block-grid__layout-container > .umb-block-grid__layout-item:only-child[data-content-element-type-alias="cBFeatured"]){
            height: 100%;
        }

        .pageGridSection-body:has(.umb-block-grid__area-container .umb-block-grid__area .umb-block-grid__layout-container > .umb-block-grid__layout-item:only-child[data-content-element-type-alias="cBAgenda"]){
            height: 100%;

            .pageGridAgenda-content{
                display: flex;
                flex-direction: column;
                height: 100%;
                padding-bottom: 0;

                .pageGridAgenda-button{
                    margin-top: auto;
                }
            }
        }
    
        .umb-block-grid__area-container{
            display: flex;
            flex-wrap: nowrap;
            max-width: var(--normal);
            margin: 0 auto;
            grid-gap: 1em;
        }
    
        .umb-block-grid__area{
            flex: 1 0 250px;
            display: flex;
            flex-direction: column;
        }
    
        .umb-block-grid__layout-container{
            display: flex;
            flex-direction: column;
            flex: 1; 
        }
    
        .umb-block-grid__layout-item:not([data-content-element-type-alias="cBSpacer"]){
            display: flex;
            flex-direction: column;
            flex: 1; 
        }
    
        .c-image-container, .c-text-container, .c-video-container{
            max-width: unset;
            margin: unset;
            padding: unset;
        }
    
        .pageGridBanner-content .stay-connected-box{
            flex-wrap: wrap;
            justify-content: center;
            grid-gap: 0.5em;
        
            .stay-connected-content-email-input-container{
                flex-wrap: wrap;
                justify-content: center;
            }
        }
    
        .pageGridSection{
            height: 100%;
        }
    }

    .c-b-three-column-layout-content > .umb-block-grid__area-container{
        container-type: inline-size;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .umb-block-grid__layout-item[data-content-element-type-alias="cBBackToTop"]{
        .c-backtop-content{
            width: 100%;
            display: block;
        }
    }
    
    .i-cont video{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .c-title-container[data-justify-content="center"] {
        justify-content: center;
    }
    
    .c-title-container[data-justify-content="right"] {
        justify-content: end;
    }
    
    .c-title-container[data-justify-content="left"] {
        justify-content: start;
    }
    
    /* Two Column Layout - Frontend Styles */
    
    .c-b-two-column-layout-content {
        width: 100%;
    }
    
    /* 50:50 Layout - Equal columns */
    .c-b-two-column-layout-content.layout-50-50 > .umb-block-grid__area-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1em;
    }
    
    /* 66:33 Layout - Two thirds / One third */
    .c-b-two-column-layout-content.layout-66-33 > .umb-block-grid__area-container{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1em;

        .umb-block-grid__area:nth-child(1){
            grid-column: span 2;
        }

        .umb-block-grid__area:nth-child(2){
            grid-column: span 1;
        }
    }
    
    /* 33:66 Layout - One third / Two thirds */
    .c-b-two-column-layout-content.layout-33-66 > .umb-block-grid__area-container{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1em;

        .umb-block-grid__area:nth-child(1){
            grid-column: span 1;
        }

        .umb-block-grid__area:nth-child(2){
            grid-column: span 2;
        }
    }
    
    /* 75:25 Layout - Three quarters / One quarter */
    .c-b-two-column-layout-content.layout-75-25 > .umb-block-grid__area-container{
        display: grid;
        grid-template-columns: 3fr 1fr;
        gap: 1em;
    }
    
    /* 25:75 Layout - One quarter / Three quarters */
    .c-b-two-column-layout-content.layout-25-75 > .umb-block-grid__area-container{
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 1em;
    }
    
    /* Ensure area containers don't interfere with grid */
    .c-b-two-column-layout-content > .umb-block-grid__area-container {
        display: contents;
    }
    
    .c-b-two-column-layout-content > .umb-block-grid__area-container > .umb-block-grid__area {
        min-height: 50px;
    }

    .c-link-content{
        display: flex;
        margin-top: auto;
    }
    
    .c-link-content-center{
        justify-content: center;
    }
    
    .c-link-content-right{
        justify-content: end;
    }


    .pageGridFeatured-content .c-link-content .c-link{
        font-size: var(--text-size);
        background-color: var(--link-background-color, var(--btn-normal));
        border-radius: 10px;
        color: var(--button-color, var(--link-color, white));
        padding: 0.5em 1.5em;
        border: 0;
        font-weight: 600;
        display: flex;
        grid-gap: 0.5em;
        align-items: center;
        width: fit-content;
        text-decoration: none !important;
    }

    .pageGridFeatured-content .c-link-content .c-link:hover {
        background-color: var(--link-hover-background-color, var(--btn-hover));
    }

    .c-pagination-activePage{
        background-color: var(--pagination-active-background-color, var(--main-blue));
        color: var(--pagination-active-color, white);
        border: 1px solid var(--pagination-active-border-color, var(--main-blue));
    }

    .c-pagination-link {
        background-color: var(--pagination-background-color, transparent);
        color: var(--pagination-color, var(--dark-grey));
        border: 1px solid var(--pagination-border-color, var(--dark-grey));
        white-space: nowrap;
    }

    .c-pagination-link:hover {
        background-color: var(--pagination-hover-background-color, var(--btn-hover));
        color: var(--pagination-hover-color, white);
        border: 1px solid var(--pagination-hover-border-color, var(--btn-hover));
    }

    
    .pageGridAccordion-content,
    .pageGridNodeOverview-content {
        max-width: var(--normal);
        margin: 0 auto;
        display: flex;
        padding: 0 var(--padding-big-sides-desktop);
        color: var(--text-color, var(--dark-grey));
        font-weight: 500;
        flex-direction: column;
        .c-title-container{
            padding: 1em 0 0.5em 0;
        }
    }

    .pageGridSection-body .pageGridAccordion-content,
    .pageGridSection-body .pageGridNodeOverview-content {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 1em;
        margin: 0;
    }

    .c-accordionFaq .accordion-button{
        color: var(--text-color, var(--dark-grey));
    }

    .pageGridFeatured-item{
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    .pageGridFeatured-content{
        display: flex;
        flex-direction: column;
        flex: 1; 
    }
    
    .pageGridFeatured-container{
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    
    .pageGridLinkList-content a{
        color: var(--grid-link-color, var(--link-color, var(--main-blue)));
    
        &.clicked,
        &:visited {
            color: var(--link-visited-color, purple) !important;
        }
    }
    
    .pageGridVideo-content .c-video-container{
        padding: 0;
    }
    
    .pageGridVideo-content .pageGridVideo-text{
        margin-top: 0.5rem;
    }
    
    
    .pageGridNodeOverview-item {
        display: var(--item-display);
        margin-bottom: 0.5em;
    }
    
    .pageGridNodeOverview-readmore,
    .pageGridAgenda-button {
        display: flex;
        justify-content: center;
    }

    .pageGridAgenda-button {
        margin-top: 1rem;
    }

    .pageGridNodeOverview-readmore-link,
    .pageGridAgenda-button-link {
        background-color: var(--link-background-color, var(--btn-normal));
        color: var(--button-color, var(--link-color, white));
        border: none;
        border-radius: 10px;
        padding: 0.5rem 1.5rem;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        transition: opacity 0.3s;
    }

    .figure-wrapper{
        color: var(--text-color, var(--dark-grey));
    }

    .pageGridNodeOverview-readmore-link:hover,
    .pageGridAgenda-button-link:hover {
        background-color: var(--link-hover-background-color, var(--btn-hover));
    }

    .c-pagination-link-prev,
    .c-pagination-link-next,
    .c-pagination-link-first,
    .c-pagination-link-last {
        display: var(--nav-display);
    }

    .pageGridNodeOverview-title{
        margin-bottom: 1rem;
    }

    .pageGridNodeOverview-items,
    .pageGridDocumentList-items,
    .pageGridAgenda-items{
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .pageGridNodeOverview-readmore[data-button-position="right"],
    .pageGridAgenda-button[data-button-position="right"] {
        justify-content: right;
        justify-self: right;
    }

    .pageGridNodeOverview-readmore[data-button-position="left"],
    .pageGridAgenda-button[data-button-position="left"] {
        justify-content: left;
        justify-self: left;
    }

    .pageGridDocumentList-title{
        margin-bottom: 1rem;
    }

    .pageGridDocumentList-item .pageGridDocumentList-item-icon,
    .pageGridMedia-item .pageGridMedia-icon,
    .pageGridAgenda-item .pageGridAgenda-item-icon{
        min-width: 75px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pageGridAgenda-item .pageGridAgenda-item-left{
        align-self: flex-start;
    }

    .pageGridDocumentList-item .pageGridDocumentList-item-icon img,
    .pageGridDocumentList-item .pageGridDocumentList-item-icon i,
    .pageGridMedia-item .pageGridMedia-icon img,
    .pageGridMedia-item .pageGridMedia-icon i,
    .pageGridAgenda-item .pageGridAgenda-item-icon img,
    .pageGridAgenda-item .pageGridAgenda-item-icon i,
    .pageGridBanner-content .stay-connected-logo-container i{
        max-width: 75px;
        max-height: 100px;
    }

    .pageGridDocumentList-item .pageGridDocumentList-item-icon i,
    .pageGridMedia-item .pageGridMedia-icon i,
    .pageGridAgenda-item .pageGridAgenda-item-icon i,
    .pageGridBanner-content .stay-connected-logo-container i{
        font-size: 50px;
    }

    .pageGridDocumentList-item-title,
    .pageGridMedia-item-title,
    .pageGridAgenda-item-title,
    .pageGridNodeOverview-item-title{
        --title-size: 16px;
        --title-size-small: 16px;
        margin: 0;
    }

    .pageGridDocumentList-item-description{
        font-size: 16px;
    }

    .pageGridBanner-content .stay-connected-content .stay-connected-content-email-btn {
        white-space: nowrap;
    }

    .pageGridAccordion-content .c-accordionFaq-container{
        padding: 0 !important;
    }

    .pageGridDownloadButton-content .c-downloadbutton{
        transition: all 0.3s ease;
    }

    .pageGridDownloadButton-content .c-downloadbutton {
        background-color: var(--link-background-color, var(--btn-normal));
        color: var(--button-color, var(--link-color, white));
    }

    .pageGridDownloadButton-content .c-downloadbutton:hover {
        background-color: var(--link-hover-background-color, var(--btn-hover));
    }

    .pageGridDownloadButton-content .c-downloadbutton.reverse,
    .pageGridBackToTop-content .c-backtop-container .backToTopButton.reverse{
        background-color: var(--link-reverse-background-color, white);
        color: var(--link-reverse-color, var(--btn-normal));
        border: 1px solid var(--link-reverse-outline-color, var(--btn-normal));
    }

    .pageGridDownloadButton-content .c-downloadbutton.reverse:hover,
    .pageGridBackToTop-content .c-backtop-container .backToTopButton.reverse:hover{
        background-color: var(--link-reverse-hover-background-color, var(--btn-normal));
        color: var(--link-reverse-hover-color, white);
    }

    .pageGridBackToTop-content .c-backtop-container{
        padding: 0;
        padding-bottom: 1em;
    }
    
    .pageGridBackToTop-content .c-backtop-container[data-position="right"]{
        justify-content: end;
    }
    
    .pageGridBackToTop-content .c-backtop-container[data-position="left"]{
        justify-content: start;
    }
    
    .pageGridBackToTop-content .c-backtop-container[data-position="center"]{
        justify-content: center;
    }
    
    .pageGridDownloadButton-content.c-downloadbutton-content .c-downloadbutton-container,
    .pageGridBackToTop-content.c-backtop-content .c-backtop-container{
        padding: 0;
    }

    
    .pageGridForm-content .umbraco-forms-field .umbraco-forms-label {
        width: 100%;
        color: var(--label-color, var(--main-blue));
        font-size: var(--text-size);
        margin-bottom: 0.5em;
        font-weight: 500;
    }

    .pageGridForm-content .umbraco-forms-field .umbraco-forms-field-wrapper input:not([type="checkbox"]),
    .pageGridForm-content .umbraco-forms-field .umbraco-forms-field-wrapper textarea {
        width: 100%;
        border-radius: 10px;
        border: 1px solid var(--input-border-color, var(--main-blue));
        color: var(--text-color, var(--dark-grey));
        padding: 0.5em 1em;
        font-size: var(--text-size);
        max-width: 100% !important;
        background-color: transparent;
    }

    .pageGridForm-content .umbraco-forms-field .umbraco-forms-field-wrapper input:not([type="checkbox"])::placeholder,
    .pageGridForm-content .umbraco-forms-field .umbraco-forms-field-wrapper textarea::placeholder{
        color: var(--placeholder-color, var(--dark-grey));
    }
    
    .pageGridForm-content .umbraco-forms-field.singlechoice {
        margin: 0;
        padding: 0;
    }
    
    .pageGridForm-content .umbraco-forms-field-wrapper h2{
        font-size: 16px;
        font-weight: 600;
    }

    .pageGridForm-content .umbraco-forms-navigation input[type="submit"] {
        font-size: var(--text-size);
        background-color: var(--link-background-color, var(--btn-normal));
        border-radius: 10px;
        color: var(--button-color, var(--link-color, white));
        padding: 0.5em 1.5em;
        border: 0;
        font-weight: 600;
        display: flex;
        grid-gap: 0.5em;
        align-items: center;
        justify-self: right;
    }
    
    .pageGridForm-content .umbraco-forms-navigation input[type="submit"]:hover {
        background-color: var(--link-hover-background-color, var(--btn-hover));
    }

    .pageGridForm-content .umbraco-forms-navigation input[type="submit"]:focus-visible,
    .pageGridNodeOverview-item:focus-within {
        outline: 3px solid var(--section-focus-visible-color, var(--main-blue, #24599E));
        outline-offset: 3px;
        border-radius: 4px;
    }

    .pageGridForm-content .umbraco-forms-submitmessage {
        background-color: lightgreen;
        width: 100%;
        max-width: 100% !important;
        display: flex;
        padding: 1em;
        justify-content: center;
        border-radius: 10px;
    }
    
    .pageGridSection .container-breadcrumbs .breadcrumbs{
        padding: 1em 0px;
    }
    
    .pageGridSection .cBDate-date.c-date-container{
        padding: 0;
    }

    .pageGridForm-content label {
        color: var(--text-color, var(--dark-grey));
    }

    .stay-connected-box{
        color: var(--text-color, var(--dark-grey));
        border: 1px solid var(--featured-border-color, var(--main-blue));

        a{
            color: var(--button-color, var(--link-color, white));
            background-color: var(--link-background-color, var(--btn-normal));
        }

        a:hover{
            background-color: var(--link-hover-background-color, var(--btn-hover));
        }
    }

    &.news-page,
    &.product-page,
    &.podcast-page,
    &.webinar-page,
    &.document-page{
        .pageGridTextarea{
            h2, h3, h4{
                color: var(--title-text-area-color);
                font-weight: 600;
            }
            h2{
                font-size: 18px;
            }
            h3, h4{
                font-size: 16px;
            }
        }
    }

    .c-title-text h1 {
        border-bottom: 1px solid var(--border-title-color, var(--main-blue));
    }

    .umbraco-forms-fieldset legend{
        color: var(--label-color, var(--main-blue));
        font-weight: 600;
        font-size: var(--legend-size);
    }

    .umbraco-forms-fieldset legend.umbraco-forms-legend{
        color: var(--label-color, var(--main-blue));
        font-weight: 600;
        font-size: var(--title-size);
    }

    .umbraco-forms-field-wrapper .checkboxlist > div{
        display: flex;
        gap: 0.5em;
    }

    .umbraco-forms-field-wrapper p{
        margin: 0;
        a {
            color: var(--link-color-anchor-text, var(--main-blue));
        }
    }
}

@media (max-width: 768px) {
    .c-grid-content-container .c-b-two-column-layout-content.layout-50-50 > .umb-block-grid__area-container,
    .c-grid-content-container .c-b-two-column-layout-content.layout-66-33 > .umb-block-grid__area-container,
    .c-grid-content-container .c-b-two-column-layout-content.layout-33-66 > .umb-block-grid__area-container,
    .c-grid-content-container .c-b-two-column-layout-content.layout-75-25 > .umb-block-grid__area-container,
    .c-grid-content-container .c-b-two-column-layout-content.layout-25-75 > .umb-block-grid__area-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .g-recaptcha > div {
        transform: scale(0.8);
        transform-origin: top left;
    }

    .c-grid-content-container .c-b-three-column-layout-content > .umb-block-grid__area-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 300px) {
    .g-recaptcha > div {
        transform: scale(0.6);
        transform-origin: top left;
    }
}

@media only screen and (max-width: 70em) {
    .c-grid-content-container{
        .pageGridSection-header, 
        .pageGridSection-body,
        .cBDate-date.c-date-container {
            padding: 0.5em var(--padding-sides-tablet);
        }
    }
}

@media only screen and (max-width: 50em) {
    .c-grid-content-container, .blockelement__draggable-element {
        --text-size: var(--font-text-mobile);
    }
    .c-grid-content-container{
        .c-text p, 
        .c-text li, 
        .c-text a, 
        .c-text em, 
        .c-text span,
        .c-text table,
        .pageGridNodeOverview-item-text, 
        .pageGridAgenda-item-date, 
        .pageGridAgenda-item-description, 
        .pageGridDocumentList-item-description,
        .pageGridMedia-item-text,
        .pageGridLinkList-items a,
        .umbraco-forms-page,
        .figure-wrapper{
            font-size: var(--font-text-mobile) !important;
        }
        .pageGridSection-header, 
        .pageGridSection-body,
        .cBDate-date.c-date-container {
            padding: 0.5em var(--padding-sides-mobile);
        }
    }
}

/* Block preview styles */

.blockelement__draggable-element{

    overflow: visible;
    --main-blue: #24599E;
    --section-main-blue: var(--main-blue, #24599E);
    --section-dark-grey: var(--dark-grey, #4B4B4B);
    --section-grey: var(--grey, #707070);
    --section-btn-hover: var(--btn-hover, #2064BD);
    --section-btn-normal: var(--btn-normal, #24599E);
    --title-color: #24599E;
    --breadcrumb-color: var(--section-main-blue);
    --text-color: var(--section-dark-grey);
    --item-color: var(--section-dark-grey);
    --item-hover-color: var(--section-main-blue);
    --featured-border-color: var(--section-main-blue);
    --item-publish-date-color: var(--section-grey);
    --link-background-color: var(--section-btn-normal);
    --link-color: var(--section-main-blue);
    --button-color: white;
    --link-hover-background-color: var(--section-btn-hover);
    --pagination-active-background-color: var(--section-main-blue);
    --pagination-active-color: white;
    --pagination-active-border-color: var(--section-main-blue);
    --pagination-background-color: transparent;
    --pagination-color: var(--section-dark-grey);
    --pagination-border-color: var(--section-dark-grey);
    --pagination-hover-background-color: var(--section-btn-hover);
    --pagination-hover-color: white;
    --pagination-hover-border-color: var(--section-btn-hover);
    --link-visited-color: purple;
    --label-color: var(--section-main-blue);
    --input-border-color: var(--section-main-blue);
    --placeholder-color: var(--section-dark-grey);
    --light-grey: #f5f5f5;
    --grey: #707070;
    --btn-normal: #24599E;

    .pageGridSection{
        padding-bottom: 5px;
    }

    .c-downloadbutton-container {
        max-width: var(--normal);
        margin: 0 auto;
        display: flex;
        padding: 1em var(--padding-big-sides-desktop);
        justify-content: flex-end;
    }

    .c-downloadbutton {
        font-size: var(--text-size);
        background-color: var(--btn-normal);
        border-radius: 10px;
        color: white;
        padding: 0.5em 1.5em;
        border: 0;
        font-weight: 600;
        display: flex;
        grid-gap: 0.5em;
        align-items: center;
        text-decoration: none;
    }

    .breadcrumbs {
        max-width: var(--normal);
        margin: 0 auto;
        padding: 1em var(--padding-big-sides-desktop);
        color: var(--main-blue);
        display: flex;
    }

    .breadcrumbs li {
        list-style: none;
        display: flex;
    }

    .breakcrumb-link {
        text-decoration: none;
        color: var(--main-blue);
        cursor: pointer;
        font-size: var(--text-size);
    }

    .breadcrumbs-separator {
        font-size: var(--text-size);
        padding: 0 0.5em;
    }

    .container-breadcrumbs .breadcrumbs {
        padding: 1em 0px;
    }

    .pageGridSection-body:first-child {
        padding-top: 0;
    }

    .pageGridNodeOverview-item-text {
        margin: 0;
        font-size: var(--text-size);
    }

    .pageGridNodeOverview-item {
        display: var(--item-display, block);
        margin-bottom: 0.5em;
    }

    .c-pagination-content {
        width: 100%;
    }
    
    .c-pagination-item{
        list-style: none;
        display: flex;
    }
    
    .c-pagination-container {
        max-width: var(--normal);
        margin: 0 auto;
        padding: 1em var(--padding-big-sides-desktop);
    }
    
    .c-pagination {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        grid-gap: 1em;
    }
    
    .c-pagination-activePage {
        font-weight: 600;
        background-color: var(--main-blue, #24599E);
        color: white;
        cursor: default;
        height: 2em;
        width: 2em;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--main-blue, #24599E);
        border-radius: 3px;
    }
    
    .c-pagination-link, .c-pagination-activePage {
        font-size: var(--text-size);
    }
    
    .c-pagination-link {
        font-weight: 600;
        background-color: transparent;
        color: var(--navigation-text-color, var(--dark-grey, #4B4B4B));
        cursor: pointer;
        height: 2em;
        width: 2em;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--navigation-text-color, var(--dark-grey, #4B4B4B));
        border-radius: 3px;
        text-decoration: none;
    }
    
    .c-pagination-link:hover {
        color: white;
        font-weight: 600;
        background-color: var(--dark-blue, #0F3164);
        color: white;
        border: 1px solid var(--dark-blue, #0F3164);
        border-radius: 3px;
    }

    .c-accordionFaq-content {
        width: 100%;
    }
    
    .c-accordionFaq-container {
        max-width: var(--normal);
        margin: 0 auto;
        display: flex;
        padding: 1em var(--padding-big-sides-desktop, 3em) 2em var(--padding-big-sides-desktop, 3em);
    }
    
    .c-accordionFaq {
        width: 100%;
    }
    
    .c-accordionFaq .accordion-button:focus {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .c-accordionFaq .accordion-button .collapsed::after {
        background-image: var(--bs-accordion-btn-active-icon);
        transform: var(--bs-accordion-btn-icon-transform);
    }

    .c-accordionFaq .accordion-body {
        padding: 1em 0 0 0;
        font-size: var(--text-size);
    }

    .c-accordionFaq .accordion-body a {
        color: var(--main-blue, #24599E);
        text-decoration: underline;
        cursor: pointer;
    }

    .c-accordionFaq .accordion-body a:hover {
        color: var(--dark-blue, #0F3164);
    }

    .c-accordionFaq .accordion-item {
        border: 0;
        margin-top: 1px;
    }

    .c-accordionFaq .accordion-button {
        color: var(--accordion-button-color, var(--dark-grey, #4B4B4B));
        font-size: var(--text-size, 1rem);
        width: 100%;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        padding: 0.5em 0;
        cursor: pointer;
    }

    .c-accordionFaq .accordion-header {
        border-bottom: 1px solid #D3DEEB;
        margin-bottom: 0;
    }

    .c-accordionFaq .accordion-button-text {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .c-accordionFaq .accordion-button:not(.collapsed) {
        background-color: transparent;
        box-shadow: none;
    }

    .c-accordionFaq .accordion-button .fa-angle-down {
        transform: rotate(180deg);
    }

    .c-accordionFaq .accordion-button.collapsed .fa-angle-down {
        transform: rotate(0deg);
    }

    .c-accordionFaq .fa-angle-down {
        color: var(--main-blue, #24599E);
    }
    
    .c-accordionFaq-links {
        padding: 1em 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        grid-gap: 1.5em;
        list-style: none !important;
    }
    
    .c-accordionFaq-links a {
        font-size: var(--text-size, 1rem);
        background-color: var(--btn-normal, #24599E);
        border-radius: 10px;
        color: white !important;
        padding: 0.5em 1.5em;
        border: 0;
        font-weight: 600;
        display: flex;
        grid-gap: 0.5em;
        align-items: center;
        text-decoration: none !important;
    }

    .c-accordionFaq-links a:hover {
        color: var(--dark-blue, #0F3164);
    }

    .pageGridBanner-content .stay-connected-box {
        flex-wrap: var(--column-wrap-banner, unset);
        justify-content: var(--column-justify-content, unset);
        grid-gap: var(--column-gap, unset);
    }

    .pageGridBanner-content .stay-connected-content-email-input-container {
        flex-wrap: var(--column-wrap-banner, unset);
        justify-content: var(--column-justify-content, unset);
        grid-gap: var(--column-gap, unset);
    }

    .c-pagination-link {
        background-color: var(--pagination-background-color, transparent);
        color: var(--pagination-color, var(--dark-grey));
        border: 1px solid var(--pagination-border-color, var(--dark-grey));
    }

    .c-pagination-link:hover {
        background-color: var(--pagination-hover-background-color, var(--btn-hover));
        color: var(--pagination-hover-color, white);
        border: 1px solid var(--pagination-hover-border-color, var(--btn-hover));
    }

    .c-pagination-activePage{
        background-color: var(--pagination-active-background-color, var(--main-blue));
        color: var(--pagination-active-color, white);
        border: 1px solid var(--pagination-active-border-color, var(--main-blue));
    }

    .c-pagination-link-prev,
    .c-pagination-link-first,
    .c-pagination-link-last,
    .c-pagination-link-next{
        display: none;
    }

    .pageGridSection-section-desc{
        padding: 0 20px;
        font-size: 15px;
        height: 48px;
        display: flex;
        cursor: pointer;
        align-items: center;
        svg{
            margin-right: 10px;
        }
    }

    .pageGridSection-body{
        > div[part="area-container"]{
            width: 100%;
        }
    }

    .pageGridForm-content .umbraco-forms-field .umbraco-forms-field-wrapper input:not([type="checkbox"]),
    .pageGridForm-content .umbraco-forms-field .umbraco-forms-field-wrapper textarea {
        width: -webkit-fill-available;
    }

    .c-title-text h1 {
        font-size: 1.5rem;
        color: var(--main-blue);
        font-weight: 700;
        border-bottom: 1px solid var(--main-blue);
        margin-bottom: 0.5em;
        padding-bottom: 0.5em;
        width: fit-content;
    }

    .c-backtop-content {
        width: 100%;
    }
    
    .c-backtop-container {
        max-width: var(--normal);
        margin: 0 auto;
        display: flex;
        padding: 1em var(--padding-big-sides-desktop);
    }
    
    .c-backtop-container.right {
        justify-content: flex-end;
    }

    .c-backtop-container.left {
        justify-content: flex-start;
    }
    
    .c-backtop {
        display: flex;
        justify-content: flex-start;
    }

    .c-backtop button {
        font-size: var(--font-text-desktop);
        background-color: var(--btn-normal, #24599E);
        border-radius: 10px;
        color: white;
        padding: 0.5em 1.5em;
        border: 0;
        font-weight: 600;
        display: flex;
        grid-gap: 0.5em;
        align-items: center;
    }

    .c-backtop button:hover {
        background-color: var(--btn-hover, #2064BD);
    }
}