#blog-index-container label{
    font-size: 16px !important;
    color: var(--purple);
    font-weight: 700;
    font-family: "DM Sans", sans-serif;
    margin-bottom: 5px;
    display: block;
}
#blog-index-container input,
#blog-index-container select,
#blog-index-container option,
#clear-all-filters {
    font-family: "DM Sans", sans-serif;
    color: var(--purple);
    font-size: 16px;
    line-height: 1;
    border: 2px solid var(--purple);
    background: transparent;
    padding: 20px 15px 18px 15px!important;
    border-radius: 10px;
    height: auto;
    min-width: 200px;
    width: 100%;
    text-align: left;
    position: relative;
    z-index: 2;

    &:focus{
        border-color: var(--purple);
    }
}

.search-field-group-dropdown,
.search-field-group.text-search-group{
    background-color: #fff;
    border-radius: 10px;
}
#blog-index-content #ajax-loading-indicator{
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    font-family: "DM Sans", sans-serif;
    color: var(--purple);
}
.load-more-container{
    text-align: center;
}
/*--------------------------------------------------------------
# Dropdown
--------------------------------------------------------------*/
#blog-index-container .search-field-group-dropdown,
.blog-order-wrapper .search-field-group-dropdown{
    position: relative;

    & select{
        appearance: none;
        padding-right: 25px!important;
    }
    
}
#blog-index-container .search-field-group-dropdown::after {
    position: absolute;
    top: calc(50% - 9px);
    right: 25px;
    width: 0;
    height: 0;
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--purple);
    z-index: 1;
}

/*--------------------------------------------------------------
# Search bar
--------------------------------------------------------------*/
#blog-index-container .search-field-group{
    position: relative;
}
#blog-index-container #blog-text-search{
    padding-right: 35px;
}
#blog-index-container .search-submit-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    box-shadow: none!important;


    &:hover,
    &:focus{
        color: var(--white);
        background-color: var(--black)!important;
    }
}
/*--------------------------------------------------------------
# Clear Button
--------------------------------------------------------------*/
#blog-index-container #clear-all-filters{
    position: relative;
    background-color: #dde0e4;
    
}
#blog-index-container #clear-all-filters::after {
    position: absolute;
    content: "";
    top: calc(50% - 9px);
    right: 25px;
    width: 0;
    height: 0;
    content: "\f00d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--purple);
}

/*--------------------------------------------------------------
# Search pill
--------------------------------------------------------------*/
.blog-search-pills{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;

}
.search-pill{
    font-family: "DM Sans", sans-serif;
    color: var(--purple);
    font-size: 16px;
    line-height: 1;
    border: 2px solid var(--purple);
    background-color: var(--light-blue);
    padding: 10px!important;
    border-radius: 25px;
    height: auto;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;

    &:focus{
        border-color: var(--purple);
    }

    .search-pill-remove {
        padding: 0 6px 1px 6px;
        background-color: var(--purple);
        border-radius: 50%;
        font-size: 25px;
        line-height: 25px;
        color: var(--white);
        font-weight: 500;
        -webkit-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;

        &:hover,
        &:focus{
            background-color: var(--fusion);
        }
    }


}
/*--------------------------------------------------------------
# Structure reorder
--------------------------------------------------------------*/
#blog-index-container {
    display:flex;
    flex-flow: row wrap;
    width: 100%;
}

#blog-index-header {
    flex: 1 1 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

#blog-search-props {
    flex: 1 1 25%;
    padding-right: 40px;
}
#blog-index-content {
    flex: 1 1 75%;
}
.ast-blog-layout-4-grid .ast-article-post{
    padding-right: 0!important;
}


/*--------------------------------------------------------------
# Mobile 992px
--------------------------------------------------------------*/
@media (max-width: 992px) {
    #blog-index-container {
        flex-direction: column;
    }
    
    #blog-search-props {
        order: 1;
        flex: 1 1 100%;
        padding-right: 0;
    }
    
    #blog-index-header {
        order: 2;
        flex: 1 1 100%;
        flex-direction: column;
        align-items: stretch;
    }
    
    #blog-index-content {
        order: 3;
        flex: 1 1 100%;
    }
    
    .blog-search-pills-wrapper {
        order: 2;
    }
    
    .blog-order-wrapper {
        order: 1;
        justify-content: flex-start;
    }

    .ast-blog-layout-4-grid .ast-article-post{
        padding-right: 0!important;
        padding-left: 0!important;
    }
}

@media only screen and (min-width: 993px) and (max-width: 1100px) {
    #blog-search-props {
        flex: 1 1 45%;
        padding-right: 40px;
    }
    #blog-index-content {
        flex: 1 1 55%;
    }
    .ast-blog-layout-4-grid .ast-article-post{
        width: 100%;
    }
}