/* Story style */
.tui-image-editor-header-logo{
  display:none !important;
}
.tui-image-editor-header-buttons, .tie-btn-delete, .tie-btn-deleteAll, .tie-btn-zoomIn, .tie-btn-zoomOut, .tie-btn-hand, .tui-image-editor-icpartition{
  display:none !important;
}
.strory-widget {
  position: relative;
  width: 100%;
  background: transparent;
}

.storyThumb {
  display: inline-block;
  width: 150px;
  height: 250px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  margin: 0 5px;
  overflow: hidden;
  border-radius: 10px;
}

.storyThumb .storyThumb-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(transparent, rgb(0 0 0 / 60%));
}

.storyThumb .storyThumb-img {
  width: 100%;
  height: 100%;
}

.storyThumb .storyThumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.storyThumb-name {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px;
  color: var(--ptv-color-white);
  z-index: 1;
  font-size: 18px;
  font-weight: 500;
}

.storyThumb-profileImg {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  z-index: 1;
  gap:10px;
}

.storyThumb-profileImg img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  border: 2px solid var(--ptv-primary-bg);
}

.storyThumb-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent);
  z-index: 0;
}

.storyThumb-overlay:hover::after {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), transparent);
}

.storySlide-prev.storySlideBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  left: 0;
}

.storySlide-next.storySlideBtn {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  right: -44px;
}

.storySlideBtn {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* details story */
.story-details {
  position: fixed;
  background: var(--ptv-body-bg);
  z-index: 99;
  width: 100%;
  display: flex;
  top: 0;
  left: 0;
}

.story-details .story-sidebar {
  width: 25%;
  padding: 12px;
  background-color: var(--ptv-default-bg);
  position: relative;
  height: calc(100vh);
}
.story-details .story-sidebar a{
  color: var(--ptv-default-text);
}
.story-details .story-sidebar .options a{
  margin-right:10px
}
.stories_privacy form .input-group{
  margin-top: 10px;
}
.story-details .story-content {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--ptv-body-bg);
}

h2.heading-sdbar {
  font-size: 24px;
  font-weight: 500;
  margin: 0;
}

.sdTitleStory {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.addStoryBtn .btncrle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ptv-default-bg);
  color: var(--ptv-default-text);
}

.addStoryBtn {
  color: var(--ptv-default-text);
}

.addStoryBtnText {
  margin-left: 16px;
}

.storyList {
  height: 100vh;
  width: 100%;
  overflow-y: auto;
}

.storyListBox {
  position: relative;
  height: calc(100% - 160px);
  overflow: hidden;
  overflow-y: auto;
  width: 100%;
}

.story-users-list a {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-radius: 10px;
  padding-left: 6px;
  color: var(--ptv-default-text);
}

.story-users-list a .story-media {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
  border: 2px solid var(--ptv-primary-bg);
}

.story-users-list a .story-media img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  border-radius: 50%;
  border: solid var(--ptv-color-white) 1px;
}

.story-users-list a .story-text {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
  font-size: 16px;
  font-weight: 500;
  color: var(--ptv-default-text);
}

.story-users-list a .story-text .story-username {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.2;
}

.story-users-list a .story-text p {
  font-size: 13px;
  margin: 0;
  font-weight: 300;
}

.story-users-list a:hover,
.story-users-list a.active {
  background: var(--ptv-icon-bg-hover);
}

.storyDetails-Bg {
  width: 100%;
  height: 100%;
  position: relative;
}

.storyDetails-BgImg {
  width: 100%;
  height: 100%;
  position: absolute;
}

.storyDetails-BgImg .bgImg {
  width: 100%;
  height: 100%;
}

.storyDetails-BgImg .bgImg:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
  background-color: rgba(0, 0, 0, 0.5);
}

.storyDetails-BgImg .bgImg:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.2));
}

.storyDetails-contentWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
}

