/*------------------------------------*\
    
    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

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


.bg-white {
    background: #ffffff;
}


.bg-light-blue {
    background: #EAF4FF;
}

.home-gredient {
    background: linear-gradient(to bottom,  #02234a 0%,#021327 100%);
}

.bg-blue-gredient {
    background: linear-gradient(to bottom,  #022e63 0%,#021327 100%); 
}

.bg-red-gredient {
    background: linear-gradient(to bottom,  #041526 0%,#4d0007 50%,#041526 100%);
}

.bg-blue-gredient,
.bg-red-gredient {
    color: #fff;
}

.home-gredient h2,
.bg-blue-gredient h1,
.bg-blue-gredient h2,
.bg-blue-gredient h3,
.bg-blue-gredient h4,
.bg-blue-gredient h5,
.bg-blue-gredient h6,
.bg-blue-gredient .sub-heading,
.bg-blue-gredient .btn-link,
.bg-blue-gredient p a,
.bg-red-gredient h1,
.bg-red-gredient h2,
.bg-red-gredient h3,
.bg-red-gredient h4,
.bg-red-gredient h5,
.bg-red-gredient h6,
.bg-red-gredient .sub-heading,
.bg-red-gredient .btn-link,
.bg-red-gredient p a {
    color: #fff;
}

.home-gredient .btn-tertiary,
.bg-blue-gredient .btn-tertiary,
.bg-red-gredient .btn-tertiary {
    color: #fff;
}

.home-gredient .btn-tertiary::before,
.bg-blue-gredient .btn-tertiary::before,
.bg-red-gredient .btn-tertiary::before {
    border-color: #fff;
}

.bg-red-gredient p a:not(.btn) {
    background: linear-gradient(to right,  #B10514 0%,#FFFFFF 50%,#B10514 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 100% 2px;
}

.gap {
    height: 10px;
}

.example-btns {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
}

.example-btns .btn+.btn {
    margin: 0;
}

.bg-blue-gredient ul li:before,
.bg-red-gredient ul li:before {
    background: #FFFFFF;
}

.bg-blue-gredient blockquote {
    color: #FFFFFF;
    background: linear-gradient(to right,  rgba(1,32,72,0.2) 0%,rgba(0,75,255,0.2) 50%,rgba(1,41,91,0.2) 100%); 
}

.bg-red-gredient blockquote {
    color: #FFFFFF;
    background: linear-gradient(to right,  rgba(177,5,20,0.2) 0%,rgba(177,5,20,0.2) 50%,rgba(177,5,20,0.2) 100%); 
    border-color: #B10514;
}



@media (min-width: 768px) {
    .gap {
        height: 30px;
    }

    .example-btns {
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 25px;
    }
}

@media (min-width: 1200px) {
    .home-gredient  .btn-tertiary::before {
        border-width: 2px;
    }
    
    .home-gredient .btn-tertiary:hover {
        color: #fff;
    }
    
    .home-gredient  .btn-tertiary:hover::before {
        border-color: #fff;
        box-shadow: 0 0 16px rgba(177, 5, 20, 0.5);
        background: radial-gradient(ellipse at center,  rgba(44,10,11,0.5) 0%,rgba(0,75,255,0.5) 100%); 
    }

    .wysiwyg p a:hover {
        box-shadow: 0 0 8px rgba(190,209,255,1);
    }

    .bg-red-gredient {
        background: linear-gradient(to right,  #2f0914 0%,#4d0007 50%,#320813 100%);
    }

    .bg-blue-gredient .btn-tertiary:hover::before {
        border: 2px solid #004BFF;
    }
    
    .bg-red-gredient .btn-tertiary:hover::before,
    .bg-red-gredient .btn-primary:hover::before  {
        border: 2px solid #B10514;
    }

    .bg-blue-gredient p a:not(.btn):hover {
        background: linear-gradient(to right,  #004BFF 0%, #004BFF 100%);
        background-size: 2px 100%;
        background-position: 0 100%;
        background-repeat: repeat-x;
        transition: background-size .1s;
        box-shadow: 0 0 8px rgba(8,81,255,1);
    }

    .bg-red-gredient p a:not(.btn):hover {
        background: linear-gradient(to right,  #B10514 0%, #B10514 100%);
        background-size: 2px 100%;
        background-position: 0 100%;
        background-repeat: repeat-x;
        transition: background-size .1s;
        box-shadow: 0 0 8px rgba(177,5,20,1);
    }

    .bg-red-gredient .btn-link:before {
        background: linear-gradient(to right,  #B10514 0%,#FFFFFF 50%,#B10514 100%);
    }

    .gap {
        height: 0;
    }

    .example-btns {
        gap: 35px;
    }

    .bg-blue-gredient {
        background: linear-gradient(190deg,  #022957 0%,#021327 82%,#021327 100%);
    }

}




/* table */

.table-wrap {
    margin: 30px -24px 0 0;
    border-radius: 8px 0 0 8px;
    position: relative;
}

