/* General Layout */

.resource-hub {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
    padding: 2rem;
}

#algoliaGrid .row, #algolia-flat .row, #algoliaTwo .row {
    margin-left:0;
    margin-right:0;
}

.ais-SearchBox-reset {
    display:none;
}

.resultsRow {
    justify-content:space-between;
    padding:0 20px 15px;
}

#layout-toggle {
    border:1px solid black;
    box-shadow: none;
    border-radius:7.4px;
    display:flex;
}

#layout-toggle button {
    background:none;
    padding: 0 7px;
    cursor: pointer;
    border:none;
}


#layout-toggle button.active {
    background:#007bff;
    color:white;
    border-color:#007bff;
}

/* End General Layout */

/* Facet Nav Layout */

#searchbox input {
    width: 90%;
    padding: 3px 8px;
    border-top-left-radius: 7.4px;
    border-bottom-left-radius: 7.4px;
    border: 2px solid #d1212f;
}

#searchbox button {
    width: 10%;
    padding: 3px 8px;
    border-top-right-radius: 7.4px;
    border-bottom-right-radius: 7.4px;
    background: #d1212f;
    border-top: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
    border-left: none;
}

#searchbox button svg {
    fill:white;
}

.pageSearch {
    border:1px solid black;
    border-radius:7.4px;
    background: #f7f7f7;
    padding:10px 20px;
    margin-bottom:20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.pageSearch h5 {
    font-size:18px;
    font-weight:400;
    margin-bottom:10px;
}

#algoliaGrid .filters {
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding-top:20px;
    border:1px solid black;
    border-radius:7.4px;
    background: #f7f7f7;
    padding:10px 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* filters {
    border:1px solid black;
    border-radius:7.4px;
    background: #f7f7f7;
    padding:10px 20px;
} */

.filters h5 {
    font-size:22px;
    font-weight:400;
}

.pageTypeFacet, .pageTopicFacet, .pageAuthorFacet, .pageSeohubFacet, .pageTdrFacet {
    border-radius:0!important;
    background:none!important;
    padding:0!important;
    border-top:none;
    border-right:none;
    border-left:none;
    border-bottom:1px solid black;
}

.pageAuthorFacet {
    border-bottom:none!important;
}

.filters li::marker {
    content:"";
}

#algolia-autocomplete-search {
    display: block;
    visibility: visible;
    height: auto;
}

/* End Facet Nav Layout */

/* Card layout Grid */
.card-grid-two {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:1.5rem;
}

.hit-card {
    background:#e7e5df;
    border:2px solid #4564ed;
    border-radius:7.4px;
    padding:1rem;
    box-shadow:0 2px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease
}

.card-grid {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:1.5rem;
}

/* @media (max-width:1199px) {
    .card-grid {
        grid-template-columns:repeat(auto-fit, minmax(300px, 280px));
    }
} */

.card-wrapper {
    padding:0;
    margin:0;
}

.card {
    background:#e7e5df;
    border:1px solid #ddd;
    border-radius:7.4px;
    padding:1rem;
    box-shadow:0 2px 5px rgba(0, 0, 0, 0.1);
    border:2px solid #4564ed;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.hit-item {
    padding:1rem;
    border-bottom:1px solid #ddd;
}

.ais-Hits .card-wrapper::marker {
    content: "";
}

.ais-Hits .card img {
    border-radius:7.4px;
    border: 2px solid #4564ed;
}

.ais-Hits .card h6 {
    font-size:24px;
    font-weight:500;
    margin-top:20px;
    letter-spacing: normal;
    text-transform: capitalize;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    min-height: calc(1.4em * 2);
}

