body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Cantarell,"Helvetica Neue",sans-serif;
  font-size: 14px;
  padding: 0;
  margin: 0;
  color: #333;
}

.storiesWrapper {
  padding: 12px;
  max-width: 500px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  font-family: monospace;
  padding: 0 12px;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
  height: 56px;
  line-height: 56px;
  margin-bottom: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
h1.Snapgram {
  background: #fff;
  color: #333;
}
h1.FaceSnap {
  background: #3b5998;
  color: #fff;
}
h1.VemDeZAP {
  background: #085e53;
  color: #fff;
}
h1.Snapssenger {
  background: #0084ff;
  color: #fff;
}

.swal2-container {  
  z-index: 999999 !important;
}

.story-tip-wrap {
  display: block;
  /*padding: 20px;
  padding-left: 10px;
  text-align: center;
  margin-left: -50px;*/
}
.tip-box-wrap a.story_link_profile{display: none;}
.tip-box-wrap a.story-tip-wrap{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.story-tip-wrap i, .tip-box-wrap i, .tip-shake-wrap i{
  animation: tilt-shaking .5s infinite;
}
.story-comment-box .success-sent{
  color: #fff;
  background: #00B74A;
  width: 335px;
  padding: 5px;
  border-radius: 5px;
}

.story-comment-box .story-tip-wrap {display: inline;}
.story-comment-box .story-tip-wrap i,
.story-comment-box .tip-box-wrap i{animation: unset;}
.story-tip-wrap i, .tip-box-wrap i{font-size: 34px;}

@keyframes tilt-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(2px, 2px) rotate(2deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-2px, 2px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media (max-width: 500px) {
  #zuck-modal-content .story-viewer .slides .item.preferwidth.active{
    display: flex !important;
    align-items: center;
  }
  #zuck-modal-content .story-viewer .slides .item.preferwidth.active>.media{
    width: 100%;
    height: auto !important;
  }
}
.disclaimer {
  display: block;
  text-decoration: none !important;
  color: #333;
  line-height: 1.5em;
  background: #ffffd2;
  border-radius: 3px;
  margin: 12px 12px 0;
  padding: 12px 12px 12px 74px;
  font-size: 13px;
  max-width: 500px;
  overflow: hidden;
  min-height: 50px;
}
.disclaimer img {
  float: left;
  margin-right: 12px;
  width: 50px;
  position: absolute;
  margin-left: -62px;
}
.disclaimer a {
  color: inherit !important;
  border: 0;
}
.disclaimer p {
  margin: 0;
}
.disclaimer p + p {
  margin-top: 1.25em;
}

.skin {
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  font-weight: bold;
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  font-size: 16px;
  padding: 12px;
  color: #fff;
  background: #333;
}
.skin select {
  background: #fff;
  font-size: inherit;
  text-transform: none;
  max-width: 30%;
}

#zuck-modal #zuck-modal-content .story-viewer .story-comment-box{
  position: absolute;
  bottom: 0;
  z-index: 1000;
  width: 100vw;
  height: 100%;
}
#zuck-modal #zuck-modal-content .story-viewer .story-comment-box-bg{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 72%);
}
#zuck-modal #zuck-modal-content .story-viewer .story-emoji-box{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 250px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#zuck-modal #zuck-modal-content .story-viewer .story-comment-box-inner{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  min-height: 70px;
  display: flex;
  align-items: end;
  justify-content: space-around;
  padding: 0 5px;
}
#zuck-modal #zuck-modal-content .story-viewer .story-hide-comment-box{display: none;}
#zuck-modal #zuck-modal-content .story-viewer .story_comment{
  border-radius: 6px;
  height: 30px;
  border: 1px solid #fff;
  color: #fff;
  padding: 0 10px;
  font-size: 15px;
  background-color: rgb(18 17 17 / 70%);
  /* width: 50vw; */
  width: 83%;
}
#zuck-modal #zuck-modal-content .story-viewer .story-comment-box span{font-size: 36px; margin: 10px;}
#zuck-modal #zuck-modal-content .story-viewer .story-comment-box span:hover,
#zuck-modal #zuck-modal-content .story-viewer .story-comment-box span:focus,
#zuck-modal #zuck-modal-content .story-viewer .story-comment-box span:active{font-size: 34px;}

