@media(min-width:1600px) {
    /* every one story */
    .upsquardStoriesPage .gallery .comment-gallery {
        left: 34.5% !important;
    }
    .upsquardStoriesPage .everyOneStory {
        gap: 50px;
    }

    .upsquardStoriesPage .gallery-item-2 #video-viewport,
.upsquardStoriesPage .gallery-item-4 #video-viewport {
    height: 100%;
    width: 100%;
}

    .upsquardStoriesPage .gallery {
        max-width: 1400px;
        margin: auto;
    }
    .upsquardStoriesPage .gallery .gallery-item-1 .card .telle-me-tap .comment-tell-tap .bi {
        font-size: 9px;
    }

    .upsquardStoriesPage .gallery .gallery-controls button {
        font-size: 20px !important;
        background-color: #daeaef;
        color: #58c4c6;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    .upsquardStoriesPage .gallery .gallery-controls-previous {
        position: absolute;
        left: 31.5%;
        bottom: 144px;
    }

    .upsquardStoriesPage .gallery .gallery-controls-next {
        position: absolute;
        right: 31.5%;
        bottom: 144px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .card-img-overlay .card-cont {
        bottom: 3%;
        position: absolute;
        left: 5%;
        text-align: left;
    }

    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3 .card .card-img-overlay .card-cont {
        bottom: 0%;
        position: absolute;
        left: 5%;
        text-align: left;
    }

    .upsquardStoriesPage .everyOneStory .whatsYours h4 {
        font-size: 17px;
        margin-bottom: 0;
    }

    .upsquardStoriesPage .everyOneStory .searchEmotion img {
        right: 84%;
        width: 20px;
    }

    .upsquardStoriesPage .gallery-item-3 .comment-gallery {
        min-width: 340px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .gallery-img {
        width: 340px !important;
        height: 500px !important;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card h5 {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card p {
        font-size: 12px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .telle-me-tap .tellMe {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .gallery-img {
        width: 200px;
        height: 350px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .gallery-img {
        width: 200px;
        height: 350px;
    }

    /* .gallery-item-3 {
        left: 33%;
        width: 270px;
        height: 446px;
    } */

    .upsquardStoriesPage .gallery-item .comment-gallery span {
        font-size: 20px;
    }

    .upsquardStoriesPage span .fullscreen-icon {
        font-size: 20px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card .telle-me-tap .tellMe {
        font-size: 13px;
    }

    .upsquardStoriesPage .gallery-item .icon-tap span {
        font-size: 11px;
    }

    .upsquardStoriesPage .gallery-item-3 .icon-tap span {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card .telle-me-tap .tellMe {
        font-size: 8px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card .telle-me-tap .comment-tell-tap .bi {
        color: #58c4c6;
        font-size: 7px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .telle-me-tap .comment-tell-tap .bi {
        color: #58c4c6;
        font-size: 12px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card .telle-me-tap .tellMe {
        font-size: 13px;
    }

    .upsquardStoriesPage .gallery-item-5 .gallery-img {
        height: 250px;
        width: 140px;
    }

    .upsquardStoriesPage .gallery-item-1 .gallery-img {
        width: 140px;
        height: 250px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card .telle-me-tap .tellMe {
        font-size: 8px;
    }

    .gallery-controls button {
        height: 30px;
        width: 30px;
    }

    .upsquardStoriesPage .select-reaction .cont p {
        font-size: 11px;
    }

    .upsquardStoriesPage .select-reaction h6 {
        font-size: 10px;
    }

    .upsquardStoriesPage .cont {
        padding: 0px 0px;
    }

    .upsquardStoriesPage .emoji-icons {
        width: 13px;
        height: 13px;
        margin-right: 5px;
        margin-bottom: 18px;
    }

    .upsquardStoriesPage .responses h6 {
        font-size: 10px;
    }

    .upsquardStoriesPage .responses strong {
        font-size: 10px;
    }

    .upsquardStoriesPage .responses p {
        font-size: 8px;
    }

    .upsquardStoriesPage .message-comment-search input[type="search"] {
        width: 150px;
        font-size: 10px;
    }

    .upsquardStoriesPage .message-comment-icon {
        width: 30px !important;
        height: 30px !important;
    }

    .upsquardStoriesPage .message-comment-icon .bi {
        top: 5%;
        left: 88%;
        font-size: 16px;
    }

    .upsquardStoriesPage .comment-gallery h6 {
        font-size: 12px;
        padding-right: 0px !important;
    }

    .upsquardStoriesPage .comment-gallery .record-comment span {
        font-size: 11px;
        color: #fff;
    }

    .upsquardStoriesPage .video-comment .record-comment {
        background: rgba(88, 196, 198);
        border: none;
        color: #ffffff;
        border-radius: 50px;
        padding: 6px 17px;
        /* font-size: 28px; */
        /* width: 32%; */
    }

    .upsquardStoriesPage .video-comment .record-comment .bi {
        color: #ffffff;
        font-size: 12px;
    }

    .upsquardStoriesPage .video-comment .responses .base-video-img {
        width: 80px !important;
        height: 90px !important;
    }


    .upsquardStoriesPage .video-comment .responses .video-img-thumb .top-video-img {
        width: 40px;
        height: 40px;
        background-position: center;
        background-repeat: no-repeat;
        border: 2px solid #ffffff;
        border-radius: 100px;
        position: absolute;
        top: -24%;
        left: 26%;
    }

    .upsquardStoriesPage .comment-gallery .video-response p {
        font-size: 12px;
    }

    .upsquardStoriesPage .video-comment .responses .video-img-thumb {
        margin-top: 22px;
    }

    .upsquardStoriesPage .video-comment .see-all a {
        font-size: 12px;
    }


    .upsquardStoriesPage .gallery .share-comment .social-link .share-link {
        width: 30px !important ;
        height: 30px !important ;
        margin: auto !important ;
    }

    .upsquardStoriesPage .share-comment .social-link {
        column-gap: 2rem !important;
        row-gap: 1rem !important;

    }

    .upsquardStoriesPage .share-comment .social-link .share-link p {
        font-size: 10px;
        padding-top: 10px;
    }

    .upsquardStoriesPage .report-comment p {
        font-size: 12px;
    }

    .upsquardStoriesPage .message-comment-search input[type="search"] {
        border: 1px solid #f7f7f7;
        border-radius: 100px;
        background-color: #fbfbfb;
        width: 253px;
        margin-bottom: 18px;
    }
    .upsquardStoriesPage .gallery-item-3 #video-viewport video {
        width: 370px !important;
        height: 500px !important;
        left: 51%;
    }
    .upsquardStoriesPage.publicStoryPage .gallery-item-3.save-video #video-viewport video {
        object-fit: unset;
        height: 540px !important;
        width: 370px !important;
        /* border-radius: 20px; */
    }
    .circleMenuView .innerCircle2 svg g text tspan {
        font-size: 14px !important;
    }

    .upsquardStoriesPage .gallery {
        max-width: 1200px;
        margin: auto;
    }

    .upsquardStoriesPage .triangle-arrow {
        position: absolute;
        top: -77%;
        right: 14%;
        transform: rotate(60deg);
        color: #ffffff;
        font-size: 23px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card .telle-me-tap .comment-tell-tap .bi {
        font-size: 7px;
    }

    .upsquardStoriesPage .gallery .gallery-controls button {
        font-size: 20px !important;
        background-color: #daeaef;
        color: #58c4c6;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    .upsquardStoriesPage .gallery .gallery-controls-previous {
        position: absolute;
        left: 30.3%;
        bottom: 144px;
    }

    .upsquardStoriesPage .gallery .gallery-controls-next {
        position: absolute;
        right: 30%;
        bottom: 144px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3.fullScreenVedioDisplay2 {
        width: 85%;
        left: 0%;
        top: 2%;
        transform: translateX(7%);
    }

    .upsquardStoriesPage .gallery .gallery-item-3.save-video {
        width: 400px;
        left: 50%;
        top: 16%;
        height: 540px;

    }
    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3.save-video {
        height: 500px !important;

    }

    .upsquardStoriesPage .everyOneStory .searchEmotion input[type="search"] {
        width: 320px;
    }

    .upsquardStoriesPage .everyOneStory .searchEmotion img {
        right: 89%;
        width: 20px;
    }

    .upsquardStoriesPage .gallery-item-3 .comment-gallery {
        min-width: 340px;
    }

   

    .upsquardStoriesPage .gallery .gallery-item-3 .gallery-img {
        width: 340px !important;
        height: 500px !important;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card h5 {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card p {
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .telle-me-tap .tellMe {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .gallery-img {
        width: 200px;
        height: 350px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .gallery-img {
        width: 200px;
        height: 350px;
    }

    .upsquardStoriesPage .gallery-item .comment-gallery span {
        font-size: 20px;
    }

    .upsquardStoriesPage span .fullscreen-icon {
        font-size: 20px;
        cursor: pointer;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card .telle-me-tap .tellMe {
        padding: 6px;
        font-size: 11px;
    }

    .upsquardStoriesPage .gallery-item-3 .icon-tap span {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card .telle-me-tap .tellMe {
        font-size: 6px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card .telle-me-tap .comment-tell-tap .bi {
        color: #58c4c6;
        font-size: 7px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .telle-me-tap .comment-tell-tap .bi {
        color: #58c4c6;
        font-size: 16px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card .telle-me-tap .tellMe {
        padding: 7px;
        font-size: 10px;
    }

    .upsquardStoriesPage .gallery-item-5 .gallery-img {
        height: 250px;
        width: 140px;
    }

    .upsquardStoriesPage .gallery-item-1 .gallery-img {
        width: 140px;
        height: 250px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card .telle-me-tap .tellMe {
        padding: 6px;
        font-size: 8px;
    }

    .gallery-controls button {
        height: 30px;
        width: 30px;
    }

    .upsquardStoriesPage .gallery .responseCloseLink1 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink2 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink3 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink4 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink5 {
        display: none;
    }

    .upsquardStoriesPage .gallery .vis-none {
        display: none;
    }

    .upsquardStoriesPage .gallery .smily-comment .userImg {
        width: 26px;
        height: 26px;
    }

    .upsquardStoriesPage .gallery .smily-comment .userImg img {
        border-radius: 50%;
        object-fit: cover;
    }

    .upsquardStoriesPage .select-reaction .cont p {
        font-size: 11px;
    }

    .upsquardStoriesPage .select-reaction h6 {
        font-size: 10px;
    }

    /* .upsquardStoriesPage .cont {
        padding: 0px 0px;
    } */

    .upsquardStoriesPage .emoji-icons {
        width: 13px;
        height: 8px;
        margin-right: 12px;
        margin-bottom: 18px;
    }

    /* .upsquardStoriesPage .emoji-icons img{
        object-fit: cover;
    } */

    .upsquardStoriesPage .responses strong {
        font-size: 11px;
        padding-left: 3px;
    }

    .upsquardStoriesPage .responses p {
        font-size: 11px;
        color: #9d9a9a;
    }

    .upsquardStoriesPage .responses .responses-cont p {
        font-size: 12px;
        color: #000;
    }

    /* .upsquardStoriesPage .message-comment-search ::placeholder { 
    color:    #909;
 } */

    .upsquardStoriesPage .message-comment-search .errorBorder {
        border: 1px solid #ff0404 !important;
    }


    .upsquardStoriesPage .gallery .chat-comment-cont {
        overflow-y: auto;
        height: auto;
        max-height: 283px;
        min-height: 80px;
        padding: 5px 0px;
    }

    .upsquardStoriesPage .gallery .smily-comment .scrollbar {
        overflow-y: scroll;
        max-height: 350px;
        min-height: 80px;
        height: auto;
    }

    .upsquardStoriesPage .gallery .message-comment .chat-comments {
        position: relative;
    }

    .upsquardStoriesPage .message-comment-search input[type="search"] {
        width: 150px;
        font-size: 10px;
    }

    .upsquardStoriesPage .message-comment-icon {
        width: 30px;
        height: 30px;
    }

    .upsquardStoriesPage .message-comment-icon .bi {
        top: 10.5% !important;
        left: 17% !important;
        font-size: 17px !important;
        cursor: pointer;
    }

    .upsquardStoriesPage .comment-gallery h6 {
        display: inline-block;
        font-size: 12px;
        padding-right: 0px !important;
        color: #000;
    }

    .upsquardStoriesPage .comment-gallery .record-comment span {
        font-size: 14px;
        color: #fff;
    }

    .upsquardStoriesPage .comment-gallery .share-comment p {
        font-size: 11px;
    }

    .upsquardStoriesPage .video-comment .record-comment {
        background: rgba(88, 196, 198);
        border: none;
        color: #ffffff;
        border-radius: 50px;
        padding: 5px 20px;
        position: relative;
        /* font-size: 28px; */
        /* width: 32%; */
    }

    .upsquardStoriesPage .video-comment .upload-btn {
        border-radius: 50px;
        padding: 4px 20px;
        border-radius: 50px;
        font-size: 14px;
        background-image: linear-gradient(to right, #253770, #4da7b4);
    }

    .upsquardStoriesPage .video-comment .record-comment .bi {
        color: #ffffff;
        font-size: 19px !important;
    }

    .upsquardStoriesPage .video-comment.maxmizeVideoResponse .selectedVideoFull {
        width: 200px;
        height: 200px;
    }

    .upsquardStoriesPage .video-comment.maxmizeVideoResponse .selectedVideoFull img {
        object-fit: cover;
    }

    .upsquardStoriesPage .video-comment .responses .base-video-img video {
        object-fit: cover;
    }

    .upsquardStoriesPage .video-comment .responses .videoResponse {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 0px;
        overflow-y: hidden;
        height: 110px;
    }

    .upsquardStoriesPage .video-comment .responses .videoResponseSeeAll {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* grid-gap: 30px; */
        overflow-y: scroll;
        height: 113px;
    }

    .upsquardStoriesPage .video-comment .responses .video-img-thumb .top-video-img {
        width: 45px;
        height: 45px;
        background-position: center;
        background-repeat: no-repeat;
        border: 2px solid #ffffff;
        border-radius: 100px;
        position: absolute;
        top: -24%;
        left: 18%;
    }

    .upsquardStoriesPage .video-comment .responses .video-img-thumb .top-video-img img {
        object-fit: cover;
    }

    .upsquardStoriesPage .comment-gallery .video-response p {
        font-size: 12px;
        /* color: #ffffff; */
    }

    .upsquardStoriesPage .single-video-comment .video-response p {
        font-size: 12px;
        color: #9d9d9d;
    }

    .upsquardStoriesPage .video-comment .responses .video-img-thumb {
        margin-top: 22px;
    }

    .upsquardStoriesPage .video-comment .see-all a {
        font-size: 12px;
    }

    .upsquardStoriesPage .share-comment .social-link {
        column-gap: 1rem !important;
        row-gap: 1rem !important;

    }

    .upsquardStoriesPage .share-comment .social-link .share-link p {
        font-size: 10px;
        padding-top: 10px;
    }


    .upsquardStoriesPage .report-comment p {
        font-size: 12px;
        cursor: pointer;
    }

    .upsquardStoriesPage .report-comment p:hover {
        color: #58c4c6;
    }

    .upsquardStoriesPage .modal .modal-dialog .modal-content .modal-body .hover-bg:hover {
        background: #58c4c6;
        /* padding-left: 24px; */
        /* padding: 2px 2px 2px 2px; */
        border-radius: 5px;
        /* margin: 1rem 0; */
    }

    .upsquardStoriesPage .modal .modal-dialog .modal-content .modal-body .hover-bg:hover hr {
        /* visibility: hidden; */
        /* display: none; */
        margin: 1rem 0;
    }

    .upsquardStoriesPage .message-comment-search input[type="search"] {
        border: 1px solid #f7f7f7;
        border-radius: 100px;
        background-color: #fbfbfb;
        width: 253px;
        margin-bottom: 18px;
    }
}































































@media(min-width:1200px) and (max-width:1599px) {
    .upsquardStoriesPage .front-img {
        left: 0px;
        top: -1px;
    }
    .upsquardStoriesPage .anonymousImg {
        width: 372px !important;
    }
    
    .upsquardStoriesPage .gallery-item-3.fullScreenVedioDisplay2 #video-viewport video {
        min-height: 60vh !important;
        max-height: 66vh !important;
    }

    /* .upsquardStoriesPage .gallery-item-3.fullScreenVedioDisplay2 #video-viewport video {
        min-height: 68vh;
        max-height: 70vh;
    } */
    .upsquardStoriesPage .gallery-item-3 #video-viewport video {
        height: 500px !important;
        width: 372px !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery-item-3.save-video #video-viewport video {
        object-fit: unset;
        height: 500px !important;
        width: 370px !important;
        /* border-radius: 20px; */
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .card-img-overlay .card-cont {
        bottom: 10% !important;
        text-align: left;
    }

    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3 .card .card-img-overlay .card-cont{
        bottom: 0% !important;
    }

    .circleMenuView .innerCircle2 svg g text tspan {
        font-size: 14px !important;
    }

    .upsquardStoriesPage .gallery {
        max-width: 1200px;
        margin: auto;
    }

    .upsquardStoriesPage .triangle-arrow {
        position: absolute;
        top: -77%;
        right: 14%;
        transform: rotate(60deg);
        color: #ffffff;
        font-size: 23px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 {
        transform: translateX(-62%);
        height: 350px;
        width: 200px;
        top: 30%;
        left: 24%;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card .telle-me-tap .comment-tell-tap .bi {
        font-size: 7px;
    }

    .upsquardStoriesPage .gallery-item-1 .card .card-img-overlay .card-cont {
        left: 0;
        text-align: left;
        right: 0;
        padding: 15px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 {
        left: 6%;
    }

    .upsquardStoriesPage .gallery .gallery-controls button {
        font-size: 20px !important;
        background-color: #daeaef;
        color: #58c4c6;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 {
        left: 78.1%;
        top: 30%;
        right: 6%;
        transform: translateX(-50%);
        height: 350px;
        width: 200px;
    }

    .upsquardStoriesPage .gallery .gallery-controls-previous {
        position: absolute;
        left: 30.3%;
        bottom: 144px;
    }

    .upsquardStoriesPage .gallery .gallery-controls-next {
        position: absolute;
        right: 30%;
        bottom: 144px;
    }

    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3.fullScreenVedioDisplay2 {
        width: 85% !important;
        height: 100% !important;
        left: 0%;
        top: 2%;
        transform: translateX(7%);
    }
    .upsquardStoriesPage .gallery .gallery-item-3.fullScreenVedioDisplay2 {
        width: 90% !important;
        height: 100% !important;
        left: 0%;
        top: 0%;
        bottom: 0%;
        transform: translateX(7%);
    }

    .upsquardStoriesPage .gallery .gallery-item-3.save-video {
        top: 18% !important;
    }

    .upsquardStoriesPage .everyOneStory .searchEmotion {
        margin: 0;
    }

    .upsquardStoriesPage .everyOneStory .whatsYours h4 {
        font-size: 17px;
        margin-bottom: 0;
    }

    .upsquardStoriesPage .everyOneStory .searchEmotion input[type="search"] {
        width: 320px;
    }

    .upsquardStoriesPage .everyOneStory .searchEmotion img {
        right: 89%;
        width: 20px;
    }

    .upsquardStoriesPage .gallery-item-3 .comment-gallery {
        min-width: 340px;
    }

    .upsquardStoriesPage .everyOneStory {
        gap: 50px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .gallery-img {
        width: 340px !important;
        height: 500px !important;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card h5 {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card p {
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .telle-me-tap .tellMe {
        font-size: 14px;
    }

    .gallery-item-2 {
        top: 25%;
        left: 17%;
        transform: translateX(-50%);
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .gallery-img {
        width: 200px;
        height: 350px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .gallery-img {
        width: 200px;
        height: 350px;
    }

    .upsquardStoriesPage .gallery-item .comment-gallery span {
        font-size: 20px;
    }

    .upsquardStoriesPage span .fullscreen-icon {
        font-size: 20px;
        cursor: pointer;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card h5 {
        font-size: 15px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card p {
        font-size: 11px;
        line-height: 15px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card .telle-me-tap .tellMe {
        padding: 6px;
        font-size: 11px;
    }

    .upsquardStoriesPage .gallery-item-3 .icon-tap span {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card h5 {
        font-size: 10px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card p {
        font-size: 8px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 {
        left: 94%;
        top: 40%;
        width: 140px;
        height: 250px;
    }

    .upsquardStoriesPage .gallery-item-2 .card .card-img-overlay .card-cont {
        left: 0;
        text-align: left;
        right: 0;
        padding: 15px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card h5 {
        font-size: 10px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card p {
        font-size: 8px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card .telle-me-tap .tellMe {
        font-size: 6px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card .telle-me-tap .comment-tell-tap .bi {
        color: #58c4c6;
        font-size: 7px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .telle-me-tap .comment-tell-tap .bi {
        color: #58c4c6;
        font-size: 16px;
    }

    .upsquardStoriesPage .gallery-item-5 .card .card-img-overlay .card-cont {
        left: 0;
        text-align: left;
        right: 0;
        padding: 15px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card h5 {
        font-size: 15px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card p {
        font-size: 11px;
        line-height: 15px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery-item-4 .card .card-img-overlay .card-cont {
        left: 0;
        text-align: left;
        right: 0;
        padding: 15px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card .telle-me-tap .tellMe {
        padding: 7px;
        font-size: 10px;
    }

    .upsquardStoriesPage .gallery-item-5 .gallery-img {
        height: 250px;
        width: 140px;
    }

    .upsquardStoriesPage .gallery-item-1 .gallery-img {
        width: 140px;
        height: 250px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card .telle-me-tap .tellMe {
        padding: 6px;
        font-size: 8px;
    }

    .gallery-controls button {
        height: 30px;
        width: 30px;
    }


    .upsquardStoriesPage .gallery-item-3 .card .card-img-overlay {
        top: 300px !important;
    }

    .upsquardStoriesPage .gallery .responseCloseLink1 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink2 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink3 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink4 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink5 {
        display: none;
    }



    .upsquardStoriesPage .gallery .vis-none {
        display: none;
    }

    .upsquardStoriesPage .gallery .smily-comment .userImg {
        width: 26px;
        height: 26px;
    }

    .upsquardStoriesPage .select-reaction .cont p {
        font-size: 11px;
    }

    .upsquardStoriesPage .emoji-icons {
        width: 13px;
        height: 8px;
        margin-right: 12px;
        margin-bottom: 18px;
    }

    /* .upsquardStoriesPage .emoji-icons img{
        object-fit: cover;
    } */

    .upsquardStoriesPage .responses strong {
        font-size: 11px;
        padding-left: 3px;
    }

    .upsquardStoriesPage .responses p {
        font-size: 11px;
        color: #9d9a9a;
    }

    /* .upsquardStoriesPage .message-comment-search ::placeholder { 
    color:    #909;
 } */


    .upsquardStoriesPage .message-comment-search .errorBorder {
        border: 1px solid #ff0404 !important;
    }

    .upsquardStoriesPage .gallery .smily-comment .scrollbar {
        overflow-y: scroll;
        max-height: 350px;
        min-height: 80px;
        height: auto;
    }

    .upsquardStoriesPage .gallery .message-comment .chat-comments {
        position: relative;
    }

    .upsquardStoriesPage .message-comment-search input[type="search"] {
        width: 150px;
        font-size: 10px;
    }

    .upsquardStoriesPage .message-comment-icon {
        width: 30px !important;
        height: 30px !important;
    }

    .upsquardStoriesPage .message-comment-icon .bi {
        top: 13% !important;
        left: 22% !important;
        font-size: 15px !important;
    }

    .upsquardStoriesPage .comment-gallery h6 {
        display: inline-block;
        font-size: 12px;
        padding-right: 0px !important;
        color: #000;
    }

    .upsquardStoriesPage .comment-gallery .record-comment span {
        font-size: 14px;
        color: #fff;
    }

    .upsquardStoriesPage .comment-gallery .share-comment p {
        font-size: 11px;
    }

    .upsquardStoriesPage .video-comment .record-comment {
        padding: 4px 20px !important;
    }

    .upsquardStoriesPage .video-comment .upload-btn {
        border-radius: 50px;
        padding: 4px 20px;
        border-radius: 50px;
        font-size: 14px;
        background-image: linear-gradient(to right, #253770, #4da7b4);
    }

    .upsquardStoriesPage .video-comment .record-comment .bi {
        font-size: 18px !important;
    }

    .upsquardStoriesPage .video-comment .responses .base-video-img {
        width: 87px !important;
        height: 90px !important;
    }

    .upsquardStoriesPage .video-comment.maxmizeVideoResponse .selectedVideoFull {
        width: 200px;
        height: 200px;
    }

    .upsquardStoriesPage .video-comment.maxmizeVideoResponse .selectedVideoFull img {
        object-fit: cover;
    }

    .upsquardStoriesPage .video-comment .responses .videoResponseSeeAll {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* grid-gap: 30px; */
        overflow-y: scroll;
        height: 113px;
    }

    .upsquardStoriesPage .video-comment .responses .video-img-thumb .top-video-img {
        width: 45px !important;
        height: 45px !important;
        top: -24%;
    }

    .upsquardStoriesPage .video-comment .responses .video-img-thumb .top-video-img img {
        object-fit: cover;
        border-radius: 50%!important;
    }

    .upsquardStoriesPage .comment-gallery .video-response p {
        font-size: 12px;
        /* color: #ffffff; */
    }

    .upsquardStoriesPage .single-video-comment .video-response p {
        font-size: 12px;
        color: #9d9d9d;
    }

    .upsquardStoriesPage .video-comment .see-all a {
        font-size: 12px;
    }
   

    .upsquardStoriesPage .gallery .share-comment .social-link .share-link {
        width: 30px !important;
        height: 30px !important;
        margin: auto;
    }

    .upsquardStoriesPage .share-comment .social-link {
        column-gap: 1rem !important;
        row-gap: 1rem !important;

    }

    .upsquardStoriesPage .share-comment .social-link .share-link p {
        font-size: 10px;
        padding-top: 10px;
    }

    .upsquardStoriesPage .report-comment span {
        font-size: 15px;
        cursor: pointer;
    }

    .upsquardStoriesPage .report-comment p:hover {
        color: #58c4c6;
    }

    .gallery-item-5 {
        left: 8%;
    }

    .upsquardStoriesPage .modal .modal-dialog .modal-content .modal-body .hover-bg:hover {
        background: #58c4c6;
        /* padding-left: 24px; */
        /* padding: 2px 2px 2px 2px; */
        border-radius: 5px;
        /* margin: 1rem 0; */
    }

    .upsquardStoriesPage .modal .modal-dialog .modal-content .modal-body .hover-bg:hover hr {
        /* visibility: hidden; */
        /* display: none; */
        margin: 1rem 0;
    }

    .upsquardStoriesPage .message-comment-search input[type="search"] {
        border: 1px solid #f7f7f7;
        border-radius: 100px;
        background-color: #bfbfbf;
        width: 253px;
        margin-bottom: 18px;
    }

}

@media(min-width:900px) and (max-width:1199px) {
    .upsquardStoriesPage .wheelSearch {
        min-width: 500px !important;
    }
    .upsquardStoriesPage .fullScreenVedioDisplay2 .play-btn {
        top: 50% !important;
    }
    .upsquardStoriesPage .fullScreenVedioDisplay .biIconRight{
        display: none;
    }
    
    .upsquardStoriesPage .fullScreenVedioDisplay .biIconLeft {
        display : none;
    }
    .upsquardStoriesPage .gallery .fullScreenVedioDisplay2 .biIconRight {
        display : none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink4 {
        display: none;
    }
    .fullScreenVedioDisplay:after {
        height: 100vh !important;
    }
    .upsquardStoriesPage .searchStoriesByEmotions .circleMenuView .innerCircle2 svg {
        width: 225px !important;
        height: 225px !important;
    }
    header .navbar-light .navbar-nav .nav-link {
        padding: 0.2em 7px !important;
    }
    .circleMenuView .outerCircle svg {
        width: 330px !important;
        height: 330px !important;
    }
    .post-but {
        /* margin-top: 50px; */
        padding: 5px 10px;
        font-size: 11px;
        text-align: center;
    }
    .upsquardStoriesPage.publicStoryPage .gallery .comment-gallery {
        width: 372px !important;
        left: 29.4% !important;
    bottom: -56% !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3 {
        top: 18% !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3.fullScreenVedioDisplay2{
        top: -6% !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery-item-3.save-video .card .card-img-overlay {
        top: 0% !important;
        width: 370px !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery-item-3 #video-viewport video {
        height: 500px !important;
        width: 370px !important;
    }
    
    .upsquardStoriesPage .gallery-item-3 #video-viewport video {
        height: 500px !important;
        width: 370px !important;
    }
    .upsquardStoriesPage .bg-every-one {
        height: auto;
    }
    .upsquardStoriesPage .gallery .smily-comment .userImg {
        width: 26px;
        height: 26px;
    }
    .upsquardStoriesPage .gallery .smily-comment .scrollbar {
        overflow-y: scroll;
        max-height: 350px;
        min-height: 80px;
        height: auto;
    }
    .upsquardStoriesPage .gallery .chat-comment-cont {
        overflow-y: auto;
        height: auto;
        max-height: 283px;
        min-height: 80px;
        padding: 5px 0px;
    }
    .upsquardStoriesPage .gallery .vis-none {
        display: none;
    }

    .upsquardStoriesPage .gallery .biIconRight {
        right: 24% !important;
        z-index: 3;
    }
    .upsquardStoriesPage .gallery .biIconLeft {
        left: 24% !important;
        z-index: 2;
    }

    .upsquardStoriesPage .gallery .responseCloseLink5 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink2 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink1 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink1 {
        display: none;
    }

    .upsquardStoriesPage .triangle-arrow {
        position: absolute;
        top: -77%;
        right: 14%;
        transform: rotate(60deg);
        color: #ffffff;
        font-size: 23px;
    }

    .upsquardStoriesPage .gallery .comment-gallery {
        bottom: -45% !important;
        left: 29.3% !important;
        min-width: 372px !important;
    }

    .upsquardStoriesPage .gallery {
        max-width: 900px;      
    }

    .navbar {
        /* display: none; */
    }

    .upsquardStoriesPage .gallery-item-1,
    .gallery-item-5 {
        display: none;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 {
        left: 14%;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card .telle-me-tap .comment-tell-tap .bi {
        font-size: 9px;
    }

    .upsquardStoriesPage .gallery-item-1 .card .card-img-overlay .card-cont {
        top: 44%;
        position: absolute;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 {
        left: 6%;
        top: 36%;
    }

    .upsquardStoriesPage .gallery .gallery-controls button {
        font-size: 20px !important;
        background-color: #daeaef;
        color: #58c4c6;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    .upsquardStoriesPage .comment-gallery .message-comment p {
        font-size: 12px;
    }

    .upsquardStoriesPage .comment-gallery .share-comment p {
        font-size: 11px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 {
        left: 89%;
    }

    .upsquardStoriesPage .gallery .gallery-controls-previous {
        position: absolute;
        left: 23%;
        bottom: 144px;
        z-index: 2;
    }

    .upsquardStoriesPage .gallery .gallery-controls-next {
        position: absolute;
        right: 23%;
        bottom: 144px;
        z-index: 2;
    }


    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3 .card .card-img-overlay .card-cont{
        bottom: 0% !important;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .card-img-overlay .card-cont {
        bottom: 10% !important;
        left: 5%;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 {
        width: 340px;
        left: 50%;
        top: 3%;

    }

    .upsquardStoriesPage .everyOneStory .searchEmotion {
        display: flex;
        position: relative;
        margin: 0;
    }

    .upsquardStoriesPage .everyOneStory .whatsYours h4 {
        font-size: 17px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin-bottom: 0;
    }

    .upsquardStoriesPage .everyOneStory .searchEmotion input[type="search"] {
        width: 255px;
    }

    .upsquardStoriesPage .everyOneStory .searchEmotion img {
        right: 84%;
        width: 20px;
    }

    .upsquardStoriesPage .gallery-item-3 .comment-gallery {
        min-width: 350px;
    }

    .upsquardStoriesPage .everyOneStory {
        /* flex-direction: column; */
        gap: 13px;
    }

    /* .upsquardStoriesPage .gallery-item-1, .gallery-item-5{
            display: none !important;
        } */
    .upsquardStoriesPage .gallery .gallery-item-3 .gallery-img {
        width: 350px;
        height: 480px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card h5 {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card p {
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .telle-me-tap .tellMe {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .gallery-img {
        width: 240px;
        height: 350px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .gallery-img {
        width: 240px;
        height: 350px;
    }

    .upsquardStoriesPage .gallery-item .comment-gallery span {
        font-size: 20px;
    }

    .upsquardStoriesPage span .fullscreen-icon {
        font-size: 20px;
    }

    .upsquardStoriesPage .gallery-item-2 .card .card-img-overlay {
        height: 350px;
        top: 0%;
        width: 200px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card h5 {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card p {
        font-size: 12px;
        line-height: 15px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card .telle-me-tap .tellMe {
        font-size: 9px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .requestaStoryLink a {
        font-size: 10px !important;
    }

    .upsquardStoriesPage .gallery-item .icon-tap span {
        font-size: 11px;
    }

    .upsquardStoriesPage .gallery-item-3 .icon-tap span {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card h5 {
        font-size: 10px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card p {
        font-size: 8px;
        margin-bottom: 8px;
    }

    .gallery-item-5 {
        top: 21%;
    }

    .gallery-item-1 {
        top: 17%;
        right: 15%;
        width: 150px;
        transform: translateX(-44%);
    }

    .upsquardStoriesPage .gallery .gallery-item-5 {
        left: 94%;
        top: 36%;
        width: 140px;
    }

    .upsquardStoriesPage .gallery-item-2 .card .card-img-overlay .card-cont {
        bottom: 3%;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card h5 {
        font-size: 10px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card p {
        font-size: 8px;
        margin-bottom: 8px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card .telle-me-tap .tellMe {
        font-size: 8px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card .telle-me-tap .comment-tell-tap .bi {
        color: #58c4c6;
        font-size: 7px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .telle-me-tap .comment-tell-tap .bi {
        color: #58c4c6;
        font-size: 12px;
    }

    .upsquardStoriesPage .gallery-item-5 .card .card-img-overlay .card-cont {
        top: 44%;
        position: absolute;
    }

    .upsquardStoriesPage .gallery-item-4 .card .card-img-overlay {
        height: 330px;
        top: 0%;
        width: 200px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card h5 {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card p {
        font-size: 12px;
        line-height: 15px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery-item-4 .card .card-img-overlay .card-cont {
        bottom: 3%;
        position: absolute;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card .telle-me-tap .tellMe {
        font-size: 9px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .requestaStoryLink a {
        font-size: 10px !important;
    }


    .upsquardStoriesPage .gallery-item-5 .gallery-img {
        height: 250px;
        width: 140px;
    }

    .upsquardStoriesPage .gallery-item-5 .card .card-img-overlay {
        height: 250px;
        width: 140px;
    }

    .upsquardStoriesPage .gallery-item-1 .gallery-img {
        width: 140px;
        height: 250px;
    }

    .upsquardStoriesPage .gallery-item-1 .card .card-img-overlay {
        width: 140px;
        height: 250px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card .telle-me-tap .tellMe {
        font-size: 8px;
    }

    .upsquardStoriesPage .gallery-item-4 .card .card-img-overlay {
        height: 350px;
        top: 0%;
        width: 200px;
    }

    .gallery-controls button {
        height: 30px;
        width: 30px;
    }


    .upsquardStoriesPage .gallery-item-3 .card .card-img-overlay {
        top: 65% !important;
    }

    .upsquardStoriesPage .select-reaction .cont p {
        font-size: 11px;
    }

    .upsquardStoriesPage .select-reaction h6 {
        font-size: 10px;
    }

    .upsquardStoriesPage .cont {
        padding: 0px 0px;
    }

    .upsquardStoriesPage .emoji-icons {
        width: 13px;
        height: 13px;
        margin-right: 5px;
        margin-bottom: 18px;
    }

    .upsquardStoriesPage .responses h6 {
        font-size: 10px;
    }

    .upsquardStoriesPage .responses strong {
        font-size: 10px;
    }

    .upsquardStoriesPage .responses p {
        font-size: 8px;
    }

    .upsquardStoriesPage .message-comment-search input[type="search"] {
        width: 150px;
        font-size: 10px;
    }

    .upsquardStoriesPage .message-comment-icon {
        width: 30px !important;
        height: 30px !important;
    }

    .upsquardStoriesPage .message-comment-icon .bi {
        top: 14% !important;
        left: 19% !important;
        font-size: 15px !important;
    }

    .upsquardStoriesPage .comment-gallery h6 {
        font-size: 12px;
        padding-right: 0px !important;
    }

    .upsquardStoriesPage .comment-gallery .record-comment span {
        font-size: 11px;
        color: #fff;
    }

    .upsquardStoriesPage .video-comment .record-comment {
        padding: 6px 17px !important;
        font-size: 28px !important;
         width: 32% !important;
    }

    .upsquardStoriesPage .video-comment .record-comment .bi {
        font-size: 14px !important;
    }

    .upsquardStoriesPage .video-comment .responses .base-video-img {
        width: 90px !important;
        height: 90px !important;
    }

    .upsquardStoriesPage .gallery .video-comment {
        min-width: 315px;
        /* max-width: 325px; */
        transform: translate(0px, -61px) !important;
    }

    .upsquardStoriesPage .video-comment .responses .video-img-thumb .top-video-img {
        width: 40px;
        height: 40px;
        background-position: center;
        background-repeat: no-repeat;
        border: 2px solid #ffffff;
        border-radius: 100px;
        position: absolute;
        top: -24%;
        left: 5%;
    }

    .upsquardStoriesPage .comment-gallery .video-response p {
        font-size: 12px;
    }

    .upsquardStoriesPage .video-comment .responses .video-img-thumb {
        margin-top: 22px;
    }

    .upsquardStoriesPage .video-comment .see-all a {
        font-size: 12px;
    }

    .upsquardStoriesPage .gallery .share-comment {
        min-width: 330px;
    }

    .upsquardStoriesPage .gallery .share-comment .social-link .share-link {
        width: 25px;
        height: 25px;
        margin: auto;
    }
    .upsquardStoriesPage .gallery .publicStory .share-comment .social-link .share-link {
        width: 35px;
        height: 35px;
    }
    .upsquardStoriesPage .share-comment .social-link {
        column-gap: 1rem !important;
        row-gap: 1rem !important;
        justify-content: center;

    }

    .upsquardStoriesPage .share-comment .social-link .share-link p {
        font-size: 10px;
        padding-top: 10px;
    }


    .upsquardStoriesPage .gallery .report-comment {
        min-width: 332px;
        min-height: 60px;
    }

    .upsquardStoriesPage .report-comment p {
        font-size: 12px;
    }

    .gallery-item-5 {
        left: 8%;
    }

    .upsquardStoriesPage .message-comment-search input[type="search"] {
        border: 1px solid #f7f7f7;
        border-radius: 100px;
        background-color: #fbfbfb;
        width: 210px;
        margin-bottom: 18px;
    }


    /* Create Story Page */

    .upsquardStoriesPage .createStoriesPage {
        /* height: 1200px; */
    }


}

@media(min-width:768px) and (max-width:899px) {
    .upsquardStoriesPage .emotionsSearch{
        display: none;
    }
    .upsquardStoriesPage .wheelSearch {
        min-width: 490px !important;
    }
    .upsquardStoriesPage .gallery-item-3.fullScreenVedioDisplay2 #video-viewport video {
        min-height: 50vh !important;
        max-height: 65vh !important;
    }
    .upsquardStoriesPage .gallery-item-3 .card .card-img-overlay1 {
        bottom: 3% !important;
    }
    .upsquardStoriesPage .fullScreenVedioDisplay .biIconRight{
        
        display: none;
    }
    
    .upsquardStoriesPage .fullScreenVedioDisplay .biIconLeft {
        display : none;
    }
    .upsquardStoriesPage .gallery .responseCloseLink4 {
        display: none;
    }
    .upsquardStoriesPage .gallery .gallery-item-3.fullScreenVedioDisplay2 {
        width: 85% !important;
    }
    .upsquardStoriesPage .gallery-item-3 .play-btn {
        left: 45% !important;
    }
    .createStory.loading {
        right: -8% !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery .comment-gallery {
        bottom: -56% !important;
        min-width: 372px !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3 {
        top: 18% !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3.fullScreenVedioDisplay2{
        top: -6% !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery-item-3.save-video .card .card-img-overlay {
        top: 0% !important;
        width: 370px !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery-item-3 #video-viewport video {
        height: 500px !important;
        width: 370px !important;
    }
    .upsquardStoriesPage .gallery-item-2 #video-viewport,
.upsquardStoriesPage .gallery-item-4 #video-viewport {
    height: 100%;
    width: 100%;
}
.upsquardStoriesPage .gallery-item-3 #video-viewport video {
    height: 500px !important;
    width: 340px !important;
}
    .upsquardStoriesPage .gallery .smily-comment .scrollbar {
        overflow-y: scroll;
        max-height: 350px;
        min-height: 80px;
        height: auto;
    }
    .upsquardStoriesPage .gallery .smily-comment .userImg {
        width: 26px;
        height: 26px;
    }
    .upsquardStoriesPage .bg-every-one {
        height: auto;
    }

    .upsquardStoriesPage .gallery .vis-none {
        display: none;
    }

    .upsquardStoriesPage .gallery .biIconRight {
        right: 22% !important;
        z-index: 3;
    }
    .upsquardStoriesPage .gallery .biIconLeft {
        left: 22% !important;
        z-index: 2;
    }
    .upsquardStoriesPage .gallery .responseCloseLink1 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink2 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink5 {
        display: none;
    }

    .upsquardStoriesPage .gallery {
        max-width: 850px;
        margin: auto;
        z-index: 0;
    position: relative;
    }

    .navbar {
        /* display: none; */
    }

    .upsquardStoriesPage .gallery-item-1,
    .gallery-item-5 {
        display: none;
    }


    .upsquardStoriesPage .gallery .gallery-item-2 {
        left: 15%;
        z-index: 0;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card .telle-me-tap .comment-tell-tap .bi {
        font-size: 9px;
    }

    .upsquardStoriesPage .gallery-item-1 .card .card-img-overlay .card-cont {
        top: 44%;
        position: absolute;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 {
        left: 6%;
        top: 36%;
    }

    .upsquardStoriesPage .gallery .gallery-controls button {
        font-size: 20px !important;
        background-color: #daeaef;
        color: #58c4c6;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 {
        left: 88%;
        z-index: -1;
    }

    .upsquardStoriesPage .gallery .gallery-controls-previous {
        position: absolute;
        left: 16%;
        bottom: 144px;
        z-index: 2;
    }

    .upsquardStoriesPage .gallery .gallery-controls-next {
        position: absolute;
        right: 18%;
        bottom: 144px;
        z-index: 2;
    }




    .upsquardStoriesPage .gallery .gallery-item-3 .card .card-img-overlay .card-cont {
        left: 4%;
        /* width: 310px !important; */
        bottom: 10% !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3 .card .card-img-overlay .card-cont {
        bottom: 0% !important;
        left: 4%;
    }
    .upsquardStoriesPage .gallery .gallery-item-3 {
        width: 340px !important;
        left: 50%;
        top: 3%;
        z-index: 0;

    }
    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3 {
        width: 370px !important;

    }
    .upsquardStoriesPage .gallery .comment-gallery {
        min-width: 341px !important;
        bottom: -41% !important;
        left: 50% !important;
        transform: translateX(-50%);
    }

    .upsquardStoriesPage .everyOneStory .searchEmotion {
        display: flex;
        position: relative;
        margin: 0;
    }

    .upsquardStoriesPage .everyOneStory .whatsYours h4 {
        font-size: 17px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin-bottom: 0;
    }

    .upsquardStoriesPage .everyOneStory .searchEmotion input[type="search"] {
        width: 255px;
    }

    .upsquardStoriesPage .everyOneStory .searchEmotion img {
        right: 84%;
        width: 18px;
    }

    .upsquardStoriesPage .gallery-item-3 .comment-gallery {
        min-width: 350px;
    }

    .upsquardStoriesPage .everyOneStory {
        /* flex-direction: column; */
        gap: 13px;
    }

    /* .upsquardStoriesPage .gallery-item-1, .gallery-item-5{
            display: none !important;
        } */
    .upsquardStoriesPage .gallery .gallery-item-3 .gallery-img {
        width: 350px;
        height: 480px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card h5 {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card p {
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .telle-me-tap .tellMe {
        font-size: 14px;
    }

    .gallery-item-2 {
        top: 25%;
        left: 17%;
        transform: translateX(-50%);
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .gallery-img {
        width: 190px;
        height: 350px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .gallery-img {
        width: 190px;
        height: 350px;
    }

    .upsquardStoriesPage .gallery-item .comment-gallery span {
        font-size: 20px;
    }

    .upsquardStoriesPage span .fullscreen-icon {
        font-size: 20px;
    }

    .upsquardStoriesPage .gallery-item-2 .card .card-img-overlay {
        height: 350px;
        top: 0%;
        width: 200px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card h5 {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card p {
        font-size: 12px;
        line-height: 15px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card .telle-me-tap .tellMe {
        font-size: 9px;
    }

    .upsquardStoriesPage .gallery-item .icon-tap span {
        font-size: 11px;
    }

    .upsquardStoriesPage .gallery-item-3 .icon-tap span {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card h5 {
        font-size: 10px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card p {
        font-size: 8px;
        margin-bottom: 8px;
    }

    .gallery-item-5 {
        top: 21%;
    }

    .gallery-item-1 {
        top: 17%;
        right: 15%;
        width: 150px;
        transform: translateX(-44%);
    }

    .upsquardStoriesPage .gallery .gallery-item-5 {
        left: 94%;
        top: 36%;
        width: 140px;
    }

    .upsquardStoriesPage .gallery-item-2 .card .card-img-overlay .card-cont {
        top: 63%;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card h5 {
        font-size: 10px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card p {
        font-size: 8px;
        margin-bottom: 8px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card .telle-me-tap .tellMe {
        font-size: 8px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card .telle-me-tap .comment-tell-tap .bi {
        color: #58c4c6;
        font-size: 7px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .telle-me-tap .comment-tell-tap .bi {
        color: #58c4c6;
        font-size: 12px;
    }

    .upsquardStoriesPage .gallery-item-5 .card .card-img-overlay .card-cont {
        top: 44%;
        position: absolute;
    }

    .upsquardStoriesPage .gallery-item-4 .card .card-img-overlay {
        height: 330px;
        top: 0%;
        width: 200px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card h5 {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card p {
        font-size: 12px;
        line-height: 15px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery-item-4 .card .card-img-overlay .card-cont {
        top: 63%;
        position: absolute;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card .telle-me-tap .tellMe {
        font-size: 9px;
    }

    .gallery-item-2 {
        top: 23%;
        left: 12%;
        transform: translateX(-30%);
        height: 350px;
        width: 200px;
    }

    .upsquardStoriesPage .gallery-item-5 .gallery-img {
        height: 250px;
        width: 140px;
    }

    .upsquardStoriesPage .gallery-item-5 .card .card-img-overlay {
        height: 250px;
        width: 140px;
    }

    .upsquardStoriesPage .gallery-item-1 .gallery-img {
        width: 140px;
        height: 250px;
    }

    .upsquardStoriesPage .gallery-item-1 .card .card-img-overlay {
        width: 140px;
        height: 250px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card .telle-me-tap .tellMe {
        font-size: 8px;
    }

    .upsquardStoriesPage .gallery-item-4 .card .card-img-overlay {
        height: 350px;
        top: 0%;
        width: 200px;
    }

    .gallery-controls button {
        height: 30px;
        width: 30px;
    }


    .upsquardStoriesPage .gallery-item-3 .card .card-img-overlay {
        top: 57% !important;
        height: 500px;
        bottom: 4%;
    }

    .upsquardStoriesPage .gallery .smily-comment {
        transform: translate(-5px, -59px) !important;
        min-width: 332px !important;
        min-height: 330px !important;

    }
    .upsquardStoriesPage .gallery .publicStory .smily-comment {
        transform: translate(0px, -59px) !important;
        min-width: 332px !important;
        min-height: 330px !important;

    }

    .upsquardStoriesPage .triangle-arrow {
        position: absolute;
        top: -77%;
        right: 14%;
        transform: rotate(60deg);
        color: #ffffff;
        font-size: 23px;
    }

    .upsquardStoriesPage .select-reaction .cont p {
        font-size: 11px;
    }

    .upsquardStoriesPage .select-reaction h6 {
        font-size: 10px;
    }

    .upsquardStoriesPage .cont {
        padding: 0px 0px;
    }

    .upsquardStoriesPage .emoji-icons {
        width: 13px;
        height: 13px;
        margin-right: 5px;
        margin-bottom: 18px;
    }

    .upsquardStoriesPage .responses h6 {
        font-size: 10px;
    }

    .upsquardStoriesPage .responses strong {
        font-size: 10px;
    }

    .upsquardStoriesPage .responses p {
        font-size: 8px;
    }

    .upsquardStoriesPage .comment-gallery .message-comment p {
        font-size: 12px;
    }

    .upsquardStoriesPage .gallery .message-comment {
        min-width: 329px !important;
    min-height: 100px !important;
    }
    .upsquardStoriesPage .gallery .publicStory .message-comment {
        min-width: 360px !important;
        min-height: 100px !important;
    }

    .upsquardStoriesPage .comment-gallery .share-comment p {
        font-size: 11px;
    }

    .upsquardStoriesPage .message-comment-search input[type="search"] {
        width: 150px;
        font-size: 10px;
    }

    .upsquardStoriesPage .message-comment-icon {
        width: 30px !important;
        height: 30px !important;
    }

    .upsquardStoriesPage .message-comment-icon .bi {
        top: 13% !important;
        left: 19% !important;
        font-size: 15px !important;
    }

    .upsquardStoriesPage .comment-gallery h6 {
        font-size: 12px;
        padding-right: 0px !important;
    }

    .upsquardStoriesPage .comment-gallery .record-comment span {
        font-size: 11px;
        color: #fff;
    }

    .upsquardStoriesPage .video-comment .record-comment {
        padding: 6px 17px !important;
    font-size: 28px !important;
    width: 32%;
    }

    .upsquardStoriesPage .video-comment .record-comment .bi {
        font-size: 14px !important;
    }

    .upsquardStoriesPage .video-comment .responses .base-video-img {
        width: 75px !important;
        height: 80px !important;
    
    }

    .upsquardStoriesPage .gallery .video-comment {
        min-width: 332px !important;
    }
    .upsquardStoriesPage .gallery .publicStory .video-comment {
        transform: translate(1px, -61px) !important;
    }
    .upsquardStoriesPage .video-comment .responses .video-img-thumb .top-video-img {
        width: 40px !important;
        height: 40px !important;
        top: -24%;
        left: 17% !important;
    }

    .upsquardStoriesPage .comment-gallery .video-response p {
        font-size: 12px;
    }

    .upsquardStoriesPage .video-comment .responses .video-img-thumb {
        margin-top: 22px;
    }

    .upsquardStoriesPage .video-comment .see-all a {
        font-size: 12px;
    }

    .upsquardStoriesPage .gallery .share-comment {
        min-width: 326px !important;
    }
    .upsquardStoriesPage .gallery .publicStory .share-comment {
        min-width: 359px !important;
    }

    .upsquardStoriesPage .gallery .share-comment .social-link .share-link {
        width: 28px !important;
        height: 28px !important;
        margin: auto;
    }

    .upsquardStoriesPage .share-comment .social-link {
        column-gap: 1rem !important;
        row-gap: 1rem !important;
        justify-content: center;
    }

    .upsquardStoriesPage .share-comment .social-link .share-link p {
        font-size: 10px;
        padding-top: 10px;
    }



    .upsquardStoriesPage .gallery .report-comment {
        min-width: 325px !important;
        min-height: 50px !important;
    }

    .upsquardStoriesPage .gallery .publicStory .report-comment {
        min-width: 355px !important;
        min-height: 60px !important;
    }
    .upsquardStoriesPage .report-comment p {
        font-size: 12px;
    }

    .gallery-item-5 {
        left: 8%;
    }

    .upsquardStoriesPage .message-comment-search input[type="search"] {
        border: 1px solid #f7f7f7;
        border-radius: 100px;
        background-color: #fbfbfb;
        width: 210px;
        margin-bottom: 18px;
    }


    /* Create Story Page */

    .upsquardStoriesPage .createStoriesPage .wheel-emotion {
        /* margin-top: 100px; */
    }

    .upsquardStoriesPage .createStoriesPage {
        /* height: 1200px; */
    }

}

@media(min-width:576px) and (max-width:767px) {
    .upsquardStoriesPage .emotionsSearch{
        display: none;
    }
    .upsquardStoriesPage .wheelSearch {
        min-width: 362px !important;
    }
    
    .upsquardStoriesPage .fullScreenVedioDisplay2 .play-btn {
        top: 50% !important;
        left: 48% !important;
    }
    .upsquardStoriesPage .gallery-item-3.fullScreenVedioDisplay2 #video-viewport video {
        min-height: 50vh !important;
        max-height: 66vh !important;
    }
    .upsquardStoriesPage .fullScreenVedioDisplay .biIconRight{
        display: none;
    }
    
    .upsquardStoriesPage .fullScreenVedioDisplay .biIconLeft {
        display : none;
    }

    .storySettingsPage .backArrowButton {
        padding-left: 43px !important;
    }
    .createStoriesPage .backArrowButton {
        padding-left: 42px !important;
    }
    .upsquardStoriesPage .gallery .responseCloseLink4 {
        display: none;
    }
    .upsquardStoriesPage .gallery-item-3 .play-btn {
        left: 40% !important;
    }
    .upsquardStoriesPage .gallery .publicStory .smily-comment {
        transform: translate(1px, -59px) !important;
        min-width: 332px !important;
        min-height: 330px !important;

    }
   
    .upsquardStoriesPage .gallery .userVideoFull {
        width: 274px !important;
    }
    
    .upsquardStoriesPage .gallery .biIconLeft {
        left: 12% !important;
    z-index: 2;
    }
    .upsquardStoriesPage .gallery .biIconRight {
        right: 12% !important;
        z-index: 2;
    }
    .upsquardStoriesPage .gallery .gallery-item-3.fullScreenVedioDisplay2 {
        z-index: 3;
        left: 16% !important;
        width: 430px !important;
        transform: translateX(0%) !important;
    }

    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3.fullScreenVedioDisplay2 {
        width: 85% !important;
        height: 100% !important;
        left: 8% !important;
        top: 2%;
        transform: translateX(0%) !important;
    }

    .upsquardStoriesPage.publicStoryPage .gallery .comment-gallery {
        left: 50% !important;
    bottom: -56% !important;
    min-width: 372px !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3 {
        top: 18% !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3.fullScreenVedioDisplay2{
        top: -6% !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery-item-3.save-video .card .card-img-overlay {
        top: 0% !important;
        width: 370px !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery-item-3 #video-viewport video {
        height: 500px !important;
        width: 370px !important;
    }
    .upsquardStoriesPage .gallery-item-2 #video-viewport,
    .upsquardStoriesPage .gallery-item-4 #video-viewport {
        height: 100%;
        width: 100%;
    }
    .upsquardStoriesPage .gallery .smily-comment .scrollbar {
        overflow-y: scroll;
        max-height: 350px;
        min-height: 80px;
        height: auto;
    }
    .upsquardStoriesPage .gallery .smily-comment .userImg {
        width: 26px;
        height: 26px;
    }
    .upsquardStoriesPage .bg-every-one {
        height: auto;
    }

    .upsquardStoriesPage .gallery .vis-none {
        display: none;
    }

    .createStoriesPage .ourStoryCreation {
        flex-direction: column;
        gap: 30px;
        padding-bottom: 30px;
    }

    .createStoriesPage .create-story-right {
        padding: 0px;
    }

    .createStoriesPage .create-story-left {
        border-right: 0px solid #ebe3e3;
    }

    .upsquardStoriesPage .gallery {
        max-width: 1000px;
        margin: auto;
    }

    .navbar {
        /* display: none; */
    }

    .upsquardStoriesPage .gallery-item-1,
    .gallery-item-5 {
        display: none;
    }

    .gallery-item {
        transition: none;
        z-index: 0;
    }


    .upsquardStoriesPage .gallery .gallery-item-2 {
        left: 20%;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card .telle-me-tap .comment-tell-tap .bi {
        font-size: 9px;
    }

    .upsquardStoriesPage .gallery-item-1 .card .card-img-overlay .card-cont {
        top: 44%;
        position: absolute;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 {
        left: 6%;
        top: 36%;
    }

    .upsquardStoriesPage .gallery .gallery-controls button {
        font-size: 20px !important;
        background-color: #daeaef;
        color: #58c4c6;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 {
        left: 85%;
        z-index: -1;
    }

    .upsquardStoriesPage .comment-gallery .message-comment p {
        font-size: 12px;
    }

    .upsquardStoriesPage .comment-gallery .share-comment p {
        font-size: 10px;
    }

    .upsquardStoriesPage .gallery .gallery-controls-previous {
        position: absolute;
        left: 5%;
        bottom: 144px;
        z-index: 2;
    }

    .upsquardStoriesPage .gallery .gallery-controls-next {
        position: absolute;
        right: 5%;
        bottom: 144px;
        z-index: 2;
    }




    .upsquardStoriesPage .gallery .gallery-item-3 .card .card-img-overlay .card-cont {
        bottom: 10% !important;
    }

    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3 .card .card-img-overlay .card-cont{
        bottom: 0% !important;
    }

    .upsquardStoriesPage .gallery-item-3 #video-viewport video {
        object-fit: unset;
        height: 500px !important;
        width: 370px !important;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    .upsquardStoriesPage .everyOneStory .searchEmotion {
        display: flex;
        position: relative;
        margin: 0;
    }

    .upsquardStoriesPage .everyOneStory .whatsYours h4 {
        font-size: 14px;
        margin-bottom: 0;
    }

    .upsquardStoriesPage .everyOneStory .searchEmotion input[type="search"] {
        width: 255px;
        font-size:13px;
    }

    .upsquardStoriesPage .everyOneStory .whatsYours span .storyBtn {
        font-size: 13px;
    }
    .upsquardStoriesPage .everyOneStory .searchEmotion img {
        right: 84%;
        width: 20px;
    }

    .upsquardStoriesPage .gallery-item-3 .comment-gallery {
        min-width: 380px;
    }

    .upsquardStoriesPage .everyOneStory {
        flex-direction: column;
        gap: 13px;
        padding: 10px 0;
    }

    /* .upsquardStoriesPage .gallery-item-1, .gallery-item-5{
            display: none !important;
        } */
    .upsquardStoriesPage .gallery .gallery-item-3 .gallery-img {
        width: 380px !important;
        height: 450px !important;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card h5 {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card p {
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .telle-me-tap .tellMe {
        font-size: 14px;
    }

    .gallery-item-2 {
        top: 25%;
        left: 17%;
        transform: translateX(-50%);
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .gallery-img {
        width: 190px;
        height: 350px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .gallery-img {
        width: 190px;
        height: 350px;
    }


    .gallery-item-4 {
        top: 22%;
        right: 6%;
        transform: translateX(-50%);
        height: 300px;
        width: 190px;
    }

    .upsquardStoriesPage .gallery .responseCloseLink1 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink2 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink5 {
        display: none;
    }

    .upsquardStoriesPage .gallery .comment-gallery {
        min-width: 370px !important;
    position: absolute;
    bottom: -34%;
    left: 50% !important;
    transform: translateX(-50%);
    }

    .upsquardStoriesPage .gallery-item .comment-gallery span {
        font-size: 25px;
    }

    .upsquardStoriesPage span .fullscreen-icon {
        font-size: 20px;
    }

    .upsquardStoriesPage .gallery-item-2 .card .card-img-overlay {
        height: 300px;
        top: 0%;
        width: 190px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card h5 {
        font-size: 12px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card p {
        font-size: 11px;
        line-height: 15px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card .telle-me-tap .tellMe {
        font-size: 7px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .requestaStoryLink a {
        font-size: 9px !important;
    }

    .upsquardStoriesPage .gallery-item .icon-tap span {
        font-size: 11px;
    }

    .upsquardStoriesPage .gallery-item-3 .icon-tap span {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card h5 {
        font-size: 10px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card p {
        font-size: 8px;
        margin-bottom: 8px;
    }

    .gallery-item-5 {
        top: 21%;
    }

    .gallery-item-1 {
        top: 17%;
        right: 15%;
        width: 150px;
        transform: translateX(-44%);
    }

    .upsquardStoriesPage .gallery .gallery-item-5 {
        left: 94%;
        top: 36%;
        width: 140px;
    }

    .upsquardStoriesPage .gallery-item-2 .card .card-img-overlay .card-cont {
        top: 57%;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card h5 {
        font-size: 10px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card p {
        font-size: 8px;
        margin-bottom: 8px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card .telle-me-tap .tellMe {
        font-size: 8px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card .telle-me-tap .comment-tell-tap .bi {
        color: #58c4c6;
        font-size: 7px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .telle-me-tap .comment-tell-tap .bi {
        color: #58c4c6;
        font-size: 12px;
    }

    .upsquardStoriesPage .gallery-item-5 .card .card-img-overlay .card-cont {
        top: 44%;
        position: absolute;
    }

    .upsquardStoriesPage .gallery-item-4 .card .card-img-overlay {
        height: 330px;
        top: 0%;
        width: 200px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card h5 {
        font-size: 12px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card p {
        font-size: 11px;
        line-height: 15px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery-item-4 .card .card-img-overlay .card-cont {
        top: 57%;
        position: absolute;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card .telle-me-tap .tellMe {
        font-size: 8px;
    }

    .gallery-item-2 {
        top: 23%;
        left: 12%;
        transform: translateX(-62%);
        height: 300px;
        width: 190px;
    }

    .upsquardStoriesPage .gallery-item-2 #video-viewport video,
    .upsquardStoriesPage .gallery-item-4 #video-viewport video {
        object-fit: unset;
        height: 300px !important;
        width: 190px !important;
        border-radius: 20px;
    }

    .upsquardStoriesPage .gallery-item-5 .gallery-img {
        height: 250px;
        width: 140px;
    }

    .upsquardStoriesPage .gallery-item-5 .card .card-img-overlay {
        height: 250px;
        width: 140px;
    }

    .upsquardStoriesPage .gallery-item-1 .gallery-img {
        width: 140px;
        height: 250px;
    }

    .upsquardStoriesPage .gallery-item-1 .card .card-img-overlay {
        width: 140px;
        height: 250px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card .telle-me-tap .tellMe {
        font-size: 8px;
    }

    .upsquardStoriesPage .gallery-item-4 .card .card-img-overlay {
        height: 300px;
        top: 0%;
        width: 190px;
    }

    .gallery-controls button {
        height: 30px;
        width: 30px;
    }


    .upsquardStoriesPage .gallery-item-3 .card .card-img-overlay {
        top: 65% !important;      
    width: 100% !important;
        height: 460px;
    }

    .upsquardStoriesPage .gallery .smily-comment {
        min-width: 357px !important;
        min-height: 390px !important;

    }

    .upsquardStoriesPage .message-comment-search input[type="text"] {
        width: 223px !important;
    }

    .upsquardStoriesPage .triangle-arrow {
        position: absolute;
        top: -77%;
        right: 14%;
        transform: rotate(60deg);
        color: #ffffff;
        font-size: 23px;
    }

    .upsquardStoriesPage .select-reaction .cont p {
        font-size: 11px;
    }

    .upsquardStoriesPage .select-reaction h6 {
        font-size: 10px;
    }

    .upsquardStoriesPage .cont {
        padding: 0px 0px;
    }

    .upsquardStoriesPage .emoji-icons {
        width: 13px;
        height: 13px;
        margin-right: 5px;
        margin-bottom: 18px;
    }

    .upsquardStoriesPage .responses h6 {
        font-size: 10px;
    }

    .upsquardStoriesPage .responses strong {
        font-size: 10px;
    }

    .upsquardStoriesPage .responses p {
        font-size: 8px;
    }

    .upsquardStoriesPage .gallery .message-comment {
        min-width: 357px !important;
        min-height: 100px !important;
        bottom: 0% !important;
    }

    .upsquardStoriesPage .gallery .publicStory .message-comment {
        min-width: 358px !important;
        min-height: 100px !important;
        bottom: 0% !important;
    }
    .upsquardStoriesPage .message-comment-search input[type="search"] {
        width: 150px;
        font-size: 10px;
    }

    .upsquardStoriesPage .message-comment-icon {
        width: 30px !important;
        height: 30px !important;
    }

    .upsquardStoriesPage .message-comment-icon .bi {
        top: 13% !important;
        left: 21% !important;
        font-size: 15px !important;
    }

    .upsquardStoriesPage .comment-gallery h6 {
        font-size: 12px;
        padding-right: 0px !important;
    }

    .upsquardStoriesPage .comment-gallery .record-comment span {
        font-size: 11px;
        color: #fff;
    }

    .upsquardStoriesPage .video-comment .record-comment {
        padding: 6px 17px !important
    }

    .upsquardStoriesPage .video-comment .record-comment .bi {
        font-size: 14px !important;
    }

    .upsquardStoriesPage .video-comment .responses .base-video-img {
        width: 80px !important;
        height: 92px !important;
    }

    .upsquardStoriesPage .gallery .video-comment {
        min-width: 360px !important;
    }

    .upsquardStoriesPage .gallery .publicStory .video-comment {

        transform: translate(0px, -61px) !important;
    }

    .upsquardStoriesPage .video-comment .responses .video-img-thumb .top-video-img {
        width: 45px !important;
        height: 45px !important;
    }

    .upsquardStoriesPage .comment-gallery .video-response p {
        font-size: 12px;
    }

    .upsquardStoriesPage .video-comment .responses .video-img-thumb {
        margin-top: 22px;
    }

    .upsquardStoriesPage .video-comment .see-all a {
        font-size: 12px;
    }

    .upsquardStoriesPage .gallery .share-comment {
        min-width: 357px !important;
    }
    .upsquardStoriesPage .gallery .publicStory .share-comment {
        min-width: 360px !important;
    }
    .upsquardStoriesPage .gallery .share-comment .social-link .share-link {
        width: 28px !important;
        height: 28px !important;
        margin: auto;
    }
    .upsquardStoriesPage .gallery .publicStory .share-comment .social-link .share-link {
        width: 38px !important;
        height: 38px !important;
    }
    .upsquardStoriesPage .share-comment .social-link {
        column-gap: 0.5rem !important;
        row-gap: 1rem !important;

    }
    .upsquardStoriesPage .publicStory .share-comment .social-link {
        column-gap: 1rem !important;
        row-gap: 1rem !important;
    }
    .upsquardStoriesPage .share-comment .social-link .share-link p {
        font-size: 10px;
        padding-top: 10px;
    }

    .upsquardStoriesPage .gallery .report-comment {
        min-width: 357px !important;
        min-height: 50px !important;
    }
    .upsquardStoriesPage .gallery .publicStory .report-comment {
        min-width: 356px !important;
        min-height: 60px !important;
    }
    .upsquardStoriesPage .report-comment p {
        font-size: 12px;
    }

    .gallery-item-5 {
        left: 8%;
    }

    .upsquardStoriesPage .message-comment-search input[type="search"] {
        border: 1px solid #f7f7f7;
        border-radius: 100px;
        background-color: #fbfbfb;
        width: 210px;
        margin-bottom: 18px;
    }


    /* Create Story Page */

    .upsquardStoriesPage .createStoriesPage .wheel-emotion {
        /* margin-top: 100px; */
    }

    .upsquardStoriesPage .createStoriesPage {
        /* height: 1200px; */
    }

    .upsquardStoriesPage .createStoriesPage .ourStoryCreation {
        flex-direction: column;
        gap: 40px;
    }

    .upsquardStoriesPage .createStoriesPage .create-story-right {
        padding: 0px;
    }

    .upsquardStoriesPage .createStoriesPage .create-story-left {
        border-right: none;
        padding-right: 0px;
    }

    .upsquardStoriesPage .createStoriesPage .addStoryContent {
        display: flex;
        gap: 40px;
    }

}

@media(max-width:575px) {
    .upsquardStoriesPage .wheelSearch {
        min-width: 362px !important;
    }
    .upsquardStoriesPage .emotionsSearch{
        display: none;
    }
    .upsquardStoriesPage .emofltmedia{
        flex-direction: column;
    }
    .upsquardStoriesPage .fullScreenVedioDisplay2 .play-btn {
        top: 45% !important;
    }
    .upsquardStoriesPage .gallery-item-3.fullScreenVedioDisplay2 #video-viewport video {
        min-height: 50vh !important;
        max-height: 63vh !important;
    }
    .upsquardStoriesPage .wheelSearchData {
        min-width: 215px !important;
    }
    .storySettingsPage .backArrowButton {
        padding-left: 26px !important;
        padding-top: 30px !important;
    }
    .createStoriesPage .backArrowButton {
        padding-left: 20px !important;
        padding-top: 30px !important;
    }
    .upsquardStoriesPage .gallery .responseCloseLink4 {
        display: none;
    }
    .StoryEmojis.loading {
        left: 50% !important;
        top: 55% !important;
    }
    .createStory.loading {
        top: 0%;
    }
    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3 {
        top: 18% !important;
        width: 370px !important;
        z-index: 2;
    }
    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3.fullScreenVedioDisplay2{
        top: -6% !important;
    }
    .upsquardStoriesPage .gallery .userVideoFull video {
        width: 360px !important;
    }
    .storySettingsPage .ourStorySettings .ourStorySetBlock {
        flex-direction: column;
        gap: 20px;
        
    }
    .storySettingsPage .create-story-right{
        width: 100% !important;
        padding: 0 !important;
        
    }
    .storySettingsPage .create-story-left {
        padding-right: 0px !important;
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #eee;
    }
    .upsquardStoriesPage .gallery-item-3 .play-btn {
        left: 45% !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery-item-3.save-video #video-viewport video {
        width: 370px !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery .comment-gallery {
        bottom: -56%;
        left: 50%;
    }
   
    

    .upsquardStoriesPage .gallery .biIconLeft {
        top: 70% !important;
        left: 3% !important;
        z-index: 1;
    }
    .upsquardStoriesPage .gallery .chat-comment-cont {
        overflow-y: auto;
        height: auto;
        max-height: 283px;
        min-height: 80px;
        padding: 5px 0px;
    }
    .upsquardStoriesPage .gallery .smily-comment .scrollbar {
        overflow-y: scroll;
        max-height: 350px;
        min-height: 80px;
        height: auto;
    }
    .upsquardStoriesPage .gallery .smily-comment .userImg {
        width: 26px;
        height: 26px;
    }
    .upsquardStoriesPage .bg-every-one {
        height: auto;
    }

    .upsquardStoriesPage .gallery .vis-none {
        display: none;
    }

    .createStoriesPage .ourStoryCreation {
        flex-direction: column;
        gap: 30px;
        padding-bottom: 30px;
    }

    .createStoriesPage .create-story-right {
        padding: 0px;
    }

    .createStoriesPage .create-story-left {
        border-right: 0 !important;
        padding-right: 0px !important;
    }

    .upsquardStoriesPage .gallery .biIconRight {
        right: 3% !important;
        z-index: 1 !important;
    }

    .upsquardStoriesPage .gallery-item-1,
    .gallery-item-2,
    .gallery-item-4,
    .gallery-item-5 {
        display: none;
    }

    .gallery-item {
        transition: none;

    }

    .upsquardStoriesPage .gallery-item-1,
    .gallery-item-5 {
        display: none;
    }

    .upsquardStoriesPage .navbar {
        border-bottom: 1px solid #000000;
        padding: 5px 20px;
    }

    .upsquardStoriesPage .everyOneStory {
        flex-direction: column;
    }

    .upsquardStoriesPage .gallery {
        max-width: 550px;
        margin: auto;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 {
        width: 400px !important;
    }

    .upsquardStoriesPage .gallery .single-video-comment {
        transform: translate(-121px, -48px) !important;
        min-width: 274px;
        min-height: 241px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 {
        left: 19.6%;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card .telle-me-tap .comment-tell-tap .bi {
        font-size: 9px;
    }

    .upsquardStoriesPage .gallery-item-1 .card .card-img-overlay .card-cont {
        top: 44%;
        position: absolute;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 {
        left: 6%;
        top: 36%;
    }

    .upsquardStoriesPage .gallery .gallery-controls button {
        font-size: 20px !important;
        background-color: #daeaef;
        color: #58c4c6;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin: 0 5px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 {
        left: 84%;
    }

    .upsquardStoriesPage .gallery .gallery-controls-previous {
        left: 3%;
        bottom: 176px;
        z-index: 2;

    }

    .upsquardStoriesPage .gallery .gallery-controls-next {
        right: 8px;
        bottom: 176px;
        z-index: 2;
    }

    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3 .card .card-img-overlay .card-cont{
        bottom: 0% !important;
    }


    .upsquardStoriesPage .gallery .gallery-item-3 .card .card-img-overlay .card-cont {
        bottom: 10% !important;
        left: 5%;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 {
        left: 50%;
        top: 10%;
        height: 500px;
        z-index: 0;
    }

    .upsquardStoriesPage .fullScreenVedioDisplay .gallery .gallery-item-3{
        z-index: 3;
    }
    .upsquardStoriesPage .everyOneStory .searchEmotion {
        display: flex;
        position: relative;
        margin: 0;
    }

    .upsquardStoriesPage .everyOneStory .whatsYours h4 {
        font-size: 17px;
        text-align: center;
        line-height: 39px;
        margin-bottom: 0;
    }

    .upsquardStoriesPage .everyOneStory .searchEmotion input[type="search"] {
        width: 255px;
    }

    .upsquardStoriesPage .everyOneStory .searchEmotion img {
        right: 84%;
        width: 20px;
    }

    .upsquardStoriesPage .gallery-item-3 .comment-gallery {
        min-width: 280px;
    }

    .upsquardStoriesPage .everyOneStory {
        /* flex-direction: column; */
        gap: 13px;
    }

    /* .upsquardStoriesPage .gallery-item-1, .gallery-item-5{
            display: none !important;
        } */
    .upsquardStoriesPage .gallery .gallery-item-3 .gallery-img {
        width: 280px !important;
        height: 400px !important;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card h5 {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card p {
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .telle-me-tap .tellMe {
        font-size: 14px;
    }

    .gallery-item-2 {
        top: 25%;
        left: 17%;
        transform: translateX(-50%);
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .gallery-img {
        width: 100px;
        height: 350px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .gallery-img {
        width: 100px;
        height: 350px;
    }

    .gallery-item-3 {
        left: 33%;
        width: 270px;
        height: 446px;
    }

    .gallery-item-4 {
        top: 22%;
        right: 6%;
        transform: translateX(-50%);
        height: 193px;
        width: 100px;
    }

    .upsquardStoriesPage .gallery-item .comment-gallery span {
        font-size: 20px;
    }

    .upsquardStoriesPage span .fullscreen-icon {
        font-size: 20px;
    }

    .upsquardStoriesPage .gallery-item-2 .card .card-img-overlay {
        height: 350px;
        top: 0%;
        width: 100px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card h5 {
        font-size: 15px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card p {
        font-size: 12px;
        line-height: 15px;
    }

    .upsquardStoriesPage .gallery .gallery-item-2 .card .telle-me-tap .tellMe {
        font-size: 13px;
    }

    .upsquardStoriesPage .gallery-item .icon-tap span {
        font-size: 11px;
    }

    .upsquardStoriesPage .gallery-item-3 .icon-tap span {
        font-size: 14px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card h5 {
        font-size: 10px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card p {
        font-size: 8px;
        margin-bottom: 8px;
    }

    .gallery-item-5 {
        top: 21%;
    }

    .gallery-item-1 {
        top: 17%;
        right: 15%;
        width: 150px;
        transform: translateX(-44%);
    }

    .upsquardStoriesPage .gallery .gallery-item-5 {
        left: 94%;
        top: 36%;
        width: 140px;
    }

    .upsquardStoriesPage .gallery-item-2 .card .card-img-overlay .card-cont {
        /* top: 46%; */
        display: none;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card h5 {
        font-size: 10px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card p {
        font-size: 8px;
        margin-bottom: 8px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card .telle-me-tap .tellMe {
        font-size: 8px;
    }

    .upsquardStoriesPage .gallery .gallery-item-5 .card .telle-me-tap .comment-tell-tap .bi {
        color: #58c4c6;
        font-size: 7px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .telle-me-tap .comment-tell-tap .bi {
        color: #58c4c6;
        font-size: 12px;
    }

    .upsquardStoriesPage .gallery-item-5 .card .card-img-overlay .card-cont {
        top: 44%;
        position: absolute;
    }

    .upsquardStoriesPage .gallery-item-4 .card .card-img-overlay {
        height: 330px;
        top: 0%;
        width: 200px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card h5 {
        font-size: 15px;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card p {
        font-size: 12px;
        line-height: 15px;
    }

    .upsquardStoriesPage .comment-gallery .message-comment p {
        font-size: 11px;
    }

    .upsquardStoriesPage .comment-gallery .share-comment p {
        font-size: 13px;
    }

    .upsquardStoriesPage .comment-gallery.publicStory .share-comment p {
        font-size: 11px;
    }
    .upsquardStoriesPage .gallery .message-comment {
        min-width: 388px !important;
        min-height: 100px !important;
    }
    .upsquardStoriesPage .gallery .publicStory .message-comment {
        min-width: 356px !important;
        min-height: 100px !important;
    }
    .upsquardStoriesPage .gallery-item-4 .card .card-img-overlay .card-cont {
        /* top: 45%;
            position: absolute;
             */
        display: none;
    }

    .upsquardStoriesPage .gallery .gallery-item-4 .card .telle-me-tap .tellMe {
        font-size: 13px;
    }

    .gallery-item-2 {
        top: 23%;
        left: 12%;
        transform: translateX(-62%);
        height: 230px;
        width: 100px;
    }

    .upsquardStoriesPage .gallery-item-5 .gallery-img {
        height: 250px;
        width: 140px;
    }

    .upsquardStoriesPage .gallery-item-5 .card .card-img-overlay {
        height: 250px;
        width: 140px;
    }

    .upsquardStoriesPage .gallery-item-1 .gallery-img {
        width: 140px;
        height: 250px;
    }

    .upsquardStoriesPage .gallery-item-1 .card .card-img-overlay {
        width: 140px;
        height: 250px;
    }

    .upsquardStoriesPage .gallery .gallery-item-1 .card .telle-me-tap .tellMe {
        font-size: 8px;
    }

    .upsquardStoriesPage .gallery-item-4 .card .card-img-overlay {
        height: 350px;
        top: 0%;
        width: 100px;
    }

    .gallery-controls button {
        height: 30px;
        width: 30px;
    }

    .upsquardStoriesPage .gallery-item-3 #video-viewport video {
        object-fit: unset;
        height: 500px !important;
        width: 400px !important;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    .upsquardStoriesPage .gallery .comment-gallery {
        min-width: 400px !important;
        position: absolute;
        bottom: -48%;
        left: 50% !important;
        transform: translateX(-50%);
    }
    .upsquardStoriesPage.publicStoryPage .gallery .publicStory.comment-gallery{
        min-width: 372px !important;
    }

    .upsquardStoriesPage .gallery-item-3 .card .card-img-overlay {
        top: 66% !important;
        width: 100% !important;
        height: 500px;
    }

    .upsquardStoriesPage .triangle-arrow {
        position: absolute;
        top: -77%;
        right: 14%;
        transform: rotate(60deg);
        color: #ffffff;
        font-size: 23px;
    }

    .upsquardStoriesPage .gallery .responseCloseLink1 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink2 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink3 {
        display: none;
    }

    .upsquardStoriesPage .gallery .responseCloseLink5 {
        display: none;
    }

    .upsquardStoriesPage .gallery .smily-comment {
        min-width: 387px !important;
        min-height: 390px;
    }
    .upsquardStoriesPage .gallery .publicStory .smily-comment {
        min-width: 357px !important;
        min-height: 390px;
    }
    .upsquardStoriesPage .select-reaction .cont p {
        font-size: 11px;
    }

    .upsquardStoriesPage .select-reaction h6 {
        font-size: 10px;
    }

    .upsquardStoriesPage .cont {
        padding: 0px 0px;
    }

    .upsquardStoriesPage .emoji-icons {
        width: 13px;
        height: 13px;
        margin-right: 5px;
        margin-bottom: 18px;
    }

    .upsquardStoriesPage .responses strong {
        font-size: 10px;
    }

    .upsquardStoriesPage .responses p {
        font-size: 10px !important;
    }



    .upsquardStoriesPage .message-comment-search input[type="search"] {
        width: 150px;
        font-size: 10px;
    }

    .upsquardStoriesPage .message-comment-icon {
        width: 30px !important;
        height: 30px !important;
    }
    .upsquardStoriesPage .emotionsFilters {
        max-width: 80% !important;
    }
    .upsquardStoriesPage .wheelSearch {
        min-width: 196px !important;
        padding: 6px !important;


        }

    .upsquardStoriesPage .message-comment-icon .bi {
        top: 13% !important;
        left: 19% !important;
        font-size: 15px !important;
    }

    .upsquardStoriesPage .comment-gallery h6 {
        font-size: 12px;
        padding-right: 0px !important;
    }

    .upsquardStoriesPage .comment-gallery .record-comment span {
        font-size: 11px;
        color: #fff;
    }

    .upsquardStoriesPage .video-comment .record-comment {
        padding: 6px 17px !important;
    }

    .upsquardStoriesPage .video-comment .record-comment .bi {
        color: #ffffff;
        font-size: 12px !important;
    }

    .upsquardStoriesPage .video-comment .responses .base-video-img {
        width: 83px !important;
        height: 83px !important;
    }

    .upsquardStoriesPage .gallery .video-comment {
        min-width: 390px !important;
    }

    .upsquardStoriesPage .gallery .publicStory .video-comment {
        min-width: 360px !important;
    }
    .upsquardStoriesPage .video-comment .responses .video-img-thumb .top-video-img {
        width: 45px !important;
        height: 45px !important;
        background-position: center;
        background-repeat: no-repeat;
        border: 2px solid #ffffff;
        border-radius: 100px;
        position: absolute;
        top: -24%;
        left: 20% !important;
    }

    .upsquardStoriesPage .comment-gallery .video-response p {
        font-size: 12px;
    }

    .upsquardStoriesPage .video-comment .responses .video-img-thumb {
        margin-top: 22px;
    }

    .upsquardStoriesPage .video-comment .see-all a {
        font-size: 12px;
    }

    .upsquardStoriesPage .gallery .share-comment {
        min-width: 385px !important;
    }
    .upsquardStoriesPage .gallery .publicStory .share-comment {
        min-width: 356px !important;
    }
    .upsquardStoriesPage .gallery .share-comment .social-link .share-link {
        width: 34px !important;
        height: 34px !important;
        margin: auto;
    }
    .upsquardStoriesPage .gallery .publicStory .share-comment .social-link .share-link {
        width: 30px !important;
        height: 30px !important;
        margin: auto;
    }
    .upsquardStoriesPage .share-comment .social-link {
        column-gap: 1rem !important;
        row-gap: 1rem !important;
        justify-content: center;
    }

    .upsquardStoriesPage .share-comment .social-link .share-link p {
        font-size: 10px;
        padding-top: 10px;
    }

    .upsquardStoriesPage .gallery .report-comment {
        min-width: 390px !important;
        min-height: 60px;
    }
    .upsquardStoriesPage .gallery .publicStory .report-comment {
        min-width: 356px !important;
        min-height: 60px;
    }
    .upsquardStoriesPage .report-comment p {
        font-size: 12px;
    }

    .gallery-item-5 {
        left: 8%;
    }

    .upsquardStoriesPage .message-comment-search input[type="search"] {
        border: 1px solid #f7f7f7;
        border-radius: 100px;
        background-color: #fbfbfb;
        width: 200px;
        margin-bottom: 18px;
    }


    /* Create Story Page */

    .upsquardStoriesPage .createStoriesPage .wheel-emotion {
        /* margin-top: 100px; */
    }

    .upsquardStoriesPage .createStoriesPage {
        /* height: 1200px; */
    }

    .upsquardStoriesPage .createStoriesPage .ourStoryCreation {
        flex-direction: column;
        gap: 40px;
    }

    .upsquardStoriesPage .createStoriesPage .create-story-right {
        padding: 0px;
    }

    .upsquardStoriesPage .createStoriesPage .create-story-left {
        border-right: none;
        margin: auto;
    }

    .upsquardStoriesPage .createStoriesPage .circleMenuView {

        width: 300px;
        height: 400px;
    }

    .upsquardStoriesPage .createStoriesPage .circleMenuView ul.inner {

        width: 260px;
        height: 260px;
    }

    .upsquardStoriesPage .createStoriesPage .circleMenuView ul.inner li:nth-child(7) a {
        bottom: 11%;
        left: -6px;
    }

    .upsquardStoriesPage .createStoriesPage .circleMenuView .outerCircle svg {
        width: 350px;
        height: 380px;
    }

}

@media(min-width:400px) and (max-width:475px) {
    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3.fullScreenVedioDisplay2 {
        width: 100% !important;
        transform: translateX(0%) !important;
    }
    .upsquardStoriesPage .fullScreenVedioDisplay .gallery .gallery-item-3 {
        z-index: 3;
        transform: translateX(0%) !important;
    }
    .upsquardStoriesPage .fullScreenVedioDisplay .gallery-item-3.fullScreenVedioDisplay2 .crossMark {
        top: -1% !important;
        right: -36px !important;
    }
    .upsquardStoriesPage.publicStoryPage .fullScreenVedioDisplay .gallery-item-3.fullScreenVedioDisplay2 .crossMark {
        top: 17% !important;
        right: -26px !important;
    }

.upsquardStoriesPage .emotionsFilters {
    max-width: 100% !important;
    min-width: 50% !important;
}
    header .logoDropdown {
        max-width: 200px !important;
        min-width: 180px !important;
    }
    header .navbar {
        padding: 0px !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery .comment-gallery {
        left: 160px;
    }
   
    .upsquardStoriesPage .gallery .smily-comment .scrollbar {
        overflow-y: scroll;
        max-height: 350px;
        min-height: 80px;
        height: auto;
    }
    .upsquardStoriesPage .gallery .smily-comment .userImg {
        width: 26px;
        height: 26px;
    }
    .upsquardStoriesPage .gallery .share-comment {
        min-width: 310px !important;
    }

    .upsquardStoriesPage .share-comment .social-link {
        column-gap: 1rem !important;
        row-gap: 1rem !important;
        justify-content: center;
    }

    .upsquardStoriesPage .comment-gallery .share-comment p {
        font-size: 10px;
    }

    .upsquardStoriesPage .gallery .smily-comment {
        min-width: 309px !important;
    min-height: 390px !important;
    }

    .upsquardStoriesPage .gallery .video-comment {
        min-width: 309px !important;
    }

    .upsquardStoriesPage .gallery .report-comment {
        min-width: 305px !important;
        min-height: 60px;
    }

    .upsquardStoriesPage .gallery .message-comment {
        min-width: 306px !important;
        min-height: 100px !important;
    }
    .upsquardStoriesPage .message-comment-search input[type="text"] {
        width: 230px !important;
    }

    .upsquardStoriesPage .comment-gallery .video-response p {
        font-size: 11px;
        /* word-break: break-word; */
    }

    .upsquardStoriesPage .gallery-item-3 .card .card-img-overlay {
        top: 0%;
        width: 100% !important;
        height: 500px;
    }

    .upsquardStoriesPage .gallery-item-3 #video-viewport video {
        object-fit: unset;
        height: 500px !important;
        width: 320px !important;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 {
        width: 320px !important;
        height: 500px;
        left: 50%;
    }

    .upsquardStoriesPage .gallery .comment-gallery {
        background: #58c4c6 !important;
        min-width: 321px !important;
        position: absolute;
        bottom: -48%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .upsquardStoriesPage .fullScreenVedioDisplay .gallery .biIconLeft {
        display: none;
    }

    .upsquardStoriesPage .gallery .biIconLeft {
        z-index: 2;
        left: 2% !important;
    }

    .upsquardStoriesPage .gallery .biIconRight {
        right: 2% !important;
        z-index: 2;
    }

    .upsquardStoriesPage .gallery {
        max-width: 320px;
        margin: auto;
    }

    .upsquardStoriesPage .gallery .gallery-controls button {
        font-size: 20px !important;
        background-color: #daeaef;
        color: #58c4c6;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        /* margin: 0 5px; */
    }

    .upsquardStoriesPage .gallery .gallery-controls-previous {
        left: 5%;
        bottom: 176px;
        z-index: 2;
    }

    .upsquardStoriesPage .gallery .gallery-controls-next {
        right: 5%;
        bottom: 176px;
        z-index: 2;
    }

}


@media(min-width:300px) and (max-width:399px) {
    .upsquardStoriesPage.publicStoryPage .gallery .publicStory.comment-gallery {
        min-width: 322px !important;
    }
    .upsquardStoriesPage .tapIcon .modal .btn-close {
        right: 1% !important;
        top: -15% !important;
    }
    .upsquardStoriesPage .gallery .biIconLeft {
        left: 9% !important;
    }
    .upsquardStoriesPage .gallery .gallery-item-3.fullScreenVedioDisplay2 {
        width: 89% !important;
        left: 6% !important;
        transform: translateX(0%) !important;
        
    }
    .upsquardStoriesPage .gallery-item-3.fullScreenVedioDisplay2 #video-viewport video {
        min-height: 45vh !important;
    }
    .upsquardStoriesPage .fullScreenVedioDisplay .gallery-item-3.fullScreenVedioDisplay2 .crossMark {
        top: -5px !important;
        right: -7px !important; 
    }
    .upsquardStoriesPage.publicStoryPage .fullScreenVedioDisplay .gallery-item-3.fullScreenVedioDisplay2 .crossMark {
        top: 17% !important;
        right: -7px !important; 
    }
    .upsquardStoriesPage .gallery .comment-gallery {
        min-width: 321px !important;
        left: 50% !important;
    }
    .upsquardStoriesPage .gallery-item-3 .card .card-img-overlay {
        width: 100% !important;
    }
   
    .upsquardStoriesPage .gallery .gallery-item-3 {
        width: 320px !important;
        left: 50% !important;

    }
    .upsquardStoriesPage.publicStoryPage .gallery .gallery-item-3{
        width: 320px !important;
    }
    .upsquardStoriesPage .searchStoriesByEmotions .circleMenuView .innerCircle2 svg {
        width: 230px !important;
        height: 230px !important;
    }
    header .logoDropdown {
        max-width: 200px !important;
        min-width: 180px !important;
    }
    header .navbar {
        padding: 0px !important;
    }
    .upsquardStoriesPage .modal-content.anotherStory-modal {
        width: 310px;
    }
    .upsquardStoriesPage .gallery-item-3.fullScreenVedioDisplay2 #video-viewport video { 
        min-height: 64vh !important;
        max-height: 61vh !important;
    }
    .upsquardStoriesPage.publicStoryPage .gallery .comment-gallery {
        bottom: -56%;
        left: 50%;
    }
    .upsquardStoriesPage .gallery-item-3 #video-viewport video {
        width: 320px !important;
    }
    
    .createStoriesPage .ourStoryCreation {
        flex-direction: column;
        gap: 30px;
        padding-bottom: 30px;
    }

    .createStoriesPage {
        padding: 20px 20px 0 20px;
    }

    .createStoriesPage .ourStoryCreation .innerCircle2 svg {
        width: 220px !important;
        height: 220px !important;
    }

    .circleMenuView .outerCircle svg {
        width: 300px !important;
        height: 300px !important;
    }

    .circleMenuView {
        width: 270px !important;
    }

    .createStoriesPage .create-story-right {
        padding: 0px !important;
    }

    .createStoriesPage .create-story-left {
        border-right: 0px !important;
    }

    .upsquardStoriesPage .gallery .report-comment {
        min-width: 305px !important;
        min-height: 60px;
    }

    .upsquardStoriesPage .gallery .biIconRight {   
        right: 9% !important;
        top: 70% !important;
    }

    .upsquardStoriesPage .gallery .gallery-item-3 .card .card-img-overlay .card-cont {
        bottom: 10% !important;
        left: 5%;
        width: 90% !important;
    }

    .upsquardStoriesPage .gallery .share-comment { 
        min-width:307px !important;
    }

    .upsquardStoriesPage .comment-gallery .share-comment p {
        font-size: 11px;
    }

    .upsquardStoriesPage .share-comment .social-link {
        column-gap: 0.5rem !important;
        row-gap: 35rem !important;
        justify-content: center;
    }

    .upsquardStoriesPage .gallery .share-comment .social-link .share-link {
        width: 25px !important;
        height: 25px !important;
    }

    .upsquardStoriesPage .everyOneStory .searchEmotion input[type="search"] {
        width: 290px;
    }

    .upsquardStoriesPage .gallery-item-3 video {
        object-fit: unset;
        height: 500px !important;
        width: 360px !important;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    .upsquardStoriesPage.publicStoryPage .gallery-item-3.save-video #video-viewport video {
        width: 370px !important;
    }
    .upsquardStoriesPage .gallery .smily-comment {
        min-width: 307px !important;
        min-height: 390px !important;
    }

    .upsquardStoriesPage .gallery .message-comment {
        min-width: 307px !important;
        min-height: 100px !important;
    }

    .upsquardStoriesPage .gallery .video-comment {
        min-width: 311px !important;
    }

    .upsquardStoriesPage .gallery-item-3 .card .card-img-overlay {
        top: 6%;
        width: 100%;
        height: 500px;
    }
}