/*------------------------------------*\
    
    WebFX WYSIWYG Customizations - Global styling for all ACF WYSIWYG's

    Add custom WYSIWYG styling to this file if it should be applied to all ACF WYSIWYG's on the site
    Otherwise, put your block-specific styles in individual block stylesheets

\*------------------------------------*/

.wysiwyg {
    color: #444444;
    position: relative;
}

.wysiwyg img:not(.wysiwyg__bg) {
    clip-path: polygon(100% 0, 100% 85%, 90% 100%, 0 100%, 0 0);
}

.bg-white {
    background: var(--c-white);
}

.bg-light-blue {
    background: var(--c-light-blue);
}

.bg-blue {
    background: var(--c-blue);
    color: #FFFFFF;
}

.bg-dark-blue {
    background: var(--c-dark-blue);
    color: #FFFFFF;
}

.bg-blue h2,
.bg-blue h3,
.bg-blue h4,
.bg-dark-blue h2,
.bg-dark-blue h3,
.bg-dark-blue h4,
.bg-blue p,
.bg-dark-blue p {
    color: #FFFFFF;
}

.bg-blue h5,
.bg-dark-blue h5 {
    color: #FFFFFF;
}

.bg-blue h5::before,
.image-cta h5::before,
.bg-dark-blue h5::before {
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}

.bg-blue .text-center h5::after,
.bg-dark-blue .text-center h5::after {
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.75) 100%);
}

.bg-blue p a:not(.btn) {
    color: #FFFFFF;
    background: linear-gradient(to bottom, rgba(255,255,255, 0.40) 0%, rgba(255,255,255, 0.40) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 3px 2px;
    transition: background-size .0s;
    border-radius: 0;
    word-break: break-word;
    text-decoration: none;
}

.bg-dark-blue p a:not(.btn) {
    color: var(--white);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.40) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 3px 2px;
    transition: background-size .0s;
    border-radius: 0;
    word-break: break-word;
    text-decoration: none;
}

.bg-blue .btn-secondary {
    color: #394C93;
    background: #FFFFFF;
}

.bg-blue .btn-tertiary-blue {
    color: #FFFFFF;
    border-bottom: 2px solid rgba(255,255,255, 0.25);
}

.wysiwyg .text-center-h5 {
    margin: 0 auto;
    display: block;
    width: fit-content;
}

.wysiwyg__wrapper {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.wysiwyg__wrapper h3,
.wysiwyg__wrapper h4 {
    padding-top: 30px;
}

.wysiwyg__wrapper__small {
    max-width: 1098px;
}

.wysiwyg p:has(> img) {
    padding-bottom: 0;
}

.example-btns {
    padding-top: 30px;
}

.example-btns--padding .btn-tertiary {
    margin-right: 20px;
}

p .btn,
.example-btns .btn {
    margin-right: 20px;
    margin-bottom: 20px;
}

.wysiwyg--padding {
    padding-bottom: 80px;
}

.bottom-border-on::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 148px;
    height: 20px;
    background: #FFFFFF;
    clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.wysiwyg__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.3;
    object-fit: cover;
    -o-object-fit: cover;
}

.wysiwyg__bg-wrap {
    position: relative;
    z-index: 1;
}

.bg-dark-blue .btn-tertiary-blue {
    color: #97A4D3;
    border-bottom: 2px solid rgba(57,76,147, 0.25);
}

.bg-dark-blue .wysiwyg__bg-wrap {
    padding-top: 90px;
}

.top-border-on::before {
    content: '';
    position: absolute;
    width: 148px;
    height: 21px;
    top: -1px;
    left: 0;
    background-color: #FFFFFF;
    clip-path: polygon(0 0, 100% 0, 86% 100%, 0% 100%);
    z-index: 2;
}

.bottom-border-on::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 148px;
    height: 20px;
    background: #FFFFFF;
    clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
}
/*Top Siblings Border*/
.bg-light-blue-top-siblings.top-border-on::before {
    background: var(--c-light-blue);
}

.bg-blue-top-siblings.top-border-on::before {
    background: var(--c-blue);
}

.bg-dark-blue-top-siblings.top-border-on::before {
    background: var(--c-dark-blue);
}

/*Bottom Siblings Border*/
.bg-light-blue-siblings.bottom-border-on::after {
    background: var(--c-light-blue) !important;
}

.bg-blue-siblings.bottom-border-on::after {
    background: var(--c-blue) !important;
}

.bg-dark-blue-siblings.bottom-border-on::after {
    background: var(--c-dark-blue) !important;
}

.image-buttons + .wysiwyg {
    padding-top: 0;
}