#zuck-modal #zuck-modal-content .story-viewer .story-comment-box a.send-story-comment:hover{
  text-decoration: none;
}
#zuck-modal #zuck-modal-content .story-viewer .story-comment-box i{
  color: #fff;
  font-size: 24px;
}
#zuck-modal #zuck-modal-content .story-viewer .tip{
  transition: opacity 1s;
  background: #fff;
  color: #487ac1;
  padding: 0.425rem 1.25rem;
  border-radius: 50rem;
  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
}
#zuck-modal #zuck-modal-content .story-viewer .tip.muted{bottom: 25px; display: none;}
#zuck-modal #zuck-modal-content .story-viewer .tip.link{bottom: 75px;}
#zuck-modal #zuck-modal-content .story-viewer a.tip::after{
  background: unset;
}
@media(max-width: 500px){
  #zuck-modal #zuck-modal-content .story-viewer .story-comment-box-inner{
    width: 100%;
  }
}
.mob-lives-wrap, .desk-lives-wrap{
  position: relative; 
  width: auto;
}
/* .desk-lives-wrap{
  padding-left: 15px;
  overflow: auto;
} */
.hide-story-bar{
  position: absolute;
  right: 6px;
  top: -8px;
  font-size: 21px;
  font-weight: bold;
  visibility: hidden;
  transition: visibility 4s ease-in-out;
  z-index: 22
}

.desk-lives-wrap:hover .hide-story-bar {
  visibility: visible;
}

.mob-lives-wrap .hide-story-bar{
  display: inline;
  top: -18px;
  left: auto;
  right: -9px;
}
.hide-story-bar:hover,
.hide-story-bar:focus,
.hide-story-bar:active{text-decoration: none;}

.blur-effect{
  filter: blur(4px);
}
.blur-effect-25{
  filter: blur(25px);
}
.dot-loading{
  position: absolute;
  text-align: center;
  left: 50%;
  top: 20px;
  display: none;
}
.dot-loading.load-active{display: block;}
/**
 * ==============================================
 * Dot Windmill
 * ==============================================
 */
 .dot-windmill {
  position: relative;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #487ac1;
  color: #487ac1;
  transform-origin: 5px 15px;
  animation: dotWindmill 2s infinite linear;
}

.dot-windmill::before, .dot-windmill::after {
  content: '';
  display: inline-block;
  position: absolute;
}

.dot-windmill::before {
  left: -8.66px;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #487ac1;
  color: #487ac1;
}

.dot-windmill::after {
  left: 8.66px;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #487ac1;
  color: #487ac1;
}

