/* Common styles for the scroll container */
.scroll-container {
    /*width: 100vw; !* Full viewport width *!*/
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Hide scrollbars initially */
    position: relative;
    display: flex;
    flex-wrap: nowrap;
}

.div_content {
    width: 100vw; /* Full viewport width */
    height: 33vh; /* One-third of viewport height */
    display: flex;
    /*align-items: start;*/
    justify-content: start;
    padding-right: 0.1rem  /* 10/100 */;
    /*background-color: #282727; !* Light grey background *!*/
    /*border: 1px solid #ddd; !* Border for separation *!*/
    flex: 0 0 auto; /* Prevent flex items from shrinking or growing */
}

/* Mobile-specific styles for horizontal scrolling */
@media (max-width: 768px) {
    .scroll-container {
        flex-direction: row; /* Horizontal scroll */
        overflow-x: auto; /* Enable horizontal scrolling */
        overflow-y: hidden; /* Disable vertical scrolling */
        height: 33vh; /* Reduce height to content height */
    }

    .div_content {
        height: 100%; /* Full height of container */
        width: 100vw; /* Full viewport width */
        flex: 0 0 auto; /* Prevent flex items from shrinking or growing */
    }
}

/* Desktop-specific styles for vertical scrolling */
@media (min-width: 769px) {
    .scroll-container {
        flex-direction: column; /* Vertical scroll */
        overflow-y: auto; /* Enable vertical scrolling */
        overflow-x: hidden; /* Disable horizontal scrolling */
    }

    .div_content {
        width: 100vw; /* Full viewport width */
        height: 33vh; /* One-third of viewport height */
        flex: 0 0 auto; /* Prevent flex items from shrinking or growing */
    }
}

.bb-post-title {
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
}

.bb-post-content {
    color: #333;
    font-size: 1.05rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.bb-post-content img,
.bb-post-content iframe,
.bb-post-content video,
.bb-post-content table {
    max-width: 100%;
}

.bb-post-content pre,
.bb-post-content code {
    white-space: pre-wrap;
    word-break: break-word;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.bb-inline-post-ad {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    min-height: 120px;
    padding: 0.5rem;
}

.bb-inline-post-ad .adsbygoogle {
    min-height: 110px;
    width: 100%;
}

#shareFB,
#shareWA,
#shareTele,
#shareLinkedIn,
#shareX,
#shareEmail,
.bb-post-share-actions .btn {
    background-color: transparent !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--bs-btn-border-color) !important;
    color: var(--bs-btn-color) !important;
    min-height: 44px;
    text-decoration: none !important;
}

#shareFB:hover,
#shareFB:focus,
#shareFB:active,
#shareFB:visited,
#shareWA:hover,
#shareWA:focus,
#shareWA:active,
#shareWA:visited,
#shareTele:hover,
#shareTele:focus,
#shareTele:active,
#shareTele:visited,
#shareLinkedIn:hover,
#shareLinkedIn:focus,
#shareLinkedIn:active,
#shareLinkedIn:visited,
#shareX:hover,
#shareX:focus,
#shareX:active,
#shareX:visited,
#shareEmail:hover,
#shareEmail:focus,
#shareEmail:active,
#shareEmail:visited,
.bb-post-share-actions .btn:hover,
.bb-post-share-actions .btn:focus,
.bb-post-share-actions .btn:active,
.bb-post-share-actions .btn.active,
.bb-post-share-actions .btn:visited {
    background-color: transparent !important;
    border-color: var(--bs-btn-border-color) !important;
    box-shadow: none !important;
    color: var(--bs-btn-color) !important;
    text-decoration: none !important;
}