.post-list .post-wrapper {display: flex}
.post-list+.post-list {
    width: 100%;
    border-top: 1px solid #e6e6e6;
    margin-top: 20px;
    padding-top: 20px;
}
.post-list .entry-media, .post-list .entry-media img {
    height: 65px;
    width: 102px;
}
.post-list .entry-media {
    border-radius: 3px;
    flex-shrink: 0;
    margin-bottom: 0;
    margin-right: 20px;
    overflow: hidden;
}
.entry-media img {
    margin: 0 auto;
    min-height: 100%;
    object-fit: cover;
    width: 100%;
}
.post-list .entry-media .placeholder {
    /* height: 100%; */
    /* width: 100%; */
    background-color: #f4f4f4;
}
#posts-container {margin-top: 20px}
.mt-6 {margin-top: 40px}
.option-title {font-weight: 600}
.fpbd-year, .fpbd-month {display: grid; gap: 12px; margin-top: 20px}
.fpbd-year, .fpbd-month { grid-template-columns: repeat(4, minmax(0, 1fr))}
.loading-spinner {position: relative; float: left; top: 8px; margin-right: 5px}
.loading-spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.fpbd-year-btn,
.fpbd-month-btn {width: 50px}
.fpbd-page-btn {width: 30px}
.fpbd-year-btn,
.fpbd-month-btn,
.fpbd-page-btn {
    padding: 5px;
    cursor:pointer;
    border-radius: 5px;
    font-size:14px;
    border: none;
    color: #1a1a1a;
    background-color:#f3f5f7;
    align-items: center;
    border-radius: .375rem;
    color: #6b7280;
    display: flex;
    font-weight: 500;
    justify-content: center;
    line-height: 1.5rem;
    transition-duration: .15s;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}
.fpbd-page-btn.selected, .fpbd-page-btn:hover,
.fpbd-year-btn.selected, .fpbd-year-btn:hover,
.fpbd-month-btn.selected, .fpbd-month-btn:hover {background-color: #dbeafe; color: #2563eb}
.dark-mode .fpbd-page-btn.selected, .dark-mode .fpbd-page-btn:hover,
.dark-mode .fpbd-year-btn.selected, .dark-mode .fpbd-year-btn:hover,
.dark-mode .fpbd-month-btn.selected, .dark-mode .fpbd-month-btn:hover {background-color:#555; color:#fff}
.dark-mode .no-posts, .dark-mode .fpbd-year-btn,
.dark-mode .fpbd-month-btn, .dark-mode .fpbd-page-btn {background-color: #333; color:#999}
.no-posts {padding: 12px; background-color: #dbeafe; border-radius: 3px; display: flex}
.no-posts .flex {display: flex}
.no-posts .thumb {color: #60a5fa; width: 20px; height: 20px; flex-shrink:0; display: block; vertical-align: middle}
.no-posts .thumb svg {padding-bottom: 2px}
.no-posts-message {color: #2563eb; line-height: 20px; font-size: 14px; font-weight: 500; margin-left: 5px}
.fpbd-post {display: flex; align-items: center}
.fpbd-post img {object-fit: cover; border-radius: 3px; bottom: 0; left: 0; position: absolute; right: 0; top: 0; height: 100%; width: 100%}
.fpbd-post .entry-thumbnail {height: 100px; width: 160px; position: relative}
.fpbd-post .entry-header {margin-left: 15px}
.fpbd-post .entry-wrapper {padding: 0}
#posts-container >div+div {border-top: 1px solid #f4f4f4; margin-top: 12px; padding-top: 12px}
#posts-container .entry-wrapper {padding: 0}
#posts-container .entry-media a {display: inline; pointer-events: visible;}
#posts-container .entry-action {height: auto; font-size: 13px; color: #aaa}
#posts-container .entry-action,
#posts-container .entry-header {border:0; padding: 0; display: block}
#posts-container .entry-title {margin-top: 0}
#posts-container .entry-title a {font-size: 16px}
#posts-container .entry-header .entry-action .action-category {display: inline-block}
#posts-container .entry-header .entry-action .action-category a {
    background-color: #ff6054;
    border-radius: 10px;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 17px;
    height: 17px;
    display: block;
    padding: 0 7px;
    margin-right: 6px;
    text-decoration:none;
}
.post-list .entry-excerpt {font-size: 14px; line-height:20px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 15px}
#pagination-container .page-row {display: flex; gap: 5px; font-size: 14px; margin-top: 20px}
#pagination-container .pages {margin-right:10px}
.fpbd-page-btn {cursor: pointer}
.option-title {font-weight: 600}
@media (max-width: 768px){
    .post-list .entry-excerpt {display: none}
    #posts-container .entry-title {
        min-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
@media (min-width: 450px){
    .fpbd-year, .fpbd-month {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}
@media (min-width:768px){
    .sm\:grid-cols-12 {grid-template-columns: repeat(12, minmax(0, 1fr))}
    #posts-container .entry-title {min-height: 0}
    .fpbd-year, .fpbd-month {grid-template-columns: repeat(12, minmax(0, 1fr))}
    .post-list .entry-media, .post-list .entry-media img {height: 100px; width: 160px}
}