/* Easy Resource Hub Select Elements Styling */

.easy-resource-hub {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    width: 100%; /* Set the width to 100% of the parent element */
    max-width: 100% !important; /* Ensure it doesn't exceed the parent's width */
    box-sizing: border-box; /* Include padding and border in the element's width */
    background-color: #f5f5f5;
    padding: 10px;

}
/* Ensure child elements don't overflow */
.easy-resource-hub * {
    box-sizing: border-box;
}
#erh-taxonomy-filters {
    margin-bottom: 20px;
}
/* Full-width for filters and content area */
/* .erh-taxonomy-filters, .erh-content-area {
    width: 100%;
} */
/* Additional styling to ensure proper layout */
.erh-taxonomy-filters-above select, .erh-taxonomy-filters-left select {
    width: auto; /* Adjust width for select elements */
}
#erh-taxonomy-filters select {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

#erh-taxonomy-filters select[multiple] {
    height: auto;
    padding: 5px;
    background-color: #f8f8f8;
    -webkit-appearance: none; /* Removes default styling for multi-select */
    -moz-appearance: none;
    appearance: none;
}
#erh-taxonomy-filters select:not([multiple]) {
    padding-right: 40px; /* Increased padding to the right */
    padding-left: 10px; /* Left padding for balance */
    border-radius: 4px;
    border: 1px solid #ccc;
    height: 35px; /* Height for better appearance */
    /* width: calc(100% - 50px); Adjust width to compensate for the increased padding */
    width: calc(100% );
    -webkit-appearance: menulist-button;
    appearance: menulist-button;
}


#erh-content-area {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}
.erh-item {
    
    display: flex;
    align-items: start;
    margin-bottom: 0;
    border-bottom: 1px solid #ebe8e8;
    padding-top: 20px;
    padding-bottom: 20px;
}
.erh-item:first-child {
   padding-top:0px;
}
.erh-thumbnail {
    flex-shrink: 0;
    margin-right: 15px;
}

.erh-thumbnail img {
    max-width: 150px; /* Adjust thumbnail size as needed */
    height: auto;
    border-radius: 4px; /* Optional: for rounded corners */
}

.erh-text-content {
    flex-grow: 1;
}

.erh-title {
    margin-top: 0;
    font-size: 1.2em; /* Adjust title font size as needed */
}

.erh-excerpt {
    font-size: 1em; /* Adjust excerpt font size as needed */
}
/* Filters above the results */
.erh-taxonomy-filters-above {
    display: flex; /* Align filters side by side */
    justify-content: flex-start; /* Align filters to the start of the container */
    flex-wrap: wrap; /* Wrap filters to next line if they don't fit */
    gap: 10px; /* Add some space between the filters */
    margin-bottom: 20px; /* Space between filters and content area */
}

/* Style for individual select elements */
.erh-taxonomy-filters-above select {
    flex-grow: 1; /* Allow select elements to grow and fill available space */
    max-width: 200px; /* Maximum width for each select element */
}

/* Content area when filters are above */
.erh-content-area-above {
    width: 100%; /* Ensure content area takes full width */
}

/* Filters to the left of the results */
.erh-taxonomy-filters-left {
    width: 200px; /* Adjust width as needed */
    padding-right: 20px;
    float: left;
}

.erh-content-area-left {
    margin-left: 220px; /* Adjust margin to match the width of the filters column */
}

/* Styling for select elements */
.erh-taxonomy-filters select {
    width: 100%; /* Ensure select elements take full width of the filter container */
}
.erh-taxonomy-filters-left select[multiple] {
    height: auto; /* Adjust height as needed */
    overflow: auto; /* Add scrollbar for overflow */
    border: 1px solid #ccc; /* Border style */
    background-color: #fff;
    padding: 5px;
    cursor: pointer; /* Cursor style */
    overflow-y: auto; 
}

.erh-taxonomy-filters-left select[multiple] option {
    display: block;
    padding: 2px 5px;
    margin: 2px 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.erh-taxonomy-filters-left select[multiple] option:last-child {
    border-bottom: none;
}
.erh-taxonomy-filters-left select[multiple] option:first-child {
    font-weight: bold;
}
@media (max-width: 768px) {
    .easy-resource-hub[data-filters-position="left"] {
        display: block; /* Stack elements vertically */
    }

    .erh-taxonomy-filters-left,
    .erh-content-area {
        display: block;
        width: auto; /* Reset widths */
        margin-left: 0 !important; /* Reset margins */
        float:none;
        width:100% !important;
    }
    #erh-taxonomy-filters select {
        width: 100%!important;
    }
    
}