.storyDetails-contentBox {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.storyDetails-cntent {
  border-radius: 8px;
  overflow: hidden;
  margin: 15px 0;
  min-height: 300px;
  min-width: calc(350px * 9 / 16);
  position: relative;
  display: flex;
  flex-direction: row;
  height: calc(100% - 45px);
  width: calc(100vh * 9 / 16);
  background: #000000;
}
.storyDetails-cntent-image{
  width: 100% !important;
}
.storyDetails-cntent .imageBox {
  width: 100%;
  height: 100%;
  position: relative;
}

.storyDetails-cntent .imageBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.storyDetails-cntent .imageBox video{
  width: 100%;
  height: 100%;
} 
.storyDetails-contentBox .btn-slide {
  width: calc((100vh * 9 / 16) + 110px);
  position: absolute;
  display: flex;
  align-items: center;
  height: calc(100% - 0px);
  bottom: 50px;
}

.btn-slide {
  position: relative;
  width: 100%;
}

.btn-mcircle-40 {
  width: 48px;
  height: 48px;
  background: var(--ptv-primary-bg);
  color: var(--black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.9;
  color: var(--ptv-color-white);
}

.btn-mcircle-40 .material-icons {
  font-size: 24px;
  font-weight: 500;
}

.btn-slide .prev .material-icons {
  margin-left: 10px;
}

.btn-mcircle-40:hover {
  opacity: 1;
}

.btn-slide .next,
.btn-slide .prev {
  position: absolute;
}

.btn-slide .next {
  right: 0;
}

.btn-slide .prev {
  left: 0;
}

.storyDetails-slidIndictr {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 24px);
  margin: 12px;
  height: 4px;
  display: flex;
  z-index: 1;
}

.slidIndictr-nmbr {
  margin-right: 4px;
  height: 100%;
  background: var(--ptv-color-white)66;
  border-radius: 100px;
  flex: 1 1 auto;
  cursor: pointer;
}

.slidIndictr-nmbr-see {
  height: 100%;
  background-color: var(--ptv-color-white)cc;
  border-radius: 100px;
}

.storyDetails-userName {
  position: absolute;
  top: 30px;
  left: 0;
  width: calc(100% - 24px);
  margin: 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}

.storyDetails-userName .nameTitme {
  flex-grow: 1;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  color: var(--ptv-color-white);
}

.storyDetails-userName .nameTitme .img {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;;
  display: block;
  margin-right: 8px;
  overflow: hidden;
}

.storyDetails-userName .nameTitme .img img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #fff;
}

.storyDetails-userName .nameTime {
  flex-grow: 1;
  display: flex;
  align-items: center;
  color: var(--ptv-color-white);
  margin-top: -18px;
}

.storyDetails-userName .nameTime .name,.storyDetails-userName .nameTime .follow-member  {
  flex-grow: 1 1 auto;
  font-size: 16px;
  font-weight: 700;
  color: var(--ptv-color-white);
  margin-right: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.storyDetails-userName .nameTime .time {
  font-weight: 400;
  font-size: 12px;
  color: var(--ptv-color-white);
  white-space: nowrap;
  position: absolute;
  top: 20px;
}

.optionStoryslid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.optionStoryslid .icon {
  color: var(--ptv-color-white);
  cursor: pointer;
  font-size: 24px;
  margin: 0 4px;
  display: flex;
}
.optionStoryslid .icon a {
display: flex;
}
.optionStoryslid .icon a.icon-Dvert{
  color: var(--ptv-color-white);
}
.optionStoryslid .moreOptionsShow.show li a{
color: var(--ptv-default-text);
}

.storyTopOverlay {
  background-image: linear-gradient(180deg,
      rgba(0, 0, 0, 0.35),
      rgba(0, 0, 0, 0.08) 52.5%,
      rgba(0, 0, 0, 0));
  height: 20%;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%;
}

.storyBtmOverlay {
  background-image: linear-gradient(180deg,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.08) 47.5%,
      rgba(0, 0, 0, 0.35));
  height: 20%;
  position: absolute;
  z-index: 10;
  bottom: 0;
  width: 100%;
}

.storyLike-wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
  padding: 15px 8px;
  color: var(--ptv-color-white);
}

.storyLike-wrap .storyLike-iinr {
  display: flex;
  align-items: center;
}

.storyLike-wrap .storyLike-iinr .iconGroup {
  margin-right: 8px;
}

