/* stream.css */
#posts,
#sources-posts-container,
#locations-posts-container,
.postviewer-reactedpost-container,
#user-recentposts-container,
#preview-modal-posts,
#posts-view-social-profiles,
#incidents-stream,
#user-posts-analysis-preview-modal-posts,
 #preview-modal-body-preview-modal-posts, #incident-details-container{

    .long-container p {
        white-space: normal;
        font-weight: normal;
    }

    /* Spinner Loader */
    .spinner-border-sm {
        width: 1rem;
        height: 1rem;
        border-width: 0.2rem;
    }

    #spinner-loader {
        position: relative;
        margin-top: 100px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #posts-content,
    .posts-content {
        display: flex;
        justify-content: space-between;
        border-radius: 8px;
        padding: 1rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .preview-column,
    .posts-column,
    .social-profile-column,
    .incidents-column,
    .user-posts-analysis-preview-column,
    .preview-modal-body-preview-column {
        flex: 1;
        min-width: 0;
    }

    /* Card Styling */
    .post-card {
        background-color: var(--white-color);
        border-radius: 8px;
        /* box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); */
        /* padding: 1rem; */
        margin-bottom: 1rem;
        transition: box-shadow 0.3s, border-color 0.3s;
        cursor: pointer;

        hr {
            opacity: 1;
        }

        .media-content {
            text-align: center;
        }

        .news-image img,
        .media-content img {
            max-width: 80%;
            max-height: 10rem;
        }

        .media-content video {
            max-width: 80%;
            max-height: 18rem;
        }

        .news-text h4 {
            font-size: var(--font-size-p2);
            color: var(--primary-color);
        }

        &:hover {
            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
            border-color: var(--background-color);
        }
    }

    .user-profile-name {
        font-weight: bold;
        color: var(--primary-color);
        text-align: left;
        margin: 0;
        word-break: break-all;

        p,
        span {
            font-size: var(--font-size-p2);
        }
    }

    .youtube-desc a {
        color: var(--hyperlink-color);
    }

    .user-profile-name i {
        color: blue;
    }

    .post-thumbnail {
        text-align: left;
        white-space: normal;
        word-break: break-word;
        font-weight: normal;
        overflow-wrap: break-word;
        font-size: var(--font-size-p1);
        color: var(--primary-color);
        opacity: 0.95;

        p {
            font-size: var(--font-size-p1);
        }

        .text-content {
            color: var(--primary-color);
        }

        a {
            cursor: pointer;
            text-decoration: none;
            color: var(--hyperlink-color) !important;
        }
    }

    /* Statistics Section */
    .twittercard-content {
        color: var(--primary-color);
    }

    .mytext em {
        display: block !important;
        font-style: normal !important;
    }

    .replies,
    .likes,
    .impressions,
    .retweets,
    .views {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-size: var(--font-size-p1);
    }

    .replies i,
    .likes i,
    .fa-comment,
    .impressions i,
    .post-stream-dropdown i,
    .bookmark i {
        color: var(--tertiary-color);
        font-size: var(--font-size-p1);
    }

    .fa-ellipsis-v,
    .fa-bookmark {
        color: var(--primary-color);
    }

    /* Modal Styling */
    .modal-content {
        background-color: var(--white-color);
        border-radius: 10px;
        padding: 1.5rem;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    }

    .dropup .dropdown-toggle::after {
        display: none;
    }

    .avatar-container {
        flex-shrink: 0;
        margin-right: 10px;

        .avatar-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
    }

    /* Content Column (Profile Name & Handle) */
    .content-col {
        flex-grow: 1;

        .user-name {
            font-size: var(--font-size-p3);
            margin: 0;
            display: inline-flex;
            align-items: center;
        }

        .user-handle {
            font-size: var(--font-size-p1);
            color: var(--secondary-color);
            margin-bottom: 0rem;
            text-align: left;
        }
    }

    /* Facebook, YouTube, LinkedIn and X-Type Icons */
    .icon-col {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;

        img {
            max-height: 16px;
        }

        .youtube-icon {
            color: #FF0000;
        }

        .xtype-image {
            width: 20px;
            height: 20px;
        }
    }

    .rtl {
        text-align: right;
        direction: rtl;
    }

    .ltr {
        text-align: left;
        direction: ltr;
    }

    .news-dropdown:active {
        color: var(--white-color) !important;
        text-decoration: none !important;
    }

    .initials {
        line-height: 30px;
    }

    .linkedin-text a {
        cursor: pointer;
    }

    .linkedin-text a:hover,
    .post-thumbnail a:hover,
    #post-title-container a:hover {
        text-decoration: underline;
    }

    .news-image {
        margin: 0.5rem 0;
    }

    .news-icon {
        font-size: 1.2rem;
    }

    .short-text {
        font-weight: normal;
    }

    .post-thumbnail img {
        width: 100%;
        height: auto;
    }

    /* Additional styling if needed */
    .show-more,
    .show-less {
        white-space: nowrap;
        text-decoration: none;
        /* cursor: pointer;
        font-weight: bold !important; */
    }

    .show-more:hover,
    .show-less:hover {
        text-decoration: underline;
    }

    .end-of-posts {
        text-align: center;
        margin: 20px auto;
        padding: 20px;
        color: #6c757d;
        display: none;
    }

    .end-of-posts i {
        color: #28a745;
        margin-bottom: 1rem;
    }

    .end-of-posts p {
        font-size: 1.1rem;
        font-weight: 500;
        margin: 0;
    }

    .footer-section {
        padding: 0.4rem 0.6rem;
        border-top: 1px solid var(--background-color)
    }

    .posted-date {
        font-size: var(--font-size-p1);
        /* color: var(--hyperlink-color); */
    }

    .posttype {
        color: var(--accent-color-1);
        font-size: var(--font-size-p1);
        text-align: right;
        margin-bottom: 0.5rem;
    }

    .accented {
        color: var(--accent-color-1);
    }

    .reacted-post {
        margin-top: 5px;
        font-size: var(--font-size-p1);
    }

    .sort-filter {
        padding: 5px;
        display: flex;
        justify-content: right;

        #sortDropdown.active i {
            color: var(--primary-color);
        }

        .dropdown-item.selected {
            background-color: var(--secondary-color);
            color: var(--white-color);
        }

        /* Labels */
        .group-label {
            font-weight: bold;
            color: var(--primary-color);
            font-size: var(--font-size-p2);
            text-transform: uppercase;
        }

        .toolbar {
            width: fit-content;
            background-color:
                /* rgba(var(--background-color-rgb), 0.55) */
                var(--background-color);
            padding: 0.5rem 1rem;
        }

        .toolbar-box {
            border: 1px solid var(--background-color);
            padding: 10px;
            border-radius: 8px;
            margin-right: 15px;
        }

        .toolbar-header {
            font-weight: bold;
            margin-right: 15px;
        }
    }

    .post-stream-dropdown {
        padding: 0 5px;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    .news-profilename {
        color: var(--tertiary-color);
    }

    @media (max-width: 1024px) {
        .sort-filter {
            .toolbar {
                width: fit-content;
            }

            span {
                display: none;
            }
        }

        #posts-content {
            padding: 5px;
        }

        .modal-content {
            padding: 0;
        }
    }

    @media (max-width: 767.98px) {
        .sort-filter {
            padding: 0;
        }
    }

    @media (max-width: 380px) {
        .sort-filter {
            .toolbar {
                width: min-content;
            }
        }
    }
}