.ais-Hits .card p {
    font-size:18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.type-badge {
    color:#333;
    font-size:0.75rem;
    display:inline-block;
    margin-bottom:0.5rem;
    position: absolute;
    right: 35px;
    top: 25px;
    padding: 2px 10px;
    background: white;
    border: 2px solid red;
    border-radius: 20px;
}

.ais-Hits .card-tags {
    display:flex;
}

.ais-Hits .card-tags p {
    font-size:14px;
}

.ais-Hits .card-details {
    border-top:1px solid #333;
}

.grid-author {
    font-size: 14px!important;
    font-style: italic;
}

.grid-tags {
    font-size:14px!important;
}

.card-grid .tdr-true {
    padding: 10px 0 0 0;
    background: #031e22;
    border-radius: 7.4px;
}

.tdr-true:before {
    content: "★ Threat Detection Report ★";
    color: white;
    position: relative;
    top: -3px;
    text-align: center;
}

.card-grid .tdr-true:before {
    width: 100%;
    display:flex;
    align-items:center;
    justify-content:center;
}


.card-wrapper-flat .tdr-true:before {
    padding: 10px 20px;
    background: #031e22;
    border-radius: 7.4px;
    z-index: -1;
    top:0px!important;
}

/* End Card Layout */

/* Card Layout Flat */

.card-wrapper-flat li::marker {
    content: "";
}

.card-flat-wrapper {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #e7e5df;
    border-radius: 7.4px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border: 2px solid #4564ed;
    gap:20px;
    margin-bottom:25px;
    width:100%;
}


.card-flat-wrapper .card-flat-img {
    max-width: 33%;
}

.card-flat-wrapper .card-flat-img img {
    border-radius: 7.4px;
    border: 2px solid #4564ed;
}

.ais-Hits .card-flat-content h6 {
    font-size:22px;
    font-weight:500;
    margin-top:20px;
    letter-spacing: normal;
    text-transform: capitalize;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ais-Hits .card-flat-wrapper p {
    font-size:18px;
}

.ais-Hits .card-flat-wrapper .card-flat-author {
    font-size:16px;
    font-style:italic;
    margin-bottom:3px;
}
.card-flat-topics {
    font-size:16px!important;
}

.card-flat-extra-wrapper {
    margin-bottom:25px;
    width:100%;
    padding:20px;
    background:#011E23;
    border-bottom-left-radius: 7.4px;
    border-bottom-right-radius: 7.4px;
    display:flex;
    justify-content:space-between;
    color:white;
}

.card-item-flat .card-flat-type {
    font-weight: 600;
    position: relative;
    right: 40px;
    top: 40px;
    float: right;
    background: white;
    padding: 2px 10px;
    border: 2px solid red;
    border-radius: 20px;
    font-size: 0.75rem;
}

.card-flat-extra-wrapper .card-flat-arrow img {
    width:25px;
}

#algolia-flat .tdr-true {
    padding:10px 0 0 0;
    background:none!important;
}

#algolia-flat .tdr-true:before {
    content: "★ Threat Detection Report ★";
    color: white;
    position: relative;
    top: -3px;
    text-align: center;
    width: 100%;
    left: 0;
    background: #031e22;
    padding: 8px 16px 12px;
    border-top-right-radius: 7.4px;
    border-top-left-radius: 7.4px;
    z-index: -2;
}


/* End Card Layout Flat */

/* Pagination Layout */

#pagination {
    display:flex;
    justify-content:center;
    margin-top:2rem;
}

.custom-pagination {
    list-style:none;
    padding:0;
    display:flex;
    gap:0.5rem;
}

.custom-pagination .pagination-item {
    display:inline-block;
}

.custom-pagination .pagination-link {
    display:block;
    padding:0.5rem 0.75rem;
    background:#f1f1f1;
    color:#333;
    border-radius:7.4px;
    text-decoration:none;
    transition:background-color 0.2s;
}

.custom-pagination .pagination-link:hover {
    background:#ddd;
}

.custom-pagination .pagination-selected .pagination-link {
    background:#333;
    color:white;
    font-weight:bold;
}

.custom-pagination .pagination-disabled .pagination-link {
    pointer-events:none;
    opacity:0.4;
}

/* End Pagination Layout */

/* Autocomplete Search */

/* #autocomplete-search {
    position:absolute;
    top:25px;
    right:25px;
    z-index:9999999;
}

.aa-Autocomplete {
    position:absolute;
    top:20px;
    right:20px;
    width:40px;
    height:40px;
    background:blue;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition: width 0.3s ease-in-out, padding 0.3s ease-in-out;
    overflow:hidden;
}

.aa-Autocomplete input[type="text"] {
    border:none;
    outline:none;
    padding:8px;
    font-size:16px;
    width:0;
    transition:width 0.3s ease-in-out;
    opacity:0;
}

.aa-Autocomplete.expanded {
    width:250px;
    padding-left:10px;
    border-radius:20px;
    background:white;
    border:1px solid black;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-right:10px;
    cursor:auto;
}

.aa-Autocomplete.expanded input[type="text"] {
    width:180px;
    opacity:1;
} */


.autocomplete-search {
    position:absolute;
    display:inline-block;
    top:50%;
    right:20px;
    transform: translate(0, -50%);
    width:48px;
    height:48px;
    transition:width 0.3s ease, border-radius 0.3s ease;
    overflow:visible;
    border-radius:50%;
    background:white;
    border:1.6px solid #4564ed;
    z-index:999999999;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
}