.storyLike-wrap .storyLike-iinr .iconGroup .icon {
  width: 18px;
  margin-right: 4px;
}

.storyLike-wrap .storyLike-iinr .iconGroup .icon img {
  width: 100%;
  height: auto;
}

.storyComentLike-wrap {
  width: 100%;
  margin-bottom: 12px;
  max-width: 550px;
  min-width: 330px;
  height: 50px;
}

.stotyLike-wrap {
  margin-left: 10px;
}

.storyComment-wrap {
  height: 40px;
  border: 1px solid var(--ptv-color-white);
  border-radius: 100px;
  display: flex;
  align-items: center;
  min-width: 300px;
  max-width: 530px;
  background: transparent;
  padding: 4px 10px;
  width: 100%;
}

.storyComment-wrap .inputtxt input {
  background: transparent;
  width: 100%;
  border: none;
  color: var(--ptv-color-white);
}

.storyComment-wrap .inputtxt input:focus {
  outline: none;
}

.storyComment-wrap .actnBtn {
  margin-left: 8px;
  display: flex;
  align-items: center;
}

.storyComment-wrap .actnBtn .iconGif {
  background: var(--ptv-color-white);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.storyComment-wrap .actnBtn .iconGif .material-icons {
  font-size: 26px;
}

.storyComment-wrap .actnBtn .iconemgSnd {
  background: transparent;
  cursor: pointer;
  color: var(--ptv-color-white);
  margin-left: 8px;
}

.storyComment-wrap .actnBtn .iconemgSnd .material-icons {
  font-size: 28px;
}

.storyMoreBtn {
  width: 120px;
  background: #fff;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-top: 10px;
  border-radius: 100px;
  padding: 10px 20px;
  color: #000000 !important;
  font-size: 16px;
}

.storyMoreBtn:hover {
  color: #000000;
}

.likeOptn-innr .likeOptn-item {
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
  margin-left: 8px;
}

.likeOptn-innr .likeOptn-item:first-child {
  margin-left: 0;
}

.likeOptn-innr .likeOptn-item img {
  width: 100%;
  height: 100%;
}

.storyShare-btnWrap {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 15px 8px;
  width: 100%;
  height: 72px;
  box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
}

.storyShare-btnB {
  width: 100%;
  height: 100%;
  display: flex;
}

.storyShare-btnB .btn {
  border-radius: 8px;
  flex: 1 1 auto;
  margin: 0 8px;
}

.createstory-content {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box460330 {
  max-width: 600px;
  width: 100%;
  height: 230px;
  position: relative;
  align-items: center;
  justify-content: space-between;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  grid-template-rows: 1fr;
  grid-gap: 8px;
  padding-bottom: 16px;
  padding: 0 15px;
}

.box460330 .boxes {
  width: 100%;
  position: relative;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.create-story-photo-box {
  width: 100%;
  height: 100%;
  background: #56ccf2;
  background: -webkit-linear-gradient(to left, #2f80ed, #56ccf2);
  background: linear-gradient(to left, #2f80ed, #56ccf2);
}

.create-story-text-box {
  width: 100%;
  height: 100%;
  background: #da4453;
  background: -webkit-linear-gradient(to left, #89216b, #da4453);
  background: linear-gradient(to left, #89216b, #da4453);
}

.box460330 .boxes .icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ptv-color-white);
  color: var(--ptv-color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.box460330 .boxes .name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ptv-color-white);
  padding: 10px;
  text-align: center;
}

.storyPreview-wrap {
  max-width: 992px;
  min-width: 350px;
  width: 100%;
  height: 100%;
  background: transparent;
  position: relative;
}

.storyPreview-innr {
  background: var(--header-sidebar-bg);
  margin: 30px 15px;
  width: calc(100% - 30px);
  height: calc(100% - 60px);
  border-radius: 15px;
  padding: 15px;
  box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  position: relative;
}

.storyPreview-title {
  padding-bottom: 15px;
  font-size: 18px;
}

.storyPreview-conent {
  position: relative;
  height: calc(100% - 37px);
  width: 100%;
  background: #18191a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.storyPreview-conent .viewStory-cntent {
  height: calc(100% - 24px);
}

.storyText-Content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.storyText-innr {
  padding: 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  z-index: 9;
}

.storyText-innr .fontset {
  white-space: pre-line;
  text-align: center;
}
.fontset {
  color: var(--ptv-color-white);
  font-size: 20px;
}
.storyBgApply {
  display: flex;
  flex-wrap: wrap;
}

.storyBgApply .storyBgSelect {
  width: 38px;
  height: 38px;
  position: relative;
}

.storyBgApply .storyBgSelect .imgbg {
  cursor: pointer;
  margin: 4px;
  padding: 3px;
}

.storyBgApply .storyBgSelect .imgbg img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
}
.Story-rightSide{
  width: 15%;
  min-width: 250px;
  max-width: 350px;
    padding: 12px;
    background-color: var(--ptv-default-bg);
    position: relative;
    height: 100vh;
}
.viewStory-ourInnr {
  position: relative;
  width: 100%;
  height: 100%;
}

.viewStory-ourInnr .title {
  font-size: 17px;
  font-weight: 500;
  color: var(--secondary-text);
  padding: 15px 0;
}

.storyDetls-sdBarwrap {
  padding: 15px 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 30px;
}

.storyDetls-sdBarwrap .imgShow {
  width: 70px;
  height: 80px;
  margin-right: 12px;
  cursor: pointer;
}

.storyDetls-sdBarwrap .imgShow.active {
  width: 80px;
  height: 90px;
}

.storyDetls-sdBarwrap .imgShow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.createStoryBtn {
  background: var(--secondary-button-background);
  font-size: 12px;
}

.createStoryBtn .addStoryBtn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icon-circle-bg-hover);
  margin-bottom: 4px;
}

.storySeePeople-wrap {
  position: relative;
  height: calc(100% - 10px);
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.storySeePeople-innr {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Archive */
.storyGrid-contentBox {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 15px;
  max-width: 1220px;
}
.storyMuted-contentBox{
  position: relative;
  height: 100%;
  width: 100%;
  padding: 15px;
  max-width: 768px;
}
.storyGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  grid-template-rows: 1fr;
  grid-gap: 15px;
}
.storyArchiveThumb {
  position: relative;
  width: 100%;
  height: 300px;
  display: block;
}
.storyArchiveThumb::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent);
  z-index: 0;
}
.storyArchiveThumb-img{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.storyArchiveThumb-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.storyArchiveThumb .story-date{
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px;
  z-index: 1;
}
.storyMuted-list {
  padding: 0 16px;
  box-sizing: content-box;
}
.storyMuted-list .frndRow {
  padding: 8px 0;
}
.frndImgName .img {
  border-radius: 50%;
  position: relative;
  height: 40px;
  width: 40px;
  margin-right: 12px;
}
.avatar-40 {
  height: 40px;
  width: 40px;
  object-fit: cover;
  object-position: top;
}

.strory-widget .slide-item .storyThumb{
  width: 100%;
}
.createStoryBlock .storyThumb-img{
  height: calc(100% - 50px);
}
.createStoryBlock a{
  color: var(--ptv-default-text);
}

.createStoryBlock .create-story-btn {
  background: var(--ptv-default-bg);
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  bottom: 0;
}
.createStoryBlock .create-story-btn .icon {
  width: 40px;
  height: 40px;
  border: 3px solid var(--ptv-default-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -30px;
  color: var(--ptv-default-text);
  background: var(--ptv-default-bg);
}
.reel-view .reels-user-content ul li .countBtnPill .align-items-center, .stories-user-content ul li .countBtnPill .align-items-center{
  display: flex !important;
  flex-direction: column;
}
.story-content .header-left{
  display: none !important;
}
.story-content #header{
  box-shadow:none !important;
}
@media only screen and (max-width: 1700px) {
  .storySlide-prev.storySlideBtn{
    left: 20px;
  }
  .storySlide-next.storySlideBtn{
    right: -33px;
  }
}


.popupHeader{
  position: fixed;
    background: transparent;
    z-index: 8;
    width: 100%;
    display: flex;
    top: 0;
    height: 65px;
}
.HeaderCloseLogo{
  display: flex;
    align-items: center;
    width: 25%;
    padding: 12px;
    background-color: var(--ptv-default-bg);
    border-bottom: 1px solid var(--ptv-border-default);
}
.popupHeader .closeBtn{
  min-width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ptv-grid-bg);
    color: var(--ptv-default-text);
    margin-right: 15px;
}
.HeaderCloseLogo-logo{
  max-width: 200px;
    min-width: 100px;
}

.textShow{
  height: 100%;
  overflow-y: overlay;
  word-break: break-all;
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
}
.storyText-innr .clean {
  font-weight: 600;
  line-height: 24px;
font-size: 20px;
}


.storyText-innr .sample {
  font-weight: 500;
  line-height: 24px;
  text-transform: lowercase;
  font-size: 20px;
}


.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button{
  width: 18px;
  height: 18px;
}
.tui-image-editor-container .color-picker-control{
  width: 400px;
}
.tui-image-editor-container.bottom .tui-image-editor-submenu > div{
  background: var(--ptv-grid-bg)!important;
}
.tui-image-editor-container .tui-image-editor-checkbox label > span:before{
  background-color: var(--ptv-default-text)!important;
}
.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container ul{
  display: flex;
    flex-wrap: wrap;
}
.tui-colorpicker-palette-hex{
margin-top: -12px;
}
.tui-image-editor-container .tui-colorpicker-palette-hex{
  height: auto;
}
.tui-image-editor-container .tui-colorpicker-palette-preview{
  height: 20px;
  width: 20px;
}
.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item label > span,
.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value + label{
  color:  var(--ptv-default-text)!important;
}
.tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] label, 
.tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype="icon-heart"] label, 
.tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype="icon-location"] label, 
.tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype="icon-polygon"] label, 
.tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype="icon-star"] label, 
.tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype="icon-star-2"] label, 
.tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype="icon-arrow-3"] label, 
.tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype="icon-arrow-2"] label, 
.tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype="icon-arrow"] label, 
.tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] label, 
.tie-draw-line-select-button.line .tui-image-editor-button.line label, 
.tie-draw-line-select-button.free .tui-image-editor-button.free label, 
.tie-flip-button.flipX .tui-image-editor-button.flipX label, 
.tie-flip-button.flipY .tui-image-editor-button.flipY label, 
.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip label, 
.tie-crop-button .tui-image-editor-button.apply.active label, 
.tie-crop-preset-button .tui-image-editor-button.preset.active label, 
.tie-resize-button .tui-image-editor-button.apply.active label, 
.tie-resize-preset-button .tui-image-editor-button.preset.active label, 
.tie-shape-button.rect .tui-image-editor-button.rect label, 
.tie-shape-button.circle .tui-image-editor-button.circle label, 
.tie-shape-button.triangle .tui-image-editor-button.triangle label, 
.tie-text-effect-button .tui-image-editor-button.active label, 
.tie-text-align-button.tie-text-align-left .tui-image-editor-button.left label, 
.tie-text-align-button.tie-text-align-center .tui-image-editor-button.center label, 
.tie-text-align-button.tie-text-align-right .tui-image-editor-button.right label, 
.tie-mask-apply.apply.active .tui-image-editor-button.apply label, 
.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover > label, 
.tui-image-editor-container .tui-image-editor-checkbox label > span,
.tui-image-editor-container .tui-image-editor-range-wrap label{
  color: var(--Textcolor-primary)!important;
}
.tui-image-editor-container .tui-image-editor-range-wrap label{
  color: var(--ptv-default-text)!important;
}
.tui-image-editor-submenu use.active.use-default{
  fill: var(--Textcolor-primary)!important;
  stroke: var(--Textcolor-primary)!important;
}
.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.apply label, 
.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.cancel label {
  vertical-align: 0px;
}

