.button__wrapper {
    background-color: #b7b5b5 !important;
    display: inline-block;
    margin: 1em 0.5em;
}

.button__wrapper--solid {
    background-color: #f8f8f8 !important;
    border-radius: 0.3em !important;
    padding: 0.5em 1em;
}

.button {
    position: relative;
    background-color: black !important;
    left: -0.3em;
    top: -0.3em;
    color: white;
    border: 2px solid black;
    padding: 0.25em 1em;
}

.button--flat {
    left: 0;
    top: 0;
}

.button--inverted {
    background-color: white !important;
    color: black;
}

a.button {
    display: inline-block;
    text-decoration: none;
}

a.button:hover, a.button:focus {
    color: white;
}

a.button--inverted:hover, a.button--inverted:focus {
    color: black;
}

.button:active {
    left: 0;
    top: 0;
}

.page-tag {
    background-color: #f2efef;
    padding: 0.2em 0.5em;
    border-radius: 0.3em !important;
    display: inline-block;
    margin: 0 0.3em 0.3em 0;
}

fieldset {
    margin: 1.5em 0;
}

legend {
    display: block; 
    font-weight: bold;
    margin: 1.5em 0 1em;
    border: none;
}

input[type=checkbox].sq-form-field {
    align-self: start;
}

input[name=queries_keyword_query] {
    padding: 0.25em 1em;
    border: 2px solid #e8e8e8;
    border-radius: 0.3em !important;
}

.back-navigation-arrow {
    display: inline-block;
    transform: rotate(-180deg);
}

h1#PageTitle {
    margin: 0.4em 0 0;
}

p#PublishedDate {
    margin: 0 0 2em;
}

/* Divides the form into 'top' and 'bottom' halves */
#FilterForm {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

    /* Divides the part of the form that's visible by default, into two halves */
    #DefaultFilterFeatures {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
        #DefaultFilterFeatures div#SearchByCode {
            display: flex;
            flex-flow: row nowrap;
            gap: 0.5em;
        }
        
            #SearchFormOptionalFilters {
                display: grid;
                grid-template-columns: 2fr 1fr;
                margin: 1.5em 0;
                gap: 1.5em;
            }
            
                #SearchFormOptionalFilters > div {
                    padding: 0.5em 0;
                }
                
                    #SearchFormOptionalFilters > div:nth-child(1) {
                            border-right: 2px solid #d8d8d8;
                        }
                        
                            #SearchFormOptionalFilters fieldset {
                                margin: 0;
                            }
                
                                #SearchFormOptionalFilters > div:nth-child(1) fieldset {
                                    display: flex;
                                    gap: 1.5em;
                                }
                                
                                    #SearchFormOptionalFilters > div:nth-child(1) fieldset ul {
                                        display: grid;
                                        grid-template-columns: repeat(2, 1fr);
                                        column-gap: 1.5em;
                                        row-gap: 0.5em;
                                    }
                                    
    #LPAChoice ul {
        display: flex;
        gap: 1.5em;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    #LPAChoice li {
        display: flex;
        gap: 0.5em;
    }
                    
    #LPAChoice ul li:nth-child(3) {
        display: none;
    }


#Title {
    grid-area: Title;
}

#SearchFormToggle {
    grid-area: FilterToggle;
    display: none;
}

#SearchForm {
    display: none;
}

#SearchForm.open {
    display: block;
}

.filter__group ul {
    list-style-type: none;
    display: flex;
    flex-flow: column nowrap;
    gap: 0.5em;
    padding-left: 0.3em;
}

.filter__group li {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.filter__group input, .filter__group label {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

#SearchResults {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em;
    margin: 0 1.5em;
}

.search-result {
    border: 1px solid #c5c5c5;
    border-radius: 0.3em !important;
    padding: 1.5em 2em;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0.5em;
}

.search-result__head p, .search-result__head h3 {
    margin: 0em;
}

.search-result__head h3 {
    margin: 0 0 0.5em;
}

.search-result__tags {
    overflow: hidden;
}

.item {
    border-radius: 0.3em !important;
    background-color: #e8e8e8 !important;
    color: black;
    padding: 0.25em 0.5em;
}

.item--red {
    background-color: #a62626 !important;
    color: white;
}

.tag__item {
    float: left;
    margin: 0.25em;
    font-size: 0.85em;
}

.tag__item.lead-tag {
    background-color: white !important;
    border-radius: 0;
}

#Pages {
    /*grid-area: Pagination;*/
    display: flex;
    gap: 0.5em;
    margin: 1.5em 0 0;
}

#Pages a, #Pages p {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 2px solid black;
    padding: 0.25em 1em;
    text-decoration: none;
    width: auto;
    line-height: 1.5em;
    background-color: black;
    color: white;
}

#Pages p {
    background-color: #747474;
    border: 2px solid #747474;
}

.search-form-wrapper {
    grid-area: Form;
    background-color: #f8f8f8;
    border-radius: 0.3em !important;
    padding: 1em 1.5em 1.5em;
    margin: 0 0 1.5em;
}