@keyframes dotWindmill {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotateZ(720deg) translate3d(0, 0, 0);
  }
}
.colct-btn-box{
  text-align: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
#edit-my-collection #disabled-my-collection{display: none;}
#edit-my-collection ul, #edit-actual-stories ul{
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  justify-content: center;
}
#edit-my-collection ul li, #edit-actual-stories ul li{
  width: 165px;
  height: 165px;
  margin: 5px;
  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
  border-radius: 5px;
  position: relative;
}
#edit-my-collection ul li .settings, #edit-actual-stories ul li .settings{
  position: absolute;
  right: 0;
  width: 35px;
  height: 40px;
  top: 0;
  background: rgb(30 28 28 / 47%);
  border-radius: 0 5px;
}
#edit-my-collection ul li .col-poster, #edit-actual-stories ul li .col-poster{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 80%;
}
#edit-actual-stories ul li .col-poster{height: 100%;}
#edit-my-collection ul li input, #edit-actual-stories ul li input{
  border: 1px  solid #ddd;
  height: 33px;
  width: 100%;
  /*padding: 0 0 0 20px;*/
  text-align: center;
  border-radius: 0 0 5px 5px;
}
#edit-my-collection ul li .col-title, #edit-actual-stories ul li .col-title{position: relative;}
#edit-my-collection ul li .col-title i, #edit-actual-stories ul li .col-title i{
  color: #487ac1;
  position: absolute;
  top: 10px;
  left: 8px;
}
#edit-my-collection ul li img, #edit-actual-stories ul li img{width: 100%;}
.collections-list-stories{
  display: none;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: rgb(124 124 124 / 80%);
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 80px;
}
.collections-list-stories input{
  max-width: 350px;
  margin: 0 auto;
  display: block;
  margin-top: -60px;
  margin-bottom: 20px;
}
.collections-list-stories ul{display: none;}
#edit-my-collection .collections-list-stories.gallery-content ul li{
  box-shadow: 0 0 15px rgb(255 255 255 / 50%);
}
.resave-collection{
  position: absolute;
  right: 50px;
  top: 13px;
}
.collections-list-stories.gallery-content ul li:hover{background-size: cover;}
.close-stories-preview{
  color: #fff;
  font-size: 20px;
  position: absolute;
  right: 20px;
  top: 20px;
}
.close-stories-preview:hover{text-decoration: none;}
.settings .dropdown-menu.show{left: -125px !important;}
.settings .btn.btn-edit-collection{
  padding: 0;
  width: 35px;
  height: 40px;
}
.btn-edit-collection:after{
  cursor: pointer;
  color: #fff;
  content: '\2807';
  font-size: 20px;
  margin:0;
  padding: 0 0 0 5px;
}

#list-of-stories-box .stories.carousel{overflow: unset !important; white-space: unset !important;}
#list-of-stories-box{
  white-space: nowrap;
  overflow: auto;
}