.story-details .no-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0!important;
}
.stories-loader{
  margin: 0px auto;
  width: 100px;
  height: 70px;
  margin-top: 15px;
  position: relative;
}
.storyThumb.shimmer{
  margin: 5px;
}
.addStoryBtn.active{
  background: var(--Bgcolor-secondry);
}
.addStoryBtn{
  background: var(--ptv-grid-bg);
  padding: 10px;
  border-radius: 8px;
}
.archive-stories .story-content{
  z-index: 9999;
}
.storyArchiveThumb{
  color: white !important;
}
.storyArchiveThumb:hover{
  color:white;
}
.archiveStories .stories-view .HeaderCloseLogo-logo{
  display: none;
}
.archiveStories .stories-view .HeaderCloseLogo{
  background-color: transparent;
  border:none !important;
}
.stories-open .headerCircleIcon,
.stories-open .rightTopList ul.custmenuRight li a svg,
.stories-open ul.minimenu-header li a svg{
  color:#fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}
/* .stories-open .usepicHead,
.stories-open .logo-text{
  color:#fff !important;
} */
.stories-open .headerCircleIcon:hover,
.stories-open .usepicHead:hover{
  background-color:#333;
}
@media only screen and (max-width: 1000px) {
  
  .btn-slide{
    position: absolute;
    height: 100%;
    display: initial;
  }
  

  .stories-view .popupHeader{
    right: 0;
    width: auto;
    top: 23px;
  }
  .stories-view .optionStoryslid{
    margin-right: 40px;
  }
  .stories-open #MobHeader{
    display: none;
  }

  
  .HeaderCloseLogo-logo{
    display: none;
  }
  .story-sidebar{
    display: none;
  }
  .storyGrid-contentBox{
    height:100% !important;
  }
  .story-content{
    z-index: 9999;
  }
  .storyListBox{
    height:100% !important;
  }
  .story-details-create{
    height:auto !important;
    max-height:100vh;
  }
  .story-details-create .story-sidebar{
    display:block;
  } 
  .story-details .story-sidebar{
    margin-top: 5px;
  }
  .story-details .story-content{
    height: 100%;
  }
  .storyDetails-cntent{
    height:100vh;
    margin:0px;
  }
  
  .storyDetails-Bg{
    position:absolute;
  }
  .story-details{
    overflow-y: scroll;
    height: 100%;
    flex-direction: column;
  }
  .storyDetails-contentWrap{
    position: relative;
  }
  .story-details .story-sidebar{
    height:auto;
    max-height: inherit;
    width: 100% !important;
  }
  
  .stories-view .Story-rightSide{
    width: 100% !important;
    max-width: 100%;
  }
  
  
  .popupHeader .closeBtn{
    min-width: 30px;
    height: 30px;
    margin-right: 5px;
  }
  .HeaderCloseLogo{
    background-color: transparent;
    border: none;
    padding: 6px;
  }
  
  .popupHeader{
    height: 45px;
    z-index: 999999;
  }
  
}
@media only screen and (max-width: 700px) {
  .storyDetails-contentBox .btn-slide{
    height: 100%;
    width: 100% !important;
  }
  .storyDetails-contentBox .btn-slide .next{
    margin-right: 10px;
  }
  .storyDetails-contentBox .btn-slide .prev{
    margin-left: 10px;
  }
  .storyDetails-contentBox .btn-slide .btn-mcircle-40{
    z-index: 999;
  }
}
@media only screen and (max-width: 600px) {
  .storyDetails-cntent{
    width: 100%;
  }
  .reel-view .storyText-Content{
    margin-left: 10px;
  }
  /* .reel-view .reels-user-content, .stories-user-content{
    margin-right: 10px;
  } */
  .box460330{
    height:auto !important;
    padding-bottom: 30px !important;
  }
  .story-sidebar .storyList{
    height:80vh;
  }
  
  
  .storySlide-prev, .storySlide-next{
    display: none;
  }
  .imageBox video{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
  }

  
  
 
}

