/**********************************************    Mobile Styles   ******************************************************/


/* The filterOverlay (background) */
.filterOverlay {
    /* Height & width depends on how you want to reveal the filterOverlay (see JS below) */
    width: 100%;
    position: fixed; /* Stay in place */
    overflow-y: auto;
    z-index: 10000; /* Sit on top */
    /*left: 0;*/
    bottom: 0;
    /* top: 0; */
    background-color: #fff;
    background-color: #fff;
    overflow-x: hidden; /* Disable horizontal scroll */
    /*transition: 0.5s;*/ /* 0.5 second transition effect to slide in or slide down the filterOverlay (height or width, depending on reveal) */
    /*-webkit-transition: 0.5s;*/
}

    /* Position the content inside the filterOverlay */


    /* The navigation links inside the filterOverlay */
    .filterOverlay a :not(.clear-facet) {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block; /* Display block instead of inline */
        transition: 0.3s; /* Transition effects on hover (color) */
    }

.titleOverlay {
    background-color: #666;
    padding-top: 15px;
    padding-bottom: 15px;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.topbottomMargin {
    margin-bottom: 10px;
    margin-top: 10px;
}

.state-icon {
    left: -5px;
}

@media(max-width:992px) {
    .noscroll {
        height: 100%;
        overflow: hidden;
        width: 100%;
        position: fixed;
    }
}


.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    z-index: 2;
    color: #fff;
    background-color: #95989a;
    border-color: #95989a;
}




/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .filterOverlay a :not(.clear-facet) {
        font-size: 20px;
    }
}


/* Let's get this party started */
.filterOverlay::-webkit-scrollbar {
    width: 1px;
}

/* Track */
.filterOverlay::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 1px;
    border-radius: 1px;
}

/* Handle */
.filterOverlay::-webkit-scrollbar-thumb {
    -webkit-border-radius: 1px;
    border-radius: 1px;
    background: rgba(255,255,255,0.8);
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.5);
}

    .filterOverlay::-webkit-scrollbar-thumb:window-inactive {
        background: #95989a;
    }

.mobileSearchOverlay {
    opacity: 0;
    background-color: black;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 15000;
    overflow: auto;
}

@media(max-width: 992px) {
    .ui-menu-item-wrapper {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
}


/**********************************************    Desktop Styles   ******************************************************/

.truncate {
    font-size: 11px;
}


.searchOverlay {
    opacity: 0;
    background-color: black;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 15000;
    overflow: auto;
}


/**********************************************    Common Styles    ******************************************************/

.ui-state-active {
    background: #95989a !important;
    border: #95989a !important;
}

.ui-menu-item {
    border-bottom: 1px solid #ccc;
}

.ui-autocomplete {
    max-height: 230px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
}