.stories-container {
    max-width: 600px;
    margin: 24px auto;
    position: relative;
}

.stories-container .previous-btn,
.stories-container .next-btn,
.stories-full-view .previous-btn,
.stories-full-view .next-btn {
    width: 30px;
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    background: #444;
    color: #fff;
    border-radius: 50%;
    padding: 10px;
    display: flex;
    cursor: pointer;
}

.stories-container .previous-btn,
.stories-container .next-btn {
    opacity: 0;
    pointer-events: none;
    transition: all 400ms ease;
}

.stories-container .previous-btn.active,
.stories-container .next-btn.active {
    opacity: 1;
    pointer-events: auto;
}

.stories-container .previous-btn,
.stories-full-view .previous-btn {
    left: 8px;
}

.stories-container .next-btn,
.stories-full-view .next-btn {
    right: 8px;
}

.stories-container .story {
    height: 180px;
    width: 120px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.stories-container .story img,
.stories-container .story video,
.stories-container .story .lazy-load-image-background{
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.video-story-data{
    width: 53%;
    border-radius: 16px;
}

.stories-container .story .media-data {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.stories-container .story .count-story {
    position: absolute;
    padding: 3px;
    z-index: 1;
    background: #e31e24;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    text-align: center;
    right: 5px;
    justify-content: center;
    top: 5px;
    color: white;
}
.stories-container .stories {
    display: flex;
    gap: 8px;
}

.stories-container .content {
    overflow-x: scroll;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.stories-container .content::-webkit-scrollbar {
    display: none;
}

.stories-container .author {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 16px;
    font-size: 15px;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(transparent, #222 130%);
}

.stories-full-view {
    position: fixed;
    inset: 0;
    z-index: 135;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    place-items: center;
}

.stories-full-view.active {
    display: grid;
}


.stories-full-view .close-btn {
    position: absolute;
    top: 14px;
    right: 1px;
    /*top: 16px;*/
    /*right: 16px;*/
    width: 30px;
    background: #444;
    color: #fff;
    border-radius: 50%;
    padding: 10px;
    display: flex;
    z-index: 26;
    cursor: pointer;
}

.stories-full-view .story-profile {
    position: absolute;
    top: 0px;
    left: 0px;
    /*top: 16px;*/
    /*left: 16px;*/
    color: #fff;
    border-radius: 50%;
    padding: 10px;
    display: flex;
    z-index: 20;
    cursor: pointer;
}
.user-profile-story{
    width: 52px;
    border-radius: 50%;
}

.stories-full-view .content {
    height: 100vh;
    width: 100%;
    max-width: 700px;
    position: relative;
    margin: 0;
    padding: 0;
}

.stories-full-view .story {
    height: 100%;
    text-align: center;
}
.stories-full-view .story video,
.stories-full-view .story img {
    width: 100%;
    height: 90vh;
    aspect-ratio: 10/16;
    object-fit: cover;
    border-radius: 16px;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.stories-full-view .author {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 32px;
    border-radius: 8px;
}

.repeat-video-button {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    opacity: 0;
    transition: height 1s;
    transition-timing-function: ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.repeat-video-button div{
    border-radius: 25px;
    padding: 10px;
    display: flex;
    cursor: pointer;
    background: #44444494;
    justify-content: center;
    text-align: center;
}
.repeat-video-button.isActive {
    opacity: 1; /* Change from 100 to 1 for full opacity */
}

.repeat-video-button span{
    margin: 0 21px;
}


.like-share-message-report-btn {
    z-index: 5;
    position: absolute;
    bottom: 20px;
    right: 0px;
    color: white;
}
.like-share-message-report-btn .action-button-story{
    height: 40px;
    width: 40px;
    border-radius: 25px;
    background-color: rgba(0, 0, 0, 0.76);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


.story-action-buttons{
    display: grid;
    place-items: center; /* Center both vertically and horizontally */
    height: 40px;
    width: 40px;
}

/*=================*/
@keyframes heartScale {
    0% {
        transform: scale(1);
        fill: white; /* Initially white fill */
    }
    50% {
        transform: scale(1.5); /* Slightly larger during scaling */
        fill: white; /* Fill remains white */
    }
    75% {
        transform: scale(2); /* Scale to 2x */
        fill: rgba(255, 0, 0, 0.69); /* Change fill to red */
    }
    100% {
        transform: scale(4); /* Scale to 4x */
        fill: red; /* Keep fill red */
    }
}

.animated-heart-container {
    position: relative;
    display: inline-block;
}

.animated-heart {
    fill: white; /* Initial fill color */
    stroke: white; /* Initial stroke color */
    stroke-width: 2;
    transform-origin: center;
    width: 50px;
    height: 50px;
    animation: heartScale 2s ease-in-out infinite; /* Infinite scaling and fill change */
    transition: fill 0.5s ease; /* Smooth transition for fill color */
}

/*=================*/
.animated-like-div{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}



.story-action-buttons {
    text-decoration: none;
    color: #ffffff;

}

.story-action-buttons:hover {
    color: #e31e24;
}

.story-action-buttons svg{

    margin: 3px;
    width: 25px;
}

.story-caption-text{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    background: #000000e0;
}
/*===========Context menu=======*/
.album-detail-context-menu {
    width: calc(100% - 128px);
}

.story-context-menu {
    width: 200px;
    position: absolute;
    bottom: 63px;
    right: 31px;
    z-index: 1;
    transition: height 1s;
    transition-timing-function: ease-out;
}

.story-context-menu div i {
    font-size: 14px;
}
.story-context-menu div:hover {
    cursor: pointer;
    background: rgba(135, 135, 135, 0.8);
}



/*======Device Size========*/

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .stories-full-view .story video,
    .stories-full-view .story img{
        width: 100%;
        height: 90vh;
    }
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .stories-full-view .story video,
    .stories-full-view .story img{
        width: 100%;
    }
}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .stories-full-view .story video,
    .stories-full-view .story img{
        width: unset;
    }

}

/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .stories-full-view .story video,
    .stories-full-view .story img{
        width: unset;
    }
    .stories-full-view .story-profile{
        top: 16px;
        left: 16px;
    }
    .stories-full-view .close-btn{
        top: 16px;
        right: 16px;
    }

}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
    .stories-full-view .story video,
    .stories-full-view .story img {
        width: unset;
    }

    .stories-full-view .story-profile {
        top: 16px;
        left: 16px;
    }

    .stories-full-view .close-btn {
        top: 16px;
        right: 16px;
    }
}

/*=========context-menu-story===========*/
.context-menu-story{
    position: absolute;
    right: 44px;
    bottom: 12px;
    display: flex;
    width: 180px;
}
/*=========Caption-story===========*/
.caption-story{
    text-align: left;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgb(0 0 0 / 84%);
}
.caption-story p{
    color: white;
}