.storyText-innr .textShow h5{
  color:white;
}
.storyThumb-img p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.stories-open{
  position: fixed;
}
.stories-open .content-wrap.ml100{
  margin-left: 0px !important;
}

.reel-header .HeaderCloseLogo{
  background-color: transparent !important;
  border-bottom:none !important;
}
.content-wrap .fixed-top{
  top: 0 !important;
  right: 0 !important;
  position: absolute !important;
  left:unset !important;
}
.content-wrap .top-header{
  justify-content: flex-end;
}
.content-wrap .fixed-top{
  z-index: 999999 !important;
  background:none !important;
}
.content-wrap .top-header .left-side, .content-wrap .top-header .head-search{
  display:none !important;
}

.reel-view .storyText-Content{
  height:auto !important;
  bottom:20px;
  width: 80%;
}

.reel-view .storyText-innr .fontset{
  font-size: 16px;
  color:var(--ptv-default-text);
}
.reel-view .storyText-innr .fontset.description{
  font-size: 14px;
}
.reel-view .storyText-innr{
  padding:10px;
  display:block;
}
.reel-view .reels-user-content, .stories-user-content{
  z-index: 9999;
  position: absolute;
  bottom: 0;
  right: 10px !important;
  color: var(--ptv-color-white);
  display: flex;
  align-items: end;
  text-align: center;
  /* padding: 0 5px; */
  flex: 0 0 auto;
}
.reel-view .reels-user-content ul,
.stories-user-content ul{
  list-style-type: none;
  padding: 0px;
}
.reel-view .reels-user-content ul li span.icon,
.stories-user-content ul li span.icon,
.reel-view .reels-user-content ul li.story_share{
  display: flex;
  flex-flow: column;
  align-items: center;
  margin-bottom: 5px;
}
.reel-view .reels-user-content ul li span.icon span, .reel_share a,
.stories-user-content ul li span.icon span, .story_share a{
  width: 32px;
  height: 32px;
  background: rgb(0 0 0 / 50%);
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  margin-bottom: 3px;
}
.reel_share a,
.story_share a{
  display:block !important;
  padding-top: 4px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff !important;
}
.reel_share a:hover,
.story_share a:hover{
  background: #787878a8 !important;
}
.reel-view .storyText-innr, .reel-view .storyText-innr .textShow{
  justify-content:start;
}
.reel-view .storyText-innr .textShow{
  font-size:14px;
}
.story-details .top-header .no-content{
  position: initial;
  top: initial;
  left: initial;
  transform: initial;
  margin: 0;
}
.reels .storyThumb{
  height:350px;
}
.details-tab-box .storyThumb{
  width: 100%;
  height: 350px;
}
.reelThumb{
  height: 350px !important;
  width: 250px;
}
.reel-processing{
  position: absolute;
  width: 100%;
  height: 100%;
}
.stories-user-content{
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 99999;
}
.reel-content-info{
  position: absolute;
  bottom: 10px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 10px;
  z-index: 1;
}
.reel-content-info .view{
  display: flex;
  align-items: center;
  color: var(--ptv-color-white);
}
.reel-content-info .view span{
  margin-right: 5px;
}
.reelThumb-profileImg{
  display: flex;
  align-items: center;
  color: var(--ptv-color-white);
  font-weight:600;
}
.reels .storyThumb-name,
.gridReels .storyThumb-name{
  bottom:30px;
  word-break: break-word;
}
.reelThumb-profileImg img{
  margin-right: 5px;
}
.storyLikeShare li:not(.story_share) .countBtnPill{
  color: var(--ptv-color-white);
  background: transparent;
  transition: all 0.3s linear;
}
.storyLikeShare .countBtnPill:hover{
  background: transparent!important;
}
.storyLikeShare .countBtnPill:hover .materialIconCust
{
  color: var(--ptv-color-white);
  background: rgb(0 0 0 / 70%)!important;
}
.storyLikeShare .story_share .overflow-hidden{
  overflow: initial!important;
}
.storyLikeShare .countBtnPill .materialIconCust,
.storyLikeShare .story_share .countBtnPill .material-icons-outlined
{
width: 32px;
height: 32px;
background: rgb(0 0 0 / 50%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.storyLikeShare li:not(.story_share) .countBtnPill:hover{
  color: var(--ptv-color-white);
  background: none!important;
}

@media only screen and (max-width: 1100px) {
  .content-wrap .top-header{
    display:none !important;
  }
}
