#supplement-list-container {
margin: 50px 0;
}
.supplement-search-form {
margin: 50px 0;
display: flex;
flex-direction: row;
justify-content: center;
gap: 10px;
}
.supplement-search-form input[type="text"] {
padding: 8px;
width: fit-content;
min-width: 100px;
border: 1px solid #ddd;
border-radius: 4px;
}
.supplement-search-button-container {
display: flex;
flex-direction: row;
justify-content: center;
gap: 10px;
}
.supplement-search-form button {
padding: 8px 16px;
background-color: #01773b;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}
@media (max-width: 767px) {
.supplement-search-form {
flex-direction: column;
}
.supplement-search-form input[type="text"] {
width: 100%;
}
.supplement-search-form button {
width: 100%;
}
}
.supplement-search-form button:hover {
background-color: #00612f;
}
.post-entry ul.supplement-list {
list-style: none;
padding: 0;
}
.post-entry ul.supplement-list li {
border: 1px solid #ddd;
border-radius: 20px;
padding: 35px;
margin-bottom: 20px;
list-style: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, .06);
cursor: pointer;
transition: background-color 0.2s;
}
.post-entry ul.supplement-list li:hover {
background-color: #f9f9f9;
}
.post-entry ul.supplement-list h3 {
margin: 0 0 10px;
font-weight: bold;
font-size: 1.3em;
}
.supplement-pagination {
margin-top: 20px;
text-align: center;
}
.supplement-pagination .page-numbers {
padding: 5px 10px;
margin: 0 5px;
border: 1px solid #ddd;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.2s;
}
.supplement-pagination .page-numbers.current {
background-color: #01773b;
color: #fff;
border-color: #01773b;
} .supplement-category-filter-container {
display: flex;
justify-content: center;
}
.supplement-category-filter {
width: fit-content;
background-color: #ffffff;
padding: 1rem;
border: solid 1px #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
flex: 0 0 auto;
}
.supplement-category-filter h4 {
font-size: 1.125rem;
font-weight: 600;
margin: 0 0 0.5rem 0;
color: #333;
}
.post-entry ul.category-list {
list-style: none;
margin: 0;
padding: 0.5rem;
max-height: 25rem; overflow-y: auto;
background-color: #fafafa; border: 1px solid #e5e7eb;
border-radius: 6px;
position: relative;
} .post-entry ul.category-list::-webkit-scrollbar {
width: 8px;
}
.post-entry ul.category-list::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
margin: 4px 0; }
.post-entry ul.category-list::-webkit-scrollbar-thumb {
background: #01773b; border-radius: 4px;
transition: background 0.2s;
}
.post-entry ul.category-list::-webkit-scrollbar-thumb:hover {
background: #00612f; } .post-entry ul.category-list {
scrollbar-width: thin;
scrollbar-color: #01773b #f1f1f1;
}
.post-entry ul.category-list:has(input[type="checkbox"]):not(:has(ul.category-list)) {
margin-top: 0.3rem;
}
.post-entry ul.category-list li.category-item .category-list {
max-height: fit-content;
overflow-y: hidden;
border: none;
background: none;
padding: 0;
}
.post-entry ul.category-list li.category-item {
margin-bottom: 0; padding: 0.1rem 0.5rem; border-radius: 4px;
transition: background-color 0.2s;
}
.post-entry ul.category-list li.category-item label {
display: flex;
align-items: center;
cursor: pointer;
font-size: 0.875rem;
color: #333;
padding: 0.25rem; }
.post-entry ul.category-list li.category-item input[type="checkbox"] {
margin-right: 0.75rem; width: 1.125rem; height: 1.125rem;
accent-color: #01773b;
} .post-entry ul.category-list li.category-item:has(input[type="checkbox"]):not(:has(ul.category-list)) {
cursor: pointer;
}
.post-entry ul.category-list li.category-item:has(input[type="checkbox"]):not(:has(ul.category-list)):hover {
background-color: #e6f4ea; }
.post-entry ul.category-list li.category-item[data-depth="0"] {
margin-top: 0.5rem;
}
.post-entry ul.category-list li.category-item[data-depth="0"] .category-header,
.post-entry ul.category-list li.category-item[data-depth="1"] .category-header {
font-weight: 700;
font-size: 0.95rem;
color: #1f2937;
padding: 0.25rem 0.5rem;
}
.post-entry ul.category-list li.category-item[data-depth="1"] {
padding-left: 1.25rem; }
.post-entry ul.category-list li.category-item[data-depth="2"] {
padding-left: 2.5rem;
}
.supplement-clear-categories-button-container {
display: flex;
justify-content: center;
}
#supplement-clear-categories {
margin-top: 0.75rem;
padding: 0.5rem 1rem;
background-color: #e5e7eb;
color: #4b5563;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.875rem;
transition: background-color 0.2s;
}
#supplement-clear-categories:hover {
background-color: #d1d5db;
} @media (max-width: 767px) {
.supplement-category-filter {
padding: 0.75rem;
width: 100%;
}
.post-entry ul.category-list {
max-height: 20rem; padding: 0.25rem;
}
.post-entry ul.category-list li.category-item label {
font-size: 0.85rem; }
.post-entry ul.category-list li.category-item input[type="checkbox"] {
width: 1rem;
height: 1rem;
}
} .supplement-result-count {
margin-bottom: 0.5rem;
margin-top: 4rem;
margin-right: 1rem;
font-size: 1rem;
color: #333;
text-align: right;
}
.supplement-result-count .supplement-result-count-bold {
font-weight: bold;
}
@media (max-width: 767px) {
.supplement-result-count {
font-size: 0.875rem;
}
} .widget.widget_supplement_related_posts_widget h3 {
margin-bottom: 15px;
}
.widget ul.supplement-related-posts {
list-style: none;
padding: 0 0.3rem;
margin: 0;
}
.widget ul.supplement-related-posts li.supplement-related-post {
margin-bottom: 0.75rem;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
transition: background-color 0.2s;
}
.widget ul.supplement-related-posts li.supplement-related-post:hover {
background-color: #e6f4ea;
}
.widget ul.supplement-related-posts li.supplement-related-post a {
display: block;
font-size: 0.875rem;
color: #333;
text-decoration: none;
font-weight: 500;
}
.widget ul.supplement-related-posts li.supplement-related-post a:hover {
color: #01773b;
} @media (max-width: 767px) {
.widget ul.supplement-related-posts li.supplement-related-post {
padding: 0.7rem;
font-size: 0.85rem;
}
.widget.widget_supplement_related_posts_widget h3 {
margin-bottom: 20px;
}
}
@media only screen and (max-width: 960px) {
.container.penci_sidebar #main {
margin-bottom: 0 !important;
}
}