.dummy-cards-loader {
    .card {
        text-align: left;
    }
}

#posts,
#sources-posts-container,
#locations-posts-container,
.postviewer-reactedpost-container,
#user-recentposts-container,
#preview-modal-posts,
#articleModal,
#social-profile-posts-view,
#user-posts-analysis-preview-modal-posts,
#preview-modal-body-preview-modal-posts {

    .dropdown-sentiment {
        i {
            color: var(--white-color) !important;
        }

        &:hover {
            background-color: transparent !important;
            color: inherit !important;
        }

        &:active {
            background-color: var(--white-color);
            color: var(--primary-color);
        }
    }

    .sentiment-select {
        option:hover {
            background-color: var(--secondary-color) !important;
            color: var(--white-color) !important;
        }

        option:active {
            background-color: var(--primary-color) !important;
            color: var(--white-color) !important;
        }
    }

    .sentiment-section {
        font-size: var(--font-size-p1);
        text-transform: capitalize;
        text-align: left;
    }

    .post-view-sentiment {
        text-transform: capitalize;
    }

    .post-sentiment {
        font-size: 0.7rem;

        i {
            margin-right: 5px;
        }

        &.positive i {
            color: var(--positive-sentiment) !important;
        }

        &.neutral i {
            color: var(--neutral-sentiment) !important;
        }

        &.negative i {
            color: var(--negative-sentiment) !important;
        }
    }
}