.carousel-item .img-user.carousel-story-item, .carousel-item .img-user-small.carousel-story-item{
  border: 5px solid #bd3381;
}
.carousel-item .img-user-small.carousel-story-item{border-width: 3px;}
.list-of-stories, .list-of-stories-box {
  display: flex;
  align-items: center;
  /*justify-content: center;*/
}
.list-of-stories li{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-size: cover;
  margin-right:5px;
}
.list-of-stories-box #stories{margin: unset; max-width: 100%; padding-bottom:0;}
.sort-box{padding: 12px;}
#sort-by-folder{
  border-radius: 50%;
  border: 1px solid #b0b0b0;
  text-align: center;
  font-size: 21px;
}
.sort-box span{
  display: block;
  margin-top: 10px;
}
#manage_story24{padding: .625rem 2.25rem;}
#addStory .card-header, #folder-modal .card-header, #manage-stories-modal .card-header, #manage-stories24-modal .card-header{color: #fff;}
.gallery-btn-box{
  /* border-bottom: 1px solid #ddd; */
  margin-left: 5px;
  margin-right: 5px;
  padding: 10px 0;
}
#create-preview{float: right;}
#gallery-content-video{display: none;}
.my-stories{margin-top: 15px;}
.gallery-content ul{
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.gallery-content ul li, .upload-box-wrap{
  /* padding: 7px 0 0 10px; */
  margin: 5px;
  width: 165px;
  height: 165px;
  background-size: cover;
  /* background-size: 100%; */
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
  border-radius: 5px;
  position: relative;
}
.upload-box-wrap {background-color: #262626;}
.upload-box-wrap::before {
    content: "+";
    font-size: 30px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.gallery-content ul li:hover{background-size: 115%; cursor:pointer;}
.gallery-content ul li.added{border: 2px solid #487ac1;position: relative;}
/* .gallery-content ul li.added::after { */
.gallery-content ul li.added .g-item-overlay {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    left: 0;
    top: 0;
    transition: opacity 0.6s;
}
.gallery-content ul li .g-item-overlay-transparent{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 0%);
  left: 0;
  top: 0;
  opacity: 0;
}
.gallery-content ul li i{
  display: none;
  color: #fff;
  z-index: 9999;
  font-size: 15px;
  position: absolute;
}
.gallery-content ul li.added i{font-size: 24px; color: #61a2ff;display: block;left: 5px;top: 5px;}
.gallery-content ul li.added i{display: none;}
.gallery-content ul li img{width: 100%; height: 100%;}
.text-url-box{
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.text-url-box input, .gallery-content input{
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  width: 48%;
}
.gallery-content input{width: 100%;}
.g-step-1{display: none;}
.save-story-box{
  text-align: right;
  margin-bottom: 10px;
  margin-top: -30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.g-step-1 .preview-story{text-align: center;}
.g-step-1 .preview-story .image-box{width: 60%; margin: 0 auto;}
.g-step-1 .preview-story img{max-width: 100%}
.story-settings{
  display: flex;
  justify-content: space-between;
}
.title-image-box{display: none;}
.title-image-box.active-preview{display: block;}
.preview-story .text-url-box{display: none;}
.add-text{font-size: 21px;display: none;}
#back-step-0{
  margin-bottom: 20px;
  display: block;
  /*margin-top: -20px;*/
}
.list-stories.gallery-content {
  background-color: #707070;
  margin-top: 15px;
  border-radius: 5px;
}
.list-stories.gallery-content ul li i, .list-stories.gallery-content ul li .numberCircle{display: none !important;}
.list-stories.gallery-content li, .upload-box-wrap{
  width: 75px;
  height: 100px;
}
.list-stories.gallery-content ul li.added .g-item-overlay{display: none;}
.list-stories.gallery-content ul li.added{border:0;/*border: 2px solid #487ac1;*/}
.list-stories.gallery-content ul li:hover{background-size: cover;}

.media .stretched-link::after{left: 110px;}

.numberCircle {
  font: 12px Arial, sans-serif;
  width: 2em;
  height: 2em;
  /*box-sizing: initial;*/
  /*box-sizing: content-box;*/
  background: #61a2ff;
  border: 0.1em solid #fff;
  color: #fff;
  text-align: center;
  border-radius: 50%;    
  line-height: 2em;
  position: absolute;
  z-index: 9;
  left: 5px;
  top: 5px;
  display: none;
}
.gallery-content ul li.added .numberCircle{display: block;}

.carousel-item{height: 100%;}
.story-loading{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin 1s linear infinite;
  position: absolute;
  z-index: 999;
  border: 3.5px inset #bd3381;
}
#paidedStoriesBlock, #freeStoriesBlock {border-bottom: 1px solid #ddd;}
#paidedStoriesBlock p{font-weight: bold;}
#paidedStoriesBlock ul{padding: 0;}

#paided-highlights{margin-bottom: 0; padding-top:12px;}
#paided-highlights .price{color: #000;}

.type-of-highlights p{margin-bottom: 0;}

.stories-box{
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  justify-content: center;
}
.stories-box .story-item, .story-detail-box .story-item{
  background-color: #01406b;
  width: 135px;
  height: 235px;
  margin: 5px;
  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
  border-radius: 5px;
  position: relative;
  margin-bottom: 20px;
}
.story-info-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
}
.viewed-count{
  background: #fff;
  /*position: absolute;
  left: 5px;
  top: 5px;*/
  padding: 0 5px;
  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
  font-weight: bold;
  font-size: 12px;
  color: #212529;
  border-radius: 3px;
  width: auto;
  margin-right: 5px;
}
.story-created, .story-price{
  border-radius: 3px;
  /*background: #d7d7d7;
  position: absolute;
  z-index: 5;
  right: 5px;
  top: 5px;
  width: 35px;
  box-shadow: 0 0 10px rgb(0 0 0 / 50%);*/
  padding: 0 5px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
.story-price{
  width: auto;
  left: 5px;
  bottom: 5px;
  top: unset;
  font-size: 14px;
  z-index: 1;
  /*padding-top: 5px;*/
  margin: 0 auto;
  display: block;
  max-width: 65px;
  background-color: #fff;
  color: #01406b;
  margin-top: 5px;
  text-transform: uppercase;
}
.anl-list .story-price{
  top: 40px;
  bottom: unset;
  left: 5px;
  right: unset;
}
.story-poster{
  width: 100%;
  /*height: 100%;*/
  height: calc(100% - 61px);
  border-radius: 5px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.story-item video{
  border-radius: 5px;
  height: calc(100% - 60px) !important;
  margin-bottom: -5px;
}
.story-anl-row{
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.story-item .story-anl-box{display: none;}
.story-item .video-cover{
  z-index: 99;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.remove-stream{
  position: absolute;
  z-index: 101;
  color: red;
  top: 5px;
  left: 10px;
}
.detail-box{
  display: flex;
}
.detail-box .detail-poster{margin-right: 30px;}
.detail-box .detail-info{width: 100%; }
.detail-box .detail-info .story-det-item{
  background-color: #01406b;
  text-align: center;
  padding: 5px;
  font-size: 16px;
  margin-bottom: 10px;
  max-width: 100%;
  width: 100%;
  color: #fff;
}
.story-darkmode .detail-box .detail-info .story-det-item{
  color: #01406b;
  background-color: #fff;
}

.story-detail-box {
  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
  border-radius: 5px;
}
.story-detail-box p{font-weight: bold; color: #424242;}
.story-detail-box .anl-list{padding: 0; height: 100%;}
.story-detail-box .anl-list .story-item{width: 100%; box-shadow: none;}
.story-detail-box .anl-list .story-poster{
  width: 120px;
  height: 175px;
  margin: 0 auto;
  overflow: auto;
}
.story-detail-box video{height: 125px !important;}
.story-detail-box a:hover{text-decoration: none;}
.story-detail-box .story-anl-box{
  display: block;
  margin-left: -10px;
  overflow-y: auto;
  height: calc(100% - 180px);
  max-height: 555px;
}
.story-detail-box .view-total{
  padding: 1px 8px;
  background-color: #487ac1;
  color: #fff;
  border-radius: 3px;
  font-size: 12px;
}
.story-detail-box .close-story-detail{display: none;}
.reaction-count{display: block;}
.reaction-box{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.reaction-box .story-name-box{padding: 0 5px;}
.story-reaction-list {padding: 0;}
.story-reaction-list li{border-bottom:1px solid #ddd;}
#showStoryReaction {z-index: 2000;}
#showStoryReaction h3{color: #fff;}
.storybox .story-poster{
  width: 100px;
  min-height: 150px;
  margin: 0 auto;
}

@keyframes spin { 
  100% { 
    transform: rotateZ(360deg);
  }
}

::-webkit-scrollbar-thumb {
  background: #487ac1;
}

@media (max-width: 991px) {
  .story-detail-box .story-created{right: 35px;}
  .story-detail-box .close-story-detail{
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .story-detail-box.opened h1{color: #333;}
  .story-detail-box.opened{
    border-radius: 5px 5px 0 0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 98%;
    height: 90%;
    top: 55px;
    overflow: hidden;
    color: #FFF;
    transition: all 1s;
    z-index: 1500;
    background-color: #fff;
    left: 0;
    position: fixed;
  }
  .story-detail-box{top: 100%;height: 0;position: fixed;}
}
@media (max-width: 768px) {
  .g-step-0, .g-step-1{margin-top: 1.5rem;}
  .gallery-content ul li {
    width: 75px;
    height: 105px;
  }
  #edit-my-collection ul li, #edit-actual-stories ul li{
    width: 120px;
    height: 150px;
  }
}
@media (max-width: 524px) {
  .card-header h3{font-size: 1.5rem;}
  .settings .dropdown-menu.show {
    left: -55px !important;
  }
}
@media (max-width: 463px) {
  #manageStories{margin-bottom: 10px;}
}
@media (max-width: 430px) {
  .manage-btn{width: 100%;}
}
@media (max-width: 408px) {
  .active-collections{margin-bottom: 10px;}
}
@media (max-width: 390px) {
  .story-comment-box .story-tip-wrap {display: none;}
}
@media (min-width: 524px) {
  .disclaimer {
    margin: 12px auto;
  }
}