#stream-container {
    padding: 5px;
    margin: 5px;
    max-height: 600px;
    overflow-y: auto;

    .activity {
        border: 1px solid var(--content-color-40);
        width: 95%;
        margin: 30px auto;

    }

    .activity header {
        color: var(--base-color);
        padding: 5px;
        display: flex;
        position: relative;
        flex-direction: column;

        .provider_circle {
            border-radius: 50%;
            width: 40px;
            height: 40px;
            background: var(--base-color);
            position: absolute;
            top: -20px;
            border: 3px solid var(--white);
            cursor: pointer;

            &.left {
                left: -15px;
            }

            &.right {
                right: -15px;
            }

            svg {
                margin: 10px;
            }
        }

        .activity-heading {
            padding: 5px;
            margin: 0 0 0 25px;
            flex-grow: 1;
            img {
                display: inline;
            }
            h3 {
                display: inline;
                color: var(--base-color);
                border-bottom: none;
                font-size: 14px;
                vertical-align: 6px;

            }
        }
        .activity-avatar {
            max-width: 25px;
        }
        .activity-date{
            color: var(--base-gray);
            font-size: 0.75em ;
            margin: 0 0 0 30px;
            display: block;
            flex-grow: 1;

        }
    }

    .activity-content{
        padding: 5px;
        background-color: var(--white);
        margin-left: 30px;
        display: none;
    }

    .clear {
        clear: both;
    }

    .activity-details {
        display: block;
    }


    footer {
        padding: 5px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-content: space-around;
        align-items: center;
        margin-left: 30px;

        .activity-object-link {
            order: 0;
            flex: 0 1 auto;
            align-self: auto;
        }
    }


    .activity-object-link ul {
        padding: 0;
    }

    .activity-object-link ul li {
        list-style-type: none;
        display: inline;
        padding-right: 15px;
    }


    .activity-day {
        color: var(--base-gray);
        font-size: 0.75em ;
        margin: 0 45%;
    }

    /* Loading animation */
    .loading-indicator {
        text-align: center;
        padding: 1em 0;
    }

    .loading-indicator span {
        background-color: var(--light-gray-color);
        border-radius: 50%;
        height: 10px;
        position: relative;
        width: 10px;
        display: inline-block;
    }

    .loading-indicator span.load-1 {
        animation: loading-animation-1 1s linear 20;
    }

    .loading-indicator span.load-2 {
        animation: loading-animation-2 1s linear 20;
    }

    .loading-indicator span.load-3 {
        animation: loading-animation-3 1s linear 20;
    }
}

@keyframes loading-animation-1 {
  0%   { transform: scale(1); }
  16%  { transform: scale(1.3); }
  33%  { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes loading-animation-2 {
  0%   { transform: scale(1); }
  33%  { transform: scale(1); }
  49%  { transform: scale(1.3); }
  65%  { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes loading-animation-3 {
  0%   { transform: scale(1); }
  66%  { transform: scale(1); }
  81%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}



#toggle-all-activities {
    @include navigation-icon(no-activity, activity);
}
#toggle-user-activities {
    @include navigation-icon(visibility-invisible, visibility-visible);
}