@media (min-width: 768px) {
    .example-btns--padding {
        max-width: 600px;
    }

    .example-btns--padding .btn-tertiary {
        /*margin-right: 0;*/
        margin-left: 0;
    }

    .example-btns--padding .btn-tertiary,
    .example-btns--padding .btn-tertiary-blue {
        margin-top:  26px;
    }

    .bg-blue::before {
        width: 310px;
        height: 25px;
        clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    .wysiwyg--padding {
        padding-bottom: 95px;
    }

    .bg-dark-blue .wysiwyg__bg-wrap {
        padding-top: 100px;
    }

    .top-border-on::before {
        width: 310px;
        height: 25px;
        clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
    }

    p .btn:first-child {
        margin-top: 0;
    }

    p .btn {
        margin-right: 0;
    }
}

@media (min-width: 1200px) {
    .example-btns--padding {
        max-width: 100%;
    }

    .example-btns--padding .btn-tertiary {
        margin-left: 25px;
    }

    .example-btns--padding .btn-tertiary,
    .example-btns--padding .btn-tertiary-blue {
        margin-top:  0;
    }

    .bg-blue p a:not(.btn):hover {
        background: linear-gradient(to bottom, rgba(255,255,255, 0.40) 0%, rgba(255,255,255, 0.40) 100%);
        background-repeat: repeat-x;
        background-size: 2px 30px;
        background-position: 0 100%;
        color: #ffffff;
        transition: background-size .3s;
    }

    .bg-dark-blue p a:not(.btn):hover {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.40) 100%);
        background-repeat: repeat-x;
        background-size: 2px 30px;
        background-position: 0 100%;
        color: #ffffff;
        transition: background-size .3s;
    }

    .bg-blue .btn-secondary:hover {
        color: #ffffff;
        background: #7582B4;
    }

    .bg-blue .btn-tertiary-blue:hover {
        color: rgba(255,255,255, 0.75);
        border-bottom: 2px solid rgba(255,255,255, 0.25);
    }

    .wysiwyg--padding {
        padding-bottom: 140px;
    }

    .bg-blue::before {
        width: 790px;
        height: 40px;
        clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    .bg-dark-blue .btn-tertiary-blue:hover {
        color: #394C93;
        border-bottom: 2px solid rgba(57,76,147, 0.25);
    }

    .bg-dark-blue .wysiwyg__bg-wrap {
        padding-top: 140px;
    }
    /*Top Border*/
    .top-border-on::before {
        width: 790px;
        height: 40px;
        clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
    }
    /*Bottom Border*/
    .bottom-border-on::after {
        width: 790px;
        height: 40px;
        clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

}

.table-structure {
    padding: 0 0 30px 0;
    position: relative;
    color: #444444;
    overflow-x: auto;
    position: relative;
}

.table-structure::-webkit-scrollbar-track {
    background-color: #D8D8D8;
}

.table-structure::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

.table-structure::-webkit-scrollbar-thumb {
    background-color: #394C93;
}


.bg-light-blue .table-structure {
    background: var(--c-light-blue);
}

.bg-blue .table-structure {
    background: var(--c-blue);
    scrollbar-color: var(--c-white) #D8D8D8;
}

.bg-dark-blue .table-structure {
    background: var(--c-dark-blue);
    scrollbar-color: var(--c-white) #D8D8D8;
}

.table-scroll {
    margin: 15px -22px 25px 0;
    overflow: hidden;
    background: #ffffff;
    position: relative;
}

.wysiwyg-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.table-structure table {
    border-collapse: collapse;
    width: 947px;
    font-family: 'Barlow', sans-serif;
    background: #FFFFFF;
    border: 1px solid rgba(57, 76, 147, 0.3);
}

.table-structure table tbody tr td {
    padding: 12px 30px;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    color: #444444;
    line-height: 1.5em;
    vertical-align: middle;
    border-right: 1px solid rgba(57, 76, 147, 0.3);
}

.table-structure table tbody tr td:first-child,
.table-structure table thead tr th:first-child {
    padding: 12px 21px;
}

.table-structure table tbody tr:nth-child(odd) {
    background: #EBEDF4;
}

.table-structure table thead {
    background-color: #394C93;
    color: #fff;
}

.table-structure table thead tr th {
    padding: 11px 30px;
    text-align: left;
    font-size: 18px;
    line-height: 1em;
    font-weight: 700;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #FFFFFF;
    vertical-align: middle;
    border-right: 1px solid rgba(255,255,255,0.3);
}

.table-structure table thead tr th:last-child,
.table-structure table tbody tr td:last-child {
    border-right: none;
}

.wysiwyg--with-image a:not(.btn),
.wysiwyg--with-image.bg-dark-blue a:not(.btn) {
    color: var(--white);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.40) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 3px 2px;
    transition: background-size .0s;
    border-radius: 0;
    word-break: break-word;
    text-decoration: none;
}

.wysiwyg--with-image a:not(.btn):hover,
.wysiwyg--with-image.bg-dark-blue a:not(.btn):hover {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.40) 100%);
    background-repeat: repeat-x;
    background-size: 2px 30px;
    background-position: 0 100%;
    color: #ffffff;
    transition: background-size .3s;
}

@media (min-width: 768px) {
    .table-structure table thead tr th {
        padding: 19px 30px !important;
        font-size: 20px;
    }

    .table-structure table tbody tr td {
        padding: 20px 30px !important;
        font-size: 18px;
    }

    .table-structure table {
        width: 1200px;
    }

    .table-scroll {
        margin: 15px -52px 30px 0;
    }

    .table-info p {
        font-size: 18px;
    }
}

@media (min-width: 1200px) {
    .table-structure table {
        width: 100%;
    }

    .table-scroll {
        margin: 10px 0 30px 0;
    }

    .table-structure {
        padding: 0;
    }
}