#ChecklistPageLayout {
    display: grid;
    grid-template-columns: 1fr 330px;
    grid-template-areas:
        "ChecklistPageTitle ."
        "ChecklistUpdatedDate ."
        "ChecklistCode ."
        "ChecklistPageNavigation ."
        "ChecklistScenario ChecklistAside"
        "ChecklistRequirements ChecklistAside"
        "ChecklistReasoning ChecklistAside"
        "CheckilstSimilarItems CheckilstSimilarItems";
    gap: 1.5em;
    row-gap: 0;
}

#ChecklistPageTitle {
    grid-area: ChecklistPageTitle;
}

#ChecklistCode {
    grid-area: ChecklistCode;
}

#ChecklistPageNavigation {
    grid-area: ChecklistPageNavigation;
}

#ChecklistScenario {
    grid-area: ChecklistScenario;
}

#ChecklistRequirements {
    grid-area: ChecklistRequirements;
}

#ChecklistReasoning {
    grid-area: ChecklistReasoning;
}

#ChecklistUpdatedDate {
    grid-area: ChecklistUpdatedDate;
}

#CheckilstSimilarItems {
    grid-area: CheckilstSimilarItems;
}

#ChecklistAside {
    grid-area: ChecklistAside;
    background-color: #f8f8f8 !important;
    padding: 0 1.25em;
    display: flex;
    flex-flow: column nowrap;
    row-gap: 1.5em;
}

aside div[aria-describedby="AddToChecklist"] {
    background-color: #e8e8e8 !important;
}

h1#ChecklistItemTitle {
    margin: 0.3em 0;
}

section#ChecklistUpdatedDate p {
    margin: 0 0 0.3em;
}

section[aria-labeledby="ValidationChecklistCode"] p {
    margin: 0 0 0.5em;
}

section#ChecklistUpdatedDate p, section[aria-labeledby="ValidationChecklistCode"] p {
    color: #737373;
}

ul#ChecklistRelatedList {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5em;
    margin: 0;
    padding: 0;
}

li.related-item {
    border: 1px solid #c5c5c5;
    border-radius: 0.3em !important;
    padding: 1.5em 2em;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0.5em;
}


@media screen and (max-width: 1300px) {
    
    /*#SearchResults > div {*/
    #SearchResults {
        grid-template-columns: repeat(2, 1fr);
    }
    
    @media screen and (max-width:1000px) {
        
        @media screen and (max-width:900px) {
            
            #SearchFormToggle {
                display: block;
            }
            
            #SearchForm {
                display: none;
            }
            
            #SearchForm.open {
                display: block;
            }
            
            /*#SearchResults > div {*/
            #SearchResults {
                grid-template-columns: 1fr;
            }
            
            #GrantResultsPage {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "Title"
                    "FilterToggle"
                    "Form"
                    "Results"
                    "Pagination";
                gap: 0;
            }
            
            #GrantPage {
                grid-template-columns: 1fr;
                grid-template-areas: 
                    "Title"
                    "ClosingDate"
                    "Body"
                    "Aside"
                    "Owner";
            }
            
            #DefaultFilterFeatures {
                flex-flow: column nowrap;
            }
            
            
            a#FilterToggle {
                display: inline-block;
                margin: 1.5em 0 0;   
            }
            
            @media screen and (max-width: 860px) {
                
                #ChecklistPageLayout {
                    
                    grid-template-columns: 1fr;
                    grid-template-areas:
                        "ChecklistPageTitle"
                        "ChecklistUpdatedDate"
                        "ChecklistCode"
                        "ChecklistPageNavigation"
                        "ChecklistScenario"
                        "ChecklistRequirements"
                        "ChecklistReasoning"
                        "ChecklistAside"
                        "CheckilstSimilarItems";
                    gap: 1.5em;
                    row-gap: 0;
                }
                
                #SearchFormOptionalFilters {
                    display: grid;
                    grid-template-columns: 1fr;
                    margin: 1.5em 0;
                    gap: 1.5em;
                }
                
                #SearchFormOptionalFilters > div:nth-child(1) {
                    border-right: none;
                }
                
                @media screen and (max-width: 680px) {
                    
                    #SearchFormOptionalFilters > div:nth-child(1) fieldset ul {
                        grid-template-columns: 1fr;
                        gap: 0.5em;
                    }
                    
                    @media screen and (max-width: 560px) {
                        
                        #DefaultFilterFeatures {
                            display: flex;
                            justify-content: space-between;
                            align-items: stretch;
                        }
                        
                        #DefaultFilterFeatures div#SearchByCode {
                            flex-flow: column nowrap;
                    
                        }
                                    
                            #SearchFormOptionalFilters > div:nth-child(1) fieldset {
                                flex-flow: column nowrap;
                            }
                        
                    }        
                    
                }
                
            }
            
        }       
    }
    
     
    
}