.autocomplete-search.expanded {
    width:360px;
    border-radius:4px;
}

.aa-Form {
    display:flex;
    align-items:center;
}

.autocomplete-search input {
    border:none;
    outline:none;
    padding: 8px 12px;
    font-size:14px;
    width:100%;
    box-sizing:border-box;
    height:46px;
}

.aa-InputWrapper {
    width:100%;
}

.aa-InputWrapperPrefix .aa-Label {
    margin-bottom:0px;
    height:46px;
}

.aa-InputWrapperSuffix {
    display:none;
}

.aa-SubmitButton {
    padding:10px 14px;
    border:none;
    background:none;
}

.aa-SubmitIcon {
    fill:#4564ed;
}

.aa-Panel {
    top:82px;
    width:240px;
    z-index:999999999;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
}

autocomplete-search button[type="submit"] {
    display:none;
}

.aa-Panel {
    position:fixed;
    top:50px !important;
    border-radius:7.4px;
    border:2px solid #4564ed;
    background: #e7e5df;
    padding: 20px;
    width: 480px !important;
    right: 0px !important;
    left: auto !important;
}

.aa-Panel .aa-Item {
    list-style: none;
    margin-bottom: 12px;
    border-bottom: 1px solid black;
    padding-bottom: 15px;
}

.aa-Item {
    display:block !important;
}

.aa-Item .autocomplete-hit-h1 {
    font-size:18px;
    font-weight:700;
}

.aa-Item .autocomplete-hit-intro {
    font-size:14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}



/* End Autocomplete Search */

/* Mobile Filters */

.mobile-search {
    display:none;
}

.mobile-filters-button {
    display:none;
    top:10px;
    right:10px;
    z-index:1000;
    padding: 5px 25px;
    border-radius: 7.4px;
    border-color:#4564ed;
    color:#4564ed;
    box-shadow: none;
    cursor: pointer !important;
}

.filters-panel {
    position:fixed;
    top:0;
    right:0;
    width:85%;
    height:-webkit-fill-available;
    background:#fff;
    z-index:999999999;
    padding:20px;
    overflow-y:auto;
    box-shadow:-2px 0 10px rgba(0, 0, 0, 0.2);
    transition:transform 0.3s ease;
}

.filters-panel.hidden {
    transform:translateX(100%);
}

.filters-panel .filters-header {
    display:flex;
    justify-content:space-between;
}

.filters-panel .close-btn {
    width: 30px;
    height: 30px;
    border-color: #4564ed;
    color: #4564ed;
}

.filters-panel .filters-footer {
    margin-top:20px;
    display:flex;
    justify-content:space-evenly;
}

.apply-btn, .clear-btn {
    padding: 5px 25px;
    border-radius: 7.4px;
    border-color:#4564ed;
    color:#4564ed;
    box-shadow: none;
    cursor: pointer !important;
}

@media (max-width: 997px) {
    .mobile-filters-button {
        display:block;
    }
    .filters {
        display:none;
    }
    .searchPromoImage {
        display:none;
    }
    .search-items {
        display:flex;
        justify-content:space-between;
    }
    #searchbox {
        width:80%;
    }

}

/* End Mobile Filters */


.card-grid .event-location {
    margin-top:10px;
}

.card-grid .event-location span {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .05em;
    line-height: 20px;
    margin: 0px;
    position: relative;
    text-transform: uppercase;
    white-space: nowrap;
}

.card-grid .event-details {
    display:flex;
    justify-content:space-between;
}

.card-grid .event-details .event-type {
        font-size: 12px;
    width: fit-content;
    background: #011e23;
    padding: 10px;
    border-radius: 20px;
    color: white;
    font-weight: 600;
    margin-bottom: 0px;
}

.featured-events:before {
    content: "★ Featured Event ★";
    width: 100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 5px 0;
    color:white;
}

.featured-blog:before {
    content: "★ Featured Blog ★";
}

.featured-guides:before {
    content: "★ Featured Guide & Overview ★";
}

.featured-videos:before {
    content: "★ Featured Video ★";
}

.featured-case-study:before {
    content: "★ Featured Case Study ★";
}

.card-grid [class^="featured-"] {
    padding: 10px 0 0 0;
    background: #031e22;
    border-radius: 7.4px;
    padding: 10px 0 0 0;
    background: #031e22;
    border-radius: 7.4px;
}

.card-grid .featured-events {
    background: #031e22;
    border-radius: 7.4px;
}