.documents-landing-container1 {
  column-count: 4;
  column-gap: 30px;

    .icon-image {
        padding: 70px;
        padding-top: 0px;
        padding-bottom: 5px;
    }

    .category {
        display: block; /* Not inline-block */
        margin-bottom: 30px;
        break-inside: avoid; /* Prevent content splitting awkwardly */
        box-sizing: border-box;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #f9f9f9;
    }

    .category h2 {
        font-size: 18px;
        color: #333;
        margin-bottom: 10px;
        background:#1276be;
        color:white;
        padding: 10px 15px;
    }

    .category ul {
        padding: 20px;
        list-style-position: outside;
    }

    .category .see-more {
        float: right;
        background-color:#001489;
        padding:6px;
    }

    .category .see-more a{
        color:white;
        padding:10px;
    }

    .category li {
        margin-left: 30px;
        margin-bottom: 10px;
    }

    .category a {
        text-decoration: none;
        color: #1276be;
    }

}


.form-item__dropdown select {
    padding-left: 10px;
    padding: 0px;
    padding-left: 10px;
}

.form-item__dropdown {
    min-height: 53px;
}

.form-item__textfield {
    height: 55px;
}

.filter-button{
    background-color: #001489;
    color: white;
    padding: 8px;
}

#edit_subsites_list_chosen{
    width:100% !important;
}

/* Style the filter-button span */
.filter-documents-wrapper summary .filter-button {
    position: relative;
    display: inline-block;
    background-color: #001489;
    padding: 0.75rem 2.5rem 0.75rem 1rem; /* Right padding for arrow space */
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 500;
    width: 22%;
}

/* Add a ">" arrow using ::after */
.filter-documents-wrapper summary .filter-button::after {
    content: "❯";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    transition: transform 0.3s ease;
    color: white; /* match your theme */
}

/* Rotate the arrow when the <details> is open */
.filter-documents-wrapper[open] summary .filter-button::after {
    transform: translateY(-50%) rotate(90deg);
}


























.category-description {
    padding: 20px;
    margin-bottom: 20px;
    background-color: white;
}


.document-section-header {
    display: block;
    background-image: linear-gradient(to right, #001489, #017dbb);
    color: white;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 20px;

    h2 {
        color: white;
        display: block;
        margin-top:10px;
        font-weight: bold;
        /* font-size: 2.2rem; */
        font-size: 3rem;
    }
}

.document-group {
    /* display: flex;
    background-color: DodgerBlue; */
    display: inline-block;

    h5 {
        font-weight: bold;
    }

    span {
        font-size: 70%;
        color: #a0a0a0ff;
    }

    div ul {
        float: left;
        padding-right: 10px;
    }
}

.accordion-header {    
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;  /* Pushes arrow to right */
    cursor: pointer;
    color: #001489;
    background-color: #cccccc;
    font-size: 1.4rem;
    margin: 0;
    padding: 1.25rem 1.5rem;
    position: relative;
    padding-right: 4rem;
    transition: all .3s ease-in-out;
}

.accordion-content {
    display: none; /* Default is closed */
    /* padding: 10px 16px; */
    padding: 20px;
    border-top: 1px solid #ddd;
    background-color: white;
    font-size: 17px;

    .file-info {
        /* opacity: 40%; */
        display: none;
        color:#a0a0a0;
        font-size: 65%;
    }

    li:has(> .file-info):hover {
        .file-info {
            display: inline;
        }
    }

    .first-level {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }
}

.accordion-item.active > .accordion-content {
    display: block; /* This will be used when the accordion is active */
}

/* .nested-accordion {
    margin-top: 10px;
} */

.accordion-header.level-1 {
    background-color: #e9e9e9;
    font-weight: normal;
    padding-left: 20px;
}

/* Shared arrow style */
.accordion-header .arrow {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border: solid #333;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    color: red;
}

/* When accordion is active, rotate arrow to point down */
.accordion-item.active > .accordion-header .arrow {
    transform: rotate(135deg);
}

/* Optional: different colors for levels */
.first-arrow {
    border-color: #001489; /* dark blue or whatever fits */
}

.second-arrow {
    border-color: #555;
}
  
.custom-select-arrow {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7em center;
    background-size: 1.5em; /* Bigger arrow */
    padding-right: 3em;     /* More space for arrow */
}
 
.search-section, .documents-section {
    margin-bottom: 20px;
}

.search-section form {
    background-color: #dad0d0;
    padding: 15px;
    border-radius: 5px;
}

.search-section h2 {
    background-color: aqua;
    padding: 15px;
}

.document-group {
    border-radius: 5px;
    margin-bottom: 10px;
    padding-bottom:1px;
}

.document-group h3 {
    padding: 10px;
    background-color: #001489;
    color: white;
}

.document-group .tags span {
    margin: 2px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 25px;
    color: white;
    background-color: #7fa9ae;
}

.document-group ul {
    list-style-position: outside;
}

.filter-form-container {
    display: flex;
    gap: 20px; /* Space between fields */
    align-items: center;
}

.filter-form-container .form-item {
    flex: 1;
}

.form-item__dropdown select {
    padding-left: 10px;
    padding: 0px;
    padding-left: 10px;
}

.form-item__dropdown {
    min-height: 53px;
}

.form-item__textfield {
    height: 55px;
}






/*
CSS for the Pill-Shaped Button
*/
.pill-button {
    /* Flexbox for centering content */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Sizing and Spacing */
    padding: 10px 24px;
    font-size: 1rem;
    font-weight: 500;

    /* Appearance */
    background-color: #0052a6; /* A nice blue */
    color: white;
    border: none;
    border-radius: 9999px; /* Creates the pill shape */
    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */

    /* Interactivity */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.pill-button:hover {
    background-color: #001489; /* A darker blue for hover */
}

/* Styling for the SVG icon */
.pill-button svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}



.pill-heading {
    /* Flexbox for centering content */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Sizing and Spacing */
    padding: 10px 24px;
    font-weight: 500;

    /* Appearance */
    background-color: #017dbb; /* A nice blue */
    color: white;
    /* border: none; */
    border-radius: 9999px; /* Creates the pill shape */
    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */

    background-image: linear-gradient(to right, #002892, #0076b6);
    /* border: 1px solid #003499; */

}