.table-wrap::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 0;
    width: calc(100% + 4px);
    height: calc(100% - 40px);
    border: 2px solid #004BFF;
    border-radius: 8px;
}

.table-scroll {
    padding-bottom: 45px;
    background: transparent;
    position: relative;
    height: auto;
    width: 100%;
    overflow: auto;
    @supports not (selector(::-webkit-scrollbar-thumb)) {
        scrollbar-color: #CBCBCB #004BFF;
        scrollbar-width: thin;
    }
}

.table-structure {
    width: 950px;
    overflow: hidden;
}

.table-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.table-scroll::-webkit-scrollbar-track {
    background: linear-gradient(to right,  rgba(0,38,128,1) 0%,rgba(0,75,255,1) 100%); 
    border-radius: 10px;
    margin-right: 22px;
}

.table-scroll::-webkit-scrollbar-thumb {
    background-color: #CBCBCB;
    border-radius: 10px;
}

.table-structure table {
    border-collapse: collapse;
    font-family: "Titillium Web", serif;
    background: #021731;
    width: 100%;
    table-layout: fixed;
}

.table-structure table thead {
    color: #FFFFFF;
    background: #041526; 
}

.table-structure table thead tr th {
    padding: 16px 20px;
    text-align: left;
    font-size: 22px;
    line-height: 1.25em;
    font-weight: 700;
    border: none;
    color: #FFFFFF;
    vertical-align: middle;
    font-style: italic;
}

.table-structure table tbody tr:nth-child(even) {
    background-color: #041526;
}

.table-structure table tbody tr td,
.table-structure table tbody tr th {
    padding: 15px 20px;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.44em;
    vertical-align: middle;
}

.table-search-filter {
    background: #022E63;
    padding: 9px 10px 9px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    border-radius: 8px 8px 0 0;
}

.table-filter {
    width: 34px;
    height: 40px;
}

.table-filter button {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border: none;
    display: block;
    position: relative;
    border-radius: 0 0 0 0;
    border: none;
    color: #022E63;
}

.table-filter button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 4px;
    background: #003A70;
    clip-path: polygon(0 0, 55% 100%, 100% 0);
}

.table-search {
    width: calc(100% - 34px);
    height: 40px;
    position: relative;
    background: #FFFFFF;
    border-radius:  0 0;
    border: none;
}

.table-search input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    font-size: 16px;
    line-height: 1.3em;
    color: #022E63;
    font-weight: 400;
    padding: 0 55px 0 13px;
    border-radius: 0;
}

.table-search input::placeholder {
    opacity: 1;
    color: #022E63;
}

.table-search button {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
    line-height: 1em;
    color: #FFFFFF;
    width: 41px;
    height: 100%;
    border: none;
    background: #004BFF;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.table-scroll-info {
    padding: 12px 0 0;
    font-size: 14px;
    line-height: 1.4em;
    color: #FFFFFF;
    font-weight: 400;
    text-align: right;
}

@media (min-width: 768px) {
    .table-wrap {
        margin: 30px -55px 0 0;
    }

    .table-search {
        width: 270px;
    }

    .table-search-filter {
        padding: 9px 52px 9px;
    }

    .table-structure {
        width: 940px;
    }

    .table-scroll::-webkit-scrollbar-track {
        background: linear-gradient(to right,  rgba(0,38,128,1) 0%,rgba(0,75,255,1) 100%); 
        border-radius: 10px;
        margin-right: 52px;
    }

}

@media (min-width: 1200px) {
    .table-wrap {
        margin: 40px 0 0;
    }

    .table-search {
        width: 270px;
    }

    .table-scroll {
        overflow: visible;
        padding-bottom: 0;
    }

    .table-structure {
        width: 100%;
        overflow: visible;
    }

    .table-wrap {
        margin: 70px 0 0;
        border: 2px solid #004BFF;
        padding-bottom: 2px;
        border-radius: 8px;
    }

    .table-search {
        width: 260px;
    }

    .table-wrap::before {
        display: none;
    }

    .table-search-filter {
        padding: 9px 12px 9px;
    }

    .table-structure table {
        background: #022E63;
        table-layout: inherit;
    }

    .table-structure table thead tr th {
        padding: 17px 12px;
        font-size: 32px;
    }
    
    .table-structure table tbody tr td,
    .table-structure table tbody tr th {
        padding: 15px 12px;
        font-size: 20px;
        position: relative;
    }

    .table-structure table tbody tr {
        position: relative;
        z-index: 2;
    }

    .table-structure table tbody tr:nth-child(even) {
        background-color: #002046;
        border-bottom: 6px solid #021327;
        position: relative;
    }

    .table-structure table tbody tr:nth-child(even) td {
        font-size: 16px;
    }

    .table-structure table tbody tr:nth-child(even)::after {
        content: "";
        position: absolute ;
        right: 0px;
        top: 0;
        width: 52px;
        height: calc(100% + 3px);
        background: #021327;
        z-index: 1;
    }
}